/* ============================================================================
   naliwajka.com — account service theme.

   A copy of the public site's brand.css (Site/naliwajka/brand.css) so the /account
   pages match the rest of naliwajka.com exactly (burgundy base, white surfaces). The
   account-specific card/button styles are appended at the bottom. Keep the :root
   tokens + header/hero/footer rules in sync with the site theme if it changes.
   ========================================================================== */
:root{
  --bg:#f6f6f7; --bg-soft:#fafafb;
  --surface:#ffffff; --surface-2:#fbfafa; --surface-3:#f4f1f2;
  --line:#e4e3e6; --line-soft:#eeedef;
  --text:#1c1b1d; --text-dim:#5b5860; --text-faint:#8c8891;
  --accent:#80213b; --accent-2:#9e2a4a; --accent-deep:#5e1729;
  --accent-ink:#ffffff; --accent-soft:rgba(128,33,59,.09); --accent-glow:rgba(128,33,59,.18);
  --link:#80213b;
  --ok:#3f9142; --warn:#b9770a; --danger:#c0392b;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 3px rgba(20,15,18,.08),0 4px 14px rgba(20,15,18,.05);
  --shadow-sm:0 1px 2px rgba(20,15,18,.07);
  --header-bg:rgba(255,255,255,.88);   /* frosted white bar; overridden dark below */
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-soft);color:var(--accent-deep)}

/* -------------------------------- header --------------------------------- */
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:6px;
  padding:0 24px;height:58px;
  background:var(--header-bg);
  backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,15,18,.04)}
header h1{font-size:17px;margin:0;font-weight:700;letter-spacing:-.01em;line-height:1;
  display:inline-flex;align-items:center;gap:8px}
header h1 a{color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:9px;background:var(--surface-3);border:1px solid var(--line);
  transition:color .15s,background .15s,border-color .15s,box-shadow .15s}
header h1 a::before{content:"";width:9px;height:9px;border-radius:3px;
  background:linear-gradient(140deg,var(--accent-2),var(--accent-deep));
  box-shadow:0 1px 4px var(--accent-glow)}
header h1 a:hover{color:var(--accent);background:var(--accent-soft);border-color:#e0c2cb;
  box-shadow:var(--shadow-sm)}
header h1 a:active{transform:translateY(1px)}
header h1 .tag{color:var(--text-faint);font-weight:500;font-size:13px;letter-spacing:.01em}
nav{display:flex;gap:2px;margin-left:22px;align-self:stretch}
nav a{position:relative;display:inline-flex;align-items:center;color:var(--text-dim);
  text-decoration:none;padding:0 13px;font-size:13.5px;font-weight:500;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
nav a:hover{color:var(--text)}
nav a.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
header .sub{margin-left:auto;color:var(--text-faint);font-size:12.5px;letter-spacing:.01em}

/* account control injected into the header by acct-nav.js (Sign in / Sign out) on the
   shared naliwajka header — kept byte-identical to the apex brand.css so this page's bar
   matches every other naliwajka.com page. margin-left:auto pushes it to the far right. */
.acct-nav{display:flex;align-items:center;gap:11px;margin-left:auto}
.acct-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:13px;font-weight:600;color:var(--accent-ink);
  background:linear-gradient(140deg,var(--accent-2),var(--accent-deep));
  padding:7px 14px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .15s ease}
.acct-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.acct-btn:active{transform:translateY(0)}
.acct-g{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:4px;background:#fff;color:var(--accent-deep);font-weight:800;font-size:12px}
.acct-me{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);
  font-size:13px;font-weight:600;padding:4px 8px;border-radius:var(--radius-sm);transition:background .15s}
.acct-me:hover{background:var(--surface-3)}
.acct-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-av{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.acct-av-ph{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:13px}
.acct-out{text-decoration:none;font-size:13px;font-weight:600;color:var(--text-faint);
  border-left:1px solid var(--line);padding-left:11px;transition:color .15s}
.acct-out:hover{color:var(--accent-2)}
/* MGMT link shown only for approved managers (acct-nav.js) */
.acct-mgmt{display:inline-flex;align-items:center;text-decoration:none;font-size:12px;
  font-weight:700;letter-spacing:.05em;color:var(--accent-ink);
  background:linear-gradient(140deg,var(--accent-2),var(--accent-deep));
  padding:6px 13px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);
  transition:transform .12s ease,box-shadow .15s ease}
.acct-mgmt:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.acct-mgmt:active{transform:translateY(0)}

/* -------------------------------- layout --------------------------------- */
main{max-width:960px;margin:0 auto;padding:30px 20px 48px}

/* --------------------------------- hero ---------------------------------- */
.hero{margin:14px 2px 26px}
.hero h2{font-size:30px;margin:0 0 8px;font-weight:750;letter-spacing:-.02em;color:var(--text)}
.hero h2 .grad{background:linear-gradient(90deg,var(--accent-2),var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-rule{border:0;height:3px;width:100%;max-width:380px;margin:14px 0 16px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent-deep),transparent)}
.hero p{margin:0;color:var(--text-dim);font-size:15px;max-width:640px;line-height:1.65}

/* -------------------------------- footer --------------------------------- */
footer{max-width:960px;margin:0 auto;padding:22px 20px;color:var(--text-faint);font-size:12.5px;
  border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--link);text-decoration:none}
footer a:hover{color:var(--accent-2);text-decoration:underline}

/* ===================== account-specific (not on the site) ================= */
.acct-card{max-width:440px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px;margin:6px 2px}
.acct-msg{max-width:440px;margin:6px 2px 16px;padding:11px 14px;border-radius:var(--radius-sm);
  background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.25);color:var(--danger);font-size:13px}

/* Google sign-in button */
.g-btn{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  padding:11px 18px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;
  color:var(--accent-ink);background:linear-gradient(140deg,var(--accent-2),var(--accent-deep));
  box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .15s ease}
.g-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.g-btn:active{transform:translateY(0)}
.g-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:4px;background:#fff;color:var(--accent-deep);font-weight:800;font-size:14px}

.acct-note{margin:14px 0 0;color:var(--text-faint);font-size:12.5px;line-height:1.55}

/* signed-in identity row */
.acct-id{display:flex;align-items:center;gap:14px}
.acct-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line)}
.acct-avatar-ph{display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:20px}
.acct-id-text{min-width:0}
.acct-name{font-size:16px;font-weight:650;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
.acct-email{color:var(--text-faint);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.acct-badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--text-dim);background:var(--surface-3);border:1px solid var(--line);
  padding:2px 7px;border-radius:20px}
.acct-badge-mgmt{color:var(--accent-ink);background:var(--accent);border-color:var(--accent-deep)}
.acct-signout{display:inline-block;margin-top:16px;text-decoration:none;font-size:13px;font-weight:600;
  color:var(--accent);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 15px;
  transition:color .15s,border-color .15s,background .15s}
.acct-signout:hover{color:var(--accent-deep);border-color:var(--accent);background:var(--accent-soft)}

/* ===================== printect.net brand override ======================= */
/* When the login page is served on printect.net, app/main.py stamps
   <html data-brand="printect"> so the header/hero/Google-button pick up the Printect
   palette instead of the naliwajka burgundy. Tokens mirror Store/static/app.css's
   body[data-brand="printect"] so the two storefront pages match. :root == <html>, so
   setting the custom props here re-themes the whole document. */
html[data-brand="printect"]{
  --bg:#f7f5f6; --bg-soft:#fbfafb;
  --surface:#ffffff; --surface-2:#fcfbfb; --surface-3:#f4eff1;
  --line:#e8e3e6; --line-soft:#f0ebed;
  --text:#1b1217; --text-dim:#5d525a; --text-faint:#948891;
  --accent:#9c183c; --accent-2:#bb1e49; --accent-deep:#7a1230;
  --accent-ink:#ffffff; --accent-soft:rgba(156,24,60,.08); --accent-glow:rgba(156,24,60,.20);
  --link:#9c183c; --gold:#fcb400;
  --shadow:0 1px 3px rgba(60,12,28,.09),0 10px 28px rgba(60,12,28,.08);
  --shadow-sm:0 1px 2px rgba(60,12,28,.09);
  --header-bg:#fff;   /* printect uses a solid white bar (no frost) */
}
/* Printect header: solid white bar + the logo MARK beside the wordmark, with the same
   hover-spin as every other printect.net page (Store/static/app.css). Scoped to
   html[data-brand] because this page sets data-brand on <html>, not <body>. */
html[data-brand="printect"] header.printect{background:var(--header-bg);border-bottom:1px solid var(--line)}
html[data-brand="printect"] header.printect .brandmark a{
  color:var(--accent-deep);background:transparent;border-color:transparent;
  font-weight:800;letter-spacing:-.02em;font-size:27px;padding-left:4px;gap:11px}
html[data-brand="printect"] header.printect .brandmark a::before{display:none}
html[data-brand="printect"] header.printect .brandmark a:hover{
  color:var(--accent);background:var(--accent-soft);border-color:transparent}
/* Sizing is UNSCOPED so the mark is always constrained to the header (a brand-attribute
   mismatch or stale theme must never let the raw PNG render full-size). */
.brand-img{height:46px;width:auto;display:block;
  /* pivot on the mark's optical center (centroid sits ~1.6% low of canvas center) so the
     hover-spin rotates in place instead of orbiting -- same value Store uses */
  transform-origin:50% 51.6%;
  transition:transform .25s ease}
html[data-brand="printect"] header.printect .brandmark a:hover .brand-img{
  animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  html[data-brand="printect"] header.printect .brandmark a:hover .brand-img{animation:none}}

/* ============================================================================
   DARK MODE — managed per-account on the /account profile page (System/Light/Dark).
   Because every rule above consumes the CSS custom properties, a dark theme is just a
   re-definition of the token block. Two triggers, same tokens:
     • prefers-color-scheme: dark  — the SYSTEM default (no login, no JS needed), unless
       the user has explicitly chosen Light (data-theme="light" suppresses it);
     • html[data-theme="dark"]     — the explicit override the profile toggle sets.
   Brand tokens layer on top (this service sets data-brand on <html>). CSS can't share one
   declaration block between a media query and a plain selector, so the token sets are
   duplicated below — KEEP THE PAIRS IN SYNC.
   ========================================================================== */
/* --- naliwajka (burgundy) dark, SYSTEM default --- */
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-brand="printect"]){
    color-scheme:dark;
    --bg:#141317; --bg-soft:#1a1920;
    --surface:#1c1b21; --surface-2:#222129; --surface-3:#2a2832;
    --line:#312f3a; --line-soft:#272530;
    --text:#ececee; --text-dim:#b2aeb8; --text-faint:#827e8a;
    --accent:#e2647f; --accent-2:#d35172; --accent-deep:#b03e5e;
    --accent-ink:#ffffff; --accent-soft:rgba(226,100,127,.16); --accent-glow:rgba(226,100,127,.30);
    --link:#e2647f; --ok:#54b45a; --warn:#d69a2a; --danger:#e0655a;
    --shadow:0 1px 3px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.55);
    --header-bg:rgba(20,19,23,.85);
  }
  /* --- printect dark, SYSTEM default --- */
  html:not([data-theme="light"])[data-brand="printect"]{
    color-scheme:dark;
    --bg:#131015; --bg-soft:#18141a;
    --surface:#1b171e; --surface-2:#221d26; --surface-3:#2a2330;
    --line:#332a38; --line-soft:#2a222e;
    --text:#f0e9ee; --text-dim:#b9adb6; --text-faint:#8b7f89;
    --accent:#e56a89; --accent-2:#d8557a; --accent-deep:#bb4061;
    --accent-ink:#ffffff; --accent-soft:rgba(229,106,137,.16); --accent-glow:rgba(229,106,137,.30);
    --link:#e56a89; --gold:#fcb400;
    --shadow:0 1px 3px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.5);
    --shadow-sm:0 1px 2px rgba(0,0,0,.6);
    --header-bg:#1b171e;
  }
}
/* --- naliwajka (burgundy) dark, EXPLICIT override (keep in sync with the media copy) --- */
html[data-theme="dark"]:not([data-brand="printect"]){
  color-scheme:dark;
  --bg:#141317; --bg-soft:#1a1920;
  --surface:#1c1b21; --surface-2:#222129; --surface-3:#2a2832;
  --line:#312f3a; --line-soft:#272530;
  --text:#ececee; --text-dim:#b2aeb8; --text-faint:#827e8a;
  --accent:#e2647f; --accent-2:#d35172; --accent-deep:#b03e5e;
  --accent-ink:#ffffff; --accent-soft:rgba(226,100,127,.16); --accent-glow:rgba(226,100,127,.30);
  --link:#e2647f; --ok:#54b45a; --warn:#d69a2a; --danger:#e0655a;
  --shadow:0 1px 3px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.55);
  --header-bg:rgba(20,19,23,.85);
}
/* --- printect dark, EXPLICIT override --- */
html[data-theme="dark"][data-brand="printect"]{
  color-scheme:dark;
  --bg:#131015; --bg-soft:#18141a;
  --surface:#1b171e; --surface-2:#221d26; --surface-3:#2a2330;
  --line:#332a38; --line-soft:#2a222e;
  --text:#f0e9ee; --text-dim:#b9adb6; --text-faint:#8b7f89;
  --accent:#e56a89; --accent-2:#d8557a; --accent-deep:#bb4061;
  --accent-ink:#ffffff; --accent-soft:rgba(229,106,137,.16); --accent-glow:rgba(229,106,137,.30);
  --link:#e56a89; --gold:#fcb400;
  --shadow:0 1px 3px rgba(0,0,0,.6),0 10px 28px rgba(0,0,0,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.6);
  --header-bg:#1b171e;
}

/* ---- the Appearance control on the /account card ---- */
.acct-theme{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.acct-theme-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-faint);margin-bottom:9px}
.theme-seg{display:inline-flex;background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:3px;gap:3px}
.theme-opt{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;color:var(--text-dim);padding:6px 15px;border-radius:5px;
  transition:background .15s,color .15s,box-shadow .15s}
.theme-opt:hover{color:var(--text)}
.theme-opt[aria-pressed="true"]{background:var(--surface);color:var(--accent);
  box-shadow:var(--shadow-sm)}