
/* NOTORA V9 — PAPER STUDIO / MICRO-MOTION */
:root{
  --canvas:#f4f6f1;
  --canvas-2:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f0f3ed;
  --surface-deep:#e8eee7;
  --ink:#17221e;
  --ink-soft:#30413a;
  --muted:#66756d;
  --muted-2:#8a968f;
  --line:#d7dfd9;
  --line-strong:#c5d0c9;
  --brand:#1c675c;
  --brand-strong:#124d44;
  --brand-soft:#e1f0ec;
  --lime:#c7ef72;
  --lime-soft:#edf8cf;
  --amber:#d9a04b;
  --danger:#c85757;
  --shadow:0 20px 60px rgba(27,45,38,.09);
  --shadow-soft:0 10px 28px rgba(27,45,38,.06);
  --radius:22px;
  --radius-sm:15px;
  --mx:50%;
  --my:50%;
  --tilt-x:0deg;
  --tilt-y:0deg;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--canvas)}
body{
  margin:0;min-height:100vh;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);
  background:
    radial-gradient(circle at 8% 0%,rgba(199,239,114,.17),transparent 22%),
    radial-gradient(circle at 92% 4%,rgba(28,103,92,.10),transparent 24%),
    linear-gradient(180deg,#f9fbf7 0%,#f4f6f1 44%,#eef2ed 100%);
  letter-spacing:-.012em;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.44;
  background-image:linear-gradient(rgba(23,34,30,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,34,30,.035) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.shell{max-width:1640px;margin:auto;padding:18px 18px 44px}
.app-frame{display:grid;grid-template-columns:244px minmax(0,1fr);gap:16px;align-items:start}
.app-rail{
  position:sticky;top:18px;min-height:calc(100vh - 36px);display:flex;flex-direction:column;
  padding:15px 12px;border:1px solid rgba(28,103,92,.14);border-radius:26px;
  background:rgba(252,253,250,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow)
}
.rail-brand{display:flex;align-items:center;gap:11px;padding:8px 9px;margin-bottom:20px}
.rail-logo{
  width:44px;height:44px;display:grid;place-items:center;border-radius:14px;
  color:#f8fff6;background:linear-gradient(145deg,var(--brand),var(--brand-strong));
  font:800 19px Manrope;box-shadow:0 12px 24px rgba(18,77,68,.17);position:relative;overflow:hidden
}
.rail-logo::after{content:"";position:absolute;inset:-60% -40%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.24),transparent 64%);transform:translateX(-50%);animation:logoSweep 4.6s ease-in-out infinite}
.rail-brand b{display:block;font:800 17px Manrope;letter-spacing:-.05em}
.rail-brand small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.rail-section-label{padding:0 11px 8px;color:#89958f;font:800 9px Manrope;text-transform:uppercase;letter-spacing:.16em}
.rail-nav{display:grid;gap:4px}
.rail-nav a,.rail-profile-link{
  position:relative;display:grid;grid-template-columns:36px 1fr;align-items:center;gap:9px;padding:10px 9px;
  border-radius:13px;color:#68766f;font-size:11px;font-weight:800;transition:background .2s ease,color .2s ease,transform .2s ease
}
.rail-nav a:hover,.rail-profile-link:hover{background:#eff4ef;color:var(--ink);transform:translateX(2px)}
.rail-nav a.active{background:linear-gradient(100deg,#e2f2ed,#eef6e7);color:var(--brand-strong);border:1px solid #c9ded7}
.rail-nav a.active::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:8px;background:var(--brand)}
.rail-index{
  width:31px;height:28px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);
  background:#f8faf7;color:#8a9690;font:800 9px Manrope;transition:transform .2s ease
}
.rail-nav a:hover .rail-index{transform:rotate(-4deg) translateY(-1px)}
.rail-nav a.active .rail-index{background:#fff;border-color:#bedad2;color:var(--brand);box-shadow:0 5px 12px rgba(28,103,92,.08)}
.rail-spacer{flex:1}
.rail-profile-link{border-top:1px solid var(--line);border-radius:0;padding:15px 8px 10px;margin-top:12px}
.rail-profile-link small{color:var(--muted);font-size:9px}
.rail-avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--lime-soft);color:var(--brand-strong);font:800 10px Manrope}
.rail-tools{display:grid;gap:7px;margin-top:8px}
.rail-btn{
  width:100%;min-height:38px;padding:8px 10px;border-radius:11px;border:1px solid var(--line);background:#fff;
  color:#526159;font-size:10px;font-weight:800;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease
}
.rail-btn:hover{transform:translateY(-1px);border-color:#bfcfc7;background:#f9fbf8;box-shadow:var(--shadow-soft)}
.rail-btn-primary{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(28,103,92,.16)}
.rail-btn-primary:hover{background:var(--brand-strong);color:#fff}
.app-content{min-width:0}
.command-bar{
  position:sticky;top:18px;z-index:20;min-height:60px;margin-bottom:15px;padding:10px 15px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid rgba(28,103,92,.12);
  border-radius:17px;background:rgba(255,255,255,.77);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft)
}
.command-left{display:flex;align-items:baseline;gap:13px}
.command-kicker{font:800 8px Manrope;letter-spacing:.18em;color:#8a968f}
.command-title{font:800 15px Manrope;letter-spacing:-.04em}
.command-status{display:flex;align-items:center;gap:7px;color:#76837c;font-size:9px;font-weight:800}
.command-status i{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(28,103,92,.09);animation:statusPulse 2.2s ease-out infinite}
main{padding:0;display:grid;gap:20px}
.page-view{display:none;gap:20px}
.page-view.active{display:grid}
.panel{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow-soft);color:var(--ink)
}
.hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.7fr);
  gap:28px;padding:45px;min-height:565px;
  background:
    radial-gradient(circle at 84% 12%,rgba(199,239,114,.30),transparent 17%),
    radial-gradient(circle at 97% 93%,rgba(28,103,92,.13),transparent 24%),
    linear-gradient(138deg,#ffffff 0%,#f7faf5 56%,#eef5ef 100%)
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(28,103,92,.028) 44%,transparent 63%);
  animation:heroSweep 8s ease-in-out infinite
}
.hero::after{
  content:"";position:absolute;right:-180px;top:-210px;width:560px;height:560px;border-radius:50%;
  border:1px solid rgba(28,103,92,.11);box-shadow:0 0 0 30px rgba(28,103,92,.03),0 0 0 60px rgba(199,239,114,.035);
  animation:heroOrbit 14s linear infinite
}
.hero-main,.hero-side{position:relative;z-index:1}
.eyebrow{color:var(--brand-strong);font:800 9px Manrope;text-transform:uppercase;letter-spacing:.17em}
.hero h1{margin:13px 0 0;max-width:890px;color:var(--ink);font:800 clamp(49px,6.8vw,91px)/.92 Manrope;letter-spacing:-.09em}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero p,.section-intro p,.section-head p,.community-panel p{color:var(--muted);line-height:1.72}
.hero p{max-width:770px;font-size:15px;margin:20px 0}
.personal-welcome{
  display:flex;justify-content:space-between;align-items:center;gap:15px;max-width:830px;margin:21px 0 16px;padding:14px 16px;
  border:1px solid #d9e4de;border-radius:15px;background:#f7faf6
}
.personal-welcome strong,.personal-welcome span{display:block}
.personal-welcome strong{font:800 13px Manrope}
.personal-welcome span{color:#77857d;font-size:10px;margin-top:3px}
.primary-btn,.secondary-btn,.ghost-btn,.catalog-tab,.year-tab,.tab,.hint,.text-btn{
  position:relative;overflow:hidden;border-radius:11px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease
}
.primary-btn,.secondary-btn,.ghost-btn{padding:9px 12px;font-size:10px;font-weight:800}
.primary-btn{
  border:1px solid var(--brand);background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(28,103,92,.15)
}
.primary-btn:hover{transform:translateY(-1px);background:var(--brand-strong);box-shadow:0 16px 28px rgba(28,103,92,.18)}
.secondary-btn,.ghost-btn{border:1px solid var(--line);background:#fff;color:#31443b}
.secondary-btn:hover,.ghost-btn:hover{transform:translateY(-1px);border-color:#bccbc4;background:#f8fbf7;box-shadow:0 9px 20px rgba(27,45,38,.06)}
.text-btn{border:0;background:transparent;color:var(--brand-strong);padding:4px;font-weight:800}
.full{width:100%}
.ripple{position:absolute;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.38);transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:ripple .52s ease-out}
.global-search{
  max-width:850px;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 15px;
  border:1px solid var(--line-strong);border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(27,45,38,.06)
}
.search-icon{font-size:21px;color:#85928c}
.global-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px;padding:10px}
.global-search input::placeholder{color:#9aa49f}
.global-search .primary-btn{min-width:74px}
.search-hints{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hint{border:1px solid #d9e2dc;background:#f7f9f6!important;color:#62736a!important;padding:7px 10px!important;font-weight:800;font-size:10px}
.hint:hover{color:var(--brand-strong)!important;border-color:#b9d1c8!important;background:#edf5f1!important;transform:translateY(-1px)}
.trust-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.trust-strip span{padding:6px 8px;border:1px solid #dce4de;border-radius:999px;background:#fbfcfa;color:#7b8881;font-size:8px;font-weight:800;letter-spacing:.02em}
.hero-side{display:grid;align-content:center;gap:11px}
.hero-motion{
  position:relative;height:190px;overflow:hidden;border:1px solid #d5e2da;border-radius:20px;
  background:
    radial-gradient(circle at 50% 50%,rgba(199,239,114,.38),transparent 21%),
    linear-gradient(145deg,#edf7f0,#f9fbf8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.hero-motion::before{
  content:"";position:absolute;inset:14px;border:1px dashed rgba(28,103,92,.13);border-radius:16px
}
.motion-orbit{position:absolute;left:50%;top:46%;width:118px;height:118px;border:1px solid rgba(28,103,92,.18);border-radius:50%;transform:translate(-50%,-50%);animation:orbitSpin 7.5s linear infinite}
.motion-orbit.orbit-two{width:78px;height:78px;border-color:rgba(217,160,75,.22);animation-duration:4.5s;animation-direction:reverse}
.motion-core{position:absolute;left:50%;top:46%;width:34px;height:34px;border-radius:11px;transform:translate(-50%,-50%) rotate(45deg);background:linear-gradient(145deg,var(--brand),#2f8d7f);box-shadow:0 0 0 8px rgba(28,103,92,.07),0 12px 24px rgba(28,103,92,.18);animation:coreFloat 2.8s ease-in-out infinite}
.motion-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(199,239,114,.18)}
.dot-one{left:31%;top:36%;animation:dotTravelOne 4.3s ease-in-out infinite}
.dot-two{right:27%;top:31%;background:var(--amber);box-shadow:0 0 0 5px rgba(217,160,75,.12);animation:dotTravelTwo 3.9s ease-in-out infinite}
.dot-three{left:26%;bottom:28%;animation:dotBlink 2.7s ease-in-out infinite}
.motion-label{position:absolute;left:15px;right:15px;bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:12px}
.motion-label span{font:800 8px Manrope;letter-spacing:.14em;color:#829088}
.motion-label b{font:800 11px Manrope;color:var(--brand-strong)}
.status-card{padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:#fff}
.status-card>div{display:flex;align-items:center;gap:7px}
.status-card b{font:800 11px Manrope}
.status-card small{display:block;color:#78867e;margin-top:5px;font-size:9px}
.status-chip{margin-left:auto;padding:5px 7px;border-radius:999px;border:1px solid #cbe1d9;background:var(--brand-soft);color:var(--brand-strong);font-size:8px;font-weight:900;letter-spacing:.08em}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(28,103,92,.09);animation:statusPulse 2.2s ease-out infinite}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hero-stats>div{
  position:relative;overflow:hidden;min-height:112px;padding:15px;border:1px solid #dce4de;border-radius:15px;background:#fff;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.hero-stats>div:hover{transform:translateY(-2px);border-color:#bfd4cb;box-shadow:var(--shadow-soft)}
.hero-stats>div::before{content:"";position:absolute;right:-16px;bottom:-26px;width:80px;height:80px;border-radius:50%;background:rgba(199,239,114,.17)}
.hero-stats small,.hero-stats span{display:block;color:#7f8c85;font-size:9px}
.hero-stats strong{display:block;margin:8px 0 3px;color:var(--ink);font:800 28px Manrope;letter-spacing:-.07em}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.quick-card,.result-card,.catalog-card,.roadmap-card,.tool-card,.level-card,.catalog-level-overview-card{
  position:relative;overflow:hidden;isolation:isolate
}
.quick-card{
  display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:15px;border:1px solid var(--line);
  border-radius:17px;background:#fff;box-shadow:var(--shadow-soft);
  transform:perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease
}
.quick-card::after,.result-card::after,.catalog-card::after,.roadmap-card::after,.tool-card::after,.level-card::after,.catalog-level-overview-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(199,239,114,.16),transparent 34%);
  opacity:0;transition:opacity .22s ease
}
.quick-card:hover,.result-card:hover,.catalog-card:hover,.roadmap-card:hover,.tool-card:hover,.level-card:hover,.catalog-level-overview-card:hover{border-color:#bfd4cb;box-shadow:0 18px 36px rgba(27,45,38,.08)}
.quick-card:hover::after,.result-card:hover::after,.catalog-card:hover::after,.roadmap-card:hover::after,.tool-card:hover::after,.level-card:hover::after,.catalog-level-overview-card:hover::after{opacity:1}
.quick-card>span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand-strong);
  font:800 9px Manrope;transition:transform .2s ease
}
.quick-card:hover>span{transform:rotate(-6deg) translateY(-1px)}
.quick-card b{font:800 12px Manrope}
.quick-card small{display:block;color:#77857d;font-size:9px;line-height:1.45;margin-top:3px}
.quick-card:last-child>span{background:var(--lime-soft)}
.progress-panel,.ladder-panel,.mini-dashboard{padding:24px}
.progress-steps{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;align-items:center;gap:8px;margin-top:18px}
.progress-step{display:flex;gap:9px}
.progress-step>span{
  flex:0 0 29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#f2f6f1;border:1px solid #d4ded8;
  color:#718078;font:800 10px Manrope;transition:transform .2s ease,background .2s ease,border-color .2s ease
}
.progress-step:hover>span{transform:scale(1.05) rotate(-4deg)}
.progress-step.active>span{background:var(--brand);border-color:var(--brand);color:#fff;animation:activeStep 2.4s ease-out infinite}
.progress-step b{display:block;font-size:10px}
.progress-step small{display:block;color:#7a8780;font-size:9px;line-height:1.4;margin-top:3px}
.progress-line{height:1px;background:linear-gradient(90deg,#cbd6cf,#e6ece7);position:relative;overflow:hidden}
.progress-line::after{content:"";position:absolute;inset:0;width:38%;background:var(--brand);animation:lineTravel 2.8s ease-in-out infinite}
.section-intro,.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:2px}
.section-intro>div:first-child{max-width:840px}
.section-intro h2,.section-head h2{margin:5px 0 0;color:var(--ink);font:800 30px/1.03 Manrope;letter-spacing:-.055em}
.section-intro em{color:var(--brand);font-style:normal}
.result-tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{border:1px solid var(--line);padding:9px 11px;background:#fff;color:#708078;font-weight:800;font-size:10px}
.tab.active{background:var(--brand-soft);border-color:#c2ded6;color:var(--brand-strong)}
.browse-grid{display:grid;grid-template-columns:255px minmax(0,1fr);gap:14px}
.filters,.results-panel{padding:19px}
.panel-head,.results-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.panel-head h3,.results-head h3{margin:4px 0 0;font:800 20px Manrope}
.filters label{display:grid;gap:6px;margin-top:15px;color:#6d7b73;font-size:10px;font-weight:800}
.filters select,.filters input,.catalog-toolbar input,.catalog-toolbar select,.roadmap-controls>select,.preferences-form input,.preferences-form select,.gpa-row input,.gpa-row select,.task-form input,.modal-card input,.modal-card select,.modal-card textarea{
  width:100%;min-height:39px;padding:9px 10px;background:#fbfcfa;border:1px solid var(--line);border-radius:10px;color:var(--ink);outline:0
}
.filters select:focus,.filters input:focus,.catalog-toolbar input:focus,.catalog-toolbar select:focus,.roadmap-controls>select:focus,.preferences-form input:focus,.preferences-form select:focus,.gpa-row input:focus,.gpa-row select:focus,.task-form input:focus,.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:#9fc6ba;box-shadow:0 0 0 4px rgba(28,103,92,.08)}
.filter-note{margin-top:18px;padding:13px;border:1px solid #dbe6df;border-radius:14px;background:#f3f7f2;color:#64736b;font-size:10px}
.filter-note p{color:#7a8780;line-height:1.5;margin:6px 0 0}
.results-panel{border-radius:22px}
.results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:15px}
.result-card{min-height:215px;padding:17px;border:1px solid var(--line);border-radius:17px;background:#fff}
.result-top,.result-foot,.catalog-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.source-badge{
  padding:6px 8px;border-radius:999px;background:var(--brand-soft);border:1px solid #c8ded7;color:var(--brand-strong);
  font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em
}
.source-badge.community{background:#f8efdf;border-color:#edd9b9;color:#8f682c}
.result-kind,.source-line{font-size:9px;color:#7a8780}
.result-card h3{margin:11px 0 7px;font:800 15px/1.3 Manrope}
.result-card p{font-size:10px;color:#718078;line-height:1.65;margin:0}
.source-line{display:flex;align-items:center;gap:7px;margin-top:12px}
.source-line b{color:var(--ink-soft)}
.result-foot{border-top:1px solid #e2e8e3;margin-top:13px;padding-top:11px}
.result-foot small{color:#87928d;font-size:8px}
.result-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.result-actions button{font-size:9px}
.loading{
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:28px;color:#7a8780;font-size:11px
}
.loading::before,.loading::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);animation:loadingDot 1s ease-in-out infinite}
.loading::after{animation-delay:.16s}
.two-col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:14px}
.calendar-panel,.source-panel,.tools-panel,.community-panel{padding:23px}
.events-list{display:grid;gap:10px;margin-top:15px}
.event{
  display:grid;grid-template-columns:75px 1fr auto;gap:12px;align-items:center;padding:11px;border:1px solid var(--line);
  border-radius:14px;background:#fff;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.event:hover{transform:translateX(2px);border-color:#bfd4cb;box-shadow:var(--shadow-soft)}
.event-date{
  display:grid;place-items:center;min-height:50px;border:1px solid #cbe0d8;border-radius:12px;background:var(--brand-soft);
  color:var(--brand-strong);font:800 17px Manrope
}
.event-date small{display:block;color:#6f8078;font:800 8px "DM Sans";text-transform:uppercase}
.event-main b{display:block;font-size:12px}
.event-main small{color:#7a8780;line-height:1.4;font-size:9px}
.event a{font-size:9px;font-weight:900;color:var(--brand-strong)}
.source-panel{background:linear-gradient(155deg,#edf7f2,#f8fbf5);border-color:#cfe2da}
.source-panel h2{color:var(--ink)}
.source-panel p{color:#6c7b72;font-size:11px;line-height:1.6}
.source-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}
.source-stats div{padding:11px;border-radius:13px;border:1px solid #d4e1da;background:rgba(255,255,255,.75)}
.source-stats b,.source-stats span{display:block}.source-stats b{font:800 20px Manrope}.source-stats span{font-size:8px;color:#78877f;margin-top:2px}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:17px}
.tool-card{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff}
.tool-label{color:#78877f;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.tool-card h3{font:800 20px Manrope;margin:6px 0 15px}
.gpa-rows{display:grid;gap:7px;margin-bottom:9px}
.gpa-row{display:grid;grid-template-columns:1.5fr .65fr .7fr 34px;gap:6px}
.gpa-row .remove{border:1px solid var(--line);background:#f6f8f5;color:#738078;border-radius:9px}
.tool-result{display:block;margin-top:13px;font:800 22px Manrope}
.timer{text-align:center;display:block;margin:17px 0;font:800 49px Manrope;letter-spacing:-.08em;color:var(--brand-strong);animation:timerBreath 2.6s ease-in-out infinite}
.timer-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tool-note{margin-top:11px;padding:9px 10px;border-radius:10px;background:#f3f7f2;color:#76847c;font-size:9px;line-height:1.5}
.task-form{display:flex;gap:6px}.task-form input{flex:1;min-width:0}
.tasks{display:grid;gap:7px;margin-top:10px}
.task-mark{width:8px;height:8px;flex:0 0 8px;border:1px solid #99aaa1;border-radius:3px;background:#fff;transition:transform .18s ease,background .18s ease;border-radius:3px}.task.done .task-mark{background:var(--lime);border-color:#a7cf55;transform:rotate(45deg)}.task{display:flex;gap:7px;align-items:center;padding:9px;background:#f6f8f5;border:1px solid #e2e8e2;border-radius:10px;font-size:10px;transition:transform .18s ease,border-color .18s ease}
.task:hover{transform:translateX(2px);border-color:#cad8d1}
.task.done{text-decoration:line-through;color:#95a099}
.task button{margin-left:auto;border:0;background:transparent;color:#87928d}
.mini-dashboard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;background:linear-gradient(140deg,#164d45,#1c675c);border:1px solid #1c675c;box-shadow:0 16px 40px rgba(28,103,92,.15);color:#fff}
.mini-dashboard h2,.mini-dashboard p,.mini-dashboard .eyebrow{color:#fff}
.mini-dashboard p{opacity:.76;font-size:11px}
.today-metrics{display:grid;grid-template-columns:repeat(3,110px);gap:8px}
.today-metrics div{padding:12px 9px;border-radius:13px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);text-align:center}
.today-metrics b,.today-metrics span{display:block}.today-metrics b{font:800 23px Manrope}.today-metrics span{font-size:8px;opacity:.72;margin-top:3px}
.catalog-panel,.roadmap-panel{padding:24px}
.catalog-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:17px}
.catalog-stats>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfcfa}
.catalog-stats span{display:block;color:#75827b;font-size:9px}.catalog-stats strong{display:block;margin-top:6px;color:var(--ink);font:800 22px Manrope}
.catalog-level-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:10px}
.level-card{padding:14px;text-align:left;border:1px solid var(--line);border-radius:15px;background:#fff}
.level-card>span{display:grid;place-items:center;width:29px;height:26px;border-radius:9px;background:#eff5f0;color:#78867f;font:800 8px Manrope;margin-bottom:10px}
.level-card b{display:block;font:800 11px Manrope}.level-card small{display:block;color:#78867f;font-size:8px;line-height:1.4;margin-top:4px}
.level-card.active{border-color:#bcd8cf;background:linear-gradient(145deg,#f4faf5,#fff)}
.level-card.active>span{background:var(--brand);color:#fff}
.catalog-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 190px 170px;gap:8px;align-items:center;margin-top:16px}
.catalog-tabs{display:flex;flex-wrap:wrap;gap:6px;grid-column:1 / -1}
.catalog-tab{padding:9px 11px;border:1px solid var(--line);background:#fff;color:#75827b;font-size:9px;font-weight:800}
.catalog-tab.active{background:var(--brand-soft);border-color:#bfdad2;color:var(--brand-strong)}
.catalog-result-line{display:flex;justify-content:space-between;gap:10px;margin:12px 2px 0;color:#78867f;font-size:9px}
.catalog-source-note{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px;padding:9px 11px;border:1px dashed #cfdbd4;border-radius:11px;background:#fbfcfa;color:#7a8780;font-size:8px}
.catalog-source-note a{color:var(--brand-strong);font-weight:900}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:13px}
.catalog-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.catalog-card-top{font-size:8px}
.catalog-badge{padding:5px 7px;border-radius:999px;background:#eff5f0;color:var(--brand-strong);border:1px solid #d4e2db;font-weight:900}
.catalog-city{color:#7c8882}
.catalog-card h3{margin:10px 0 6px;font:800 14px/1.25 Manrope}
.catalog-card p{color:#708078;font-size:10px;line-height:1.55;margin:0}
.catalog-meta{display:flex;justify-content:space-between;gap:8px;padding-top:10px;margin-top:11px;border-top:1px solid #e3e9e4;color:#87938c;font-size:8px}
.catalog-level-overview{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:15px}
.catalog-level-overview-card{padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff}
.catalog-level-icon{display:grid;place-items:center;width:31px;height:29px;border-radius:10px;background:var(--brand-soft);color:var(--brand-strong);font:800 9px Manrope;margin-bottom:10px}
.catalog-level-overview-card h3{margin:10px 0 6px;font:800 16px Manrope}.catalog-level-overview-card p{margin:0;color:#718078;font-size:9px;line-height:1.55}
.catalog-level-overview-card .secondary-btn{margin-top:12px}
.catalog-pagination{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:15px}
.catalog-pagination button{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#7a8780;font-size:9px;font-weight:800}
.catalog-pagination button:hover{border-color:#bfd4cb;color:var(--brand-strong)}
.catalog-pagination button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.catalog-page-gap{padding:0 3px;color:#9aa49f}
.roadmap-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:17px}
.roadmap-controls>select{min-width:220px}
.year-tabs{display:flex;gap:6px;flex-wrap:wrap}
.year-tab{padding:9px 11px;border:1px solid var(--line);background:#fff;color:#75827b;font-size:9px;font-weight:800}
.year-tab.active{background:var(--brand-soft);border-color:#bfdad2;color:var(--brand-strong)}
.roadmap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.roadmap-card{padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff}
.roadmap-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--brand),var(--lime),transparent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.roadmap-card:hover::before{transform:scaleX(1)}
.semester{display:inline-block;padding:5px 7px;border-radius:999px;background:#eff5f0;color:#708078;font-size:8px;font-weight:900}
.subject{margin-top:10px;font:800 17px Manrope}
.roadmap-topic{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #e6ebe7}
.roadmap-topic b{font-size:10px}.roadmap-topic span{color:#839089;font-size:8px}
.roadmap-skill{margin-top:8px;padding:9px;border-radius:10px;background:#f2f6f1;color:#708078;font-size:9px;line-height:1.45}
.ladder-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:16px}
.ladder-grid>div{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.ladder-grid>div:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.ladder-grid span{display:block;color:#93a099;font:800 8px Manrope}.ladder-grid b{display:block;margin-top:7px;font:800 11px Manrope}.ladder-grid small{display:block;margin-top:3px;color:#77847d;font-size:8px;line-height:1.4}
.community-panel{background:linear-gradient(145deg,#fff,#f2f8f3)}
.community-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.community-info>div{padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}
.community-info b,.community-info span{display:block}.community-info b{font:800 11px Manrope}.community-info span{margin-top:5px;color:#74827a;font-size:9px;line-height:1.5}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:14px}
.profile-card,.profile-side{padding:23px}
.profile-side{background:linear-gradient(160deg,#164e45,#1c675c);border-color:#1c675c;color:#fff}
.profile-side .eyebrow,.profile-side h3{color:#fff}.profile-side p{color:rgba(255,255,255,.76);font-size:10px;line-height:1.6}
.profile-actions{display:grid;gap:7px;margin-top:16px}.profile-actions .secondary-btn,.profile-actions .ghost-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.profile-actions .text-btn{justify-self:start;color:#d9f5a1!important}
.preferences-form{margin-top:17px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.preferences-form label,.modal-card label{display:grid;gap:6px;margin-top:12px;color:#6b7972;font-size:10px;font-weight:800}
.preferences-form .full{grid-column:1/-1}
.form-status{display:block;color:var(--brand-strong);font-size:9px;margin-top:9px}
.preference-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}.preference-chips span{padding:6px 8px;border-radius:999px;background:#e3f1ec;border:1px solid #c8dfd7;color:#14564d;font-size:8px;font-weight:900}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
.hidden{display:none!important}
.modal-backdrop{position:absolute;inset:0;background:rgba(18,29,25,.42);backdrop-filter:blur(6px)}
.modal-card{
  position:relative;z-index:1;width:min(94vw,430px);max-height:90vh;overflow:auto;padding:24px;
  border:1px solid #d6e0da;border-radius:21px;background:#fff;box-shadow:0 30px 80px rgba(13,27,21,.22);animation:modalIn .24s ease-out
}
.modal-card.wide{width:min(94vw,700px)}.modal-close{
  position:absolute;top:12px;right:13px;width:31px;height:31px;border:1px solid var(--line);border-radius:50%;background:#f6f8f5;color:#6f7d76;font-size:20px
}
.modal-close:hover{transform:rotate(90deg)}
.modal-card h3{margin:5px 0;font:800 27px Manrope}.modal-sub{color:#77847d;font-size:11px;line-height:1.6}
.auth-message.error{color:#c85757;font-size:9px;margin-top:10px}.auth-message.success{color:#2c7b69;font-size:9px;margin-top:10px}
.switch{display:block;margin:13px auto 0}.password-field{position:relative}.password-field input{padding-right:62px}.password-toggle{position:absolute;right:7px;top:7px;border:0;background:#eef3ee;color:#66756d;border-radius:8px;padding:6px 7px;font-size:8px;font-weight:800}
.file{padding:12px;border:1px dashed #bfcfc7;border-radius:12px;background:#f8faf7}.file small{font-weight:400}
.reader-card iframe{width:100%;min-height:58vh;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#f5f7f4}
.reader-fallback{padding:14px;margin-top:12px;border-radius:13px;background:#f2f6f1;border:1px solid #dde6df;font-size:10px}
.toast{
  position:fixed;left:50%;bottom:22px;z-index:120;transform:translate(-50%,16px);padding:10px 14px;border:1px solid rgba(255,255,255,.13);
  color:#fff;background:#17241f;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;font-size:10px;box-shadow:0 14px 30px rgba(15,27,23,.22)
}
.toast.show{opacity:1;transform:translate(-50%,0)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid #70a79a;outline-offset:2px}

.motion-ready .page-view.active > .panel,
.motion-ready .page-view.active > .two-col > .panel,
.motion-ready .quick-card,
.motion-ready .roadmap-card,
.motion-ready .catalog-card,
.motion-ready .catalog-level-overview-card{
  animation:riseIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--motion-delay,0ms)
}
.motion-ready .page-view.active > .panel.in-view,
.motion-ready .quick-card.in-view,
.motion-ready .roadmap-card.in-view,
.motion-ready .catalog-card.in-view,
.motion-ready .catalog-level-overview-card.in-view{animation-play-state:running}

@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes heroSweep{0%,100%{transform:translateX(-8%)}50%{transform:translateX(8%)}}
@keyframes heroOrbit{to{transform:rotate(360deg)}}
@keyframes logoSweep{0%,65%{transform:translateX(-50%) rotate(12deg)}100%{transform:translateX(135%) rotate(12deg)}}
@keyframes statusPulse{0%{box-shadow:0 0 0 0 rgba(28,103,92,.16)}70%{box-shadow:0 0 0 7px rgba(28,103,92,0)}100%{box-shadow:0 0 0 0 rgba(28,103,92,0)}}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes coreFloat{0%,100%{transform:translate(-50%,-50%) rotate(45deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(45deg) translateY(-5px)}}
@keyframes dotTravelOne{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,18px)}}
@keyframes dotTravelTwo{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,23px)}}
@keyframes dotBlink{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@keyframes activeStep{0%,100%{box-shadow:0 0 0 0 rgba(28,103,92,.12)}50%{box-shadow:0 0 0 7px rgba(28,103,92,0)}}
@keyframes lineTravel{0%,100%{transform:translateX(-100%)}45%,70%{transform:translateX(160%)}}
@keyframes loadingDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes timerBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes ripple{to{transform:translate(-50%,-50%) scale(30);opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:1180px){
  .app-frame{grid-template-columns:76px minmax(0,1fr)}
  .rail-brand span:not(.rail-logo),.rail-section-label,.rail-nav a>span:last-child,.rail-profile-link>span:last-child,.rail-tools .rail-btn:not(.rail-btn-primary){display:none}
  .app-rail{padding:12px 8px}.rail-brand{justify-content:center;padding:7px;margin-bottom:16px}
  .rail-nav a{grid-template-columns:1fr;place-items:center;padding:10px}.rail-nav a.active::before{left:0}.rail-index{width:38px}
  .rail-profile-link{grid-template-columns:1fr;place-items:center}.rail-profile-link>span:last-child{display:none}
  .rail-tools{margin-top:8px}.rail-btn{font-size:0}.rail-btn-primary{font-size:0}.rail-btn-primary::after{content:"+";font-size:19px}
  .catalog-grid,.roadmap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .hero{grid-template-columns:1fr}.hero-side{grid-template-columns:1fr 1fr}.hero-motion{height:170px}.status-card{height:fit-content}
  .quick-grid{grid-template-columns:1fr 1fr}.tools-grid{grid-template-columns:1fr 1fr}.catalog-level-strip{grid-template-columns:1fr 1fr}
  .catalog-level-overview{grid-template-columns:repeat(3,1fr)}.community-info{grid-template-columns:1fr}
  .profile-layout{grid-template-columns:1fr}.mini-dashboard{grid-template-columns:1fr}
}
@media(max-width:820px){
  .shell{padding:10px}.app-frame{display:block}.app-rail{
    position:fixed;left:10px;right:10px;bottom:10px;top:auto;z-index:80;min-height:auto;height:65px;border-radius:18px;padding:6px 7px;display:flex;flex-direction:row;align-items:center
  }
  .rail-brand,.rail-spacer,.rail-profile-link,.rail-tools{display:none}.rail-section-label{display:none}.rail-nav{display:grid;grid-template-columns:repeat(7,1fr);width:100%;gap:3px}
  .rail-nav a{grid-template-columns:1fr;place-items:center;padding:5px 2px;background:transparent!important;border:0!important}.rail-nav a.active::before{display:none}
  .rail-index{width:31px;height:25px;font-size:8px}.app-content{padding-bottom:82px}.command-bar{top:8px}
  .hero{padding:31px 24px}.hero h1{font-size:52px}.hero-side{grid-template-columns:1fr}.hero-motion{height:155px}
  .browse-grid{grid-template-columns:1fr}.results-grid{grid-template-columns:1fr}.catalog-grid,.roadmap-grid{grid-template-columns:1fr 1fr}
  .progress-steps{grid-template-columns:1fr 1fr;gap:14px}.progress-line{display:none}
}
@media(max-width:580px){
  .command-kicker{display:none}.command-title{font-size:13px}.command-status{font-size:8px}
  .hero{padding:24px 18px;border-radius:21px}.hero h1{font-size:43px}.hero p{font-size:13px}
  .personal-welcome{flex-direction:column;align-items:stretch}.personal-welcome .secondary-btn{text-align:center}
  .hero-stats{grid-template-columns:1fr 1fr}.hero-stats>div{min-height:103px}
  .quick-grid,.tools-grid,.catalog-level-strip,.catalog-level-overview{grid-template-columns:1fr}
  .section-intro,.section-head{display:block}.result-tabs{margin-top:10px;overflow:auto;flex-wrap:nowrap}
  .catalog-panel,.roadmap-panel,.tools-panel,.community-panel,.calendar-panel,.source-panel,.profile-card,.profile-side,.progress-panel,.ladder-panel,.mini-dashboard{padding:18px;border-radius:18px}
  .catalog-toolbar{grid-template-columns:1fr!important}.catalog-tabs{display:grid;grid-template-columns:1fr 1fr}
  .today-metrics{grid-template-columns:repeat(3,1fr)}.today-metrics div{padding:10px 4px}
  .form-grid{grid-template-columns:1fr}.preferences-form .full{grid-column:auto}
  .roadmap-controls{display:grid}.roadmap-controls>select{min-width:0}.roadmap-grid{grid-template-columns:1fr}
  .event{grid-template-columns:58px 1fr}.event a{display:none}.source-stats{gap:5px}
  .catalog-source-note{display:grid}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero::after,.hero::before,.motion-orbit,.motion-core,.motion-dot,.timer,.command-status i,.live-dot{animation:none!important}
}
