:root{
  --radius: 22px;

  /* ✅ 背景人物位置调这里（越大越往右/越往下） */
  --bg-pos-desktop: 72% 36%;
  --bg-pos-mobile:  55% 52%;

  /* 透明玻璃感（不做 blur） */
  --card-bg: rgba(20, 20, 20, .22);
  --card-border: rgba(255,255,255,.22);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --soft: rgba(255,255,255,.12);

  --shadow: 0 18px 60px rgba(0,0,0,.38);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", Arial;
  color:var(--text);
  background:#0b0b0b;
  overflow-x:hidden;
}

/* ======================
   背景：固定不抖动
====================== */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
}
.bgImg{
  position:absolute;
  inset:0;
  width:100vw;
  height:100svh;
  object-fit:cover;
  object-position: var(--bg-pos-desktop);
  transform: translateZ(0);
}
.bgShade{
  position:absolute;
  inset:0;
  /* ✅ 不模糊，只压暗，让字可读 */
  background:
    radial-gradient(1200px 700px at 25% 20%, rgba(0,0,0,.18), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.22));
}

/* ======================
   布局
====================== */
.wrap{
  min-height:100svh;
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card{
  width:min(980px, 100%);
  border-radius: var(--radius);
  border:1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--shadow);

  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;

  /* ✅ 内容多时：卡片本身不无限变高，内部滚动 */
  max-height: calc(100svh - 36px);
}

/* 头部 */
.hd{
  display:flex;
  gap:12px;
  align-items:center;
}
.logo{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--card-border);
  background: rgba(255,255,255,.08);
  flex-shrink:0;
}
.logo img{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
  border-radius:8px;
}
.ttl h1{
  margin:0;
  font-size: 24px;
  line-height: 1.1;
}
.ttl p{
  margin:6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  border:1px solid var(--card-border);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
}
.chip b{ color: var(--text); }

/* 字段 */
.field{ display:flex; flex-direction:column; gap:8px; }
.label{ font-size:14px; color: var(--text); opacity:.95; }
.tip{
  color: var(--muted);
  font-size: 12.5px;
  line-height:1.4;
}
.tip code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
}

.inputRow{
  display:flex;
  gap: 12px;
  align-items: stretch;
}

textarea{
  width:100%;
  resize:none;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;

  font-size: 14px;
  line-height: 1.35;

  /* ✅ 防止无限增高：内部滚动 */
  max-height: 140px;
  overflow:auto;

  /* ✅ 支持换行 */
  white-space: pre-wrap;
  word-break: break-word;
}
textarea::placeholder{ color: rgba(255,255,255,.45); }

.sideBtns{
  width: 140px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.btn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 16px;
  padding: 11px 12px;
  font-size: 14px;
  cursor:pointer;
  user-select:none;
}
.btn:hover{ background: rgba(255,255,255,.11); }
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: rgba(90, 140, 255, .70);
  border-color: rgba(120, 170, 255, .65);
}
.btn.primary:hover{ background: rgba(90, 140, 255, .78); }

.btn.ghost{
  background: rgba(0,0,0,.18);
}
.btn.danger{
  background: rgba(255, 90, 90, .30);
  border-color: rgba(255, 120, 120, .35);
}

.out{
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.16);
  border-radius: 16px;
  padding: 12px;
  margin:0;

  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;

  /* ✅ 结果区可滚动，不挤下方按钮 */
  overflow:auto;
  max-height: 220px;

  /* ✅ 自动换行 */
  white-space: pre-wrap;
  word-break: break-word;
}

/* 让结果区尽量吃剩余高度（桌面/手机都更稳） */
.field.grow{ flex: 1 1 auto; min-height: 0; }
.field.grow .out{ height:100%; }

.actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.ft{
  text-align:center;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  padding-top: 4px;
}

/* ======================
   Toast（复制提示）
====================== */
/* ======================
   居中提示 Toast（推荐版）
====================== */
.toast{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);

  background: rgba(0,0,0,.78);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;

  padding: 14px 22px;
  border-radius: 20px;

  font-size: 16px;
  font-weight: 500;
  letter-spacing: .4px;

  box-shadow: 0 18px 50px rgba(0,0,0,.45);

  opacity: 0;
  pointer-events: none;
  z-index: 9999;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.toast.show{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* ======================
   手机优化
====================== */
@media (max-width: 640px){
  .wrap{ padding: 12px; align-items: flex-start; }
  .card{
    padding: 14px;
    max-height: none;           /* ✅ 小屏允许整页滚动 */
  }

  .bgImg{ object-position: var(--bg-pos-mobile); }

  .ttl h1{ font-size: 22px; }
  .ttl p{ font-size: 12.5px; }

  .inputRow{
    flex-direction: column;
  }
  .sideBtns{
    width: 100%;
    flex-direction: row;
  }
  .sideBtns .btn{ flex: 1 1 0; }

  textarea{ max-height: 160px; }
  .out{ max-height: 280px; }

  .actions .btn{ flex: 1 1 0; }
}