/* ============================================================
   layout.css — 应用骨架：侧边栏 / 顶栏 / 移动端导航 / 登录页 / 管理后台
   ============================================================ */

/* ============ 登录页 ============ */
.login-wrap{min-height:100vh;display:flex;position:relative}
.login-brand{
  flex:1.05;display:flex;flex-direction:column;justify-content:center;padding:56px 64px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 480px at 12% 8%, rgba(255,195,0,.2), transparent 60%),
    radial-gradient(700px 500px at 90% 90%, rgba(14,139,141,.08), transparent 60%),
    var(--ink);
  color:#F6F3EA;
}
.login-brand::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:30px 30px;
}
.login-brand .mark-row{display:flex;align-items:center;gap:12px;position:relative}
.login-brand h1{font-family:var(--f-serif);font-size:44px;line-height:1.18;margin-top:26px;position:relative}
.login-brand h1 em{font-style:normal;color:var(--brand)}
.login-brand p{margin-top:16px;color:#B9B4A4;font-size:15px;max-width:420px;position:relative}
.login-brand .feat-list{margin-top:42px;display:grid;gap:14px;position:relative}
.login-brand .feat{display:flex;gap:12px;align-items:flex-start;color:#DDD8C9;font-size:13.5px}
.login-brand .feat .ic{width:30px;height:30px;border-radius:9px;background:rgba(255,195,0,.14);
  display:flex;align-items:center;justify-content:center;color:var(--brand);flex:none}
.login-form-col{width:480px;flex:none;display:flex;flex-direction:column;justify-content:center;
  padding:48px 56px;background:var(--bg-soft);position:relative}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 34px 30px;box-shadow:var(--sh-2)}
.login-card .lg-title{font-family:var(--f-serif);font-size:24px}
.login-card .lg-sub{color:var(--muted);font-size:13px;margin-top:4px;margin-bottom:22px}
.login-foot{margin-top:22px;text-align:center;color:var(--faint);font-size:12px}

/* ============ 主应用骨架 ============ */
.shell{display:flex;min-height:100vh}
.side{
  width:var(--side-w);flex:none;background:var(--surface);border-right:1px solid var(--line);
  position:fixed;top:0;bottom:0;left:0;z-index:40;display:flex;flex-direction:column;
  transition:transform var(--mid) var(--ease);
}
.side-logo{display:flex;align-items:center;gap:10px;padding:18px 20px 14px}
.side-logo .brand-name{font-family:var(--f-serif);font-size:19px;font-weight:700}
.side-logo .brand-tag{font-size:10.5px;color:var(--faint);border:1px solid var(--line-strong);
  padding:1px 7px;border-radius:var(--r-pill);margin-left:2px;white-space:nowrap}
.side-nav{flex:1;overflow-y:auto;padding:6px 12px 18px}
.nav-sec{margin-top:14px;padding:0 10px 6px;font-size:11px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  color:var(--ink-2);font-size:14px;position:relative;margin:2px 0;
  transition:background var(--fast),color var(--fast);
}
.nav-item .nv-ic{width:19px;height:19px;color:var(--muted);flex:none;transition:color var(--fast),transform var(--fast)}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item:hover .nv-ic{color:var(--ink);transform:translateX(1px) scale(1.06)}
.nav-item.active{background:var(--ink);color:#FFFCF2;font-weight:600}
.nav-item.active .nv-ic{color:var(--brand)}
.nav-item .nv-badge{margin-left:auto;font-size:11px;background:var(--red-soft);color:var(--red);
  padding:0 7px;border-radius:var(--r-pill);font-weight:600}
.nav-item.active .nv-badge{background:rgba(255,195,0,.2);color:var(--brand)}
.side-foot{padding:14px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}
.side-foot .env-chip{display:inline-flex;align-items:center;gap:5px}

.main{flex:1;margin-left:var(--side-w);display:flex;flex-direction:column;min-width:0}
.topbar{
  height:var(--top-h);display:flex;align-items:center;gap:14px;padding:0 26px;
  position:sticky;top:0;z-index:30;background:rgba(247,244,236,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{color:var(--faint)}
.topbar-search{
  display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 14px;width:250px;color:var(--muted);
  transition:box-shadow var(--fast),border-color var(--fast),width var(--mid);
}
.topbar-search:hover{border-color:var(--brand-strong);box-shadow:0 0 0 4px rgba(255,195,0,.14)}
.topbar-search input{border:none;outline:none;flex:1;background:none;font-size:13px;min-width:0}
.topbar-search input::placeholder{color:var(--faint)}
.top-ic{
  position:relative;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid transparent;transition:all var(--fast);
}
.top-ic:hover{background:var(--surface);border-color:var(--line);color:var(--ink);transform:translateY(-1px)}
.top-ic .ping{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--bg);animation:pulse 2.2s infinite}
.top-user{display:flex;align-items:center;gap:9px;padding:5px 12px 5px 6px;border-radius:var(--r-pill);
  cursor:pointer;transition:background var(--fast)}
.top-user:hover{background:var(--surface)}
.top-user .tu-name{font-size:13px;font-weight:600}
.top-user .tu-role{font-size:11px;color:var(--muted)}

.view{flex:1;padding:24px 28px 90px;max-width:1460px;width:100%;margin:0 auto}

/* 面包屑导航条 */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head .ph-title{font-family:var(--f-serif);font-size:24px}
.page-head .ph-sub{color:var(--muted);font-size:13px;margin-top:3px}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;
  padding:5px 10px;border-radius:9px;transition:all var(--fast)}
.back-link:hover{background:var(--surface);color:var(--ink)}

/* ============ 管理后台（独立深色骨架） ============ */
.admin-shell{display:flex;min-height:100vh}
.admin-side{
  width:228px;flex:none;color:#C9D3E4;position:fixed;top:0;bottom:0;left:0;
  z-index:40;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0E1C33 0%,#13253F 60%,#152B49 100%);
  border-right:1px solid #24365A;
}
.admin-side .as-logo{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.admin-side .as-logo .name{font-family:var(--f-serif);font-size:17px;color:#F6F3EA}
.admin-side .as-tag{font-size:10px;color:#7E93B8;letter-spacing:.16em;margin-top:2px}
.admin-side .as-nav{flex:1;padding:8px 12px;overflow-y:auto}
.as-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#A9BAD4;
  font-size:13.5px;margin:2px 0;transition:all var(--fast)}
.as-item:hover{background:rgba(255,195,0,.10);color:#F0EDE2}
.as-item.active{background:var(--brand);color:var(--brand-ink);font-weight:600}
.admin-main{flex:1;margin-left:228px;display:flex;flex-direction:column;min-width:0}
.admin-top{height:56px;display:flex;align-items:center;gap:14px;padding:0 26px;
  background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.admin-view{padding:24px 28px 80px;max-width:1360px;width:100%;margin:0 auto}
.admin-view .page-head .ph-title{font-size:22px}

/* ============ 移动端 ============ */
.m-bottom{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
.m-bottom .mb-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.mb-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;
  color:var(--muted);font-size:10.5px;transition:color var(--fast)}
.mb-item svg{width:21px;height:21px}
.mb-item.active{color:var(--ink)}
.mb-item.active svg{color:var(--brand-strong)}
.m-menu-mask{position:fixed;inset:0;background:rgba(27,29,34,.4);z-index:70;display:none}
.m-menu{position:fixed;left:0;top:0;bottom:0;width:min(78vw,320px);z-index:71;background:var(--surface);
  transform:translateX(-100%);transition:transform var(--mid) var(--ease);padding:18px 14px;overflow-y:auto;
  border-radius:0 22px 22px 0;box-shadow:var(--sh-3)}
.m-menu.open{transform:none}

/* ============ 响应式断点 ============ */
@media (max-width:1080px){
  .view{padding:20px 20px 90px}
  .login-form-col{width:420px;padding:40px 44px}
  .login-brand h1{font-size:36px}
}
@media (max-width:860px){
  .side{transform:translateX(-100%);z-index:80}
  .main{margin-left:0}
  .shell.no-drawer .side{display:none}
  .m-bottom{display:block}
  .admin-side{transform:translateX(-100%);z-index:80}
  .admin-main{margin-left:0}
  .admin-shell .m-bottom{display:block}
  .view,.admin-view{padding:16px 14px 108px}
  .topbar{padding:0 14px;gap:8px}
  .topbar-search{width:150px}
  .top-user .tu-role{display:none}
  .top-user .tu-name{display:none}
}
@media (max-width:760px){
  .login-wrap{flex-direction:column}
  .login-brand{flex:none;padding:34px 26px 30px;min-height:auto}
  .login-brand h1{font-size:30px;margin-top:18px}
  .login-brand .feat-list{display:none}
  .login-form-col{width:100%;padding:26px 20px 40px}
  .crumb{font-size:12px}
  .page-head .ph-title{font-size:20px}
  .num-xl{font-size:27px}
  .t-h1{font-size:21px}
}
@media (max-width:560px){
  .topbar-search{display:none}
  .view,.admin-view{padding:14px 12px 112px}
}

/* ---- 020 手机端适配（微信内置浏览器兼容：16px 防 iOS 聚焦缩放） ---- */
@media (pointer:coarse),(max-width:760px){
  .view input,.view select,.view textarea{font-size:16px}
  .form-grid .field .input,.form-grid .field .select,.chat-inputbar textarea{min-height:44px}
  .view .field{margin-bottom:18px}
  .view .btn{min-height:40px}
}