/* ============================================================================
   艺培宝 · 视觉层 v2（科技感 / AI 调性）
   ----------------------------------------------------------------------------
   设计取向：深空底 + 紫青渐变 + 玻璃拟态卡片 + 发光强调
   约定：不引入任何外部字体/CDN（服务器可能内网/离线），只用系统字体栈
   改版要点：类名与 v1 完全一致（index.php / views/*.php 不用改），
             只重画视觉；版本号在 lib/ui.php 里是 ?v=2，改样式记得一起 bump
   ============================================================================ */

/* ---------------------------------------------------------------- 设计令牌 */
:root{
  /* 底色三级：最底 → 面板 → 悬浮层 */
  --bg:#070a12;
  --bg-2:#0b0f1c;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-3:rgba(255,255,255,.11);

  /* 描边两级 */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* 文字三级 */
  --ink:#eaeefb;
  --ink-2:#c2cade;
  --muted:#8590ab;

  /* 品牌：紫 → 青 */
  --brand:#7b6cff;
  --brand-2:#38b6ff;
  --brand-soft:rgba(123,108,255,.16);
  --brand-line:rgba(123,108,255,.45);
  --brand-grad:linear-gradient(135deg,#7b6cff 0%,#5a8cff 45%,#38b6ff 100%);

  /* 状态色（配深底提亮版） */
  --ok:#2ee6a8;   --ok-soft:rgba(46,230,168,.14);
  --warn:#ffc44d; --warn-soft:rgba(255,196,77,.14);
  --bad:#ff5d73;  --bad-soft:rgba(255,93,115,.14);

  /* 圆角 / 阴影 / 光晕 */
  --r-sm:11px; --r:16px; --r-lg:22px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.95);
  --shadow-sm:0 10px 30px -18px rgba(0,0,0,.9);
  --glow:0 10px 40px -14px rgba(123,108,255,.65);
  --glow-2:0 0 0 1px rgba(123,108,255,.35), 0 14px 44px -16px rgba(56,182,255,.55);

  /* 字体栈（本地优先，绝无外链） */
  --font:"Inter","SF Pro Text","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

/* ---------------------------------------------------------------- 基础 */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; color:var(--ink); font:14px/1.65 var(--font);
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(123,108,255,.20), transparent 62%),
    radial-gradient(950px 560px at 92% 4%, rgba(56,182,255,.15), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(123,108,255,.12), transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 55%,#070a12 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(123,108,255,.4);color:#fff}
a{color:var(--brand-2);text-decoration:none;transition:color .16s ease}
a:hover{color:#7fd0ff}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.strong{font-weight:600;color:var(--ink)}
.req{color:var(--bad)}

/* 滚动条也跟着调子走 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(123,108,255,.5);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- 顶栏 */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(9,12,22,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:26px;height:62px}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:16.5px;letter-spacing:.3px;
  color:var(--ink);white-space:nowrap;
}
.brand::before{
  content:"";width:26px;height:26px;flex:0 0 26px;border-radius:9px;
  background:var(--brand-grad);
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 6px 20px -6px rgba(123,108,255,.9);
  position:relative;
}
.brand:hover{color:#fff}
.nav{display:flex;align-items:center;gap:4px;flex:1}
.nav a{
  position:relative;padding:8px 14px;border-radius:10px;color:var(--ink-2);font-size:13.5px;font-weight:500;
  transition:background .18s ease,color .18s ease;
}
.nav a:hover{background:var(--surface);color:var(--ink)}
.nav a.on{color:#fff;background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)}
.me{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.me .who{color:var(--ink-2);font-weight:500}
.me .quit{
  padding:6px 13px;border-radius:9px;border:1px solid var(--line-2);color:var(--ink-2);font-size:13px;
  transition:all .18s ease;
}
.me .quit:hover{border-color:var(--bad);color:#ffd7dd;background:var(--bad-soft)}

/* ---------------------------------------------------------------- 本地站点提示条 */
.localbar,.env{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-sm);
}
.localbar{
  margin:18px auto 0;max-width:1180px;padding:12px 18px;font-size:13px;color:var(--ink-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  border-left:3px solid var(--brand);
}
.localbar b{color:var(--ink)}
.localbar .muted{margin-left:auto}

/* ---------------------------------------------------------------- 卡片 */
.card{
  position:relative;
  background:var(--surface);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px 26px;
  margin:18px 0;
  box-shadow:var(--shadow);
}
/* 卡片顶部高光，玻璃质感的关键一笔 */
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}
.card.tight{padding:10px 14px}
.card.empty{text-align:center;color:var(--muted);padding:44px 20px}
.card h2,.card h3{margin:0 0 14px;font-size:16px;font-weight:650;letter-spacing:.2px}
.card h3{font-size:14.5px;color:var(--ink-2)}

/* ---------------------------------------------------------------- 页头 */
.page-head{display:flex;align-items:flex-start;gap:16px;margin:26px 0 6px}
.page-head h1{
  margin:0;font-size:25px;font-weight:700;letter-spacing:.2px;line-height:1.3;
  background:linear-gradient(120deg,#fff 10%,#c9d3ee 60%,#8fa2cc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-head .btn{margin-left:auto}

/* ---------------------------------------------------------------- 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 17px;border-radius:12px;cursor:pointer;
  font:500 13.5px/1.2 var(--font);
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-2);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-3);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:var(--brand-grad);border-color:transparent;color:#fff;font-weight:600;
  box-shadow:var(--glow);
}
.btn.primary:hover{box-shadow:0 14px 46px -12px rgba(123,108,255,.85);filter:brightness(1.06)}
.btn.lg{padding:12px 24px;font-size:14.5px;border-radius:13px}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ---------------------------------------------------------------- 统计条 */
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.stat{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;font-size:13px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.stat b{color:#fff;font-size:15px;font-weight:700}
.stat.ok{border-color:rgba(46,230,168,.35);background:var(--ok-soft);color:#c8ffe9}
.stat.ok b{color:var(--ok)}
.stat.warn{border-color:rgba(255,196,77,.35);background:var(--warn-soft);color:#ffeec7}
.stat.warn b{color:var(--warn)}
.stat.bad{border-color:rgba(255,93,115,.35);background:var(--bad-soft);color:#ffd7dd}
.stat.bad b{color:var(--bad)}
.stat.muted{color:var(--muted)}

/* ---------------------------------------------------------------- 表格 */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{
  text-align:left;padding:11px 14px;font-size:12px;font-weight:600;letter-spacing:.6px;
  color:var(--muted);text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.tbl td{padding:14px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle;color:var(--ink-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .16s ease}
.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
.tbl td .btn{padding:6px 12px;border-radius:9px;font-size:12.5px}

/* ---------------------------------------------------------------- 状态药丸 */
.st{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.2px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.st-active,.st-ok{color:var(--ok);border-color:rgba(46,230,168,.4);background:var(--ok-soft)}
.st-pending{color:var(--warn);border-color:rgba(255,196,77,.4);background:var(--warn-soft)}
.st-failed,.st-bad{color:var(--bad);border-color:rgba(255,93,115,.4);background:var(--bad-soft)}
.st-disabled{color:var(--muted)}

/* ---------------------------------------------------------------- 提示条 */
.flash{
  padding:13px 18px;border-radius:var(--r);margin:16px 0;font-size:13.5px;
  border:1px solid var(--line);background:var(--surface);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-left:3px solid var(--brand);color:var(--ink-2);
}
.flash b,.flash strong{color:#fff}
.flash.ok{border-left-color:var(--ok);background:var(--ok-soft);color:#c8ffe9}
.flash.bad{border-left-color:var(--bad);background:var(--bad-soft);color:#ffd7dd}
.flash a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- 表单 */
form label{display:block;font-size:13.5px;color:var(--ink-2);font-weight:500;margin-bottom:7px}
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
  width:100%;padding:11px 14px;border-radius:12px;
  background:rgba(0,0,0,.32);color:var(--ink);
  border:1px solid var(--line-2);font:14px/1.5 var(--font);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input::placeholder,textarea::placeholder{color:#5f6a86}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft),0 0 24px -6px rgba(123,108,255,.6);
  background:rgba(0,0,0,.42);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 22px}
.hint{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:400;line-height:1.55}
.checks{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.chk{display:flex!important;align-items:flex-start;gap:9px;cursor:pointer;margin:0!important}
.chk input{
  width:17px;height:17px;flex:0 0 17px;margin:2px 0 0;appearance:none;cursor:pointer;
  border:1px solid var(--line-2);border-radius:5px;background:rgba(0,0,0,.35);
  transition:all .16s ease;
}
.chk input:checked{background:var(--brand-grad);border-color:transparent;box-shadow:0 0 14px -2px rgba(123,108,255,.9)}
.chk input:checked::after{content:"✓";display:block;color:#fff;font-size:12px;line-height:15px;text-align:center}
.chk span{color:var(--ink-2);font-weight:400}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:18px 0;background:rgba(0,0,0,.14)}
legend{padding:0 8px;font-size:13px;color:var(--ink-2);font-weight:600}
details.adv{border:1px dashed var(--line-2);border-radius:var(--r);padding:12px 16px;margin:16px 0;background:rgba(0,0,0,.14)}
details.adv summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);font-weight:500;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"▸ ";color:var(--brand);transition:transform .2s}
details.adv[open] summary::before{content:"▾ "}

/* ---------------------------------------------------------------- 版本级别选择卡 */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.lvcard{
  position:relative;display:block;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);cursor:pointer;margin:0!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .22s ease,background .18s ease;
}
.lvcard:hover{transform:translateY(-2px);border-color:var(--brand-line);background:var(--surface-2)}
.lvcard.on{border-color:transparent;background:linear-gradient(160deg,rgba(123,108,255,.24),rgba(56,182,255,.12));box-shadow:var(--glow-2)}
.lvcard input{position:absolute;opacity:0;pointer-events:none}
.lvname{display:block;font-size:15px;font-weight:650;color:#fff;margin-bottom:5px}
.lvdesc{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.lvplugins{display:block;margin-top:10px;font-size:12px;color:var(--brand-2);font-family:var(--mono)}
.lvcard.on .lvplugins{color:#bfe6ff}

/* ---------------------------------------------------------------- 键值表 / 步骤 / 日志 */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 26px}
.kv>div{display:flex;flex-direction:column;gap:3px;padding-bottom:10px;border-bottom:1px dashed rgba(255,255,255,.07)}
.kv span{font-size:12px;color:var(--muted);letter-spacing:.3px}
.kv b{font-size:13.5px;font-weight:500;color:var(--ink);word-break:break-all}
.steps{margin:0;padding-left:22px;color:var(--ink-2);font-size:13.5px}
.steps li{margin:9px 0;padding-left:4px}
.steps li::marker{color:var(--brand);font-weight:700}
.logbox{border:1px solid var(--line);border-radius:var(--r);background:rgba(0,0,0,.28);padding:12px 16px;margin:12px 0}
.logbox summary{cursor:pointer;font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none}
.logbox summary::-webkit-details-marker{display:none}
.log,.cmdline{
  font-family:var(--mono);font-size:12px;line-height:1.6;
  background:rgba(0,0,0,.5);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;margin:10px 0 0;
  color:#a9f0d0;overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-all;
}
.cmdline{color:#9fb4dd;padding:9px 12px;max-height:none}

/* ---------------------------------------------------------------- 环境体检条 */
.env{margin:18px 0;padding:15px 20px}
.env-title{font-size:13.5px;font-weight:600;margin-bottom:11px}
.env-ok .env-title{color:var(--ok)}
.env-bad .env-title{color:var(--warn)}
.env-items{display:flex;flex-wrap:wrap;gap:8px}
.env-item{
  font-size:12px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--ink-2);
}
.env-item.ok{border-color:rgba(46,230,168,.35);color:#b6ffe4}
.env-item.bad{border-color:rgba(255,93,115,.4);color:#ffd0d8;background:var(--bad-soft)}

/* ---------------------------------------------------------------- 登录页 */
body>main.wrap>form.card{max-width:420px;margin:9vh auto 0}

/* ---------------------------------------------------------------- 页脚 */
.foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:40px auto 34px;padding-top:20px;border-top:1px solid var(--line);
  color:#5d6784;font-size:12.5px;
}

/* ---------------------------------------------------------------- 小屏 */
@media (max-width:760px){
  .topbar .wrap{height:auto;padding:12px 18px;flex-wrap:wrap;gap:12px}
  .nav{flex:1 1 100%;overflow:auto}
  .page-head{flex-direction:column}
  .page-head .btn{margin-left:0}
  .card{padding:18px 16px;border-radius:var(--r)}
  .kv{grid-template-columns:1fr}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ============================================================================
   移动端（≤900px）· 平台后台顶部导航
   ----------------------------------------------------------------------------
   平台布局头只允许加一行 link（mobile.css），没有给平台侧引入 JS 的位置，
   所以这里用纯 CSS 把顶部导航「展开」成两列大按钮（≥44px），点得到、不误触。
   间距一律用 margin（不用 flex 的 gap）：老 iPad Air 的 Safari 不支持 flex gap。
   机构侧（.shell/.side）的顶部标题栏 + 底部 tab 栏在 org.css。
   ============================================================================ */
@media (max-width:900px){
  /* 手机上顶栏不做模糊（省一层合成），用接近实心底 */
  .topbar{
    background:rgba(9,12,22,.985);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .topbar .wrap{
    display:block;height:auto;
    padding:8px 14px 10px;
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }
  .topbar .brand{display:inline-flex;min-height:44px;font-size:16px}

  .nav{display:flex;flex-wrap:wrap;align-items:stretch;flex:0 0 auto;margin:4px 0 0;overflow:visible}
  .nav a{
    flex:1 1 42%;min-width:0;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 12px;margin:0 8px 8px 0;font-size:14px;
    border:1px solid var(--line);border-radius:12px;
    background:var(--surface);color:var(--ink-2);
  }
  .nav a.on{color:#fff;background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-line)}
  .nav a:active{transform:scale(.98)}
  .nav a .st{margin-left:4px}

  .me{display:flex;align-items:center;margin:0;padding-top:8px;border-top:1px solid var(--line)}
  .me .who{margin-right:auto;font-size:14px}
  .me .quit{display:inline-flex;align-items:center;padding:10px 15px;font-size:14px}

  /* 平台页头 / 卡片 / 登录页 */
  .page-head{display:block;margin:16px 0 4px}
  .page-head .btn{margin:12px 0 0;width:100%}
  .card{padding:16px 14px;border-radius:16px}
  .card.tight{padding:8px 10px}
  body>main.wrap>form.card{width:100%;max-width:none;margin:7vh auto 0}
}