/* ═══════════════════════════════════════════════════════════════════════════
   PHAZA MAIL — Roundcube/Elastic → Phaza Design System   (v3, canonical)
   Ref: knowledge.phaza.io/design
   Architecture: Elastic dark base is activated by default (pre-paint, see
   layout.html + ui.js). This sheet is the single Phaza layer on top — one
   token system drives BOTH modes; every surface is themed via var(), so no
   vendor-default gray/white can show through. Depth = surface steps + hairlines
   (no shadows on dark). Icons = Lucide masks in currentColor. Sharp edges +
   −18° blade. Motion = transform/opacity only.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   1 · TOKENS  —  :root = Phaza LIGHT (used when user toggles light);
                 html.dark-mode = Phaza DARK (the default product).
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* light palette */
  --pz-canvas:#EEF1F6; --pz-sunken:#E4E9F1; --pz-raised:#FFFFFF; --pz-overlay:#FFFFFF; --pz-hover:#EDF1F7;
  --pz-line:#E2E7EF; --pz-line2:#CBD4E1;
  --pz-t1:#0A0E16; --pz-t2:#3B4350; --pz-t3:#6E7684;
  --pz-blue:#1994FD; --pz-blue4:#2BA8E0; --pz-blue7:#06688B; --pz-signal:#1877B0;
  --pz-good:#1E9E5A; --pz-warn:#B7791F; --pz-bad:#D64550; --pz-info:#1877B0;
  --pz-glow-a:rgba(43,168,224,.10); --pz-glow-b:rgba(165,81,245,.06); --pz-grid:rgba(10,14,22,.028);
  --pz-tint:rgba(24,119,176,.08); --pz-tint2:rgba(24,119,176,.14); --pz-sel:rgba(24,119,176,.10);

  /* shared identity (mode-independent) */
  --pz-violet:#A551F5;
  --pz-grad:linear-gradient(135deg,#2BA8E0 0%,#1994FD 25%,#5B7FFC 50%,#8268FE 75%,#A551F5 100%);
  --pz-grad-act:linear-gradient(135deg,#0E7FB4 0%,#0A6FD0 25%,#3D57D6 50%,#6146CE 75%,#8A3FC4 100%);
  --pz-sans:"Inter","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pz-disp:"Poppins",var(--pz-sans);
  --pz-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --pz-e1:cubic-bezier(.2,0,0,1); --pz-spring:cubic-bezier(.34,1.4,.5,1);
  --pz-cut:9px;                                   /* −18° blade corner */
  --pz-sidebar:248px; --pz-rail:60px; --pz-bar:56px; --pz-row:42px;
}
html.dark-mode{
  --pz-canvas:#090B12; --pz-sunken:#05070E; --pz-raised:#12151D; --pz-overlay:#1B1F28; --pz-hover:#212631;
  --pz-line:#1E2027; --pz-line2:#2D3039;
  --pz-t1:#FFFFFF; --pz-t2:#BABEC7; --pz-t3:#8B8F99;
  --pz-blue:#2BA8E0; --pz-blue4:#5ABFF5; --pz-blue7:#06688B; --pz-signal:#5ABFF5;
  --pz-good:#5BCC80; --pz-warn:#E5A323; --pz-bad:#FE8B83; --pz-info:#31BFFE;
  --pz-glow-a:rgba(43,168,224,.10); --pz-glow-b:rgba(165,81,245,.07); --pz-grid:rgba(255,255,255,.016);
  --pz-tint:rgba(90,191,245,.06); --pz-tint2:rgba(90,191,245,.10); --pz-sel:rgba(43,168,224,.10);
}

/* ─────────────────────────────────────────────────────────────────────────
   2 · LUCIDE ICON MASKS  (1.5px, round; painted with currentColor)
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --i-pen:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z'/></svg>");
  --i-inbox:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>");
  --i-send:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='m22 2-7 20-4-9-9-4Z'/></svg>");
  --i-file:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/></svg>");
  --i-trash:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/></svg>");
  --i-ban:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m4.9 4.9 14.2 14.2'/></svg>");
  --i-archive:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='5' rx='1'/><path d='M4 9v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9'/><path d='M10 13h4'/></svg>");
  --i-reply:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17 4 12l5-5'/><path d='M20 18v-2a4 4 0 0 0-4-4H4'/></svg>");
  --i-replyall:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m7 17-5-5 5-5'/><path d='m12 17-5-5 5-5'/><path d='M22 18v-2a4 4 0 0 0-4-4H7'/></svg>");
  --i-forward:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m15 17 5-5-5-5'/><path d='M4 18v-2a4 4 0 0 1 4-4h12'/></svg>");
  --i-flag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><path d='M4 22v-7'/></svg>");
  --i-more:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='black'><circle cx='5' cy='12' r='1.6'/><circle cx='12' cy='12' r='1.6'/><circle cx='19' cy='12' r='1.6'/></svg>");
  --i-print:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9V2h12v7'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8'/></svg>");
  --i-mail:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>");
  --i-users:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  --i-gear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
  --i-logout:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5'/><path d='M21 12H9'/></svg>");
  --i-search:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>");
  --i-refresh:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M23 4v6h-6'/><path d='M1 20v-6h6'/><path d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10'/><path d='M23 14l-4.64 4.36A9 9 0 0 1 3.51 15'/></svg>");
  --i-info:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
  --i-moon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
  --i-sun:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
  --i-check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l3 3L22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>");
  --i-checkmark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --i-threads:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
  --i-sliders:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/></svg>");
  --i-move:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/><path d='M12 10v6M9 13l3 3 3-3'/></svg>");
  --i-back:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>");
  --i-close:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
  --i-attach:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
  --i-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
  --i-star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
  --i-folder:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>");
  --i-warn:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><path d='M12 9v4M12 17h.01'/></svg>");
  --i-user:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  --i-lock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  /* neutral fallback so an unmapped vendor icon is a subtle dot, never a solid block */
  --i-dot:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='2.4' fill='black'/></svg>");
}

/* ─────────────────────────────────────────────────────────────────────────
   3 · CANVAS  (pre-paint safe: ground is Phaza ink before JS/anything)
   ───────────────────────────────────────────────────────────────────────── */
html{background:var(--pz-canvas)}
html.dark-mode{background:#05070E}
html,body,#layout,.menu,input,textarea,select,button,.form-control{
  font-family:var(--pz-sans);
}
body{color:var(--pz-t2)!important}
body,#layout{
  background-color:var(--pz-canvas)!important;
  background-image:
    radial-gradient(1100px 520px at 16% -8%, var(--pz-glow-a), transparent 60%),
    radial-gradient(900px 460px at 90% 2%, var(--pz-glow-b), transparent 55%),
    linear-gradient(var(--pz-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pz-grid) 1px, transparent 1px)!important;
  background-size:auto,auto,13rem 13rem,13rem 13rem!important;
  background-attachment:fixed!important;
}
h1,h2,h3,.boxtitle,.header-title,.subject{font-family:var(--pz-disp)!important;font-weight:400!important;color:var(--pz-t1)!important;letter-spacing:.005em}
a{color:var(--pz-signal)} a:hover{color:var(--pz-blue4)}
::selection{background:var(--pz-tint2);color:var(--pz-t1)}
*{scrollbar-width:thin;scrollbar-color:var(--pz-line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--pz-line2);border-radius:0;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--pz-blue7);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ─────────────────────────────────────────────────────────────────────────
   4 · SHELL REGIONS  (depth via surface steps + hairlines)
   ───────────────────────────────────────────────────────────────────────── */
#layout>div{border-color:var(--pz-line)!important}
#layout-menu,#taskmenu{background:var(--pz-sunken)!important;border-color:var(--pz-line)!important}
#layout-sidebar{background:var(--pz-raised)!important;border-color:var(--pz-line)!important}
#layout-list{background:var(--pz-raised)!important;border-color:var(--pz-line)!important}
#layout-content{background:var(--pz-canvas)!important}
.listbox,#folderlist-content,.folderlist,.sidebar,.scroller,.boxlist,.uibox,.messagelist,#messagelist{background:transparent!important;box-shadow:none!important}
#layout-sidebar,#layout-list,#layout-content{box-shadow:none!important}

/* region headers (top bars, 56px) + region footers (status strips) */
#layout>div>.header,#layout>div>.footer,.toolbar,#topline{
  min-height:var(--pz-bar);background:var(--pz-canvas)!important;border-color:var(--pz-line)!important;
  color:var(--pz-t1)!important;box-shadow:none!important
}
html.dark-mode #layout>div>.header,html.dark-mode .toolbar{background:rgba(9,11,18,.72)!important;backdrop-filter:blur(14px) saturate(1.25)}
#layout>div>.header{position:relative}
#layout>div>.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--pz-blue) 28%,var(--pz-violet) 72%,transparent);opacity:.45}
#layout>div>.footer{border-top:1px solid var(--pz-line)!important;color:var(--pz-t3)!important}

/* ─────────────────────────────────────────────────────────────────────────
   5 · TASK RAIL  (#layout-menu / #taskmenu — the vertical app switcher)
   ───────────────────────────────────────────────────────────────────────── */
#layout-menu .popover-header,#layout-menu .special-buttons{background:transparent!important;border-color:var(--pz-line)!important}
#taskmenu a.button,.menu a.button{color:var(--pz-t3)!important;transition:color .14s var(--pz-e1),background .14s var(--pz-e1)}
#taskmenu a.button:hover,.menu a.button:hover{color:var(--pz-t1)!important;background:var(--pz-tint)!important}
#taskmenu a.button.selected,#taskmenu a.button.active{color:var(--pz-signal)!important;background:var(--pz-tint)!important;position:relative}
#taskmenu a.button.selected::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--pz-blue)}

/* ─────────────────────────────────────────────────────────────────────────
   6 · ICONS  (mask + currentColor → icons follow the element's text color)
   ───────────────────────────────────────────────────────────────────────── */
a.button.icon::before, a.button::before,
#folderlist li>a::before, .folderlist li>a::before, .listing.folderlist li>a::before,
#taskmenu a::before, .menu a.button::before,
.searchbar a.button::before, .input-group .icon::before,
.floating-action-buttons a::before, .ui-dialog-titlebar-close::before,
.popupmenu li a::before{
  content:""!important; font:0/0 var(--pz-sans)!important; speak:none;
  display:inline-block!important; width:22px!important; height:22px!important; flex:0 0 auto;
  background-color:currentColor!important; color:inherit;
  -webkit-mask-image:var(--i-dot);mask-image:var(--i-dot);   /* fallback: never a solid block */
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:20px 20px;
  mask-repeat:no-repeat;mask-position:center;mask-size:20px 20px;
  transition:transform .14s var(--pz-e1),opacity .14s var(--pz-e1);
}
/* login field icons */
.input-group .icon.user::before{-webkit-mask-image:var(--i-user)!important;mask-image:var(--i-user)!important}
.input-group .icon.pass::before,.input-group .icon.password::before,.input-group .icon.lock::before{-webkit-mask-image:var(--i-lock)!important;mask-image:var(--i-lock)!important}
.input-group-text{background:transparent!important;border:0!important;color:var(--pz-t3)!important}
/* folders */
#folderlist li.inbox>a::before,.folderlist li.inbox>a::before{-webkit-mask-image:var(--i-inbox);mask-image:var(--i-inbox)}
#folderlist li.sent>a::before,.folderlist li.sent>a::before{-webkit-mask-image:var(--i-send);mask-image:var(--i-send)}
#folderlist li.drafts>a::before,.folderlist li.drafts>a::before{-webkit-mask-image:var(--i-file);mask-image:var(--i-file)}
#folderlist li.junk>a::before,.folderlist li.junk>a::before{-webkit-mask-image:var(--i-ban);mask-image:var(--i-ban)}
#folderlist li.trash>a::before,.folderlist li.trash>a::before{-webkit-mask-image:var(--i-trash);mask-image:var(--i-trash)}
#folderlist li.archive>a::before,.folderlist li.archive>a::before{-webkit-mask-image:var(--i-archive);mask-image:var(--i-archive)}
#folderlist li>a::before,.folderlist li>a::before{-webkit-mask-image:var(--i-folder);mask-image:var(--i-folder)} /* generic fallback (declared first so specials win) */
#folderlist li.inbox>a::before{-webkit-mask-image:var(--i-inbox);mask-image:var(--i-inbox)}
/* toolbar / actions */
.button.reply::before{-webkit-mask-image:var(--i-reply)!important;mask-image:var(--i-reply)!important}
.button.reply-all::before,.button.replyall::before{-webkit-mask-image:var(--i-replyall)!important;mask-image:var(--i-replyall)!important}
.button.forward::before{-webkit-mask-image:var(--i-forward)!important;mask-image:var(--i-forward)!important}
.button.delete::before,.button.discard::before{-webkit-mask-image:var(--i-trash)!important;mask-image:var(--i-trash)!important}
.button.archive::before{-webkit-mask-image:var(--i-archive)!important;mask-image:var(--i-archive)!important}
.button.junk::before,.button.markasjunk::before{-webkit-mask-image:var(--i-ban)!important;mask-image:var(--i-ban)!important}
.button.markmessage::before,.button.mark::before{-webkit-mask-image:var(--i-flag)!important;mask-image:var(--i-flag)!important}
.button.more::before,.button.menu::before{-webkit-mask-image:var(--i-more)!important;mask-image:var(--i-more)!important}
.button.print::before{-webkit-mask-image:var(--i-print)!important;mask-image:var(--i-print)!important}
.button.move::before{-webkit-mask-image:var(--i-move)!important;mask-image:var(--i-move)!important}
.button.search::before,.searchbar a.button.search::before{-webkit-mask-image:var(--i-search)!important;mask-image:var(--i-search)!important}
.button.refresh::before,.button.reload::before{-webkit-mask-image:var(--i-refresh)!important;mask-image:var(--i-refresh)!important}
.button.select::before{-webkit-mask-image:var(--i-check)!important;mask-image:var(--i-check)!important}
.button.threads::before{-webkit-mask-image:var(--i-threads)!important;mask-image:var(--i-threads)!important}
.button.options::before,.button.select-options::before,.button.listoptions::before{-webkit-mask-image:var(--i-sliders)!important;mask-image:var(--i-sliders)!important}
.button.compose::before,.button.write::before,.button.writenew::before,.button.create::before,.button.add::before,.button.addcontact::before{-webkit-mask-image:var(--i-pen)!important;mask-image:var(--i-pen)!important}
.button.back-list-button::before,a.back-list-button::before,.button.back::before{-webkit-mask-image:var(--i-back)!important;mask-image:var(--i-back)!important}
.button.attach::before,.button.addattachment::before{-webkit-mask-image:var(--i-attach)!important;mask-image:var(--i-attach)!important}
.button.send::before{-webkit-mask-image:var(--i-send)!important;mask-image:var(--i-send)!important}
.button.close::before,.ui-dialog-titlebar-close::before{-webkit-mask-image:var(--i-close)!important;mask-image:var(--i-close)!important}
.button.print::before{-webkit-mask-image:var(--i-print)!important;mask-image:var(--i-print)!important}
/* task rail */
#taskmenu a.mail::before,.menu a.mail::before{-webkit-mask-image:var(--i-mail)!important;mask-image:var(--i-mail)!important}
#taskmenu a.contacts::before,.menu a.contacts::before{-webkit-mask-image:var(--i-users)!important;mask-image:var(--i-users)!important}
#taskmenu a.settings::before,.menu a.settings::before{-webkit-mask-image:var(--i-gear)!important;mask-image:var(--i-gear)!important}
#taskmenu a.logout::before,.menu a.logout::before{-webkit-mask-image:var(--i-logout)!important;mask-image:var(--i-logout)!important}
#taskmenu a.about::before,.menu a.about::before{-webkit-mask-image:var(--i-info)!important;mask-image:var(--i-info)!important}
#taskmenu a.compose::before,.menu a.compose::before{-webkit-mask-image:var(--i-pen)!important;mask-image:var(--i-pen)!important}
#taskmenu a.theme.dark::before{-webkit-mask-image:var(--i-moon)!important;mask-image:var(--i-moon)!important}
#taskmenu a.theme.light::before{-webkit-mask-image:var(--i-sun)!important;mask-image:var(--i-sun)!important}
a.button.darkmode::before,.menu a.darkmode::before{-webkit-mask-image:var(--i-moon)!important;mask-image:var(--i-moon)!important}
/* icon micro-motion */
.toolbar a.button:hover::before,#folderlist li>a:hover::before,#taskmenu a:hover::before{transform:translateY(-1px)}

/* task rail layout: the icon base above forces inline-block ::before, which would
   break Elastic's stacked icon-over-label rail — restore it here (after icons win) */
#layout-menu{width:86px!important}
#layout-menu #logo{content:url("/static.php/skins/elastic/images/phaza/fav.png")!important;
  width:30px!important;height:30px!important;max-height:30px!important;margin:10px auto 6px!important;display:block!important}
#taskmenu a,#taskmenu .action-buttons a,#taskmenu .special-buttons a{
  display:block!important;text-align:center!important;padding:9px 3px!important;line-height:1.15!important;min-height:auto!important}
#taskmenu a::before{display:block!important;margin:0 auto 5px!important;width:24px!important;height:24px!important}
#taskmenu a .inner{display:block!important;font-size:9.5px!important;letter-spacing:.02em!important;
  white-space:normal!important;overflow:hidden;text-overflow:ellipsis;max-height:2.4em}
#taskmenu a.selected,#taskmenu a.active{color:var(--pz-signal)!important;background:var(--pz-tint)!important}

/* ─────────────────────────────────────────────────────────────────────────
   7 · FOLDER LIST  (40px rows, currentColor icons, unread dot, selected edge)
   ───────────────────────────────────────────────────────────────────────── */
#layout-sidebar .header .header-title,.username{color:var(--pz-t1)!important;font-family:var(--pz-disp)!important;font-weight:500!important;font-size:.86rem!important}
#folderlist,.folderlist{padding:6px 8px!important}
#folderlist li,.folderlist li{border:0!important}
#folderlist li>a,.folderlist li>a{
  color:var(--pz-t2)!important;min-height:var(--pz-row);display:flex;align-items:center;gap:12px;
  padding:0 12px!important;border-radius:0;position:relative;
  transition:background .14s var(--pz-e1),color .14s var(--pz-e1)}
#folderlist li>a:hover,.folderlist li>a:hover{background:var(--pz-tint)!important;color:var(--pz-t1)!important}
/* selected: accent edge via inset shadow (keeps the ::before icon intact) + signal color */
#folderlist li.selected>a,.folderlist li.selected>a{background:var(--pz-sel)!important;color:var(--pz-signal)!important;box-shadow:inset 2px 0 0 var(--pz-blue)!important}
.unreadcount,.folderlist .unreadcount,.count.unread{
  background:var(--pz-tint2)!important;color:var(--pz-signal)!important;border:0!important;border-radius:999px!important;
  font:600 11px/1.6 var(--pz-mono)!important;min-width:20px;text-align:center;padding:0 6px!important}

/* ─────────────────────────────────────────────────────────────────────────
   8 · MESSAGE LIST  (mono uppercase headers, 42px rows, full state set)
   ───────────────────────────────────────────────────────────────────────── */
.messagelist thead th,#messagelist thead th,table.listing thead th{
  font:600 10px/1 var(--pz-mono)!important;letter-spacing:.14em!important;text-transform:uppercase!important;
  color:var(--pz-t3)!important;border-bottom:1px solid var(--pz-line)!important;background:transparent!important;padding:13px 14px!important}
.messagelist thead th a.sortcol,.sortcol{color:var(--pz-t3)!important}
.messagelist thead th a.sortcol:hover{color:var(--pz-signal)!important}
.messagelist tbody tr,#messagelist tbody tr{
  border-bottom:1px solid var(--pz-line)!important;color:var(--pz-t2)!important;
  transition:background .12s var(--pz-e1),box-shadow .12s var(--pz-e1)}
.messagelist tbody tr td,#messagelist tbody tr td{padding:10px 14px!important;border:0!important}
.messagelist tbody tr:hover{background:var(--pz-tint)!important;box-shadow:inset 2px 0 0 var(--pz-signal)}
.messagelist tbody tr.selected,.messagelist tbody tr.selected:hover,.messagelist tbody tr.focused.selected{
  background:var(--pz-sel)!important;box-shadow:inset 2px 0 0 var(--pz-blue)!important;color:var(--pz-t1)!important}
.messagelist tbody tr.focused{outline:none}
.messagelist .subject,.messagelist .fromto,.messagelist td,.messagelist .date,.messagelist .size{color:var(--pz-t2)!important}
.messagelist .date,.messagelist .size{font:500 11px/1 var(--pz-mono)!important;color:var(--pz-t3)!important}
.messagelist tr.unread .subject a,.messagelist tr.unread td.subject a,.messagelist tr.unread .fromto{color:var(--pz-t1)!important;font-weight:600!important}
.messagelist tr.unread td.subject a::before,.messagelist tr.unread .subject::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pz-blue);
  margin-right:10px;vertical-align:middle;box-shadow:0 0 8px 1px rgba(43,168,224,.55);-webkit-mask:none;mask:none}
.messagelist tr.deleted td,.messagelist tr.deleted .subject{color:var(--pz-t3)!important;text-decoration:line-through;opacity:.6}
.messagelist td.flag .flagged,.messagelist span.flagged{background-color:var(--pz-bad)!important;-webkit-mask-image:var(--i-star);mask-image:var(--i-star);-webkit-mask-size:16px;mask-size:16px}
.messagelist td.subject span.msgicon,.messagelist td.status span{color:var(--pz-t3)}
.messagelist tr.unread td.flag::before{opacity:1}

/* list-column contact avatar (when list shows avatars) */
.messagelist td.contact span.contactpic,.contactpic{background:var(--pz-grad-act)!important;border-radius:999px!important;color:#fff!important}

/* ─────────────────────────────────────────────────────────────────────────
   9 · SEARCH BAR
   ───────────────────────────────────────────────────────────────────────── */
.searchbar{background:var(--pz-overlay)!important;border:1px solid var(--pz-line2)!important;border-radius:6px!important}
.searchbar input,.searchbar input.form-control{background:transparent!important;border:0!important;color:var(--pz-t1)!important}
.searchbar input::placeholder{color:var(--pz-t3)!important}
.searchbar a.button{color:var(--pz-t3)!important}
.searchbar a.button:hover,.searchbar.active a.button.search{color:var(--pz-signal)!important;background:transparent!important}
.searchbar:focus-within{border-color:var(--pz-blue)!important;box-shadow:0 0 0 2px var(--pz-tint2)!important}
.searchoptions,.search-input{background:var(--pz-overlay)!important}

/* ─────────────────────────────────────────────────────────────────────────
   10 · READING PANE  (header as hairline card + gradient avatar)
   ───────────────────────────────────────────────────────────────────────── */
#messageheader,.message-headers,#partheader{
  background:var(--pz-overlay)!important;border:1px solid var(--pz-line)!important;border-radius:0!important;
  color:var(--pz-t2)!important;box-shadow:none!important;margin:14px!important;padding:16px 18px!important;position:relative;overflow:hidden}
#messageheader::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--pz-grad)}
#messageheader .subject,.message-headers .subject{color:var(--pz-t1)!important;font-family:var(--pz-disp)!important;font-weight:500!important;font-size:1.12rem!important}
#messageheader .fromto,.message-headers .adr,#messageheader table td{color:var(--pz-t2)!important}
#messageheader .contactphoto,.contactphoto,.message-headers .contactphoto span{
  background:var(--pz-grad-act)!important;border-radius:999px!important;color:#fff!important;font-weight:600}
.message-part,#messagebody,.messageview,.message-htmlpart,.part-content{background:transparent!important;color:var(--pz-t2)!important}
#messagebody,.message-part{padding:0 16px 16px!important}
.messagelist+.watermark,.iframe-wrapper,#messagecontframe{background:var(--pz-canvas)!important}
html.dark-mode .iframe-wrapper,html.dark-mode #messagecontframe{background:#090B12!important}
blockquote{border-left:2px solid var(--pz-blue7)!important;color:var(--pz-t3)!important;background:var(--pz-tint)!important;padding-left:12px!important}

/* ─────────────────────────────────────────────────────────────────────────
   11 · EMPTY-STATE PANE  (the no-message reading pane must be ink under, and
        during, the watermark iframe load — so there is never a white flash;
        the empty artwork itself is the themed, versioned watermark.html)
   ───────────────────────────────────────────────────────────────────────── */
.iframe-wrapper,.messagecontframe-wrapper,#messagelist-content,#layout-content>.content{background:var(--pz-canvas)!important}
html.dark-mode .iframe-wrapper,html.dark-mode #messagelist-content,html.dark-mode #layout-content>.content{background:#090B12!important}

/* ─────────────────────────────────────────────────────────────────────────
   12 · COMPOSE
   ───────────────────────────────────────────────────────────────────────── */
#compose-content,.formcontainer,#composeview-content{background:var(--pz-canvas)!important}
#composeheaders,.compose-headers,#compose-headers{background:var(--pz-overlay)!important;border:1px solid var(--pz-line)!important;border-radius:0!important}
#composeheaders td.title,label{color:var(--pz-t3)!important;font-weight:500}
.editor-toolbar,.mce-toolbar,.mce-panel,.tox-toolbar,.tox .tox-toolbar__group{background:var(--pz-overlay)!important;border-color:var(--pz-line)!important}
.tox-tinymce{border:1px solid var(--pz-line2)!important;border-radius:0!important}
textarea.mce_editor,#composebody{background:var(--pz-raised)!important;color:var(--pz-t1)!important;border-color:var(--pz-line2)!important}
.attachmentslist li{background:var(--pz-overlay)!important;border:1px solid var(--pz-line)!important;border-radius:0!important;color:var(--pz-t2)!important}

/* ─────────────────────────────────────────────────────────────────────────
   13 · BUTTONS  (sharp + −18° blade, gradient primary, clear secondary/disabled)
   ───────────────────────────────────────────────────────────────────────── */
.btn,button.btn,a.button.btn,input.btn{border-radius:0!important;font-family:var(--pz-sans)!important;font-weight:600!important;letter-spacing:.01em;transition:transform .14s var(--pz-e1),filter .18s var(--pz-e1),background .14s var(--pz-e1),border-color .14s var(--pz-e1)!important}
.btn-primary,button.btn.btn-primary,a.button.btn-primary,input.btn.btn-primary,.formbuttons .btn.mainaction{
  background:var(--pz-grad-act)!important;border:0!important;color:#fff!important;
  clip-path:polygon(var(--pz-cut) 0,100% 0,100% 100%,0 100%,0 var(--pz-cut))}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.1)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary,button.btn.btn-secondary,a.btn.btn-secondary,.btn.btn-outline{
  background:transparent!important;color:var(--pz-t1)!important;border:1px solid var(--pz-line2)!important}
.btn-secondary:hover{border-color:var(--pz-blue)!important;background:var(--pz-tint)!important;color:var(--pz-t1)!important}
.btn.btn-danger,.btn.delete{background:transparent!important;color:var(--pz-bad)!important;border:1px solid var(--pz-bad)!important}
.btn.btn-danger:hover{background:var(--pz-bad)!important;color:#fff!important}
a.button,.toolbar a.button{color:var(--pz-t2)!important;border-radius:0!important;transition:color .14s var(--pz-e1),background .14s var(--pz-e1)}
a.button:hover,.toolbar a.button:hover{color:var(--pz-signal)!important;background:var(--pz-tint)!important}
a.button.selected,a.button.active,.toolbar a.button.selected{color:var(--pz-signal)!important}
/* disabled — unmistakable, non-interactive */
.btn:disabled,.btn.disabled,a.button.disabled,a.button[aria-disabled=true],.toolbar a.button.disabled,button[disabled]{
  opacity:.32!important;filter:grayscale(.4);cursor:default!important;pointer-events:none!important;transform:none!important}
.btn:disabled:hover,a.button.disabled:hover{background:transparent!important;color:var(--pz-t3)!important}
/* floating compose (FAB) — gradient blade */
.floating-action-buttons a.button,.floating-action-buttons a{
  background:var(--pz-grad-act)!important;color:#fff!important;border-radius:0!important;box-shadow:0 8px 26px rgba(20,60,120,.35)!important;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
.floating-action-buttons a.button:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* ─────────────────────────────────────────────────────────────────────────
   14 · INPUTS  (6px radius, 2px focus ring + offset)
   ───────────────────────────────────────────────────────────────────────── */
input.form-control,textarea.form-control,select.form-control,
input[type=text],input[type=password],input[type=email],input[type=search],input[type=url],input[type=tel],input[type=number],textarea,select{
  background:var(--pz-overlay)!important;border:1px solid var(--pz-line2)!important;color:var(--pz-t1)!important;border-radius:6px!important;
  transition:border-color .14s var(--pz-e1),box-shadow .14s var(--pz-e1)}
input.form-control::placeholder,textarea::placeholder{color:var(--pz-t3)!important}
input.form-control:focus,textarea:focus,select:focus,
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=search]:focus{
  border-color:var(--pz-blue)!important;outline:none!important;box-shadow:0 0 0 2px var(--pz-tint2),0 0 0 4px var(--pz-canvas)!important}
label,.propform label,fieldset legend{color:var(--pz-t2)!important}
/* checkboxes / custom controls */
input[type=checkbox]:checked,input[type=radio]:checked{accent-color:var(--pz-blue)}

/* ─────────────────────────────────────────────────────────────────────────
   15 · MENUS / DIALOGS / POPOVERS  (overlay surface, hairline, no white)
   ───────────────────────────────────────────────────────────────────────── */
.ui-dialog,.popupmenu,.popover,.ui-widget-content,.menu.popupmenu,.ui-menu,.googie_window{
  background:var(--pz-overlay)!important;border:1px solid var(--pz-line2)!important;color:var(--pz-t2)!important;border-radius:0!important;box-shadow:0 18px 50px rgba(0,0,0,.5)!important}
html:not(.dark-mode) .ui-dialog,html:not(.dark-mode) .popupmenu,html:not(.dark-mode) .popover{box-shadow:0 18px 44px rgba(20,30,60,.14)!important}
.ui-dialog .ui-dialog-titlebar,.popover-header{background:var(--pz-hover)!important;color:var(--pz-t1)!important;border-color:var(--pz-line)!important;font-family:var(--pz-disp)!important}
.ui-dialog .ui-dialog-buttonpane{border-color:var(--pz-line)!important;background:transparent!important}
.popupmenu li a,.menu.popupmenu li a,.ui-menu li a{color:var(--pz-t2)!important}
.popupmenu li a:hover,.menu.popupmenu li a:hover,.ui-menu li a:hover,.popupmenu li a.active{background:var(--pz-tint)!important;color:var(--pz-t1)!important}
.popupmenu li a::before{color:var(--pz-t3)}
.popupmenu li.separator,.menu .separator{border-color:var(--pz-line)!important}
.ui-widget-overlay,.ui-dialog-overlay{background:rgba(3,5,10,.6)!important}

/* ─────────────────────────────────────────────────────────────────────────
   16 · STATUS BAR / PAGINATION  (part of the designed shell)
   ───────────────────────────────────────────────────────────────────────── */
.pagenav,#countcontrols,.records-count,#markmessagemenulink,.footer .listselect{
  background:transparent!important;color:var(--pz-t3)!important;border-color:var(--pz-line)!important;font:500 11px/1 var(--pz-mono)!important;letter-spacing:.04em}
.pagenav a.button,.footer a.button{color:var(--pz-t3)!important}
.pagenav a.button:hover{color:var(--pz-signal)!important}
.pagenav a.button.disabled{opacity:.3!important}

/* ─────────────────────────────────────────────────────────────────────────
   17 · TOASTS / ALERTS  (loading, success, error, warning, offline)
   ───────────────────────────────────────────────────────────────────────── */
.toast,#message div.loading,.boxconfirmation,.boxerror,.boxwarning,.boxinformation{
  border-radius:0!important;border:1px solid var(--pz-line2)!important;background:var(--pz-overlay)!important;color:var(--pz-t1)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.4)!important;border-left-width:3px!important}
.toast.confirmation,.boxconfirmation{border-left-color:var(--pz-good)!important}
.toast.error,.boxerror{border-left-color:var(--pz-bad)!important}
.toast.warning,.boxwarning{border-left-color:var(--pz-warn)!important}
.toast.loading,#message div.loading{border-left-color:var(--pz-blue)!important}
.error{color:var(--pz-bad)!important} .confirmation{color:var(--pz-good)!important}
/* offline / reconnect banner */
body.offline #topline::before,#message .offline{background:var(--pz-warn)!important;color:#1a1200!important}

/* ─────────────────────────────────────────────────────────────────────────
   18 · LOADING  (Phaza gradient spinner + top progress hairline)
   ───────────────────────────────────────────────────────────────────────── */
.spinner,.ui-dialog .spinner,#messagestack .loading::before{
  width:26px!important;height:26px!important;border:2px solid var(--pz-line2)!important;border-top-color:var(--pz-blue)!important;
  border-radius:50%!important;background:none!important;animation:pz-spin .7s linear infinite}
@keyframes pz-spin{to{transform:rotate(360deg)}}
body.busy::before,#layout.busy::before{content:"";position:fixed;left:0;top:0;height:2px;width:100%;z-index:9999;
  background:var(--pz-grad);animation:pz-load 1.1s var(--pz-e1) infinite}
@keyframes pz-load{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(.7)}100%{transform:scaleX(1);opacity:0}}

/* ─────────────────────────────────────────────────────────────────────────
   19 · LOGIN  (centered blade card on ink, gradient hairline)
   ───────────────────────────────────────────────────────────────────────── */
body.task-login,.task-login #layout,.task-login #layout-content,.task-login .content{
  background-color:var(--pz-canvas)!important;display:flex;align-items:center;justify-content:center}
html.dark-mode body.task-login{background-color:#05070E!important}
#login-form,.login-form,.box.login{
  background:var(--pz-raised)!important;border:1px solid var(--pz-line2)!important;border-radius:0!important;
  box-shadow:0 30px 80px rgba(0,0,0,.5)!important;padding:42px 40px!important;position:relative;overflow:hidden;max-width:404px;width:92vw;
  clip-path:polygon(16px 0,100% 0,100% 100%,0 100%,0 16px)}
html:not(.dark-mode) #login-form{box-shadow:0 30px 70px rgba(20,30,60,.14)!important}
#login-form::before,.login-form::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--pz-grad)}
#login-form #logo,img#logo,.task-login #logo{max-height:52px!important;margin:2px auto 24px!important;display:block}
#login-form .btn-primary,.login-form button.btn{width:100%!important;justify-content:center;padding:12px!important;margin-top:8px}
#login-form label{text-transform:uppercase;font:600 10px/1 var(--pz-mono)!important;letter-spacing:.14em;color:var(--pz-t3)!important}
#login-form input.form-control{padding:12px!important}

/* ─────────────────────────────────────────────────────────────────────────
   20 · CONTACTS / SETTINGS  (consistent listing + form treatment)
   ───────────────────────────────────────────────────────────────────────── */
.listing tbody tr,.listing li{border-color:var(--pz-line)!important;color:var(--pz-t2)!important}
.listing tbody tr:hover,.listing li:hover{background:var(--pz-tint)!important;color:var(--pz-t1)!important}
.listing tbody tr.selected,.listing li.selected{background:var(--pz-sel)!important;box-shadow:inset 2px 0 0 var(--pz-blue)!important;color:var(--pz-t1)!important}
.contactphoto img,.image-upload .thumbnail{border-radius:999px!important}
fieldset.propform,.propform fieldset,.settings-content{background:transparent!important;border-color:var(--pz-line)!important}
.formcontent,.uibox .boxcontent{background:transparent!important}
.propform table td.title{color:var(--pz-t3)!important}
.tabsbar a,.listnav a{color:var(--pz-t3)!important}
.tabsbar a.selected,.tabsbar a:hover{color:var(--pz-signal)!important;border-bottom-color:var(--pz-blue)!important}

/* ─────────────────────────────────────────────────────────────────────────
   21 · A11Y — visible keyboard focus everywhere (never removed)
   ───────────────────────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,.button:focus-visible,input:focus-visible,[tabindex]:focus-visible,li>a:focus-visible{
  outline:2px solid var(--pz-blue)!important;outline-offset:2px!important;border-radius:2px}
.messagelist tbody tr:focus-visible,.listing tbody tr:focus-visible{outline:2px solid var(--pz-blue)!important;outline-offset:-2px!important}

/* ─────────────────────────────────────────────────────────────────────────
   22 · RESPONSIVE / MOBILE  (phone layout keeps Phaza surfaces + touch sizes)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  #layout-menu,html.dark-mode #layout-menu{background:var(--pz-sunken)!important}
  #layout-sidebar,#layout-list,#layout-content{background:var(--pz-canvas)!important}
  #folderlist li>a,.messagelist tbody tr td{min-height:46px}      /* ≥44px touch */
  .toolbar a.button,#taskmenu a.button{min-width:46px;min-height:46px}
  .floating-action-buttons a.button{width:54px;height:54px}
  #messageheader{margin:10px!important}
}
@media (max-width:768px){
  #layout-menu .special-buttons{border-top:1px solid var(--pz-line)!important}
}

/* ─────────────────────────────────────────────────────────────────────────
   23 · MOTION GUARD
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}