:root{
  --bg:#070c1a; --card:#0f1930; --card2:#0a1226; --line:#1f2e4d; --text:#e8eefc; --muted:#8fa0c4;
  --blue:#4f8cff; --ok:#34d399; --warn:#fbbf24; --bad:#ff5c6c; --gold:#f7c948;
}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:Pretendard,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;font-size:14px;
  background:radial-gradient(1200px 500px at 15% -10%,rgba(79,140,255,.13),transparent 60%),radial-gradient(900px 400px at 100% 0,rgba(247,201,72,.07),transparent 55%),var(--bg);background-attachment:fixed}
.hidden{display:none!important}
.muted{color:var(--muted)}
::selection{background:rgba(79,140,255,.45)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#223357;border-radius:8px}

/* 카드: 은은한 그라데이션 + 위쪽 색 선 */
.card{--c:#4f8cff;position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,transparent),transparent 45%),var(--card);border:2px solid var(--c);border-radius:16px;padding:20px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 12%,transparent),0 8px 28px rgba(0,0,0,.3)}
.login{min-height:100vh;display:grid;place-items:center}
.login-card{width:380px;display:grid;gap:14px}
.logo{font-size:22px;font-weight:800;letter-spacing:-.3px}
label{display:grid;gap:6px;color:var(--muted);font-size:12px}
input{background:var(--card2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font-size:14px;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,140,255,.25)}
select{background:var(--card2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:8px 10px}
.err{color:var(--bad);min-height:18px;font-size:13px}

/* 버튼 */
.btn{border:1px solid #2a3d66;background:linear-gradient(180deg,#18284b,#13213f);color:var(--text);border-radius:10px;padding:9px 15px;font-size:14px;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s,border-color .12s}
.btn:hover:not(:disabled){border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 16px rgba(79,140,255,.25)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.gold{background:linear-gradient(180deg,#ffd95e,#f2b92c);border-color:#f7c948;color:#241b00;font-weight:800}
.btn.gold:hover:not(:disabled){box-shadow:0 8px 20px rgba(247,201,72,.35);border-color:#ffe28a}
.btn.ghost{background:transparent}
.btn.small{padding:5px 11px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:default}

/* 상단 바·탭 */
.topbar{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid var(--line);background:rgba(11,19,38,.85);backdrop-filter:blur(8px)}
.brand{font-weight:800;font-size:17px;letter-spacing:-.3px}
.tabs{display:flex;gap:8px;flex:1}
.tab{padding:7px 14px;border-radius:999px;border:1px solid #2a3d66;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .15s}
.tab:hover{color:var(--text);border-color:var(--blue)}
.tab.on{background:linear-gradient(135deg,#3f7bff,#2f5fe0);border-color:#5b8dff;color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(79,140,255,.4)}
.who{display:flex;align-items:center;gap:8px;color:var(--muted)}
.badge{background:#14213f;border:1px solid #2a3d66;border-radius:999px;padding:3px 11px;font-size:12px;color:var(--text)}
.menu{display:flex;gap:6px;padding:12px 22px 0;border-bottom:1px solid var(--line)}
.menu button{position:relative;background:transparent;border:0;border-radius:10px 10px 0 0;color:var(--muted);padding:11px 16px;font-size:14px;cursor:pointer;font-family:inherit;transition:color .15s,background .15s}
.menu button:hover{color:var(--text);background:rgba(79,140,255,.08)}
.menu button.on{color:#fff;font-weight:800;background:linear-gradient(180deg,rgba(247,201,72,.14),transparent)}
.menu button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),#ffb347);box-shadow:0 0 12px rgba(247,201,72,.6)}
.status{padding:8px 22px;min-height:34px;color:var(--muted);font-size:13px}
.status.error{color:var(--bad)}
.view{padding:6px 22px 32px;display:grid;gap:18px}

/* 섹션 제목 */
.panel h2{margin:0 0 14px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8dff,#2f6bff);font-size:13px;font-weight:800;box-shadow:0 0 0 4px rgba(79,140,255,.2)}

/* 숫자 카드 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{--c:#4f8cff;position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 18%,var(--card2)),var(--card2) 75%);border:2px solid var(--c);border-radius:14px;padding:14px 16px}
.kpis .kpi:nth-child(2){--c:#34d399}.kpis .kpi:nth-child(3){--c:#f7c948}.kpis .kpi:nth-child(4){--c:#c084fc}.kpis .kpi:nth-child(5){--c:#fb7185}.kpis .kpi:nth-child(6){--c:#4f8cff}.kpis .kpi:nth-child(7){--c:#34d399}
.kpi .l{color:var(--muted);font-size:12px}
.kpi .v{font-size:24px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.3px}

/* 표 */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:11px 12px;border-bottom:1px solid #1a2a48;text-align:left}
th{color:var(--muted);font-weight:600;font-size:12px;background:rgba(10,18,38,.6)}
th:first-child{border-radius:10px 0 0 10px}th:last-child{border-radius:0 10px 10px 0}
tbody tr{transition:background .12s}
tbody tr:hover td{background:rgba(79,140,255,.07)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
td.sec{background:linear-gradient(90deg,rgba(79,140,255,.18),transparent);color:#b9ccff;font-weight:700;font-size:13px;padding:9px 12px;border-radius:8px}
tr:hover td.sec{background:linear-gradient(90deg,rgba(79,140,255,.18),transparent)}
tr.hold td{background:#1d1020}
td small{display:block;font-size:11.5px}
td .acl,td .acp{width:120px;padding:6px 8px;font-size:13px}
.pos{color:var(--ok)}.neg{color:var(--bad)}.warnc{color:var(--warn)}
.panel.warn{--c:#f7c948}
.empty{color:var(--muted);padding:26px 0;text-align:center}

/* 칩 */
.chip{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;background:#14213f;border:1px solid #2a3d66;color:#c9d6f5}
.chip.ok{color:var(--ok);background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4)}
.chip.warn{color:var(--warn);background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4)}
.chip.bad{color:var(--bad);background:rgba(255,92,108,.12);border-color:rgba(255,92,108,.4)}
.chip.lg{font-size:14px;font-weight:800;padding:5px 12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip.blue{color:#9fc2ff;background:rgba(79,140,255,.16);border-color:rgba(79,140,255,.55)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.top{margin-top:14px}
h2.sub{font-size:14px;margin:16px 0 8px}
.scroll{overflow:auto}
.steps{margin:0 0 14px;padding-left:20px;color:var(--muted);line-height:1.9}.steps b{color:var(--text)}

/* 팝업 */
#modalBody{white-space:pre-line}
.modal{position:fixed;inset:0;background:rgba(3,7,18,.7);backdrop-filter:blur(4px);display:grid;place-items:center}
.modal-card{--c:#f7c948;width:440px;display:grid;gap:16px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.modal-card h3{margin:0;font-size:17px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px}

/* 송장 화면: 3단계 액션 카드 */
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 18px}
.act{--c:var(--blue);position:relative;overflow:hidden;display:grid;gap:4px;text-align:left;cursor:pointer;color:var(--text);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,#0a1226),#0a1226 70%);border:2px solid var(--c);
  border-radius:16px;padding:16px 18px 16px 68px;min-height:92px;transition:transform .15s,box-shadow .15s,border-color .15s;font-family:inherit}
.act:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 26px color-mix(in srgb,var(--c) 35%,transparent);border-color:var(--c)}
.act:active:not(:disabled){transform:translateY(0)}
.act:disabled{opacity:.42;cursor:default;filter:grayscale(.6)}
.act .n{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#06101f;font-weight:800;font-size:20px;box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 25%,transparent)}
.act .t{font-size:16px;font-weight:700;line-height:1.3}
.act .d{font-size:13px;color:var(--muted)}
.act.a1{--c:#4f8cff}.act.a2{--c:#f7c948}.act.a3{--c:#34d399}
@media(max-width:900px){.actions{grid-template-columns:1fr}}

.seg{display:inline-flex;gap:6px;margin-left:auto}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:6px 0 10px}
td small.muted,.kpi .v small{font-size:12px;font-weight:500}
.card.c-bad{--c:#ff5c6c}.card.c-warn{--c:#fbbf24}
.scroll.tall{max-height:420px;margin-top:10px}
.scroll.tall2{max-height:560px}
td.nm{max-width:340px}
.kpis.top{margin-top:14px}
th small{display:block;font-weight:500}
.akform{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}.akform input{width:150px;padding:6px 8px;font-size:13px}

/* ---- 오늘 현황 대시보드 (한눈에 보기) ---- */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--line);border-radius:14px;background:rgba(15,25,48,.7)}
.strip .si{font-size:13px;color:var(--muted)}
.strip .si.pos{color:var(--ok);font-weight:700}
.strip .sp{flex:1}
.datenav{display:flex;align-items:center;gap:10px;font-size:15px}
.btn.gold-o{border-color:#f7c948;color:var(--gold)}
.dash{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.side{position:sticky;top:12px;display:grid;gap:12px}
.main{display:grid;gap:16px;min-width:0}
.c-side{display:grid;gap:12px}
.stat{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.stat .l{color:var(--muted);font-size:12px;margin-bottom:6px}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.5px}
.stat .s{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.5}
.stat.gold{border-color:#7a6320}.stat.gold .v{color:var(--gold)}
.stat.bad .v{color:var(--bad)}
.stat.blue{background:linear-gradient(160deg,#3a73f0,#2a52c9);border-color:#5b8dff}
.stat.blue .l,.stat.blue .s{color:#dbe6ff}.stat.blue .v{color:#fff;font-size:30px}
.okc{color:var(--ok)}
.bar{position:relative;display:inline-block;width:70px;height:8px;border-radius:6px;background:#1c2a4a;vertical-align:middle;overflow:visible}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--muted)}
.bar i.ok{background:var(--ok)}.bar i.warn{background:var(--warn)}
.bar.big{display:block;width:100%;height:10px;margin-top:10px}
.bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;opacity:.8}
.rowneg td{background:rgba(255,92,108,.07)}
@media (max-width:1100px){.dash{grid-template-columns:1fr}.side{position:static}}

.btn.big{padding:13px 18px;font-size:15px;font-weight:800;border-radius:12px;width:100%;text-align:left}
.btn.red{background:linear-gradient(180deg,#f87171,#dc2626);border-color:#f87171;color:#fff;font-weight:800}
.btn.green{background:linear-gradient(180deg,#34d399,#12a874);border-color:#34d399;color:#04241a;font-weight:800}
.btn.blue{background:linear-gradient(180deg,#5b9bff,#2f6bff);border-color:#5b9bff;color:#fff;font-weight:800}
.btn.purple{background:linear-gradient(180deg,#c68cff,#8b4fe0);border-color:#c68cff;color:#fff;font-weight:800}
.btn.green:hover:not(:disabled){box-shadow:0 8px 20px rgba(52,211,153,.4)}.btn.blue:hover:not(:disabled){box-shadow:0 8px 20px rgba(79,140,255,.45)}.btn.purple:hover:not(:disabled){box-shadow:0 8px 20px rgba(192,132,252,.4)}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.act{border-radius:14px;padding:12px;background:var(--card2);border:1px solid #2a3d66;display:flex;flex-direction:column;gap:8px}
.act .muted{font-size:12px;line-height:1.5}

.um{margin-top:12px;gap:10px}
.um .umname{font-size:14px;line-height:1.5}
.cand{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(180px,1.4fr) minmax(220px,1.6fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid #2a3d66;background:#101c37}
.cand.best{border-color:#34d399;background:rgba(52,211,153,.08)}
.cand .r{text-align:left}
[hidden]{display:none!important}
/* 순익·마진율·판정 배지: 같은 모양 + 은은한 조명(글로우) */
.chip.glow{position:relative;background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 55%,rgba(255,255,255,0) 100%);box-shadow:0 0 14px -3px var(--g,rgba(79,140,255,.7)),inset 0 1px 0 rgba(255,255,255,.22)}
.chip.glow.blue{--g:rgba(79,140,255,.85);text-shadow:0 0 8px rgba(79,140,255,.55)}
.chip.glow.ok{--g:rgba(52,211,153,.8);text-shadow:0 0 8px rgba(52,211,153,.5)}
.chip.glow.warn{--g:rgba(251,191,36,.8);text-shadow:0 0 8px rgba(251,191,36,.5)}
.chip.glow.bad{--g:rgba(255,92,108,.8);text-shadow:0 0 8px rgba(255,92,108,.5)}
/* 발주 목록: 상품명·금액은 줄바꿈/잘림 없이 한 줄로 */
.ordtbl td.pn,.ordtbl td.r,.ordtbl th.r{white-space:nowrap}
.ordtbl td.pn{min-width:220px;font-weight:400}
.ordtbl td.pn>b{font-weight:700}
.ordtbl td.pn small{display:block;white-space:normal;max-width:560px}
.ordtbl td.pn .to-old{margin-top:3px;padding:2px 8px;border-left:3px solid #4f8cff;background:rgba(79,140,255,.08);border-radius:0 6px 6px 0;display:inline-block}
.ordtbl td.pn .to b{color:#9cc2ff}


/* 발주 목록: 품종별 큰 테두리 + 주문/발주 구분 */
.ogrp{--c:79,140,255;border:2px solid rgba(var(--c),.7);border-radius:16px;margin:18px 0;background:rgba(var(--c),.04);box-shadow:0 0 22px -8px rgba(var(--c),.7);overflow:hidden}
.ogrp.g0{--c:79,140,255}.ogrp.g1{--c:52,211,153}.ogrp.g2{--c:251,146,60}.ogrp.g3{--c:192,132,252}.ogrp.g4{--c:244,114,182}.ogrp.g5{--c:45,212,191}.ogrp.g6{--c:250,204,21}.ogrp.g7{--c:248,113,113}
.ogh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;background:linear-gradient(90deg,rgba(var(--c),.28),rgba(var(--c),.06));border-bottom:2px solid rgba(var(--c),.55)}
.ogh .gt{font-size:20px;font-weight:900;color:rgb(var(--c));letter-spacing:.5px;text-shadow:0 0 10px rgba(var(--c),.45)}
.ogh .gs{margin-left:auto;color:#c9d6f5;font-size:13px}.ogh .gs b{color:#fff}
.ogrp .ordtbl{margin:0;width:100%}
.ogrp .ordtbl thead th{background:rgba(var(--c),.10);border-bottom:1px solid rgba(var(--c),.4)}
.ogrp .orow td{border-bottom:2px solid rgba(255,255,255,.07);padding-top:12px;padding-bottom:12px;vertical-align:middle}
.ogrp .orow:nth-child(even) td{background:rgba(255,255,255,.025)}
.ogrp .orow:hover td{background:rgba(var(--c),.10)}
.ogrp .orow.hold td{background:rgba(255,92,108,.07)}
.ogrp .orow td.sid{font-weight:800;color:rgb(var(--c))}
.ordtbl td.pn .oa,.ordtbl td.pn .ob{display:block;padding:6px 10px;border-radius:8px}
.ordtbl td.pn .oa{background:rgba(52,211,153,.10);border-left:4px solid #34d399}
.ordtbl td.pn .ob{margin-top:5px;background:rgba(79,140,255,.13);border-left:4px solid #4f8cff}
.ordtbl td.pn .oa>b{color:#b9f5d8;font-size:14px}
.ordtbl td.pn .oa .muted{color:#86c9ad}
.ordtbl td.pn .tag.green{background:#12805c;color:#fff}
.ordtbl td.pn .ob .vn{color:#9cc2ff;margin:0 8px 0 6px}.ordtbl td.pn .ob .bn{color:#c9d6f5}
.ordtbl td.pn .tag{display:inline-block;font-size:11px;font-weight:800;padding:1px 7px;border-radius:5px;margin-right:6px;background:#2a3350;color:#c9d6f5}
.ordtbl td.pn .tag.blue{background:#2f5fd0;color:#fff}
.ordtbl td.pn .nt{margin-top:4px;padding-left:4px}
.ordtbl td.pn .muted{color:#8f9bb8}
td.pn small.muted{max-width:360px}

/* 같은 수령인·같은 주소 = 합배송 묶음 테두리 */
.ogrp .orow.cu td{background:rgba(251,191,36,.08)}
.ogrp .orow.cu td:first-child{border-left:4px solid #fbbf24}
.ogrp .orow.cu td:last-child{border-right:4px solid #fbbf24}
.ogrp .orow.cu-first td{border-top:4px solid #fbbf24}
.ogrp .orow.cu-last td{border-bottom:4px solid #fbbf24}
.ogrp .orow.cu-mid td,.ogrp .orow.cu-first td{border-bottom-color:rgba(251,191,36,.35)}
.ordtbl td.pn .cutag{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:999px;background:rgba(251,191,36,.18);border:1px solid rgba(251,191,36,.6);color:#fcd34d;font-size:12px;font-weight:800}

/* 발주 목록: 주문 옵션 문장은 둘째 줄에서 이어지게, 항목별 칸 구분 */
.ordtbl td.pn .oa small.muted{display:block;max-width:none;white-space:normal;margin-top:2px}
.ogrp .ordtbl td.pn{min-width:420px;width:48%}
.ogrp td.m,.ogrp th.m{text-align:center;white-space:nowrap;border-left:1px solid rgba(255,255,255,.10);padding-left:12px;padding-right:12px}
.ogrp th.m{font-weight:800;letter-spacing:.3px;border-bottom:3px solid transparent}
.ogrp th.hq{color:#c9d6f5;border-bottom-color:#94a3b8}.ogrp th.hr{color:#e2e8f0;border-bottom-color:#cbd5e1}
.ogrp th.hc{color:#fdba74;border-bottom-color:#fb923c}.ogrp th.hs{color:#93c5fd;border-bottom-color:#4f8cff}
.ogrp th.hp{color:#86efac;border-bottom-color:#34d399}.ogrp th.hm2{color:#fde68a;border-bottom-color:#fbbf24}.ogrp th.hj{color:#fca5a5;border-bottom-color:#f87171}
.ogrp .qty{display:inline-block;min-width:30px;padding:3px 8px;border-radius:8px;background:rgba(148,163,184,.18);border:1px solid rgba(148,163,184,.45);font-weight:900;font-size:15px;color:#fff}
.ogrp .rcv{font-weight:800;color:#f1f5f9}
.ogrp .amt{display:inline-block;min-width:78px;padding:4px 10px;border-radius:8px;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.ogrp .amt.cost{background:rgba(251,146,60,.14);border:1px solid rgba(251,146,60,.5);color:#fed7aa}
.ogrp .amt.rev{background:rgba(79,140,255,.14);border:1px solid rgba(79,140,255,.5);color:#bfdbfe}
.ogrp .amt.neg{background:rgba(255,92,108,.14);border:1px solid rgba(255,92,108,.5);color:#fecaca}
.ogrp td.jd small{display:block;white-space:normal;max-width:240px;margin:4px auto 0;text-align:left}

.ogrp td.m.jd{text-align:left}
.ogrp td.jd .chip{display:inline-block}
.ogrp td.jd small.why{display:block;white-space:normal;max-width:260px;margin:10px 0 0 2px;text-align:left;color:#cbd5e1;font-size:12.5px;line-height:1.5}
.ogrp td.jd small.why b{color:#fca5a5;font-weight:800}

.ordtbl td.pn .boxchip{background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.6);color:#fde68a;font-weight:800;margin-left:8px}
.ordtbl td.pn .nt2{margin-top:6px;padding:5px 10px;border-radius:8px;background:rgba(251,191,36,.08);border:1px dashed rgba(251,191,36,.45);color:#fde68a;font-size:12.5px;white-space:normal;max-width:620px}
.ordtbl td.pn .nt2 b{color:#fbbf24;margin-right:6px}

.ordtbl td.pn .ngchip{margin-left:8px;font-weight:800;white-space:nowrap}
.ordtbl td.pn .ngchip.warn{background:rgba(251,191,36,.2);border:1px solid #fbbf24;color:#fde68a}
.ordtbl td.pn .ngchip.ok{background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.6);color:#a7f3d0}
.ordtbl td.pn .ngchip.muted{opacity:.6}

/* ---- 상단 메뉴: 아이콘 + 메뉴별 색, 선택하면 카드처럼 색 테두리·광택 ---- */
.menu{gap:8px;padding:12px 22px;flex-wrap:wrap}
.menu button{--c:#4f8cff;display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--c) 32%,#1f2e4d);
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 12%,transparent),transparent 75%),var(--card2);color:#cdd8f2;font-weight:600;font-size:14px}
.menu button .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,#0a1226);transition:all .15s}
.menu button:hover{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 22%,transparent),transparent 75%),var(--card2);border-color:var(--c);transform:translateY(-1px)}
.menu button.on{color:#fff;font-weight:800;border:2px solid var(--c);padding:8.5px 14.5px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 6%,transparent) 80%),var(--card2);box-shadow:0 6px 20px color-mix(in srgb,var(--c) 32%,transparent)}
.menu button.on .ic{background:var(--c);color:#06101f}
.menu button.on::after{display:none}
.menu button[data-k=today]{--c:#4f8cff}.menu button[data-k=ads]{--c:#c084fc}.menu button[data-k=price]{--c:#f7c948}.menu button[data-k=ship]{--c:#34d399}
.menu button[data-k=unship]{--c:#fb7185}.menu button[data-k=deposit]{--c:#22d3ee}.menu button[data-k=issues]{--c:#fb923c}.menu button[data-k=orders]{--c:#60a5fa}
.menu button[data-k=suppliers]{--c:#2dd4bf}.menu button[data-k=staff]{--c:#f472b6}

/* ---- 카드 색 구분: 항목마다 다른 테두리색, 번호 배지도 같은 색 ---- */
.card.c-ok{--c:#34d399}.card.c-purple{--c:#c084fc}.card.c-gold{--c:#f7c948}.card.c-cyan{--c:#22d3ee}.card.c-teal{--c:#2dd4bf}.card.c-orange{--c:#fb923c}.card.c-slate{--c:#94a3b8}
.card .num{background:var(--c);color:#06101f;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 24%,transparent)}
.card.panel + .card.panel{margin-top:18px}#prBox{margin-top:18px}
#pick.btn.big{width:auto;padding:14px 28px;font-size:16px;text-align:center}

/* ---- 세련된 카드 마감: 가는 테두리 + 위쪽 색 라인 + 은은한 유리 질감 ---- */
.card{border:1px solid color-mix(in srgb,var(--c) 42%,#1f2e4d);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,transparent),transparent 38%),linear-gradient(180deg,#111d38,#0d172d);
  box-shadow:0 10px 30px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 15%,transparent) 70%,transparent)}
.card .num{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent),0 4px 12px color-mix(in srgb,var(--c) 35%,transparent)}
.kpi{border:1px solid color-mix(in srgb,var(--c) 40%,#1f2e4d);border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#0a1226),#0a1226 70%);box-shadow:inset 3px 0 0 var(--c),0 6px 18px rgba(0,0,0,.25)}
.act{border:1px solid color-mix(in srgb,var(--c) 45%,#1f2e4d);border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,#0a1226),#0a1226 72%);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.act .n{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.btn{border-radius:10px;border:1px solid #2f4574;background:linear-gradient(180deg,#1b2d52,#142346);box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
.btn.gold{background:linear-gradient(180deg,#f8d56a,#e8ad22);border-color:#f2c54a;color:#2a1f00;box-shadow:0 6px 18px rgba(247,201,72,.28),inset 0 1px 0 rgba(255,255,255,.45)}
#pick.btn.big{border-radius:12px;letter-spacing:-.2px;box-shadow:0 8px 24px rgba(247,201,72,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.chip{border-radius:999px}
.card{border-color:color-mix(in srgb,var(--c) 58%,#1f2e4d)}
.ogrp{border:1px solid rgba(var(--c),.5);border-radius:14px;box-shadow:0 8px 24px -10px rgba(var(--c),.55)}
.ogh{border-bottom:1px solid rgba(var(--c),.35)}

/* ---- 테무 주문 엑셀 올리기 버튼 ---- */
.upbtn{display:inline-flex;align-items:center;gap:14px;padding:12px 22px 12px 14px;border-radius:14px;cursor:pointer;font-family:inherit;color:var(--text);text-align:left;
  border:1px solid rgba(247,201,72,.5);background:linear-gradient(135deg,rgba(247,201,72,.2),rgba(247,201,72,.04) 65%),#0c1630;
  box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.upbtn .ui{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:#2a1f00;background:linear-gradient(145deg,#ffe07d,#e9ae1f);box-shadow:0 6px 16px rgba(247,201,72,.35),inset 0 1px 0 rgba(255,255,255,.55)}
.upbtn .ut{display:grid;gap:2px}
.upbtn .ut b{font-size:16px;font-weight:800;letter-spacing:-.2px;color:#fff}
.upbtn .ut small{font-size:12px;color:#c9b977}
.upbtn .ua{margin-left:6px;font-size:20px;color:var(--gold);transition:transform .15s}
.upbtn:hover{transform:translateY(-2px);border-color:#f7c948;box-shadow:0 12px 30px rgba(247,201,72,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.upbtn:hover .ua{transform:translateX(4px)}
.upbtn:active{transform:translateY(0)}

.chipbtn{cursor:pointer;font-family:inherit}.chipbtn:hover{filter:brightness(1.25)}
.orddetail{margin-top:12px}
.plv{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(10,18,38,.55)}
.plh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.plb{font-size:13px;color:var(--muted);padding:3px 0}
.nw{white-space:nowrap}

.xbs{display:flex;gap:10px;justify-content:center;align-items:center}
.xb{--c:#4f8cff;display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 7px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--c) 40%,#1f2e4d);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 75%),var(--card2);color:#dbe5ff;font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap;transition:all .15s}
.xb .ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--c);background:color-mix(in srgb,var(--c) 18%,#0a1226);transition:all .15s}
.xb .ic svg{width:16px;height:16px}
.xb:hover{color:#fff;border-color:var(--c);transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--c) 30%,transparent)}
.xb.dl{--c:#f7c948}.xb.go{--c:#4f8cff}.xb.no{--c:#fb5a6e}.xb.ok{--c:#34d399}
.xb.no,.xb.ok{color:#fff;border-width:2px;padding:5.5px 12.5px 5.5px 6.5px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 6%,transparent) 80%),var(--card2);box-shadow:0 4px 16px color-mix(in srgb,var(--c) 30%,transparent)}
.xb.no .ic,.xb.ok .ic{background:var(--c);color:#06101f}
.btn.cta{position:relative;padding:12px 24px;font-size:16px;border-radius:14px;animation:ctaGlow 2s ease-in-out infinite}
.btn.cta:hover:not(:disabled){animation:none;box-shadow:0 0 0 3px rgba(247,201,72,.35),0 10px 34px rgba(247,201,72,.65);transform:translateY(-2px)}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 0 rgba(247,201,72,.45),0 6px 20px rgba(247,201,72,.35)}50%{box-shadow:0 0 0 7px rgba(247,201,72,0),0 8px 34px rgba(247,201,72,.75)}}

.xb{min-width:196px;justify-content:flex-start;padding:8px 16px 8px 9px;flex-direction:row}
.xb.no,.xb.ok{padding:7.5px 15.5px 7.5px 8.5px}
.xb .ic{width:30px;height:30px}.xb .ic svg{width:18px;height:18px}
.plt{border-collapse:separate;border-spacing:0 10px}
.plt thead th{text-align:center;background:transparent;border:0;letter-spacing:.5px;font-size:12px;color:var(--muted);padding:2px 12px}
.plt td{border:0;vertical-align:middle;text-align:center;padding:14px 14px;background:linear-gradient(180deg,#14213f,#101a33)}
.plt tbody tr:hover td{background:linear-gradient(180deg,#182849,#122040)}
.plt td:first-child{border-radius:14px 0 0 14px;border-left:1px solid #22345c;text-align:left}
.plt td:last-child{border-radius:0 14px 14px 0;border-right:1px solid #22345c}
.plt td{border-top:1px solid #22345c;border-bottom:1px solid #22345c}
.plt .vname{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:15px}
.plt .vname::before{content:"";width:6px;height:28px;border-radius:4px;background:linear-gradient(180deg,#fb923c,#f7c948);box-shadow:0 0 10px rgba(251,146,60,.5)}
.plt .cnt{display:inline-block;min-width:54px;padding:5px 12px;border-radius:999px;background:rgba(79,140,255,.16);border:1px solid rgba(79,140,255,.5);color:#bcd2ff;font-weight:800}
.plt .amt{display:inline-block;padding:6px 14px;border-radius:10px;background:rgba(247,201,72,.1);border:1px solid rgba(247,201,72,.4);color:#ffd95e;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.plt th.r,.plt td.r{text-align:center}

.fold>summary{cursor:pointer;list-style:none;padding:2px 0;font-size:15px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"▸ ";color:var(--gold)}
.fold[open]>summary::before{content:"▾ "}
.fold[open]>summary{margin-bottom:12px}
/* 운송장 탭의 번호 버튼: 뒤에 나온 .act 공통 규칙(padding·column)이 덮어써서 숫자가 글자를 가렸다 */
.actions .act.a1,.actions .act.a2,.actions .act.a3{display:grid;flex-direction:initial;gap:5px;align-content:center;padding:18px 20px 18px 78px;min-height:96px;border:2px solid var(--c);border-radius:16px}
.actions .act.a1 .n,.actions .act.a2 .n,.actions .act.a3 .n{left:18px}

/* 입금 요망(빨강, 깜빡이는 조명) → 입금 완료(초록) */
.xb.pay{--c:#ff3b4f}
.xb.pay.no{animation:payGlow 1.3s ease-in-out infinite;border-color:#ff5568}
.xb.pay.ok{--c:#34d399;animation:none}
@keyframes payGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,59,79,.55),0 4px 16px rgba(255,59,79,.4)}50%{box-shadow:0 0 0 8px rgba(255,59,79,0),0 6px 30px rgba(255,59,79,.95)}}
.menu button .dbadge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff3b4f;color:#fff;font-size:12px;font-weight:800;display:inline-grid;place-items:center;box-shadow:0 0 10px rgba(255,59,79,.8)}

.menu button .dbadge{min-width:0;height:auto;padding:3px 10px;border-radius:999px;border:1.5px solid #ff5568;background:linear-gradient(160deg,rgba(255,59,79,.45),rgba(255,59,79,.12) 80%),#16101e;white-space:nowrap;animation:payGlow 1.3s ease-in-out infinite}


.xbs2{display:inline-flex;gap:10px}
.xb.go2{--c:#34d399;color:#fff;border-width:2px;padding:7.5px 15.5px 7.5px 8.5px;margin-left:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 30%,transparent),color-mix(in srgb,var(--c) 5%,transparent) 80%),var(--card2)}
.xb.go2 .ic{background:var(--c);color:#06101f}

.dn{font-size:12px;margin-bottom:6px;white-space:normal;max-width:360px}

.plt .dchip{display:inline-block;padding:5px 12px;border-radius:10px;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.35);color:#cbd5e1;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* 입금 대기 표: 밝고 또렷한 색 + 테두리 */
.dep .vname{font-size:15px;letter-spacing:.2px}
.dep .vname::before{background:linear-gradient(180deg,#60a5fa,#38bdf8);box-shadow:0 0 10px rgba(96,165,250,.55)}
.dep .dchip{background:rgba(226,232,240,.07);border:1.5px solid rgba(203,213,225,.55);color:#e2e8f0;font-weight:700;font-size:13.5px;padding:5px 13px;border-radius:10px;font-variant-numeric:tabular-nums}
.dep .cnt{background:rgba(167,139,250,.16);border:1.5px solid #a78bfa;color:#e9e3ff;font-weight:800;min-width:58px;padding:5px 13px}
.dep .amt{background:rgba(56,189,248,.14);border:1.5px solid #38bdf8;color:#e0f4ff;font-weight:800;font-size:15.5px;padding:6px 15px;border-radius:10px;letter-spacing:.2px}
.cutoff{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 11px;border-radius:12px;border:1.5px solid #5eead4;background:rgba(94,234,212,.1);color:#5eead4}
.cutoff .ct{font-size:16.5px;font-weight:800;color:#f0fdfa;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.cutoff .cl{font-size:12.5px;font-weight:700;color:#99f6e4}

/* 미출고 상태 선택창: 상태별 색, 문의필요는 빨간 조명 */
select.stsel{min-width:132px;padding:9px 34px 9px 14px;border-radius:12px;font-weight:800;font-size:14px;font-family:inherit;color:#fff;cursor:pointer;border:2px solid var(--sc);background:linear-gradient(160deg,color-mix(in srgb,var(--sc) 34%,transparent),color-mix(in srgb,var(--sc) 6%,transparent) 80%),var(--card2)}
select.stsel option{background:#0f1a33;color:#e8eefc;font-weight:600}
select.st-문의필요{--sc:#ff4a5e;animation:payGlow 1.3s ease-in-out infinite}
select.st-문의완료{--sc:#38bdf8}
select.st-답변받음{--sc:#a78bfa}
select.st-해결{--sc:#34d399}

/* 주문 탭: 날짜 바로가기 */
.dpills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.dp{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:12px;border:1.5px solid #2f4474;background:var(--card2);color:#cfe0ff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.dp:hover{border-color:#60a5fa;color:#fff;transform:translateY(-1px)}
.dp .dd{font-size:15px;font-weight:800;color:#fff}.dp .dw{font-size:12px;color:var(--muted)}.dp .dc{font-size:12px;color:#93c5fd}
.dp.on{border-color:#60a5fa;background:linear-gradient(160deg,rgba(96,165,250,.35),rgba(96,165,250,.08)),var(--card2);box-shadow:0 4px 16px rgba(96,165,250,.3)}

/* 테무 복수 구매 수량 표시 (빨강, 반투명 배경 + 은은한 빛) */
.tbuy{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:7px;font-weight:800;white-space:nowrap;color:#ff8a8a;background:rgba(255,64,64,.22);border:1px solid rgba(255,110,110,.7);text-shadow:0 0 8px rgba(255,90,90,.6);box-shadow:0 0 10px rgba(255,64,64,.3)}

/* 송장 확인 필요(API 없는 거래처에 발주했는데 송장이 아직 없음): 빨간 깜빡임 */
.menu button .sbadge{margin-left:6px;padding:3px 10px;border-radius:999px;border:1.5px solid #ff5568;background:linear-gradient(160deg,rgba(255,59,79,.45),rgba(255,59,79,.12) 80%),#16101e;color:#fff;font-size:12px;font-weight:800;white-space:nowrap;animation:payGlow 1.3s ease-in-out infinite}
.sigwarn{margin:10px 0;padding:12px 14px;border-radius:12px;border:1.5px solid #ff5568;background:rgba(255,59,79,.12);color:#ffd7dc;animation:payGlow 1.3s ease-in-out infinite}
.sigwarn b{color:#ff8593;font-size:15px}
tr.sigrow td{background:rgba(255,59,79,.10)}

/* 새 버전 적용 버튼: 밝은 그린 반투명 (깜빡임 없음) */
#restartApp{background:rgba(74,222,128,.22);border:1px solid rgba(110,240,160,.75);color:#d9ffe8;font-weight:700;box-shadow:0 0 0 1px rgba(74,222,128,.15),0 2px 10px rgba(74,222,128,.25)}
#restartApp:hover{background:rgba(74,222,128,.38);border-color:rgba(150,255,190,.95);color:#fff;transform:none}

/* 입금 안내: 거래처 계좌정보 + 복사 */
.acct{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px}
.acct .at{font-weight:700;color:#bff5d3;letter-spacing:.2px}
.acct.none{color:#8a97b5;font-weight:400;font-size:12px}
.acct .cpb{border:1px solid rgba(110,240,160,.6);background:rgba(74,222,128,.16);color:#d9ffe8;border-radius:7px;padding:2px 9px;font-size:12px;cursor:pointer;font-family:inherit}
.acct .cpb:hover{background:rgba(74,222,128,.32)}
/* 최저가 검색 (11/11) */
.sform{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 12px;margin:12px 0}
.sform .wide{grid-column:1/-1}
.sform .chk{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;grid-column:span 2}
.sform .chk input{width:16px;height:16px;padding:0}
.pchip{display:inline-flex;align-items:center;gap:2px;margin:2px 4px 2px 0}
.pdel{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px}
.pdel:hover{color:var(--bad)}
.okc{color:var(--ok)}
tr.lossrow td{background:rgba(255,92,108,.08)}
.scroll.tall3{max-height:62vh}
.menu button[data-k=search]{--c:#a3e635}

/* ===== 최저가 검색 · 글래스 4D (11/11) ===== */
.ps-wrap{--g1:#5eead4;--g2:#818cf8;--g3:#f7c948;--glass:rgba(255,255,255,.055);--glass2:rgba(255,255,255,.085);--edge:rgba(255,255,255,.14);
  display:grid;gap:18px;perspective:1400px}
.ps-wrap input,.ps-wrap select{box-sizing:border-box;width:100%;min-width:0;background:rgba(6,12,28,.55);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--text);
  padding:11px 13px;font-size:14px;font-family:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04);transition:border-color .2s,box-shadow .2s,background .2s}
.ps-wrap input::placeholder{color:rgba(160,175,210,.45)}
.ps-wrap input:focus,.ps-wrap select:focus{outline:none;background:rgba(10,20,44,.75);border-color:rgba(94,234,212,.7);box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 4px rgba(94,234,212,.14),0 0 24px rgba(94,234,212,.18)}
.ps-wrap label{display:grid;gap:7px;color:#a9b6d6;font-size:12px;font-weight:600;letter-spacing:.02em}

/* hero */
.ps-hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 28px 20px;
  background:linear-gradient(135deg,rgba(94,234,212,.13),rgba(129,140,248,.10) 45%,rgba(247,201,72,.07)),rgba(12,20,42,.55);
  border:1px solid var(--edge);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 30px 60px -20px rgba(0,0,0,.7),0 12px 24px -12px rgba(94,234,212,.25);
  transform:rotateX(2deg);transform-origin:center top}
.ps-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(94,234,212,.8),rgba(129,140,248,.35) 40%,transparent 60%,rgba(247,201,72,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ps-hero::after{content:"";position:absolute;left:-30%;top:-120%;width:60%;height:300%;transform:rotate(25deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:psSheen 9s ease-in-out infinite}
@keyframes psSheen{0%,60%{left:-40%}100%{left:130%}}
.ps-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none;animation:psFloat 14s ease-in-out infinite}
.ps-orb.o1{width:220px;height:220px;background:#14b8a6;top:-90px;right:8%}
.ps-orb.o2{width:180px;height:180px;background:#6366f1;bottom:-110px;left:30%;animation-delay:-5s}
.ps-orb.o3{width:120px;height:120px;background:#f59e0b;top:10px;left:-40px;opacity:.3;animation-delay:-9s}
@keyframes psFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,12px)}}
.ps-head,.ps-bar,.ps-chips{position:relative;z-index:1}
.ps-title{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.ps-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#06231f;
  background:linear-gradient(145deg,#99f6e4,#2dd4bf 55%,#0f766e);box-shadow:0 8px 20px -6px rgba(45,212,191,.7),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.25)}
.ps-logo svg{width:24px;height:24px}
.ps-title h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#c7d2fe 60%,#99f6e4);-webkit-background-clip:text;background-clip:text;color:transparent}
.ps-title p{margin:3px 0 0;color:#93a3c8;font-size:12.5px}
.ps-bar{display:flex;align-items:center;gap:10px;padding:7px 7px 7px 16px;border-radius:18px;background:rgba(4,9,22,.55);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.07)}
.ps-bar:focus-within{border-color:rgba(94,234,212,.6);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 4px rgba(94,234,212,.12),0 0 40px rgba(94,234,212,.15)}
.ps-bar-ic{color:#5eead4;display:grid}.ps-bar-ic svg{width:20px;height:20px}
.ps-wrap .ps-bar input{flex:1;background:transparent;border:0;box-shadow:none;font-size:16px;padding:10px 4px}
.ps-wrap .ps-bar input:focus{box-shadow:none;background:transparent}
.ps-hint{color:#6f80a8;font-size:11.5px;white-space:nowrap}.ps-hint b{color:#a5b4fc;font-weight:700}
.ps-go{border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:15px;color:#1a1204;padding:12px 30px;border-radius:13px;
  background:linear-gradient(180deg,#fde68a,#f7c948 45%,#d99a0b);box-shadow:0 10px 22px -8px rgba(247,201,72,.75),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(120,70,0,.35);
  transition:transform .15s,box-shadow .15s}
.ps-go:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(247,201,72,.9),inset 0 1px 0 rgba(255,255,255,.75),inset 0 -3px 0 rgba(120,70,0,.35)}
.ps-go:active{transform:translateY(1px)}.ps-go:disabled{opacity:.6}
.ps-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.ps-chips-l{color:#8796bb;font-size:12px;margin-right:4px}
.ps-wrap .pchip{display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);box-shadow:0 4px 12px -4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .15s,border-color .15s}
.ps-wrap .pchip:hover{transform:translateY(-2px);border-color:rgba(94,234,212,.6)}
.ps-wrap .pchip button[data-pp]{background:none;border:0;color:#e0f2fe;font-family:inherit;font-size:12.5px;font-weight:600;padding:6px 4px 6px 13px;cursor:pointer}
.ps-wrap .pdel{padding:0 10px 0 4px}

/* filter cards */
.ps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.ps-card{--a:#5eead4;position:relative;border-radius:20px;padding:16px 18px 18px;background:linear-gradient(160deg,var(--glass2),var(--glass) 60%),rgba(10,18,38,.45);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35),0 18px 36px -18px rgba(0,0,0,.8),0 2px 0 -1px color-mix(in srgb,var(--a) 50%,transparent);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;transform-style:preserve-3d}
.ps-card:hover{transform:translateY(-4px) rotateX(3deg);border-color:color-mix(in srgb,var(--a) 45%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 44px -18px rgba(0,0,0,.85),0 0 30px -8px color-mix(in srgb,var(--a) 45%,transparent)}
.ps-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--a),transparent);opacity:.8}
.ps-card.t-weight{--a:#5eead4}.ps-card.t-margin{--a:#f7c948}.ps-card.t-sup{--a:#818cf8}.ps-card.t-word{--a:#f472b6}
.ps-card-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:#eef2ff;margin-bottom:13px;letter-spacing:-.01em}
.ps-card-h i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:13px;color:#0b1020;
  background:linear-gradient(145deg,color-mix(in srgb,var(--a) 60%,#fff),var(--a));box-shadow:0 4px 10px -3px var(--a),inset 0 1px 0 rgba(255,255,255,.6)}
.ps-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ps-row3{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:10px}
.ps-wrap label.hl{color:#5eead4}
.ps-wrap label.hl input{border-color:rgba(94,234,212,.35)}

/* footer */
.ps-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.ps-opts{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.ps-wrap .ps-sel{display:flex;align-items:center;gap:10px}.ps-wrap .ps-sel select{width:auto;padding:8px 12px}
.ps-wrap .ps-sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:#dbe4ff;font-size:13px}
.ps-sw input{display:none}
.ps-sw .trk{position:relative;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 2px 4px rgba(0,0,0,.5);transition:background .2s}
.ps-sw .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#fff,#cbd5e1);box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.ps-sw input:checked + .trk{background:linear-gradient(90deg,#14b8a6,#5eead4);border-color:rgba(94,234,212,.7);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 0 14px rgba(94,234,212,.45)}
.ps-sw input:checked + .trk .knob{transform:translateX(18px)}
.ps-save{display:flex;align-items:center;gap:8px}.ps-save input{width:230px}
.ps-btn{cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#e0e7ff;padding:10px 16px;border-radius:12px;white-space:nowrap;
  background:linear-gradient(180deg,rgba(129,140,248,.35),rgba(99,102,241,.2));border:1px solid rgba(165,180,252,.35);
  box-shadow:0 6px 14px -6px rgba(99,102,241,.6),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .15s,border-color .15s}
.ps-btn:hover{transform:translateY(-1px);border-color:rgba(165,180,252,.8)}
.ps-btn.ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);box-shadow:none;color:#b8c4e4}
.ps-info{padding:2px 6px;color:#b9c6e6;font-size:13.5px}.ps-info b{color:#fde68a;font-size:15px}

/* results */
.ps-out{display:grid;gap:18px;margin-top:18px}
.ps-out .card{border-radius:20px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 55%),rgba(10,18,38,.5);
  backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 44px -22px rgba(0,0,0,.85)}
.ps-out .card.c-gold{border-color:rgba(247,201,72,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 44px -22px rgba(0,0,0,.85),0 0 40px -14px rgba(247,201,72,.35)}
.ps-out table tbody tr{transition:background .15s}
.ps-out table tbody tr:hover td{background:rgba(94,234,212,.06)}
.ps-out table tbody tr:first-child td{background:rgba(247,201,72,.07)}
@media (max-width:1100px){.ps-hint{display:none}.ps-row3{grid-template-columns:1fr 1fr}}
/* 단위 선택 + 가독성 (11/11) */
.ps-unit{margin-left:auto;display:inline-flex;padding:3px;border-radius:10px;background:rgba(4,9,22,.6);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.ps-unit button{border:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:800;color:#c3cfeb;background:transparent;padding:4px 11px;border-radius:7px;transition:all .18s}
.ps-unit button.on{color:#06231f;background:linear-gradient(145deg,#99f6e4,#2dd4bf);box-shadow:0 3px 10px -2px rgba(45,212,191,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.ps-wrap label{color:#d3dcf3}
.ps-wrap label .u{color:#5eead4;font-weight:800}
.ps-wrap input::placeholder{color:rgba(200,212,240,.62)}
.ps-title p{color:#c4cfea}
.ps-hint{color:#aebcdc}.ps-hint b{color:#c7d2fe}
.ps-chips-l{color:#c0cbe6}
.ps-info{color:#dbe3f7}
.ps-wrap .ps-sw{color:#eef2ff}
.ps-btn.ghost{color:#dbe3f7}
.ps-out th{color:#c9d4ee}
.ps-out .muted{color:#b3c1e0}
.ps-out td{color:#eef2ff}
.ps-out h2 .muted{color:#b9c6e4}
.ps-wrap label{color:#e2e8f8;font-size:12.5px}
.ps-title p{color:#d5def3;font-size:13px}
.ps-hint{color:#c6d1ec}
.ps-chips-l{color:#d3dcf2;font-weight:600}
.ps-card-h{color:#fff;font-size:14px}
.ps-info{color:#eef2fb}
.ps-out td{color:#f3f6fd}.ps-out th{color:#dbe3f6}.ps-out .muted{color:#c3cee8}
.ps-wrap select{color:#f3f6fd}
/* 3D로 톤다운 (11/11): 기울기·떠다니는 빛·반짝임 제거, 깊이감(그림자·윗면 하이라이트)만 유지 */
.ps-wrap{perspective:none}
.ps-hero{transform:none;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),linear-gradient(135deg,rgba(94,234,212,.08),rgba(129,140,248,.06)),rgba(12,20,42,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.35),0 14px 30px -14px rgba(0,0,0,.75)}
.ps-hero::before{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04));opacity:.9}
.ps-hero::after,.ps-orb{display:none}
.ps-card{backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),rgba(10,18,38,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.3),0 10px 22px -12px rgba(0,0,0,.75);transform-style:flat}
.ps-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.3),0 16px 28px -14px rgba(0,0,0,.8);border-color:color-mix(in srgb,var(--a) 35%,rgba(255,255,255,.1))}
.ps-card::before{opacity:.55}
.ps-wrap .pchip:hover{transform:translateY(-1px)}
.ps-go{box-shadow:0 6px 14px -6px rgba(247,201,72,.6),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(120,70,0,.3)}
.ps-go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 9px 18px -8px rgba(247,201,72,.7),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(120,70,0,.3)}
.ps-bar:focus-within{box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 3px rgba(94,234,212,.14)}
.ps-wrap input:focus,.ps-wrap select:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 3px rgba(94,234,212,.14)}
.ps-out .card.c-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -16px rgba(0,0,0,.8)}
.ps-sw input:checked + .trk{box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
/* 파트별 컬러 테두리 + 반투명 색 배경 (11/11, 가독성·직관성 우선) */
.ps-hero{border:2px solid rgba(94,234,212,.55);
  background:linear-gradient(180deg,rgba(94,234,212,.10),rgba(94,234,212,.03)),rgba(10,18,38,.72)}
.ps-hero::before{display:none}
.ps-card{border:2px solid color-mix(in srgb,var(--a) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--a) 13%,transparent),color-mix(in srgb,var(--a) 4%,transparent) 70%),rgba(10,18,38,.72)}
.ps-card:hover{border-color:color-mix(in srgb,var(--a) 85%,transparent)}
.ps-card::before{display:none}
.ps-card-h{margin:-16px -18px 14px;padding:11px 18px;border-radius:18px 18px 0 0;
  background:color-mix(in srgb,var(--a) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--a) 40%,transparent);color:#fff}
.ps-card .ps-unit{background:rgba(4,9,22,.7)}
.ps-foot{border:2px solid rgba(148,163,184,.45);background:linear-gradient(180deg,rgba(148,163,184,.10),rgba(148,163,184,.03)),rgba(10,18,38,.72)}
.ps-wrap input,.ps-wrap select{background:rgba(3,8,20,.78);border:1px solid rgba(255,255,255,.16)}
.ps-info{padding:10px 16px;border-radius:14px;border:1px solid rgba(247,201,72,.35);background:rgba(247,201,72,.07)}
.ps-info:empty{display:none}
.ps-out .card{border:2px solid rgba(96,165,250,.5);background:linear-gradient(180deg,rgba(96,165,250,.09),rgba(96,165,250,.02) 60%),rgba(10,18,38,.75)}
.ps-out .card.c-gold{border-color:rgba(247,201,72,.6);background:linear-gradient(180deg,rgba(247,201,72,.10),rgba(247,201,72,.02) 60%),rgba(10,18,38,.75)}
.ps-out .card > h2{margin:-20px -20px 14px;padding:13px 20px;border-radius:18px 18px 0 0;background:rgba(96,165,250,.14);border-bottom:1px solid rgba(96,165,250,.35)}
.ps-out .card.c-gold > h2{background:rgba(247,201,72,.14);border-bottom-color:rgba(247,201,72,.4)}
.ps-out th{background:rgba(3,8,20,.6)}
.ps-out table tbody tr:first-child td{background:rgba(247,201,72,.11)}
/* 투명도·세련미 + 자주 구매한 제품(북마크) (11/11) */
.ps-wrap{position:relative;isolation:isolate}
.ps-wrap::before{content:"";position:absolute;inset:-30px -20px auto;height:900px;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.55;
  background:radial-gradient(420px 260px at 12% 8%,rgba(20,184,166,.45),transparent 70%),radial-gradient(380px 240px at 88% 18%,rgba(99,102,241,.40),transparent 70%),
  radial-gradient(360px 220px at 30% 70%,rgba(244,114,182,.22),transparent 70%),radial-gradient(400px 260px at 75% 75%,rgba(247,201,72,.22),transparent 70%)}
.ps-hero,.ps-card,.ps-foot,.ps-bm{backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%)}
.ps-hero{background:linear-gradient(180deg,rgba(94,234,212,.10),rgba(94,234,212,.02)),rgba(10,18,38,.42);border-color:rgba(94,234,212,.5)}
.ps-card{background:linear-gradient(180deg,color-mix(in srgb,var(--a) 14%,transparent),color-mix(in srgb,var(--a) 3%,transparent) 70%),rgba(10,18,38,.40)}
.ps-foot{background:linear-gradient(180deg,rgba(148,163,184,.10),rgba(148,163,184,.02)),rgba(10,18,38,.40)}
.ps-wrap input,.ps-wrap select{background:rgba(3,8,20,.62);border-color:rgba(255,255,255,.18)}
.ps-out .card{background:linear-gradient(180deg,rgba(96,165,250,.10),rgba(96,165,250,.02) 60%),rgba(10,18,38,.50);backdrop-filter:blur(18px)}
.ps-out .card.c-gold{background:linear-gradient(180deg,rgba(247,201,72,.11),rgba(247,201,72,.02) 60%),rgba(10,18,38,.50)}

/* 자주 구매한 제품 */
.ps-bm{position:relative;border-radius:22px;padding:0 18px 18px;border:2px solid rgba(251,191,36,.55);
  background:linear-gradient(180deg,rgba(251,191,36,.12),rgba(251,191,36,.02) 60%),rgba(10,18,38,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px -14px rgba(0,0,0,.75)}
.ps-bm-h{display:flex;align-items:center;gap:10px;margin:0 -18px 14px;padding:12px 18px;border-radius:20px 20px 0 0;background:rgba(251,191,36,.16);border-bottom:1px solid rgba(251,191,36,.4);
  color:#fff;font-weight:800;font-size:14.5px}
.ps-bm-h small{font-weight:500;font-size:12.5px;color:#f5e7c0;margin-left:4px}
.ps-bm-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#3b2500;font-size:14px;background:linear-gradient(145deg,#fde68a,#f59e0b);box-shadow:0 4px 10px -3px rgba(245,158,11,.8),inset 0 1px 0 rgba(255,255,255,.6)}
.ps-bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bm{position:relative;cursor:pointer;border-radius:16px;padding:13px 15px 12px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(8,14,32,.45);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -10px rgba(0,0,0,.7);transition:transform .16s,border-color .16s,box-shadow .16s}
.bm:hover{transform:translateY(-2px);border-color:rgba(251,191,36,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -12px rgba(0,0,0,.8),0 0 0 1px rgba(251,191,36,.25)}
.bm.on{border:2px solid #fbbf24;background:linear-gradient(180deg,rgba(251,191,36,.22),rgba(251,191,36,.06)),rgba(8,14,32,.5)}
.bm-n{font-weight:800;font-size:15px;color:#fff;padding-right:20px;letter-spacing:-.01em}
.bm-q{font-size:12.5px;color:#cbd5ee;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-c{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:4px}
.bm-c span{font-size:11.5px;font-weight:600;color:#e0e7ff;padding:2px 8px;border-radius:999px;background:rgba(129,140,248,.2);border:1px solid rgba(165,180,252,.3)}
.bm-p{margin-top:10px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.16);font-size:12.5px;color:#d9e1f5;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.bm-p b{font-size:16px;color:#fde68a}
.bm-p em{font-style:normal;font-weight:800}
.bm-p i{font-style:normal;margin-left:auto;color:#aebbd9;font-size:11.5px}
.bm-none{color:#aebbd9}
.bm .pdel{position:absolute;top:8px;right:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;color:#cbd5ee;background:rgba(255,255,255,.06);border:0;cursor:pointer;font-size:15px;padding:0}
.bm .pdel:hover{color:#fff;background:rgba(255,92,108,.6)}
.bm-empty{grid-column:1/-1;color:#e5e9f5;font-size:13px;padding:8px 2px}.bm-empty b{color:#fde68a}
/* 자주 구매한 제품: 한 줄 + 키워드 검색 목록 (11/11) */
.ps-bm{padding:0;overflow:visible;z-index:5}
.ps-bm-bar{display:flex;align-items:center;gap:12px;padding:10px 14px}
.ps-bm-t{color:#fff;font-size:14.5px;white-space:nowrap}
.ps-bm-cnt{font-size:12px;font-weight:800;color:#3b2500;background:#fcd34d;border-radius:999px;padding:2px 9px}
.ps-bm-in{flex:1;min-width:200px}
.ps-wrap .ps-bm-in input{padding:9px 13px;border-color:rgba(251,191,36,.35)}
.ps-wrap .ps-bm-in input:focus{border-color:rgba(251,191,36,.8);box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 3px rgba(251,191,36,.16)}
.ps-bm-cur{font-size:12.5px;color:#f5e7c0;white-space:nowrap}.ps-bm-cur b{color:#fde68a}
.ps-bm-list{margin:0 14px 14px;max-height:340px;overflow:auto;border-radius:14px;border:1px solid rgba(251,191,36,.3);background:rgba(6,12,28,.55);display:grid}
.ps-bm-list.hidden{display:none}
.bmr{position:relative;display:grid;grid-template-columns:minmax(200px,1.2fr) minmax(160px,1fr) minmax(220px,1.1fr) 28px;align-items:center;gap:12px;
  padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.07);transition:background .12s}
.bmr:last-child{border-bottom:0}
.bmr:hover,.bmr.first{background:rgba(251,191,36,.10)}
.bmr.on{background:rgba(251,191,36,.18);box-shadow:inset 3px 0 0 #fbbf24}
.bmr-n{font-weight:800;color:#fff;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmr-q{font-weight:500;font-size:12px;color:#c3cee8;margin-left:8px}
.bmr .bm-c{margin:0}
.bmr .bm-p{margin:0;padding:0;border:0}
.bmr .bm-p i{margin-left:6px}
.bmr .pdel{position:static;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;color:#cbd5ee;background:rgba(255,255,255,.06);border:0;cursor:pointer;font-size:15px;padding:0}
.bmr .pdel:hover{color:#fff;background:rgba(255,92,108,.6)}
.ps-bm-list .bm-empty{padding:14px}
/* 오늘 확인할 것 경고 줄 (11/11) */
.abar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 22px 0;padding:9px 12px;border-radius:14px;border:1.5px solid rgba(148,163,184,.35);
  background:rgba(10,18,38,.6);backdrop-filter:blur(12px)}
.abar.has-red{border-color:rgba(255,92,108,.65);background:linear-gradient(90deg,rgba(255,92,108,.14),rgba(10,18,38,.6) 40%)}
.abar.has-amber{border-color:rgba(251,191,36,.55);background:linear-gradient(90deg,rgba(251,191,36,.10),rgba(10,18,38,.6) 40%)}
.abar.all-ok{border-color:rgba(52,211,153,.45)}
.abar-h{font-weight:800;font-size:13.5px;color:#fff;margin-right:4px;white-space:nowrap}
.abar.has-red .abar-h{color:#ffb4bd}.abar.all-ok .abar-h{color:#6ee7b7}
.achip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:13px;color:#fff;padding:6px 11px;border-radius:999px;border:1.5px solid;transition:transform .12s}
.achip:hover{transform:translateY(-1px)}
.achip b{font-weight:700}
.achip .an{font-weight:800;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.35)}
.achip .aa{font-size:12px;opacity:.9}
.achip.red{background:rgba(255,92,108,.22);border-color:rgba(255,92,108,.75)}
.achip.amber{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.65)}
.achip.blue{background:rgba(96,165,250,.16);border-color:rgba(96,165,250,.6)}
.abar-t{margin-left:auto;color:#b8c5e3;font-size:12px}
.abar-r{background:transparent;border:1px solid rgba(255,255,255,.2);color:#dbe3f7;border-radius:8px;cursor:pointer;padding:3px 8px;font-size:13px}