/* ============================================================
   灯塔 · 秒出片工作台 —— 视觉系统 v3
   ------------------------------------------------------------
   改肤只动 :root。层级：token → 重置 → 组件 → 页面 → 响应式
   设计原则：白底纸感 + 暖橘主色；一屏一个主动作；状态永远可读。
   ============================================================ */

:root{
  /* ---------- 品牌色（暖橘 = 出片的能量感） ---------- */
  --brand-50:#FFF3EC;  --brand-100:#FFE4D4; --brand-200:#FFCDB0; --brand-300:#FFB08A;
  --brand-400:#FF7A3D; --brand-500:#FF5C1A; --brand-600:#F04A00; --brand-700:#C43A00;
  --brand-ink:#8A2A00;

  /* ---------- 墨色阶 ---------- */
  --ink-900:#1A1614; --ink-800:#2A2422; --ink-700:#443E3A; --ink-600:#57504B;
  --ink-500:#6B625C; --ink-400:#A79E98; --ink-300:#D6CFC9;

  /* ---------- 语义色 ---------- */
  --ok:#12A150;     --ok-bg:#dcfce7;     --ok-line:#bbf7d0;
  --warn:#b45309;   --warn-bg:#fef3c7;   --warn-line:#fde68a;
  --danger:#b91c1c; --danger-bg:#fee2e2; --danger-line:#fecaca;
  --info:#1d4ed8;   --info-bg:#dbeafe;

  /* ---------- 面 ---------- */
  --bg:#FAF8F6; --surface:#fff; --surface-2:#F7F5F3;
  --line:#E9E4E0; --line-2:#F1EDE9;

  /* ---------- 字体层级（统一走变量，别再写死 px） ---------- */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:14.5px;
  --fs-md:15.5px; --fs-lg:18px; --fs-xl:21px; --fs-2xl:26px; --fs-3xl:34px;
  --fw-normal:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;
  --lh-tight:1.28; --lh-base:1.62; --lh-loose:1.85;

  /* ---------- 圆角 ---------- */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:16px; --r-xl:20px; --r-2xl:26px; --r-full:99px;

  /* ---------- 阴影 ---------- */
  --sh-1:0 1px 2px rgba(28,25,23,.05);
  --sh-2:0 2px 10px rgba(28,25,23,.06);
  --sh-3:0 14px 34px -14px rgba(28,25,23,.2);
  --sh-brand:0 12px 26px -12px rgba(234,88,12,.5);

  /* ---------- 间距 ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:26px; --sp-7:34px;

  /* ---------- 动效 ---------- */
  --ease:cubic-bezier(.2,.7,.3,1); --dur:.22s;
}

/* ============================ 重置 ============================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink-900);
  font-size:var(--fs-base); line-height:var(--lh-base);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* 柔光背景：极淡，只负责让白底不"死"，不做视觉主角 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 8% 0%, rgba(253,186,116,.20), transparent 62%),
    radial-gradient(680px 460px at 96% 12%, rgba(167,243,208,.16), transparent 62%),
    radial-gradient(560px 420px at 52% 100%, rgba(199,210,254,.16), transparent 62%);
}
::selection{background:var(--brand-200); color:var(--brand-ink);}

/* 图标（统一尺寸/对齐，颜色跟着 currentColor 走） */
.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.icon.fill{fill:currentColor;stroke:none;}

/* ============================ 顶栏 ============================ */
.topbar{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-6); height:62px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{
  display:flex; align-items:center; gap:9px;
  font-weight:var(--fw-black); font-size:var(--fs-lg);
  white-space:nowrap; letter-spacing:.01em;
}
/* 品牌标：橘底白灯塔，一眼记住 */
.brand-mark{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,var(--brand-500),var(--brand-700));
  display:flex;align-items:center;justify-content:center;
  color:#fff; box-shadow:var(--sh-brand);
}
.brand-mark .icon{width:17px;height:17px;stroke-width:2;}
.brand em{font-style:normal;color:var(--brand-700);}

/* 三步导航：全程唯一主线的可视化 */
.steps{display:flex;align-items:center;gap:2px;list-style:none;flex:1;min-width:0;}
.steps li{
  display:flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-full);cursor:pointer;
  color:var(--ink-500);font-size:var(--fs-sm);font-weight:var(--fw-med);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.steps li i{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--ink-300);
  color:var(--ink-500);font-style:normal;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  transition:all var(--dur) var(--ease);
}
.steps li:hover{color:var(--ink-900);background:var(--surface-2);}
.steps li.active{background:var(--brand-50);color:var(--brand-700);font-weight:var(--fw-semi);}
.steps li.active i{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:0 0 0 3px var(--brand-100);}
.steps li.sep{padding:0 2px;color:var(--ink-300);cursor:default;font-size:var(--fs-xs);}

#nav{display:flex;gap:2px;}
#nav a{
  display:flex;align-items:center;gap:6px;
  color:var(--ink-600);text-decoration:none;font-size:var(--fs-sm);font-weight:var(--fw-med);
  padding:7px 12px;border-radius:var(--r-full);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
#nav a .icon{width:15px;height:15px;opacity:.85;}
#nav a:hover{color:var(--ink-900);background:var(--surface-2);}
#nav a.active{color:var(--brand-700);background:var(--brand-50);font-weight:var(--fw-semi);}
#nav a.active .icon{opacity:1;}

.userbox{display:flex;align-items:center;gap:var(--sp-3);}
.points{
  display:flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,var(--ink-900),var(--ink-700));color:#fff;
  font-weight:var(--fw-bold);padding:7px 14px;border-radius:var(--r-full);
  font-size:var(--fs-sm);white-space:nowrap;box-shadow:var(--sh-1);
}
.points .icon{width:14px;height:14px;color:var(--brand-300);}

/* ============================ 主体 ============================ */
main{max-width:1180px;margin:0 auto;padding:var(--sp-7) var(--sp-6) 60px;}

h1{font-size:var(--fs-2xl);font-weight:var(--fw-black);letter-spacing:-.01em;
  line-height:var(--lh-tight);margin-bottom:var(--sp-2);}
h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.01em;
  line-height:var(--lh-tight);margin-bottom:var(--sp-3);}
h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);}
.sub{color:var(--ink-600);margin-bottom:var(--sp-4);font-size:var(--fs-base);line-height:var(--lh-base);}
.hint{color:var(--ink-500);font-size:var(--fs-sm);line-height:var(--lh-base);}
.row{display:flex;align-items:center;}
.row.between{justify-content:space-between;gap:var(--sp-4);}
.row.gap{gap:var(--sp-3);}
.row.gap select{flex:1;}

/* 小标签 / 徽标 */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);font-weight:var(--fw-semi);
  padding:3px 10px;border-radius:var(--r-full);
  background:var(--surface-2);color:var(--ink-600);border:1px solid var(--line);
}
.chip.brand{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-200);}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line);}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line);}
.chip.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line);}

/* ============================ 表单控件 ============================ */
input,select,textarea{
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--fs-md);width:100%;font-family:inherit;
  background:var(--surface);color:var(--ink-900);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--ink-400);}
textarea{resize:vertical;line-height:var(--lh-loose);}
input:hover,select:hover,textarea:hover{border-color:var(--ink-300);}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-500);background:var(--surface);
  box-shadow:0 0 0 3.5px rgba(249,115,22,.13);
}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}

button{
  cursor:pointer;border:none;border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:var(--fw-med);
  padding:11px 18px;white-space:nowrap;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .15s var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
button.primary{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  color:#fff;font-weight:var(--fw-semi);box-shadow:var(--sh-brand);
}
button.primary:hover{transform:translateY(-1.5px);box-shadow:0 16px 30px -12px rgba(234,88,12,.62);}
button.primary:active{transform:translateY(0);}
button.primary.big{width:100%;padding:16px;font-size:var(--fs-lg);letter-spacing:.01em;margin-top:4px;}
button.primary:disabled{background:var(--ink-300);color:#fff;cursor:not-allowed;
  transform:none;box-shadow:none;filter:none;}
button.ghost{
  background:var(--surface);color:var(--ink-700);border:1px solid var(--line);
}
button.ghost:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50);}
button.ghost:disabled{opacity:.5;cursor:not-allowed;}
button.ghost:disabled:hover{border-color:var(--line);color:var(--ink-700);background:var(--surface);}

.filebtn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));color:#fff;
  font-weight:var(--fw-semi);font-size:var(--fs-md);
  padding:11px 18px;border-radius:var(--r-md);cursor:pointer;box-shadow:var(--sh-brand);
  transition:transform .15s var(--ease),box-shadow var(--dur) var(--ease);
}
.filebtn:hover{transform:translateY(-1.5px);box-shadow:0 16px 30px -12px rgba(234,88,12,.62);}
.filebtn.ghost{background:var(--surface);color:var(--ink-700);box-shadow:none;border:1px solid var(--line);}
.filebtn.ghost:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50);}

/* ============================ 卡片 ============================ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--sp-7);box-shadow:var(--sh-2);
}
.card.center{
  max-width:440px;margin:56px auto;text-align:center;
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.card.center h1{font-size:var(--fs-2xl);}
.card.center .logo-lg{
  width:56px;height:56px;margin:0 auto var(--sp-2);border-radius:17px;
  background:linear-gradient(145deg,var(--brand-500),var(--brand-700));
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 16px 30px -14px rgba(234,88,12,.6);
}
.card.center .logo-lg .icon{width:30px;height:30px;stroke-width:2;}

/* 网格：大屏 3 列起，小屏自动降列 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--sp-4);margin-top:var(--sp-4);}

.item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-4);
  box-shadow:var(--sh-1);height:100%;
  display:flex;flex-direction:column;gap:var(--sp-2);
  transition:transform .18s var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.item:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--ink-300);}
.item-title{font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink-900);
  line-height:var(--lh-tight);word-break:break-word;}
.item-meta{color:var(--ink-500);font-size:var(--fs-sm);line-height:var(--lh-base);}
/* 卡片底部动作区：永远沉底，所以同排卡片按钮一定在一条线上 */
.item-actions{margin-top:auto;display:flex;gap:var(--sp-2);padding-top:var(--sp-2);}
.item-actions button,.item-actions a{flex:1;font-size:var(--fs-sm);padding:9px 12px;}
.item-actions a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;background:var(--surface);color:var(--ink-700);
  border:1px solid var(--line);border-radius:var(--r-md);font-weight:var(--fw-med);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.item-actions a:hover{border-color:var(--brand-400);color:var(--brand-700);background:var(--brand-50);}

.thumb{width:100%;height:140px;object-fit:cover;border-radius:var(--r-md);background:var(--ink-900);display:block;}
.mimg{width:100%;height:200px;object-fit:cover;border-radius:var(--r-md);display:block;
  background:linear-gradient(110deg,var(--surface-2) 30%,#ecebe6 50%,var(--surface-2) 70%);
  background-size:220% 100%;animation:shimmer 1.5s linear infinite;opacity:0;
  transition:opacity .45s var(--ease);}
.mimg.loaded{opacity:1;animation:none;background:var(--surface-2);}

@keyframes shimmer{from{background-position:180% 0;}to{background-position:-60% 0;}}

/* ============================ 空状态 ============================ */
.empty{
  background:var(--surface);border:1.5px dashed var(--ink-300);
  border-radius:var(--r-xl);padding:var(--sp-7) var(--sp-5);
  text-align:center;margin-top:var(--sp-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.empty-ico{
  width:52px;height:52px;border-radius:var(--r-lg);
  background:var(--brand-50);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-1);
}
.empty-ico .icon{width:26px;height:26px;stroke-width:1.7;}
.empty h3{font-size:var(--fs-lg);font-weight:var(--fw-bold);}
.empty p{color:var(--ink-500);font-size:var(--fs-base);max-width:420px;line-height:var(--lh-base);}
.empty .filebtn,.empty button{margin-top:var(--sp-2);}

/* ============================ 出片台 ============================ */
.studio-wrap{display:grid;grid-template-columns:minmax(380px,1fr) minmax(330px,400px);gap:var(--sp-5);align-items:start;}

/* 往期公告条（P0 #6）：整行跨两列 */
.annbar{
  grid-column:1 / -1;display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--r-md);
  background:var(--brand-50);border:1px solid var(--brand-200);color:var(--ink-800);
  font-size:var(--fs-sm);line-height:var(--lh-base);
}
.annbar .icon{width:18px;height:18px;flex:none;color:var(--brand-600);}
.annbar span{flex:1;}
.annbar-x{border:0;background:transparent;color:var(--ink-400);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;}
.annbar-x:hover{color:var(--ink-700);}

/* 新手样例卡（P0 #4） */
.starter{margin:8px 0 12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--brand-50);border:1px dashed var(--brand-300);}
.starter-hd{display:flex;align-items:center;gap:10px;justify-content:space-between;}
.starter-t{font-size:var(--fs-sm);color:var(--ink-700);font-weight:var(--fw-semi);}
.linkbtn{border:0;background:transparent;color:var(--ink-400);font-size:var(--fs-xs);
  cursor:pointer;text-decoration:underline;padding:0;white-space:nowrap;}
.linkbtn:hover{color:var(--ink-700);}
.starter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.sbtn{border:1px solid var(--brand-200);background:var(--surface);color:var(--ink-800);
  border-radius:999px;padding:6px 14px;font-size:var(--fs-sm);cursor:pointer;transition:all .18s var(--ease);}
.sbtn:hover{border-color:var(--brand-500);color:var(--brand-700);background:#fff;}
.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;gap:var(--sp-4);
}

/* 步骤卡：每步一张，未选齐时灰、选好时打勾——"跟着走"的核心 */
.step{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-4) var(--sp-4) 52px;
  display:flex;flex-direction:column;gap:var(--sp-2);
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.step.done{border-color:var(--ok-line);background:linear-gradient(180deg,#f6fef9,var(--surface) 60%);}
.step.todo{border-color:var(--brand-200);background:linear-gradient(180deg,var(--brand-50),var(--surface) 60%);
  box-shadow:0 0 0 3px rgba(249,115,22,.07);}
.step > label{
  font-size:var(--fs-base);color:var(--ink-800);font-weight:var(--fw-semi);
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.step .stepnum{
  position:absolute;left:14px;top:15px;
  width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--surface-2);border:1.5px solid var(--ink-300);color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  transition:all var(--dur) var(--ease);
}
.step.done .stepnum{background:var(--ok);border-color:var(--ok);color:#fff;}
.step.todo .stepnum{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:0 0 0 4px var(--brand-100);}
.step-note{font-size:var(--fs-sm);color:var(--ink-500);line-height:var(--lh-base);}

.field{display:flex;flex-direction:column;gap:var(--sp-2);}
.field > label{font-size:var(--fs-base);color:var(--ink-800);font-weight:var(--fw-semi);}

/* 预估条：出片前的"账单"，一眼看清花多少、够不够 */
.estimate{
  background:var(--brand-50);border:1px solid var(--brand-200);
  border-radius:var(--r-md);padding:13px 15px;
  font-size:var(--fs-base);color:var(--brand-ink);line-height:var(--lh-base);
}
.estimate b{color:var(--brand-700);font-size:var(--fs-md);font-weight:var(--fw-black);}
.estimate .warn{color:var(--danger);font-weight:var(--fw-semi);}
.estimate.ready{background:var(--ok-bg);border-color:var(--ok-line);color:#14532d;}
.estimate.ready b{color:var(--ok);}
.estimate.lack{background:var(--danger-bg);border-color:var(--danger-line);color:#7f1d1d;}
.estimate.lack b{color:var(--danger);}

/* 手机预览框：显示"成片的样子"——画面 + 一行字幕，不再是一屏文字 */
.preview-panel{position:sticky;top:88px;}
.preview-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:var(--fw-bold);font-size:var(--fs-md);}
.phone{
  margin:0 auto;border-radius:var(--r-2xl);background:var(--ink-900);
  padding:9px;box-shadow:0 16px 40px -14px rgba(28,25,23,.45);
  transition:all .28s var(--ease);
}
.phone.portrait{width:290px;}
.phone.landscape{width:450px;max-width:100%;}
.phone-screen{
  position:relative;width:100%;border-radius:19px;overflow:hidden;
  transition:all .28s var(--ease);
}
.phone.portrait .phone-screen{aspect-ratio:9/16;}
.phone.landscape .phone-screen{aspect-ratio:16/9;}
/* 画面底：和塘沽风成片同一套底色（暖橙氛围 + 深黑），不是白板 */
.phone-screen.tanggu{background:radial-gradient(120% 90% at 50% 18%,#1c1712 0%,#0d0b09 58%,#000 100%);color:#fff;}
.phone-screen.ppt{background:linear-gradient(160deg,#fff 0%,#FAF8F6 100%);color:var(--ink-900);}
.pv-account{position:absolute;top:14px;left:0;right:0;text-align:center;z-index:3;
  font-size:var(--fs-2xs);letter-spacing:1.2px;opacity:.6;}
.pv-stage{position:absolute;inset:0;overflow:hidden;}
.pv-stage>video{display:block;width:100%;height:100%;object-fit:cover;}
.pv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:var(--fs-sm);line-height:2;font-weight:500;
  color:rgba(255,255,255,.42);}
.phone-screen.ppt .pv-empty{color:var(--ink-300);}
/* 字幕：一行，压在画面底部，位置和成片一致 */
.pv-sub{position:absolute;left:0;right:0;bottom:44px;padding:0 20px;z-index:3;
  text-align:center;color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  line-height:1.55;text-shadow:0 3px 14px rgba(0,0,0,.9);}
.pv-sub:empty{display:none;}
.result-video{width:100%;border-radius:var(--r-md);margin-top:10px;}

/* ============================ 上传区（拖拽感） ============================ */
.upload-zone{
  border:1.5px dashed var(--ink-300);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--sp-6) var(--sp-5);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  text-align:center;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform .18s var(--ease);
}
.upload-zone:hover{border-color:var(--brand-400);background:var(--brand-50);transform:translateY(-2px);}
.upload-zone .uz-ico{
  width:48px;height:48px;border-radius:var(--r-lg);
  background:linear-gradient(145deg,var(--brand-500),var(--brand-700));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-brand);
}
.upload-zone .uz-ico .icon{width:24px;height:24px;stroke-width:2;}
.upload-zone .uz-t{font-weight:var(--fw-bold);font-size:var(--fs-md);}
.upload-zone .uz-s{font-size:var(--fs-sm);color:var(--ink-500);max-width:400px;line-height:var(--lh-base);}
/* 功能未开通时：整块置灰、不可点，不让用户点进去撞报错 */
.upload-zone.disabled{opacity:.55;cursor:not-allowed;border-style:solid;
  border-color:var(--line);background:var(--surface-2);}
.upload-zone.disabled:hover{transform:none;border-color:var(--line);background:var(--surface-2);}
.upload-zone.disabled .uz-ico{background:var(--ink-300);box-shadow:none;}

/* ============================ 文案编辑器 ============================ */
.editor{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-2);
}
.ed-preview{background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-4);
  font-size:var(--fs-base);color:var(--ink-700);}
.ed-preview .seg{padding:7px 0;border-bottom:1px solid var(--line-2);}
.ed-preview .seg:last-child{border-bottom:none;}
.ed-preview .seg b{color:var(--brand-700);margin-right:9px;font-size:var(--fs-sm);}
.editor-note{color:var(--ink-500);font-size:var(--fs-sm);}
.rewritten{
  background:var(--brand-50);border-left:3px solid var(--brand-500);
  padding:10px 13px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--brand-ink);margin-top:var(--sp-2);
}

/* ============================ 表格 ============================ */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);
  border-radius:var(--r-lg);overflow:hidden;margin-top:var(--sp-3);box-shadow:var(--sh-1);}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line-2);font-size:var(--fs-base);}
.tbl th{background:var(--ink-900);color:#fff;font-weight:var(--fw-semi);font-size:var(--fs-sm);letter-spacing:.02em;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover,.tbl tr:hover td{background:var(--surface-2);}

/* ============================ 代理 / 数据 ============================ */
.agent-summary{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap;}
.kpi{
  flex:1;min-width:146px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--sh-1);
  text-align:center;transition:transform .18s var(--ease),box-shadow var(--dur) var(--ease);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
.kpi-num{font-size:var(--fs-3xl);font-weight:var(--fw-black);color:var(--brand-700);
  line-height:1.1;letter-spacing:-.02em;}
.kpi-num.money{color:var(--ink-900);}
.kpi-label{color:var(--ink-500);font-size:var(--fs-sm);margin-top:5px;font-weight:var(--fw-med);}
.bind-row{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-4);flex-wrap:wrap;}
.bind-row input{width:auto;flex:1;min-width:200px;}
.price{font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--brand-700);letter-spacing:-.02em;}

/* ---------- 定价卡：等高 + 按钮沉底 ---------- */
.plan-card{padding:var(--sp-5);gap:var(--sp-3);text-align:left;position:relative;}
.plan-card.featured{border-color:var(--brand-300);box-shadow:0 0 0 3px var(--brand-50),var(--sh-2);}
.plan-name{font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink-800);}
.plan-price{display:flex;align-items:baseline;gap:6px;}
.plan-price .cur{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--brand-700);}
.plan-price .num{font-size:var(--fs-3xl);font-weight:var(--fw-black);color:var(--brand-700);letter-spacing:-.03em;line-height:1;}
.plan-price .unit{font-size:var(--fs-sm);color:var(--ink-500);}
.plan-lines{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--ink-600);}
.plan-lines .ln{display:flex;justify-content:space-between;gap:var(--sp-3);}
.plan-lines .ln b{color:var(--ink-900);font-weight:var(--fw-semi);}
.plan-card .item-actions{margin-top:auto;}

/* ============================ AI 主题生成：版本卡 ============================ */
.ver{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-4);margin-top:var(--sp-3);text-align:left;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.ver:hover{border-color:var(--brand-300);box-shadow:var(--sh-1);}
.ver-tag{
  display:inline-block;font-size:var(--fs-xs);font-weight:var(--fw-bold);
  color:var(--brand-700);background:var(--brand-50);
  padding:3px 10px;border-radius:var(--r-full);margin-bottom:var(--sp-2);
}
.ver-body{font-size:var(--fs-base);line-height:var(--lh-loose);color:var(--ink-700);white-space:normal;}
.ver .ver-use{margin-top:var(--sp-3);padding:8px 14px;font-size:var(--fs-sm);}

/* ============================ 口播 / 选项 ============================ */
.tabbtn{opacity:.62;}
.tabbtn.on{opacity:1;border-color:var(--brand-400);color:var(--brand-700);
  background:var(--brand-50);font-weight:var(--fw-semi);}
.checkrow{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-base);
  cursor:pointer;line-height:var(--lh-base);color:var(--ink-700);}
.checkrow input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brand-600);cursor:pointer;}

/* ============================ 数据中心柱状图 ============================ */
.barchart{
  display:flex;align-items:flex-end;gap:var(--sp-4);
  height:180px;padding:var(--sp-3) var(--sp-2) 0;
  border-bottom:1.5px solid var(--line);margin-bottom:var(--sp-2);
}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:6px;height:100%;position:relative;}
.bar{
  width:100%;max-width:54px;border-radius:8px 8px 2px 2px;min-height:3px;
  background:linear-gradient(180deg,var(--brand-500),var(--brand-700));
  transition:height .5s var(--ease),filter var(--dur) var(--ease);
}
.bar.zero{background:var(--ink-300);min-height:3px;}
.bar.today{background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  box-shadow:0 0 0 3px var(--brand-50);}
.bar-col:hover .bar{filter:brightness(1.08);}
.bar-val{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink-800);}
.bar-col.is-zero .bar-val{color:var(--ink-400);font-weight:var(--fw-med);}
.bar-date{font-size:var(--fs-xs);color:var(--ink-400);}
.bar-col.is-today .bar-date{color:var(--brand-700);font-weight:var(--fw-bold);}
/* 图表空态：数据全 0 时不再画一副空架子 */
.chart-empty{
  height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);border:1.5px dashed var(--ink-300);border-radius:var(--r-lg);
  color:var(--ink-500);font-size:var(--fs-base);background:var(--surface-2);
}
.chart-empty .icon{width:30px;height:30px;color:var(--ink-300);stroke-width:1.6;}

/* ============================ 素材库 ============================ */
.msec{margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-lg);font-weight:var(--fw-bold);
  color:var(--ink-800);border-left:4px solid var(--brand-500);padding-left:11px;
  display:flex;align-items:center;gap:var(--sp-2);}
.msec .icon{width:18px;height:18px;color:var(--brand-600);}

/* ============================ 模板中心 ============================ */
.tpl-card{cursor:pointer;text-align:center;padding:var(--sp-4);gap:var(--sp-3);}
.tpl-thumb{width:100%;height:290px;object-fit:cover;border-radius:var(--r-md);
  border:1px solid var(--line);display:block;background:var(--surface-2);}
.tpl-thumb.fail{opacity:0;}   /* 缩略图没生成出来就先留白，卡片不塌 */
.tpl-card .item-actions button{width:100%;}

/* ============================ 帮助 ============================ */
.helpbox{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-3);box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.helpbox:hover{border-color:var(--brand-200);box-shadow:var(--sh-2);}
.helpbox h3{margin-bottom:var(--sp-2);font-size:var(--fs-md);display:flex;align-items:center;gap:9px;}
.helpbox h3 .icon{width:17px;height:17px;color:var(--brand-600);flex:none;}
.helpbox p{color:var(--ink-700);line-height:var(--lh-loose);font-size:var(--fs-base);}
.helpbox b{color:var(--ink-900);}

/* ==================== 出片台 · 扩展（P0 #1/#2/#3/#8） ==================== */
/* 出片模式 tab：单条 / 批量 */
.modetabs{display:flex;gap:6px;margin:var(--sp-4) 0 var(--sp-3);
  background:var(--surface-2);padding:5px;border-radius:var(--r-full);border:1px solid var(--line-2);}
.mtab{flex:1;border:0;background:transparent;color:var(--ink-600);cursor:pointer;
  font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-semi);
  padding:9px 12px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.mtab:hover{color:var(--ink-900);}
.mtab.on{background:var(--surface);color:var(--brand-700);box-shadow:var(--sh-1);}
.mtag{font-size:var(--fs-2xs);font-weight:var(--fw-med);color:var(--ink-400);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:1px 7px;}
.mtab.on .mtag{color:var(--brand-600);border-color:var(--brand-200);background:var(--brand-50);}

/* 账号配置记忆条 */
.cfgbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  padding:9px 12px;border:1px dashed var(--line);border-radius:var(--r-md);
  background:var(--surface-2);margin-bottom:var(--sp-4);}
.cfglbl{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);
  font-weight:var(--fw-semi);color:var(--ink-600);}
.cfglbl .icon{width:15px;height:15px;color:var(--brand-600);}
.cfgbar select{flex:none;width:auto;min-width:150px;max-width:230px;padding:6px 32px 6px 11px;font-size:var(--fs-sm);}
.cfgbar .hint{font-size:var(--fs-xs);}
.cfgbar .linkbtn:disabled{color:var(--ink-300);cursor:not-allowed;}

/* 顶部标题（最多 3 行 × 每行 15 字） */
.titlebox{margin-top:var(--sp-3);padding:11px 13px;border-radius:var(--r-md);
  background:var(--brand-50);border:1px solid var(--brand-100);
  display:flex;flex-direction:column;gap:7px;}
.titlebox-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.titlebox-t{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--brand-ink);
  display:flex;align-items:center;gap:6px;}
.titlebox-hd .hint{font-size:var(--fs-xs);color:var(--ink-500);}
.tl-input{padding:8px 11px;font-size:var(--fs-base);background:var(--surface);border-color:var(--brand-200);}
/* 该风格没有独立标题位（如信息图）：把输入框压暗，并说明原因，不做"填了却没生效"的假交互 */
.titlebox.no-title{background:var(--surface-2);border-color:var(--line);}
.titlebox.no-title .tl-input{opacity:.5;}
.titlebox.no-title .titlebox-t{color:var(--ink-600);}
#titleNote:empty{display:none;}
#titleNote{color:var(--warn);font-weight:var(--fw-med);}

/* 批量文案框 */
.batchbox{margin:var(--sp-4) 0;padding:var(--sp-4);border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);}
.batchbox-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3);}
.batchbox-t{display:flex;align-items:center;gap:7px;font-size:var(--fs-md);
  font-weight:var(--fw-bold);color:var(--ink-800);}
.batchbox-t .icon{width:17px;height:17px;color:var(--brand-600);}
.batchbox textarea{font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;
  font-size:var(--fs-sm);line-height:var(--lh-loose);}
.batchbox .hint{margin-top:var(--sp-2);}

/* 背景音乐选择 */
.bgmrow{display:flex;align-items:center;gap:var(--sp-2);margin-top:10px;flex-wrap:wrap;}
.bgmrow-l{display:flex;align-items:center;gap:7px;font-size:var(--fs-base);
  font-weight:var(--fw-semi);color:var(--ink-800);flex:none;}
.bgmrow-l .icon{width:16px;height:16px;color:var(--brand-600);}
.bgmrow select{flex:1;min-width:150px;width:auto;}

/* ==================== 样片墙（P0 #5） ==================== */
.sample-filters{display:flex;gap:7px;flex-wrap:wrap;margin:var(--sp-4) 0 0;}
.fbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-700);cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-med);
  padding:6px 13px;border-radius:var(--r-full);transition:all var(--dur) var(--ease);}
.fbtn:hover{border-color:var(--brand-300);color:var(--brand-700);}
.fbtn.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff;font-weight:var(--fw-semi);}
.samples{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));}
.samp{width:100%;max-height:430px;object-fit:contain;background:#000;
  border-radius:var(--r-md);display:block;}
.sample-card .item-title{display:flex;align-items:center;gap:7px;}
.sample-card .item-actions button{width:100%;}

/* ==================== 教程中心（P0 #7） ==================== */
.pathcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:var(--sp-4);margin:var(--sp-4) 0 var(--sp-5);}
.pathcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:9px;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
.pathcard:hover{border-color:var(--brand-200);box-shadow:var(--sh-2);transform:translateY(-2px);}
.pc-ico{width:38px;height:38px;border-radius:11px;background:var(--brand-50);color:var(--brand-600);
  display:flex;align-items:center;justify-content:center;}
.pc-ico .icon{width:20px;height:20px;}
.pc-t{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink-900);}
.pc-d{font-size:var(--fs-sm);color:var(--ink-600);line-height:var(--lh-base);flex:1;}
.pathcard button{align-self:flex-start;}
.tut-search{margin-bottom:var(--sp-3);padding:11px 14px;font-size:var(--fs-base);border-radius:var(--r-full);}
.tut-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-4);}
.ttab{border:1px solid var(--line);background:var(--surface);color:var(--ink-600);cursor:pointer;
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-med);
  padding:7px 13px;border-radius:var(--r-full);display:flex;align-items:center;gap:6px;
  transition:all var(--dur) var(--ease);}
.ttab .icon{width:15px;height:15px;}
.ttab:hover{border-color:var(--brand-300);color:var(--brand-700);}
.ttab.on{background:var(--brand-600);border-color:var(--brand-600);color:#fff;font-weight:var(--fw-semi);}
.tut-sec{margin-bottom:var(--sp-5);}
.tut-sec h3{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink-800);
  display:flex;align-items:center;gap:9px;margin-bottom:var(--sp-3);}
.tut-sec h3 .icon{width:17px;height:17px;color:var(--brand-600);}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:8px;overflow:hidden;transition:border-color var(--dur) var(--ease);}
.faq:hover{border-color:var(--brand-200);}
.faq[open]{border-color:var(--brand-200);box-shadow:var(--sh-1);}
.faq summary{cursor:pointer;padding:13px var(--sp-5);font-size:var(--fs-base);
  font-weight:var(--fw-semi);color:var(--ink-800);list-style:none;
  display:flex;align-items:center;gap:9px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+";flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--brand-50);color:var(--brand-600);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;line-height:1;}
.faq[open] summary::before{content:"−";}
.faq-a{padding:0 var(--sp-5) var(--sp-4) 47px;color:var(--ink-700);
  font-size:var(--fs-base);line-height:var(--lh-loose);}

/* ============================ 提示条 ============================ */
.notice{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  padding:12px 14px;border-radius:var(--r-md);font-size:var(--fs-base);
  background:var(--info-bg);color:#1e3a8a;border:1px solid #bfdbfe;
}
.notice.ok{background:var(--ok-bg);color:#14532d;border-color:var(--ok-line);}
.notice.warn{background:var(--warn-bg);color:#78350f;border-color:var(--warn-line);}
.notice.danger{background:var(--danger-bg);color:#7f1d1d;border-color:var(--danger-line);}
.notice .icon{width:16px;height:16px;flex:none;margin-top:3px;stroke-width:2;}
.notice span{flex:1;min-width:0;}

/* ============================ 响应式（手机端） ============================ */
@media (max-width:1020px){
  .topbar{flex-wrap:wrap;height:auto;padding:9px var(--sp-4);gap:10px;row-gap:8px;}
  .brand{flex:1;}
  .userbox{order:1;}
  .steps{order:2;width:100%;justify-content:center;flex:none;}
  /* 导航整行、可横向滑动（原来 flex:1 会被挤成 0 宽，手机上整条导航消失） */
  #nav{order:3;width:100%;flex:none;flex-wrap:nowrap;overflow-x:auto;
       gap:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
  #nav::-webkit-scrollbar{display:none;}
  #nav a{flex:none;}
  .preview-panel{position:static;}
  main{padding:var(--sp-5) var(--sp-4) 48px;}
}
@media (max-width:900px){
  .studio-wrap{grid-template-columns:1fr;}
  .phone.landscape{width:100%;}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;gap:var(--sp-3);}
  .card{padding:var(--sp-5);}
  .panel{padding:var(--sp-4);}
  .card.center{margin:24px auto;}
  h2{font-size:var(--fs-lg);}
  .steps li{padding:5px 9px;font-size:var(--fs-xs);}
  .steps li i{width:18px;height:18px;}
  .phone.portrait{width:100%;max-width:290px;}
  .agent-summary{gap:var(--sp-3);}
  .kpi{min-width:calc(50% - 8px);padding:var(--sp-4);}
  .kpi-num{font-size:var(--fs-2xl);}
  .msec{margin-top:var(--sp-5);}
  .step{padding:var(--sp-4) var(--sp-4) var(--sp-4) 46px;}
  .step .stepnum{left:12px;}
  .upload-zone{padding:var(--sp-5) var(--sp-4);}
  /* P0 扩展：手机端把多列压成一列，长条不再挤成两行 */
  .cfgbar select{flex:1;min-width:0;max-width:none;}
  .samples{grid-template-columns:1fr;}
  .pathcards{grid-template-columns:1fr;}
  .samp{max-height:360px;}
  .faq-a{padding-left:var(--sp-5);}
  .mtag{display:none;}
}

/* ============================================================
   [2026-10-16 移动端修复] 窄屏导航
   问题（实测 390x844）：导航共 7~8 项，手机一屏只显示 5 项，
   第 6/7 项（充值/教程）在屏幕外；虽有 overflow-x:auto 可横滑，
   但滚动条被隐藏 → 用户不知道该滑 → 以为站里只有 5 个功能。
   做法：① 压字号/内边距/图标，尽量一屏放下
        ② 保留横滑作为兜底
        ③ 两侧加渐隐遮罩，明示"还有内容"
   ⚠️ 不要移除 mask——它同时是"可滑动"的唯一视觉提示，也能盖住
      最后一个项目被切一半的难看边缘。
   ============================================================ */
@media (max-width:520px){
  #nav{
    padding:0 14px 2px;
    gap:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  #nav a{padding:7px 8px;gap:3px;font-size:12px;border-radius:8px;}
  #nav a .nav-t{font-size:12px;letter-spacing:0;}
  #nav a .icon{width:15px;height:15px;}
}
/* 视口 ≤440px：主流手机竖屏区间（360 / 375 / 390 / 414 / 428 / 430）。
   ⚠️ 断点为什么是 440 而不是 400：
      实测浏览器 computed 值 —— 341~400px 用紧凑档（每项 45px，6 项 270px，放得下）；
      而 401~520px 落回"保守档"（每项 58px，6 项约 387px），在 414px 视口下
      容器只有 382px → **差 5px 就把「教程」挤出屏幕**。
      把紧凑档延到 440px 即可整段覆盖大屏手机；≥441px 的机型容器≥409px，
      387px 也放得下。两档在此处正好接上，不留缺口。 */
@media (max-width:440px){
  #nav{padding:0 10px 2px;}
  #nav a{padding:6px 4px;gap:2px;border-radius:7px;}
  #nav a .nav-t{font-size:11px;}
  #nav a .icon{width:13px;height:13px;}
}
/* 视口 ≤340px（iPhone SE 1代 / 老安卓）：容器仅 288px，紧凑档的 345px 仍放不下。
   再压一档：每项 ~41px × 6 = 246px，可一屏放下。 */
@media (max-width:340px){
  #nav{padding:0 6px 2px;}
  #nav a{padding:5px 3px;gap:2px;}
  #nav a .nav-t{font-size:10px;}
  #nav a .icon{width:12px;height:12px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}
}

/* ===== PIANJIKE-BRAND-LAYER: 品牌配色与页脚 ===== */
.brand-house{ font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--ink-400);
  border:1px solid var(--line); padding:2px 7px; border-radius:var(--r-full);
  margin-left:7px; vertical-align:middle; text-transform:uppercase; }
.site-foot{ display:flex; align-items:center; justify-content:center; gap:12px;
  padding:34px 20px 40px; margin-top:20px; border-top:1px solid var(--line); color:var(--ink-400); }
.site-foot .foot-mark{ height:26px; width:auto; opacity:.62; }
.site-foot .foot-text{ display:flex; flex-direction:column; line-height:1.45; }
.site-foot .foot-text b{ font-size:12px; letter-spacing:.16em; color:var(--ink-500); }
.site-foot .foot-text span{ font-size:10.5px; letter-spacing:.06em; }
.site-foot .foot-links{ display:flex; gap:13px; flex-wrap:wrap; margin-top:5px; }
.site-foot .foot-links a{ font-size:10.5px; color:var(--ink-400); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .15s,border-color .15s; }
.site-foot .foot-links a:hover{ color:var(--brand-600); border-bottom-color:var(--brand-500); }