/* =========================================================
   Stellar Notes desktop (VCD-337): polished HTML reference

   The app is Angular + Ionic inside Electron, so this is web code
   their developer maps onto the existing components. One design for
   macOS, Windows and Linux: the OS draws the window frame, nothing
   here imitates traffic lights or caption buttons.

   Every class is prefixed `sn-`. Colour tokens are the Stellar design
   system values (the same numbers as --sw-* in the Wholesale portal
   build). Density is NOT the Wholesale one (round 2, Vlad 21 Oct 2026:
   "looks like a web app, not an application"). A desktop app is used
   with a mouse, so it takes the density of a Mac app, with Apple Notes
   as the reference:
     text 14, secondary 12-13, list heading 20, note title 24;
     sidebar rows 32, icon buttons 28 square with radius 8 (not round 44),
     search 32, fields and dialog buttons 36, menu items 30;
     sidebar 220, list about 300, dialogs 440.
   Poppins and the brand colours stay. Pointer cursor only on links.

   Contents
     Tokens, scoped minimum, focus, icons, app icon
     Buttons, tags, chips
     Fields, password field, strength block, checkbox, radio rows,
       notices, code input
     Menus, toast
     Dialog
     App shell: sidebar (hideable, account at the foot), list column
       (rows, Pinned group, selection), editor (toolbar, page, states,
       several notes selected), empty states
     Stellar ID pages, app-locked page
     Review-only rules (delete with the review layer)
   ========================================================= */

.sn {
  /* Colour: one blue, Stellar neutrals (DS §2). The old Ionic grey-blue is gone. */
  --sn-blue:      #2761FC;
  --sn-blue-600:  #2152D4;
  --sn-ink:       #0B0C19;
  --sn-body:      #62626A;
  --sn-n200:      #D6D6E0;
  --sn-n100:      #EAEAF0;
  --sn-n50:       #F6F6FD;
  --sn-white:     #FFFFFF;
  --sn-success:   #00B252;
  --sn-error:     #E10000;
  --sn-warning:   #9A5B00;
  --sn-blue-tint:    rgba(39, 97, 252, .08);
  --sn-blue-tint-2:  rgba(39, 97, 252, .12);
  --sn-success-tint: rgba(0, 178, 82, .10);
  --sn-error-tint:   rgba(225, 0, 0, .08);
  --sn-warning-tint: rgba(245, 158, 11, .16);
  --sn-hair:         #EAEAF0;

  /* Radius: desktop controls 8, inner blocks 10, panels 12; buttons and fields pill */
  --sn-r-ctl:   8px;
  --sn-r-inner: 10px;
  --sn-r-card:  12px;
  --sn-r-panel: 20px;
  --sn-r-pill:  999px;

  /* The only shadow: things that float (menus, the toast, dialogs) */
  --sn-sh-float: 0 12px 32px rgba(11, 12, 25, .16), 0 0 0 1px rgba(11, 12, 25, .05);

  --sn-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif;

  /* Columns. The window opens at 1024 x 768 (electron-start.js). Below
     1100 the sidebar hides by itself and can be shown again (app.js). */
  --sn-sidebar-w: 220px;
  --sn-list-w:    clamp(280px, 22vw, 320px);
}

/* ---------- Scoped minimum ---------- */
body.sn {
  margin: 0;
  font-family: var(--sn-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sn-ink);
  background: var(--sn-n50);
  -webkit-font-smoothing: antialiased;
}
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.sn :where(ul, ol) { padding: 0; list-style: none; }
.sn :where(h1, h2, h3) { font-weight: 700; color: var(--sn-ink); letter-spacing: 0; text-wrap: balance; }
.sn :where(p) { color: var(--sn-body); }
.sn :where(img) { display: block; max-width: 100%; }
.sn :where(a) { color: inherit; text-decoration: none; }
.sn :where(button, input, select, textarea) { font-family: inherit; }
/* A desktop app: the arrow cursor on controls, the hand only on links */
.sn :where(button, summary, label, [role="option"]) { cursor: default; }
[hidden] { display: none !important; }
/* A heading focused by script (a step change) is a reading position, not a control */
.sn :where(h1, h2)[tabindex="-1"]:focus { outline: none; }

/* Focus: 2px brand outline (fields use the field ring) */
.sn :where(a, button, summary, [tabindex], [contenteditable]):focus-visible {
  outline: 2px solid var(--sn-blue);
  outline-offset: 2px;
}
.sn-on-blue :where(a, button, [tabindex]):focus-visible { outline-color: #fff; }

.sn-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Icons: Tabler outline, one stroke weight for the whole app (DS §6).
   The glyphs live in icons.js; markup is <svg class="sn-ic"><use href="#i-…"/></svg>. */
.sn-ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.sn-ic-sm { width: 14px; height: 14px; }

/* App icon: the real Stellar Notes icon from the shipped app
   (Stellar Notes.app, icon.icns), trimmed to the squircle. Never redrawn (DS §10).
   Always square: width and height are set together, so it can never be squashed. */
.sn-appicon { display: block; flex: none; width: 20px; height: 20px; aspect-ratio: 1; object-fit: contain; }
.sn-appicon-md { width: 28px; height: 28px; }
.sn-appicon-lg { width: 48px; height: 48px; }
.sn-appicon-xl { width: 64px; height: 64px; }
/* On a blue surface the blue squircle needs its edge: a soft shadow, as an icon in the Dock has */
.sn-on-blue .sn-appicon { filter: drop-shadow(0 6px 14px rgba(8, 20, 64, .35)); }
.sn-appname { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--sn-ink); white-space: nowrap; }

/* Icon tile (Wholesale .sw-tile), desktop size */
.sn-tile {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--sn-r-inner); background: var(--sn-blue-tint); color: var(--sn-blue);
}
.sn-tile .sn-ic { width: 18px; height: 18px; }
.sn-tile-lg { width: 48px; height: 48px; border-radius: 14px; }
.sn-tile-lg .sn-ic { width: 24px; height: 24px; }
.sn-tile-quiet { background: var(--sn-n100); color: var(--sn-body); }
.sn-tile-success { background: var(--sn-success-tint); color: var(--sn-success); }
.sn-tile-solid { background: var(--sn-blue); color: #fff; }

/* =========================================================
   Buttons: pill, Poppins 600, 36 high (dialogs, forms). Outlines are
   a real border on every variant, never an inset box-shadow (DS §5).
   ========================================================= */
.sn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 6.5px 16.5px;
  font-family: var(--sn-font); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0;
  border: 1.5px solid transparent; border-radius: var(--sn-r-pill); white-space: nowrap;
  background: none; color: var(--sn-ink);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
a.sn-btn { cursor: pointer; }
.sn-btn .sn-ic { width: 16px; height: 16px; }
.sn-btn-primary { background: var(--sn-blue); color: #fff; }
.sn-btn-primary:hover { background: var(--sn-blue-600); }
.sn-btn-secondary { color: var(--sn-blue-600); border-color: var(--sn-n200); background: #fff; }
.sn-btn-secondary:hover { border-color: var(--sn-blue); background: var(--sn-blue-tint); }
.sn-btn-danger { color: var(--sn-error); border-color: var(--sn-error); background: #fff; }
.sn-btn-danger:hover { background: var(--sn-error-tint); }
.sn-btn-white { background: #fff; color: var(--sn-blue); }
.sn-btn-ghost-blue { color: #fff; border-color: rgba(255, 255, 255, .7); }
.sn-btn-ghost-blue:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.sn-btn-sm { min-height: 30px; padding: 3.5px 12.5px; font-size: 13px; }
.sn-btn-block { display: flex; width: 100%; }
.sn-btn:disabled, .sn-btn[aria-disabled="true"] {
  background: var(--sn-n100); color: var(--sn-body); border-color: transparent;
}

/* Text action (Wholesale .sw-textlink) */
.sn-textlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0;
  border: 0; background: none;
  font-size: 13px; font-weight: 600; color: var(--sn-blue-600);
}
a.sn-textlink { cursor: pointer; }
.sn-textlink:hover { color: var(--sn-blue-600); text-decoration: underline; text-underline-offset: 3px; }
.sn-textlink .sn-ic { width: 16px; height: 16px; }
.sn-textlink-danger { color: var(--sn-error); }
.sn-textlink-danger:hover { color: var(--sn-error); }

/* Icon button: 28 square, radius 8, 18 px glyph (desktop toolbar button) */
.sn-iconbtn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  padding: 0; border: 0; border-radius: var(--sn-r-ctl);
  background: none; color: var(--sn-body);
  transition: background-color .12s, color .12s;
}
.sn-iconbtn:hover { background: var(--sn-n100); color: var(--sn-ink); }
.sn-iconbtn[aria-pressed="true"], .sn-iconbtn[aria-expanded="true"]:not([data-action="toggle-sidebar"]) { background: var(--sn-blue-tint-2); color: var(--sn-blue-600); }
.sn-iconbtn .sn-ic { width: 18px; height: 18px; }
.sn-iconbtn:disabled { opacity: .4; background: none; }
.sn-iconbtn-xs { width: 22px; height: 22px; border-radius: 6px; }
.sn-iconbtn-xs .sn-ic { width: 15px; height: 15px; stroke-width: 2; }

/* ---------- Tags and chips ---------- */
.sn-tag {
  display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 100%;
  padding: 2px 8px; border-radius: var(--sn-r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--sn-blue-tint); color: var(--sn-blue-600);
  overflow: hidden; text-overflow: ellipsis;
}
.sn-tag .sn-ic { width: 12px; height: 12px; stroke-width: 2; }
.sn-tag-neutral { background: var(--sn-n100); color: var(--sn-body); }
.sn-on-blue .sn-tag { background: rgba(255, 255, 255, .16); color: #fff; }
/* Status chip: ink text, colour in the dot and tint (DS §12) */
.sn-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 2px 8px; border-radius: var(--sn-r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--sn-n100); color: var(--sn-body);
}
.sn-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sn-chip-dot, var(--sn-n200)); flex: none; }
.sn-chip-on { background: var(--sn-success-tint); color: var(--sn-ink); --sn-chip-dot: var(--sn-success); }
.sn-chip-off { --sn-chip-dot: #A3A3AE; }

/* =========================================================
   Fields: pill, 36 high, 1.5px n200, blue + soft ring on focus
   ========================================================= */
.sn-form { display: grid; gap: 14px; }
.sn-field { display: grid; gap: 6px; }
.sn-label { font-size: 13px; font-weight: 500; color: var(--sn-ink); }
.sn-input {
  width: 100%; min-height: 36px; padding: 6.5px 14px;
  font-family: var(--sn-font); font-size: 14px; line-height: 1.4; color: var(--sn-ink);
  background: #fff; border: 1.5px solid var(--sn-n200); border-radius: var(--sn-r-pill);
  transition: border-color .15s, box-shadow .15s;
}
.sn-input::placeholder { color: #6E6E78; }
.sn-input:hover { border-color: #B9B9C6; }
.sn-input:focus { outline: none; border-color: var(--sn-blue); box-shadow: 0 0 0 3px rgba(39, 97, 252, .14); }
.sn-input[readonly] { background: var(--sn-n50); }
.sn-hint { font-size: 12px; color: var(--sn-body); }
/* Inline error: under its field, the field keeps its value */
.sn-error { display: none; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.45; color: var(--sn-error); }
.sn-error .sn-ic { width: 14px; height: 14px; margin-top: 1px; stroke-width: 2; }
.sn-field.is-invalid .sn-input { border-color: var(--sn-error); }
.sn-field.is-invalid .sn-input:focus { box-shadow: 0 0 0 3px var(--sn-error-tint); }
.sn-field.is-invalid .sn-error { display: flex; }

/* Password field: the show / hide toggle sits inside the pill */
.sn-pass { position: relative; }
.sn-pass .sn-input { padding-right: 40px; }
.sn-pass-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border-radius: var(--sn-r-pill); }
.sn-pass-toggle .sn-ic { width: 16px; height: 16px; }

/* Search field: 32 high, the Mac search field */
.sn-search { position: relative; }
.sn-search > .sn-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--sn-body); pointer-events: none; }
.sn-search .sn-input { min-height: 32px; height: 32px; padding: 4px 32px 4px 32px; font-size: 13px; background: var(--sn-n50); border-color: transparent; }
.sn-search .sn-input:hover { border-color: var(--sn-n200); }
.sn-search .sn-input:focus { background: #fff; border-color: var(--sn-blue); }
.sn-search .sn-input::-webkit-search-cancel-button { display: none; }
.sn-search-clear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: var(--sn-r-pill); }
.sn-search-clear .sn-ic { width: 14px; height: 14px; }

/* Password strength (one component for Lock note and the app password).
   Met requirement = green check, never a strikethrough. The block has a
   fixed height in every state, so nothing below it moves. */
.sn-strength {
  display: grid; gap: 8px; padding: 12px 14px;
  border-radius: var(--sn-r-inner); background: var(--sn-n50);
}
.sn-strength-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 18px; }
.sn-strength-top b { font-size: 12px; font-weight: 600; color: var(--sn-ink); }
.sn-strength-level { font-size: 12px; font-weight: 600; color: var(--sn-body); }
.sn-strength[data-level="1"] .sn-strength-level { color: var(--sn-error); }
.sn-strength[data-level="2"] .sn-strength-level { color: var(--sn-warning); }
.sn-strength[data-level="3"] .sn-strength-level,
.sn-strength[data-level="4"] .sn-strength-level { color: #00803B; }
.sn-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sn-meter span { height: 4px; border-radius: 2px; background: var(--sn-n200); transition: background-color .2s; }
.sn-strength[data-level="1"] .sn-meter span.is-on { background: var(--sn-error); }
.sn-strength[data-level="2"] .sn-meter span.is-on { background: #D98A00; }
.sn-strength[data-level="3"] .sn-meter span.is-on,
.sn-strength[data-level="4"] .sn-meter span.is-on { background: var(--sn-success); }
.sn-reqs { display: grid; gap: 4px; }
.sn-reqs-label { margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--sn-body); }
.sn-req { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.45; color: var(--sn-ink); }
.sn-req-mark {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--sn-n200); border-radius: 50%; background: #fff; color: transparent;
  transition: background-color .15s, border-color .15s;
}
.sn-req-mark .sn-ic { width: 10px; height: 10px; stroke-width: 3; }
.sn-req.is-met .sn-req-mark { background: var(--sn-success); border-color: var(--sn-success); color: #fff; }

/* The one checkbox (DS §5 "One box, one look") */
.sn-check {
  display: inline-flex; align-items: center; gap: 10px; min-height: 28px;
  font-size: 14px; color: var(--sn-ink);
}
.sn-check input, .sn-checkbox {
  flex: none; width: 22px; height: 22px; margin: 0;
  appearance: none; -webkit-appearance: none;
  background: #fff no-repeat center / 14px 14px;
  border: 1.5px solid var(--sn-n200); border-radius: 6px;
  transition: background-color .15s, border-color .15s;
}
.sn-check input:checked, .sn-checkbox.is-checked {
  background-color: var(--sn-blue); border-color: var(--sn-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.sn-check:hover input { border-color: var(--sn-blue); }
.sn-check input:focus-visible { outline: 2px solid var(--sn-blue); outline-offset: 3px; }

/* Radio rows: one of N with a name (Move to folder). The radio card of
   DS §12 in its compact form: 1.5px outline, chosen = tint + blue border. */
.sn-radios { display: grid; gap: 6px; }
.sn-radio-row {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6.5px 12px;
  border: 1.5px solid var(--sn-n200); border-radius: var(--sn-r-inner);
  transition: border-color .15s, background-color .15s;
}
.sn-radio-row:hover { border-color: #B9B9C6; }
.sn-radio-row:has(input:checked) { border-color: var(--sn-blue); background: var(--sn-blue-tint); }
.sn-radio-row:has(input:focus-visible) { outline: 2px solid var(--sn-blue); outline-offset: 2px; }
.sn-radio-row > .sn-ic { width: 16px; height: 16px; color: var(--sn-body); }
.sn-radio-row:has(input:checked) > .sn-ic { color: var(--sn-blue); }
.sn-radio-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-radio-count { font-size: 12px; color: var(--sn-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-radio-row input {
  flex: none; width: 18px; height: 18px; margin: 0; appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--sn-n200); border-radius: 50%; background: #fff;
}
.sn-radio-row input:checked { border: 5.5px solid var(--sn-blue); }
.sn-radio-row input:focus-visible { outline: none; }

/* Notices: three levels (DS §12 messages). Ink text; the icon takes the colour. */
.sn-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--sn-r-inner);
  font-size: 13px; line-height: 1.5; color: var(--sn-ink);
  background: var(--sn-blue-tint);
}
.sn-notice > .sn-ic { margin-top: 1px; color: var(--sn-blue-600); }
.sn-notice-body { display: grid; gap: 2px; min-width: 0; }
.sn-notice-body p { color: var(--sn-ink); font-size: 13px; }
.sn-notice-title { font-weight: 600; color: var(--sn-ink); }
.sn-notice-success { background: var(--sn-success-tint); }
.sn-notice-success > .sn-ic { color: var(--sn-success); }
.sn-notice-warning { background: var(--sn-warning-tint); }
.sn-notice-warning > .sn-ic, .sn-notice-warning .sn-notice-title { color: var(--sn-warning); }
.sn-notice-error { background: var(--sn-error-tint); }
.sn-notice-error > .sn-ic { color: var(--sn-error); }

/* Six-digit code (Stellar ID verification) */
.sn-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sn-code input {
  width: 100%; min-width: 0; height: 44px; padding: 0; text-align: center;
  font-family: var(--sn-font); font-size: 18px; font-weight: 600; color: var(--sn-ink);
  border: 1.5px solid var(--sn-n200); border-radius: var(--sn-r-inner); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.sn-code input:focus { outline: none; border-color: var(--sn-blue); box-shadow: 0 0 0 3px rgba(39, 97, 252, .14); }

/* =========================================================
   Menus: one component for the note menu (•••), the right-click
   menus, the folder menu, the account menu and the text-style
   select. A desktop menu: 30 px items, 13 px text, radius 10, the
   float shadow with a hairline. Fixed to the window (app.js places
   it), so it scrolls if a window is shorter than it.
   ========================================================= */
.sn-menu {
  position: fixed; z-index: 80;
  min-width: 200px; max-width: 280px; padding: 5px;
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: var(--sn-r-inner); box-shadow: var(--sn-sh-float);
}
.sn-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 30px; padding: 4px 10px;
  border: 0; border-radius: 6px; background: none; text-align: left;
  font-family: var(--sn-font); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--sn-ink);
  white-space: nowrap;
}
a.sn-menu-item { cursor: pointer; }
.sn-menu-item > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sn-menu-item .sn-ic { width: 16px; height: 16px; color: var(--sn-body); }
.sn-menu-item:hover, .sn-menu-item:focus-visible { background: var(--sn-blue); color: #fff; outline: none; }
.sn-menu-item:hover .sn-ic, .sn-menu-item:focus-visible .sn-ic, .sn-menu-item:hover .sn-menu-key, .sn-menu-item:focus-visible .sn-menu-key { color: #fff; }
.sn-menu.is-pointer .sn-menu-item:focus-visible:not(:hover) { background: none; color: var(--sn-ink); }
.sn-menu.is-pointer .sn-btn:focus-visible:not(:hover) { outline: none; }
.sn-menu.is-pointer .sn-menu-item:focus-visible:not(:hover) .sn-ic, .sn-menu.is-pointer .sn-menu-item:focus-visible:not(:hover) .sn-menu-key { color: var(--sn-body); }
.sn-menu.is-pointer .sn-menu-item-danger:focus-visible:not(:hover), .sn-menu.is-pointer .sn-menu-item-danger:focus-visible:not(:hover) .sn-ic { color: var(--sn-error); }
.sn-menu-item[aria-checked="true"] { font-weight: 600; }
.sn-menu-item[aria-checked="true"]::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat; }
.sn-menu-item:disabled { color: var(--sn-body); opacity: .5; }
.sn-menu-item:disabled:hover { background: none; color: var(--sn-body); }
.sn-menu-item:disabled:hover .sn-ic { color: var(--sn-body); }
.sn-menu-item-danger, .sn-menu-item-danger .sn-ic { color: var(--sn-error); }
.sn-menu-item-danger:hover, .sn-menu-item-danger:focus-visible { background: var(--sn-error); }
.sn-menu-key { flex: none; margin-left: 16px; font-size: 12px; font-weight: 500; color: var(--sn-body); font-variant-numeric: tabular-nums; }
.sn-menu-sep { height: 1px; margin: 4px 8px; background: var(--sn-n100); }
.sn-menu-head { padding: 6px 10px 8px; }
.sn-menu-label { font-size: 12px; font-weight: 500; color: var(--sn-body); }
.sn-menu-value { font-size: 13px; font-weight: 600; color: var(--sn-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-menu-actions { display: grid; gap: 6px; padding: 2px 4px 6px; }
.sn-menu-title { font-size: 14px; font-weight: 600; color: var(--sn-ink); }

/* Toast: background events only, bottom centre */
.sn-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 90; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: min(480px, calc(100vw - 32px));
  padding: 9px 14px; border-radius: var(--sn-r-inner);
  background: var(--sn-ink); color: #fff; font-size: 13px; line-height: 1.45;
  box-shadow: var(--sn-sh-float);
}
.sn-toast .sn-ic { width: 16px; height: 16px; color: #5CE59B; }

/* =========================================================
   Dialog: native <dialog> + showModal() (DS §12), 440 px, title +
   close, actions on the right. One family for every dialog.
   ========================================================= */
dialog.sn-dialog {
  width: min(440px, calc(100% - 32px)); max-width: none;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  margin: auto; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--sn-r-card); background: #fff; color: var(--sn-ink);
  box-shadow: 0 24px 60px rgba(11, 12, 25, .28);
}
dialog.sn-dialog::backdrop { background: rgba(11, 12, 25, .32); }
dialog.sn-dialog[open] { animation: sn-up .18s cubic-bezier(.2, .8, .3, 1); }
@keyframes sn-up { from { transform: translateY(8px) scale(.99); opacity: .6; } to { transform: none; opacity: 1; } }
.sn-dialog-body { display: grid; gap: 14px; padding: 20px; }
.sn-dialog-head { display: flex; align-items: flex-start; gap: 10px; }
.sn-dialog-head > div { flex: 1 1 auto; min-width: 0; }
.sn-dialog h2 { font-size: 18px; line-height: 1.35; }
.sn-dialog-head p { margin-top: 2px; font-size: 13px; text-wrap: pretty; }
.sn-dialog-x { margin: -2px -6px 0 0; }
.sn-dialog-back { margin: -2px 0 0 -6px; }
.sn-dialog-body > p { font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.sn-dialog-body > p b { color: var(--sn-ink); font-weight: 600; }
.sn-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sn-dialog-actions-split { justify-content: space-between; align-items: center; }
/* What the action applies to (Wholesale .sw-dialog-subject) */
.sn-dialog-subject {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 12px; border-radius: var(--sn-r-inner); background: var(--sn-n50);
}
.sn-dialog-subject .sn-tile { width: 32px; height: 32px; border-radius: var(--sn-r-ctl); background: #fff; }
.sn-dialog-subject .sn-tile .sn-ic { width: 16px; height: 16px; }
.sn-dialog-subject p { display: grid; min-width: 0; font-size: 12px; line-height: 1.45; }
.sn-dialog-subject b { font-size: 13px; font-weight: 600; color: var(--sn-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-dialog-scrolllist { max-height: 260px; overflow-y: auto; padding: 2px; margin: -2px; }

/* Share via Stellar Secret */
.sn-secret { display: grid; gap: 10px; padding: 14px; border-radius: var(--sn-r-inner); background: var(--sn-n50); }
.sn-secret-top { display: flex; align-items: center; gap: 8px; }
.sn-secret-top b { flex: 1 1 auto; font-size: 14px; font-weight: 600; color: var(--sn-ink); }
.sn-secret-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--sn-r-ctl); background: var(--sn-blue); color: #fff; flex: none; }
.sn-secret-icon .sn-ic { width: 16px; height: 16px; stroke-width: 2; }
.sn-secret h3 { font-size: 15px; line-height: 1.4; }
.sn-secret p { font-size: 13px; }
.sn-secret .sn-textlink { cursor: pointer; }
.sn-secret-done { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 2px 0; }
.sn-secret-done h3 { font-size: 15px; }
.sn-secret-done p { font-size: 13px; max-width: 36ch; }
.sn-copyrow { display: flex; gap: 8px; }
.sn-copyrow .sn-input { flex: 1 1 auto; min-width: 0; font-size: 13px; text-overflow: ellipsis; }
.sn-burn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--sn-n100); }
.sn-burn p { font-size: 12px; max-width: 30ch; }

/* Settings rows */
.sn-setting {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 1.5px solid transparent; border-radius: var(--sn-r-inner); background: var(--sn-n50);
  text-align: left; color: var(--sn-ink); font-family: var(--sn-font);
  transition: border-color .15s;
}
button.sn-setting:hover { border-color: var(--sn-n200); }
.sn-setting .sn-tile { width: 32px; height: 32px; border-radius: var(--sn-r-ctl); background: #fff; }
.sn-setting .sn-tile .sn-ic { width: 16px; height: 16px; }
.sn-setting-text { display: grid; gap: 3px; flex: 1 1 auto; min-width: 0; justify-items: start; }
.sn-setting-text b { font-size: 14px; font-weight: 600; line-height: 1.4; }
.sn-setting-text span:not(.sn-chip) { font-size: 12px; line-height: 1.5; color: var(--sn-body); }
.sn-setting > .sn-ic { width: 16px; height: 16px; color: var(--sn-body); }
div.sn-setting { align-items: flex-start; }

/* =========================================================
   App shell: three columns, each scrolls on its own. The sidebar
   hides to zero width (app.js: .is-sidebar-hidden on the shell).
   ========================================================= */
.sn-shell {
  display: grid;
  grid-template-columns: var(--sn-sidebar-w) var(--sn-list-w) minmax(0, 1fr);
  height: 100vh; height: 100dvh;
  overflow: hidden; background: #fff;
  transition: grid-template-columns .2s ease;
}
.sn-shell.is-booting { transition: none; }
.sn-shell.is-sidebar-hidden { grid-template-columns: 0px var(--sn-list-w) minmax(0, 1fr); }
.sn-shell.is-sidebar-hidden .sn-sidebar { visibility: hidden; border-right-width: 0; }

/* ---------- Sidebar: the soft surface, as a Mac sidebar is set off from the content ---------- */
.sn-sidebar { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--sn-n50); border-right: 1px solid var(--sn-hair); }
.sn-sidebar > * { min-width: 220px; }
.sn-sidebar-head { display: flex; align-items: center; gap: 8px; height: 52px; flex: none; padding: 0 12px 0 10px; }
.sn-sidebar-head .sn-iconbtn { margin-right: 2px; }
.sn-sidebar-head .sn-appname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sn-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 12px; scrollbar-width: thin; scrollbar-color: var(--sn-n200) transparent; }
.sn-navlabel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 28px; padding: 10px 4px 2px 8px;
  font-size: 12px; font-weight: 600; line-height: 16px; color: var(--sn-body);
}
.sn-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.sn-navitem { position: relative; }
.sn-navlink {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 32px; padding: 0 8px;
  border: 1.5px solid transparent; border-radius: var(--sn-r-ctl); background: none;
  font-family: var(--sn-font); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--sn-ink); text-align: left;
  transition: background-color .12s;
}
.sn-navlink .sn-ic { width: 17px; height: 17px; color: var(--sn-blue); }
.sn-navlink-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-count { flex: none; min-width: 16px; font-size: 12px; font-weight: 500; text-align: right; color: var(--sn-body); font-variant-numeric: tabular-nums; }
.sn-navlink:hover { background: rgba(11, 12, 25, .05); }
.sn-navlink[aria-current="page"] { background: var(--sn-blue-tint-2); font-weight: 600; }
.sn-navlink[aria-current="page"] .sn-count { color: var(--sn-blue-600); }
.sn-navlink.is-drop { border-color: var(--sn-blue); background: var(--sn-blue-tint); }
.sn-navitem.has-menu > .sn-navlink { outline: 2px solid var(--sn-blue); outline-offset: -2px; }
/* Folder rows: the ••• button takes the count's place on hover, focus or open */
.sn-folder .sn-navlink { padding-right: 34px; }
.sn-folder .sn-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sn-folder-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 6px; opacity: 0; }
.sn-folder-more .sn-ic { width: 16px; height: 16px; }
.sn-folder:hover .sn-folder-more, .sn-folder:focus-within .sn-folder-more, .sn-folder-more[aria-expanded="true"] { opacity: 1; }
.sn-folder:hover .sn-count, .sn-folder:focus-within .sn-count, .sn-folder:has(.sn-folder-more[aria-expanded="true"]) .sn-count { opacity: 0; }
.sn-folder-more:hover { background: rgba(11, 12, 25, .07); }
.sn-nav-empty { padding: 4px 8px 8px; font-size: 12px; color: var(--sn-body); }

/* Account at the foot of the sidebar (round 2, item 3) */
.sn-sidebar-foot { display: flex; align-items: center; gap: 4px; flex: none; padding: 6px 8px 8px; border-top: 1px solid var(--sn-hair); }
.sn-sidebar-foot .sn-account { flex: 1 1 auto; width: auto; min-width: 0; }
.sn-account {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: var(--sn-r-ctl); background: none; text-align: left;
  font-family: var(--sn-font); color: var(--sn-ink);
  transition: background-color .12s;
}
.sn-account:hover, .sn-account[aria-expanded="true"] { background: rgba(11, 12, 25, .05); }
.sn-avatar {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--sn-blue); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.sn-avatar.is-guest { background: var(--sn-n100); color: var(--sn-body); }
.sn-avatar .sn-ic { width: 16px; height: 16px; }
.sn-account-text { display: grid; flex: 1 1 auto; min-width: 0; }
.sn-account-name { font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-account-sub { font-size: 12px; line-height: 1.35; color: var(--sn-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- List column: white, rows separated by hairlines ---------- */
.sn-listcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-right: 1px solid var(--sn-hair); }
.sn-listhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; flex: none; padding: 10px 12px 8px 16px; }
.sn-listhead-row { display: flex; align-items: center; gap: 6px; min-height: 42px; }
.sn-sidebar-show { margin-left: -6px; }
.sn-shell:not(.is-sidebar-hidden) .sn-sidebar-show { display: none; }
.sn-listhead-title { flex: 1 1 auto; min-width: 0; }
.sn-listhead h1 { font-size: 20px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-listhead-count { font-size: 12px; line-height: 1.4; color: var(--sn-body); font-variant-numeric: tabular-nums; }
.sn-listscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 16px; scrollbar-width: thin; scrollbar-color: var(--sn-n200) transparent; }
.sn-notes { display: grid; grid-template-columns: minmax(0, 1fr); outline: none; }
.sn-result { padding: 2px 8px 6px; font-size: 12px; color: var(--sn-body); }
.sn-result b { color: var(--sn-ink); font-weight: 600; }
.sn-group { display: grid; grid-template-columns: minmax(0, 1fr); }
.sn-group + .sn-group { margin-top: 6px; }
.sn-group-label { padding: 6px 8px 4px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--sn-body); }

/* ---------- Note row (round 2, item 7): title, then date + preview, then the folder ---------- */
.sn-note {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  padding: 8px 10px 9px; border-radius: var(--sn-r-ctl);
  color: var(--sn-ink); outline: none; user-select: none; -webkit-user-select: none;
}
/* Hairline between rows, inset like a Mac list; not under or above a selected row */
.sn-note::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: var(--sn-hair);
}
.sn-note:last-child::after, .sn-note[aria-selected="true"]::after, .sn-note:has(+ .sn-note[aria-selected="true"])::after { display: none; }
.sn-note-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sn-note-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-note-title.is-untitled { color: var(--sn-body); }
.sn-note-top .sn-ic { width: 14px; height: 14px; color: var(--sn-body); stroke-width: 2; }
.sn-note-top .sn-note-star { color: var(--sn-blue); }
.sn-note-line { display: flex; gap: 8px; min-width: 0; font-size: 13px; line-height: 19px; white-space: nowrap; }
.sn-note-line time { flex: none; font-weight: 500; color: var(--sn-ink); font-variant-numeric: tabular-nums; }
.sn-note-preview { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--sn-body); }
.sn-note-folder { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; line-height: 17px; color: var(--sn-body); }
.sn-note-folder .sn-ic { width: 13px; height: 13px; }
.sn-note-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-note.is-dragging { opacity: .5; }
/* Selection: a tint; the brand blue with white text while the list has focus.
   Consecutive selected rows join into one block, as in a Mac list. */
.sn-note[aria-selected="true"] { background: var(--sn-blue-tint-2); }
.sn-notes:focus-within .sn-note[aria-selected="true"] { background: var(--sn-blue); color: #fff; }
.sn-notes:focus-within .sn-note[aria-selected="true"] :is(.sn-note-title, .sn-note-line time, .sn-note-preview, .sn-note-folder, .sn-ic) { color: #fff; }
.sn-note[aria-selected="true"]:has(+ .sn-note[aria-selected="true"]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sn-note[aria-selected="true"] + .sn-note[aria-selected="true"] { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Keyboard focus on a row that is not selected; the right-clicked row while its menu is open */
.sn-note:focus-visible:not([aria-selected="true"]), .sn-note.has-menu { outline: 2px solid var(--sn-blue); outline-offset: -2px; }
/* a selected row in the focused list already shows focus by its fill */
.sn-notes:focus-within .sn-note[aria-selected="true"]:focus-visible { outline: none; }
.sn-notes:focus-within .sn-note[aria-selected="true"].has-menu { outline-color: #fff; outline-offset: -4px; }

/* ---------- Empty states (DS §5: name the reason, change something) ---------- */
.sn-empty {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 28px 12px; text-align: center;
}
.sn-empty .sn-tile { margin-bottom: 8px; }
.sn-empty h2, .sn-empty h3 { font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.sn-empty p { font-size: 13px; max-width: 30ch; }
.sn-empty .sn-btn { margin-top: 10px; }
.sn-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.sn-empty-actions .sn-btn { margin-top: 0; }

/* ---------- Editor column: toolbar row, then the page ---------- */
.sn-editorcol { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; container-type: inline-size; container-name: editor; }
.sn-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
  height: 44px; padding: 0 10px; border-bottom: 1px solid var(--sn-hair);
}
.sn-toolbar-format, .sn-toolbar-actions { display: flex; align-items: center; gap: 2px; min-width: 0; }
.sn-toolbar-actions { flex: none; }
.sn-tool-group { display: contents; }
.sn-toolbar.is-empty > * { visibility: hidden; }
.sn-tool {
  display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  padding: 0; border: 0; border-radius: var(--sn-r-ctl); background: none; color: var(--sn-ink);
  transition: background-color .12s, color .12s;
}
.sn-tool .sn-ic { width: 18px; height: 18px; }
.sn-tool:hover { background: var(--sn-n100); }
.sn-tool[aria-pressed="true"], .sn-tool[aria-expanded="true"] { background: var(--sn-blue-tint-2); color: var(--sn-blue-600); }
.sn-tool.is-on { color: var(--sn-blue); }
.sn-tool:disabled { color: #B4B4BE; background: none; }
.sn-tool-sep { width: 1px; height: 16px; margin: 0 5px; background: var(--sn-n200); flex: none; }
/* "Standard" is our select (a menu button), not the system one */
.sn-tool-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; height: 28px; min-width: 104px; padding: 0 6px 0 9px;
  border: 0; border-radius: var(--sn-r-ctl); background: none;
  font-family: var(--sn-font); font-size: 13px; font-weight: 500; color: var(--sn-ink); white-space: nowrap;
}
.sn-tool-select:hover, .sn-tool-select[aria-expanded="true"] { background: var(--sn-n100); }
.sn-tool-select:disabled { color: #B4B4BE; background: none; }
.sn-tool-select .sn-ic { width: 14px; height: 14px; color: var(--sn-body); }
/* A narrow editor (1024 window with the sidebar shown): Undo and Redo leave the
   toolbar, they stay on ⌘Z and ⇧⌘Z; the style select tightens */
@container editor (max-width: 600px) {
  .sn-tool-history { display: none; }
  .sn-tool-select { min-width: 0; }
}

.sn-editor { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.sn-editor-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 32px 48px; scrollbar-width: thin; scrollbar-color: var(--sn-n200) transparent; }
.sn-editor-date { margin-bottom: 10px; font-size: 12px; text-align: center; color: var(--sn-body); }
/* The title is the first line of the page: same font and box, focused or not */
.sn-title {
  display: block; width: 100%; height: 36px; margin: 0; padding: 0;
  font-family: var(--sn-font); font-size: 24px; font-weight: 700; line-height: 36px; color: var(--sn-ink);
  border: 0; border-radius: 0; background: none; text-overflow: ellipsis;
}
.sn-title::placeholder { color: #8C8C96; }
.sn-title:focus { outline: none; }
.sn-body {
  min-height: calc(100% - 60px); padding-top: 6px;
  font-size: 14px; line-height: 1.65; color: var(--sn-ink); outline: none;
  overflow-wrap: anywhere;
}
.sn-body:focus-visible { outline: none; }
.sn-body:empty::before { content: attr(data-placeholder); color: #A3A3AE; pointer-events: none; }
.sn-body p, .sn-body div { margin: 0; }
.sn-body :where(p, li, div) { color: var(--sn-ink); }
.sn-body ul, .sn-body ol { margin: 2px 0; padding-left: 24px; }
.sn-body ul { list-style: disc; }
.sn-body ol { list-style: decimal; }
.sn-body li { padding-left: 2px; }
.sn-body h1 { font-size: 22px; line-height: 1.35; margin: 8px 0 4px; }
.sn-body h2 { font-size: 19px; line-height: 1.35; margin: 8px 0 4px; }
.sn-body h3 { font-size: 17px; line-height: 1.4; margin: 6px 0 2px; }
.sn-body h4 { font-size: 15px; line-height: 1.45; margin: 6px 0 2px; }
.sn-body h5 { font-size: 14px; line-height: 1.5; margin: 6px 0 2px; }
.sn-body h6 { font-size: 13px; line-height: 1.5; margin: 6px 0 2px; text-transform: none; }
.sn-body a { color: var(--sn-blue-600); text-decoration: underline; text-underline-offset: 3px; }
.sn-body img { max-width: 100%; height: auto; border-radius: var(--sn-r-ctl); margin: 8px 0; }
.sn-body s, .sn-body strike { color: var(--sn-body); }

/* Editor states: nothing selected, no notes, locked, several selected */
.sn-editor-state { flex: 1 1 auto; display: grid; place-items: center; padding: 24px; }
.sn-editor-state .sn-empty { max-width: 360px; }
.sn-editor-state .sn-empty h2 { font-size: 16px; }
.sn-editor-state .sn-empty p { font-size: 13px; max-width: 34ch; }
/* Several notes selected (round 2, item 5): the actions for all of them */
.sn-editor-state .sn-multi { max-width: 480px; }
.sn-multi h2 { font-size: 20px; }
.sn-multi-list { display: grid; gap: 2px; width: 100%; max-width: 280px; margin-top: 12px; padding: 6px; border-radius: var(--sn-r-inner); background: var(--sn-n50); text-align: left; }
.sn-multi-list li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px; font-size: 13px; color: var(--sn-ink); }
.sn-multi-list li .sn-ic { width: 14px; height: 14px; color: var(--sn-body); }
.sn-multi-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-multi-list li.is-more { color: var(--sn-body); }
.sn-multi .sn-hint { margin-top: 12px; }

/* =========================================================
   Stellar ID pages: split layout kept, blue brand panel left,
   form on white right, inside the same window; desktop density
   ========================================================= */
.sn-authpage { min-height: 100vh; min-height: 100dvh; padding: 10px; background: var(--sn-n50); }
.sn-auth { display: grid; grid-template-columns: minmax(260px, 32%) minmax(0, 1fr); gap: 10px; min-height: calc(100vh - 20px); min-height: calc(100dvh - 20px); }
.sn-auth-panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 24px; border-radius: var(--sn-r-panel);
  background: linear-gradient(150deg, var(--sn-blue) 0%, var(--sn-blue-600) 100%); color: #fff;
}
/* DS hero decor: concentric rings, bottom-aligned, behind the content */
.sn-auth-panel::before, .sn-auth-panel::after {
  content: ""; position: absolute; z-index: -1; left: 50%; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .12); pointer-events: none; transform: translateX(-50%);
}
.sn-auth-panel::before { width: 480px; height: 480px; bottom: -310px; }
.sn-auth-panel::after  { width: 760px; height: 760px; bottom: -490px; }
.sn-auth-panel > div { margin-block: auto; }
.sn-auth-panel h2 { color: #fff; font-size: 24px; line-height: 1.3; max-width: 14ch; }
.sn-auth-panel p { margin-top: 10px; color: rgba(255, 255, 255, .94); font-size: 14px; max-width: 32ch; }
.sn-auth-col { display: flex; flex-direction: column; padding: 14px 18px 24px; border-radius: var(--sn-r-panel); background: #fff; min-width: 0; }
.sn-auth-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 10px 0 6px; border-radius: var(--sn-r-ctl); font-size: 13px; font-weight: 600; color: var(--sn-ink); }
.sn-auth-back .sn-ic { width: 16px; height: 16px; }
.sn-auth-back:hover { background: var(--sn-n50); }
.sn-auth-body { width: 100%; max-width: 360px; margin: auto; padding-block: 24px; }
.sn-auth-body h1 { font-size: 24px; line-height: 1.3; }
.sn-auth-lead { margin-top: 6px; font-size: 14px; }
.sn-auth-lead b { color: var(--sn-ink); font-weight: 600; overflow-wrap: anywhere; }
.sn-auth-body .sn-form { margin-top: 20px; }
.sn-auth-row { display: flex; justify-content: flex-end; margin-top: -6px; }
.sn-auth-link { display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; font-weight: 600; color: var(--sn-blue-600); background: none; border: 0; padding: 0; cursor: pointer; }
.sn-auth-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sn-auth-alt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sn-n100); font-size: 13px; color: var(--sn-body); text-align: center; }
.sn-auth-alt a, .sn-auth-alt button { font-weight: 600; color: var(--sn-blue-600); }
.sn-auth-alt a { cursor: pointer; }
.sn-auth-alt a:hover, .sn-auth-alt button:hover { text-decoration: underline; text-underline-offset: 3px; }
.sn-auth-alt button { border: 0; background: none; padding: 0; font-family: inherit; font-size: inherit; }
.sn-auth-alt p + p { margin-top: 4px; }
.sn-btn.is-busy { pointer-events: none; }
.sn-spinner { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: sn-spin .8s linear infinite; }
@keyframes sn-spin { to { transform: rotate(360deg); } }

/* =========================================================
   App locked: our soft surface with the ring motif, not a grey void
   ========================================================= */
.sn-lockpage {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px;
  background: var(--sn-n50);
}
.sn-lockpage::before, .sn-lockpage::after {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; border-radius: 50%;
  border: 1.5px solid rgba(39, 97, 252, .10); transform: translate(-50%, -50%); pointer-events: none;
}
.sn-lockpage::before { width: 640px; height: 640px; }
.sn-lockpage::after  { width: 1000px; height: 1000px; }
.sn-lockcard {
  width: min(360px, 100%); overflow: hidden;
  border-radius: var(--sn-r-panel); background: #fff;
  box-shadow: 0 12px 40px rgba(11, 12, 25, .08);
}
.sn-lockcard-body { display: grid; gap: 14px; padding: 24px 24px 20px; }
.sn-lockcard-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sn-lockcard-head { display: grid; justify-items: center; gap: 4px; text-align: center; }
.sn-lockcard-head .sn-tile { margin-bottom: 6px; }
.sn-lockcard-head h1 { font-size: 20px; line-height: 1.3; }
.sn-lockcard-head p { font-size: 13px; }
.sn-lockcard-foot { display: flex; align-items: center; justify-content: center; gap: 4px 8px; flex-wrap: wrap; padding: 8px 20px 10px; border-top: 1px solid var(--sn-n100); background: #fff; font-size: 13px; color: var(--sn-body); }

/* =========================================================
   Review-only: notes that describe this build, not the product.
   Every one carries data-sn-review-note; delete them with this rule
   (README, "Before integrating").
   ========================================================= */
.sn-review-note { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--sn-body); font-style: normal; }
.sn-review-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--sn-ink); }

@media (prefers-reduced-motion: reduce) {
  .sn *, .sn *::before, .sn *::after { transition: none !important; animation: none !important; }
  .sn-shell { transition: none; }
}
@media print {
  .sn-shell { height: auto; overflow: visible; }
}