/* Vector — app styles */
:root {
  --bg: #f3f5f9; --surface: #fff; --surface2: #f6f8fb; --border: #e2e7ef;
  --text: #0f1a2e; --muted: #5b667a; --faint: #95a0b3;
  --primary: #14213d; --primary-hover: #22345c; --on-primary: #fff; --primary-soft: #e8edf7; --accent: #3d63c9;
  --chart-strong: #14213d; --chart-mid: #9db2dc; --chart-alt: #5b7bc0; --chart-line: #3d63c9; --bubble: #14213d; --bubble-ink: #fff;
  --track: #edf1f7; --chip: #eef2f8; --overlay: rgba(10, 18, 36, .42);
  --shadow: 0 12px 32px rgba(15, 26, 46, .12);
  --good: #4f9a1b; --bad: #d9352f;
  --risk: #e5484d; --gap: #d98a06; --defect: #8b5cf6;
  --b-green-bg: #eef9d6; --b-green-fg: #4d7a12;
  --b-blue-bg: #e6f0fd;  --b-blue-fg: #2a64c5;
  --b-orange-bg: #fff1e3; --b-orange-fg: #c46a12;
  --b-red-bg: #fde8e8;   --b-red-fg: #c9302c;
  --b-gray-bg: #eef0f3;  --b-gray-fg: #5d6470;
  --b-yellow-bg: #fdf6d8; --b-yellow-fg: #8a6d00;
}
[data-theme="dark"] {
  --bg: #0a1120; --surface: #101a2e; --surface2: #15213a; --border: #22314f;
  --text: #e6ebf5; --muted: #9aa8c3; --faint: #6c7a98;
  --primary: #4c6fc4; --primary-hover: #5b7dd2; --on-primary: #fff; --primary-soft: #1c2b4d; --accent: #8fb0ff;
  --chart-strong: #8fb0ff; --chart-mid: #34508a; --chart-alt: #5b7bc0; --chart-line: #8fb0ff; --bubble: #2a3f6e; --bubble-ink: #e6ebf5; --track: #1a2640; --chip: #1a2640;
  --overlay: rgba(0, 0, 0, .55); --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --b-green-bg: #26331a; --b-green-fg: #b5dd6e;
  --b-blue-bg: #1c2a40;  --b-blue-fg: #8db8f5;
  --b-orange-bg: #3a2816; --b-orange-fg: #f2b06a;
  --b-red-bg: #3d1c1c;   --b-red-fg: #f38a86;
  --b-gray-bg: #272b31;  --b-gray-fg: #aab1bb;
  --b-yellow-bg: #362f12; --b-yellow-fg: #e6c85a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: Outfit, system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { flex: none; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 264px 1fr; height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 12px; display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.logo { font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -.02em; padding: 4px 10px; }
.logo b { color: var(--accent); font-weight: 600; }
.logo small { display: block; font-size: 10px; font-weight: 500; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.ask { display: flex; align-items: center; gap: 8px; background: var(--chip); border-radius: 12px; padding: 0 8px 0 12px; height: 40px; }
.ask input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; }
.kbd { font-size: 11px; background: var(--surface); border-radius: 6px; padding: 3px 7px; color: var(--muted); }
.navlabel { font-size: 11px; letter-spacing: .08em; color: var(--faint); padding: 6px 10px 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); text-align: left; width: 100%; }
.nav button:hover { background: var(--surface2); color: var(--text); }
.nav button.on { background: var(--chip); color: var(--text); font-weight: 500; }
.navitem { display: flex; align-items: center; }
.navitem > button { flex: 1; }
.main { overflow: auto; padding: 16px 20px 110px; }
.hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hdr h1 { margin: 0; font-size: 22px; font-weight: 500; }
.hdr p { margin: 4px 0 0; color: var(--muted); }
.iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.iconbtn:hover { background: var(--chip); }
.acct { position: relative; }
.acct > button { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px 12px 6px 8px; text-align: left; }
.acct small { display: block; color: var(--muted); font-size: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex: none; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; min-width: 190px; z-index: 30; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; text-align: left; }
.menu button:hover { background: var(--chip); }

/* ---------- primitives ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 20px; min-width: 0; }
.card h3 { margin: 0; font-size: 15px; font-weight: 500; }
.btn { height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn:hover { background: var(--surface2); }
.btn-primary { background: var(--primary); border-color: transparent; color: var(--on-primary); font-weight: 500; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-danger { color: var(--bad); }
.inp, .sel { height: 40px; border: 1px solid var(--border); background: var(--surface2); border-radius: 12px; padding: 0 12px; width: 100%; outline: none; }
.inp:focus, .sel:focus { border-color: var(--accent); }
textarea.inp { height: 80px; padding: 10px 12px; resize: vertical; }
.search { position: relative; flex: 1; max-width: 390px; min-width: 200px; }
.search .ic { position: absolute; left: 12px; top: 11px; color: var(--muted); }
.search .inp { padding-left: 38px; background: var(--chip); border-color: transparent; }
.toolbar-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-row .sel { width: auto; background: var(--surface); }
.chip { display: inline-block; background: var(--chip); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge { display: inline-block; border-radius: 8px; padding: 3px 9px; font-size: 12.5px; white-space: nowrap; }
.b-green { background: var(--b-green-bg); color: var(--b-green-fg); }
.b-blue { background: var(--b-blue-bg); color: var(--b-blue-fg); }
.b-orange { background: var(--b-orange-bg); color: var(--b-orange-fg); }
.b-red { background: var(--b-red-bg); color: var(--b-red-fg); }
.b-gray { background: var(--b-gray-bg); color: var(--b-gray-fg); }
.b-yellow { background: var(--b-yellow-bg); color: var(--b-yellow-fg); }
.pc-good { color: var(--good); } .pc-bad { color: var(--bad); }
.bar { height: 8px; background: var(--track); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.bar.lg { height: 20px; border-radius: 6px; }
.bar.lg > i { border-radius: 6px; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 5px, transparent 5px 10px); }
.empty { color: var(--muted); padding: 24px 0; }

/* ---------- tables ---------- */
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 500; padding: 10px 12px 14px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.dim { color: var(--muted); }
.tbl .ini { width: 34px; font-size: 12px; font-weight: 500; }

/* ---------- dashboard ---------- */
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.cardhead { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 18px; }
.plain-sel { border: 0; background: transparent; font-size: 14px; max-width: 170px; outline: none; }
.big { font-size: 36px; font-weight: 400; letter-spacing: -.02em; margin: 4px 0 14px; }
.stat { display: inline-flex; align-items: center; gap: 8px; background: var(--surface2); border-radius: 10px; padding: 8px 12px; margin: 0 6px 8px 0; }
.stat em { font-style: normal; color: var(--accent); font-size: 13px; }
.split3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.split3 > div { border-left: 2px solid var(--accent); padding-left: 12px; }
.split3 b { display: block; font-size: 18px; font-weight: 500; }
.legend { display: flex; gap: 16px; justify-content: center; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.hrow { margin-bottom: 14px; }
.hrow .row { justify-content: space-between; margin-top: 6px; }

/* ---------- charts ---------- */
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
.c-target { fill: var(--track); } .c-sent { fill: var(--chart-mid); } .c-done { fill: var(--chart-strong); }
.c-dark { fill: var(--chart-strong); } .c-alt { fill: var(--chart-alt); }
.c-axis { stroke: var(--faint); stroke-width: 1; } .c-grid { stroke: var(--border); stroke-dasharray: 3 4; }
.c-txt { fill: var(--muted); font-size: 11px; font-family: Outfit, system-ui, sans-serif; }
.c-line { stroke: var(--chart-line); fill: none; stroke-width: 2.5; } .c-dot { fill: var(--chart-line); }
.c-spark { stroke: var(--chart-line); fill: none; stroke-width: 2; } .c-area { fill: var(--chart-line); opacity: .15; }

/* ---------- sign in ---------- */
.signin { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; }
.signin-art { background: radial-gradient(circle at 25% 30%, #2d4a86 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #1f3766 0 24%, transparent 25%), linear-gradient(135deg, #14213d, #0a1226); position: relative; overflow: hidden; }
.signin-art::after { content: ""; position: absolute; inset: 18% 22%; border: 2px solid rgba(143, 176, 255, .25); border-radius: 40px; transform: rotate(-8deg); }
.signin-form { display: flex; align-items: center; justify-content: center; padding: 24px; }
.signin-form form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.signin-form h2 { margin: 18px 0 0; font-weight: 500; font-size: 26px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .flabel { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; }
.ferr { color: var(--bad); font-size: 12px; }

/* ---------- overlays ---------- */
.ov { position: fixed; inset: 0; background: var(--overlay); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px 20px 72px; animation: fade .15s ease; }
.ov.right { justify-content: flex-end; align-items: stretch; }
.modal { width: min(620px, 100%); max-height: 100%; overflow: auto; background: var(--surface); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.modal h2 { margin: 0; font-size: 18px; font-weight: 500; display: flex; align-items: center; }
.modal .sect { font-weight: 500; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; }
.g3f { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.foot { display: flex; justify-content: flex-end; gap: 10px; align-items: center; padding-top: 6px; }
.drawer { width: min(400px, 100%); background: var(--surface); border-radius: 20px; overflow: auto; box-shadow: var(--shadow); animation: slide .2s ease; }
.drawer .dh { display: flex; align-items: center; gap: 8px; padding: 22px 20px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.drawer .dh h2 { margin: 0; font-size: 17px; font-weight: 500; flex: 1; min-width: 0; }
.drawer .db { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.box { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.klabel { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; }
.kval { font-size: 15px; font-weight: 500; margin-top: 3px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.member { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.member .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-x { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; margin-top: -4px; color: var(--muted); font-size: 13px; }
button.member { background: transparent; text-align: left; width: 100%; }
button.member:hover { background: var(--surface2); }
.bigini { width: 44px; height: 44px; margin: 0 auto; }

/* multi-select + tag input */
.ms { position: relative; }
.ms summary { list-style: none; height: 40px; border: 1px solid var(--border); background: var(--surface2); border-radius: 12px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.ms summary::-webkit-details-marker { display: none; }
.ms .ms-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 5; max-height: 220px; overflow: auto; }
.ms label { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.ms label:hover { background: var(--chip); }
.taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; border: 1px solid var(--border); background: var(--surface2); border-radius: 12px; padding: 6px 10px; }
.taginput input { border: 0; background: transparent; outline: none; flex: 1; min-width: 90px; }
.tchip { display: inline-flex; align-items: center; gap: 4px; background: var(--chip); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; }
.tchip button { border: 0; background: transparent; padding: 0 4px; color: var(--muted); }

/* assistant */
.asst { max-width: 690px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest button { border: 1px solid var(--border); background: var(--surface2); border-radius: 999px; padding: 9px 16px; }
.suggest button:hover { background: var(--chip); }
.chat { border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow: auto; }
.msg { max-width: 80%; padding: 10px 14px; border-radius: 16px; line-height: 1.5; white-space: pre-line; }
.msg.u { align-self: flex-end; background: var(--bubble); color: var(--bubble-ink); }
.msg.a { align-self: flex-start; background: var(--chip); }
.composer { display: flex; gap: 8px; align-items: center; }
.composer .inp { border-radius: 999px; }
.sendbtn { width: 40px; height: 36px; border-radius: 10px; border: 0; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; }
.stub { max-width: 480px; margin: 80px auto; text-align: center; padding: 48px 24px; }

/* toasts + tooltip */
#toasts { position: fixed; right: 20px; bottom: 76px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 18px; min-width: 280px; display: flex; gap: 10px; align-items: center; animation: slide .2s ease; }
.toast .ic { color: var(--good); }
#tip { position: fixed; pointer-events: none; background: #0d1526; color: #f1f3f5; padding: 6px 9px; border-radius: 8px; font-size: 12px; z-index: 95; display: none; max-width: 280px; }

/* ---------- devices tab ---------- */
body.embed *, body.embed { scrollbar-width: none; }
body.embed ::-webkit-scrollbar { display: none; }
.devwrap { display: grid; grid-template-columns: auto minmax(280px, 1fr); gap: 20px; align-items: start; }
.phonebox { overflow: auto; max-width: 100%; }
.phone { width: 384px; height: 792px; border-radius: 52px; background: #0b1220; padding: 12px; position: relative; box-shadow: var(--shadow), inset 0 0 0 2px #22314f; transition: width .25s, height .25s; }
.phone.land { width: 792px; height: 384px; }
.phone::before { content: ""; position: absolute; top: 24px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #0b1220; box-shadow: 0 0 0 2px #1c2a4a; z-index: 2; }
.phone.land::before { top: 50%; left: 24px; margin: -6px 0 0; }
.phone iframe { width: 100%; height: 100%; border: 0; border-radius: 40px; background: var(--surface); display: block; }
.devside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.devform { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.devhint { margin: 0; line-height: 1.5; }
.devnotes { margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.55; display: flex; flex-direction: column; gap: 8px; }
.devnotes b { color: var(--text); font-weight: 500; }
@media (max-width: 1100px) { .devwrap { grid-template-columns: 1fr; } }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(16px); opacity: 0; } }

@media (max-width: 1100px) { .g3, .g2 { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .side { flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .side .ask, .side .navlabel, .side .logo small, .side .logo br { display: none; }
  .side .logo { white-space: nowrap; }
  .nav { flex-direction: row; }
  .nav button { white-space: nowrap; padding: 8px 10px; }
  .hdr { flex-wrap: wrap; }
  .acct small { display: none; }
  .signin { grid-template-columns: 1fr; grid-template-rows: 120px 1fr; }
  .g3f, .pgrid, .split3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- Vector app ---------- */
.b-navy { background: var(--primary-soft); color: var(--accent); }
.ptag { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border-radius: 999px; padding: 3px 10px 3px 4px; font-size: 12px; white-space: nowrap; }
.ptag b, .pdot { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: 9.5px; font-weight: 600; padding: 0 4px; }
.pdot { margin-right: 3px; }
.thumb { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; background: linear-gradient(160deg, hsl(var(--h) 55% 38%), hsl(calc(var(--h) + 40) 60% 18%)); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb span { position: absolute; right: 6px; bottom: 6px; font-size: 11px; background: rgba(0, 0, 0, .45); border-radius: 6px; padding: 1px 6px; }
.thumb.text { background: var(--chip); color: var(--muted); font-weight: 600; }
.thumb.sm { width: 38px; flex: none; border-radius: 8px; } .thumb.sm span, .thumb.sm svg { display: none; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.kpi .v { font-size: 30px; letter-spacing: -.02em; margin: 6px 0 2px; }
.kpi .d { font-size: 12.5px; color: var(--muted); }
.kpi .d em { font-style: normal; color: var(--good); }
.listrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.listrow:last-child { border-bottom: 0; }
.listrow .grow { min-width: 0; }
.listrow .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listrow small { color: var(--muted); display: block; }
button.listrow { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); text-align: left; }
button.listrow:hover { background: var(--surface2); }
.attn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.attn button { border: 1px solid var(--border); background: var(--surface2); border-radius: 14px; padding: 14px; text-align: left; }
.attn button:hover { border-color: var(--accent); }
.attn b { display: block; font-size: 24px; font-weight: 500; }
/* calendar */
.calhead { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calday { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; min-height: 260px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calday.today { border-color: var(--accent); }
.calday h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); display: flex; justify-content: space-between; }
.calday.today h4 { color: var(--accent); }
.calpost { border: 0; text-align: left; border-radius: 10px; padding: 7px 8px; background: var(--surface2); border-left: 3px solid var(--faint); font-size: 12px; min-width: 0; }
.calpost:hover { background: var(--chip); }
.calpost .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calpost.s-Published { border-left-color: var(--good); } .calpost.s-Scheduled { border-left-color: var(--accent); }
.calpost.s-Approved { border-left-color: #2a64c5; } .calpost.s-Inreview { border-left-color: #d9a406; }
/* library */
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.clipcard { border: 1px solid var(--border); background: var(--surface); border-radius: 16px; padding: 8px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.clipcard:hover { border-color: var(--accent); }
.clipcard .t { font-size: 13px; font-weight: 500; line-height: 1.3; }
.vidwrap { background: #0b1220; border-radius: 14px; display: flex; align-items: center; justify-content: center; height: 300px; overflow: hidden; }
.vidwrap .frame { height: 100%; aspect-ratio: var(--ar, 9 / 16); max-width: 100%; background: #111; display: flex; align-items: center; justify-content: center; color: #9aa8c3; font-size: 13px; text-align: center; padding: 10px; }
.vidwrap video { width: 100%; height: 100%; object-fit: cover; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg label { padding: 7px 12px; cursor: pointer; font-size: 13px; }
.seg input { display: none; }
.seg input:checked + span { color: var(--accent); font-weight: 600; }
input[type=range] { width: 100%; accent-color: var(--primary); }
/* inbox */
.inbox { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 14px; align-items: start; }
.inbox .list { padding: 6px 14px; max-height: calc(100vh - 220px); overflow: auto; }
.inbox .item { display: flex; gap: 10px; align-items: flex-start; }
.inbox .item.on { background: var(--primary-soft); border-radius: 10px; }
.quote { background: var(--surface2); border-radius: 12px; padding: 12px 14px; line-height: 1.5; }
/* misc */
.toggle { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.toggle:last-child { border-bottom: 0; }
.toggle .grow small { display: block; color: var(--muted); margin-top: 2px; }
.sw2 { width: 38px; height: 22px; border-radius: 99px; background: var(--track); position: relative; border: 0; flex: none; }
.sw2::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.sw2.on { background: var(--primary); } .sw2.on::after { left: 19px; } .sw2:disabled { opacity: .6; cursor: not-allowed; }
.note { display: flex; gap: 10px; background: var(--primary-soft); color: var(--text); border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.note .ic { color: var(--accent); margin-top: 1px; }
.preview { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.preview .ph { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.preview .thumb { border-radius: 0; aspect-ratio: auto; height: 260px; }
.preview .cap { padding: 12px 14px; line-height: 1.5; white-space: pre-wrap; }
.labels { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.metrics div { background: var(--surface2); border-radius: 12px; padding: 10px; text-align: center; }
.metrics b { display: block; font-size: 17px; font-weight: 500; }
.metrics small { color: var(--muted); }
details.faq { border-bottom: 1px solid var(--border); padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 500; }
details.faq p { color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.tabs { display: flex; gap: 4px; background: var(--chip); border-radius: 12px; padding: 4px; width: fit-content; }
.tabs button { border: 0; background: transparent; border-radius: 9px; padding: 7px 14px; color: var(--muted); }
.tabs button.on { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inbox { grid-template-columns: 1fr; } .attn { grid-template-columns: 1fr; } }
.nav .count { background: var(--primary); color: var(--on-primary); border-radius: 99px; font-size: 11px; padding: 1px 7px; }
.iconbtn { position: relative; }
.iconbtn .bubble { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--bg); }
.jev { display: flex; flex-direction: column; gap: 3px; border-radius: 12px; padding: 10px 12px; font-size: 13px; border: 1px solid var(--border); }
.jev b { font-weight: 600; }
.jev small { color: var(--muted); line-height: 1.5; }
.jev-pass { background: var(--b-green-bg); border-color: transparent; } .jev-pass b { color: var(--b-green-fg); }
.jev-review { background: var(--b-yellow-bg); border-color: transparent; } .jev-review b { color: var(--b-yellow-fg); }
.jev-flag { background: var(--b-red-bg); border-color: transparent; } .jev-flag b { color: var(--b-red-fg); }
[data-check]:empty { display: none; }
button:disabled { opacity: .6; cursor: progress; }