:root{
  --bg:#f4efe6;--paper:#fffdf7;--paper2:#f8efe0;--ink:#151515;--muted:#70685f;
  --line:#151515;--softline:#d8cbb9;--amber:#f5a623;--navy:#0a0f1e;--green:#2b805e;
  --red:#b23a3a;--blue:#315bd8;--purple:#7454bd;--shadow:9px 9px 0 var(--line);
  --softshadow:0 18px 55px rgba(21,21,21,.12);--radius:0;--max:1240px;--side:282px;
  --display:"Playfair Display",Georgia,serif;--body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
[data-theme="midnight"]{--bg:#0a0f1e;--paper:#121a2b;--paper2:#1c273d;--ink:#f7f0e6;--muted:#b7aa9a;--line:#f7f0e6;--softline:#303b52;--navy:#f7f0e6;--shadow:9px 9px 0 #f7f0e6;--softshadow:0 18px 55px rgba(0,0,0,.3)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:linear-gradient(90deg,rgba(21,21,21,.04) 1px,transparent 1px),linear-gradient(rgba(21,21,21,.04) 1px,transparent 1px),var(--bg);background-size:32px 32px;color:var(--ink);font-family:var(--body);line-height:1.55}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(#000 1px,transparent 1px);background-size:21px 21px;opacity:.025;pointer-events:none;z-index:999}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.86rem}.mt0{margin-top:0}.mb0{margin-bottom:0}
.brand{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:-.05em}.mark{width:44px;height:44px;display:grid;place-items:center;background:var(--amber);color:#151515;border:2px solid #151515;box-shadow:4px 4px 0 #151515}.brand span:last-child{font-size:1.25rem}
.btn,.ghost,.danger,.icon{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);padding:12px 18px;font-weight:900;transition:.15s}.btn:hover,.ghost:hover,.danger:hover,.icon:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)}.btn.primary{background:var(--ink);color:var(--paper)}.btn.amber{background:var(--amber);color:#151515}.danger{background:#ffe4e4;color:var(--red)}.ghost{background:transparent}.btn.sm,.ghost.sm,.danger.sm{padding:8px 12px}.icon{width:44px;height:44px;padding:0;border-radius:0}
.landing{width:min(100% - 32px,var(--max));margin:auto}.landing-nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:22px}.landing-links{display:flex;align-items:center;gap:18px;color:var(--muted);font-weight:900}.hero{padding:42px 0;display:grid;grid-template-columns:1.12fr .88fr;gap:28px}.hero-main{min-height:620px;background:var(--paper);border:2px solid var(--line);box-shadow:var(--shadow);padding:clamp(28px,5vw,62px);position:relative;overflow:hidden}.hero-main:after{content:"NOTERA";position:absolute;right:-35px;bottom:-45px;font-weight:950;font-size:clamp(5rem,12vw,11rem);letter-spacing:-.1em;color:rgba(21,21,21,.05)}.kicker{display:inline-flex;padding:8px 12px;background:var(--amber);border:2px solid #151515;box-shadow:4px 4px 0 #151515;color:#151515;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:950}.hero h1{margin:30px 0 22px;font-family:var(--display);font-size:clamp(4.2rem,11vw,10.2rem);line-height:.78;letter-spacing:-.085em}.hero h1 em{display:block;color:var(--amber);font-style:italic;-webkit-text-stroke:1px #151515;text-shadow:3px 3px 0 #151515}.lede{max-width:760px;font-size:clamp(1.06rem,1.5vw,1.38rem);font-weight:650;color:var(--muted)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.hero-side{display:grid;gap:18px}.preview-card{background:var(--navy);color:var(--bg);border:2px solid var(--line);box-shadow:8px 8px 0 var(--line);padding:24px;min-height:180px}.preview-card.light{background:var(--paper);color:var(--ink)}.preview-label{text-transform:uppercase;letter-spacing:.14em;color:var(--amber);font-weight:950;font-size:.78rem}.preview-value{font-size:clamp(2.4rem,4.7vw,4rem);font-family:var(--display);line-height:.9;letter-spacing:-.06em}.section{padding:48px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.section-head h2{font-family:var(--display);font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:-.065em;line-height:.9;margin:0}.section-head p{max-width:520px;color:var(--muted);font-weight:650}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature{min-height:245px;background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--softshadow);position:relative;overflow:hidden}.feature:after{content:attr(data-n);position:absolute;right:16px;top:4px;font-weight:950;font-size:5rem;color:rgba(21,21,21,.06)}.feature .ico{width:52px;height:52px;display:grid;place-items:center;background:var(--amber);border:2px solid #151515;box-shadow:4px 4px 0 #151515;margin-bottom:22px;font-size:1.3rem}.feature h3{margin:0;font-size:1.35rem;letter-spacing:-.04em}.feature p{color:var(--muted);font-weight:620}
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:var(--bg);border-right:2px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:18px;z-index:20}.sidebar .brand{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14)}.nav{display:grid;gap:8px}.nav a{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:0;color:rgba(255,255,255,.72);font-weight:900;border:1px solid transparent}.nav a:hover,.nav a.active{background:var(--amber);color:#151515;border-color:#151515;box-shadow:4px 4px 0 #151515}.nav i{font-style:normal;width:25px;text-align:center}.side-user{margin-top:auto;padding:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:0;display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;border-radius:0;background:var(--amber);color:#151515;border:2px solid #151515;display:grid;place-items:center;font-weight:950}.side-user small{color:rgba(255,255,255,.62)}
.topbar{position:sticky;top:0;z-index:15;padding:18px 28px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--softline);display:flex;align-items:center;justify-content:space-between;gap:18px}.top-title h1{margin:0;font-size:clamp(1.5rem,3vw,2.35rem);letter-spacing:-.06em;line-height:1}.top-title p{margin:4px 0 0;color:var(--muted);font-weight:650}.top-actions{display:flex;gap:10px;align-items:center}.searchbox{min-width:280px;display:flex;gap:8px;align-items:center;padding:10px 14px;border:2px solid var(--line);border-radius:0;background:var(--paper);font-weight:900}.searchbox input{background:transparent;border:0;outline:0;color:var(--ink);font-weight:750;width:100%}.mobile{display:none}.content{width:min(100% - 44px,var(--max));margin:auto;padding:30px 0 56px}.grid{display:grid;gap:20px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.split{grid-template-columns:minmax(0,1fr) 380px;align-items:start}
.panel,.card,.form,.empty,.stat{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--softshadow);padding:22px}.head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}.head h2,.head h3{margin:0;letter-spacing:-.045em}.head p{margin:5px 0 0;color:var(--muted);font-weight:650}.stat{position:relative;overflow:hidden}.stat:after{content:attr(data-label);position:absolute;right:12px;bottom:4px;font-weight:950;letter-spacing:-.08em;font-size:3.2rem;color:rgba(21,21,21,.055)}.stat b{font-size:clamp(2rem,4vw,3.45rem);line-height:.92;letter-spacing:-.075em;display:block}.stat span{color:var(--muted);font-weight:850}.field{display:grid;gap:7px;margin-bottom:14px}.field label{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;font-weight:950;color:var(--muted)}.input,.select,.textarea{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);outline:0;font-weight:700}.textarea{min-height:138px;resize:vertical}.input:focus,.select:focus,.textarea:focus{box-shadow:0 0 0 4px rgba(245,166,35,.28)}.toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.filters{display:flex;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;border:1.6px solid var(--line);border-radius:0;background:var(--paper2);padding:6px 9px;font-size:.78rem;font-weight:950}.pill.amber{background:#ffefd0;color:#151515}.pill.green{background:#dff3ea;color:var(--green)}.pill.red{background:#ffe1e1;color:var(--red)}.pill.blue{background:#e3e9ff;color:var(--blue)}.pill.purple{background:#eee6ff;color:var(--purple)}.empty{text-align:center;color:var(--muted);font-weight:700}.empty strong{display:block;color:var(--ink);font-size:1.18rem;margin-bottom:5px}.mini-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.note-grid,.deck-grid,.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}.item{border:2px solid var(--line);border-radius:0;background:var(--paper);padding:18px;box-shadow:6px 6px 0 rgba(21,21,21,.12)}.item.pinned{background:#ffefd0;color:#151515}.item.archived{opacity:.62}.item h3{margin:.4rem 0}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.progress{height:12px;border:2px solid var(--line);border-radius:0;background:var(--paper2);overflow:hidden}.fill{height:100%;width:var(--w,0%);background:var(--amber);border-right:2px solid var(--line)}
.dash-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}.mission{min-height:360px;background:var(--navy);color:var(--bg);border:2px solid var(--line);border-radius:var(--radius);padding:clamp(24px,5vw,44px);box-shadow:var(--softshadow);position:relative;overflow:hidden}.mission:after{content:"FORGE";position:absolute;right:-20px;bottom:-26px;font-weight:950;font-size:10rem;letter-spacing:-.1em;color:rgba(255,255,255,.055)}.mission h2{font-family:var(--display);font-size:clamp(3rem,7vw,6.4rem);line-height:.83;letter-spacing:-.075em;margin:18px 0}.mission p{max-width:680px;color:rgba(255,255,255,.72);font-weight:650}.daily{background:var(--amber);color:#151515}.daily-date{font-weight:950;font-size:2.15rem;letter-spacing:-.07em;margin:4px 0 16px}.checks{display:grid;gap:10px}.check{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.45);border:1.6px solid #151515;border-radius:0;padding:10px;font-weight:900}.check.done{opacity:.6;text-decoration:line-through}.timeline{display:grid;gap:12px}.timeline .row{display:grid;grid-template-columns:80px 1fr;gap:14px;border:2px solid var(--line);border-radius:0;padding:16px;background:var(--paper)}.timeline time{font-weight:950;color:var(--muted);font-size:.84rem}
.review{min-height:365px;display:grid;place-items:center;text-align:center;perspective:1000px}.flip{width:min(100%,720px);min-height:290px;position:relative;transform-style:preserve-3d;transition:.4s}.flip.show{transform:rotateY(180deg)}.side{position:absolute;inset:0;display:grid;place-items:center;padding:28px;border:2px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:8px 8px 0 rgba(21,21,21,.14);backface-visibility:hidden}.side.back{transform:rotateY(180deg);background:#ffefd0;color:#151515}.side h2{font-size:clamp(1.7rem,5vw,3.4rem);line-height:1.02;letter-spacing:-.06em;margin:0}.answers{display:grid;gap:12px}.answer{width:100%;text-align:left;border:2px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);padding:14px 16px;font-weight:850}.answer:hover{background:#ffefd0;color:#151515}.answer.good{background:#dff3ea;color:var(--green)}.answer.bad{background:#ffe1e1;color:var(--red)}.timer{min-height:420px;border:2px solid var(--line);border-radius:var(--radius);background:var(--navy);color:var(--bg);display:grid;place-items:center;text-align:center;padding:28px;box-shadow:var(--softshadow)}.time{font-size:clamp(4rem,13vw,10rem);line-height:.9;font-weight:950;letter-spacing:-.08em;font-variant-numeric:tabular-nums}.mode{color:var(--amber);letter-spacing:.15em;text-transform:uppercase;font-weight:950;margin-top:18px}.logrow,.resultrow{display:flex;align-items:center;justify-content:space-between;gap:14px;border:2px solid var(--line);border-radius:0;padding:14px;background:var(--paper);margin-bottom:10px}.bars{display:grid;gap:12px}.bar{display:grid;grid-template-columns:120px 1fr 65px;gap:12px;align-items:center;font-weight:850}.ring{--p:0;width:170px;height:170px;border-radius:0;background:conic-gradient(var(--amber) calc(var(--p)*1%),var(--paper2) 0);border:2px solid var(--line);display:grid;place-items:center;box-shadow:7px 7px 0 rgba(21,21,21,.12)}.ring div{width:118px;height:118px;border-radius:0;background:var(--paper);border:2px solid var(--line);display:grid;place-items:center;font-size:1.8rem;font-weight:950}.profile-hero{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center}.profile-avatar{width:160px;height:160px;display:grid;place-items:center;background:var(--amber);color:#151515;border:2px solid #151515;box-shadow:9px 9px 0 #151515;font-size:4rem;font-weight:950}.profile-hero h2{font-size:clamp(2.2rem,5vw,4.5rem);line-height:.9;letter-spacing:-.07em;margin:12px 0}.toastbox{position:fixed;right:18px;bottom:18px;z-index:1000;display:grid;gap:10px}.toast{max-width:360px;padding:13px 15px;background:var(--ink);color:var(--paper);border:2px solid var(--line);border-radius:0;box-shadow:6px 6px 0 rgba(21,21,21,.16);font-weight:850}
@media(max-width:1100px){.hero,.dash-hero,.split,.g4{grid-template-columns:1fr}.feature-grid,.g3{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){:root{--side:0}.app{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:292px;transform:translateX(-105%);transition:.2s}.open .sidebar{transform:none}.mobile{display:inline-flex}.topbar{align-items:start;flex-direction:column}.top-actions{width:100%}.searchbox{min-width:0;flex:1}.landing-nav{align-items:start;flex-direction:column;height:auto;padding:22px 0}.hero,.feature-grid,.g2,.g3,.g4{grid-template-columns:1fr}.hero-main{min-height:auto}.profile-hero{grid-template-columns:1fr}}@media(max-width:560px){.content{width:min(100% - 26px,var(--max))}.panel,.card,.form,.empty,.stat,.hero-main{padding:18px}.landing-links a:not(.btn){display:none}.timeline .row,.bar{grid-template-columns:1fr}.logrow,.resultrow{align-items:flex-start;flex-direction:column}}


/* Notera revision: sharp corners + stable buttons */
:root{--radius:0;}
.btn,.ghost,.danger,.icon,.pill,.panel,.card,.form,.empty,.stat,.feature,.item,.review,.side,.timer,.searchbox,.input,.select,.textarea,.check,.logrow,.resultrow,.profile-avatar,.avatar,.mark,.preview-card,.mission,.daily,.hero-main,.sidebar,.side-user,.timeline .row,.progress,.ring,.ring div{border-radius:0!important;}
.btn,.ghost,.danger,.icon{min-height:44px;line-height:1;position:relative;transform:none!important;box-shadow:none;user-select:none;}
.btn:hover,.ghost:hover,.danger:hover,.icon:hover{transform:none!important;box-shadow:4px 4px 0 var(--line)!important;}
.btn:active,.ghost:active,.danger:active,.icon:active{transform:none!important;box-shadow:2px 2px 0 var(--line)!important;}
.btn[disabled],.ghost[disabled],.danger[disabled],.icon[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none!important;}
.btn[disabled]:hover,.ghost[disabled]:hover,.danger[disabled]:hover,.icon[disabled]:hover{transform:none!important;box-shadow:none!important;}
.answer{border-radius:0!important;min-height:48px;}
.answer:hover{transform:none!important;box-shadow:4px 4px 0 var(--line);}
.hero-main:after{content:"NOTERA";}
.mission:after{content:"NOTES";}



/* =========================================================
   NOTERA POLISH PATCH
   - Cleaner hero heading
   - Fixed button hitboxes
   - Removed text-colliding decorative watermarks
   - Stronger rectangular/boxed interface
   - Flashcard flip animation support
   ========================================================= */

:root {
  --radius: 0px;
  --radius-sm: 0px;
}

/* Make decorative labels never block clicks */
.feature-card::before,
.stat-card::after,
.hero-copy::after,
.board-card::after,
.mission-card::after,
.paper-note::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Hide the large transparent letters/numbers that collide with content/buttons */
.feature-card::before,
.stat-card::after,
.hero-copy::after,
.mission-card::after {
  display: none !important;
}

/* Keep actual content above any decoration */
.feature-card > *,
.stat-card > *,
.hero-copy > *,
.mission-card > *,
.board-card > *,
.paper-note > * {
  position: relative;
  z-index: 2;
}

/* True box-corner look */
* {
  border-radius: 0 !important;
}

.brand-mark,
.button,
.icon-button,
.danger-button,
.ghost-button,
.primary-button,
.input,
.select,
.textarea,
.pill,
.panel,
.form-card,
.list-card,
.empty-state,
.review-card,
.quiz-card,
.feature-card,
.step-card,
.stat-card,
.note-card,
.deck-card,
.study-card,
.task-card,
.session-row,
.result-row,
.timeline-item,
.hero-copy,
.board-card,
.paper-note,
.sidebar,
.nav-link,
.command-palette,
.daily-card,
.mission-card,
.timer-face,
.flip-side,
.profile-avatar,
.avatar,
.toast {
  border-radius: 0 !important;
}

/* Fix button click area: no moving target, no overlays, proper stacking */
a.button,
button.button,
.button,
.icon-button,
.danger-button,
.ghost-button,
.primary-button,
.landing-links a,
.hero-actions a,
.hero-actions button,
.card-actions button,
.form-actions button,
.form-actions a {
  position: relative !important;
  z-index: 20 !important;
  transform: none !important;
  box-shadow: none;
  line-height: 1.1;
  min-height: 44px;
  pointer-events: auto !important;
  user-select: none;
}

.button:hover,
.icon-button:hover,
.danger-button:hover,
.ghost-button:hover,
.primary-button:hover {
  transform: none !important;
  box-shadow: 4px 4px 0 var(--line-strong) !important;
}

.hero-actions,
.form-actions,
.card-actions,
.landing-links {
  position: relative !important;
  z-index: 30 !important;
}

/* Cleaner landing hero layout */
.landing-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.75fr);
  align-items: stretch;
  gap: 28px;
}

.hero-copy {
  min-height: 640px;
  padding: clamp(32px, 5vw, 64px);
  overflow: visible;
  isolation: isolate;
}

.hero-title {
  margin: 30px 0 24px;
  max-width: 760px;
  font-family: var(--font-body);
  font-size: clamp(4.8rem, 9vw, 8.8rem);
  line-height: 0.86;
  letter-spacing: -0.095em;
  font-weight: 950;
}

.hero-title span {
  display: block;
  margin-top: 14px;
  font-style: normal;
  color: #171717;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.hero-title .hero-highlight,
.hero-highlight {
  display: inline-block;
  width: fit-content;
  margin-top: 18px;
  padding: 0.04em 0.14em 0.12em;
  background: var(--amber);
  color: #171717;
  border: 2px solid var(--line-strong);
  box-shadow: 8px 8px 0 var(--line-strong);
  letter-spacing: -0.07em;
}

.hero-lede {
  max-width: 700px;
  margin-top: 28px;
  font-size: clamp(1rem, 1.25vw, 1.22rem);
}

.kicker {
  position: relative;
  z-index: 4;
}

/* Prevent bottom crop from making buttons feel unclickable */
body {
  padding-bottom: 48px;
}

.landing-shell {
  padding-bottom: 64px;
}

.landing-section {
  position: relative;
  z-index: 5;
}

/* Explore Features target offset */
#features {
  scroll-margin-top: 40px;
}

/* Right preview cards: keep readable and not absurdly huge */
.board-card {
  min-height: 210px;
  overflow: hidden;
}

.board-value {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.08em;
}

.paper-stack {
  min-height: 250px;
}

/* Typography tightening for cards */
.feature-card h3,
.panel-header h2,
.panel-header h3,
.note-card h3,
.deck-card h3,
.study-card h3,
.task-card h3 {
  letter-spacing: -0.05em;
}

/* Flashcard flip animation */
.review-card {
  min-height: 420px;
  perspective: 1400px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.flashcard-flip {
  width: min(100%, 820px);
  min-height: 360px;
  margin: 0 auto;
  perspective: 1400px;
}

.flip-inner {
  width: 100%;
  min-height: 360px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.58s cubic-bezier(.2,.7,.2,1);
}

.flip-inner.flipped {
  transform: rotateY(180deg);
}

.flip-side {
  position: absolute;
  inset: 0;
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 48px);
  border: 2px solid var(--line-strong);
  background: var(--panel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 10px 10px 0 var(--line-strong);
}

.flip-side.back {
  transform: rotateY(180deg);
  background: var(--amber-soft);
}

.flip-side h2 {
  margin: 18px 0 0;
  max-width: 680px;
  font-size: clamp(1.6rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

/* Disable buttons using actual disabled style instead of weird invisible hitbox */
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* More reliable landing card heights on smaller screens */
@media (max-width: 1100px) {
  .landing-hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(4rem, 13vw, 7rem);
  }
}

@media (max-width: 560px) {
  .hero-title {
    font-size: clamp(3.2rem, 17vw, 5.2rem);
  }

  .hero-title .hero-highlight,
  .hero-highlight {
    box-shadow: 5px 5px 0 var(--line-strong);
  }

  .button,
  .ghost-button,
  .danger-button {
    width: 100%;
  }
}

/* =========================================================
   LANDING FIX PATCH — May 2026
   - Removes the transparent NOTERA background word
   - Gives the top nav links real button hitboxes
   - Separates the hero headline with a cleaner sans font
   - Prevents decorative layers from covering the three hero buttons
   ========================================================= */

/* Decorative pseudo-elements should never steal hover/clicks. */
*::before,
*::after {
  pointer-events: none !important;
}

/* Remove the transparent word in the landing hero background. */
.hero-main::after {
  content: none !important;
  display: none !important;
}

/* Keep hero content and buttons safely above card/background layers. */
.hero-main {
  isolation: isolate;
  overflow: visible;
}

.hero-main > * {
  position: relative;
  z-index: 2;
}

.actions {
  position: relative;
  z-index: 50;
  isolation: isolate;
  align-items: center;
}

.actions a,
.actions button,
.landing-links a {
  position: relative !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}

/* Make the three hero buttons easy to click: no moving target on hover. */
.actions .btn,
.actions .ghost,
.landing-links .btn,
.landing-links a:not(.btn) {
  min-height: 42px;
  line-height: 1;
  transform: none !important;
}

.actions .btn:hover,
.actions .ghost:hover,
.landing-links .btn:hover,
.landing-links a:not(.btn):hover {
  transform: none !important;
  box-shadow: 4px 4px 0 var(--line) !important;
}

.actions .ghost {
  border: 2px solid var(--line);
  background: var(--paper2);
  padding: 12px 18px;
}

/* Turn the tiny nav text into proper mini buttons. */
.landing-links {
  gap: 10px;
  color: var(--ink);
}

.landing-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 950;
}

.landing-links a:not(.btn):hover {
  background: var(--amber);
}

/* Cleaner hero title: changed from the cramped display serif to a bold sans stack. */
.hero h1 {
  max-width: 760px;
  margin: 30px 0 24px;
  font-family: var(--body);
  font-size: clamp(3.8rem, 8vw, 7.2rem);
  line-height: 0.95;
  letter-spacing: -0.065em;
  font-weight: 950;
}

.hero h1 em {
  display: inline-block;
  margin-top: 12px;
  padding: 0.02em 0.12em 0.08em;
  background: var(--amber);
  color: #151515;
  border: 2px solid #151515;
  box-shadow: 7px 7px 0 #151515;
  font-family: var(--body);
  font-style: normal;
  line-height: 0.98;
  letter-spacing: -0.055em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

@media (max-width: 860px) {
  .hero-main {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .landing-links {
    width: 100%;
    flex-wrap: wrap;
  }

  .landing-links a:not(.btn),
  .landing-links .btn {
    min-height: 40px;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.6rem);
  }
}

/* Also remove the app dashboard's large transparent background word. */
.mission::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   WORKFLOW CARD READABILITY FIX — May 2026
   Keeps decorative card labels away from sentences.
   ========================================================= */
.feature::after {
  top: auto !important;
  right: 18px !important;
  bottom: 12px !important;
  z-index: 0 !important;
  font-size: clamp(3.6rem, 5vw, 4.6rem) !important;
  line-height: 1 !important;
  color: rgba(21, 21, 21, 0.035) !important;
}

.feature > * {
  position: relative;
  z-index: 2;
}

/* The A/B/C letters in the workflow cards were colliding with the sentences. */
#workflow .feature::after {
  content: none !important;
  display: none !important;
}

/* ===== v3 cleanup patch =====
   Remove all transparent decorative text/numbers
   and reduce wasted vertical space in workflow boxes.
   ================================================ */

.hero-main::after,
.feature::after,
.stat::after,
.mission::after {
  content: none !important;
  display: none !important;
}

/* Keep decorative pseudo-elements from blocking anything if any remain */
.hero-main::before,
.hero-main::after,
.feature::before,
.feature::after,
.stat::before,
.stat::after,
.mission::before,
.mission::after {
  pointer-events: none !important;
}

/* Tighter feature cards overall */
.feature {
  min-height: 205px;
}

/* Specifically trim the workflow boxes at the bottom */
#workflow .feature-grid {
  align-items: start;
}

#workflow .feature {
  min-height: 150px;
  padding: 24px;
}

#workflow .feature h3 {
  margin-bottom: 8px;
}

#workflow .feature p {
  margin-bottom: 0;
}

/* Small screens: keep cards compact too */
@media (max-width: 860px) {
  #workflow .feature {
    min-height: auto;
  }
}

/* ===== v4 dark mode repair =====
   Midnight mode was turning the sidebar light while keeping sidebar text white.
   This keeps the app genuinely dark and restores readable contrast everywhere.
   ================================================ */

[data-theme="midnight"] {
  --bg: #080d19;
  --paper: #111827;
  --paper2: #182235;
  --ink: #f7f0e6;
  --muted: #c9bcaa;
  --line: #f7f0e6;
  --softline: #344055;
  --navy: #0b1020;
  --shadow: 9px 9px 0 #f7f0e6;
  --softshadow: 0 18px 55px rgba(0, 0, 0, 0.34);
}

[data-theme="midnight"] body,
body:has([data-theme="midnight"]) {
  color: var(--ink);
}

[data-theme="midnight"] .sidebar {
  background: #0b1020 !important;
  color: #f7f0e6 !important;
  border-right-color: #f7f0e6 !important;
}

[data-theme="midnight"] .sidebar .brand,
[data-theme="midnight"] .sidebar .brand span:last-child {
  color: #f7f0e6 !important;
}

[data-theme="midnight"] .sidebar .brand {
  border-bottom-color: rgba(247, 240, 230, 0.18) !important;
}

[data-theme="midnight"] .nav a {
  color: rgba(247, 240, 230, 0.78) !important;
}

[data-theme="midnight"] .nav a:hover,
[data-theme="midnight"] .nav a.active {
  background: var(--amber) !important;
  color: #151515 !important;
  border-color: #151515 !important;
  box-shadow: 4px 4px 0 #151515 !important;
}

[data-theme="midnight"] .side-user {
  background: rgba(247, 240, 230, 0.08) !important;
  border-color: rgba(247, 240, 230, 0.18) !important;
  color: #f7f0e6 !important;
}

[data-theme="midnight"] .side-user small {
  color: rgba(247, 240, 230, 0.62) !important;
}

[data-theme="midnight"] .topbar {
  background: rgba(8, 13, 25, 0.9) !important;
  border-bottom-color: var(--softline) !important;
}

[data-theme="midnight"] .searchbox,
[data-theme="midnight"] .input,
[data-theme="midnight"] .select,
[data-theme="midnight"] .textarea {
  background: #0f1728 !important;
  color: #f7f0e6 !important;
  border-color: #f7f0e6 !important;
}

[data-theme="midnight"] .searchbox input::placeholder,
[data-theme="midnight"] .input::placeholder,
[data-theme="midnight"] .textarea::placeholder {
  color: rgba(247, 240, 230, 0.5) !important;
}

[data-theme="midnight"] .mission,
[data-theme="midnight"] .preview-card,
[data-theme="midnight"] .timer {
  background: #111827 !important;
  color: #f7f0e6 !important;
  border-color: #f7f0e6 !important;
}

[data-theme="midnight"] .mission p,
[data-theme="midnight"] .preview-card p:not(.preview-label),
[data-theme="midnight"] .timer p {
  color: rgba(247, 240, 230, 0.76) !important;
}

[data-theme="midnight"] .preview-card.light,
[data-theme="midnight"] .panel,
[data-theme="midnight"] .card,
[data-theme="midnight"] .form,
[data-theme="midnight"] .empty,
[data-theme="midnight"] .stat,
[data-theme="midnight"] .item,
[data-theme="midnight"] .timeline .row,
[data-theme="midnight"] .feature,
[data-theme="midnight"] .side,
[data-theme="midnight"] .answer,
[data-theme="midnight"] .logrow,
[data-theme="midnight"] .resultrow {
  background: #111827 !important;
  color: #f7f0e6 !important;
  border-color: #f7f0e6 !important;
}

[data-theme="midnight"] .daily {
  background: var(--amber) !important;
  color: #151515 !important;
  border-color: #f7f0e6 !important;
}

[data-theme="midnight"] .daily .check {
  background: rgba(255, 255, 255, 0.42) !important;
  color: #151515 !important;
  border-color: #151515 !important;
}

[data-theme="midnight"] .muted,
[data-theme="midnight"] .head p,
[data-theme="midnight"] .top-title p,
[data-theme="midnight"] .field label,
[data-theme="midnight"] .timeline time,
[data-theme="midnight"] .stat span {
  color: var(--muted) !important;
}

[data-theme="midnight"] .btn.primary {
  background: #f7f0e6 !important;
  color: #0b1020 !important;
  border-color: #f7f0e6 !important;
}

[data-theme="midnight"] .btn:not(.primary):not(.amber),
[data-theme="midnight"] .ghost {
  background: #111827 !important;
  color: #f7f0e6 !important;
  border-color: #f7f0e6 !important;
}

[data-theme="midnight"] .btn.amber {
  background: var(--amber) !important;
  color: #151515 !important;
  border-color: #151515 !important;
}

[data-theme="midnight"] .progress {
  background: #263149 !important;
  border-color: #f7f0e6 !important;
}

/* Keep all transparent decorative labels off in both themes. */
[data-theme="midnight"] .hero-main::after,
[data-theme="midnight"] .feature::after,
[data-theme="midnight"] .stat::after,
[data-theme="midnight"] .mission::after {
  content: none !important;
  display: none !important;
}

/* ===== v6 flashcard system patch ===== */
.system-deck,
.system-card {
  border-style: solid !important;
}

.system-card .pill.amber,
.system-deck .pill.amber {
  font-weight: 950;
}

button[disabled],
.btn[disabled],
.ghost[disabled],
.danger[disabled],
.icon[disabled] {
  cursor: not-allowed !important;
  opacity: .56 !important;
  box-shadow: none !important;
  transform: none !important;
}

.review {
  perspective: 1400px;
}

.flip {
  transition: transform .62s cubic-bezier(.2,.8,.2,1) !important;
  transform-style: preserve-3d !important;
  will-change: transform;
}

.flip.show {
  transform: rotateY(180deg) !important;
}

.side {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.side.back {
  transform: rotateY(180deg) !important;
}

[data-theme="midnight"] .side.back {
  background: var(--amber) !important;
  color: #151515 !important;
}


/* ===== v8 flashcard deck visibility patch =====
   Student-added questions now show directly in the Subject Decks cards.
*/
.deck-preview{
  margin:14px 0;
  padding:12px;
  border:2px solid var(--line);
  background:var(--paper2);
}
.deck-preview strong{
  display:block;
  margin-bottom:8px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}
.deck-preview ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-weight:800;
}
.deck-preview li{
  line-height:1.35;
}
[data-theme="midnight"] .deck-preview,
body[data-theme="midnight"] .deck-preview{
  background:#0f1728;
}

/* ===== v9 subject-connected custom deck patch ===== */
.field-note{
  margin:6px 0 0;
  color:var(--muted);
  font-weight:750;
  font-size:.84rem;
}
.subject-line{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.deck-branch{
  margin:14px 0;
  padding:12px;
  border:2px solid var(--line);
  background:var(--paper2);
}
.deck-branch strong{
  display:block;
  margin-bottom:8px;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
}
.linked-decks{
  display:grid;
  gap:8px;
}
.linked-deck{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1.6px solid var(--line);
  background:var(--paper);
  font-weight:850;
}
[data-theme="midnight"] .deck-branch,
body[data-theme="midnight"] .deck-branch{
  background:#0f1728;
}

/* ===== v10 compact subject deck cards =====
   Replaces bulky inner preview boxes with simple connected lines/pills.
*/
.compact-subject .deck-branch,
.compact-subject .deck-preview {
  display: none !important;
}

.compact-subject {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compact-subject h3,
.compact-subject p {
  margin-top: 0;
}

.compact-subject .meta {
  margin: 6px 0;
}

.subject-lines {
  display: grid;
  gap: 8px;
  margin: 6px 0 8px;
}

.subject-lines p {
  margin: 0;
  line-height: 1.45;
}

.subject-lines strong {
  font-weight: 950;
}

.deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 3px 5px 3px 0;
  padding: 5px 7px;
  border: 1.6px solid var(--line);
  background: var(--paper2);
  font-size: .82rem;
  font-weight: 900;
}

.chip-delete {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1.4px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-weight: 950;
  line-height: 1;
}

.chip-delete:hover {
  background: #ffe1e1;
  color: var(--red);
}

[data-theme="midnight"] .deck-chip,
body[data-theme="midnight"] .deck-chip {
  background: #0f1728;
}

[data-theme="midnight"] .chip-delete,
body[data-theme="midnight"] .chip-delete {
  background: #121a2b;
  color: #f7f0e6;
  border-color: #f7f0e6;
}

/* ===== v11 flashcard review mode cleanup ===== */
.review-mode-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 8px;
}

.review-mode-toggle .btn,
.review-mode-toggle .ghost {
  min-width: 150px;
}

.review-mode-help {
  margin: 0 0 16px;
  font-weight: 700;
}

/* ===== v15 sidebar safety patch =====
   Keeps the bottom profile card from being chopped when the page is scrolled
   or when the browser viewport is short.
*/
.sidebar {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-bottom: 36px !important;
  scrollbar-width: thin;
}

.side-user {
  margin-bottom: 6px !important;
  flex-shrink: 0;
}

.nav {
  flex-shrink: 0;
}

@media (max-height: 760px) {
  .sidebar {
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 44px !important;
  }

  .nav {
    gap: 5px !important;
  }

  .nav a {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .side-user {
    padding: 12px !important;
  }
}


/* ===== v16 sidebar bottom-gap fix =====
   The previous global body padding created a visible gap under the fixed/sticky sidebar
   when app pages were scrolled to the bottom. Keep that padding only off app pages.
*/
body[data-page]:not([data-page="home"]) {
  padding-bottom: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow-x: hidden;
}

body[data-page]:not([data-page="home"]) .app {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background: var(--bg);
}

body[data-page]:not([data-page="home"]) .sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  padding-bottom: 18px !important;
}

@supports (height: 100dvh) {
  body[data-page]:not([data-page="home"]) .sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

body[data-page]:not([data-page="home"]) .side-user {
  margin-bottom: 0 !important;
}

/* ===== v18 polish patch ===== */
.time{
  font-size:clamp(3.8rem,11vw,8.6rem)!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
}
.timer .actions{
  margin-top:18px;
}
.timer .mode{
  margin-top:22px;
}
@media (max-width: 900px){
  .time{font-size:clamp(3.4rem,14vw,6.8rem)!important;}
}

/* ===== v21 landing width + clean background patch ===== */
:root{
  --max:1380px;
}

body{
  background:var(--bg)!important;
}
body:before{
  display:none!important;
  content:none!important;
}

.landing{
  width:min(100% - 40px, 1380px)!important;
}

.hero{
  padding:34px 0 22px!important;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr)!important;
  gap:16px!important;
  align-items:stretch;
}

.hero-main{
  min-height:560px!important;
  padding:clamp(24px,4vw,46px)!important;
}

.hero-side{
  gap:14px!important;
}

.preview-card{
  min-height:0!important;
  padding:20px!important;
}

.preview-value{
  font-size:clamp(2.2rem,4vw,3.6rem)!important;
}

.section{
  padding:38px 0!important;
}

@media(max-width:1100px){
  .hero{
    grid-template-columns:1fr!important;
  }
  .hero-main{
    min-height:auto!important;
  }
}

/* ===== v22 landing hero cut patch ===== */
.hero{
  align-items:start!important;
}

.hero-main{
  min-height:auto!important;
  height:auto!important;
  padding-bottom:20px!important;
}

.hero-main .actions{
  margin-top:18px!important;
  margin-bottom:0!important;
}

.hero-side{
  align-content:start!important;
}

.hero-side .preview-card{
  min-height:0!important;
}

/* ===== v23 homepage layout patch ===== */
.hero-home{
  display:grid!important;
  grid-template-columns:minmax(0,1.42fr) 430px!important;
  gap:16px!important;
  align-items:start!important;
}

.hero-left{
  display:grid;
  gap:16px;
}

.hero-subgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "mission loop"
    "progress progress";
  gap:16px;
}

.mission-card{grid-area:mission;}
.loop-card{grid-area:loop;}
.progress-card{grid-area:progress;}

.hero-mini,
.hero-wide{
  min-height:0!important;
}

.hero-wide{
  min-height:180px!important;
}

.hero-tall{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:20px!important;
}

.hero-tall-head h2{
  margin:16px 0 8px;
  font-family:var(--display);
  font-size:clamp(2rem,3.4vw,3.25rem);
  letter-spacing:-.06em;
  line-height:.94;
}

.hero-tall-head p{
  margin:0 0 18px;
  font-weight:650;
}

.tool-stack{
  display:grid;
  gap:12px;
  margin-top:4px;
}

.tool-row{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border:2px solid var(--line);
  background:var(--paper2);
  box-shadow:4px 4px 0 rgba(21,21,21,.12);
  transition:.15s;
}

.tool-row strong{
  font-size:1.02rem;
  letter-spacing:-.03em;
}

.tool-row span{
  color:var(--muted);
  font-weight:650;
  line-height:1.35;
}

.tool-row:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--line);
}

@media(max-width:1100px){
  .hero-home{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  .hero-subgrid{
    grid-template-columns:1fr;
    grid-template-areas:
      "mission"
      "loop"
      "progress";
  }
}


/* ===== v24 What is Notera animated stack ===== */
.notera-stack-wrap{
  margin-top:22px;
  padding-top:18px;
  border-top:4px solid var(--amber);
  position:relative;
}

.notera-stack-card{
  width:100%;
  min-height:132px;
  text-align:left;
  display:grid;
  gap:8px;
  padding:18px 18px 16px;
  border:2px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  box-shadow:7px 7px 0 var(--line);
  position:relative;
  isolation:isolate;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .28s ease, box-shadow .18s ease;
}

.notera-stack-card::before,
.notera-stack-card::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--line);
  background:var(--paper2);
  z-index:-1;
  transition:transform .28s ease;
}

.notera-stack-card::before{
  transform:translate(9px,9px);
}

.notera-stack-card::after{
  transform:translate(18px,18px);
  opacity:.75;
}

.notera-stack-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--line);
}

.notera-stack-card:hover::before{
  transform:translate(12px,12px);
}

.notera-stack-card:hover::after{
  transform:translate(24px,24px);
}

.notera-stack-card.is-flipping{
  animation:noteraCardFlip .34s ease;
}

.stack-eyebrow{
  width:max-content;
  padding:5px 8px;
  background:var(--amber);
  color:#151515;
  border:2px solid #151515;
  box-shadow:3px 3px 0 #151515;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.notera-stack-card strong{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.65rem,3vw,2.45rem);
  line-height:.96;
  letter-spacing:-.055em;
}

.notera-stack-card span:not(.stack-eyebrow):not(.stack-next){
  color:var(--muted);
  font-weight:700;
  line-height:1.35;
}

.stack-next{
  justify-self:end;
  font-weight:950;
  color:var(--ink);
}

@keyframes noteraCardFlip{
  0%{transform:rotateY(0deg) translateY(0)}
  48%{transform:rotateY(82deg) translateY(-3px)}
  100%{transform:rotateY(0deg) translateY(0)}
}

[data-theme="midnight"] .notera-stack-card{
  background:var(--paper);
  color:var(--ink);
}

[data-theme="midnight"] .notera-stack-card::before,
[data-theme="midnight"] .notera-stack-card::after{
  background:var(--paper2);
}

@media(max-width:1100px){
  .notera-stack-wrap{
    margin-top:18px;
  }
}


/* ===== v25 clean What is Notera card ===== */
.clean-notera-wrap{
  margin-top:18px!important;
  padding-top:16px!important;
  border-top:3px solid var(--amber)!important;
  overflow:hidden!important;
}

.clean-notera-card{
  width:100%!important;
  min-height:150px!important;
  padding:18px!important;
  background:var(--paper)!important;
  border:2px solid var(--line)!important;
  box-shadow:6px 6px 0 var(--line)!important;
  transform:none!important;
  overflow:hidden!important;
}

.clean-notera-card::before,
.clean-notera-card::after{
  display:none!important;
  content:none!important;
}

.clean-notera-card:hover{
  transform:none!important;
  box-shadow:6px 6px 0 var(--line)!important;
}

.clean-notera-card strong{
  font-family:var(--body)!important;
  font-size:clamp(1.5rem,2.1vw,2rem)!important;
  line-height:1.02!important;
  letter-spacing:-.055em!important;
}

.clean-notera-card #noteraStackText{
  display:block!important;
  color:var(--muted)!important;
  font-weight:750!important;
  line-height:1.36!important;
  max-width:34ch!important;
}

.stack-progress{
  display:flex!important;
  gap:6px!important;
  align-items:center!important;
  margin-top:2px!important;
}

.stack-progress i{
  width:8px;
  height:8px;
  border:1.5px solid var(--line);
  background:transparent;
  display:block;
}

.stack-progress i.active{
  background:var(--amber);
}

.clean-notera-card.is-flipping{
  animation:noteraCleanSlide .28s ease!important;
}

@keyframes noteraCleanSlide{
  0%{opacity:1;transform:translateX(0)}
  45%{opacity:.35;transform:translateX(10px)}
  100%{opacity:1;transform:translateX(0)}
}


/* ===== v28 homepage side list info-only ===== */
.tool-row.info-only{
  cursor:default!important;
  pointer-events:none!important;
}
.tool-row.info-only:hover{
  transform:none!important;
  box-shadow:4px 4px 0 rgba(21,21,21,.12)!important;
}


/* ===== v29 info-only side list with hover kept ===== */
.info-row{
  cursor:default;
  text-decoration:none;
}

.info-row:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--line);
}


/* ===== v30 restore side info hover movement ===== */
.hero-tall .tool-row.info-row,
.hero-tall .tool-row.info-row * {
  pointer-events: none;
}

.hero-tall .tool-row.info-row {
  pointer-events: auto;
  cursor: default !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.hero-tall .tool-row.info-row:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--line) !important;
}


/* ===== v31 final: information boxes keep hover, no links ===== */
.hero-tall .tool-row.info-hover {
  pointer-events: auto !important;
  cursor: default !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.hero-tall .tool-row.info-hover:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--line) !important;
}


/* ===== v32 Google Authorization ===== */
.auth-panel{
  display:grid;
  gap:14px;
}
.google-button-slot{
  min-height:44px;
  display:flex;
  align-items:center;
}
.auth-empty{
  text-align:left!important;
  padding:14px!important;
  box-shadow:none!important;
}
.auth-empty code{
  font-weight:950;
  color:var(--ink);
}
.auth-note{
  margin:0;
}
.google-user-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  border:2px solid var(--line);
  background:var(--paper2);
}
.google-avatar{
  width:46px;
  height:46px;
  border:2px solid var(--line);
  background:var(--amber);
  color:#151515;
  display:grid;
  place-items:center;
  font-weight:950;
  overflow:hidden;
}
.google-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}



.profile-side-stack{
  display:grid;
  gap:20px;
  align-content:start;
}
.profile-side-stack > *{
  min-width:0;
}
.form{
  align-self:start;
}
.auth-panel,
.cloud-panel{
  align-self:start;
}
.auth-panel .danger,
.cloud-panel .btn,
.cloud-panel .ghost{
  width:100%;
}
.sync-helper{
  margin:14px 0;
  padding:12px;
  border:2px solid var(--line);
  background:var(--paper2);
}
.sync-helper strong{
  display:block;
  margin-bottom:8px;
}
.sync-helper p{
  margin:0 0 8px;
  line-height:1.4;
}
.sync-helper p:last-child{
  margin-bottom:0;
}

/* ===== v33 login gate ===== */
.app.auth-app{
  display:block!important;
  min-height:100vh;
}

.auth-gate{
  width:min(100% - 40px,1100px);
  min-height:100vh;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) 380px;
  gap:20px;
  align-items:center;
  padding:44px 0;
}

.auth-gate-card,
.auth-gate-info{
  background:var(--paper);
  border:2px solid var(--line);
  box-shadow:var(--shadow);
  padding:clamp(24px,4vw,48px);
}

.auth-gate-brand{
  margin-bottom:28px;
}

.auth-gate h1{
  margin:22px 0 16px;
  font-family:var(--display);
  font-size:clamp(3rem,7vw,6.25rem);
  line-height:.86;
  letter-spacing:-.075em;
}

.auth-gate-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:26px 0 12px;
}

.google-button-slot{
  min-height:44px;
  display:flex;
  align-items:center;
}

.auth-gate-info h2{
  margin:0 0 18px;
  font-size:clamp(1.7rem,3vw,2.45rem);
  line-height:1;
  letter-spacing:-.055em;
}

.auth-gate-info .tool-row{
  cursor:default!important;
}

.auth-gate-info .tool-row:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--line);
}

@media(max-width:900px){
  .auth-gate{
    grid-template-columns:1fr;
    align-items:start;
    padding:24px 0;
  }
}


/* ===== v34 Supabase sync starter ===== */
.cloud-panel .cloud-actions{
  align-items:stretch;
  gap:10px;
}

.cloud-panel .cloud-actions .btn,
.cloud-panel .cloud-actions .ghost{
  width:100%;
}

.auth-gate .auth-gate-card .google-button-slot .btn{
  min-width:260px;
}

.google-button-slot .btn{
  min-height:44px;
}

.cloud-panel button[disabled]{
  opacity:.45;
  cursor:not-allowed;
}


/* ===== v35 visible cloud sync feedback ===== */
.sync-status{
  margin-top:12px;
  padding:10px 12px;
  border:2px solid var(--line);
  background:var(--paper2);
  color:var(--ink);
  font-weight:850;
  line-height:1.35;
}
.sync-status:empty{
  display:none;
}
.sync-status.info{
  background:#ffefd0;
  color:#151515;
}
.sync-status.good{
  background:#dff3ea;
  color:var(--green);
}
.sync-status.bad{
  background:#ffe1e1;
  color:var(--red);
}
.cloud-panel button:disabled{
  opacity:.65;
  cursor:progress;
}

/* ===== v38 profile layout + beginner-friendly backup copy ===== */
.sync-counts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:14px 0;
  padding:12px;
  border:2px solid var(--line);
  background:var(--paper2);
  font-size:.86rem;
  font-weight:850;
}
.sync-counts strong{
  grid-column:1 / -1;
  letter-spacing:-.02em;
}
.sync-counts span{
  background:var(--paper);
  border:1.5px solid var(--line);
  padding:7px 8px;
}
.cloud-panel .cloud-actions{
  display:grid;
  grid-template-columns:1fr;
}
.cloud-panel button:disabled{
  cursor:not-allowed;
}
@media(max-width:520px){
  .sync-counts{grid-template-columns:1fr;}
}