/* base.css —— 外壳与基础原语
   依赖 tokens.css。页面里不允许出现 <style>，全部样式收敛在本文件与 components.css。 */

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{height:100%;font-family:var(--font);font-size:var(--font-size);line-height:var(--line-h);
     color:var(--t1);background:var(--side);color-scheme:light;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
svg.sprite{display:none}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--t4)}
::-webkit-scrollbar-track{background:transparent}

/* ───── 应用外壳（对齐 KevinMail：无顶栏，rail 通高） ───── */
.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);height:100vh}
.app-body{display:grid;grid-template-columns:var(--viewbar-w) minmax(0,1fr);min-height:0}
.app-body.solo{grid-template-columns:minmax(0,1fr)}

/* ───── rail（68px 蓝底彩块，对齐 KevinMail 邮箱栏）─────
   彩色圆角方块 + 下方短名 + 右上角红色徽标，选中加同色环；
   色彩仍承载业务分组（规范语义），底色改用生产端 --rail 组。 */
.rail{background:var(--rail);border-right:1px solid var(--rail-2);
      display:flex;flex-direction:column;align-items:center;padding:10px 0 12px;gap:2px}
.rail-ava{position:relative;margin-bottom:12px}
.rail-ava .ava{width:34px;height:34px;background:var(--card);color:var(--t1)}
.rail-ava::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
                 border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--rail)}
.rail .rail-sp{flex:1}
.nav-item{position:relative;width:60px;height:58px;padding:5px 0 0;border:0;border-radius:10px;
          background:transparent;cursor:pointer;
          display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px}
.nav-item .tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.nav-item .tile .ic{width:20px;height:20px}
.nav-item .lbl{font-size:11px;line-height:13px;color:var(--t2)}
.nav-item:hover{background:var(--rail-hover)}
.nav-item:hover .lbl{color:var(--t1)}
.nav-item.on .lbl{color:var(--t1);font-weight:600}
.nav-item[data-page="home"] .tile{background:var(--tag-blue-bg);color:var(--tag-blue-t)}
.nav-item[data-page="home"].on .tile{box-shadow:0 0 0 2px var(--tag-blue-t)}
.nav-item[data-page="linkedin"] .tile{background:var(--tag-violet-bg);color:var(--tag-violet-t)}
.nav-item[data-page="linkedin"].on .tile{box-shadow:0 0 0 2px var(--tag-violet-t)}
.nav-item[data-page="customers"] .tile{background:var(--tag-orange-bg);color:var(--tag-orange-t)}
.nav-item[data-page="customers"].on .tile{box-shadow:0 0 0 2px var(--tag-orange-t)}
.nav-item[data-page="seo"] .tile{background:var(--tag-green-bg);color:var(--tag-green-t)}
.nav-item[data-page="seo"].on .tile{box-shadow:0 0 0 2px var(--tag-green-t)}
.nav-item[data-page="set"] .tile{background:var(--card);color:var(--t2)}
.nav-item[data-page="set"].on .tile{box-shadow:0 0 0 2px var(--t2)}
.nav-item .bdg{position:absolute;top:0;right:5px;box-sizing:border-box;min-width:17px;height:17px;
               padding:0 4px;border-radius:9px;background:var(--red);color:var(--card);
               font-size:11px;line-height:17px;font-weight:500;text-align:center}
.rail-util{width:38px;height:34px;border:0;border-radius:10px;background:transparent;
           color:var(--t2);display:grid;place-items:center;cursor:pointer;margin-bottom:6px}
.rail-util:hover{background:var(--rail-hover);color:var(--t1)}

/* 矮屏收成纯图标（规范 §6：不压缩条目高度，隐藏文字） */
@media (max-height:820px){
  .nav-item{height:40px;gap:0;padding:0;justify-content:center}
  .nav-item .lbl{display:none}
  .rail-ava{margin-bottom:6px}
}

/* ───── 二级视图栏（对齐 KevinMail 文件夹栏：标题+搜索+主操作+分组视图） ───── */
.viewbar{background:var(--side);border-right:1px solid var(--line);padding:14px 0 20px;overflow-y:auto}
.vb-h{display:flex;align-items:flex-start;gap:6px;padding:0 12px 12px;
      border-bottom:1px solid var(--line);margin-bottom:10px}
.vb-h>.vb-tt{flex:1;min-width:0}
.vb-h>.vb-tt>.t{font-size:17px;font-weight:600;line-height:24px}
.vb-h>.vb-tt>.s{font-size:12px;color:var(--t3);margin-top:2px;
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-acts{display:flex;gap:2px}
.vb-acts .ibtn{color:var(--t3)}
.vb-search{display:flex;align-items:center;gap:6px;margin:0 12px 8px;padding:0 4px 0 10px;height:34px;
           background:var(--card);border:1px solid var(--line);border-radius:var(--r-control);color:var(--t3)}
.vb-search:focus-within{border-color:var(--blue);box-shadow:var(--focus)}
.vb-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13px;color:var(--t1)}
.vb-search input::placeholder{color:var(--t3)}
.vb-search .ibtn{color:var(--t3)}
.vb-cta{margin:0 12px 4px}
.vb-cta .btn{width:100%}
/* 视图栏内的下拉触发器（如 SEO 当前网站） */
.vb-sel{display:flex;align-items:center;gap:8px;height:34px;margin:0 12px;padding:0 10px;
        background:var(--card);border:1px solid var(--line);border-radius:var(--r-control);
        font-size:13px;cursor:pointer;width:calc(100% - 24px);text-align:left;color:var(--t1)}
.vb-sel:hover{border-color:var(--t4)}
.vb-sel>.tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-g{padding:12px 16px 6px;font-size:12px;color:var(--t3)}
.vb-item{display:flex;align-items:center;gap:8px;height:36px;margin:0 8px;padding:0 10px;
         border-radius:var(--r-control);font-size:13px;color:var(--t1);cursor:pointer;border:0;
         width:calc(100% - 16px);background:transparent;text-align:left}
.vb-item .ic-m{color:var(--t3)}
.vb-item:hover{background:var(--side-hover)}
.vb-item.on{background:var(--side-sel);font-weight:500}
.vb-item.on .ic-m{color:var(--t1)}
.vb-item>.cnt{margin-left:auto;font-size:12px;color:var(--t3);flex:none}
.vb-item .bdg{margin-left:auto;flex:none}

/* ───── 主区 ───── */
.main{overflow-y:auto;overflow-x:hidden;min-width:0}
.page{padding:var(--page-pad) 24px 40px}
.page.narrow{max-width:1200px;margin:0 auto}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ph-title{font-size:20px;font-weight:600;line-height:28px}
.ph-sub{font-size:13px;color:var(--t3);margin-top:2px}
.ph-actions{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ───── 工具类 ───── */
.tnum{font-variant-numeric:tabular-nums}
.r{text-align:right}
.t2{color:var(--t2)}
.t3{color:var(--t3)}
.hide{display:none!important}
.flex{display:flex;align-items:center}
.gap8{gap:8px}
.sp{flex:1}

/* 图标 */
.ic{width:20px;height:20px;flex:none}
.ic-s{width:14px;height:14px;flex:none}
.ic-m{width:16px;height:16px;flex:none}

/* ───── 按钮 ───── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;
     padding:0 14px;border-radius:var(--r-control);border:1px solid var(--line);
     background:var(--card);color:var(--t1);font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--side)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:var(--card)}
.btn.pri:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.btn.redpri{background:var(--red);border-color:var(--red);color:var(--card)}
.btn.redpri:hover{filter:brightness(1.05)}
.btn.redtxt{color:var(--red)}
.btn.redtxt:hover{background:var(--tag-red-bg)}
.btn.sm{height:30px;padding:0 10px;font-size:12px}
.btn:disabled,.btn.dis{background:var(--read);border-color:var(--line);color:var(--t4);cursor:not-allowed}
.btn.pri:disabled,.btn.pri.dis{background:var(--t4);border-color:var(--t4);color:var(--card)}
.btn:focus-visible{box-shadow:var(--focus);outline:none}
.btn.txt{border:0;background:transparent;color:var(--blue-text);height:26px;padding:0 6px}
.btn.txt:hover{background:var(--blue-soft)}

.ibtn{position:relative;width:30px;height:30px;border:0;border-radius:var(--r-control);background:transparent;
      color:var(--t2);display:grid;place-items:center;cursor:pointer}
.ibtn:hover{background:var(--side-hover);color:var(--t1)}
.ibtn.sm{width:26px;height:26px}
.ibtn .bdg{position:absolute;top:2px;right:2px}

/* ops 行幽灵按钮（对齐生产端列表上方「翻译/删除/星标…」一排操作） */
.obtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 9px;border:0;
      border-radius:var(--r-control);background:transparent;color:var(--t2);font-size:13px;
      cursor:pointer;white-space:nowrap}
.obtn:hover{background:var(--side-hover);color:var(--t1)}

/* ───── 表单原语 ───── */
.inp,.ta{width:100%;height:34px;padding:0 12px;border:1px solid var(--line);
         border-radius:var(--r-control);background:var(--card);font-size:13px;outline:none;
         transition:border-color .12s,box-shadow .12s}
.inp:focus,.ta:focus{border-color:var(--blue);box-shadow:var(--focus)}
.inp::placeholder,.ta::placeholder{color:var(--t3)}
.inp.ro{background:var(--side);color:var(--t2)}
.ta{height:auto;min-height:76px;padding:8px 12px;resize:vertical;line-height:19px}
.inp.err{border-color:var(--red);box-shadow:var(--focus-red)}
.inp-sm{height:28px;font-size:12px;padding:0 10px}

.fi{margin-bottom:15px}
.fi>label{display:block;font-size:13px;color:var(--t2);margin-bottom:5px}
.fi>label.req::before{content:"*";color:var(--red);margin-right:3px}
.fi>.hint{font-size:12px;color:var(--t3);margin-top:3px;line-height:17px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:18px;row-gap:0}
.fgrid>.fi.full{grid-column:1/-1}
.fgrid>.fi.half{grid-column:span 2}
@media (max-width:1280px){.fgrid{grid-template-columns:repeat(2,1fr)}}

.selwrap{position:relative}
.selwrap .inp{padding-right:30px;appearance:none;cursor:pointer}
.selwrap::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;margin-top:-5px;
                border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);
                transform:rotate(45deg);pointer-events:none}

/* 开关 38×22 */
.sw{position:relative;width:38px;height:22px;border:0;border-radius:11px;background:var(--side-sel);
    cursor:pointer;transition:background .15s;flex:none}
.sw::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;
           background:var(--card);transition:left .15s;box-shadow:var(--shadow-knob)}
.sw.on{background:var(--blue)}
.sw.on::after{left:18px}
.swrow{display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.swrow>.lb{font-size:13px;line-height:20px}
.swrow>.lb>.d{font-size:12px;color:var(--t3);margin-top:1px}
.swrow .sw{margin-top:2px}

/* 复选框 */
.cbx{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;flex:none}
.cbx:disabled{cursor:not-allowed}

/* ───── chips ───── */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;
      border-radius:14px;border:1px solid var(--line);background:var(--card);
      font-size:12px;color:var(--t2);cursor:pointer;white-space:nowrap}
.chip:hover{background:var(--side)}
.chip.on{background:var(--tag-blue-bg);border-color:transparent;color:var(--tag-blue-t);font-weight:500}
.fchip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 4px 0 8px;
       border-radius:5px;background:var(--tag-blue-bg);color:var(--tag-blue-t);font-size:12px}
.fchip button{border:0;background:transparent;color:inherit;cursor:pointer;display:grid;
              place-items:center;width:16px;height:16px;border-radius:3px}
.fchip button:hover{background:var(--blue-soft)}

/* ───── 头像 ───── */
.ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
     font-size:12px;font-weight:600;flex:none}
.ava.sm{width:28px;height:28px;font-size:11px}
.ava.lg{width:40px;height:40px;font-size:14px}
.ava.c1{background:var(--tag-blue-bg);color:var(--tag-blue-t)}
.ava.c2{background:var(--tag-green-bg);color:var(--tag-green-t)}
.ava.c3{background:var(--tag-violet-bg);color:var(--tag-violet-t)}
.ava.c4{background:var(--tag-orange-bg);color:var(--tag-orange-t)}
.ava.c5{background:var(--tag-amber-bg);color:var(--tag-amber-t)}
.ava.c6{background:var(--tag-red-bg);color:var(--tag-red-t)}
.ava.c7{background:var(--side-sel);color:var(--t2)}