:root{
  --bg:#060816;
  --bg-soft:#0c1228;
  --panel:rgba(14,20,43,.72);
  --panel-2:rgba(18,26,56,.8);
  --border:rgba(255,255,255,.08);
  --text:#f5f7ff;
  --muted:#aeb8d6;
  --muted-2:#8390b8;
  --primary:#6ea8ff;
  --primary-2:#7c5cff;
  --success:#44d69e;
  --warn:#ffb74d;
  --danger:#ff6b81;
  --shadow:0 30px 80px rgba(0,0,0,.35);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
body{position:relative;overflow-x:hidden}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit}

.bg-orb{position:fixed;z-index:0;filter:blur(70px);opacity:.45;pointer-events:none}
.orb-a{width:28rem;height:28rem;left:-7rem;top:-8rem;background:linear-gradient(135deg,#7c5cff,#4dd5ff)}
.orb-b{width:24rem;height:24rem;right:-6rem;top:16rem;background:linear-gradient(135deg,#44d69e,#6ea8ff)}
.bg-grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(circle at center,black 20%,transparent 85%);pointer-events:none;z-index:0}

.shell{position:relative;z-index:1;width:min(2000px,calc(100vw - 8px));max-width:none;margin:0 auto;padding:12px 8px 120px}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(20px)}

.login-screen,.app-screen{min-height:calc(100vh - 40px)}
.login-panel{display:grid;grid-template-columns:1.2fr .88fr;gap:20px;align-items:stretch;padding:22px;border-radius:32px}
.hero-card{margin-top:12px}
.hero-copy,.auth-card{border-radius:26px;padding:28px}
.hero-copy{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
.auth-card{background:linear-gradient(180deg,rgba(16,22,46,.92),rgba(10,15,34,.88))}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:#8bc3ff;font-weight:700}
h1,h2,h3,h4{font-family:Manrope,Inter,sans-serif;margin:0}
h1{font-size:clamp(2.5rem,4vw,4.4rem);margin:.45rem 0 1rem}
h2{font-size:1.9rem;margin:.5rem 0 1rem}
p{margin:0;line-height:1.6}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0}
.mini-feature{padding:18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:6px}
.mini-feature strong{font-size:1.05rem}
.mini-feature span{color:var(--muted)}
.hero-stats{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats>div{padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.18);display:flex;flex-direction:column;gap:6px;min-width:180px}
.hero-stats strong{font-size:1.15rem}

.auth-head,.auth-actions,.stack{display:flex;flex-direction:column;gap:14px}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(110,168,255,.12);border:1px solid rgba(110,168,255,.28);font-size:.88rem;color:#dce8ff;width:max-content}
.field{display:flex;flex-direction:column;gap:10px}
.field span{font-size:.92rem;color:#dbe4ff;font-weight:600}
.field input,.field textarea,.field select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--text);border-radius:16px;padding:14px 16px;outline:none;transition:.2s}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(110,168,255,.6);box-shadow:0 0 0 4px rgba(110,168,255,.12)}
.note-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.1)}
.btn{border:none;border-radius:16px;padding:14px 18px;font-weight:700;transition:transform .15s ease,opacity .15s ease,background .2s ease;color:var(--text)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.btn-soft{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.12)}
.btn-danger{background:linear-gradient(135deg,#f05a74,#ff8b5c)}
.btn-success{background:linear-gradient(135deg,#3bcf91,#55a7ff)}
.btn-sm{padding:10px 14px;border-radius:14px;font-size:.92rem}
.btn-block{width:100%}

.hidden{display:none!important}
.topbar{position:sticky;top:12px;z-index:10;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 22px;border-radius:28px;margin-bottom:18px}
.topbar-right{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.metric-pill{padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.04);display:flex;flex-direction:column;gap:4px;min-width:112px}
.metric-pill span{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em}
.metric-pill strong{font-size:1rem}

.view{display:none !important;animation:fadeIn .24s ease;width:100%}
.view.active{display:flex !important;flex-direction:column;gap:18px;width:100%}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.layout-grid{display:grid;grid-template-columns:1fr;gap:18px}
.stack-block{display:flex;flex-direction:column;gap:18px}
.panel{border-radius:28px;padding:22px}
.panel h3{font-size:1.2rem;margin-bottom:10px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat-card{padding:18px;border-radius:22px;background:var(--panel-2);border:1px solid var(--border)}
.stat-card small{display:block;color:var(--muted-2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.1em}
.stat-card strong{font-size:1.75rem;font-family:Manrope}

.search-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.search-bar input,.search-bar select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--text);padding:13px 14px;border-radius:14px}
.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.85rem;color:var(--muted)}
.chip strong{color:var(--text)}
.dashboard-top-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.dashboard-secondary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dashboard-stat-card{padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.dashboard-stat-card small{display:block;color:var(--muted-2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em}
.dashboard-stat-card strong{font-size:1.55rem;font-family:Manrope}
.dashboard-mini-list{display:flex;flex-direction:column;gap:12px}
.dashboard-mini-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.05)}
.dashboard-mini-item strong{display:block;margin-bottom:4px}
.kpi-inline{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kpi-inline .chip{background:rgba(0,0,0,.16)}

.topic-list,.stack-block,.panel,.topic-card,.topic-body,.topic-form{display:flex;flex-direction:column;gap:14px;width:100%}
.topic-list{max-height:none}
.topic-card{border-radius:24px;padding:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);overflow:hidden;width:100%}
.topic-card.open{background:rgba(16,25,56,.86)}
.topic-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;justify-content:space-between;align-items:flex-start;width:100%}
.topic-head-main{display:flex;gap:14px;align-items:flex-start;min-width:0}
.topic-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(110,168,255,.14);font-size:1.35rem;flex:none}
.topic-meta{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
.topic-title{font-size:1.12rem;word-break:break-word}
.topic-sub{display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:7px 10px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.02em;background:rgba(255,255,255,.07);color:#dfe8ff;border:1px solid rgba(255,255,255,.06)}
.badge.success{background:rgba(68,214,158,.14);color:#d7fff1}
.badge.warn{background:rgba(255,183,77,.14);color:#ffecc8}
.badge.danger{background:rgba(255,107,129,.16);color:#ffe4e9}
.topic-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:220px}
.topic-toggle{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);color:var(--text);padding:12px 16px;border-radius:16px;font-weight:700}
.topic-body{display:none;padding-top:18px;width:100%}
.topic-card.open .topic-body{display:block}
.topic-form{display:flex;flex-direction:column;gap:16px;width:100%}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:14px;width:100%}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.helper-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.helper-note{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid rgba(255,255,255,.06)}
.divider{height:1px;background:rgba(255,255,255,.07);margin:4px 0}

.issue-shell{display:flex;flex-direction:column;gap:12px}
.issue-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.issue-list{display:flex;flex-direction:column;gap:12px}
.issue-card{padding:16px;border-radius:18px;background:rgba(7,12,28,.78);border:1px solid rgba(255,255,255,.08)}
.issue-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}
.issue-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:12px;width:100%}
.issue-grid .field{gap:8px}
.issue-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}

.results-group{display:flex;flex-direction:column;gap:14px}
.result-day{padding:20px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.result-day h4{font-size:1.1rem;margin-bottom:12px}
.result-entry{padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.14);display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-top:10px}
.result-entry strong{display:block;margin-bottom:6px}
.result-actions{display:flex;gap:10px;flex-wrap:wrap}
.archive-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pagination{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.pagination span{color:var(--muted)}

.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.chart-card{padding:20px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.chart-card canvas{max-height:320px}
.topics-table{width:100%;border-collapse:collapse}
.topics-table th,.topics-table td{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
.topics-table th{font-size:.75rem;text-transform:uppercase;color:var(--muted-2);letter-spacing:.1em}
.empty-state{padding:28px;border-radius:22px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.08);text-align:center;color:var(--muted)}

.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info-list{display:flex;flex-direction:column;gap:12px}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.code-box{padding:16px;border-radius:18px;background:rgba(0,0,0,.22);overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.86rem;color:#d9e1ff}

.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;width:min(720px,calc(100vw - 24px));display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px;border-radius:22px;z-index:30}
.nav-item{background:transparent;border:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 8px;border-radius:18px}
.nav-item span{font-size:1.2rem}
.nav-item small{font-size:.8rem;font-weight:700}
.nav-item.active{background:rgba(255,255,255,.08);color:var(--text)}

.modal-backdrop{position:fixed;inset:0;background:rgba(4,8,20,.72);display:grid;place-items:center;z-index:60;padding:20px}
.modal-card{width:min(920px,100%);max-height:88vh;overflow:auto;padding:20px;border-radius:28px;background:linear-gradient(180deg,#0b1024,#101834);border:1px solid rgba(255,255,255,.08)}
.modal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}
.toast-root{position:fixed;right:18px;top:18px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{padding:14px 16px;border-radius:16px;background:#11182f;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);min-width:260px}
.toast.success{border-color:rgba(68,214,158,.3)}
.toast.error{border-color:rgba(255,107,129,.3)}
.toast.info{border-color:rgba(110,168,255,.3)}

@media (max-width:1100px){
  .login-panel,.layout-grid,.account-grid,.chart-grid,.dashboard-top-grid,.dashboard-secondary-grid{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .shell{width:calc(100vw - 4px);padding:8px 2px 116px}
  .hero-grid,.form-grid,.issue-grid,.stat-grid,.dashboard-top-grid,.dashboard-secondary-grid{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}
  .result-entry,.topic-head,.topic-head-main,.dashboard-mini-item{flex-direction:column}
  .topic-actions{align-items:flex-start}
  .bottom-nav{width:min(720px,calc(100vw - 12px));bottom:10px}
}


.compact-hint{font-size:.9rem;color:var(--muted)}
.simple-note{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);color:var(--muted)}
@media (max-width:900px){
  .topic-head{grid-template-columns:1fr}
  .topic-actions{align-items:flex-start;min-width:0}
}


.topic-list-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.wide-panel{width:100%}
.entry-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
.entry-summary-grid .chip{justify-content:flex-start}
.form-title-block{display:flex;flex-direction:column;gap:6px}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.detail-row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.issue-compact{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.issue-compact strong{display:block;margin-bottom:6px}
@media (max-width:1500px){.topic-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.topic-list-grid,.entry-summary-grid,.kv-grid{grid-template-columns:1fr}}

/* ===== UI refinement pass: compact premium header + motion system ===== */
:root{
  --ease-premium:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --ease-swift:cubic-bezier(.4,0,.2,1);
  --dur-fast:160ms;
  --dur-mid:280ms;
  --dur-slow:420ms;
  --dur-lux:560ms;
  --focus-ring:0 0 0 4px rgba(110,168,255,.12);
  --surface-glow:0 18px 44px rgba(0,0,0,.24);
  --surface-glow-strong:0 28px 68px rgba(0,0,0,.34);
}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body.modal-open{
  overflow:hidden;
}

.glass,
.panel,
.topic-card,
.result-day,
.result-entry,
.chart-card,
.stat-card,
.dashboard-stat-card,
.metric-pill,
.bottom-nav,
.hero-copy,
.auth-card,
.note-card,
.issue-card,
.issue-toolbar,
.helper-note,
.simple-note,
.detail-row,
.code-box,
.nav-item,
.btn,
.topic-toggle,
.field input,
.field textarea,
.field select,
.chip,
.badge,
.topbar,
.modal-card,
.toast{
  transition:
    transform var(--dur-mid) var(--ease-premium),
    opacity var(--dur-mid) var(--ease-soft),
    border-color var(--dur-mid) var(--ease-soft),
    background-color var(--dur-mid) var(--ease-soft),
    box-shadow var(--dur-slow) var(--ease-soft),
    filter var(--dur-mid) var(--ease-soft);
  will-change:transform,opacity;
}

.topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:14px 18px;
  padding:16px 18px 17px;
  border-radius:30px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 12% 10%, rgba(110,168,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
  box-shadow:0 18px 44px rgba(0,0,0,.22);
}

.topbar .eyebrow{
  font-size:.68rem;
  letter-spacing:.18em;
  opacity:.95;
}

#viewTitle{
  font-size:clamp(2.15rem, 3.2vw, 3.45rem);
  line-height:1;
  letter-spacing:-.04em;
  margin:.28rem 0 .5rem;
}

#viewSubtitle{
  max-width:54rem;
  font-size:1rem;
  line-height:1.48;
  color:#bcc7e6;
}

.topbar-right{
  display:grid;
  grid-template-columns:repeat(3,minmax(124px,1fr));
  gap:10px;
  align-self:center;
}

.metric-pill{
  min-width:0;
  padding:11px 15px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.metric-pill span{
  font-size:.7rem;
  letter-spacing:.14em;
}

.metric-pill strong{
  font-size:1rem;
  line-height:1.15;
  letter-spacing:-.02em;
  word-break:break-word;
}

.view{
  animation:premiumViewIn var(--dur-slow) var(--ease-premium);
}

@keyframes premiumViewIn{
  from{opacity:0;transform:translateY(8px) scale(.995);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

@keyframes surfaceEnter{
  from{opacity:0;transform:translateY(14px) scale(.992);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.panel,
.topic-card,
.result-day,
.chart-card,
.account-grid > .panel,
.dashboard-stat-card,
.stat-card,
.result-entry{
  animation:surfaceEnter var(--dur-lux) var(--ease-premium) both;
}

.topic-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.032));
  box-shadow:0 18px 36px rgba(0,0,0,.16);
  transform:translateZ(0);
}

.topic-card.open{
  background:linear-gradient(180deg, rgba(22,32,68,.9), rgba(14,22,48,.84));
  border-color:rgba(110,168,255,.16);
  box-shadow:var(--surface-glow-strong);
}

.topic-card-desktop .topic-body{
  display:none !important;
}

.topic-head{
  gap:16px;
}

.topic-head-main{
  gap:16px;
}

.topic-meta{
  gap:10px;
}

.topic-title{
  font-size:1.16rem;
  line-height:1.18;
}

.topic-actions{
  gap:10px;
}

.topic-toggle,
.btn{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  box-shadow:0 10px 26px rgba(0,0,0,.15);
}

.btn,
.topic-toggle{
  transition:
    transform var(--dur-fast) var(--ease-premium),
    opacity var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-mid) var(--ease-soft),
    border-color var(--dur-mid) var(--ease-soft),
    background var(--dur-mid) var(--ease-soft);
}

.topic-toggle{
  padding:12px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.09);
}

.btn-primary{
  box-shadow:0 16px 32px rgba(87,115,255,.22);
}

.btn-soft,
.btn-ghost,
.topic-toggle,
.nav-item.active,
.metric-pill,
.helper-note,
.simple-note,
.chip,
.badge,
.field input,
.field textarea,
.field select,
.issue-card,
.issue-toolbar,
.result-entry,
.detail-row{
  backdrop-filter:blur(18px);
}

.nav-item{
  color:var(--muted);
  transform:translateY(0);
}

.nav-item.active{
  color:var(--text);
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.14);
}

.bottom-nav{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
}

.search-bar input,
.search-bar select,
.field input,
.field textarea,
.field select{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.085);
}

.field input,
.field textarea,
.field select,
.search-bar input,
.search-bar select{
  transition:
    transform var(--dur-fast) var(--ease-premium),
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-mid) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.search-bar input:focus,
.search-bar select:focus{
  border-color:rgba(110,168,255,.58);
  box-shadow:var(--focus-ring), 0 12px 28px rgba(16,24,52,.2);
  background:rgba(255,255,255,.065);
  transform:translateY(-1px);
}

.btn:focus-visible,
.topic-toggle:focus-visible,
.nav-item:focus-visible,
.modal-icon-btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring), 0 10px 24px rgba(0,0,0,.18);
}

.modal-backdrop{
  opacity:0;
  background:rgba(4,8,20,.46);
  backdrop-filter:blur(0px);
  transition:
    opacity 240ms var(--ease-soft),
    backdrop-filter 320ms var(--ease-soft),
    background-color 320ms var(--ease-soft);
}

.modal-backdrop.is-open{
  opacity:1;
  background:rgba(4,8,20,.68);
  backdrop-filter:blur(14px);
}

.modal-backdrop.is-closing{
  opacity:0;
  backdrop-filter:blur(0px);
}

.modal-card{
  width:min(1120px, calc(100vw - 56px));
  max-height:min(90vh, 960px);
  padding:22px 22px 20px;
  border-radius:30px;
  background:
    radial-gradient(circle at top left, rgba(110,168,255,.1), transparent 28%),
    linear-gradient(180deg, rgba(13,18,40,.98), rgba(15,22,50,.96));
  box-shadow:0 36px 100px rgba(0,0,0,.42);
  transform:translateY(22px) scale(.975);
  opacity:0;
  filter:blur(14px);
  transform-origin:center top;
  scrollbar-gutter:stable;
}

.modal-backdrop.is-open .modal-card{
  transform:translateY(0) scale(1);
  opacity:1;
  filter:blur(0);
}

.modal-backdrop.is-closing .modal-card{
  transform:translateY(12px) scale(.986);
  opacity:0;
  filter:blur(10px);
}

.modal-shell{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.modal-head{
  position:sticky;
  top:-22px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin:-22px -22px 0;
  padding:22px 22px 16px;
  background:linear-gradient(180deg, rgba(11,16,36,.94), rgba(11,16,36,.78), rgba(11,16,36,0));
  backdrop-filter:blur(20px);
}

.modal-head h3{
  font-size:clamp(1.5rem, 2vw, 2.15rem);
  line-height:1.05;
  margin:.4rem 0 .45rem;
}

.modal-icon-btn{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.06);
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:1.55rem;
  line-height:1;
  flex:none;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}

.entry-form-modal .topic-form{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.06);
}

.modal-chip-row{
  margin-top:-4px;
}

.modal-form-title strong{
  font-size:1.08rem;
}

.modal-form .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.modal-form .helper-bar:last-child{
  align-items:center;
}

.toast-root{
  right:20px;
  top:18px;
}

.toast{
  opacity:0;
  transform:translateY(-10px) scale(.98);
  filter:blur(8px);
  background:rgba(17,24,47,.92);
}

.toast.is-visible{
  opacity:1;
  transform:none;
  filter:blur(0);
}

.toast.is-leaving{
  opacity:0;
  transform:translateY(-10px) scale(.985);
  filter:blur(8px);
}

.panel,
.topic-card,
.result-day,
.chart-card,
.stat-card,
.dashboard-stat-card,
.result-entry,
.issue-card,
.issue-toolbar,
.metric-pill,
.detail-row,
.code-box,
.helper-note,
.simple-note{
  border-color:rgba(255,255,255,.075);
}

.kpi-inline .chip,
.entry-summary-grid .chip,
.modal-chip-row .chip,
.result-entry .chip{
  background:rgba(255,255,255,.055);
}

.badge.success,
.badge.warn,
.badge.danger{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

@media (hover:hover){
  .topic-card:hover,
  .panel:hover,
  .chart-card:hover,
  .stat-card:hover,
  .dashboard-stat-card:hover,
  .result-day:hover{
    transform:translateY(-2px);
    box-shadow:var(--surface-glow);
    border-color:rgba(255,255,255,.1);
  }

  .btn:hover,
  .topic-toggle:hover,
  .modal-icon-btn:hover,
  .nav-item:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 30px rgba(0,0,0,.18);
  }

  .metric-pill:hover,
  .chip:hover,
  .badge:hover,
  .helper-note:hover,
  .simple-note:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.12);
  }
}

.btn:active,
.topic-toggle:active,
.modal-icon-btn:active,
.nav-item:active{
  transform:scale(.985);
}

@media (max-width:1100px){
  .topbar{
    grid-template-columns:1fr;
    align-items:flex-start;
  }

  .topbar-right{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .modal-card{
    width:min(100%, calc(100vw - 34px));
  }
}

@media (max-width:980px){
  .topbar{
    padding:15px 16px 16px;
    gap:12px;
    border-radius:28px;
  }

  #viewTitle{
    font-size:clamp(1.95rem, 8vw, 2.85rem);
    margin:.24rem 0 .42rem;
  }

  #viewSubtitle{
    font-size:.98rem;
    line-height:1.5;
  }

  .topbar-right{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .metric-pill{
    padding:10px 12px 11px;
    border-radius:18px;
  }
}

@media (max-width:760px){
  .topbar{
    position:sticky;
    top:8px;
    padding:14px 14px 15px;
    margin-bottom:14px;
  }

  .topbar-right{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  .metric-pill:last-child{
    grid-column:1 / -1;
  }

  .panel,
  .topic-card,
  .result-day,
  .chart-card{
    animation-duration:420ms;
  }
}

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


/* === merged raw-facts logic with original UI === */
.full-span{grid-column:1 / -1}
.entry-summary-grid{align-items:stretch}
.entry-summary-grid .chip{display:inline-flex;align-items:center;gap:6px}
.overview-card{display:contents}
.issue-card-head p{margin:6px 0 0;color:var(--muted);font-size:.92rem}
.modal-form .field small,
.field small{color:var(--muted)}
.modal-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.modal-form .form-grid{grid-template-columns:1fr}}

/* smooth duration inputs */
input[data-duration="true"]{letter-spacing:.05em}

/* admin account quick entry */
#adminQuickItemSelect{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);color:var(--text);border-radius:16px;padding:14px 16px;outline:none}
#adminQuickItemSelect:focus{border-color:rgba(110,168,255,.6);box-shadow:0 0 0 4px rgba(110,168,255,.12)}

/* topbar user metrics wrap nicely with old shell */
.topbar-right{flex-wrap:wrap}

.summary-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:.85rem;color:var(--muted)}
.summary-pill strong{color:var(--text)}
.detail-grid,.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.detail-card,.account-card{padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.field-label{display:block;color:var(--muted-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.code-block{padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);overflow:auto;font-family:ui-monospace,SFMono-Regular,monospace;font-size:.86rem;color:#d9e1ff;white-space:pre-wrap;word-break:break-word}
.support-note{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--muted);border:1px solid rgba(255,255,255,.06)}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:14px;width:100%}
.issue-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.modal-stack{display:flex;flex-direction:column;gap:18px}
.modal-section{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.view-shell{display:flex;flex-direction:column;gap:18px}
.glass-panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(20px)}
.section-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.kpi-card,.account-head{padding:18px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.kpi-card span,.account-head .eyebrow{display:block;margin-bottom:8px}
.kpi-card strong{font-size:1.55rem;font-family:Manrope}
.status-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(68,214,158,.12);border:1px solid rgba(68,214,158,.22);font-size:.88rem;color:#dcffee;width:max-content}
.list-stack{display:flex;flex-direction:column;gap:12px}
.item-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.activity-pill,.tag{padding:7px 10px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:.02em;background:rgba(255,255,255,.07);color:#dfe8ff;border:1px solid rgba(255,255,255,.06)}
.activity-pill.revision{background:rgba(110,168,255,.12)}
.activity-pill.test{background:rgba(124,92,255,.14)}
.activity-pill.video{background:rgba(68,214,158,.14)}
.activity-pill.reading{background:rgba(255,183,77,.14)}
.tag-row,.item-meta{display:flex;flex-wrap:wrap;gap:10px}
.inline-stat{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:6px}
.item-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:rgba(110,168,255,.14);font-size:1.35rem;flex:none}
@media (max-width:900px){.detail-grid,.metrics-grid,.template-grid,.issue-option-grid{grid-template-columns:1fr}}


/* === final stability fixes === */
#toastRoot.toast-root{position:fixed;right:20px;top:18px;z-index:80;display:flex;flex-direction:column;gap:10px}
.topic-head{grid-template-columns:minmax(0,1fr) minmax(200px,240px)}
.topic-title{overflow-wrap:anywhere;word-break:break-word}
.topic-actions{min-width:0;max-width:240px;justify-self:end;width:100%}
.topic-actions .muted{display:block;max-width:100%;text-align:right;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.topic-actions .topic-toggle,.topic-actions .btn{width:100%}
.topic-actions .btn-sm{width:auto}
.topic-actions .btn-soft{align-self:flex-end}
input[data-duration="true"]{font-variant-numeric:tabular-nums;caret-color:#dfe8ff}
@media (max-width:900px){
  .topic-head{grid-template-columns:1fr}
  .topic-actions{max-width:none;justify-self:stretch}
  .topic-actions .muted{text-align:left}
  .topic-actions .btn-soft{align-self:flex-start}
}