/* =========================================================================
   升级订单管理系统 v5.1 · 简洁工作台 —— 全新设计系统（与 v1 极光风彻底区隔）
   设计语言：顶部横向导航 + 青绿账本配色 + 直角卡片 + 1px 描边 + 等宽数字
   深色 / 浅色双主题；完整覆盖 app.js 既有类名，逻辑零改动
   ========================================================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root, html[data-theme="dark"] {
  --bg:#0c1116; --bg2:#10171e; --card:#141c24; --card2:#182230; --hov:#1d2a36;
  --line:#24313e; --line2:#1b2632;
  --t1:#e9f0f7; --t2:#9db0c2; --t3:#64798d;
  --primary:#2dd4bf; --primary-d:#14b8a6; --primary-l:rgba(45,212,191,.13);
  --cyan:#38bdf8; --amber:#fbbf24; --green:#4ade80; --red:#fb7185; --violet:#c4b5fd;
  --shadow:0 8px 28px rgba(0,0,0,.46);
  --shadow-sm:0 2px 8px rgba(0,0,0,.32);
  --grad:linear-gradient(135deg,#2dd4bf 0%,#0ea5e9 100%);
  --grad-soft:linear-gradient(135deg,rgba(45,212,191,.14),rgba(14,165,233,.10));
  --glass:rgba(16,23,30,.86);
}
html[data-theme="light"] {
  --bg:#eceff3; --bg2:#ffffff; --card:#ffffff; --card2:#f7f9fb; --hov:#e9eef3;
  --line:#d5dde6; --line2:#e5eaf0;
  --t1:#0f1b26; --t2:#51637a; --t3:#8b9bad;
  --primary:#0d9488; --primary-d:#0f766e; --primary-l:#e0f5f1;
  --cyan:#0284c7; --amber:#b45309; --green:#15803d; --red:#dc2626; --violet:#6d28d9;
  --shadow:0 6px 20px rgba(20,35,50,.13);
  --shadow-sm:0 2px 6px rgba(20,35,50,.08);
  --grad:linear-gradient(135deg,#0d9488 0%,#0284c7 100%);
  --grad-soft:linear-gradient(135deg,rgba(13,148,136,.10),rgba(2,132,199,.08));
  --glass:rgba(255,255,255,.88);
}

html,body { height:100%; }
body { font:13px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--t1); overflow:hidden; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--t3); }
::-webkit-scrollbar-track { background:transparent; }

/* ============ 布局：左侧竖向侧边栏（分组清晰 / 可折叠 / 可收窄） ============ */
.app { display:flex; flex-direction:row; height:100vh; position:relative; z-index:1; }
.side { width:236px; flex:none; display:flex; flex-direction:column; background:var(--card); border-right:1px solid var(--line); position:relative; transition:width .18s ease; overflow:hidden; }
.side::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--grad); opacity:.85; }
.side .brand { display:flex; align-items:center; gap:10px; padding:14px 16px 12px; flex:none; border-bottom:1px solid var(--line2); }
.side .brand .mark { width:30px; height:30px; border-radius:7px; background:var(--grad); position:relative; flex:none; }
.side .brand .mark::after { content:""; position:absolute; left:9px; top:9px; width:12px; height:12px; border:2px solid #fff; border-radius:3px; }
.side .brand b { font-size:14px; letter-spacing:.2px; white-space:nowrap; display:block; }
.side .brand small { display:block; color:var(--t3); font-size:11px; margin-top:1px; white-space:nowrap; }
.side .brand .btxt { overflow:hidden; }
.nav { flex:1; display:flex; flex-direction:column; gap:1px; overflow-y:auto; overflow-x:hidden; padding:8px 8px 12px; scrollbar-width:thin; }
.nav .ng { display:flex; align-items:center; gap:6px; color:var(--t3); font-size:11px; font-weight:600; letter-spacing:.6px; padding:11px 8px 5px; cursor:pointer; user-select:none; white-space:nowrap; }
.nav .ng:hover { color:var(--t2); }
.nav .ng::after { content:""; margin-left:auto; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .18s ease; flex:none; }
.nav .ng.closed::after { transform:rotate(-45deg) translateY(-1px); }
.nav a { display:flex; align-items:center; gap:10px; height:34px; padding:0 9px; border-radius:6px; color:var(--t2); cursor:pointer; white-space:nowrap; position:relative; transition:background .15s ease,color .15s ease; font-size:12.5px; }
.nav a svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none; }
.nav a:hover { background:var(--hov); color:var(--t1); }
.nav a.on { color:var(--primary); font-weight:600; background:var(--primary-l); }
.nav a.on::before { content:""; position:absolute; left:-8px; top:7px; bottom:7px; width:3px; background:var(--primary); border-radius:0 2px 2px 0; }
.nav .bdg { margin-left:auto; background:var(--red); color:#fff; font-size:10px; min-width:17px; height:17px; border-radius:9px; display:none; align-items:center; justify-content:center; padding:0 5px; font-weight:600; }
.nav .bdg.on { display:inline-flex; }
.side .foot { display:block; padding:10px 14px; border-top:1px solid var(--line2); color:var(--t3); font-size:11px; line-height:1.5; flex:none; }
/* 收窄态：只留图标 */
.side.mini { width:60px; }
.side.mini .brand { justify-content:center; padding:14px 0 12px; }
.side.mini .brand .btxt { display:none; }
.side.mini .nav { padding:8px 6px 12px; align-items:center; }
.side.mini .nav .ng { font-size:0; padding:10px 0 4px; justify-content:center; }
.side.mini .nav .ng::after { display:none; }
.side.mini .nav .ng:not(:first-child)::before { content:""; width:22px; height:1px; background:var(--line); font-size:0; }
.side.mini .nav a { width:38px; padding:0; justify-content:center; }
.side.mini .nav a .txt, .side.mini .nav a .bdg { display:none; }
.side.mini .foot { display:none; }
/* 折叠切换按钮 */
.nav-toggle { position:absolute; right:8px; top:16px; width:24px; height:24px; border:1px solid var(--line); background:var(--card2); border-radius:5px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:3; color:var(--t2); }
.nav-toggle:hover { color:var(--primary); border-color:var(--primary); }
.nav-toggle svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; transition:transform .18s ease; }
.side.mini .nav-toggle { right:50%; transform:translateX(50%); top:44px; }
.side.mini .nav-toggle svg { transform:rotate(180deg); }
.side.mini .brand { padding-right:0; }

.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.hdr { height:56px; background:var(--bg2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 22px; flex:none; flex-wrap:wrap; }
.hdr h1 { font-size:17px; font-weight:700; letter-spacing:.2px; display:flex; align-items:center; gap:9px; }
.hdr h1::before { content:""; width:4px; height:18px; background:var(--grad); border-radius:1px; }
.hdr .sub { color:var(--t3); font-size:12px; }
.hdr .right { margin-left:auto; display:flex; align-items:center; gap:9px; }
.bodyer { flex:1; overflow:auto; padding:18px 22px 36px; }
.page { display:none; } .page.on { display:block; animation:fadeUp .22s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ============ 控件 ============ */
.btn { height:33px; padding:0 14px; border:1px solid var(--line); background:var(--card); border-radius:6px; cursor:pointer; font-size:12.5px; color:var(--t1); display:inline-flex; align-items:center; gap:6px; font-weight:500; transition:transform .1s ease,background .14s ease,border-color .14s ease,color .14s ease; }
.btn:hover { border-color:var(--primary); color:var(--primary); }
.btn.pri { background:var(--primary); border-color:var(--primary); color:#04110e; font-weight:600; }
html[data-theme="dark"] .btn.pri { color:#052e29; }
.btn.pri:hover { background:var(--primary-d); border-color:var(--primary-d); color:#fff; }
.btn.ai { background:var(--primary-l); border-color:rgba(45,212,191,.4); color:var(--primary); }
.btn.dan { color:var(--red); } .btn.dan:hover { border-color:var(--red); color:var(--red); background:rgba(251,113,133,.08); }
.btn.sm { height:30px; padding:0 12px; font-size:12px; }
.btn:active { transform:scale(.97); }
input[type=text],input[type=number],input[type=date],select,textarea { font:13px -apple-system,"Segoe UI","Microsoft YaHei"; color:var(--t1); }
.f-inp { height:33px; border:1px solid var(--line); border-radius:6px; padding:0 10px; background:var(--card); color:var(--t1); outline:none; transition:border-color .14s,box-shadow .14s; }
.f-inp:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-l); }
.f-inp::placeholder { color:var(--t3); }
select.f-inp option { background:var(--card); color:var(--t1); }
input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.6); }
html[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator { filter:none; }
textarea.f-inp { height:auto; padding:8px 10px; resize:vertical; line-height:1.7; }
.seg { display:flex; background:var(--hov); border-radius:6px; padding:2px; }
.seg button { border:0; background:transparent; height:27px; padding:0 12px; border-radius:5px; cursor:pointer; color:var(--t2); font-size:12px; font-weight:500; transition:.14s; }
.seg button.on { background:var(--card); color:var(--primary); font-weight:600; }
.ck { width:15px; height:15px; accent-color:var(--primary); }
.lnk { color:var(--primary); cursor:pointer; font-size:12px; } .lnk:hover { text-decoration:underline; }
.lnk.red { color:var(--red); } .lnk.ai { color:var(--violet); }
.mono { font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:12.5px; }
.mini { color:var(--t3); font-size:11.5px; }
.ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple .5s linear; background:rgba(120,200,220,.28); pointer-events:none; }
@keyframes ripple { to { transform:scale(2.6); opacity:0; } }
.spin { display:inline-block; width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.skel { background:linear-gradient(90deg,var(--line2) 25%,var(--hov) 50%,var(--line2) 75%); background-size:1000px 100%; animation:shimmer 1.3s infinite linear; height:12px; border-radius:3px; margin:10px 0; }
@keyframes shimmer { 0% { background-position:-600px 0; } 100% { background-position:600px 0; } }

/* ============ 头部小件 ============ */
.ai-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:13px; font-size:11.5px; cursor:pointer; border:1px solid var(--line); color:var(--t3); background:var(--card); }
.ai-chip i { width:6px; height:6px; border-radius:50%; background:var(--t3); font-style:normal; }
.ai-chip.on { color:var(--green); border-color:rgba(74,222,128,.4); }
.ai-chip.on i { background:var(--green); }
.icon-btn { width:32px; height:32px; border:1px solid var(--line); background:var(--card); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .14s,transform .1s; }
.icon-btn:hover { border-color:var(--primary); } .icon-btn:active { transform:scale(.94); }
.icon-btn svg { width:15px; height:15px; stroke:var(--t2); fill:none; stroke-width:1.8; }
.search { position:relative; }
.search svg { position:absolute; left:10px; top:9px; width:14px; height:14px; stroke:var(--t3); fill:none; stroke-width:2; }
.search input { width:260px; height:33px; border:1px solid var(--line); border-radius:16px; padding:0 13px 0 31px; font-size:12.5px; background:var(--card); color:var(--t1); outline:none; transition:border-color .14s,box-shadow .14s; }
.search input:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-l); }

/* ============ 登录 ============ */
.authwrap { position:fixed; inset:0; background:var(--bg); z-index:200; display:none; align-items:center; justify-content:center; }
.authwrap::before { content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,var(--line2) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(var(--line2) 1px,transparent 1px) 0 0/44px 44px; opacity:.5; }
.authbox { width:340px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:30px 28px; box-shadow:var(--shadow); position:relative; border-top:3px solid var(--primary); }
.auth-brand { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:20px; }
.auth-brand .mark { width:42px; height:42px; border-radius:10px; background:var(--grad); position:relative; }
.auth-brand .mark::after { content:""; position:absolute; left:12px; top:12px; width:18px; height:18px; border:2.5px solid #fff; border-radius:5px; }
.auth-brand b { font-size:16px; } .auth-brand small { color:var(--t3); font-size:11.5px; }
.auth-tabs { display:flex; gap:5px; margin-bottom:15px; background:var(--hov); border-radius:7px; padding:2px; }
.auth-tabs button { flex:1; height:31px; border:0; background:transparent; border-radius:6px; color:var(--t2); cursor:pointer; font-size:12.5px; transition:.14s; }
.auth-tabs button.on { background:var(--card); color:var(--primary); font-weight:600; }
#form-login input,#form-reg input { width:100%; margin-bottom:9px; height:38px; }
.auth-err { color:var(--red); font-size:12px; min-height:17px; margin-top:3px; }
.auth-note { color:var(--t3); font-size:11.5px; text-align:center; }

/* ============ 表格 ============ */
.tbl { width:100%; border-collapse:collapse; background:var(--card); font-size:12.5px; }
.tbl th { background:var(--card2); border-bottom:1px solid var(--line); padding:9px 12px; text-align:left; color:var(--t2); font-weight:600; position:sticky; top:0; z-index:2; white-space:nowrap; font-size:11.5px; letter-spacing:.4px; }
.tbl td { border-bottom:1px solid var(--line2); padding:9px 12px; vertical-align:middle; }
.tbl tr:hover td { background:var(--hov); }
.wrap { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:auto; max-height:calc(100vh - 210px); }

/* ============ 筛选 / 横幅 ============ */
.filters { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:11px 13px; display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:14px; }
.filters label { color:var(--t3); font-size:11.5px; letter-spacing:.3px; }
.dq { display:flex; gap:4px; }
.dq button { height:23px; padding:0 8px; border:1px solid var(--line); background:var(--card2); border-radius:4px; color:var(--t2); font-size:11px; cursor:pointer; transition:.14s; }
.dq button:hover { border-color:var(--primary); color:var(--primary); }
.banner { display:none; align-items:center; gap:10px; background:var(--card2); border:1px solid var(--line); border-left:3px solid var(--amber); color:var(--amber); border-radius:6px; padding:9px 13px; margin-bottom:13px; font-size:12.5px; }
.banner.on { display:flex; }
.banner a { color:var(--amber); cursor:pointer; text-decoration:underline; margin-left:auto; }

/* ============ 客户卡片 / 订单 ============ */
.cust { background:var(--card); border:1px solid var(--line); border-radius:8px; margin-bottom:11px; overflow:hidden; transition:border-color .15s,box-shadow .15s; animation:fadeUp .24s ease both; }
.cust:hover { box-shadow:var(--shadow-sm); }
.cust .ch { display:flex; align-items:center; gap:12px; padding:12px 15px; cursor:pointer; border-left:3px solid transparent; }
.cust.open .ch { border-left-color:var(--primary); }
.avatar { width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:15px; flex:none; }
.cust .nm { font-size:14.5px; font-weight:600; }
.cust .meta { color:var(--t3); font-size:11.5px; margin-top:1px; }
.cust .stat { margin-left:auto; display:flex; gap:22px; text-align:right; }
.cust .stat div b { display:block; font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.cust .stat div span { font-size:10.5px; color:var(--t3); }
.cust .chev { width:15px; height:15px; stroke:var(--t3); fill:none; stroke-width:2; transition:transform .2s; flex:none; }
.cust.open .chev { transform:rotate(180deg); }
.cust .cb { display:none; padding:0 15px 13px; }
.cust.open .cb { display:block; animation:fadeUp .22s ease both; }

.ord { background:var(--card2); border:1px solid var(--line2); border-radius:7px; padding:12px 14px; margin-bottom:9px; transition:border-color .14s; }
.ord:hover { border-color:var(--line); }
.ord .oh { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ord .no { color:var(--t1); font-weight:600; font-family:Consolas,Menlo,monospace; font-size:12.5px; }
.ord .ex { color:var(--t2); font-family:Consolas,Menlo,monospace; font-size:11.5px; background:var(--card); border:1px dashed var(--line); border-radius:4px; padding:1px 7px; }
.ord .ex::before { content:"合单 "; color:var(--t3); }
.ord .act { margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; }
.ord .dtl { margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); }
.pill { height:20px; padding:0 8px; border-radius:4px; font-size:11px; display:inline-flex; align-items:center; gap:5px; cursor:default; font-weight:500; border:1px solid transparent; }
.pill.dot::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.未处理 { background:rgba(251,191,36,.12); color:var(--amber); border-color:rgba(251,191,36,.35); }
.pill.已备货 { background:var(--primary-l); color:var(--primary); border-color:rgba(45,212,191,.35); }
.pill.已发货 { background:rgba(56,189,248,.12); color:var(--cyan); border-color:rgba(56,189,248,.3); }
.pill.已完成 { background:rgba(74,222,128,.12); color:var(--green); border-color:rgba(74,222,128,.3); }
.pill.异常   { background:rgba(251,113,133,.12); color:var(--red); border-color:rgba(251,113,133,.3); }
.pill:hover { filter:brightness(1.1); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:5px; padding:3px 8px; font-size:11.5px; transition:transform .13s,box-shadow .13s; }
.chip:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.chip i { font-style:normal; font-size:10px; padding:1px 5px; border-radius:3px; color:#fff; }
.chip b { font-weight:600; } .chip s { text-decoration:none; color:var(--t3); }
.chip b.cpy { cursor:pointer; } .chip b.cpy:hover { color:var(--primary); text-decoration:underline; }
.chip .rep { color:var(--amber); font-size:10px; }
.c-CPU i{background:#2563eb}.c-主板 i{background:#7c3aed}.c-显卡 i{background:#ea580c}.c-内存 i{background:#0891b2}
.c-硬盘 i{background:#059669}.c-电源 i{background:#b45309}.c-散热 i{background:#64748b}.c-机箱 i{background:#737373}
.c-风扇 i{background:#16a34a}.c-显示器 i{background:#db2777}.c-其他 i{background:#94a3b8}
/* v5.2 扩充类型配色 */
.c-固态硬盘 i{background:#0d9488}.c-机械硬盘 i{background:#4d7c0f}.c-导热硅脂 i{background:#a1a1aa}
.c-键盘 i{background:#7c2d12}.c-鼠标 i{background:#9d174d}.c-耳机 i{background:#6d28d9}.c-音箱 i{background:#b91c1c}
.c-摄像头 i{background:#0369a1}.c-网卡 i{background:#0f766e}.c-路由器 i{background:#4338ca}.c-扩展坞 i{background:#57534e}
.c-移动硬盘 i{background:#65a30d}.c-移动电源 i{background:#c2410c}.c-充电器 i{background:#a16207}.c-数据线 i{background:#525252}
.c-支架 i{background:#155e75}.c-存储卡 i{background:#86198f}.c-U盘 i{background:#1d4ed8}.c-手柄 i{background:#be185d}
.ord .note { color:var(--t2); font-size:11.5px; margin-top:7px; }
.ord .amt { color:var(--amber); font-weight:700; font-variant-numeric:tabular-nums; }
.tags { display:flex; gap:5px; align-items:center; margin-top:7px; flex-wrap:wrap; }
.tag { height:19px; padding:0 8px; border-radius:4px; font-size:10.5px; display:inline-flex; align-items:center; cursor:pointer; border:1px solid transparent; }
.tag.加急 { background:rgba(251,113,133,.12); color:var(--red); border-color:rgba(251,113,133,.35); }
.tag.优先 { background:var(--primary-l); color:var(--primary); border-color:rgba(45,212,191,.35); }
.tag.售后 { background:rgba(196,181,253,.12); color:var(--violet); border-color:rgba(196,181,253,.3); }
.tag.退款风险 { background:rgba(251,191,36,.12); color:var(--amber); border-color:rgba(251,191,36,.35); }
.tag.ghost { background:transparent; border:1px dashed var(--line); color:var(--t3); }
.tag.ghost:hover { border-color:var(--primary); color:var(--primary); }
.mini-pop { position:fixed; z-index:80; background:var(--card); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); padding:7px; display:none; flex-direction:column; gap:4px; }
.mini-pop.on { display:flex; }
.mini-pop .tag { justify-content:center; }

/* ---- 配置对比 ---- */
.cfg { margin-top:9px; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.cfg .cfg-h { background:var(--card2); padding:5px 10px; font-size:11px; color:var(--t3); display:flex; letter-spacing:.3px; }
.cfg .cfg-h b { color:var(--t2); }
.cfg .cfg-r { display:flex; border-top:1px solid var(--line2); font-size:12px; }
.cfg .cfg-r>div:first-child { width:74px; padding:5px 10px; color:var(--t3); flex:none; }
.cfg .cfg-r>div:last-child { padding:5px 10px; flex:1; }
.cfg .cfg-r .newv { color:var(--cyan); font-weight:600; }
.cfg .cfg-r .oldv { color:var(--t3); text-decoration:line-through; margin-right:6px; }
.cfg .cfg-r .keepv { color:var(--t2); }
.cfg .cpy { cursor:pointer; }
.cfg .newv.cpy:hover { text-decoration:underline; }

/* ============ KPI / 面板 ============ */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:11px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; position:relative; overflow:hidden; transition:transform .16s ease,box-shadow .16s ease; }
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.kpi::after { content:""; position:absolute; right:-20px; top:-20px; width:66px; height:66px; border-radius:50%; background:var(--grad-soft); }
.kpi .t { color:var(--t3); font-size:11.5px; letter-spacing:.3px; }
.kpi .v { font-size:23px; font-weight:700; margin-top:3px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.kpi .v.m { color:var(--amber); } .kpi .v.g { color:var(--green); } .kpi .v.r { color:var(--red); } .kpi .v.p { color:var(--primary); }
.kpi .f { font-size:10.5px; color:var(--t3); margin-top:2px; }
.sec { margin:18px 0 9px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.sec::before { content:""; width:3px; height:14px; background:var(--grad); border-radius:1px; }
.bar { height:5px; background:var(--hov); border-radius:3px; overflow:hidden; min-width:70px; }
.bar i { display:block; height:100%; background:var(--grad); border-radius:3px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:13px; animation:fadeUp .24s ease both; }
.panel h3 { font-size:13px; font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:7px; }
.panel h3::before { content:""; width:3px; height:12px; background:var(--grad); border-radius:1px; }
.panel p.hint { color:var(--t3); font-size:11.5px; margin-bottom:11px; }

/* ============ 工作台 ============ */
.greet { display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.greet .hello { font-size:20px; font-weight:700; letter-spacing:.2px; color:var(--primary); }
.greet .date { color:var(--t3); font-size:12px; margin-top:2px; }
.greet .qk { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.qkbtn { height:34px; padding:0 13px; border:1px solid var(--line); background:var(--card); border-radius:6px; cursor:pointer; color:var(--t1); display:inline-flex; align-items:center; gap:7px; font-size:12.5px; transition:.14s; }
.qkbtn:hover { border-color:var(--primary); color:var(--primary); }
.qkbtn.pri { background:var(--primary); border-color:var(--primary); color:#052e29; font-weight:600; }
html[data-theme="dark"] .qkbtn.pri { color:#052e29; }
.qkbtn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.dash-grid { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.dash-col { display:flex; flex-direction:column; gap:12px; min-width:0; }
.card-t { font-size:12.5px; font-weight:600; margin-bottom:11px; display:flex; align-items:center; gap:8px; }
.card-t::before { content:""; width:3px; height:12px; background:var(--grad); border-radius:1px; }
.chart-bars { display:flex; gap:10px; align-items:flex-end; height:160px; padding:6px 4px 0; }
.chart-bars .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.chart-bars .bar-wrap { width:100%; height:calc(100% - 26px); display:flex; align-items:flex-end; justify-content:center; }
.chart-bars .b { width:66%; max-width:38px; border-radius:3px 3px 0 0; background:var(--grad); animation:growBar .6s cubic-bezier(.2,.7,.3,1) both; }
.chart-bars .lbl { font-size:10.5px; color:var(--t3); }
.chart-bars .num { font-size:10.5px; color:var(--t2); font-weight:600; }
@keyframes growBar { from { height:0; } }
.mini-row { display:flex; align-items:center; gap:9px; padding:8px 3px; border-bottom:1px dashed var(--line2); }
.mini-row:last-child { border-bottom:0; }
.mini-row .mt { color:var(--t3); font-size:11px; flex:none; width:52px; }
.mini-row .mv { font-weight:600; margin-left:auto; font-variant-numeric:tabular-nums; }
.empty { text-align:center; color:var(--t3); padding:56px 20px; }
.empty svg { width:48px; height:48px; stroke:var(--line); fill:none; stroke-width:1.4; margin-bottom:10px; }

/* ============ 看板 ============ */
.kboard { display:grid; grid-template-columns:repeat(5,minmax(216px,1fr)); gap:11px; overflow-x:auto; padding-bottom:8px; }
.kcol { background:var(--card2); border:1px solid var(--line); border-radius:8px; min-height:190px; display:flex; flex-direction:column; }
.kcol .kh { padding:10px 12px; border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:8px; font-weight:600; font-size:12px; }
.kcol .kh .cnt { margin-left:auto; font-size:10.5px; color:var(--t3); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:0 8px; height:18px; display:inline-flex; align-items:center; }
.kcol .kb { padding:8px; display:flex; flex-direction:column; gap:7px; flex:1; min-height:88px; }
.kcol.drop-into { border-color:var(--primary); background:var(--primary-l); }
.kcard { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:10px 11px; cursor:grab; transition:transform .13s,box-shadow .13s,border-color .13s; }
.kcard:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.kcard:active { cursor:grabbing; }
.kcard.dragging { opacity:.45; transform:rotate(1.5deg); }
.kcard .kc-top { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.kcard .kc-nick { font-weight:600; font-size:12.5px; }
.kcard .kc-no { font-family:Consolas,Menlo,monospace; font-size:10.5px; color:var(--t2); }
.kcard .kc-meta { font-size:10.5px; color:var(--t3); margin-top:4px; }
.kcard .kc-amt { font-weight:700; color:var(--amber); font-size:12px; font-variant-numeric:tabular-nums; }
.kcard .kc-parts { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.kcard .kc-parts .m { font-size:10px; background:var(--card2); border:1px solid var(--line2); border-radius:4px; padding:1px 5px; color:var(--t2); }

/* ============ 识别录入 ============ */
.panes { display:flex; gap:6px; margin-bottom:13px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.panes button { border:0; background:none; padding:0 5px 10px; margin-right:15px; font-size:13px; color:var(--t3); cursor:pointer; border-bottom:2px solid transparent; transition:.14s; }
.panes button.on { color:var(--primary); border-color:var(--primary); font-weight:600; }
.pane { display:none; } .pane.on { display:block; }
.drop { border:1.5px dashed var(--line); border-radius:8px; padding:32px; text-align:center; color:var(--t3); background:var(--card2); cursor:pointer; transition:.15s; }
.drop:hover,.drop.over { border-color:var(--primary); background:var(--primary-l); color:var(--primary); }
.drop svg { width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.4; opacity:.7; }
.prev { display:flex; gap:13px; margin-top:13px; }
.prev img { max-width:320px; max-height:230px; border:1px solid var(--line); border-radius:7px; }
.raw { flex:1; background:var(--card2); border:1px solid var(--line2); border-radius:7px; padding:10px; font-size:11.5px; color:var(--t2); white-space:pre-wrap; max-height:230px; overflow:auto; }
.cand { display:flex; flex-direction:column; gap:7px; margin-top:11px; }
.cand label { display:flex; align-items:center; gap:8px; background:var(--card2); border:1px solid var(--line); border-radius:6px; padding:5px 10px; cursor:pointer; font-size:12px; }
.cand label.on { border-color:var(--primary); background:var(--primary-l); }
.cand input.ck { flex:none; }
.prog { height:5px; background:var(--hov); border-radius:3px; margin-top:11px; overflow:hidden; }
.prog i { display:block; height:100%; width:0; background:var(--grad); transition:width .3s; }
.ai-tagline { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--violet); }
.ai-chat-out { background:var(--card2); border:1px solid var(--line2); border-radius:7px; padding:11px; font-size:12.5px; white-space:pre-wrap; max-height:300px; overflow:auto; line-height:1.8; }
.ai-issue { border:1px solid var(--line); border-left:3px solid var(--t3); border-radius:6px; padding:9px 11px; margin-bottom:7px; font-size:12px; background:var(--card); }
.ai-issue.l-高 { border-left-color:var(--red); } .ai-issue.l-中 { border-left-color:var(--amber); } .ai-issue.l-低 { border-left-color:var(--primary); }
.ai-issue .lv { font-weight:700; margin-right:8px; }
.ai-issue.l-高 .lv { color:var(--red); } .ai-issue.l-中 .lv { color:var(--amber); } .ai-issue.l-低 .lv { color:var(--primary); }
.ai-issue .fx { color:var(--t2); margin-top:4px; }
.parts-form { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.thumb { max-width:260px; max-height:150px; border:1px solid var(--line); border-radius:7px; margin-top:7px; }
.rep-badge { font-size:10px; color:var(--amber); }

/* ============ 弹窗 ============ */
.mask { position:fixed; inset:0; background:rgba(4,8,12,.66); display:none; align-items:center; justify-content:center; z-index:50; padding:22px; backdrop-filter:blur(3px); }
.mask.on { display:flex; animation:maskIn .14s ease both; }
@keyframes maskIn { from { opacity:0; } to { opacity:1; } }
.modal { background:var(--card); border:1px solid var(--line); border-radius:9px; width:780px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow); animation:popIn .2s cubic-bezier(.2,.8,.3,1) both; }
@keyframes popIn { from { opacity:0; transform:scale(.97) translateY(8px); } to { opacity:1; transform:none; } }
.modal.wide { width:960px; }
.modal .mh { padding:14px 18px; border-bottom:1px solid var(--line2); display:flex; align-items:center; background:var(--card2); border-radius:9px 9px 0 0; }
.modal .mh b { font-size:14px; } .modal .mh .x { margin-left:auto; cursor:pointer; color:var(--t3); font-size:19px; line-height:1; padding:2px 6px; border-radius:4px; }
.modal .mh .x:hover { color:var(--t1); background:var(--hov); }
.modal .mb { padding:16px 18px; overflow:auto; }
.modal .mf { padding:12px 18px; border-top:1px solid var(--line2); display:flex; gap:9px; justify-content:flex-end; }
.frow { display:grid; grid-template-columns:repeat(2,1fr); gap:11px 15px; margin-bottom:13px; }
.fld { display:flex; flex-direction:column; gap:4px; }
.fld.full { grid-column:1/-1; }
.fld label { font-size:11.5px; color:var(--t2); }
.fld input,.fld select,.fld textarea { height:34px; border:1px solid var(--line); border-radius:6px; padding:0 9px; outline:none; background:var(--card2); color:var(--t1); transition:border-color .14s,box-shadow .14s; }
.fld textarea { height:58px; padding:7px 9px; }
.fld input:focus,.fld select:focus,.fld textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-l); }
.items-ed { border:1px solid var(--line); border-radius:7px; overflow:hidden; }
.items-ed .ir { display:flex; gap:7px; padding:7px; border-bottom:1px solid var(--line2); align-items:center; }
.items-ed .ir:last-child { border-bottom:0; }
.items-ed .ir select { width:92px; height:30px; border:1px solid var(--line); border-radius:5px; background:var(--card2); color:var(--t1); }
.items-ed .ir input { height:30px; border:1px solid var(--line); border-radius:5px; background:var(--card2); color:var(--t1); padding:0 7px; }
.items-ed .ir .m { flex:1; } .items-ed .ir .q { width:58px; } .items-ed .ir .p { width:80px; }
.items-ed .ir .actsel { width:66px; }
.askbox .btns { display:flex; flex-direction:column; gap:7px; }
.askbox .btns .btn { justify-content:center; }

/* ============ 时间线 / Toast ============ */
.tl { position:relative; padding-left:18px; }
.tl::before { content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line2); }
.tl-item { position:relative; padding:0 0 13px 9px; }
.tl-item:last-child { padding-bottom:2px; }
.tl-item .tl-dot { position:absolute; left:-16px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--primary); }
.tl-item .tl-time { font-size:10.5px; color:var(--t3); }
.tl-item .tl-body { font-size:12px; color:var(--t1); margin-top:1px; }
.tl-item .tl-body b { color:var(--primary); }
.toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(16px); background:var(--card); border:1px solid var(--line); border-left:3px solid var(--primary); color:var(--t1); padding:10px 18px; border-radius:7px; font-size:12.5px; opacity:0; transition:.22s; z-index:99; pointer-events:none; box-shadow:var(--shadow); }
.toast.on { opacity:1; transform:translateX(-50%); }

/* =========================================================================
   v5.1 工具模块样式（仅新版 UI 使用）
   ========================================================================= */
.mod-row { display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px dashed var(--line2); }
.mod-row:last-child { border-bottom:0; }
.mod-row .mod-name { font-weight:600; font-size:12.5px; }
.mod-row .mod-desc { color:var(--t3); font-size:11px; margin-top:1px; }
.mod-sw { margin-left:auto; position:relative; width:40px; height:21px; border-radius:11px; background:var(--hov); border:1px solid var(--line); cursor:pointer; transition:.18s; flex:none; }
.mod-sw::after { content:""; position:absolute; left:2px; top:2px; width:15px; height:15px; border-radius:50%; background:var(--t3); transition:.18s; }
.mod-sw.on { background:var(--primary-l); border-color:var(--primary); }
.mod-sw.on::after { left:20px; background:var(--primary); }
.mod-entry { display:flex; gap:8px; flex-wrap:wrap; }
.mod-entry .btn { pointer-events:auto; }

/* 待办 */
.todo-form { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.todo-form .f-inp:first-child { flex:1; min-width:200px; }
.todo-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--line); border-radius:6px; margin-bottom:7px; background:var(--card); }
.todo-item.done { opacity:.55; }
.todo-item.done .todo-title { text-decoration:line-through; }
.todo-check { width:17px; height:17px; accent-color:var(--primary); cursor:pointer; flex:none; }
.todo-title { font-size:12.5px; font-weight:500; }
.todo-note { color:var(--t3); font-size:11px; margin-top:1px; }
.todo-due { font-size:10.5px; padding:1px 7px; border-radius:4px; border:1px solid var(--line); color:var(--t2); flex:none; }
.todo-due.over { color:var(--red); border-color:rgba(251,113,133,.4); background:rgba(251,113,133,.08); }
.todo-due.today { color:var(--amber); border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.08); }
.todo-item .todo-op { margin-left:auto; display:flex; gap:8px; flex:none; }

/* 客户跟进 */
.fol-item { border:1px solid var(--line); border-radius:7px; padding:11px 13px; margin-bottom:9px; background:var(--card); }
.fol-item.done { opacity:.6; }
.fol-top { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.fol-nick { font-weight:600; font-size:13px; cursor:pointer; color:var(--primary); }
.fol-nick:hover { text-decoration:underline; }
.fol-ch { font-size:10.5px; border:1px solid var(--line); border-radius:4px; padding:1px 7px; color:var(--t2); }
.fol-next { font-size:10.5px; padding:1px 7px; border-radius:4px; border:1px solid var(--line); color:var(--t2); }
.fol-next.over { color:var(--red); border-color:rgba(251,113,133,.4); background:rgba(251,113,133,.08); }
.fol-next.today { color:var(--amber); border-color:rgba(251,191,36,.4); background:rgba(251,191,36,.08); }
.fol-body { font-size:12px; color:var(--t1); margin-top:6px; line-height:1.7; }
.fol-op { display:flex; gap:9px; margin-top:7px; }

/* 库存 */
.inv-low { color:var(--red); font-weight:700; }
.inv-ok { color:var(--green); font-weight:700; }
.inv-qty { font-variant-numeric:tabular-nums; font-weight:700; font-size:13px; }
.inv-adj { display:flex; gap:5px; }
.inv-bar { display:flex; gap:6px; align-items:center; }

/* 报价单 */
.qt-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:12px; align-items:start; }
.qt-rows { border:1px solid var(--line); border-radius:7px; overflow:hidden; margin-bottom:9px; }
.qt-row { display:flex; gap:6px; padding:7px; border-bottom:1px solid var(--line2); align-items:center; }
.qt-row:last-child { border-bottom:0; }
.qt-row select { width:88px; height:30px; border:1px solid var(--line); border-radius:5px; background:var(--card2); color:var(--t1); }
.qt-row input { height:30px; border:1px solid var(--line); border-radius:5px; background:var(--card2); color:var(--t1); padding:0 7px; }
.qt-row .m { flex:1; min-width:120px; }
.qt-row .q { width:52px; } .qt-row .p { width:78px; }
.qt-sum { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:10px 12px; background:var(--card2); border:1px solid var(--line); border-radius:7px; margin-bottom:10px; }
.qt-sum b { color:var(--amber); font-size:15px; font-variant-numeric:tabular-nums; }
.qt-amt { font-size:11.5px; color:var(--t2); }

/* 经营图表 */
.chg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; }
.chg-card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:15px; }
.chg-bars { display:flex; gap:6px; align-items:flex-end; height:150px; padding-top:6px; }
.chg-bars .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; min-width:0; }
.chg-bars .bwrap { width:100%; height:calc(100% - 30px); display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.chg-bars .b { width:44%; max-width:22px; border-radius:2px 2px 0 0; background:var(--grad); animation:growBar .6s cubic-bezier(.2,.7,.3,1) both; }
.chg-bars .b2 { background:var(--line); }
.chg-bars .lbl { font-size:9.5px; color:var(--t3); white-space:nowrap; }
.chg-kv { display:flex; justify-content:space-between; font-size:12px; padding:6px 2px; border-bottom:1px dashed var(--line2); }
.chg-kv:last-child { border-bottom:0; }
.chg-kv b { font-variant-numeric:tabular-nums; }
.chg-legend { display:flex; gap:14px; font-size:10.5px; color:var(--t3); margin-top:8px; }
.chg-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; }

/* ============ 响应式（新版：上下结构，窄屏导航横滑） ============ */
@media (max-width: 1100px) { .dash-grid { grid-template-columns:1fr; } .qt-grid { grid-template-columns:1fr; } .kboard { grid-template-columns:repeat(5,minmax(196px,1fr)); } }
@media (max-width: 900px) {
  /* 窄屏：侧边栏自动转为顶部横向导航，保证不挤压内容区 */
  .app { flex-direction:column; }
  .side, .side.mini { width:100%; height:52px; flex-direction:row; align-items:center; border-right:none; border-bottom:1px solid var(--line); padding:0 12px; overflow:visible; }
  .side::after { top:auto; bottom:-1px; }
  .side .brand { border-bottom:none; padding:0; justify-content:flex-start; }
  .side .brand small { display:none; }
  .nav { flex-direction:row; align-items:center; gap:2px; overflow-x:auto; overflow-y:hidden; padding:0; height:100%; }
  .nav .ng { display:none; }
  .nav a, .side.mini .nav a { width:auto; height:32px; padding:0 10px; border-radius:6px 6px 0 0; justify-content:flex-start; }
  .nav a .txt, .side.mini .nav a .txt { display:inline; }
  .nav a.on::before { display:none; }
  .nav a.on { border-bottom:2px solid var(--primary); }
  .side .foot { display:none; }
  .nav-toggle { display:none; }
  .hdr { height:auto; padding:10px 14px; }
  .search input { width:150px; }
  .bodyer { padding:13px 14px 30px; }
  .frow { grid-template-columns:1fr; }
  .modal { width:100% !important; }
  .cust .stat { gap:14px; }
}
@media (max-width: 560px) {
  .hdr .sub { display:none; }
  .hdr h1 { font-size:15px; }
  .search { flex:1; } .search input { width:100%; }
  .kpi .v { font-size:20px; }
}

/* ============ v5.2：配置清单与订单关联标记 ============ */
.bd-tag { display:flex; align-items:center; gap:10px; margin-bottom:8px; padding:7px 11px; border:1px dashed var(--primary); border-radius:6px; background:var(--primary-l); font-size:12px; color:var(--t1); }
.bd-tag b { color:var(--primary); }
.bd-tag .lnk { margin-left:auto; }
.bd-mini { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:4px; background:var(--primary-l); border:1px solid var(--line); color:var(--primary); font-size:10.5px; font-weight:600; white-space:nowrap; }
.bd-card .tbl { margin-top:6px; }
/* 配置清单明细行 */
#bd-rows .ie-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }

/* ==========================================================================
   v5.2.1 响应式修复：覆盖 1440 / 1280 / 1080 / 1024 / 900 / 768 / 375
   策略：弹性收缩 + 网格重排 + 小屏折叠 + 可控横滚，杜绝竖排截断与内容裁剪
   ========================================================================== */

/* 0) 通用：标签类元素禁止逐字竖排（修复状态/标签列被挤成单字换行） */
.pill, .tag, .chip, .bd-mini { white-space: nowrap; }
.pill { max-width: none; }
/* 表格单元格默认不换行，长内容交由 .wrap 横向滚动 */
.tbl th, .tbl td { white-space: nowrap; }
.tbl td.wrapcell, .tbl td .mini { white-space: normal; }
/* 任何表格都可横向滚动，避免窄屏被 overflow:hidden 裁掉 */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ==========================================================================
   v5.3 统一自定义模态弹窗（modal.js）—— 配色 / 圆角 / 间距 / 明暗主题与页面一致
   ========================================================================== */
.mdl-mask { position:fixed; inset:0; background:rgba(4,8,12,.66); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:22px; opacity:0; transition:opacity .16s ease; }
.mdl-mask.on { opacity:1; }
.mdl { background:var(--card); border:1px solid var(--line); border-radius:9px; display:flex; flex-direction:column; box-shadow:var(--shadow); transform:translateY(8px) scale(.985); opacity:0; transition:transform .18s cubic-bezier(.2,.8,.3,1), opacity .18s ease; max-height:86vh; }
.mdl-mask.on .mdl { transform:none; opacity:1; }
.mdl.busy { pointer-events:none; }
.mdl-h { padding:13px 16px; border-bottom:1px solid var(--line2); display:flex; align-items:center; gap:8px; background:var(--card2); border-radius:9px 9px 0 0; }
.mdl-h b { font-size:13.5px; letter-spacing:.2px; }
.mdl-x { margin-left:auto; cursor:pointer; color:var(--t3); font-size:19px; line-height:1; padding:2px 7px; border-radius:4px; transition:color .14s, background .14s; }
.mdl-x:hover { color:var(--t1); background:var(--hov); }
.mdl-b { padding:15px 16px; overflow:auto; font-size:12.8px; color:var(--t1); }
.mdl-msg { line-height:1.75; word-break:break-word; }
.mdl-in { margin-top:12px; }
.mdl-in .f-inp { width:100%; }
.mdl-in .f-inp.bad { border-color:var(--red); box-shadow:0 0 0 3px rgba(251,113,133,.14); }
.mdl-err { min-height:16px; margin-top:6px; font-size:11.5px; color:var(--red); }
.mdl-f { padding:11px 16px; border-top:1px solid var(--line2); display:flex; gap:9px; justify-content:flex-end; background:var(--card2); border-radius:0 0 9px 9px; }
/* 危险操作主按钮 */
.btn.dan-solid { background:var(--red); border-color:var(--red); color:#fff; font-weight:600; }
.btn.dan-solid:hover { filter:brightness(1.08); }
/* 加载中：按钮转圈 + 轻微降透明 */
.btn.loading { opacity:.72; pointer-events:none; }
.btn.loading::before { content:''; width:11px; height:11px; border:1.6px solid currentColor; border-right-color:transparent; border-radius:50%; animation:mdlSpin .6s linear infinite; }
@keyframes mdlSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.loading::before { animation:none; } }

@media (max-width: 560px) {
  .mdl-mask { padding:12px; }
  .mdl-b { padding:13px 14px; }
  .mdl-f { padding:10px 14px; }
  .mdl-f .btn { flex:1; justify-content:center; }
}

/* ==========================================================================
   v5.3 配件面板（AI 装机助手 / 配件清单）—— 修复样式丢失导致的挤压错乱
   ========================================================================== */
.ptp { border:1px solid var(--line); border-radius:8px; background:var(--card); overflow:hidden; margin-top:12px; }
.ptp-hd, .ptp-row { display:grid; grid-template-columns: 104px minmax(160px,1.4fr) minmax(120px,1fr) 62px 92px minmax(110px,1fr) 60px; gap:7px; align-items:center; padding:8px 10px; }
.ptp-hd { background:var(--card2); border-bottom:1px solid var(--line); color:var(--t2); font-size:11.5px; font-weight:600; letter-spacing:.4px; }
.ptp-row { border-bottom:1px dashed var(--line2); transition:background .12s ease; }
.ptp-row:hover { background:var(--hov); }
.ptp-row:last-of-type { border-bottom:0; }
.ptp-row select, .ptp-row input { height:30px; border:1px solid var(--line); border-radius:5px; background:var(--card2); color:var(--t1); padding:0 7px; font-size:12.5px; width:100%; min-width:0; }
.ptp-row select:focus, .ptp-row input:focus { outline:none; border-color:var(--primary); }
.ptp-row input[type=number] { font-variant-numeric:tabular-nums; }
.ptp-row .ptp-del { height:30px; padding:0 8px; justify-content:center; }
.ptp-row.row-new { animation:ptpIn .22s ease both; }
@keyframes ptpIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.ptp-ft { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 10px; background:var(--card2); border-top:1px solid var(--line); }
.ptp-ft .sum { font-size:12px; color:var(--t2); font-variant-numeric:tabular-nums; }
.ptp-ft .sum b { color:var(--primary); font-weight:700; }
.ptp-ft .sum.amber b { color:var(--amber); }
.ptp-empty { padding:34px 16px; text-align:center; color:var(--t3); font-size:12.5px; }
.ptp-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.ptp-bar .sp { flex:1; }
@media (max-width: 900px) {
  .ptp-hd { display:none; }
  .ptp-row { grid-template-columns: 1fr 1fr; }
  .ptp-row select, .ptp-row input { width:100%; }
  .ptp-row .ptp-del { grid-column: span 2; }
}

/* v5.3 配件库分组与 AI 写入配件 */
/* v5.3 弹窗内配件挑选列表（导入配件 / 从配件库选） */
.adv-imp { max-height: 44vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--card2); }
.adv-imp-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px dashed var(--line2); cursor: pointer; transition: background .12s ease; }
.adv-imp-item:hover { background: var(--hov); }
.adv-imp-item.on { background: var(--primary-l); }
.adv-imp-item:last-child { border-bottom: 0; }
.adv-imp-item b { font-size: 12.5px; }
.adv-imp-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); flex: none; }
.tbl tr.grp td { background: var(--card2); cursor: pointer; user-select: none; }
.tbl tr.grp:hover td { background: var(--hov); }
.tbl tr.grp-cat td { border-top: 1px solid var(--line); }
.tbl tr.grp-cat td > * { vertical-align: middle; }
.tbl tr.grp-cat b { font-size: 13px; }
.tbl tr.grp-cat .chip { margin-left: 2px; }
.grp-arrow { display: inline-block; width: 14px; color: var(--t3); font-size: 11px; }
.grp-cnt { margin-left: 9px; color: var(--t3); font-size: 11.5px; }
.grp-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin: 0 7px 0 14px; vertical-align: middle; opacity: .75; }
.tbl tr.grp-brand td { background: var(--bg2); padding-left: 14px; }
.tbl tr.grp-brand b { font-weight: 600; color: var(--t2); font-size: 12.5px; }
/* 三级明细行按分组缩进，视觉上一眼看出归属 */
.tbl tr.pt-item td:first-child { padding-left: calc(12px + var(--pt-indent, 0px)); }
.tbl td.pt-specs { max-width: 260px; white-space: normal; }
/* AI 写入配件预览区 */
.ai-prev { margin-top: 12px; }
.ai-prev-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ai-prev .wrap { max-height: 46vh; }
.ai-prev .tbl td { padding: 5px 8px; }
.ai-prev .f-inp { height: 30px; }
@media (max-width: 900px) {
  .ai-prev-bar { gap: 6px; }
  .tbl tr.grp-brand td { padding-left: 10px; }
}

/* 1) 顶栏：搜索框改为可伸缩（flex-basis + 百分比），不再固定 260px */
.search { flex: 0 1 260px; min-width: 132px; }
.search input { width: 100%; }

@media (max-width: 1280px) {
  .search { flex-basis: 200px; }
  .hdr { padding: 0 16px; gap: 10px; }
}
@media (max-width: 1080px) {
  .hdr .sub { display: none; }
  .search { flex-basis: 168px; }
  .hdr .right { gap: 7px; }
}
@media (max-width: 900px) {
  .hdr { height: auto; padding: 8px 12px; gap: 8px; row-gap: 6px; align-items: center; }
  .hdr h1 { font-size: 15px; }
  .hdr h1::before { height: 16px; }
  /* 搜索框独占一行，避免把右侧按钮挤下去 */
  .search { order: 9; flex: 1 1 100%; }
  .search input { width: 100%; height: 32px; }
  /* 触控目标放大到 32px */
  .hdr .btn, .hdr .icon-btn { min-height: 32px; }
  #hdr-user { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) {
  .hdr { padding: 7px 10px; gap: 6px; }
  .hdr h1 { font-size: 14px; }
  .hdr .right { gap: 6px; }
  #ai-chip-txt { display: none; }
  .hdr .btn.pri { padding: 0 10px; }
}

/* 2) 筛选条：中屏网格重排，小屏默认折叠（点「展开筛选」再展开） */
@media (max-width: 1100px) and (min-width: 901px) {
  .filters { gap: 8px; }
  .filters .f-inp, .filters select.f-inp { min-width: 96px; }
}
.filters { transition: max-height .22s ease, padding .22s ease, margin .22s ease; }
.flt-toggle { display: none; }
@media (max-width: 900px) {
  .filters { max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; margin-bottom: 0; overflow: hidden; }
  .filters.open { max-height: 560px; padding: 11px 13px; border-width: 1px; margin-bottom: 12px; overflow-y: auto; }
  .flt-toggle { display: inline-flex; margin-bottom: 10px; }
  /* 展开时内部控件自适应排列，不再无限堆叠 */
  .filters.open { display: flex; flex-wrap: wrap; }
  .filters.open .f-inp { flex: 1 1 132px; min-width: 118px; }
  .filters.open .dq { flex: 1 1 100%; flex-wrap: wrap; }
  .filters.open .dq button { height: 30px; padding: 0 12px; }
  .filters.open .seg button { height: 30px; padding: 0 14px; }
}

/* 3) 触控目标与输入控件在小屏放大 */
@media (max-width: 900px) {
  .btn { min-height: 32px; }
  .btn.sm { min-height: 30px; }
  .icon-btn { min-width: 32px; min-height: 32px; }
  .f-inp, .filters input.f-inp, .filters select.f-inp { height: 32px; }
  .tbl th, .tbl td { padding: 8px 10px; }
}

/* 4) 窄屏细节：侧边栏转横向后保证导航可滑动、内容区不被挤压 */
@media (max-width: 900px) {
  .nav { -webkit-overflow-scrolling: touch; }
  .bodyer { padding: 12px 12px 28px; }
  .wrap { max-height: calc(100vh - 250px); }
  .kpi .v { font-size: 20px; }
  .dash-grid { gap: 10px; }
}
@media (max-width: 375px) {
  .bodyer { padding: 10px 8px 24px; }
  .hdr h1::before { display: none; }
  .modal { width: 100% !important; }
  .frow { grid-template-columns: 1fr; }
  .items-ed .ie-row, #bd-rows .ie-row { flex-wrap: wrap; }
  #bd-rows .ie-row input, #bd-rows .ie-row select { flex: 1 1 40% !important; width: auto !important; }
}

/* ==========================================================================
   v5.5 UI 统一层：设计 token / 主次层级 / 交互态 / 响应式 / 动效
   纯样式增强：不改动任何业务逻辑、接口调用、路由结构与 DOM 结构
   ========================================================================== */

/* ---------- 1. 设计 token（唯一事实来源） ---------- */
:root, html[data-theme="dark"] {
  /* 字号阶梯（4 级正文 + 标题级） */
  --fs-xs:10.5px; --fs-sm:11.5px; --fs-md:12.5px; --fs-lg:13.5px; --fs-xl:15px; --fs-2xl:17px; --fs-3xl:20px; --fs-4xl:23px;
  /* 间距（4 基准） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;
  /* 圆角 */
  --r-xs:3px; --r-sm:5px; --r-md:6px; --r-lg:8px; --r-xl:10px; --r-pill:999px;
  /* 控件高度 */
  --ctl:34px; --ctl-sm:30px;
  /* 主色上的文字色与 hover 文字色 */
  --on-primary:#052e29; --on-primary-hover:#fff;
  /* 主色透明阶（替代散落的硬编码 rgba(45,212,191,...)） */
  --primary-a10:rgba(45,212,191,.10); --primary-a35:rgba(45,212,191,.35); --primary-a40:rgba(45,212,191,.40);
  /* 语义态底色 */
  --danger-soft:rgba(251,113,133,.12); --warn-soft:rgba(251,191,36,.12);
  --ok-soft:rgba(74,222,128,.12); --info-soft:rgba(56,189,248,.12);
  /* 动效 */
  --ease:cubic-bezier(.2,.8,.3,1); --dur-1:.14s; --dur-2:.2s; --dur-3:.32s;
  --focus-ring:0 0 0 3px var(--primary-a35);
}
html[data-theme="light"] {
  --on-primary:#04211c; --on-primary-hover:#fff;
  --primary-a10:rgba(13,148,136,.10); --primary-a35:rgba(13,148,136,.32); --primary-a40:rgba(13,148,136,.35);
  --danger-soft:rgba(220,38,38,.08); --warn-soft:rgba(180,83,9,.08);
  --ok-soft:rgba(21,128,61,.08); --info-soft:rgba(2,132,199,.08);
}

/* ---------- 2. 统一修正：消除硬编码与主题不跟随 ---------- */
.btn.pri, .qkbtn.pri { color:var(--on-primary); }
.btn.pri:hover, .qkbtn.pri:hover { color:var(--on-primary-hover); }
html[data-theme="dark"] .btn.pri, html[data-theme="dark"] .qkbtn.pri { color:var(--on-primary); }
.btn.ai { background:var(--primary-a10); border-color:var(--primary-a40); color:var(--primary); }
.btn.ai:hover { background:var(--primary-a35); }
.pill.已备货, .tag.优先 { background:var(--primary-a10); color:var(--primary); border-color:var(--primary-a35); }
.bd-tag, .bd-mini { background:var(--primary-a10); border-color:var(--primary-a35); }
.pill.未处理, .tag.退款风险 { background:var(--warn-soft); }
.pill.已发货 { background:var(--info-soft); } .pill.已完成 { background:var(--ok-soft); }
.pill.异常, .tag.加急 { background:var(--danger-soft); }
.tag.售后 { background:rgba(196,181,253,.12); }
/* 圆角归一到 token */
.btn, .qkbtn, .f-inp, .icon-btn, .seg, .nav a, .nav-toggle { border-radius:var(--r-md); }
.panel, .wrap, .kpi, .kcol, .cust, .filters, .banner, .mdl { border-radius:var(--r-lg); }
.chip, .tag, .pill { border-radius:var(--r-sm); }
/* 控件高度归一 */
.btn, .f-inp { height:var(--ctl); } .btn.sm { height:var(--ctl-sm); }
.qkbtn { height:var(--ctl); }
/* 图标风格统一 */
svg { stroke-linecap:round; stroke-linejoin:round; }
.nav a svg, .qkbtn svg, .icon-btn svg, .nav-toggle svg, .cust .chev { stroke-width:1.75; }

/* ---------- 3. 主次操作层级 ---------- */
.btn.pri { box-shadow:0 1px 2px rgba(0,0,0,.14); letter-spacing:.2px; }
.btn.pri:hover { box-shadow:0 3px 10px rgba(0,0,0,.18); }
/* 主操作（实心+投影）与次操作（描边）层级对比，次操作保持正文色避免整体发灰 */
.sec { color:var(--t1); margin:18px 0 9px; }
.panel h3, .card-t { color:var(--t1); }
.panel p.hint { line-height:1.7; }
/* 区块间距节奏统一 */
.panel { margin-bottom:var(--sp-3); padding:var(--sp-4); }
.filters { margin-bottom:var(--sp-3); }
.kpis { gap:var(--sp-3); margin-bottom:var(--sp-4); }

/* ---------- 4. 交互态补全：hover / focus / disabled / loading ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline:none; box-shadow:var(--focus-ring); border-color:var(--primary);
}
.btn:disabled, .qkbtn:disabled, button:disabled,
.f-inp:disabled, select:disabled, textarea:disabled {
  opacity:.48; cursor:not-allowed; filter:saturate(.6);
}
.btn:disabled:hover, .qkbtn:disabled:hover, button:disabled:hover {
  border-color:var(--line); color:var(--t2); background:var(--card); box-shadow:none;
}
.btn.is-loading, .btn.loading { opacity:.7; pointer-events:none; }
.btn.is-loading::before { content:''; width:11px; height:11px; border:1.6px solid currentColor;
  border-right-color:transparent; border-radius:50%; animation:mdlSpin .6s linear infinite; }
/* 行内加载 / 骨架 */
.skel-row { display:flex; gap:var(--sp-2); padding:var(--sp-2) 0; }
.skel-row .skel { flex:1; margin:0; }
/* 空数据态 */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:52px 20px; color:var(--t3); font-size:var(--fs-md); }
.empty svg, .empty-ico { width:44px; height:44px; stroke:var(--line); fill:none; stroke-width:1.4; margin-bottom:2px; }
.empty .e-t { color:var(--t2); font-size:var(--fs-md); font-weight:600; }
.empty .e-s { font-size:var(--fs-sm); }
/* 错误态 */
.err-state { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 18px;
  border:1px dashed var(--red); border-radius:var(--r-lg); background:var(--danger-soft);
  color:var(--red); font-size:var(--fs-md); text-align:center; }
.err-inline { display:inline-flex; align-items:center; gap:6px; color:var(--red); font-size:var(--fs-sm); }
.ipt-bad { border-color:var(--red) !important; }

/* ---------- 5. 移动端：点击区域 / 间距 / 滚动 ---------- */
@media (max-width: 900px) {
  .bodyer, .wrap, .nav, .kboard { -webkit-overflow-scrolling:touch; }
  .bodyer { overscroll-behavior-y:contain; padding-bottom:calc(30px + env(safe-area-inset-bottom,0px)); }
  /* 触控目标 ≥40px */
  .btn, .qkbtn, .dq button, .seg button, .nav a { min-height:40px; }
  .btn.sm { min-height:36px; padding:0 14px; }
  .icon-btn { min-width:40px; min-height:40px; }
  .lnk { display:inline-flex; align-items:center; min-height:36px; padding:0 4px; }
  .chip, .tag, .pill { min-height:30px; }
  .dq button { height:34px; padding:0 12px; }
  .seg button { height:32px; }
  /* 表格：保证横滚不被裁切 */
  .wrap { max-height:none; }
  .wrap > table.tbl, .wrap > .tbl { min-width:520px; }
  .scrollx { overscroll-behavior-x:contain; }
  /* 卡片间距呼吸感 */
  .cust { margin-bottom:var(--sp-3); }
  .ord { padding:var(--sp-3); }
  .kpi { padding:var(--sp-3) var(--sp-4); }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-2); }
  .panel { padding:var(--sp-3); }
  .empty { padding:36px 14px; }
  .btn, .qkbtn { padding:0 12px; }
}

/* ---------- 6. 轻量动效与降级 ---------- */
.page.on { animation:fadeUp var(--dur-2) var(--ease) both; }
.kpi { transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.panel, .cust { animation:fadeUp var(--dur-3) var(--ease) both; }
.kpi .v { animation:numIn .34s var(--ease) both; }
@keyframes numIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   v5.6.1 从配件库选择（订单弹窗）：搜索 + 类别/品牌筛选 + 多选 + 中英文全名
   ========================================================================== */
.pk-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }

/* ==========================================================================
   v5.7 录入界面：虚化玻璃半透明 + 完整交互动效
   ========================================================================== */
:root, html[data-theme="dark"] {
  --glass-bg:rgba(20,28,36,.66); --glass-bg-2:rgba(24,34,44,.58);
  --glass-line:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.14);
}
html[data-theme="light"] {
  --glass-bg:rgba(255,255,255,.62); --glass-bg-2:rgba(255,255,255,.48);
  --glass-line:rgba(255,255,255,.75); --glass-hi:rgba(255,255,255,.95);
}
/* 让玻璃有东西可虚化：页面背景加三团柔和色斑 */
.page { position:relative; }
.bodyer { position:relative; }
.bodyer::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(460px 340px at 10% 6%, var(--primary-a10), transparent 72%),
    radial-gradient(420px 320px at 92% 2%, var(--info-soft), transparent 72%),
    radial-gradient(560px 460px at 72% 96%, rgba(196,181,253,.10), transparent 72%);
}
/* 玻璃面板（录入区 / AI 区 / 选择弹窗） */
.glass, #p-parts .panel, .mdl {
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-line);
  box-shadow:0 8px 32px rgba(0,0,0,.16), inset 0 1px 0 var(--glass-hi);
}
.glass, #p-parts .panel, #p-import .panel { border-radius:var(--r-lg); }
/* 品牌自动识别提示需要定位父级 */
.parts-form, #pt-extra { position:relative; }
/* 弹窗内层保持可读，列表底色再用一层玻璃 */
#dd-list, #pk-list, .adv-imp { background:var(--glass-bg-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .glass, #p-parts .panel, #p-import .panel, .mdl { background:var(--card); }
}

/* ---------- 交互动效 ---------- */
/* 输入聚焦：光晕 + 轻微上浮 */
.f-inp { transition:border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, transform var(--dur-1) var(--ease), background var(--dur-1) ease; }
.f-inp:focus { transform:translateY(-1px); box-shadow:0 0 0 3px var(--primary-a35), 0 6px 18px rgba(0,0,0,.12); }
.f-inp:hover:not(:focus):not(:disabled) { border-color:var(--primary-a40); }
/* 品牌自动回填：绿色描边呼吸 + 浮动提示 */
.brand-flash { animation:brandFlash .9s var(--ease) 1; }
@keyframes brandFlash {
  0% { border-color:var(--green); box-shadow:0 0 0 0 rgba(74,222,128,.55); background:var(--ok-soft); }
  60% { border-color:var(--green); box-shadow:0 0 0 6px rgba(74,222,128,0); }
  100% { box-shadow:none; }
}
.brand-tip { position:absolute; right:8px; top:-18px; padding:2px 8px; border-radius:var(--r-pill);
  background:var(--ok-soft); color:var(--green); border:1px solid rgba(74,222,128,.35);
  font-size:10.5px; font-weight:600; opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); white-space:nowrap; }
.brand-tip.on { opacity:1; transform:none; }
/* 下拉选择：选项 hover 位移 + 选中高亮（select 原生受限，作用于自绘列表） */
.adv-imp-item, .pt-row { transition:background var(--dur-1) ease, transform var(--dur-1) var(--ease), border-color var(--dur-1) ease; }
.adv-imp-item:hover { transform:translateX(2px); }
.adv-imp-item.on { background:var(--primary-a10); box-shadow:inset 2px 0 0 var(--primary); }
.adv-imp-item input[type=checkbox] { transition:transform var(--dur-1) var(--ease); }
.adv-imp-item.on input[type=checkbox] { transform:scale(1.12); }
/* 列表增删动画 */
.row-in { animation:rowIn var(--dur-2) var(--ease) both; }
.row-out { animation:rowOut .18s ease both; }
@keyframes rowIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes rowOut { to { opacity:0; transform:translateX(14px); height:0; padding-top:0; padding-bottom:0; } }
/* 校验提示：抖动 + 红描边 */
.shake { animation:shake .4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90% { transform:translateX(-1px); } 20%,80% { transform:translateX(2px); } 30%,50%,70% { transform:translateX(-4px); } 40%,60% { transform:translateX(4px); } }
.ipt-bad { animation:shake .4s cubic-bezier(.36,.07,.19,.97) both; }
/* 提交成功反馈：绿色打勾闪现 */
.btn.ok-flash { background:var(--green); border-color:var(--green); color:#fff; animation:okPop .5s var(--ease) 1; }
.btn.ok-flash::before { content:'✓'; }
@keyframes okPop { 0% { transform:scale(.96); } 50% { transform:scale(1.04); } 100% { transform:scale(1); } }
/* 加载态已有 .is-loading；此处补充下拉按钮箭头旋转 */
.btn[aria-expanded="true"] .grp-arrow { transform:rotate(180deg); }
/* 弹窗内容入场 */
.mdl-b > * { animation:fadeUp var(--dur-2) var(--ease) both; }
/* 分组行展开箭头过渡 */
.grp-arrow { transition:transform var(--dur-1) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .brand-flash, .shake, .ipt-bad, .btn.ok-flash, .row-in, .row-out { animation:none !important; }
  .f-inp:focus { transform:none; }
}