/* 凪白云 —— 企业后台的骨架，手机的骨头 */
:root{
  --blue:#0d8bff;
  --blue-d:#0a6fd8;
  --blue-l:#eaf4ff;
  --blue-soft:#f2f8ff;
  --bg:#f4f6f9;
  --card:#fff;
  --ink:#1f2329;
  --ink2:#5b6570;
  --ink3:#98a1ab;
  --line:#e8ebf0;
  --ok:#12a45a;
  --warn:#f5a623;
  --bad:#e5484d;
  --r:12px;
  --sh:0 1px 3px rgba(16,32,56,.06), 0 6px 18px rgba(16,32,56,.04);
  --bar-h:52px;
  --tab-h:56px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  padding-top:var(--bar-h);
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
[hidden]{display:none!important}

/* ── 顶栏 ── */
.appbar{
  position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:60;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-d) 100%);
  color:#fff;
  box-shadow:0 1px 8px rgba(13,139,255,.25);
}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand .logo{width:26px;height:26px;flex:0 0 auto}
.brand .name{font-size:16px;font-weight:600;letter-spacing:.5px;white-space:nowrap}
.appbar-right{margin-left:auto;font-size:12px;opacity:.9;white-space:nowrap}

.navbtn{
  width:32px;height:32px;flex:0 0 auto;border:0;background:rgba(255,255,255,.14);
  border-radius:8px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 7px;
}
.navbtn span{display:block;height:2px;background:#fff;border-radius:2px}
.navbtn span:nth-child(2){width:70%}

/* ── 骨架 ── */
.shell{display:flex;min-height:calc(100vh - var(--bar-h))}

.side{
  position:fixed;top:var(--bar-h);bottom:0;left:0;width:220px;z-index:55;
  background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s ease;
  overflow-y:auto;
}
.side.open{transform:none;box-shadow:8px 0 24px rgba(16,32,56,.12)}
.sidenav{padding:10px 0;flex:1}
.sidenav-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 18px;color:var(--ink2);text-decoration:none;font-size:14px;
  border-left:3px solid transparent;position:relative;
}
.sidenav-item i{font-style:normal;width:18px;text-align:center;font-size:15px;opacity:.75}
.sidenav-item:hover{background:var(--blue-soft);color:var(--ink)}
.sidenav-item.on{background:var(--blue-l);color:var(--blue);border-left-color:var(--blue);font-weight:600}
.side-foot{padding:12px;border-top:1px solid var(--line);display:grid;gap:8px}
.side-add{
  border:1px dashed #c8d6e5;background:#fff;color:var(--blue);
  padding:9px;border-radius:9px;font-size:13.5px;
}
.side-add:hover{background:var(--blue-soft);border-color:var(--blue)}

#app{flex:1;min-width:0;padding:14px 12px 24px}

/* ── 页 ── */
.page{max-width:1100px;margin:0 auto}
.pagehead{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.pagehead h2{font-size:18px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{
  border:0;background:#fff;color:var(--ink2);width:34px;height:34px;border-radius:10px;
  font-size:17px;line-height:1;box-shadow:var(--sh);flex:0 0 auto;
}
.back:active{background:var(--blue-l);color:var(--blue)}

.search{
  flex:0 0 42vw;max-width:260px;border:1px solid var(--line);background:#fff;
  border-radius:10px;padding:8px 12px;font-size:13.5px;outline:none;color:var(--ink);
}
.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,139,255,.12)}
.hint{color:var(--ink3);font-size:12.5px;margin:-4px 0 10px 2px}
.chips{display:flex;gap:8px;margin:-2px 0 12px}
.chips button{border:1px solid var(--line);background:#fff;color:var(--ink3);font-size:13px;padding:6px 15px;border-radius:999px;cursor:pointer;font-family:inherit;transition:all .15s}
.chips button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}

/* ── 首页数字 ── */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat{background:var(--card);border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh);position:relative;overflow:hidden}
.stat::after{
  content:"";position:absolute;right:-14px;top:-14px;width:46px;height:46px;border-radius:50%;
  background:var(--blue-l);
}
.stat-label{font-size:12.5px;color:var(--ink3);margin-bottom:5px;position:relative;z-index:1}
.stat-value{font-size:21px;font-weight:650;letter-spacing:-.3px;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.stat-sub{font-size:11.5px;color:var(--ink3);margin-top:3px;position:relative;z-index:1}

.alert-box{
  background:#fff8ec;border:1px solid #ffe2b8;border-radius:var(--r);
  padding:12px 14px;margin-bottom:12px;
}
.alert-title{font-size:13.5px;font-weight:600;color:#a8700c;margin-bottom:4px}
.alert-body{font-size:13px;color:#8a6410;line-height:1.6}

/* ── 卡片 ── */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.card-title{
  font-size:13px;font-weight:600;color:var(--ink2);padding:12px 14px 8px;
  display:flex;align-items:center;gap:8px;
}
.card-title::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--blue)}
.card .list{padding:0 14px 6px}

/* ── 快捷 ── */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 14px 14px}
.quick-item{
  text-align:left;border:1px solid var(--line);background:var(--blue-soft);
  border-radius:10px;padding:11px 12px;display:grid;gap:2px;
}
.quick-item b{font-size:14px;color:var(--blue-d);font-weight:600}
.quick-item span{font-size:11.5px;color:var(--ink3)}
.quick-item:active{transform:scale(.985);background:var(--blue-l)}

/* ── 列表行 ── */
.list{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);min-height:52px;
}
.list .row:last-child{border-bottom:0}
.row:active{background:var(--blue-soft)}
.row-main{flex:1;min-width:0}
.row-t{font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-s{font-size:12px;color:var(--ink3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-v{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.row-v.good{color:var(--ok)}
.row-v.bad{color:var(--bad)}
.row-v.mute{color:var(--ink3);font-weight:400}
.row-v .u{font-style:normal;font-size:11.5px;font-weight:400;color:var(--ink3);margin-left:2px}

.chip{
  display:inline-block;font-size:11px;padding:1.5px 7px;border-radius:20px;
  background:var(--blue-l);color:var(--blue-d);margin-left:6px;vertical-align:1px;
}
.chip.manual{background:#fff1e0;color:#a8620c}
.tag{display:inline-block;font-size:11px;padding:1.5px 7px;border-radius:5px;background:#eef1f5;color:var(--ink2)}

.empty{
  text-align:center;color:var(--ink3);font-size:13px;padding:28px 12px;
}

/* ── 详情表 ── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;padding:12px 14px;font-size:13.5px}
.kv dt{color:var(--ink3);white-space:nowrap}
.kv dd{margin:0;color:var(--ink);text-align:right;word-break:break-all}

/* ── 表单 ── */
.form{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.form-body{padding:6px 14px 2px}
.field{padding:11px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.field label{display:block;font-size:13px;color:var(--ink2);margin-bottom:6px}
.field label .req{color:var(--bad);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;border:0;border-bottom:1px solid transparent;background:#f7f9fb;
  border-radius:9px;padding:11px 12px;font-size:16px;color:var(--ink);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(13,139,255,.12);
}
.field input::placeholder{color:#b9c1ca;font-size:14px}
.field .tip{font-size:11.5px;color:var(--ink3);margin-top:5px}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field.two > div{min-width:0}

/* 明细行（销售/采购） */
.items-wrap{padding:2px 0 4px}
.item-row{
  display:grid;grid-template-columns:1fr 76px 84px 30px;gap:7px;align-items:center;
  padding:8px 0;border-bottom:1px dashed var(--line);
}
.item-row select,.item-row input{
  border:1px solid var(--line);background:#f7f9fb;border-radius:8px;
  padding:9px 8px;font-size:14px;color:var(--ink);outline:none;width:100%;
}
.item-row select:focus,.item-row input:focus{background:#fff;border-color:var(--blue)}
.item-del{
  border:0;background:#fdeeee;color:var(--bad);border-radius:8px;
  width:28px;height:28px;line-height:1;font-size:15px;padding:0;
}
.item-add{
  margin-top:9px;width:100%;border:1px dashed #c8d6e5;background:#fff;color:var(--blue);
  border-radius:9px;padding:10px;font-size:13.5px;
}
.form-sum{
  padding:12px 14px;display:flex;justify-content:space-between;align-items:baseline;
  background:var(--blue-soft);font-size:13px;color:var(--ink2);
}
.form-sum b{font-size:19px;color:var(--blue-d);font-variant-numeric:tabular-nums}

.form-msg{padding:10px 14px;font-size:13px;background:#fdeeee;color:var(--bad)}
.form-msg.ok{background:#eaf9f0;color:var(--ok)}

.form-foot{display:flex;gap:10px;padding:12px 14px 16px;border-top:1px solid var(--line)}
.btn{
  border:0;border-radius:11px;padding:12px 18px;font-size:15px;font-weight:600;
}
.btn-ghost{background:#f2f4f7;color:var(--ink2);flex:0 0 auto}
.btn-main{background:var(--blue);color:#fff;flex:1;box-shadow:0 4px 12px rgba(13,139,255,.3)}
.btn-main:disabled{background:#b9d6f5;box-shadow:none}

.pagefoot{padding:4px 0 8px;display:flex;gap:10px}
.pagefoot .btn{flex:1}

/* ── 底部 tab ── */
.tabbar{
  position:fixed;inset:auto 0 0 0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);z-index:58;
  display:flex;background:#fff;border-top:1px solid var(--line);
}
.tab{
  flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;color:var(--ink3);font-size:11px;padding:0;
}
.tab span{font-size:17px;line-height:1}
.tab.active{color:var(--blue);font-weight:600}

/* ── ＋ 号与弹层 ── */
.fab{
  position:fixed;right:16px;bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:50%;border:0;z-index:59;
  background:linear-gradient(135deg,var(--blue),var(--blue-d));color:#fff;
  font-size:27px;line-height:1;font-weight:300;
  box-shadow:0 6px 18px rgba(13,139,255,.42);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease;
}
.fab:active{transform:scale(.94)}

.mask{position:fixed;inset:0;background:rgba(16,32,56,.42);z-index:70;animation:fade .18s ease}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:71;
  background:#fff;border-radius:18px 18px 0 0;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  animation:up .22s cubic-bezier(.2,.8,.3,1);
  max-width:560px;margin:0 auto;
}
.sheet-title{font-size:14px;color:var(--ink2);font-weight:600;text-align:center;margin-bottom:14px}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sheet-grid button{
  border:1px solid var(--line);background:var(--blue-soft);border-radius:12px;
  padding:16px 6px;font-size:13.5px;color:var(--blue-d);
}
.sheet-grid button:active{background:var(--blue-l)}
.sheet-grid button b{font-weight:600}
.sheet-cancel{
  width:100%;margin-top:12px;border:0;background:#f2f4f7;color:var(--ink2);
  border-radius:12px;padding:13px;font-size:15px;
}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}

/* ── 宽屏：侧栏打开，底部 tab 收起 ── */
@media (min-width:860px){
  body{padding-bottom:24px}
  .navbtn{display:none}
  .shell{padding-left:220px}
  .side{transform:none;border-right:1px solid var(--line);box-shadow:none}
  #app{padding:20px 24px 40px}
  .tabbar{display:none}
  .fab{right:32px;bottom:32px}
  .statgrid{grid-template-columns:repeat(3,1fr)}
  .quick{grid-template-columns:repeat(4,1fr)}
  .search{flex:0 0 240px}
  .pagehead h2{font-size:19px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    border-radius:16px;width:460px;animation:pop .18s ease}
  @keyframes pop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
}

/* 登录 —— 风停了的那片海 */
.login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:hidden;background:#04182c;
  background-image:radial-gradient(125% 85% at 50% -12%,#1b95ff 0%,#0a67cf 26%,#062a52 52%,#04182c 78%)}
.login[hidden]{display:none}

/* 海面：两团慢慢挪的光 */
.login .glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(70px)}
.glow-a{width:76vmax;height:76vmax;left:-24vmax;top:-34vmax;opacity:.5;
  background:radial-gradient(circle,#2ea1ff 0%,transparent 62%);
  animation:drift 27s ease-in-out infinite alternate}
.glow-b{width:64vmax;height:64vmax;right:-26vmax;bottom:-30vmax;opacity:.6;
  background:radial-gradient(circle,#0a3f7a 0%,transparent 66%);
  animation:drift 34s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(5vmax,4vmax,0) scale(1.14)}}

/* 一条鲸，八十六秒游一趟 */
.whale{position:absolute;left:-32%;top:20%;width:40vmax;max-width:560px;
  color:#cde8ff;opacity:.075;pointer-events:none;
  animation:swim 86s linear infinite}
@keyframes swim{0%{transform:translate(0,0) rotate(-5deg)}
  50%{transform:translate(62vw,-4vh) rotate(-2deg)}
  100%{transform:translate(134vw,3vh) rotate(-5deg)}}

/* 两层浪 */
.wave{position:absolute;left:-25%;bottom:0;width:150%;height:32vh;display:block;pointer-events:none}
.wave-1{color:#0d8bff;opacity:.16;animation:sway 15s ease-in-out infinite alternate}
.wave-2{color:#7cc4ff;opacity:.09;animation:sway 21s ease-in-out infinite alternate-reverse}
@keyframes sway{from{transform:translateX(-4%)}to{transform:translateX(2%)}}

.login-card{position:relative;z-index:3;width:100%;max-width:352px;padding:34px 26px 24px;
  border-radius:22px;background:rgba(8,30,52,.56);
  border:1px solid rgba(150,205,255,.16);
  box-shadow:0 34px 80px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  animation:cardIn .62s cubic-bezier(.2,.75,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}

/* 那方印 */
.seal{width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(150deg,#4db4ff,#0a67cf);
  box-shadow:0 12px 28px -10px rgba(13,139,255,.85),inset 0 1px 0 rgba(255,255,255,.4);
  animation:sealFloat 6.5s ease-in-out infinite}
.seal span{font-size:29px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 2px 8px rgba(0,60,120,.4)}
@keyframes sealFloat{0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-6px) rotate(-1deg)}}

.login-name{margin:0;font-size:25px;font-weight:700;letter-spacing:.16em;text-indent:.16em;
  text-align:center;color:#eaf5ff;text-shadow:0 2px 18px rgba(90,180,255,.4)}
.login-sub{margin:7px 0 0;text-align:center;font-size:11.5px;letter-spacing:.2em;
  color:rgba(150,205,255,.6);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}
.login-tip{margin:17px 0 20px;text-align:center;font-size:13px;line-height:1.7;
  color:rgba(190,220,245,.62)}

.login-card .field{display:block;position:relative;margin-bottom:11px}
.login-card .field input{width:100%;height:48px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(150,205,255,.18);background:rgba(3,18,34,.62);
  color:#eaf5ff;font-size:16px;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s}
.login-card .field input::placeholder{color:rgba(150,190,225,.42)}
.login-card .field input:focus{border-color:#3aa8ff;background:rgba(3,18,34,.88);
  box-shadow:0 0 0 3px rgba(13,139,255,.16)}

.login-msg{margin:4px 0 10px;font-size:13px;color:#ffb4b8;
  background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.3);
  border-radius:9px;padding:8px 11px}
.login-msg[hidden]{display:none}

/* 按下之前，光从这道门上扫过去 */
.login-btn{position:relative;overflow:hidden;width:100%;height:48px;margin-top:6px;
  border:0;border-radius:12px;cursor:pointer;color:#fff;
  font-size:16px;font-weight:600;letter-spacing:.24em;text-indent:.24em;
  background:linear-gradient(135deg,#25a4ff,#0a67cf);
  box-shadow:0 16px 34px -14px rgba(13,139,255,.95);
  transition:transform .12s,box-shadow .2s}
.login-btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-130%);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,68%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.login-btn:active{transform:translateY(1px) scale(.995)}
.login-btn:disabled{opacity:.7;cursor:default}

.login-foot{position:absolute;left:0;right:0;bottom:16px;z-index:3;text-align:center;
  font-size:11px;letter-spacing:.18em;color:rgba(150,205,255,.34);pointer-events:none}

@media (max-height:620px){
  .login-card{padding:24px 20px 18px}
  .seal{width:48px;height:48px;margin-bottom:10px}
  .seal span{font-size:24px}
  .login-tip{margin:10px 0 14px}
}
@media (prefers-reduced-motion:reduce){.login *{animation:none!important}}

/* 打印 */
.pbtn{flex:none;border:1px solid var(--line);background:#fff;color:var(--ink3);font-size:13px;
  padding:6px 13px;border-radius:8px;cursor:pointer;font-family:inherit}
.pbtn:hover{border-color:var(--blue);color:var(--blue)}

@media print{
  .appbar,#side,.side,.tabbar,#fabBtn,#mask,#sheet,.pbtn,.back,.chips,.hint,.toast{display:none!important}
  html,body{background:#fff}
  .shell{display:block;grid-template-columns:none}
  #app{padding:0}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid;page-break-inside:avoid}
  .row,.list .row{break-inside:avoid;page-break-inside:avoid}
  .pagehead{margin-bottom:10px}
}