/* CV visual refinement layer — lean, CSS-first and respectful of reduced motion. */
:root {
  --ease-cv: cubic-bezier(.22,1,.36,1);
  --ease-ui: cubic-bezier(.2,.8,.2,1);
  --cv-glow: rgba(111, 173, 163, .16);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: #cde8df; color: #123e43; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #6aafa4;
  outline-offset: 3px;
}
:where(.primary,.secondary,.outline,.danger,.subtle,.icon-button,.close-modal) {
  transition: transform .23s var(--ease-ui), box-shadow .23s ease,
              background-color .23s ease, border-color .23s ease, color .23s ease;
}
:where(.primary,.secondary,.outline,.subtle):not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 22px rgba(17,43,65,.12);
}
:where(.primary,.secondary,.outline,.subtle):not(:disabled):active,
.class-card:not(:disabled):active { transform: translateY(0) scale(.985); }
.primary { background: linear-gradient(130deg,#102640,#235264); box-shadow: 0 6px 17px rgba(16,38,64,.13); }
.primary:hover:not(:disabled) { background: linear-gradient(130deg,#163450,#2f6b72); }
.primary.is-busy { position: relative; pointer-events: none; }
.primary.is-busy::before,
button.is-busy::before {
  content:''; display:inline-block; width:12px; height:12px; flex-shrink:0;
  border:2px solid currentColor; border-right-color: transparent;
  border-radius:50%; animation:cv-spin .75s linear infinite;
}
.auth-screen { background: #f7f9fa; }
.auth-brand {
  isolation: isolate;
  background: radial-gradient(circle at 95% 0%,rgba(119,175,166,.23),transparent 38%),
              linear-gradient(140deg,#102640 0%,#163a4e 53%,#17494c 100%);
}
.auth-brand::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.14) .7px,transparent .8px);
  background-size:27px 27px; opacity:.13;
}
.auth-brand:after { animation:cv-orbit 18s ease-in-out infinite alternate; }
.auth-brand h1 { text-wrap: balance; }
.auth-brand h1 em { background:linear-gradient(100deg,#e7d5ab,#c7f0d5); background-clip:text; -webkit-text-fill-color:transparent; }
.auth-benefits span { display:inline-flex; align-items:center; gap:6px; }
.auth-card {
  border:1px solid rgba(209,222,229,.82);
  box-shadow:0 28px 85px rgba(16,38,64,.09),0 4px 16px rgba(16,38,64,.025);
  animation:cv-enter .65s var(--ease-cv) both;
}
.seal { position:relative; overflow:hidden; background:linear-gradient(145deg,#0f2c4b,#235c61); border-color:rgba(208,184,126,.6); box-shadow:inset 0 0 0 2px rgba(255,255,255,.04); font-family:Georgia,serif; letter-spacing:-1.4px; }
.seal::after { content:''; position:absolute; inset:3px; border:1px solid rgba(212,190,142,.47); border-radius:inherit; pointer-events:none; }
.seal.large { border-color:rgba(222,197,143,.58); }
.sidebar { box-shadow:2px 0 24px rgba(19,46,63,.025); }
.brand strong { font-size:20px; letter-spacing:-.7px; }
.brand span { letter-spacing:1px; }
.nav-button { position:relative; transition:background-color .23s ease,color .23s ease,transform .23s var(--ease-cv); }
.nav-button:hover { transform:translateX(3px); }
.nav-button.active::before { content:'';position:absolute;left:0;top:24%;height:52%;width:3px;border-radius:8px;background:#449b88; }
.sidebar-bottom .security-note { border-radius:12px; }
.topbar { position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:rgba(255,255,255,.93); }
.page-content { isolation:isolate; }
.page-content > :not(.loading-panel) { animation:cv-enter .46s var(--ease-cv) both; }
.page-content > :nth-child(2) { animation-delay:.055s; }
.page-content > :nth-child(3) { animation-delay:.09s; }
.page-content > :nth-child(4) { animation-delay:.13s; }
.page-header h1 { letter-spacing:-1.3px; text-wrap:balance; }
.metrics .metric-card { overflow:hidden; position:relative; background:linear-gradient(155deg,#fff 30%,#f9fcfc 100%); }
.metrics .metric-card:before { content:''; position:absolute; inset:0 auto auto 0; width:100%;height:3px; background:linear-gradient(90deg,transparent,#75b6a6,transparent);opacity:.5; }
.metric-card, .panel, .class-card { box-shadow:0 7px 26px rgba(15,46,65,.035); transition:box-shadow .28s ease,border-color .28s ease,transform .3s var(--ease-cv); }
.metric-card:hover, .panel:hover { box-shadow:0 12px 32px rgba(15,46,65,.06); }
.class-card { border:1px solid #e6ecf0; background:linear-gradient(160deg,#fff,#fcfefd); }
.class-card:hover { transform:translateY(-5px);box-shadow:0 17px 34px rgba(28,77,83,.085);border-color:#b9d8d1; }
.class-card .class-symbol { transition:transform .3s var(--ease-cv),background-color .3s ease; }
.class-card:hover .class-symbol { transform:rotate(-5deg) scale(1.09);background-color:#dff1ea; }
.class-arrow { transition:transform .3s var(--ease-cv); }
.class-card:hover .class-arrow { transform:translate(2px,-2px); }
.graph-bar { transform-origin:bottom center;animation:cv-rise .8s var(--ease-cv) both; }
.graph-col:nth-child(2) .graph-bar { animation-delay:.06s; }
.graph-col:nth-child(3) .graph-bar { animation-delay:.12s; }
.graph-col:nth-child(4) .graph-bar { animation-delay:.18s; }
.graph-col:nth-child(5) .graph-bar { animation-delay:.24s; }
.graph-col:nth-child(6) .graph-bar { animation-delay:.3s; }
.graph-col:nth-child(7) .graph-bar { animation-delay:.36s; }
.table-scroll { scrollbar-color:#c8d8df transparent; scrollbar-width:thin; }
.table-scroll::-webkit-scrollbar { height:7px; width:7px; }
.table-scroll::-webkit-scrollbar-thumb { background:#c8d8df;border-radius:9px; }
.table-scroll tbody tr { transition:background-color .2s ease; }
.table-scroll tbody tr:hover { background:#f7fbfa; }
.month-button { transition:transform .2s var(--ease-cv),background-color .2s ease,box-shadow .2s ease; }
.month-button:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 4px 10px rgba(20,60,80,.08); }
.pill { white-space:nowrap; }
dialog[open] { animation:cv-dialog .28s var(--ease-cv) both; }
dialog[open]::backdrop { animation:cv-backdrop .22s ease both; }
.modal-body { overscroll-behavior:contain; }
.loading-panel { display:flex;align-items:center;justify-content:center;gap:12px;min-height:126px; }
.loading-spinner { width:17px;height:17px;border:2px solid #c9dedf;border-top-color:#307d78;border-radius:100%;animation:cv-spin .8s linear infinite; }
.welcome-panel { padding:26px 29px; margin-top:18px;border:1px solid #d4e9e2;border-radius:19px;background:radial-gradient(circle at 95% 0%,rgba(158,208,181,.2),transparent 35%),linear-gradient(130deg,#f4faf6,#f8faf8);overflow:hidden;box-shadow:0 10px 28px rgba(22,70,72,.035); }
.welcome-kicker { color:#387c71;font-size:10px;letter-spacing:2px;font-weight:850; }
.welcome-content { display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:11px; }
.welcome-content h2 { font-size:clamp(20px,2.3vw,27px);margin:0 0 7px; }
.welcome-content p { max-width:620px;color:#658075;font-size:12px;margin:0; }
.welcome-actions { display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex-shrink:0; }
.welcome-steps { display:flex; flex-wrap:wrap;gap:12px 26px;border-top:1px solid #dcebe3;margin-top:20px;padding-top:18px;color:#50776b;font-size:11px;font-weight:600; }
.welcome-steps b { color:#2a7565;margin-right:8px;font-size:10px;letter-spacing:.5px; }
#toast { border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(9px); }
@keyframes cv-enter { from { opacity:0; transform:translateY(13px); } to { opacity:1;transform:translateY(0); } }
@keyframes cv-dialog { from { opacity:0;transform:translateY(13px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes cv-backdrop { from { opacity:0; } to { opacity:1; } }
@keyframes cv-rise { from { transform:scaleY(.05);opacity:.3; } to { transform:scaleY(1);opacity:1; } }
@keyframes cv-spin { to { transform:rotate(360deg); } }
@keyframes cv-orbit { from {transform:translate(0,0)} to {transform:translate(-28px,-28px)} }
@media(max-width:900px) {
  .sidebar { transition:left .3s var(--ease-cv); }
  .sidebar.open { box-shadow:12px 0 60px rgba(7,33,54,.2); }
  .welcome-content { align-items:flex-start; flex-direction:column;gap:17px; }
  .welcome-actions { flex-shrink:1; }
}
@media(max-width:590px) {
  .page-content { padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
  .topbar { padding-top:env(safe-area-inset-top);height:calc(64px + env(safe-area-inset-top)); }
  .auth-card { width:calc(100% - 28px);border-radius:20px; }
  .auth-brand { padding:33px 26px 28px; }
  .auth-brand h1 { font-size:clamp(33px,10vw,45px);letter-spacing:-1.5px; }
  .welcome-panel { padding:21px 18px; }
  .welcome-actions { width:100%; }
  .welcome-actions button { flex:1;min-width:130px; }
  .welcome-steps { flex-direction:column;gap:10px; }
  #toast { left:14px;right:14px;max-width:none;bottom:calc(15px + env(safe-area-inset-bottom)); }
  dialog { width:calc(100vw - 22px);max-height:calc(100dvh - 24px); }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important; }
}
@media print {
  *,*::before,*::after { animation:none!important;transform:none!important;transition:none!important;box-shadow:none!important; }
  .welcome-panel { display:none!important; }
}