:root {
  --ink: #14302b;
  --ink-soft: #526b65;
  --paper: #f5f2ea;
  --surface: #fffdf8;
  --surface-2: #eeebe2;
  --line: #d9d5ca;
  --brand: #0c4b41;
  --brand-2: #147867;
  --accent: #d99d45;
  --danger: #a64634;
  --success: #24745d;
  --shadow: 0 18px 45px rgba(25, 48, 42, .08);
  --radius: 22px;
  --radius-sm: 14px;
  --sidebar: 230px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% -10%, rgba(217,157,69,.18), transparent 30rem),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  min-height: 76px; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(245,242,234,.88); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(20,48,43,.08);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 15px;
  display: grid; place-items: center; background: var(--brand); box-shadow: var(--shadow);
}
.brand-mark svg { width: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.brand span { display: block; color: var(--ink-soft); font-size: .78rem; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  border: 1px solid transparent; border-radius: 12px; padding: 10px 14px;
  font-weight: 750; cursor: pointer; transition: .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--brand); color: white; }
.btn.ghost { background: rgba(255,255,255,.55); border-color: var(--line); }
.app-shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: calc(100vh - 76px); }
.sidebar {
  position: sticky; top: 76px; height: calc(100vh - 76px); align-self: start;
  padding: 24px 16px; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid rgba(20,48,43,.1);
}
.nav-list { display: grid; gap: 7px; }
.nav-item {
  width: 100%; border: 0; background: transparent; cursor: pointer;
  border-radius: 14px; padding: 13px 12px; text-align: left;
  display: flex; align-items: center; gap: 11px; font-weight: 700; color: var(--ink-soft);
}
.nav-item span { font-size: .72rem; font-weight: 900; letter-spacing: .08em; opacity: .65; }
.nav-item:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.nav-item.active { background: var(--brand); color: white; box-shadow: var(--shadow); }
.sidebar-note { padding: 16px; background: rgba(255,255,255,.52); border: 1px solid var(--line); border-radius: 16px; }
.sidebar-note p { margin: 6px 0 0; font-size: .82rem; color: var(--ink-soft); }
.main { padding: 26px clamp(18px, 3vw, 44px) 72px; min-width: 0; }
.card {
  background: rgba(255,253,248,.92); border: 1px solid rgba(20,48,43,.1);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.meta-card {
  padding: 15px; display: grid; grid-template-columns: 1.3fr 1fr 1fr .65fr; gap: 12px; margin-bottom: 24px;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .75rem; color: var(--ink-soft); font-weight: 800; letter-spacing: .025em; }
input, select, textarea {
  width: 100%; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 11px; outline: none; transition: .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(20,120,103,.12); }
.panel { display: none; }
.panel.active { display: block; animation: reveal .25s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(5px); } }
.hero {
  min-height: 320px; padding: clamp(28px, 5vw, 62px);
  display: grid; grid-template-columns: 1fr 230px; align-items: end; gap: 40px;
  color: white; border-radius: 30px; overflow: hidden; position: relative;
  background:
    linear-gradient(120deg, rgba(12,75,65,.98), rgba(16,55,49,.92)),
    var(--brand);
  box-shadow: 0 28px 70px rgba(12,75,65,.2);
}
.hero::after {
  content:""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; right: -110px; top: -190px; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { max-width: 760px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 5vw, 4.7rem); line-height: .98; letter-spacing: -.045em; margin: 10px 0 20px; font-weight: 500; }
.hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.76); font-size: 1.02rem; }
.hero-score { justify-self: end; width: 210px; padding: 22px; border-radius: 22px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); }
.hero-score span, .hero-score small { display: block; color: rgba(255,255,255,.68); }
.hero-score strong { display: block; font-size: 3.4rem; letter-spacing: -.06em; margin: 4px 0; }
.eyebrow { text-transform: uppercase; font-size: .68rem; letter-spacing: .14em; font-weight: 900; color: var(--accent); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.kpi { padding: 18px; text-align: left; border: 1px solid rgba(20,48,43,.09); cursor: pointer; transition: .2s; }
.kpi:hover { transform: translateY(-3px); }
.kpi span, .kpi small { display: block; color: var(--ink-soft); }
.kpi span { font-size: .82rem; font-weight: 800; }
.kpi strong { display: block; font-size: 2.1rem; letter-spacing: -.05em; margin: 4px 0; }
.progress { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 14px; }
.progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), var(--accent)); transition: width .35s ease; }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.dashboard-grid > .card { padding: 24px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.section-heading h1, .section-heading h2, .section-heading h3 { margin: 4px 0; letter-spacing: -.035em; }
.section-heading h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2rem, 4vw, 3.7rem); }
.section-heading h2 { font-size: 1.45rem; }
.section-heading p { margin: 4px 0 0; color: var(--ink-soft); }
.text-btn { border: 0; background: transparent; color: var(--brand-2); font-weight: 850; cursor: pointer; }
.next-action { border-radius: 16px; padding: 18px; background: #e5f2ed; border-left: 4px solid var(--success); font-weight: 750; }
.next-action.empty { background: var(--surface-2); border-left-color: var(--line); color: var(--ink-soft); font-weight: 600; }
.insight-list { display: grid; gap: 9px; margin-top: 14px; }
.insight-row { padding: 12px 0; display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--line); }
.insight-row:last-child { border-bottom: 0; }
.insight-row span { color: var(--ink-soft); }
.saved-list { display: grid; gap: 9px; }
.saved-empty { color: var(--ink-soft); padding: 20px 0; }
.saved-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 13px; border-radius: 14px; background: var(--surface-2); }
.saved-item strong, .saved-item small { display: block; }
.saved-item small { color: var(--ink-soft); margin-top: 2px; }
.saved-actions { display: flex; gap: 5px; }
.icon-btn { border: 1px solid var(--line); background: white; border-radius: 9px; padding: 7px 9px; cursor: pointer; }
.sticky-heading {
  position: sticky; top: 76px; z-index: 15; padding: 18px 0 12px;
  background: linear-gradient(var(--paper) 80%, transparent);
}
.score-chip { min-width: 135px; padding: 13px 16px; border-radius: 16px; background: var(--brand); color: white; text-align: right; }
.score-chip span { display: block; font-size: .7rem; opacity: .7; }
.score-chip strong { display: block; font-size: 1.9rem; line-height: 1.1; }
.module-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 20px; }
.question-list { display: grid; gap: 12px; }
.question-card { padding: 17px; border-radius: 18px; background: rgba(255,253,248,.88); border: 1px solid rgba(20,48,43,.1); }
.question-head { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; }
.question-no { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); font-size: .75rem; font-weight: 900; }
.question-card h3 { font-size: 1rem; margin: 0; }
.question-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; color: var(--ink-soft); font-size: .75rem; }
.question-meta span { padding-right: 8px; border-right: 1px solid var(--line); }
.question-meta span:last-child { border: 0; }
.answer-guide { margin: 15px 0 0 45px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: rgba(255,255,255,.72); }
.guide-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.guide-heading strong, .guide-heading span { display: block; }
.guide-heading strong { font-size: .82rem; }
.guide-heading div > span { margin-top: 3px; color: var(--ink-soft); font-size: .7rem; line-height: 1.4; }
.human-judgment { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(12,75,65,.18); border-radius: 999px; background: #e5f2ed; color: var(--success); font-size: .64rem !important; font-weight: 900; white-space: nowrap; }
.guide-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.guide-item { display: grid; grid-template-columns: 30px 1fr; gap: 9px; min-height: 78px; padding: 11px 12px; border-bottom: 1px solid var(--line); transition: background .16s, box-shadow .16s; }
.guide-item:nth-child(odd) { border-right: 1px solid var(--line); }
.guide-item:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.guide-score { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 950; font-size: .8rem; }
.guide-item strong { display: block; font-size: .72rem; }
.guide-item p { margin: 4px 0 0; color: var(--ink-soft); font-size: .73rem; line-height: 1.42; }
.guide-level-1 .guide-score, .guide-level-2 .guide-score { background: #f7e9e5; color: var(--danger); }
.guide-level-4 .guide-score, .guide-level-5 .guide-score { background: #e5f2ed; color: var(--success); }
.guide-item.selected { background: #edf6f2; box-shadow: inset 4px 0 0 var(--brand); }
.guide-item.selected .guide-score { background: var(--brand); border-color: var(--brand); color: white; }
.final-score-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 14px 0 6px 45px; }
.final-score-heading strong { font-size: .78rem; }
.final-score-heading span { color: var(--ink-soft); font-size: .68rem; }
.score-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 0 0 10px 45px; }
.score-option { position: relative; }
.score-option input { position: absolute; opacity: 0; pointer-events: none; }
.score-option label { display: grid; place-items: center; align-content: center; gap: 1px; min-height: 48px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; font-weight: 850; background: white; }
.score-option label b { font-size: .95rem; line-height: 1; }
.score-option label small { color: var(--ink-soft); font-size: .56rem; font-weight: 750; }
.score-option input:checked + label small { color: rgba(255,255,255,.74); }
.score-option input:checked + label { background: var(--brand); border-color: var(--brand); color: white; box-shadow: 0 8px 20px rgba(12,75,65,.17); }
.note-input { margin-left: 45px; width: calc(100% - 45px); padding: 8px 10px; background: transparent; }
.result-stack { display: grid; gap: 14px; position: sticky; top: 192px; }
.result-stack .card { padding: 20px; }
.result-card .big-score { font-size: 4rem; letter-spacing: -.07em; line-height: 1; margin: 8px 0; }
.result-card .status { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #e5f2ed; color: var(--success); font-weight: 850; font-size: .78rem; }
.result-card p { color: var(--ink-soft); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.result-mini { background: var(--surface-2); border-radius: 12px; padding: 11px; }
.result-mini span, .result-mini strong { display: block; }
.result-mini span { font-size: .68rem; color: var(--ink-soft); }
.bar-list { display: grid; gap: 11px; margin-top: 15px; }
.bar-row { display: grid; grid-template-columns: 105px 1fr 42px; align-items: center; gap: 8px; font-size: .78rem; }
.bar-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 7px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-track i { display: block; height: 100%; background: var(--brand-2); border-radius: inherit; }
.action-list, .metric-list, .check-list { display: grid; gap: 9px; margin-top: 14px; }
.action-row, .metric-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.action-row:last-child, .metric-row:last-child { border-bottom: 0; }
.action-row span, .metric-row span { color: var(--ink-soft); }
.badge { padding: 4px 8px; border-radius: 999px; background: var(--surface-2); font-size: .7rem; font-weight: 900; white-space: nowrap; }
.badge.yes { background: #dcefe7; color: var(--success); }
.badge.no { background: #f3e1dc; color: var(--danger); }
.check-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.check-item input { width: 18px; height: 18px; accent-color: var(--brand); }
.valuation-strip { padding: 16px; margin-bottom: 17px; display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 10px; align-items: stretch; }
.input-affix { position: relative; }
.input-affix span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.input-affix input { padding-left: 29px; }
.valuation-item { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.valuation-item span, .valuation-item strong { display: block; }
.valuation-item span { color: var(--ink-soft); font-size: .72rem; }
.valuation-item strong { margin-top: 4px; font-size: 1.04rem; }
.valuation-item.emphasis { background: var(--brand); color: white; }
.valuation-item.emphasis span { color: rgba(255,255,255,.68); }
.criteria-groups { display: grid; gap: 16px; }
.criteria-group { overflow: hidden; background: rgba(255,253,248,.88); border: 1px solid rgba(20,48,43,.1); border-radius: 20px; }
.criteria-title { padding: 14px 17px; background: var(--surface-2); display: flex; justify-content: space-between; align-items: center; }
.criteria-title h2 { margin: 0; font-size: 1rem; }
.criteria-title span { font-size: .72rem; color: var(--ink-soft); }
.criterion-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(170px, 1.2fr) 70px 82px; gap: 10px; align-items: center; padding: 13px 17px; border-top: 1px solid var(--line); }
.criterion-name strong, .criterion-name small { display: block; }
.criterion-name small { color: var(--ink-soft); font-size: .68rem; }
.criterion-score { text-align: center; font-weight: 900; font-size: 1.15rem; }
.criterion-effect { text-align: right; font-size: .72rem; font-weight: 800; }
.effect-positive { color: var(--success); }
.effect-negative { color: var(--danger); }
.effect-neutral { color: var(--ink-soft); }
.mode-switch { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: 14px; margin-bottom: 18px; }
.mode-switch button { border: 0; background: transparent; padding: 10px 16px; border-radius: 11px; cursor: pointer; font-weight: 800; }
.mode-switch button.active { background: var(--brand); color: white; }
.quick-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 20px; align-items: start; }
.slider-list { padding: 22px; display: grid; gap: 17px; }
.slider-item { display: grid; grid-template-columns: 170px 1fr 52px; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.slider-item:last-child { border-bottom: 0; padding-bottom: 0; }
.slider-item strong, .slider-item small { display: block; }
.slider-item small { color: var(--ink-soft); margin-top: 2px; }
input[type="range"] { padding: 0; accent-color: var(--brand); }
.slider-output, .range-row output { display: grid; place-items: center; min-height: 42px; border-radius: 11px; background: var(--surface-2); font-weight: 900; }
.quick-result .big-score { font-size: 4.8rem; line-height: .9; letter-spacing: -.08em; }
.formula-box { margin-top: 16px; padding: 13px; background: var(--surface-2); border-radius: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--ink-soft); }
.range-row { display: grid; grid-template-columns: 1fr 58px; gap: 12px; align-items: center; margin-top: 14px; }
.muted { color: var(--ink-soft); font-size: .84rem; }
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; padding: 12px 16px;
  border-radius: 12px; background: var(--ink); color: white; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s;
}
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 1120px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .module-layout, .quick-layout { grid-template-columns: 1fr; }
  .result-stack { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .result-stack .result-card { grid-row: span 2; }
}
@media (max-width: 860px) {
  .topbar { align-items: flex-start; padding: 11px 14px; }
  .top-actions .btn.ghost { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: 70px; height: auto; z-index: 25; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--line); background: rgba(245,242,234,.94); backdrop-filter: blur(15px);
  }
  .nav-list { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .nav-item { width: auto; flex: 0 0 auto; padding: 9px 11px; }
  .sidebar-note { display: none; }
  .main { padding: 17px 13px 60px; }
  .meta-card { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 32px 24px; }
  .hero-score { justify-self: start; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .sticky-heading { top: 122px; }
  .valuation-strip { grid-template-columns: 1fr 1fr; }
  .criterion-row { grid-template-columns: 1fr 1fr; }
  .criterion-score, .criterion-effect { text-align: left; }
}
@media (max-width: 570px) {
  .brand span { display: none; }
  .top-actions .btn { padding: 9px 11px; }
  .meta-card, .kpi-grid, .result-stack, .valuation-strip { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.45rem; }
  .section-heading { align-items: flex-end; }
  .score-chip { min-width: 108px; }
  .question-card { padding: 14px; }
  .answer-guide, .final-score-heading, .score-row, .note-input { margin-left: 0; width: 100%; }
  .guide-heading { display: grid; }
  .human-judgment { justify-self: start; }
  .guide-list { grid-template-columns: 1fr; }
  .guide-item, .guide-item:nth-child(odd), .guide-item:last-child { grid-column: auto; border-right: 0; }
  .slider-item { grid-template-columns: 1fr 52px; }
  .slider-item input { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
  body { background: white; }
  .topbar, .sidebar, .top-actions, .meta-card .field.compact, .mode-switch, .btn, .text-btn { display: none !important; }
  .app-shell { display: block; }
  .main { padding: 0; }
  .panel { display: none !important; }
  body[data-active-panel="dashboard"] #dashboard,
  body[data-active-panel="profile"] #profile,
  body[data-active-panel="finance"] #finance,
  body[data-active-panel="appraisal"] #appraisal,
  body[data-active-panel="quick"] #quick { display: block !important; }
  .meta-card { display: grid; box-shadow: none; border: 1px solid #bbb; margin-bottom: 12px; }
  .card, .question-card, .criteria-group { box-shadow: none; break-inside: avoid; background: white; }
  .sticky-heading, .result-stack { position: static; }
  .module-layout, .quick-layout { grid-template-columns: 1fr; }
  .result-stack { grid-template-columns: repeat(2,1fr); }
}

/* Chapter 2: consultant and manager performance modules */
body[data-active-panel="selfAssessment"] .meta-card,
body[data-active-panel="managerEvaluation"] .meta-card { display: none; }
body[data-active-panel="selfAssessment"] #saveCaseBtn,
body[data-active-panel="managerEvaluation"] #saveCaseBtn { display: none; }
.performance-panel { --performance-accent: #147867; }
.performance-toolbar {
  display: grid;
  grid-template-columns: .8fr 1fr minmax(220px, 1.5fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin-bottom: 18px;
}
.performance-toolbar:has(> .field:nth-child(5)) { grid-template-columns: .7fr 1fr .8fr 1fr .7fr auto; }
.field-wide { min-width: 220px; }
.inline-actions { display: flex; align-items: end; justify-content: flex-end; gap: 8px; padding-bottom: 1px; flex-wrap: wrap; }
.performance-layout { grid-template-columns: minmax(0, 1fr) 380px; }
.performance-criteria { display: grid; gap: 14px; }
.performance-criterion { padding: 18px; }
.performance-criterion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.performance-criterion-head > div { min-width: 0; }
.performance-criterion-head h3 { display: inline; margin: 0 0 0 8px; font-size: 1.12rem; }
.performance-criterion-head p { margin: 7px 0 0; color: var(--ink-soft); font-size: .84rem; }
.criterion-code {
  display: inline-grid; place-items: center; width: 31px; height: 31px;
  border-radius: 10px; background: var(--brand); color: white; font-size: .75rem; font-weight: 950;
}
.weight-badge { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #e5f2ed; color: var(--success); font-size: .68rem; font-weight: 900; }
.evidence-line { margin: 14px 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink-soft); font-size: .76rem; }
.evidence-line strong { color: var(--ink); }
.calibration-guide { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: rgba(255,255,255,.65); }
.calibration-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.calibration-band { min-height: 132px; padding: 12px; border-right: 1px solid var(--line); transition: .16s ease; }
.calibration-band:last-child { border-right: 0; }
.calibration-band strong { display: block; font-size: .73rem; }
.calibration-band p { margin: 6px 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.45; }
.calibration-band.selected { background: #edf6f2; box-shadow: inset 0 -4px 0 var(--brand); }
.calibration-band:nth-child(1).selected { background: #f7e9e5; box-shadow: inset 0 -4px 0 var(--danger); }
.calibration-band:nth-child(2).selected { background: #f7f0df; box-shadow: inset 0 -4px 0 var(--accent); }
.performance-score-line { display: grid; grid-template-columns: 1fr 92px; align-items: center; gap: 14px; margin: 14px 0 10px; }
.performance-score-line strong, .performance-score-line span { display: block; }
.performance-score-line strong { font-size: .82rem; }
.performance-score-line span { margin-top: 2px; color: var(--ink-soft); font-size: .7rem; }
.performance-score-line input { text-align: center; font-size: 1.25rem; font-weight: 900; }
.performance-criterion textarea { resize: vertical; background: rgba(255,255,255,.75); }
.form-stack { display: grid; gap: 10px; margin-top: 14px; }
.form-stack textarea { resize: vertical; }
.data-card, .advisor-registry-card { padding: 22px; margin-top: 18px; }
.compact-heading { margin-bottom: 14px; align-items: center; }
.compact-heading h2 { margin: 2px 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.data-table { width: 100%; min-width: 820px; border-collapse: collapse; background: rgba(255,255,255,.6); font-size: .78rem; }
.data-table th, .data-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--ink-soft); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(229,242,237,.5); }
.table-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--surface-2); font-size: .68rem; font-weight: 850; }
.empty-cell { color: var(--ink-soft); text-align: center !important; padding: 24px !important; }
.row-actions { white-space: nowrap; }
.row-actions button { border: 1px solid var(--line); border-radius: 8px; background: white; padding: 5px 7px; margin-right: 4px; cursor: pointer; font-size: .68rem; }
.performance-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.mini-kpi { padding: 15px; min-width: 0; }
.mini-kpi span, .mini-kpi strong { display: block; }
.mini-kpi span { min-height: 34px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.mini-kpi strong { margin-top: 5px; font-size: 1.55rem; letter-spacing: -.04em; overflow-wrap: anywhere; }
.registry-form { display: grid; grid-template-columns: 1.2fr 1fr .8fr .65fr .65fr .6fr minmax(180px,1fr) auto; gap: 10px; align-items: end; }
.advisor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.advisor-chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 9px 11px; text-align: left; cursor: pointer; }
.advisor-chip strong, .advisor-chip span { display: block; }
.advisor-chip strong { font-size: .76rem; }
.advisor-chip span { margin-top: 2px; color: var(--ink-soft); font-size: .65rem; }
.advisor-chip.inactive { opacity: .55; }

@media (max-width: 1320px) {
  .performance-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .registry-form { grid-template-columns: repeat(4, 1fr); }
  .registry-form .field-wide { grid-column: span 2; }
}
@media (max-width: 1120px) {
  .performance-layout { grid-template-columns: 1fr; }
  .performance-toolbar, .performance-toolbar:has(> .field:nth-child(5)) { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .performance-toolbar .inline-actions { grid-column: 1 / -1; }
  .calibration-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .calibration-band { border-bottom: 1px solid var(--line); }
  .calibration-band:nth-child(2) { border-right: 0; }
  .calibration-band:nth-child(3), .calibration-band:nth-child(4) { border-bottom: 0; }
}
@media (max-width: 720px) {
  .performance-kpi-grid, .registry-form { grid-template-columns: 1fr 1fr; }
  .registry-form .field-wide { grid-column: 1 / -1; }
  .performance-toolbar, .performance-toolbar:has(> .field:nth-child(5)) { grid-template-columns: 1fr; }
  .performance-toolbar .inline-actions { grid-column: auto; justify-content: stretch; }
  .performance-toolbar .inline-actions .btn { flex: 1; }
  .calibration-grid { grid-template-columns: 1fr; }
  .calibration-band, .calibration-band:nth-child(2), .calibration-band:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); min-height: auto; }
  .calibration-band:last-child { border-bottom: 0; }
  .performance-score-line { grid-template-columns: 1fr 76px; }
}
@media (max-width: 500px) {
  .performance-kpi-grid, .registry-form { grid-template-columns: 1fr; }
  .registry-form .field-wide { grid-column: auto; }
  .performance-criterion-head { display: grid; }
  .weight-badge { justify-self: start; }
}
@media print {
  body[data-active-panel="selfAssessment"] #selfAssessment,
  body[data-active-panel="managerEvaluation"] #managerEvaluation { display: block !important; }
  .performance-toolbar .inline-actions, .advisor-registry-card, .row-actions, #exportPerformanceBtn { display: none !important; }
  .performance-kpi-grid { grid-template-columns: repeat(3,1fr); }
  .calibration-grid { grid-template-columns: repeat(4,1fr); }
  .data-table { min-width: 0; font-size: .68rem; }
}
@media (min-width: 1121px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Prevent wide history tables from expanding the mobile page; they scroll inside their card. */
.performance-panel,
.performance-panel > *,
.performance-layout,
.performance-layout > *,
.data-card,
.table-wrap { min-width: 0; max-width: 100%; }
.table-wrap { width: 100%; }
@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar, .main { min-width: 0; max-width: 100vw; }
  .nav-list { max-width: 100%; }
}

/* =========================================================
   V4 UX: guided, accessible and mobile-friendly experience
   ========================================================= */
:root {
  --focus-ring: 0 0 0 4px rgba(20,120,103,.18);
  --topbar-height: 76px;
}

body { padding-bottom: 0; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid rgba(20,120,103,.35);
  outline-offset: 3px;
}
.hidden { display: none !important; }
.skip-link {
  position: fixed; z-index: 200; top: 8px; left: 8px; transform: translateY(-140%);
  padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 800;
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }
.icon-control {
  display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.68); cursor: pointer;
}
.icon-control svg, .help-btn svg, .goal-card svg, .mobile-action-bar svg, .question-no svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle, .sidebar-close { display: none; }
.help-btn { display: inline-flex; align-items: center; gap: 7px; }
.help-btn svg { width: 18px; }
.save-status {
  display: inline-flex; align-items: center; gap: 7px; align-self: center; margin-right: 3px;
  color: var(--ink-soft); font-size: .7rem; font-weight: 750; white-space: nowrap;
}
.save-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(36,116,93,.1); }
.save-status.saving .save-dot { background: var(--accent); animation: savePulse .8s infinite alternate; }
@keyframes savePulse { to { transform: scale(1.35); } }

.nav-group-label {
  padding: 16px 10px 5px; color: var(--ink-soft); opacity: .72;
  font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.nav-group-label:first-child { padding-top: 0; }
.sidebar-collapse {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; margin-bottom: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.45);
  color: var(--ink-soft); font-size: .72rem; font-weight: 800; cursor: pointer;
}
.sidebar-collapse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.sidebar { overflow-y: auto; }
.sidebar-note { flex: 0 0 auto; }
.sidebar-backdrop { display: none; }

@media (min-width: 861px) {
  body.sidebar-collapsed { --sidebar: 82px; }
  body.sidebar-collapsed .sidebar { padding-inline: 12px; }
  body.sidebar-collapsed .nav-item { justify-content: center; padding-inline: 8px; font-size: 0; }
  body.sidebar-collapsed .nav-item span { font-size: .72rem; opacity: 1; }
  body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .sidebar-note, body.sidebar-collapsed .sidebar-collapse span { display: none; }
  body.sidebar-collapsed .sidebar-collapse { justify-content: center; }
  body.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
}

.quick-start {
  display: grid; grid-template-columns: minmax(190px,.7fr) 2fr; gap: 24px; align-items: center;
  margin: 18px 0; padding: 22px;
}
.quick-start-copy h2 { margin: 5px 0; font-size: 1.35rem; letter-spacing: -.03em; }
.quick-start-copy p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.goal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.goal-card {
  display: grid; grid-template-columns: 38px 1fr 20px; gap: 11px; align-items: center; min-width: 0;
  padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.72);
  text-align: left; cursor: pointer; transition: transform .16s, border-color .16s, background .16s;
}
.goal-card:hover { transform: translateY(-2px); border-color: rgba(20,120,103,.4); background: #fff; }
.goal-card > span:nth-child(2) { min-width: 0; }
.goal-card strong, .goal-card small { display: block; }
.goal-card strong { font-size: .82rem; }
.goal-card small { margin-top: 2px; color: var(--ink-soft); font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e5f2ed; color: var(--brand); font-size: .7rem; font-weight: 950; }
.goal-card > svg { width: 17px; color: var(--ink-soft); }

.saved-search { position: relative; display: block; margin: -6px 0 13px; }
.saved-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--ink-soft); stroke-width: 2; pointer-events: none; }
.saved-search input { padding-left: 36px; background: rgba(255,255,255,.75); }
.saved-main { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.saved-main > span:last-child { min-width: 0; }
.saved-main strong, .saved-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-avatar { display: grid !important; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--brand); color: #fff; font-weight: 900; }
.danger-action { color: var(--danger); }
.saved-empty-state { padding: 22px 10px; text-align: center; color: var(--ink-soft); }
.saved-empty-state strong, .saved-empty-state p { display: block; }
.saved-empty-state p { margin: 5px auto 0; max-width: 300px; font-size: .8rem; }
.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 9px; border-radius: 14px; background: var(--surface-2); color: var(--brand); font-size: 1.35rem; }

.module-toolbar {
  display: grid; grid-template-columns: 180px minmax(130px,1fr) auto; gap: 18px; align-items: center;
  padding: 14px 16px; margin-bottom: 16px; position: sticky; top: 174px; z-index: 14;
  box-shadow: 0 12px 30px rgba(25,48,42,.07);
}
.module-progress-copy span, .module-progress-copy strong, .module-progress-copy small { display: block; }
.progress-kicker { color: var(--ink-soft); font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.module-progress-copy strong { margin-top: 2px; font-size: .92rem; }
.module-progress-copy small { margin-top: 1px; color: var(--ink-soft); font-size: .66rem; }
.module-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.module-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--brand-2),var(--accent)); transition: width .25s ease; }
.module-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.compact { min-height: 36px; padding: 7px 10px; border-radius: 10px; font-size: .7rem; }
.segmented { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--surface-2); }
.segmented button { min-height: 30px; border: 0; border-radius: 8px; padding: 5px 9px; background: transparent; color: var(--ink-soft); font-size: .67rem; font-weight: 850; cursor: pointer; }
.segmented button.active { background: #fff; color: var(--brand); box-shadow: 0 3px 9px rgba(20,48,43,.1); }

.question-card { scroll-margin-top: 255px; transition: border-color .2s, background .2s, box-shadow .2s, opacity .2s; }
.question-card.completed { border-color: rgba(36,116,93,.25); background: rgba(250,255,252,.93); }
.question-card.attention-pulse { box-shadow: 0 0 0 5px rgba(217,157,69,.22), var(--shadow); }
.question-head { grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; }
.question-title-wrap { min-width: 0; }
.question-state { padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: .62rem; font-weight: 850; white-space: nowrap; }
.question-card.completed .question-state { background: #dcefe7; color: var(--success); }
.question-card.completed .question-no { background: var(--success); color: #fff; }
.question-no svg { width: 17px; }
.score-block { margin: 14px 0 0 47px; padding: 13px; border-radius: 14px; background: rgba(238,235,226,.55); }
.final-score-heading { margin: 0 0 8px; }
.score-row { margin: 0; }
.score-option label { min-height: 52px; }
.score-option label small { font-size: .61rem; }

.answer-guide { margin: 10px 0 0 47px; }
.answer-guide > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 13px;
  cursor: pointer; list-style: none; background: rgba(255,255,255,.72);
}
.answer-guide > summary::-webkit-details-marker { display: none; }
.answer-guide > summary strong, .answer-guide > summary small { display: block; }
.answer-guide > summary strong { font-size: .76rem; }
.answer-guide > summary small { margin-top: 2px; color: var(--ink-soft); font-size: .66rem; }
.answer-guide[open] > summary { border-bottom: 1px solid var(--line); }
.summary-chevron { font-size: 1.2rem; line-height: 1; transition: transform .18s; }
.answer-guide[open] .summary-chevron { transform: rotate(180deg); }
.answer-guide .guide-heading { border-top: 0; }
.question-note { display: grid; gap: 6px; margin: 10px 0 0 47px; }
.question-note > span { color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.question-note > span small { font-weight: 600; }
.question-note textarea { resize: vertical; min-height: 56px; background: rgba(255,255,255,.72); }
.question-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 10px 0 0 47px; }
.question-actions .btn svg { width: 15px; height: 15px; vertical-align: -3px; }
.clear-score { margin-right: auto; color: var(--danger); font-size: .7rem; }

.appraisal-toolbar { top: 174px; }
.criteria-group { scroll-margin-top: 250px; }
.criteria-title { cursor: pointer; user-select: none; gap: 10px; }
.criteria-title h2 { margin-right: auto; }
.criteria-count { color: var(--ink-soft); font-size: .68rem; }
.group-toggle { width: 31px; height: 31px; flex: 0 0 auto; background: rgba(255,255,255,.65); transition: transform .2s; }
.criteria-group.collapsed .criteria-body { display: none; }
.criteria-group.collapsed .group-toggle { transform: rotate(-90deg); }
.criteria-group.group-complete .criteria-title { background: #e5f2ed; }
.criteria-column-head { display: grid; grid-template-columns: minmax(130px,1fr) minmax(170px,1.2fr) 70px 82px; gap: 10px; padding: 8px 17px; background: rgba(255,255,255,.55); color: var(--ink-soft); font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.performance-intro {
  display: grid; grid-template-columns: 42px minmax(0,1fr) 180px; gap: 13px; align-items: center;
  margin-bottom: 16px; padding: 15px 17px;
}
.tip-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #e5f2ed; color: var(--brand); }
.tip-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.performance-intro strong { font-size: .86rem; }
.performance-intro p { margin: 3px 0 0; color: var(--ink-soft); font-size: .73rem; }
.performance-inline-progress span { display: block; margin-bottom: 5px; color: var(--ink-soft); text-align: right; font-size: .67rem; font-weight: 800; }
.performance-inline-progress i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.performance-inline-progress b { display: block; width: 0; height: 100%; background: var(--brand-2); transition: width .2s; }
.performance-criterion.completed { border-color: rgba(36,116,93,.3); }
.calibration-guide .guide-heading { align-items: center; }
.calibration-toggle { flex: 0 0 auto; margin-left: auto; font-size: .7rem; }
.calibration-guide.collapsed .calibration-grid { display: none; }
.calibration-guide.collapsed .guide-heading { border-bottom: 0; }

.help-dialog {
  width: min(680px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); overflow: auto;
  padding: 0; border: 0; border-radius: 24px; color: var(--ink); background: var(--surface); box-shadow: 0 35px 100px rgba(10,34,29,.3);
}
.help-dialog::backdrop { background: rgba(11,32,28,.56); backdrop-filter: blur(4px); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 24px 24px 15px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 5px 0 0; font-size: 1.5rem; letter-spacing: -.04em; }
.help-steps { display: grid; gap: 0; padding: 8px 24px; }
.help-steps article { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.help-steps article:last-child { border-bottom: 0; }
.help-steps article > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--brand); color: #fff; font-size: .76rem; font-weight: 900; }
.help-steps strong { font-size: .88rem; }
.help-steps p { margin: 4px 0 0; color: var(--ink-soft); font-size: .78rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 24px 22px; background: var(--surface-2); }

.scroll-top { position: fixed; z-index: 70; right: 20px; bottom: 20px; opacity: 0; transform: translateY(10px); pointer-events: none; box-shadow: var(--shadow); transition: .2s; }
.scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-action-bar { display: none; }

@media (max-width: 1180px) {
  .module-toolbar { grid-template-columns: 160px 1fr; }
  .module-tools { grid-column: 1 / -1; justify-content: flex-start; }
  .quick-start { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { padding-bottom: 74px; }
  .topbar { min-height: 64px; padding: 9px 12px; flex-wrap: nowrap; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .brand span { display: none; }
  .brand strong { font-size: .94rem; }
  .menu-toggle { display: inline-grid; flex: 0 0 auto; }
  .top-actions { margin-left: auto; flex-wrap: nowrap; }
  .top-actions .help-btn span, .top-actions #exportBtn, .top-actions #printBtn, .save-status { display: none; }
  .top-actions .help-btn { display: inline-grid; width: 42px; height: 42px; padding: 0; }
  .top-actions #saveCaseBtn { min-height: 42px; padding: 8px 11px; font-size: .7rem; }
  .sidebar {
    display: flex !important; position: fixed; z-index: 110; inset: 0 auto 0 0; top: 0; width: min(330px,86vw); height: 100vh;
    padding: 18px 14px; background: var(--paper); transform: translateX(-105%); transition: transform .23s ease; box-shadow: 24px 0 60px rgba(11,32,28,.2);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: inline-grid; align-self: flex-end; margin-bottom: 8px; }
  .sidebar-backdrop { display: block; position: fixed; z-index: 105; inset: 0; border: 0; background: rgba(11,32,28,.42); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.menu-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .nav-list { overflow-y: auto; display: grid; grid-template-columns: 1fr; }
  .nav-item { white-space: normal; }
  .sidebar-collapse { display: none; }
  .main { padding: 16px 13px 64px; }
  .sticky-heading { top: 64px; padding-top: 13px; }
  .module-toolbar, .appraisal-toolbar { position: static; grid-template-columns: 1fr; gap: 10px; }
  .module-tools { grid-column: auto; justify-content: stretch; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .module-tools .btn { flex: 1; }
  .quick-start { padding: 18px; }
  .goal-grid { grid-template-columns: 1fr; }
  .question-card { scroll-margin-top: 85px; }
  .question-head { grid-template-columns: 36px minmax(0,1fr); }
  .question-state { grid-column: 2; justify-self: start; }
  .score-block, .answer-guide, .question-note, .question-actions { margin-left: 0; }
  .score-row { gap: 5px; }
  .score-option label { min-height: 55px; }
  .guide-list { grid-template-columns: 1fr; }
  .guide-item, .guide-item:nth-child(odd), .guide-item:last-child { grid-column: auto; border-right: 0; }
  .criteria-column-head { display: none; }
  .criterion-row { grid-template-columns: 1fr 85px; gap: 8px; }
  .criterion-row > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .criterion-score { grid-column: 1; text-align: left; font-size: .85rem; }
  .criterion-score::before { content: "Puan: "; color: var(--ink-soft); font-size: .67rem; }
  .criterion-effect { grid-column: 2; grid-row: 3; text-align: right; }
  .performance-intro { grid-template-columns: 38px 1fr; }
  .performance-inline-progress { grid-column: 1 / -1; }
  .performance-inline-progress span { text-align: left; }
  .mobile-action-bar {
    display: flex; position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(245,242,234,.94); border-top: 1px solid rgba(20,48,43,.12); backdrop-filter: blur(16px);
    transform: translateY(110%); transition: transform .2s;
  }
  .mobile-action-bar.visible { transform: translateY(0); }
  .mobile-action-bar .btn { flex: 1; min-height: 44px; font-size: .72rem; }
  .mobile-action-bar svg { width: 16px; vertical-align: -3px; }
  .scroll-top { right: 13px; bottom: 83px; }
}

@media (max-width: 560px) {
  .hero { min-height: 300px; padding: 25px 20px; }
  .hero h1 { font-size: 2.25rem; }
  .hero-score { width: 100%; justify-self: stretch; }
  .quick-start-copy h2 { font-size: 1.18rem; }
  .meta-card { border-radius: 17px; }
  .module-toolbar { border-radius: 17px; }
  .module-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .module-tools .segmented { grid-column: 1 / -1; }
  .score-block { padding: 10px; }
  .final-score-heading { display: grid; gap: 2px; }
  .score-option label small { max-width: 54px; text-align: center; line-height: 1.1; }
  .question-actions { display: grid; grid-template-columns: 1fr; }
  .clear-score { order: 2; margin: 0; }
  .question-actions .btn { width: 100%; }
  .answer-guide > summary small { display: none; }
  .guide-heading { padding: 10px; }
  .guide-heading .human-judgment { display: none; }
  .dialog-head, .help-steps, .dialog-actions { padding-inline: 17px; }
  .dialog-actions .btn { flex: 1; }
}

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

@media print {
  .menu-toggle, .help-btn, .save-status, .module-toolbar, .performance-intro, .mobile-action-bar, .scroll-top, .question-actions, .saved-search, .sidebar-backdrop { display: none !important; }
  .answer-guide { display: block; }
  .answer-guide > summary { display: none; }
  .answer-guide:not([open]) > *:not(summary) { display: block; }
  .criteria-group.collapsed .criteria-body, .calibration-guide.collapsed .calibration-grid { display: grid; }
}

/* V5 · Konut / Ticari / Arsa katmanları */
.property-mode-card{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,2.2fr);gap:22px;align-items:center;margin-bottom:24px;padding:20px 22px}
.property-mode-card>div:first-child{display:grid;gap:4px}.property-mode-card>div:first-child>strong{font-size:18px}.property-mode-card>div:first-child>small{color:var(--muted);line-height:1.45}
.property-mode-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.property-mode-buttons button{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px;text-align:left;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;cursor:pointer;transition:.2s ease;color:var(--ink)}
.property-mode-buttons button>span{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;font-size:22px}.property-mode-buttons button strong{align-self:end}.property-mode-buttons button small{color:var(--muted);line-height:1.25}
.property-mode-buttons button:hover,.property-mode-buttons button.active{border-color:var(--green);box-shadow:0 8px 24px rgba(12,50,44,.08);transform:translateY(-1px)}.property-mode-buttons button.active{background:#f4faf7}.property-mode-buttons button.active>span{background:var(--green);color:#fff}
.inline-layer-switch{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 18px;margin-bottom:18px}.inline-layer-switch>div:first-child{display:grid;gap:2px}.inline-layer-switch small{color:var(--muted)}
.segmented{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:13px}.segmented button{border:0;background:transparent;color:var(--muted);padding:10px 15px;border-radius:10px;font-weight:750;cursor:pointer;white-space:nowrap}.segmented button.active{background:var(--surface);color:var(--green);box-shadow:0 2px 8px rgba(22,39,36,.1)}
.property-layer[hidden]{display:none!important}.property-layer{animation:layerIn .25s ease}@keyframes layerIn{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
.layer-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 24px;margin-bottom:16px}.layer-intro h2{margin:4px 0 7px;font-family:var(--serif);font-size:clamp(25px,3vw,38px);line-height:1.05}.layer-intro p{margin:0;max-width:760px;color:var(--muted)}
.decision-note{max-width:330px;padding:14px 16px;border-radius:14px;background:#fff8e9;border:1px solid #efdcad;display:grid;gap:4px}.decision-note strong{color:#8b5c00}.decision-note span{font-size:12px;color:#715d34;line-height:1.4}
.transaction-switch{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;margin-bottom:16px}.transaction-switch>div:first-child{display:grid;gap:3px}
.layer-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,.72fr);gap:18px;align-items:start}.layer-main{display:grid;gap:12px}.layer-side{display:grid;gap:14px;position:sticky;top:94px}
.layer-group{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm)}.layer-group summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,#fff,#fbfbf8)}.layer-group summary::-webkit-details-marker{display:none}.layer-group summary>span{display:flex;align-items:center;gap:12px}.layer-group summary b{width:34px;height:34px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--green);font-size:12px}.layer-group summary strong{font-size:16px}.layer-group summary small{color:var(--muted)}.layer-group[open] summary{border-bottom:1px solid var(--line)}
.layer-fields{display:grid;gap:14px;padding:18px 20px 22px}.layer-fields.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.layer-fields.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.layer-field{display:grid;gap:7px;min-width:0}.layer-field>span{font-size:12px;font-weight:800;color:var(--ink);display:grid;gap:2px}.layer-field>span small{font-weight:500;color:var(--muted)}.layer-field input,.layer-field select{width:100%;min-width:0;border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px 12px;color:var(--ink);font:inherit}.layer-field input:focus,.layer-field select:focus{outline:3px solid rgba(11,92,79,.12);border-color:var(--green)}
.layer-field .input-affix{display:flex;align-items:center;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.layer-field .input-affix:focus-within{outline:3px solid rgba(11,92,79,.12);border-color:var(--green)}.layer-field .input-affix input{border:0;border-radius:0;outline:0;min-width:0}.layer-field .input-affix b,.layer-field .input-affix em{padding:0 10px;color:var(--muted);font-size:12px;font-style:normal;white-space:nowrap}.layer-field .input-affix b{padding-right:0}
.range-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px 20px 22px}.range-field{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(120px,1fr) 34px;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:#fff}.range-field>span{display:grid}.range-field strong{font-size:13px}.range-field small{font-size:11px;color:var(--muted)}.range-field input{width:100%;accent-color:var(--green)}.range-field output{text-align:right;font-weight:850;color:var(--green)}.compact-ranges{padding-top:0}
.traffic-table{padding:18px 20px 10px;display:grid;gap:8px}.traffic-head,.traffic-row{display:grid;grid-template-columns:120px repeat(4,1fr);gap:10px;align-items:center}.traffic-head{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 8px}.traffic-row{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff}.traffic-row>strong{font-size:13px}.traffic-row label{display:grid;grid-template-columns:1fr 30px;gap:5px;align-items:center}.traffic-row input{min-width:0;width:100%;accent-color:var(--green)}.traffic-row output{font-size:11px;font-weight:800;color:var(--green);text-align:right}
.finance-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 20px 22px}.finance-split>div{border:1px solid var(--line);border-radius:15px;background:#fbfbf8}.finance-split h3{margin:0;padding:15px 18px 0;font-size:16px}
.commercial-top-score{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}.commercial-top-score>div{display:flex;align-items:baseline;gap:5px}.commercial-top-score>div strong{font-family:var(--serif);font-size:58px;line-height:1;color:var(--green)}.commercial-top-score>div small{color:var(--muted)}.commercial-top-score>span{font-size:12px;background:#eaf6f1;color:var(--green);font-weight:800;padding:7px 9px;border-radius:999px}.commercial-summary h2{font-size:24px;margin:6px 0}.commercial-summary>p{color:var(--muted)}
.mini-bars{display:grid;gap:7px;margin:15px 0}.mini-bars>div{display:grid;grid-template-columns:72px 1fr 30px;gap:8px;align-items:center;font-size:11px}.mini-bars i{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}.mini-bars i b{display:block;height:100%;background:var(--green);border-radius:inherit}.mini-bars>div>strong{text-align:right}
.model-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:10px;padding:6px 8px;border-radius:999px;font-weight:700}.tag.good{background:#eaf6f1;color:#176a58}.tag.risk{background:#fff0ec;color:#a53d26}
.model-ranking{display:grid;gap:7px}.model-rank{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px;display:grid;grid-template-columns:28px 1fr 38px;gap:9px;align-items:center;text-align:left;color:var(--ink);width:100%}.model-rank:not(.static){cursor:pointer}.model-rank:not(.static):hover,.model-rank.active{border-color:var(--green);background:#f4faf7}.model-rank>span{width:28px;height:28px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:850}.model-rank>div{display:grid;gap:2px}.model-rank>div strong{font-size:12px}.model-rank>div small{font-size:10px;color:var(--muted)}.model-rank>b{text-align:right;font-size:18px;color:var(--green)}
.model-detail-score{display:flex;align-items:baseline;gap:8px;margin:15px 0}.model-detail-score strong{font-family:var(--serif);font-size:48px;color:var(--green)}.model-detail-score span{font-size:12px;font-weight:750}.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-columns h4{font-size:12px;margin:0 0 6px}.detail-line{font-size:11px;line-height:1.4;margin:6px 0;padding:7px 8px;border-radius:9px}.detail-line.good{background:#eef8f4;color:#176a58}.detail-line.risk{background:#fff3ef;color:#983e2b}
.financial-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.financial-metrics>div{border:1px solid var(--line);border-radius:11px;padding:10px;display:grid;gap:3px}.financial-metrics span{font-size:10px;color:var(--muted)}.financial-metrics strong{font-size:14px}.decision-box{border-radius:12px;padding:12px;margin:12px 0;background:var(--surface-2)}.decision-box p{font-size:12px;line-height:1.5;margin:5px 0 0}.decision-box.good{background:#eaf6f1;color:#155f50}.decision-box.warn{background:#fff6df;color:#795500}.decision-box.danger{background:#fff0ec;color:#8d3422}
[data-property-mode="commercial"].active,[data-commercial-transaction].active{--layer-accent:#9b5b14}.commercial-intro{border-top:4px solid #b77525}.land-intro{border-top:4px solid #7f6ca8}
body[data-property-mode="commercial"] #appraisal .score-chip{background:#fff4e5;color:#8e5417}body[data-property-mode="land"] #appraisal .score-chip{background:#f1ecfb;color:#5d4a84}

@media(max-width:1100px){.property-mode-card{grid-template-columns:1fr}.layer-grid{grid-template-columns:1fr}.layer-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.layer-fields.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.property-mode-buttons{grid-template-columns:1fr}.inline-layer-switch,.transaction-switch,.layer-intro{align-items:stretch;flex-direction:column}.inline-layer-switch .segmented,.transaction-switch .segmented{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.transaction-switch .segmented{grid-template-columns:repeat(2,1fr)}.segmented button{padding:10px 7px}.layer-grid{display:block}.layer-side{display:grid;grid-template-columns:1fr;margin-top:14px}.layer-fields.cols-2,.layer-fields.cols-3,.range-grid,.finance-split{grid-template-columns:1fr}.traffic-head,.traffic-row{grid-template-columns:72px repeat(4,minmax(45px,1fr));gap:5px}.traffic-row label{grid-template-columns:1fr}.traffic-row output{text-align:center}.range-field{grid-template-columns:1fr 1fr 34px}.detail-columns{grid-template-columns:1fr}.decision-note{max-width:none}.property-mode-card{padding:15px}.layer-group summary{padding:14px}.layer-group summary small{display:none}.financial-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.financial-metrics{grid-template-columns:1fr}.traffic-table{padding-left:10px;padding-right:10px}.traffic-head{font-size:9px}.range-field{grid-template-columns:1fr 34px}.range-field>span{grid-column:1/-1}}

/* V6 · Görsel kalite, okunabilirlik ve form eylemleri */
:root {
  --green: var(--brand);
  --muted: var(--ink-soft);
  --serif: Georgia, "Times New Roman", serif;
  --shadow-sm: 0 8px 24px rgba(20, 48, 43, .065);
  --shadow-md: 0 18px 48px rgba(20, 48, 43, .10);
  --shadow-focus: 0 0 0 4px rgba(20, 120, 103, .13);
  --surface-glass: rgba(255, 254, 250, .88);
  --commercial-accent: #b66e22;
  --commercial-soft: #fff4e6;
  --land-accent: #735f9a;
  --land-soft: #f3eefb;
}

body {
  background:
    radial-gradient(circle at 88% -8%, rgba(217, 157, 69, .15), transparent 30rem),
    radial-gradient(circle at 2% 65%, rgba(20, 120, 103, .07), transparent 28rem),
    linear-gradient(180deg, #f8f6f0 0%, #f3f0e8 100%);
}

.topbar {
  min-height: 82px;
  padding: 14px clamp(16px, 2.4vw, 34px);
  background: rgba(250, 248, 242, .91);
  border-bottom-color: rgba(20, 48, 43, .10);
  box-shadow: 0 8px 26px rgba(20, 48, 43, .04);
}
.brand-mark { box-shadow: 0 12px 28px rgba(12, 75, 65, .18); }
.top-actions .btn { min-height: 44px; padding-inline: 16px; }
.top-actions .btn.ghost { background: rgba(255, 255, 255, .78); }

.app-shell { min-height: calc(100vh - 82px); }
.sidebar {
  top: 82px;
  height: calc(100vh - 82px);
  padding: 26px 16px 20px;
  background: rgba(247, 245, 239, .7);
  backdrop-filter: blur(16px);
}
.nav-item { min-height: 48px; padding: 13px 13px; }
.nav-item.active { box-shadow: 0 12px 28px rgba(12, 75, 65, .16); }
.main { padding-top: 30px; max-width: 1680px; width: 100%; margin-inline: auto; }

.card,
.question-card,
.criteria-group,
.layer-group {
  border-color: rgba(20, 48, 43, .095);
  box-shadow: var(--shadow-sm);
}
.card { background: var(--surface-glass); }

.meta-card {
  padding: 18px;
  gap: 14px;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(20, 48, 43, .065);
}
.field label { font-size: .77rem; }
input, select, textarea {
  min-height: 44px;
  border-color: rgba(20, 48, 43, .16);
  background: rgba(255, 255, 255, .92);
}
textarea { min-height: auto; }
input:hover, select:hover, textarea:hover { border-color: rgba(20, 120, 103, .42); }
input:focus, select:focus, textarea:focus { box-shadow: var(--shadow-focus); }

.section-heading {
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}
.section-heading > div:first-child { min-width: 0; }
.section-heading h1 {
  font-size: clamp(2.2rem, 4.2vw, 4.25rem);
  line-height: 1.01;
  text-wrap: balance;
}
.section-heading p { max-width: 850px; line-height: 1.55; }
.sticky-heading {
  top: 82px;
  z-index: 22;
  padding: 20px 4px 18px;
  margin-bottom: 20px;
  background: rgba(246, 243, 235, .965);
  backdrop-filter: blur(20px) saturate(1.08);
  border-bottom: 1px solid rgba(20, 48, 43, .10);
  box-shadow: 0 12px 24px rgba(20, 48, 43, .035);
}

.heading-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.form-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  color: #8f3d30;
  background: rgba(255, 250, 248, .92);
  border-color: rgba(166, 70, 52, .24);
  box-shadow: 0 6px 16px rgba(166, 70, 52, .055);
  white-space: nowrap;
}
.form-reset-btn > span:first-child {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(166, 70, 52, .09);
  font-size: 1rem;
  line-height: 1;
}
.form-reset-btn:hover {
  color: #753026;
  background: #fff8f5;
  border-color: rgba(166, 70, 52, .42);
  box-shadow: 0 10px 24px rgba(166, 70, 52, .10);
}
.form-reset-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(166, 70, 52, .13); }
.score-chip {
  min-width: 142px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 28px rgba(12, 75, 65, .14);
}

.module-layout { gap: 24px; }
.result-stack { top: 202px; gap: 16px; }
.result-stack .card { padding: 22px; }
.question-list { gap: 15px; }
.question-card {
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 254, 250, .93);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.question-card:hover { border-color: rgba(20, 120, 103, .25); box-shadow: var(--shadow-md); }
.question-card.completed { border-left: 4px solid var(--brand-2); }
.question-no { width: 36px; height: 36px; border-radius: 11px; }
.answer-guide { background: rgba(255, 255, 255, .82); }
.score-option label { min-height: 54px; transition: .18s ease; }
.score-option label:hover { border-color: var(--brand-2); transform: translateY(-1px); }

.property-mode-card {
  padding: 22px 24px;
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.96), rgba(249,247,240,.88)),
    var(--surface);
}
.property-mode-buttons button {
  min-height: 76px;
  padding: 15px;
  border-radius: 17px;
  background: rgba(255,255,255,.82);
}
.property-mode-buttons button:hover { box-shadow: 0 12px 30px rgba(12, 50, 44, .10); }
.property-mode-buttons button.active { background: linear-gradient(145deg, #f7fcfa, #edf7f3); }

.inline-layer-switch,
.transaction-switch {
  border-radius: 18px;
  box-shadow: 0 9px 26px rgba(20,48,43,.055);
}
.segmented { border: 1px solid rgba(20,48,43,.08); }
.segmented button { min-height: 40px; }

.layer-intro {
  padding: 26px 28px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
.layer-intro::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -100px;
  top: -150px;
  border-radius: 50%;
  border: 1px solid rgba(20,48,43,.08);
  box-shadow: 0 0 0 35px rgba(20,48,43,.025), 0 0 0 70px rgba(20,48,43,.018);
  pointer-events: none;
}
.layer-intro > * { position: relative; z-index: 1; }
.commercial-intro {
  border-top: 0;
  border-left: 5px solid var(--commercial-accent);
  background: linear-gradient(125deg, rgba(255,250,242,.98), rgba(255,255,255,.92));
}
.land-intro {
  border-top: 0;
  border-left: 5px solid var(--land-accent);
  background: linear-gradient(125deg, rgba(249,246,255,.98), rgba(255,255,255,.92));
}
.decision-note { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }

.layer-grid { gap: 22px; grid-template-columns: minmax(0, 1.72fr) minmax(320px, .70fr); }
.layer-main { gap: 15px; }
.layer-side { gap: 16px; top: 198px; }
.layer-side > .card { padding: 21px; border-radius: 19px; }
.layer-side .section-heading { margin-bottom: 14px; }
.layer-side h3 { margin-top: 5px; }

.layer-group {
  border-radius: 19px;
  background: rgba(255,254,250,.94);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.layer-group:hover { border-color: rgba(20,120,103,.20); }
.layer-group[open] { box-shadow: 0 14px 38px rgba(20,48,43,.075); }
.layer-group summary {
  min-height: 68px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,247,242,.92));
}
.layer-group summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--brand);
  font-weight: 900;
  transition: transform .2s ease, background .2s ease;
}
.layer-group[open] summary::after { content: "−"; background: #e7f2ee; }
.layer-group summary > small { margin-left: auto; }
.layer-group summary b { box-shadow: inset 0 0 0 1px rgba(20,48,43,.06); }

.layer-fields { gap: 16px; padding: 21px 22px 24px; }
.layer-field { gap: 8px; }
.layer-field > span { font-size: 12.5px; line-height: 1.35; }
.layer-field > span small { margin-top: 2px; line-height: 1.35; }
.layer-field input,
.layer-field select,
.layer-field .input-affix { min-height: 45px; border-color: rgba(20,48,43,.15); }
.layer-field input:hover,
.layer-field select:hover,
.layer-field .input-affix:hover { border-color: rgba(20,120,103,.35); }

/* Ticari çevre kaydırıcıları: etiket, değer ve kontrol ayrı satırlarda okunur. */
.range-grid { gap: 13px; padding: 21px 22px 24px; }
.range-field {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "slider slider";
  gap: 9px 14px;
  min-height: 92px;
  padding: 14px 15px 13px;
  border-color: rgba(20,48,43,.13);
  border-radius: 15px;
  background: linear-gradient(160deg, #fff, #fcfbf7);
  box-shadow: 0 5px 16px rgba(20,48,43,.035);
}
.range-field:hover { border-color: rgba(20,120,103,.28); box-shadow: 0 9px 22px rgba(20,48,43,.065); }
.range-field > span { grid-area: label; min-width: 0; }
.range-field strong { font-size: 13.5px; line-height: 1.25; }
.range-field small { margin-top: 3px; font-size: 11px; line-height: 1.35; }
.range-field input { grid-area: slider; min-width: 0; height: 22px; margin: 0; }
.range-field output {
  grid-area: value;
  min-width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  padding-inline: 8px;
  border-radius: 9px;
  background: #e7f3ef;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20,120,103,.38), rgba(217,157,69,.42));
  box-shadow: inset 0 0 0 1px rgba(20,48,43,.08);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6.5px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 3px 10px rgba(12,75,65,.28);
}
input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20,120,103,.38), rgba(217,157,69,.42));
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 3px 10px rgba(12,75,65,.28);
}

.traffic-table { gap: 10px; padding: 20px 22px 12px; }
.traffic-head { padding-inline: 12px; }
.traffic-row {
  padding: 14px 13px;
  border-radius: 15px;
  background: linear-gradient(160deg, #fff, #fcfbf7);
  box-shadow: 0 5px 16px rgba(20,48,43,.035);
}
.traffic-row label { gap: 7px; }
.traffic-row output {
  min-width: 30px;
  padding: 3px 4px;
  border-radius: 7px;
  background: #eaf4f0;
}

.finance-split { padding: 21px 22px 24px; }
.finance-split > div { background: rgba(255,255,255,.72); box-shadow: 0 5px 18px rgba(20,48,43,.035); }
.commercial-top-score > div strong { color: var(--commercial-accent); }
.commercial-top-score > span { background: var(--commercial-soft); color: #8e5417; }
.model-rank { min-height: 58px; transition: .18s ease; }
.model-rank:not(.static):hover { transform: translateX(2px); }
.model-rank.active { border-color: var(--commercial-accent); background: var(--commercial-soft); }
.model-rank > b { color: var(--commercial-accent); }
.financial-metrics > div { background: rgba(255,255,255,.72); }

body[data-property-mode="commercial"] .form-reset-btn#resetAppraisalBtn {
  color: #8e5417;
  border-color: rgba(182,110,34,.28);
  background: #fffaf3;
}
body[data-property-mode="commercial"] .form-reset-btn#resetAppraisalBtn > span:first-child { background: rgba(182,110,34,.11); }
body[data-property-mode="land"] .form-reset-btn#resetAppraisalBtn {
  color: #5d4a84;
  border-color: rgba(115,95,154,.28);
  background: #fbf9ff;
}
body[data-property-mode="land"] .form-reset-btn#resetAppraisalBtn > span:first-child { background: rgba(115,95,154,.11); }

.performance-toolbar,
.advisor-registry-card,
.data-card { border-radius: 20px; }
.performance-toolbar { padding: 18px; }
.inline-actions .btn { min-height: 44px; }

@media (max-width: 1220px) {
  .section-heading h1 { font-size: clamp(2.05rem, 4vw, 3.45rem); }
  .heading-actions { align-self: flex-start; }
  .layer-grid { grid-template-columns: minmax(0,1fr) 320px; }
  .range-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .layer-grid { grid-template-columns: 1fr; }
  .layer-side { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .range-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .section-heading,
  .sticky-heading { align-items: stretch; }
  .sticky-heading { top: 70px; }
  .heading-actions { justify-content: space-between; width: 100%; }
  .score-chip { margin-left: auto; }
  .form-reset-btn { min-width: 146px; }
  .range-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .main { padding-inline: 14px; }
  .section-heading h1 { font-size: 2.2rem; }
  .sticky-heading { padding-top: 15px; }
  .heading-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .heading-actions:has(.score-chip) .form-reset-btn { min-width: 0; }
  .heading-actions:not(:has(.score-chip)) { display: flex; }
  .layer-intro { padding: 22px 20px; }
  .layer-side { grid-template-columns: 1fr; }
  .range-field { min-height: 96px; }
  .traffic-row { overflow-x: auto; }
}

@media (max-width: 520px) {
  .heading-actions { grid-template-columns: 1fr; }
  .score-chip { width: 100%; min-width: 0; text-align: left; }
  .form-reset-btn { width: 100%; }
  .layer-group summary > small { display: none; }
  .layer-group summary::after { width: 28px; height: 28px; }
  .range-grid, .layer-fields, .traffic-table, .finance-split { padding-inline: 14px; }
}

@media print {
  .form-reset-btn { display: none !important; }
  .sticky-heading { position: static; background: transparent; box-shadow: none; border-bottom: 0; }
}

/* =========================================================
   V7 · Kimlik doğrulama, ofis temaları ve yönetim paneli
   ========================================================= */
body.auth-pending { min-height: 100vh; overflow-x: hidden; }
body.auth-pending > .topbar,
body.auth-pending > .app-shell,
body.auth-pending > .mobile-bottom-bar,
body.auth-pending > .mobile-sidebar-button,
body.admin-mode > .topbar,
body.admin-mode > .app-shell,
body.admin-mode > .mobile-bottom-bar,
body.admin-mode > .mobile-sidebar-button { display: none !important; }
body.office-mode #authRoot,
body.office-mode #adminRoot { display: none; }
body.admin-mode { background: #eef2ef; }

body[data-office-theme="forest"] { --brand:#0c4b41; --brand-2:#147867; --accent:#d99d45; }
body[data-office-theme="navy"] { --brand:#21496b; --brand-2:#3678a3; --accent:#d6a94f; }
body[data-office-theme="terracotta"] { --brand:#8f412f; --brand-2:#b86449; --accent:#d7a349; }
body[data-office-theme="plum"] { --brand:#603c62; --brand-2:#8a5d8e; --accent:#d2a448; }
body[data-office-theme="gold"] { --brand:#7c5b14; --brand-2:#a47b22; --accent:#c98735; }

.brand-mark img { width:100%; height:100%; object-fit:contain; border-radius:inherit; background:#fff; padding:4px; }
.signed-user { display:flex; align-items:center; gap:9px; padding:5px 5px 5px 7px; border:1px solid var(--line); background:rgba(255,255,255,.72); border-radius:14px; }
.signed-user > span:nth-child(2) { display:grid; line-height:1.15; min-width:96px; }
.signed-user strong { font-size:.78rem; }
.signed-user small { color:var(--ink-soft); font-size:.68rem; margin-top:3px; }
.signed-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--brand); color:#fff; font-size:.72rem; font-weight:900; }
.signed-user .icon-btn { width:auto; min-width:48px; padding:7px 9px; font-size:.72rem; }

.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.08fr) minmax(430px,.92fr); background:#f4f2eb; }
.login-story { position:relative; overflow:hidden; min-height:100vh; padding:42px clamp(42px,6vw,86px); color:#fff; display:flex; flex-direction:column; justify-content:space-between; background:
  radial-gradient(circle at 80% 20%, rgba(217,157,69,.35), transparent 22rem),
  linear-gradient(145deg,#082f29 0%,#0b4d42 52%,#133c35 100%); }
.login-story::before { content:""; position:absolute; width:620px; height:620px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-290px; bottom:-250px; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018); }
.login-story::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,#000,transparent 88%); }
.login-brand,.login-copy,.login-foot { position:relative; z-index:1; }
.login-brand { display:flex; align-items:center; gap:13px; }
.login-logo { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#fff; color:#0c4b41; font-size:1.55rem; box-shadow:0 15px 35px rgba(0,0,0,.18); }
.login-brand span:last-child { display:grid; line-height:1.2; }
.login-brand strong { font-size:1.03rem; }
.login-brand small { color:rgba(255,255,255,.65); font-size:.75rem; margin-top:4px; }
.login-copy { max-width:690px; padding:70px 0 60px; }
.login-eyebrow { display:inline-flex; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); color:#f2c77a; font-size:.72rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.login-copy h1 { margin:22px 0 18px; max-width:680px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.1rem,5.2vw,5.7rem); line-height:.98; letter-spacing:-.055em; font-weight:500; }
.login-copy > p { max-width:600px; color:rgba(255,255,255,.72); font-size:1.05rem; }
.login-benefits { display:grid; gap:12px; margin-top:38px; max-width:610px; }
.login-benefits > div { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.055); backdrop-filter:blur(10px); }
.login-benefits b { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(217,157,69,.18); color:#f2c77a; font-size:.72rem; }
.login-benefits span { display:grid; }
.login-benefits strong { font-size:.88rem; }
.login-benefits small { color:rgba(255,255,255,.62); margin-top:3px; }
.login-foot { color:rgba(255,255,255,.45); font-size:.72rem; letter-spacing:.04em; }
.login-panel-wrap { display:grid; place-items:center; padding:34px; background:radial-gradient(circle at 40% 10%,#fff,transparent 36rem),#f4f2eb; }
.login-panel { width:min(100%,480px); padding:34px; border:1px solid rgba(20,48,43,.1); border-radius:28px; background:rgba(255,255,255,.9); box-shadow:0 30px 80px rgba(20,48,43,.12); }
.login-panel-head { display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; margin-bottom:26px; }
.secure-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:#e5f3ee; color:#147867; font-size:1.15rem; font-weight:900; }
.login-panel-head h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:2rem; letter-spacing:-.035em; }
.login-panel-head p { margin:6px 0 0; color:var(--ink-soft); font-size:.88rem; }
.login-form,.bootstrap-form { display:grid; gap:16px; }
.login-form label,.bootstrap-form label,.office-form > label { display:grid; gap:7px; }
.login-form label > span,.bootstrap-form label > span,.office-form label > span,.form-label { color:#29443e; font-size:.76rem; font-weight:850; }
.login-form input,.bootstrap-form input { min-height:50px; border-radius:13px; }
.password-field { position:relative; }
.password-field input { padding-right:74px; }
.password-field button { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:#eef3f0; color:var(--brand); border-radius:8px; padding:6px 9px; font-size:.7rem; font-weight:850; cursor:pointer; }
.login-submit { min-height:52px; display:flex; justify-content:space-between; align-items:center; margin-top:2px; padding-inline:18px; }
.login-submit b { font-size:1.2rem; }
.form-message { margin:0; padding:10px 12px; border-radius:10px; background:#eef2f0; color:var(--ink-soft); font-size:.76rem; }
.form-message[data-tone="success"] { background:#e7f5ee; color:#17664e; }
.form-message[data-tone="error"] { background:#fbe9e5; color:#9a3e2d; }
.bootstrap-box { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.bootstrap-box summary { cursor:pointer; color:var(--ink-soft); font-size:.75rem; font-weight:800; }
.bootstrap-box > p { color:var(--ink-soft); font-size:.72rem; }
.bootstrap-form { margin-top:13px; grid-template-columns:1fr 1fr; }
.bootstrap-form > *:first-child,.bootstrap-form > *:last-child,.bootstrap-form .form-message { grid-column:1/-1; }
.login-help { display:grid; gap:2px; padding-top:22px; margin-top:24px; border-top:1px solid var(--line); }
.login-help span { font-size:.74rem; font-weight:850; }
.login-help small { color:var(--ink-soft); }
.setup-required { padding:20px; border:1px solid #e7cf9a; background:#fff9e9; border-radius:16px; }
.setup-required > span { color:#8c6517; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.setup-required h3 { margin:8px 0; }
.setup-required p { color:#655a43; font-size:.82rem; }
.setup-required code { padding:2px 5px; background:#efe6d2; border-radius:5px; }
.setup-required a { color:#75520e; font-weight:850; }

.admin-shell { min-height:100vh; display:grid; grid-template-columns:260px 1fr; color:#16342f; }
.admin-sidebar { position:sticky; top:0; height:100vh; padding:26px 18px; display:flex; flex-direction:column; background:#0b3932; color:#fff; }
.admin-brand { display:flex; align-items:center; gap:11px; padding:4px 8px 28px; }
.admin-brand > span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#fff; color:#0b3932; font-size:1.35rem; }
.admin-brand div { display:grid; line-height:1.2; }
.admin-brand small { color:rgba(255,255,255,.55); font-size:.68rem; margin-top:3px; }
.admin-sidebar nav { display:grid; gap:7px; }
.admin-sidebar nav button { border:0; background:transparent; color:rgba(255,255,255,.68); text-align:left; padding:12px 13px; border-radius:11px; font-weight:750; cursor:pointer; }
.admin-sidebar nav button:hover,.admin-sidebar nav button.active { background:rgba(255,255,255,.1); color:#fff; }
.admin-user-card { margin-top:auto; display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; padding:12px; border-radius:15px; background:rgba(255,255,255,.08); }
.admin-user-card > span { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#d8a553; color:#16342f; font-size:.7rem; font-weight:900; }
.admin-user-card div { display:grid; min-width:0; }
.admin-user-card strong { font-size:.76rem; overflow:hidden; text-overflow:ellipsis; }
.admin-user-card small { color:rgba(255,255,255,.52); font-size:.64rem; }
.admin-user-card button { border:0; background:transparent; color:#f1c779; font-size:.68rem; font-weight:850; cursor:pointer; }
.admin-main { min-width:0; padding:36px clamp(24px,4vw,58px) 70px; }
.admin-header { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; margin-bottom:28px; }
.admin-header h1 { margin:5px 0 8px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,4vw,4.4rem); font-weight:500; line-height:1; letter-spacing:-.05em; }
.admin-header p { margin:0; color:#61736e; }
.admin-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.admin-kpis article { display:grid; gap:3px; padding:19px 20px; background:#fff; border:1px solid #dfe6e2; border-radius:17px; box-shadow:0 8px 28px rgba(24,55,48,.055); }
.admin-kpis span { color:#6c7d78; font-size:.72rem; font-weight:800; }
.admin-kpis strong { font-size:1.8rem; letter-spacing:-.04em; }
.admin-kpis small { color:#94a09c; font-size:.66rem; }
.admin-grid { display:grid; grid-template-columns:minmax(340px,.72fr) minmax(520px,1.28fr); gap:20px; align-items:start; }
.admin-card { padding:24px; background:#fff; border:1px solid #dfe6e2; border-radius:21px; box-shadow:0 10px 38px rgba(24,55,48,.06); }
.admin-card-head { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; margin-bottom:20px; }
.admin-card-head h2 { margin:4px 0 5px; font-size:1.25rem; }
.admin-card-head p { margin:0; color:#71817c; font-size:.78rem; }
.step-badge { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#e9f2ee; color:#0c5b4d; font-size:.7rem; font-weight:900; }
.office-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.office-form .field-wide { grid-column:1/-1; }
.office-form input,.office-form select { min-height:45px; }
.office-form label small { color:#899690; font-size:.66rem; }
.theme-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:8px; }
.theme-option { border:1px solid #dfe6e2; background:#fff; border-radius:11px; padding:9px 5px; display:grid; justify-items:center; gap:5px; cursor:pointer; }
.theme-option i { width:25px; height:25px; border-radius:8px; background:var(--swatch); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.theme-option span { font-size:.63rem; font-weight:800; color:#64746f; }
.theme-option.active { border-color:var(--swatch); box-shadow:0 0 0 2px color-mix(in srgb,var(--swatch) 15%,transparent); background:#fafcfb; }
.logo-upload input[type="file"] { padding:9px; min-height:44px; }
.logo-drop-preview { min-height:70px; display:flex; align-items:center; gap:12px; margin-top:8px; padding:10px; border:1px dashed #cfdad5; border-radius:12px; background:#f8faf9; color:#6b7a75; }
.logo-drop-preview img { width:52px; height:52px; object-fit:contain; border-radius:9px; background:#fff; border:1px solid #e0e7e3; }
.logo-drop-preview span { display:grid; }
.logo-drop-preview b { font-size:.74rem; }
.logo-drop-preview small { font-size:.65rem; }
.office-search { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:12px; }
.office-search input { min-height:42px; }
.office-search span { color:#7e8d88; font-size:.7rem; font-weight:800; }
.office-list { display:grid; gap:9px; max-height:720px; overflow:auto; padding-right:3px; }
.office-row { display:grid; grid-template-columns:minmax(210px,1fr) 95px 68px auto; gap:12px; align-items:center; padding:12px; border:1px solid #e0e7e3; border-radius:14px; background:#fcfdfc; }
.office-row.inactive { opacity:.65; background:#f4f5f4; }
.office-identity { display:flex; gap:10px; align-items:center; min-width:0; }
.office-logo-small { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:11px; background:#e5f0eb; color:#145c4e; font-size:.68rem; font-weight:900; overflow:hidden; }
.office-logo-small img { width:100%; height:100%; object-fit:contain; background:#fff; padding:3px; }
.office-identity div { display:grid; min-width:0; }
.office-identity strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.8rem; }
.office-identity small { color:#82908c; font-size:.64rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.office-theme { display:flex; align-items:center; gap:7px; font-size:.68rem; color:#64746f; }
.office-theme i { width:18px; height:18px; border-radius:6px; background:var(--swatch); }
.status-pill { display:inline-flex; justify-content:center; padding:5px 7px; border-radius:999px; font-size:.62rem; font-weight:900; }
.status-pill.active { background:#e4f3ec; color:#17644e; }
.status-pill.inactive { background:#eee; color:#68726f; }
.office-actions { display:flex; justify-content:flex-end; gap:4px; flex-wrap:wrap; }
.office-actions button { border:1px solid #dfe6e2; background:#fff; border-radius:8px; padding:6px 7px; font-size:.61rem; font-weight:800; cursor:pointer; }
.office-actions button:hover { border-color:#8fb2a7; }
.office-actions button.danger { color:#9a402f; }
.admin-loading,.admin-error,.admin-empty { padding:30px 14px; text-align:center; color:#73827d; border:1px dashed #d7dfdb; border-radius:13px; }
.admin-empty { display:grid; gap:3px; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; background:rgba(9,31,27,.58); backdrop-filter:blur(6px); }
.office-modal { width:min(100%,610px); max-height:90vh; overflow:auto; padding:24px; background:#fff; border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.28); }
.office-modal header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.office-modal header h2 { margin:4px 0 0; }
.office-modal header > button { width:34px; height:34px; border:0; border-radius:10px; background:#eef2f0; font-size:1.2rem; cursor:pointer; }
.switch-field { display:flex !important; align-items:center; gap:10px; padding:12px; border:1px solid #dfe6e2; border-radius:12px; }
.switch-field input { width:18px; height:18px; min-height:0; }
.switch-field span { display:grid; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; }

/* V7 · Açıklanabilir trafik sayımı */
.traffic-explainer { margin:20px 22px 10px; padding:15px 16px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; border:1px solid #ead8b5; border-radius:14px; background:#fffaf0; }
.traffic-explainer strong { display:block; font-size:.82rem; }
.traffic-explainer p { margin:3px 0 0; color:#6f6552; font-size:.73rem; }
.traffic-explainer > span { max-width:340px; color:#7e6c49; font-size:.67rem; line-height:1.7; }
.traffic-observation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:10px 22px 4px; }
.traffic-method-note { margin:9px 22px 0; padding:10px 12px; border-radius:10px; background:#eef4f1; color:#536b64; font-size:.7rem; }
.traffic-table { display:grid; gap:10px; padding:15px 22px 14px; overflow:auto; }
.traffic-head,.traffic-row { min-width:850px; display:grid; grid-template-columns:100px repeat(4,minmax(150px,1fr)); gap:10px; align-items:stretch; }
.traffic-head { padding:0 11px; color:#667a73; }
.traffic-head > span { display:grid; text-align:center; align-content:end; }
.traffic-head > span:first-child { text-align:left; }
.traffic-head strong { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; }
.traffic-head small { margin-top:2px; font-size:.6rem; color:#8c9995; text-transform:none; letter-spacing:0; }
.traffic-row { padding:11px; background:#fff; }
.traffic-row > strong { display:grid; align-content:center; font-size:.78rem; }
.traffic-row > strong small { color:#8a9793; font-size:.6rem; font-weight:650; }
.traffic-cell { min-width:0; display:grid; grid-template-columns:1fr 66px; gap:7px; align-items:center; padding:9px; border:1px solid #e0e6e3; border-radius:12px; background:linear-gradient(160deg,#fff,#fafcfb); }
.traffic-count-control,.traffic-estimate-control { display:grid !important; grid-template-columns:1fr !important; gap:4px !important; }
.traffic-count-control > span,.traffic-estimate-control > span { color:#768680; font-size:.59rem; font-weight:800; }
.traffic-count-control input { min-height:37px; padding:7px 8px; text-align:center; font-weight:850; }
.traffic-count-control small { text-align:center; color:#96a29e; font-size:.55rem; }
.traffic-estimate-control input { width:100%; }
.traffic-cell > output { min-width:0; padding:7px 5px; display:grid; justify-items:center; gap:1px; border-radius:9px; background:#eaf4f0; color:#145d50; }
.traffic-cell > output strong { font-size:.88rem; line-height:1; }
.traffic-cell > output span { font-size:.52rem; font-weight:800; white-space:nowrap; }
.traffic-table[data-method="count"] .traffic-estimate-control { display:none !important; }
.traffic-table[data-method="estimate"] .traffic-count-control { display:none !important; }
.traffic-method-note [data-method-copy] { display:none; }
body:has(.traffic-table[data-method="count"]) .traffic-method-note [data-method-copy="count"],
body:has(.traffic-table[data-method="estimate"]) .traffic-method-note [data-method-copy="estimate"] { display:block; }

@media (max-width:1180px) {
  .admin-grid { grid-template-columns:1fr; }
  .office-list { max-height:none; }
  .admin-kpis { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px) {
  .login-shell { grid-template-columns:1fr; }
  .login-story { min-height:auto; padding:28px 28px 40px; }
  .login-copy { padding:60px 0 25px; }
  .login-copy h1 { font-size:clamp(2.8rem,10vw,4.5rem); }
  .login-benefits { display:none; }
  .login-foot { display:none; }
  .login-panel-wrap { padding:28px 18px 50px; }
  .admin-shell { grid-template-columns:1fr; }
  .admin-sidebar { position:static; height:auto; padding:14px 18px; flex-direction:row; align-items:center; gap:12px; }
  .admin-brand { padding:0; }
  .admin-sidebar nav { display:none; }
  .admin-user-card { margin:0 0 0 auto; min-width:260px; }
  .admin-main { padding:28px 18px 60px; }
  .office-row { grid-template-columns:minmax(200px,1fr) 80px 65px; }
  .office-actions { grid-column:1/-1; justify-content:flex-start; padding-left:52px; }
  .traffic-observation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .signed-user > span:nth-child(2) { display:none; }
  .signed-user { padding:4px; }
  .login-panel { padding:25px 20px; }
  .bootstrap-form,.office-form { grid-template-columns:1fr; }
  .bootstrap-form > *,.office-form .field-wide { grid-column:auto; }
  .admin-header { display:grid; }
  .admin-kpis { grid-template-columns:1fr 1fr; }
  .theme-picker { grid-template-columns:repeat(5,minmax(48px,1fr)); overflow:auto; }
  .office-row { grid-template-columns:1fr auto; }
  .office-theme { display:none; }
  .status-pill { justify-self:end; }
  .office-actions { grid-column:1/-1; padding-left:0; }
  .traffic-explainer { grid-template-columns:1fr; margin-inline:14px; }
  .traffic-observation-grid { grid-template-columns:1fr; padding-inline:14px; }
  .traffic-method-note { margin-inline:14px; }
  .traffic-table { padding-inline:14px; }
}
@media (max-width:500px) {
  .login-story { padding:22px 20px 30px; }
  .login-copy { padding-top:46px; }
  .login-copy h1 { font-size:2.65rem; }
  .login-panel-wrap { padding-inline:12px; }
  .admin-sidebar { align-items:flex-start; }
  .admin-user-card { min-width:0; padding:8px; }
  .admin-user-card div { display:none; }
  .admin-kpis { grid-template-columns:1fr; }
  .admin-card { padding:18px 14px; }
  .theme-picker { grid-template-columns:repeat(3,1fr); }
}

@media print {
  #authRoot,#adminRoot,.signed-user { display:none !important; }
}