/* ==========================================================================
   YourTrend — design system v3 "Aurora"
   One file shared by every surface: marketing site, /app cabinet, i.* webmail,
   /secure. Surface files (site.css, app.css, mail.css) only add layout.

   Idea: messages are light. Ivory paper + night ink, lit by a jewel aurora
   (emerald → sapphire → royal violet → rose) and finished with gold.
   Type: Unbounded (display) · Onest (text) · JetBrains Mono (code) — all with
   Cyrillic, so RU/UK headlines never fall back to a system face.
   Themes: light (default) / dark via :root[data-theme] + OS preference
   (localStorage.yt_theme = auto|light|dark, set before first paint).
   ========================================================================== */
:root{
  /* ---- jewel palette ---- */
  --emerald:#0fbf7f; --emerald-d:#078a5b; --emerald-l:#5ee6b0;
  --sapphire:#2e6bff; --sapphire-d:#1d4fd6; --sapphire-l:#8fb2ff;
  --violet:#6d4dff; --violet-d:#5132e0; --violet-l:#b3a2ff;
  --rose:#ff3d8b; --rose-d:#d61f6a; --rose-l:#ff9cc3;
  --gold:#f2b33d; --gold-d:#b87a12; --gold-l:#ffe2a1;
  --coral:#ff7a45; --cyan:#19c8e6;

  /* ---- gradients ---- */
  --aurora:linear-gradient(115deg,#0fbf7f 0%,#19c8e6 28%,#2e6bff 52%,#6d4dff 76%,#ff3d8b 100%);
  --aurora-soft:linear-gradient(115deg,rgba(15,191,127,.16),rgba(46,107,255,.14) 50%,rgba(255,61,139,.14));
  --grad-brand:linear-gradient(135deg,#0fbf7f 0%,#2e6bff 55%,#6d4dff 100%);
  --grad-gold:linear-gradient(135deg,#ffe7ad 0%,#f2b33d 45%,#c9861a 100%);
  --grad-rose:linear-gradient(135deg,#ff9a5a 0%,#ff3d8b 60%,#b23cff 100%);
  --grad-night:radial-gradient(120% 90% at 20% 0%,#23206b 0%,#0d0e2a 45%,#070814 100%);

  /* ---- surfaces & ink (light) ---- */
  --bg:#fbf8f3; --bg2:#f4efe7; --surface:#ffffff; --surface2:#faf7f2; --glass:rgba(255,255,255,.72);
  --ink:#0d0e24; --ink2:#34365a; --muted:#6a6c8c; --faint:#9a9cb6;
  --line:#e9e3d8; --line2:#ddd5c7; --line-strong:#c9bfae;
  --brand:var(--violet); --brand-ink:#ffffff; --link:var(--sapphire-d);
  --tint-emerald:#e3f8ef; --tint-sapphire:#e6eeff; --tint-violet:#eeeaff; --tint-rose:#ffe8f1; --tint-gold:#fff3d9;
  --ok:#0a9e66; --warn:#c97a07; --err:#e0294f; --info:var(--sapphire-d);

  /* ---- type ---- */
  --font-display:'Unbounded','Onest',system-ui,sans-serif;
  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px; --fs-3xl:clamp(34px,5vw,58px); --fs-hero:clamp(38px,6.4vw,84px);
  --lh-tight:1.12; --lh-base:1.6;

  /* ---- rhythm ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --control-h:46px; --control-r:14px;

  /* ---- depth ---- */
  --sh-1:0 1px 2px rgba(13,14,36,.05),0 2px 8px -2px rgba(13,14,36,.06);
  --sh-2:0 2px 4px rgba(13,14,36,.04),0 18px 40px -18px rgba(38,30,110,.22);
  --sh-3:0 30px 80px -30px rgba(38,30,110,.38),0 8px 20px -10px rgba(13,14,36,.12);
  --sh-glow:0 10px 40px -10px rgba(109,77,255,.55);
  --ring:0 0 0 3px rgba(109,77,255,.35);

  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#07081a; --bg2:#0c0d26; --surface:#11132e; --surface2:#161839; --glass:rgba(17,19,46,.72);
  --ink:#eef0ff; --ink2:#c3c6ea; --muted:#8c8fb8; --faint:#62658f;
  --line:#23264d; --line2:#2d315d; --line-strong:#3c4175;
  --link:var(--sapphire-l);
  --tint-emerald:rgba(15,191,127,.14); --tint-sapphire:rgba(46,107,255,.16); --tint-violet:rgba(109,77,255,.18); --tint-rose:rgba(255,61,139,.15); --tint-gold:rgba(242,179,61,.14);
  --ok:#34d399; --warn:#fbbf24; --err:#ff6b8b; --info:var(--sapphire-l);
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 20px 50px -24px rgba(0,0,0,.7); --sh-3:0 40px 90px -30px rgba(0,0,0,.8);
  --ring:0 0 0 3px rgba(143,178,255,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#07081a; --bg2:#0c0d26; --surface:#11132e; --surface2:#161839; --glass:rgba(17,19,46,.72);
    --ink:#eef0ff; --ink2:#c3c6ea; --muted:#8c8fb8; --faint:#62658f;
    --line:#23264d; --line2:#2d315d; --line-strong:#3c4175;
    --link:var(--sapphire-l);
    --tint-emerald:rgba(15,191,127,.14); --tint-sapphire:rgba(46,107,255,.16); --tint-violet:rgba(109,77,255,.18); --tint-rose:rgba(255,61,139,.15); --tint-gold:rgba(242,179,61,.14);
    --ok:#34d399; --warn:#fbbf24; --err:#ff6b8b; --info:var(--sapphire-l);
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 20px 50px -24px rgba(0,0,0,.7); --sh-3:0 40px 90px -30px rgba(0,0,0,.8);
    --ring:0 0 0 3px rgba(143,178,255,.45);
    color-scheme:dark;
  }
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);line-height:var(--lh-tight);letter-spacing:-.02em;margin:0 0 .5em;font-weight:600;text-wrap:balance}
h1{font-weight:700}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg,video,canvas{max-width:100%}
code,kbd,pre,samp{font-family:var(--font-mono);font-size:.92em}
code{background:var(--tint-violet);color:var(--ink);padding:.12em .42em;border-radius:6px}
pre{background:#0d0e24;color:#e6e8ff;padding:16px 18px;border-radius:var(--r-md);overflow:auto;line-height:1.55}
pre code{background:none;padding:0;color:inherit}
kbd{display:inline-flex;align-items:center;min-width:1.7em;height:1.7em;padding:0 .45em;border-radius:6px;border:1px solid var(--line2);border-bottom-width:2px;background:var(--surface);font-size:11px;color:var(--ink2)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0}
::selection{background:rgba(109,77,255,.22);color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line-strong);background-clip:padding-box}

/* ---------------- text helpers ---------------- */
.muted,.mut{color:var(--muted)}
.faint{color:var(--faint)}
.t-aurora,.grad-txt{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.t-gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mono{font-family:var(--font-mono)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  padding:7px 14px 7px 8px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.eyebrow .dot,.eyebrow i{width:18px;height:18px;border-radius:50%;background:var(--aurora);box-shadow:0 0 0 3px var(--tint-violet);flex:none}

/* ---------------- buttons ---------------- */
.btn{--bh:var(--control-h);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--bh);min-width:var(--bh);padding:0 20px;
  border-radius:var(--control-r);border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 var(--fs-sm)/1 var(--font);letter-spacing:.005em;
  cursor:pointer;text-decoration:none!important;white-space:nowrap;user-select:none;isolation:isolate;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s,border-color .2s,color .2s}
.btn:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.btn .ic{display:inline-flex}
.btn.primary{border:0;color:#fff;background:#0d0e24;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 30px -12px rgba(46,28,160,.6)}
.btn.primary::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad-brand);z-index:-1;transition:opacity .3s}
.btn.primary::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--aurora);z-index:-2;filter:blur(14px);opacity:0;transition:opacity .35s}
.btn.primary:hover::after{opacity:.55}
.btn.gold{border:0;color:#2a1a00;background:var(--grad-gold);box-shadow:0 12px 30px -12px rgba(184,122,18,.6)}
.btn.ghost{background:transparent;border-color:var(--line2)}
.btn.ghost:hover{background:var(--surface)}
.btn.quiet{background:transparent;border-color:transparent;box-shadow:none}
.btn.quiet:hover{background:var(--tint-violet);transform:none;box-shadow:none}
.btn.danger{color:#fff;border:0;background:linear-gradient(135deg,#ff5577,#e0294f)}
.btn.warn{color:#3a2400;border:0;background:linear-gradient(135deg,#ffd27a,#f2a23d)}
.btn.ok{color:#fff;border:0;background:linear-gradient(135deg,#27d99a,#0a9e66)}
.btn.lg{--bh:56px;padding:0 28px;font-size:var(--fs-base);border-radius:18px}
.btn.sm{--bh:38px;padding:0 14px;font-size:13px;border-radius:12px}
.btn.xs{--bh:30px;padding:0 10px;font-size:12px;border-radius:9px;gap:6px}
.btn.xs svg{width:14px;height:14px}
.btn.icon{padding:0;width:var(--bh)}
.btn.block{display:flex;width:100%}
.btn .arr{transition:transform .3s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn.is-busy{color:transparent!important;pointer-events:none}
.btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;border:2px solid currentColor;border-color:#fff #fff transparent transparent;animation:yt-spin .7s linear infinite;opacity:1;filter:none;z-index:2;background:none;inset:auto}
@keyframes yt-spin{to{transform:rotate(360deg)}}

/* ---------------- fields ---------------- */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])),:where(select),:where(textarea){
  width:100%;min-height:var(--control-h);padding:0 14px;border-radius:var(--control-r);border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  font:500 var(--fs-base)/1.3 var(--font);transition:border-color .2s,box-shadow .2s,background-color .2s;outline:none}
:where(textarea){padding:12px 14px;min-height:110px;line-height:1.55;resize:vertical}
:where(select){appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236a6c8c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
input:hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--violet);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{accent-color:var(--violet);width:17px;height:17px;vertical-align:middle}
input[type=range]{accent-color:var(--violet)}
label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 6px}
fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}

/* ---------------- surfaces ---------------- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1)}
.card.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.card.lift{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.card.lift:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.card.err{border-color:color-mix(in srgb,var(--err) 40%,var(--line));background:color-mix(in srgb,var(--err) 7%,var(--surface));color:var(--err)}
.card.aurora-edge{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--aurora) border-box}
.night .eyebrow,.band .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#dfe1ff}
.night{background:var(--grad-night);color:#eef0ff;--ink:#eef0ff;--ink2:#c3c6ea;--muted:#9a9dc8;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.16);--surface:rgba(255,255,255,.06);--glass:rgba(16,18,48,.55)}

/* ---------------- chips, pills, badges ---------------- */
.pill,.chip,.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--bg2);color:var(--ink2);border:1px solid var(--line)}
.pill.ok,.badge.ok,.pill.success,.pill.sent,.pill.delivered,.pill.verified,.pill.active{background:var(--tint-emerald);color:var(--ok);border-color:transparent}
.pill.warn,.badge.warn,.pill.pending,.pill.queued,.pill.scheduled,.pill.draft{background:var(--tint-gold);color:var(--warn);border-color:transparent}
.pill.err,.badge.err,.pill.failed,.pill.bounced,.pill.complained,.pill.error{background:var(--tint-rose);color:var(--err);border-color:transparent}
.pill.info,.pill.opened,.pill.clicked,.pill.sending{background:var(--tint-sapphire);color:var(--info);border-color:transparent}
.pill.violet{background:var(--tint-violet);color:var(--violet)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill.nodot::before{display:none}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
th{text-align:left;font:600 11.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface2)}
th:first-child{border-top-left-radius:var(--r-sm)} th:last-child{border-top-right-radius:var(--r-sm)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
tr:last-child td{border-bottom:0}
tbody tr,table tr{transition:background-color .15s}
tr:hover td{background:color-mix(in srgb,var(--violet) 4%,transparent)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}

/* ---------------- tabs / segmented ---------------- */
.seg,.tabs2,.langseg{display:inline-flex;padding:4px;gap:2px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.seg button,.tabs2 button,.langseg button{height:34px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:600 13px/1 var(--font);cursor:pointer;transition:all .2s}
.seg button:hover,.tabs2 button:hover,.langseg button:hover{color:var(--ink)}
.seg button.on,.tabs2 button.on,.langseg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* ---------------- progress / meters ---------------- */
.meter{height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:inherit;background:var(--grad-brand);transition:width .8s var(--ease-out)}
.meter.hot>i{background:var(--grad-rose)}

/* ---------------- skeleton ---------------- */
.sk{height:12px;border-radius:8px;background:linear-gradient(90deg,var(--bg2) 0%,color-mix(in srgb,var(--bg2) 40%,var(--surface)) 50%,var(--bg2) 100%);background-size:200% 100%;animation:yt-shimmer 1.4s ease-in-out infinite}
@keyframes yt-shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* ---------------- toast ---------------- */
.yt-toasts,#toast{position:fixed;z-index:1000;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast-item{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:12px 16px 12px 12px;border-radius:16px;
  background:#0d0e24;color:#eef0ff;box-shadow:var(--sh-3);font-size:14px;animation:yt-toast-in .45s var(--ease-spring)}
.toast-item::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--aurora)}
.toast-item.t-success::before{background:#34d399;box-shadow:0 0 12px #34d399}
.toast-item.t-error::before{background:#ff5577;box-shadow:0 0 12px #ff5577}
.toast-item.t-warn::before{background:#fbbf24;box-shadow:0 0 12px #fbbf24}
@keyframes yt-toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(7,8,26,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.show,.modal.open{display:flex;animation:yt-fade .25s ease}
.modal .box{width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-3);animation:yt-pop .4s var(--ease-spring)}
@keyframes yt-fade{from{opacity:0}to{opacity:1}}
@keyframes yt-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* ---------------- Ping (character) host ---------------- */
yt-ping{display:inline-block;position:relative;line-height:0;vertical-align:middle}
yt-ping svg{width:100%;height:100%;overflow:visible;display:block}
.ping-bubble{position:absolute;z-index:3;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:max-content;max-width:260px;padding:10px 14px;border-radius:16px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh-2);font:500 13.5px/1.45 var(--font);text-align:left;pointer-events:none}
.ping-bubble::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:inherit;border:inherit;border-top:0;border-left:0;transform:translate(-50%,-6px) rotate(45deg)}

/* ---------------- icons ---------------- */
.ic svg,svg.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- motion safety ---------------- */
/* Ambient brand motion (Ping idle, aurora drift, 3D) keeps running under reduced motion at a
   calmer pace — only large scroll-driven transforms are removed (see motion.js). */
@media (prefers-reduced-motion:reduce){
  .btn,.card.lift{transition:none}
}