/* 前端练习园地 · 内容管理后台 —— 品牌沉浸式（A 方案）
   与主站同源的设计令牌：森林绿 + 金，零外部依赖 */
:root {
  --ink:#17251e; --muted:#617067; --line:#dfe6e0; --bg:#eef1ec; --bg-soft:#f7faf7; --card:#fff;
  --forest:#16634b; --forest-dark:#0d3328; --forest-deep:#081b15;
  --gold:#c9a45c; --gold-soft:#f3e4bf; --gold-ink:#8b6c2e;
  --danger:#b0433c;
  --radius-lg:20px; --radius:12px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(23,37,30,.04),0 8px 24px rgba(23,37,30,.05);
  --shadow-md:0 18px 50px rgba(13,51,40,.14);
  --font:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:15px/1.65 var(--font); background:var(--bg); }
a { color:inherit; }
button,input,textarea { font:inherit; }
[hidden] { display:none !important; }
::selection { background:rgba(201,164,92,.35); }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(201,164,92,.7); outline-offset:2px; }
.admin-shell { width:min(1180px,100%); margin:0 auto; padding:0 22px; }

/* ---------- 登录：左侧品牌面板 ---------- */
.login-view { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); }
.login-brand { position:relative; overflow:hidden; color:#fff; background:linear-gradient(135deg,#071a14,#12382c 58%,#1b5943); }
.login-brand::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(115deg,#000 30%,transparent 78%); mask-image:linear-gradient(115deg,#000 30%,transparent 78%); }
.login-brand::after { content:""; position:absolute; width:480px; height:480px; right:-190px; bottom:-240px; border-radius:50%; border:1px solid rgba(201,164,92,.32); box-shadow:0 0 0 80px rgba(201,164,92,.045),0 0 0 160px rgba(201,164,92,.02); }
.brand-inner { position:relative; z-index:1; display:flex; flex-direction:column; min-height:100%; padding:58px 60px 44px; }
.admin-brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.admin-brand .brand-mark,.login-card-brand .brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; background:linear-gradient(145deg,var(--forest-dark),var(--forest)); color:var(--gold-soft); font-weight:800; font-size:19px; border:1px solid rgba(201,164,92,.4); box-shadow:0 8px 20px rgba(8,27,21,.25); }
.admin-brand strong,.admin-brand small { display:block; }
.admin-brand small { color:var(--muted); font-size:11px; letter-spacing:.14em; }
.admin-brand.light { color:#fff; }
.admin-brand.light .brand-mark { background:rgba(201,164,92,.14); border-color:rgba(201,164,92,.55); color:var(--gold-soft); box-shadow:none; }
.admin-brand.light small { color:rgba(223,233,226,.6); }
.brand-mark.small { width:36px; height:36px; font-size:16px; border-radius:9px; }
.brand-quote { max-width:26em; margin:auto 0 0; padding-left:18px; border-left:3px solid var(--gold); color:rgba(236,243,238,.88); font-size:23px; line-height:1.75; letter-spacing:.01em; }
.brand-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:48px 0 0; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(255,255,255,.12); overflow:hidden; }
.brand-stats > div { padding:18px 12px; background:rgba(7,26,20,.66); text-align:center; }
.brand-stats dt { color:#f2d28b; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.brand-stats dd { margin:8px 0 0; color:rgba(255,255,255,.72); font-size:12px; }
.brand-meta { margin:auto 0 0; padding-top:36px; color:rgba(223,233,226,.62); font-size:12.5px; letter-spacing:.04em; }

/* ---------- 登录：右侧表单 ---------- */
.login-pane { position:relative; display:grid; place-items:center; padding:56px 28px; background:radial-gradient(circle at 85% 8%,rgba(201,164,92,.1),transparent 30%),radial-gradient(circle at 8% 92%,rgba(22,99,75,.08),transparent 34%),var(--bg); }
.login-card { width:min(408px,100%); padding:40px 38px 32px; border:1px solid rgba(223,230,224,.9); border-radius:var(--radius-lg); background:var(--card); box-shadow:var(--shadow-md); animation:rise .55s cubic-bezier(.22,.8,.36,1) both; }
.login-card-brand { display:flex; align-items:center; gap:10px; }
.login-card-brand strong { display:block; font-size:15px; }
.login-card-brand small { display:block; color:var(--muted); font-size:11px; letter-spacing:.08em; }
.login-card h1 { margin:22px 0 4px; font-size:26px; letter-spacing:-.02em; }
.muted { margin:0; color:var(--muted); font-size:14px; }
label { display:block; margin-top:18px; color:#34443a; font-size:13px; font-weight:700; }
input,textarea { width:100%; margin-top:8px; padding:12px 14px; border:1px solid #cfd9d1; border-radius:var(--radius-sm); background:#fff; color:var(--ink); font-weight:400; transition:border-color .15s,box-shadow .15s; }
input:hover,textarea:hover { border-color:#b4c4b7; }
input:focus,textarea:focus { border-color:var(--forest); outline:none; box-shadow:0 0 0 4px rgba(22,99,75,.13); }
textarea { resize:vertical; }

/* 滑块验证码（几何与 app.js 约定：把手 42px、JS 只写 transform/left/width） */
.slider-captcha { margin-top:18px; }
.slider-track { position:relative; height:52px; overflow:hidden; border:1px solid #cfd9d1; border-radius:var(--radius); background:linear-gradient(90deg,#edf3ef,#f8faf8); user-select:none; touch-action:none; }
.slider-target { position:absolute; top:9px; width:34px; height:34px; border:2px dashed rgba(22,99,75,.5); border-radius:9px; background:rgba(22,99,75,.07); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.slider-fill { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,rgba(22,99,75,.16),rgba(22,99,75,.1)); }
.slider-handle { position:absolute; top:5px; left:3px; z-index:2; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:10px; background:linear-gradient(145deg,#187154,var(--forest) 55%,#0f513d); color:#fff; cursor:grab; touch-action:none; box-shadow:0 4px 12px rgba(13,51,40,.3),inset 0 1px 0 rgba(255,255,255,.18); }
.slider-handle::before { content:""; width:13px; height:9px; background-image:radial-gradient(circle,rgba(243,228,191,.95) 1.5px,transparent 1.7px); background-size:5px 5px; }
.slider-handle:active { cursor:grabbing; }
.slider-handle:disabled { cursor:default; }
.slider-captcha.solved .slider-track { border-color:rgba(22,99,75,.55); background:#e9f3ec; }
.slider-captcha.solved .slider-fill { background:rgba(201,164,92,.24); }
.slider-captcha.solved .slider-handle { background:linear-gradient(145deg,var(--gold),#b8934b); box-shadow:0 4px 12px rgba(201,164,92,.4),inset 0 1px 0 rgba(255,255,255,.35); }
.slider-captcha.solved .slider-handle::before { background-image:radial-gradient(circle,rgba(13,51,40,.92) 1.5px,transparent 1.7px); }
.slider-captcha.error .slider-track { border-color:var(--danger); animation:shake .32s ease; }
@keyframes shake { 25%{transform:translateX(-4px);} 50%{transform:translateX(3px);} 75%{transform:translateX(-2px);} }
.slider-hint { margin-top:8px; color:var(--muted); font-size:12px; }
.slider-captcha.solved .slider-hint { color:var(--forest); font-weight:700; }
.slider-captcha.error .slider-hint { color:var(--danger); }

/* ---------- 按钮 ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:9px 16px; border:1px solid #cdd7cf; border-radius:var(--radius-sm); background:#fff; color:var(--ink); font-weight:700; cursor:pointer; text-decoration:none; transition:transform .15s,box-shadow .15s,border-color .15s,background .15s; }
.btn:hover { border-color:var(--forest); }
.btn.primary { border-color:transparent; background:linear-gradient(145deg,#187154,var(--forest) 55%,#0f513d); color:#fff; box-shadow:0 10px 24px rgba(13,51,40,.22); }
.btn.primary:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(13,51,40,.28); }
.btn.primary:active { transform:translateY(0); }
.btn.ghost { border-color:rgba(255,255,255,.25); background:transparent; color:#fff; }
.btn.ghost:hover { border-color:rgba(243,228,191,.6); }
.btn.small { min-height:34px; padding:6px 11px; font-size:13px; }
.wide { width:100%; margin-top:22px; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.form-error { min-height:22px; margin:12px 0 0; color:var(--danger); font-size:13px; font-weight:600; }
.back-link { display:block; margin-top:16px; color:var(--muted); text-align:center; font-size:13px; text-decoration:none; transition:color .15s; }
.back-link:hover { color:var(--forest); text-decoration:underline; }

/* ---------- 后台主界面 ---------- */
.admin-header { position:sticky; top:0; z-index:20; background:rgba(10,29,23,.96); backdrop-filter:blur(14px); color:#fff; border-bottom:1px solid rgba(201,164,92,.22); box-shadow:0 4px 18px rgba(0,0,0,.14); }
.header-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.save-state { padding:6px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.06); color:#aab9ae; font-size:12.5px; }
.admin-main { padding-top:34px; padding-bottom:80px; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.eyebrow { color:var(--gold-ink); font-size:12px; font-weight:800; letter-spacing:.16em; }
.page-intro h1 { margin:6px 0 0; font-size:32px; letter-spacing:-.02em; }
.page-intro p { margin:6px 0 0; color:var(--muted); }
.notice { min-height:24px; margin:18px 0 0; color:var(--forest); font-weight:700; }
.notice.error { color:var(--danger); }
.panel { margin-top:18px; padding:26px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow-sm); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.panel-head > div { display:flex; align-items:center; gap:12px; }
.panel-head h2 { margin:0; font-size:19px; letter-spacing:-.01em; }
.panel-head p { margin:0; color:var(--muted); font-size:13px; }
.step { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg,var(--forest-dark),var(--forest)); color:var(--gold-soft); font-size:12px; font-weight:800; border:1px solid rgba(201,164,92,.35); }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 18px; }
.span-2 { grid-column:span 2; }
.switch-line { display:flex; align-items:center; gap:10px; margin-top:12px; }
.switch-line input { width:auto; margin:0; }
.switch-line span { font-weight:700; }
.repeater { display:grid; gap:12px; }
.repeater:empty::after { content:"暂无内容"; padding:24px; border:1px dashed #c6d2c9; border-radius:10px; color:var(--muted); text-align:center; }
.repeat-card { padding:18px; border:1px solid var(--line); border-radius:11px; background:var(--bg-soft); }
.repeat-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.repeat-head strong { font-size:13px; }
.remove { padding:4px 8px; border:0; border-radius:6px; background:none; color:var(--danger); cursor:pointer; font-size:13px; font-weight:700; }
.remove:hover { background:rgba(176,67,60,.08); }
.repeat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.repeat-grid label { margin-top:10px; }
.repeat-grid .span-2 { grid-column:span 2; }
.password-form { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:14px; }
.password-form label { margin:0; }
.bottom-save { display:flex; justify-content:flex-end; margin-top:22px; }

/* ---------- 动效 ---------- */
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.login-brand .admin-brand,.login-brand .brand-quote,.login-brand .brand-stats,.login-brand .brand-meta { animation:rise .6s cubic-bezier(.22,.8,.36,1) both; }
.login-brand .brand-quote { animation-delay:.08s; }
.login-brand .brand-stats { animation-delay:.16s; }
.login-brand .brand-meta { animation-delay:.24s; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }

/* ---------- 响应式 ---------- */
@media (max-width:960px) {
  .login-view { grid-template-columns:1fr; }
  .brand-inner { padding:32px 26px 28px; }
  .brand-quote,.brand-stats { display:none; }
  .brand-meta { padding-top:20px; font-size:12px; }
  .login-pane { padding:38px 20px 56px; }
  .login-card { padding:34px 26px 28px; }
}
@media (max-width:760px) {
  .admin-shell { padding:0 14px; }
  .header-inner,.page-intro,.panel-head { align-items:flex-start; flex-direction:column; }
  .field-grid,.repeat-grid,.password-form { grid-template-columns:1fr; }
  .span-2,.repeat-grid .span-2 { grid-column:auto; }
  .panel { padding:18px; }
  .header-actions { width:100%; justify-content:space-between; }
  .page-intro h1 { font-size:26px; }
}