/* GENERATED by scripts/build_css.py — edit prototype/css/app.css, prototype/gen/NN.css or prototype/css/theme-dark.css instead. */
/* unimail.ai — shared design system (tokens + components).
   Source of truth for class names: prototypes use this file directly, production gets it through scripts/build_css.py. */

:root {
  --bg: #F5F7FA;
  --bg-ambient: #EEF4F9;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-3: #F1F5FA;
  --rim: #E0E8F0;
  --rim-soft: #E8F0F8;
  --rim-strong: #D3DDE8;
  --text: #1E2458;
  --text-strong: #141A42;
  --text-2: #3A4270;
  --text-muted: #6B7390;
  --text-faint: #8E95AE;
  --primary: #2478FC;
  --primary-600: #1D66E5;
  --primary-400: #5C9BFD;
  --primary-soft: #A8C8F8;
  --primary-tint: #E8F0FE;
  --primary-tint-2: #F2F7FF;
  --lavender: #A28AE4;
  --lavender-tint: #F1EDFC;
  --purple: #9C66FC;
  --purple-tint: #F3ECFF;
  --green: #00C6A2;
  --green-600: #00A887;
  --green-tint: #E3F8F3;
  --whatsapp: #18CC54;
  --whatsapp-600: #12A846;
  --whatsapp-tint: #E6F8EC;
  --teal: #1FB8C9;
  --teal-tint: #E3F6F8;
  --amber: #F6A206;
  --amber-600: #C98200;
  --amber-tint: #FEF4E1;
  --red: #EA4242;
  --red-soft: #EA8A96;
  --red-tint: #FDECEE;
  --grey: #9CA3AF;
  --grey-track: #E9ECF3;
  --pink-tint: #FCE9EF;
  --pink: #D94A73;

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(30, 40, 90, .05), 0 1px 1px rgba(30, 40, 90, .03);
  --shadow: 0 2px 6px rgba(30, 40, 90, .05), 0 8px 24px rgba(30, 40, 90, .06);
  --shadow-lg: 0 4px 10px rgba(30, 40, 90, .05), 0 18px 48px rgba(30, 40, 90, .09);
  --shadow-primary: 0 8px 22px rgba(36, 120, 252, .35);
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --page-gutter: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg-ambient);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #F3F7FB 0%, #EDF3F8 55%, #E9F0F6 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
/* faint spatial "room" panels at the left/right edges */
body::before, body::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(226,234,242,.55));
}
body::before { left: 0; clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%); border-right: 1px solid rgba(210,220,232,.6); }
body::after { right: 0; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 86%); border-left: 1px solid rgba(210,220,232,.6); }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- app shell ---------- */
.shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  margin: 14px var(--page-gutter) 0; height: 49px; padding: 0 12px 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--rim-soft); border-radius: 18px;
  box-shadow: var(--shadow);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.brand-mark { width: 22px; height: 22px; display: inline-block; }
.topbar-title { font-size: 19px; font-weight: 500; color: var(--text-strong); display: flex; align-items: center; gap: 14px; }
.topbar-title .crumb { font-size: 16px; font-weight: 400; color: var(--text-2); }
.topbar-title .crumb:hover { color: var(--primary); }
.topbar-title .sep { color: var(--text-faint); }
.topbar-right { justify-self: end; display: flex; align-items: center; gap: 18px; }
.sample-badge { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); padding-right: 18px; border-right: 1px solid var(--rim); height: 32px; }
.sample-badge .ic { color: var(--text-muted); }
.user-menu { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text-muted); position: relative; }
.avatar-me { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-tint); color: var(--text-strong); display: grid; place-items: center; font-size: 15px; font-weight: 500; border: 1px solid #D6E3FA; }
.shell-main { flex: 1; padding: 0 var(--page-gutter) 12px; }
.subbar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 22px; color: var(--text-2); font-size: 14px; }
.subbar .crumbs { display: flex; align-items: center; gap: 12px; }
.subbar .crumbs a { color: var(--text-2); }
.subbar .meta { display: flex; align-items: center; gap: 22px; }
.subbar .meta span { display: inline-flex; align-items: center; gap: 9px; }

/* in-frame breadcrumb line (07, 09, …) */
.crumbline { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.crumbline a { color: var(--text-2); }
.crumbline a:hover { color: var(--primary); }

/* dropdown menu (user menu, row menus) */
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--surface); border: 1px solid var(--rim); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; display: none; text-align: left; }
.menu.open { display: block; }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 8px; color: var(--text); font-size: 14px; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--surface-3); }
.menu .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--rim-soft); margin-bottom: 4px; }
.menu .menu-head b { display: block; color: var(--text-strong); font-weight: 600; }
.menu .menu-head small { color: var(--text-muted); }

/* ---------- surfaces ---------- */
.frame { /* silver monitor rim around a white display */
  position: relative; border-radius: 14px; padding: 5px;
  background: linear-gradient(180deg, #FBFCFE, #E9EFF5);
  border: 1px solid var(--rim-strong);
  box-shadow: var(--shadow);
}
.frame > .frame-in { background: var(--surface); border-radius: 10px; border: 1px solid var(--rim); height: 100%; }
.card { background: var(--surface); border: 1px solid var(--rim); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel { background: rgba(255,255,255,.96); border: 1px solid var(--rim-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.divider-v { width: 1px; background: var(--rim); align-self: stretch; }

/* ---------- type helpers ---------- */
.eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.label-caps { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.strong { color: var(--text-strong); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rim-strong); background: var(--surface); color: var(--text-strong); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--primary-soft); color: var(--text-strong); background: var(--primary-tint-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #3B88FD, var(--primary)); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(36,120,252,.25); }
.btn-primary:hover { background: var(--primary-600); color: #fff; border-color: var(--primary-600); }
.btn-outline { border-color: var(--primary-400); color: var(--primary); background: var(--surface); }
.btn-outline:hover { background: var(--primary-tint-2); color: var(--primary-600); }
.btn-soft { background: var(--surface-2); border-color: var(--rim); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-3); border-color: transparent; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-danger { color: var(--red); }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { background: var(--surface-3); color: var(--text-strong); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 500; }
.link-arrow:hover { color: var(--primary-600); }

/* the round Play button */
.play { position: relative; display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 35% 30%, #7DB6FF 0%, #3D8BFD 45%, #1F6FF5 100%);
  box-shadow: 0 10px 26px rgba(36,120,252,.38), inset 0 -3px 8px rgba(10,60,180,.25), inset 0 2px 6px rgba(255,255,255,.35); transition: transform .15s, box-shadow .15s; }
.play:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 30px rgba(36,120,252,.45), inset 0 -3px 8px rgba(10,60,180,.25), inset 0 2px 6px rgba(255,255,255,.35); }
.play .ic { margin-left: 4px; }
.play::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(36,120,252,.12); }

/* ---------- pills, badges, dots, avatars ---------- */
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.pill-blue { background: var(--primary-tint); color: #2F6BD8; }
.pill-purple { background: var(--purple-tint); color: #7C4DDB; }
.pill-lavender { background: var(--lavender-tint); color: #7D63C9; }
.pill-green { background: var(--green-tint); color: #07936F; }
.pill-teal { background: var(--teal-tint); color: #11899A; }
.pill-amber { background: var(--amber-tint); color: #B07100; }
.pill-red { background: var(--red-tint); color: #C9323F; }
.pill-pink { background: var(--pink-tint); color: #C23B63; }
.pill-grey { background: var(--surface-3); color: var(--text-muted); }
.count-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--whatsapp); color: #fff; }
.count-badge.blue { background: var(--primary); }
.tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 12px; background: var(--surface-3); color: var(--text-2); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--grey); flex: none; }
.dot-green { background: var(--green); box-shadow: 0 0 0 3px rgba(0,198,162,.15); }
.dot-amber { background: var(--amber); box-shadow: 0 0 0 3px rgba(246,162,6,.15); }
.dot-lavender { background: var(--lavender); box-shadow: 0 0 0 3px rgba(162,138,228,.15); }
.dot-red { background: var(--red); box-shadow: 0 0 0 3px rgba(234,66,66,.12); }
.dot-blue { background: var(--primary); box-shadow: 0 0 0 3px rgba(36,120,252,.14); }
.dot-grey { background: var(--grey); }
.avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #EEF1F6; color: var(--text-2); font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.src-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--primary-tint-2); color: var(--primary); border: 1px solid #DDE8FB; }
.src-icon.whatsapp { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.src-icon.browser { background: var(--primary-tint-2); color: var(--primary-600); }
.src-icon.terminal { background: #1F2640; color: #fff; border-color: #1F2640; }
.src-icon.soft-green { background: var(--whatsapp-tint); color: var(--whatsapp-600); border-color: #CDEFD8; }
.wa-glyph { color: var(--whatsapp); }

/* ---------- tabs & segmented ---------- */
.seg { display: inline-flex; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); padding: 3px; gap: 2px; }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 7px; border: 0; background: none; color: var(--text-2); font-size: 13.5px; cursor: pointer; }
.seg .active, .seg [aria-selected="true"] { background: var(--primary-tint-2); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary-soft); }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--rim); }
.tabs a, .tabs button { padding: 10px 2px; border: 0; background: none; color: var(--text-muted); font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs .active, .tabs [aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.input, .select, .textarea { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--rim-strong); border-radius: 10px; background: var(--surface); color: var(--text-strong); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.textarea { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(36,120,252,.14); }
.input[aria-invalid="true"] { border-color: var(--red); }
.field-error { color: var(--red); font-size: 12.5px; }
.form-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--red-tint); color: #A8303B; font-size: 13.5px; margin-bottom: 16px; }
.form-alert.ok { background: var(--green-tint); color: #07765A; }
.form-alert.info { background: var(--primary-tint-2); color: var(--text-2); }
.linkish { border: 0; background: none; padding: 0; color: var(--primary-600); font-size: 13px; cursor: pointer; white-space: nowrap; }
.linkish:hover { text-decoration: underline; }
.checkbox { width: 18px; height: 18px; accent-color: var(--primary); }
/* on/off switch: <input type="checkbox" role="switch" class="switch"> */
.switch { appearance: none; flex: none; position: relative; width: 46px; height: 26px; margin: 0; border-radius: 13px; background: #D5DBE6; cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,30,60,.25); transition: transform .15s; }
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- progress ---------- */
.progress { height: 6px; border-radius: 3px; background: var(--grey-track); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2A74F5, #4B92FD); }

/* ---------- empty / skeleton / toast / dialog ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 22px 16px; color: var(--text-muted); }
.empty .empty-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-faint); }
.empty b { color: var(--text-strong); font-weight: 600; font-size: 14px; }
.empty p { font-size: 13px; max-width: 240px; }
.skeleton { background: linear-gradient(90deg, #EEF2F7 25%, #F7F9FC 50%, #EEF2F7 75%); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 6px; }
@keyframes sk { to { background-position: -200% 0; } }
.toast-host { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 260px; max-width: 380px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rim); box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.toast.ok .ic { color: var(--green); } .toast.err .ic { color: var(--red); } .toast.warn .ic { color: var(--amber); }
.dialog-backdrop { position: fixed; inset: 0; background: rgba(20, 26, 66, .22); display: grid; place-items: center; z-index: 90; }
.dialog { width: min(460px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--radius-lg); border: 1px solid var(--rim); box-shadow: var(--shadow-lg); padding: 22px; }
.dialog h3 { font-size: 17px; margin-bottom: 8px; }
.dialog p { color: var(--text-2); margin-bottom: 18px; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 10px; }


/* ---------- wizard stepper + footer (06, 07, 11, 21, 31) ---------- */
.wz-steps { display: flex; justify-content: center; gap: 0; margin: 30px auto 22px; width: 620px; }
.wz-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 15px; color: var(--text-2); line-height: 1.4; }
.wz-step .n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #EEF2F8; color: var(--text-strong); font-size: 14px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--rim); }
.wz-step::before { content: ""; position: absolute; top: 16px; left: -50%; right: 50%; border-top: 1.5px solid var(--rim-strong); }
.wz-step:first-child::before { display: none; }
.wz-step.active .n { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 5px #BFD6FC; }
.wz-step.active { color: var(--text-strong); font-weight: 500; }
.wz-step.done .n { background: var(--green); color: #fff; }
.wz-step.done::before, .wz-step.active::before { border-color: var(--primary-soft); }
.wz-foot { display: flex; align-items: center; gap: 24px; margin: 30px -36px 0 -38px; padding: 16px 36px 26px 38px; border-top: 1px solid var(--rim-soft); }
.wz-foot .btn { height: 52px; padding: 0 28px; font-size: 16px; }
.wz-foot .btn-primary { margin-left: auto; min-width: 282px; gap: 14px; }
.wz-foot .note { font-size: 14px; color: var(--text-2); max-width: 330px; }

/* ---------- file card (attachments, work files) ---------- */
.file-card { display: inline-flex; align-items: center; gap: 14px; width: 268px; padding: 10px 14px; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); color: inherit; }
.file-card:hover { border-color: var(--primary-soft); color: inherit; }
.file-card .ft { width: 28px; height: 32px; border-radius: 4px; display: grid; place-items: center; background: #1E8E3E; color: #fff; }
.file-card .ft.pdf { background: #D93025; } .file-card .ft.doc { background: #2B579A; } .file-card .ft.gen { background: var(--grey); }
.file-card b { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.file-card small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- placeholder page for screens not built yet ---------- */

/* ---------- auth pages ---------- */
.auth-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: min(440px, 100%); }
.auth-card .frame-in { padding: 34px 34px 28px; }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }
.auth-card .lead { color: var(--text-muted); margin-bottom: 24px; }
.auth-card .foot { margin-top: 18px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.auth-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
/* the unimail orb (static/js/orb.js; the 01 "Start Grind" orb) — the slot keeps the layout, the canvas overflows it for the glow */
.orb { --orb-size: 92px; position: relative; display: grid; place-items: center; width: var(--orb-size); height: var(--orb-size); border-radius: 50%; will-change: transform; }
.orb canvas { position: absolute; left: 50%; top: 50%; width: calc(var(--orb-size) * 1.8); height: calc(var(--orb-size) * 1.8); transform: translate(-50%, -50%); pointer-events: none; }
.orb.orb-fallback { background: radial-gradient(circle at 36% 32%, #FFFFFF 0 7%, #5C9BFD 30%, #2478FC 58%, #A28AE4 100%);
  box-shadow: 0 10px 26px rgba(36, 120, 252, .32); }
.orb.orb-fallback canvas { display: none; }
.auth-orb { display: flex; justify-content: center; margin: 4px 0 16px; }
.auth-card.with-orb h1, .auth-card.with-orb .lead { text-align: center; }

/* ---------- error pages ---------- */
.error-page .code { font-size: 13px; letter-spacing: .2em; color: var(--text-muted); }
.error-page .ref { font-family: var(--mono); font-size: 12px; color: var(--text-faint); margin-top: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- phone layer ---------- */
@media (max-width: 768px) {
  :root { --page-gutter: 12px; }
  body::before, body::after { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; height: 52px; padding: 0 10px 0 14px; }
  .topbar-title { justify-self: center; font-size: 15px; }
  .topbar-title .crumb, .topbar-title .sep { display: none; }
  .sample-badge span { display: none; }
  .sample-badge { padding-right: 10px; }
  .brand span { display: none; }
  .subbar { padding: 0 6px; }
  .subbar .meta { display: none; }
}

/* ===== 01.css ===== */
/* 01 Control wall (prefix w01-) */
.w01-wall { margin: 0 -14px; position: relative; }
.w01-master { width: 1025px; max-width: calc(100% - 180px); height: 306px; margin: 13px auto 0; }
.w01-master .frame-in { display: grid; grid-template-columns: 226px 1fr 228px; padding: 34px 32px 14px 30px; position: relative; }
.w01-caps { position: absolute; top: 20px; left: 0; right: 0; text-align: center; }
.w01-capabilities { list-style: none; margin: 24px 0 0; padding: 4px 0 0 16px; border-right: 1px solid var(--rim); display: flex; flex-direction: column; gap: 16px; height: 200px; }
.w01-capabilities li { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--text-strong); }
.w01-capabilities .ic { color: var(--primary); }
.w01-hero { display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.w01-hero h1 { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.w01-hero .queue { font-size: 22px; color: var(--text-strong); margin: 4px 0 16px; }
.w01-hero .play-label { margin-top: 10px; font-size: 19px; font-weight: 600; color: var(--text-strong); }
.w01-hero .play-label:hover { color: var(--primary); }
/* Start Grind orb (WebGL2, js/grind-orb.js): the slot keeps the layout, the canvas overflows it for the glow */
/* transform (offset + hover / press scale) is eased per frame in JS: no CSS transition, so nothing snaps */
.w01-orb { --orb-size: 92px; --orb-canvas: 166px; --orb-icon: #fff;
  position: relative; display: grid; place-items: center; width: var(--orb-size); height: var(--orb-size); border-radius: 50%;
  z-index: 1; outline: none; will-change: transform; -webkit-tap-highlight-color: transparent; user-select: none; }
.w01-orb:focus-visible { box-shadow: 0 0 0 3px var(--primary-soft); }
.w01-orb canvas { position: absolute; left: 50%; top: 50%; width: var(--orb-canvas); height: var(--orb-canvas); transform: translate(-50%, -50%); pointer-events: none; }
.w01-orb-icon { position: relative; display: none; color: var(--orb-icon); filter: drop-shadow(0 1px 3px rgba(20,40,120,.35)); }
.w01-orb-icon .ic { margin-left: 4px; }
.w01-orb.with-icon .w01-orb-icon { display: block; }
.w01-orb.w01-orb-fallback { width: 80px; height: 80px; transform: none; }
.w01-orb.w01-orb-fallback canvas { display: none; }
.w01-orb.w01-orb-fallback .w01-orb-icon { display: block; color: #fff; filter: none; }

/* prototype-only orb settings panel on the right edge */
.w01-op { position: fixed; top: 76px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: flex-start; pointer-events: none; }
.w01-op > * { pointer-events: auto; }
.w01-op-tab { display: none; writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 40px; padding: 16px 9px; border: 1px solid var(--rim-strong); border-radius: 0 10px 10px 0; background: var(--surface); box-shadow: var(--shadow); color: var(--primary); font-size: 13px; font-weight: 600; letter-spacing: .04em; cursor: pointer; }
.w01-op.is-collapsed .w01-op-tab { display: block; }
.w01-op.is-collapsed .w01-op-body { display: none; }
.w01-op-body { width: 304px; height: 100%; display: flex; flex-direction: column; background: rgba(255,255,255,.97); border: 1px solid var(--rim); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, var(--shadow)); backdrop-filter: blur(6px); }
.w01-op-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 12px 10px 16px; border-bottom: 1px solid var(--rim); }
.w01-op-head b { display: block; font-size: 15px; color: var(--text-strong); }
.w01-op-head small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }
.w01-op-warn { margin: 10px 14px 0; padding: 8px 10px; border-radius: 8px; background: #FFF6E5; color: var(--amber-600, #B36F00); font-size: 12px; }
.w01-op-scroll { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.w01-op-sec { padding: 10px 16px 6px; border-bottom: 1px solid var(--rim-soft, #EEF2F7); }
.w01-op-sec:last-child { border-bottom: 0; }
.w01-op-sec-title { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 2px 0 8px; cursor: default; }
details.w01-op-sec > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.w01-op-sec > summary::-webkit-details-marker { display: none; }
details.w01-op-sec > summary::after { content: "+"; font-size: 15px; font-weight: 400; color: var(--text-muted); }
details.w01-op-sec[open] > summary::after { content: "\2212"; }
.w01-op-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.w01-op-preset { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; color: var(--text-2); font-size: 11px; }
.w01-op-preset .sw { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--rim), 0 3px 8px rgba(30,40,90,.12); }
.w01-op-preset:hover { background: var(--primary-tint-2); }
.w01-op-preset.is-active { border-color: var(--primary-400, var(--primary)); background: var(--primary-tint-2); color: var(--primary); font-weight: 600; }
.w01-op-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-size: 13px; color: var(--text-2); }
.w01-op-row.is-off { opacity: .45; }
.w01-op-range { flex-direction: column; align-items: stretch; gap: 2px; padding: 3px 0; }
.w01-op-range .l { display: flex; justify-content: space-between; }
.w01-op-range output { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 500; }
.w01-op-range input { width: 100%; margin: 0; accent-color: var(--primary); }
.w01-op-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.w01-op-cval { display: inline-flex; align-items: center; gap: 8px; }
.w01-op-cval code { font-size: 11.5px; color: var(--text-muted); }
.w01-op-color input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--rim-strong); border-radius: 6px; background: none; cursor: pointer; }
.w01-op-select { height: 28px; padding: 0 8px; border: 1px solid var(--rim-strong); border-radius: 8px; background: var(--surface); color: var(--text-strong); font-size: 13px; }
.w01-op-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--rim); }
.w01-op-foot .btn { flex: 1; height: 36px; }
@media (max-width: 768px) { .w01-op { top: auto; left: 12px; height: 60vh; } .w01-op-body { width: 100%; } }

.w01-side { border-left: 1px solid var(--rim); padding: 0 0 0 26px; margin-top: 22px; display: flex; flex-direction: column; gap: 8px; height: 210px; }
.w01-net { height: 88px; margin: -30px 0 8px 12px; }
.w01-chip { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; border-radius: 8px; background: var(--primary-tint-2); font-size: 13px; color: var(--text-strong); }
.w01-chip .ic { color: var(--primary); }
.w01-side .btn-outline { margin-top: 12px; height: 42px; margin-left: -20px; }
.w01-tagline { position: absolute; right: 30px; bottom: 11px; font-size: 10.5px; color: var(--text-muted); }
.w01-core-mark { position: absolute; left: 30px; bottom: 14px; font-size: 10px; letter-spacing: .2em; color: var(--text-muted); }

/* connector layer: horizontal rail at 10%..90% (column centres), drops into each column */
.w01-links { position: relative; height: 80px; margin: 0 0 0; }
.w01-links .stem { position: absolute; left: 50%; top: 0; height: 16px; border-left: 1.5px solid var(--primary-soft); }
.w01-links .rail { position: absolute; left: 10%; right: 10%; top: 38px; height: 42px; border: 1.5px solid var(--primary-soft); border-bottom: 0; border-radius: 12px 12px 0 0; }
.w01-links .drop { position: absolute; top: 38px; bottom: 0; border-left: 1.5px solid var(--primary-soft); }
.w01-links .nub { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #5B9BFB; box-shadow: 0 0 0 3px rgba(91,155,251,.18); }
.w01-hub { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--rim-strong); box-shadow: var(--shadow); font-size: 17px; font-weight: 500; color: var(--text-strong); white-space: nowrap; }
.w01-hub .ic { color: var(--primary); }

.w01-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: 414px; }
.w01-mon { height: 100%; }
.w01-mon .frame-in { display: flex; flex-direction: column; padding: 12px 8px 0; }
.w01-mon-head { display: flex; align-items: flex-start; gap: 12px; padding: 6px 4px 12px 12px; }
.w01-mon-head .ic-main { width: 36px; height: 36px; }
.w01-mon-head .who { flex: 1; min-width: 0; }
.w01-mon-head .who b { display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
.w01-mon-head .who small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .06em; font-weight: 600; text-transform: uppercase; }
.w01-mon-head .icon-btn { margin-top: -4px; }
.acc-blue { color: var(--primary); } .acc-purple { color: var(--purple); } .acc-teal { color: var(--teal); }
.acc-green { color: var(--whatsapp-600); } .acc-amber { color: var(--amber-600); } .acc-pink { color: var(--pink); }
.w01-msgs { display: flex; flex-direction: column; gap: 3px; }
.w01-msg { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px 0 10px; border-radius: 8px; border: 1px solid transparent; background: var(--surface); color: inherit; box-shadow: 0 0 0 1px #EEF2F7; }
.w01-msg:hover { background: var(--primary-tint-2); color: inherit; }
.w01-msg .txt { flex: 1; min-width: 0; }
.w01-msg .l1, .w01-msg .l2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.w01-msg .l1 b { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.w01-msg .l1 time { font-size: 12px; color: var(--text-muted); flex: none; }
.w01-msg .l2 { margin-top: 5px; }
.w01-msg .l2 span:first-child { font-size: 12.5px; color: var(--text-muted); }
.w01-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 0 0; padding: 10px 0; border-radius: 8px; box-shadow: 0 0 0 1px #EEF2F7; }
.w01-stats.two { grid-template-columns: repeat(2, 1fr); }
.w01-stats > div { padding: 0 12px; border-left: 1px solid var(--rim); }
.w01-stats > div:first-child { border-left: 0; }
.w01-stats .k { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.w01-stats .k .ic { color: var(--primary); }
.w01-stats .v { display: block; margin: 6px 0 0 16px; font-size: 24px; font-weight: 600; color: var(--text-strong); }
.w01-mon-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 12px 4px 14px; font-size: 12.5px; color: var(--text-2); }
.w01-mon-foot .st { display: inline-flex; align-items: center; gap: 10px; }
.w01-mon-foot a { font-size: 15px; }
.w01-mon .empty { flex: 1; }
.w01-wa-count { margin-top: 4px; }

.w01-col5 { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.w01-mod.browsers { height: 230px; }
.w01-mod.claude { flex: 1; }
.w01-mod .frame-in { display: flex; flex-direction: column; padding: 12px 8px 8px; }
.w01-mod .w01-mon-head { padding-bottom: 8px; }
.w01-sess { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 10px; border-radius: 8px; box-shadow: 0 0 0 1px #EEF2F7; margin-bottom: 3px; color: inherit; }
.w01-sess:hover { background: var(--primary-tint-2); color: inherit; }
.w01-sess .site { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--rim); color: var(--primary); }
.w01-sess .txt { flex: 1; min-width: 0; }
.w01-sess b { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong); }
.w01-sess small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.w01-mod .btn-outline { margin-top: auto; height: 38px; }

.w01-dock { display: flex; align-items: center; gap: 14px; margin: 29px 6px 0; height: 85px; padding: 0 22px; background: rgba(255,255,255,.96); border: 1px solid var(--rim-soft); border-radius: 16px; box-shadow: var(--shadow); }
.w01-tile { display: flex; align-items: center; gap: 16px; flex: none; min-width: 148px; white-space: nowrap; height: 62px; padding: 0 18px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px #EDF1F6; color: inherit; }
.w01-tile:hover { background: var(--primary-tint-2); color: inherit; }
.w01-tile .ic { color: var(--primary); }
.w01-tile small { display: block; font-size: 11.5px; color: var(--text-2); }
.w01-tile b { display: block; font-size: 20px; font-weight: 600; color: var(--text-strong); margin-top: 1px; }
.w01-dock .divider-v { margin: 16px 18px; }
.w01-dock .btn { height: 56px; padding: 0 24px; font-size: 14.5px; gap: 14px; }
.w01-dock .spacer { flex: 1; }


/* build-only states (see plan 01 "States") */
.w01-slot { border: 1.5px dashed var(--rim-strong); border-radius: 14px; background: rgba(255,255,255,.35); }
.w01-row-scroll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.w01-row-scroll > * { scroll-snap-align: start; }
.w01-sess-empty { box-shadow: none; background: var(--surface-2); }
.w01-sess-empty .site { color: var(--text-faint); }

/* dark theme variant (01-vezerlofal-dark.html, tokens in css/theme-dark.css) */
[data-theme="dark"] .w01-msg, [data-theme="dark"] .w01-stats, [data-theme="dark"] .w01-sess,
[data-theme="dark"] .w01-tile { box-shadow: 0 0 0 1px var(--rim-soft); }
[data-theme="dark"] .w01-msg { background: var(--surface-2); }
[data-theme="dark"] .w01-dock { background: rgba(18, 26, 47, .9); }
[data-theme="dark"] .w01-tile { background: var(--surface-2); }
[data-theme="dark"] .w01-hub { box-shadow: var(--shadow), 0 0 24px rgba(61, 139, 255, .12); }
[data-theme="dark"] .w01-links .nub { background: #5B9BFB; box-shadow: 0 0 0 3px rgba(91, 155, 251, .22), 0 0 10px rgba(91, 155, 251, .6); }
[data-theme="dark"] .w01-net g { stroke: #34558F; }
[data-theme="dark"] .w01-net circle { fill: #1F3766; stroke: #34558F; }
[data-theme="dark"] .w01-net circle:nth-of-type(2), [data-theme="dark"] .w01-net circle:nth-of-type(3),
[data-theme="dark"] .w01-net circle:nth-of-type(5), [data-theme="dark"] .w01-net circle:nth-of-type(6) { fill: #4F8BEA; }
[data-theme="dark"] .w01-slot { background: rgba(18, 26, 47, .35); }
[data-theme="dark"] .w01-op-body { background: rgba(18, 26, 47, .97); }

@media (max-width: 768px) {
  .w01-wall { margin: 0; }
  .w01-master { width: auto; max-width: none; height: auto; }
  .w01-master .frame-in { display: block; padding: 28px 18px 30px; }
  .w01-capabilities, .w01-net, .w01-tagline, .w01-core-mark { display: none; }
  .w01-side { border: 0; padding: 0; margin-top: 18px; height: auto; align-items: stretch; }
  .w01-side .btn-outline { margin-left: 0; }
  .w01-hero h1 { font-size: 24px; text-align: center; }
  .w01-links { height: 18px; }
  .w01-links > * { display: none; }
  .w01-row, .w01-row-scroll { grid-template-columns: 1fr; grid-auto-flow: row; height: auto; }
  .w01-slot { display: none; }
  .w01-mon { height: auto; }
  .w01-col5 { height: auto; }
  .w01-mod.browsers { height: auto; }
  .w01-dock { flex-wrap: wrap; height: auto; padding: 12px; margin: 16px 0 0; }
  .w01-tile { width: calc(33.33% - 10px); padding: 0 10px; gap: 8px; }
  .w01-dock .divider-v, .w01-dock .spacer { display: none; }
  .w01-dock .btn { flex: 1; height: 44px; }
}

/* ===== 02.css ===== */
/* 02 UNIMAIL CORE home (prefix c02-) */
.c02 { margin: 0 2px; }
.c02-hero { display: flex; align-items: center; gap: 14px; height: 132px; padding: 0 16px 0 24px; margin-top: 0; }
.c02-hero-text { flex: 1; min-width: 0; }
.c02-hero h1 { font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.c02-hero p { margin-top: 8px; font-size: 17px; color: var(--text-2); }
.c02-launch { display: flex; align-items: center; gap: 22px; width: 322px; height: 100px; padding: 0 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--rim); box-shadow: var(--shadow-sm); color: inherit; }
.c02-launch:hover { border-color: var(--primary-soft); background: var(--primary-tint-2); color: inherit; }
.c02-launch.narrow { width: 272px; }
.c02-launch b { display: block; font-size: 19px; font-weight: 600; color: var(--primary-600); letter-spacing: -.01em; line-height: 1.2; }
.c02-launch small { display: block; margin-top: 5px; font-size: 13px; color: var(--text-muted); line-height: 1.35; }
.c02-launch .play { width: 78px; height: 78px; flex: none; }
.c02-launch .play::after { display: none; }
.c02-orb { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: #EEF3FB; color: var(--primary); box-shadow: inset 0 0 0 1px #E0E8F4; }
.c02-orb .term { width: 38px; height: 38px; border-radius: 8px; background: #1F2640; color: #fff; display: grid; place-items: center; }
.c02-orb.disabled { opacity: .5; }

.c02-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 13px; }
.c02-card { position: relative; height: 110px; padding: 14px 18px 12px 14px; display: flex; gap: 22px; }
.c02-card .tile { flex: none; width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary); box-shadow: inset 0 0 0 1px #DCE7FA; }
.c02-card .tile.green { background: var(--whatsapp-tint); color: var(--whatsapp-600); box-shadow: inset 0 0 0 1px #CDEFD8; }
.c02-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 7px; }
.c02-card .lbl { font-size: 14px; color: var(--text-strong); }
.c02-card .n { font-size: 30px; font-weight: 600; color: var(--text-strong); line-height: 1.25; margin-top: 3px; }
.c02-card .sub { font-size: 12.5px; color: var(--text-muted); margin-top: auto; }
.c02-card .go { position: absolute; right: 18px; bottom: 13px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }

.c02-grid { display: grid; grid-template-columns: minmax(0, 1fr) 512px; gap: 15px; margin-top: 14px; }
.c02-feed { padding: 14px 12px 10px 16px; min-height: 490px; display: flex; flex-direction: column; }
.c02-feed-head { display: flex; align-items: flex-start; gap: 12px; padding: 0 0 10px; }
.c02-feed-head .t { flex: 1; min-width: 0; }
.c02-feed-head h2 { font-size: 22px; font-weight: 600; }
.c02-feed-head p { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.c02-feed-head .seg { margin-top: 2px; }
.c02-feed-head .seg a, .c02-feed-head .seg button { height: 29px; padding: 0 11px; font-size: 13px; }
.c02-sort { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--rim); border-radius: 9px; background: var(--surface); font-size: 13px; color: var(--text-2); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7390' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; margin-top: 2px; }
.c02-rows { flex: 1; }
.c02-row { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 76px 52px 132px 26px; align-items: center; column-gap: 16px; min-height: 61px; padding: 4px 4px 4px 8px; border-top: 1px solid var(--rim-soft); }
.c02-row:first-child { border-top: 0; }
.c02-row .checkbox { margin: 0; }
.c02-row .src-icon { width: 40px; height: 40px; }
.c02-row .txt { min-width: 0; line-height: 1.3; }
.c02-row .txt b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c02-row .txt .src { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.c02-row .txt .src .ic { color: var(--text-faint); }
.c02-row .txt .snip { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c02-row time { font-size: 12.5px; color: var(--text-2); text-align: right; }
.c02-row .pill { justify-self: center; height: 22px; padding: 0 10px; }
.c02-row .btn { height: 36px; font-size: 13.5px; color: var(--primary-600); border-color: #CFDDF5; }
.c02-row.done .main b, .c02-row.done .main .snip { text-decoration: line-through; color: var(--text-faint); }
.c02-feed-foot { padding: 8px 4px 0; }
.c02-feed-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; }

.c02-side { display: flex; flex-direction: column; gap: 15px; }
.c02-jobs { padding: 16px 12px 14px 16px; min-height: 226px; }
.c02-panel-head { display: flex; align-items: center; gap: 10px; padding: 0 0 12px; }
.c02-panel-head h2 { font-size: 20px; font-weight: 600; }
.c02-panel-head .state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-left: 6px; }
.c02-panel-head .btn { margin-left: auto; height: 32px; font-size: 13px; }
.c02-job { display: grid; grid-template-columns: 40px minmax(0, 1fr) 200px 20px; align-items: center; gap: 16px; padding: 12px 8px 12px 10px; border: 1px solid var(--rim-soft); border-radius: 10px; margin-bottom: 8px; }
.c02-job b { display: block; font-size: 14px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c02-job small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c02-job .meter { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: 11.5px; color: var(--text-2); }
.c02-job .meter .pill { justify-self: start; }
.c02-approvals { padding: 16px 12px 14px 16px; min-height: 222px; }
.c02-approval { border: 1px solid var(--rim-soft); border-radius: 10px; padding: 12px 12px 14px 10px; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; }
.c02-approval .top { display: flex; align-items: flex-start; gap: 10px; }
.c02-approval .top b { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.c02-approval .route { font-size: 12.5px; color: var(--text-2); display: flex; gap: 7px; align-items: center; }
.c02-approval .when { font-size: 12.5px; color: var(--text-muted); text-align: right; }
.c02-approval .preview { grid-column: 2; font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c02-approval .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 14px; margin-top: 10px; }
.c02-approval .actions .btn { height: 38px; min-width: 118px; }
.c02-approval .actions .btn-primary { min-width: 178px; }
.c02-approval .err { grid-column: 2; color: var(--red); font-size: 12.5px; }

.c02-bar { display: flex; align-items: stretch; gap: 14px; margin-top: 16px; padding: 14px 22px 12px 28px; }
.c02-bar-group { display: flex; flex-direction: column; gap: 6px; }
.c02-bar-group > span { font-size: 13px; color: var(--text-2); }
.c02-bar-group .row { display: flex; gap: 13px; }
.c02-chan { display: flex; align-items: center; gap: 14px; width: 222px; height: 50px; padding: 0 16px 0 12px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); color: inherit; }
.c02-chan:hover { border-color: var(--primary-soft); color: inherit; }
.c02-chan .ic-src { color: var(--primary); }
.c02-chan .txt { flex: 1; min-width: 0; }
.c02-chan b { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-strong); }
.c02-chan small { display: block; font-size: 12px; color: var(--green-600); }
.c02-chan small.off { color: var(--text-muted); }
.c02-chan small.warn { color: var(--amber-600); }
.c02-bar .divider-v { margin: 6px 12px; }
.c02-bar .quick .btn { height: 42px; width: 180px; font-size: 14px; gap: 14px; }

@media (max-width: 768px) {
  .c02-hero { flex-wrap: wrap; height: auto; padding: 18px; }
  .c02-hero h1 { font-size: 28px; }
  .c02-launch, .c02-launch.narrow { width: 100%; }
  .c02-cards { grid-template-columns: 1fr 1fr; }
  .c02-card { flex-direction: column; gap: 8px; height: auto; padding-bottom: 36px; }
  .c02-grid { grid-template-columns: 1fr; }
  .c02-feed-head { flex-wrap: wrap; }
  .c02-row { grid-template-columns: 22px 40px minmax(0, 1fr) 26px; }
  .c02-row time, .c02-row .pill, .c02-row .btn { display: none; }
  .c02-bar { flex-direction: column; padding: 14px; }
  .c02-bar-group .row { flex-wrap: wrap; }
  .c02-chan, .c02-bar .quick .btn { width: calc(50% - 7px); }
  .c02-bar .divider-v { display: none; }
}

/* ===== 03.css ===== */
/* 03 Global search (prefix s03-) */
.s03-panel { padding: 17px 15px 18px 16px; }
.s03-top { display: flex; gap: 14px; align-items: center; }
.s03-q { flex: 1; min-width: 0; position: relative; }
.s03-q .ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--primary-600); }
.s03-q input { width: 100%; height: 53px; padding: 0 20px 0 56px; border: 1px solid var(--rim-strong); border-radius: 27px; font-size: 17px; color: var(--text-strong); background: var(--surface); outline: none; box-shadow: var(--shadow-sm); }
.s03-q input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(36,120,252,.14); }
.s03-filter { position: relative; display: flex; align-items: center; gap: 14px; height: 53px; padding: 0 14px 0 14px; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); }
.s03-filter:hover { border-color: var(--primary-soft); }
.s03-filter .ic-lead { color: var(--primary-600); }
.s03-filter span.v { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.s03-filter small { font-size: 11.5px; color: var(--text-muted); }
.s03-filter b { font-size: 13.5px; font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s03-filter.date { width: 286px; } .s03-filter.acc { width: 218px; } .s03-filter.type { width: 172px; }
.s03-filter > select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.s03-filter-btn { all: unset; display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; height: 100%; cursor: pointer; }
.s03-daterange { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: none; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--rim); border-radius: 12px; box-shadow: var(--shadow-lg); }
.s03-daterange.open { display: flex; align-items: flex-end; }
.s03-daterange .field { margin: 0; }
.s03-daterange .input { height: 36px; width: 150px; }

.s03-tabs { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.s03-tab { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text-strong); font-size: 14px; cursor: pointer; }
.s03-tab .ic { color: var(--primary-600); }
.s03-tab .wa-glyph .ic, .s03-tab .ic-whatsapp { color: var(--whatsapp); }
.s03-tab:hover { background: var(--surface-2); color: var(--text-strong); }
.s03-tab.active { border-color: var(--primary-400); background: var(--primary-tint-2); box-shadow: 0 0 0 1px var(--primary-400); }
.s03-tab .tab-count { background: var(--surface-3); }
.s03-tab.active .tab-count { background: #DCE8FD; color: var(--primary-600); }
.s03-scope { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.s03-scope .ic { color: var(--text-2); }

.s03-body { display: grid; grid-template-columns: 486px minmax(0, 1fr); gap: 13px; margin-top: 18px; height: 622px; }
.s03-results { display: flex; flex-direction: column; overflow: hidden; }
.s03-results-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 12px 18px; }
.s03-results-head h2 { font-size: 16.5px; font-weight: 600; }
.s03-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-strong); position: relative; }
.s03-sort select { border: 0; background: transparent; font-size: 13.5px; color: var(--text-strong); padding-right: 4px; cursor: pointer; }
.s03-list { flex: 1; overflow-y: auto; padding: 0 3px 4px 3px; }
.s03-res { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 18px; padding: 16px 16px 14px 18px; border-bottom: 1px solid var(--rim-soft); color: inherit; }
.s03-res:hover { background: var(--surface-2); color: inherit; }
.s03-res.sel { background: var(--primary-tint-2); border-radius: 8px; border-bottom-color: transparent; }
.s03-res.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--primary); }
.s03-res .src-icon { width: 46px; height: 46px; border-radius: 50%; margin-top: 2px; background: var(--surface-2); border-color: var(--rim-soft); }
.s03-res .src-icon.whatsapp { background: var(--whatsapp); }
.s03-res.sel .src-icon:not(.whatsapp) { background: transparent; border-color: transparent; }
.s03-res b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s03-res .snip { font-size: 13.5px; color: var(--text-2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s03-res .meta { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s03-res .meta .acc-label { color: var(--primary-600); }
.s03-res .when { text-align: right; font-size: 12.5px; color: var(--text-2); line-height: 1.9; white-space: nowrap; }
.s03-res .link { color: var(--primary-600); }

.s03-preview { display: flex; flex-direction: column; padding: 14px 14px 12px 20px; overflow: hidden; }
.s03-pv-head { display: flex; align-items: center; gap: 12px; }
.s03-chip { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-radius: 7px; background: var(--primary-tint-2); color: var(--primary-600); font-size: 13.5px; font-weight: 500; }
.s03-group { margin-left: auto; display: inline-flex; border: 1px solid var(--rim); border-radius: 10px; overflow: hidden; background: var(--surface); }
.s03-group .btn { border: 0; border-radius: 0; height: 42px; }
.s03-group .btn + .btn { border-left: 1px solid var(--rim); }
.s03-pv-head > .btn { height: 44px; }
.s03-scroll { flex: 1; overflow-y: auto; padding-right: 6px; }
.s03-mail h2 { font-size: 22px; font-weight: 600; margin: 18px 0 14px; }
.s03-from { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.s03-from .who b { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.s03-from .who span { font-size: 14px; color: var(--text-muted); margin-left: 6px; }
.s03-from .who small { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 3px; }
.s03-from .right { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.s03-text { margin: 16px 0 14px; font-size: 15px; line-height: 1.75; color: var(--text-strong); white-space: pre-line; }
mark.hl { background: transparent; color: var(--text-strong); font-weight: 700; }
.s03-att { border-top: 1px solid var(--rim); padding-top: 16px; }
.s03-att h3 { font-size: 13.5px; font-weight: 500; color: var(--text-2); margin-bottom: 10px; }
.s03-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.s03-link-card { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 14px 12px 14px 14px; border: 1px solid var(--rim-soft); border-radius: 10px; }
.s03-link-card .ic-lead { color: var(--primary-600); align-self: start; }
.s03-link-card b { display: block; font-size: 13.5px; font-weight: 500; color: var(--primary-600); }
.s03-link-card b.lav { color: var(--purple); }
.s03-link-card p { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }
.s03-link-card .t { font-size: 13px; font-weight: 600; color: var(--text-strong); margin-top: 6px; }
.s03-link-card small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.s03-link-card .btn { height: 34px; font-size: 13px; }
.btn-lavender { border-color: #D9C9FB; color: #7C4DDB; background: #FBF8FF; }
.btn-lavender:hover { background: var(--purple-tint); color: #6A3CCB; border-color: #C9B3F7; }
.s03-kv { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; margin: 20px 0; font-size: 14px; }
.s03-kv dt { color: var(--text-muted); } .s03-kv dd { margin: 0; color: var(--text-strong); }

@media (max-width: 768px) {
  .s03-top { flex-wrap: wrap; }
  .s03-q { flex-basis: 100%; }
  .s03-filter.date, .s03-filter.acc, .s03-filter.type { width: calc(50% - 7px); }
  .s03-tabs { flex-wrap: wrap; }
  .s03-scope { margin-left: 0; }
  .s03-body { grid-template-columns: 1fr; height: auto; }
  .s03-links { grid-template-columns: 1fr; }
  .s03-group { margin-left: 0; }
  .s03-pv-head { flex-wrap: wrap; }
}

/* ===== 04.css ===== */
/* 04 Activity & approvals (prefix a04-) */
.a04-frame { margin: 14px 14px 0; }
.a04-frame > .frame-in { padding: 22px 28px 12px 30px; }
.a04-head { display: flex; align-items: flex-start; gap: 24px; }
.a04-head .t { flex: 1; min-width: 0; }
.a04-head h1 { font-size: 38px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.a04-head p { font-size: 16px; color: var(--text-muted); margin-top: 6px; }
.a04-clock { padding-top: 16px; margin-right: 22px; }
.a04-clock small { display: block; font-size: 13px; color: var(--text-2); }
.a04-clock b { display: block; font-size: 27px; font-weight: 500; color: var(--text-strong); margin-top: 2px; }
.a04-search { position: relative; width: 322px; margin-top: 22px; }
.a04-search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.a04-search input { width: 100%; height: 46px; padding: 0 14px 0 48px; border: 1px solid var(--rim); border-radius: 10px; font-size: 14.5px; background: var(--surface); outline: none; }
.a04-search input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(36,120,252,.14); }
.a04-filter { margin-top: 22px; width: 52px; height: 46px; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); display: grid; place-items: center; color: var(--text-strong); cursor: pointer; position: relative; }

.a04-body { display: grid; grid-template-columns: 586px minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.a04-tabs { display: grid; grid-template-columns: 1fr 1.4fr 1fr; height: 56px; border: 1px solid var(--rim); border-radius: 12px; background: var(--surface); overflow: hidden; }
.a04-tabs button { display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; background: none; font-size: 15px; color: var(--text-strong); cursor: pointer; border-radius: 10px; }
.a04-tabs button .ic { color: var(--text-2); }
.a04-tabs button.active { box-shadow: inset 0 0 0 1.5px var(--primary-400); background: var(--primary-tint-2); color: var(--primary-600); font-weight: 500; }
.a04-tabs button.active .ic { color: var(--primary); }
.a04-tabs .tab-count { min-width: 26px; height: 24px; border-radius: 12px; }
.a04-tabs button.active .tab-count { background: #DCE8FD; color: var(--primary-600); }
.a04-list { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; max-height: 470px; overflow-y: auto; padding: 1px; }
.a04-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; padding: 16px 18px 16px 14px; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); color: inherit; box-shadow: var(--shadow-sm); cursor: pointer; }
.a04-item:hover { border-color: var(--primary-soft); color: inherit; }
.a04-item.sel { border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400), var(--shadow-sm); }
.a04-item .tile { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.a04-item b { display: block; font-size: 15px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a04-item .route { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a04-item .sub { display: block; font-size: 13px; color: var(--text-muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a04-item .side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.a04-item .pill { height: 24px; padding: 0 12px; }

.a04-detail { border: 1px solid var(--rim-soft); border-radius: 12px; padding: 12px 12px 12px 16px; background: var(--surface); }
.a04-dhead { display: flex; align-items: center; gap: 10px; padding-left: 18px; }
.a04-kind { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: .06em; color: var(--primary-600); text-transform: uppercase; }
.a04-id { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.a04-detail h2 { font-size: 28px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 0 18px; }
.a04-detail .lead { font-size: 15px; color: var(--text-muted); margin: 4px 0 0 18px; }
.a04-cards { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; margin-top: 10px; }
.a04-meta { border: 1px solid var(--rim-soft); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 74px 1fr; row-gap: 6px; align-items: center; font-size: 13.5px; }
.a04-meta dt { color: var(--text-2); }
.a04-meta dd { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--text-strong); font-size: 15px; min-width: 0; }
.a04-meta dd .avatar { width: 36px; height: 36px; font-size: 14px; }
.a04-scope { border-radius: 10px; padding: 16px 18px; background: var(--primary-tint-2); box-shadow: inset 0 0 0 1px #DDE8FB; }
.a04-scope small { display: block; font-size: 13.5px; font-weight: 600; color: var(--primary-600); }
.a04-scope b { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 700; color: var(--text-strong); margin: 10px 0 10px; }
.a04-scope b .ic { color: var(--primary-600); }
.a04-scope p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.a04-ptabs { display: flex; gap: 4px; margin-top: 8px; border-bottom: 1px solid var(--rim); }
.a04-ptabs button { position: relative; padding: 10px 14px; border: 0; background: none; font-size: 13.5px; color: var(--text-2); cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.a04-ptabs button.active { color: var(--primary-600); font-weight: 500; }
.a04-ptabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); border-radius: 2px; }
.a04-ptabs button .dot { width: 7px; height: 7px; box-shadow: none; }
.a04-pbox { border: 1px solid var(--rim-soft); border-top: 0; border-radius: 0 0 10px 10px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; min-height: 150px; }
.a04-pbox .body { font-size: 13.5px; line-height: 1.55; color: var(--text-strong); white-space: pre-line; }
.a04-pbox .file-card { width: 234px; align-self: start; }
.a04-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--amber-tint); color: #8A5A00; font-size: 13px; margin-top: 12px; }
.a04-edited { font-size: 12px; color: var(--purple); margin-bottom: 6px; display: inline-flex; gap: 6px; align-items: center; }
.a04-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 10px; }
.a04-actions .btn { height: 52px; padding: 0 26px; font-size: 15px; gap: 12px; }
.a04-actions .btn-outline { min-width: 212px; }
.a04-actions .btn-primary { min-width: 244px; }
.a04-actions .result { margin-right: auto; font-size: 13.5px; }
.a04-edit .field { margin-bottom: 10px; }
.a04-edit .textarea { min-height: 150px; }

.a04-timeline { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin: 12px -14px 0; padding: 14px 26px 12px; border: 1px solid var(--rim-soft); border-radius: 12px; background: rgba(255,255,255,.9); }
.a04-timeline h3 { font-size: 15.5px; font-weight: 600; margin-top: 16px; }
.a04-timeline p { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
.a04-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; }
.a04-steps::before { content: ""; position: absolute; top: 5px; left: 4px; right: calc(25% - 16px); border-top: 2px solid var(--primary-soft); }
.a04-step { position: relative; display: flex; gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); }
.a04-step::before { content: ""; position: absolute; top: -22px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px #fff; }
.a04-step .ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.a04-step small { display: block; font-size: 12.5px; color: var(--text-muted); }
.a04-step b { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-strong); margin-top: 2px; line-height: 1.35; }
.a04-step.current .ico { background: var(--lavender-tint); color: var(--purple); box-shadow: inset 0 0 0 2px #C4B2F5; }
.a04-step.current::before { background: #fff; box-shadow: 0 0 0 3px var(--primary); width: 9px; height: 9px; top: -21px; }
.a04-step.pending { border-style: solid; }
.a04-step.pending .ico { background: var(--surface-3); color: var(--text-faint); }
.a04-step.pending b { color: var(--text-muted); font-weight: 400; }
.a04-step.pending::before { background: #fff; box-shadow: 0 0 0 1.5px var(--grey); }
.a04-step.pending::after { content: ""; position: absolute; top: -17px; right: 100%; width: 16px; border-top: 2px dashed var(--grey); }
.a04-step.failed .ico { background: var(--red-tint); color: var(--red); }
.a04-steps.dashed-last::after { content: ""; position: absolute; top: 5px; left: calc(50% + 8px); right: calc(25% - 16px); border-top: 2px dashed #C2CBD8; }

@media (max-width: 768px) {
  .a04-frame { margin: 8px 0 0; }
  .a04-frame > .frame-in { padding: 18px 14px; }
  .a04-head { flex-wrap: wrap; }
  .a04-head h1 { font-size: 26px; }
  .a04-search { width: 100%; }
  .a04-body { grid-template-columns: 1fr; }
  .a04-cards { grid-template-columns: 1fr; }
  .a04-pbox { grid-template-columns: 1fr; }
  .a04-timeline { grid-template-columns: 1fr; margin: 14px 0 0; overflow-x: auto; }
  .a04-steps { grid-template-columns: repeat(4, 200px); }
  .a04-actions { flex-wrap: wrap; }
  .a04-actions .btn { min-width: 0; flex: 1; }
}

/* ===== 05.css ===== */
/* 05 Connections hub (prefix h05-) */
.h05-head { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px 4px 0 10px; height: 186px; }
.h05-head .t { width: 520px; }
.h05-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.h05-head h2 { font-size: 20px; font-weight: 400; color: var(--text-strong); margin-top: 4px; }
.h05-head p { font-size: 12.5px; color: var(--text-2); margin-top: 8px; line-height: 1.5; max-width: 510px; }
.h05-core { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 44px; border-radius: 32px; background: var(--surface); border: 1px solid var(--rim-strong); box-shadow: var(--shadow); font-size: 13px; letter-spacing: .24em; color: var(--text-strong); z-index: 2; }
.h05-core .ic { color: var(--primary); }
.h05-links { position: absolute; left: 0; right: 0; top: 54px; height: 132px; pointer-events: none; }
.h05-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.h05-links i { position: absolute; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #5B9BFB; box-shadow: 0 0 0 3px rgba(91,155,251,.18); }
.h05-actions { margin-left: auto; display: flex; gap: 20px; padding-top: 4px; }
.h05-actions .btn { height: 46px; padding: 0 22px; font-size: 16px; gap: 14px; }
.h05-actions .btn-primary { padding: 0 26px; }

.h05-racks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 0; }
.h05-rack { display: flex; flex-direction: column; min-height: 414px; padding: 12px 10px 10px; border-radius: 14px; background: rgba(255,255,255,.96); border: 1px solid var(--rim-soft); box-shadow: var(--shadow); }
.h05-rack-head { display: flex; align-items: center; gap: 14px; padding: 2px 6px 8px 10px; }
.h05-rack-head .ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); }
.h05-rack-head .ico.term { background: #5D5FEF; color: #fff; border-radius: 8px; width: 34px; height: 34px; }
.h05-rack-head .ico.wa { color: var(--whatsapp); }
.h05-rack-head .t { flex: 1; min-width: 0; }
.h05-rack-head b { display: block; font-size: 17px; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.h05-rack-head small { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.h05-rack-head .btn { height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--primary-600); border-color: #D5E2F6; gap: 8px; }
.h05-cards { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.h05-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 14px; padding: 8px 8px 7px 10px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); color: inherit; text-align: left; cursor: pointer; }
.h05-card:hover { border-color: var(--primary-soft); color: inherit; }
.h05-card-main { grid-column: 1 / 3; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; color: inherit; }
.h05-card-main:hover { color: inherit; }
.h05-card.sel { border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400); }
.h05-card .avatar { width: 40px; height: 40px; }
.h05-card b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h05-card .st { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 2px; }
.h05-card .st.ok { color: var(--green-600); } .h05-card .st.warn { color: var(--amber-600); } .h05-card .st.err { color: var(--red); } .h05-card .st.off { color: var(--text-muted); } .h05-card .st.busy { color: var(--primary-600); }
.h05-card .when { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.h05-card .prov { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.h05-card .prov .ic { color: var(--primary-600); }
.h05-info { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; margin-top: 12px; padding: 16px 16px 16px 18px; border-radius: 10px; background: var(--primary-tint-2); box-shadow: inset 0 0 0 1px #E0EAFA; font-size: 13.5px; color: var(--text-strong); line-height: 1.45; }
.h05-info .ic { color: var(--primary-600); }
.h05-info .term { width: 36px; height: 36px; border: 1.5px solid var(--text-strong); border-radius: 7px; display: grid; place-items: center; color: var(--text-strong); }
.h05-foot { margin-top: 8px; }
.h05-foot .btn { width: 100%; height: 40px; color: var(--primary-600); border-color: var(--rim); font-size: 14px; gap: 10px; }
.h05-qr { width: 100%; height: 44px; margin-top: 14px; gap: 14px; font-size: 14.5px; }
.h05-rack .link-arrow { justify-content: center; margin-top: 14px; font-size: 14px; }

.h05-detail { margin-top: 16px; padding: 12px 20px 12px 22px; border-radius: 16px; background: rgba(255,255,255,.96); border: 1px solid var(--rim-soft); box-shadow: var(--shadow); }
.h05-dhead { display: flex; align-items: center; gap: 18px; }
.h05-dhead > .ic { color: var(--primary); }
.h05-dhead .t small { display: block; font-size: 13px; color: var(--text-2); }
.h05-dhead .t b { display: block; font-size: 21px; font-weight: 700; color: var(--text-strong); }
.h05-dhead .pill { height: 30px; padding: 0 14px; border-radius: 15px; font-size: 14px; gap: 10px; margin-left: 20px; }
.h05-dhead .acts { margin-left: auto; display: flex; gap: 14px; }
.h05-dhead .acts .btn { height: 42px; }
.h05-split { display: inline-flex; border: 1px solid #CFDDF5; border-radius: 10px; overflow: hidden; }
.h05-split .btn { border: 0; border-radius: 0; color: var(--primary-600); }
.h05-split .btn + .btn { border-left: 1px solid #CFDDF5; width: 36px; padding: 0; }
.h05-tabs { display: flex; gap: 12px; margin-top: 8px; border-bottom: 1px solid var(--rim); }
.h05-tabs button { position: relative; border: 0; background: none; padding: 8px 12px; font-size: 13.5px; color: var(--text-strong); cursor: pointer; }
.h05-tabs button.active { color: var(--primary-600); font-weight: 500; }
.h05-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.h05-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.h05-box { border: 1px solid var(--rim-soft); border-radius: 10px; padding: 10px 16px; min-height: 150px; }
.h05-box h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.h05-box h3 a { font-size: 12.5px; font-weight: 400; display: inline-flex; gap: 6px; align-items: center; }
.h05-kv { display: grid; grid-template-columns: 134px 1fr; gap: 6px 10px; font-size: 12.5px; margin: 0; }
.h05-kv dt { color: var(--text-2); } .h05-kv dd { margin: 0; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.h05-perm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-strong); }
.h05-perm li { display: flex; align-items: center; gap: 12px; }
.h05-perm .chk { width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; background: var(--green); color: #fff; }
.h05-perm .chk.off { background: var(--surface-3); color: transparent; box-shadow: inset 0 0 0 1px var(--rim-strong); }
.h05-perm li.off { color: var(--text-muted); }
.h05-perm .pill { margin-left: auto; }
.h05-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.h05-events li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; color: var(--text-strong); }
.h05-events li time { color: var(--text-2); }
.h05-events .dot { width: 8px; height: 8px; box-shadow: none; }

@media (max-width: 768px) {
  .h05-head { flex-direction: column; height: auto; padding: 18px 4px; }
  .h05-head .t { width: auto; }
  .h05-core, .h05-links { display: none; }
  .h05-actions { margin-left: 0; }
  .h05-racks { grid-template-columns: 1fr; }
  .h05-rack { min-height: 0; }
  .h05-dhead { flex-wrap: wrap; }
  .h05-dhead .acts { margin-left: 0; flex-wrap: wrap; }
  .h05-grid { grid-template-columns: 1fr; }
}

/* ===== 06.css ===== */
/* 06 Add mailbox — wizard step 1 (prefix n06-) */
.n06-frame { margin: 16px 16px 0; }
.n06-frame > .frame-in { padding: 28px 36px 0 38px; position: relative; }
.n06-frame h1 { font-size: 46px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.n06-lead { font-size: 19px; color: var(--text-2); margin-top: 4px; }
.n06-planned { position: absolute; right: 30px; top: 52px; display: flex; align-items: center; gap: 18px; width: 330px; padding: 16px 20px; border: 0; border-radius: 12px; background: #F4F2FE; color: inherit; cursor: pointer; text-align: left; }
.n06-planned:hover { background: #EDE9FD; }
.n06-planned .ic-lead { color: var(--primary-600); }
.n06-planned b { display: block; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.n06-planned small { display: block; font-size: 13px; color: var(--text-2); margin-top: 3px; }
.n06-planned .chev { margin-left: auto; color: var(--primary-600); }


.n06-body { display: grid; grid-template-columns: 620px 1fr; gap: 58px; }
.n06-left h2 { font-size: 22px; font-weight: 700; }
.n06-left .sub { font-size: 15px; color: var(--text-2); margin-top: 6px; }
.n06-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.n06-prov { position: relative; display: flex; flex-direction: column; min-height: 226px; padding: 22px 20px 18px 22px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; }
.n06-prov:hover { border-color: var(--primary-soft); }
.n06-prov input { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; accent-color: var(--primary); margin: 0; }
.n06-prov:has(input:checked) { border: 1.5px solid var(--primary); background: var(--primary-tint-2); box-shadow: 0 0 0 1px var(--primary); }
.n06-prov.disabled { cursor: not-allowed; }
.n06-prov.disabled > :not(.n06-setup) { opacity: .55; }
.n06-prov.disabled .n06-setup .linkish { cursor: pointer; }
.n06-prov .logo { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.n06-prov .logo.g, .n06-prov .logo.m { background: #FFFFFF; border: 1px solid var(--rim); box-shadow: var(--shadow-sm); }
.n06-prov.disabled .logo { filter: grayscale(.35); opacity: .75; }
.n06-setup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.n06-setup .linkish { font-size: 12.5px; pointer-events: auto; }
.n06-guide { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.n06-guide h3 { display: flex; align-items: center; gap: 10px; }
.n06-guide ol { margin: 10px 0 6px 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.n06-guide ol li + li { margin-top: 6px; }
.n06-copy { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 6px 0; font-size: 12.5px; }
.n06-copy span { color: var(--text-muted); }
.n06-copy code { background: var(--surface-3); border: 1px solid var(--rim); border-radius: 6px; padding: 6px 8px; overflow-wrap: anywhere; font-size: 12px; }
.n06-env { background: var(--surface-3); border: 1px solid var(--rim); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; margin: 6px 0 10px; white-space: pre-wrap; }
.n06-warn { display: flex; gap: 8px; align-items: flex-start; background: var(--amber-tint); color: #8A5A00; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin: 8px 0; }
.n06-warn .ic { flex: none; margin-top: 1px; }
.n06-note { font-size: 12.5px; margin-top: 10px; }
.n06-prov .logo.i { background: none; color: var(--primary-600); }
.n06-prov b { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.n06-prov .kind { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.n06-prov p { font-size: 14px; color: var(--text-2); line-height: 1.45; margin-top: 14px; }
.n06-prov .pill { align-self: flex-start; margin-top: 10px; }
.n06-label { margin-top: 20px; }
.n06-label label { font-size: 15px; font-weight: 500; color: var(--text-strong); }
.n06-label .input { height: 42px; font-size: 16px; margin-top: 8px; }
.n06-label small { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }

.n06-right { border-left: 1px solid var(--rim); padding-left: 32px; min-height: 420px; position: relative; }
.n06-right h3 { font-size: 20px; font-weight: 700; margin-top: 30px; }
.n06-right > p { font-size: 14px; color: var(--text-2); margin-top: 16px; max-width: 340px; line-height: 1.5; }
.n06-rows { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; max-width: 318px; }
.n06-rows div { display: flex; gap: 16px; align-items: center; font-size: 14px; color: var(--text-2); line-height: 1.45; }
.n06-rows .ic-tile { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.n06-monitor { position: absolute; right: 0; top: 24px; width: 290px; }
.n06-monitor .scr { height: 270px; border-radius: 12px; padding: 7px; background: linear-gradient(180deg, #FBFCFE, #E7EDF4); border: 1px solid var(--rim-strong); box-shadow: var(--shadow); transform: perspective(900px) rotateY(-10deg); }
.n06-monitor .in { height: 100%; border-radius: 8px; background: #F7F9FC; display: grid; place-items: center; }
.n06-monitor .card { width: 180px; padding: 16px 14px; text-align: left; }
.n06-monitor .card b { display: block; font-size: 13px; color: var(--text-strong); }
.n06-monitor .card .input { height: 28px; font-size: 11px; margin: 10px 0 8px; padding: 0 8px; }
.n06-monitor .card .btn { height: 28px; width: 100%; font-size: 11px; }
.n06-monitor small { display: block; text-align: center; font-size: 10.5px; color: var(--text-muted); margin-top: 10px; }
.n06-monitor .stand { width: 90px; height: 42px; margin: -4px auto 0; background: linear-gradient(180deg, #E8EEF5, #D5DEE8); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.n06-imap { display: grid; grid-template-columns: 1fr 110px; gap: 0 14px; margin-top: 14px; }
.n06-imap .field { margin-bottom: 6px; gap: 4px; }
.n06-imap .field label { font-size: 12.5px; }
.n06-imap .span2 { grid-column: 1 / -1; }
.n06-imap .input { height: 34px; font-size: 13.5px; }


@media (max-width: 768px) {
  .n06-frame { margin: 8px 0 0; }
  .n06-frame > .frame-in { padding: 20px 16px 0; }
  .n06-frame h1 { font-size: 30px; }
  .n06-planned { position: static; width: auto; margin-top: 14px; }
  .wz-steps { width: auto; }
  .n06-body { grid-template-columns: 1fr; gap: 20px; }
  .n06-providers { grid-template-columns: 1fr; }
  .n06-prov { min-height: 0; }
  .n06-right { border-left: 0; padding-left: 0; min-height: 0; }
  .n06-monitor { display: none; }
  .wz-foot { flex-wrap: wrap; margin: 20px -16px 0; padding: 14px 16px 20px; }
  .wz-foot .btn-primary { min-width: 0; width: 100%; }
}

/* ===== 07.css ===== */
/* 07 Access & sync (prefix x07-) */
.x07-frame { margin: 16px 26px 0; }
.x07-frame > .frame-in { padding: 20px 26px 16px 28px; }
.x07-head { display: flex; align-items: flex-start; gap: 20px; margin-top: 12px; }
.x07-head .t { flex: 1; }
.x07-head h1 { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.x07-head p { font-size: 18px; color: var(--text-2); margin-top: 4px; }
.x07-steps { display: flex; width: 460px; margin: -24px 26px 0 0; }
.x07-steps .wz-step { font-size: 14px; }
.x07-steps .wz-step.done .n { background: var(--primary-tint); color: var(--primary-600); box-shadow: 0 0 0 4px #fff, 0 0 0 5px #C9DBFA; }
.x07-steps .wz-step.done { color: var(--text-2); }
.x07-back { font-size: 14px; }

.x07-body { display: grid; grid-template-columns: 716px minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.x07-left, .x07-card { border: 1px solid var(--rim-soft); border-radius: 12px; background: var(--surface); padding: 16px 16px 16px 18px; }
.x07-sec { display: flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.x07-sec .ic { color: var(--primary-600); }
.x07-sec small { display: block; font-size: 13px; font-weight: 400; color: var(--text-2); margin-top: 2px; }
.x07-mbox { display: flex; align-items: center; gap: 22px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--rim-soft); border-radius: 10px; }
.x07-mbox .logo { width: 48px; height: 48px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2F7BF5, #1BA1E2); }
.x07-mbox .logo.g { background: linear-gradient(135deg, #EA4335, #FBBC05 55%, #34A853); }
.x07-mbox .logo.i { background: var(--primary-tint-2); color: var(--primary-600); }
.x07-mbox .t { flex: 1; min-width: 0; }
.x07-mbox b { display: block; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.x07-mbox small { display: block; font-size: 14px; color: var(--text-2); margin-top: 3px; }
.x07-mbox .pill { height: 32px; padding: 0 16px; border-radius: 16px; font-size: 13.5px; gap: 8px; }
.x07-mbox .btn { height: 36px; color: var(--primary-600); }
.x07-perms { margin-top: 18px; }
.x07-perms > p { font-size: 13.5px; color: var(--text-2); margin: 4px 0 10px 50px; }
.x07-perm { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 9px 12px; border: 1px solid var(--rim-soft); border-radius: 10px; margin-bottom: 7px; }
.x07-perm .ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.x07-perm b { display: block; font-size: 15px; font-weight: 500; color: var(--text-strong); }
.x07-perm small { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.x07-perm .pill { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; gap: 8px; }
.x07-perm .pill .ic { width: 18px; height: 18px; }
.x07-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.x07-box { border: 1px solid var(--rim-soft); border-radius: 10px; padding: 14px 16px; }
.x07-box .x07-sec { font-size: 15px; font-weight: 500; }
.x07-box .x07-sec small { font-size: 12.5px; }
.x07-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.x07-checks label { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--text-strong); cursor: pointer; }
.x07-checks input { width: 20px; height: 20px; accent-color: var(--primary); }
.x07-box .input { margin-top: 18px; height: 44px; font-size: 16px; }

.x07-right { display: flex; flex-direction: column; gap: 18px; }
.x07-est { display: grid; grid-template-columns: 1fr 1px 210px; gap: 20px; margin-top: 16px; padding: 20px 22px; border-radius: 12px; background: var(--primary-tint-2); box-shadow: inset 0 0 0 1px #E0EAFA; }
.x07-est .lbl { font-size: 15px; font-weight: 500; color: var(--text-strong); }
.x07-est .big { font-size: 46px; font-weight: 700; color: var(--text-strong); letter-spacing: -.02em; margin-top: 8px; line-height: 1.1; }
.x07-est .unit { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.x07-est .sep { background: var(--rim); }
.x07-est ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.x07-est li { display: flex; align-items: center; gap: 14px; padding: 8px 0; font-size: 13.5px; color: var(--text-strong); border-bottom: 1px solid var(--rim); }
.x07-est li:last-child { border-bottom: 0; }
.x07-est li .ic { color: var(--primary-600); }
.x07-est li span:last-child { margin-left: auto; font-size: 15px; }
.x07-note { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); margin-top: 14px; }
.x07-note .ic { color: var(--primary-600); }
.x07-radios { margin-top: 16px; border: 1px solid var(--rim-soft); border-radius: 10px; padding: 6px 16px; }
.x07-radios label { display: grid; grid-template-columns: 30px 1fr; gap: 18px; align-items: start; padding: 12px 0; cursor: pointer; }
.x07-radios label + label { border-top: 0; }
.x07-radios input { width: 26px; height: 26px; accent-color: var(--primary); margin: 2px 0 0; }
.x07-radios b { display: block; font-size: 15px; font-weight: 500; color: var(--text-strong); }
.x07-radios small { display: block; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.x07-warn { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--lavender-tint); box-shadow: inset 0 0 0 1px #DCD2F7; font-size: 13.5px; color: var(--text-strong); }
.x07-warn .ic { color: var(--purple); }

.x07-foot { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.x07-foot .btn { height: 46px; padding: 0 24px; font-size: 15px; }
.x07-foot .date { margin-left: auto; font-size: 14px; color: var(--text-2); }
.x07-foot .btn-primary { gap: 14px; padding: 0 26px; }

@media (max-width: 768px) {
  .x07-frame { margin: 8px 0 0; }
  .x07-head { flex-direction: column; }
  .x07-head h1 { font-size: 28px; }
  .x07-steps { width: 100%; margin: 10px 0 0; }
  .x07-body { grid-template-columns: 1fr; }
  .x07-boxes { grid-template-columns: 1fr; }
  .x07-mbox { flex-wrap: wrap; }
  .x07-est { grid-template-columns: 1fr; }
  .x07-est .sep { display: none; }
  .x07-foot { flex-wrap: wrap; }
  .x07-foot .date { display: none; }
}

/* ===== 08.css ===== */
/* 08 Mailbox detail (prefix d08-) */
.d08-frame { margin: 24px 8px 0; }
.d08-frame > .frame-in { display: grid; grid-template-columns: 586px minmax(0, 1fr); min-height: 836px; padding: 0; }
.d08-left { padding: 24px 22px 16px 24px; border-right: 1px solid var(--rim); }
.d08-head { display: flex; align-items: flex-start; gap: 24px; }
.d08-avatar { flex: none; width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 500; color: var(--primary-600); background: #DCE8FB; }
.d08-avatar.lg { width: 106px; height: 106px; font-size: 32px; }
.d08-avatar.purple { background: #EAE0FC; color: #7C4DDB; } .d08-avatar.teal { background: #D9F2F5; color: #11899A; }
.d08-avatar.amber { background: #FDEBC8; color: #9A6300; } .d08-avatar.pink { background: #FBE0E8; color: #B23A60; } .d08-avatar.green { background: #D7F5E4; color: #12884A; }
.d08-id { flex: 1; min-width: 0; padding-top: 4px; }
.d08-id .name { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 700; color: var(--text-strong); }
.d08-id .name .icon-btn { color: var(--primary-600); width: 30px; height: 30px; }
.d08-id .addr { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--text-strong); margin-top: 6px; }
.d08-id .addr .ic-verified { color: var(--primary); }
.d08-id .meta { font-size: 14px; color: var(--text-2); margin-top: 8px; }
.d08-health { position: relative; flex: none; margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; font-size: 14.5px; color: var(--text-strong); cursor: pointer; }
.d08-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.d08-stat { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); }
.d08-stat .ico { width: 50px; height: 50px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.d08-stat b { display: block; font-size: 22px; font-weight: 600; color: var(--text-strong); }
.d08-stat small { display: block; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.d08-search { display: flex; gap: 12px; margin-top: 20px; }
.d08-search label { position: relative; flex: 1; }
.d08-search label .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.d08-search input { width: 100%; height: 44px; padding: 0 14px 0 44px; border: 1px solid var(--rim); border-radius: 10px; font-size: 14.5px; outline: none; }
.d08-search select { width: 152px; height: 44px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); font-size: 14.5px; }
.d08-list { margin-top: 14px; display: flex; flex-direction: column; max-height: 566px; overflow-y: auto; }
.d08-msg { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px 16px 12px 12px; border-bottom: 1px solid var(--rim-soft); color: inherit; }
.d08-msg:hover { background: var(--surface-2); color: inherit; }
.d08-msg.sel { background: var(--primary-tint-2); border-radius: 8px; border-bottom-color: transparent; }
.d08-msg .udot { width: 11px; height: 11px; margin-top: 5px; border-radius: 50%; background: var(--primary); }
.d08-msg .udot.read { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rim-strong); }
.d08-msg b { display: block; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.d08-msg .subj { display: block; font-size: 14.5px; color: var(--text-strong); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d08-msg .snip { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d08-msg .side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-size: 13.5px; color: var(--text-2); white-space: nowrap; }

.d08-right { padding: 20px 24px 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.d08-tabs { display: grid; grid-template-columns: repeat(3, 1fr); height: 56px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface-2); padding: 0; overflow: hidden; }
.d08-tabs button, .d08-tabs a { display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; background: none; font-size: 16px; color: var(--text-strong); cursor: pointer; }
.d08-tabs .active { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--primary-400); border-radius: 10px; color: var(--primary-600); }
.d08-card { border: 1px solid var(--rim-soft); border-radius: 12px; background: var(--surface); padding: 22px 20px 16px 20px; }
.d08-over { display: flex; align-items: center; gap: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--rim); }
.d08-over .d08-id .name { font-size: 28px; }
.d08-over .desc { font-size: 15px; color: var(--text-muted); margin-top: 6px; }
.d08-over .h { margin-left: auto; align-self: flex-start; padding: 12px 0 0 30px; border-left: 1px solid var(--rim); text-align: right; min-height: 90px; }
.d08-over .h b { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-size: 16px; font-weight: 500; color: var(--text-strong); }
.d08-over .h small { display: block; font-size: 14px; color: var(--text-2); margin-top: 8px; }
.d08-facts { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 14px; }
.d08-facts > div { padding: 8px 20px; border-left: 1px solid var(--rim); }
.d08-facts > div:first-child { border-left: 0; padding-left: 4px; }
.d08-facts small { display: block; font-size: 14px; color: var(--text-2); }
.d08-facts b { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; color: var(--text-strong); margin-top: 8px; }
.d08-facts .ok { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--green-600); margin-top: 10px; }
.d08-facts .ok .ic { color: var(--green); }
.d08-h2 { font-size: 18px; font-weight: 600; color: var(--text-strong); margin: 4px 0 -6px 12px; }
.d08-quick { display: grid; grid-template-columns: 1fr 1fr 0.95fr; gap: 12px; }
.d08-q { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid var(--primary-400); border-radius: 8px; background: var(--primary-tint-2); color: inherit; cursor: pointer; text-align: left; font: inherit; }
.d08-q:hover { background: var(--primary-tint); color: inherit; }
.d08-q .ic { color: var(--primary-600); }
.d08-q b { display: block; font-size: 15px; font-weight: 500; color: var(--primary-600); }
.d08-q small { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.d08-q.plain { background: var(--surface); border-color: var(--primary-400); }
.d08-q.danger { background: var(--surface-2); border-color: var(--rim); }
.d08-q.danger .ic, .d08-q.danger b { color: var(--red); }
.d08-q:disabled { opacity: .5; cursor: not-allowed; }
.d08-events { padding: 16px 16px 8px; }
.d08-events header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rim); }
.d08-events header b { font-size: 17px; font-weight: 600; color: var(--text-strong); }
.d08-events header a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.d08-ev { display: grid; grid-template-columns: 36px 1fr auto; gap: 20px; align-items: center; padding: 12px 10px 12px 4px; border-bottom: 1px solid var(--rim-soft); }
.d08-ev:last-child { border-bottom: 0; }
.d08-ev .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.d08-ev .ico.ok { background: var(--green); color: #fff; }
.d08-ev .ico.err { background: var(--red-tint); color: var(--red); }
.d08-ev .ico.warn { background: var(--amber-tint); color: var(--amber-600); }
.d08-ev b { display: block; font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.d08-ev small { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 3px; }
.d08-ev time { font-size: 13.5px; color: var(--text-2); }
.d08-foot { display: flex; justify-content: space-between; margin: 14px 12px 0; font-size: 11px; letter-spacing: .12em; color: var(--text-muted); }
.d08-banner { display: flex; align-items: center; gap: 18px; margin: 16px 8px 0; padding: 14px 20px; border-radius: 12px; background: var(--green-tint); box-shadow: inset 0 0 0 1px #BFEBDD; }
.d08-banner .ic { color: var(--green-600); }
.d08-banner p { flex: 1; font-size: 14.5px; color: #065E48; }
.d08-sig { width: 100%; min-height: 120px; }
.d08-pre { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; white-space: pre-line; color: var(--text-2); }

@media (max-width: 768px) {
  .d08-frame { margin: 8px 0 0; }
  .d08-frame > .frame-in { grid-template-columns: 1fr; }
  .d08-left { border-right: 0; border-bottom: 1px solid var(--rim); padding: 16px; }
  .d08-head { flex-wrap: wrap; }
  .d08-stats { grid-template-columns: 1fr 1fr 1fr; }
  .d08-stat { flex-direction: column; gap: 6px; align-items: flex-start; }
  .d08-right { padding: 16px; }
  .d08-over { flex-wrap: wrap; }
  .d08-over .h { border-left: 0; padding-left: 0; text-align: left; }
  .d08-facts, .d08-quick { grid-template-columns: 1fr; }
  .d08-facts > div { border-left: 0; padding-left: 4px; }
}

/* ===== 09.css ===== */
/* 09 Unified inbox (prefix i09-) */
.i09-frame { margin: 22px -6px 0; }
.i09-frame > .frame-in { padding: 16px 20px 0 18px; }
.i09-head { display: flex; align-items: flex-end; gap: 20px; padding: 0 16px 0 16px; }
.i09-head .t { flex: 1; }
.i09-head .crumbline { font-size: 13px; }
.i09-head h1 { font-size: 36px; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; }
.i09-head p { font-size: 17px; color: var(--text-2); margin-top: 4px; }
.i09-head .when { text-align: right; padding-bottom: 20px; }
.i09-head .when b { display: block; font-size: 16px; font-weight: 400; color: var(--text-2); }
.i09-head .when small { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 6px; }
.i09-body { display: grid; grid-template-columns: 230px 612px minmax(0, 1fr); gap: 0; margin-top: 14px; border-top: 1px solid var(--rim-soft); min-height: 716px; }

.i09-rail { padding: 16px 20px 16px 0; border-right: 1px solid var(--rim-soft); }
.i09-acc { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 12px 10px 12px 14px; border-radius: 6px; color: inherit; margin-bottom: 6px; }
.i09-acc:hover { background: var(--surface-2); color: inherit; }
.i09-acc.active { background: var(--primary-tint); }
.i09-acc.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--primary); }
.i09-acc .ic-box { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.i09-acc .ic-box.blue { background: #EAE3FC; color: #9C66FC; } /* design: work mailbox uses a violet-pink icon */
.i09-acc .ic-box.purple { background: #F2E4FB; color: #A156D8; } .i09-acc .ic-box.teal { background: #D9F4F4; color: #1FA7B8; }
.i09-acc .ic-box.amber { background: #FDEBC8; color: #B87500; } .i09-acc .ic-box.pink { background: #FBE0E8; color: #C23B63; }
.i09-acc .ic-box.green { background: #D7F5E4; color: #12884A; } .i09-acc .ic-box.all { background: none; color: var(--primary-600); }
.i09-acc b { display: block; font-size: 15px; font-weight: 500; color: var(--text-strong); }
.i09-acc small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i09-acc .n { font-size: 14px; color: var(--text-strong); }
.i09-acc.active .n { color: var(--primary-600); }
.i09-rail h4 { font-size: 11.5px; letter-spacing: .14em; color: var(--text-2); font-weight: 500; margin: 24px 0 8px 14px; padding-top: 16px; border-top: 1px solid var(--rim); }
.i09-view { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 10px 10px 10px 14px; border-radius: 6px; font-size: 14.5px; color: var(--text-strong); }
.i09-view:hover { background: var(--surface-2); color: var(--text-strong); }
.i09-view.active { background: var(--primary-tint); color: var(--primary-600); }
.i09-view .ic { color: var(--text-2); }

.i09-list { padding: 16px 14px 0 20px; border-right: 1px solid var(--rim-soft); display: flex; flex-direction: column; min-width: 0; }
.i09-search { position: relative; }
.i09-search .ic-s { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.i09-search input { width: 100%; height: 42px; padding: 0 48px 0 44px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14px; outline: none; background: var(--surface); }
.i09-search .icon-btn { position: absolute; right: 6px; top: 5px; }
.i09-rows { flex: 1; margin-top: 16px; overflow-y: auto; max-height: 700px; }
.i09-row { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr); gap: 4px 18px; padding: 12px 14px 14px 16px; border-bottom: 1px solid var(--rim-soft); color: inherit; cursor: pointer; }
.i09-row:hover { background: var(--surface-2); color: inherit; }
.i09-row.sel { background: var(--primary-tint-2); border-radius: 8px; border-bottom-color: transparent; }
.i09-row .chk { display: flex; flex-direction: column; align-items: center; gap: 44px; padding-top: 8px; }
.i09-row .chk input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.i09-row .udot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.i09-row .udot.read { visibility: hidden; }
.i09-row .avatar { width: 44px; height: 44px; font-size: 16px; margin-top: 2px; }
.i09-row .l1 { display: flex; align-items: center; gap: 12px; }
.i09-row .l1 b { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.i09-row .l1 .pill { margin-left: auto; height: 24px; padding: 0 12px; font-size: 12.5px; border-radius: 12px; }
.i09-row .l1 .att { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); min-width: 34px; }
.i09-row .l1 time { font-size: 13px; color: var(--text-2); min-width: 44px; text-align: right; white-space: nowrap; }
.i09-row .addr { font-size: 13px; color: var(--text-2); }
.i09-row .subj { font-size: 15px; color: var(--text-strong); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.i09-row.unread .subj { font-weight: 600; }
.i09-row .snip { font-size: 13.5px; color: var(--text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.i09-right { padding: 16px 0 12px 16px; display: flex; flex-direction: column; min-width: 0; }
.i09-filters { display: flex; gap: 12px; }
.i09-filters select, .i09-filters .btn { height: 42px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); font-size: 14px; color: var(--text-strong); padding: 0 12px; }
.i09-filters select { flex: 1; min-width: 0; }
.i09-bulk { display: flex; align-items: center; gap: 10px; height: 42px; font-size: 14px; }
.i09-bulk b { margin-right: 8px; }
.i09-pv { margin-top: 12px; padding: 12px 8px 0 20px; border-left: 1px solid var(--rim-soft); flex: 1; display: flex; flex-direction: column; }
.i09-pv h2 { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 700; }
.i09-pv h2 a { color: var(--primary); display: inline-flex; }
.i09-pv h2 .acts { margin-left: auto; display: flex; gap: 8px; }
.i09-pv h2 .acts .starred { color: #F5B400; }
.i09-from { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; margin-top: 14px; }
.i09-from .avatar { width: 48px; height: 48px; }
.i09-from b { display: block; font-size: 15px; font-weight: 600; color: var(--text-strong); }
.i09-from small { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.i09-from time { font-size: 13.5px; color: var(--text-2); }
.i09-text { font-size: 14.5px; line-height: 1.55; color: var(--text-strong); margin: 16px 0 12px; white-space: pre-line; max-height: 196px; overflow-y: auto; }
.i09-atts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rim); }
.i09-atts .file-card { width: auto; }
.i09-atts .file-card .dl { margin-left: auto; color: var(--primary-600); }
.i09-ai { margin-top: 12px; padding: 12px 18px 10px 16px; border-radius: 10px; background: var(--primary-tint-2); box-shadow: inset 0 0 0 1.5px var(--primary-soft); }
.i09-ai b { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--primary-600); }
.i09-ai p { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 8px 0 10px 38px; }
.i09-ai .btn { float: right; }
.i09-ai::after { content: ""; display: block; clear: both; }
.i09-ai .src { font-size: 11.5px; color: var(--text-faint); margin-left: 38px; }
.i09-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; }
.i09-actions .btn { height: 42px; font-size: 13.5px; }
.i09-split { display: inline-flex; border-radius: 10px; overflow: hidden; position: relative; }
.i09-split .btn { border-radius: 0; }
.i09-split .btn + .btn { border-left: 1px solid rgba(255,255,255,.35); width: 32px; padding: 0; }

@media (max-width: 768px) {
  .i09-frame { margin: 8px 0 0; }
  .i09-head { flex-wrap: wrap; }
  .i09-head .when { text-align: left; }
  .i09-body { grid-template-columns: 1fr; }
  .i09-rail { display: flex; gap: 8px; overflow-x: auto; border-right: 0; padding: 10px 0; }
  .i09-rail h4 { display: none; }
  .i09-acc, .i09-view { flex: none; margin: 0; }
  .i09-acc small { display: none; }
  .i09-list { border-right: 0; padding: 10px 0; }
  .i09-right { padding: 10px 0; }
  .i09-pv { border-left: 0; padding-left: 0; }
  .i09-atts { grid-template-columns: 1fr; }
  .i09-actions { flex-wrap: wrap; }
}
/* the Chats view (plans/beeper.md step 5) */
.i09-pv-chat h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; }
.i09-cmeta { display: flex; gap: 8px; margin: 8px 0 12px; }
.i09-clog { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #F4F6FA; max-height: 460px; overflow-y: auto; }
.i09-clog .bb { max-width: 80%; padding: 8px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; }
.i09-clog .bb.out { align-self: flex-end; background: #DDF6E4; }
.i09-clog .bb small { display: block; font-size: 11.5px; color: var(--text-2); margin-bottom: 2px; }
.i09-cacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ===== 10.css ===== */
/* 10 Message & conversation (prefix t10-) */
.t10-frame { margin: 16px 2px 0; }
.t10-frame > .frame-in { padding: 12px 16px 12px 18px; }
.t10-tool { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.t10-tool .btn { height: 38px; }
.t10-tool .sq { width: 44px; padding: 0; }
.t10-tool .sep { width: 1px; height: 30px; background: var(--rim); margin: 0 8px; }
.t10-tool .q { position: relative; flex: 1; margin: 0 14px 0 20px; }
.t10-tool .q .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.t10-tool .q input { width: 100%; height: 38px; padding: 0 12px 0 42px; border: 1px solid var(--rim); border-radius: 8px; font-size: 13.5px; outline: none; }
.t10-body { display: grid; grid-template-columns: 315px minmax(0, 1fr) 430px; border-top: 1px solid var(--rim-soft); }
.t10-left { padding: 20px 14px 0 4px; border-right: 1px solid var(--rim-soft); }
.t10-left h2 { font-size: 20px; font-weight: 700; padding-left: 10px; }
.t10-left .cnt { font-size: 14px; color: var(--text-2); margin: 4px 0 14px 10px; }
.t10-trow { position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 4px 14px; padding: 12px 12px 12px 12px; border-bottom: 1px solid var(--rim-soft); color: inherit; cursor: pointer; }
.t10-trow:hover { background: var(--surface-2); color: inherit; }
.t10-trow.sel { background: var(--primary-tint-2); border-radius: 8px; border-bottom-color: transparent; }
.t10-trow.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--primary); }
.t10-trow .avatar { grid-row: span 3; width: 46px; height: 46px; }
.t10-trow b { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.t10-trow time { font-size: 12.5px; color: var(--text-2); }
.t10-trow .s { grid-column: 2 / 4; font-size: 14px; font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t10-trow .sn { grid-column: 2 / 4; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t10-center { padding: 20px 18px 0 18px; border-right: 1px solid var(--rim-soft); display: flex; flex-direction: column; min-width: 0; }
.t10-subj { display: flex; align-items: center; gap: 14px; }
.t10-subj h1 { font-size: 22px; font-weight: 700; }
.t10-subj .pill { height: 24px; padding: 0 12px; font-size: 12.5px; }
.t10-msgs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-height: 516px; overflow-y: auto; padding-right: 2px; }
.t10-msg { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 10px 18px 10px 12px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface-2); }
.t10-msg.last { background: var(--primary-tint-2); }
.t10-msg .avatar { width: 40px; height: 40px; font-size: 14px; }
.t10-msg .hd { display: flex; align-items: flex-start; gap: 8px; }
.t10-msg .hd b { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.t10-msg .hd .addr { font-size: 13px; color: var(--text-2); margin-left: 6px; }
.t10-msg .hd .right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.t10-msg .to { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.t10-msg .tx { font-size: 13.5px; line-height: 1.38; color: var(--text-strong); margin-top: 6px; white-space: pre-line; }
.t10-msg .file-card { margin-top: 8px; width: 250px; }
.t10-msg .file-card .dl { margin-left: auto; color: var(--primary-600); }
.t10-msg.note { background: #F7F7F9; border-style: dashed; }
mark.find { background: #FFE89A; color: inherit; border-radius: 2px; }

.t10-compose { margin-top: 10px; padding: 8px 0 14px; border-top: 1px solid var(--rim); }
.t10-ctabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rim); padding: 0 16px; }
.t10-ctabs button { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 2px; border: 0; background: none; font-size: 14px; color: var(--text-2); cursor: pointer; }
.t10-ctabs button.active { color: var(--primary-600); font-weight: 500; }
.t10-ctabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.t10-crow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.t10-crow label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.t10-crow select, .t10-crow input { height: 38px; border: 1px solid var(--rim); border-radius: 8px; padding: 0 12px; font-size: 13.5px; background: var(--surface); }
.t10-crow select { width: 250px; }
.t10-crow input { flex: 1; min-width: 0; }
.t10-fmt { display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 0 6px; border: 1px solid var(--rim); border-radius: 8px; margin-left: auto; }
.t10-fmt .icon-btn { width: 30px; height: 30px; }
.t10-compose textarea { width: 100%; min-height: 58px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--rim); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; outline: none; }
.t10-compose textarea:focus { border-color: var(--primary-400); }
.t10-catts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.t10-catts .file-card { max-width: 100%; }
.t10-cfoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.t10-cfoot .sq { width: 40px; height: 40px; padding: 0; }
.t10-cfoot .saved { font-size: 12.5px; color: var(--text-muted); margin-left: 8px; }
.t10-cfoot .btn-primary { height: 40px; min-width: 188px; gap: 12px; }
.t10-cfoot .spacer { flex: 1; }

.t10-right { padding: 12px 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.t10-rtabs { display: flex; gap: 20px; border-bottom: 1px solid var(--rim); padding: 0 8px; }
.t10-rtabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 2px; border: 0; background: none; font-size: 13.5px; color: var(--text-strong); cursor: pointer; }
.t10-rtabs button .ic { color: var(--text-2); }
.t10-rtabs button.active { color: var(--primary-600); font-weight: 500; }
.t10-rtabs button.active .ic { color: var(--primary); }
.t10-rtabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.t10-card { border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); padding: 14px 16px; }
.t10-card h3 { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.t10-card h3 .pill { margin-left: auto; }
.t10-card h3 a { margin-left: auto; font-size: 13px; font-weight: 400; display: inline-flex; gap: 6px; align-items: center; }
.t10-card h3 .ic-lead { color: var(--primary-600); }
.t10-card ul { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text-strong); }
.t10-card ul li { margin-bottom: 3px; }
.t10-card h4 { font-size: 15px; font-weight: 600; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rim); }
.t10-card p { font-size: 13.5px; color: var(--text-strong); margin-top: 6px; line-height: 1.5; }
.t10-dl { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 12px; border-radius: 6px; background: var(--red-tint); color: #C9323F; font-size: 13px; }
.t10-dl.sugg { background: var(--lavender-tint); color: #6E53C2; }
.t10-stale { font-size: 12.5px; color: var(--amber-600); margin-top: 8px; }
.t10-kv { display: grid; grid-template-columns: 40px 1fr; gap: 12px; margin-top: 12px; }
.t10-kv .ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.t10-kv b { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.t10-kv dl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin: 6px 0 0; font-size: 13px; }
.t10-kv dt { color: var(--text-2); } .t10-kv dd { margin: 0; color: var(--text-strong); display: flex; align-items: center; gap: 8px; }
.t10-link { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; margin-top: 10px; }
.t10-link .ic-l { color: var(--primary-600); }
.t10-link a.t { font-size: 13.5px; font-weight: 500; }
.t10-link small { display: block; font-size: 11.5px; color: var(--text-2); word-break: break-all; }
.t10-link .btn { height: 28px; font-size: 11.5px; padding: 0 10px; }
.t10-cc { display: grid; grid-template-columns: 36px 1fr; gap: 12px; }
.t10-cc .term { width: 32px; height: 32px; border-radius: 6px; background: #1F2640; color: #fff; display: grid; place-items: center; }
.t10-cc b { font-size: 15px; font-weight: 600; }
.t10-cc p { font-size: 13px; color: var(--text-2); }
.t10-cc .btn { grid-column: 1 / -1; margin-top: 8px; }

/* built screen extras */
.t10-found { font-size: 12.5px; color: var(--text-2); min-width: 0; white-space: nowrap; }
.t10-found:empty { display: none; }
.t10-tool .q + .t10-found { margin-left: -8px; margin-right: 6px; }
.t10-trow:focus-visible, .t10-msg:target { outline: 2px solid var(--primary-400); outline-offset: 1px; }
.t10-msg .hd .right .icon-btn { width: 26px; height: 26px; color: var(--text-2); }
.t10-msg.note .pill { height: 20px; font-size: 11.5px; margin-left: 4px; }
.t10-rcpt { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--text-2); min-width: 0; }
.t10-rcpt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t10-rcpt b { color: var(--text-strong); font-weight: 500; }
.t10-compose .field-error { margin-top: 6px; }
.t10-cfoot .t10-never { font-size: 12.5px; }
.t10-card .field-error { margin-top: 8px; }
.t10-card .t10-regen { margin-top: 12px; }
.t10-card .src { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.t10-card p.muted { color: var(--text-muted); }
.t10-link small.muted { color: var(--text-muted); }
.t10-compose p.muted { padding: 16px 4px; }

@media (max-width: 768px) {
  .t10-msg > div { min-width: 0; }
  .t10-msg .hd { flex-wrap: wrap; }
  .t10-msg .hd .addr { margin-left: 0; overflow-wrap: anywhere; }
  .t10-msg .hd .right { margin-left: 0; flex-basis: 100%; }
  .t10-msg .tx { overflow-wrap: anywhere; }
  .t10-ctabs { gap: 16px; padding: 0 4px; overflow-x: auto; }
  .t10-cfoot { flex-wrap: wrap; }
  .t10-cfoot .t10-never { flex-basis: 100%; order: 9; }
  .t10-frame { margin: 8px 0 0; }
  .t10-tool { flex-wrap: wrap; }
  .t10-tool .q { flex-basis: 100%; margin: 6px 0; }
  .t10-body { grid-template-columns: 1fr; }
  .t10-left, .t10-center { border-right: 0; }
  .t10-right { order: -1; padding-left: 0; }
  .t10-crow { flex-wrap: wrap; }
  .t10-crow select { width: 100%; }
  .t10-fmt { margin-left: 0; }
}

/* ===== 11.css ===== */
/* 11 Start Grind (prefix g11-) */
.g11-head { display: flex; align-items: flex-start; gap: 20px; padding: 26px 20px 0 50px; }
.g11-head h1 { font-size: 36px; font-weight: 700; letter-spacing: -.01em; }
.g11-head p { font-size: 17px; color: var(--text-2); margin-top: 2px; }
.g11-meta { margin-left: auto; display: flex; gap: 12px; }
.g11-mcard { display: flex; align-items: center; gap: 18px; min-width: 248px; height: 78px; padding: 0 20px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-strong); }
.g11-mcard.soft { background: var(--primary-tint-2); min-width: 276px; color: var(--primary-600); }
.g11-mcard > .ic { color: var(--text-strong); }
.g11-mcard.soft > .ic { color: var(--primary); }
.g11-mcard span { display: flex; flex-direction: column; }
.g11-mcard small { font-size: 13px; color: var(--text-2); }
.g11-mcard b { font-size: 16px; font-weight: 500; }
.g11-mcard a { color: inherit; }

.g11-frame { margin: 22px 20px 0 25px; }
.g11-in { display: grid; grid-template-columns: minmax(0, 1fr) 466px; gap: 10px; padding: 6px; background: transparent !important; border: 0 !important; }
.g11-set, .g11-queue { border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); }
.g11-set { padding: 14px 18px 18px 22px; }
.g11-set h2, .g11-queue h2 { display: flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 600; }
.g11-set h2 .ic { color: var(--primary); }
.g11-sec { margin-top: 20px; }
.g11-sec h3 { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; }
.g11-sec h3 .linkish { margin-left: auto; font-size: 13.5px; font-weight: 400; }
.g11-sec .sub { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }
.g11-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.g11-box, .g11-cat { display: flex; align-items: center; gap: 14px; min-width: 0; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); cursor: pointer; transition: background .12s, border-color .12s; }
.g11-box { height: 62px; padding: 0 12px; gap: 12px; }
.g11-box.on, .g11-cat.on { background: var(--primary-tint-2); border-color: #CFDDF6; }
.g11-box .mi { color: var(--primary-600); flex: none; }
.g11-box span, .g11-cat span:last-child { display: flex; flex-direction: column; min-width: 0; }
.g11-box b { font-size: 13.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g11-box small, .g11-cat small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g11-cats { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 0.8fr; gap: 10px; margin-top: 12px; }
.g11-cat { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; height: 74px; padding: 8px 12px; }
.g11-cat span:last-child { display: contents; }
.g11-cat small { grid-column: 1 / -1; text-align: center; font-size: 12px; }
.g11-cat .ci { color: var(--primary-600); flex: none; display: grid; }
.g11-cat.c-decision.on { background: var(--lavender-tint); border-color: #E0D8F7; }
.g11-cat.c-decision .ci { color: #7D63C9; }
.g11-cat:not(.on) .ci { color: var(--text-2); }
.g11-cat b { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.g11-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.g11-order { position: relative; display: flex; align-items: center; margin-top: 12px; }
.g11-order .ic { position: absolute; left: 16px; color: var(--text-2); pointer-events: none; }
.g11-order select { width: 100%; height: 54px; padding: 0 16px 0 52px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); font-size: 15px; color: var(--text-strong); }
.g11-est { display: flex; align-items: center; gap: 22px; margin-top: 12px; height: 54px; }
.g11-est > span { display: flex; align-items: center; gap: 22px; }
.g11-est .ic { color: var(--primary); }
.g11-est > span > span { display: flex; flex-direction: column; gap: 0; }
.g11-est b { white-space: nowrap; font-size: 19px; font-weight: 600; color: var(--text-strong); }
.g11-est small { font-size: 13.5px; color: var(--text-2); }
.g11-est i { width: 1px; height: 44px; background: var(--rim); }
.g11-toggles { display: flex; gap: 52px; margin-top: 12px; }
.g11-toggles label { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; }
.g11-toggles span { display: flex; flex-direction: column; }
.g11-toggles b { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.g11-toggles small { font-size: 13px; color: var(--text-2); }
.g11-go { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 26px 0 0 260px; }
.g11-start { display: inline-flex; align-items: center; justify-content: center; gap: 22px; width: 292px; height: 58px; border: 0; border-radius: 29px;
  background: linear-gradient(180deg, #5C9BFA, #2F74F0); color: #fff; font-size: 18px; font-weight: 500; cursor: pointer;
  box-shadow: 0 8px 20px rgba(47,116,240,.28); }
.g11-start:hover { filter: brightness(1.05); }
.g11-start:disabled { background: #BFCBE0; box-shadow: none; cursor: not-allowed; }
.g11-go p { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-2); }
.g11-go p .ic { color: var(--primary); }

.g11-queue { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.g11-queue h2 { padding: 0 6px 2px; }
.g11-queue h2 .ic { color: var(--primary-600); }
.g11-queue h2 small { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--text-2); }
.g11-next { display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 14px 14px 12px; border: 1px solid var(--rim-soft); border-radius: 10px; }
.g11-next .avatar-lg { width: 50px; height: 50px; font-size: 17px; }
.g11-next > div { position: relative; min-width: 0; }
.g11-next .hd { display: flex; align-items: baseline; }
.g11-next .hd b { font-size: 15px; font-weight: 500; color: var(--text-strong); }
.g11-next .hd time { margin-left: auto; font-size: 13px; color: var(--text-2); }
.g11-next > div > small { display: block; font-size: 13px; color: var(--text-2); }
.g11-next .sj { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.g11-next .sj b { font-size: 15px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g11-next .sj .pill { margin-left: auto; height: 24px; padding: 0 12px; font-size: 12.5px; }
.g11-next p { font-size: 13px; line-height: 1.45; color: var(--text-2); margin-top: 6px; padding-right: 30px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g11-next .clip { position: absolute; right: 2px; bottom: 6px; color: var(--text-2); }
.g11-more { align-self: flex-end; display: inline-flex; align-items: center; gap: 10px; margin: auto 6px 6px 0; font-size: 14px; }
.g11-queue .g11-rest { font-size: 13px; color: var(--text-2); padding: 0 6px; }

.g11-bar { display: flex; align-items: center; gap: 0; margin: 30px 2px 8px; height: 98px; padding: 0 30px; }
.g11-bar .st { display: flex; align-items: center; gap: 22px; min-width: 268px; padding-right: 20px; border-right: 1px solid var(--rim); margin-right: 30px; }
.g11-bar .st:nth-child(3) { border-right: 1px solid var(--rim); }
.g11-bar .st .ic { color: var(--primary); }
.g11-bar .st span { display: flex; flex-direction: column; }
.g11-bar .st b { font-size: 20px; font-weight: 600; color: var(--text-strong); }
.g11-bar .st small { font-size: 14px; color: var(--text-strong); }
.g11-bar .st small.m { font-size: 12.5px; color: var(--text-2); }
.g11-bar .sp { flex: 1; }
.g11-bar .btn { height: 52px; min-width: 220px; gap: 18px; margin-left: 24px; font-size: 14.5px; }
.g11-bar .btn .ic { color: var(--primary-600); }

/* built screen extras */
.g11-resume { display: flex; align-items: center; gap: 14px; margin: 16px 20px 0 25px; padding: 12px 18px; border: 1px solid #CFDDF6; border-radius: 10px; background: var(--primary-tint-2); font-size: 14px; color: var(--text-strong); }
.g11-resume > .ic { color: var(--primary); }
.g11-resume .btn { margin-left: auto; }
a.g11-mcard.soft:hover { border-color: #CFDDF6; }
.g11-tpl { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.g11-tpl select { height: 32px; border: 1px solid var(--rim); border-radius: 8px; padding: 0 8px; background: var(--surface); font-size: 13px; max-width: 200px; }
.g11-sec .field-error { margin-top: 6px; }
.g11-go .field-error { margin: 0; }
.g11-empty { padding: 30px 12px; text-align: center; color: var(--text-muted); font-size: 14px; }
.g11-queue .g11-more { font-size: 14px; }

@media (max-width: 1200px) {
  .g11-in { grid-template-columns: 1fr; }
  .g11-go { margin-left: 0; }
  .g11-bar { flex-wrap: wrap; height: auto; padding: 16px; gap: 12px; }
  .g11-bar .st { min-width: 0; margin-right: 0; border-right: 0; }
  .g11-bar .btn { margin-left: 0; }
}
@media (max-width: 768px) {
  .g11-head { flex-direction: column; padding: 16px 16px 0; }
  .g11-head h1 { font-size: 28px; }
  .g11-meta { margin-left: 0; flex-direction: column; width: 100%; }
  .g11-mcard, .g11-mcard.soft { min-width: 0; }
  .g11-frame { margin: 16px 0 0; }
  .g11-set { padding: 14px; }
  .g11-boxes, .g11-cats, .g11-row { grid-template-columns: 1fr; }
  .g11-toggles { flex-direction: column; gap: 14px; }
  .g11-start { width: 100%; }
  .g11-bar { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0 8px; }
  .g11-bar .sp { display: none; }
  .g11-bar .btn { min-width: 0; width: 100%; }
}

/* ===== 12.css ===== */
/* 12 Grind: active processing (prefix r12-) */
.r12 { display: grid; grid-template-columns: 330px minmax(0, 1fr) 506px; grid-template-rows: 80px 632px 51px auto;
  grid-template-areas: "status status time" "list msg draft" "list pad pad" "acts pad pad"; column-gap: 17px; row-gap: 12px;
  margin: 20px 7px 0 7px; }
.r12 > .card { box-shadow: var(--shadow-sm); }
.r12-status { grid-area: status; display: flex; align-items: center; padding: 0 20px; margin: 0 3px 8px 0; }
.r12-time { grid-area: time; display: flex; align-items: center; gap: 24px; padding: 0 20px 0 28px; margin: 0 0 8px -3px; }
.r12-pp { flex: none; width: 62px; height: 62px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #5C9BFA, #2F74F0); box-shadow: 0 6px 16px rgba(47,116,240,.3); }
.r12-status .st { display: flex; flex-direction: column; margin-left: 24px; width: 280px; }
.r12-status .st b { font-size: 17px; font-weight: 500; color: var(--text-strong); }
.r12-status .st small { font-size: 14px; color: var(--text-2); }
.r12-status .pr { display: flex; flex-direction: column; gap: 10px; padding: 0 40px 0 46px; border-left: 1px solid var(--rim); border-right: 1px solid var(--rim); height: 64px; justify-content: center; }
.r12-status .pr b { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.r12-status .bar { display: block; width: 258px; height: 8px; border-radius: 4px; background: #E7ECF4; overflow: hidden; }
.r12-status .bar i { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.r12-status .nm { display: flex; flex-direction: column; align-items: center; min-width: 140px; }
.r12-status .nm + .nm { border-left: 1px solid var(--rim); }
.r12-status .nm b { font-size: 24px; font-weight: 600; color: var(--text-strong); }
.r12-status .nm small { font-size: 14px; color: var(--text-2); }
.r12-time > .ic { color: var(--primary); }
.r12-time .tt { display: flex; flex-direction: column; gap: 4px; }
.r12-time small { font-size: 14px; color: var(--text-2); }
.r12-kebab { margin-left: auto; width: 52px; height: 52px; border: 0; border-radius: 10px; background: var(--surface-3); color: var(--text-strong); display: grid; place-items: center; cursor: pointer; }

.r12-list { grid-area: list; padding: 8px 8px 0; overflow: hidden; display: flex; flex-direction: column; }
.r12-tabs { display: flex; gap: 8px; padding: 4px 8px 10px; }
.r12-tabs button, .r12-tabs a { height: 34px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 14.5px; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; }
.r12-tabs .active { border-color: #CFDDF6; background: var(--primary-tint-2); color: var(--primary-600); }
.r12-row { position: relative; display: grid; grid-template-columns: 22px 40px 1fr auto; column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 10px 12px 10px 6px; border-bottom: 1px solid var(--rim-soft); color: inherit; }
.r12-row:hover { background: var(--surface-2); color: inherit; }
.r12-row.cur { background: var(--primary-tint-2); border-radius: 8px; border-bottom-color: transparent; }
.r12-row .no { grid-row: span 3; align-self: start; margin-top: 2px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11.5px; color: var(--text-2); }
.r12-row.cur .no { background: #DCE8FC; color: var(--primary-600); }
.r12-row .avatar { grid-row: span 3; width: 40px; height: 40px; }
.r12-row b { font-size: 13.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r12-row time { font-size: 12px; color: var(--text-2); }
.r12-row .fr, .r12-row .sn { grid-column: 3 / 5; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r12-row .ud { position: absolute; right: 16px; top: 33px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.r12-row .disp { grid-column: 3 / 5; justify-self: start; margin-top: 2px; }

.r12-msg { grid-area: msg; padding: 18px 20px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.r12-msg header { display: flex; align-items: center; gap: 12px; }
.r12-msg h2 { font-size: 19px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r12-msg .acts { display: flex; gap: 14px; color: var(--text-strong); }
.r12-msg .acts .icon-btn { width: 36px; height: 36px; color: var(--text-strong); }
.r12-msg .from { display: grid; grid-template-columns: 50px 1fr auto; gap: 16px; margin-top: 18px; }
.r12-msg .from .avatar-lg { width: 50px; height: 50px; font-size: 17px; }
.r12-msg .from div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r12-msg .from b { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.r12-msg .from small { font-size: 13px; color: var(--text-2); }
.r12-msg .from time { font-size: 13px; color: var(--text-2); }
.r12-msg .tx { margin-top: 22px; font-size: 14.5px; line-height: 1.45; color: var(--text-strong); white-space: pre-line; flex: 1; overflow-y: auto; min-height: 0; }
.r12-ai { margin-top: 12px; padding: 14px 18px; border-radius: 10px; background: #F6F8FD; border: 1px solid var(--rim-soft); }
.r12-ai h3 { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
.r12-ai h3 > .ic { color: var(--primary); }
.r12-ai h3 .pill { margin-left: auto; height: 28px; padding: 0 12px; gap: 8px; font-size: 12.5px; border-radius: 14px; }
.r12-ai ul { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--text-strong); }
.r12-ai p { font-size: 13.5px; color: var(--text-2); margin-top: 8px; }
.r12-ai .btn { margin-top: 10px; }

.r12-draft { grid-area: draft; padding: 16px 18px; display: flex; flex-direction: column; }
.r12-draft header { display: flex; align-items: center; gap: 12px; }
.r12-draft h2 { font-size: 19px; font-weight: 600; }
.r12-draft h2 small { font-size: 13.5px; font-weight: 400; color: var(--text-2); }
.r12-draft header .btn { margin-left: auto; height: 40px; gap: 12px; }
.r12-draft header .btn .ic { color: var(--primary); }
.r12-draft .box { margin-top: 14px; border: 1px solid var(--rim); border-radius: 10px; display: flex; flex-direction: column; }
.r12-draft textarea { border: 0; border-radius: 10px 10px 0 0; padding: 12px 14px; height: 228px; resize: none; font: inherit; font-size: 14.5px; line-height: 1.45; color: var(--text-strong); outline: none; }
.r12-draft .tb { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-top: 1px solid var(--rim-soft); }
.r12-draft .tb .spacer { flex: 1; }
.r12-draft .tb .saved { font-size: 12.5px; color: var(--text-muted); }
.r12-draft .tb .linkish { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.r12-draft .lb { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--text-strong); }
.r12-draft .lb .ic { color: var(--text-2); }
.r12-draft .sel { position: relative; display: flex; align-items: center; margin-top: 8px; }
.r12-draft .sel .ic { position: absolute; left: 14px; color: var(--primary-600); pointer-events: none; }
.r12-draft .sel select { width: 100%; height: 44px; padding: 0 12px 0 46px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); font-size: 14.5px; color: var(--text-strong); }
.r12-review { display: flex; align-items: center; gap: 16px; margin-top: 14px; height: 54px; padding: 0 22px; border: 0; border-radius: 27px; width: 100%;
  background: linear-gradient(180deg, #5C9BFA, #2F74F0); color: #fff; font-size: 17px; font-weight: 500; cursor: pointer; box-shadow: 0 6px 16px rgba(47,116,240,.25); }
.r12-review span { flex: 1; text-align: center; }
.r12-review:disabled { background: #BFCBE0; box-shadow: none; cursor: not-allowed; }
.r12-bring { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.r12-bring a { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 14px; border: 1px solid var(--rim); border-radius: 8px; color: var(--text-strong); }
.r12-bring a:hover { border-color: #CFDDF6; background: var(--primary-tint-2); color: var(--text-strong); }
.r12-bring .ic { color: var(--primary-600); flex: none; }
.r12-bring span { display: flex; flex-direction: column; min-width: 0; }
.r12-bring b { font-size: 14px; font-weight: 500; }
.r12-bring small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.r12-acts { grid-area: acts; display: flex; gap: 18px; align-items: flex-start; padding: 13px 0 0 12px; }
.r12-acts .btn { height: 50px; min-width: 158px; gap: 20px; font-size: 14.5px; }
.r12-acts .btn .ic { color: var(--primary-600); }
.r12-pad { grid-area: pad; position: relative; justify-self: start; margin-left: 93px; margin-top: -4px; width: 562px; height: 150px;
  display: grid; grid-template-columns: 195px 1fr 195px; grid-template-rows: 47px 1fr 47px; }
.r12-pad .d { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 47px; border: 1px solid var(--rim); border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-sm); font-size: 14.5px; color: var(--text-strong); cursor: pointer; }
.r12-pad .d .ic { color: var(--primary-600); }
.r12-pad .d:hover:not(:disabled) { border-color: #CFDDF6; background: var(--primary-tint-2); }
.r12-pad .d:disabled { opacity: .5; cursor: not-allowed; }
.r12-pad .up { grid-column: 1 / 4; justify-self: center; width: 185px; }
.r12-pad .left { grid-column: 1; grid-row: 2; align-self: center; }
.r12-pad .right { grid-column: 3; grid-row: 2; align-self: center; }
.r12-pad .down { grid-column: 1 / 4; grid-row: 3; justify-self: center; width: 185px; }
.r12-pad .dot { grid-column: 2; grid-row: 2; justify-self: center; align-self: center; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(180deg, #5C9BFA, #2F74F0); box-shadow: 0 6px 16px rgba(47,116,240,.3); }
.r12-info { grid-area: pad; justify-self: end; align-self: end; display: flex; gap: 18px; width: 362px; padding: 18px 20px; margin-bottom: 30px; background: #F7F9FD; }
.r12-info .ic { color: var(--primary); flex: none; }
.r12-info span { display: flex; flex-direction: column; gap: 6px; }
.r12-info b { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.r12-info small { font-size: 13px; color: var(--text-2); }
body.paused .r12-pad .d, body.paused .r12-review { opacity: .5; pointer-events: none; }
/* built screen extras */
.r12-rows { overflow-y: auto; min-height: 0; flex: 1; }
.r12-msg .tx .file-card { display: inline-flex; margin-top: 10px; width: 260px; white-space: normal; }
.r12.is-paused .r12-pp { background: linear-gradient(180deg, #7FB0FB, #4E8BF3); }
.r12-radio { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.r12-pv { display: grid; grid-template-columns: 70px 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 13.5px; }
.r12-pv dt { color: var(--text-2); }
.r12-pv dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.r12-pvbody { max-height: 200px; overflow: auto; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--rim-soft); border-radius: 8px;
  background: var(--surface-2); font: inherit; font-size: 13.5px; white-space: pre-wrap; }
.r12-draft .field-error { margin-top: 8px; }
a.r12-row.cur:hover { background: var(--primary-tint-2); }

@media (max-width: 1200px) {
  .r12 { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "status" "time" "msg" "draft" "pad" "acts" "list"; margin: 12px 0 0; }
  .r12-status { flex-wrap: wrap; gap: 12px; padding: 12px; height: auto; margin: 0; }
  .r12-status .st { width: auto; }
  .r12-status .pr { border: 0; padding: 0; }
  .r12-time { margin: 0; padding: 12px 16px; }
  .r12-pad { margin: 0 auto; width: 100%; max-width: 562px; grid-template-columns: 1fr 60px 1fr; }
  .r12-info { display: none; }
  .r12-list { max-height: none; }
}
@media (max-width: 768px) {
  .r12-status .bar { width: 160px; }
  .r12-status .nm { min-width: 80px; }
  .r12-bring { grid-template-columns: 1fr; }
  .r12-pad .d { font-size: 13px; gap: 6px; }
  .r12-pad .up, .r12-pad .down { width: 150px; }
  .r12-acts { padding: 0; }
  .r12-acts .btn { flex: 1; min-width: 0; }
}
/* chat items (plans/beeper.md step 4) */
.r12-chatlog { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-top: 10px; border-radius: 10px; background: #F4F6FA; max-height: 420px; overflow-y: auto; }
.r12-chatlog .bb { max-width: 78%; padding: 8px 12px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; }
.r12-chatlog .bb.out { align-self: flex-end; background: #DDF6E4; }
.r12-chatlog .bb small { display: block; font-size: 11.5px; color: var(--text-2); margin-bottom: 2px; }
#grind-chat .box textarea { width: 100%; }

/* ===== 13.css ===== */
/* 13 Grind: session summary (prefix s13-) */
.s13-hero { position: relative; margin: 18px 13px 0 12px; padding: 110px 22px 12px; text-align: center; background: linear-gradient(180deg, #FFFFFF, #F9FBFE); }
.s13-path { position: absolute; left: 0; top: 0; width: 100%; height: 300px; pointer-events: none; }
.s13-path path { fill: none; stroke: #B9D0F6; stroke-width: 1.6; }
.s13-path circle { fill: #7FAAF2; }
.s13-badge { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: radial-gradient(circle at 50% 35%, #6FA8FB, #2F74F0); box-shadow: 0 0 0 14px rgba(111,168,251,.14), 0 10px 26px rgba(47,116,240,.3); }
.s13-hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -.01em; }
.s13-hero .sub { margin-top: 6px; font-size: 17px; color: var(--text-2); }
.s13-hero .sub i { font-style: normal; margin: 0 10px; color: var(--text-muted); }
.s13-stats { display: flex; align-items: center; margin-top: 16px; text-align: left; }
.s13-stat { flex: none; display: flex; align-items: center; gap: 16px; width: 186px; height: 88px; padding: 0 14px; border: 1px solid var(--rim); border-radius: 12px; background: var(--surface); }
.s13-stat.lav { background: var(--lavender-tint); border-color: #E3DCF7; width: 186px; }
.s13-stat .ci { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.s13-stat.lav .ci { background: #E7E0FA; color: #7D63C9; }
.s13-stat span:last-child { display: flex; flex-direction: column; }
.s13-stat b { font-size: 22px; font-weight: 600; color: var(--text-strong); }
.s13-stat small { font-size: 14px; color: var(--text-strong); }
.s13-stats .lk { flex: 1; position: relative; height: 1px; background: #CFDDF6; min-width: 20px; }
.s13-stats .lk::after { content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #7FAAF2; }
.s13-note { display: flex; align-items: center; gap: 22px; margin-top: 26px; padding: 16px 20px 16px 24px; border: 1px solid var(--rim-soft); border-radius: 10px;
  background: #F6F8FD; text-align: left; }
.s13-note > .ic { color: var(--primary); flex: none; }
.s13-note > span { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.s13-note b { font-size: 17px; font-weight: 600; color: var(--text-strong); }
.s13-note small { font-size: 14.5px; color: var(--text-2); }
.s13-note .btn { height: 50px; padding: 0 22px; gap: 12px; font-size: 16px; }
.s13-note .btn-outline { min-width: 150px; }
.s13-note .extra { display: block; margin-top: 2px; color: var(--amber-600); }

.s13-cards { display: grid; grid-template-columns: 468px 464px 1fr; gap: 14px; margin: 20px 3px 0 3px; }
.s13-card { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s13-card h2 { display: flex; align-items: center; gap: 16px; padding: 0 8px 10px; font-size: 17px; font-weight: 600; }
.s13-card h2 a { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; }
.s13-card .hi { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.s13-card .hi.lav { background: #EFEAFB; color: #7D63C9; }
.s13-row { display: grid; grid-template-columns: 50px 1fr auto; gap: 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--rim-soft); border-radius: 10px; color: inherit; }
.s13-row:hover { background: var(--surface-2); color: inherit; }
.s13-row .avatar-lg { width: 50px; height: 50px; font-size: 16px; }
.s13-row .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s13-row .t b { font-size: 14.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s13-row .t span { font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s13-row .t small { font-size: 13px; color: var(--text-2); }
.s13-row .r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.s13-row time { font-size: 12.5px; color: var(--text-2); }
.s13-row .pill { height: 24px; padding: 0 12px; font-size: 12.5px; }
.s13-kv { display: grid; grid-template-columns: 24px 1fr auto; gap: 16px; align-items: center; padding: 3px 10px; font-size: 13.5px; color: var(--text-strong); }
.s13-kv .ic { color: var(--primary-600); }
.s13-kv b { font-weight: 500; }
.s13-kv .cc { display: inline-flex; align-items: center; gap: 10px; }
.s13-empty { padding: 20px 10px; color: var(--text-muted); font-size: 14px; }

.s13-foot { display: flex; align-items: center; gap: 26px; margin: 18px 0 8px -2px; padding: 20px 26px 20px 32px; }
.s13-foot > .ic { color: var(--primary); flex: none; }
.s13-foot > span { display: flex; flex-direction: column; gap: 4px; }
.s13-foot b { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.s13-foot small { font-size: 15px; color: var(--text-2); }
.s13-foot em { margin-left: auto; font-style: normal; text-align: right; font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.s13-foot em span { letter-spacing: .08em; color: var(--text-muted); }

@media (max-width: 1200px) {
  .s13-stats { flex-wrap: wrap; gap: 10px; justify-content: center; }
  .s13-stats .lk { display: none; }
  .s13-note { flex-wrap: wrap; }
  .s13-cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .s13-hero { margin: 12px 0 0; padding: 124px 14px 12px; }
  .s13-hero h1 { font-size: 26px; }
  .s13-stat { width: 100%; }
  .s13-note .btn { width: 100%; justify-content: center; }
  .s13-foot { flex-wrap: wrap; margin: 16px 0 8px; }
  .s13-foot em { margin-left: 0; text-align: left; }
}
.s13-kv .cc.on .dot { background: #1FC29A; }
.s13-kv .cc.warn .dot { background: #F5A623; }

/* ===== 14.css ===== */
/* 14 Task center (prefix t14-) */
.t14-crumbs { margin: 14px 0 0 18px; }
.t14 { display: grid; grid-template-columns: minmax(0, 1fr) 346px; margin: 12px 3px 0 3px; border: 1px solid var(--rim); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; height: 792px; }
.t14-main { border: 0; border-radius: 0; box-shadow: none; padding: 20px 14px 10px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
.t14-head { display: flex; align-items: flex-start; gap: 20px; padding: 0 14px; }
.t14-head h1 { font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.t14-head p { font-size: 15.5px; color: var(--text-2); margin-top: 2px; }
.t14-head .when { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 14px; color: var(--text-2); }
.t14-head .when .icon-btn { color: var(--text-strong); }
.t14-new { height: 42px; gap: 12px; margin-top: 8px; padding: 0 22px; border-radius: 10px; font-size: 15px; box-shadow: 0 6px 16px rgba(47,116,240,.25); }
.t14-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; flex: 1; }
.t14-board.with-done { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t14-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--rim-soft); border-radius: 12px; background: #FBFCFE; padding: 12px 10px; }
.t14-col.over { border-color: var(--primary-400); background: var(--primary-tint-2); }
.t14-col header { display: flex; gap: 14px; padding: 4px 6px 16px; }
.t14-col .ci { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.t14-col.c-todo .ci { background: var(--lavender-tint); color: #7D63C9; }
.t14-col.c-in_progress .ci { background: #E3F7EF; color: #1BA774; }
.t14-col.c-review .ci { background: var(--lavender-tint); color: #7D63C9; }
.t14-col.c-done .ci { background: var(--surface-3); color: var(--text-2); }
.t14-col header > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.t14-col header b { font-size: 19px; font-weight: 600; color: var(--text-strong); }
.t14-col .cnt { min-width: 28px; height: 24px; padding: 0 8px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); font-size: 13px; }
.t14-col header small { flex-basis: 100%; font-size: 13px; color: var(--text-2); }
.t14-col .cards { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.t14-card { position: relative; display: grid; grid-template-columns: 38px 1fr 28px; column-gap: 14px; padding: 14px 14px 12px; border: 1px solid var(--rim);
  border-radius: 10px; background: var(--surface); cursor: pointer; }
.t14-card:hover { border-color: #CFDDF6; }
.t14-card.sel { border-color: var(--primary-400); box-shadow: 0 0 0 2px rgba(71,137,245,.15); }
.t14-card.mail::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: #A28AE4; }
.t14-card.drag { opacity: .5; }
.t14-card .src { grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.t14-card .src.mail { background: linear-gradient(180deg, #B69CF2, #8E6EE0); color: #fff; }
.t14-card h3 { font-size: 14.5px; font-weight: 600; color: var(--text-strong); align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t14-card .kb { width: 28px; height: 28px; color: var(--text-strong); }
.t14-card .due { grid-column: 2 / 4; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.t14-card .due.hot { color: #D8353F; }
.t14-card p { grid-column: 1 / 4; font-size: 14px; line-height: 1.45; color: var(--text-2); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t14-card .orig { grid-column: 1 / 4; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.t14-card .orig.none { color: var(--text-muted); }
.t14-card footer { grid-column: 1 / 4; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rim-soft); }
.t14-card footer .who { font-size: 13.5px; color: var(--text-strong); }
.t14-card footer .pill { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12px; }
.t14-empty { padding: 18px 8px; font-size: 13.5px; color: var(--text-muted); text-align: center; }

.t14-insp { border-left: 1px solid var(--rim); padding: 20px 16px 16px 18px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.t14-insp .top { display: flex; align-items: center; gap: 8px; }
.t14-insp .top > .icon-btn { margin-left: auto; }
.t14-view { display: inline-flex; gap: 6px; }
.t14-view button, .t14-view a { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border: 1px solid var(--rim); border-radius: 8px;
  background: var(--surface); font-size: 14px; color: var(--text-2); cursor: pointer; }
.t14-view .active { border-color: #CFDDF6; background: var(--primary-tint-2); color: var(--primary-600); }
.t14-insp .hd { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; margin-top: 20px; }
.t14-insp .hd .src { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.t14-insp .hd .src.mail { background: linear-gradient(180deg, #B69CF2, #8E6EE0); color: #fff; }
.t14-insp .hd span { display: flex; flex-direction: column; min-width: 0; }
.t14-insp .hd b { font-size: 17px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t14-insp .hd small { font-size: 12.5px; color: var(--text-2); }
.t14-insp .hd select { height: 32px; border: 0; border-radius: 16px; padding: 0 10px; background: #E3F7EF; color: #1B8A61; font-size: 13px; font-weight: 500; }
.t14-tabs { margin-top: 14px; gap: 34px; }
.t14-insp .fields { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.t14-insp label { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-strong); }
.t14-insp .input { height: 40px; }
.t14-insp textarea.input { height: auto; min-height: 56px; resize: vertical; }
.t14-insp .two { display: grid; grid-template-columns: 1fr; gap: 12px; }
.t14-insp .dt { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }
.t14-insp .dt .input { padding: 0 6px; font-size: 13px; }
.t14-insp .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t14-insp .tags .pill { height: 28px; padding: 0 12px; font-size: 13px; gap: 6px; }
.t14-insp .tags .pill button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; }
.t14-insp .orig { border-top: 1px solid var(--rim-soft); padding-top: 12px; }
.t14-insp .orig > b { font-size: 13.5px; font-weight: 500; }
.t14-insp .orig .msg { margin-top: 8px; padding: 12px 14px; border-radius: 10px; background: #EEF6FF; }
.t14-insp .orig .msg > span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-strong); }
.t14-insp .orig .msg time { margin-left: auto; color: var(--text-2); font-size: 12.5px; }
.t14-insp .orig .msg p { font-size: 13.5px; color: var(--text-strong); margin-top: 6px; line-height: 1.45; }
.t14-insp .orig .msg a { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.t14-insp .keep { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid #CFDDF6; border-radius: 10px; background: var(--primary-tint-2); }
.t14-insp .keep .ic { color: var(--primary); flex: none; }
.t14-insp .keep span { display: flex; flex-direction: column; gap: 2px; }
.t14-insp .keep b { font-size: 12.5px; font-weight: 500; color: var(--primary-600); }
.t14-insp .keep small { font-size: 11.5px; color: var(--text-2); }
.t14-insp footer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.t14-insp footer .btn { height: 42px; }
.t14-insp .none { padding: 40px 10px; text-align: center; color: var(--text-muted); font-size: 14px; }

.t14-bar { display: flex; align-items: center; gap: 0; margin: 20px 2px 8px -22px; height: 70px; padding: 0 22px 0 40px; }
.t14-bar .it { display: flex; align-items: center; gap: 22px; padding-right: 30px; margin-right: 26px; border-right: 1px solid var(--rim); }
.t14-bar .it > .ic { color: var(--primary); }
.t14-bar .it.off > .ic { color: #1FAF5A; }
.t14-bar .it span { display: flex; flex-direction: column; }
.t14-bar .it small { font-size: 12px; color: var(--text-2); }
.t14-bar .it small.b { font-size: 13px; color: var(--text-strong); }
.t14-bar .it b { font-size: 18px; font-weight: 600; color: var(--text-strong); }
.t14-bar .it.off b { font-size: 14px; font-weight: 500; color: var(--text-2); }
.t14-bar .it.st { border-right: 0; gap: 14px; }
.t14-bar .st .dot { background: var(--grey); }
.t14-bar .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; height: 44px; padding: 0 20px; border: 1px solid var(--rim); border-radius: 10px; font-size: 13.5px; color: var(--text-strong); }

/* built screen extras */
.t14-filter { margin-left: 12px; height: 24px; padding: 0 10px; }
.t14-done-link { font-size: 13px; }
.t14-card:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.t14-card .kb + .menu, .t14-card .menu { right: 0; left: auto; }
.t14-insp .lbl { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text-strong); }
.t14-insp .t14-tagin { width: 120px; height: 30px; font-size: 13px; }
.t14-insp .keep.sugg { align-items: center; border-color: #F4DDA8; background: #FFF8E8; }
.t14-insp .keep.sugg .ic { color: var(--amber-600); }
.t14-insp .keep.sugg b { color: #8A5B00; }
.t14-insp .keep.sugg .btn { margin-left: auto; }
.t14-insp .none { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.t14-insp .none .ic { color: var(--text-muted); }
.t14-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#task-insp-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.t14-hist { padding: 8px 2px; border-bottom: 1px solid var(--rim-soft); }
.t14-hist b { display: block; font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.t14-hist small { font-size: 12px; color: var(--text-2); }
.t14-hist p { font-size: 13.5px; color: var(--text-strong); margin-top: 4px; white-space: pre-line; }
.t14-note-new { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.t14-note-new textarea { width: 100%; }

/* list view */
.t14-list { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.t14-list th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--rim); }
.t14-list td { padding: 10px; border-bottom: 1px solid var(--rim-soft); color: var(--text-strong); }
.t14-list tr.sel td { background: var(--primary-tint-2); }
.t14-list td a { color: inherit; font-weight: 500; }
.t14-list .due.hot { color: #D8353F; }
body.list .t14-board { display: block; }

@media (max-width: 1200px) {
  .t14 { grid-template-columns: 1fr; height: auto; }
  .t14-insp { border-left: 0; border-top: 1px solid var(--rim); }
  .t14-board { grid-template-columns: 1fr; }
  .t14-bar { flex-wrap: wrap; height: auto; padding: 14px; gap: 12px; margin-left: 0; }
  .t14-bar .it { border-right: 0; padding-right: 0; margin-right: 0; }
  .t14-bar .lock { margin-left: 0; }
}
@media (max-width: 768px) {
  .t14-crumbs { margin-left: 4px; }
  .t14 { margin: 10px 0 0; }
  .t14-head { flex-wrap: wrap; padding: 0 4px; }
  .t14-head h1 { font-size: 26px; }
  .t14-head .when { margin: 0; }
  .t14-main { padding: 14px 8px; }
  .t14-insp .two { grid-template-columns: 1fr; }
  .t14-list th:nth-child(n+4), .t14-list td:nth-child(n+4) { display: none; }
}

/* ===== 15.css ===== */
/* 15 Deadlines & calendar (prefix c15-) */
.c15-frame { margin: 20px 3px 0 1px; }
.c15-in { padding: 18px 14px 14px; }
.c15-head { display: flex; align-items: center; gap: 18px; padding: 0 2px 0 8px; }
.c15-head .badge { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--primary); }
.c15-head h1 { font-size: 27px; font-weight: 600; }
.c15-head p { font-size: 14.5px; color: var(--text-2); margin-top: 2px; }
.c15-range { margin-left: auto; display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 10px 0 16px; border: 1px solid var(--rim); border-radius: 10px; font-size: 14.5px; color: var(--text-strong); }
.c15-range > .ic { color: var(--text-2); }
.c15-range .icon-btn { width: 32px; height: 32px; color: var(--text-strong); }
.c15-range .icon-btn + .icon-btn { border-left: 1px solid var(--rim); border-radius: 0; padding-left: 4px; }
.c15-range .today-link { font-size: 13px; }
.c15-toggle { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--rim); border-radius: 10px; }
.c15-toggle button, .c15-toggle a { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 20px; border: 0; border-radius: 8px; background: none; font-size: 14.5px; color: var(--text-strong); cursor: pointer; }
.c15-toggle .active { background: linear-gradient(180deg, #4E8BF5, #2F74F0); color: #fff; }
.c15-grid { display: grid; grid-template-columns: minmax(0, 1fr) 448px; grid-template-rows: 520px auto; gap: 16px 14px; margin-top: 18px;
  grid-template-areas: "week side" "detail side"; }
.c15-week { grid-area: week; overflow: hidden; display: flex; flex-direction: column; }
.c15-week h2 { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; font-size: 19px; font-weight: 600; }
.c15-week h2 .pill { height: 24px; font-size: 12.5px; padding: 0 10px; }
.c15-days { display: grid; grid-template-columns: 63px repeat(7, 1fr); border-top: 1px solid var(--rim-soft); border-bottom: 1px solid var(--rim-soft); }
.c15-days .dh { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0 10px; border-left: 1px solid var(--rim-soft); color: var(--text-strong); }
.c15-days .dh small { font-size: 12px; color: var(--text-2); }
.c15-days .dh small:first-child { font-size: 12.5px; font-weight: 600; color: var(--text-strong); }
.c15-days .dh b { font-size: 18px; font-weight: 600; }
.c15-days .dh.today { background: var(--primary-tint-2); }
.c15-days .dh.today b, .c15-days .dh.today small:first-child { color: var(--primary-600); }
.c15-days .dh .pill { margin-top: 4px; height: 20px; font-size: 11.5px; }
.c15-body { position: relative; display: grid; grid-template-columns: 63px 1fr; height: 378px; }
.c15-body .hours { position: relative; }
.c15-body .hr { position: absolute; left: 0; right: -1000px; height: 0; border-top: 1px solid var(--rim-soft); }
.c15-body .hr span { position: absolute; left: 16px; top: 2px; font-size: 12px; color: var(--text-2); }
.c15-body .cols { position: relative; }
.c15-body .col { position: absolute; top: 0; bottom: 0; width: calc(100% / 7); border-left: 1px solid var(--rim-soft); }
.c15-body .col.today { background: rgba(236,243,255,.6); }
.c15-ev { position: absolute; width: calc(100% / 7 - 4px); display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 6px; text-align: left;
  font: inherit; cursor: pointer; overflow: hidden; }
.c15-ev.confirmed { background: #E8F0FF; border: 1.5px solid #6B9DF5; color: var(--text-strong); }
.c15-ev.suggested { background: #F6F2FE; border: 1.5px dashed #A992E8; color: #4B3A86; }
.c15-ev.sel { box-shadow: 0 0 0 3px rgba(71,137,245,.25); }
.c15-ev span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.c15-ev i { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex: none; }
.c15-ev.suggested i { background: #8E6EE0; }
.c15-ev b { font-size: 12px; font-weight: 600; line-height: 1.3; }
.c15-ev .off { font-size: 10.5px; color: var(--text-2); }

.c15-detail { grid-area: detail; position: relative; display: grid; grid-template-columns: 50px 1fr auto; grid-template-rows: auto auto; gap: 8px 16px;
  padding: 18px 20px 14px 30px; border-left: 4px solid var(--primary); align-self: start; align-content: start; }
.c15-detail .badge { color: var(--primary); }
.c15-detail h3 { font-size: 21px; font-weight: 600; }
.c15-detail .t p { font-size: 14.5px; color: var(--text-2); margin-top: 4px; }
.c15-detail .t p i { font-style: normal; margin: 0 10px; }
.c15-detail .acts { display: flex; gap: 12px; }
.c15-detail .acts .btn { height: 38px; gap: 12px; }
.c15-detail .acts .sq { width: 42px; padding: 0; }
.c15-detail dl { grid-column: 1 / 3; display: grid; grid-template-columns: 104px 1fr; gap: 8px 0; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rim-soft); font-size: 13.5px; }
.c15-detail dt { color: var(--text-2); }
.c15-detail dd { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--text-strong); }
.c15-detail dd .ic { color: var(--text-2); flex: none; }
.c15-detail .rem { grid-column: 3; grid-row: 2; margin-top: 12px; padding: 12px 0 0 22px; border-top: 1px solid var(--rim-soft); border-left: 1px solid var(--rim-soft); min-width: 330px; }
.c15-detail .rem h4 { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.c15-detail .rem h4 a, .c15-detail .rem h4 button { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 400; }
.c15-detail .rem .r { display: flex; gap: 12px; margin-top: 12px; }
.c15-detail .rem label { position: relative; flex: 1; display: flex; align-items: center; }
.c15-detail .rem label .ic { position: absolute; left: 12px; color: var(--text-2); pointer-events: none; }
.c15-detail .rem select { width: 100%; height: 36px; padding: 0 10px 0 40px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); font-size: 13px; }
.c15-detail .rem .sq { width: 38px; height: 36px; padding: 0; }
.c15-detail .rem .muted { font-size: 13px; margin-top: 10px; }

.c15-side { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.c15-side h2 { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; }
.c15-side h2 > .ic { color: var(--primary); }
.c15-side h2 a { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; }
.c15-await { padding: 14px 14px 16px; }
.c15-await .cnt { margin-left: auto; min-width: 30px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: var(--lavender-tint); color: #6E53C2; font-size: 14px; }
.c15-await .sug { margin-top: 12px; padding: 12px 14px 14px; border: 1px solid #E3DCF7; border-radius: 10px; background: #FAF8FF; }
.c15-await .sug + .sug { margin-top: 10px; }
.c15-await h3 { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: #6E53C2; }
.c15-await .src { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; margin-top: 12px; }
.c15-await .mi { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--rim); color: var(--text-strong); }
.c15-await .src span { display: flex; flex-direction: column; min-width: 0; }
.c15-await .src b { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.c15-await .src small { font-size: 12.5px; color: var(--text-2); }
.c15-await .tm { text-align: right; font-size: 12.5px; color: var(--text-2); }
.c15-await blockquote { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); font-size: 13.5px; color: var(--text-strong); line-height: 1.5; }
.c15-await .lb { display: block; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.c15-await .row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.c15-await .dt { flex: 1; display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border: 1.5px dashed #A992E8; border-radius: 8px;
  background: #F6F2FE; color: #6E53C2; font-size: 14.5px; font-weight: 500; }
.c15-await .dt { gap: 8px; padding: 0 10px; }
.c15-await .dt input { border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; min-width: 0; width: 132px; }
.c15-await .dt input[type=time] { width: 104px; }
.c15-await .conf { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.c15-await .row > .ic { color: var(--text-2); flex: none; }
.c15-await .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.c15-await .btns .btn { height: 40px; }
.c15-await .none { margin-top: 12px; font-size: 13.5px; color: var(--text-muted); }
.c15-recent { padding: 14px 14px 8px; }
.c15-recent .it { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--rim-soft); }
.c15-recent .it:last-child { border-bottom: 0; }
.c15-recent .it > .ic { color: var(--primary); }
.c15-recent .it.sug > .ic { color: #8E6EE0; }
.c15-recent .it span { display: flex; flex-direction: column; min-width: 0; }
.c15-recent .it b { font-size: 14px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c15-recent .it small { font-size: 13px; color: var(--text-2); }
.c15-recent .it .pill { height: 24px; padding: 0 12px; font-size: 12.5px; }
.c15-how { padding: 14px 18px 12px; }
.c15-how ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--text-strong); }
.c15-how li { display: flex; align-items: center; gap: 14px; }
.c15-how li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 12px; color: var(--text-2); }
.c15-how > a { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }

/* timeline view */
.c15-tl { grid-area: week; padding: 14px 18px; overflow-y: auto; }
.c15-tl h3 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; color: var(--text-strong); }
.c15-tl h3:first-child { margin-top: 0; }
.c15-tl a.row { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; margin-top: 6px; color: inherit; }
.c15-tl a.row.suggested { border-style: dashed; border-color: #CDBDF3; background: #FAF8FF; }
.c15-tl a.row.sel { border-color: var(--primary-400); }
.c15-tl .time { font-size: 13px; color: var(--text-2); }
.c15-tl b { font-size: 14px; font-weight: 500; }
.c15-empty { padding: 40px; text-align: center; color: var(--text-muted); }

@media (max-width: 1200px) {
  .c15-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "week" "detail" "side"; }
  .c15-head { flex-wrap: wrap; }
  .c15-range { margin-left: 0; }
}
@media (max-width: 768px) {
  .c15-frame { margin: 8px 0 0; }
  .c15-in { padding: 12px 8px; }
  .c15-head h1 { font-size: 22px; }
  .c15-week { overflow-x: auto; }
  .c15-days, .c15-body { min-width: 640px; }
  .c15-detail { grid-template-columns: 1fr; padding-left: 16px; }
  .c15-detail .badge { display: none; }
  .c15-detail .acts, .c15-detail dl, .c15-detail .rem { grid-column: 1; grid-row: auto; }
  .c15-detail .rem { border-left: 0; padding-left: 0; min-width: 0; }
  .c15-detail dl { grid-template-columns: 90px 1fr; }
  .c15-toggle button, .c15-toggle a { padding: 0 12px; }
  .c15-await .row { flex-wrap: wrap; }
  .c15-await .dt { flex-basis: 100%; }
  .c15-await .dt input { width: auto; flex: 1; }
}

/* ===== 16.css ===== */
/* 16 Awaiting decision (prefix d16-) */
.d16-crumbs { display: flex; align-items: center; margin: 22px 20px 0 16px; }
.d16-crumbs .crumbline .cur { color: var(--primary-600); }
.d16-crumbs .when { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-strong); }
.d16-crumbs .when a { display: inline-flex; color: var(--text-strong); }
.d16-frame { margin: 12px 2px 0 4px; }
.d16-in { padding: 18px 20px 18px 22px; }
.d16-head { display: flex; align-items: center; gap: 14px; }
.d16-head .badge { width: 52px; height: 52px; display: grid; place-items: center; color: var(--primary); }
.d16-head h1 { font-size: 25px; font-weight: 600; }
.d16-head p { font-size: 15px; color: var(--text-2); margin-top: 2px; }
.d16-head > div { margin-right: auto; margin-left: 8px; }
.d16-head .q { position: relative; width: 294px; }
.d16-head .q .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.d16-head .q input { width: 100%; height: 42px; padding: 0 12px 0 46px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14px; }
.d16-head select { height: 42px; min-width: 144px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); font-size: 14px; color: var(--text-strong); }
.d16-body { display: grid; grid-template-columns: 430px minmax(0, 1fr) 410px; gap: 14px; margin-top: 22px; align-items: start; }
.d16-list { display: flex; flex-direction: column; gap: 9px; }
.d16-card { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 12px 16px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); cursor: pointer; color: inherit; }
.d16-card:hover { border-color: #CFDDF6; color: inherit; }
.d16-card.sel { border-color: var(--primary-400); box-shadow: 0 0 0 2px rgba(71,137,245,.15); background: #FAFCFF; }
.d16-card .src { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.d16-card .src.whatsapp { background: #25B24A; color: #fff; }
.d16-card > div { min-width: 0; }
.d16-card .hd { display: flex; align-items: baseline; gap: 10px; }
.d16-card .hd b { font-size: 15px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d16-card .hd time { margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.d16-card .fr { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13.5px; color: var(--text-2); }
.d16-card .fr span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d16-card .fr .pill { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12.5px; }
.d16-card p { font-size: 13px; color: var(--text-2); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d16-card footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.d16-card footer .pill { height: 24px; padding: 0 12px; font-size: 12.5px; margin-right: 6px; }
.d16-card footer .who { font-size: 13.5px; color: var(--text-strong); }

.d16-src { padding: 18px 16px 16px; display: flex; flex-direction: column; min-width: 0; }
.d16-src header { display: grid; grid-template-columns: 50px 1fr auto; gap: 14px; }
.d16-src header .badge { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.d16-src header small { font-size: 12.5px; color: var(--text-2); }
.d16-src header h2 { font-size: 20px; font-weight: 600; margin-top: 2px; }
.d16-src header p { font-size: 14px; color: var(--text-2); margin-top: 8px; }
.d16-src header p.to { margin-top: 2px; }
.d16-src header .r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.d16-src header .r time { font-size: 13px; color: var(--text-2); }
.d16-src header .r .pill { height: 26px; padding: 0 14px; font-size: 13px; }
.d16-tabs { display: flex; gap: 30px; margin-top: 18px; border-bottom: 1px solid var(--rim); padding: 0 10px; }
.d16-tabs button { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 6px; border: 0; background: none; font-size: 14px; color: var(--text-2); cursor: pointer; }
.d16-tabs button.active { color: var(--primary-600); font-weight: 500; }
.d16-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.d16-tabs .cnt { min-width: 22px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--surface-3); font-size: 11.5px; }
.d16-src .msg { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--rim-soft); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--text-strong); white-space: pre-line; max-height: 248px; overflow-y: auto; }
.d16-src h4 { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--text-strong); }
.d16-src h4 .ic { color: var(--text-2); }
.d16-src .files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.d16-src .files .file-card { min-width: 0; }
.d16-src .orig { margin-top: 14px; padding: 12px 18px; border-radius: 10px; background: #F4F7FC; }
.d16-src .orig h4 { margin-top: 0; }
.d16-src .orig h4 .ic { color: var(--primary); }
.d16-src dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; }
.d16-src dt { color: var(--text-2); }
.d16-src dd { margin: 0; color: var(--text-strong); }
.d16-src dd a { display: inline-flex; align-items: center; gap: 8px; }
.d16-src .empty { padding: 20px 4px; color: var(--text-muted); font-size: 14px; }

.d16-dec { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.d16-dec .brief { padding: 16px 18px; }
.d16-dec .brief .q { display: flex; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rim-soft); }
.d16-dec .brief .q > .ic { color: var(--primary); flex: none; }
.d16-dec .brief b { font-size: 17px; font-weight: 600; color: var(--text-strong); }
.d16-dec .brief p { font-size: 14.5px; color: var(--text-2); margin-top: 4px; line-height: 1.4; }
.d16-dec .kv { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--rim-soft); }
.d16-dec .kv:last-child { border-bottom: 0; padding-bottom: 0; }
.d16-dec .kv > .ic { color: var(--text-strong); }
.d16-dec .kv b { font-size: 13.5px; font-weight: 500; }
.d16-dec .kv p { font-size: 14.5px; margin-top: 2px; }
.d16-dec .kv em { font-style: normal; font-size: 13.5px; color: var(--text-strong); }
.d16-dec .kv em.hot { color: #D8353F; }
.d16-opt { display: grid; grid-template-columns: 50px 1fr 20px; align-items: center; gap: 16px; height: 75px; padding: 0 20px; border: 1px solid; border-radius: 10px; text-align: left; cursor: pointer; font: inherit; }
.d16-opt span { display: flex; flex-direction: column; gap: 2px; }
.d16-opt b { font-size: 17px; font-weight: 600; }
.d16-opt small { font-size: 13.5px; color: var(--text-2); }
.d16-opt.blue { background: #EEF4FF; border-color: #CFDDF6; }
.d16-opt.blue b, .d16-opt.blue .ic { color: var(--primary-600); }
.d16-opt.green { background: #EAF8F1; border-color: #CBEBDA; }
.d16-opt.green b { color: #17744C; }
.d16-opt.green > .ic:first-child { color: #fff; background: #20B26B; border-radius: 50%; padding: 6px; }
.d16-opt.red { background: #FDEEEE; border-color: #F6D2D2; }
.d16-opt.red b { color: #C5303A; }
.d16-opt.red > .ic:first-child { color: #D8353F; }
.d16-opt:hover:not(:disabled) { filter: brightness(.98); }
.d16-opt:disabled { opacity: .55; cursor: not-allowed; }
.d16-opt.chosen { box-shadow: 0 0 0 2px rgba(71,137,245,.35); }
.d16-note { font-size: 12.5px; color: var(--text-2); display: flex; gap: 8px; align-items: center; }
.d16-dec .rel { padding: 14px 20px; }
.d16-dec .rel h3 { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.d16-dec .rel h3 .ic { color: var(--primary-600); }
.d16-dec .rel dl { display: grid; grid-template-columns: 116px 1fr; gap: 10px 10px; margin: 12px 0 0; font-size: 13.5px; }
.d16-dec .rel dt { color: var(--text-strong); }
.d16-dec .rel dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-strong); }
.d16-dec .rel .pill { height: 26px; padding: 0 12px; font-size: 13px; }

/* built screen extras */
.d16-src.empty { padding: 30px 20px; color: var(--text-muted); text-align: center; font-size: 14px; }
.d16-src [data-dpane].files:empty { display: none; }
.d16-dec .brief .q .icon-btn { width: 32px; height: 32px; color: var(--text-2); }

@media (max-width: 1200px) {
  .d16-head { flex-wrap: wrap; }
  .d16-head .q { width: 100%; }
  .d16-body { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .d16-crumbs { margin: 12px 4px 0; flex-wrap: wrap; gap: 6px; }
  .d16-frame { margin: 8px 0 0; }
  .d16-in { padding: 12px 8px; }
  .d16-head select { flex: 1; min-width: 0; }
  .d16-src header { grid-template-columns: 1fr; }
  .d16-src header .badge { display: none; }
  .d16-src header .r { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .d16-src .files { grid-template-columns: 1fr; }
  .d16-tabs { gap: 10px; overflow-x: auto; }
}

/* ===== 17.css ===== */
/* 17 Notification center (prefix n17-) */
.n17-frame { margin: 14px 5px 0 3px; }
.n17-in { padding: 14px 20px 14px 14px; }
.n17-top { display: flex; align-items: center; padding: 6px 4px 0 6px; }
.n17-top .when { margin-left: auto; font-size: 14px; color: var(--text-2); margin-top: 14px; }
.n17-head { display: flex; align-items: center; gap: 18px; margin-top: 4px; padding-left: 6px; }
.n17-head .badge { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary); }
.n17-head h1 { font-size: 32px; font-weight: 700; }
.n17-head p { font-size: 17px; color: var(--text-2); }
.n17-head .q { position: relative; margin-left: auto; width: 334px; }
.n17-head .q .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.n17-head .q input { width: 100%; height: 40px; padding: 0 12px 0 42px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14px; }
.n17-body { display: grid; grid-template-columns: minmax(0, 1fr) 362px; gap: 18px; margin-top: 14px; }
.n17-bar { display: flex; align-items: center; gap: 22px; }
.n17-tabs { flex: 1; display: flex; border: 1px solid var(--rim); border-radius: 10px; overflow: hidden; background: var(--surface); }
.n17-tabs button, .n17-tabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 44px; border: 0; border-right: 1px solid var(--rim-soft); background: none; font-size: 14.5px; color: var(--text-strong); cursor: pointer; }
.n17-tabs > :last-child { border-right: 0; }
.n17-tabs .active { box-shadow: inset 0 0 0 1.5px var(--primary-400); border-radius: 9px; color: var(--primary-600); }
.n17-tabs span { min-width: 26px; height: 24px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--surface-3); font-size: 12.5px; color: var(--text-2); }
.n17-bar > .btn { height: 44px; gap: 10px; color: var(--primary-600); font-size: 13.5px; }
.n17-day { font-size: 12.5px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px 8px; }
.n17-row { position: relative; display: grid; grid-template-columns: 10px 58px 1fr auto 30px; gap: 16px; align-items: center; padding: 10px 14px 10px 8px;
  border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); margin-bottom: 8px; }
.n17-row .ud { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.n17-row.unread .ud { background: var(--primary); }
.n17-row .ic-r { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.n17-row .c-lavender { background: var(--lavender-tint); color: #7D63C9; }
.n17-row .c-red { background: #FDECEC; color: #D8353F; }
.n17-row .c-amber { background: #FFF3E3; color: #E07B16; }
.n17-row .c-blue { background: var(--primary-tint-2); color: var(--primary-600); }
.n17-row .c-green { background: #E6F7EE; color: #1B9E5A; }
.n17-row .c-grey { background: var(--surface-3); color: var(--text-2); }
.n17-row .t { min-width: 0; }
.n17-row .hd { display: flex; align-items: center; gap: 12px; }
.n17-row .hd b { font-size: 15.5px; font-weight: 500; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n17-row:not(.unread) .hd b { font-weight: 400; color: var(--text-2); }
.n17-row .hd .pill { height: 20px; font-size: 11.5px; }
.n17-row p { font-size: 13.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n17-row .t a { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; }
.n17-row .r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.n17-row time { font-size: 13px; color: var(--text-2); }
.n17-row .act { height: 34px; min-width: 112px; justify-content: center; background: var(--primary-tint-2); border-color: transparent; color: var(--primary-600); font-size: 13px; }
.n17-row .kb { width: 30px; height: 30px; color: var(--text-strong); }
.n17-row .menu { right: 0; left: auto; }
.n17-empty { padding: 50px 20px; text-align: center; color: var(--text-muted); font-size: 15px; }
.n17-off { margin-top: 14px; padding: 30px 26px; border: 1px dashed var(--rim); border-radius: 12px; text-align: center; color: var(--text-2); }
.n17-off b { display: block; font-size: 16px; color: var(--text-strong); margin-bottom: 6px; }
.n17-off .btn { margin-top: 14px; }

.n17-side { display: flex; flex-direction: column; gap: 14px; }
.n17-side h2 { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; }
.n17-side h2 > .ic { color: var(--primary-600); }
.n17-side h2 .i { margin-left: auto; color: var(--text-2); }
.n17-prefs { padding: 16px 16px 18px; }
.n17-prefs .pr { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 16px; cursor: pointer; }
.n17-prefs .pi { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-strong); }
.n17-prefs .pr span:nth-child(2) { display: flex; flex-direction: column; }
.n17-prefs b { font-size: 14px; font-weight: 500; color: var(--text-strong); }
.n17-prefs small { font-size: 12.5px; color: var(--text-2); }
.n17-prefs .note { font-size: 12px; color: var(--text-muted); margin: 6px 0 0 56px; }
.n17-prefs .qh { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 0; }
.n17-prefs .qh label { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.n17-prefs .qh .ic { position: absolute; left: 10px; color: var(--text-2); }
.n17-prefs .qh input { width: 100%; height: 40px; padding: 0 6px 0 32px; border: 1px solid var(--rim); border-radius: 8px; font-size: 13.5px; }
.n17-src { padding: 16px; }
.n17-src .it { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rim-soft); }
.n17-src .it:last-child { border-bottom: 0; padding-bottom: 0; }
.n17-src .it span:first-child { display: flex; flex-direction: column; gap: 2px; }
.n17-src b { font-size: 14px; font-weight: 500; }
.n17-src small { font-size: 12.5px; color: var(--text-2); }
.n17-links { padding: 16px; }
.n17-links a { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--rim-soft); font-size: 14px; color: var(--text-strong); }
.n17-links a:last-child { border-bottom: 0; }
.n17-links a .ic:first-child { color: var(--primary-600); }
.n17-links a .ic:last-child { color: var(--primary-600); }

@media (max-width: 1200px) {
  .n17-body { grid-template-columns: minmax(0, 1fr); }
  .n17-bar { flex-wrap: wrap; gap: 10px; }
  .n17-tabs { overflow-x: auto; flex-basis: 100%; }
  .n17-tabs button, .n17-tabs a { flex: none; padding: 0 14px; }
}
@media (max-width: 768px) {
  .n17-frame { margin: 8px 0 0; }
  .n17-in { padding: 10px 8px; }
  .n17-head { flex-wrap: wrap; }
  .n17-head .badge { width: 48px; height: 48px; }
  .n17-head h1 { font-size: 24px; }
  .n17-head .q { width: 100%; margin-left: 0; }
  .n17-row { grid-template-columns: 8px 40px 1fr 28px; }
  .n17-row .ic-r { width: 40px; height: 40px; }
  .n17-row .r { grid-column: 3; grid-row: 2; flex-direction: row; justify-content: space-between; align-items: center; }
  .n17-row .kb { grid-column: 4; grid-row: 1; }
  .n17-row p { white-space: normal; }
}

/* ===== 18.css ===== */
/* 18 Promotions & newsletters (prefix p18-) */
.p18-crumbs { display: flex; align-items: center; margin: 16px 34px 0 18px; }
.p18-crumbs .cur { color: var(--text-strong); }
.p18-crumbs .when { margin-left: auto; font-size: 13.5px; color: var(--text-2); display: inline-flex; gap: 16px; }
.p18-crumbs .when b { font-weight: 500; color: var(--text-strong); font-size: 14.5px; }
.p18-frame { margin: 16px 0 0 -8px; }
.p18-in { display: grid; grid-template-columns: 395px minmax(0, 1fr) 493px; padding: 0 !important; overflow: hidden; }
.p18-frame > .frame-in.p18-in { height: 830px; }
.p18-lib { padding: 22px 20px 12px 24px; border-right: 1px solid var(--rim); min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.p18-lib h2, .p18-mid h2, .p18-pv h2 { font-size: 22px; font-weight: 600; }
.p18-lib .sub { font-size: 15px; color: var(--text-2); margin-top: 2px; }
.p18-lib .q { position: relative; display: block; margin-top: 18px; }
.p18-lib .q .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.p18-lib .q input { width: 100%; height: 38px; padding: 0 12px 0 40px; border: 1px solid var(--rim); border-radius: 8px; font-size: 13.5px; }
.p18-chips { display: flex; gap: 2px; margin-top: 16px; }
.p18-chips a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--text-strong); }
.p18-chips a span { min-width: 22px; height: 20px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--surface-3); font-size: 11.5px; color: var(--text-2); }
.p18-chips a.active { background: var(--primary-tint-2); color: var(--primary-600); }
.p18-chips a.active span { background: #DCE8FC; color: var(--primary-600); }
.p18-lib .sort { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.p18-lib .sort select { border: 0; background: none; font-size: 13.5px; color: var(--text-strong); padding: 0; }
.p18-senders { margin-top: 10px; display: flex; flex-direction: column; overflow-y: auto; min-height: 0; }
.p18-sender { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--rim-soft); color: inherit; }
.p18-sender:hover { background: var(--surface-2); color: inherit; }
.p18-sender.sel { background: var(--primary-tint-2); border-radius: 8px; border-bottom-color: transparent; }
.p18-sender.sel::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--primary); }
.p18-sender .avatar { width: 40px; height: 40px; }
.p18-sender .t { display: flex; flex-direction: column; min-width: 0; }
.p18-sender b { font-size: 14.5px; font-weight: 500; color: var(--text-strong); }
.p18-sender small { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p18-sender .r { display: flex; flex-direction: column; align-items: flex-end; }
.p18-sender .r b { font-size: 13.5px; font-weight: 400; }
.p18-sender .status { font-size: 11px; }

.p18-mid { padding: 22px 20px 14px; border-right: 1px solid var(--rim); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.p18-mid header { display: flex; align-items: flex-start; gap: 14px; }
.p18-mid header > div { flex: 1; min-width: 0; }
.p18-mid header p { font-size: 14px; color: var(--text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p18-mid header p i { font-style: normal; margin: 0 8px; }
.p18-mid .st { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px 0 16px; border: 1px solid var(--rim); border-radius: 10px; }
.p18-mid .st select { border: 0; background: none; font-size: 14.5px; color: var(--text-strong); }
.p18-mid header .icon-btn { width: 42px; height: 42px; color: var(--text-strong); }
.p18-bulk { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.p18-bulk label { display: inline-flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--text-strong); margin-right: auto; white-space: nowrap; }
.p18-bulk .btn { height: 36px; gap: 8px; font-size: 13px; }
.p18-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.p18-card { display: grid; grid-template-columns: 22px 50px 1fr; gap: 14px; padding: 14px 16px 12px; border: 1px solid var(--rim); border-radius: 10px; }
.p18-card.sel { border-color: var(--primary-400); background: #F7FAFF; box-shadow: 0 0 0 2px rgba(71,137,245,.12); }
.p18-card > input { margin-top: 14px; }
.p18-card .avatar-lg { width: 50px; height: 50px; border-radius: 10px; border: 1px solid var(--rim); background: var(--surface); font-size: 18px; color: var(--text-strong); }
.p18-card > div { min-width: 0; }
.p18-card .hd { display: flex; align-items: baseline; gap: 10px; }
.p18-card .hd b { font-size: 15px; font-weight: 500; color: var(--text-strong); }
.p18-card .hd time { margin-left: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.p18-card small { font-size: 13px; color: var(--text-2); }
.p18-card h3 { font-size: 15px; font-weight: 600; margin-top: 12px; }
.p18-card h3 a { color: var(--text-strong); }
.p18-card h3 a:hover { color: var(--primary-600); }
.p18-card.picked { border-color: var(--primary-400); }
.p18-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.45; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p18-card footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.p18-card footer .pill { height: 24px; padding: 0 12px; font-size: 12px; }
.p18-card footer .btn { margin-left: auto; height: 34px; gap: 10px; }
.p18-pager { display: flex; align-items: center; margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.p18-pager nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.p18-pager .sq, .p18-pager a.sq { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 13px; }
.p18-pager .cur { border-color: var(--primary-400); color: var(--primary-600); background: var(--primary-tint-2); }

.p18-pv { padding: 22px 18px 14px 18px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.p18-pv header { display: flex; align-items: center; gap: 8px; }
.p18-pv header h2 { margin-right: auto; }
.p18-pv header small { font-size: 13px; color: var(--text-2); margin-right: 6px; }
.p18-pv header .sq { width: 28px; height: 28px; padding: 0; justify-content: center; }
.p18-pv header .icon-btn { width: 34px; height: 34px; margin-left: 10px; color: var(--text-strong); }
.p18-pv .hdr { display: grid; grid-template-columns: 50px 1fr; gap: 14px; margin-top: 16px; padding: 14px 16px; }
.p18-pv .hdr .avatar-lg { width: 50px; height: 50px; border-radius: 10px; border: 1px solid var(--rim); background: var(--surface); font-size: 18px; color: var(--text-strong); }
.p18-pv .hdr > div { min-width: 0; }
.p18-pv .l1, .p18-pv .l2 { display: flex; align-items: baseline; gap: 10px; }
.p18-pv .l1 b { font-size: 15px; font-weight: 500; }
.p18-pv .l1 time { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.p18-pv .hdr small { display: block; font-size: 13px; color: var(--text-2); }
.p18-pv .l2 { margin-top: 12px; align-items: center; }
.p18-pv .l2 b { font-size: 15px; font-weight: 600; }
.p18-pv .l2 .pill { margin-left: auto; height: 24px; padding: 0 12px; }
.p18-tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--rim); }
.p18-tabs button { flex: 1; position: relative; padding: 10px 4px; border: 0; background: none; font-size: 14px; color: var(--text-2); cursor: pointer; }
.p18-tabs .active { color: var(--primary-600); font-weight: 500; }
.p18-tabs .active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.p18-pv .frameview { flex: 1; margin-top: 10px; padding: 12px 10px; border-radius: 10px; background: #F4F6FA; min-height: 0; overflow-y: auto; }
.p18-pv .frameview > small { display: block; font-size: 12.5px; color: var(--text-2); padding: 0 8px 8px; }
.p18-pv .mail { padding: 18px 20px; border-radius: 8px; background: var(--surface); font-size: 14px; line-height: 1.5; color: var(--text-strong); white-space: pre-line; }
.p18-pv .mail h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; white-space: normal; }
.p18-pv .mail .ft { font-size: 12px; color: var(--text-2); text-align: center; margin-top: 18px; }
.p18-pv dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 6px 8px; font-size: 13.5px; }
.p18-pv dt { color: var(--text-2); }
.p18-pv dd { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.p18-pv > footer { display: flex; gap: 10px; margin-top: 14px; }
.p18-pv > footer .btn { height: 52px; gap: 12px; padding: 0 22px; font-size: 15px; color: var(--primary-600); }
.p18-pv > footer .sq { width: 56px; padding: 0; justify-content: center; margin-left: auto; }
.p18-empty { padding: 40px 10px; text-align: center; color: var(--text-muted); font-size: 14px; }
.p18-method { display: grid; gap: 8px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--rim); border-radius: 10px; }
.p18-method b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.p18-method code { font-size: 12.5px; overflow-wrap: anywhere; color: var(--text-strong); background: var(--surface-2); padding: 6px 8px; border-radius: 6px; }
.p18-method .ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #1B8A61; }
.p18-method .warn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--amber-600); }
.p18-method .btn { justify-self: start; }

@media (max-width: 1200px) {
  .p18-in { grid-template-columns: minmax(0, 1fr); }
  .p18-frame > .frame-in.p18-in { height: auto; }
  .p18-lib, .p18-mid { border-right: 0; border-bottom: 1px solid var(--rim); }
  .p18-senders { max-height: 320px; overflow-y: auto; }
}
@media (max-width: 768px) {
  .p18-crumbs { margin: 10px 4px 0; flex-wrap: wrap; }
  .p18-frame { margin: 8px 0 0; }
  .p18-lib, .p18-mid, .p18-pv { padding: 14px 10px; }
  .p18-chips { flex-wrap: wrap; }
  .p18-bulk { flex-wrap: wrap; }
  .p18-card { grid-template-columns: 22px 1fr; }
  .p18-card .avatar-lg { display: none; }
  .p18-pager { flex-wrap: wrap; gap: 8px; }
  .p18-pv > footer { flex-wrap: wrap; }
}

/* ===== 19.css ===== */
/* 19 Spam & quarantine (prefix q19-) */
.q19-frame { margin: 20px 20px 0 -10px; }
.q19-in { padding: 16px 16px 14px 18px; }
.q19-head { display: flex; align-items: center; gap: 18px; }
.q19-head .badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.q19-head h1 { font-size: 30px; font-weight: 700; }
.q19-head p { font-size: 15.5px; color: var(--text-2); }
.q19-head > div { margin-right: auto; }
.q19-head .q { position: relative; width: 392px; }
.q19-head .q .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
.q19-head .q input { width: 100%; height: 44px; padding: 0 12px 0 46px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14px; }
.q19-head .chip { display: inline-flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14.5px; color: var(--text-strong); }
.q19-head .chip .ic { color: var(--primary-600); }
.q19-head .sq { width: 44px; height: 44px; padding: 0; justify-content: center; color: var(--primary-600); }
.q19-tabs { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 4px 10px 0 8px; }
.q19-tabs a { display: inline-flex; align-items: center; gap: 14px; height: 42px; padding: 0 30px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14.5px; color: var(--text-strong); }
.q19-tabs a .ic { color: var(--text-2); }
.q19-tabs a.active { border-color: var(--primary-400); background: var(--primary-tint-2); color: var(--primary-600); }
.q19-tabs a.active .ic { color: var(--primary-600); }
.q19-tabs > .btn, .q19-tabs > span { margin-left: auto; }
.q19-tabs .btn { height: 42px; gap: 12px; padding: 0 30px; }
.q19-tabs .btn .ic { color: var(--primary-600); }
.q19-body { display: grid; grid-template-columns: 447px minmax(0, 1fr) 376px; gap: 14px; margin-top: 18px; }
.q19-list { display: flex; flex-direction: column; min-width: 0; }
.q19-list .rows { display: flex; flex-direction: column; gap: 4px; }
.q19-row { display: grid; grid-template-columns: 22px 1fr; gap: 20px; padding: 12px 16px 10px 14px; border: 1px solid var(--rim-soft); border-radius: 10px; background: var(--surface); cursor: pointer; color: inherit; }
.q19-row:hover { border-color: #CFDDF6; color: inherit; }
.q19-row.sel { background: var(--primary-tint-2); border-color: #CFDDF6; }
.q19-row > input { margin-top: 10px; }
.q19-row > div, .q19-row > a { min-width: 0; color: inherit; }
.q19-row > a:hover { color: inherit; }
.q19-row .hd { display: flex; align-items: baseline; gap: 10px; }
.q19-row .hd b { font-size: 14px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q19-row .hd time { margin-left: auto; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.q19-row .sj { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.q19-row .sj span:first-child { font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q19-row .sj .pill { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12.5px; flex: none; }
.q19-row p { font-size: 12.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.soft { background: #FDEDED; color: #C9323F; }
.q19-list footer { display: flex; align-items: center; margin-top: 10px; font-size: 13px; color: var(--text-2); }
.q19-list footer .btn { margin-left: auto; height: 40px; min-width: 246px; justify-content: space-between; }
.q19-list footer .menu { right: 0; left: auto; bottom: 46px; top: auto; }

.q19-msg { padding: 18px 20px 14px; display: flex; flex-direction: column; min-width: 0; }
.q19-msg header { display: flex; align-items: center; gap: 14px; }
.q19-msg h2 { font-size: 20px; font-weight: 600; flex: 1; min-width: 0; }
.q19-msg header .pill { height: 28px; padding: 0 12px; gap: 8px; font-size: 13px; }
.q19-msg .from { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 16px; align-items: center; margin-top: 16px; }
.q19-msg .from .avatar-lg { width: 46px; height: 46px; }
.q19-msg .from div { display: flex; flex-direction: column; min-width: 0; }
.q19-msg .from b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q19-msg .from small { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q19-msg .from time { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.q19-msg .from .sq { width: 40px; height: 40px; padding: 0; justify-content: center; }
.q19-msg .to { display: flex; gap: 20px; margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rim); font-size: 13.5px; color: var(--text-strong); }
.q19-msg .to span { color: var(--text-2); }
.q19-banner { display: flex; gap: 16px; align-items: center; margin-top: 14px; padding: 12px 16px; border: 1px solid #CFDDF6; border-radius: 10px; background: #F2F6FE; }
.q19-banner > .ic { color: var(--primary-600); flex: none; }
.q19-banner span { display: flex; flex-direction: column; gap: 2px; }
.q19-banner b { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.q19-banner small { font-size: 12px; color: var(--text-2); }
.q19-text { flex: 1; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--rim-soft); border-radius: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-strong); white-space: pre-line; overflow-y: auto; min-height: 0; max-height: 330px; }
.q19-text small { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rim-soft); font-size: 12px; color: var(--text-2); }
.deadlink { display: flex; align-items: center; gap: 12px; margin: 6px 0; padding: 8px 12px; border-radius: 6px; background: #F1F3F7; color: var(--text-2); white-space: normal; }
.deadlink code { flex: 1; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; font-family: inherit; }
.deadlink .icon-btn { width: 28px; height: 28px; color: var(--text-2); }
.q19-dec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.q19-dec .d { display: flex; align-items: center; gap: 10px; height: 76px; padding: 0 12px; border: 1px solid; border-radius: 8px; text-align: left; cursor: pointer; font: inherit; background: var(--surface); }
.q19-dec .d span { display: flex; flex-direction: column; gap: 2px; }
.q19-dec .d b { font-size: 14px; font-weight: 500; }
.q19-dec .d small { font-size: 11.5px; color: var(--text-2); }
.q19-dec .ok { background: #EAF8F1; border-color: #CBEBDA; }
.q19-dec .ok > .ic { color: #fff; background: #20B26B; border-radius: 50%; padding: 4px; }
.q19-dec .ok b { color: #17744C; }
.q19-dec .block { border-color: #EFA2A8; background: #FFF6F6; }
.q19-dec .block > .ic, .q19-dec .block b { color: #D8353F; }
.q19-dec .del { border-color: var(--rim); background: #F7F8FA; }
.q19-dec .del > .ic { color: var(--text-strong); }
.q19-dec .d:disabled { opacity: .5; cursor: not-allowed; }

.q19-an { padding: 0 18px 16px; min-width: 0; }
.q19-rtabs { display: flex; margin: 0 -18px; border-bottom: 1px solid var(--rim); }
.q19-rtabs button { flex: 1; position: relative; padding: 14px 4px; border: 0; background: none; font-size: 14px; color: var(--text-strong); cursor: pointer; }
.q19-rtabs .active { color: var(--primary-600); font-weight: 500; }
.q19-rtabs .active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.q19-an h3 { font-size: 14.5px; font-weight: 600; margin-top: 18px; }
.q19-an .cls { display: grid; grid-template-columns: 50px 1fr; gap: 14px; margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rim-soft); }
.q19-an .cls > .ic { color: #D8353F; }
.q19-an .cls span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.q19-an .cls .pill { height: 30px; padding: 0 16px; font-size: 14px; }
.q19-an .cls small, .q19-an .rs small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.q19-an .cls .note { font-size: 11.5px; color: var(--text-muted); }
.q19-an .rs { display: grid; grid-template-columns: 40px 1fr; gap: 10px; margin-top: 12px; }
.q19-an .rs .w { color: #D8353F; }
.q19-an .rs .i { color: var(--primary-600); }
.q19-an .rs span { display: flex; flex-direction: column; gap: 2px; }
.q19-an .rs b { font-size: 13.5px; font-weight: 500; }
.q19-an dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 10px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--rim-soft); font-size: 13px; }
.q19-an dt { display: flex; align-items: center; gap: 12px; color: var(--text-strong); }
.q19-an dt .ic { color: var(--text-strong); }
.q19-an dd { margin: 0; color: var(--text-strong); text-align: right; }
.q19-an dd.bad { color: #D8353F; font-weight: 600; }
.q19-an pre { margin: 12px 0 0; padding: 12px; border-radius: 8px; background: var(--surface-2); font: inherit; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 520px; overflow-y: auto; }
.q19-empty { padding: 40px 10px; text-align: center; color: var(--text-muted); font-size: 14px; }

@media (max-width: 1200px) {
  .q19-head { flex-wrap: wrap; }
  .q19-head .q { width: 100%; }
  .q19-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .q19-frame { margin: 8px 0 0; }
  .q19-in { padding: 10px 8px; }
  .q19-head h1 { font-size: 24px; }
  .q19-tabs { flex-wrap: wrap; padding: 0; }
  .q19-tabs a { padding: 0 12px; }
  .q19-tabs > .btn, .q19-tabs > span { margin-left: 0; }
  .q19-dec { grid-template-columns: 1fr; }
  .q19-msg .from { grid-template-columns: 40px 1fr auto; }
  .q19-msg .from time { grid-column: 2; }
  .q19-list footer .btn { min-width: 0; }
}

/* ===== 20.css ===== */
/* 20 Browser wall (prefix b20-) */
.b20 { display: flex; flex-direction: column; }
.b20-master { width: 1027px; margin: 14px auto 0; }
.b20-master > .frame-in { display: grid; grid-template-columns: 236px 1fr 236px; padding: 22px 22px 14px; gap: 18px; }
.b20-master .mini { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--rim-soft); padding-right: 14px; }
.b20-master .mini a { display: flex; align-items: center; gap: 22px; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 14px; color: var(--text-strong); }
.b20-master .mini a .ic { color: var(--text-strong); }
.b20-master .mini a.on { background: var(--primary-tint-2); }
.b20-master .mini small { margin-top: auto; font-size: 10.5px; letter-spacing: .14em; color: var(--text-2); padding-left: 2px; }
.b20-master .mid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.b20-master .kick { font-size: 13px; letter-spacing: .3em; color: var(--text-2); }
.b20-master h1 { font-size: 31px; font-weight: 700; margin-top: 10px; letter-spacing: -.01em; }
.b20-master .mid p { font-size: 17px; color: var(--text-strong); margin-top: 2px; }
.b20-master .play { width: 78px; height: 78px; margin-top: 18px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #5C9BFA, #2F74F0); box-shadow: 0 10px 24px rgba(47,116,240,.3); }
.b20-master .play:disabled { background: #BFCBE0; box-shadow: none; cursor: not-allowed; }
a.b20-master .play, .b20-master a.play { color: #fff; }
.b20-mon .link a { font-size: 12px; }
.b20-master .mid > b { font-size: 16px; font-weight: 600; color: var(--primary-600); margin-top: 12px; }
.b20-master .mid > small { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.b20-master .side { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--rim-soft); padding-left: 14px; }
.b20-master .nodes { width: 150px; height: 80px; margin: 0 auto 4px; }
.b20-master .nodes path { fill: none; stroke: #A9C3F2; stroke-width: 1.5; }
.b20-master .nodes circle { fill: #D8E5FB; stroke: #9CBBF1; }
.b20-master .chip { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px; border-radius: 8px; background: var(--primary-tint-2); font-size: 13px; color: var(--text-strong); }
.b20-master .chip .ic { color: var(--primary-600); }
.b20-master .side > small { margin-top: auto; text-align: right; font-size: 12px; color: var(--text-2); }
.b20-hub { position: relative; height: 84px; margin: 0 7px; }
.b20-hub .wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.b20-hub .wires path { fill: none; stroke: #7FAAF2; stroke-width: 1.4; }
.b20-hub .pill-hub { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 22px; height: 46px; padding: 0 34px;
  border: 1px solid var(--rim); border-radius: 23px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 16px; font-weight: 500; color: var(--text-strong); }
.b20-hub .pill-hub .ic { color: var(--primary-600); }
.b20-mons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 0 7px; }
.b20-mon { display: flex; flex-direction: column; border: 1px solid var(--rim); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm); padding: 0 12px 12px; min-width: 0; }
.b20-mon .chrome { display: flex; align-items: center; gap: 14px; height: 44px; margin: 0 -12px; padding: 0 16px; border-bottom: 1px solid var(--rim-soft); }
.b20-mon .dots { display: inline-flex; gap: 6px; }
.b20-mon .dots i { width: 10px; height: 10px; border-radius: 50%; background: #F0605A; }
.b20-mon .dots i + i { background: #F5BE4F; }
.b20-mon .dots i + i + i { background: #58C35A; }
.b20-mon .addr { flex: 1; display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--text-strong); }
.b20-mon .scr { height: 186px; margin-top: 10px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rim-soft); }
.b20-mon .site .sh { display: flex; align-items: center; gap: 20px; height: 34px; padding: 0 12px; font-size: 10.5px; color: var(--text-2); }
.b20-mon .site .sh b { font-size: 14px; color: var(--text-strong); margin-right: auto; }
.b20-mon .site .hero { height: 152px; padding: 16px 16px; background: linear-gradient(115deg, #FFFFFF 38%, #E9EEF6 60%, #D5DEEA 100%); }
.b20-mon .site.research .hero { background: linear-gradient(115deg, #FFFFFF 40%, #EEF2FA 70%, #DDE5F4 100%); }
.b20-mon .hero small { font-size: 10px; letter-spacing: .1em; color: var(--text-2); }
.b20-mon .hero h4 { font-size: 20px; font-weight: 700; max-width: 220px; line-height: 1.15; margin-top: 4px; }
.b20-mon .hero p { font-size: 11.5px; color: var(--text-2); max-width: 170px; margin-top: 6px; }
.b20-mon .hero .b { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 4px; background: var(--primary-600); color: #fff; font-size: 11px; }
.b20-mon .site.research .hero .b { background: none; border: 1px solid var(--primary-600); color: var(--primary-600); }
.b20-mon .wa { display: flex; flex-direction: column; }
.b20-mon .wah { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; font-size: 13px; border-bottom: 1px solid var(--rim-soft); }
.b20-mon .wah .ic:first-child { color: #25B24A; }
.b20-mon .wah span { margin-left: auto; display: inline-flex; gap: 12px; color: var(--text-2); }
.b20-mon .wab { flex: 1; display: grid; grid-template-columns: 140px 1fr; }
.b20-mon .wab nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-right: 1px solid var(--rim-soft); }
.b20-mon .wab nav span { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; color: var(--text-strong); }
.b20-mon .wab nav span.on { background: #E8F7EE; color: #1B8A4A; }
.b20-mon .wab ul { list-style: none; margin: 0; padding: 6px 10px; }
.b20-mon .wab li { display: grid; grid-template-columns: 28px 1fr auto; gap: 1px 10px; padding: 6px 0; border-bottom: 1px solid var(--rim-soft); font-size: 11px; }
.b20-mon .wab li i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: #E3E7EE; }
.b20-mon .wab li small { grid-column: 2; color: var(--text-2); font-size: 10.5px; }
.b20-mon .wab li time { grid-row: 1; grid-column: 3; color: var(--text-2); font-size: 10.5px; }
.b20-mon .prof { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 12px; }
.b20-mon .prof .pi { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.b20-mon .prof .pi.lav { background: var(--lavender-tint); color: #7D63C9; }
.b20-mon .prof.wa .pi { background: #25B24A; color: #fff; }
.b20-mon .prof span { display: flex; flex-direction: column; min-width: 0; }
.b20-mon .prof b { font-size: 16px; font-weight: 600; }
.b20-mon .prof small { font-size: 13px; color: var(--text-2); }
.b20-mon .prof .pill { flex-direction: row; height: 32px; padding: 0 16px; gap: 10px; border-radius: 16px; font-size: 13.5px; }
.b20-mon .prof .pill i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.st-on { background: #E6F7EE; color: #1B8A61; }
.st-wait { background: var(--lavender-tint); color: #6E53C2; }
.st-off { background: var(--surface-3); color: var(--text-2); }
.b20-mon .link { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rim-soft); font-size: 12px; color: var(--text-strong); }
.b20-mon .link .ic { color: var(--primary-600); }
.b20-mon .link small { margin-left: auto; color: var(--text-2); }
.b20-mon .acts { display: grid; grid-template-columns: 1fr 1fr 1fr 44px; gap: 8px; margin-top: auto; padding-top: 10px; }
.b20-mon .acts .btn { height: 40px; gap: 10px; font-size: 13.5px; justify-content: center; }
.b20-mon .acts .btn .ic { color: var(--primary-600); }
.b20-mon .acts .sq { padding: 0; }
.b20-mon.off .scr { display: grid; place-items: center; align-content: center; gap: 10px; border-style: dashed; background: #F7F9FC; color: var(--text-2); text-align: center; padding: 0 20px; }
.b20-mon.off .scr .ic { color: #9AA8BF; }
.b20-mon.off .scr b { font-size: 14px; color: var(--text-strong); font-weight: 500; }
.b20-mon.off .scr small { font-size: 12.5px; }
.b20-mon.off .acts .btn:disabled { opacity: .55; }

.b20-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 26px 7px 8px; padding: 12px 40px; }
.b20-bar .grp { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; border-right: 1px solid var(--rim-soft); }
.b20-bar .grp:last-child { border-right: 0; }
.b20-bar .grp > small { font-size: 12px; color: var(--text-2); }
.b20-bar .st { display: flex; gap: 0; }
.b20-bar .st > span { display: grid; grid-template-columns: 20px auto; column-gap: 12px; align-items: center; padding-right: 30px; margin-right: 30px; border-right: 1px solid var(--rim-soft); }
.b20-bar .st > span:last-child { border-right: 0; }
.b20-bar .st i { grid-row: span 2; width: 18px; height: 18px; border-radius: 50%; }
.b20-bar .st i.g { background: #1FC29A; }
.b20-bar .st i.l { background: #A28AE4; }
.b20-bar .st i.x { background: #8C98AE; }
.b20-bar .st b { font-size: 21px; font-weight: 600; }
.b20-bar .st small { font-size: 12.5px; color: var(--text-2); }
.b20-bar .qa { display: flex; gap: 16px; }
.b20-bar .qa .btn-primary { height: 46px; min-width: 226px; gap: 16px; font-size: 16px; justify-content: center; }
.b20-bar .qa .sq { width: 58px; height: 46px; padding: 0; justify-content: center; }
.b20-bar .qa .sq .ic { color: var(--text-strong); }
.b20-bar .tip p { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--text-strong); }
.b20-bar .tip .ic { color: var(--primary-600); flex: none; }

@media (max-width: 1200px) {
  .b20-master { width: auto; margin: 12px 7px 0; }
  .b20-master > .frame-in { grid-template-columns: 1fr; }
  .b20-master .mini { flex-direction: row; flex-wrap: wrap; border-right: 0; padding: 0; }
  .b20-master .side { border-left: 0; padding: 0; }
  .b20-hub { display: none; }
  .b20-mons { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
  .b20-bar { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .b20-bar .grp { border-right: 0; padding: 0; }
}
@media (max-width: 768px) {
  .b20-master h1 { font-size: 24px; }
  .b20-bar .st > span { padding-right: 14px; margin-right: 14px; }
  .b20-bar .qa .btn-primary { min-width: 0; flex: 1; }
}

/* live sessions on the wall (plans/browser-hosts.md step 2) */
.b20-mon.live .scr { display: grid; place-items: center; align-content: center; gap: 8px; padding: 0 20px; text-align: center; background: linear-gradient(180deg, #F2F7FF, #FFFFFF); color: var(--text-2); text-decoration: none; }
.b20-mon.live .scr .ic { color: var(--primary-600); }
.b20-mon.live .scr b { font-size: 14px; font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.b20-mon.live .scr small { font-size: 12.5px; }
.b20-mon .addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 21.css ===== */
/* 21 New browser session (prefix w21-) */
.w21-crumbs { display: flex; align-items: center; margin: 14px 20px 0 16px; }
.w21-crumbs .cur { color: var(--text-strong); }
.w21-crumbs .when { margin-left: auto; font-size: 13.5px; color: var(--text-2); display: inline-flex; gap: 10px; }
.w21-crumbs .when b { font-weight: 400; color: var(--text-strong); }
.w21-frame { margin: 16px 2px 0 1px; }
.w21-in { padding: 18px 22px 16px; }
.w21-head { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rim-soft); }
.w21-head .badge { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.w21-head h1 { font-size: 30px; font-weight: 700; }
.w21-head p { font-size: 15.5px; color: var(--text-2); }
.w21-how { margin-left: auto; display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 18px; border: 1px solid var(--rim); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; }
.w21-how .ic { color: var(--primary-600); }
.w21-how span { display: flex; flex-direction: column; }
.w21-how b { font-size: 13.5px; font-weight: 600; }
.w21-how small { font-size: 12px; color: var(--text-2); }
.w21-grid { display: grid; grid-template-columns: 616px minmax(0, 1fr); gap: 36px; margin-top: 14px; }
.w21-sec + .w21-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rim-soft); }
.w21-sec h2 { display: flex; gap: 16px; align-items: flex-start; font-size: 16px; font-weight: 600; }
.w21-sec h2 i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); font-style: normal; font-size: 15px; }
.w21-sec h2 span { display: flex; flex-direction: column; }
.w21-sec h2 small { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.w21-sec .f { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13.5px; color: var(--text-strong); }
.w21-sec .input { height: 40px; }
.w21-sec .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.w21-sec .ic-in { position: relative; display: flex; align-items: center; }
.w21-sec .ic-in > .ic { position: absolute; left: 14px; color: var(--primary-600); pointer-events: none; }
.w21-sec .ic-in .input { width: 100%; padding-left: 46px; }
.w21-sec .tpl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.w21-sec .tpl label { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px; border: 1px solid var(--rim); border-radius: 8px; cursor: pointer; min-height: 96px; }
.w21-sec .tpl label.on { border-color: var(--primary-400); background: #F5F9FF; box-shadow: 0 0 0 1px var(--primary-400); }
.w21-sec .tpl label > .ic { flex: none; color: var(--primary-600); }
.w21-sec .tpl label > .ic.wa { color: #25B24A; }
.w21-sec .tpl label > .ic.lav { color: #8E6EE0; }
.w21-sec .tpl span { display: flex; flex-direction: column; gap: 4px; }
.w21-sec .tpl b { font-size: 13.5px; font-weight: 600; }
.w21-sec .tpl small { font-size: 12px; color: var(--text-2); }
.w21-sec .tpl input { position: absolute; top: 10px; right: 10px; accent-color: var(--primary); }
.w21-sec textarea.input { width: 100%; height: auto; margin-top: 10px; padding: 12px 14px; resize: vertical; }
.w21-sec .cnt { display: block; text-align: right; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.w21-pv { border-left: 1px solid var(--rim-soft); padding-left: 16px; display: flex; flex-direction: column; }
.w21-pv h2 { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; font-weight: 600; }
.w21-pv h2 > .ic { color: var(--primary-600); background: var(--primary-tint-2); border-radius: 50%; padding: 6px; width: 38px; height: 38px; }
.w21-pv h2 span { display: flex; flex-direction: column; }
.w21-pv h2 small { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.w21-pv h2 .pill { margin-left: auto; height: 26px; padding: 0 12px; background: var(--primary-tint-2); color: var(--primary-600); font-weight: 400; }
.w21-pv .win { flex: 1; margin-top: 12px; border: 1px solid var(--rim); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); min-height: 400px; }
.w21-pv .tabs { display: flex; align-items: center; gap: 14px; height: 50px; padding: 8px 12px 0; background: #F2F4F8; color: var(--text-2); }
.w21-pv .tab { display: inline-flex; align-items: center; gap: 12px; height: 42px; width: 230px; padding: 0 12px; border-radius: 10px 10px 0 0; background: var(--surface); font-size: 13.5px; color: var(--text-strong); }
.w21-pv .tab .ic:last-child { margin-left: auto; color: var(--text-2); }
.w21-pv .bar { display: flex; align-items: center; gap: 16px; height: 50px; padding: 0 12px; border-bottom: 1px solid var(--rim-soft); color: var(--text-2); }
.w21-pv .url { flex: 1; display: inline-flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; border-radius: 17px; background: #F2F4F8; font-size: 13.5px; }
.w21-pv .empty { flex: 1; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: #A8B4C8; padding: 20px; }
.w21-pv .empty b { font-size: 15.5px; font-weight: 400; color: var(--text-2); margin-top: 10px; }
.w21-pv .empty small { font-size: 13px; color: var(--text-2); max-width: 260px; }
.w21-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rim-soft); }
.w21-bottom .w21-sec { padding: 0 20px; border-right: 1px solid var(--rim-soft); margin-top: 0; border-top: 0; }
.w21-bottom .w21-sec:first-child { padding-left: 0; }
.w21-bottom .w21-sec:last-child { border-right: 0; padding-right: 0; }
.w21-bottom .runner { position: relative; display: flex; align-items: center; margin-top: 14px; }
.w21-bottom .runner > .ic { position: absolute; left: 14px; color: var(--text-strong); pointer-events: none; }
.w21-bottom .runner select { width: 100%; height: 44px; padding: 0 130px 0 50px; }
.w21-bottom .runner .av { position: absolute; right: 38px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-strong); pointer-events: none; }
.w21-bottom .runner .av i { width: 9px; height: 9px; border-radius: 50%; background: #1FC29A; }
.w21-bottom .runner .av.off i { background: var(--grey); }
.w21-bottom .ck { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; cursor: pointer; }
.w21-bottom .ck span { display: flex; flex-direction: column; }
.w21-bottom .ck b { font-size: 13.5px; font-weight: 500; }
.w21-bottom .ck small { font-size: 12px; color: var(--text-2); }
.w21-bottom .ck .pill { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12px; flex-direction: row; }
.w21-bottom .appr { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px solid #CFDDF6; border-radius: 10px; background: #F5F9FF; }
.w21-bottom .appr > .ic { color: var(--primary-600); }
.w21-bottom .appr span { display: flex; flex-direction: column; }
.w21-bottom .appr b { font-size: 13px; font-weight: 600; }
.w21-bottom .appr small { font-size: 12px; color: var(--text-2); }
.w21-bottom .go { display: flex; justify-content: flex-end; gap: 14px; margin-top: 14px; }
.w21-bottom .go .btn { height: 46px; min-width: 124px; justify-content: center; }
.w21-bottom .go .btn-primary { min-width: 246px; gap: 14px; font-size: 15px; }
.w21-note { margin-top: 10px; font-size: 12.5px; color: var(--text-2); display: flex; gap: 8px; align-items: center; }
.w21-note .ic { color: var(--amber-600); flex: none; }
.w21-wa { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: #EAF8F1; font-size: 12.5px; color: #17744C; }

@media (max-width: 1200px) {
  .w21-grid { grid-template-columns: minmax(0, 1fr); }
  .w21-pv { border-left: 0; padding-left: 0; }
  .w21-bottom { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .w21-bottom .w21-sec { padding: 0; border-right: 0; }
}
@media (max-width: 768px) {
  .w21-crumbs { margin: 10px 4px 0; flex-wrap: wrap; }
  .w21-frame { margin: 8px 0 0; }
  .w21-in { padding: 12px 10px; }
  .w21-head { flex-wrap: wrap; }
  .w21-head h1 { font-size: 24px; }
  .w21-how { margin-left: 0; }
  .w21-sec .two, .w21-sec .tpl { grid-template-columns: minmax(0, 1fr); }
  .w21-pv .tab { width: auto; }
  .w21-bottom .go .btn-primary { min-width: 0; flex: 1; }
}

/* ===== 22.css ===== */
/* 22 Browser: live control (prefix l22-) */
.l22-crumbs { margin: 12px 20px 0 22px; }
.l22-crumbs .cur { color: var(--text-strong); }
.l22-frame { margin: 12px 7px 0 7px; }
.l22-in { padding: 16px 18px 14px 20px; }
.l22-head { display: flex; align-items: center; gap: 18px; }
.l22-head .badge { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.l22-head h1 { font-size: 28px; font-weight: 700; }
.l22-head p { font-size: 15px; color: var(--text-2); }
.l22-head > div { margin-right: auto; }
.l22-state { height: 38px; padding: 0 16px; gap: 10px; border-radius: 19px; font-size: 14px; background: #EEF7F3; color: var(--text-strong); }
.l22-state i { width: 11px; height: 11px; border-radius: 50%; background: #1FC29A; }
.l22-state.off { background: var(--surface-3); color: var(--text-2); }
.l22-state.off i { background: var(--grey); }
.l22-head .when { font-size: 14px; color: var(--text-2); display: inline-flex; gap: 12px; margin-left: 12px; }
.l22-head .when b { font-weight: 400; color: var(--text-strong); }
.l22-body { display: grid; grid-template-columns: minmax(0, 1fr) 429px; gap: 16px; margin-top: 16px; }
.l22-view { min-height: 742px; border: 1px solid var(--rim); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-sm); }
.l22-view .tabs { display: flex; align-items: flex-end; gap: 6px; height: 50px; padding: 8px 12px 0; background: #EEF1F6; color: var(--text-2); }
.l22-view .tabs .dot { width: 16px; height: 16px; border-radius: 50%; background: #D8DDE6; align-self: center; margin-right: 10px; }
.l22-view .tab { display: inline-flex; align-items: center; gap: 10px; height: 40px; width: 200px; padding: 0 12px; border-radius: 10px 10px 0 0; font-size: 13px; color: var(--text-2); }
.l22-view .tab.on { background: var(--surface); color: var(--text-strong); }
.l22-view .tab i { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; background: #4E82E9; color: #fff; font-style: normal; font-size: 11px; }
.l22-view .tab:not(.on) i { background: #8FA4C8; }
.l22-view .tab .ic { margin-left: auto; }
.l22-view .tabs > .ic { align-self: center; margin-left: 6px; }
.l22-view .bar { display: flex; align-items: center; gap: 18px; height: 52px; padding: 0 14px; border-bottom: 1px solid var(--rim-soft); color: var(--text-strong); }
.l22-view .url { flex: 1; display: inline-flex; align-items: center; gap: 12px; height: 36px; padding: 0 16px; border-radius: 18px; background: #F2F4F8; font-size: 14px; }
.l22-view .pagewrap { flex: 1; overflow: hidden; }
.l22-view .site { padding: 0 24px 16px; }
.l22-view .site .nav { display: flex; align-items: center; gap: 28px; height: 60px; font-size: 12.5px; color: var(--text-strong); }
.l22-view .site .nav b { font-size: 21px; font-weight: 700; margin-right: 76px; }
.l22-view .site .nav .on { font-weight: 600; }
.l22-view .site .nav .ic { margin-left: auto; }
.l22-view .site .nav .try { height: 34px; padding: 0 16px; border-radius: 6px; background: var(--primary); color: #fff; display: inline-grid; place-items: center; }
.l22-view .site .kick { display: block; text-align: center; margin-top: 20px; font-size: 12px; letter-spacing: .12em; color: var(--primary-600); }
.l22-view .site h2 { text-align: center; font-size: 38px; font-weight: 700; line-height: 1.1; max-width: 480px; margin: 8px auto 0; }
.l22-view .site .lead { text-align: center; font-size: 15px; color: var(--text-2); margin-top: 10px; }
.l22-view .bill { display: flex; justify-content: center; gap: 2px; margin: 14px auto 0; width: max-content; padding: 3px; border-radius: 18px; background: #EEF1F6; font-size: 12px; }
.l22-view .bill span { padding: 6px 18px; border-radius: 15px; color: var(--text-2); }
.l22-view .bill .on { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.l22-view .bill em { font-style: normal; padding: 1px 6px; border-radius: 8px; background: #A28AE4; color: #fff; font-size: 11px; }
.l22-view .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.l22-view .plan { position: relative; display: flex; flex-direction: column; padding: 20px 22px 18px; border: 1px solid var(--rim-soft); border-radius: 10px; }
.l22-view .plan.pop { border-color: #C9DBF8; background: #F5F9FF; }
.l22-view .plan .tag { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 11px; }
.l22-view .plan b { font-size: 19px; font-weight: 600; }
.l22-view .plan small { font-size: 13px; color: var(--text-2); }
.l22-view .plan .price { font-size: 30px; font-weight: 700; margin-top: 14px; }
.l22-view .plan .price span { font-size: 14px; font-weight: 400; color: var(--text-2); }
.l22-view .plan ul { list-style: none; margin: 10px 0 14px; padding: 0; font-size: 13px; line-height: 1.95; color: var(--text-strong); }
.l22-view .plan li .ic { color: var(--primary-600); margin-right: 10px; }
.l22-view .plan .choose { margin-top: auto; height: 36px; display: grid; place-items: center; border: 1px solid var(--primary-600); border-radius: 6px; color: var(--primary-600); font-size: 13px; }
.l22-view .plan.pop .choose { background: var(--primary); color: #fff; border-color: var(--primary); }
.l22-view .nolive { flex: 1; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: 40px; color: #A8B4C8; }
.l22-view .nolive b { font-size: 18px; font-weight: 500; color: var(--text-strong); }
.l22-view .nolive small { font-size: 14px; color: var(--text-2); max-width: 420px; }

.l22-co { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.l22-co .task { padding: 16px 18px; }
.l22-co .task h2 { display: flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 600; }
.l22-co .task h2 > .ic:first-child { color: var(--primary-600); }
.l22-co .task h2 .k { margin-left: auto; color: var(--text-strong); }
.l22-co .task > p { font-size: 14.5px; color: var(--text-2); margin-top: 6px; line-height: 1.45; }
.l22-co .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; padding: 0; text-align: center; font-size: 12.5px; color: var(--text-2); position: relative; }
.l22-co .steps::before { content: ""; position: absolute; top: 15px; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--primary) 50%, #D8DDE6 50%); }
.l22-co .steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.l22-co .steps i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid #D8DDE6; font-style: normal; font-size: 13px; color: var(--text-2); }
.l22-co .steps .done i, .l22-co .steps .cur i { background: var(--primary); border-color: var(--primary); color: #fff; }
.l22-co .steps .cur { color: var(--primary-600); font-weight: 500; }
.l22-co .steps.idle::before { background: #D8DDE6; }
.l22-view .nolive .btn { margin-top: 8px; }
.l22-co .stat { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding: 10px 16px; border-radius: 10px; background: #F4F6FA; }
.l22-co .stat span { display: flex; flex-direction: column; }
.l22-co .stat span + span { border-left: 1px solid var(--rim); padding-left: 20px; }
.l22-co .stat small { font-size: 13px; color: var(--text-2); }
.l22-co .stat b { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.l22-co i.run { width: 10px; height: 10px; border-radius: 50%; background: #1FC29A; display: inline-block; }
.l22-co i.run.off { background: var(--grey); }
.l22-co .now { display: grid; grid-template-columns: 40px 1fr; gap: 14px; margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: #EEF4FE; }
.l22-co .spin { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #CFDDF6; border-top-color: var(--primary); animation: l22spin 1.2s linear infinite; }
@keyframes l22spin { to { transform: rotate(360deg); } }
.l22-co .now span:last-child { display: flex; flex-direction: column; gap: 4px; }
.l22-co .now b { font-size: 15px; font-weight: 500; }
.l22-co .now small { font-size: 12.5px; color: var(--text-2); }
.l22-co .now time { font-size: 12.5px; color: var(--text-2); text-align: right; }
.l22-co .check { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13.5px; }
.l22-co .check li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 6px 4px; }
.l22-co .check li .ic { color: var(--primary-600); }
.l22-co .check .o { width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--primary); }
.l22-co .check .c { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C9D1DE; }
.l22-co .check time { font-size: 12.5px; color: var(--text-2); }
.l22-co .check .cur time { color: var(--primary-600); }
.l22-co .btns { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; margin-top: 14px; }
.l22-co .btns .btn, .l22-co .open { height: 50px; justify-content: center; gap: 14px; font-size: 15px; border-color: var(--primary-400); color: var(--primary-600); }
.l22-co .open { display: flex; align-items: center; margin-top: 10px; }
.l22-co .sess { padding: 14px 18px; }
.l22-co .sess h3 { font-size: 14px; font-weight: 500; }
.l22-co .sess .row { display: grid; grid-template-columns: 34px 1fr auto 18px; gap: 12px; align-items: center; margin-top: 10px; }
.l22-co .sess .avatar { width: 34px; height: 34px; background: var(--primary-tint-2); color: var(--primary-600); }
.l22-co .sess span { display: flex; flex-direction: column; }
.l22-co .sess b { font-size: 14px; font-weight: 600; }
.l22-co .sess small { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.l22-co .sess .meta { border-left: 1px solid var(--rim); padding-left: 14px; }

@media (max-width: 1200px) {
  .l22-body { grid-template-columns: minmax(0, 1fr); }
  .l22-view { min-height: 420px; }
  .l22-view .plans { grid-template-columns: minmax(0, 1fr); }
  .l22-view .site .nav { flex-wrap: wrap; height: auto; gap: 12px; padding: 12px 0; }
}
@media (max-width: 768px) {
  .l22-frame { margin: 8px 0 0; }
  .l22-in { padding: 10px 8px; }
  .l22-head { flex-wrap: wrap; }
  .l22-head h1 { font-size: 22px; }
  .l22-view .tab { width: auto; }
  .l22-view .tab:not(.on) { display: none; }
}

/* live build (plans/browser-hosts.md step 2) */
.l22-view .pagewrap { position: relative; overflow: auto; background: #F4F6FA; outline: none; }
.l22-view .pagewrap img { display: block; width: 100%; height: auto; user-select: none; }
.l22-view .pagewrap.in-control { box-shadow: inset 0 0 0 3px var(--primary); }
.l22-view .pagewrap.in-control img { cursor: default; }
.l22-view .pagewrap .nolive { position: absolute; inset: 0; background: #F7F9FC; }
.l22-view .pagewrap .nolive[hidden] { display: none; }
.l22-view .bar .nav-btn { background: none; border: 0; padding: 4px; color: var(--text-strong); cursor: pointer; }
.l22-view .bar .nav-btn:disabled { color: var(--text-faint); cursor: not-allowed; }
.l22-view .url input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--text-strong); outline: none; }
.l22-view .url input:not([readonly]) { color: var(--primary-600); }
.l22-co .detail { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--amber-tint); color: var(--amber-600); font-size: 13px; }
.l22-co .detail[hidden] { display: none; }
.l22-co .btns [hidden] { display: none; }
.l22-co .stop { display: flex; width: 100%; height: 44px; margin-top: 10px; justify-content: center; gap: 12px; font-size: 14.5px; color: #D93C41; border-color: #F3A5A8; background: #FFF7F7; }
.l22-state.off i { background: var(--grey); }
.l22-co .open[data-run-task] { margin-top: 10px; }
.l22-co .open:disabled { opacity: .55; cursor: not-allowed; }
.l22-co .moveto { margin-top: 12px; padding: 12px; border: 1px dashed var(--amber); border-radius: 10px; background: var(--amber-tint); display: flex; flex-direction: column; gap: 8px; }
.l22-co .moveto p { display: flex; gap: 8px; font-size: 13px; color: var(--amber-600); }
.l22-co .moveto .btn { justify-content: center; }
.l22-taskform { max-width: 560px; }
.l22-taskform .f { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13.5px; }
.l22-taskform .f small { color: var(--text-2); font-weight: 400; }
.l22-taskform textarea.input { min-height: 60px; resize: vertical; font-size: 13.5px; }

/* ===== 23.css ===== */
/* 23 Browser task and result (prefix t23-) */
.t23-crumbs { display: flex; align-items: center; margin: 14px 22px 0 20px; height: 44px; padding: 0 16px; border-radius: 10px; background: rgba(255,255,255,.55); }
.t23-crumbs .crumbline { font-size: 15px; }
.t23-crumbs .cur { color: var(--text-strong); }
.t23-crumbs .date { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-strong); }
.t23-crumbs .date .ic { color: var(--primary-600); }
.t23-frame { margin: 12px 7px 0 7px; }
.t23-in { display: grid; grid-template-columns: 360px minmax(0, 1fr) 432px; gap: 10px; padding: 8px; }
.t23-col { border: 1px solid var(--rim); border-radius: 12px; background: var(--surface); padding: 12px 10px 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t23-col > h2 { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 8px; font-size: 19px; font-weight: 600; }
.t23-col .hi { color: var(--primary-600); }
.t23-col h2 .k, .t23-col h3 .k { margin-left: auto; color: var(--text-strong); }
.t23-col .card { padding: 12px 14px; }
.t23-col h3 { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 600; }

.t23-mail .msg { font-size: 13px; line-height: 1.5; color: var(--text-strong); }
.t23-mail .from { display: flex; gap: 20px; align-items: center; }
.t23-mail .from .avatar { width: 44px; height: 44px; font-size: 15px; background: #EEF1F6; color: var(--text-strong); }
.t23-mail .from span:last-child { display: flex; flex-direction: column; }
.t23-mail .from b { font-weight: 400; font-size: 14px; }
.t23-mail .from small { color: var(--text-2); font-size: 12.5px; }
.t23-mail .msg h3 { font-size: 16px; margin: 18px 0 12px; }
.t23-mail .msg p { margin: 0 0 12px; }
.t23-mail .msg ul { margin: -4px 0 12px; padding-left: 20px; }
.t23-mail .msg a { color: var(--primary-600); text-decoration: underline; }
.t23-mail .acts { display: flex; gap: 10px; margin-top: 8px; }
.t23-mail .acts .btn { height: 38px; gap: 12px; padding: 0 20px; font-size: 13.5px; }
.t23-mail .acts .more { padding: 0 16px; }
.t23-mail .att h3 { font-size: 14px; font-weight: 500; }
.t23-mail .file { display: grid; grid-template-columns: 34px 1fr 20px 20px; gap: 14px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.t23-mail .pdf { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #FDECEC; color: #E0463E; }
.t23-mail .file span:nth-child(2) { display: flex; flex-direction: column; }
.t23-mail .file b { font-weight: 400; font-size: 13.5px; }
.t23-mail .file small { font-size: 11.5px; color: var(--text-2); }

.t23-task .st { margin-left: auto; height: 28px; padding: 0 14px; gap: 10px; background: #EEF4FE; color: var(--primary-700, var(--primary-600)); font-size: 12.5px; font-weight: 400; }
.t23-task .st i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.t23-task .st.off { background: var(--surface-3); color: var(--text-2); }
.t23-task .st.off i { background: var(--grey); }
.t23-task h2 .k { margin-left: 18px; }
.t23-task .goal { display: grid; grid-template-columns: 1fr 230px; gap: 16px; padding: 14px 16px; }
.t23-task .goal > span { display: flex; gap: 16px; }
.t23-task .goal .src { border-left: 1px solid var(--rim); padding-left: 18px; }
.t23-task .goal span span { display: flex; flex-direction: column; }
.t23-task .goal b { font-size: 13.5px; font-weight: 500; }
.t23-task .goal p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; margin-top: 4px; }
.t23-task .goal small { font-size: 12px; color: var(--text-2); }
.t23-task .goal small.n { color: var(--text-strong); }
.t23-task .goal .c { margin-top: 14px; }
.t23-task .steps ol { list-style: none; margin: 10px 0 0 6px; padding: 0 0 0 22px; border-left: 2px solid var(--primary); }
.t23-task .steps li { position: relative; display: grid; grid-template-columns: 30px 1fr auto 26px; gap: 10px; align-items: center; padding: 10px 0 10px 0; border-bottom: 1px solid var(--rim-soft); }
.t23-task .steps li:last-child { border-bottom: 0; grid-template-columns: 30px 1fr auto; }
.t23-task .steps li::before { content: ""; position: absolute; left: -29px; top: 50%; width: 10px; height: 10px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--primary); background: var(--surface); }
.t23-task .steps li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EEF4FE; color: var(--primary-600); font-style: normal; font-size: 14px; }
.t23-task .steps li span { display: flex; flex-direction: column; }
.t23-task .steps b { font-size: 13px; font-weight: 400; }
.t23-task .steps small { font-size: 12px; color: var(--text-2); }
.t23-task .steps time { font-size: 12px; color: var(--text-2); }
.t23-task .steps .ok { color: #1FC29A; }
.t23-task .steps .rv { height: 24px; padding: 0 12px; background: #EFEAFB; color: #6B4FC6; font-size: 11.5px; }
.t23-task .steps .none { padding: 18px 0; color: var(--text-2); font-size: 13px; border: 0; display: block; }
.t23-task .steps .none::before { display: none; }
.t23-task .offers table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11px; color: var(--text-strong); }
.t23-task .offers th { font-weight: 400; color: var(--text-2); text-align: left; padding: 8px 6px; background: #F6F8FB; border-bottom: 1px solid var(--rim-soft); }
.t23-task .offers td { padding: 10px 6px; border-bottom: 1px solid var(--rim-soft); vertical-align: middle; line-height: 1.35; }
.t23-task .offers td.k { font-weight: 600; }
.t23-task .offers a { color: var(--primary-600); }
.t23-task .offers .ns { font-style: normal; color: var(--text-2); }
.t23-task .offers .none td { text-align: center; color: var(--text-2); padding: 18px 6px; }

.t23-res .hint { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #EAF1FE; }
.t23-res .hint > .ic { width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: #D8E6FD; color: var(--primary-600); }
.t23-res .hint span { display: flex; flex-direction: column; gap: 2px; }
.t23-res .hint b { font-size: 15px; font-weight: 500; color: var(--primary-600); }
.t23-res .hint small { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.t23-res .shot { padding: 8px; }
.t23-res .cap { border: 1px solid var(--rim-soft); border-radius: 8px; overflow: hidden; }
.t23-res .cap .site { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 14px; font-size: 9px; color: var(--text-2); }
.t23-res .cap .site b { font-size: 13px; color: var(--text-strong); margin-right: auto; }
.t23-res .hero { height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 14px; color: #fff;
  background: linear-gradient(180deg, #8FB7DA 0%, #B9CFE0 30%, #6C8F6A 42%, #2F6FA8 55%, #1E5F97 100%); }
.t23-res .hero b { font-size: 19px; font-weight: 600; }
.t23-res .hero small { font-size: 10px; }
.t23-res .feat { display: flex; justify-content: space-around; height: 28px; align-items: center; font-size: 9px; color: var(--text-2); }
.t23-res .shot .meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 0; }
.t23-res .shot .meta span { display: flex; flex-direction: column; }
.t23-res .shot .meta b { font-size: 13px; font-weight: 400; }
.t23-res .shot .meta small { font-size: 12px; color: var(--text-2); }
.t23-res .shot .nav { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 150px; font-size: 11px; color: var(--text-2); }
.t23-res .shot .nav .ic:nth-last-child(2) { margin-left: auto; }
.t23-res .dots { display: inline-flex; gap: 6px; }
.t23-res .dots i { width: 6px; height: 6px; border-radius: 50%; background: #D8DDE6; }
.t23-res .dots i.on { background: var(--primary); }
.t23-res .noshot { height: 220px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed var(--rim); border-radius: 8px; color: #A8B4C8; text-align: center; }
.t23-res .noshot small { font-size: 12.5px; color: var(--text-2); }
.t23-res .sum { padding: 12px 16px; }
.t23-res .sum h3 { font-weight: 500; font-size: 14px; }
.t23-res .sum p { font-size: 12.5px; line-height: 1.55; color: var(--text-strong); margin: 8px 0 0 34px; }
.t23-res .cc, .t23-res .att2, .t23-res .sub { height: 42px; justify-content: flex-start; gap: 22px; padding: 0 18px; font-size: 14px; }
.t23-res .cc .ic:last-child { margin-left: auto; }
.t23-res .att2 { border-color: var(--primary-400); color: var(--primary-600); }
.t23-res .sub, .t23-res .sub:disabled { opacity: 1; background: #F1F3F7; border-color: #F1F3F7; color: var(--text-2); cursor: not-allowed; }
.t23-res .sub small { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; }
.t23-res .note { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); margin: -2px 0 0 4px; }

@media (max-width: 1200px) {
  .t23-in { grid-template-columns: minmax(0, 1fr); }
  .t23-task .offers { overflow-x: auto; }
}
@media (max-width: 768px) {
  .t23-crumbs { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; margin: 8px 8px 0; }
  .t23-crumbs .date { margin-left: 0; }
  .t23-frame { margin: 8px 0 0; }
  .t23-task .goal { grid-template-columns: minmax(0, 1fr); }
  .t23-task .goal .src { border-left: 0; padding-left: 0; }
  .t23-task .offers table { min-width: 620px; }
  .t23-res .sub { height: auto; min-height: 42px; flex-wrap: wrap; padding: 10px 18px; gap: 6px 22px; }
  .t23-res .sub small { margin-left: 0; }
}

/* live build (plans/browser-hosts.md step 4) */
.t23-task .steps h3 .n { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.t23-res .shots figure { margin: 0; }
.t23-res .shots figure[hidden] { display: none; }
.t23-res .shots img { display: block; width: 100%; height: auto; border: 1px solid var(--rim-soft); border-radius: 8px; }
.t23-res .shots .meta { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 0; }
.t23-res .shots .meta span { display: flex; flex-direction: column; min-width: 0; }
.t23-res .shots .meta b { font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t23-res .shots .meta small { font-size: 12px; color: var(--text-2); }
.t23-res .shot .nav button { background: none; border: 0; padding: 2px; color: var(--text-strong); cursor: pointer; }
.t23-res .shot .nav { padding-left: 6px; justify-content: flex-end; }
.t23-res .shot .nav small { margin-right: auto; }
.t23-res .sum p.ai { padding: 8px 10px; border: 1px dashed var(--lavender); border-radius: 8px; background: var(--lavender-tint); margin-left: 0; }
.t23-res .cc[href], .t23-res .att2[href] { text-decoration: none; }
.t23-mail .msg p a { color: var(--primary-600); }
.t23-task .steps li.done:last-child { grid-template-columns: 30px 1fr auto 26px; }

/* ===== 24.css ===== */
/* 24 Claude Code: sessions (prefix c24-) */
.c24-head { margin: 16px 24px 0 26px; padding: 12px 26px 22px; }
.c24-head .top { display: flex; align-items: center; }
.c24-head .crumbline { font-size: 14px; }
.c24-head .cur { color: var(--text-strong); }
.c24-head .when { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-strong); }
.c24-head .when i { width: 1px; height: 20px; background: var(--rim); margin: 0 8px; }
.c24-head .ttl { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.c24-head .badge { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.c24-head h1 { font-size: 36px; font-weight: 700; line-height: 1.1; }
.c24-head p { font-size: 18px; color: var(--text-2); }
.c24-head .ttl > div { margin-right: auto; }
.c24-head .ttl .btn { height: 52px; padding: 0 28px; gap: 16px; font-size: 16px; border-color: var(--primary-400); color: var(--text-strong); }
.c24-head .ttl .btn .ic { color: var(--primary-600); }
.c24-head .ttl .new { min-width: 220px; justify-content: center; }
.c24-runner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; margin: 20px 24px 0 26px; padding: 16px 26px; }
.c24-runner > div { display: flex; align-items: flex-start; gap: 18px; padding: 0 20px; }
.c24-runner > div + div { border-left: 1px solid var(--rim); }
.c24-runner .rn { padding-left: 0; align-items: center; }
.c24-runner .badge { width: 66px; height: 66px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.c24-runner span { display: flex; flex-direction: column; }
.c24-runner small { font-size: 13px; color: var(--text-2); }
.c24-runner b { font-size: 17px; font-weight: 600; margin-top: 4px; }
.c24-runner .rn b { font-size: 17px; }
.c24-runner em { font-style: normal; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; margin-top: 4px; }
.c24-runner em i { width: 12px; height: 12px; border-radius: 50%; background: #1FC29A; }
.c24-runner em.off i { background: var(--grey); }
.c24-runner .st > .ic { color: var(--primary-600); margin-top: 2px; }
.c24-runner .st b { font-size: 18px; }
.c24-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 20px 24px 0 26px; }
.c24-card { border: 1px solid var(--rim); border-radius: 14px; background: var(--surface); padding: 18px 20px 16px; box-shadow: 0 0 0 5px rgba(255,255,255,.7), var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c24-card header { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 20px; gap: 12px; align-items: start; }
.c24-card header .dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 6px; background: var(--grey); }
.c24-card.run .dot { background: #1FC29A; }
.c24-card.wait .dot { background: #F5A623; }
.c24-card header span:nth-child(2) { display: flex; flex-direction: column; }
.c24-card header b { font-size: 19px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c24-card header small { font-size: 13.5px; color: var(--text-2); }
.c24-card header .pill { height: 28px; padding: 0 16px; font-size: 13px; background: var(--surface-3); color: var(--text-strong); }
.c24-card.run header .pill { background: #E4F7F0; color: #16926F; }
.c24-card.wait header .pill { background: #FDF0D5; color: #8A5A00; }
.c24-card .kv { list-style: none; margin: 0; padding: 4px 12px; border: 1px solid var(--rim-soft); border-radius: 10px; font-size: 13.5px; }
.c24-card .kv li { display: grid; grid-template-columns: 22px 140px minmax(0, 1fr) 18px; gap: 12px; align-items: center; height: 36px; border-bottom: 1px solid var(--rim-soft); }
.c24-card .kv li:last-child { border-bottom: 0; }
.c24-card .kv .ic { color: var(--primary-600); }
.c24-card .kv span { color: var(--text-2); }
.c24-card .kv b { font-weight: 400; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c24-card .kv li > .ic:last-child { color: var(--text-2); }
.c24-card .term { margin: 0; height: 132px; padding: 14px 14px; border-radius: 8px; background: #1F2430; color: #E8ECF3; font: 12px/1.38 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow: hidden; }
.c24-card .term .cur { display: inline-block; width: 7px; height: 14px; background: #E8ECF3; vertical-align: -2px; }
.c24-card .term.idle { color: #8A94A8; }
.c24-card .acts { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.c24-card .acts .btn { height: 44px; justify-content: center; gap: 16px; font-size: 15px; }
.c24-card .acts .btn:not(.btn-primary) .ic { color: var(--primary-600); }
.c24-card .acts .stop .ic { color: #E5484D; }
.c24-card .acts .dis, .c24-card .acts .btn:disabled { background: #F1F3F7; border-color: #F1F3F7; color: var(--text-2); opacity: 1; }
.c24-card .acts .dis .ic, .c24-card .acts .btn:disabled .ic { color: var(--text-2); }
.c24-foot { display: grid; grid-template-columns: 1.7fr 1fr 1fr; margin: 26px 24px 16px 26px; padding: 18px 26px; }
.c24-foot > div { display: flex; gap: 24px; align-items: flex-start; padding: 0 30px; }
.c24-foot > div + div { border-left: 1px solid var(--rim); }
.c24-foot .gk { padding-left: 0; }
.c24-foot > div > .ic { color: var(--primary-600); flex: none; }
.c24-foot span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c24-foot b { font-size: 14px; font-weight: 600; }
.c24-foot small { font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.c24-foot a, .c24-foot button.linkish { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--primary-600); text-align: left; }

@media (max-width: 1200px) {
  .c24-head, .c24-runner, .c24-cards, .c24-foot { margin-left: 16px; margin-right: 16px; }
  .c24-cards { grid-template-columns: minmax(0, 1fr); }
  .c24-runner { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .c24-runner .rn { grid-column: 1 / -1; }
  .c24-runner > div:nth-child(2), .c24-runner > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .c24-foot { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .c24-foot > div { padding: 0; }
  .c24-foot > div + div { border-left: 0; }
}
@media (max-width: 768px) {
  .c24-head, .c24-runner, .c24-cards, .c24-foot { margin-left: 8px; margin-right: 8px; }
  .c24-head { padding: 12px 14px 16px; }
  .c24-head .top { flex-wrap: wrap; gap: 6px; }
  .c24-head .when { margin-left: 0; }
  .c24-head .ttl { flex-wrap: wrap; }
  .c24-head .badge { width: 52px; height: 52px; }
  .c24-head h1 { font-size: 26px; }
  .c24-head p { font-size: 15px; }
  .c24-head .ttl .btn { flex: 1 1 100%; min-width: 0; }
  .c24-card .kv li { grid-template-columns: 22px 100px minmax(0, 1fr) 18px; }
}
.c24-cli { margin: 8px 0 0; padding: 12px 14px; border-radius: 8px; background: #1F2430; color: #E8ECF3; font: 12.5px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; }

/* Projects on the server (plans/server-claude.md, no screenshot; prefix cp-) — built from the 24 header and card styles */
.cp-head .ttl .new { min-width: 200px; }
.cp-strip, .cp-empty { margin: 16px 24px 0 26px; padding: 12px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-strip .cp-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--primary-600); font-size: 13.5px; }
.cp-strip .pill, .cp-list .pill, .cp-detail .pill { gap: 6px; height: 24px; }
.cp-strip .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--grey); }
.cp-strip .pill.ok i { background: var(--green); }
.cp-strip .pill.wait i { background: var(--amber); }
.cp-list .pill.ok, .cp-detail .pill.ok, .cp-strip .pill.ok { background: var(--green-tint); color: #07936F; }
.cp-list .pill.wait, .cp-detail .pill.wait, .cp-strip .pill.wait { background: var(--amber-tint); color: #8A5A00; }
.cp-list .pill.bad, .cp-detail .pill.bad { background: var(--red-tint); color: #C9323F; }
.cp-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2.2fr; gap: 20px; margin: 16px 24px 24px 26px; align-items: start; }
.cp-list { padding: 16px 0 8px; }
.cp-list h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; padding: 0 18px 10px; }
.cp-list h2 small { color: var(--text-muted); font-weight: 500; }
.cp-list ul { list-style: none; margin: 0; padding: 0; }
.cp-list li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--rim-soft); }
.cp-list li a small { grid-column: 1; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-list li a .pill { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.cp-list li.on a { background: var(--primary-tint-2); box-shadow: inset 3px 0 0 var(--primary); }
.cp-list .none-box { margin: 0 18px 10px; }
.cp-detail { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cp-detail header { display: flex; align-items: center; gap: 12px; }
.cp-detail header > span:first-child { display: flex; flex-direction: column; margin-right: auto; }
.cp-detail header b { font-size: 20px; }
.cp-detail header small { color: var(--text-muted); font-family: var(--mono, ui-monospace, monospace); }
.cp-detail .kv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; font-size: 13.5px; }
.cp-detail .kv li { display: contents; }
.cp-detail .kv span { color: var(--text-muted); }
.cp-detail .kv b { font-weight: 500; overflow-wrap: anywhere; }
.cp-detail h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 8px; }
.cp-detail h3 small { color: var(--text-muted); font-weight: 500; }
.cp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cp-cols > section { border: 1px solid var(--rim); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-cols .btn { align-self: flex-start; }
.cp-files { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; font-size: 13px; }
.cp-files li { display: flex; gap: 8px; padding: 3px 0; overflow-wrap: anywhere; }
.cp-files code { color: var(--text-muted); min-width: 22px; }
.cp-commit { display: flex; flex-direction: column; gap: 8px; }
.cp-commit textarea { resize: vertical; }
.cp-push { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 12px; border-radius: 8px; background: var(--surface-3); }
.cp-push.done { background: var(--green-tint); color: #07936F; }
.cp-push.failed { background: var(--red-tint); color: #C9323F; }
.cp-detail footer { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--rim-soft); padding-top: 14px; }
.cp-detail footer .stop { margin-left: auto; color: var(--red); }
.fld-col { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 13px; }
.fld-col > span { color: var(--text-2); font-weight: 500; }
@media (max-width: 768px) {
  .cp-grid, .cp-cols { grid-template-columns: minmax(0, 1fr); }
  .cp-grid { margin-left: 16px; margin-right: 16px; }
  .cp-strip, .cp-empty { margin-left: 16px; margin-right: 16px; }
  .cp-strip .cp-link { margin-left: 0; }
}

/* Claude workspace (plans/server-workspace.md, no screenshot; prefix cw-): tabs, document list, editor, history */
.cw-tabs { margin: 16px 24px 0 26px; padding: 6px 10px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cw-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.cw-tabs a i { font-style: normal; font-size: 12px; color: var(--text-muted); }
.cw-tabs a:hover { background: var(--surface-2); }
.cw-tabs a.on { background: var(--primary-tint); color: var(--primary-600); font-weight: 600; }
.cw-tabs .use { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); padding-right: 8px; }
.cw-grid { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2.2fr) minmax(240px, 1fr); gap: 18px; margin: 16px 24px 24px 26px; align-items: start; }
.cw-grid.single { grid-template-columns: minmax(0, 3.1fr) minmax(240px, 1fr); }
.cw-list { padding: 14px 0 12px; display: flex; flex-direction: column; min-width: 0; }
.cw-list h2 { font-size: 16px; padding: 0 16px; display: flex; align-items: baseline; gap: 8px; }
.cw-list h2 small { color: var(--text-muted); font-weight: 500; font-size: 12.5px; }
.cw-list .acts { display: flex; gap: 8px; padding: 10px 16px; }
.cw-list .acts .btn { gap: 6px; cursor: pointer; }
.cw-list ul { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.cw-list li a { display: flex; flex-direction: column; padding: 9px 16px; border-top: 1px solid var(--rim-soft); color: inherit; text-decoration: none; }
.cw-list li a b { font-weight: 500; font-size: 13.5px; overflow-wrap: anywhere; }
.cw-list li a small { color: var(--text-muted); font-size: 12px; }
.cw-list li.on a { background: var(--primary-tint-2); box-shadow: inset 3px 0 0 var(--primary); }
.cw-list .none-box { margin: 4px 16px; }
.cw-list .cw-lim { padding: 10px 16px 0; font-size: 12px; }
.cw-pause { display: flex; align-items: flex-start; gap: 10px; padding: 4px 16px 10px; font-size: 13px; }
.cw-pause span { display: flex; flex-direction: column; }
.cw-pause small { color: var(--text-muted); font-size: 12px; }
.cw-edit { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cw-edit header { display: flex; align-items: center; gap: 12px; }
.cw-edit header > span:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cw-edit header b { font-size: 17px; }
.cw-edit header small { color: var(--text-muted); font-size: 12px; }
.cw-edit .cw-path { font-family: var(--mono, ui-monospace, monospace); font-size: 13.5px; }
.cw-edit .cw-text { min-height: 520px; resize: vertical; font-family: var(--mono, ui-monospace, monospace); font-size: 13px; line-height: 1.55; tab-size: 2; white-space: pre-wrap; }
.cw-edit footer { display: flex; align-items: center; gap: 10px; }
.cw-edit footer .muted { margin-right: auto; font-size: 12.5px; }
.cw-edit footer .stop { color: var(--red); }
.cw-edit .pill.wait { background: var(--amber-tint); color: #8A5A00; height: 24px; }
.cw-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cw-about { padding: 14px 16px; display: flex; gap: 10px; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.cw-about .ic { flex: none; color: var(--primary-600); margin-top: 2px; }
.cw-hist { padding: 14px 0 8px; }
.cw-hist h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 0 16px 8px; }
.cw-hist ul { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.cw-hist li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--rim-soft); }
.cw-hist li > span:first-child { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cw-hist li b { font-weight: 500; font-size: 13px; }
.cw-hist li small { color: var(--text-muted); font-size: 12px; }
@media (max-width: 1100px) { .cw-grid, .cw-grid.single { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
  .cw-tabs, .cw-grid { margin-left: 16px; margin-right: 16px; }
  .cw-tabs .use { margin-left: 0; }
  .cw-edit .cw-text { min-height: 320px; }
}

/* ===== 25.css ===== */
/* 25 Claude Code: live terminal (prefix k25-) */
.k25-frame { margin: 22px 4px 0 4px; }
.k25-in { padding: 18px 26px 20px 26px; }
.k25-head { display: flex; align-items: center; gap: 18px; }
.k25-head .badge { width: 58px; height: 58px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); }
.k25-head h1 { font-size: 32px; font-weight: 700; line-height: 1.15; }
.k25-head p { font-size: 18px; color: var(--text-2); }
.k25-head > div { margin-right: auto; }
.k25-head .when { font-size: 16px; color: var(--text-2); margin-right: 14px; }
.k25-head .help { height: 46px; padding: 0 18px; gap: 12px; font-size: 16px; border-color: var(--primary-400); color: var(--primary-600); }
.k25-strip { display: grid; grid-template-columns: minmax(0, 1fr) 178px; gap: 14px; margin-top: 14px; }
.k25-strip .info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); padding: 14px 16px; }
.k25-strip .info > div { display: flex; gap: 20px; align-items: flex-start; padding: 0 18px; }
.k25-strip .info > div + div { border-left: 1px solid var(--rim); }
.k25-strip .info > div:first-child { padding-left: 0; }
.k25-strip .info .b { width: 62px; height: 58px; padding: 14px; border-radius: 10px; background: #EEF3FC; color: var(--primary-600); flex: none; }
.k25-strip .info span { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }
.k25-strip small { font-size: 14px; color: var(--text-2); }
.k25-strip .info > div > span { flex: 1 1 auto; min-width: 0; }
.k25-strip .info b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k25-strip b { font-size: 16.5px; font-weight: 500; }
.k25-strip em { font-style: normal; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.k25-strip em i { width: 11px; height: 11px; border-radius: 50%; background: #1FC29A; }
.k25-strip em.off i { background: var(--grey); }
.k25-strip a, .k25-strip button.linkish { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--primary-600); }
.k25-strip button.linkish:disabled { color: var(--text-2); cursor: not-allowed; }
.k25-strip .pill.on { height: 22px; padding: 0 10px; font-size: 12px; background: #E4F7F0; color: #16926F; }
.k25-strip .set { display: grid; place-items: center; }
.k25-strip .set .btn { height: 48px; padding: 0 18px; gap: 12px; font-size: 16px; background: #EEF3FC; border-color: #EEF3FC; color: var(--primary-600); }
.k25-body { display: grid; grid-template-columns: minmax(0, 1fr) 476px; gap: 14px; margin-top: 14px; }
.k25-term { display: flex; flex-direction: column; padding: 0; border: 3px solid #E6EAF1; min-width: 0; }
.k25-term pre { flex: 1; margin: 0; padding: 22px 28px; font: 15.5px/1.46 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text-strong); white-space: pre-wrap; overflow: auto; min-height: 540px; }
.k25-term pre s { text-decoration: none; color: var(--text-2); }
.k25-term pre u { text-decoration: none; color: var(--primary-600); }
.k25-term pre .cur { display: inline-block; width: 11px; height: 20px; background: var(--text-strong); vertical-align: -4px; }
.k25-term pre.idle { color: var(--text-2); }
.k25-term .xt { flex: none; height: 560px; padding: 14px 8px 10px 18px; overflow: hidden; }
.k25-term .xt .xterm { height: 100%; }
.k25-term .xt .xterm-viewport { background: transparent !important; }
.k25-term .cmd { display: grid; grid-template-columns: minmax(0, 1fr) 158px; gap: 12px; padding: 0 14px 14px; }
.k25-term .in { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 8px 0 10px; border: 1.5px solid var(--primary-400); border-radius: 8px; }
.k25-term .in > .ic:first-child { width: 36px; height: 40px; padding: 10px 9px; border-radius: 6px; background: #F2F5FA; color: var(--primary-600); }
.k25-term .in input { flex: 1; min-width: 0; border: 0; height: 40px; padding: 0 8px; font-size: 15px; box-shadow: none; }
.k25-term .in > .ic { color: var(--text-2); }
.k25-term .send { height: 46px; padding: 0 22px; gap: 12px; font-size: 16px; background: #DDE8FB; border-color: #DDE8FB; color: var(--primary-600); }
.k25-term .stop { height: 62px; justify-content: center; gap: 12px; font-size: 16px; border-color: #F3A5A8; color: #D93C41; background: #FFF7F7; }
.k25-term .stop .ic { color: #E5484D; }
.k25-term .cmd .btn:disabled, .k25-term .in input:disabled { opacity: .55; cursor: not-allowed; }
.k25-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.k25-side .card { padding: 14px 14px; }
.k25-side h2 { display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; margin: 4px 6px 12px; }
.k25-side h2 small { font-size: 15px; font-weight: 400; margin-left: -10px; }
.k25-side .b { color: var(--primary-600); }
.k25-side .g { color: #1FA67A; }
.k25-side .v { color: #7A5AE0; }
.k25-side table { width: 100%; border-collapse: collapse; border: 1px solid var(--rim-soft); border-radius: 8px; font-size: 14px; }
.k25-side th { font-weight: 400; color: var(--text-2); text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--rim-soft); font-size: 13px; }
.k25-side td { padding: 10px 16px; border-bottom: 1px solid var(--rim-soft); }
.k25-side td:first-child { display: flex; align-items: center; gap: 18px; }
.k25-side td.none { display: table-cell; text-align: center; color: var(--text-2); padding: 18px 16px; }
.k25-side .files table { table-layout: fixed; }
.k25-side .files th:nth-child(2) { width: 84px; } .k25-side .files th:nth-child(3) { width: 72px; }
.k25-side .files td { white-space: nowrap; }
.k25-side .files .fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.k25-side .src b, .k25-side .src small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k25-side .src { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 18px; gap: 18px; align-items: center; padding: 10px 14px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.k25-side .src span { display: flex; flex-direction: column; min-width: 0; }
.k25-side .src b { font-size: 14px; font-weight: 500; }
.k25-side .src b.n { font-weight: 400; }
.k25-side .src small { font-size: 13px; color: var(--text-2); }
.k25-side .chg .c { border: 1px solid var(--rim-soft); border-radius: 8px; overflow: hidden; }
.k25-side .chg .t { display: flex; align-items: center; gap: 16px; padding: 8px 12px 8px 16px; background: #F7F5FE; font-size: 15px; }
.k25-side .chg .dr { margin-left: auto; height: 24px; padding: 0 12px; background: #EDE6FC; color: #6B4FC6; font-size: 12px; }
.k25-side .chg p { padding: 10px 14px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.k25-side .none-box { padding: 16px 14px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.k25-side .view { display: flex; width: 100%; height: 46px; margin-top: 18px; justify-content: center; gap: 14px; font-size: 16px; }
.k25-side .note { display: flex; gap: 14px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 6px 6px 0; }

@media (max-width: 1200px) {
  .k25-body { grid-template-columns: minmax(0, 1fr); }
  .k25-strip { grid-template-columns: minmax(0, 1fr); }
  .k25-strip .info { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .k25-strip .info > div { padding: 0; }
  .k25-strip .info > div + div { border-left: 0; }
}
@media (max-width: 768px) {
  .k25-frame { margin: 8px 0 0; }
  .k25-in { padding: 12px 10px; }
  .k25-head { flex-wrap: wrap; }
  .k25-head h1 { font-size: 24px; }
  .k25-head p { font-size: 15px; }
  .k25-term pre { font-size: 12.5px; padding: 14px; min-height: 280px; }
  .k25-term .xt { height: 340px; padding: 10px 4px 8px 10px; }
  .k25-term .cmd { grid-template-columns: minmax(0, 1fr); }
  .k25-side .src { grid-template-columns: 30px minmax(0, 1fr) 18px; }
  .k25-side .src span + span { grid-column: 2; }
}

/* ===== 26.css ===== */
/* 26 Claude Code: hand over task (prefix h26-) */
.h26-crumbs { display: flex; align-items: center; margin: 12px 40px 0 36px; font-size: 14px; }
.h26-crumbs .cur { color: var(--primary-600); }
.h26-crumbs .when { margin-left: auto; font-size: 14px; color: var(--text-2); }
.h26-frame { margin: 14px 14px 0 14px; }
.h26-in { padding: 20px 24px 16px 26px; }
.h26-head { display: flex; align-items: center; gap: 22px; }
.h26-head .badge { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: #F3EFFD; border: 1.5px solid #B7A6EE; color: #6B4FC6; }
.h26-head h1 { font-size: 36px; font-weight: 700; line-height: 1.1; }
.h26-head p { font-size: 16px; color: var(--text-2); margin-top: 2px; }
.h26-head > div { margin-right: auto; }
.h26-head .how { height: 40px; padding: 0 16px; gap: 10px; font-size: 13.5px; border-color: var(--primary-400); color: var(--text-strong); }
.h26-head .how .ic { color: var(--primary-600); }
.h26-grid { display: grid; grid-template-columns: minmax(0, 1fr) 546px; gap: 16px; margin-top: 18px; }
.h26-left, .h26-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.h26-sec { padding: 12px 14px 12px 14px; }
.h26-sec h2 { display: flex; gap: 20px; align-items: flex-start; font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.h26-sec h2 i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint-2); color: var(--primary-600); font-style: normal; font-size: 17px; font-weight: 500; flex: none; }
.h26-sec h2 span { display: flex; flex-direction: column; }
.h26-sec h2 small { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.h26-sec textarea { width: 100%; min-height: 76px; font-size: 15px; resize: vertical; }
.h26-sec .cnt { display: block; text-align: right; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.h26-sec .inps { display: flex; flex-direction: column; gap: 6px; }
.h26-sec .inp { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto 18px; gap: 18px; align-items: center; min-height: 50px; padding: 4px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; cursor: pointer; }
.h26-sec .inp span:nth-of-type(1) { display: flex; flex-direction: column; min-width: 0; }
.h26-sec .inp b { font-size: 13.5px; font-weight: 400; }
.h26-sec .inp small { font-size: 12px; color: var(--text-2); }
.h26-sec .inp .b { color: var(--primary-600); }
.h26-sec .inp .pill { height: 24px; padding: 0 12px; font-size: 11.5px; }
.h26-sec .inp .pill.v { background: #EFEAFB; color: #6B4FC6; }
.h26-sec .inp .pill.g { background: #E4F7F0; color: #16926F; }
.h26-sec .inp .pill.n { background: var(--surface-3); color: var(--text-2); }
.h26-sec .inp.dis { cursor: not-allowed; opacity: .75; }
.h26-sec .inp a { color: var(--primary-600); }
.h26-sec .warn { margin: 4px 0 0; padding: 8px 12px; border-radius: 8px; background: #FDF0D5; color: #8A5A00; font-size: 12.5px; }
.h26-sec .env { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; align-items: center; font-size: 13.5px; }
.h26-sec .fld { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--rim); border-radius: 8px; }
.h26-sec .fld .input { flex: 1; min-width: 0; border: 0; box-shadow: none; height: 36px; padding: 0 4px; font-size: 14px; background: transparent; }
.h26-sec .fld .btn { height: 32px; padding: 0 14px; font-size: 13px; color: var(--primary-600); border-color: var(--rim); }
.h26-sec .fld .b { color: var(--primary-600); }
.h26-sec .rrow { display: grid; grid-template-columns: minmax(0, 420px) auto auto; gap: 30px; align-items: center; }
.h26-sec .rrow em { font-style: normal; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.h26-sec .rrow em i { width: 11px; height: 11px; border-radius: 50%; background: #1FC29A; }
.h26-sec .rrow em.off i { background: var(--grey); }
.h26-sec .rrow > .btn { height: 30px; padding: 0 14px; font-size: 13px; color: var(--primary-600); border-color: var(--rim); justify-self: end; }
.h26-sec .perm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.h26-sec .perm label { display: flex; gap: 10px; align-items: flex-start; }
.h26-sec .perm span { display: flex; flex-direction: column; }
.h26-sec .perm b { font-size: 13px; font-weight: 400; }
.h26-sec .perm small { font-size: 11px; color: var(--text-2); }
.h26-sec .fld-error { margin-top: 6px; }
.h26-pv, .h26-out { padding: 12px 14px; }
.h26-pv header, .h26-out header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 10px; }
.h26-pv header > .ic, .h26-out header > .ic { width: 38px; height: 38px; padding: 7px; border-radius: 50%; background: var(--primary-tint-2); }
.h26-pv header span, .h26-out header span { display: flex; flex-direction: column; }
.h26-pv header b, .h26-out header b { font-size: 15px; font-weight: 600; }
.h26-pv header small, .h26-out header small { font-size: 12.5px; color: var(--text-2); }
.h26-pv header .btn { height: 32px; padding: 0 12px; font-size: 12.5px; color: var(--primary-600); border-color: var(--rim); }
.h26-right .b { color: var(--primary-600); }
.h26-pv .pc { border: 1px solid var(--rim-soft); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.h26-pv .pc h3 { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; }
.h26-pv .pc h3 small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-2); }
.h26-pv .mail { margin-top: 10px; padding: 10px 14px; border-radius: 8px; background: #F6F8FB; font-size: 13px; line-height: 1.4; color: var(--text-strong); max-height: 170px; overflow: hidden; }
.h26-pv .mail p + p { margin-top: 10px; white-space: pre-wrap; }
.h26-pv .mail b { font-weight: 500; }
.h26-right .f { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: #FAFBFD; }
.h26-right .f > .ic { width: 38px; height: 38px; padding: 8px; border-radius: 8px; background: #EEF1F6; color: var(--text-2); }
.h26-right .f span { display: flex; flex-direction: column; min-width: 0; }
.h26-right .f b { font-size: 13.5px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h26-right .f small { font-size: 12px; color: var(--text-2); }
.h26-right .f a { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--primary-600); }
.h26-right .f code { font: 11.5px ui-monospace, Consolas, monospace; padding: 6px 12px; border-radius: 6px; background: #F2F4F8; color: var(--text-strong); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h26-go { display: flex; width: 100%; height: 50px; justify-content: center; gap: 18px; font-size: 17px; margin-top: 8px; }
.h26-note { text-align: center; font-size: 12px; color: var(--text-2); margin-top: -2px; }
.h26-none { padding: 12px 14px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13px; color: var(--text-2); }

@media (max-width: 1200px) {
  .h26-grid { grid-template-columns: minmax(0, 1fr); }
  .h26-sec .perm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .h26-crumbs { flex-wrap: wrap; gap: 4px; margin: 8px 12px 0; }
  .h26-crumbs .when { margin-left: 0; }
  .h26-frame { margin: 8px 0 0; }
  .h26-in { padding: 12px 10px; }
  .h26-head { flex-wrap: wrap; }
  .h26-head h1 { font-size: 24px; }
  .h26-sec .inp { grid-template-columns: 22px 24px minmax(0, 1fr); gap: 10px; }
  .h26-sec .inp .pill { grid-column: 3; justify-self: start; }
  .h26-sec .inp > .ic:last-child, .h26-sec .inp > i { display: none; }
  .h26-sec .env { grid-template-columns: minmax(0, 1fr); }
  .h26-sec .rrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .h26-sec .rrow > .btn { justify-self: start; }
  .h26-right .f { grid-template-columns: 38px minmax(0, 1fr); }
  .h26-right .f > a, .h26-right .f > code { grid-column: 2; justify-self: start; }
}

/* ===== 27.css ===== */
/* 27 Work files & changes (prefix f27-) */
.f27-frame { margin: 20px 4px 0 4px; }
.f27-in { display: grid; grid-template-columns: 216px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding: 12px 14px 20px 20px; }
.f27-tree { padding: 18px 6px 0 6px; border-right: 1px solid var(--rim-soft); }
.f27-tree h2 { display: flex; flex-direction: column; font-size: 19px; font-weight: 600; }
.f27-tree h2 small { font-size: 14px; font-weight: 400; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f27-tree ul { list-style: none; margin: 20px 0 0; padding: 0; }
.f27-tree li { display: flex; align-items: center; gap: 16px; height: 36px; padding: 0 12px 0 32px; border-radius: 8px; font-size: 15px; }
.f27-tree li .ic { color: var(--primary-600); }
.f27-tree li.dir { padding-left: 0; gap: 10px; }
.f27-tree li.dir .ic:first-child { color: var(--text-strong); }
.f27-tree li.dir .ic:nth-child(2) { color: #4E5A70; }
.f27-tree li.on { background: #E6EFFD; color: var(--primary-700, var(--primary-600)); }
.f27-tree .none-box { margin-top: 18px; padding: 12px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13px; color: var(--text-2); }
.f27-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.f27-file { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 12px 12px 16px; }
.f27-file .fi { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: #EEF3FC; color: var(--primary-600); }
.f27-file .t { display: flex; flex-direction: column; gap: 6px; }
.f27-file .t b { display: flex; align-items: center; gap: 16px; font-size: 21px; font-weight: 600; }
.f27-file .t small { font-size: 14.5px; color: var(--text-2); }
.f27-file .pill.dr, .f27-side .pill.dr { height: 26px; padding: 0 12px; background: #EFEAFB; color: #6B4FC6; font-size: 13.5px; font-weight: 400; }
.f27-file .org { display: flex; gap: 12px; align-items: flex-start; padding-left: 18px; border-left: 1px solid var(--rim-soft); }
.f27-file .org > small { font-size: 12.5px; color: var(--text-2); }
.f27-file .oc { display: flex; gap: 16px; padding: 10px 40px 8px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.f27-file .oc span { display: flex; flex-direction: column; }
.f27-file .oc b { font-size: 14px; font-weight: 500; }
.f27-file .oc small { font-size: 12px; color: var(--text-2); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f27-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 312px; gap: 16px; align-items: start; }
.f27-pane { padding: 0; overflow: hidden; min-width: 0; }
.f27-pane h3 { position: relative; display: flex; flex-direction: column; padding: 12px 16px 8px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--rim-soft); }
.f27-pane h3 small { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.f27-pane h3 a { position: absolute; right: 12px; bottom: -22px; font-size: 12px; font-weight: 400; color: var(--primary-600); z-index: 1; }
.f27-pane .diff { list-style: none; margin: 0; padding: 8px 0 30px; min-height: 490px; background: linear-gradient(90deg, #F7F8FB 52px, transparent 52px); }
.f27-pane .diff li { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); align-items: center; min-height: 23px; font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.f27-pane .diff s { text-decoration: none; text-align: center; color: var(--text-2); font-size: 11.5px; }
.f27-pane .diff i { font-style: normal; text-align: center; }
.f27-pane .diff code { font: inherit; white-space: pre-wrap; padding-right: 8px; }
.f27-pane .diff .del { background: #FBE5E6; color: #B4232A; }
.f27-pane .diff .add, .f27-pane .diff .chg { background: #E4F5EA; color: #17613A; }
.f27-pane .diff .chg { color: var(--text-strong); }
.f27-pane:has(.hint) { align-self: stretch; display: flex; flex-direction: column; }
.f27-pane .hint { flex: 1; display: grid; place-items: center; padding: 60px 20px; text-align: center; font-size: 13px; color: var(--text-2); }
.f27-side { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.f27-side h3 { font-size: 16px; font-weight: 600; margin-top: 4px; }
.f27-side .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rim-soft); }
.f27-side .stats span { display: flex; flex-direction: column; padding: 6px 6px; border-radius: 6px; }
.f27-side .stats b { font-size: 19px; font-weight: 600; }
.f27-side .stats small { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.f27-side .stats .a { background: #E8F6EE; } .f27-side .stats .a b { color: #1B8A4C; }
.f27-side .stats .d { background: #FCEBEC; } .f27-side .stats .d b { color: #D93C41; }
.f27-side .stats .m { background: #F1ECFC; } .f27-side .stats .m b { color: #6B4FC6; }
.f27-side .chf { display: flex; align-items: center; gap: 14px; padding: 6px 8px; border: 1px solid var(--rim-soft); border-radius: 8px; font-size: 14px; }
.f27-side .chf .ic { width: 34px; height: 34px; padding: 6px; border-radius: 6px; background: #EEF3FC; color: var(--primary-600); }
.f27-side .chf .pill { margin-left: auto; }
.f27-side .refs { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--rim-soft); }
.f27-side .refs li { display: flex; gap: 14px; align-items: center; }
.f27-side .refs li > .ic { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: #EEF3FC; color: var(--primary-600); flex: none; }
.f27-side .refs span { display: flex; flex-direction: column; }
.f27-side .refs b { font-size: 13px; font-weight: 400; }
.f27-side .refs small { font-size: 12.5px; color: var(--text-2); }
.f27-side .btn { height: 42px; justify-content: center; gap: 14px; font-size: 14.5px; border-color: var(--primary-400); color: var(--text-strong); }
.f27-side .btn:not(.btn-primary) .ic { color: var(--primary-600); }
.f27-side .btn-primary { color: #fff; }
.f27-side .note, .f27-side .none-box { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.f27-side .none-box { font-size: 12.5px; }
.f27-more { grid-column: 1 / -1; margin-top: 16px; padding-left: 4px; }
.f27-more h3 { font-size: 16px; font-weight: 500; }
.f27-more div { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.f27-more .btn { height: 42px; padding: 0 22px; gap: 14px; font-size: 14.5px; border-color: var(--rim); }
.f27-more .btn .ic { color: var(--primary-600); }
.f27-more .btn:disabled .ic { color: var(--text-2); }
.f27-foot { display: flex; align-items: center; gap: 24px; margin: 18px 56px 14px 56px; padding: 0 22px; height: 44px; font-size: 13px; }
.f27-foot a { display: inline-flex; align-items: center; gap: 12px; color: var(--text-strong); }
.f27-foot > span { margin: 0 auto; color: var(--text-2); }
.f27-foot em { font-style: normal; display: inline-flex; align-items: center; gap: 10px; padding-right: 22px; border-right: 1px solid var(--rim); }
.f27-foot em i { width: 10px; height: 10px; border-radius: 50%; background: #1FC29A; }
.f27-foot em.off i { background: var(--grey); }

@media (max-width: 1200px) {
  .f27-in { grid-template-columns: minmax(0, 1fr); }
  .f27-tree { border-right: 0; padding: 4px 0 12px; }
  .f27-body { grid-template-columns: minmax(0, 1fr); }
  .f27-file { grid-template-columns: 58px minmax(0, 1fr); }
  .f27-file .org { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .f27-pane .diff { min-height: 0; }
  .f27-foot { margin-left: 16px; margin-right: 16px; }
}
@media (max-width: 768px) {
  .f27-frame { margin: 8px 0 0; }
  .f27-in { padding: 10px; }
  .f27-foot { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px 16px; margin: 16px 8px; }
  .f27-foot > span { margin: 0; }
  .f27-more .btn { flex: 1 1 100%; }
}
.f27-tree select { width: 100%; max-width: 100%; min-width: 0; }
.f27-file .org, .f27-file .oc, .f27-file .oc span { min-width: 0; }
@media (max-width: 768px) { .f27-file .oc { padding-right: 12px; } .f27-file .oc small { max-width: 100%; } }
/* knowledge-base proposals from a server session (plans/server-workspace.md §4) */
.pill.kb { background: var(--lavender-tint); color: #7D63C9; height: 18px; font-size: 11px; margin-right: 4px; }

/* ===== 28.css ===== */
/* 28 Workflow designer (prefix w28-) */
.w28-frame { margin: 26px 4px 0 4px; }
.w28-in { padding: 20px 26px 8px 26px; }
.w28-head { display: flex; align-items: center; gap: 14px; }
.w28-head > div { margin-right: auto; }
.w28-head h1 { display: flex; align-items: center; gap: 18px; font-size: 34px; font-weight: 700; line-height: 1.1; }
.w28-head h1 .ic { color: var(--text-strong); }
.w28-head h1 .pill { height: 30px; padding: 0 14px; font-size: 15px; font-weight: 400; background: #EFEAFB; color: #6B4FC6; }
.w28-head h1 .chip { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; font-weight: 400; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; }
.w28-head p { font-size: 15.5px; color: var(--text-2); margin-top: 8px; }
.w28-head .btn { height: 44px; padding: 0 22px; gap: 14px; font-size: 15.5px; border-color: var(--primary-400); color: var(--primary-600); }
.w28-head .btn-primary { color: #fff; padding: 0 30px; }
.w28-head .more { padding: 0 16px; border-color: var(--rim); color: var(--text-strong); }
.w28-body { display: grid; grid-template-columns: 184px minmax(0, 1fr) 312px; grid-template-areas: "pal canvas insp" "pal log log"; margin: 14px -26px 0 -26px; border-top: 1px solid var(--rim-soft); }
.w28-pal { grid-area: pal; padding: 16px 12px 16px 12px; border-right: 1px solid var(--rim-soft); }
.w28-pal h2 { font-size: 15.5px; font-weight: 600; margin: 0 0 10px 6px; }
.w28-pal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.w28-pal li { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 14px; border: 1px solid var(--rim-soft); border-radius: 8px; background: var(--surface); font-size: 13px; }
.w28-pal li .ic { color: var(--primary-600); }
.w28-pal li .wa, .w28-canvas .nd .wa { color: #1FA855; }
.w28-pal li.off { color: var(--text-2); }
.w28-pal li.off::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--grey); flex: none; }
.w28-canvas { grid-area: canvas; min-width: 0; border-right: 1px solid var(--rim-soft); position: relative; height: 512px; overflow: auto; background: radial-gradient(circle, #DDE3EE 1px, transparent 1.2px) 0 0 / 18px 18px; }
.w28-canvas .zoom { position: absolute; top: 12px; right: 58px; display: flex; align-items: center; height: 40px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); z-index: 2; }
.w28-canvas .zoom > * { display: grid; place-items: center; height: 100%; padding: 0 12px; }
.w28-canvas .zoom b { font-weight: 400; font-size: 13.5px; border-left: 1px solid var(--rim); border-right: 1px solid var(--rim); min-width: 58px; }
.w28-canvas .zoom button, .w28-canvas .fit { background: none; border: 0; color: var(--text-strong); cursor: pointer; }
.w28-canvas .fit { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); z-index: 2; }
.w28-canvas .stage { position: relative; width: 922px; height: 512px; transform-origin: 0 0; }
.w28-canvas .wires { position: absolute; inset: 0; width: 922px; height: 512px; fill: none; stroke: #5A8FEA; stroke-width: 2; }
.w28-canvas .nd { position: absolute; display: flex; gap: 12px; padding: 12px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; }
.w28-canvas .nd.row { align-items: center; }
.w28-canvas .nd.col { flex-direction: column; gap: 8px; }
.w28-canvas .nd > .ic { color: var(--primary-600); flex: none; }
.w28-canvas .nd.col > .ic { width: 36px; height: 36px; padding: 6px; border-radius: 8px; background: #EEF3FC; }
.w28-canvas .nd span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.w28-canvas .nd b { font-size: 12px; font-weight: 600; line-height: 1.3; }
.w28-canvas .nd small { font-size: 10.5px; color: var(--text-2); line-height: 1.35; }
.w28-canvas .nd em { font-style: normal; font-size: 10px; color: var(--text-2); }
.w28-canvas .nd.on, .w28-canvas .nd:focus-visible { border: 2px solid var(--primary); box-shadow: 0 0 0 4px rgba(46,115,238,.12); outline: none; }
.w28-log { grid-area: log; min-width: 0; padding: 12px 20px 12px 20px; border-top: 1px solid var(--rim-soft); }
.w28-log h2 { display: flex; align-items: center; gap: 14px; font-size: 15.5px; font-weight: 600; }
.w28-log h2 small { font-size: 13.5px; font-weight: 400; color: var(--text-2); margin-left: 6px; }
.w28-log h2 .stop { margin-left: auto; height: 36px; padding: 0 18px; gap: 12px; font-size: 13.5px; font-weight: 400; color: var(--text-strong); }
.w28-log .lg { display: grid; grid-template-columns: minmax(0, 1fr) 566px; gap: 20px; align-items: end; }
.w28-log ul { list-style: none; margin: 10px 0 0; padding: 0; }
.w28-log li { display: grid; grid-template-columns: 22px 60px minmax(0, 1fr); gap: 12px; align-items: center; height: 28px; font-size: 13.5px; }
.w28-log li .ok { color: #1FC29A; }
.w28-log li time { color: var(--text-2); }
.w28-log li b { font-weight: 500; }
.w28-log .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #CFDDF6; border-top-color: var(--primary); }
.w28-log .done { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid #CFDDF6; border-radius: 10px; background: #EEF4FE; margin-bottom: 6px; }
.w28-log .done > .ic { color: var(--primary-600); }
.w28-log .done span { display: flex; flex-direction: column; }
.w28-log .done b { font-size: 15px; font-weight: 600; }
.w28-log .done small { font-size: 12.5px; color: var(--text-2); }
.w28-log .done .btn { white-space: nowrap; height: 44px; padding: 0 20px; gap: 12px; color: var(--primary-600); border-color: var(--primary-400); }
.w28-log .empty-log { margin-top: 10px; font-size: 13.5px; color: var(--text-2); }
.w28-insp { grid-area: insp; padding: 16px 16px 12px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.w28-insp h2 { display: flex; justify-content: space-between; font-size: 15.5px; font-weight: 600; }
.w28-insp .sel { display: flex; gap: 20px; align-items: center; padding: 14px; border-radius: 10px; background: #EAF1FD; }
.w28-insp .sel > .ic { width: 50px; height: 50px; padding: 12px; border-radius: 50%; background: #D8E6FD; color: var(--primary-600); flex: none; }
.w28-insp .sel span { display: flex; flex-direction: column; }
.w28-insp .sel b { font-size: 15px; font-weight: 600; }
.w28-insp .sel small { font-size: 12.5px; color: var(--text-2); }
.w28-insp .f { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.w28-insp .f .input { height: 38px; font-size: 13.5px; }
.w28-insp .f textarea.input { height: 76px; padding: 8px 12px; resize: vertical; }
.w28-insp [data-insp-body]:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.w28-insp .ck { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.w28-insp .cnt { text-align: right; font-size: 11.5px; color: var(--text-2); margin-top: -2px; }
.w28-insp .more { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--rim-soft); font-size: 13.5px; color: var(--text-strong); }
.w28-insp .desc { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.w28-insp .tag { align-self: flex-start; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; }

@media (max-width: 1200px) {
  .w28-head { flex-wrap: wrap; }
  .w28-head > div { flex: 1 1 100%; }
  .w28-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pal" "canvas" "insp" "log"; }
  .w28-canvas { border-right: 0; }
  .w28-pal ul { flex-direction: row; flex-wrap: wrap; }
  .w28-pal li { flex: 1 1 150px; }
  .w28-log .lg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .w28-frame { margin: 8px 0 0; }
  .w28-in { padding: 12px 10px 8px; }
  .w28-body { margin: 12px -10px 0; }
  .w28-head h1 { font-size: 24px; flex-wrap: wrap; gap: 10px; }
  .w28-head .btn { flex: 1 1 auto; padding: 0 12px; }
  .w28-canvas { height: 380px; }
  .w28-log .done { grid-template-columns: 30px minmax(0, 1fr); }
  .w28-log .done .btn { grid-column: 2; justify-self: start; }
}

/* ===== 29.css ===== */
/* 29 Rules & AI settings (prefix r29-) */
.r29-crumbs { display: flex; align-items: center; margin: 14px 44px 0 44px; font-size: 14px; }
.r29-crumbs .cur { color: var(--text-strong); }
.r29-crumbs .when { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); }
.r29-crumbs .when i { width: 1px; height: 18px; background: var(--rim); margin: 0 2px; }
.r29-frame { margin: 16px 4px 0 4px; }
.r29-in { padding: 14px 16px 16px 16px; }
.r29-tabs { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--rim-soft); margin: 0 4px; }
.r29-tabs a { display: inline-flex; align-items: center; gap: 16px; height: 50px; padding: 0 30px; border-radius: 10px 10px 0 0; font-size: 16px; color: var(--text-strong); background: #F3F6FA; border: 1px solid var(--rim-soft); border-bottom: 0; }
.r29-tabs a .ic { color: var(--primary-600); }
.r29-tabs a.on { background: var(--surface); font-weight: 600; box-shadow: inset 0 -3px 0 var(--primary); }
.r29-tabs .help { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-strong); background: none; border: 0; cursor: pointer; }
.r29-tabs .help .ic { color: var(--primary-600); }
.r29-cols { display: grid; grid-template-columns: 408px minmax(0, 1fr) 458px; gap: 14px; margin-top: 14px; align-items: start; }
.r29-cols > .card { padding: 16px 16px; min-width: 0; }
.r29-cols h2 { display: flex; flex-direction: column; font-size: 19px; font-weight: 600; position: relative; }
.r29-cols h2 small { font-size: 13.5px; font-weight: 400; color: var(--text-2); }
.r29-list .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin: 16px 0 14px; }
.r29-list .srch { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 8px; color: var(--text-2); }
.r29-list .srch .input { border: 0; box-shadow: none; height: 36px; padding: 0; flex: 1; min-width: 0; font-size: 14px; background: transparent; }
.r29-list .bar .btn { height: 40px; padding: 0 16px; gap: 10px; font-size: 15px; }
.r29-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.r29-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 22px; gap: 14px; align-items: center; min-height: 64px; padding: 6px 14px; border: 1px solid var(--rim-soft); border-radius: 8px; cursor: pointer; }
.r29-list li > .ic:first-child { color: var(--primary-600); }
.r29-list li.on { background: #EEF4FE; box-shadow: inset 3px 0 0 var(--primary); }
.r29-list li span, .r29-list li > a { display: flex; flex-direction: column; min-width: 0; color: inherit; }
.r29-list li[hidden] { display: none; }
.r29-list li b { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r29-list li small { font-size: 13px; color: var(--text-2); }
.r29-list li .kebab { background: none; border: 0; padding: 0; color: var(--text-2); cursor: pointer; }
.r29-list .none-box { padding: 16px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.r29-edit h2 .del { position: absolute; right: 0; top: 0; height: 36px; padding: 0 14px; gap: 10px; font-size: 14px; font-weight: 400; color: #D93C41; border-color: #F3A5A8; background: #FFF7F7; }
.r29-edit .f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; margin-top: 16px; }
.r29-edit .f .input { height: 36px; font-size: 14px; }
.r29-edit h3 { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; margin-top: 18px; }
.r29-edit h3 small { font-size: 13px; font-weight: 400; color: var(--text-2); margin-top: 2px; }
.r29-edit h3 small.in { display: inline; font-size: 14px; color: var(--text-strong); margin: 0; }
.r29-edit h3:has(small.in) { flex-direction: row; gap: 6px; align-items: baseline; }
.r29-edit .cond { display: grid; grid-template-columns: 1.1fr .8fr 1.1fr 22px; gap: 10px; align-items: center; margin-top: 12px; }
.r29-edit .cond .input { height: 36px; font-size: 14px; min-width: 0; }
.r29-edit .cond .tr, .r29-edit .cond button { color: #D93C41; background: none; border: 0; padding: 0; cursor: pointer; }
.r29-edit .add { margin-top: 10px; height: 34px; padding: 0 12px; gap: 10px; font-size: 13.5px; color: var(--primary-600); border-color: #BCD2F7; background: #EEF4FE; }
.r29-edit .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.r29-edit .three .f { margin-top: 8px; }
.r29-edit .sel { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 0 0 12px; border: 1px solid var(--rim); border-radius: 8px; }
.r29-edit .sel .input { border: 0; box-shadow: none; flex: 1; min-width: 0; height: 36px; padding-left: 4px; background: transparent; }
.r29-edit .sel .hi { color: #E5484D; }
.r29-edit .sel .b { color: var(--primary-600); }
.r29-edit .chn { display: flex; gap: 60px; margin-top: 12px; font-size: 14.5px; }
.r29-edit .chn label { display: flex; align-items: center; gap: 12px; }
.r29-edit .chn .ic { color: var(--text-2); }
.r29-edit > select.input, .r29-edit [data-style] { width: 100%; height: 36px; margin-top: 10px; font-size: 14px; }
.r29-edit .hint { display: block; font-size: 12px; color: var(--text-2); margin-top: 8px; }
.r29-edit .field-error { margin-top: 8px; }
.r29-ro-note { margin: 12px 4px 0; padding: 10px 12px; border-radius: 8px; background: #FDF0D5; color: #8A5A00; font-size: 12.5px; }
.r29-edit .ro { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #FDF0D5; color: #8A5A00; font-size: 12.5px; }
.r29-test { display: flex; flex-direction: column; gap: 12px; }
.r29-test .smp { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; column-gap: 14px; padding: 12px 12px 10px 14px; }
.r29-test .smp > .ic:first-child { grid-row: 1 / 3; color: var(--primary-600); }
.r29-test .smp > .wa { color: #1FA855; }
.r29-test .smp header { grid-column: 2 / 4; display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.r29-test .smp header b { font-weight: 500; color: var(--text-strong); }
.r29-test .smp header .pill { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12px; }
.r29-test .pill.ok { background: #E4F7F0; color: #16926F; }
.r29-test .pill.no { background: var(--surface-3); color: var(--text-2); }
.r29-test .smp dl { grid-column: 2; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 10px; margin: 12px 0 0; font-size: 13px; }
.r29-test .smp dt { color: var(--text-2); }
.r29-test .smp dd { margin: 0; color: var(--text-strong); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.r29-test .smp .cv { grid-column: 3; align-self: end; color: var(--text-2); }
.r29-test .smp footer { grid-column: 1 / 4; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rim-soft); font-size: 12.5px; color: var(--text-2); }
.r29-test .smp footer span:first-of-type { margin-left: auto; }
.r29-test .smp footer .pill { height: 28px; padding: 0 12px; gap: 6px; font-size: 12px; }
.r29-test .pill.hi { background: #FDECEC; color: #D93C41; }
.r29-test .pill.me { background: #FDF0D5; color: #8A5A00; }
.r29-test .pill.lo { background: var(--surface-3); color: var(--text-2); }
.r29-test .pill.de { background: #EFEAFB; color: #6B4FC6; }
.r29-test .pill.wk { background: #EAF1FE; color: var(--primary-600); }
.r29-test .none-box { padding: 16px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.r29-foot { display: grid; grid-template-columns: 1fr 1fr 1.05fr auto auto; gap: 18px; align-items: center; margin: 26px 56px 16px 34px; padding: 14px 16px 14px 20px; }
.r29-foot .ap { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-right: 18px; border-right: 1px solid var(--rim-soft); }
.r29-foot .ap .b { color: var(--primary-600); }
.r29-foot .ap .wa { color: #1FA855; }
.r29-foot .ap span { display: flex; flex-direction: column; }
.r29-foot .ap b { font-size: 12.5px; font-weight: 500; }
.r29-foot .ap small { font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
.r29-foot .switch:disabled { opacity: 1; cursor: not-allowed; }
.r29-foot .btn { height: 48px; padding: 0 24px; gap: 14px; font-size: 15.5px; }
.r29-foot .test { border-color: var(--primary-400); color: var(--primary-600); }
.r29-foot .save { padding: 0 34px; }
.r29-pane { padding: 18px 20px; }
.r29-pane p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-top: 8px; }
.r29-order { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.r29-order li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--rim-soft); border-radius: 8px; font-size: 14px; }
.r29-order li i { font-style: normal; color: var(--text-2); }
.r29-order li small { color: var(--text-2); }
.r29-order .btn { height: 32px; padding: 0 10px; }

.r29-ai .ai-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 560px; padding: 12px 0; border-bottom: 1px solid var(--rim-soft); }
.r29-ai .ai-row span { display: flex; flex-direction: column; }
.r29-ai .ai-row b { font-size: 14.5px; font-weight: 500; }
.r29-ai .ai-row small { font-size: 12.5px; color: var(--text-2); }

@media (max-width: 1200px) {
  .r29-cols { grid-template-columns: minmax(0, 1fr); }
  .r29-foot { grid-template-columns: minmax(0, 1fr); margin: 16px; }
  .r29-foot .ap { border-right: 0; padding-right: 0; }
  .r29-tabs { overflow-x: auto; }
}
@media (max-width: 768px) {
  .r29-crumbs { flex-wrap: wrap; gap: 4px; margin: 8px 12px 0; }
  .r29-crumbs .when { margin-left: 0; }
  .r29-frame { margin: 8px 0 0; }
  .r29-in { padding: 10px 8px; }
  .r29-tabs a { padding: 0 14px; gap: 8px; font-size: 14px; flex: none; }
  .r29-tabs .help { display: none; }
  .r29-edit h2 .del { position: static; align-self: flex-start; margin-top: 8px; }
  .r29-edit .cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 22px; }
  .r29-edit .cond > input.input { grid-column: 1 / 3; }
  .r29-edit .three { grid-template-columns: minmax(0, 1fr); }
  .r29-order li { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
  .r29-order li small { display: none; }
  .r29-foot { margin: 12px 8px; }
  .r29-test .smp footer { flex-wrap: wrap; }
  .r29-test .smp footer span:first-of-type { margin-left: 0; }
  .r29-foot .btn { width: 100%; justify-content: center; }
}

/* ===== 30.css ===== */
/* 30 System, access & appearance (prefix s30-) */
.s30-frame { margin: 20px 4px 0 4px; }
.s30-in { padding: 16px 26px 14px 26px; }
.s30-head { display: flex; align-items: flex-start; }
.s30-head > div:first-child { margin-right: auto; }
.s30-head .eyebrow { font-size: 13px; letter-spacing: .28em; color: var(--text-2); }
.s30-head h1 { font-size: 34px; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.s30-head p { font-size: 16px; color: var(--text-2); margin-top: 4px; }
.s30-head .st { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--text-strong); }
.s30-head .st span { display: inline-flex; align-items: center; gap: 12px; }
.s30-head .st .ic { color: var(--primary-600); }
.s30-head .st .ok { color: var(--text-2); font-size: 13px; padding-left: 6px; }
.s30-head .st .ok i { width: 11px; height: 11px; border-radius: 50%; background: #1FC29A; }
.s30-head .st .ok.warn i { background: var(--amber); }
.s30-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; padding: 4px; border: 1px solid var(--rim-soft); border-radius: 12px; background: #F6F8FB; }
.s30-tabs a { display: flex; align-items: center; justify-content: center; gap: 14px; height: 42px; font-size: 16px; color: var(--text-strong); border-radius: 8px; }
.s30-tabs a + a { border-left: 1px solid var(--rim-soft); }
.s30-tabs a .ic { color: var(--text-2); }
.s30-tabs a.on { background: #E6EFFD; color: var(--primary-600); box-shadow: inset 0 -2px 0 var(--primary); border-left-color: transparent; }
.s30-tabs a.on .ic { color: var(--primary-600); }
.s30-grid { display: grid; grid-template-columns: 526px minmax(0, 1fr) 462px; grid-template-areas: "layout look conn" "prev prev side"; gap: 14px; margin-top: 14px; }
.s30-grid > * { min-width: 0; }
.s30-grid .card { padding: 14px 14px; }
.s30-grid h2 { display: flex; flex-direction: column; font-size: 17px; font-weight: 600; }
.s30-grid h2 small { font-size: 14px; font-weight: 400; color: var(--text-2); margin-top: 4px; }
.s30-layout { grid-area: layout; }
.s30-layout .lays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.s30-layout .lay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 10px 16px; border: 1px solid var(--rim-soft); border-radius: 8px; text-align: center; cursor: pointer; }
.s30-layout .lay input { position: absolute; opacity: 0; pointer-events: none; }
.s30-layout .lay.on, .s30-layout .lay:has(input:checked) { border: 1.5px solid var(--primary-400); background: #F2F7FF; }
.s30-layout .lay:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.s30-layout .sk { display: flex; gap: 3px; width: 94px; height: 60px; margin-bottom: 14px; }
.s30-layout .sk i { flex: 1; border: 2px solid #9DA9BF; border-radius: 3px; background: linear-gradient(#9DA9BF 0 0) top / 100% 6px no-repeat, #EEF1F6; }
.s30-layout b { font-size: 14px; font-weight: 600; }
.s30-layout small { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.s30-layout .lay.on small, .s30-layout .lay:has(input:checked) small { color: var(--primary-600); }
.s30-layout .ck { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--primary); color: #fff; display: none; }
.s30-layout .lay.on .ck, .s30-layout .lay:has(input:checked) .ck { display: block; }
.s30-look { grid-area: look; display: flex; flex-direction: column; gap: 14px; }
.s30-look .row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 160px; gap: 16px; align-items: center; font-size: 14px; }
.s30-look .row .ic { color: var(--primary-600); }
.s30-look .row .input { height: 38px; font-size: 14px; }
.s30-look .note { display: flex; gap: 16px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; background: #F2F6FC; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.s30-look .note .ic { color: var(--primary-600); flex: none; }
.s30-conn { grid-area: conn; }
.s30-conn ul, .s30-acc ul { list-style: none; margin: 8px 0 0; padding: 0; }
.s30-conn li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 124px 104px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rim-soft); }
.s30-conn li:last-child { border-bottom: 0; }
.s30-conn li > .ic, .s30-acc li > .ic:first-child { color: var(--primary-600); }
.s30-grid .wa { color: #1FA855 !important; }
.s30-conn span, .s30-acc span { display: flex; flex-direction: column; min-width: 0; }
.s30-conn b, .s30-acc b { font-size: 13px; font-weight: 500; }
.s30-conn span small, .s30-acc span small { font-size: 12px; color: var(--text-2); }
.s30-conn em, .s30-acc em { font-style: normal; display: grid; grid-template-columns: 10px minmax(0, 1fr); align-items: center; gap: 2px 10px; font-size: 12.5px; }
.s30-conn em i, .s30-acc em i { width: 10px; height: 10px; border-radius: 50%; background: #1FC29A; }
.s30-conn em.off i, .s30-acc em.off i { background: var(--grey); }
.s30-conn em.warn i, .s30-acc em.warn i { background: var(--amber); }
.s30-conn em small { grid-column: 2; font-size: 12px; color: #16926F; }
.s30-conn .btn { height: auto; min-height: 30px; padding: 4px 10px; font-size: 11.5px; line-height: 1.3; color: var(--primary-600); border-color: var(--primary-400); text-align: center; justify-content: center; }
.s30-prev { grid-area: prev; }
.s30-prev h2 { font-size: 17px; }
.s30-prev .mini { margin-top: 14px; padding: 10px 10px 8px; border: 1px solid var(--rim-soft); border-radius: 10px; background: #F7F9FC; }
.s30-prev .bar { display: flex; align-items: center; gap: 14px; padding: 0 8px 10px; font-size: 11px; color: var(--text-2); }
.s30-prev .bar b { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--text-strong); margin-right: auto; }
.s30-prev .bar b .ic { color: var(--primary-600); }
.s30-prev .bar .q { display: inline-flex; gap: 8px; align-items: center; width: 284px; height: 30px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 8px; background: var(--surface); margin-right: auto; }
.s30-prev .bar .sd { display: inline-flex; gap: 6px; align-items: center; }
.s30-prev .bar .me { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--text-strong); }
.s30-prev .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.s30-prev .mc { padding: 6px 10px 4px; border: 1px solid var(--rim-soft); border-radius: 8px; background: var(--surface); min-width: 0; }
.s30-prev .mc header { display: flex; align-items: center; gap: 12px; padding: 6px 4px 8px; border-bottom: 1px solid var(--rim-soft); }
.s30-prev .mc header b { font-size: 12.5px; font-weight: 500; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s30-prev .mc header .b { color: var(--primary-600); }
.s30-prev .mc header .v { color: #7A5AE0; }
.s30-prev .mc header .t { color: #1FB8C9; }
.s30-prev .mr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--rim-soft); }
.s30-prev .mr:last-child { border-bottom: 0; }
.s30-prev .mr .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #EEF1F6; font-size: 10.5px; font-weight: 600; }
.s30-prev .mr span { display: flex; flex-direction: column; min-width: 0; }
.s30-prev .mr b { font-size: 11.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s30-prev .mr small, .s30-prev .mr time { font-size: 10.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s30-prev .mini.compact .mr { padding: 4px 4px; }
.s30-prev .mini.compact .mr .av { width: 24px; height: 24px; }
.s30-prev .none-box { padding: 16px; font-size: 13px; color: var(--text-2); }
.s30-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; }
.s30-acc li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 132px 18px; gap: 16px; align-items: center; padding: 6px 0; }
.s30-acc li > .ic:last-child { color: var(--text-2); }
.s30-acc a { display: contents; color: inherit; }
.s30-sess { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.s30-sess > .ic { color: var(--text-strong); }
.s30-sess > span { display: flex; flex-direction: column; }
.s30-sess b { font-size: 13.5px; font-weight: 500; }
.s30-sess small { font-size: 12px; color: var(--text-2); }
.s30-sess .out, .s30-sess form .btn { height: 34px; padding: 0 20px; font-size: 13px; color: #D93C41; border-color: #F3A5A8; background: #FFF7F7; }
.s30-foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.s30-foot p { display: flex; align-items: center; gap: 14px; margin-right: auto; font-size: 13px; color: var(--text-2); }
.s30-foot p .ic { color: var(--primary-600); }
.s30-foot .btn { height: 38px; padding: 0 20px; font-size: 13.5px; }
.s30-pane { padding: 16px 18px; }
.s30-pane p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-top: 6px; }
.s30-sessions { list-style: none; margin: 14px 0 0; padding: 0; }
.s30-sessions li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rim-soft); font-size: 13.5px; }
.s30-sessions li .ic { color: var(--primary-600); }
.s30-sessions li span { display: flex; flex-direction: column; }
.s30-sessions li small { color: var(--text-2); font-size: 12.5px; }
.s30-sessions .pill { height: 24px; padding: 0 10px; font-size: 12px; background: #E4F7F0; color: #16926F; }
.s30-tabgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }

/* preferences applied app-wide (base layout puts them on <html>) */
html[data-density="compact"] body { zoom: .92; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
.w01-row.lay-1:not(.w01-row-scroll) { grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.w01-row.lay-2:not(.w01-row-scroll) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
.w01-hidden-note { align-self: center; font-size: 12.5px; color: var(--text-2); margin-right: 4px; }
.w01-more { display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed var(--rim-strong); border-radius: var(--radius); font-size: 13px; color: var(--text-2); text-align: center; padding: 12px; }
.w01-more a { color: var(--primary-600); }

@media (max-width: 1200px) {
  .s30-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "layout" "look" "conn" "prev" "side"; }
  .s30-tabgrid { grid-template-columns: minmax(0, 1fr); }
  .s30-prev .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .s30-frame { margin: 8px 0 0; }
  .s30-in { padding: 12px 10px; }
  .s30-head { flex-direction: column; }
  .s30-head h1 { font-size: 24px; }
  .s30-head .st { margin-top: 8px; }
  .s30-tabs { grid-template-columns: repeat(2, 1fr); }
  .s30-tabs a { font-size: 14px; gap: 8px; }
  .s30-tabs a:nth-child(3) { border-left: 0; }
  .s30-layout .lays { grid-template-columns: minmax(0, 1fr); }
  .s30-look .row { grid-template-columns: 26px minmax(0, 1fr); }
  .s30-look .row .input { grid-column: 1 / -1; }
  .s30-conn li { grid-template-columns: 30px minmax(0, 1fr); }
  .s30-conn li em, .s30-conn li > .btn, .s30-conn li > span:last-child { grid-column: 2; justify-self: start; }
  .s30-prev .bar .q, .s30-prev .bar .sd { display: none; }
  .s30-foot { flex-wrap: wrap; }
  .s30-foot p { flex-basis: 100%; }
}

/* computers (plans/browser-hosts.md) — Connections tab */
.s30-hosts { margin-top: 14px; }
.s30-tabgrid > .s30-conn { grid-area: auto; padding: 14px 16px; }
.s30-tabgrid > .s30-conn h2 { font-size: 17px; font-weight: 600; }
.s30-hosts h2 { position: relative; display: flex; flex-direction: column; padding-right: 210px; font-size: 17px; font-weight: 600; }
.s30-hosts h2 small { font-size: 13.5px; font-weight: 400; color: var(--text-2); margin-top: 4px; line-height: 1.5; }
.s30-hosts h2 .btn { position: absolute; right: 0; top: 0; height: 38px; padding: 0 16px; gap: 10px; font-size: 13.5px; font-weight: 500; }
.s30-hostlist { list-style: none; margin: 14px 0 0; padding: 0; }
.s30-hostlist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 220px auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rim-soft); }
.s30-hostlist li > .ic { color: var(--primary-600); }
.s30-hostlist li > span:nth-of-type(1) { display: flex; flex-direction: column; min-width: 0; }
.s30-hostlist b { font-size: 14px; font-weight: 500; }
.s30-hostlist small { font-size: 12.5px; color: var(--text-2); }
.s30-hostlist .caps { display: inline-flex; gap: 6px; }
.s30-hostlist .caps .pill { height: 24px; padding: 0 10px; font-size: 12px; }
.s30-hostlist .caps .pill.on { background: var(--green-tint); color: var(--green-600); }
.s30-hostlist .caps .pill.off { background: var(--surface-3); color: var(--text-faint); text-decoration: line-through; }
.s30-hostlist em { font-style: normal; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.s30-hostlist em i { width: 10px; height: 10px; border-radius: 50%; background: #1FC29A; }
.s30-hostlist em.warn i { background: var(--amber); }
.s30-hostlist em.off i { background: var(--grey); }
.s30-hostlist .btn { height: 32px; padding: 0 14px; font-size: 13px; color: #D93C41; border-color: #F3A5A8; background: #FFF7F7; }
.s30-hosts .none-box { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.s30-hosts code, .s30-pair code { font-family: var(--mono); font-size: 12.5px; }
.s30-hosts .note-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.s30-pair { max-width: 560px; }
.s30-pair .code { margin: 14px 0 10px; font: 600 30px/1.2 var(--mono); letter-spacing: .12em; text-align: center; padding: 12px; border-radius: 10px; background: var(--primary-tint-2); color: var(--text-strong); }
.s30-pair .cmd { margin: 0; padding: 10px 12px; border-radius: 8px; background: #1F2430; color: #E8ECF3; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; word-break: break-all; }
.s30-pair .status { margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.s30-pair .status.ok { color: var(--green-600); font-weight: 600; }
.c24-runner .pair { font-size: 13px; color: var(--primary-600); margin-top: 2px; }
@media (max-width: 768px) {
  .s30-hosts h2 { padding-right: 0; }
  .s30-hosts h2 .btn { position: static; margin-top: 10px; align-self: flex-start; }
  .s30-hostlist li { grid-template-columns: 30px minmax(0, 1fr); }
  .s30-hostlist li > .caps, .s30-hostlist li > em, .s30-hostlist li > .btn { grid-column: 2; justify-self: start; }
}
/* Claude Code on the server card (plans/server-claude.md §2) */
.s30-claude .s30-claude-form { margin-top: 12px; }
.s30-claude .s30-claude-form ol { margin: 0 0 10px 18px; font-size: 13.5px; line-height: 1.7; }
.s30-claude .s30-claude-form .row { display: flex; gap: 10px; }
.s30-claude .s30-claude-form .row .input { flex: 1; min-width: 0; }
@media (max-width: 768px) { .s30-claude .s30-claude-form .row { flex-direction: column; } }

/* ===== 31.css ===== */
/* 31 WhatsApp: QR connection (prefix q31-) */
.q31-crumbs { display: flex; align-items: center; margin: 18px 62px 0 62px; font-size: 14px; }
.q31-crumbs .crumbline a { color: var(--primary-600); }
.q31-crumbs .cur { color: var(--text-strong); }
.q31-crumbs .when { margin-left: auto; color: var(--text-2); }
.q31-frame { margin: 18px 34px 0 36px; }
.q31-in { padding: 26px 30px 22px 30px; }
.q31-head { display: flex; align-items: center; gap: 24px; }
.q31-head .badge { width: 62px; height: 62px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #2BD66A, #12A846); color: #fff; }
.q31-head h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
.q31-head p { font-size: 16px; color: var(--text-2); }
.q31-head > div { margin-right: auto; }
.q31-head .btn { height: 46px; padding: 0 28px; gap: 14px; font-size: 14.5px; border-color: var(--rim); }
.q31-head .btn .ic { color: var(--primary-600); }
.q31-head .k { color: var(--text-2); margin-left: 12px; }
.q31-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 0 58px; padding: 0; }
.q31-steps li { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 20px; row-gap: 0; }
.q31-steps li::after { content: ""; position: absolute; left: 50px; right: 10px; top: 20px; height: 2px; background: linear-gradient(90deg, #BFD3F7, #E5EDFB); }
.q31-steps li:last-child::after { right: 40px; background: linear-gradient(90deg, #E5EDFB, transparent); }
.q31-steps i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; background: #EAF1FD; color: var(--text-strong); border: 1px solid #D3E0F8; }
.q31-steps .done i, .q31-steps .cur i { background: linear-gradient(160deg, #3F8BFF, #1D66E5); color: #fff; border-color: transparent; }
.q31-steps .cur i { box-shadow: 0 0 0 5px #DCE8FC; }
.q31-steps span { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; margin-top: -2px; }
.q31-steps b { font-size: 14.5px; font-weight: 600; }
.q31-steps small { font-size: 13.5px; color: var(--text-2); line-height: 1.45; max-width: 220px; }
.q31-steps li > i { grid-row: 1 / 3; align-self: start; }
.q31-steps li { grid-template-rows: 20px auto; }
.q31-steps li span { grid-row: 2; }
.q31-cols { display: grid; grid-template-columns: 424px minmax(0, 1fr) 428px; gap: 12px; margin-top: 20px; }
.q31-cols > .card { padding: 16px 16px; min-width: 0; }
.q31-cols h2 { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.q31-state .wait { display: flex; gap: 22px; align-items: center; padding: 18px 20px; border-radius: 8px; background: #FDF6E4; }
.q31-state .wait .ic { color: #D08A00; }
.q31-state .wait.off { background: var(--surface-3); }
.q31-state .wait.off .ic { color: var(--text-2); }
.q31-state .wait span, .q31-state .row > span { display: flex; flex-direction: column; min-width: 0; }
.q31-state .wait b { font-size: 15px; font-weight: 600; }
.q31-state .wait small { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.q31-state .row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 4px 18px 4px; border-bottom: 1px solid var(--rim-soft); }
.q31-state .row > .ic { color: var(--primary-600); margin-top: 2px; }
.q31-state .row b { font-size: 14px; font-weight: 500; }
.q31-state .row small { font-size: 13px; color: var(--text-2); }
.q31-state .row .r { align-items: flex-end; gap: 10px; font-size: 14px; }
.q31-state .row .r a, .q31-state .row .r button { color: var(--primary-600); font-size: 14px; background: none; border: 0; padding: 0; }
.q31-state .row .r button:disabled { color: var(--text-2); cursor: not-allowed; }
.q31-state .row .r.on { flex-direction: row; align-items: center; color: #16926F; font-weight: 600; }
.q31-state .row .r.on .ic { color: var(--primary-600); }
.q31-state .row .r.offc { flex-direction: row; color: var(--text-2); font-weight: 600; }
.q31-state .note { display: flex; gap: 18px; margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: #EEF4FE; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.q31-state .note .ic { color: var(--primary-600); flex: none; }
.q31-state .note u { color: var(--primary-600); text-decoration: none; }
.q31-qr { display: flex; flex-direction: column; align-items: center; }
.q31-qr h2 { align-self: flex-start; }
.q31-qr .tile { width: 252px; height: 250px; display: grid; place-items: center; border: 1px solid var(--rim-soft); border-radius: 10px; box-shadow: var(--shadow); background: #fff; }
.q31-qr .tile.none { align-content: center; gap: 10px; padding: 18px; text-align: center; color: #A8B4C8; box-shadow: none; border-style: dashed; }
.q31-qr .tile.none small { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.q31-qr .lbl { margin-top: 18px; padding: 8px 20px; border-radius: 6px; background: #EEF1F6; font-size: 14px; color: var(--text-strong); }
.q31-qr .btns { display: grid; grid-template-columns: 1fr 1.05fr; gap: 10px; width: 100%; margin-top: 36px; }
.q31-qr .btns .btn { height: 50px; justify-content: center; gap: 16px; font-size: 14px; }
.q31-qr .btns .btn:not(.btn-primary) { border-color: var(--primary-400); color: var(--text-strong); }
.q31-qr .btns .btn:not(.btn-primary) .ic { color: var(--primary-600); }
.q31-how ol { list-style: none; margin: 0; padding: 0; }
.q31-how ol > li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 26px; padding-bottom: 16px; }
.q31-how ol > li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 4px; width: 1px; background: var(--rim); }
.q31-how ol > li i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #EAF1FD; color: var(--primary-600); font-size: 16px; }
.q31-how ol > li span { display: flex; flex-direction: column; }
.q31-how ol > li b { font-size: 14.5px; font-weight: 600; }
.q31-how ol > li small { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.q31-how .site { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 16px; align-items: center; padding: 10px 16px; border-radius: 8px; background: #EAF8F0; border: 1px solid #CDEEDA; }
.q31-how .site > .ic:first-child { color: #1FA855; }
.q31-how .site > .ic:last-child { color: var(--primary-600); }
.q31-how .site span { display: flex; flex-direction: column; }
.q31-how .site b { font-size: 14px; font-weight: 500; color: #127A3D; }
.q31-how .site small { font-size: 12.5px; color: var(--text-2); }
.q31-how .imp { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; margin-top: 8px; padding: 12px 16px; border-radius: 8px; background: #EEF4FE; }
.q31-how .imp .ic { color: var(--primary-600); }
.q31-how .imp b { font-size: 13.5px; font-weight: 600; color: var(--primary-600); }
.q31-how .imp ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-2); line-height: 1.55; }
.q31-foot { display: flex; align-items: center; gap: 14px; margin: 34px 0 16px 0; padding: 12px 20px; }
.q31-foot .k { display: flex; gap: 22px; align-items: flex-start; padding: 12px 16px; min-width: 176px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.q31-foot .k .ic { color: var(--primary-600); margin-top: 4px; }
.q31-foot .k span { display: flex; flex-direction: column; }
.q31-foot .k small { font-size: 12px; color: var(--text-2); }
.q31-foot .k b { font-size: 21px; font-weight: 600; }
.q31-foot .k em { font-style: normal; font-size: 11.5px; color: var(--text-2); }
.q31-foot .sep { flex: 1; min-width: 20px; }
.q31-foot .btn { height: 46px; padding: 0 28px; gap: 14px; font-size: 14px; border-color: var(--rim); }
.q31-foot .btn .ic { color: var(--primary-600); }

@media (max-width: 1200px) {
  .q31-crumbs, .q31-frame, .q31-foot { margin-left: 16px; margin-right: 16px; }
  .q31-cols { grid-template-columns: minmax(0, 1fr); }
  .q31-foot { flex-wrap: wrap; }
  .q31-foot .k { flex: 1 1 150px; min-width: 0; }
}
@media (max-width: 768px) {
  .q31-crumbs { flex-wrap: wrap; gap: 4px; margin: 8px 12px 0; }
  .q31-crumbs .when { margin-left: 0; }
  .q31-frame { margin: 8px 0 0; }
  .q31-in { padding: 14px 10px; }
  .q31-head { flex-wrap: wrap; gap: 14px; }
  .q31-head h1 { font-size: 24px; }
  .q31-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-left: 0; }
  .q31-steps li::after { display: none; }
  .q31-foot { margin: 12px 8px; }
  .q31-foot .btn { flex: 1 1 100%; justify-content: center; }
}

/* ===== 32.css ===== */
/* 32 WhatsApp: conversations & AI replies (prefix m32-) */
.m32-frame { margin: 22px -6px 0 -6px; }
.m32-in { padding: 18px 14px 18px 14px; }
.m32-head { display: flex; align-items: center; gap: 14px; padding: 0 12px; }
.m32-head > div { margin-right: auto; }
.m32-head h1 { font-size: 29px; font-weight: 600; line-height: 1.2; }
.m32-head p { font-size: 15px; color: var(--text-2); margin-top: 4px; }
.m32-head .st { height: 44px; padding: 0 16px; gap: 12px; border: 1px solid var(--rim-soft); background: var(--surface); font-size: 13px; color: var(--text-strong); border-radius: 10px; }
.m32-head .st i { width: 12px; height: 12px; border-radius: 50%; background: #1FC29A; }
.m32-head .st.off i { background: var(--grey); }
.m32-head .st .ic { color: var(--text-2); }
a.m32-head.st, .m32-head a.st { color: var(--text-strong); }
.m32-head .ob { height: 44px; padding: 0 18px; gap: 10px; font-size: 14px; color: var(--primary-600); border-color: var(--primary-400); }
.m32-grid { display: grid; grid-template-columns: 446px minmax(0, 1fr) 505px; grid-template-areas: "list chat ai" "task task ai"; gap: 10px; margin-top: 16px; }
.m32-grid > * { min-width: 0; }
.m32-list { grid-area: list; padding: 14px 0 0; display: flex; flex-direction: column; }
.m32-list .srch { display: flex; align-items: center; gap: 14px; padding: 0 14px; color: var(--text-2); }
.m32-list .srch label { flex: 1; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; border: 1px solid var(--rim-soft); border-radius: 8px; background: #F7F9FC; }
.m32-list .srch .input { border: 0; background: transparent; box-shadow: none; height: 38px; padding: 0; flex: 1; min-width: 0; font-size: 14px; }
.m32-list .tabs { display: flex; gap: 8px; padding: 12px 14px; }
.m32-list .tabs span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--rim-soft); border-radius: 8px; font-size: 13px; color: var(--text-2); }
.m32-list .tabs span.on { background: #E6EFFD; border-color: #C9DBF8; color: var(--primary-600); padding: 0 22px; }
.m32-list .tabs i { font-style: normal; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: #EEF1F6; font-size: 11.5px; }
.m32-list ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.m32-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 76px; padding: 0 18px; border-bottom: 1px solid var(--rim-soft); }
.m32-list li.on { background: #EAF1FD; }
.m32-grid .av { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #E5E9F0; font-size: 17px; font-weight: 500; flex: none; }
.m32-grid .av .wb { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: #1FA855; color: #fff; border: 2px solid #fff; box-sizing: content-box; }
.m32-list .t { display: flex; flex-direction: column; min-width: 0; }
.m32-list .t b { font-size: 15.5px; font-weight: 500; }
.m32-list .t small { font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m32-list .r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 13px; color: var(--text-2); }
.m32-list .r i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; }
.m32-list .r i.b { background: var(--primary); }
.m32-list .r i.g { background: #1FA855; }
.m32-list footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; color: var(--primary-600); font-size: 14px; }
.m32-list footer span, .m32-list footer button { display: inline-flex; align-items: center; gap: 12px; }
.m32-list footer { margin-top: auto; }
.m32-list footer button { background: none; border: 0; padding: 0; font-size: 14px; color: var(--primary-600); }
.m32-list footer button:disabled { color: var(--text-2); cursor: not-allowed; }
.m32-list .none-box { margin: 10px 14px; padding: 18px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.m32-list .none-box a { color: var(--primary-600); }
.m32-chat { grid-area: chat; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.m32-chat header { display: grid; grid-template-columns: 56px minmax(0, 1fr) 22px 22px; gap: 20px; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--rim-soft); }
.m32-chat header .av { width: 56px; height: 56px; }
.m32-chat header span:nth-child(2) { display: flex; flex-direction: column; }
.m32-chat header b { font-size: 17px; font-weight: 500; }
.m32-chat header small { font-size: 13.5px; color: var(--text-2); }
.m32-chat .msgs { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; background: #F4F6FA; min-height: 440px; }
.m32-chat .day { align-self: center; padding: 4px 16px; border-radius: 14px; background: #E9EDF3; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.m32-chat .bb { position: relative; max-width: 72%; padding: 12px 58px 12px 14px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); font-size: 15px; line-height: 1.55; align-self: flex-start; }
.m32-chat .bb.out { align-self: flex-end; background: #DDF6E4; }
.m32-chat .bb time { position: absolute; right: 12px; bottom: 8px; display: inline-flex; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.m32-chat .bb time .ic { color: var(--primary-600); }
.m32-chat .empty-chat { flex: 1; display: grid; place-items: center; align-content: center; gap: 10px; background: #F4F6FA; color: #A8B4C8; text-align: center; padding: 40px; min-height: 440px; }
.m32-chat .empty-chat b { color: var(--text-strong); font-weight: 500; font-size: 16px; }
.m32-chat .empty-chat small { color: var(--text-2); font-size: 13.5px; max-width: 360px; }
.m32-chat footer { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) 26px; gap: 16px; align-items: center; padding: 14px 16px; color: var(--text-2); }
.m32-chat footer .input { height: 40px; font-size: 14px; }
.m32-chat footer button { background: none; border: 0; padding: 0; color: var(--text-2); }
.m32-task { grid-area: task; padding: 12px 16px; }
.m32-task h3 { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.m32-task h3 .ic { color: var(--primary-600); }
.m32-task .row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 210px auto; gap: 20px; align-items: end; margin-top: 8px; }
.m32-task .row > span { display: flex; flex-direction: column; }
.m32-task .row b { font-size: 15px; font-weight: 500; }
.m32-task .row small { font-size: 13px; color: var(--text-2); }
.m32-task label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.m32-task .dt { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 8px; font-size: 14px; color: var(--text-strong); }
.m32-task .dt .ic:last-child { margin-left: auto; }
.m32-task .wt { height: 30px; padding: 0 14px; background: #E4F7F0; color: #16926F; font-size: 13px; margin-bottom: 6px; }
.m32-task .none-box { margin-top: 8px; font-size: 13.5px; color: var(--text-2); }
.m32-ai { grid-area: ai; display: flex; flex-direction: column; gap: 10px; }
.m32-ai .card { padding: 14px 14px; }
.m32-ai h2 { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; }
.m32-ai h2 > .ic:first-child { color: var(--primary-600); }
.m32-ai h2 a, .m32-ai h2 button { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--primary-600); background: none; border: 0; }
.m32-ai h2 button:disabled { color: var(--text-2); }
.m32-ai .sg { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.m32-ai .sg i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #EAF1FD; color: var(--primary-600); font-size: 18px; }
.m32-ai .sg span:nth-of-type(1) { display: flex; flex-direction: column; }
.m32-ai .sg b { font-size: 15px; font-weight: 600; }
.m32-ai .sg small { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.m32-ai .sg .btn { height: 36px; padding: 0 16px; font-size: 12.5px; color: var(--primary-600); border-color: var(--primary-400); }
.m32-ai .sg q { grid-column: 1 / -1; display: block; padding: 8px 12px; border: 1px solid var(--rim-soft); border-radius: 6px; font-size: 13px; color: var(--text-2); line-height: 1.45; quotes: none; }
.m32-ai .none-box { margin-top: 12px; padding: 16px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.m32-ai .dr h2 { font-size: 16px; }
.m32-ai .dr h2 small { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.m32-ai .dr h2 small b { color: var(--text-strong); font-weight: 500; }
.m32-ai .dr textarea { width: 100%; height: 132px; margin-top: 12px; font-size: 15px; line-height: 1.6; resize: vertical; }
.m32-ai .dr .cnt { display: block; text-align: right; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.m32-ai .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m32-ai .acts .btn { height: 48px; justify-content: center; gap: 16px; font-size: 15px; }

@media (max-width: 1200px) {
  .m32-frame { margin: 12px 0 0; }
  .m32-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "chat" "task" "ai"; }
  .m32-head { flex-wrap: wrap; }
  .m32-head > div { flex: 1 1 100%; }
}
@media (max-width: 768px) {
  .m32-in { padding: 12px 8px; }
  .m32-head h1 { font-size: 22px; }
  .m32-list .tabs { flex-wrap: wrap; }
  .m32-task .row { grid-template-columns: 22px minmax(0, 1fr); }
  .m32-task .row label, .m32-task .row .pill { grid-column: 2; }
  .m32-ai .acts { grid-template-columns: minmax(0, 1fr); }
  .m32-ai .sg { grid-template-columns: 44px minmax(0, 1fr); }
  .m32-ai .sg .btn { grid-column: 2; justify-self: start; }
}

/* Chats through Beeper (/chats, plans/beeper.md) — the 32 layout with real rows, links and states */
.m32-list .tabs { flex-wrap: wrap; }
.m32-list .tabs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--rim-soft); border-radius: 8px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.m32-list .tabs a.on { background: #E6EFFD; border-color: #C9DBF8; color: var(--primary-600); padding: 0 22px; }
.m32-list .tabs a i { font-style: normal; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: #EEF1F6; font-size: 11.5px; }
.m32-list ul { max-height: 560px; overflow-y: auto; }
.m32-list li:has(> a.row-link) { display: block; padding: 0; }
.m32-list a.row-link { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 76px; padding: 0 18px; color: inherit; text-decoration: none; }
.m32-list a.row-link:hover { background: #F4F7FC; }
.m32-list a.row-link:focus-visible { outline: 2px solid var(--primary-400); outline-offset: -2px; }
.m32-list .r .ic { color: var(--primary-600); }
.m32-list footer span { color: var(--text-2); }
.m32-list .linkish { color: var(--primary-600); }
.m32-chat header { grid-template-columns: 56px minmax(0, 1fr) auto; }
.m32-watch { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.m32-chat .msgs { max-height: 560px; overflow-y: auto; }
.m32-chat .bb { padding-right: 62px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m32-chat .bb .who { display: block; font-size: 12px; color: var(--primary-600); margin-bottom: 2px; }
.m32-chat footer.m32-hint { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.m32-task h3 .m32-cap { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--text-2); }
.m32-sends { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.m32-sends li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.m32-sends .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m32-sends small { color: var(--text-2); font-size: 12px; }
.m32-sends .pill { height: 24px; padding: 0 10px; font-size: 12px; }
.m32-sends .pill.ok { background: #E4F7F0; color: #16926F; }
.m32-sends .pill.bad { background: #FCE9EA; color: #C8323A; }
.m32-sends .pill.wait { background: #FDF0D5; color: #8A5A00; }
.m32-ai .m32-aimark { color: var(--lavender, #A28AE4); display: inline-flex; align-items: center; gap: 4px; }
.m32-ai .field-error { margin: 0; }
body[data-page="chats"] .dialog p { white-space: pre-line; }
@media (max-width: 768px) {
  .m32-sends li { grid-template-columns: auto minmax(0, 1fr); }
  .m32-sends small { grid-column: 1 / -1; }
}
/* AI importance (plans/beeper.md step 6): always an estimate — lavender, sparkle, dashed */
.m32-list .r .m32-ai-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border: 1px dashed var(--lavender, #A28AE4); border-radius: 10px; background: #F4F0FD; color: #6B4FC6; font-size: 11.5px; font-style: normal; }
.m32-chat header.with-ai { grid-template-columns: 56px minmax(0, 1fr) auto auto; }
.m32-estimate { display: flex; gap: 10px; align-items: flex-start; margin: 10px 16px 0; padding: 10px 12px; border: 1px dashed var(--lavender, #A28AE4); border-radius: 8px; background: #F7F4FE; color: #6B4FC6; }
.m32-estimate span { display: flex; flex-direction: column; gap: 2px; }
.m32-estimate b { font-size: 13px; font-weight: 600; }
.m32-estimate small { font-size: 12.5px; color: var(--text-2); }

/* ===== 33.css ===== */
/* 33 WhatsApp: detected tasks (prefix x33-) */
.x33-head { display: flex; align-items: center; gap: 22px; margin: 16px 8px 0 12px; }
.x33-head .badge { width: 78px; height: 78px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow); color: #1FA855; }
.x33-head > div { margin-right: auto; }
.x33-head h1 { font-size: 32px; font-weight: 700; line-height: 1.2; }
.x33-head p { font-size: 14.5px; color: var(--text-2); margin-top: 6px; max-width: 880px; }
.x33-head .mon { display: flex; gap: 14px; padding: 12px 16px; min-width: 214px; }
.x33-head .mon > i { width: 14px; height: 14px; border-radius: 50%; background: #1FC29A; margin-top: 4px; flex: none; }
.x33-head .mon.off > i { background: var(--grey); }
.x33-head .mon span { display: flex; flex-direction: column; }
.x33-head .mon b { font-size: 13px; font-weight: 600; }
.x33-head .mon small { font-size: 11.5px; color: var(--text-2); }
.x33-head .mon u { text-decoration: none; color: var(--primary-600); }
.x33-head .cs { height: 44px; padding: 0 16px; gap: 12px; font-size: 14px; color: var(--primary-600); border-color: var(--rim-soft); background: var(--surface); box-shadow: var(--shadow-sm); }
.x33-grid { display: grid; grid-template-columns: 468px minmax(0, 1fr) 460px; gap: 12px; margin: 18px 0 0; }
.x33-grid > .card { padding: 14px 16px; min-width: 0; }
.x33-grid h2 { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; }
.x33-grid h2 .btn, .x33-grid h2 .pill, .x33-grid h2 .n { margin-left: auto; }
.x33-grid h2 .n { font-size: 13px; font-weight: 400; color: var(--primary-600); }
.x33-grid h2 .pill { height: 22px; padding: 0 10px; font-size: 11.5px; font-weight: 400; background: #EAF1FD; color: var(--primary-600); }
.x33-src h2 .rf { height: 30px; padding: 0 12px; gap: 8px; font-size: 13px; font-weight: 400; color: var(--primary-600); border-color: var(--rim); }
.x33-src > p { display: flex; font-size: 13px; color: var(--text-2); margin-top: 4px; }
.x33-src > p small { margin-left: auto; font-size: 12px; }
.x33-src .srch { display: flex; align-items: center; gap: 12px; height: 40px; margin-top: 12px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 8px; color: var(--text-2); }
.x33-src .srch .input { flex: 1; min-width: 0; border: 0; box-shadow: none; height: 36px; padding: 0; background: transparent; font-size: 14px; }
.x33-src .tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; padding: 3px; border-radius: 8px; background: #F3F6FA; font-size: 13.5px; text-align: center; }
.x33-src .tabs span { padding: 7px 0; border-radius: 6px; color: var(--text-strong); }
.x33-src .tabs .on { background: #E6EFFD; color: var(--primary-600); box-shadow: inset 0 0 0 1px #C9DBF8; }
.x33-src ul { list-style: none; margin: 10px 0 0; padding: 0; }
.x33-src li { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center; min-height: 62px; padding: 4px 8px; border-bottom: 1px solid var(--rim-soft); }
.x33-src li.on { background: #EEF4FE; border-radius: 6px; }
.x33-grid .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #EEF1F6; font-size: 14px; font-weight: 500; color: var(--text-strong); flex: none; }
.x33-grid .av.sm { width: 28px; height: 28px; font-size: 11px; }
.x33-src li .t { display: flex; flex-direction: column; min-width: 0; }
.x33-src li b { font-size: 13.5px; font-weight: 600; }
.x33-src li small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x33-src li time { font-size: 12px; color: var(--text-2); align-self: start; margin-top: 10px; }
.x33-src li > .ic:last-child { color: var(--primary-600); }
.x33-grid .none-box { margin-top: 14px; padding: 18px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.x33-tasks .sub { display: flex; gap: 16px; align-items: flex-start; margin-top: 4px; }
.x33-tasks .sub p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.x33-tasks .sort { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 8px; font-size: 13px; white-space: nowrap; }
.x33-tasks .tk { margin-top: 10px; padding: 12px 16px; border: 1px solid var(--rim-soft); border-radius: 10px; }
.x33-tasks .tk.on { border: 1.5px solid var(--primary-400); box-shadow: 0 0 0 3px #EAF1FD; }
.x33-tasks .tk header { display: flex; align-items: center; gap: 14px; }
.x33-tasks .tk header i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: #EAF1FD; color: var(--primary-600); }
.x33-tasks .tk.on header i { background: var(--primary); color: #fff; }
.x33-tasks .tk header b { font-size: 16px; font-weight: 600; }
.x33-tasks .tk header em { margin-left: auto; font-style: normal; font-size: 13px; }
.x33-grid .pill.un { height: 22px; padding: 0 10px; font-size: 11px; background: #EFEAFB; color: #6B4FC6; }
.x33-tasks .tk p { font-size: 13px; color: var(--text-2); margin: 4px 0 0 38px; }
.x33-tasks blockquote { margin: 8px 0 0 38px; padding: 8px 14px; border-radius: 8px; background: #F6F8FB; font-size: 13px; line-height: 1.5; color: var(--text-strong); }
.x33-tasks cite { display: block; font-style: normal; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.x33-tasks .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 0 38px; }
.x33-tasks label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.x33-grid .sel { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 1px solid var(--rim); border-radius: 8px; font-size: 13.5px; color: var(--text-strong); }
.x33-grid .sel .ic:last-child { margin-left: auto; }
.x33-grid .sel > .ic:first-child { color: var(--primary-600); }
.x33-det > p { font-size: 13px; color: var(--text-2); margin-top: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--rim-soft); }
.x33-det dl { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px 0; align-items: center; margin: 12px 0 0; font-size: 13.5px; }
.x33-det dt { color: var(--text-2); font-size: 13px; }
.x33-det dd { margin: 0; min-width: 0; }
.x33-det dd b { font-weight: 600; font-size: 14px; }
.x33-det .box { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.x33-det .box .ic:last-child { margin-left: auto; }
.x33-det .box.q { display: block; background: #F6F8FB; line-height: 1.5; }
.x33-det .box.q small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.x33-det .unc { display: flex; align-items: center; }
.x33-det .unc em { margin-left: auto; font-style: normal; }
.x33-det textarea { width: 100%; height: 72px; font-size: 13.5px; resize: vertical; }
.x33-det .cnt { display: block; text-align: right; font-size: 11.5px; color: var(--text-2); }
.x33-det .ap { display: flex; width: 100%; height: 48px; justify-content: center; gap: 14px; font-size: 16px; margin-top: 12px; }
.x33-det .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.x33-det .two .btn { height: 42px; justify-content: center; gap: 10px; font-size: 13px; }
.x33-det .two .btn .ic { color: var(--primary-600); }
.x33-grid .rd, .x33-foot .rd { color: #E5484D !important; }
.x33-foot { display: flex; align-items: center; gap: 0; margin: 14px 0 12px; padding: 12px 20px; }
.x33-foot > div { display: flex; align-items: center; gap: 18px; padding: 0 28px; border-right: 1px solid var(--rim-soft); }
.x33-foot > div:first-child { padding-left: 8px; }
.x33-foot > div .ic { color: var(--primary-600); }
.x33-foot span { display: flex; flex-direction: column; }
.x33-foot b { font-size: 19px; font-weight: 600; }
.x33-foot small { font-size: 12.5px; color: var(--text-2); }
.x33-foot .cal b { font-size: 13.5px; font-weight: 500; }
.x33-foot .cal em { font-style: normal; font-weight: 400; color: var(--text-2); margin-left: 6px; }
.x33-foot .cal { border-right: 0; }
.x33-foot > .btn, .x33-foot > a.btn { margin-left: auto; height: 40px; padding: 0 16px; gap: 10px; font-size: 14px; color: var(--primary-600); border-color: var(--primary-400); }

@media (max-width: 1200px) {
  .x33-head { flex-wrap: wrap; }
  .x33-head > div { flex: 1 1 100%; }
  .x33-grid { grid-template-columns: minmax(0, 1fr); }
  .x33-foot { flex-wrap: wrap; row-gap: 12px; }
  .x33-foot > div { border-right: 0; padding: 0 12px; }
}
@media (max-width: 768px) {
  .x33-head { margin: 8px 0 0; }
  .x33-head .badge { width: 56px; height: 56px; }
  .x33-head h1 { font-size: 24px; }
  .x33-tasks .sub { flex-direction: column; }
  .x33-tasks .two, .x33-det .two { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .x33-det dl { grid-template-columns: minmax(0, 1fr); }
  .x33-foot > .btn, .x33-foot > a.btn { margin-left: 0; }
}

/* ===== 34.css ===== */
/* 34 WhatsApp: session & monitoring (prefix z34-) */
.z34-crumbs { margin: 14px 20px 0 26px; font-size: 14px; }
.z34-crumbs .crumbline { display: flex; align-items: center; gap: 10px; }
.z34-crumbs .crumbline > .ic:first-child { color: var(--text-2); }
.z34-crumbs .cur { color: var(--text-strong); font-weight: 500; }
.z34-frame { margin: 14px 2px 0 6px; }
.z34-in { padding: 16px 18px 14px 18px; }
.z34-head { display: flex; align-items: center; gap: 24px; padding: 0 14px; }
.z34-head .badge { width: 66px; height: 66px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(160deg, #2BD66A, #12A846); color: #fff; }
.z34-head > div { margin-right: auto; }
.z34-head h1 { font-size: 32px; font-weight: 600; line-height: 1.2; }
.z34-head p { font-size: 16px; color: var(--text-2); }
.z34-head p b { font-weight: 500; color: var(--text-strong); }
.z34-head .clk { display: flex; gap: 16px; align-items: center; margin-right: 40px; color: var(--text-2); }
.z34-head .clk span { display: flex; flex-direction: column; }
.z34-head .clk small { font-size: 12.5px; }
.z34-head .clk b { font-size: 24px; font-weight: 600; color: var(--text-strong); }
.z34-grid { display: grid; grid-template-columns: 523px 370px minmax(0, 1fr); grid-template-areas: "sess set chats" "sess set log"; gap: 12px; margin-top: 14px; }
.z34-grid > .card { padding: 14px 16px; min-width: 0; }
.z34-grid h2 { display: flex; align-items: center; gap: 14px; font-size: 16.5px; font-weight: 600; }
.z34-grid h2 > .ic:first-child { color: var(--primary-600); }
.z34-grid .wa { color: #1FA855 !important; }
.z34-grid .rd { color: #E5484D; }
.z34-sess { grid-area: sess; display: flex; flex-direction: column; gap: 12px; }
.z34-sess h2 .ic:nth-child(2) { color: var(--text-2); }
.z34-sess .st { margin-left: auto; display: grid; grid-template-columns: 10px auto; column-gap: 10px; font-size: 13.5px; font-weight: 500; color: #D07A00; text-align: right; }
.z34-sess .st i { width: 10px; height: 10px; border-radius: 50%; background: #F5A623; align-self: center; }
.z34-sess .st small { grid-column: 2; font-size: 11.5px; color: var(--text-2); font-weight: 400; }
.z34-sess .st.off { color: var(--text-2); }
.z34-sess .st.off i { background: var(--grey); }
.z34-sess .tile { border: 4px solid #EEF1F6; border-radius: 10px; overflow: hidden; }
.z34-sess .tile .bar { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 12px; background: #F4F6FA; }
.z34-sess .tile .dots { display: inline-flex; gap: 6px; }
.z34-sess .tile .dots i { width: 10px; height: 10px; border-radius: 50%; background: #D5DAE3; }
.z34-sess .tile .url { flex: 1; display: inline-flex; align-items: center; gap: 10px; height: 26px; padding: 0 12px; border-radius: 6px; background: #fff; font-size: 12px; }
.z34-sess .tile .url .ic { color: #1FA855; }
.z34-sess .tile .body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 30px 24px; text-align: center; }
.z34-sess .ill { position: relative; display: flex; align-items: center; gap: 12px; height: 130px; padding: 0 50px; border-radius: 50%; background: #F1F4F9; color: #9DA9BF; }
.z34-sess .ill .dash { width: 70px; border-top: 3px dotted #9DA9BF; }
.z34-sess .ill .warn { position: absolute; right: 36px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #F5A623; color: #fff; font-weight: 700; font-size: 22px; }
.z34-sess .ill .warn.off { background: var(--grey); }
.z34-sess .body b { font-size: 18px; font-weight: 600; margin-top: 10px; }
.z34-sess .body small { font-size: 13.5px; color: var(--text-2); }
.z34-sess .body .note { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 12px 18px; border-radius: 10px; background: #EEF4FE; border: 1px solid #DCE7FA; font-size: 14px; color: var(--text-strong); text-align: left; }
.z34-sess .body .note .ic { color: var(--primary-600); flex: none; }
.z34-sess .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.z34-sess .acts .btn, .z34-sess .dis { height: 64px; justify-content: flex-start; gap: 16px; padding: 0 20px; text-align: left; }
.z34-sess .btn span { display: flex; flex-direction: column; }
.z34-sess .btn b { font-size: 15px; font-weight: 500; }
.z34-sess .btn small { font-size: 12px; opacity: .85; }
.z34-sess .acts .btn:not(.btn-primary) { border-color: var(--primary-400); color: var(--primary-600); }
.z34-sess .acts .btn:not(.btn-primary) small { color: var(--text-2); }
.z34-sess .dis { justify-content: center; height: 74px; border-color: #F3A5A8; background: #FFF7F7; color: #D93C41; }
.z34-sess .dis small { color: var(--text-2); }
.z34-set { grid-area: set; display: flex; flex-direction: column; gap: 10px; }
.z34-set .grp { padding: 10px 12px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.z34-set h3 { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.z34-set h3 .ic { color: var(--primary-600); }
.z34-set label { display: flex; gap: 16px; align-items: flex-start; }
.z34-set label span { display: flex; flex-direction: column; }
.z34-set label b { font-size: 13.5px; font-weight: 500; }
.z34-set label small { font-size: 12px; color: var(--text-2); }
.z34-set .switch:disabled { cursor: not-allowed; }
.z34-set .more { padding: 10px 10px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.z34-set .more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.z34-set .more li { display: flex; gap: 16px; align-items: flex-start; padding: 6px 10px; border: 1px solid var(--rim-soft); border-radius: 6px; }
.z34-set .more li .ic { color: var(--primary-600); margin-top: 4px; flex: none; }
.z34-set .more li .rd { color: #E5484D; }
.z34-set .more li span { display: flex; flex-direction: column; }
.z34-set .more li b { font-size: 12.5px; font-weight: 500; }
.z34-set .more li small { font-size: 11.5px; color: var(--text-2); }
.z34-chats { grid-area: chats; }
.z34-chats h2 .btn { margin-left: auto; height: 30px; padding: 0 12px; gap: 8px; font-size: 12.5px; font-weight: 400; color: var(--primary-600); border-color: var(--primary-400); background: #F2F7FF; }
.z34-chats ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.z34-chats li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center; padding: 8px 10px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.z34-grid .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #EEF1F6; font-size: 13px; font-weight: 500; color: var(--text-strong); }
.z34-chats li span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.z34-chats li b { font-size: 13.5px; font-weight: 500; }
.z34-chats li small { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z34-chats li time { font-size: 12px; color: var(--text-2); align-self: start; margin-top: 4px; }
.z34-chats footer { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.z34-chats footer a, .z34-log .all { display: inline-flex; gap: 8px; align-items: center; color: var(--primary-600); font-size: 13px; }
.z34-grid .none-box { margin-top: 12px; padding: 16px; border: 1px dashed var(--rim); border-radius: 8px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.z34-log { grid-area: log; display: flex; flex-direction: column; }
.z34-log .flt { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; height: 30px; padding: 0 12px; border: 1px solid var(--rim); border-radius: 6px; font-size: 13px; font-weight: 400; }
.z34-log ul { list-style: none; margin: 12px 0 0 14px; padding: 0; position: relative; }
.z34-log ul::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 16px; width: 1px; background: var(--rim); }
.z34-log li { position: relative; display: grid; grid-template-columns: 10px 44px minmax(0, 1fr); gap: 16px; padding-bottom: 8px; }
.z34-log li i { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--grey); position: relative; }
.z34-log li i.am { background: #F5A623; } .z34-log li i.bl { background: var(--primary); } .z34-log li i.vi { background: #9C66FC; }
.z34-log li time { font-size: 12px; color: var(--text-2); }
.z34-log li span { display: flex; flex-direction: column; }
.z34-log li b { font-size: 12.5px; font-weight: 500; }
.z34-log li small { font-size: 11.5px; color: var(--text-2); }
.z34-log .all { align-self: flex-end; margin-top: auto; }
.z34-foot { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; padding: 8px 18px; }
.z34-foot .k { flex: 1; display: flex; gap: 24px; align-items: center; padding: 10px 16px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.z34-foot .k .ic { color: var(--primary-600); }
.z34-foot .k span, .z34-foot .st span { display: flex; flex-direction: column; }
.z34-foot .k small { font-size: 11px; color: var(--text-2); }
.z34-foot .k b { font-size: 17px; font-weight: 600; }
.z34-foot .st { flex: 1.3; display: flex; gap: 20px; align-items: center; padding: 10px 20px; border: 1px solid var(--rim-soft); border-radius: 8px; }
.z34-foot .st i { width: 14px; height: 14px; border-radius: 50%; background: #1FC29A; }
.z34-foot .st.off i { background: var(--grey); }
.z34-foot .st b { font-size: 13.5px; font-weight: 500; }
.z34-foot .st small { font-size: 12.5px; color: var(--text-2); }
.z34-foot .go { height: 50px; padding: 0 36px; gap: 14px; font-size: 16px; opacity: .55; }
.z34-foot .go:disabled { opacity: .55; }
.z34-sess .btn:disabled { opacity: .6; }

@media (max-width: 1200px) {
  .z34-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sess" "set" "chats" "log"; }
  .z34-foot { flex-wrap: wrap; }
  .z34-foot .k { flex: 1 1 160px; }
  .z34-head .clk { margin-right: 0; }
}
@media (max-width: 768px) {
  .z34-frame { margin: 8px 0 0; }
  .z34-in { padding: 12px 8px; }
  .z34-head { flex-wrap: wrap; padding: 0; gap: 12px; }
  .z34-head .badge { width: 52px; height: 52px; }
  .z34-head h1 { font-size: 23px; }
  .z34-sess .acts { grid-template-columns: minmax(0, 1fr); }
  .z34-sess .ill { padding: 0 16px; transform: scale(.85); }
  .z34-sess h2 { flex-wrap: wrap; }
  .z34-foot .go { flex: 1 1 100%; justify-content: center; }
}

/* ===== dark theme: derived rules (theme-dark-auto.css) ===== */
/* GENERATED by scripts/dark_css.py from the light stylesheets — do not edit; hand-written dark rules live in
   prototype/css/theme-dark.css (loaded after this file, so they win). */

/* ----- app.css ----- */
html[data-theme="dark"] body { background-image: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(18, 26, 47, 0.95), rgba(18, 26, 47, 0) 70%),
    linear-gradient(180deg, #162038 0%, #1B2640 55%, #1B2640 100%); }
html[data-theme="dark"] body::before, html[data-theme="dark"] body::after { background: linear-gradient(180deg, rgba(18, 26, 47, 0.7), rgba(83, 140, 198, 0.088)); }
html[data-theme="dark"] body::before { border-right: 1px solid rgba(72, 104, 142, 0.48); }
html[data-theme="dark"] body::after { border-left: 1px solid rgba(72, 104, 142, 0.48); }
html[data-theme="dark"] .topbar { background: rgba(18, 26, 47, 0.92); }
html[data-theme="dark"] .avatar-me { border: 1px solid rgba(27, 85, 187, 0.7); }
html[data-theme="dark"] .frame { background: linear-gradient(180deg, #121A2F, #1B2640); }
html[data-theme="dark"] .panel { background: rgba(18, 26, 47, 0.96); }
html[data-theme="dark"] .play { box-shadow: 0 10px 26px rgba(36,120,252,.38), inset 0 -3px 8px rgba(0, 0, 0, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.035); }
html[data-theme="dark"] .play:hover { box-shadow: 0 14px 30px rgba(36,120,252,.45), inset 0 -3px 8px rgba(0, 0, 0, 0.55), inset 0 2px 6px rgba(255, 255, 255, 0.035); }
html[data-theme="dark"] .pill-blue { color: #769DE5; }
html[data-theme="dark"] .pill-purple { color: #9B77E4; }
html[data-theme="dark"] .pill-lavender { color: #9A86D5; }
html[data-theme="dark"] .pill-green { color: #6EF7D4; }
html[data-theme="dark"] .pill-teal { color: #75E1F0; }
html[data-theme="dark"] .pill-amber { color: #F7C66E; }
html[data-theme="dark"] .pill-red { color: #E1848C; }
html[data-theme="dark"] .pill-pink { color: #DB8AA2; }
html[data-theme="dark"] .dot-green { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .avatar { background: #1B2640; }
html[data-theme="dark"] .src-icon { border: 1px solid rgba(27, 86, 187, 0.7); }
html[data-theme="dark"] .src-icon.soft-green { border-color: rgba(52, 162, 88, 0.7); }
html[data-theme="dark"] .form-alert { color: #DD8890; }
html[data-theme="dark"] .form-alert.ok { color: #6FF6D4; }
html[data-theme="dark"] .switch { background: #243152; }
html[data-theme="dark"] .switch::after { background: #121A2F; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1B2640 25%, #162038 50%, #1B2640 75%); }
html[data-theme="dark"] .dialog-backdrop { background: rgba(20, 26, 66, 0.372); }
html[data-theme="dark"] .wz-step .n { background: #1B2640; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 0 5px var(--rim); }
html[data-theme="dark"] .wz-step.active .n { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 0 5px #BFD6FC; }
html[data-theme="dark"] .orb.orb-fallback { background: radial-gradient(circle at 36% 32%, #121A2F 0 7%, #5C9BFD 30%, #2478FC 58%, #A28AE4 100%); }

/* ----- 01.css ----- */
html[data-theme="dark"] .w01-op-body { background: rgba(18, 26, 47, 0.97); }
html[data-theme="dark"] .w01-op-warn { background: rgba(238, 170, 43, 0.16); }
html[data-theme="dark"] .w01-op-preset .sw { box-shadow: 0 0 0 1px var(--rim), 0 3px 8px rgba(0, 0, 0, 0.46); }
html[data-theme="dark"] .w01-msg { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .w01-stats { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .w01-sess { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .w01-dock { background: rgba(18, 26, 47, 0.96); }
html[data-theme="dark"] .w01-tile { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .w01-slot { background: rgba(18, 26, 47, 0.35); }

/* ----- 02.css ----- */
html[data-theme="dark"] .c02-orb { background: #1B2640; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .c02-card .tile { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .c02-row .btn { border-color: rgba(37, 89, 177, 0.7); }

/* ----- 03.css ----- */
html[data-theme="dark"] .s03-tab.active .tab-count { background: rgba(43, 114, 238, 0.16); }
html[data-theme="dark"] .btn-lavender { border-color: rgba(78, 27, 187, 0.7); color: #9B77E4; background: #121A2F; }
html[data-theme="dark"] .btn-lavender:hover { color: #9D7EDD; border-color: rgba(79, 27, 187, 0.7); }

/* ----- 04.css ----- */
html[data-theme="dark"] .a04-tabs button.active .tab-count { background: rgba(43, 114, 238, 0.16); }
html[data-theme="dark"] .a04-scope { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .a04-note { color: #F7C76E; }
html[data-theme="dark"] .a04-timeline { background: rgba(18, 26, 47, 0.9); }
html[data-theme="dark"] .a04-step::before { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .a04-step.current::before { background: #121A2F; }
html[data-theme="dark"] .a04-step.pending::before { background: #121A2F; }
html[data-theme="dark"] .a04-steps.dashed-last::after { border-top: 2px dashed rgba(84, 103, 131, 0.7); }

/* ----- 05.css ----- */
html[data-theme="dark"] .h05-rack { background: rgba(18, 26, 47, 0.96); }
html[data-theme="dark"] .h05-rack-head .btn { border-color: rgba(38, 92, 176, 0.7); }
html[data-theme="dark"] .h05-info { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .h05-detail { background: rgba(18, 26, 47, 0.96); }
html[data-theme="dark"] .h05-split { border: 1px solid rgba(37, 89, 177, 0.7); }
html[data-theme="dark"] .h05-split .btn + .btn { border-left: 1px solid rgba(37, 89, 177, 0.7); }

/* ----- 06.css ----- */
html[data-theme="dark"] .n06-planned { background: #162038; }
html[data-theme="dark"] .n06-planned:hover { background: rgba(83, 45, 236, 0.16); }
html[data-theme="dark"] .n06-prov .logo.g, html[data-theme="dark"] .n06-prov .logo.m { background: #121A2F; }
html[data-theme="dark"] .n06-warn { color: #F7C76E; }
html[data-theme="dark"] .n06-monitor .scr { background: linear-gradient(180deg, #121A2F, #1B2640); }
html[data-theme="dark"] .n06-monitor .in { background: #162038; }
html[data-theme="dark"] .n06-monitor .stand { background: linear-gradient(180deg, #1B2640, rgba(81, 113, 148, 0.3)); }

/* ----- 07.css ----- */
html[data-theme="dark"] .x07-steps .wz-step.done .n { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 0 5px #C9DBFA; }
html[data-theme="dark"] .x07-est { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* ----- 08.css ----- */
html[data-theme="dark"] .d08-avatar { background: rgba(49, 120, 231, 0.16); }
html[data-theme="dark"] .d08-avatar.purple { background: rgba(113, 46, 235, 0.16); color: #9B77E4; }
html[data-theme="dark"] .d08-avatar.teal { background: rgba(73, 193, 207, 0.16); color: #75E1F0; }
html[data-theme="dark"] .d08-avatar.amber { background: rgba(238, 172, 43, 0.16); color: #F7C66E; }
html[data-theme="dark"] .d08-avatar.pink { background: rgba(229, 52, 104, 0.16); color: #D98CA4; }
html[data-theme="dark"] .d08-avatar.green { background: rgba(71, 209, 131, 0.16); color: #78EDB0; }
html[data-theme="dark"] .d08-banner p { color: #6FF6D4; }

/* ----- 09.css ----- */
html[data-theme="dark"] .i09-acc .ic-box.blue { background: rgba(100, 48, 233, 0.16); }
html[data-theme="dark"] .i09-acc .ic-box.purple { background: rgba(159, 55, 225, 0.16); color: #B57AE0; }
html[data-theme="dark"] .i09-acc .ic-box.teal { background: rgba(77, 203, 203, 0.16); color: #7CDDE9; }
html[data-theme="dark"] .i09-acc .ic-box.amber { background: rgba(238, 172, 43, 0.16); color: #F7C56E; }
html[data-theme="dark"] .i09-acc .ic-box.pink { background: rgba(229, 52, 104, 0.16); color: #DB8AA2; }
html[data-theme="dark"] .i09-acc .ic-box.green { background: rgba(71, 209, 131, 0.16); color: #78EDB0; }
html[data-theme="dark"] .i09-pv h2 .acts .starred { color: #F7D36E; }
html[data-theme="dark"] .i09-split .btn + .btn { border-left: 1px solid rgba(31, 43, 72, 0.35); }
html[data-theme="dark"] .i09-clog { background: #162038; }
html[data-theme="dark"] .i09-clog .bb.out { background: rgba(74, 207, 111, 0.16); }

/* ----- 10.css ----- */
html[data-theme="dark"] .t10-msg.note { background: #162038; }
html[data-theme="dark"] mark.find { background: rgba(207, 165, 23, 0.3); }
html[data-theme="dark"] .t10-dl { color: #E1848C; }
html[data-theme="dark"] .t10-dl.sugg { color: #9987D4; }

/* ----- 11.css ----- */
html[data-theme="dark"] .g11-box.on, html[data-theme="dark"] .g11-cat.on { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .g11-cat.c-decision.on { border-color: rgba(73, 36, 178, 0.7); }
html[data-theme="dark"] .g11-cat.c-decision .ci { color: #9A86D5; }
html[data-theme="dark"] .g11-start:disabled { background: rgba(75, 104, 155, 0.3); }
html[data-theme="dark"] .g11-resume { border: 1px solid rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] a.g11-mcard.soft:hover { border-color: rgba(34, 86, 180, 0.7); }

/* ----- 12.css ----- */
html[data-theme="dark"] .r12-status .bar { background: #1B2640; }
html[data-theme="dark"] .r12-tabs .active { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .r12-row.cur .no { background: rgba(44, 116, 237, 0.16); }
html[data-theme="dark"] .r12-ai { background: #162038; }
html[data-theme="dark"] .r12-review:disabled { background: rgba(75, 104, 155, 0.3); }
html[data-theme="dark"] .r12-bring a:hover { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .r12-pad .d:hover:not(:disabled) { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .r12-info { background: #162038; }
html[data-theme="dark"] .r12-chatlog { background: #162038; }
html[data-theme="dark"] .r12-chatlog .bb.out { background: rgba(74, 207, 111, 0.16); }

/* ----- 13.css ----- */
html[data-theme="dark"] .s13-hero { background: linear-gradient(180deg, #121A2F, #121A2F); }
html[data-theme="dark"] .s13-path path { stroke: rgba(26, 93, 203, 0.3); }
html[data-theme="dark"] .s13-stat.lav { border-color: rgba(75, 40, 174, 0.7); }
html[data-theme="dark"] .s13-stat.lav .ci { background: rgba(102, 57, 223, 0.16); color: #9A86D5; }
html[data-theme="dark"] .s13-stats .lk { background: rgba(62, 118, 219, 0.16); }
html[data-theme="dark"] .s13-note { background: #162038; }
html[data-theme="dark"] .s13-card .hi.lav { background: #1B2640; color: #9A86D5; }

/* ----- 14.css ----- */
html[data-theme="dark"] .t14-col { background: #121A2F; }
html[data-theme="dark"] .t14-col.c-todo .ci { color: #9A86D5; }
html[data-theme="dark"] .t14-col.c-in_progress .ci { background: rgba(76, 204, 153, 0.16); color: #7BEAC1; }
html[data-theme="dark"] .t14-col.c-review .ci { color: #9A86D5; }
html[data-theme="dark"] .t14-card:hover { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .t14-card .src.mail { background: linear-gradient(180deg, rgba(80, 27, 203, 0.3), #8E6EE0); }
html[data-theme="dark"] .t14-card .due.hot { color: #E5767D; }
html[data-theme="dark"] .t14-view .active { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .t14-insp .hd .src.mail { background: linear-gradient(180deg, rgba(80, 27, 203, 0.3), #8E6EE0); }
html[data-theme="dark"] .t14-insp .hd select { background: rgba(76, 204, 153, 0.16); color: #7FE6C0; }
html[data-theme="dark"] .t14-insp .orig .msg { background: #162038; }
html[data-theme="dark"] .t14-insp .keep { border: 1px solid rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .t14-bar .it.off > .ic { color: #7DE8A9; }
html[data-theme="dark"] .t14-insp .keep.sugg { border-color: rgba(187, 139, 27, 0.7); background: rgba(238, 178, 43, 0.16); }
html[data-theme="dark"] .t14-insp .keep.sugg b { color: #F7C86E; }
html[data-theme="dark"] .t14-list .due.hot { color: #E5767D; }

/* ----- 15.css ----- */
html[data-theme="dark"] .c15-body .col.today { background: rgba(43, 115, 238, 0.096); }
html[data-theme="dark"] .c15-ev.confirmed { background: rgba(43, 111, 238, 0.16); }
html[data-theme="dark"] .c15-ev.suggested { background: #162038; color: #A294D1; }
html[data-theme="dark"] .c15-await .cnt { color: #9987D4; }
html[data-theme="dark"] .c15-await .sug { border: 1px solid rgba(75, 40, 174, 0.7); background: #121A2F; }
html[data-theme="dark"] .c15-await h3 { color: #9987D4; }
html[data-theme="dark"] .c15-await .dt { background: #162038; color: #9987D4; }
html[data-theme="dark"] .c15-tl a.row.suggested { border-color: rgba(77, 33, 181, 0.7); background: #121A2F; }

/* ----- 16.css ----- */
html[data-theme="dark"] .d16-card:hover { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .d16-card.sel { background: #121A2F; }
html[data-theme="dark"] .d16-src .orig { background: #162038; }
html[data-theme="dark"] .d16-dec .kv em.hot { color: #E5767D; }
html[data-theme="dark"] .d16-opt.blue { background: #162038; border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .d16-opt.green { background: #1B2640; border-color: rgba(60, 155, 104, 0.7); }
html[data-theme="dark"] .d16-opt.green b { color: #7FE6BA; }
html[data-theme="dark"] .d16-opt.red { background: #1B2640; border-color: rgba(179, 36, 36, 0.7); }
html[data-theme="dark"] .d16-opt.red b { color: #E1848A; }
html[data-theme="dark"] .d16-opt.red > .ic:first-child { color: #E5767D; }

/* ----- 17.css ----- */
html[data-theme="dark"] .n17-row .c-lavender { color: #9A86D5; }
html[data-theme="dark"] .n17-row .c-red { background: #1B2640; color: #E5767D; }
html[data-theme="dark"] .n17-row .c-amber { background: rgba(238, 154, 43, 0.16); color: #F1B274; }
html[data-theme="dark"] .n17-row .c-green { background: #1B2640; color: #7CE9B0; }

/* ----- 18.css ----- */
html[data-theme="dark"] .p18-chips a.active span { background: rgba(44, 116, 237, 0.16); }
html[data-theme="dark"] .p18-card.sel { background: #162038; }
html[data-theme="dark"] .p18-pv .frameview { background: #162038; }
html[data-theme="dark"] .p18-method .ok { color: #7FE6C0; }

/* ----- 19.css ----- */
html[data-theme="dark"] .q19-row:hover { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .q19-row.sel { border-color: rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .pill.soft { background: #1B2640; color: #E1848C; }
html[data-theme="dark"] .q19-banner { border: 1px solid rgba(34, 86, 180, 0.7); background: #162038; }
html[data-theme="dark"] .deadlink { background: #1B2640; }
html[data-theme="dark"] .q19-dec .ok { background: #1B2640; border-color: rgba(60, 155, 104, 0.7); }
html[data-theme="dark"] .q19-dec .ok b { color: #7FE6BA; }
html[data-theme="dark"] .q19-dec .block { border-color: rgba(183, 31, 43, 0.7); background: #162038; }
html[data-theme="dark"] .q19-dec .block > .ic, html[data-theme="dark"] .q19-dec .block b { color: #E5767D; }
html[data-theme="dark"] .q19-dec .del { background: #162038; }
html[data-theme="dark"] .q19-an .cls > .ic { color: #E5767D; }
html[data-theme="dark"] .q19-an .rs .w { color: #E5767D; }
html[data-theme="dark"] .q19-an dd.bad { color: #E5767D; }

/* ----- 20.css ----- */
html[data-theme="dark"] .b20-master .play:disabled { background: rgba(75, 104, 155, 0.3); }
html[data-theme="dark"] .b20-master .nodes path { stroke: rgba(30, 90, 199, 0.3); }
html[data-theme="dark"] .b20-master .nodes circle { fill: rgba(47, 116, 234, 0.16); stroke: rgba(28, 91, 201, 0.3); }
html[data-theme="dark"] .b20-mon .site .hero { background: linear-gradient(115deg, #121A2F 38%, #1B2640 60%, rgba(77, 109, 153, 0.3) 100%); }
html[data-theme="dark"] .b20-mon .site.research .hero { background: linear-gradient(115deg, #121A2F 40%, #1B2640 70%, rgba(82, 122, 199, 0.16) 100%); }
html[data-theme="dark"] .b20-mon .wah .ic:first-child { color: #80E59B; }
html[data-theme="dark"] .b20-mon .wab nav span.on { background: #1B2640; color: #7FE6AB; }
html[data-theme="dark"] .b20-mon .wab li i { background: rgba(83, 125, 198, 0.16); }
html[data-theme="dark"] .b20-mon .prof .pi.lav { color: #9A86D5; }
html[data-theme="dark"] .st-on { background: #1B2640; color: #7FE6C0; }
html[data-theme="dark"] .st-wait { color: #9987D4; }
html[data-theme="dark"] .b20-mon.off .scr { background: #162038; }
html[data-theme="dark"] .b20-mon.live .scr { background: linear-gradient(180deg, #162038, #121A2F); }

/* ----- 21.css ----- */
html[data-theme="dark"] .w21-sec .tpl label.on { background: #162038; }
html[data-theme="dark"] .w21-sec .tpl label > .ic.wa { color: #80E59B; }
html[data-theme="dark"] .w21-pv .tabs { background: #1B2640; }
html[data-theme="dark"] .w21-pv .url { background: #1B2640; }
html[data-theme="dark"] .w21-bottom .appr { border: 1px solid rgba(34, 86, 180, 0.7); background: #162038; }
html[data-theme="dark"] .w21-wa { background: #1B2640; color: #7FE6BA; }

/* ----- 22.css ----- */
html[data-theme="dark"] .l22-state { background: #1B2640; }
html[data-theme="dark"] .l22-view .tabs { background: #1B2640; }
html[data-theme="dark"] .l22-view .tabs .dot { background: #243152; }
html[data-theme="dark"] .l22-view .url { background: #1B2640; }
html[data-theme="dark"] .l22-view .bill { background: #1B2640; }
html[data-theme="dark"] .l22-view .plan.pop { border-color: rgba(27, 88, 187, 0.7); background: #162038; }
html[data-theme="dark"] .l22-co .steps::before { background: linear-gradient(90deg, var(--primary) 50%, #243152 50%); }
html[data-theme="dark"] .l22-co .steps i { border: 2px solid #243152; }
html[data-theme="dark"] .l22-co .steps.idle::before { background: #243152; }
html[data-theme="dark"] .l22-co .stat { background: #162038; }
html[data-theme="dark"] .l22-co .now { background: #1B2640; }
html[data-theme="dark"] .l22-co .spin { border: 3px solid rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .l22-co .check .c { border: 2px solid rgba(81, 101, 133, 0.7); }
html[data-theme="dark"] .l22-view .pagewrap { background: #162038; }
html[data-theme="dark"] .l22-view .pagewrap .nolive { background: #162038; }
html[data-theme="dark"] .l22-co .stop { color: #E4767A; border-color: rgba(187, 27, 33, 0.7); background: #162038; }

/* ----- 23.css ----- */
html[data-theme="dark"] .t23-crumbs { background: rgba(18, 26, 47, 0.55); }
html[data-theme="dark"] .t23-mail .from .avatar { background: #1B2640; }
html[data-theme="dark"] .t23-mail .pdf { background: #1B2640; color: #E87872; }
html[data-theme="dark"] .t23-task .st { background: #1B2640; }
html[data-theme="dark"] .t23-task .steps li i { background: #1B2640; }
html[data-theme="dark"] .t23-task .steps .ok { color: #7BEACF; }
html[data-theme="dark"] .t23-task .steps .rv { background: #1B2640; color: #9784D7; }
html[data-theme="dark"] .t23-task .offers th { background: #162038; }
html[data-theme="dark"] .t23-res .hint { background: rgba(43, 111, 238, 0.16); }
html[data-theme="dark"] .t23-res .hint > .ic { background: rgba(43, 117, 238, 0.16); }
html[data-theme="dark"] .t23-res .hero { background: linear-gradient(180deg, #8FB7DA 0%, rgba(70, 120, 159, 0.3) 30%, #6C8F6A 42%, #2F6FA8 55%, #1E5F97 100%); }
html[data-theme="dark"] .t23-res .dots i { background: #243152; }
html[data-theme="dark"] .t23-res .sub, html[data-theme="dark"] .t23-res .sub:disabled { background: #1B2640; border-color: #1F2B48; }

/* ----- 24.css ----- */
html[data-theme="dark"] .c24-card { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.06), var(--shadow-sm); }
html[data-theme="dark"] .c24-card.run header .pill { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .c24-card.wait header .pill { background: rgba(238, 174, 43, 0.16); color: #F7C76E; }
html[data-theme="dark"] .c24-card .acts .stop .ic { color: #EB7074; }
html[data-theme="dark"] .c24-card .acts .dis, html[data-theme="dark"] .c24-card .acts .btn:disabled { background: #1B2640; border-color: #1F2B48; }
html[data-theme="dark"] .cp-list .pill.ok, html[data-theme="dark"] .cp-detail .pill.ok, html[data-theme="dark"] .cp-strip .pill.ok { color: #6EF7D4; }
html[data-theme="dark"] .cp-list .pill.wait, html[data-theme="dark"] .cp-detail .pill.wait, html[data-theme="dark"] .cp-strip .pill.wait { color: #F7C76E; }
html[data-theme="dark"] .cp-list .pill.bad, html[data-theme="dark"] .cp-detail .pill.bad { color: #E1848C; }
html[data-theme="dark"] .cp-push.done { color: #6EF7D4; }
html[data-theme="dark"] .cp-push.failed { color: #E1848C; }
html[data-theme="dark"] .cw-edit .pill.wait { color: #F7C76E; }

/* ----- 25.css ----- */
html[data-theme="dark"] .k25-strip .info .b { background: #1B2640; }
html[data-theme="dark"] .k25-strip .pill.on { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .k25-strip .set .btn { background: #1B2640; border-color: #1F2B48; }
html[data-theme="dark"] .k25-term { border: 3px solid #1F2B48; }
html[data-theme="dark"] .k25-term .in > .ic:first-child { background: #1B2640; }
html[data-theme="dark"] .k25-term .send { background: rgba(50, 116, 231, 0.16); border-color: rgba(27, 86, 187, 0.7); }
html[data-theme="dark"] .k25-term .stop { border-color: rgba(187, 27, 33, 0.7); color: #E4767A; background: #162038; }
html[data-theme="dark"] .k25-term .stop .ic { color: #EB7074; }
html[data-theme="dark"] .k25-side .g { color: #7EE7C5; }
html[data-theme="dark"] .k25-side .v { color: #9076E5; }
html[data-theme="dark"] .k25-side .chg .t { background: #162038; }
html[data-theme="dark"] .k25-side .chg .dr { background: rgba(107, 50, 230, 0.16); color: #9784D7; }

/* ----- 26.css ----- */
html[data-theme="dark"] .h26-head .badge { background: #1B2640; border: 1.5px solid rgba(69, 34, 180, 0.7); color: #9784D7; }
html[data-theme="dark"] .h26-sec .inp .pill.v { background: #1B2640; color: #9784D7; }
html[data-theme="dark"] .h26-sec .inp .pill.g { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .h26-sec .warn { background: rgba(238, 174, 43, 0.16); color: #F7C76E; }
html[data-theme="dark"] .h26-pv .mail { background: #162038; }
html[data-theme="dark"] .h26-right .f { background: #121A2F; }
html[data-theme="dark"] .h26-right .f > .ic { background: #1B2640; }
html[data-theme="dark"] .h26-right .f code { background: #1B2640; }

/* ----- 27.css ----- */
html[data-theme="dark"] .f27-tree li.dir .ic:nth-child(2) { color: #D9E1F7; }
html[data-theme="dark"] .f27-tree li.on { background: rgba(43, 119, 238, 0.16); }
html[data-theme="dark"] .f27-file .fi { background: #1B2640; }
html[data-theme="dark"] .f27-file .pill.dr, html[data-theme="dark"] .f27-side .pill.dr { background: #1B2640; color: #9784D7; }
html[data-theme="dark"] .f27-pane .diff { background: linear-gradient(90deg, #162038 52px, transparent 52px); }
html[data-theme="dark"] .f27-pane .diff .del { background: rgba(224, 56, 64, 0.16); color: #E67F84; }
html[data-theme="dark"] .f27-pane .diff .add, html[data-theme="dark"] .f27-pane .diff .chg { background: #1B2640; color: #83E2B0; }
html[data-theme="dark"] .f27-side .stats .a { background: #1B2640; }
html[data-theme="dark"] .f27-side .stats .a b { color: #7FE6AC; }
html[data-theme="dark"] .f27-side .stats .d { background: #1B2640; }
html[data-theme="dark"] .f27-side .stats .d b { color: #E4767A; }
html[data-theme="dark"] .f27-side .stats .m { background: #1B2640; }
html[data-theme="dark"] .f27-side .stats .m b { color: #9784D7; }
html[data-theme="dark"] .f27-side .chf .ic { background: #1B2640; }
html[data-theme="dark"] .f27-side .refs li > .ic { background: #1B2640; }
html[data-theme="dark"] .pill.kb { color: #9A86D5; }

/* ----- 28.css ----- */
html[data-theme="dark"] .w28-head h1 .pill { background: #1B2640; color: #9784D7; }
html[data-theme="dark"] .w28-pal li .wa, html[data-theme="dark"] .w28-canvas .nd .wa { color: #7EE7A7; }
html[data-theme="dark"] .w28-canvas { background: radial-gradient(circle, rgba(83, 123, 198, 0.16) 1px, transparent 1.2px) 0 0 / 18px 18px; }
html[data-theme="dark"] .w28-canvas .wires { stroke: #6E9DED; }
html[data-theme="dark"] .w28-canvas .nd.col > .ic { background: #1B2640; }
html[data-theme="dark"] .w28-log li .ok { color: #7BEACF; }
html[data-theme="dark"] .w28-log .spin { border: 2px solid rgba(34, 86, 180, 0.7); }
html[data-theme="dark"] .w28-log .done { border: 1px solid rgba(34, 86, 180, 0.7); background: #1B2640; }
html[data-theme="dark"] .w28-insp .sel { background: rgba(45, 115, 235, 0.16); }
html[data-theme="dark"] .w28-insp .sel > .ic { background: rgba(43, 117, 238, 0.16); }

/* ----- 29.css ----- */
html[data-theme="dark"] .r29-tabs a { background: #162038; }
html[data-theme="dark"] .r29-list li.on { background: #1B2640; }
html[data-theme="dark"] .r29-edit h2 .del { color: #E4767A; border-color: rgba(187, 27, 33, 0.7); background: #162038; }
html[data-theme="dark"] .r29-edit .cond .tr, html[data-theme="dark"] .r29-edit .cond button { color: #E4767A; }
html[data-theme="dark"] .r29-edit .add { border-color: rgba(27, 87, 187, 0.7); background: #1B2640; }
html[data-theme="dark"] .r29-edit .sel .hi { color: #EB7074; }
html[data-theme="dark"] .r29-ro-note { background: rgba(238, 174, 43, 0.16); color: #F7C76E; }
html[data-theme="dark"] .r29-edit .ro { background: rgba(238, 174, 43, 0.16); color: #F7C76E; }
html[data-theme="dark"] .r29-test .smp > .wa { color: #7EE7A7; }
html[data-theme="dark"] .r29-test .pill.ok { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .r29-test .pill.hi { background: #1B2640; color: #E4767A; }
html[data-theme="dark"] .r29-test .pill.me { background: rgba(238, 174, 43, 0.16); color: #F7C76E; }
html[data-theme="dark"] .r29-test .pill.de { background: #1B2640; color: #9784D7; }
html[data-theme="dark"] .r29-test .pill.wk { background: rgba(43, 111, 238, 0.16); }
html[data-theme="dark"] .r29-foot .ap .wa { color: #7EE7A7; }

/* ----- 30.css ----- */
html[data-theme="dark"] .s30-tabs { background: #162038; }
html[data-theme="dark"] .s30-tabs a.on { background: rgba(43, 119, 238, 0.16); }
html[data-theme="dark"] .s30-layout .lay.on, html[data-theme="dark"] .s30-layout .lay:has(input:checked) { background: #162038; }
html[data-theme="dark"] .s30-layout .sk i { background: linear-gradient(#9DA9BF 0 0) top / 100% 6px no-repeat, #1B2640; }
html[data-theme="dark"] .s30-look .note { background: #162038; }
html[data-theme="dark"] .s30-grid .wa { color: #7EE7A7 !important; }
html[data-theme="dark"] .s30-conn em small { color: #7AEBCB; }
html[data-theme="dark"] .s30-prev .mini { background: #162038; }
html[data-theme="dark"] .s30-prev .mc header .v { color: #9076E5; }
html[data-theme="dark"] .s30-prev .mc header .t { color: #7ADFEB; }
html[data-theme="dark"] .s30-prev .mr .av { background: #1B2640; }
html[data-theme="dark"] .s30-sess .out, html[data-theme="dark"] .s30-sess form .btn { color: #E4767A; border-color: rgba(187, 27, 33, 0.7); background: #162038; }
html[data-theme="dark"] .s30-sessions .pill { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .s30-hostlist .btn { color: #E4767A; border-color: rgba(187, 27, 33, 0.7); background: #162038; }

/* ----- 31.css ----- */
html[data-theme="dark"] .q31-steps li::after { background: linear-gradient(90deg, rgba(25, 89, 204, 0.3), rgba(56, 117, 224, 0.16)); }
html[data-theme="dark"] .q31-steps li:last-child::after { background: linear-gradient(90deg, rgba(56, 117, 224, 0.16), transparent); }
html[data-theme="dark"] .q31-steps i { background: rgba(45, 115, 235, 0.16); border: 1px solid rgba(29, 84, 185, 0.7); }
html[data-theme="dark"] .q31-steps .cur i { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .q31-state .wait { background: rgba(238, 183, 43, 0.16); }
html[data-theme="dark"] .q31-state .wait .ic { color: #F7C96E; }
html[data-theme="dark"] .q31-state .row .r.on { color: #7AEBCB; }
html[data-theme="dark"] .q31-state .note { background: #1B2640; }
html[data-theme="dark"] .q31-qr .tile { background: #121A2F; }
html[data-theme="dark"] .q31-qr .lbl { background: #1B2640; }
html[data-theme="dark"] .q31-how ol > li i { background: rgba(45, 115, 235, 0.16); }
html[data-theme="dark"] .q31-how .site { background: #1B2640; border: 1px solid rgba(54, 160, 96, 0.7); }
html[data-theme="dark"] .q31-how .site > .ic:first-child { color: #7EE7A7; }
html[data-theme="dark"] .q31-how .site b { color: #7AEBA9; }
html[data-theme="dark"] .q31-how .imp { background: #1B2640; }

/* ----- 32.css ----- */
html[data-theme="dark"] .m32-list .srch label { background: #162038; }
html[data-theme="dark"] .m32-list .tabs span.on { background: rgba(43, 119, 238, 0.16); border-color: rgba(27, 88, 187, 0.7); }
html[data-theme="dark"] .m32-list .tabs i { background: #1B2640; }
html[data-theme="dark"] .m32-list li.on { background: rgba(45, 115, 235, 0.16); }
html[data-theme="dark"] .m32-grid .av { background: rgba(83, 125, 198, 0.16); }
html[data-theme="dark"] .m32-grid .av .wb { border: 2px solid #1F2B48; }
html[data-theme="dark"] .m32-chat .msgs { background: #162038; }
html[data-theme="dark"] .m32-chat .day { background: #1B2640; }
html[data-theme="dark"] .m32-chat .bb.out { background: rgba(74, 207, 111, 0.16); }
html[data-theme="dark"] .m32-chat .empty-chat { background: #162038; }
html[data-theme="dark"] .m32-task .wt { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .m32-ai .sg i { background: rgba(45, 115, 235, 0.16); }
html[data-theme="dark"] .m32-list .tabs a.on { background: rgba(43, 119, 238, 0.16); border-color: rgba(27, 88, 187, 0.7); }
html[data-theme="dark"] .m32-list .tabs a i { background: #1B2640; }
html[data-theme="dark"] .m32-list a.row-link:hover { background: #162038; }
html[data-theme="dark"] .m32-sends .pill.ok { background: rgba(78, 203, 157, 0.16); color: #7AEBCB; }
html[data-theme="dark"] .m32-sends .pill.bad { background: rgba(227, 53, 62, 0.16); color: #E08589; }
html[data-theme="dark"] .m32-sends .pill.wait { background: rgba(238, 174, 43, 0.16); color: #F7C76E; }
html[data-theme="dark"] .m32-list .r .m32-ai-pill { background: #162038; color: #9784D7; }
html[data-theme="dark"] .m32-estimate { background: #162038; color: #9784D7; }

/* ----- 33.css ----- */
html[data-theme="dark"] .x33-head .badge { color: #7EE7A7; }
html[data-theme="dark"] .x33-grid h2 .pill { background: rgba(45, 115, 235, 0.16); }
html[data-theme="dark"] .x33-src .tabs { background: #162038; }
html[data-theme="dark"] .x33-src .tabs .on { background: rgba(43, 119, 238, 0.16); }
html[data-theme="dark"] .x33-src li.on { background: #1B2640; }
html[data-theme="dark"] .x33-grid .av { background: #1B2640; }
html[data-theme="dark"] .x33-tasks .tk.on { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .x33-tasks .tk header i { background: rgba(45, 115, 235, 0.16); }
html[data-theme="dark"] .x33-grid .pill.un { background: #1B2640; color: #9784D7; }
html[data-theme="dark"] .x33-tasks blockquote { background: #162038; }
html[data-theme="dark"] .x33-det .box.q { background: #162038; }
html[data-theme="dark"] .x33-grid .rd, html[data-theme="dark"] .x33-foot .rd { color: #EB7074 !important; }

/* ----- 34.css ----- */
html[data-theme="dark"] .z34-grid .wa { color: #7EE7A7 !important; }
html[data-theme="dark"] .z34-grid .rd { color: #EB7074; }
html[data-theme="dark"] .z34-sess .st { color: #F7BE6E; }
html[data-theme="dark"] .z34-sess .tile { border: 4px solid #1F2B48; }
html[data-theme="dark"] .z34-sess .tile .bar { background: #162038; }
html[data-theme="dark"] .z34-sess .tile .dots i { background: #243152; }
html[data-theme="dark"] .z34-sess .tile .url { background: #121A2F; }
html[data-theme="dark"] .z34-sess .tile .url .ic { color: #7EE7A7; }
html[data-theme="dark"] .z34-sess .ill { background: #1B2640; }
html[data-theme="dark"] .z34-sess .body .note { background: #1B2640; border: 1px solid rgba(27, 86, 187, 0.7); }
html[data-theme="dark"] .z34-sess .dis { border-color: rgba(187, 27, 33, 0.7); background: #162038; color: #E4767A; }
html[data-theme="dark"] .z34-set .more li .rd { color: #EB7074; }
html[data-theme="dark"] .z34-chats h2 .btn { background: #162038; }
html[data-theme="dark"] .z34-grid .av { background: #1B2640; }

/* ===== dark theme: tokens and hand-written rules (theme-dark.css) ===== */
/* unimail.ai — dark theme (prototype concept for plan 30 "Colour theme: Dark").
   Active on <html data-theme="dark">. Same class names and layout as the light system: only tokens and the few
   hard-coded light colours are redefined. "Control wall at night": deep navy room, graphite monitor rims, displays
   that glow softly, the same blue primary and lavender AI accent. */

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0F1E;
  --bg-ambient: #0B1122;
  --surface: #121A2F;
  --surface-2: #162038;
  --surface-3: #1B2640;
  --rim: #243152;
  --rim-soft: #1F2B48;
  --rim-strong: #2E3D63;
  --text: #D9E1F7;
  --text-strong: #F1F4FD;
  --text-2: #B3BEDD;
  --text-muted: #8591B5;
  --text-faint: #65709A;
  --primary: #3D8BFF;
  --primary-600: #6AA6FF;
  --primary-400: #4F92FA;
  --primary-soft: #2F5596;
  --primary-tint: rgba(61, 139, 255, .16);
  --primary-tint-2: rgba(61, 139, 255, .10);
  --lavender: #B39DF0;
  --lavender-tint: rgba(179, 157, 240, .15);
  --purple: #B08BFF;
  --purple-tint: rgba(176, 139, 255, .15);
  --green: #1AD6B2;
  --green-600: #2FDDBB;
  --green-tint: rgba(26, 214, 178, .13);
  --whatsapp-600: #3CDB72;
  --whatsapp-tint: rgba(24, 204, 84, .14);
  --teal: #3CCBDB;
  --teal-tint: rgba(60, 203, 219, .14);
  --amber-600: #FFB938;
  --amber-tint: rgba(246, 162, 6, .14);
  --red-tint: rgba(234, 66, 66, .15);
  --grey-track: #243152;
  --pink-tint: rgba(217, 74, 115, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 2px 6px rgba(0, 0, 0, .28), 0 10px 28px rgba(0, 0, 0, .32);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .35), 0 20px 50px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 34%, rgba(46, 86, 170, .22), rgba(46, 86, 170, 0) 70%),
    linear-gradient(180deg, #0C1326 0%, #0A1021 55%, #080D1B 100%);
}
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after { background: linear-gradient(180deg, rgba(30, 42, 72, .55), rgba(14, 20, 38, .6)); border-color: rgba(52, 70, 110, .45); }

/* shell */
html[data-theme="dark"] .topbar { background: rgba(18, 26, 47, .88); backdrop-filter: blur(8px); }
html[data-theme="dark"] .avatar-me { border-color: #2E4A80; }
html[data-theme="dark"] .panel { background: rgba(18, 26, 47, .94); }

/* monitor rim: graphite instead of satin silver, displays keep a faint inner light */
html[data-theme="dark"] .frame { background: linear-gradient(180deg, #26324F, #161F36); }
html[data-theme="dark"] .frame > .frame-in { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 0 40px rgba(61, 139, 255, .035); }

/* components with hard-coded light colours */
html[data-theme="dark"] .btn-primary { background: linear-gradient(180deg, #4C95FF, #2F7BF5); }
html[data-theme="dark"] .avatar { background: #1E2944; color: var(--text-2); }
html[data-theme="dark"] .src-icon { border-color: #2A3E68; }
html[data-theme="dark"] .pill-blue { color: #8CB8FF; }
html[data-theme="dark"] .pill-purple { color: #C4A6FF; }
html[data-theme="dark"] .pill-lavender { color: #C6B5F5; }
html[data-theme="dark"] .pill-green { color: #4FE3C3; }
html[data-theme="dark"] .pill-teal { color: #6ADCE8; }
html[data-theme="dark"] .pill-amber { color: #FFC45C; }
html[data-theme="dark"] .pill-red { color: #FF8A8A; }
html[data-theme="dark"] .pill-pink { color: #F48AAA; }
html[data-theme="dark"] .switch { background: #2E3D63; }
html[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1B2640 25%, #22304F 50%, #1B2640 75%); background-size: 200% 100%; }
html[data-theme="dark"] .menu { background: var(--surface-2); }

/* form fields without their own background would get the browser's neutral grey under color-scheme: dark; zero
   specificity, so every screen's own field rule (including transparent search fields) still wins */
:where(html[data-theme="dark"]) :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), textarea, select) {
  background-color: var(--surface); color: var(--text-strong);
}
:where(html[data-theme="dark"]) :where(input, textarea)::placeholder { color: var(--text-faint); }
html[data-theme="dark"] .dialog-backdrop { background: rgba(3, 6, 15, .62); }

/* the theme switch changes colours with a soft cross-fade when View Transitions are not available */
html.theme-fading, html.theme-fading * , html.theme-fading *::before, html.theme-fading *::after {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, box-shadow .45s ease, fill .45s ease !important;
}

/* ---------- Sun / Moon theme toggle (top bar corner) ---------- */
.theme-toggle { --t: .6s; position: relative; flex: none; width: 66px; height: 32px; padding: 0; border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #8EC5FF, #BFE0FF); box-shadow: inset 0 1px 3px rgba(20, 60, 140, .25), 0 0 0 1px rgba(36, 120, 252, .18);
  overflow: hidden; transition: background var(--t) ease, box-shadow var(--t) ease; -webkit-tap-highlight-color: transparent; }
.theme-toggle:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 3px; }
/* the night sky fades in over the day sky */
.theme-toggle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity var(--t) ease;
  background: linear-gradient(180deg, #0B1330, #1C2A58); }
.theme-toggle[aria-pressed="true"]::before { opacity: 1; }
.theme-toggle[aria-pressed="true"] { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(120, 150, 255, .28); }

/* clouds (day) drift away, stars (night) twinkle in */
.tt-clouds, .tt-stars { position: absolute; inset: 0; pointer-events: none; transition: transform var(--t) cubic-bezier(.5, 0, .2, 1), opacity var(--t) ease; }
.tt-clouds i { position: absolute; display: block; background: #fff; border-radius: 10px; opacity: .95; }
.tt-clouds i:nth-child(1) { width: 20px; height: 8px; right: 7px; bottom: 7px; box-shadow: -6px -3px 0 -1px #fff; }
.tt-clouds i:nth-child(2) { width: 13px; height: 5px; right: 18px; top: 8px; opacity: .7; }
.tt-stars { transform: translateY(-10px); opacity: 0; }
.tt-stars i { position: absolute; display: block; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, .9); animation: tt-twinkle 2.4s ease-in-out infinite; }
.tt-stars i:nth-child(1) { left: 10px; top: 8px; }
.tt-stars i:nth-child(2) { left: 20px; top: 19px; width: 1.5px; height: 1.5px; animation-delay: .6s; }
.tt-stars i:nth-child(3) { left: 30px; top: 7px; width: 1.5px; height: 1.5px; animation-delay: 1.1s; }
.tt-stars i:nth-child(4) { left: 14px; top: 24px; width: 1px; height: 1px; animation-delay: 1.6s; }
.theme-toggle[aria-pressed="true"] .tt-clouds { transform: translateY(12px); opacity: 0; }
.theme-toggle[aria-pressed="true"] .tt-stars { transform: none; opacity: 1; }
@keyframes tt-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }

/* the knob: a sun on the left that rolls to the right and becomes a moon */
.tt-knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  transition: transform var(--t) cubic-bezier(.65, -0.25, .25, 1.35); }
.tt-sun, .tt-moon { position: absolute; inset: 0; border-radius: 50%; transition: opacity var(--t) ease, transform var(--t) cubic-bezier(.5, 0, .2, 1); }
.tt-sun { background: radial-gradient(circle at 38% 35%, #FFF6B8, #FFD23F 55%, #FFB300);
  box-shadow: 0 0 0 3px rgba(255, 214, 80, .28), 0 0 12px 2px rgba(255, 196, 40, .55); }
.tt-moon { opacity: 0; transform: rotate(-70deg) scale(.6); background: radial-gradient(circle at 40% 38%, #F4F6FF, #CBD3EC 70%, #AFB9D8);
  box-shadow: 0 0 10px 1px rgba(200, 212, 255, .35); }
/* craters */
.tt-moon i { position: absolute; border-radius: 50%; background: rgba(140, 152, 190, .55); box-shadow: inset 1px 1px 1px rgba(90, 100, 140, .35); }
.tt-moon i:nth-child(1) { width: 7px; height: 7px; left: 5px; top: 11px; }
.tt-moon i:nth-child(2) { width: 4px; height: 4px; left: 13px; top: 5px; }
.tt-moon i:nth-child(3) { width: 3px; height: 3px; left: 15px; top: 15px; }
.theme-toggle[aria-pressed="true"] .tt-knob { transform: translateX(34px) rotate(360deg); }
.theme-toggle[aria-pressed="true"] .tt-sun { opacity: 0; transform: scale(.4); }
.theme-toggle[aria-pressed="true"] .tt-moon { opacity: 1; transform: none; }
.theme-toggle:hover .tt-sun { box-shadow: 0 0 0 4px rgba(255, 214, 80, .32), 0 0 16px 3px rgba(255, 196, 40, .65); }

html.theme-instant .theme-toggle, html.theme-instant .theme-toggle *, html.theme-instant .theme-toggle::before { transition: none !important; }

/* circular reveal from the switch (View Transitions API) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle *, .theme-toggle::before { transition-duration: .01s !important; animation: none !important; }
}