/* GPT Image 2 — 公共样式变量与基础组件 v2 */

/* ── 变量 ────────────────────────────────── */
:root{
  --bg1:#fff7fb;--bg2:#eff8ff;--bg3:#f4fff5;
  --pink:#ff9ecb;--mint:#9ee8d8;--lavender:#c7a8ff;
  --text:#334155;--muted:#64748b;
  --card:rgba(255,255,255,.25);
  --line:rgba(255,255,255,.65);
  --shadow:0 20px 60px rgba(148,163,184,.18),0 8px 24px rgba(129,140,248,.08);
  --tag-bg:rgba(255,255,255,.60);
  --accent:#ff9ecb;
}
body.dark{
  --bg1:#0f172a;--bg2:#1a1f3a;--bg3:#13203d;
  --text:#d1d5db;--muted:#9ca3af;
  --card:rgba(30,41,59,.35);
  --line:rgba(148,163,184,.12);
  --shadow:0 20px 60px rgba(0,0,0,.28),0 8px 24px rgba(99,102,241,.06);
  --tag-bg:rgba(148,163,184,.10);
  color:#d1d5db;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 45%,var(--bg3));
  overflow-x:hidden;transition:.3s;
  -webkit-font-smoothing:antialiased;
}

/* ── 玻璃卡片 ─────────────────────────────── */
.glass{
  background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.50);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-radius:24px;transition:.3s;
  position:relative;
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 38%,rgba(196,181,253,.04));
}

/* ── 按钮 ────────────────────────────────── */
.btn{
  width:100%;border:0;border-radius:16px;padding:14px;
  font-weight:900;font-size:16px;color:white;cursor:pointer;
  background:linear-gradient(135deg,#ff91c4,#a7d8ff 50%,#95ead9);
  box-shadow:0 10px 28px rgba(255,145,196,.25);
  transition:all .3s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,145,196,.38)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
.btn:active{transform:scale(.97)}

.btn-sm{
  padding:7px 16px;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;font-size:12px;transition:.2s;
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;
}
.btn-outline{
  background:rgba(255,255,255,.45);color:var(--text);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px);
}
.btn-outline:hover{background:rgba(255,255,255,.7)}
body.dark .btn-outline{background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.15)}
body.dark .btn-outline:hover{background:rgba(148,163,184,.15)}
.btn-danger{background:rgba(254,202,202,.65);color:#b91c1c;border:1px solid rgba(248,113,113,.2)}
.btn-danger:hover{background:rgba(254,202,202,.9)}

/* ── 提示框 ──────────────────────────────── */
.alert{
  display:none;padding:12px 16px;border-radius:14px;
  margin-bottom:14px;font-weight:700;font-size:13px;
  animation:slideIn .3s ease;
}
.err{background:rgba(254,226,226,.75);color:#b91c1c;border:1px solid rgba(248,113,113,.3)}
.ok{background:rgba(220,252,231,.75);color:#047857;border:1px solid rgba(52,211,153,.3)}
@keyframes slideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ── 表单 ────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block;font-weight:800;font-size:13px;margin:0 0 6px;color:var(--text);transition:.2s}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
textarea,select,input[type=text],input[type=password],input[type=email]{
  width:100%;border:1px solid rgba(148,163,184,.25);border-radius:14px;
  background:rgba(255,255,255,.55);color:var(--text);
  padding:12px 14px;font-size:15px;outline:none;transition:.25s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
textarea,select{border-radius:14px}
input:focus,textarea:focus,select:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,158,203,.12),inset 0 1px 0 rgba(255,255,255,.6);
}
textarea{min-height:120px;resize:vertical}
body.dark textarea,body.dark select,body.dark input[type=text],body.dark input[type=password],body.dark input[type=email]{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(148,163,184,.18)!important;color:#d1d5db!important;
}

/* ── 弹窗 ────────────────────────────────── */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(15,23,42,.55);z-index:90;
  align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(6px);
}
.modal-overlay.active{display:flex}
.modal{
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(24px);border-radius:24px;
  padding:28px;max-width:500px;width:100%;max-height:85vh;overflow-y:auto;
}
body.dark .modal{background:rgba(15,23,42,.92)}
.modal h3{margin:0 0 16px;font-size:18px}
.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}

/* ── Toast ────────────────────────────────── */
#toastWrap{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;max-width:360px;
}
.toast{
  pointer-events:auto;padding:14px 18px;border-radius:16px;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 40px rgba(0,0,0,.12);
  font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:10px;
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);
}
body.dark .toast{background:rgba(30,41,59,.92);border-color:rgba(148,163,184,.15);color:#e2e8f0}
.toast.out{animation:toastOut .3s ease-in forwards}
.toast .ico{font-size:18px;flex-shrink:0}
.toast.ok{border-left:3px solid #10b981}
.toast.err{border-left:3px solid #ef4444}
.toast.info{border-left:3px solid #6366f1}
.toast .msg{flex:1;line-height:1.5;word-break:break-word}
@keyframes toastIn{0%{transform:translateX(120%) scale(.9);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}
@keyframes toastOut{0%{transform:translateX(0);opacity:1}100%{transform:translateX(120%);opacity:0}}

/* ── 涟漪 ────────────────────────────────── */
.btn-sm,.btn-primary,button{position:relative;overflow:hidden}
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.5);
  transform:scale(0);animation:rippleAnim .65s ease-out;pointer-events:none;
}
body.dark .ripple{background:rgba(255,255,255,.2)}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ── 响应式：手机端公共 ───────────────────── */
@media(max-width:640px){
  .modal{padding:20px;border-radius:20px;margin:10px;max-height:90vh}
  .btn{padding:13px;font-size:15px;border-radius:14px}
  .btn-sm{padding:6px 12px;font-size:11px}
  .alert{padding:10px 14px;font-size:12px;border-radius:12px}
  #toastWrap{right:10px;bottom:10px;left:10px;max-width:none}
  .toast{border-radius:14px;font-size:12px}
}