/* Neuron's own UI (393 × 886 on iPhone): SF Pro Rounded, cobalt controls in every glaze, cream paper cards.
   Values from the SwiftUI source: NeuronTypography, PrototypeTheme, NeuronColors, HomeView, StudyView. */
.app-n {
  --acc: #2e61d1; --deep: #294db8; --ink: #1f1f24; --ink2: #63636d; --ink3: #74747e;
  --surface: #fefefd; --muted: #e0e0e6; --border: rgba(0, 0, 0, 0.07); --cardback: #f5f5f7;
  --learnt: #2eb86b; --getting: #85db9e; --review: #e64d57; --streak: #ff8c52; --paperrest: #e8e3d6;
  --paper: #f4f5f9; --haze: 148, 179, 224;
  font-family: var(--rounded); color: var(--ink); letter-spacing: 0; -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 50%),
    radial-gradient(420px circle at 88% 4%, rgba(var(--haze), 0.2), rgba(var(--haze), 0) 100%),
    radial-gradient(320px circle at 8% 92%, rgba(var(--haze), 0.1), rgba(var(--haze), 0) 100%),
    var(--paper);
}
.app-n .mp { box-sizing: border-box; visibility: hidden; }
.app-n .sym { display: block; width: 1em; height: 1em; flex: none; }
.app-n b, .app-n small, .app-n em { font-style: normal; }

/* status bar */
.n-sb { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px 0 42px; font-family: var(--sf); color: var(--ink); }
.n-time { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.n-sbi { display: flex; align-items: center; gap: 6px; }
.n-sbi svg { height: 11.5px; width: auto; fill: currentColor; }
.n-batt { width: 26px; height: 12.5px; border-radius: 4px; box-shadow: inset 0 0 0 1.3px currentColor; padding: 2px; opacity: 0.92; display: block; position: relative; }
.n-batt::after { content: ""; position: absolute; right: -3.4px; top: 4px; width: 1.6px; height: 4.5px; border-radius: 0 1px 1px 0; background: currentColor; opacity: 0.5; }
.n-batt i { display: block; width: 78%; height: 100%; border-radius: 2px; background: currentColor; }

/* micro labels: 10pt heavy, tracked, upper case (NeuronTypography.micro) */
.n-micro { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }

/* the paper set mark */
.n-mark { position: relative; display: block; flex: none; width: calc(var(--fw) + var(--pk)); height: calc(var(--fh) + var(--pk)); }
.nm-back { position: absolute; left: var(--pk); top: var(--pk); width: var(--fw); height: var(--fh); border-radius: var(--cr); background: #e6decf; }
.nm-face {
  position: absolute; left: 0; top: 0; width: var(--fw); height: var(--fh); border-radius: var(--cr); overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%), #fefdf9; color: var(--tint);
  box-shadow: inset 0 0 0 0.8px color-mix(in srgb, var(--tint) 24%, transparent), 0 calc(var(--fh) * 0.03) calc(var(--fh) * 0.08) rgba(0, 0, 0, 0.1);
}
.nm-face i { position: absolute; left: 0; width: var(--mg); }
.nm-held { top: 0; background: var(--learnt); }
.nm-rev { background: var(--review); }
.nm-tint { top: 0; bottom: 0; }
.nm-sym { width: calc(var(--fw) * 0.42) !important; height: calc(var(--fw) * 0.42) !important; }

/* the split bar */
.n-split { position: relative; display: flex; overflow: hidden; border-radius: 99px; background: rgba(232, 227, 214, 0.85); }
.n-split i { display: block; height: 100%; }
.ns-held { background: var(--learnt); }
.ns-rev { background: var(--review); }

/* buttons: capsules on the cobalt gradient */
.n-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-size: 16px; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--acc), var(--deep)); box-shadow: 0 5px 12px rgba(46, 97, 209, 0.32); white-space: nowrap; }
.n-btn .sym { width: 17px; height: 17px; }
.n-btn.sec { color: var(--ink); background: var(--muted); box-shadow: none; }
.n-btn.red { background: var(--review); box-shadow: none; }

/* the dock: a white capsule with Home and You, and the raised cobalt + between them */
.n-dock { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 8px 18px rgba(0, 0, 0, 0.1); }
.n-dock span { width: 120px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 800; color: var(--ink3); opacity: calc(0.72 + 0.28 * var(--px, 0)); }
.n-dock span .sym { font-size: 19px; }
.n-dock span.on { color: var(--ink); opacity: 1; }
.n-plus { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--acc), var(--deep)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3), 0 7px 14px rgba(46, 97, 209, 0.42); }
.n-plus .sym { width: 25px; height: 25px; }

/* ——— Home ——— */
.nh-kick { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--ink3); white-space: nowrap; }
.nh-name { font-size: 28px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.nh-pill { display: flex; align-items: center; gap: 5px; padding: 0 10px; background: rgba(224, 224, 230, 0.7); }
.nh-pill .n-flame { width: 18.3px; height: 31.8px; flex: none; }
.nh-pill b { font-size: 18px; font-weight: 800; color: var(--streak); font-variant-numeric: tabular-nums; min-width: 22px; }
.nh-day { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nh-day small { font-size: 10px; font-weight: 600; color: var(--ink3); line-height: 12px; }
.nh-day b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.nh-day.past b { color: var(--ink3); }
.nh-day.today small { color: var(--acc); }
.nh-day.today b { font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--acc), var(--deep)); }
.nh-day.sel b { box-shadow: inset 0 0 0 1.5px rgba(31, 31, 36, 0.35); color: var(--ink); }
.nh-day em { display: flex; gap: 3px; height: 4px; }
.nh-day em i { width: 4px; height: 4px; border-radius: 50%; }
.nh-day em .t { background: var(--acc); }
.nh-day em .d { background: var(--streak); }
.nh-bar { border-radius: 99px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.nh-bar.future { background: rgba(224, 224, 230, 0.65); }
.nh-bar i { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); border-radius: 99px; background: linear-gradient(90deg, rgba(46, 184, 107, 0.78), var(--learnt)); box-shadow: 0 1px 2px rgba(46, 184, 107, 0.18); }

/* the session card: cobalt (teal with a gold ring once the day's target is cleared) */
.nh-sess { overflow: hidden; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 8px 16px rgba(46, 97, 209, 0.26); }
.nh-sess > .bg { position: absolute; inset: 0; background: linear-gradient(135deg, #2e61d1, #294db8 55%, #1f52b8); }
.nh-sess > .bg2 { position: absolute; inset: 0; background: linear-gradient(135deg, #298566, #1a5c80); opacity: var(--done, 0); }
.nh-ring { position: absolute; left: 16px; top: 16px; width: 88px; height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nh-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.nh-ring .tr { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 10; }
.nh-ring .pr { fill: none; stroke: url(#nh-ringg); stroke-width: 10; stroke-linecap: round; }
.nh-ring .pr2 { fill: none; stroke: #ffe36b; stroke-width: 10; stroke-linecap: round; opacity: var(--done, 0); }
.nh-ring b { position: relative; font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; opacity: calc(1 - var(--done, 0)); }
.nh-ring small { position: relative; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.06em; opacity: calc(1 - var(--done, 0)); }
.nh-ring .ok { position: absolute; left: 33px; top: 33px; width: 22px; height: 22px; color: #fff070; opacity: var(--done, 0); }
.nh-st { position: absolute; left: 122px; top: 16px; right: 68px; height: 88px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.nh-st small { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.72); }
.nh-st b { font-size: 22px; font-weight: 800; line-height: 1.12; }
.nh-st span { font-size: 14px; color: rgba(255, 255, 255, 0.78); line-height: 1.2; }
.nh-go { position: absolute; right: 16px; top: 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--deep); }
.nh-go .sym { width: 14px; height: 14px; }
.nh-go.gold { background: #fff08c; color: #335947; opacity: var(--done, 0); }

.nh-plan { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.nh-plan > .sym { font-size: 16px; color: var(--acc); }
.nh-plan p { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.nh-plan p b { font-size: 16px; font-weight: 600; }
.nh-plan p small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.nh-plan em { font-size: 13px; font-weight: 800; color: var(--acc); padding: 4px 8px; border-radius: 99px; background: rgba(46, 97, 209, 0.12); }
.nh-plan .chev { font-size: 12px; color: var(--ink3); }

.nh-tog { display: flex; gap: 4px; padding: 4px; background: rgba(224, 224, 230, 0.7); box-shadow: inset 0 0 0 1px var(--border); }
.nh-tog span { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; padding: 5px 8px; font-size: 11px; font-weight: 800; color: var(--ink3); }
.nh-tog span .sym { width: 11px; height: 11px; }
.nh-tog span.on { color: #fff; }
.nh-togsel { position: absolute; top: 4px; height: 22px; border-radius: 99px; background: linear-gradient(135deg, var(--acc), var(--deep)); }

.nh-sec { display: flex; align-items: center; gap: 6px; }
.nh-sec .sym { width: 11px; height: 11px; color: var(--ink3); }
.nh-row { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.nh-row > p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nh-row > p b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-row > p .n-split { width: 160px; }
.nh-row > p small { font-size: 10px; font-weight: 800; color: var(--ink3); }
.nh-row > em { font-size: 15px; font-weight: 800; color: var(--acc); font-variant-numeric: tabular-nums; }
.nh-row > em.dl { font-size: 14px; color: var(--streak); }
.nh-row > .chev { width: 12px; height: 12px; color: rgba(148, 148, 158, 0.7); }
.nh-row.feat { padding: 0 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.nh-div { height: 1px; background: var(--border); }

/* ——— the study card (FlashcardView), shared by Learn it, Test it and the cards in the air ——— */
.n-card { --fade: 1; }
.nc-face {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; padding: 22px 22px 20px 26px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 6px 12px rgba(0, 0, 0, 0.08); backface-visibility: hidden;
}
.nc-a { background: var(--cardback); }
.nc-margin { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(135deg, var(--acc), var(--deep)); }
.n-card.test .nc-margin { display: none; }
.n-card.test .nc-face { padding-left: 22px; }
.nc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.nc-top small { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; color: var(--acc); }
.nc-badge { width: 13px !important; height: 13px !important; color: rgba(46, 97, 209, 0.55); --knock: var(--surface); }
.nc-text { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; line-height: 1.22; color: var(--ink); text-wrap: balance; }
.nc-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; font-size: 11px; font-weight: 700; color: var(--ink3); opacity: 0.65; }
.nc-foot .sym { width: 12px; height: 12px; }
.nc-swipes { justify-content: space-between; font-size: 12px; font-weight: 800; opacity: 1; }
.nc-swipes span { display: flex; align-items: center; gap: 5px; }
.nc-swipes .r { color: var(--review); }
.nc-swipes .g { color: var(--learnt); }

/* the flame */
.n-flame { display: block; overflow: visible; color: var(--ink3); }