/* RS Training portal — Rakta Sanjeevani brand: navy, gold, cream (with red and leaf green for states). */
:root {
  --navy: #0B1F4B; --navy-deep: #07153a; --navy-soft: #e2e7f3;
  --red: #c71e1e; --red-soft: #fbe2e2; --gold: #C29A45; --gold-light: #f0cf7a; --gold-soft: #fbf1d9;
  --leaf: #2e7d4f; --leaf-soft: #ddefe3;
  --bg: #f6f3ec; --paper: #ffffff; --ink: #1b1d2e; --mute: #5f6275; --line: #e2e3ec; --line-strong: #c9cbda;
  --chip: #eef0f7; --focus: #4a55c9;
  --radius: 14px; --shadow: 0 1px 2px rgba(20, 23, 74, .06), 0 4px 16px rgba(20, 23, 74, .05);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101226; --paper: #191b33; --ink: #ecedf6; --mute: #a3a6be; --line: #2c2f4c; --line-strong: #3e4160; --chip: #242742;
    --navy-soft: #2e3375; --red-soft: #4a1a22; --gold-soft: #3f3014; --leaf-soft: #1f4a33; --focus: #b9bef5;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--navy); }
@media (prefers-color-scheme: dark) { a { color: #b9bef5; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 18px; } h3 { font-size: 16px; }
p { margin: 6px 0; }
small { font-size: 12.5px; }
.muted { color: var(--mute); } .small { font-size: 13px; } .center { text-align: center; } .red { color: var(--red); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------- layout ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 252px; flex: none; background: linear-gradient(180deg, var(--navy-deep), var(--navy) 70%, #17306d); color: #fff;
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; color: #fff; text-decoration: none; }
.brand img { border-radius: 50%; background: #fff; }
.brand strong { display: block; font-size: 18px; letter-spacing: .01em; }
.brand small { color: var(--gold-light); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.nav-scroll { overflow-y: auto; flex: 1; padding: 4px 10px 12px; scrollbar-width: thin; }
.nav-group { margin-top: 10px; }
.nav-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255, 255, 255, .5); padding: 6px 10px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: rgba(255, 255, 255, .86); text-decoration: none; font-size: 14px; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.on { background: rgba(240, 207, 122, .16); color: #fff; box-shadow: inset 3px 0 0 var(--gold-light); }
.nav-item svg { flex: none; opacity: .9; }
.nav-item span:first-of-type { flex: 1; }
.nav-count { background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.nav-foot { padding: 14px 18px 18px; color: rgba(255,255,255,.6); font-size: 11.5px; border-top: 1px solid rgba(255, 255, 255, .1); }
.nav-logo { width: 100%; max-width: 190px; opacity: .9; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-title { font-size: 13px; color: var(--mute); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { text-align: right; line-height: 1.2; } .who strong { display: block; font-size: 14px; } .who small { color: var(--mute); }
.sync-state { display: inline-flex; align-items: center; gap: 4px; }
.sync-state.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.menu-btn { display: none; }
.content { padding: 24px 28px 64px; max-width: 1280px; width: 100%; outline: none; }

/* ---------- page ---------- */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-titles { flex: 1; min-width: 240px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--mute); text-decoration: none; margin-bottom: 6px; }
.back-link:hover { color: var(--ink); }
.eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); font-weight: 700; }
.eyebrow.light { color: var(--gold-light); }
.sub { color: var(--mute); margin: 4px 0 0; }
.page-body > * + * { margin-top: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px !important; flex-wrap: wrap; }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }

/* ---------- cards ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: block; color: inherit; text-decoration: none; }
.card > * + * { margin-top: 10px; }
.card.click { cursor: pointer; transition: border-color .15s, transform .15s; }
.card.click:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.card-title { font-size: 16px; margin-bottom: 4px; }
.accent-red { box-shadow: inset 4px 0 0 var(--red), var(--shadow); }
.accent-gold { box-shadow: inset 4px 0 0 var(--gold), var(--shadow); }
.accent-green { box-shadow: inset 4px 0 0 var(--leaf), var(--shadow); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards-2 > .card, .cards-3 > .card { margin: 0; }
.hero-card { display: flex; align-items: center; gap: 24px; padding: 22px 26px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(240, 207, 122, .22), transparent 50%), linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #3a2368); }
.hero-left { flex: 1; } .hero-left p { color: rgba(255, 255, 255, .82); }
.hero-big { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 4px 0 8px; }
.hero-big.dark { color: var(--ink); font-size: 34px; }
.hero-card .bar { background: rgba(255, 255, 255, .18); }
.hero-card .ring-track { stroke: rgba(255, 255, 255, .18); } .hero-card .ring-text strong { color: #fff; } .hero-card .ring-text small { color: rgba(255, 255, 255, .7); }
.big-num { font-size: 28px; font-weight: 800; text-align: right; line-height: 1; } .big-num small { display: block; font-size: 12px; font-weight: 500; color: var(--mute); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); font: inherit; color: inherit; }
button.stat { cursor: pointer; } button.stat:hover { border-color: var(--line-strong); }
.stat-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.stat-val { font-size: 24px; font-weight: 800; line-height: 1.1; } .stat-label { color: var(--mute); font-size: 13px; }
.stat.leaf .stat-icon { background: var(--leaf-soft); color: var(--leaf); } .stat.red .stat-icon { background: var(--red-soft); color: var(--red); }
.stat.gold .stat-icon { background: var(--gold-soft); color: var(--gold); } .stat.navy .stat-icon { background: var(--navy-soft); color: var(--navy); }
@media (prefers-color-scheme: dark) { .stat.navy .stat-icon { color: #b9bef5; } }

/* ---------- bars, rings, pills ---------- */
.bar { height: 8px; border-radius: 99px; background: var(--chip); overflow: hidden; flex: 1; min-width: 60px; }
.bar.small { height: 6px; }
.bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--chip); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--gold); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.ring-text { position: absolute; text-align: center; line-height: 1.1; } .ring-text strong { font-size: 20px; display: block; } .ring-text small { color: var(--mute); font-size: 11px; display: block; max-width: 70px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.pill.good { background: var(--leaf-soft); color: var(--leaf); } .pill.warm { background: var(--gold-soft); color: #7a5718; }
.pill.bad { background: var(--red-soft); color: var(--red); } .pill.mute { background: var(--chip); color: var(--mute); }
@media (prefers-color-scheme: dark) { .pill.good { color: #bfe3cc; } .pill.warm { color: var(--gold-light); } .pill.bad { color: #ffd9de; } }

/* ---------- buttons, chips, inputs ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.3; transition: background .15s, border-color .15s; }
.btn.primary { background: var(--navy); color: #fff; } .btn.primary:hover { background: var(--navy-deep); }
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); } .btn.ghost:hover { border-color: var(--navy); }
.btn.danger { background: var(--red); color: #fff; } .btn.ghost.danger { background: var(--paper); color: var(--red); border-color: var(--red); }
.btn.small { padding: 4px 10px; font-size: 13px; } .btn.big { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }
.btn:disabled, .btn.disabled, .btn[aria-disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn.busy { opacity: .7; cursor: progress; }
@media (prefers-color-scheme: dark) { .btn.primary { background: #3d44a8; } }
.btn-row, .row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.icon-btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 6px; border-radius: 8px; font-size: 20px; line-height: 1; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--chip); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.on { background: #3d44a8; border-color: #3d44a8; } }
input, select, textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
textarea { resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .label { font-weight: 600; font-size: 13.5px; }
.field .hint { font-size: 12.5px; color: var(--mute); }
.field.inline { min-width: 180px; }
.field.ro .ro-value { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid .form-section { grid-column: 1 / -1; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.form-grid .form-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.form-grid .field:has(.chips), .form-grid .field.wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.search { position: relative; flex: 1; min-width: 240px; max-width: 520px; display: flex; align-items: center; }
.search svg { position: absolute; left: 11px; color: var(--mute); } .search input { padding-left: 34px; }

/* ---------- tables ---------- */
.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--chip) 55%, var(--paper)); white-space: nowrap; }
table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr.click { cursor: pointer; } table.data tr.click:hover td { background: color-mix(in srgb, var(--navy-soft) 35%, transparent); }
table.data td small { display: block; color: var(--mute); }
table.data .num { text-align: right; white-space: nowrap; }
table.data td input { min-width: 120px; }
.cell-main { display: flex; align-items: center; gap: 10px; }
.cell-bar { display: flex; align-items: center; gap: 8px; min-width: 120px; } .cell-bar > span:last-child { font-size: 13px; font-weight: 600; min-width: 36px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--navy); background: var(--navy-soft); }
@media (prefers-color-scheme: dark) { .avatar { color: #e3e5f4; } }

/* ---------- misc ---------- */
.banner { padding: 11px 14px; border-radius: 12px; font-size: 14px; border: 1px solid; }
.banner.info { background: var(--navy-soft); border-color: color-mix(in srgb, var(--navy) 18%, transparent); }
.banner.warn { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.banner.bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); }
.banner.good { background: var(--leaf-soft); border-color: color-mix(in srgb, var(--leaf) 30%, transparent); }
@media (prefers-color-scheme: dark) { .banner.bad { color: #ffd9de; } }
.empty { text-align: center; padding: 40px 16px; color: var(--mute); background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty h3 { color: var(--ink); margin-top: 8px; }
.info-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 18px; }
.info { display: flex; flex-direction: column; } .info span { font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; } .info strong { font-weight: 600; word-break: break-word; }
.todo { list-style: none; padding: 0; margin: 0; }
.todo li a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.todo li:last-child a { border-bottom: 0; } .todo li a:hover { color: var(--navy); } .todo svg { color: var(--gold); }
.line-list { display: flex; flex-direction: column; }
.line-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.line-row:last-child { border-bottom: 0; } .line-row > div:first-child { flex: 1; } .line-row small { display: block; color: var(--mute); }
.line-bar { display: flex; align-items: center; gap: 8px; width: 160px; } .line-bar span { font-weight: 700; font-size: 13px; width: 38px; text-align: right; }
.line-card h3 { font-size: 16px; }
.member { padding: 14px 16px; }
.member-head { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.member-head small { display: block; color: var(--mute); } .member-head svg { color: var(--mute); }
.ent-level .eyebrow { margin-bottom: 6px; }
.ent-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ent-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.ent-chip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ent-chip small { opacity: .75; font-size: 11.5px; }
.ent-chip.good { background: var(--leaf-soft); color: var(--leaf); } .ent-chip.warm { background: var(--gold-soft); color: #7a5718; }
.ent-chip.bad { background: var(--red-soft); color: var(--red); } .ent-chip.mute { background: var(--chip); color: var(--mute); }
@media (prefers-color-scheme: dark) { .ent-chip.good { color: #bfe3cc; } .ent-chip.warm { color: var(--gold-light); } .ent-chip.bad { color: #ffd9de; } }
.hh-top { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.stepper { list-style: none; display: flex; padding: 0; margin: 4px 0 0; gap: 0; }
.stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--mute); position: relative; text-align: center; }
.stepper li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); font-size: 12px; font-weight: 700; z-index: 1; }
.stepper li::before { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--chip); }
.stepper li:first-child::before { display: none; }
.stepper li.done span { background: var(--leaf); color: #fff; } .stepper li.done::before { background: var(--leaf); }
.stepper li.now { color: var(--ink); font-weight: 700; }
.bars { display: flex; flex-direction: column; gap: 14px; } .bar-row small { display: block; margin-top: 4px; }
.score-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .score-row input { flex: 1; min-width: 200px; }
.quiz-opts { margin: 6px 0; padding-left: 18px; } .quiz-opts li.right { color: var(--leaf); font-weight: 700; }
.handover { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 14px; background: var(--gold-soft); border-radius: 12px; font-size: 18px; }
.handover span { color: var(--mute); font-size: 14px; align-self: center; }
details.lib summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
details.lib summary::-webkit-details-marker { display: none; }
details.lib summary strong { flex: 1; } .lib-block { margin-top: 10px; }
.preview img { max-width: 100%; max-height: 260px; border-radius: 10px; border: 1px solid var(--line); }
.loading { min-height: 100vh; display: grid; place-content: center; text-align: center; color: var(--mute); }
.loading img { border-radius: 50%; margin: 0 auto 12px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- dialogs & toasts ---------- */
.scrim { position: fixed; inset: 0; background: rgba(12, 14, 40, .45); display: grid; place-items: center; padding: 16px; z-index: 100; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.dialog { background: var(--paper); border-radius: 18px; width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.dialog.wide { width: min(860px, 100%); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.dialog-body { padding: 8px 20px 12px; overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
#toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: opacity .4s, transform .4s; max-width: 90vw; }
.toast.good { background: var(--leaf); color: #fff; } .toast.bad { background: var(--red); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- sign in ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-hero { color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background: radial-gradient(100% 80% at 90% 10%, rgba(240, 207, 122, .25), transparent 55%), linear-gradient(135deg, var(--navy-deep), var(--navy) 55%, #3a2368); }
.login-badge { border-radius: 50%; background: #fff; padding: 6px; }
.login-logo { width: 280px; max-width: 80%; margin-top: 10px; }
.tagline { color: rgba(255, 255, 255, .75); margin: 0; }
.login-project { margin-top: 26px; display: flex; flex-direction: column; }
.login-project small { color: var(--gold-light); letter-spacing: .14em; font-size: 12px; font-weight: 700; }
.login-project strong { font-size: 52px; line-height: 1.05; letter-spacing: -.02em; }
.login-project span { font-size: 18px; color: rgba(255, 255, 255, .85); }
.login-art { flex: 1; display: grid; place-items: center; min-height: 220px; padding: 12px 0; }
.login-art img { width: 100%; max-width: 620px; max-height: 46vh; }
.login-foot { margin-top: auto; padding-top: 32px; font-size: 13px; color: rgba(255, 255, 255, .55); }
.login-side { display: grid; place-items: center; padding: 32px; }
.login-card { width: min(380px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.login-card h2 { font-size: 22px; }

/* ---------- small screens ---------- */

/* ---------- field work: survey, visits, map ---------- */
.row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.wrap { flex-wrap: wrap; }
ul.plain { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.mini-title { font-size: 13px; margin: 12px 0 2px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tile-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.tile-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile-link small { color: var(--mute); }
.tile-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-soft, #e7e8f6); color: var(--navy); margin-bottom: 6px; }
.tile-go { margin-top: 8px; font-weight: 600; color: var(--navy); font-size: 14px; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.quick .tile-link { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.quick .tile-ic { margin: 0; flex: none; }
.quick strong { display: block; } .quick small { display: block; font-size: 12.5px; }
.wizard-head { background: linear-gradient(135deg, var(--navy-deep, #1b1f55), var(--navy) 60%, #3a2368); color: #fff; border: 0; }
.wizard-head .eyebrow { color: var(--gold-light); } .wizard-head h2 { font-size: 26px; margin: 2px 0; } .wizard-head .muted { color: rgba(255,255,255,.75); }
.wizard-head .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
.wizard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wizard-head .stepper li { color: rgba(255,255,255,.7); } .wizard-head .stepper li.now { color: #fff; }
.wizard-head .stepper li span { background: rgba(255,255,255,.2); color: #fff; } .wizard-head .stepper li::before { background: rgba(255,255,255,.2); }
.wizard-head .stepper li.done span { background: var(--gold-light); color: var(--navy-deep, #1b1f55); } .wizard-head .stepper li.done::before { background: var(--gold-light); }
.wizard-bar { margin-top: 14px; } .wizard-bar .bar { background: rgba(255,255,255,.18); }
.wizard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; margin-top: 16px; }
.wizard-grid aside { position: sticky; top: 76px; }
.form-actions.sticky { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 8px; display: flex; justify-content: flex-end; gap: 10px; z-index: 5; }
.needs-card.has { border-left: 4px solid var(--red); } .needs-card.none { border-left: 4px solid var(--leaf); }
.check-row { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .check-row input { margin-top: 4px; width: 18px; height: 18px; }
.check-row small { display: block; color: var(--mute); }
.done-card { display: flex; align-items: center; gap: 14px; border-left: 4px solid var(--leaf); } .done-card > svg { color: var(--leaf); }
.done-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px; }
.done-hero img { border-radius: 50%; background: #fff; padding: 4px; }
.doc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .doc-row span { flex: 1; }
.doc-row:first-of-type { border-top: 0; }
.visit-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--line-strong); }
.visit-card.now { border-left-color: var(--leaf); } .visit-card:hover { box-shadow: var(--shadow); }
.visit-card small.muted { display: block; font-size: 12.5px; }
.lvl { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; background: var(--gold-soft); color: #7a5718; }
.map-card { padding: 10px; }
.line-map { width: 100%; height: auto; display: block; background: linear-gradient(180deg, color-mix(in srgb, var(--leaf-soft) 55%, transparent), transparent); border-radius: 12px; }
.line-map .grid { stroke: var(--line); stroke-width: 1; }
.line-map .fence { fill: color-mix(in srgb, var(--gold) 12%, transparent); stroke: var(--gold); stroke-dasharray: 4 4; }
.line-map .hub { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.line-map .home { stroke: #fff; stroke-width: 2; cursor: pointer; transition: r .15s; } .line-map a:hover .home { r: 10; }
.line-map .home.low { fill: var(--red); } .line-map .home.mid { fill: var(--gold); } .line-map .home.good { fill: var(--leaf); } .line-map .home.none { fill: var(--mute); }
.map-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 6px 2px; font-size: 13px; color: var(--mute); }
.map-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.map-legend i.low { background: var(--red); } .map-legend i.mid { background: var(--gold); } .map-legend i.good { background: var(--leaf); } .map-legend i.hubk { background: var(--navy); }
@media (max-width: 1000px) { .wizard-grid { grid-template-columns: 1fr; } .wizard-grid aside { position: static; } }
@media print { .wizard-head, .form-actions.sticky { display: none; } }

@media (max-width: 1100px) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
  .menu-btn { display: inline-grid; } .top-title { display: none; }
  .content { padding: 18px 16px 48px; }
  .grid-2, .cards-2, .cards-3, .hh-top, .form-grid { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; } .login-hero { padding: 32px 24px; } .login-project strong { font-size: 40px; }
  .hero-card { flex-direction: column; align-items: stretch; }
  .who { display: none; }
}

/* ---------- printing QR cards ---------- */
#print-sheet { display: none; }
@media print {
  body.printing > *:not(#print-sheet) { display: none !important; }
  body.printing #print-sheet { display: block; }
  @page { size: A4; margin: 10mm; }
  .print-page { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; page-break-after: always; }
  .qr-card { border: 1.5px solid #c99a2e; border-radius: 4mm; height: 64mm; overflow: hidden; font: 10pt/1.3 Arial, sans-serif; color: #221a17; break-inside: avoid; }
  .qr-head { background: #262b6a; color: #fff; font-weight: 700; font-size: 9.5pt; padding: 2mm 3mm; display: flex; align-items: center; gap: 2mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qr-head img { width: 6mm; height: 6mm; border-radius: 50%; background: #fff; }
  .qr-body { display: flex; gap: 3mm; padding: 3mm; }
  .qr-body > div:first-child { flex: 1; display: flex; flex-direction: column; gap: .6mm; }
  .qr-body strong { font-size: 12.5pt; } .qr-body span { font-size: 8.5pt; color: #5a504c; }
  .qr-body em { margin-top: 3mm; font-size: 8.5pt; font-style: normal; } .qr-body b { color: #c71e1e; font-size: 8.5pt; } .qr-body small { font-size: 7pt; color: #5f6275; }
  .qr-img { width: 34mm; height: 34mm; flex: none; } .qr-img svg { width: 100%; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* real map */
.real-map { width: 100%; height: min(68vh, 640px); min-height: 380px; border-radius: 12px; overflow: hidden; background: #1c2048; }
.real-map .leaflet-popup-content { font: 13px/1.45 inherit; color: #141739; }
.real-map .leaflet-popup-content a { color: #3b2f7a; font-weight: 700; }
.real-map .leaflet-control-layers, .real-map .leaflet-bar a { color: #141739; }

/* v1.3 impact & management */
.impact-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .impact-hero { grid-template-columns: 1fr; } }
.value-card { background: linear-gradient(135deg, #1d2160, #3b2f7a); color: #fff; }
.value-card .eyebrow { color: #f2c35b; }
.value-big { font-family: inherit; font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: #f2c35b; line-height: 1.05; margin: 6px 0; }
.value-card p { color: #dfe2ff; margin: 0 0 12px; }
.value-row { display: flex; flex-wrap: wrap; gap: 18px; }
.value-card .info span { color: #c7cbef; } .value-card .info strong { color: #fff; }
.pair-bars { display: grid; gap: 12px; } .pair { display: flex; height: 12px; border-radius: 6px; background: var(--line); overflow: hidden; margin-top: 4px; }
.pair .base { background: var(--navy); } .pair .now { background: var(--gold); }
.mini-chart { width: 100%; height: auto; } .mini-chart .v { font-size: 11px; fill: var(--ink, currentColor); font-weight: 700; } .mini-chart .l { font-size: 10px; fill: var(--mute); }
.forecast { font-size: 16px; margin: 10px 0 4px; }
.camp-pick { display: grid; gap: 6px; align-content: start; }
ul.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } ul.history li { border-left: 3px solid var(--gold); padding-left: 10px; }
.real-map.short { height: min(48vh, 420px); min-height: 300px; margin: 12px 0; }
.stop-num { background: #f2c35b; color: #141739; border: 2px solid #fff; border-radius: 50%; font: 700 12px/22px sans-serif; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
ol.route-list { columns: 2; margin: 8px 0 0; padding-left: 22px; } @media (max-width: 700px) { ol.route-list { columns: 1; } }

/* ---------- v1.3 AI assistant ---------- */
.ai-chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ai-turn { display: flex; flex-direction: column; gap: 6px; }
.ai-q, .ai-a { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; }
.ai-q { background: var(--chip); color: var(--ink); align-self: flex-end; max-width: 85%; }
.ai-a { background: var(--paper); color: var(--ink); border: 1px solid var(--line); }
.ai-a svg, .ai-q svg { flex: none; margin-top: 3px; }
.ai-md h3 { font-size: 1.05rem; margin: 14px 0 6px; }
.ai-md h4 { font-size: .98rem; margin: 10px 0 4px; }
.ai-md p { margin: 0 0 8px; } .ai-md ul { margin: 0 0 8px 18px; padding: 0; } .ai-md li { margin: 3px 0; }
.ai-ask { display: flex; gap: 10px; align-items: flex-end; position: sticky; bottom: 0; padding: 10px 0; background: var(--bg, #f6f8fb); }
.ai-input { flex: 1; resize: vertical; min-height: 48px; padding: 12px; border-radius: 12px; border: 1px solid var(--line, #cfd7e3); font: inherit; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-suggest .chip { text-align: left; }
.ai-usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 10px; }
.ai-usage div { display: flex; flex-direction: column; } .ai-usage strong { font-size: 1.35rem; } .ai-usage span { color: var(--muted, #667); font-size: .85rem; }
.ai-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 10px; text-align: center; color: var(--muted, #667); }
.ai-adv { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ai-adv-row { padding: 10px 12px; border: 1px solid var(--line, #dde3ec); border-radius: 12px; }
.ai-adv-row p { margin: 4px 0 0; }
.ai-doc { width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; background: #111; margin-bottom: 10px; }
.ai-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.ai-facts div { display: flex; flex-direction: column; } .ai-facts span { color: var(--muted, #667); font-size: .85rem; }
.bad-text { color: var(--bad, #b42318); }
@media (max-width: 640px) { .ai-usage { grid-template-columns: 1fr 1fr; } .ai-q { max-width: 100%; } }

/* ---------- v1.3 template ---------- */
.template-steps { margin: 0; padding-left: 20px; } .template-steps li { margin: 8px 0; } .template-steps p { margin: 2px 0 0; }

/* ---------- v1.3.1 digital twin (scientific HUD) ---------- */
.tw-wrap { --tw-fg: #dfe7ff; --tw-dim: #8f9cc9; --tw-line: rgba(140,170,255,.22); --tw-panel: rgba(8,12,30,.72); --tw-acc: #6dffb8;
  position: relative; height: min(80vh, 820px); min-height: 520px; border-radius: 18px; overflow: hidden; background: #060914; color: var(--tw-fg);
  font: 12px/1.45 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-shadow: 0 30px 80px -30px rgba(10,14,60,.7), inset 0 0 0 1px rgba(140,170,255,.18); isolation: isolate; }
.tw-wrap:fullscreen { height: 100vh; border-radius: 0; }
.tw-stage { position: absolute; inset: 0; } .tw-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.tw-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }
.tw-panel { position: absolute; z-index: 3; background: var(--tw-panel); border: 1px solid var(--tw-line); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
.tw-panel::before { content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; border-left: 2px solid var(--tw-acc); border-top: 2px solid var(--tw-acc); border-top-left-radius: 12px; }
.tw-h { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tw-acc); margin: 0 0 6px; }
.tw-h2 { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tw-dim); margin: 10px 0 4px; }
.tw-kv { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px dashed rgba(140,170,255,.10); }
.tw-kv span { color: var(--tw-dim); } .tw-kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tw-head { position: absolute; z-index: 3; left: 14px; right: 14px; top: 12px; display: flex; align-items: flex-start; gap: 12px; pointer-events: none; }
.tw-head > div:first-child { display: flex; flex-direction: column; } .tw-head small { color: var(--tw-acc); letter-spacing: .2em; font-size: 10px; }
.tw-head b { font: 600 20px/1.2 system-ui, sans-serif; letter-spacing: .01em; color: #fff; }
.tw-live { color: #ff8c95; font-size: 10px; letter-spacing: .16em; } .tw-live i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 10px #ff4d5e; animation: twpulse 1.4s infinite; }
@keyframes twpulse { 50% { opacity: .25; } }
.tw-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; color: var(--tw-dim); font-variant-numeric: tabular-nums; }
.tw-fs { pointer-events: auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--tw-line); background: var(--tw-panel); color: var(--tw-fg); font-size: 16px; cursor: pointer; }
.tw-stats { left: 14px; top: 124px; width: 248px; max-height: calc(100% - 222px); overflow: auto; scrollbar-width: thin; }
.tw-hist { display: flex; align-items: flex-end; gap: 3px; height: 62px; padding-top: 2px; } .tw-hist i { flex: 1; border-radius: 2px 2px 0 0; opacity: .9; }
.tw-axis { display: flex; justify-content: space-between; color: var(--tw-dim); font-size: 10px; margin-top: 2px; }
.tw-right { position: absolute; z-index: 3; right: 14px; top: 124px; bottom: 104px; width: 220px; display: flex; flex-direction: column; gap: 10px; overflow: auto; scrollbar-width: thin; }
.tw-right .tw-panel { position: relative; flex: none; }
.tw-check { display: flex; align-items: center; gap: 8px; padding: 2px 0; cursor: pointer; } .tw-check input { accent-color: #6dffb8; }
.tw-seg { display: flex; flex-wrap: wrap; gap: 4px; } .tw-seg button { flex: 1 1 45%; font: inherit; font-size: 11px; color: var(--tw-fg); background: rgba(255,255,255,.04); border: 1px solid var(--tw-line); border-radius: 7px; padding: 4px 6px; cursor: pointer; }
.tw-seg button.on, .tw-seg button:hover { background: rgba(109,255,184,.14); border-color: rgba(109,255,184,.6); color: #fff; }
.tw-keys { display: flex; flex-direction: column; gap: 3px; } .tw-keys span { display: flex; align-items: center; gap: 7px; } .tw-keys i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.tw-keys.small { font-size: 10.5px; color: var(--tw-dim); margin-top: 6px; } .tw-keys i.ring { border-radius: 50%; border: 2px solid #35b779; background: transparent; }
.tw-ramp { height: 10px; border-radius: 3px; } .tw-ramp.thin { height: 6px; }
.tw-time { left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.tw-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(109,255,184,.6); background: rgba(109,255,184,.12); color: #fff; font-size: 13px; cursor: pointer; }
.tw-play.on { background: #6dffb8; color: #06120c; }
.tw-tl { flex: 1; position: relative; min-width: 0; }
.tw-tbars { display: flex; align-items: flex-end; gap: 2px; height: 26px; } .tw-tbars i { flex: 1; background: linear-gradient(#6dffb8, rgba(109,255,184,.15)); border-radius: 1px 1px 0 0; min-width: 1px; opacity: .8; }
.tw-range { width: 100%; margin: 2px 0 0; accent-color: #6dffb8; }
.tw-date { flex: none; text-align: right; display: flex; flex-direction: column; } .tw-date small { color: var(--tw-dim); font-size: 9.5px; letter-spacing: .16em; } .tw-date b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.tw-coord { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 98px; color: var(--tw-dim); background: rgba(6,9,20,.6); padding: 3px 10px; border-radius: 6px; border: 1px solid var(--tw-line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tw-scale { position: absolute; z-index: 3; left: 278px; bottom: 100px; display: flex; align-items: center; gap: 8px; color: var(--tw-dim); }
.tw-scale i { display: block; height: 6px; border: 1px solid var(--tw-fg); border-top: 0; min-width: 20px; }
.tw-compass { position: absolute; z-index: 3; right: 248px; top: 84px; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--tw-line); background: radial-gradient(circle, rgba(20,28,70,.8), rgba(6,9,20,.6)); }
.tw-needle { position: absolute; inset: 0; transition: transform .1s linear; } .tw-needle i { position: absolute; left: 50%; top: 7px; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 18px solid #ff4d5e; border-top: 0; }
.tw-needle b { position: absolute; left: 50%; top: -3px; transform: translate(-50%,-100%); font-size: 10px; color: #ff8c95; }
.tw-insp { left: 50%; top: 124px; transform: translateX(-50%); width: min(380px, calc(100% - 560px)); min-width: 300px; max-height: calc(100% - 216px); overflow: auto; scrollbar-width: thin; }
.tw-insp[hidden] { display: none; }
.tw-insp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .tw-insp-head > div { display: flex; flex-direction: column; }
.tw-insp-head small { color: var(--tw-acc); letter-spacing: .16em; font-size: 10px; } .tw-insp-head b { font: 600 18px/1.2 system-ui, sans-serif; color: #fff; } .tw-insp-head span { color: var(--tw-dim); }
.tw-x { border: 1px solid var(--tw-line); background: transparent; color: var(--tw-fg); border-radius: 7px; width: 26px; height: 26px; cursor: pointer; font-size: 16px; }
.tw-stack { display: flex; height: 12px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 6px; } .tw-stack i { min-width: 2px; }
.tw-levels > div { display: grid; grid-template-columns: 26px 1fr 40px; align-items: center; gap: 8px; padding: 2px 0; } .tw-levels b { text-align: right; }
.tw-bar { height: 7px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; } .tw-bar i { display: block; height: 100%; border-radius: 4px; }
.tw-probs { margin: 0; padding-left: 18px; } .tw-probs li { padding: 1px 0; } .tw-probs li span { color: var(--tw-fg); } .tw-probs li b { float: right; color: #ff8c95; }
.tw-alert { margin-top: 8px; padding: 6px 8px; border-radius: 7px; background: rgba(255,77,94,.14); border: 1px solid rgba(255,77,94,.5); color: #ffb3ba; }
.tw-actions { display: flex; gap: 6px; margin-top: 10px; } .tw-muted { color: var(--tw-dim); }
.tw-spark { margin: 2px 0; }
.tw-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.tw-label { position: absolute; left: 0; top: 0; display: flex; gap: 6px; align-items: baseline; padding: 2px 7px 3px; border-radius: 5px; background: rgba(6,9,20,.72); border: 1px solid rgba(160,200,255,.35); white-space: nowrap; font-size: 10.5px; }
.tw-label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: rgba(160,200,255,.55); }
.tw-label b { color: #fff; font-weight: 600; } .tw-label span { color: var(--tw-acc); }
.tw-tip { position: absolute; left: 0; top: 0; z-index: 4; display: none; pointer-events: none; padding: 7px 9px; border-radius: 8px; background: rgba(6,9,20,.9); border: 1px solid var(--tw-line); max-width: 260px; }
.tw-tip b, .tw-tip span { display: block; } .tw-tip b { color: #fff; } .tw-tip span { color: var(--tw-dim); }
.tw-boot { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #060914; color: var(--tw-fg); }
.tw-boot small { color: var(--tw-dim); }
.tw-spin { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(109,255,184,.15); border-top-color: #6dffb8; animation: twspin 1s linear infinite; }
@keyframes twspin { to { transform: rotate(360deg); } }
/* interactive layer */
.tw-filter { left: 14px; right: 14px; top: 74px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 6px 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; color: var(--tw-dim); font-size: 12px; }
.tw-filter > *, .tw-rng > * { flex: none; }
.tw-filter input, .tw-filter select { width: auto; min-width: 0; height: 30px; margin: 0; box-shadow: none; background: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--tw-line); border-radius: 8px; padding: 5px 8px; font: inherit; }
.tw-filter select option { color: #111; }
.tw-filter .tw-search { width: 190px; } .tw-search:focus { outline: 2px solid var(--tw-acc); } .tw-search.bad { outline: 2px solid #ff4d5e; animation: twshake .3s; }
@keyframes twshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tw-filter .tw-num { width: 58px; } .tw-rng { display: inline-flex; align-items: center; gap: 4px; }
.tw-count { padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.06); } .tw-count.on { background: var(--tw-acc); color: #04121d; font-weight: 600; }
.tw-gap { flex: 1; }
.tw-mini { background: rgba(255,255,255,.08); color: #fff; border: 1px solid var(--tw-line); border-radius: 8px; padding: 4px 10px; cursor: pointer; font: 600 12px system-ui, sans-serif; }
.tw-mini:hover, .tw-speed button:hover { background: rgba(255,255,255,.18); }
.tw-hist.live i { cursor: pointer; transition: transform .15s, opacity .15s, outline-color .15s; outline: 1px solid transparent; transform-origin: bottom; }
.tw-hist.live:hover i { opacity: .45; } .tw-hist.live i:hover, .tw-hist i.hi { opacity: 1 !important; transform: scaleY(1.12); outline-color: #fff; }
.tw-hist i.sel { outline: 2px solid var(--tw-acc); opacity: 1; }
.tw-panel .tw-h { cursor: pointer; user-select: none; } .tw-panel .tw-h::after { content: ' ▾'; opacity: .6; }
.tw-panel.min > :not(.tw-h) { display: none; } .tw-panel.min > .tw-h { margin: 0; } .tw-panel.min > .tw-h::after { content: ' ▸'; }
.tw-cmp, .tw-help { left: 50%; top: 124px; transform: translateX(-50%); width: min(420px, calc(100% - 28px)); max-height: calc(100% - 236px); overflow: auto; z-index: 4; }
.tw-cmp[hidden], .tw-help[hidden] { display: none; }
.tw-ctab { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tw-ctab td, .tw-ctab th { padding: 4px 6px; border-bottom: 1px solid var(--tw-line); text-align: left; }
.tw-ctab th { color: var(--tw-acc); font-weight: 600; } .tw-ctab td.win { color: #6dffb8; font-weight: 700; }
.tw-ctab kbd { font: 600 11px ui-monospace, monospace; background: rgba(255,255,255,.1); border: 1px solid var(--tw-line); border-radius: 5px; padding: 1px 6px; color: #fff; }
.tw-verdict { margin: 10px 0 4px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12.5px; } .tw-verdict.sig { background: rgba(47,209,138,.16); color: #b9ffd9; }
.tw-speed { display: flex; gap: 2px; } .tw-speed button { background: rgba(255,255,255,.06); color: var(--tw-dim); border: 1px solid var(--tw-line); border-radius: 6px; padding: 3px 6px; font: 600 11px system-ui, sans-serif; cursor: pointer; }
.tw-speed button.on { background: var(--tw-acc); color: #04121d; }
.tw-tip small { display: block; opacity: .7; margin-top: 2px; }
@media (max-width: 980px) { .tw-rng, .tw-filter select { display: none; } .tw-filter .tw-search { flex: 1; min-width: 120px; } }
@media (max-width: 980px) { .tw-stats { display: none; } .tw-scale { left: 14px; } .tw-insp { left: 14px; transform: none; width: calc(100% - 28px); min-width: 0; } }
@media (max-width: 640px) { .tw-wrap { height: 78vh; min-height: 460px; } .tw-right, .tw-compass, .tw-coord { display: none; } .tw-head b { font-size: 16px; } }
.ai-md .table-wrap { overflow-x: auto; margin: 6px 0 10px; }
.ai-table { border-collapse: collapse; min-width: 60%; font-size: .92rem; }
.ai-table th, .ai-table td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.ai-table th { background: var(--chip); font-weight: 600; }
.load-error { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .load-error > :first-child { flex: 1; }
.top-search { display: flex; align-items: center; gap: 6px; background: var(--chip); border-radius: 999px; padding: 4px 12px; margin-left: 16px; flex: 0 1 320px; min-width: 0; }
.top-search input { border: 0; background: transparent; color: inherit; font: inherit; width: 100%; outline: none; padding: 4px 0; }
@media (max-width: 760px) { .top-search { display: none; } }

/* ---------- printable pages (household card, progress report) ---------- */
.print-doc { background: #fff; color: #221a17; border-radius: 12px; padding: 24px; max-width: 900px; }
.pd-head { display: flex; gap: 12px; align-items: center; border-bottom: 2px solid #c99a2e; padding-bottom: 10px; margin-bottom: 12px; }
.pd-head strong { display: block; font-size: 16px; } .pd-head small { color: #5a504c; }
.print-doc h2 { margin: 8px 0; color: #262b6a; } .print-doc h3 { margin: 18px 0 8px; color: #262b6a; font-size: 15px; }
.pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; margin-bottom: 12px; }
.print-doc .info-label, .print-doc .label { color: #5a504c; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pd-table th, .pd-table td { border: 1px solid #ddd; padding: 6px 8px; vertical-align: top; text-align: left; }
.pd-table th { background: #f3efe6; }
.pd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pd-kpi { border: 1px solid #e3dccd; border-radius: 10px; padding: 10px 12px; } .pd-kpi strong { display: block; font-size: 24px; color: #262b6a; } .pd-kpi small { color: #5a504c; }
.pd-bars { display: grid; gap: 6px; } .pd-bar { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 110px; gap: 10px; align-items: center; font-size: 13px; }
.pd-bar-track { background: #eee8db; border-radius: 6px; height: 12px; overflow: hidden; } .pd-bar-fill { display: block; height: 100%; background: #c99a2e; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pd-bar-val { text-align: right; color: #5a504c; } .pd-foot { margin-top: 18px; font-size: 12px; color: #5a504c; }
@media print {
  body:not(.printing) .sidebar, body:not(.printing) .topbar, body:not(.printing) .page-actions, body:not(.printing) .page:has(.print-doc) .page-head, body:not(.printing) .load-error, body:not(.printing) .toast { display: none !important; }
  body:not(.printing) .print-doc { padding: 0; max-width: none; }
  body:not(.printing) { background: #fff; }
}
@media (max-width: 760px) { .pd-grid, .pd-kpis { grid-template-columns: 1fr 1fr; } .pd-bar { grid-template-columns: 1fr; } }
.notice-strip { display: flex; gap: 10px; align-items: center; background: var(--gold-soft); color: inherit; text-decoration: none; border: 1px solid #e6c97a; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.notice-strip.urgent { background: var(--red-soft); border-color: #f0a8b1; }
.notice-text { white-space: pre-wrap; }
.card.accent-gold { border-left: 4px solid #c99a2e; }

/* ---------- premium progress report ---------- */
.rp { background: #fffdf8; color: #221a17; border-radius: 18px; box-shadow: 0 10px 40px rgba(38, 43, 106, .10); overflow: hidden; max-width: 1000px; }
.rp-cover { display: flex; gap: 18px; align-items: center; padding: 26px 30px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #3a3f8f 0%, #262b6a 45%, #14174a 100%); position: relative; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #c99a2e, #f0cf7a, #c99a2e); }
.rp-cover img { border-radius: 50%; background: #fff; padding: 3px; }
.rp-cover h2 { margin: 2px 0 4px; font-size: 26px; letter-spacing: -.01em; color: #fff; }
.rp-org { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #f0cf7a; font-weight: 700; }
.rp-period { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; background: rgba(240, 207, 122, .18); color: #f7e2a8; font-weight: 600; font-size: 13px; }
.rp-stamp { text-align: right; } .rp-stamp small { display: block; color: #c9cbe8; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; } .rp-stamp strong { font-size: 14px; }
.rp-lede { margin: 18px 30px 6px; color: #4a413c; font-size: 14.5px; line-height: 1.55; }
.rp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px 30px 6px; }
.rp-kpi { position: relative; background: #fff; border: 1px solid #ece4d2; border-radius: 14px; padding: 14px 16px 12px 56px; min-height: 74px; }
.rp-kpi-ic { position: absolute; left: 14px; top: 16px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #f6edd6; font-size: 15px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-kpi strong { display: block; font-size: 26px; line-height: 1.1; color: #262b6a; font-variant-numeric: tabular-nums; }
.rp-kpi small { display: block; color: #6b625d; font-size: 12.5px; margin-top: 2px; }
.rp-delta { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.rp-delta.up { color: #2e7d4f; background: #e3f2e8; } .rp-delta.down { color: #c71e1e; background: #fbe2e2; }
.rp-sec { padding: 8px 30px 14px; break-inside: avoid; }
.rp-h { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #a8781c; margin: 16px 0 12px; display: flex; align-items: center; gap: 10px; }
.rp-h::after { content: ''; flex: 1; height: 1px; background: #ece4d2; }
.rp-sat { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.rp-rings { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 12px 18px; }
.rp-ring { display: flex; gap: 12px; align-items: center; } .rp-ring strong { display: block; font-size: 14px; color: #262b6a; } .rp-ring small { color: #6b625d; font-size: 12px; }
.rp-legend { display: flex; gap: 18px; font-size: 12px; color: #6b625d; margin-bottom: 6px; } .rp-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } .rp-legend i.line { height: 3px; vertical-align: 3px; }
.rp-svg svg { display: block; }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; }
.rp-hbars { display: grid; gap: 8px; } .rp-hbar { display: grid; grid-template-columns: minmax(110px, 46%) 1fr 48px; gap: 10px; align-items: center; font-size: 13px; }
.rp-hbar-track { height: 10px; background: #ece6d8; border-radius: 6px; overflow: hidden; } .rp-hbar-fill { display: block; height: 100%; border-radius: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-hbar-val { text-align: right; font-weight: 700; color: #262b6a; font-variant-numeric: tabular-nums; }
.rp-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rp-mini > div { background: #fff; border: 1px solid #ece4d2; border-radius: 12px; padding: 10px 12px; }
.rp-mini strong { display: block; font-size: 20px; color: #262b6a; } .rp-mini small { color: #6b625d; font-size: 12px; }
.rp-ai { margin: 6px 30px 0; } .rp-ai:empty { display: none; } .rp-ai > :not(h3) { background: #fff; border-left: 4px solid #c99a2e; border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.rp-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 30px 18px; margin-top: 8px; border-top: 1px solid #ece4d2; font-size: 11.5px; color: #6b625d; }
.rp-dates { display: flex; gap: 12px; align-items: center; } .rp-dates input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line, #ddd); }
@media (max-width: 760px) { .rp-kpis { grid-template-columns: 1fr 1fr; padding: 12px 16px; } .rp-two { grid-template-columns: 1fr; } .rp-rings { grid-template-columns: 1fr; }
  .rp-sec, .rp-lede, .rp-ai { padding-left: 16px; padding-right: 16px; margin-left: 0; margin-right: 0; } .rp-cover { padding: 20px 16px; flex-wrap: wrap; } .rp-stamp { text-align: left; } }
@media print {
  body:not(.printing) .no-print, body:not(.printing) .page:has(.rp) .page-head { display: none !important; }
  body:not(.printing) .rp { box-shadow: none; border-radius: 0; max-width: none; }
  .rp-kpis { grid-template-columns: repeat(3, 1fr) !important; } .rp-two { grid-template-columns: 1fr 1fr !important; }
  .rp-sec { break-inside: avoid; } @page { size: A4; margin: 10mm; }
}
.rp-no { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #262b6a; color: #f0cf7a; font-size: 11px; letter-spacing: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-exec { font-size: 15px; line-height: 1.6; margin: 0 0 8px; } .rp-ai { margin: 8px 0 0; }
.rp-kpis.inner { padding: 0; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; border: 1px solid #ece4d2; border-radius: 12px; overflow: hidden; }
.rp-table th, .rp-table td { padding: 8px 10px; border-bottom: 1px solid #f0eadc; text-align: left; } .rp-table thead th { background: #f6f1e4; color: #5a504c; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; } .rp-table tfoot th { background: #fbf7ec; color: #262b6a; }
.rp-mbar { position: relative; height: 16px; background: #ece6d8; border-radius: 8px; overflow: hidden; min-width: 110px; } .rp-mbar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp-mbar em { position: relative; font-style: normal; font-size: 11px; font-weight: 700; padding-left: 8px; color: #221a17; line-height: 16px; }
.rp-budget-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.rp-budget-top > div { background: #fff; border: 1px solid #ece4d2; border-radius: 12px; padding: 10px 12px; } .rp-budget-top strong { display: block; font-size: 19px; color: #262b6a; } .rp-budget-top small { color: #6b625d; font-size: 12px; }
.rp-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.story { margin: 0; background: #fff; border: 1px solid #ece4d2; border-radius: 14px; overflow: hidden; break-inside: avoid; }
.story img, .story-noimg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: linear-gradient(135deg, #262b6a, #3a2368); color: #f0cf7a; font-size: 40px; display: grid; place-items: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.story figcaption { padding: 10px 12px 12px; font-size: 12.5px; line-height: 1.45; } .story strong { display: block; font-size: 14.5px; color: #262b6a; } .story small { color: #a8781c; font-weight: 600; }
.story p { margin: 5px 0 0; color: #3b332f; } .story blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid #c99a2e; font-style: italic; color: #4a413c; }
.stories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .stories-grid .story { border: 0; }
.story-photo img { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 6px; }
.rp-list { margin: 0; padding-left: 20px; line-height: 1.6; font-size: 14px; }
@media (max-width: 760px) { .rp-stories { grid-template-columns: 1fr; } }
@media print { .rp-stories { grid-template-columns: repeat(3, 1fr) !important; } .no-print-hint { display: none; } }
.rp-sec:has(.rp-stories) { break-inside: auto; } .rp-stories .story { break-inside: avoid; page-break-inside: avoid; }
.social-post { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.social-preview { width: 100%; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
@media (max-width: 760px) { .social-post { grid-template-columns: 1fr; } .social-preview { max-width: 280px; } }
.video-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; margin-bottom: 16px; }
.video-preview { width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #02344a; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); display: block; }
.video-result { width: 100%; max-width: 280px; border-radius: 12px; display: block; margin: 6px 0; }
.check-row { display: flex; gap: 10px; align-items: flex-start; } .check-row small { color: var(--mute); }
.video-row { gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line, #eee); }
.status progress { width: 100%; }
@media (max-width: 760px) { .video-grid { grid-template-columns: 1fr; } .video-preview { max-width: 260px; } }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.testi-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #0e1730; display: block; overflow: hidden; margin-bottom: 8px; }
.testi-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.testi-video.empty { display: grid; place-items: center; color: #9aa3c4; font-size: 13px; }
.tw-method { margin-top: 8px; font-size: 10.5px; line-height: 1.4; color: rgba(200,215,235,.6); }

/* ---------- Project memory (live knowledge pool) ---------- */
.mem { --m-bg:#0b1118; --m-panel:#101923; --m-line:#1f2d3a; --m-fg:#dbe4ee; --m-dim:#7d8fa1; --m-acc:#f68425;
  background: radial-gradient(1200px 500px at 70% -10%, #12324a 0%, transparent 60%), var(--m-bg); color: var(--m-fg);
  border-radius: 16px; padding: 14px; display: grid; gap: 12px; font-variant-numeric: tabular-nums; }
.mem-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 12px ui-monospace, Menlo, monospace; color: var(--m-dim); }
.mem-live b { color: var(--m-fg); font-weight: 600; } .mem-live > span:nth-child(2) { color: #3fe08f; font-weight: 700; letter-spacing: .14em; }
.mem-dot { width: 10px; height: 10px; border-radius: 50%; background: #3fe08f; box-shadow: 0 0 0 0 #3fe08f88; animation: memPing 1.6s infinite; }
@keyframes memPing { 70% { box-shadow: 0 0 0 10px #3fe08f00; } 100% { box-shadow: 0 0 0 0 #3fe08f00; } }
.mem-sep { width: 1px; height: 12px; background: var(--m-line); }
.mem-new { background: var(--m-acc); color: #1b0c00; padding: 2px 8px; border-radius: 99px; font-weight: 700; animation: memPop .6s; }
@keyframes memPop { from { transform: scale(.4); opacity: 0; } }
.mem-counts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mem-count { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 12px; padding: 10px 12px; position: relative; overflow: hidden; }
.mem-count::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tone); box-shadow: 0 0 12px var(--tone); }
.mem-count b { display: block; font: 700 24px/1.1 system-ui, sans-serif; color: #fff; } .mem-count span { color: var(--m-dim); font-size: 12px; }
.mem-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.mem-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mem-panel { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 12px; padding: 12px; min-width: 0; }
.mem-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.mem-h span { font: 600 11px ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--m-acc); } .mem-h small { color: var(--m-dim); }
.mem-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mem-chips button { display: inline-flex; align-items: center; gap: 6px; background: #ffffff0d; border: 1px solid var(--m-line); color: var(--m-fg); border-radius: 99px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.mem-chips button.on { border-color: var(--m-acc); background: #f684251f; color: #ffd2ad; } .mem-chips i { width: 8px; height: 8px; border-radius: 50%; }
.mem-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.mem-cell { display: block; width: 100%; height: auto; min-height: 10px; min-width: 0; aspect-ratio: 1; margin: 0; box-shadow: none; border: 0; padding: 0; border-radius: 3px; background: var(--c); opacity: .78; cursor: pointer; transition: transform .15s, opacity .15s, box-shadow .15s; }
.mem-cell:hover, .mem-cell:focus-visible { opacity: 1; transform: scale(1.35); box-shadow: 0 0 10px var(--c); outline: none; position: relative; z-index: 1; }
.mem-cell.empty { background: #ffffff08; opacity: 1; cursor: default; }
.mem-cell.glint { opacity: 1; box-shadow: 0 0 12px var(--c); }
.mem-cell.fresh { animation: memFresh 2.4s ease-out 2; }
@keyframes memFresh { 0% { transform: scale(1.6); box-shadow: 0 0 18px #fff; background: #fff; } 100% { transform: none; } }
.mem-tip { margin-top: 10px; min-height: 20px; font-size: 12.5px; color: var(--m-dim); border-top: 1px dashed var(--m-line); padding-top: 8px; }
.mem-stream { display: grid; gap: 4px; max-height: 420px; overflow: auto; scrollbar-width: thin; }
.mem-ev { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: 0; border-radius: 8px; padding: 6px 8px; color: var(--m-fg); cursor: pointer; }
.mem-ev:hover { background: #ffffff0d; } .mem-ev > i { width: 8px; height: 8px; border-radius: 50%; }
.mem-ev div { display: flex; flex-direction: column; min-width: 0; } .mem-ev b { font-size: 12.5px; } .mem-ev span { font-size: 12px; color: var(--m-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-ev small { color: var(--m-dim); font: 11px ui-monospace, monospace; }
.mem-ev.fresh { animation: memSlide .7s ease-out; background: #f6842514; }
@keyframes memSlide { from { transform: translateX(-14px); opacity: 0; } }
.mem-beat { display: flex; align-items: flex-end; gap: 3px; height: 62px; } .mem-beat i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(#f68425, #3fe08f); }
.mem-axis { display: flex; justify-content: space-between; color: var(--m-dim); font-size: 11px; margin-top: 4px; }
.mem-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.mem-levels > div { display: grid; justify-items: center; gap: 4px; } .mem-levels small { color: var(--m-dim); font-size: 11px; }
.mem-ring { --p: 0; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#3fe08f calc(var(--p) * 360deg), #ffffff14 0); }
.mem-ring span { width: 48px; height: 48px; border-radius: 50%; background: var(--m-panel); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.mem-people { display: grid; gap: 8px; } .mem-people > div { display: grid; grid-template-columns: 110px 1fr 30px; gap: 8px; align-items: center; font-size: 12.5px; }
.mem-people span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mem-people b { text-align: right; color: var(--m-acc); }
.mem-bar { height: 8px; background: #ffffff10; border-radius: 99px; overflow: hidden; } .mem-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fe08f, #f68425); }
.mem-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mem-rules > div { border-left: 2px solid var(--m-acc); padding: 4px 10px; display: grid; gap: 2px; align-content: start; } .mem-rules b { font-size: 13px; color: #fff; } .mem-rules span { color: var(--m-dim); font-size: 12.5px; }
.mem .muted { color: var(--m-dim); }
@media (max-width: 1100px) { .mem-main { grid-template-columns: 1fr; } .mem-counts { grid-template-columns: repeat(3, 1fr); } .mem-row3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mem-counts { grid-template-columns: repeat(2, 1fr); } .mem-grid { grid-template-columns: repeat(14, 1fr); } }


/* ---------- Project memory mind map ---------- */
.mm { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 640px; background: #13141c; border: 1px solid #23283a; border-radius: 12px; overflow: hidden; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #d8dbe6; }
.mm-side { background: #1a1c26; border-right: 1px solid #2a2d3b; overflow: auto; scrollbar-width: thin; }
.mm-side details { border-bottom: 1px solid #2a2d3b; }
.mm-side summary { cursor: pointer; padding: 9px 14px; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; list-style: none; }
.mm-side summary::before { content: '▸ '; color: #8a8fa3; } .mm-side details[open] summary::before { content: '▾ '; }
.mm-sec { padding: 0 10px 10px; display: grid; gap: 2px; }
.mm-kv { display: flex; justify-content: space-between; padding: 2px 4px; } .mm-kv span { color: #8a8fa3; } .mm-kv b { color: #fff; }
.mm-item { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border: 0; border-radius: 5px; background: none; color: #d8dbe6; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mm-item:hover, .mm-item:focus-visible { background: #262a38; outline: none; } .mm-item i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-item small { margin-left: auto; color: #8a8fa3; }
.mm-active { font-style: normal; background: #2e5d3a; color: #bff3c9; font-size: 9.5px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.mm-muted { color: #8a8fa3; padding: 4px 6px; }
.mm-stage { position: relative; min-width: 0; }
.mm-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; } .mm-svg:active { cursor: grabbing; }
.mm-link { stroke: #454a5e; stroke-width: 1; } .mm-link.rel { stroke: #c0504d; stroke-dasharray: 4 4; stroke-opacity: .75; }
.mm-link.hot { stroke: #ffd27a; stroke-width: 2.4; filter: drop-shadow(0 0 4px #ffd27a); }
.mm-node { cursor: pointer; outline: none; } .mm-node circle { stroke: #0006; stroke-width: 1.5; }
.mm-node text { font: 11px ui-monospace, Menlo, monospace; fill: #d8dbe6; pointer-events: none; paint-order: stroke; stroke: #13141c; stroke-width: 3px; }
.mm-node:hover circle:not(.mm-halo), .mm-node:focus circle:not(.mm-halo) { stroke: #fff; stroke-width: 2; }
.mm-node.sel circle:not(.mm-halo) { stroke: #fff; stroke-width: 3; }
.mm-node.fade { opacity: .16; } .mm-link.fade { opacity: .06; }
.mm-halo { fill: none; stroke-width: 2; animation: mmHalo 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mmHalo { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.8); } }
.mm-node.fresh circle:not(.mm-halo) { animation: mmFresh 1.2s ease-out 3; }
@keyframes mmFresh { 0% { fill: #fff; } }
.mm-bar { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.mm-bar > * { pointer-events: auto; }
.mm-title { display: flex; gap: 8px; align-items: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8fa3; }
.mm-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fe08f; animation: memPing 1.6s infinite; }
.mm .mm-search { width: 220px; max-width: 100%; height: 30px; margin: 0; background: #1a1c26; border: 1px solid #2a2d3b; color: #d8dbe6; border-radius: 6px; padding: 4px 10px; font: 12px ui-monospace, monospace; box-shadow: none; }
.mm-legend { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 3px; background: #1a1c26e6; border: 1px solid #2a2d3b; border-radius: 8px; padding: 8px 10px; }
.mm-legend button { display: flex; gap: 7px; align-items: center; background: none; border: 0; color: #d8dbe6; font: inherit; cursor: pointer; padding: 0; } .mm-legend button.off { opacity: .35; }
.mm-legend i { width: 9px; height: 9px; border-radius: 50%; }
.mm-insp { position: absolute; right: 12px; top: 50px; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 66px); overflow: auto; background: #1a1c26f2; border: 1px solid #2a2d3b; border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.mm-insp h3 { margin: 0; font: 600 15px system-ui, sans-serif; color: #fff; } .mm-insp small { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.mm-insp ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #c6cad6; }
.mm-x { position: absolute; right: 10px; top: 6px; background: none; border: 0; color: #8a8fa3; font-size: 18px; cursor: pointer; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 5px; } .mm-chips button { font: 11px ui-monospace, monospace; background: #262a38; border: 1px solid #2a2d3b; color: #d8dbe6; border-radius: 99px; padding: 2px 8px; cursor: pointer; }
.mm-hint { position: absolute; right: 12px; bottom: 12px; color: #8a8fa3; }
@media (max-width: 900px) { .mm { grid-template-columns: 1fr; height: 560px; } .mm-side { display: none; } .mm-hint { display: none; } }

.mm-core { animation: mmBlink 3s ease-in-out infinite; }
@keyframes mmBlink { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6) drop-shadow(0 0 6px currentColor); } }
.mm-link.flow { stroke-dasharray: 3 9; animation: mmFlow 1.6s linear infinite; }
@keyframes mmFlow { to { stroke-dashoffset: -24; } }
.mm-link.pulse { stroke: #8fd3ff; stroke-width: 2.2; stroke-opacity: 1; filter: drop-shadow(0 0 4px #8fd3ff); }
.mm-node.spark .mm-core { animation: mmSpark .9s ease-out; }
@keyframes mmSpark { 0% { filter: brightness(2.6) drop-shadow(0 0 14px #fff); } 100% { filter: brightness(1); } }

/* ---------- RS Training additions ---------- */
.login-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.login-tabs .btn { flex: 1; }
.qa-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; margin: 8px 0; cursor: pointer; background: var(--paper); font-size: 16px; }
.qa-opt.on { border-color: var(--navy); background: var(--navy-soft); }
.qa-opt input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.att-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; }
.att-item.P { border-color: var(--leaf); background: var(--leaf-soft); }
.att-item.A { border-color: var(--red); background: var(--red-soft); }
.att-item.L { border-color: var(--gold); background: var(--gold-soft); }
.matrix { overflow-x: auto; }
.matrix table { border-collapse: collapse; font-size: 13px; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; white-space: nowrap; }
.matrix td.name, .matrix th.name { text-align: left; position: sticky; left: 0; background: var(--paper); }
.cell-good { background: var(--leaf-soft); } .cell-mid { background: var(--gold-soft); } .cell-bad { background: var(--red-soft); }
.cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cal-day { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--paper); }
.cal-day.Held { border-color: var(--leaf); } .cal-day.Cancelled { opacity: .6; } .cal-day.today { outline: 2px solid var(--gold); }
.progress-steps { display: grid; gap: 6px; }
.t-shell { max-width: 640px; margin: 0 auto; padding: 0 14px 40px; }
.t-top { background: var(--navy); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5; }
.t-top img { width: 38px; height: 38px; border-radius: 50%; background: #fff; }
.t-top .grow strong { display: block; } .t-top small { opacity: .8; }
.t-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow); }
.t-test { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.t-test:last-child { border-bottom: 0; }
.qr-box { display: inline-block; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid var(--line); }
.qr-box img, .qr-box canvas { display: block; width: 220px; height: 220px; image-rendering: pixelated; }

/* Round 2: drop-out risk, forgotten PIN, missed tests */
.bt-risk { display: block; color: #9c7630; font-size: 12px; margin-top: 2px; }
.bt-risk.high { color: #b3261e; font-weight: 600; }
.t-pin-big { font: 700 40px/1.1 Georgia, serif; letter-spacing: 8px; color: #0B1F4B; margin: 6px 0 10px; }
.t-missed { margin: 6px 0 0; padding-left: 20px; }
.t-missed li { margin: 4px 0; }


/* ---------- Training memory (from HaqDisha) ---------- */
/* ---------- Training memory (live knowledge pool) ---------- */
.mem { --m-bg:#0b1118; --m-panel:#101923; --m-line:#1f2d3a; --m-fg:#dbe4ee; --m-dim:#7d8fa1; --m-acc:#f68425;
  background: radial-gradient(1200px 500px at 70% -10%, #12324a 0%, transparent 60%), var(--m-bg); color: var(--m-fg);
  border-radius: 16px; padding: 14px; display: grid; gap: 12px; font-variant-numeric: tabular-nums; }
.mem-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 12px ui-monospace, Menlo, monospace; color: var(--m-dim); }
.mem-live b { color: var(--m-fg); font-weight: 600; } .mem-live > span:nth-child(2) { color: #3fe08f; font-weight: 700; letter-spacing: .14em; }
.mem-dot { width: 10px; height: 10px; border-radius: 50%; background: #3fe08f; box-shadow: 0 0 0 0 #3fe08f88; animation: memPing 1.6s infinite; }
@keyframes memPing { 70% { box-shadow: 0 0 0 10px #3fe08f00; } 100% { box-shadow: 0 0 0 0 #3fe08f00; } }
.mem-sep { width: 1px; height: 12px; background: var(--m-line); }
.mem-new { background: var(--m-acc); color: #1b0c00; padding: 2px 8px; border-radius: 99px; font-weight: 700; animation: memPop .6s; }
@keyframes memPop { from { transform: scale(.4); opacity: 0; } }
.mem-counts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.mem-count { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 12px; padding: 10px 12px; position: relative; overflow: hidden; }
.mem-count::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tone); box-shadow: 0 0 12px var(--tone); }
.mem-count b { display: block; font: 700 24px/1.1 system-ui, sans-serif; color: #fff; } .mem-count span { color: var(--m-dim); font-size: 12px; }
.mem-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.mem-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mem-panel { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 12px; padding: 12px; min-width: 0; }
.mem-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.mem-h span { font: 600 11px ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--m-acc); } .mem-h small { color: var(--m-dim); }
.mem-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mem-chips button { display: inline-flex; align-items: center; gap: 6px; background: #ffffff0d; border: 1px solid var(--m-line); color: var(--m-fg); border-radius: 99px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.mem-chips button.on { border-color: var(--m-acc); background: #f684251f; color: #ffd2ad; } .mem-chips i { width: 8px; height: 8px; border-radius: 50%; }
.mem-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.mem-cell { display: block; width: 100%; height: auto; min-height: 10px; min-width: 0; aspect-ratio: 1; margin: 0; box-shadow: none; border: 0; padding: 0; border-radius: 3px; background: var(--c); opacity: .78; cursor: pointer; transition: transform .15s, opacity .15s, box-shadow .15s; }
.mem-cell:hover, .mem-cell:focus-visible { opacity: 1; transform: scale(1.35); box-shadow: 0 0 10px var(--c); outline: none; position: relative; z-index: 1; }
.mem-cell.empty { background: #ffffff08; opacity: 1; cursor: default; }
.mem-cell.glint { opacity: 1; box-shadow: 0 0 12px var(--c); }
.mem-cell.fresh { animation: memFresh 2.4s ease-out 2; }
@keyframes memFresh { 0% { transform: scale(1.6); box-shadow: 0 0 18px #fff; background: #fff; } 100% { transform: none; } }
.mem-tip { margin-top: 10px; min-height: 20px; font-size: 12.5px; color: var(--m-dim); border-top: 1px dashed var(--m-line); padding-top: 8px; }
.mem-stream { display: grid; gap: 4px; max-height: 420px; overflow: auto; scrollbar-width: thin; }
.mem-ev { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: none; border: 0; border-radius: 8px; padding: 6px 8px; color: var(--m-fg); cursor: pointer; }
.mem-ev:hover { background: #ffffff0d; } .mem-ev > i { width: 8px; height: 8px; border-radius: 50%; }
.mem-ev div { display: flex; flex-direction: column; min-width: 0; } .mem-ev b { font-size: 12.5px; } .mem-ev span { font-size: 12px; color: var(--m-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-ev small { color: var(--m-dim); font: 11px ui-monospace, monospace; }
.mem-ev.fresh { animation: memSlide .7s ease-out; background: #f6842514; }
@keyframes memSlide { from { transform: translateX(-14px); opacity: 0; } }
.mem-beat { display: flex; align-items: flex-end; gap: 3px; height: 62px; } .mem-beat i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(#f68425, #3fe08f); }
.mem-axis { display: flex; justify-content: space-between; color: var(--m-dim); font-size: 11px; margin-top: 4px; }
.mem-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.mem-levels > div { display: grid; justify-items: center; gap: 4px; } .mem-levels small { color: var(--m-dim); font-size: 11px; }
.mem-ring { --p: 0; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#3fe08f calc(var(--p) * 360deg), #ffffff14 0); }
.mem-ring span { width: 48px; height: 48px; border-radius: 50%; background: var(--m-panel); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.mem-people { display: grid; gap: 8px; } .mem-people > div { display: grid; grid-template-columns: 110px 1fr 30px; gap: 8px; align-items: center; font-size: 12.5px; }
.mem-people span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mem-people b { text-align: right; color: var(--m-acc); }
.mem-bar { height: 8px; background: #ffffff10; border-radius: 99px; overflow: hidden; } .mem-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fe08f, #f68425); }
.mem-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mem-rules > div { border-left: 2px solid var(--m-acc); padding: 4px 10px; display: grid; gap: 2px; align-content: start; } .mem-rules b { font-size: 13px; color: #fff; } .mem-rules span { color: var(--m-dim); font-size: 12.5px; }
.mem .muted { color: var(--m-dim); }
@media (max-width: 1100px) { .mem-main { grid-template-columns: 1fr; } .mem-counts { grid-template-columns: repeat(3, 1fr); } .mem-row3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mem-counts { grid-template-columns: repeat(2, 1fr); } .mem-grid { grid-template-columns: repeat(14, 1fr); } }


/* ---------- Training memory mind map ---------- */
.mm { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 640px; background: #13141c; border: 1px solid #23283a; border-radius: 12px; overflow: hidden; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #d8dbe6; }
.mm-side { background: #1a1c26; border-right: 1px solid #2a2d3b; overflow: auto; scrollbar-width: thin; }
.mm-side details { border-bottom: 1px solid #2a2d3b; }
.mm-side summary { cursor: pointer; padding: 9px 14px; font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; list-style: none; }
.mm-side summary::before { content: '▸ '; color: #8a8fa3; } .mm-side details[open] summary::before { content: '▾ '; }
.mm-sec { padding: 0 10px 10px; display: grid; gap: 2px; }
.mm-kv { display: flex; justify-content: space-between; padding: 2px 4px; } .mm-kv span { color: #8a8fa3; } .mm-kv b { color: #fff; }
.mm-item { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border: 0; border-radius: 5px; background: none; color: #d8dbe6; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.mm-item:hover, .mm-item:focus-visible { background: #262a38; outline: none; } .mm-item i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-item small { margin-left: auto; color: #8a8fa3; }
.mm-active { font-style: normal; background: #2e5d3a; color: #bff3c9; font-size: 9.5px; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.mm-muted { color: #8a8fa3; padding: 4px 6px; }
.mm-stage { position: relative; min-width: 0; }
.mm-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; } .mm-svg:active { cursor: grabbing; }
.mm-link { stroke: #454a5e; stroke-width: 1; } .mm-link.rel { stroke: #c0504d; stroke-dasharray: 4 4; stroke-opacity: .75; }
.mm-link.hot { stroke: #ffd27a; stroke-width: 2.4; filter: drop-shadow(0 0 4px #ffd27a); }
.mm-node { cursor: pointer; outline: none; } .mm-node circle { stroke: #0006; stroke-width: 1.5; }
.mm-node text { font: 11px ui-monospace, Menlo, monospace; fill: #d8dbe6; pointer-events: none; paint-order: stroke; stroke: #13141c; stroke-width: 3px; }
.mm-node:hover circle:not(.mm-halo), .mm-node:focus circle:not(.mm-halo) { stroke: #fff; stroke-width: 2; }
.mm-node.sel circle:not(.mm-halo) { stroke: #fff; stroke-width: 3; }
.mm-node.fade { opacity: .16; } .mm-link.fade { opacity: .06; }
.mm-halo { fill: none; stroke-width: 2; animation: mmHalo 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mmHalo { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.8); } }
.mm-node.fresh circle:not(.mm-halo) { animation: mmFresh 1.2s ease-out 3; }
@keyframes mmFresh { 0% { fill: #fff; } }
.mm-bar { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.mm-bar > * { pointer-events: auto; }
.mm-title { display: flex; gap: 8px; align-items: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a8fa3; }
.mm-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fe08f; animation: memPing 1.6s infinite; }
.mm .mm-search { width: 220px; max-width: 100%; height: 30px; margin: 0; background: #1a1c26; border: 1px solid #2a2d3b; color: #d8dbe6; border-radius: 6px; padding: 4px 10px; font: 12px ui-monospace, monospace; box-shadow: none; }
.mm-legend { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 3px; background: #1a1c26e6; border: 1px solid #2a2d3b; border-radius: 8px; padding: 8px 10px; }
.mm-legend button { display: flex; gap: 7px; align-items: center; background: none; border: 0; color: #d8dbe6; font: inherit; cursor: pointer; padding: 0; } .mm-legend button.off { opacity: .35; }
.mm-legend i { width: 9px; height: 9px; border-radius: 50%; }
.mm-insp { position: absolute; right: 12px; top: 50px; width: min(320px, calc(100% - 24px)); max-height: calc(100% - 66px); overflow: auto; background: #1a1c26f2; border: 1px solid #2a2d3b; border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.mm-insp h3 { margin: 0; font: 600 15px system-ui, sans-serif; color: #fff; } .mm-insp small { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.mm-insp ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: #c6cad6; }
.mm-x { position: absolute; right: 10px; top: 6px; background: none; border: 0; color: #8a8fa3; font-size: 18px; cursor: pointer; }
.mm-chips { display: flex; flex-wrap: wrap; gap: 5px; } .mm-chips button { font: 11px ui-monospace, monospace; background: #262a38; border: 1px solid #2a2d3b; color: #d8dbe6; border-radius: 99px; padding: 2px 8px; cursor: pointer; }
.mm-hint { position: absolute; right: 12px; bottom: 12px; color: #8a8fa3; }
@media (max-width: 900px) { .mm { grid-template-columns: 1fr; height: 560px; } .mm-side { display: none; } .mm-hint { display: none; } }

.mm-core { animation: mmBlink 3s ease-in-out infinite; }
@keyframes mmBlink { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6) drop-shadow(0 0 6px currentColor); } }
.mm-link.flow { stroke-dasharray: 3 9; animation: mmFlow 1.6s linear infinite; }
@keyframes mmFlow { to { stroke-dashoffset: -24; } }
.mm-link.pulse { stroke: #8fd3ff; stroke-width: 2.2; stroke-opacity: 1; filter: drop-shadow(0 0 4px #8fd3ff); }
.mm-node.spark .mm-core { animation: mmSpark .9s ease-out; }
@keyframes mmSpark { 0% { filter: brightness(2.6) drop-shadow(0 0 14px #fff); } 100% { filter: brightness(1); } }


/* ---------- RS Assistant (floating helper) ---------- */
.ai-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 16px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #0B1F4B, #1d3a7a); color: #fff; font: 600 14px Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(11,31,75,.35), 0 0 0 2px #C29A45 inset; cursor: pointer; }
.ai-fab svg { color: #f0cf7a; } .ai-fab.on { background: #C29A45; } .ai-fab.on svg { color: #0B1F4B; }
@media (max-width: 900px) { .shell .ai-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .ai-fab span { display: none; } .ai-fab { padding: 13px; } }
.ai-panel { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 61; width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 140px));
  display: flex; flex-direction: column; background: var(--card, #fff); color: var(--ink, #1d2433); border-radius: 18px; border: 1px solid #e6dcc4; box-shadow: 0 18px 48px rgba(11,31,75,.28); overflow: hidden; }
@media (max-width: 900px) { .shell .ai-panel { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #0B1F4B; color: #fff; }
.ai-head small { color: #d9deea; flex: 1; } .ai-head .icon-btn { color: #fff; font-size: 22px; background: none; border: 0; cursor: pointer; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fe08f; box-shadow: 0 0 0 3px rgba(63,224,143,.25); }
.ai-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; background: #fbf7ee; }
.ai-msg { display: flex; flex-direction: column; max-width: 88%; } .ai-msg.me { align-self: flex-end; } .ai-msg.bot { align-self: flex-start; }
.ai-bubble { padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.ai-msg.me .ai-bubble { background: #0B1F4B; color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.bot .ai-bubble { background: #fff; border: 1px solid #efe6cf; border-bottom-left-radius: 4px; }
.ai-msg.err .ai-bubble { background: #fdecea; border-color: #f3c2bd; color: #8a1c14; }
.ai-msg.wait .ai-bubble { color: #5f6275; font-style: italic; }
.ai-note { color: #9c7630; font-size: 11px; margin-top: 3px; }
.ai-hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: #fbf7ee; border-top: 1px solid #efe6cf; }
.ai-hints .chip { font-size: 12px; }
.ai-send { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #efe6cf; align-items: flex-end; }
.ai-send textarea { flex: 1; resize: none; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 10px; border: 1px solid #d9cfb6; }
.ai-foot { margin: 0; padding: 0 12px 10px; font-size: 11px; color: #5f6275; }
.t-app .ai-fab { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.t-app .ai-panel { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Training memory: lessons and curriculum ideas (light panel) ---------- */
.mem-panel.mem-light { background: #fbf7ee; color: #1d2433; }
.mem-light .mem-h span { color: #0B1F4B; } .mem-light .mem-h small { color: #5f6275; }
.mem-learn-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 12px; }
.mem-learn-bar .field { min-width: 240px; }
.mem-learn-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .mem-learn-grid { grid-template-columns: 1fr; } }
.mem-lessons { display: grid; gap: 8px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.mem-lesson { background: #fff; border: 1px solid #efe6cf; border-left: 4px solid #C29A45; border-radius: 10px; padding: 10px 12px; }
.mem-lesson p { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.mem-lesson[data-kind="Weak question"], .mem-lesson[data-kind="Hard session"] { border-left-color: #b3261e; }
.mem-lesson[data-kind="Low attendance"] { border-left-color: #f6a742; }
.mem-lesson[data-kind^="Feedback"], .mem-lesson[data-kind="Trainee question"] { border-left-color: #2a9d8f; }
.mem-lesson.pinned { box-shadow: 0 0 0 2px #C29A45; }
.mem-ideas { background: #fff; border: 1px solid #efe6cf; border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.mem-ideas h3 { margin: 0; font-size: 16px; color: #0B1F4B; }
.mem-idea { border-top: 1px solid #efe6cf; padding-top: 8px; } .mem-idea.Done { opacity: .6; } .mem-idea.Accepted b { color: #2e7d4f; }
.ai-panel,.ai-panel .ai-bubble,.ai-panel textarea{color:#1d2433}.ai-panel{background:#fff}.ai-msg.bot .ai-bubble{background:#fff;color:#1d2433}.ai-msg.me .ai-bubble{color:#fff}.ai-panel textarea{background:#fff}.ai-hints .chip{background:#fff;color:#0B1F4B;border:1px solid #d9cfb6}

/* mind map on phones (4.3.1): no overlapping labels, one clean search box, compact legend */
.mm .mm-search { -webkit-appearance: none; appearance: none; min-height: 0; line-height: 20px; }
.mm .mm-search::-webkit-search-decoration, .mm .mm-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.mm-compact .mm-node:not(.big):not(.sel):not(:focus) text { display: none; }
.mm-compact .mm-node text { font-size: 10px; }
@media (max-width: 700px) {
  .mm { height: 520px; }
  .mm-bar { left: 8px; right: 8px; top: 8px; gap: 6px; }
  .mm-title { font-size: 10px; }
  .mm .mm-search { width: 100%; height: 32px; }
  .mm-legend { left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px; font-size: 10.5px; }
  .mm-insp { top: 86px; max-height: calc(100% - 140px); }
}
.mm-insp[hidden] { display: none !important; }

/* mind map: past (closed) batches */
.mm .mm-past { height: 30px; margin: 0 0 0 8px; background: #1a1c26; border: 1px solid #2a2d3b; color: #d8dbe6; border-radius: 6px; padding: 4px 10px; font: 12px ui-monospace, monospace; cursor: pointer; white-space: nowrap; }
.mm .mm-past.on { border-color: #7ed957; color: #7ed957; }
.mm .mm-node.past .mm-core { opacity: .55; }