/* ==========================================================================
   企业文件扫码浏览系统 · 设计系统 (Design System v1.0)
   8pt 栅格 · 令牌化 · 移动端优先
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌 (Design Tokens)
   -------------------------------------------------------------------------- */
:root{
  /* 主色 · 企业蓝 */
  --primary-50:#EFF6FF;
  --primary-100:#DBEAFE;
  --primary-200:#BFDBFE;
  --primary-500:#3B82F6;
  --primary-600:#2563EB;
  --primary-700:#1D4ED8;
  --primary-800:#1E40AF;

  /* 语义色 */
  --success-50:#ECFDF5;
  --success-100:#D1FAE5;
  --success-600:#059669;
  --success-700:#047857;

  --warning-50:#FFFBEB;
  --warning-100:#FEF3C7;
  --warning-600:#D97706;
  --warning-700:#B45309;

  --danger-50:#FEF2F2;
  --danger-100:#FEE2E2;
  --danger-600:#DC2626;
  --danger-700:#B91C1C;

  /* 中性色 */
  --ink-900:#111827;
  --ink-800:#1F2937;
  --ink-700:#374151;
  --ink-600:#4B5563;
  --ink-500:#6B7280;
  --ink-400:#9CA3AF;
  --ink-300:#D1D5DB;

  --line-300:#D1D5DB;
  --line-200:#E5E7EB;
  --line-100:#F3F4F6;

  --bg-50:#F9FAFB;
  --bg-100:#F3F4F6;
  --white:#FFFFFF;

  /* 渐变（仅用于封面/品牌区，非大面积） */
  --brand-grad:linear-gradient(135deg,#1E40AF 0%,#2563EB 55%,#3B82F6 100%);

  /* 圆角 */
  --r-xs:4px;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-full:999px;

  /* 阴影 */
  --sh-xs:0 1px 2px rgba(17,24,39,.05);
  --sh-sm:0 1px 3px rgba(17,24,39,.08),0 1px 2px rgba(17,24,39,.04);
  --sh-md:0 4px 12px rgba(17,24,39,.08),0 2px 4px rgba(17,24,39,.04);
  --sh-lg:0 12px 32px rgba(17,24,39,.12),0 4px 8px rgba(17,24,39,.05);
  --sh-xl:0 24px 56px rgba(17,24,39,.16);

  /* 间距（8pt 基准） */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* 字体 */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Cascadia Mono",monospace;

  /* 布局尺寸 */
  --sidebar-w:220px;
  --topbar-h:56px;
  --content-max:1280px;
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:14px; line-height:22px;
  color:var(--ink-700); background:var(--bg-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{margin:0; color:var(--ink-900); font-weight:500}
p{margin:0}
a{color:var(--primary-600); text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0; padding:0; list-style:none}
button{font-family:inherit; font-size:inherit; cursor:pointer; border:none; background:none}
input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--primary-600); outline-offset:2px; border-radius:var(--r-xs)}

/* 字号层级 */
.t-display{font-size:24px; line-height:32px; font-weight:500; color:var(--ink-900)}
.t-h2{font-size:18px; line-height:26px; font-weight:500; color:var(--ink-900)}
.t-h3{font-size:16px; line-height:24px; font-weight:500; color:var(--ink-900)}
.t-body{font-size:14px; line-height:22px; color:var(--ink-700)}
.t-sm{font-size:13px; line-height:20px; color:var(--ink-600)}
.t-xs{font-size:12px; line-height:18px; color:var(--ink-500)}
.t-mono{font-family:var(--mono); font-size:12.5px; letter-spacing:-.01em}

.muted{color:var(--ink-500)}
.dim{color:var(--ink-400)}
.strong{font-weight:500; color:var(--ink-900)}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   3. 布局骨架 — 后台
   -------------------------------------------------------------------------- */
.app{display:flex; min-height:100vh}

.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--white); border-right:1px solid var(--line-200);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar__brand{
  height:var(--topbar-h); display:flex; align-items:center; gap:10px;
  padding:0 var(--sp-5); border-bottom:1px solid var(--line-100); flex:0 0 auto;
}
.logo-mark{
  width:28px; height:28px; border-radius:var(--r-md); background:var(--brand-grad);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:13px; font-weight:500; flex:0 0 auto;
}
.sidebar__brand-name{font-size:14px; font-weight:500; color:var(--ink-900); letter-spacing:.01em}
.sidebar__brand-sub{font-size:11px; color:var(--ink-400); line-height:14px}

.nav{padding:var(--sp-4) var(--sp-3); overflow-y:auto; flex:1}
.nav__group{font-size:11px; color:var(--ink-400); padding:var(--sp-3) var(--sp-3) var(--sp-2); letter-spacing:.06em}
.nav__item{
  display:flex; align-items:center; gap:10px; padding:9px var(--sp-3);
  border-radius:var(--r-md); color:var(--ink-600); font-size:13.5px;
  margin-bottom:2px; transition:background .12s,color .12s;
}
.nav__item:hover{background:var(--bg-100); color:var(--ink-900); text-decoration:none}
.nav__item.is-active{background:var(--primary-50); color:var(--primary-700); font-weight:500}
.nav__item.is-active .nav__icon{color:var(--primary-600)}
.nav__icon{width:16px; height:16px; flex:0 0 16px; color:var(--ink-400)}
.nav__badge{
  margin-left:auto; font-size:11px; line-height:16px; padding:0 6px;
  border-radius:var(--r-full); background:var(--danger-50); color:var(--danger-700);
}

.sidebar__foot{padding:var(--sp-4); border-top:1px solid var(--line-100); flex:0 0 auto}
.user-chip{display:flex; align-items:center; gap:10px}
.avatar{
  width:32px; height:32px; border-radius:var(--r-full); flex:0 0 32px;
  background:var(--primary-100); color:var(--primary-800);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500;
}
.user-chip__name{font-size:13px; color:var(--ink-900); line-height:18px}
.user-chip__role{font-size:11px; color:var(--ink-400); line-height:16px}

.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  height:var(--topbar-h); flex:0 0 auto; background:var(--white);
  border-bottom:1px solid var(--line-200); display:flex; align-items:center;
  gap:var(--sp-4); padding:0 var(--sp-6); position:sticky; top:0; z-index:20;
}
.breadcrumb{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-500); min-width:0}
.breadcrumb b{color:var(--ink-900); font-weight:500}
.breadcrumb__sep{color:var(--ink-300)}
.topbar__right{margin-left:auto; display:flex; align-items:center; gap:var(--sp-3)}

.page{padding:var(--sp-6); max-width:var(--content-max); width:100%}
.page--wide{max-width:none}

.page-head{display:flex; align-items:flex-start; gap:var(--sp-4); margin-bottom:var(--sp-6); flex-wrap:wrap}
.page-head__text{min-width:0}
.page-head__desc{font-size:13px; color:var(--ink-500); margin-top:4px; line-height:20px}
.page-head__actions{margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}

/* --------------------------------------------------------------------------
   4. 组件 — 按钮
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 var(--sp-4); border-radius:var(--r-md);
  font-size:13.5px; font-weight:500; line-height:1; white-space:nowrap;
  border:1px solid transparent; transition:background .12s,border-color .12s,color .12s;
}
.btn svg{width:15px; height:15px; flex:0 0 15px}
.btn--primary{background:var(--primary-600); color:#fff}
.btn--primary:hover{background:var(--primary-700); text-decoration:none}
.btn--primary:disabled{background:var(--ink-300); color:var(--white); cursor:not-allowed}
.btn--secondary{background:var(--white); color:var(--ink-700); border-color:var(--line-300)}
.btn--secondary:hover{background:var(--bg-50); border-color:var(--ink-300); text-decoration:none}
.btn--ghost{background:transparent; color:var(--ink-600)}
.btn--ghost:hover{background:var(--bg-100); text-decoration:none}
.btn--danger{background:var(--danger-600); color:#fff}
.btn--danger:hover{background:var(--danger-700); text-decoration:none}
.btn--danger-ghost{background:transparent; color:var(--danger-600); border-color:var(--danger-100)}
.btn--danger-ghost:hover{background:var(--danger-50); text-decoration:none}
.btn--sm{height:30px; padding:0 var(--sp-3); font-size:12.5px; border-radius:var(--r-sm)}
.btn--sm svg{width:13px; height:13px; flex:0 0 13px}
.btn--lg{height:44px; padding:0 var(--sp-6); font-size:15px}
.btn--block{width:100%}

/* --------------------------------------------------------------------------
   5. 组件 — 卡片 / 面板
   -------------------------------------------------------------------------- */
.card{
  background:var(--white); border:1px solid var(--line-200);
  border-radius:var(--r-lg); box-shadow:var(--sh-xs);
}
.card__head{
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line-100);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.card__title{font-size:15px; font-weight:500; color:var(--ink-900)}
.card__sub{font-size:12px; color:var(--ink-400); margin-left:auto}
.card__body{padding:var(--sp-5)}
.card__body--flush{padding:0}
.card__foot{padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--line-100); background:var(--bg-50); border-radius:0 0 var(--r-lg) var(--r-lg)}

.section-title{font-size:13px; font-weight:500; color:var(--ink-900); margin-bottom:var(--sp-3)}

/* 指标卡 */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-5)}
.stat{
  background:var(--white); border:1px solid var(--line-200); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5); box-shadow:var(--sh-xs);
}
.stat__label{font-size:12.5px; color:var(--ink-500); display:flex; align-items:center; gap:5px}
.stat__value{font-size:26px; line-height:34px; font-weight:500; color:var(--ink-900); margin-top:6px; font-variant-numeric:tabular-nums}
.stat__unit{font-size:14px; color:var(--ink-400); margin-left:3px; font-weight:400}
.stat__foot{font-size:12px; color:var(--ink-400); margin-top:4px}
.stat--accent{background:var(--primary-50); border-color:var(--primary-200)}
.stat--accent .stat__value{color:var(--primary-800)}

/* --------------------------------------------------------------------------
   6. 组件 — 表单
   -------------------------------------------------------------------------- */
.field{margin-bottom:var(--sp-5)}
.field__label{
  display:block; font-size:13px; font-weight:500; color:var(--ink-800);
  margin-bottom:6px;
}
.field__label .req{color:var(--danger-600); margin-left:2px}
.field__hint{font-size:12px; color:var(--ink-400); margin-top:5px; line-height:17px}
.field__row{display:flex; align-items:center; gap:var(--sp-2)}

.input,.select,.textarea{
  width:100%; height:36px; padding:0 var(--sp-3);
  border:1px solid var(--line-300); border-radius:var(--r-md);
  background:var(--white); color:var(--ink-900); font-size:13.5px;
  transition:border-color .12s,box-shadow .12s;
}
.textarea{height:auto; padding:9px var(--sp-3); line-height:21px; resize:vertical; min-height:76px}
.input::placeholder,.textarea::placeholder{color:var(--ink-400)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-300)}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--primary-600); box-shadow:0 0 0 3px var(--primary-50);
}
.select{
  appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:16px;
}
.input--error{border-color:var(--danger-600)}
.input--error:focus{box-shadow:0 0 0 3px var(--danger-50)}
.field__error{font-size:12px; color:var(--danger-600); margin-top:5px; display:flex; align-items:center; gap:4px}
.counter{font-size:11.5px; color:var(--ink-400); margin-top:5px; text-align:right; font-variant-numeric:tabular-nums}
.counter.is-over{color:var(--danger-600)}

.input-group{display:flex; gap:var(--sp-2)}
.input-group .input{flex:1}

/* 开关 */
.switch{display:inline-flex; align-items:center; gap:10px; cursor:pointer}
.switch__track{
  width:38px; height:22px; border-radius:var(--r-full); background:var(--ink-300);
  position:relative; transition:background .16s; flex:0 0 38px;
}
.switch__track::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:var(--sh-xs); transition:transform .16s;
}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch input:checked + .switch__track{background:var(--primary-600)}
.switch input:checked + .switch__track::after{transform:translateX(16px)}
.switch__text{font-size:13px; color:var(--ink-700)}

/* 片选（分段控件） */
.segment{display:inline-flex; background:var(--bg-100); border-radius:var(--r-md); padding:3px; gap:2px}
.segment__item{
  padding:5px 12px; border-radius:var(--r-sm); font-size:12.5px; color:var(--ink-600);
  transition:background .12s,color .12s;
}
.segment__item:hover{color:var(--ink-900); text-decoration:none}
.segment__item.is-on{background:var(--white); color:var(--ink-900); font-weight:500; box-shadow:var(--sh-xs)}

/* 单选卡 */
.radio-cards{display:grid; gap:var(--sp-2)}
.radio-card{
  display:flex; gap:10px; padding:var(--sp-3); border:1px solid var(--line-200);
  border-radius:var(--r-md); cursor:pointer; transition:border-color .12s,background .12s;
}
.radio-card:hover{border-color:var(--primary-200); background:var(--primary-50)}
.radio-card.is-on{border-color:var(--primary-600); background:var(--primary-50)}
.radio-card input{position:absolute; opacity:0; width:0; height:0}
.radio-dot{
  width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-300);
  flex:0 0 16px; margin-top:2px; position:relative; background:#fff;
}
.radio-card.is-on .radio-dot{border-color:var(--primary-600); border-width:5px}
.radio-card__title{font-size:13px; color:var(--ink-900); font-weight:500; line-height:19px}
.radio-card__desc{font-size:12px; color:var(--ink-500); line-height:17px; margin-top:2px}

/* 复选 */
.check{display:flex; gap:8px; align-items:flex-start; cursor:pointer}
.check input{
  width:16px; height:16px; margin:3px 0 0; flex:0 0 16px;
  accent-color:var(--primary-600); cursor:pointer;
}
.check__text{font-size:12.5px; color:var(--ink-600); line-height:19px}

/* --------------------------------------------------------------------------
   7. 组件 — 状态标签 / 徽标
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:var(--r-sm); font-size:12px; line-height:1; white-space:nowrap; font-weight:400;
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px}
.badge--gray{background:var(--bg-100); color:var(--ink-600)}
.badge--blue{background:var(--primary-50); color:var(--primary-700)}
.badge--green{background:var(--success-50); color:var(--success-700)}
.badge--amber{background:var(--warning-50); color:var(--warning-700)}
.badge--red{background:var(--danger-50); color:var(--danger-700)}
.badge--noline::before{display:none}

.tag{
  display:inline-flex; align-items:center; height:20px; padding:0 7px;
  border-radius:var(--r-xs); background:var(--bg-100); color:var(--ink-600); font-size:11.5px;
}
.tag--blue{background:var(--primary-50); color:var(--primary-700)}
.tag--amber{background:var(--warning-50); color:var(--warning-700)}

/* --------------------------------------------------------------------------
   8. 组件 — 表格
   -------------------------------------------------------------------------- */
.tbl{width:100%; border-collapse:separate; border-spacing:0; font-size:13px}
.tbl th{
  text-align:left; font-size:12px; font-weight:500; color:var(--ink-500);
  background:var(--bg-50); padding:10px var(--sp-4); white-space:nowrap;
  border-bottom:1px solid var(--line-200); position:sticky; top:0; z-index:2;
}
.tbl td{
  padding:12px var(--sp-4); border-bottom:1px solid var(--line-100);
  vertical-align:middle; color:var(--ink-700);
}
.tbl tbody tr:hover{background:var(--bg-50)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl__name{font-weight:500; color:var(--ink-900); font-size:13.5px}
.tbl__sub{font-size:12px; color:var(--ink-400); margin-top:2px}
.tbl-actions{display:flex; gap:var(--sp-3); align-items:center; white-space:nowrap}
.link-btn{font-size:12.5px; color:var(--primary-600); background:none; padding:0}
.link-btn:hover{text-decoration:underline}
.link-btn--danger{color:var(--danger-600)}
.tbl-wrap{overflow-x:auto}

/* 表格内的缩略图 */
.thumb{
  width:36px; height:48px; border-radius:var(--r-xs); flex:0 0 36px;
  background:var(--bg-100); border:1px solid var(--line-200);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  position:relative;
}
.thumb--blue{background:linear-gradient(150deg,#DBEAFE,#93C5FD)}
.thumb--teal{background:linear-gradient(150deg,#D1FAE5,#6EE7B7)}
.thumb--amber{background:linear-gradient(150deg,#FEF3C7,#FCD34D)}
.thumb--rose{background:linear-gradient(150deg,#FCE7F3,#F9A8D4)}
.thumb__bar{width:60%; height:3px; border-radius:2px; background:rgba(255,255,255,.85)}
.thumb__lines{display:grid; gap:3px; width:62%}

.media{display:flex; align-items:center; gap:var(--sp-3); min-width:0}
.media__body{min-width:0}

/* --------------------------------------------------------------------------
   9. 组件 — 进度条
   -------------------------------------------------------------------------- */
.progress{height:6px; border-radius:var(--r-full); background:var(--bg-100); overflow:hidden; min-width:80px}
.progress__bar{height:100%; border-radius:var(--r-full); background:var(--primary-600); transition:width .3s}
.progress__bar--green{background:var(--success-600)}
.progress__bar--amber{background:var(--warning-600)}
.progress__bar--red{background:var(--danger-600)}
.progress-row{display:flex; align-items:center; gap:var(--sp-3)}
.progress-row .progress{flex:1}
.progress-row__val{font-size:12px; color:var(--ink-500); font-variant-numeric:tabular-nums; width:52px; text-align:right; flex:0 0 52px}

/* --------------------------------------------------------------------------
   10. 组件 — 提示条 / 空状态
   -------------------------------------------------------------------------- */
.alert{
  display:flex; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); border:1px solid; font-size:13px; line-height:20px;
  margin-bottom:var(--sp-5);
}
.alert svg{width:16px; height:16px; flex:0 0 16px; margin-top:2px}
.alert__title{font-weight:500; display:block; margin-bottom:2px}
.alert--info{background:var(--primary-50); border-color:var(--primary-200); color:var(--primary-800)}
.alert--warn{background:var(--warning-50); border-color:var(--warning-100); color:var(--warning-700)}
.alert--danger{background:var(--danger-50); border-color:var(--danger-100); color:var(--danger-700)}
.alert--success{background:var(--success-50); border-color:var(--success-100); color:var(--success-700)}

.empty{
  padding:var(--sp-12) var(--sp-6); text-align:center; color:var(--ink-500);
}
.empty__icon{
  width:48px; height:48px; border-radius:var(--r-lg); background:var(--bg-100);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--sp-4);
  color:var(--ink-400);
}
.empty__title{font-size:14px; color:var(--ink-800); font-weight:500; margin-bottom:4px}
.empty__desc{font-size:12.5px; color:var(--ink-400); margin-bottom:var(--sp-4)}

/* 分页 */
.pager{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); flex-wrap:wrap}
.pager__info{font-size:12.5px; color:var(--ink-500)}
.pager__list{margin-left:auto; display:flex; gap:4px}
.pager__btn{
  min-width:30px; height:30px; padding:0 8px; border-radius:var(--r-sm);
  border:1px solid var(--line-200); background:var(--white); color:var(--ink-600);
  font-size:12.5px; display:inline-flex; align-items:center; justify-content:center;
}
.pager__btn:hover{background:var(--bg-50); text-decoration:none}
.pager__btn.is-on{background:var(--primary-600); border-color:var(--primary-600); color:#fff; font-weight:500}

/* 底部固定操作条 */
.action-bar{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-5);
  background:var(--white); border-top:1px solid var(--line-200);
  border-radius:0 0 var(--r-lg) var(--r-lg); flex-wrap:wrap;
}
.action-bar__spacer{margin-left:auto}

/* --------------------------------------------------------------------------
   11. 后台专用 — 三栏编辑台
   -------------------------------------------------------------------------- */
.workbench{
  display:grid; grid-template-columns:352px minmax(0,1fr) 320px;
  gap:var(--sp-4); align-items:start;
}
.workbench__col{min-width:0}
@media (max-width:1360px){
  .workbench{grid-template-columns:320px minmax(0,1fr)}
  .workbench__col--rail{grid-column:1 / -1}
}
@media (max-width:1000px){
  .workbench{grid-template-columns:1fr}
}

/* 文件列表项（可拖拽） */
.filelist{display:grid; gap:6px}
.file-item{
  display:flex; align-items:center; gap:10px; padding:10px var(--sp-3);
  border:1px solid var(--line-200); border-radius:var(--r-md); background:var(--white);
  transition:border-color .12s,box-shadow .12s; position:relative;
}
.file-item:hover{border-color:var(--primary-200); box-shadow:var(--sh-xs)}
.file-item.is-dragging{
  border-color:var(--primary-600); box-shadow:var(--sh-md);
  background:var(--primary-50); opacity:.92;
}
.file-item__idx{
  width:22px; height:22px; border-radius:var(--r-sm); background:var(--bg-100);
  color:var(--ink-600); font-size:11.5px; display:flex; align-items:center;
  justify-content:center; flex:0 0 22px; font-variant-numeric:tabular-nums;
}
.file-item.is-dragging .file-item__idx{background:var(--primary-600); color:#fff}
.grip{
  width:14px; flex:0 0 14px; display:grid; gap:2px; cursor:grab; color:var(--ink-300);
}
.grip span{display:block; height:2px; background:currentColor; border-radius:1px}
.file-item__body{min-width:0; flex:1}
.file-item__name{
  font-size:13px; color:var(--ink-900); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-item__meta{font-size:11.5px; color:var(--ink-400); margin-top:2px; display:flex; gap:8px}
.file-item__icon{color:var(--ink-300); flex:0 0 auto}

/* 拖拽插入指示线 */
.drop-line{height:2px; border-radius:2px; background:var(--primary-600); margin:-4px 0}

/* 手机预览框 */
.phone{
  width:250px; margin:0 auto; background:var(--ink-900);
  border-radius:22px; padding:7px; box-shadow:var(--sh-lg);
}
.phone__screen{
  background:var(--white); border-radius:16px; overflow:hidden;
  height:430px; display:flex; flex-direction:column; position:relative;
}
.phone__notch{
  height:20px; flex:0 0 auto; background:var(--ink-900); color:#fff;
  font-size:9px; display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; font-variant-numeric:tabular-nums;
}
.phone__cover{
  height:132px; flex:0 0 auto; background:var(--brand-grad); color:#fff;
  padding:var(--sp-3); display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
}
.phone__cover-title{font-size:14px; font-weight:500; line-height:19px}
.phone__cover-sub{font-size:10px; opacity:.82; margin-top:3px}
.phone__cover-brand{font-size:9px; opacity:.7; position:absolute; top:var(--sp-3); right:var(--sp-3)}
.phone__list{padding:var(--sp-2) var(--sp-3); display:grid; gap:6px; overflow:hidden; flex:1}
.phone__row{display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--ink-700)}
.phone__row-idx{
  width:16px; height:16px; border-radius:4px; background:var(--bg-100); color:var(--ink-500);
  font-size:9px; display:flex; align-items:center; justify-content:center; flex:0 0 16px;
}
.phone__row-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.phone__row-pg{font-size:9px; color:var(--ink-400)}

/* 二维码卡 */
.qr-card{
  background:var(--white); border:1px solid var(--line-200); border-radius:var(--r-lg);
  padding:var(--sp-5); text-align:center;
}
.qr-box{
  width:148px; height:148px; margin:0 auto var(--sp-4); padding:8px;
  background:#fff; border:1px solid var(--line-200); border-radius:var(--r-md);
}
.qr-grid{display:grid; grid-template-columns:repeat(21,1fr); grid-template-rows:repeat(21,1fr); gap:0; width:100%; height:100%}
.qr-grid i{background:var(--ink-900); display:block}
.qr-grid i.off{background:transparent}
.qr-logo{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.qr-logo span{
  width:30px; height:30px; border-radius:var(--r-sm); background:var(--brand-grad);
  color:#fff; font-size:11px; font-weight:500; display:flex; align-items:center;
  justify-content:center; border:2px solid #fff;
}
.qr-meta{font-size:11.5px; color:var(--ink-500); line-height:17px}
.shortlink{
  display:flex; align-items:center; gap:6px; margin-top:var(--sp-3);
  background:var(--bg-50); border:1px solid var(--line-200); border-radius:var(--r-sm);
  padding:7px 9px; font-size:11.5px; color:var(--ink-600);
}
.shortlink code{font-family:var(--mono); font-size:11px; color:var(--ink-800); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* --------------------------------------------------------------------------
   12. 扫码访问端 (H5)
   -------------------------------------------------------------------------- */
.h5-stage{
  min-height:100vh; background:#EEF2F7; display:flex; align-items:flex-start;
  justify-content:center; padding:var(--sp-8) var(--sp-4); gap:var(--sp-8); flex-wrap:wrap;
}
.h5-frame{
  width:390px; flex:0 0 390px; background:#0B1220; border-radius:38px;
  padding:10px; box-shadow:var(--sh-xl); position:relative;
}
.h5-frame__screen{
  background:var(--white); border-radius:30px; overflow:hidden;
  height:780px; position:relative; display:flex; flex-direction:column;
}
.h5-status{
  height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-5); font-size:13px; color:var(--ink-900);
  font-weight:500; font-variant-numeric:tabular-nums; background:var(--white);
  position:relative; z-index:3;
}
.h5-status__icons{display:flex; gap:4px; align-items:center; color:var(--ink-800)}
.h5-nav{
  height:44px; flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-4); background:var(--white); border-bottom:1px solid var(--line-100);
  position:relative; z-index:3;
}
.h5-nav__back{display:flex; align-items:center; gap:3px; color:var(--ink-700); font-size:13px}
.h5-nav__title{
  font-size:14px; font-weight:500; color:var(--ink-900); flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.h5-nav__action{font-size:13px; color:var(--primary-600)}
.h5-nav--float{
  position:absolute; top:44px; left:0; right:0; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line-100);
}
.h5-body{flex:1; overflow-y:auto; overflow-x:hidden; position:relative; -webkit-overflow-scrolling:touch}
.h5-body::-webkit-scrollbar{width:0}
.h5-foot{
  flex:0 0 auto; padding:var(--sp-3) var(--sp-5) var(--sp-5);
  border-top:1px solid var(--line-100); background:var(--white);
}

/* H5 封面 */
.cover-hero{
  position:relative; background:var(--brand-grad); color:#fff;
  padding:82px var(--sp-5) var(--sp-6); overflow:hidden;
}
.cover-hero::after{
  content:""; position:absolute; right:-40px; bottom:-60px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.09);
}
.cover-hero::before{
  content:""; position:absolute; right:36px; bottom:22px;
  width:88px; height:88px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.cover-hero__brand{font-size:12px; opacity:.8; letter-spacing:.04em; margin-bottom:var(--sp-5)}
.cover-hero__title{font-size:23px; line-height:31px; font-weight:500; position:relative; z-index:2}
.cover-hero__sub{font-size:13.5px; line-height:20px; opacity:.86; margin-top:var(--sp-3); position:relative; z-index:2}
.cover-hero__meta{
  display:flex; gap:var(--sp-4); margin-top:var(--sp-5); font-size:12px;
  opacity:.85; position:relative; z-index:2;
}
.cover-hero__meta span{display:flex; align-items:center; gap:5px}

.catalog{padding:var(--sp-4) var(--sp-5) var(--sp-2)}
.catalog__head{
  display:flex; align-items:baseline; gap:var(--sp-2); margin-bottom:var(--sp-3);
}
.catalog__title{font-size:14px; font-weight:500; color:var(--ink-900)}
.catalog__count{font-size:12px; color:var(--ink-400)}

.doc-row{
  display:flex; align-items:center; gap:var(--sp-3); padding:13px 0;
  border-bottom:1px solid var(--line-100); color:inherit;
}
.doc-row:hover{text-decoration:none}
.doc-row:last-child{border-bottom:none}
.doc-row__idx{
  width:26px; height:26px; border-radius:var(--r-sm); background:var(--primary-50);
  color:var(--primary-700); font-size:12px; font-weight:500; flex:0 0 26px;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.doc-row__body{flex:1; min-width:0; display:flex; align-items:baseline; gap:var(--sp-3)}
.doc-row__name{
  font-size:14px; color:var(--ink-900); font-weight:500; line-height:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.doc-row__meta{font-size:12px; color:var(--ink-400); margin-left:auto; flex:0 0 auto}
.doc-row__arrow{color:var(--ink-300); flex:0 0 auto}

/* H5 阅读器 */
.reader-page{
  background:var(--bg-50); padding:var(--sp-4) var(--sp-4) 72px;
  display:grid; gap:var(--sp-3);
}
.page-sheet{
  background:#fff; border-radius:var(--r-md); box-shadow:var(--sh-sm);
  padding:22px 20px; position:relative; overflow:hidden;
}
.page-sheet__no{
  position:absolute; top:8px; right:10px; font-size:10px;
  color:var(--ink-300); font-variant-numeric:tabular-nums;
}
.sheet-h{height:14px; border-radius:3px; background:var(--ink-800); width:62%; margin-bottom:6px}
.sheet-h2{height:11px; border-radius:3px; background:var(--ink-700); width:44%; margin:18px 0 10px}
.sheet-l{height:7px; border-radius:2px; background:var(--line-200); margin-bottom:8px}
.sheet-l.w95{width:95%} .sheet-l.w88{width:88%} .sheet-l.w76{width:76%} .sheet-l.w60{width:60%}
.sheet-chart{
  height:76px; border-radius:var(--r-sm); background:var(--primary-50);
  border:1px solid var(--primary-100); margin:14px 0; display:flex;
  align-items:flex-end; justify-content:space-around; padding:10px;
}
.sheet-chart i{width:14px; background:var(--primary-500); border-radius:2px 2px 0 0; opacity:.85}
.sheet-table{border:1px solid var(--line-200); border-radius:var(--r-sm); overflow:hidden; margin:14px 0}
.sheet-table .tr{display:flex; border-bottom:1px solid var(--line-100)}
.sheet-table .tr:last-child{border-bottom:none}
.sheet-table .td{flex:1; padding:7px 9px; font-size:11px; color:var(--ink-500)}
.sheet-table .th{background:var(--bg-50); font-weight:500; color:var(--ink-700)}

/* 水印层 */
.watermark{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:4;
  display:flex; flex-wrap:wrap; align-content:flex-start;
}
.watermark span{
  display:block; width:33.33%; padding:26px 0; text-align:center;
  font-size:11px; color:rgba(17,24,39,.075); transform:rotate(-24deg);
  white-space:nowrap; letter-spacing:.06em; user-select:none;
}
.watermark--dark span{color:rgba(255,255,255,.13)}

/* 迷你进度条 */
.mini-progress{
  position:absolute; right:5px; top:120px; bottom:120px; width:3px;
  background:rgba(17,24,39,.12); border-radius:2px; z-index:5;
}
.mini-progress__thumb{
  width:3px; height:76px; background:var(--primary-600); border-radius:2px;
}
.mini-progress__label{
  position:absolute; right:14px; bottom:0; background:var(--ink-900); color:#fff;
  font-size:11px; padding:3px 7px; border-radius:var(--r-xs); white-space:nowrap;
}

/* H5 底部工具条 */
.reader-toolbar{
  display:flex; align-items:center; justify-content:space-around;
  padding:var(--sp-2) var(--sp-3);
}
.reader-tool{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:11px; color:var(--ink-500); padding:6px 14px; border-radius:var(--r-md);
}
.reader-tool:hover{background:var(--bg-100); text-decoration:none}
.reader-tool--off{color:var(--ink-300); cursor:not-allowed}

/* 异常状态页 */
.state-page{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:var(--sp-8) var(--sp-6);
}
.state-icon{
  width:76px; height:76px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; margin-bottom:var(--sp-5);
}
.state-icon--gray{background:var(--bg-100); color:var(--ink-400)}
.state-icon--amber{background:var(--warning-50); color:var(--warning-600)}
.state-icon--blue{background:var(--primary-50); color:var(--primary-600)}
.state-title{font-size:18px; font-weight:500; color:var(--ink-900); margin-bottom:var(--sp-2)}
.state-desc{font-size:13.5px; color:var(--ink-500); line-height:21px; max-width:270px}
.state-card{
  margin-top:var(--sp-6); width:100%; background:var(--bg-50);
  border:1px solid var(--line-200); border-radius:var(--r-lg); padding:var(--sp-4);
  text-align:left;
}
.state-card__row{display:flex; gap:var(--sp-3); font-size:12.5px; margin-bottom:8px}
.state-card__row:last-child{margin-bottom:0}
.state-card__k{color:var(--ink-500); flex:0 0 auto; white-space:nowrap}
.state-card__v{color:var(--ink-800); font-weight:500; text-align:right; min-width:0}
.state-actions{display:grid; gap:var(--sp-3); margin-top:var(--sp-6); width:100%}

/* 分享卡片 */
.share-card{
  width:300px; background:var(--white); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-md); border:1px solid var(--line-200);
}
.share-card__cover{height:132px; background:var(--brand-grad); position:relative; padding:var(--sp-4); display:flex; flex-direction:column; justify-content:flex-end; color:#fff}
.share-card__title{font-size:14px; font-weight:500; line-height:19px}
.share-card__sub{font-size:11px; opacity:.85; margin-top:3px}
.share-card__body{padding:var(--sp-3) var(--sp-4)}
.share-card__desc{font-size:12.5px; color:var(--ink-600); line-height:18px}
.share-card__src{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-400); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line-100)}
.share-card__logo{width:14px; height:14px; border-radius:3px; background:var(--brand-grad); color:#fff; font-size:8px; display:flex; align-items:center; justify-content:center}

/* --------------------------------------------------------------------------
   13. 原型总览页
   -------------------------------------------------------------------------- */
.spec-stage{background:var(--bg-50); min-height:100vh}
.spec-wrap{max-width:1400px; margin:0 auto; padding:var(--sp-10) var(--sp-6) var(--sp-12)}
.spec-head{margin-bottom:var(--sp-8)}
.spec-head__kicker{font-size:12px; letter-spacing:.1em; color:var(--primary-600); margin-bottom:var(--sp-3)}
.spec-head h1{font-size:30px; line-height:40px; font-weight:500}
.spec-head__desc{font-size:14px; color:var(--ink-500); margin-top:var(--sp-3); max-width:760px; line-height:23px}
.spec-head__meta{display:flex; gap:var(--sp-6); margin-top:var(--sp-5); flex-wrap:wrap}
.spec-head__meta div{font-size:12.5px; color:var(--ink-500)}
.spec-head__meta b{display:block; color:var(--ink-900); font-weight:500; font-size:14px; margin-top:2px}

.panel{
  background:var(--white); border:1px solid var(--line-200); border-radius:var(--r-xl);
  padding:var(--sp-6); margin-bottom:var(--sp-6);
}
.panel__title{font-size:16px; font-weight:500; margin-bottom:var(--sp-2)}
.panel__desc{font-size:13px; color:var(--ink-500); margin-bottom:var(--sp-5); line-height:20px}

.swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:var(--sp-3)}
.swatch{border:1px solid var(--line-200); border-radius:var(--r-md); overflow:hidden}
.swatch__chip{height:56px}
.swatch__info{padding:9px 11px}
.swatch__name{font-size:12px; color:var(--ink-800); font-weight:500}
.swatch__val{font-family:var(--mono); font-size:11px; color:var(--ink-500); margin-top:2px}

.token-table{width:100%; border-collapse:collapse; font-size:13px}
.token-table th{text-align:left; font-size:12px; color:var(--ink-500); font-weight:500; padding:8px 12px; background:var(--bg-50); border-bottom:1px solid var(--line-200)}
.token-table td{padding:9px 12px; border-bottom:1px solid var(--line-100); color:var(--ink-700)}
.token-table code{font-family:var(--mono); font-size:12px; background:var(--bg-100); padding:1px 5px; border-radius:var(--r-xs); color:var(--ink-800)}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-5)}
.pcard{
  background:var(--white); border:1px solid var(--line-200); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-xs); display:flex; flex-direction:column;
  transition:box-shadow .16s,transform .16s,border-color .16s;
}
.pcard:hover{box-shadow:var(--sh-md); transform:translateY(-2px); border-color:var(--primary-200); text-decoration:none}
.pcard__shot{
  height:180px; background:var(--bg-100); overflow:hidden; position:relative;
  border-bottom:1px solid var(--line-100);
}
.pcard__shot iframe{
  position:absolute; top:0; left:0; border:0; transform-origin:0 0;
  pointer-events:none; background:#fff;
}
.pcard__shot--phone{display:flex; align-items:flex-start; justify-content:center; padding-top:12px; background:#EEF2F7}
.pcard__shot--phone iframe{border-radius:12px; box-shadow:var(--sh-sm)}
.pcard__body{padding:var(--sp-4)}
.pcard__no{font-size:11px; color:var(--ink-400); font-family:var(--mono); letter-spacing:.04em}
.pcard__title{font-size:14.5px; font-weight:500; color:var(--ink-900); margin-top:4px}
.pcard__desc{font-size:12.5px; color:var(--ink-500); line-height:18px; margin-top:6px}
.pcard__tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--sp-3)}

.note{font-size:12.5px; color:var(--ink-500); line-height:19px}
.note-list{display:grid; gap:var(--sp-2)}
.note-list li{display:flex; gap:var(--sp-2); font-size:12.5px; color:var(--ink-600); line-height:19px}
.note-list li svg{flex:0 0 14px; width:14px; height:14px; margin-top:3px; color:var(--ink-400)}

.spec-foot{text-align:center; font-size:12px; color:var(--ink-400); padding-top:var(--sp-6); line-height:19px}

/* --------------------------------------------------------------------------
   14. 响应式 — 后台小屏降级
   -------------------------------------------------------------------------- */
.sidebar-toggle{display:none}
@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:0; z-index:60; transform:translateX(-100%);
    transition:transform .2s; box-shadow:var(--sh-lg);
  }
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-toggle{display:inline-flex}
  .page{padding:var(--sp-4)}
  .topbar{padding:0 var(--sp-4)}
  .h5-frame{flex:0 0 100%}
}
@media (max-width:640px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat__value{font-size:22px}
  .page-head__actions{margin-left:0; width:100%}
  .h5-stage{padding:var(--sp-4) var(--sp-3)}
  .h5-frame{padding:0; border-radius:0; background:transparent; box-shadow:none; flex:0 0 100%}
  .h5-frame__screen{border-radius:0; height:auto; min-height:100vh}
}

/* --------------------------------------------------------------------------
   15. 打印
   -------------------------------------------------------------------------- */
@media print{
  body{background:#fff}
  .sidebar,.topbar{display:none}
  .panel,.card{break-inside:avoid; box-shadow:none}
}