/* Atlas product design */
:root {
  --bg:#08090c; --panel:#11141b; --text:#f7f8fb; --muted:#a7afbf;
  --line:#2b303d; --green:#a9c6ff; --purple:#c0afff;
  --glass-line:#2b3345;
  --glass-fill:linear-gradient(145deg,#1b2130,#10131b 75%);
  --glass-shadow:0 12px 32px #02040a42,inset 0 1px #ffffff0e;
  --premium-accent:#3478f6;
}
body {
  background:radial-gradient(ellipse at 70% 0%,#172441 0%,transparent 45%),var(--bg);
  background-attachment:fixed;
}
body > aside,.shell > header {background:#10131bdc;border-color:var(--line)}
body > aside {padding-top:34px}
.logo,.brand b {background:linear-gradient(145deg,#79aaff,#365dd9);color:white;box-shadow:0 5px 17px #4780ff4d}
#nav button.active,button[aria-pressed=true] {
  background:#25385c;color:#d8e6ff;box-shadow:inset 0 0 0 1px #89b2ff41;
}
nav b {background:#405786;color:white}
main {padding-top:30px}
.intro h1 {font-size:clamp(33px,5vw,64px);line-height:1.04;letter-spacing:-.055em}
.hero.atlas-hero {
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);align-items:center;
  gap:18px;min-height:400px;padding:clamp(26px,4vw,64px);
  border-radius:34px;background:radial-gradient(ellipse at 83% 51%,#233f70 0%,#142039 36%,#101621 69%);
  color:#f7f9ff;box-shadow:0 20px 58px #04091455,inset 0 1px #d9e8ff25;
}
.atlas-hero::after {display:none}
.atlas-hero-copy {position:relative;z-index:1}
.atlas-kicker {color:#afcaff;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:750;letter-spacing:.21em}
.atlas-kicker span {width:7px;height:7px;background:#8bb5ff;border-radius:50%;box-shadow:0 0 13px #91bcff}
.atlas-hero h1 {font-size:clamp(38px,5.25vw,86px);letter-spacing:-.068em;line-height:.98;margin:17px 0 20px;font-weight:780}
.atlas-hero h1 em {font-style:normal;color:#a5c3ff}
.atlas-hero p {color:#b9c6dd;font-size:clamp(13px,1.25vw,17px);max-width:39ch}
.atlas-hero-actions {display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.atlas-hero-actions .btn {padding:12px 16px;white-space:nowrap;font-size:12px}
.atlas-hero-actions span {margin-left:4px}
.btn.primary,.primary,#submit {background:linear-gradient(160deg,#4c90ff,#2766e8);color:white;border-color:#79a6ff;box-shadow:0 6px 20px #2a71ec45,inset 0 1px #d6e6ff66}
.atlas-hero .atlas-secondary {background:#182b4b;color:#eef5ff;border-color:#6888bb}
.atlas-hero-art {position:relative;min-width:0;padding:5% 2% 2%;display:grid;justify-items:center}
.atlas-orbit {position:relative;width:min(100%,350px);aspect-ratio:1;display:grid;place-items:center}
.atlas-orbit i {position:absolute;inset:13% 2%;border:1px solid #b6d2ff6b;border-radius:50%;transform:rotate(var(--angle));box-shadow:0 0 12px #7fb3ff21}
.atlas-orbit i:nth-child(1){--angle:-29deg}
.atlas-orbit i:nth-child(2){--angle:31deg;inset:25% 0}
.atlas-orbit i:nth-child(3){--angle:87deg;inset:18% 6%}
.atlas-core {
 width:57%;aspect-ratio:1;border-radius:28%;display:grid;place-items:center;transform:rotate(-9deg);
 border:1px solid #d6e6ff9c;background:linear-gradient(150deg,#a7caff,#487bdb 53%,#6a55bf);
 box-shadow:inset 0 1px 12px #ffffff8a,inset 0 -15px 40px #2a307d80,0 23px 64px #1b58d47a;
}
.atlas-core b {color:#fff;font-size:clamp(47px,9vw,118px);font-weight:800;line-height:1;letter-spacing:-.09em;padding-right:.08em;text-shadow:0 5px 16px #29397f85}
.atlas-art-caption {width:100%;display:flex;justify-content:space-between;color:#b7cbed;font-size:9px;letter-spacing:.18em}
.stats,.subject-grid,.grid-two {gap:clamp(10px,1.35vw,22px)}
.stat,.subject-card,.panel {border-radius:24px}
.stat strong {font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.stat label,.stat small {color:var(--muted)}
.subject-card .symbol {border-radius:13px;width:43px;height:43px}
.subject-card h3 {letter-spacing:-.025em;font-size:clamp(14px,1.4vw,21px)}
.section-head h2 {font-size:clamp(20px,2.2vw,34px);letter-spacing:-.045em}
.focus-panel .timer {font-variant-numeric:tabular-nums}
.form-panel,.story {border-radius:27px}
.story {background:radial-gradient(ellipse at 86% 70%,#273f70,transparent 68%),var(--glass-fill)}
.orbit span,.orbit i,.orbit b {color:var(--green)}
:where(button,a,input,select):focus-visible {outline-color:#7cabff}
:root[data-theme=light] {--bg:#f4f6fb;--text:#172437;--green:#2256a4;--premium-accent:#245dc3}
[data-theme=light] body {background:radial-gradient(ellipse at 75% 0%,#dce7ff,transparent 52%),var(--bg)}
[data-theme=light] .hero.atlas-hero {background:radial-gradient(ellipse at 83% 51%,#d0dfff,#e7eeff 48%,#f8faff 80%);color:#14213b}
[data-theme=light] .atlas-hero h1 em {color:#315bb8}
[data-theme=light] .atlas-hero p,[data-theme=light] .atlas-art-caption {color:#405579}
[data-theme=light] .atlas-hero .atlas-secondary {background:#f2f6ff;color:#234b8f;border-color:#9fb5dc}
[data-theme=light] .atlas-orbit i {border-color:#537cbc76}
[data-theme=light] :is(#nav button.active,.tabs button[aria-pressed=true]) {background:#dce8ff;color:#1f488c}
[data-theme=light] .story {background:radial-gradient(ellipse at 90% 75%,#d4e1ff,transparent 70%),var(--glass-fill)}
@media (prefers-reduced-motion:no-preference) {
 .atlas-core {animation:atlas-float 5.8s ease-in-out 2}
 @keyframes atlas-float {0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-9px) rotate(-5deg)}}
}
@media (max-width:760px) {
 .hero.atlas-hero {min-height:0;grid-template-columns:1fr;gap:10px;border-radius:25px;padding:25px 20px 18px}
 .atlas-hero h1 {font-size:clamp(33px,8vw,56px)}
 .atlas-hero-art {padding:0;width:min(100%,250px);justify-self:center}
 .atlas-orbit {width:74%}
 .atlas-art-caption {margin-top:2px}
 .atlas-hero-actions .btn {padding:10px 12px;font-size:11px}
 .stat,.subject-card,.panel {border-radius:20px}
}

.atlas-brand-icon { display:block; flex:none; border-radius:9px; }
.atlas-hero-art { perspective:640px; }
.atlas-orbit {
  transform:rotateX(var(--atlas-tilt-x,0deg)) rotateY(var(--atlas-tilt-y,0deg));
  transition:transform .23s ease-out,filter .3s ease;
}
.atlas-orbit .atlas-core {
  cursor:pointer; position:relative; z-index:1; padding:0; animation:none;
  background:radial-gradient(circle at var(--atlas-light-x,33%) var(--atlas-light-y,22%),#e3f7ff 0%,transparent 48%),
    linear-gradient(150deg,#83b9ff,#487bdb 53%,#6a55bf);
}
.atlas-orbit .atlas-core:hover { transform:rotate(-5deg) scale(1.09); }
.atlas-orbit .atlas-core:active { transform:rotate(2deg) scale(.89); }
.atlas-orbit .atlas-core:focus-visible {outline:3px solid #c4e4ff;outline-offset:7px}
.atlas-rings,.atlas-burst {position:absolute;inset:0;pointer-events:none}
.atlas-energized .atlas-orbit {filter:drop-shadow(0 0 24px #6496ffad)}
.atlas-energized .atlas-core {
  background:radial-gradient(circle at var(--atlas-light-x,33%) var(--atlas-light-y,22%),#ecffff 0%,transparent 45%),
    linear-gradient(145deg,#83dbff,#6051f3 52%,#af51dc);
}
.atlas-energized .atlas-rings i {border-color:#cceaff;box-shadow:0 0 16px #8fcfff99}
.atlas-orbit-caption {font-weight:750;letter-spacing:.10em}
.atlas-orbit .atlas-burst i {
  inset:50% auto auto 50%;width:7px;height:7px;border:0;border-radius:50%;opacity:0;
  background:#c0eaff;box-shadow:0 0 12px #81d4ff;transform:none;
}
.atlas-burst i:nth-child(1){--ray:0deg}
.atlas-burst i:nth-child(2){--ray:30deg}
.atlas-burst i:nth-child(3){--ray:60deg}
.atlas-burst i:nth-child(4){--ray:90deg}
.atlas-burst i:nth-child(5){--ray:120deg}
.atlas-burst i:nth-child(6){--ray:150deg}
.atlas-burst i:nth-child(7){--ray:180deg}
.atlas-burst i:nth-child(8){--ray:210deg}
.atlas-burst i:nth-child(9){--ray:240deg}
.atlas-burst i:nth-child(10){--ray:270deg}
.atlas-burst i:nth-child(11){--ray:300deg}
.atlas-burst i:nth-child(12){--ray:330deg}
@media (prefers-reduced-motion:no-preference) {
  .atlas-energized .atlas-rings {animation:atlas-spin 3.6s linear infinite}
  .atlas-energized .atlas-rings i:nth-child(2) {animation:atlas-counterspin 2.2s linear infinite}
  .atlas-orbit .atlas-spark i {animation:atlas-ray .74s cubic-bezier(.1,.7,.3,1) both}
  @keyframes atlas-spin {to{transform:rotate(360deg)}}
  @keyframes atlas-counterspin {from{transform:rotate(var(--angle))}to{transform:rotate(calc(var(--angle) - 720deg))}}
  @keyframes atlas-ray {
    0%{opacity:0;transform:rotate(var(--ray)) translateX(24px) scale(.35)}
    24%{opacity:1}
    100%{opacity:0;transform:rotate(var(--ray)) translateX(clamp(70px,12vw,170px)) scale(.12)}
  }
}
@media (prefers-reduced-motion:reduce) {
  .atlas-orbit .atlas-core:hover,.atlas-orbit .atlas-core:active {transform:rotate(-9deg)}
}

/* Personal study history */
.study-report {margin:20px 0}
.study-report h2 {margin:0}
.study-report > .section-head {gap:14px;margin:0 0 16px;flex-wrap:wrap}
.study-filters,.study-period {display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.study-filters .btn {min-height:36px}
.study-filters .btn[aria-pressed=true] {border-color:#81a5e7;background:#263d65;color:#eef4ff}
.study-period {gap:12px;margin:12px 0 16px;color:var(--muted);font-weight:650}
.study-period .btn {width:34px;min-height:34px;padding:0;font-size:21px;line-height:1}
.study-period .btn:disabled {opacity:.4;cursor:default}
.study-chart {
  display:grid;grid-template-columns:clamp(108px,24vw,192px) minmax(0,1fr);
  align-items:center;gap:clamp(12px,4vw,44px);max-width:730px;margin:18px 0 0;
}
.study-donut {
  position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;aspect-ratio:1;border-radius:50%;background:var(--study-fill);
}
.study-donut::before {
  content:'';position:absolute;inset:11%;z-index:-1;border-radius:50%;background:var(--panel);
}
.study-donut strong {font-size:clamp(14px,3.05vw,28px);font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.study-donut span {font-size:clamp(10px,1.25vw,13px);color:var(--muted)}
.study-legend {list-style:none;padding:0;margin:0}
.study-legend li {
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);color:var(--muted);
}
.study-legend li:last-child {border-bottom:0}
.study-legend li b,.study-journal .file-row b {font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.study-summary {margin:14px 0 0;color:var(--muted);font-weight:650}
.study-journal {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:20px;border-top:1px solid var(--line)}
.study-journal h3 {margin:16px 0 5px}
.study-journal .file-row h3 {margin:0;font-size:14px;overflow-wrap:anywhere}
.study-journal .file-copy {flex:1;min-width:0}
.study-journal .file-copy small {white-space:normal;overflow-wrap:anywhere}
.study-more summary {cursor:pointer;margin:12px 0;color:var(--green)}
[data-theme=light] .study-filters .btn[aria-pressed=true] {background:#dce8ff;color:#1f488c;border-color:#819ecb}
@media (max-width:660px) {
  .study-journal {grid-template-columns:1fr;gap:3px}
  .study-legend li {gap:5px;font-size:12px}
}

.study-session { flex-wrap: wrap; }
.study-session .file-copy { min-width: min(100%, 10rem); }
.study-session-actions, .study-delete-actions { display: flex; align-items: center; gap: 8px; }
.study-session-actions { margin-inline-start: auto; }
.study-delete-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.study-delete, .study-delete-actions .btn { min-height: 42px; }
.study-delete.btn { color: #ffc1c5; border-color: #bd758477; }
#study-delete-dialog { max-width: 430px; }
#study-delete-detail { overflow-wrap: anywhere; color: var(--text); }
[data-theme=light] .study-delete.btn { color: #982940; border-color: #b96f7c; }