/* The five ZeenTech themes, lifted verbatim from
   zeentech-site/www/css/zeentech-theme.css so this service, the website, the
   mail login and the webmail are one palette rather than four approximations.
   Switch by setting data-theme on <html>. */

html, html[data-theme="original"]{
  --bg:#080604; --bg2:#0F0A04;
  --surface:rgba(14,10,4,.92); --card:rgba(26,18,6,.80); --card-solid:rgba(26,18,6,.96);
  --border:#3A2810; --border2:#5A3E18;
  --glow:#E07B00; --glow2:#F5A020; --glow-dim:#8B4A00;
  --gold:#C9A84C; --sand:#C4B48C; --sand-dim:#7A6A4C;
  --glow-shadow:0 0 18px #E07B00, 0 0 40px rgba(224,123,0,.3);
  --ok:#8BB836; --warn:#E0A020; --err:#C0392B;
  color-scheme:dark;
}
html[data-theme="original-green"]{
  --bg:#141A0E; --bg2:#1C240F;
  --surface:rgba(28,36,15,.92); --card:rgba(36,46,18,.80); --card-solid:rgba(36,46,18,.96);
  --border:#2A3818; --border2:#4A5E28;
  --glow:#8BB836; --glow2:#A8D44E; --glow-dim:#4A6A1C;
  --gold:#D8B85C; --sand:#CAC8A2; --sand-dim:#8A8A5C;
  --glow-shadow:0 0 18px #8BB836, 0 0 40px rgba(139,184,54,.3);
  --ok:#8BB836; --warn:#D8B85C; --err:#C0392B;
  color-scheme:dark;
}
html[data-theme="desert-warmth"]{
  --bg:#FDF8F2; --bg2:#F5EBDD;
  --surface:rgba(255,255,255,.75); --card:rgba(255,255,255,.65); --card-solid:rgba(253,248,242,.96);
  --border:#D8C4A8; --border2:#B89668;
  --glow:#A8651F; --glow2:#C9802E; --glow-dim:#8B5E3C;
  --gold:#A87A1E; --sand:#4E342E; --sand-dim:#8B6B4C;
  --glow-shadow:none;
  --ok:#5E7E3C; --warn:#A8651F; --err:#A83226;
  color-scheme:light;
}
html[data-theme="cloud-neutral"]{
  --bg:#F0EEE9; --bg2:#E7E4DD;
  --surface:rgba(255,255,255,.78); --card:rgba(255,255,255,.68); --card-solid:rgba(240,238,233,.97);
  --border:#D5D2CA; --border2:#B8B4AA;
  --glow:#3D3D3D; --glow2:#5A5A5A; --glow-dim:#8A8A8A;
  --gold:#1E4CA1; --sand:#1A1A1A; --sand-dim:#6B6B6B;
  --glow-shadow:none;
  --ok:#3D6E3D; --warn:#1E4CA1; --err:#A83226;
  color-scheme:light;
}
html[data-theme="qatar"]{
  --bg:#F4F1EC; --bg2:#EAE5DD;
  --surface:rgba(255,255,255,.78); --card:rgba(255,255,255,.68); --card-solid:rgba(244,241,236,.97);
  --border:#E2CDD4; --border2:#C9A0AC;
  --glow:#8A1538; --glow2:#A8244A; --glow-dim:#6E1029;
  --gold:#A87A1E; --sand:#2A0A12; --sand-dim:#8A5560;
  --glow-shadow:none;
  --ok:#5E7E3C; --warn:#A8651F; --err:#A83226;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(120% 90% at 50% 0%,var(--bg2),var(--bg) 62%);
  background-attachment:fixed; min-height:100vh;
  color:var(--sand); font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:860px;margin:0 auto;padding:44px 22px 70px}
.brand{font-family:'Press Start 2P',monospace;font-size:16px;letter-spacing:.04em;text-decoration:none;display:inline-block}
.brand .a{color:var(--sand)} .brand .b{color:var(--gold)}
.eyebrow{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--sand-dim);text-transform:uppercase;margin:10px 0 20px}
.rule{height:2px;background:linear-gradient(90deg,var(--glow),var(--border) 60%,transparent);margin-bottom:30px}
h1{font-family:'Press Start 2P',monospace;font-size:clamp(14px,2.4vw,19px);line-height:1.7;color:var(--sand);margin-bottom:14px}
h1 .hl{color:var(--glow)}
p{font-size:14.5px;line-height:1.8;color:var(--sand-dim);margin-bottom:14px}
.card{border:2px solid var(--border2);background:var(--card);padding:20px;margin-bottom:14px}
.btn{font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:.1em;padding:14px 18px;cursor:pointer;
  background:var(--glow);border:2px solid var(--glow);color:var(--bg);text-transform:uppercase}
.btn:hover{background:var(--glow2);border-color:var(--glow2)}
.btn.ghost{background:transparent;color:var(--sand);border-color:var(--border2)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}

/* shared theme switcher */
.switcher{position:fixed;top:14px;right:14px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.switcher .lbl{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--sand-dim)}
.swatches{display:flex;gap:6px}
.swatches button{width:18px;height:18px;border:2px solid var(--border2);padding:0;cursor:pointer;line-height:0}
.swatches button:hover{border-color:var(--sand)}
.swatches button.active{border-color:var(--gold);transform:scale(1.15)}
.themename{font-family:'Press Start 2P',monospace;font-size:6.5px;letter-spacing:.1em;color:var(--gold)}