/* ════════════════════════════════════════════════════════════════════
   TempoMailUSA — DS USER AREA (auth + user dashboard)
   Built on the approved pastel-glass design system tokens (ds-v5.css).
   Light = approved preview (userdash-v2). Dark = homepage navy standard.
   All selectors are u- prefixed; nothing here restyles shared DS files.
   ════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --u-ink:#0c1222; --u-muted:#5b6478; --u-faint:#8a93a8;
  --u-glass:rgba(255,255,255,.78); --u-glass-soft:rgba(255,255,255,.55);
  --u-brd:rgba(255,255,255,.92); --u-line:rgba(12,18,34,.08);
  --u-shadow:0 22px 44px -18px rgba(76,64,180,.20), 0 4px 14px rgba(20,24,60,.05);
  --u-shadow-sm:0 12px 30px -16px rgba(76,64,180,.16);
  --u-dark:#0b0f19; --u-dark-2:#1a2138;
  --u-indigo:#4f46e5; --u-indigo-d:#4338ca;
  --u-mint-bg:#d7f6e6; --u-mint-tx:#067647;
  --u-lav-bg:#e6e2ff;  --u-lav-tx:#4338ca;
  --u-sky-bg:#dcf0ff;  --u-sky-tx:#075e9e;
  --u-peach-bg:#ffe8cf;--u-peach-tx:#9a4a00;
  --u-rose-bg:#ffe0ec; --u-rose-tx:#b4235f;
  --u-amber-bg:#fdf0d5;--u-amber-tx:#92600a;
  --u-grey-bg:#eef1f6; --u-grey-tx:#5b6478;
  --u-danger:#dc2626; --u-danger-bg:#fee2e2;
  --u-hover:rgba(79,70,229,.08);
  --u-field:rgba(255,255,255,.94); --u-field-brd:rgba(12,18,34,.12);
  --u-ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  color-scheme:dark;
  --u-ink:#e8edf7; --u-muted:#a7b1c5; --u-faint:#7c8aa0;
  --u-glass:rgba(17,24,40,.88); --u-glass-soft:rgba(21,29,48,.72);
  --u-brd:rgba(255,255,255,.10); --u-line:rgba(255,255,255,.09);
  --u-shadow:0 22px 44px -18px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.3);
  --u-shadow-sm:0 12px 30px -16px rgba(0,0,0,.5);
  --u-mint-bg:rgba(16,185,129,.16); --u-mint-tx:#6ee7b7;
  --u-lav-bg:rgba(129,140,248,.18);  --u-lav-tx:#c7d2fe;
  --u-sky-bg:rgba(56,189,248,.15);  --u-sky-tx:#7dd3fc;
  --u-peach-bg:rgba(245,158,11,.16);--u-peach-tx:#fcd34d;
  --u-rose-bg:rgba(244,63,94,.15);  --u-rose-tx:#fda4af;
  --u-amber-bg:rgba(245,158,11,.16);--u-amber-tx:#fcd34d;
  --u-grey-bg:rgba(148,163,184,.15);--u-grey-tx:#cbd5e1;
  --u-danger:#f87171; --u-danger-bg:rgba(239,68,68,.15);
  --u-hover:rgba(129,140,248,.14);
  --u-field:rgba(13,19,34,.92); --u-field-brd:rgba(255,255,255,.14);
}

/* ── Page ground ─────────────────────────────────────────────────── */
body.u-scope{
  color:var(--u-ink);
  background:
    radial-gradient(900px 500px at 8% -5%, rgba(167,243,208,.7), transparent 60%),
    radial-gradient(900px 560px at 95% 0%, rgba(221,214,255,.8), transparent 60%),
    radial-gradient(1000px 700px at 50% 115%, rgba(255,222,189,.75), transparent 60%),
    linear-gradient(165deg,#e9fbf2 0%, #eef0ff 46%, #fff3e3 100%);
  background-attachment:fixed; min-height:100vh;
}
[data-theme="dark"] body.u-scope{
  background:
    radial-gradient(900px 520px at 6% -5%, rgba(52,211,153,.08), transparent 60%),
    radial-gradient(900px 560px at 96% 0%, rgba(99,102,241,.12), transparent 60%),
    radial-gradient(1000px 700px at 50% 115%, rgba(245,158,11,.05), transparent 60%),
    linear-gradient(170deg,#0b1020 0%, #070b14 100%);
  background-attachment:fixed;
}
/* Dark-mode form rule: explicit control colours, always */
.u-scope input,.u-scope select,.u-scope textarea{
  color:var(--u-ink); -webkit-text-fill-color:var(--u-ink); caret-color:var(--u-ink);
}
.u-scope ::placeholder{ color:var(--u-faint); -webkit-text-fill-color:var(--u-faint); opacity:1; }

/* ── Shell ───────────────────────────────────────────────────────── */
.u-shell{ display:flex; min-height:100vh; width:100%; }
.u-sidewrap{ flex:none; }
.u-side{
  position:sticky; top:0; height:100vh; width:280px; padding:12px;
  display:flex; flex-direction:column;
}
.u-side-panel{
  background:var(--u-glass); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--u-brd); box-shadow:var(--u-shadow); border-radius:30px;
  height:100%; display:flex; flex-direction:column; padding:16px 14px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}
.u-side-head{ display:flex; align-items:center; gap:10px; padding:2px 8px 6px; text-decoration:none; color:var(--u-ink); }
.u-side-logo{ width:40px; height:40px; border-radius:14px; background:var(--u-dark); display:flex; align-items:center; justify-content:center; flex:none; overflow:hidden; }
.u-side-logo img{ max-width:100%; max-height:100%; }
.u-side-brand{ font-size:17px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.u-side-brand small{ display:block; font-size:11px; font-weight:600; color:var(--u-muted); letter-spacing:0; }
.u-side-label{ font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--u-faint); padding:0 .9rem; margin:1.35rem 0 .45rem; }
.u-side-nav{ display:flex; flex-direction:column; gap:2px; }
.u-side-link{
  display:flex; align-items:center; gap:.7rem; min-height:44px; padding:.55rem .9rem;
  border-radius:16px; font-weight:600; font-size:.925rem; color:var(--u-ink);
  text-decoration:none; position:relative; transition:background .16s ease, color .16s ease, transform .16s var(--u-ease);
}
.u-side-link i{ width:20px; text-align:center; font-size:16px; color:var(--u-muted); flex:none; transition:color .16s ease; }
.u-side-link:hover{ background:var(--u-hover); color:var(--u-ink); }
.u-side-link:hover i{ color:var(--u-indigo); }
[data-theme="dark"] .u-side-link:hover i{ color:#a5b4fc; }
.u-side-link.on{ background:var(--u-dark); color:#fff; box-shadow:0 12px 22px -10px rgba(11,15,25,.5); }
.u-side-link.on i{ color:#a5b4fc; }
.u-side-link .cnt{ margin-left:auto; font-size:.72rem; font-weight:800; background:var(--u-lav-bg); color:var(--u-lav-tx); border-radius:999px; padding:.12rem .55rem; flex:none; }
.u-side-link.on .cnt{ background:rgba(255,255,255,.18); color:#fff; }
.u-side-link .cnt.rose{ background:var(--u-rose-bg); color:var(--u-rose-tx); }
.u-live-dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; display:inline-block; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:uLivePulse 2s infinite; }
@keyframes uLivePulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)} 70%{box-shadow:0 0 0 6px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }
.u-side-foot{ margin-top:auto; padding-top:22px; }
.u-plan-mini{ border-radius:24px; padding:16px; color:#fff; background:linear-gradient(140deg,#0b0f19,#312e81); box-shadow:0 18px 36px -16px rgba(49,46,129,.55); }
.u-plan-mini .bar{ background:rgba(255,255,255,.18); }
.u-userrow{ display:flex; align-items:center; gap:11px; padding:14px 8px 2px; }
.u-avatar{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:800; background:linear-gradient(135deg,#6366f1,#a855f7); object-fit:cover; }
.u-backdrop{ display:none; }
.u-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.u-topbar-wrap{ position:sticky; top:0; z-index:60; padding:12px 20px 0; }
.u-topbar{
  background:var(--u-glass); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--u-brd); box-shadow:var(--u-shadow-sm); border-radius:24px;
  padding:10px 14px; display:flex; align-items:center; gap:12px;
}
.u-topbar-title{ font-size:19px; font-weight:800; letter-spacing:-.01em; margin:0; }
.u-content{ flex:1; width:100%; padding:24px 20px 8px; }
.u-foot{ padding:18px 20px 26px; color:var(--u-muted); font-size:13px; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; }
.u-foot a{ color:var(--u-indigo); font-weight:600; text-decoration:none; }
[data-theme="dark"] .u-foot a{ color:#a5b4fc; }
.u-foot .fa-heart{ color:#ef4444; }

/* Mobile sidebar (preserved JS toggles .open on #dashboard-sidebar, .show on backdrop) */
@media (max-width:1199.98px){
  #dashboard-sidebar.u-side{
    position:fixed; top:0; left:0; z-index:200; height:100dvh;
    transform:translateX(-106%); visibility:hidden;
    transition:transform .38s var(--u-ease), visibility 0s linear .38s;
  }
  #dashboard-sidebar.u-side.open{ transform:none; visibility:visible; transition:transform .38s var(--u-ease); }
  .u-backdrop{ display:block; position:fixed; inset:0; z-index:190; background:rgba(10,13,25,.45); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .u-backdrop.show{ opacity:1; pointer-events:auto; }
  .u-topbar-wrap{ padding:10px 12px 0; } .u-content{ padding:18px 12px 8px; }
}

/* ── Buttons: colour kept in EVERY state (owner law) ─────────────── */
.u-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.6rem 1.25rem; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.9rem; line-height:1.2; cursor:pointer; white-space:nowrap;
  text-decoration:none; transition:background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.u-btn:active{ transform:scale(.97); }
.u-btn:focus-visible{ outline:3px solid rgba(99,102,241,.45); outline-offset:2px; }
.u-btn-dark{ background:var(--u-dark); color:#fff; box-shadow:0 12px 24px -10px rgba(11,15,25,.5); }
.u-btn-dark:hover{ background:var(--u-dark-2); color:#fff; }
.u-btn-dark:active{ background:#05070d; color:#fff; }
.u-btn-ghost{ background:rgba(255,255,255,.85); color:var(--u-ink); border-color:var(--u-line); }
.u-btn-ghost:hover{ background:#fff; color:var(--u-ink); }
.u-btn-ghost:active{ background:#eef1f6; color:var(--u-ink); }
[data-theme="dark"] .u-btn-ghost{ background:rgba(255,255,255,.06); color:var(--u-ink); border-color:var(--u-line); }
[data-theme="dark"] .u-btn-ghost:hover{ background:rgba(255,255,255,.12); color:var(--u-ink); }
[data-theme="dark"] .u-btn-ghost:active{ background:rgba(255,255,255,.04); color:var(--u-ink); }
.u-btn-indigo{ background:var(--u-indigo); color:#fff; box-shadow:0 12px 24px -12px rgba(79,70,229,.65); }
.u-btn-indigo:hover{ background:var(--u-indigo-d); color:#fff; }
.u-btn-indigo:active{ background:#3730a3; color:#fff; }
.u-btn-danger{ background:var(--u-danger-bg); color:var(--u-danger); border-color:transparent; }
.u-btn-danger:hover{ background:#fecaca; color:#b91c1c; }
[data-theme="dark"] .u-btn-danger:hover{ background:rgba(239,68,68,.25); color:#fca5a5; }
.u-btn-white{ background:#fff; color:#0b0f19; }
.u-btn-white:hover{ background:#eef1ff; color:#0b0f19; }
.u-btn-white:active{ background:#dde3f5; color:#0b0f19; }
.u-btn-sm{ min-height:40px; padding:.45rem 1rem; font-size:.85rem; }
.u-btn[disabled], .u-btn.disabled{ opacity:.55; pointer-events:none; }
.u-icobtn{
  width:40px; height:40px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); border:1px solid var(--u-line); color:var(--u-ink); cursor:pointer;
  transition:background .15s ease, transform .15s var(--u-ease); text-decoration:none; flex:none;
}
.u-icobtn:hover{ background:#fff; transform:translateY(-1px); color:var(--u-ink); }
.u-icobtn:active{ transform:scale(.95); }
[data-theme="dark"] .u-icobtn{ background:rgba(255,255,255,.06); color:var(--u-ink); }
[data-theme="dark"] .u-icobtn:hover{ background:rgba(255,255,255,.12); color:var(--u-ink); }
.u-icobtn.danger{ color:var(--u-danger); }
@media (pointer:coarse){ .u-icobtn{ width:44px; height:44px; } }

/* ── Chips / badges ──────────────────────────────────────────────── */
.u-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; line-height:1.25; }
.u-chip-mint{ background:var(--u-mint-bg); color:var(--u-mint-tx); }
.u-chip-lav{ background:var(--u-lav-bg); color:var(--u-lav-tx); }
.u-chip-sky{ background:var(--u-sky-bg); color:var(--u-sky-tx); }
.u-chip-peach{ background:var(--u-peach-bg); color:var(--u-peach-tx); }
.u-chip-rose{ background:var(--u-rose-bg); color:var(--u-rose-tx); }
.u-chip-amber{ background:var(--u-amber-bg); color:var(--u-amber-tx); }
.u-chip-dark{ background:var(--u-ink); color:var(--u-bg); }
.u-chip-grey{ background:var(--u-grey-bg); color:var(--u-grey-tx); }
.u-chip-dark{ background:var(--u-dark); color:#fff; }
.u-chip .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* ── Cards ───────────────────────────────────────────────────────── */
.u-card{
  background:var(--u-glass); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--u-brd); box-shadow:var(--u-shadow); border-radius:24px;
}
.u-card-p{ padding:22px; }
.u-card-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px 14px; }
.u-card-title{ font-size:17px; font-weight:800; margin:0; letter-spacing:-.01em; }
.u-card-sub{ font-size:13px; color:var(--u-muted); margin:2px 0 0; }
.u-darkcard{ border-radius:24px; padding:24px; color:#fff; background:linear-gradient(150deg,#0b0f19,#312e81); box-shadow:0 22px 44px -18px rgba(49,46,129,.5); border:1px solid rgba(255,255,255,.08); }
.u-darkcard-gold{ background:linear-gradient(150deg,#171106,#3b2f63 55%,#1d1440); border-color:rgba(232,181,76,.45); box-shadow:0 22px 44px -18px rgba(59,47,99,.55), 0 0 0 1px rgba(232,181,76,.12), 0 14px 34px -14px rgba(232,181,76,.30); }
.u-darkcard .u-muted{ color:#b9c2d8; }

/* ── Page head / back ────────────────────────────────────────────── */
.u-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:20px; }
.u-head h1{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.15; }
.u-head p{ margin:4px 0 0; color:var(--u-muted); font-size:14.5px; }
.u-head-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.u-back{
  display:inline-flex; align-items:center; gap:.45rem; min-height:40px; padding:.45rem 1rem .45rem .8rem;
  border-radius:999px; background:rgba(255,255,255,.85); border:1px solid var(--u-line); color:var(--u-ink);
  font-weight:700; font-size:.85rem; text-decoration:none; transition:background .15s ease, transform .12s ease; margin-bottom:14px;
}
.u-back:hover{ background:#fff; color:var(--u-ink); }
.u-back:active{ transform:scale(.97); }
[data-theme="dark"] .u-back{ background:rgba(255,255,255,.06); color:var(--u-ink); }
[data-theme="dark"] .u-back:hover{ background:rgba(255,255,255,.12); color:var(--u-ink); }

/* ── Stats ───────────────────────────────────────────────────────── */
.u-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:1100px){ .u-stats{ grid-template-columns:repeat(4,1fr); } }
.u-stat{ padding:18px; display:flex; flex-direction:column; gap:10px; }
.u-stat-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.u-stat-ic{ width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:19px; flex:none; }
.u-stat-num{ font-size:28px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.u-stat-lbl{ font-size:13.5px; font-weight:600; color:var(--u-muted); }
.t-mint{ background:var(--u-mint-bg); color:var(--u-mint-tx); }
.t-lav{ background:var(--u-lav-bg); color:var(--u-lav-tx); }
.t-sky{ background:var(--u-sky-bg); color:var(--u-sky-tx); }
.t-peach{ background:var(--u-peach-bg); color:var(--u-peach-tx); }
.t-rose{ background:var(--u-rose-bg); color:var(--u-rose-tx); }
.t-amber{ background:var(--u-amber-bg); color:var(--u-amber-tx); }

/* ── Tables + pagination ─────────────────────────────────────────── */
.u-tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.u-tbl{ width:100%; border-collapse:collapse; min-width:560px; }
.u-tbl th{ text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--u-faint); font-weight:800; padding:.8rem 1.1rem; border-top:1px solid var(--u-line); border-bottom:1px solid var(--u-line); background:rgba(255,255,255,.35); }
[data-theme="dark"] .u-tbl th{ background:rgba(255,255,255,.03); }
.u-tbl td{ padding:.95rem 1.1rem; font-size:.9rem; vertical-align:middle; border-bottom:1px solid var(--u-line); }
.u-tbl tbody tr:last-child td{ border-bottom:0; }
.u-tbl tbody tr{ transition:background .14s ease; }
.u-tbl tbody tr:hover{ background:var(--u-hover); }
.u-tbl .r{ text-align:right; }
.u-pager{ display:flex; justify-content:center; padding:16px 10px 6px; }
.u-pager .pagination{ display:flex; gap:6px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.u-pager .page-link{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:.4rem .7rem;
  border-radius:13px; background:rgba(255,255,255,.85); border:1px solid var(--u-line); color:var(--u-ink);
  font-weight:700; font-size:.85rem; text-decoration:none;
}
.u-pager .page-item.active .page-link{ background:var(--u-dark); color:#fff; border-color:transparent; }
.u-pager .page-item.disabled .page-link{ opacity:.45; pointer-events:none; }
[data-theme="dark"] .u-pager .page-link{ background:rgba(255,255,255,.06); color:var(--u-ink); }

/* ── Forms ───────────────────────────────────────────────────────── */
.u-field{ margin-bottom:16px; }
.u-label{ display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--u-ink); }
.u-input,.u-select,.u-textarea{
  width:100%; min-height:48px; padding:.65rem 1.05rem; border-radius:16px;
  background:var(--u-field); border:1px solid var(--u-field-brd); color:var(--u-ink);
  font-size:.925rem; font-weight:500; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.u-textarea{ min-height:110px; resize:vertical; }
.u-input:focus,.u-select:focus,.u-textarea:focus{ border-color:#a5b4fc; box-shadow:0 0 0 4px rgba(99,102,241,.16); }
.u-input[readonly]{ background:var(--u-glass-soft); }
.u-help{ font-size:12.5px; color:var(--u-muted); margin-top:6px; }
.u-err{ font-size:12.5px; color:var(--u-danger); margin-top:6px; font-weight:600; }
.u-input.is-invalid{ border-color:#f87171; }
.u-inputwrap{ position:relative; }
.u-inputwrap .u-input{ padding-left:44px; }
.u-inputwrap .u-ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--u-faint); font-size:15px; pointer-events:none; }
.u-checkrow{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 2px; border-bottom:1px solid var(--u-line); }
.u-checkrow:last-child{ border-bottom:0; }
.u-checkrow .t{ font-weight:600; font-size:.925rem; }
.u-checkrow .d{ font-size:12.5px; color:var(--u-muted); }
.u-switch{ position:relative; width:50px; height:28px; flex:none; display:inline-block; }
.u-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.u-switch .tr{ position:absolute; inset:0; border-radius:999px; background:rgba(12,18,34,.16); transition:background .18s ease; pointer-events:none; }
.u-switch .tr::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .18s var(--u-ease); }
.u-switch input:checked + .tr{ background:var(--u-indigo); }
.u-switch input:checked + .tr::after{ transform:translateX(22px); }
.u-switch input:focus-visible + .tr{ outline:3px solid rgba(99,102,241,.45); outline-offset:2px; }
[data-theme="dark"] .u-switch .tr{ background:rgba(255,255,255,.18); }
.u-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; word-break:break-all;
  background:var(--u-glass-soft); border:1px dashed var(--u-field-brd); border-radius:14px; padding:.7rem 1rem;
}
.u-kv{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--u-line); font-size:.925rem; }
.u-kv:last-child{ border-bottom:0; }
.u-kv .k{ color:var(--u-muted); font-weight:500; }
.u-kv .v{ font-weight:700; text-align:right; }
.u-bar{ height:9px; border-radius:99px; background:rgba(12,18,34,.09); overflow:hidden; }
.u-bar > span{ display:block; height:100%; border-radius:99px; }
[data-theme="dark"] .u-bar{ background:rgba(255,255,255,.14); }

/* ── Alerts / empty / skeleton (four widget states) ──────────────── */
.u-alert{ display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:16px; font-size:13.5px; font-weight:600; border:1px solid transparent; margin-bottom:16px; }
.u-alert i{ font-size:17px; margin-top:1px; flex:none; }
.u-alert-success{ background:var(--u-mint-bg); color:var(--u-mint-tx); }
.u-alert-danger{ background:var(--u-rose-bg); color:var(--u-rose-tx); }
.u-alert-info{ background:var(--u-sky-bg); color:var(--u-sky-tx); }
.u-alert-warning{ background:var(--u-amber-bg); color:var(--u-amber-tx); }
.u-alert a{ color:inherit; font-weight:800; }
.u-empty{ text-align:center; padding:38px 22px; }
.u-empty .ic{ width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--u-glass-soft); border:1.5px dashed var(--u-field-brd); color:var(--u-faint); }
.u-empty h3{ font-size:17px; font-weight:800; margin:0 0 6px; }
.u-empty p{ color:var(--u-muted); font-size:13.5px; margin:0 auto 16px; max-width:420px; }
.u-skel{ border-radius:14px; background:linear-gradient(100deg, rgba(148,163,184,.14) 40%, rgba(148,163,184,.26) 50%, rgba(148,163,184,.14) 60%); background-size:200% 100%; animation:uShimmer 1.3s infinite linear; }
@keyframes uShimmer{ to{ background-position:-200% 0; } }
.u-spin{ width:34px; height:34px; border-radius:50%; border:3.5px solid var(--u-line); border-top-color:var(--u-indigo); animation:uSpin .7s linear infinite; margin:26px auto; }
@keyframes uSpin{ to{ transform:rotate(360deg); } }

/* ── Tabs (plans) ────────────────────────────────────────────────── */
.u-tabs{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--u-glass-soft); border:1px solid var(--u-brd); flex-wrap:wrap; }
.u-tab{ min-height:40px; padding:.45rem 1.15rem; border-radius:999px; border:0; background:transparent; color:var(--u-muted); font-weight:700; font-size:.88rem; cursor:pointer; transition:background .18s ease,color .18s ease; }
.u-tab:hover{ color:var(--u-ink); }
.u-tab.on{ background:var(--u-dark); color:#fff; box-shadow:0 8px 18px -8px rgba(11,15,25,.5); }

/* ── Lists / quick actions / messages ────────────────────────────── */
.u-quick{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:18px; background:var(--u-glass-soft); border:1px solid var(--u-brd); text-decoration:none; color:var(--u-ink); transition:background .15s ease, transform .15s var(--u-ease); min-height:72px; }
.u-quick:hover{ background:var(--u-glass); color:var(--u-ink); transform:translateY(-2px); }
.u-quick .qi{ width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.u-quick .qt{ font-weight:700; font-size:.9rem; line-height:1.25; }
.u-quick .qd{ font-size:12.5px; color:var(--u-muted); }
.u-quick .qa{ margin-left:auto; color:var(--u-faint); flex:none; }
.u-msgrow{ display:flex; gap:12px; padding:13px 14px; border-radius:18px; background:var(--u-glass-soft); border:1px solid var(--u-brd); text-decoration:none; color:var(--u-ink); transition:background .15s ease; }
.u-msgrow:hover{ background:var(--u-glass); color:var(--u-ink); }
.u-msgrow .who{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800; }

/* ── Bootstrap surfaces inside the user scope (near-opaque law) ──── */
.u-scope .dropdown-menu{
  background:rgba(255,255,255,.98); border:1px solid rgba(15,23,42,.10); border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(15,23,42,.25), 0 4px 16px -6px rgba(15,23,42,.10); padding:8px;
}
[data-theme="dark"] .u-scope .dropdown-menu{ background:rgba(17,24,40,.98); border-color:rgba(255,255,255,.12); }
.u-scope .dropdown-item{ border-radius:11px; padding:.55rem .8rem; font-weight:600; font-size:.9rem; color:var(--u-ink); min-height:40px; display:flex; align-items:center; gap:.5rem; }
.u-scope .dropdown-item:hover,.u-scope .dropdown-item:focus{ background:var(--u-hover); color:var(--u-ink); }
.u-scope .modal-content{
  background:rgba(255,255,255,.98); border:1px solid rgba(255,255,255,.95); border-radius:24px; color:var(--u-ink);
  box-shadow:0 30px 70px -20px rgba(15,23,42,.35);
}
[data-theme="dark"] .u-scope .modal-content{ background:rgba(17,24,40,.98); border-color:rgba(255,255,255,.12); }
.u-scope .modal-header{ border-bottom:1px solid var(--u-line); padding:18px 22px; }
.u-scope .modal-title{ font-weight:800; font-size:17px; }
.u-scope .modal-body{ padding:20px 22px; }
.u-scope .modal-footer{ border-top:1px solid var(--u-line); padding:14px 22px; }
.u-scope .btn-close{ filter:none; }
[data-theme="dark"] .u-scope .btn-close{ filter:invert(1); }

/* ── AJAX in-panel navigation ────────────────────────────────────── */
#u-ajaxbar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:3000; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#6366f1,#a855f7); opacity:0; transition:width .3s ease, opacity .25s ease; }
#u-ajaxbar.run{ opacity:1; }
.u-fadein{ animation:uFadeIn .28s ease both; }
@keyframes uFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ── AUTH: 2-column split (no marketing header/footer) ───────────── */
.u-auth{ display:grid; grid-template-columns:1fr; min-height:100vh; }
@media (min-width:1024px){ .u-auth{ grid-template-columns:minmax(420px,46%) 1fr; } }
.u-auth-brand{
  display:none; position:relative; overflow:hidden; color:#fff; padding:44px 48px;
  background:linear-gradient(160deg,#0b0f19 0%, #1e1b4b 58%, #312e81 100%);
  flex-direction:column;
}
@media (min-width:1024px){ .u-auth-brand{ display:flex; } }
.u-auth-brand::before{ content:""; position:absolute; width:560px; height:560px; border-radius:50%; right:-180px; top:-160px;
  background:radial-gradient(circle, rgba(99,102,241,.35), transparent 65%); }
.u-auth-brand::after{ content:""; position:absolute; width:480px; height:480px; border-radius:50%; left:-160px; bottom:-200px;
  background:radial-gradient(circle, rgba(52,211,153,.22), transparent 65%); }
.u-auth-brand > *{ position:relative; z-index:1; }
.u-auth-logo{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:19px; font-weight:800; }
.u-auth-logo img{ height:38px; width:auto; }
.u-auth-h{ font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0 0 12px; }
.u-auth-h .grad{ background:linear-gradient(90deg,#a5b4fc,#6ee7b7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.u-auth-sub{ color:#b9c2d8; font-size:15px; line-height:1.65; max-width:440px; }
.u-auth-feats{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.u-auth-feat{ display:flex; gap:12px; align-items:flex-start; font-size:14px; font-weight:600; }
.u-auth-feat .fi{ width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; color:#a5b4fc; }
.u-auth-feat small{ display:block; color:#8b96b3; font-weight:500; font-size:12.5px; margin-top:1px; }
.u-auth-stats{ margin-top:auto; display:flex; gap:26px; padding-top:34px; }
.u-auth-stats b{ display:block; font-size:21px; font-weight:800; }
.u-auth-stats span{ font-size:12px; color:#8b96b3; font-weight:600; }
.u-auth-form{
  display:flex; align-items:flex-start; justify-content:center; padding:34px 18px 44px; overflow-y:auto;
}
@media (min-width:1024px){ .u-auth-form{ align-items:center; padding:44px 30px; } }
.u-auth-form .tmu-auth-card{ width:100%; max-width:460px; }
.u-auth-mobilebrand{ display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:18px; color:var(--u-ink); text-decoration:none; font-weight:800; font-size:18px; }
.u-auth-mobilebrand img{ height:34px; width:auto; }
@media (min-width:1024px){ .u-auth-mobilebrand{ display:none; } }
.u-auth-col{ width:100%; max-width:460px; margin:0 auto; }

/* ── Motion safety ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .u-scope *, .u-scope *::before, .u-scope *::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .u-fadein{ animation:none; }
}