/* ============================================================
   AI BOSS REPORT · SOCIALSIM LAB UNIFIED DESIGN SYSTEM
   Visual-only layer: business IDs, routes and event wiring stay intact.
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #07101d;
  --bg-elev: #101b2d;
  --bg-sidebar: #0b1626;
  --border: rgba(151, 177, 214, .15);
  --border-strong: rgba(151, 177, 214, .27);
  --text: #f2f6fd;
  --text-muted: #9babc1;
  --text-faint: #697b94;
  --accent: #35c7bd;
  --accent-strong: #1ca7a2;
  --accent-soft: rgba(53, 199, 189, .12);
  --blue: #718cff;
  --blue-soft: rgba(113, 140, 255, .13);
  --user-bubble: #17253a;
  --green: #4dd5a5;
  --green-soft: rgba(77, 213, 165, .12);
  --amber: #e9bd63;
  --amber-soft: rgba(233, 189, 99, .12);
  --red: #ff657d;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .30);
}

html, body {
  background:
    radial-gradient(circle at 12% -8%, rgba(80, 111, 236, .20), transparent 31%),
    radial-gradient(circle at 95% 12%, rgba(37, 204, 190, .11), transparent 25%),
    linear-gradient(155deg, #07101d 0%, #091424 52%, #070d17 100%);
  color: var(--text);
}

body:not(.report-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

a { color: #72ddd6; }
a:hover { color: #a1f2ec; text-decoration: none; }

button {
  min-height: 40px;
  border-color: var(--border-strong);
  background: rgba(18, 31, 50, .82);
  color: var(--text);
  border-radius: 10px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
button:hover {
  transform: translateY(-1px);
  background: rgba(25, 42, 66, .94);
  border-color: rgba(139, 164, 255, .45);
}
button:active { transform: translateY(0); }
button:disabled { transform: none; }
button.primary {
  border-color: transparent;
  background: linear-gradient(115deg, #25bdb4, #238aa5);
  box-shadow: 0 10px 26px rgba(29, 157, 160, .22);
  font-weight: 700;
}
button.primary:hover {
  background: linear-gradient(115deg, #37d1c7, #2a9bb5);
  box-shadow: 0 14px 32px rgba(29, 157, 160, .30);
}
button.ghost { color: #a8b7ca; }
button.ghost:hover { background: rgba(118, 143, 183, .10); color: #fff; }

input, textarea, select {
  min-height: 42px;
  color: var(--text);
  background: rgba(5, 11, 20, .60);
  border-color: var(--border-strong);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder { color: #61728a; }
input:hover, textarea:hover, select:hover { border-color: rgba(142, 165, 202, .42); }
input:focus, textarea:focus, select:focus {
  border-color: #63d6cf;
  background: rgba(6, 13, 24, .78);
  box-shadow: 0 0 0 3px rgba(53, 199, 189, .12);
}

:where(button, input, textarea, select, a):focus-visible {
  outline: 2px solid #8edfd9;
  outline-offset: 2px;
}

.topbar {
  height: 62px;
  padding: 0 28px;
  gap: 15px;
  background: rgba(7, 14, 25, .82);
  border-bottom-color: var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;
  color: #f4f8ff;
  letter-spacing: -.01em;
}
.topbar .brand::before {
  content: "";
  width: 29px;
  height: 29px;
  border-radius: 10px;
  border: 1px solid rgba(99, 220, 210, .40);
  background:
    radial-gradient(circle at 38% 38%, #7ee8df 0 3px, transparent 4px),
    radial-gradient(circle at 68% 60%, #8297ff 0 3px, transparent 4px),
    linear-gradient(145deg, rgba(53,199,189,.20), rgba(113,140,255,.16));
  box-shadow: 0 8px 20px rgba(28,139,151,.18);
}
.topbar .muted { color: var(--text-muted); }

.center-wrap { max-width: 1040px; padding: 54px 28px 72px; position: relative; }
.card {
  border-color: var(--border);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(69, 104, 221, .09), transparent 30%),
    linear-gradient(145deg, rgba(17, 29, 48, .96), rgba(10, 19, 33, .97));
  box-shadow: var(--shadow);
}
.h1, .h2 { color: #f4f7fd; }
.lead, .muted { color: var(--text-muted); }
.badge {
  border-color: var(--border);
  background: rgba(8, 16, 28, .64);
  color: #acbbce;
}
.badge.ai { color: #71ddd5; background: rgba(53, 199, 189, .12); }
.badge.no-ai { color: #77dbaa; background: rgba(77, 213, 165, .12); }
.badge.warn { color: #ebc571; background: rgba(233, 189, 99, .12); }
.toast {
  border: 1px solid rgba(157, 180, 216, .20);
  background: rgba(12, 22, 37, .95);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
}

/* ---------- Entry / consent ---------- */
.login-page { min-height: 100%; }
.login-page #appBody {
  min-height: 100vh;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 18px 46px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.login-page .hero {
  text-align: left;
  padding: 24px 0;
  align-self: center;
}
.login-page .hero .logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 0 22px;
  border-radius: 17px;
  font-size: 25px;
  border: 1px solid rgba(96, 221, 211, .42);
  background: linear-gradient(145deg, rgba(48, 191, 185, .18), rgba(100, 127, 246, .18));
  box-shadow: 0 16px 40px rgba(30, 126, 150, .19);
}
.login-page .hero-kicker {
  display: block;
  margin-bottom: 12px;
  color: #8ea2ff;
  font: 800 10px/1.4 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.login-page .hero .h1 {
  max-width: 650px;
  margin: 0 0 15px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.login-page .hero .h1 span {
  color: transparent;
  background: linear-gradient(95deg, #75e3db, #78a1ff 65%, #aa90ff);
  background-clip: text;
  -webkit-background-clip: text;
}
.login-page .hero .lead {
  max-width: 610px;
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 1.8;
}
.hero-flow { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-flow span {
  padding: 7px 10px;
  color: #afbed2;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7, 14, 24, .48);
}
.login-page .login-card {
  width: 100%;
  max-width: 430px;
  margin: 0;
  padding: 30px;
  align-self: center;
}
.login-card::before {
  content: "EXPERIMENT ACCESS";
  display: block;
  margin-bottom: 6px;
  color: #63d6cf;
  font: 800 9px/1.4 var(--mono);
  letter-spacing: .16em;
}
.login-card::after {
  content: "账号、实验条件和任务材料由研究管理员预先分配";
  display: block;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.6;
}
.login-card .field label {
  color: #a9b8ca !important;
  font-size: 12px !important;
}
.login-card .tips {
  margin-top: 18px;
  padding: 12px 13px;
  border: 1px solid rgba(233, 189, 99, .16);
  border-radius: 10px;
  color: #9baabf;
  background: rgba(233, 189, 99, .05);
  line-height: 1.65;
}
.login-card .tips code { color: #9aede7; background: rgba(53,199,189,.10) !important; }
.login-page .admin-link {
  grid-column: 2;
  margin: -3px 0 0;
  text-align: center;
  font-size: 12px;
}
.consent-mask { background: rgba(2, 7, 14, .82) !important; backdrop-filter: blur(14px) !important; }
.consent-box {
  border-color: var(--border-strong) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(48, 196, 185, .10), transparent 30%),
    #0e1a2c !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.55) !important;
}
.consent-box h2 { font-size: 22px !important; }
.consent-box h3 { color: #72ddd6 !important; }
.consent-check {
  border: 1px solid var(--border) !important;
  background: rgba(5, 12, 21, .52) !important;
}
.consent-check input { width: 17px; min-height: 17px; accent-color: var(--accent); }

/* ---------- Task ---------- */
.task-page .center-wrap { max-width: 1000px; }
.task-page .card { padding: 34px; }
.task-page .task-meta { margin-bottom: 26px !important; }
.task-page .h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.3; letter-spacing: -.025em; }
.task-page .task-content {
  border-color: var(--border-strong) !important;
  border-radius: 15px !important;
  background: rgba(5, 12, 22, .56) !important;
  color: #c8d3e2;
  box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.task-page .task-actions { border-top-color: var(--border) !important; }

/* ---------- Questionnaire ---------- */
.questionnaire-page .q-wrap { max-width: 820px; padding-top: 42px; }
.questionnaire-page .q-head { margin-bottom: 23px; }
.questionnaire-page .q-head::before {
  content: "RESEARCH QUESTIONNAIRE";
  display: block;
  margin-bottom: 7px;
  color: #7d92f2;
  font: 800 9px/1.4 var(--mono);
  letter-spacing: .16em;
}
.questionnaire-page .q-head h1 { font-size: 29px; letter-spacing: -.025em; }
.questionnaire-page .q-card {
  padding: 31px 34px;
  border-color: var(--border);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(17,29,48,.96), rgba(9,18,31,.98));
  box-shadow: var(--shadow);
}
.questionnaire-page .q-item { padding: 22px 0; border-bottom-color: var(--border); }
.questionnaire-page .q-text { color: #e8edf5; font-size: 15px; }
.questionnaire-page .q-options label {
  border-color: var(--border);
  background: rgba(7, 15, 26, .55);
  color: #b9c6d7;
  border-radius: 11px;
}
.questionnaire-page .q-options label:hover {
  border-color: rgba(91, 211, 202, .38);
  background: rgba(16, 31, 49, .84);
}
.questionnaire-page .q-options:not(.scale) label:has(input:checked) {
  border-color: rgba(70, 215, 204, .72);
  background: rgba(53, 199, 189, .12);
}
.questionnaire-page .q-options:not(.scale) label:has(input:checked) span { color: #82e6df; }
.questionnaire-page .q-options.scale label:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(135deg, #31bdb4, #377f9e);
  box-shadow: 0 8px 20px rgba(26, 142, 148, .25);
}
.questionnaire-page .q-item textarea { background: rgba(5,11,20,.62); border-color: var(--border-strong); }

/* ---------- Completion ---------- */
.success-page { display: grid; place-items: center; min-height: 100%; }
.success-page .ok-wrap { width: min(100% - 28px, 560px); padding: 50px 0; }
.success-page .ok-icon {
  background: linear-gradient(135deg, #38cfb4, #477fba) !important;
  box-shadow: 0 18px 46px rgba(37, 177, 166, .28) !important;
}
.success-page .ok-wrap h1 { font-size: 30px; letter-spacing: -.025em; }
.success-page .ok-card {
  border-color: var(--border) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(17,29,48,.94), rgba(9,18,31,.96)) !important;
  box-shadow: var(--shadow);
}
.success-page .ok-card .row { border-bottom-color: var(--border) !important; }

/* ---------- AI chat ---------- */
.chat-page {
  --bg: #07101d;
  --bg-elev: #101c2f;
  --bg-sidebar: #0a1525;
  --border: rgba(151,177,214,.14);
  --border-strong: rgba(151,177,214,.25);
  --text: #f2f6fd;
  --text-muted: #9babc1;
  --text-faint: #687b94;
  --accent: #35c7bd;
  --accent-soft: rgba(53,199,189,.12);
  --user-bubble: #16243a;
}
.chat-page .topbar { flex-basis: 62px; }
.chat-sidebar {
  width: 350px;
  flex-basis: 350px;
  padding: 22px 18px;
  border-right-color: var(--border);
  background:
    radial-gradient(circle at 0 0, rgba(93, 116, 234, .10), transparent 32%),
    rgba(8, 17, 30, .94);
}
.sb-sec .label {
  color: #7487a1;
  font: 750 9px/1.4 var(--mono);
  letter-spacing: .14em;
}
.task-card {
  border-color: var(--border);
  border-radius: 14px;
  background: rgba(11, 23, 39, .82);
}
.task-head { border-bottom-color: var(--border); background: rgba(15, 29, 47, .86); }
.task-code { color: #78ddd6; background: rgba(53,199,189,.11); border-radius: 7px; }
.task-body { color: #adbbce; }
.chat-main {
  background:
    radial-gradient(circle at 70% 0, rgba(50, 188, 181, .06), transparent 28%),
    #081220;
}
.chat-header {
  min-height: 59px;
  padding: 12px 30px;
  border-bottom-color: var(--border);
  background: rgba(8, 17, 30, .64);
  backdrop-filter: blur(12px);
}
.chat-header .title { font-size: 15px; }
.model-picker select { background: rgba(12, 25, 42, .9); border-color: var(--border); }
.chat-scroll { padding-top: 30px; }
.chat-inner { max-width: 820px; }
.msg { margin-bottom: 26px; }
.avatar { width: 30px; height: 30px; border-radius: 10px; }
.avatar.assistant { color: #74e0d8; background: linear-gradient(145deg, rgba(53,199,189,.18), rgba(60,125,162,.16)); }
.avatar.user { color: #bdc9da; background: rgba(113,140,255,.14); }
.msg-body { color: #cad4e2; padding-left: 41px; }
.empty-chat {
  max-width: 600px;
  margin: 40px auto;
  padding: 42px 28px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(12, 24, 40, .56);
}
.suggest button { border-color: var(--border); background: rgba(14,28,46,.78); }
.chat-input-wrap {
  padding: 18px 30px 23px;
  border-top-color: var(--border);
  background: linear-gradient(180deg, rgba(8,18,32,.86), #07101d);
}
.chat-input-inner { max-width: 820px; }
.chat-input-box {
  min-height: 58px;
  border-color: var(--border-strong);
  border-radius: 16px;
  background: rgba(13, 26, 43, .96);
  box-shadow: 0 16px 42px rgba(0,0,0,.22);
}
.chat-input-box:focus-within {
  border-color: rgba(76, 220, 210, .66);
  box-shadow: 0 0 0 3px rgba(53,199,189,.10), 0 16px 42px rgba(0,0,0,.25);
}
.send-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #35c7bd, #3585a3);
  box-shadow: 0 7px 18px rgba(33,154,158,.25);
}

/* ---------- Live report room ---------- */
body.report-page {
  --bg: #050b14;
  --bg-elev: #0e1929;
  --bg-sidebar: #091321;
  --border: rgba(151,177,214,.15);
  --border-strong: rgba(151,177,214,.26);
  --text: #f1f5fc;
  --text-muted: #9aaac0;
  --text-faint: #667991;
  --accent: #35c7bd;
  --green: #4dd5a5;
  --amber: #e9bd63;
  --red: #ff637b;
}
.report-layout {
  background:
    radial-gradient(900px 500px at 16% -10%, rgba(87, 112, 238, .14), transparent 62%),
    radial-gradient(800px 480px at 96% 106%, rgba(37, 203, 190, .10), transparent 62%),
    #050b14;
}
.meet-top {
  height: 62px;
  flex-basis: 62px;
  padding: 0 24px;
  border-bottom-color: var(--border);
  background: rgba(5, 11, 20, .78);
}
.meet-top .brand::before { background: #35c7bd; box-shadow: 0 0 14px rgba(53,199,189,.72); }
.meet-top .rec { background: rgba(255, 99, 123, .10); }
.boss-tile {
  width: min(680px, 64vw);
  border-color: var(--border-strong);
  border-radius: 24px;
  background:
    radial-gradient(100% 82% at 50% 16%, #26364b 0%, #121e2f 57%, #0a1321 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.04);
}
.boss-tile.speaking {
  border-color: rgba(53,199,189,.62);
  box-shadow: 0 30px 80px rgba(0,0,0,.52), 0 0 0 4px rgba(53,199,189,.10), 0 0 80px rgba(53,199,189,.19);
}
.tile-tag.host { color: #8fe8e1; border-color: rgba(53,199,189,.30); }
.tile-status.speaking .dot { background: var(--accent); box-shadow: 0 0 9px rgba(53,199,189,.75); }
.self-tile {
  border-color: var(--border-strong);
  background: radial-gradient(circle at 50% 30%, #1c2c42, #0c1625);
}
.live-caption {
  border-color: rgba(166,187,218,.12);
  background: rgba(3,8,15,.67);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
}
.meet-dock {
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 0 auto max(16px, env(safe-area-inset-bottom));
  padding: 10px 14px 9px;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(151,177,214,.20);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(18,32,52,.95), rgba(8,17,29,.97));
  box-shadow: 0 22px 56px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.meet-dock .dock-group { min-width: 58px; gap: 6px; }
.meet-dock .dock-group.main { min-width: 76px; }
.meet-dock .spacer-group { display: none; }
.control-icon {
  width: 21px;
  height: 21px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock-btn,
.mic-btn {
  display: grid;
  place-items: center;
  padding: 0;
  color: #cad6e6;
  border: 1px solid rgba(151,177,214,.22);
  background: linear-gradient(145deg, rgba(27,45,70,.96), rgba(17,30,49,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.22);
}
.dock-btn {
  width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 14px;
}
.dock-btn:hover,
.mic-btn:hover {
  color: #fff;
  border-color: rgba(108,226,216,.44);
  background: linear-gradient(145deg, rgba(35,58,86,.98), rgba(21,39,62,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 11px 26px rgba(0,0,0,.28);
}
.dock-btn:active,
.mic-btn:active { transform: translateY(0) scale(.96); }
.mic-btn {
  width: 58px;
  height: 58px;
  min-height: 58px;
  border-radius: 19px;
  color: #eafffd;
  border-color: rgba(80,224,213,.46);
  background: linear-gradient(145deg, #2cc4b9, #237d9b);
  box-shadow: 0 13px 30px rgba(29,151,156,.28), inset 0 1px rgba(255,255,255,.18);
}
.mic-btn:hover {
  border-color: rgba(143,245,237,.75);
  background: linear-gradient(145deg, #38d2c6, #2c91ad);
  box-shadow: 0 16px 36px rgba(29,151,156,.35), inset 0 1px rgba(255,255,255,.22);
}
.mic-btn.recording {
  border-color: rgba(255,132,151,.78);
  background: linear-gradient(145deg, #ff667e, #ca3f59);
}
.mic-btn:disabled,
.mic-btn:disabled:hover {
  color: #74859b;
  border-color: rgba(151,177,214,.15);
  background: rgba(25,40,61,.72);
  box-shadow: none;
  transform: none;
}
.mic-icon { display: grid; place-items: center; }
.mic-icon .control-icon { width: 24px; height: 24px; stroke-width: 1.9; }
.dock-btn.end {
  color: #ff9aaa;
  border-color: rgba(255,101,125,.32);
  background: rgba(255,101,125,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.dock-btn.end:hover {
  color: #fff;
  border-color: rgba(255,112,135,.74);
  background: linear-gradient(145deg, #f65c75, #c93d56);
  box-shadow: 0 12px 28px rgba(211,59,84,.30);
}
.dock-label {
  color: #8091a9;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
}
.dock-label.end-l { color: #e77a8d; }
.mode-switch {
  height: 46px;
  padding: 4px;
  border-color: rgba(151,177,214,.20);
  border-radius: 14px;
  background: rgba(6,14,24,.66);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.20);
}
.mode-switch button {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 650;
}
.mode-switch button:hover { transform: none; background: rgba(99,126,170,.10); }
.mode-switch button.active {
  background: linear-gradient(135deg, rgba(53,199,189,.94), rgba(54,119,158,.95));
  box-shadow: 0 7px 18px rgba(25,132,143,.22);
}
.report-send-btn {
  min-width: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.report-send-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panel-close-btn {
  width: 34px;
  height: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
}
.panel-close-btn .control-icon { width: 18px; height: 18px; }
.prep-start,
.prep-start:disabled:hover {
  color: #041514;
  border: 1px solid transparent;
  background: linear-gradient(135deg, #6fe0d8, #35b9b0);
}
.prep-start:not(:disabled):hover {
  color: #02110f;
  border-color: rgba(160,255,247,.48);
  background: linear-gradient(135deg, #86eee7, #43c8be);
  box-shadow: 0 16px 36px rgba(53,199,189,.30);
}
.transcript-panel { background: rgba(8,17,29,.98); border-left-color: var(--border); }

/* ---------- Admin research console ---------- */
.admin-page {
  --bg: #07101d;
  --bg-elev: #101b2d;
  --bg-sidebar: #0b1626;
}
#adminGate {
  background:
    radial-gradient(circle at 20% 0, rgba(81,109,230,.20), transparent 33%),
    radial-gradient(circle at 90% 80%, rgba(42,204,190,.10), transparent 28%),
    #07101d !important;
  backdrop-filter: blur(10px);
}
#adminGate > div {
  width: min(390px, calc(100% - 28px)) !important;
  padding: 32px !important;
  border-color: var(--border-strong) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(18,31,51,.97), rgba(9,18,31,.98)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.48) !important;
}
.admin-wrap { max-width: 1320px; padding: 28px; position: relative; }
.tabs {
  position: sticky;
  top: 62px;
  z-index: 8;
  gap: 5px;
  margin-bottom: 24px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(8,17,29,.86);
  backdrop-filter: blur(14px);
}
.tabs button {
  min-height: 38px;
  padding: 8px 15px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 9px;
}
.tabs button.active {
  color: #eafffd;
  border-color: rgba(53,199,189,.26);
  background: linear-gradient(135deg, rgba(53,199,189,.18), rgba(55,111,162,.16));
}
.tab-panel { padding: 2px; }
.toolbar {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(11,23,39,.64);
}
.add-form {
  padding: 18px !important;
  border-color: var(--border) !important;
  border-radius: 15px !important;
  background: rgba(11,23,39,.72) !important;
}
.tbl {
  border-collapse: separate;
  border-spacing: 0;
  border-color: var(--border);
  border-radius: 14px;
  background: rgba(11,23,39,.72);
}
.tbl th {
  color: #8496ad;
  border-bottom-color: var(--border);
  background: rgba(16,31,50,.94);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tbl td { border-bottom-color: var(--border); }
.tbl tr:hover td { background: rgba(92,119,168,.08); }
.task-card, .status-card, .cfg-sec {
  border-color: var(--border) !important;
  border-radius: 14px !important;
  background: rgba(11,23,39,.72) !important;
}
.task-card .tc-content { background: rgba(5,12,22,.52) !important; }
.cfg-sec .cfg-head { color: #6fddd5; }
.drawer {
  width: 620px;
  border-left: 1px solid var(--border);
  background: #081321;
  box-shadow: -28px 0 80px rgba(0,0,0,.42);
}
.drawer-backdrop { background: rgba(1,5,10,.66); backdrop-filter: blur(5px); }
.drawer-head { border-bottom-color: var(--border); }
.msg-row .body { border-color: var(--border); background: rgba(14,28,46,.78); }
.seg { border-color: var(--border); background: rgba(5,12,22,.56); }
.seg button.active { background: linear-gradient(135deg, #31bdb4, #347f9e); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .login-page #appBody {
    max-width: 680px;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 18px;
  }
  .login-page .hero { padding-bottom: 4px; }
  .login-page .hero .h1 { font-size: clamp(38px, 10vw, 56px); }
  .login-page .login-card { max-width: none; }
  .login-page .admin-link { grid-column: 1; }
  .admin-wrap { padding: 18px; }
  .add-form { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .tab-panel { overflow-x: auto; }
  .tbl { min-width: 840px; }
}

@media (max-width: 760px) {
  .topbar { height: 54px; padding: 0 13px; gap: 9px; }
  .topbar .brand::before { width: 25px; height: 25px; border-radius: 8px; }
  .topbar .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .center-wrap { padding: 24px 12px 44px; }
  .card { padding: 20px; border-radius: 16px; }
  input, textarea, select { font-size: 16px; }
  .task-page .card { padding: 18px; }
  .task-page .task-content { padding: 18px 16px !important; font-size: 14px !important; }
  .task-page .task-actions { align-items: stretch !important; flex-direction: column; gap: 12px; }
  .task-page .task-actions button { width: 100%; }
  .questionnaire-page .q-wrap { padding: 26px 12px 46px; }
  .questionnaire-page .q-card { padding: 20px 15px; border-radius: 16px; }
  .questionnaire-page .q-head h1 { font-size: 24px; }
  .questionnaire-page .q-submit button { width: 100%; }
  .chat-page .topbar { flex-basis: 54px; height: 54px; }
  .chat-sidebar { width: 100%; padding-top: 9px; padding-bottom: 9px; background: rgba(8,17,29,.96); }
  .chat-header { padding: 10px 13px; }
  .chat-header .sub { display: none; }
  .model-picker span { display: none; }
  .model-picker select { max-width: 145px; font-size: 12px; }
  .chat-scroll { padding-top: 16px; }
  .chat-inner { padding: 0 15px; }
  .msg-body { padding-left: 0; margin-top: 9px; font-size: 14px; }
  .chat-input-wrap { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .input-hint { font-size: 10px; }
  .meet-top { height: 54px; flex-basis: 54px; padding: 0 12px; }
  .meet-info { display: none !important; }
  .meet-stage { padding: 14px 8px; }
  .boss-tile { width: min(94vw, 600px); border-radius: 18px; }
  .self-tile { width: 108px; padding: 12px 8px 10px; }
  .mode-switch button { padding: 6px 8px; }
  .meet-dock {
    width: calc(100% - 20px);
    max-width: 560px;
    margin-bottom: max(10px, env(safe-area-inset-bottom));
    padding: 9px 8px 8px;
    justify-content: space-around;
    gap: 3px;
    border-radius: 18px;
  }
  .meet-dock .dock-group { min-width: 48px; }
  .meet-dock .dock-group.main { min-width: 62px; }
  .dock-btn { width: 42px; height: 42px; min-height: 42px; border-radius: 13px; }
  .mic-btn { width: 54px; height: 54px; min-height: 54px; border-radius: 18px; }
  .mode-switch { height: 42px; }
  .mode-switch button { min-height: 32px; padding: 5px 8px; font-size: 10.5px; }
  .dock-label { font-size: 9px; }
  .transcript-panel { top: 54px; width: min(92vw, 360px); }
  .admin-wrap { padding: 13px 10px 36px; }
  .tabs { top: 54px; margin-bottom: 15px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .spacer { display: none; }
  .toolbar select, .toolbar button { width: 100%; }
  .add-form { grid-template-columns: 1fr !important; }
  .grid5 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .login-page #appBody { padding: 24px 12px 38px; }
  .login-page .hero { padding-top: 6px; }
  .login-page .hero .logo { width: 46px; height: 46px; margin-bottom: 16px; }
  .login-page .hero .h1 { font-size: 38px; }
  .login-page .hero-flow { gap: 6px; }
  .login-page .login-card { padding: 22px 18px; }
  .consent-box { padding: 22px 18px !important; }
  .consent-actions { flex-direction: column-reverse; }
  .meet-top .rec { display: none; }
  .dock-spacer { width: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}