:root {
  color-scheme: light;
  --navy-950: #294a64;
  --navy-900: #315875;
  --navy-850: #365f7d;
  --navy-800: #3b6583;
  --navy-750: #406b89;
  --blue-600: #1f66d1;
  --blue-500: #4b93ee;
  --blue-400: #d2e9ff;
  --cyan-400: #56d6df;
  --green-500: #22c55e;
  --amber-500: #f59e0b;
  --red-500: #ef4444;
  --ink: #f8fbff;
  --muted: #deebf5;
  --muted-strong: #edf5fb;
  --line: rgba(226, 239, 249, .22);
  --line-strong: rgba(232, 243, 251, .34);
  --panel: rgba(63, 105, 135, .94);
  --panel-solid: #3f6987;
  --panel-raised: #406b89;
  --glass: rgba(49, 88, 117, .88);
  --shadow-sm: 0 14px 34px rgba(23, 48, 70, .18);
  --shadow-lg: 0 30px 78px rgba(20, 43, 64, .28);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --sidebar-w: 264px;
  --header-h: 76px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Kani 4.6 — unified premium navy glass shell. */
:root{--kani-navy-950:#061833;--kani-navy-900:#0a2448;--kani-blue-600:#287cc1;--kani-cyan:#62d4de;--kani-canvas:#eef5fb;--kani-paper:rgba(255,255,255,.84);--kani-line:rgba(31,89,140,.13);--kani-shadow:0 18px 48px rgba(6,24,51,.12)}
body.app-shell{background:radial-gradient(circle at 88% 8%,rgba(98,212,222,.18),transparent 27rem),radial-gradient(circle at 18% 92%,rgba(40,124,193,.12),transparent 32rem),var(--kani-canvas);color:#0b2747}
.sidebar{background:linear-gradient(165deg,var(--kani-navy-950),var(--kani-navy-900) 52%,#0e3b69);border-inline-end:1px solid rgba(255,255,255,.08);box-shadow:16px 0 44px rgba(6,24,51,.18)}
.side-nav a,.sidebar-user,.sidebar-logout{border-radius:16px}.side-nav a{min-height:50px;transition:transform .2s ease,background .2s ease,color .2s ease}.side-nav a:hover{transform:translateX(3px);background:rgba(255,255,255,.09)}[dir="rtl"] .side-nav a:hover{transform:translateX(-3px)}
.side-nav a.active{color:#fff;background:linear-gradient(135deg,rgba(40,124,193,.94),rgba(34,174,190,.78));box-shadow:0 10px 25px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.28)}
.topbar{background:rgba(247,251,255,.78);border-bottom:1px solid var(--kani-line);box-shadow:0 8px 30px rgba(6,24,51,.06);backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%)}
.icon-btn,.profile-trigger{border:1px solid var(--kani-line);background:rgba(255,255,255,.72);box-shadow:0 7px 20px rgba(6,24,51,.07)}
.profile-dropdown,.card,.panel,.modal-card{border:1px solid rgba(255,255,255,.68);background:var(--kani-paper);box-shadow:var(--kani-shadow);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}
.mobile-app-nav{background:rgba(6,24,51,.94);border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -12px 34px rgba(6,24,51,.23);backdrop-filter:blur(22px)}
.mobile-app-nav a{min-width:52px;min-height:52px;border-radius:17px}.mobile-app-nav a.active{background:linear-gradient(145deg,#287cc1,#19a6b5);color:#fff}
.walkie-app{border:1px solid rgba(255,255,255,.72);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.70);box-shadow:var(--kani-shadow);backdrop-filter:blur(24px) saturate(145%)}
.walkie-rail{background:linear-gradient(180deg,#f8fbff,#eaf4fb);border-inline-end:1px solid var(--kani-line)}.walkie-room__header{background:rgba(255,255,255,.82);border-bottom:1px solid var(--kani-line);backdrop-filter:blur(18px)}
.walkie-now{background:linear-gradient(135deg,#fff,#e9f5ff);border:1px solid var(--kani-line);box-shadow:0 10px 28px rgba(6,24,51,.07)}
.walkie-ptt{background:linear-gradient(145deg,#287cc1,#0f8da1);box-shadow:0 16px 36px rgba(25,107,169,.32),0 0 0 9px rgba(40,124,193,.08),inset 0 1px rgba(255,255,255,.35)}.walkie-ptt:active,.walkie-ptt.is-transmitting{transform:scale(.97);background:linear-gradient(145deg,#df3c55,#a70d2d)}
.walkie-composer{background:#fff;border:1px solid var(--kani-line);box-shadow:0 9px 24px rgba(6,24,51,.08)}
@media (max-width:700px){.walkie-app{border-radius:0;border-inline:0}.topbar{min-height:62px}.icon-btn{width:46px;height:46px;border-radius:15px}}

/* ===== Kani Translator Studio v3 (scoped) ===== */
.translator-page {
  --translator-navy:#123b50;
  --translator-teal:#218579;
  --translator-gold:#d3a04b;
  --translator-ink:#183b49;
  --translator-muted:#637c84;
  --translator-line:rgba(28,74,87,.14);
  --translator-soft:#edf5f3;
}
.translator-page .page { max-width:1460px; }
.translator-page .translator-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:230px;
  display:grid;
  grid-template-columns:170px minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  margin-bottom:18px;
  padding:30px 34px;
  border:1px solid rgba(255,255,255,.19);
  border-radius:30px;
  color:#fff;
  background:
    radial-gradient(circle at 87% 20%,rgba(237,190,93,.25),transparent 24%),
    radial-gradient(circle at 10% 110%,rgba(57,181,157,.34),transparent 38%),
    linear-gradient(132deg,#102f46 0%,#185c68 56%,#277d71 100%);
  box-shadow:0 24px 64px rgba(20,56,69,.2);
}
.translator-page .translator-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-75% -12% auto auto;
  width:420px;
  height:420px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 92px rgba(255,255,255,.018);
}
.translator-page .translator-hero__visual {
  position:relative;
  width:155px;
  height:155px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:42px;
  color:#184354;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(222,240,235,.92));
  box-shadow:inset 0 1px 0 #fff,0 22px 46px rgba(4,31,44,.25);
  transform:rotate(-4deg);
}
.translator-page .translator-hero__visual span { position:absolute; font-weight:950; line-height:1; }
.translator-page .translator-hero__visual span:nth-child(1) { inset:25px auto auto 28px; color:#237b72; font-size:3.8rem; }
.translator-page .translator-hero__visual span:nth-child(2) { inset:auto 23px 22px auto; color:#d19b42; font-size:3.3rem; }
.translator-page .translator-hero__visual span:nth-child(3) { color:rgba(24,67,84,.11); font-size:7.4rem; transform:rotate(4deg); }
.translator-page .translator-hero__copy { min-width:0; position:relative; z-index:1; }
.translator-page .translator-hero__eyebrow {
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.19);
  border-radius:999px;
  color:#dff8f0;
  background:rgba(255,255,255,.08);
  font-size:.68rem;
  font-weight:900;
  backdrop-filter:blur(10px);
}
.translator-page .translator-hero__eyebrow svg,.translator-page .translator-hero__meta svg { width:16px; height:16px; }
.translator-page .translator-hero h1 { margin:0; color:#fff; font-size:clamp(1.65rem,4vw,2.85rem); line-height:1.18; letter-spacing:-.025em; }
.translator-page .translator-hero p { max-width:760px; margin:10px 0 0; color:rgba(238,249,252,.8); font-size:.86rem; line-height:1.75; }
.translator-page .translator-hero__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.translator-page .translator-hero__meta>span { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:10px; color:#d8eee9; background:rgba(4,33,46,.24); font-size:.66rem; font-weight:800; }
.translator-page .translator-release {
  position:relative;
  z-index:1;
  min-width:150px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:3px 9px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:rgba(5,35,47,.27);
  backdrop-filter:blur(12px);
}
.translator-page .translator-release__pulse { grid-row:span 2; width:10px; height:10px; border-radius:50%; background:#54d69e; box-shadow:0 0 0 5px rgba(84,214,158,.13); }
.translator-page .translator-release strong { font-size:.73rem; }
.translator-page .translator-release small { color:#b8d8dc; font-size:.59rem; }
.translator-page .translator-workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:18px; align-items:start; }
.translator-page .translator-card { border:1px solid var(--translator-line); border-radius:25px; color:var(--translator-ink); background:rgba(255,254,251,.97); box-shadow:0 17px 45px rgba(28,63,72,.09); }
.translator-page .translator-studio { position:relative; overflow:visible; }
.translator-page .translator-toolbar {
  position:relative;
  z-index:25;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:end;
  gap:12px;
  padding:18px;
  border-bottom:1px solid var(--translator-line);
  border-radius:25px 25px 0 0;
  background:linear-gradient(180deg,#f8fbfa,#edf4f2);
}
.translator-page .translator-language { position:relative; min-width:0; display:grid; gap:7px; }
.translator-page .translator-language>label { padding-inline:3px; color:#46656f; font-size:.67rem; font-weight:900; }
.translator-page .translator-picker {
  width:100%;
  min-height:59px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:8px 13px;
  border:1px solid rgba(31,83,94,.16);
  border-radius:16px;
  color:var(--translator-ink);
  background:#fff;
  font:inherit;
  text-align:start;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(35,69,78,.045);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.translator-page .translator-picker:hover,.translator-page .translator-language.is-open .translator-picker { border-color:rgba(31,133,121,.48); box-shadow:0 0 0 4px rgba(31,133,121,.09); }
.translator-page .translator-picker:active { transform:translateY(1px); }
.translator-page .translator-picker__code { min-width:46px; height:36px; display:grid; place-items:center; padding:0 7px; border-radius:10px; color:#19766c; background:#e3f3ef; font-size:.62rem; font-weight:950; direction:ltr; }
.translator-page .translator-picker__label { overflow:hidden; color:#244b57; font-size:.82rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.translator-page .translator-picker>svg { width:17px; color:#6c858b; }
.translator-page .translator-language-menu {
  position:absolute;
  z-index:150;
  inset:calc(100% + 8px) 0 auto;
  overflow:hidden;
  padding:9px;
  border:1px solid rgba(27,75,88,.18);
  border-radius:18px;
  background:rgba(255,255,255,.99);
  box-shadow:0 25px 65px rgba(22,58,69,.22);
  animation:translator-menu-in .16s ease-out;
}
.translator-page .translator-language-menu[hidden] { display:none; }
.translator-page .translator-language-search { height:45px; display:flex; align-items:center; gap:8px; padding:0 11px; border:1px solid rgba(29,78,90,.13); border-radius:12px; color:#61808a; background:#eff5f4; }
.translator-page .translator-language-search svg { width:17px; flex:0 0 17px; }
.translator-page .translator-language-search input { width:100%; min-width:0; border:0; outline:0; color:#183d4a; background:transparent; font:inherit; font-size:.75rem; }
.translator-page .translator-language-list { max-height:300px; display:grid; gap:3px; overflow-y:auto; margin-top:7px; padding-inline-end:2px; overscroll-behavior:contain; }
.translator-page .translator-language-option { width:100%; min-height:48px; display:grid; grid-template-columns:46px minmax(0,1fr) 15px; align-items:center; gap:10px; padding:6px 9px; border:0; border-radius:11px; color:#244d5a; background:transparent; font:inherit; text-align:start; cursor:pointer; }
.translator-page .translator-language-option:hover,.translator-page .translator-language-option:focus-visible { outline:0; background:#edf6f3; }
.translator-page .translator-language-option[aria-selected="true"] { color:#176c63; background:#e1f2ed; }
.translator-page .translator-language-option>b { color:#638087; font-size:.58rem; direction:ltr; }
.translator-page .translator-language-option>span { min-width:0; display:grid; }
.translator-page .translator-language-option strong,.translator-page .translator-language-option small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.translator-page .translator-language-option strong { font-size:.73rem; }
.translator-page .translator-language-option small { color:#84979c; font-size:.59rem; }
.translator-page .translator-language-option i { width:7px; height:7px; border:2px solid #aec0c3; border-radius:50%; }
.translator-page .translator-language-option[aria-selected="true"] i { border-color:#218579; background:#218579; box-shadow:0 0 0 3px rgba(33,133,121,.13); }
.translator-page .translator-language-empty { margin:10px 4px 3px; color:#71888e; font-size:.7rem; text-align:center; }
.translator-page .translator-swap-wrap { display:grid; place-items:center; gap:5px; padding-bottom:2px; }
.translator-page .translator-swap { width:50px; height:50px; display:grid; place-items:center; padding:0; border:0; border-radius:16px; color:#fff; background:linear-gradient(135deg,#1d756e,#2b9982); box-shadow:0 10px 23px rgba(29,117,110,.25); cursor:pointer; transition:transform .18s,box-shadow .18s; }
.translator-page .translator-swap:hover { transform:rotate(6deg) scale(1.03); box-shadow:0 13px 27px rgba(29,117,110,.31); }
.translator-page .translator-swap svg { width:21px; }
.translator-page .translator-favorite { width:29px; height:29px; display:grid; place-items:center; padding:0; border:1px solid rgba(38,84,94,.13); border-radius:9px; color:#85989c; background:#fff; cursor:pointer; }
.translator-page .translator-favorite svg { width:14px; }
.translator-page .translator-favorite.is-active { border-color:rgba(211,160,75,.35); color:#b97818; background:#fff5df; }
.translator-page .translator-favorite.is-active svg { fill:currentColor; }
.translator-page .translator-pairbar { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 18px; border-bottom:1px solid var(--translator-line); background:#fffdfa; }
.translator-page .translator-pairbar>div { min-width:0; display:flex; align-items:center; gap:10px; }
.translator-page .translator-pairbar>div>strong { flex:0 0 auto; color:#6a8085; font-size:.61rem; }
.translator-page .translator-pair-chips { min-width:0; display:flex; gap:6px; overflow-x:auto; padding:2px; scrollbar-width:none; }
.translator-page .translator-pair-chips::-webkit-scrollbar { display:none; }
.translator-page .translator-pair-chip { flex:0 0 auto; min-height:29px; display:inline-flex; align-items:center; gap:3px; padding:5px 8px; border:1px solid rgba(32,80,89,.12); border-radius:999px; color:#527079; background:#f2f6f5; font:inherit; cursor:pointer; direction:ltr; }
.translator-page .translator-pair-chip b { font-size:.57rem; }
.translator-page .translator-pair-chip span { color:#c58a28; font-size:.6rem; }
.translator-page .translator-pair-chip:hover,.translator-page .translator-pair-chip.is-current { border-color:rgba(33,133,121,.28); color:#176d65; background:#e2f3ee; }
.translator-page .translator-auto-toggle { flex:0 0 auto; display:flex; align-items:center; gap:8px; color:#4e6b73; cursor:pointer; }
.translator-page .translator-auto-toggle input { position:absolute; opacity:0; pointer-events:none; }
.translator-page .translator-auto-toggle>span { position:relative; width:37px; height:21px; border-radius:999px; background:#c9d5d7; transition:background .18s; }
.translator-page .translator-auto-toggle>span::after { content:""; position:absolute; inset:3px auto auto 3px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(21,55,65,.22); transition:transform .18s; }
.translator-page .translator-auto-toggle input:checked+span { background:#218579; }
.translator-page .translator-auto-toggle input:checked+span::after { transform:translateX(16px); }
[dir="rtl"] .translator-page .translator-auto-toggle input:checked+span::after { transform:translateX(-16px); }
.translator-page .translator-auto-toggle input:focus-visible+span { outline:3px solid rgba(33,133,121,.2); outline-offset:2px; }
.translator-page .translator-auto-toggle b { font-size:.62rem; white-space:nowrap; }
.translator-page .translator-editors { display:grid; grid-template-columns:1fr 1fr; min-height:430px; }
.translator-page .translator-editor { min-width:0; min-height:430px; display:flex; flex-direction:column; padding:18px; }
.translator-page .translator-editor--output { border-inline-start:1px solid var(--translator-line); background:linear-gradient(155deg,#f1f7f5,#f8faf8); }
.translator-page .translator-editor__head { min-height:33px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.translator-page .translator-editor__label { color:#42616a; font-size:.69rem; font-weight:900; }
.translator-page .translator-editor__head-tools { display:flex; align-items:center; gap:7px; }
.translator-page .translator-count { direction:ltr; color:#71878c; font-size:.62rem; font-weight:800; }
.translator-page .translator-count.is-near-limit { color:#b05c41; }
.translator-page .translator-icon-action { width:34px; height:34px; display:grid; place-items:center; padding:0; border:1px solid rgba(33,82,92,.13); border-radius:10px; color:#367078; background:#f2f7f6; cursor:pointer; }
.translator-page .translator-icon-action svg { width:17px; }
.translator-page .translator-icon-action.is-active { color:#fff; background:#d65361; box-shadow:0 0 0 5px rgba(214,83,97,.12); animation:translator-listening 1.2s ease-in-out infinite; }
.translator-page .translator-text { box-sizing:border-box; width:100%; min-height:285px; flex:1; resize:vertical; padding:8px 4px; border:0; outline:0; color:#163b49; background:transparent; font:600 clamp(1rem,1.6vw,1.2rem)/1.9 "Noto Sans Arabic",Inter,sans-serif; unicode-bidi:plaintext; caret-color:#208376; }
.translator-page .translator-text::placeholder { color:#94a7ab; font-weight:500; }
.translator-page .translator-output { color:#1c5a57; cursor:text; }
.translator-page .translator-editor__footer { min-height:48px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:13px; }
.translator-page .translator-actions { display:flex; flex-wrap:wrap; gap:6px; }
.translator-page .translator-action { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 11px; border:1px solid rgba(30,79,90,.13); border-radius:11px; color:#315d66; background:#fff; font:inherit; font-size:.65rem; font-weight:900; cursor:pointer; transition:background .16s,border-color .16s,transform .16s; }
.translator-page .translator-action:hover:not(:disabled) { border-color:rgba(33,133,121,.28); background:#e9f4f1; transform:translateY(-1px); }
.translator-page .translator-action svg { width:16px; height:16px; }
.translator-page .translator-action.is-active { color:#fff; background:#218579; }
.translator-page .translator-submit { min-width:185px; min-height:47px; border:0; color:#fff; background:linear-gradient(135deg,#1a6d68,#2a947d); box-shadow:0 11px 26px rgba(27,111,103,.22); }
.translator-page .translator-submit:hover:not(:disabled) { color:#fff; background:linear-gradient(135deg,#155c58,#24836f); }
.translator-page .translator-submit kbd { margin-inline-start:4px; padding:3px 5px; border:1px solid rgba(255,255,255,.22); border-radius:5px; color:rgba(255,255,255,.8); background:rgba(0,0,0,.1); font:700 .5rem/1 inherit; direction:ltr; }
.translator-page .translator-action:disabled,.translator-page .translator-swap:disabled,.translator-page .translator-favorite:disabled,.translator-page .translator-picker:disabled { opacity:.47; cursor:not-allowed; transform:none; box-shadow:none; }
.translator-page .translator-output-actions { max-width:100%; }
.translator-page .translator-provider { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; color:#657e84; font-size:.56rem; font-weight:800; }
.translator-page .translator-provider i { width:7px; height:7px; border-radius:50%; background:#d39a35; }
.translator-page .translator-provider.is-ready i { background:#24a577; box-shadow:0 0 0 4px rgba(36,165,119,.11); }
.translator-page .translator-detected { display:inline-flex; padding:5px 8px; border-radius:999px; color:#22665e; background:#dceee9; font-size:.58rem; font-weight:850; }
.translator-page .translator-detected[hidden] { display:none; }
.translator-page .translator-status { min-height:62px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin:0; padding:11px 17px; border-top:1px solid var(--translator-line); border-radius:0 0 25px 25px; color:#45656c; background:#edf5f3; }
.translator-page .translator-status__icon { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:#1e7c69; background:#d9eee7; }
.translator-page .translator-status__icon svg { width:16px; }
.translator-page .translator-status>div { min-width:0; display:grid; gap:2px; }
.translator-page .translator-status strong { font-size:.68rem; line-height:1.45; }
.translator-page .translator-status small { color:inherit; opacity:.78; font-size:.6rem; line-height:1.45; }
.translator-page .translator-status__retry { display:inline-flex; align-items:center; gap:6px; min-height:35px; padding:6px 10px; border:1px solid currentColor; border-radius:10px; color:inherit; background:transparent; font:inherit; font-size:.6rem; font-weight:900; cursor:pointer; }
.translator-page .translator-status__retry[hidden] { display:none; }
.translator-page .translator-status.is-success { color:#176c55; background:#e6f5ed; }
.translator-page .translator-status.is-error { color:#963f45; background:#fff0ee; }
.translator-page .translator-status.is-quota { color:#835d20; background:#fff6df; }
.translator-page .translator-status.is-working .translator-status__icon { color:#fff; background:#288b7d; animation:translator-status-pulse 1.1s ease-in-out infinite; }
.translator-page .translator-side { display:grid; gap:16px; }
.translator-page .translator-history { overflow:hidden; }
.translator-page .translator-history__head { padding:17px 17px 10px; }
.translator-page .translator-history__title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.translator-page .translator-history__title>div { display:flex; align-items:center; gap:8px; }
.translator-page .translator-history__title>button { min-height:34px; display:flex; align-items:center; gap:5px; padding:0 10px; border:1px solid rgba(147,59,69,.13); border-radius:10px; color:#934352; background:#fff3f4; font:800 .55rem inherit; cursor:pointer; }
.translator-page .translator-history__title>button[hidden] { display:none; }
.translator-page .translator-history__head svg { width:18px; color:#218579; }
.translator-page .translator-history__title>button svg { width:14px; color:currentColor; }
.translator-page .translator-history h2,.translator-page .translator-info h2 { margin:0; color:#1c4653; font-size:.92rem; }
.translator-page .translator-history__head p { margin:5px 0 0; color:#75898e; font-size:.62rem; }
.translator-page .translator-history-list { max-height:510px; display:grid; gap:7px; overflow-y:auto; padding:0 10px 12px; }
.translator-page .translator-history-empty { padding:35px 12px; color:#7b8e91; text-align:center; font-size:.7rem; }
.translator-page .translator-history-item { position:relative; width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; border:1px solid rgba(33,83,89,.11); border-radius:14px; color:#264e56; background:#f6faf8; overflow:hidden; }
.translator-page .translator-history-item:hover { border-color:rgba(33,119,109,.32); background:#ecf6f2; }
.translator-page .translator-history-reuse { min-width:0; display:grid; gap:4px; padding:11px; border:0; color:inherit; background:transparent; font:inherit; text-align:start; cursor:pointer; }
.translator-page .translator-history-reuse>strong,.translator-page .translator-history-reuse>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.translator-page .translator-history-reuse>strong { font-size:.7rem; }
.translator-page .translator-history-reuse>span { color:#74868a; font-size:.61rem; }
.translator-page .translator-history-reuse>small { display:flex; justify-content:space-between; gap:8px; color:#2f776e; font-size:.55rem; direction:ltr; }
.translator-page .translator-history-item time { color:#8a9a9d; }
.translator-page .translator-history-remove { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:9px; color:#91606a; background:#fff; font:700 1.1rem/1 inherit; cursor:pointer; }
.translator-page .translator-history-remove:hover { color:#fff; background:#a44958; }
.translator-page .translator-info { display:grid; grid-template-columns:auto 1fr; gap:11px; padding:16px; }
.translator-page .translator-info__icon { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; color:#24776e; background:#def0eb; }
.translator-page .translator-info__icon svg { width:19px; }
.translator-page .translator-info p { margin:7px 0 0; color:#687f84; font-size:.66rem; line-height:1.65; }
.translator-page .translator-info details { margin-top:9px; }
.translator-page .translator-info summary { color:#327269; font-size:.63rem; font-weight:850; cursor:pointer; }
@keyframes translator-menu-in { from { opacity:0; transform:translateY(-6px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes translator-listening { 50% { box-shadow:0 0 0 9px rgba(214,83,97,.06); } }
@keyframes translator-status-pulse { 50% { opacity:.68; } }
@media(max-width:1080px) {
  .translator-page .translator-workspace { grid-template-columns:1fr; }
  .translator-page .translator-side { grid-template-columns:1fr 1fr; }
  .translator-page .translator-history-list { max-height:330px; }
}
@media(max-width:760px) {
  .translator-page .translator-hero { min-height:0; grid-template-columns:84px minmax(0,1fr); gap:17px; padding:21px; border-radius:23px; }
  .translator-page .translator-hero__visual { width:82px; height:82px; border-radius:25px; }
  .translator-page .translator-hero__visual span:nth-child(1) { inset:14px auto auto 14px; font-size:2rem; }
  .translator-page .translator-hero__visual span:nth-child(2) { inset:auto 12px 11px auto; font-size:1.7rem; }
  .translator-page .translator-hero__visual span:nth-child(3) { font-size:4rem; }
  .translator-page .translator-hero p { font-size:.72rem; }
  .translator-page .translator-hero__meta { margin-top:11px; }
  .translator-page .translator-release { grid-column:1/-1; width:max-content; min-width:0; padding:9px 12px; }
  .translator-page .translator-card { border-radius:20px; }
  .translator-page .translator-toolbar { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); padding:12px; gap:7px; border-radius:20px 20px 0 0; }
  .translator-page .translator-picker { min-height:53px; padding-inline:9px; gap:7px; }
  .translator-page .translator-picker__code { min-width:39px; height:33px; }
  .translator-page .translator-picker__label { font-size:.72rem; }
  .translator-page .translator-swap { width:44px; height:44px; border-radius:14px; }
  .translator-page .translator-pairbar { align-items:flex-start; flex-direction:column; padding:9px 12px; }
  .translator-page .translator-pairbar>div { width:100%; }
  .translator-page .translator-editors { grid-template-columns:1fr; min-height:0; }
  .translator-page .translator-editor { min-height:315px; padding:14px; }
  .translator-page .translator-editor--output { border-inline-start:0; border-top:1px solid var(--translator-line); }
  .translator-page .translator-text { min-height:190px; font-size:1rem; }
  .translator-page .translator-status { border-radius:0 0 20px 20px; }
  .translator-page .translator-side { grid-template-columns:1fr; }
}
@media(max-width:520px) {
  .translator-page .translator-hero { display:block; }
  .translator-page .translator-hero__visual { float:inline-start; margin:0 0 10px 14px; }
  .translator-page .translator-hero__meta>span:first-child { display:none; }
  .translator-page .translator-release { clear:both; }
  .translator-page .translator-toolbar { grid-template-columns:1fr auto; align-items:end; }
  .translator-page .translator-language--target { grid-column:1/-1; }
  .translator-page .translator-swap-wrap { grid-column:2; grid-row:1; }
  .translator-page .translator-language-menu { position:fixed; z-index:500; inset:auto 10px calc(72px + env(safe-area-inset-bottom,0px)); max-height:70dvh; }
  .translator-page .translator-language-list { max-height:calc(70dvh - 72px); }
  .translator-page .translator-pairbar>div { display:grid; gap:6px; }
  .translator-page .translator-editor__footer { align-items:stretch; flex-direction:column-reverse; }
  .translator-page .translator-submit { width:100%; }
  .translator-page .translator-submit kbd { display:none; }
  .translator-page .translator-editor__footer--output { flex-direction:column; }
  .translator-page .translator-output-actions { width:100%; display:grid; grid-template-columns:repeat(2,1fr); }
  .translator-page .translator-provider { align-self:flex-end; }
  .translator-page .translator-status { grid-template-columns:auto minmax(0,1fr); }
  .translator-page .translator-status__retry { grid-column:1/-1; justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  .translator-page .translator-language-menu,.translator-page .translator-icon-action.is-active,.translator-page .translator-status.is-working .translator-status__icon { animation:none; }
  .translator-page .translator-picker,.translator-page .translator-swap,.translator-page .translator-action { transition:none; }
}

/* v4.4.12 Instagram-inspired app dock. The desktop sidebar remains the full
   navigation; this reachable five-section dock is dedicated to phones. */
.mobile-app-nav { display:none; }
@media (max-width:760px) {
  body.app-shell .mobile-app-nav {
    position:fixed;
    z-index:82;
    inset-inline:0;
    bottom:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    min-height:calc(66px + env(safe-area-inset-bottom));
    padding:7px 8px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(22,50,68,.13);
    background:rgba(255,255,255,.96);
    box-shadow:0 -10px 32px rgba(23,61,84,.13);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    backdrop-filter:blur(20px) saturate(1.3);
  }
  body.app-shell .mobile-app-nav a {
    position:relative;
    display:flex;
    min-width:0;
    min-height:52px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:14px;
    color:#607685;
    font-size:.59rem;
    font-weight:750;
    line-height:1;
    text-align:center;
    text-decoration:none;
  }
  body.app-shell .mobile-app-nav a > span:last-child {
    max-width:100%;
    overflow:hidden;
    padding-inline:2px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.app-shell .mobile-app-nav__icon,
  body.app-shell .mobile-app-nav__icon svg { width:24px; height:24px; }
  body.app-shell .mobile-app-nav a.active { color:#153f5a; background:#edf6f8; }
  body.app-shell .mobile-app-nav a.active::before {
    content:"";
    position:absolute;
    inset:2px 30% auto;
    height:3px;
    border-radius:0 0 4px 4px;
    background:linear-gradient(90deg,#d71920,#ffca28,#25a95a);
  }
  body.app-shell .mobile-app-nav__messages .mobile-app-nav__icon {
    display:grid;
    width:36px;
    height:31px;
    place-items:center;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(145deg,#20718a,#2d9a79);
    box-shadow:0 7px 15px rgba(31,113,134,.24);
  }
  body.app-shell .mobile-app-nav__messages .mobile-app-nav__icon svg { width:19px; height:19px; }
  body.app-shell .mobile-app-nav__profile .avatar {
    width:27px;
    height:27px;
    border:2px solid transparent;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7) border-box;
    font-size:.66rem;
  }
  body.app-shell:not(.chat-page) .app-main { padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
  body.chat-page:not(.chat-conversation-open) .conversation-list { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  body.chat-conversation-open .mobile-app-nav { display:none; }
  body.sidebar-open .mobile-app-nav { visibility:hidden; pointer-events:none; }
  body.app-shell:not(.chat-call-open) .toast-region { bottom:calc(82px + env(safe-area-inset-bottom)); }
}

/* v4.4.12 — polished contact hub and Instagram-style mobile dock. */
.chat-contact-info-card {
  width:min(520px,calc(100vw - 28px));
  max-height:min(860px,calc(100dvh - 28px));
  overflow:hidden;
  border:1px solid rgba(26,72,96,.12);
  border-radius:30px;
  background:#f5f9fa;
  box-shadow:0 30px 90px rgba(13,43,61,.28);
}
.chat-contact-info-card .modal-header { padding:14px 16px; border-bottom:0; background:#fff; }
.chat-contact-info-card .modal-header h2 { font-size:.86rem; }
.chat-contact-info-card .modal-body { display:grid; gap:12px; overflow:auto; padding:0 13px 18px; }
.chat-contact-info-card .modal-footer { display:none; }
.chat-profile-card {
  position:relative;
  overflow:hidden;
  margin:0 -1px;
  padding:24px 18px 20px;
  border-radius:25px;
  color:#fff;
  background:
    radial-gradient(circle at 15% 0,rgba(68,196,170,.3),transparent 38%),
    radial-gradient(circle at 92% 105%,rgba(234,183,77,.27),transparent 42%),
    linear-gradient(145deg,#123b55,#175a68 58%,#234b58);
  box-shadow:0 15px 35px rgba(20,64,83,.2);
}
.chat-profile-card::before { content:""; position:absolute; inset:-55% 48% 40% -20%; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.chat-profile-card .avatar { position:relative; width:96px; height:96px; margin-bottom:10px; border:4px solid rgba(255,255,255,.92); box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:1.7rem; }
.chat-profile-card h3 { position:relative; color:#fff; font-size:1.35rem; }
.chat-profile-card p { position:relative; color:rgba(255,255,255,.72); }
.chat-profile-presence { position:absolute; top:99px; left:calc(50% + 25px); z-index:2; width:17px; height:17px; border:3px solid #fff; border-radius:50%; background:#22b77b; }
[dir="rtl"] .chat-profile-presence { right:calc(50% + 25px); left:auto; }
.chat-profile-card .chat-details-profile-actions { position:relative; gap:9px; }
.chat-profile-card .chat-details-profile-actions button { min-width:82px; min-height:58px; border-color:rgba(255,255,255,.18); color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.chat-profile-card .chat-details-profile-actions button:hover { background:rgba(255,255,255,.2); }
.chat-contact-info-card .chat-details-section { padding:15px; border:1px solid rgba(27,70,92,.09); border-radius:20px; background:#fff; }
.chat-friendship-section .chat-details-section-heading a { color:#237a69; font-size:.6rem; font-weight:800; }
.chat-friend-action,.chat-friend-state,.chat-friend-request { width:100%; min-height:62px; border:0; border-radius:16px; color:#173f56; background:#edf6f4; }
.chat-friend-action { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:11px; padding:10px 13px; text-align:start; cursor:pointer; }
.chat-friend-action>svg { width:42px; height:42px; padding:10px; border-radius:13px; color:#fff; background:linear-gradient(145deg,#176b82,#27966f); }
.chat-friend-action span,.chat-friend-state span { display:grid; gap:2px; }
.chat-friend-action strong,.chat-friend-state strong { font-size:.72rem; }
.chat-friend-action small,.chat-friend-state small { color:#68818c; font-size:.56rem; }
.chat-friend-state { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 12px; }
.chat-friend-state>svg { width:24px; color:#25866e; }
.chat-friend-state>button { min-height:36px; padding:0 11px; border:0; border-radius:11px; color:#8b3442; background:#fff; font:800 .57rem inherit; }
.chat-friend-state.is-pending>svg { color:#b37a18; }
.chat-friend-request { display:grid; gap:10px; padding:12px; }
.chat-friend-request>span { display:flex; align-items:center; gap:8px; }
.chat-friend-request>span svg { width:22px; color:#25866e; }
.chat-friend-request>span b { font-size:.7rem; }
.chat-friend-request>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.chat-friend-request button { min-height:39px; border:0; border-radius:12px; color:#fff; background:#26856f; font:800 .62rem inherit; }
.chat-friend-request button.secondary { color:#48636f; background:#fff; }
.chat-details-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:12px; }
.chat-details-tab { position:relative; display:grid; min-width:0; min-height:56px; place-items:center; align-content:center; gap:3px; padding:6px 3px; border:1px solid transparent; border-radius:14px; color:#6a818c; background:#eef4f5; cursor:pointer; }
.chat-details-tab svg { width:19px; height:19px; }
.chat-details-tab span { max-width:100%; overflow:hidden; font-size:.52rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.chat-details-tab b { position:absolute; top:4px; inset-inline-end:5px; min-width:18px; height:18px; display:grid; place-items:center; border-radius:99px; background:rgba(255,255,255,.9); font-size:.48rem; }
.chat-details-tab.active { border-color:rgba(35,128,106,.2); color:#fff; background:linear-gradient(145deg,#1d657d,#298e70); box-shadow:0 8px 18px rgba(28,108,102,.2); }
.chat-details-tab.active b { color:#236e61; }
.chat-details-panel { min-height:92px; }
.chat-details-panel .chat-details-empty { min-height:82px; display:grid; place-items:center; margin:0!important; border:1px dashed rgba(31,88,111,.16); border-radius:15px; color:#718993; background:#f8fbfb; font-size:.62rem; text-align:center; }
.chat-details-voice-list a { background:linear-gradient(90deg,#ecf8f3,#f7fbfa); }
.chat-details-safety { overflow:hidden; border:1px solid rgba(28,68,88,.09); border-radius:18px; background:#fff; }
.chat-details-safety summary { display:grid; grid-template-columns:28px minmax(0,1fr) 20px; min-height:54px; align-items:center; gap:8px; padding:0 14px; color:#466471; cursor:pointer; list-style:none; font-size:.66rem; font-weight:800; }
.chat-details-safety summary::-webkit-details-marker { display:none; }
.chat-details-safety summary>svg:first-child { color:#27846e; }
.chat-details-safety[open] summary>svg:last-child { transform:rotate(180deg); }
.chat-details-safety .chat-details-section { border:0; border-top:1px solid rgba(28,68,88,.08); border-radius:0; }

@media (max-width:760px) {
  body.app-shell .mobile-app-nav {
    inset-inline:0;
    bottom:0;
    min-height:calc(64px + env(safe-area-inset-bottom));
    padding:5px 12px calc(5px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid rgba(18,47,64,.12);
    border-radius:0;
    background:rgba(255,255,255,.98);
    box-shadow:0 -8px 28px rgba(15,47,67,.09);
  }
  body.app-shell .mobile-app-nav a { min-height:54px; gap:0; border-radius:16px; color:#607481; font-size:.52rem; font-weight:800; transition:transform .18s ease,color .18s ease; }
  body.app-shell .mobile-app-nav a:active { transform:scale(.92); }
  body.app-shell .mobile-app-nav a>span:last-child { display:none; }
  body.app-shell .mobile-app-nav__icon { display:grid; width:44px; height:42px; place-items:center; border-radius:15px; }
  body.app-shell .mobile-app-nav__icon svg { width:27px; height:27px; stroke-width:2.25; }
  body.app-shell .mobile-app-nav a.active { color:#102f43; background:transparent; }
  body.app-shell .mobile-app-nav a.active::before { display:none; }
  body.app-shell .mobile-app-nav a.active .mobile-app-nav__icon { color:#102f43; background:#edf4f6; box-shadow:none; }
  body.app-shell .mobile-app-nav__messages .mobile-app-nav__icon,
  body.app-shell .mobile-app-nav__messages.active .mobile-app-nav__icon { width:44px; height:42px; color:inherit; background:transparent; box-shadow:none; }
  body.app-shell .mobile-app-nav__profile .avatar { width:36px; height:36px; }
  body.app-shell .mobile-app-nav__profile.active .avatar { border-width:3px; box-shadow:0 0 0 3px rgba(35,130,106,.13); }
  body.app-shell:not(.chat-page) .app-main { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  body.chat-page:not(.chat-conversation-open) .conversation-list { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .chat-contact-info-modal { align-items:flex-end; padding:0; }
  .chat-contact-info-card { width:100%; max-height:94dvh; border-radius:28px 28px 0 0; }
}

@media (max-width:370px) {
  body.app-shell .mobile-app-nav a>span:last-child { display:none; }
  body.app-shell .mobile-app-nav { min-height:62px; }
  .chat-profile-card .chat-details-profile-actions button { min-width:72px; }
}
[hidden] { display:none !important; }

/* v3.0 — native-feeling chat media and immersive tournament tables. */
.composer-attach-menu { position:absolute; z-index:45; inset-inline-start:58px; bottom:70px; width:280px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; border:1px solid rgba(37,83,108,.16); border-radius:20px; background:#fff; box-shadow:0 20px 55px rgba(25,62,84,.24); }
.composer-attach-menu[hidden] { display:none; }
.composer-attach-menu button { min-width:0; display:grid; justify-items:center; gap:7px; padding:8px 4px; border:0; border-radius:14px; color:#35576a; background:transparent; font:inherit; cursor:pointer; }
.composer-attach-menu button:hover { background:#edf4f6; }
.composer-attach-menu strong { font-size:.58rem; }
.attach-menu-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:17px; color:#fff; box-shadow:0 8px 18px rgba(34,74,96,.18); }
.attach-menu-icon svg { width:22px; }
.attach-menu-icon.camera { background:linear-gradient(145deg,#e06563,#b83f58); }
.attach-menu-icon.photos { background:linear-gradient(145deg,#8e6ada,#6442b6); }
.attach-menu-icon.document { background:linear-gradient(145deg,#3a92b6,#26728f); }
.attachment-preview.attachment-image { display:block; width:min(420px,100%); overflow:hidden; padding:0; border:0; border-radius:11px; background:#d6e2e6; cursor:zoom-in; }
.attachment-image img { display:block; width:100%; max-width:none; max-height:420px; object-fit:cover; }
.message-bubble:has(.attachment-image):not(:has(.message-text)) { padding:4px 4px 5px; }
.message-bubble:has(.attachment-image):not(:has(.message-text)) .message-meta { padding-inline:5px; }
.chat-media-viewer { position:fixed; z-index:10000; inset:0; display:grid; grid-template-rows:auto 1fr; color:#fff; background:rgba(3,12,18,.96); backdrop-filter:blur(18px); }
.chat-media-viewer[hidden] { display:none; }
.chat-media-viewer__toolbar { min-height:66px; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:12px; padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,255,255,.1); }
.chat-media-viewer__toolbar .icon-btn { color:#fff; border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.08); }
.chat-media-viewer__toolbar strong { overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.chat-media-viewer__stage { min-height:0; display:grid; place-items:center; padding:18px; cursor:zoom-out; }
.chat-media-viewer__stage img { max-width:min(95vw,1500px); max-height:calc(100dvh - 105px); object-fit:contain; border-radius:8px; box-shadow:0 24px 80px rgba(0,0,0,.4); }
body.chat-media-open { overflow:hidden; }
.chat-details-media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:10px 0 14px; }
.chat-details-media-grid button { aspect-ratio:1; overflow:hidden; padding:0; border:0; border-radius:8px; background:#d8e5e9; cursor:pointer; }
.chat-details-media-grid img { width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.chat-details-media-grid button:hover img { transform:scale(1.05); }
.chat-details-empty { margin:8px 0 14px !important; }
.chat-details-documents { display:grid; gap:6px; margin-top:10px; }
.chat-details-documents a { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) 24px; align-items:center; gap:9px; padding:8px; border:1px solid rgba(36,82,110,.12); border-radius:11px; color:#244e66; background:#edf4f6; }
.chat-details-documents a > svg { width:18px; }
.chat-details-documents a span { min-width:0; display:grid; gap:2px; }
.chat-details-documents strong,.chat-details-documents small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-details-documents strong { font-size:.6rem; }.chat-details-documents small { color:#6d8592; font-size:.5rem; }
.chat-details-danger .btn { display:flex; align-items:center; justify-content:center; gap:8px; }
.chat-details-danger .btn svg { width:17px; }

.games-page .page { max-width:1600px; }
.games-app-pro { grid-template-columns:240px minmax(0,1fr); align-items:start; gap:18px; }
.games-app-pro .game-stage { position:relative; overflow:hidden; min-height:720px; border:1px solid rgba(57,42,38,.16); border-radius:26px; background:linear-gradient(155deg,#f8f3e8,#e7ddd0); box-shadow:0 25px 60px rgba(49,38,37,.18); }
.game-stage__header { position:relative; z-index:8; }
.game-match-hud { max-width:980px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin:0 auto 12px; }
.game-player-seat { position:relative; min-width:0; display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:16px; color:#f7f0e7; background:linear-gradient(145deg,#263848,#182735); box-shadow:0 9px 22px rgba(25,24,27,.2); }
.game-player-seat.human { flex-direction:row-reverse; text-align:end; background:linear-gradient(145deg,#8e5f36,#603c25); }
.game-player-seat > span:not(.game-player-avatar) { min-width:0; display:grid; gap:1px; }
.game-player-seat small { color:#c7d2d8; font-size:.49rem; }.game-player-seat strong { overflow:hidden; font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.game-player-seat.human small { color:#f1d8ba; }
.game-player-avatar { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border:2px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:linear-gradient(145deg,#4c89a4,#285a73); box-shadow:0 5px 15px rgba(0,0,0,.25); font-style:normal; font-size:.78rem; font-weight:900; }
.game-player-seat.human .game-player-avatar { background:linear-gradient(145deg,#e8b35e,#a7602f); }
.game-player-seat em { position:absolute; right:9px; top:9px; width:7px; height:7px; border-radius:50%; background:#30d276; box-shadow:0 0 0 4px rgba(48,210,118,.13); }
.game-player-seat.human em { right:auto; left:9px; }
[data-turn="human"] .game-player-seat.human,[data-turn="computer"] .game-player-seat.opponent { box-shadow:0 0 0 2px #f2c86e,0 12px 28px rgba(41,29,23,.24); }
.game-match-hud .bg-dice-box { min-width:112px; display:grid; justify-items:center; gap:4px; padding:7px 12px; border:1px solid rgba(76,55,43,.14); border-radius:16px; background:#fff9ed; box-shadow:0 8px 20px rgba(62,44,35,.12); }
.game-match-hud .bg-dice-box small { color:#766258; font-size:.48rem; }
.game-match-hud .bg-dice-box b { display:flex; gap:7px; }
.game-match-hud .bg-dice-box i { width:35px; height:35px; border-radius:9px; color:#332d2e; background:linear-gradient(145deg,#fff,#eee3d2); box-shadow:inset 0 0 0 1px rgba(64,49,44,.12),0 5px 12px rgba(50,38,34,.17); font-size:.84rem; }
.backgammon-cabinet { position:relative; max-width:980px; margin:auto; padding:13px; border:1px solid #4b2819; border-radius:25px; background:repeating-linear-gradient(98deg,rgba(255,255,255,.035) 0 2px,transparent 2px 11px),linear-gradient(145deg,#9c6236,#5e3521 52%,#a76d3d); box-shadow:inset 0 0 0 4px rgba(255,205,128,.12),inset 0 0 30px rgba(38,17,8,.32),0 24px 50px rgba(51,31,22,.3); }
.backgammon-cabinet::before,.backgammon-cabinet::after { content:""; position:absolute; z-index:8; left:50%; width:22px; height:11px; transform:translateX(-50%); border:1px solid #3c291f; border-radius:3px; background:linear-gradient(#d9b66b,#8b6630); box-shadow:0 2px 5px rgba(0,0,0,.35); }
.backgammon-cabinet::before { top:2px; }.backgammon-cabinet::after { bottom:2px; }
.backgammon-board { width:100%; min-width:0; min-height:0; aspect-ratio:1.72/1; padding:12px 60px 12px 12px; border:3px solid #3d2319; border-radius:14px; background:linear-gradient(90deg,#543126 49.4%,#2e201d 49.4% 50.6%,#543126 50.6%); box-shadow:inset 0 0 0 2px rgba(255,227,177,.12); }
[dir="rtl"] .backgammon-board { padding:12px 12px 12px 60px; }
.backgammon-points { height:100%; min-height:0; border:1px solid rgba(53,25,17,.72); background:linear-gradient(90deg,rgba(0,0,0,.07) 49.5%,rgba(255,255,255,.05) 50%),linear-gradient(145deg,#d2a36a,#b77d4e); box-shadow:inset 0 8px 25px rgba(66,31,18,.16),inset 0 -8px 25px rgba(66,31,18,.14); }
.bg-point::before { opacity:1; filter:drop-shadow(0 1px rgba(255,255,255,.12)); }
.bg-point--top::before { background:#e7c386; }.bg-point--bottom::before { background:#e7c386; }
.bg-point:nth-child(even)::before { background:#703649; }
.bg-checker { width:clamp(21px,3.15vw,35px); height:clamp(21px,3.15vw,35px); border-width:2px !important; box-shadow:inset 0 3px 5px rgba(255,255,255,.55),inset 0 -3px 5px rgba(48,25,18,.25),0 3px 6px rgba(42,24,17,.42); }
.bg-checker.human { border-color:#f2e2c3; background:radial-gradient(circle at 36% 26%,#fff7df,#dec18e 57%,#9c7445); }
.bg-checker.computer { border-color:#33212a; background:radial-gradient(circle at 36% 26%,#906070,#593342 56%,#241a20); }
.bg-bar { inset:12px auto 12px 46.4%; color:#f1d5a5; background:linear-gradient(90deg,#2b1b19,#5a3228 48%,#2b1b19); }
.bg-off { width:45px; inset-inline-end:7px; border-color:rgba(55,30,22,.42); }
.bg-off--computer { top:12px; bottom:51%; background:linear-gradient(#4c2e39,#2d2027); }.bg-off--human { top:51%; bottom:12px; background:linear-gradient(#f4e3bf,#cda873); }

.game-stage--dominoes { background:linear-gradient(155deg,#211b21,#382b2b) !important; }
.game-stage--dominoes .game-stage__header span { color:#cbbfc0; }.game-stage--dominoes .game-stage__header strong { color:#fff5e9; }
.domino-table { position:relative; max-width:1050px; min-height:590px; margin:auto; gap:10px; overflow:hidden; padding:16px 20px 14px; border:13px solid #5c321e; border-radius:38px; background:radial-gradient(ellipse at 50% 38%,rgba(61,164,105,.3),transparent 55%),linear-gradient(145deg,#17603d,#0f452f 62%,#0b3829); box-shadow:inset 0 0 0 3px rgba(224,171,98,.2),inset 0 0 70px rgba(0,0,0,.35),0 28px 60px rgba(10,9,12,.38); }
.domino-table::before { content:""; position:absolute; inset:-7px; pointer-events:none; border:1px solid rgba(255,215,147,.22); border-radius:27px; background:repeating-linear-gradient(105deg,rgba(255,255,255,.025) 0 2px,transparent 2px 12px); }
.domino-table-light { position:absolute; inset:-25% 10% auto; height:65%; pointer-events:none; background:radial-gradient(ellipse,rgba(101,222,151,.13),transparent 65%); }
.domino-table .game-player-seat { z-index:2; width:min(270px,72%); align-self:center; }
.domino-table .domino-opponent { margin-top:-2px; }
.domino-table .domino-player { margin-top:auto; }
.game-seat-score { min-width:40px; height:34px; display:grid; place-items:center; margin-inline-start:auto; border-radius:10px; color:#ffd875; background:rgba(5,19,16,.45); font-size:.78rem; }
.domino-chain-wrap { position:relative; z-index:2; min-height:240px; padding:24px; border:1px solid rgba(255,255,255,.08); border-radius:22px; background:rgba(3,33,22,.26); box-shadow:inset 0 12px 45px rgba(0,0,0,.16); }
.domino-chain { gap:2px; padding-block:20px; }
.domino-chain .domino-tile { width:74px; height:40px; grid-template:1fr/1fr 2px 1fr; flex-basis:74px; padding:4px 5px; }
.domino-chain .domino-tile.is-double { width:40px; height:74px; grid-template:1fr 2px 1fr/1fr; flex-basis:40px; margin-inline:4px; }
.domino-chain .domino-tile > b { width:2px; height:100%; }.domino-chain .domino-tile.is-double > b { width:100%; height:2px; }
.domino-tile { border:1px solid #c9b997; color:#2a2725; background:linear-gradient(145deg,#fffbea,#ddd0ae); box-shadow:inset 1px 1px #fff, inset -1px -1px rgba(112,85,49,.25),0 6px 12px rgba(0,0,0,.35); }
.domino-pips i { background:#2d2425; box-shadow:inset 0 1px 1px rgba(0,0,0,.45); }
.domino-controls { position:relative; z-index:3; }
.domino-controls > small { color:#bddcca; }
.domino-stock { min-width:190px; display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:16px; color:#fff; background:rgba(4,34,24,.55); font:inherit; cursor:pointer; }
.domino-stock:disabled { opacity:.45; cursor:not-allowed; }
.domino-stock > span:nth-child(2) { display:grid; gap:2px; text-align:start; font-size:.6rem; font-weight:900; }.domino-stock small { color:#a7d1bb; font-size:.48rem; }
.domino-stock > b { margin-inline-start:auto; color:#ffd875; }
.domino-stock__tiles { position:relative; width:38px; height:42px; flex:0 0 38px; }
.domino-stock__tiles i { position:absolute; width:26px; height:38px; border:1px solid #bcae90; border-radius:5px; background:linear-gradient(145deg,#f8f1dc,#d6c7a6); box-shadow:0 3px 6px rgba(0,0,0,.28); }
.domino-stock__tiles i:nth-child(1) { left:0; transform:rotate(-10deg); }.domino-stock__tiles i:nth-child(2) { left:6px; }.domino-stock__tiles i:nth-child(3) { left:12px; transform:rotate(8deg); }
.domino-hand-label { position:relative; z-index:2; text-align:center; }
.domino-hand { position:relative; z-index:2; min-height:105px; overflow-x:auto; scrollbar-width:none; }
.domino-hand::-webkit-scrollbar { display:none; }
.domino-hand .domino-tile { width:48px; height:86px; flex-basis:48px; }
.domino-side-picker { position:absolute; z-index:10; left:50%; top:48%; width:min(320px,88%); transform:translate(-50%,-50%); padding:12px; border:1px solid rgba(255,255,255,.15); border-radius:17px; background:rgba(5,31,24,.94); box-shadow:0 20px 45px rgba(0,0,0,.35); }

@media (max-width:760px) {
  .composer-attach-menu { inset-inline-start:8px; bottom:68px; width:min(280px,calc(100vw - 16px)); }
  .chat-media-viewer__stage { padding:8px; }
  .games-app-pro .game-stage { min-height:0; padding:10px; border-radius:20px; }
  .game-match-hud { gap:6px; margin-bottom:8px; }
  .game-player-seat { gap:5px; padding:5px 7px; border-radius:12px; }
  .game-player-avatar { width:30px; height:30px; flex-basis:30px; font-size:.62rem; }
  .game-player-seat small { font-size:.4rem; }.game-player-seat strong { font-size:.5rem; }
  .game-match-hud .bg-dice-box { min-width:82px; padding:5px 7px; border-radius:12px; }
  .game-match-hud .bg-dice-box i { width:28px; height:28px; border-radius:7px; }
  .backgammon-cabinet { padding:6px; border-radius:15px; }
  .backgammon-board { aspect-ratio:1.44/1; padding:6px 34px 6px 6px; border-width:2px; border-radius:9px; }
  [dir="rtl"] .backgammon-board { padding:6px 6px 6px 34px; }
  .bg-point { padding:1px 0; }.bg-point::before { inset:0 1px; }
  .bg-checker { width:clamp(13px,4.6vw,21px); height:clamp(13px,4.6vw,21px); margin-top:-2px; border-width:1px !important; }
  .bg-checker-count { min-width:15px; padding:1px 3px; font-size:.38rem; }
  .bg-bar { inset:6px auto 6px 46.4%; padding:1px; }
  .bg-bar small { display:none; }.bg-off { width:25px; inset-inline-end:3px; padding:1px; border-radius:5px; }
  .bg-off--computer { top:6px; }.bg-off--human { bottom:6px; }.bg-off small { display:none; }
  .domino-table { min-height:520px; gap:7px; padding:10px 8px 9px; border-width:7px; border-radius:23px; }
  .domino-table .game-player-seat { width:min(230px,78%); }
  .game-seat-score { min-width:34px; height:30px; }
  .domino-chain-wrap { min-height:190px; padding:12px 8px; border-radius:16px; }
  .domino-chain { justify-content:flex-start; padding-block:14px; }
  .domino-chain .domino-tile { width:62px; height:34px; flex-basis:62px; }
  .domino-chain .domino-tile.is-double { width:34px; height:62px; flex-basis:34px; }
  .domino-controls { align-items:center; flex-direction:row; }
  .domino-controls > small { max-width:120px; font-size:.43rem; }
  .domino-stock { min-width:150px; padding:6px 8px; }
  .domino-stock__tiles { transform:scale(.82); margin:-4px; }
  .domino-hand { justify-content:flex-start; min-height:90px; gap:5px; }
  .domino-hand .domino-tile { width:42px; height:76px; flex-basis:42px; }
}

/* Kani account controls and notification affordances */
.brand-mark { color:#fff; font-weight:900; font-size:1rem; }
.profile-menu-wrap { position:relative; }
.profile-trigger { min-height:46px; display:flex; align-items:center; gap:9px; padding:4px 9px 4px 5px; border:1px solid var(--border); border-radius:999px; color:var(--ink); background:#fff; box-shadow:0 7px 20px rgba(39,66,78,.1); cursor:pointer; }
.profile-trigger:hover,.profile-trigger[aria-expanded="true"] { border-color:#69a9b5; background:#f5fbfa; }
.profile-trigger__name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; font-weight:800; }
.profile-trigger__chevron { display:grid; width:18px; transition:transform .2s ease; }
.profile-trigger[aria-expanded="true"] .profile-trigger__chevron { transform:rotate(180deg); }
.profile-dropdown { position:absolute; z-index:250; inset-block-start:calc(100% + 10px); inset-inline-end:0; width:min(326px,calc(100vw - 24px)); padding:10px; border:1px solid rgba(38,83,92,.14); border-radius:23px; background:rgba(255,255,255,.98); box-shadow:0 24px 60px rgba(27,57,68,.24); animation:profile-pop .18s ease-out; }
.profile-dropdown[hidden] { display:none; }
.profile-dropdown__identity { display:flex; align-items:center; gap:10px; margin-bottom:6px; padding:10px; border-radius:14px; background:linear-gradient(135deg,#eaf6f3,#eef3fa); }
.profile-dropdown__identity div { min-width:0; display:grid; gap:2px; }
.profile-dropdown__identity strong,.profile-dropdown__identity span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-dropdown__identity span { color:var(--muted); font-size:.64rem; }
.profile-dropdown__quick { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:7px 0 9px; }
.profile-dropdown .profile-dropdown__quick a { min-height:70px; display:grid; justify-items:center; align-content:center; gap:6px; padding:7px 4px; border:1px solid rgba(31,91,104,.1); color:#1c5967; background:linear-gradient(145deg,#edf7f5,#f6f9fb); text-align:center; }
.profile-dropdown .profile-dropdown__quick a:hover { border-color:rgba(31,127,108,.22); background:#e5f4ef; transform:translateY(-1px); }
.profile-dropdown__quick a span { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(145deg,#1c6178,#29916f); }
.profile-dropdown__quick a span svg { width:16px; height:16px; }
.profile-dropdown__quick b { max-width:100%; overflow:hidden; font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-dropdown__label { margin:5px 8px 3px; color:#77909a; font-size:.52rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.profile-dropdown a,.profile-dropdown button { width:100%; min-height:44px; display:flex; align-items:center; gap:11px; padding:9px 11px; border:0; border-radius:12px; color:#173947; background:transparent; text-decoration:none; font:inherit; font-size:.75rem; font-weight:750; cursor:pointer; }
.profile-dropdown a:hover,.profile-dropdown button:hover { background:#edf6f5; }
.profile-dropdown form { margin:5px 0 0; padding-top:5px; border-top:1px solid var(--border); }
.profile-dropdown form button { color:#a23c4c; }
.profile-dropdown svg { width:19px; height:19px; }
.topbar-notification { position:relative; }
.notification-badge { position:absolute; inset-block-start:-4px; inset-inline-end:-5px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff; border-radius:999px; color:#fff; background:#d94d62; font-size:.5rem; font-weight:900; }
@keyframes profile-pop { from { opacity:0; transform:translateY(-5px) scale(.97); } to { opacity:1; transform:none; } }
@media (max-width:620px) { .profile-trigger__name,.profile-trigger__chevron { display:none; }.profile-trigger { min-height:auto; padding:0; border:0; box-shadow:none; background:transparent; } }

.notifications-page .page { background:linear-gradient(150deg,#f6faf8 0%,#edf4f6 50%,#f9f6ee 100%); }
.notifications-hero { padding:clamp(20px,3vw,38px); border:1px solid rgba(42,100,104,.14); border-radius:28px; background:radial-gradient(circle at 15% 20%,rgba(69,155,146,.14),transparent 40%),#fff; box-shadow:0 20px 50px rgba(42,78,86,.09); }
.notification-layout { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(420px,1.2fr); gap:20px; margin-top:20px; }
.notification-panel { min-width:0; padding:clamp(16px,2.5vw,26px); border:1px solid rgba(41,91,99,.14); border-radius:25px; background:rgba(255,255,255,.94); box-shadow:0 16px 44px rgba(37,70,78,.08); }
.notification-panel .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.notification-panel h2 { margin:2px 0 0; font-size:clamp(1rem,2vw,1.35rem); }
.notification-list { display:grid; gap:9px; }
.notification-skeleton { height:82px; border-radius:17px; background:linear-gradient(90deg,#edf2f2,#f8fbfb,#edf2f2); background-size:200% 100%; animation:skeleton-wave 1.4s infinite; }
.contact-request-card,.notification-card { min-width:0; display:flex; align-items:center; gap:12px; padding:13px; border:1px solid rgba(49,101,106,.12); border-radius:17px; color:var(--ink); background:#fbfdfc; text-decoration:none; transition:.2s ease; }
.contact-request-card:hover,.notification-card:hover { border-color:rgba(40,132,129,.35); transform:translateY(-1px); box-shadow:0 9px 22px rgba(43,86,92,.08); }
.contact-request-card__copy,.notification-card>div { min-width:0; flex:1; display:grid; gap:3px; }
.contact-request-card__copy span,.notification-card p { overflow:hidden; margin:0; color:var(--muted); font-size:.68rem; text-overflow:ellipsis; }
.contact-request-card small,.notification-card small { color:#849599; font-size:.58rem; }
.contact-request-card__actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.notification-card { position:relative; }.notification-card.unread { border-color:rgba(43,133,130,.3); background:linear-gradient(135deg,#f0faf7,#f4f8fb); }
.notification-card__icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; border-radius:14px; color:#256c72; background:#dff0ed; }
.notification-inline-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }.notification-open-link { width:32px; height:28px; display:grid; place-items:center; margin-top:5px; border-radius:9px; color:#287779; background:#e5f2ef; }.notification-open-link svg { width:16px; }
.notification-card__icon svg { width:21px; }.notification-card>i { width:9px; height:9px; border-radius:50%; background:#dc596a; }
.count-pill { min-width:28px; height:28px; display:grid; place-items:center; padding:0 7px; border-radius:999px; color:#fff; background:#2e7d7b; font-size:.65rem; font-weight:900; }
@keyframes skeleton-wave { to { background-position:-200% 0; } }
@media(max-width:880px) { .notification-layout { grid-template-columns:1fr; }.contact-request-card { align-items:flex-start; }.contact-request-card__actions { width:100%; }.contact-request-card { flex-wrap:wrap; }.contact-request-card__copy { width:calc(100% - 60px); flex:none; } }

/* Game catalogue: choose first, then enter a dedicated full game page. */
.games-catalog-page .page { background:linear-gradient(145deg,#f5f7f2,#eef4f4 52%,#faf5ed); }
.games-catalog-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(24px,4vw,48px); border-radius:30px; color:#f7fbfa; background:radial-gradient(circle at 18% 10%,rgba(86,188,153,.25),transparent 34%),linear-gradient(135deg,#183b47,#285c60 60%,#7b5943); box-shadow:0 25px 65px rgba(33,61,64,.2); }
.games-catalog-hero h1 { margin:5px 0 8px; color:#fff; font-size:clamp(1.8rem,4vw,3.4rem); }.games-catalog-hero p { max-width:700px; margin:0; color:#d5e5e3; }
.games-hero-symbol { width:clamp(82px,13vw,150px); aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.18); border-radius:36%; color:#ffe1a8; background:rgba(255,255,255,.1); transform:rotate(5deg); }.games-hero-symbol svg { width:50%; height:50%; }
.games-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.game-catalog-card { position:relative; min-height:260px; display:grid; grid-template-columns:minmax(170px,.85fr) minmax(0,1.15fr); overflow:hidden; border:1px solid rgba(41,75,75,.14); border-radius:27px; color:#17343b; background:#fff; box-shadow:0 16px 42px rgba(43,71,73,.1); text-decoration:none; transition:transform .22s ease,box-shadow .22s ease; }
.game-catalog-card:hover { transform:translateY(-4px); box-shadow:0 25px 55px rgba(39,67,70,.17); }.game-catalog-card__art { position:relative; min-height:230px; display:flex; align-items:center; justify-content:center; gap:10px; overflow:hidden; background:radial-gradient(circle at 50% 35%,#299264,#0b5138 62%,#16342d); }
.game-catalog-card--backgammon .game-catalog-card__art { background:linear-gradient(135deg,#b47743,#6b3e27); }.game-catalog-card--checkers .game-catalog-card__art { background:repeating-conic-gradient(#d8b983 0 25%,#74474b 0 50%) 0/72px 72px; }.game-catalog-card--connect .game-catalog-card__art { background:radial-gradient(circle,#204e83,#172f53); }
.game-catalog-card__copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(20px,3vw,34px); }.game-catalog-card__copy>small { color:#b16c38; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.game-catalog-card__copy>strong { margin-top:7px; font-size:clamp(1.25rem,2.2vw,1.8rem); }.game-catalog-card__copy p { color:#687d80; font-size:.76rem; line-height:1.65; }.game-catalog-card__copy>span { display:flex; align-items:center; gap:7px; color:#277878; font-size:.72rem; font-weight:850; }.game-catalog-card__copy svg { width:18px; }
.catalog-domino { width:54px; height:96px; display:grid; grid-template-rows:1fr 2px 1fr; padding:8px; border-radius:10px; color:#292520; background:#f8edcf; box-shadow:0 9px 18px rgba(0,0,0,.35); transform:rotate(-8deg); }.catalog-domino:nth-child(2) { transform:rotate(12deg) translateY(12px); }.catalog-domino b { display:grid; place-items:center; }.catalog-domino b+ b { border-top:2px solid #534632; }
.catalog-checker,.catalog-disc { width:56px; aspect-ratio:1; border:4px solid rgba(255,255,255,.32); border-radius:50%; background:radial-gradient(circle at 35% 25%,#fff6d8,#d3a86f 62%,#8f5e36); box-shadow:0 7px 15px rgba(0,0,0,.25); }.catalog-checker.dark,.catalog-checker.red,.catalog-disc.red { background:radial-gradient(circle at 35% 25%,#db7480,#8e3348 65%,#4a1c2c); }.catalog-checker.ivory,.catalog-disc.yellow { background:radial-gradient(circle at 35% 25%,#fff6a8,#e2b632 65%,#946016); }.catalog-dice { width:54px; height:54px; display:grid; place-items:center; border-radius:12px; background:#fff6dd; box-shadow:0 7px 15px rgba(0,0,0,.25); font-size:2rem; font-style:normal; }
.game-catalog-card--number .game-catalog-card__art { display:grid; grid-template-columns:repeat(2,64px); gap:8px; background:linear-gradient(145deg,#8a745c,#5c4939); }.catalog-number { width:64px; height:64px; display:grid; place-items:center; border-radius:12px; color:#fff; background:#ed9b50; box-shadow:inset 0 2px rgba(255,255,255,.18),0 7px 14px rgba(0,0,0,.2); font-size:1.5rem; font-style:normal; font-weight:900; }
.games-coming-row { margin-top:18px; padding:22px; border:1px dashed rgba(47,105,105,.32); border-radius:22px; background:rgba(255,255,255,.6); }.games-coming-row>div { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; }.games-coming-row svg { grid-row:1/3; width:30px; color:#c18a3d; }.games-coming-row p { margin:0; color:var(--muted); font-size:.7rem; }
.game-play-page .games-page-header { margin-bottom:12px; }.game-play-page .games-app-pro { grid-template-columns:minmax(210px,260px) minmax(0,1fr); }.game-play-page .games-app-pro>.game-stage { min-height:min(790px,calc(100dvh - 210px)); }

/* Complete four-seat pass-and-play Block Domino table. */
.game-stage--dominoes-four { background:linear-gradient(145deg,#271d1a,#463022) !important; }
.domino-four-modebar { display:flex; justify-content:center; padding:0 0 14px; }.domino-four-modebar .game-mode-switch { width:min(100%,580px); grid-template-columns:1fr 1fr; background:rgba(18,23,28,.38); }.domino-four-modebar .game-mode-switch button { color:#e5ded3; }.domino-four-modebar .game-mode-switch button.active { color:#173127; background:#f1cf91; box-shadow:0 8px 22px rgba(0,0,0,.2); }
.domino-four-online-panel { width:min(100%,1050px); margin:0 auto 14px; padding:13px; border:1px solid rgba(242,207,145,.18); border-radius:22px; color:#edf7f1; background:linear-gradient(145deg,rgba(10,51,36,.96),rgba(12,34,29,.96)); box-shadow:0 14px 32px rgba(18,15,12,.2); }.domino-four-online-actions,.domino-four-current,.domino-four-room { display:flex; align-items:center; justify-content:space-between; gap:12px; }.domino-four-online-actions>div:first-child { display:grid; gap:3px; }.domino-four-online-actions small,.domino-four-room small,.domino-four-current small { color:#a9c4b7; font-size:.61rem; }.domino-four-online-actions strong,.domino-four-room strong,.domino-four-current strong { display:block; color:#fff; font-size:.73rem; }.domino-four-current { margin-top:12px; padding:12px 14px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.055); }.domino-four-current>div { display:flex; align-items:center; gap:10px; }.domino-four-current>div>span:last-child { display:grid; gap:2px; }.domino-four-room-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; margin-top:10px; }.domino-four-room { padding:10px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.045); }.domino-four-room .avatar { flex:0 0 38px; width:38px; height:38px; }.domino-four-room>div { flex:1; min-width:0; }.domino-four-seat.empty { border-style:dashed; opacity:.42; }
.domino-four-table { position:relative; width:min(100%,1050px); min-height:620px; margin:auto; overflow:hidden; border:14px solid #6d4126; border-radius:45px; background:radial-gradient(ellipse at center,rgba(73,177,113,.3),transparent 62%),linear-gradient(145deg,#14623e,#093a29); box-shadow:inset 0 0 0 3px rgba(242,194,119,.2),inset 0 0 80px rgba(0,0,0,.35),0 28px 55px rgba(30,20,17,.34); }
.domino-four-seat { position:absolute; z-index:4; display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid rgba(255,255,255,.15); border-radius:15px; color:#d8e8df; background:rgba(6,35,25,.76); opacity:.65; }.domino-four-seat>span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:#16352c; background:#e9d1a6; font-weight:900; }.domino-four-seat strong { font-size:.66rem; }.domino-four-seat>b { color:#f4cf80; }.domino-four-seat.active { opacity:1; outline:3px solid #efc46d; box-shadow:0 0 25px rgba(239,196,109,.32); }.domino-four-seat.winner { opacity:1; outline:3px solid #66dda0; }
.domino-four-seat.seat-top { top:14px; left:50%; transform:translateX(-50%); }.domino-four-seat.seat-bottom { bottom:14px; left:50%; transform:translateX(-50%); }.domino-four-seat.seat-left { left:14px; top:50%; transform:translateY(-50%); }.domino-four-seat.seat-right { right:14px; top:50%; transform:translateY(-50%); }
.domino-four-chain { position:absolute; inset:105px 105px; display:flex; align-items:center; justify-content:center; gap:3px; overflow:auto; padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:25px; background:rgba(1,26,18,.26); }
.domino-four-empty { color:#92b9a7; font-size:.7rem; }.domino-four-tile { width:72px; height:39px; display:grid; grid-template-columns:1fr 2px 1fr; flex:0 0 72px; align-items:center; padding:5px; border:1px solid #cdbb95; border-radius:7px; color:#241f1c; background:linear-gradient(145deg,#fffbea,#decfad); box-shadow:inset 1px 1px #fff,0 5px 10px rgba(0,0,0,.3); font-size:.58rem; letter-spacing:-2px; }.domino-four-tile i { width:2px; height:100%; background:#786a53; }.domino-four-tile.playable { cursor:pointer; outline:3px solid #6ce3a3; transform:translateY(-4px); }
.domino-four-turn-shield { position:absolute; z-index:8; inset:50% auto auto 50%; width:min(390px,calc(100% - 140px)); display:grid; justify-items:center; gap:8px; padding:25px; border:1px solid rgba(255,255,255,.14); border-radius:24px; color:#fff; background:rgba(13,30,28,.92); box-shadow:0 20px 50px rgba(0,0,0,.35); transform:translate(-50%,-50%); text-align:center; }.domino-four-turn-shield>span { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; color:#153c34; background:#efd19b; }.domino-four-turn-shield p { margin:0 0 5px; color:#b7cbc5; font-size:.68rem; }
.domino-four-hand { display:flex; justify-content:center; gap:7px; min-height:110px; overflow-x:auto; padding:18px 10px 8px; }.domino-four-hand .domino-four-tile { width:48px; height:88px; flex-basis:48px; grid-template:1fr 2px 1fr/1fr; font-size:.62rem; }.domino-four-hand .domino-four-tile i { width:100%; height:2px; }.domino-four-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:8px; }.domino-four-actions p { margin:0; color:#d7c9ba; font-size:.67rem; }
.game-stage--2048 { background:linear-gradient(145deg,#f6eee1,#e4d6c6) !important; }.number-game-wrap { width:min(100%,600px); display:grid; justify-items:center; gap:15px; margin:auto; padding:clamp(12px,3vw,28px); }.number-game-score { display:flex; gap:9px; justify-self:end; }.number-game-score span { min-width:82px; display:grid; place-items:center; padding:7px 13px; border-radius:13px; color:#f8eee1; background:#725d4c; font-size:.55rem; font-weight:800; text-transform:uppercase; }.number-game-score b { color:#fff; font-size:1rem; }.number-game-board { width:min(100%,520px); aspect-ratio:1; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(6px,1.4vw,12px); padding:clamp(7px,1.5vw,13px); border-radius:24px; touch-action:none; outline:none; background:#9d8975; box-shadow:inset 0 2px 6px rgba(65,49,38,.2),0 24px 45px rgba(74,58,45,.2); }.number-game-board>div { display:grid; place-items:center; border-radius:16px; color:#665446; background:rgba(238,223,205,.42); font-size:clamp(1.25rem,6vw,2.6rem); font-weight:900; transition:.16s ease; }.number-game-board>div[data-value="2"] { background:#eee4d7; }.number-game-board>div[data-value="4"] { background:#ead9bc; }.number-game-board>div[data-value="8"] { color:#fff;background:#efad67; }.number-game-board>div[data-value="16"] { color:#fff;background:#eb8e55; }.number-game-board>div[data-value="32"] { color:#fff;background:#e56d53; }.number-game-board>div[data-value="64"] { color:#fff;background:#da4f42; }.number-game-board>div[data-value="128"] { color:#fff;background:#d5aa43;font-size:clamp(1.05rem,5vw,2.2rem); }.number-game-board>div[data-value="256"],.number-game-board>div[data-value="512"] { color:#fff;background:#bd8d32;font-size:clamp(.95rem,4.6vw,2rem); }.number-game-board>div[data-value="1024"],.number-game-board>div[data-value="2048"] { color:#fff;background:#4b8275;font-size:clamp(.78rem,4vw,1.7rem); }.number-game-wrap>p { margin:0; color:#776c62; font-size:.69rem; text-align:center; }
@media(max-width:850px) { .games-catalog-grid { grid-template-columns:1fr; }.game-play-page .games-app-pro { grid-template-columns:1fr; }.game-play-page .game-picker { display:flex; overflow-x:auto; }.game-play-page .game-picker .game-choice { min-width:220px; }.domino-four-table { min-height:520px; border-width:8px; border-radius:26px; }.domino-four-chain { inset:95px 60px; justify-content:flex-start; }.domino-four-seat.seat-left,.domino-four-seat.seat-right { top:auto; bottom:72px; transform:none; }.domino-four-seat.seat-left { left:8px; }.domino-four-seat.seat-right { right:8px; }.domino-four-turn-shield { width:calc(100% - 50px); } }
@media(max-width:560px) { .game-catalog-card { grid-template-columns:1fr; }.game-catalog-card__art { min-height:170px; }.games-catalog-hero { align-items:flex-start; }.games-hero-symbol { width:70px; }.domino-four-seat strong { display:none; }.domino-four-seat { padding:6px; }.domino-four-chain { inset:85px 35px 115px; }.domino-four-tile { width:61px; flex-basis:61px; }.domino-four-table { min-height:500px; }.domino-four-modebar .game-mode-switch { display:grid; grid-template-columns:1fr; }.domino-four-online-actions { align-items:flex-start; flex-direction:column; }.domino-four-online-actions .cluster { width:100%; }.domino-four-online-actions .btn { flex:1; }.domino-four-current { align-items:flex-start; }.domino-four-room-list { grid-template-columns:1fr; } }

/* Familiar phone-calculator surface with an optional scientific drawer. */
.calculator-page .page { background:linear-gradient(145deg,#eef5f2,#f5f1e9 62%,#edf1f6); }
.calculator-page-header { max-width:900px; margin-inline:auto; }.calculator-layout--pro { width:100%; max-width:900px; grid-template-columns:minmax(320px,440px) minmax(260px,1fr); align-items:start; gap:24px; margin-inline:auto; }
.calculator-shell--pro { overflow:hidden; padding:18px; border:6px solid #253238; border-radius:42px; background:#0b0d0e; box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 30px 70px rgba(34,50,52,.28); }
.calculator-shell--pro .calculator-modebar { padding:2px 7px 8px; color:#aeb7ba; background:transparent; }.calculator-shell--pro .calculator-modebar button { color:#b9c4c5; background:#252a2b; }
.calculator-shell--pro .calculator-display { min-height:170px; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding:20px 10px 16px; border:0; color:#fff; background:#0b0d0e; box-shadow:none; }.calculator-expression { color:#8d989b; text-align:end; }.calculator-result-row { align-items:flex-end; }.calculator-shell--pro .calculator-result { color:#fff; font-size:clamp(3rem,7vw,4.5rem); font-weight:350; letter-spacing:-.05em; }.calculator-copy { color:#aeb8ba; background:#24292a; }
.calculator-control-deck { padding:0; background:transparent; }.calculator-keys--main { grid-template-columns:repeat(4,1fr); gap:10px; }.calculator-keys--main .calculator-key { width:100%; min-height:0; aspect-ratio:1; border:0; border-radius:50%; color:#fff; background:#303334; box-shadow:inset 0 1px 1px rgba(255,255,255,.12); font-size:clamp(1.35rem,4vw,2rem); font-weight:500; }.calculator-keys--main .calculator-key:hover { background:#484b4c; }.calculator-keys--main .calculator-key.is-command { color:#111; background:#a9adae; }.calculator-keys--main .calculator-key.is-command:hover { background:#c8cbcc; }.calculator-keys--main .calculator-key.is-operator,.calculator-keys--main .calculator-key.is-equals { color:#fff; background:#ee9b2d; }.calculator-keys--main .calculator-key.is-operator:hover,.calculator-keys--main .calculator-key.is-equals:hover { background:#ffb44d; }.calculator-keys--main .calculator-key--zero { grid-column:span 2; aspect-ratio:auto; border-radius:999px; text-align:start; padding-inline-start:28px; }.calculator-keys--main .calculator-key.is-equals { grid-column:auto; }
.calculator-science-drawer { margin-top:14px; border-top:1px solid #2a3031; }.calculator-science-drawer summary { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; color:#aab5b7; cursor:pointer; font-size:.68rem; font-weight:800; list-style:none; }.calculator-science-drawer summary::-webkit-details-marker { display:none; }.calculator-science-drawer summary svg { width:17px; }.calculator-science-drawer .calculator-keys { margin-top:8px; }.calculator-science-drawer .calculator-key { min-height:42px; border:0; border-radius:12px; color:#dce5e5; background:#24292a; box-shadow:none; }.calculator-science-drawer .calculator-keys--science { grid-template-columns:repeat(4,1fr); }.calculator-science-drawer .calculator-keys--memory { grid-template-columns:repeat(4,1fr); }
.calculator-history { overflow:hidden; border:1px solid rgba(48,88,90,.14); border-radius:26px; background:rgba(255,255,255,.9); box-shadow:0 18px 42px rgba(40,70,72,.1); }.calculator-history__list button { border-radius:14px; background:#f4f8f6; }
@media(max-width:760px) { .calculator-layout--pro { max-width:440px; grid-template-columns:1fr; }.calculator-shell--pro { padding:14px; border-width:4px; border-radius:32px; }.calculator-shell--pro .calculator-display { min-height:145px; }.calculator-page-header { padding-inline:4px; }.calculator-history { border-radius:20px; }.calculator-keys--main { gap:8px; } }

@media (prefers-reduced-motion:reduce) {
  .chat-details-media-grid img,.domino-tile,.bg-checker { transition:none; animation:none; }
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% -8%, rgba(142, 197, 255, .42), transparent 38rem),
    radial-gradient(circle at -8% 72%, rgba(86, 214, 223, .2), transparent 34rem),
    linear-gradient(145deg, #3a6482 0%, #315875 48%, #3d6986 100%);
  background-size: 125% 125%, 130% 130%, 100% 100%;
  animation: ambient-background 22s ease-in-out infinite alternate;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

@keyframes ambient-background {
  from { background-position: 0 0, 0 100%, 0 0; }
  to { background-position: 12% 7%, 10% 88%, 0 0; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--blue-400); text-decoration: none; }
a:hover { color: #93c5fd; }
img, video { max-width: 100%; }
svg { display: block; }

::selection { background: rgba(59, 130, 246, .45); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .25); border: 2px solid transparent; background-clip: padding-box; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .42); border: 2px solid transparent; background-clip: padding-box; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link { position: fixed; top: -80px; left: 16px; z-index: 9999; padding: 11px 16px; background: var(--blue-600); color: white; border-radius: 12px; }
.skip-link:focus { top: 12px; }

/* Brand and navigation */
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.brand:hover { color: #fff; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-500), #1554d1 62%, #1641a4);
  box-shadow: 0 10px 28px rgba(37, 99, 235, .32), inset 0 1px rgba(255,255,255,.25);
}
.brand-mark svg { width: 23px; height: 23px; }
.brand-name { font-size: 1.18rem; }
.brand-name span { color: var(--blue-400); }

.public-header {
  position: sticky;
  top: 0;
  z-index: 70;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
  background: rgba(48, 87, 115, .9);
  backdrop-filter: blur(18px);
}
.public-header__inner { width: min(1180px, calc(100% - 40px)); height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.public-nav { display: flex; align-items: center; gap: 7px; }
.public-nav > a:not(.btn) { padding: 9px 12px; color: var(--muted-strong); border-radius: 10px; font-weight: 650; }
.public-nav > a:not(.btn):hover { color: #fff; background: rgba(148,163,184,.08); }
.public-menu-toggle { display: none; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 22px 15px 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(41, 74, 100, .98), rgba(49, 88, 117, .98));
  backdrop-filter: blur(20px);
  transition: transform .24s ease;
}
.sidebar .brand { padding: 0 10px 22px; }
.sidebar-label { padding: 20px 12px 8px; color: #c3d8e8; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-nav { display: grid; gap: 5px; }
.side-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted-strong);
  font-weight: 670;
  transition: .18s ease;
}
.side-nav a:hover { color: #fff; background: rgba(148,163,184,.07); transform: translateX(2px); }
.side-nav a.active { color: #fff; border-color: rgba(96,165,250,.15); background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.08)); }
.side-nav a.active::before { content: ""; position: absolute; left: -16px; width: 4px; height: 25px; border-radius: 0 5px 5px 0; background: var(--blue-400); box-shadow: 0 0 18px rgba(96,165,250,.7); }
.side-nav svg { width: 21px; height: 21px; flex: 0 0 21px; }
.side-nav .nav-badge { margin-left: auto; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 99px; color: #fff; background: var(--blue-600); font-size: .69rem; }
.sidebar-spacer { flex: 1; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: 15px; padding: 11px; border-top: 1px solid var(--line); border-radius: 14px; }
.sidebar-user__meta { min-width: 0; flex: 1; }
.sidebar-user__meta strong, .sidebar-user__meta span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-user__meta strong { font-size: .9rem; }
.sidebar-user__meta span { margin-top: 1px; color: var(--muted); font-size: .72rem; }
.sidebar-logout { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; }
.sidebar-logout:hover { color: #ffe5e5; background: rgba(128,35,48,.3); }
.sidebar-logout svg { width: 18px; }

.app-main { min-height: 100vh; margin-left: var(--sidebar-w); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 clamp(18px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: rgba(55, 95, 124, .9);
  backdrop-filter: blur(18px);
}
.topbar-title { min-width: 0; flex: 1; }
.topbar-title strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; }
.topbar-title span { display: block; color: var(--muted); font-size: .74rem; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.sidebar-toggle { display: none; }
.mobile-overlay { visibility: hidden; position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.5); opacity: 0; transition: .2s ease; }

.page { width: min(1500px, 100%); margin: 0 auto; padding: clamp(22px, 3vw, 42px); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: var(--blue-400); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.page-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 5px; background: currentColor; }
.page-title { margin: 0; font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -.04em; }
.page-subtitle { max-width: 680px; margin: 8px 0 0; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: 10px; }

/* Primitive components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 43px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #fff;
  background: var(--blue-600);
  font-weight: 730;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { color: #fff; background: #3475ed; transform: translateY(-1px); box-shadow: 0 12px 25px rgba(37,99,235,.24); }
.btn:active { transform: translateY(0); }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(96,165,250,.3); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.btn-secondary { border-color: var(--line-strong); color: var(--muted-strong); background: rgba(148,163,184,.07); }
.btn-secondary:hover { border-color: rgba(96,165,250,.32); background: rgba(59,130,246,.13); }
.btn-ghost { color: var(--muted-strong); background: transparent; }
.btn-ghost:hover { background: rgba(148,163,184,.08); box-shadow: none; }
.btn-danger { background: #cf3341; }
.btn-danger:hover { background: #e13c4a; box-shadow: 0 12px 25px rgba(239,68,68,.22); }
.btn-success { background: #148646; }
.btn-success:hover { background: #18a155; box-shadow: 0 12px 25px rgba(34,197,94,.18); }
.btn-sm { min-height: 36px; padding: 7px 11px; border-radius: 10px; font-size: .83rem; }
.btn-lg { min-height: 51px; padding: 12px 21px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .icon-btn[disabled] { cursor: not-allowed; opacity: .55; transform: none; box-shadow: none; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--muted-strong); background: rgba(148,163,184,.06); cursor: pointer; transition: .16s ease; }
.icon-btn:hover { color: #fff; border-color: rgba(96,165,250,.3); background: rgba(59,130,246,.13); }
.icon-btn svg { width: 20px; height: 20px; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(64,107,137,.97), rgba(55,94,123,.97));
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.panel:hover { border-color: rgba(173, 213, 252, .46); box-shadow: 0 18px 42px rgba(22,48,70,.24); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-title { min-width: 0; }
.panel-title h2, .panel-title h3 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.panel-title p { margin: 3px 0 0; color: var(--muted); font-size: .77rem; }
.panel-body { padding: 20px; }
.panel-empty { display: grid; place-items: center; min-height: 220px; padding: 30px; color: var(--muted); text-align: center; }
.panel-empty svg { width: 44px; height: 44px; margin-bottom: 12px; color: #b7d5ed; }
.panel-empty strong { display: block; margin-bottom: 5px; color: var(--muted-strong); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.stack { display: grid; gap: 16px; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.divider { height: 1px; margin: 15px 0; background: var(--line); }

.stat-card { position: relative; min-height: 148px; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(66,109,139,.97), rgba(56,96,125,.97)); box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.stat-card:hover { transform: translateY(-4px); border-color: rgba(173,213,252,.5); box-shadow: 0 22px 48px rgba(22,48,70,.27); }
.stat-card::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 130px; height: 130px; border-radius: 50%; background: var(--accent, var(--blue-500)); opacity: .09; filter: blur(2px); }
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 17px; border-radius: 13px; color: var(--accent, var(--blue-400)); background: color-mix(in srgb, var(--accent, var(--blue-500)) 15%, transparent); }
.stat-icon svg { width: 21px; height: 21px; }
.stat-value { display: block; font-size: 1.55rem; font-weight: 820; letter-spacing: -.04em; }
.stat-label { color: var(--muted); font-size: .78rem; }
.stat-trend { position: absolute; top: 20px; right: 19px; display: flex; align-items: center; gap: 4px; color: #d7fbe5; font-size: .72rem; font-weight: 750; }

.avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #5792c4, #2d6498); font-weight: 800; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 34px; height: 34px; flex-basis: 34px; font-size: .72rem; }
.avatar-lg { width: 76px; height: 76px; flex-basis: 76px; font-size: 1.25rem; }
.avatar-xl { width: 112px; height: 112px; flex-basis: 112px; font-size: 2rem; }
.avatar-wrap { position: relative; width: fit-content; }
.presence { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border: 2px solid var(--panel-solid); border-radius: 50%; background: #64748b; }
.presence.online { background: var(--green-500); box-shadow: 0 0 0 3px rgba(34,197,94,.11); }

.badge, .status-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 9px; border: 1px solid rgba(210,233,255,.28); border-radius: 99px; color: #e6f3ff; background: rgba(34,93,157,.32); font-size: .7rem; font-weight: 750; }
.badge-success { color: #d7fbe5; border-color: rgba(195,247,216,.27); background: rgba(22,104,65,.34); }
.badge-warning { color: #fff0b8; border-color: rgba(255,231,139,.3); background: rgba(130,83,14,.32); }
.badge-danger { color: #ffe5e5; border-color: rgba(255,204,204,.3); background: rgba(128,35,48,.34); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.flash { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 13px 15px; border: 1px solid rgba(96,165,250,.22); border-radius: 13px; color: #dbeafe; background: rgba(37,99,235,.12); }
.flash.error { border-color: rgba(255,204,204,.3); color: #ffe5e5; background: rgba(128,35,48,.3); }
.flash.success { border-color: rgba(195,247,216,.3); color: #d7fbe5; background: rgba(22,104,65,.3); }
.flash svg { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; }
.flash ul { margin: 0; padding-left: 19px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-group { display: grid; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { color: var(--muted-strong); font-size: .78rem; font-weight: 720; }
.label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.label-row a { font-size: .74rem; }
.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: #f8fbff;
  background: rgba(46, 83, 111, .9);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(148,163,184,.38); }
.input:focus, .select:focus, .textarea:focus { border-color: #9acaff; background: rgba(51,91,120,.98); box-shadow: 0 0 0 4px rgba(143,196,255,.2); }
.input::placeholder, .textarea::placeholder { color: #c0d5e5; }
.select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, #7890ad 50%), linear-gradient(135deg, #7890ad 50%, transparent 50%); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.textarea { min-height: 115px; resize: vertical; }
.input-wrap { position: relative; }
.input-wrap > svg, .input-wrap > [data-icon] { position: absolute; top: 50%; left: 13px; z-index: 2; width: 18px; height: 18px; display: grid; place-items: center; color: #cae0ef; transform: translateY(-50%); pointer-events: none; }
.input-wrap > [data-icon] > svg { width: 100%; height: 100%; }
.input-wrap .input { padding-left: 42px; }
.input-wrap .input-action { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); }
.form-hint { color: var(--muted); font-size: .72rem; }
.check { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-strong); font-size: .78rem; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--blue-500); }

/* Authentication and landing */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr); }
.auth-main { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: min(510px, 100%); margin: 0 auto; padding: 50px; }
.auth-main > .brand { margin-bottom: 50px; }
.auth-main h1 { margin: 0 0 10px; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.08; letter-spacing: -.05em; }
.auth-main > p { margin: 0 0 28px; color: var(--muted); }
.auth-form { display: grid; gap: 17px; }
.auth-switch { margin-top: 23px; color: var(--muted); font-size: .82rem; text-align: center; }
.auth-visual { position: relative; display: flex; align-items: flex-end; overflow: hidden; margin: 18px; border: 1px solid rgba(208,231,250,.3); border-radius: 30px; background: linear-gradient(145deg, #426d8b, #315a78 70%); box-shadow: var(--shadow-lg); }
.auth-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 67% 26%, rgba(135,192,255,.46), transparent 25rem), linear-gradient(135deg, transparent 25%, rgba(86,214,223,.13)); }
.auth-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.auth-orb.one { top: 10%; right: 11%; width: 250px; height: 250px; border: 1px solid rgba(147,197,253,.12); box-shadow: inset 20px -20px 60px rgba(37,99,235,.15); }
.auth-orb.two { top: 25%; right: 24%; width: 430px; height: 430px; border: 1px solid rgba(147,197,253,.07); }
.auth-visual__content { position: relative; z-index: 1; max-width: 650px; padding: clamp(35px, 5vw, 70px); }
.auth-visual__content h2 { max-width: 570px; margin: 0 0 15px; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.03; letter-spacing: -.055em; }
.auth-visual__content p { max-width: 510px; margin: 0 0 30px; color: #e0edf7; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 9px; }
.feature-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgba(220,239,253,.29); border-radius: 99px; color: #f3f8fc; background: rgba(42,78,105,.5); font-size: .76rem; }
.feature-pill svg { width: 15px; height: 15px; color: var(--blue-400); }

.hero { position: relative; overflow: hidden; padding: clamp(75px, 10vw, 135px) 20px 90px; }
.hero::after { content: ""; position: absolute; top: -220px; left: 50%; width: 1050px; height: 680px; border-radius: 50%; background: rgba(37,99,235,.13); filter: blur(85px); transform: translateX(-50%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; width: min(1120px, 100%); margin: 0 auto; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 12px; border: 1px solid rgba(210,233,255,.3); border-radius: 99px; color: #e6f3ff; background: rgba(34,93,157,.3); font-size: .75rem; font-weight: 720; }
.hero-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-400); box-shadow: 0 0 14px rgba(34,211,238,.9); }
.hero h1 { max-width: 900px; margin: 0 auto 21px; font-size: clamp(3rem, 7vw, 6rem); line-height: .98; letter-spacing: -.068em; }
.hero h1 span { color: transparent; background: linear-gradient(100deg, #fff, #93c5fd 55%, #22d3ee); background-clip: text; -webkit-background-clip: text; }
.hero p { max-width: 710px; margin: 0 auto 30px; color: #e0edf7; font-size: clamp(1rem, 2vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }
.hero-preview { position: relative; max-width: 1020px; margin: 70px auto 0; padding: 11px; border: 1px solid rgba(211,233,250,.3); border-radius: 26px; background: rgba(49,88,117,.86); box-shadow: 0 40px 90px rgba(20,43,64,.3); transform: perspective(1500px) rotateX(2deg); }
.hero-preview img { display: block; border-radius: 18px; }
.hero-preview__mock { min-height: 430px; display: grid; grid-template-columns: 180px 1fr; overflow: hidden; border-radius: 18px; background: #365f7d; text-align: left; }
.mock-sidebar { padding: 20px 13px; border-right: 1px solid var(--line); background: #2c526f; }
.mock-dot-row { display: flex; gap: 5px; margin-bottom: 27px; }
.mock-dot-row i { width: 7px; height: 7px; border-radius: 50%; background: #345272; }
.mock-nav-line { height: 34px; margin-bottom: 7px; border-radius: 9px; background: rgba(148,163,184,.07); }
.mock-nav-line.active { background: rgba(59,130,246,.18); }
.mock-main { padding: 25px; }
.mock-top { display: flex; justify-content: space-between; margin-bottom: 22px; }
.mock-heading { width: 180px; height: 24px; border-radius: 6px; background: rgba(219,234,254,.15); }
.mock-button { width: 90px; height: 34px; border-radius: 9px; background: rgba(37,99,235,.8); }
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.mock-card { min-height: 105px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #477693, #3a6280); }
.mock-wide { grid-column: span 2; min-height: 190px; }
.mock-tall { min-height: 190px; }
.landing-section { padding: 95px 20px; }
.landing-inner { width: min(1160px, 100%); margin: 0 auto; }
.section-heading { max-width: 670px; margin: 0 auto 45px; text-align: center; }
.section-heading span { color: var(--blue-400); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.section-heading h2 { margin: 9px 0 13px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.07; letter-spacing: -.05em; }
.section-heading p { margin: 0; color: var(--muted); }
.feature-card { min-height: 225px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(64,107,137,.96), rgba(54,95,125,.96)); box-shadow: var(--shadow-sm); transition: transform .22s ease, border-color .22s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(190,222,249,.45); }
.feature-card__icon { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 35px; border-radius: 14px; color: var(--blue-400); background: rgba(59,130,246,.14); }
.feature-card__icon svg { width: 23px; height: 23px; }
.feature-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.cta-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(30px, 5vw, 60px); border: 1px solid rgba(209,232,250,.33); border-radius: 28px; background: linear-gradient(120deg, #3d6684, #376382 60%, #315976); box-shadow: var(--shadow-lg); }
.cta-card::after { content: ""; position: absolute; right: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(59,130,246,.25); filter: blur(20px); }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { margin: 0 0 8px; font-size: clamp(1.65rem, 3vw, 2.5rem); letter-spacing: -.04em; }
.cta-card p { margin: 0; color: #e3eef7; }
.public-footer { padding: 35px 20px; border-top: 1px solid var(--line); color: var(--muted); }
.public-footer__inner { width: min(1160px, 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* Dashboard lists */
.list { display: grid; }
.list-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 13px 0; border-bottom: 1px solid var(--line); }
.list-item:first-child { padding-top: 0; }
.list-item:last-child { padding-bottom: 0; border-bottom: 0; }
.list-item__main { min-width: 0; flex: 1; }
.list-item__main strong, .list-item__main span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-item__main strong { font-size: .85rem; }
.list-item__main span { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.list-item__side { flex: 0 0 auto; color: var(--muted); font-size: .72rem; text-align: right; }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.quick-action { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--muted-strong); background: rgba(148,163,184,.04); transition: .16s ease; }
.quick-action:hover { color: #fff; border-color: rgba(96,165,250,.25); background: rgba(59,130,246,.09); transform: translateY(-2px); }
.quick-action__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; color: var(--blue-400); background: rgba(59,130,246,.13); }
.quick-action__icon svg { width: 18px; }
.quick-action span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; font-weight: 700; }

/* Chat */
.chat-shell { height: calc(100vh - var(--header-h) - clamp(44px, 6vw, 84px)); min-height: 590px; display: grid; grid-template-columns: 330px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(58,99,128,.96); box-shadow: var(--shadow-lg); }
.chat-list-pane { display: flex; min-width: 0; flex-direction: column; border-right: 1px solid var(--line); background: rgba(66,109,139,.97); }
.chat-list-header { padding: 18px 16px 12px; }
.chat-list-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chat-list-title h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.chat-tabs { display: flex; gap: 5px; padding: 0 16px 10px; }
.chat-tab { padding: 7px 11px; border: 0; border-radius: 99px; color: var(--muted); background: transparent; font-size: .73rem; font-weight: 720; cursor: pointer; }
.chat-tab.active { color: #dbeafe; background: rgba(59,130,246,.15); }
.conversation-list { min-height: 0; flex: 1; overflow-y: auto; padding: 4px 9px 12px; }
.conversation {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 10px;
  border: 0;
  border-radius: 13px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.conversation:hover { background: rgba(148,163,184,.06); }
.conversation.active { background: linear-gradient(90deg, rgba(37,99,235,.2), rgba(37,99,235,.08)); }
.conversation-main { min-width: 0; flex: 1; }
.conversation-top { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.conversation-top strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .84rem; }
.conversation-time { flex: 0 0 auto; color: #d2e3ef; font-size: .65rem; }
.conversation-preview { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); font-size: .72rem; }
.conversation-preview span { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-unread { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 99px; color: #fff; background: var(--blue-600); font-size: .64rem; font-weight: 800; }

.chat-main-pane { min-width: 0; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 40%, rgba(154,203,255,.2), transparent 27rem), rgba(52,91,119,.93); }
.chat-main-header { min-height: 72px; display: flex; align-items: center; gap: 11px; padding: 11px 17px; border-bottom: 1px solid var(--line); background: rgba(68,112,142,.95); }
.chat-back { display: none; }
.chat-contact { min-width: 0; flex: 1; }
.chat-contact strong, .chat-contact span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-contact strong { font-size: .88rem; }
.chat-contact span { color: var(--green-500); font-size: .69rem; }
.chat-header-actions { display: flex; gap: 6px; }
.chat-header-actions .icon-btn { width: 38px; height: 38px; flex-basis: 38px; }
.message-list { min-height: 0; flex: 1; overflow-y: auto; padding: 22px clamp(14px, 4vw, 48px); scroll-behavior: smooth; }
.live-location-panel{margin:10px 14px 0;padding:0;border:1px solid #cfe0e7;border-radius:20px;background:#fff;color:#092f4a;box-shadow:0 8px 24px rgba(8,42,70,.14);overflow:hidden;flex:0 0 auto}.live-location-panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:#fff}.live-location-panel__head>span{display:flex;align-items:center;gap:9px}.live-location-panel__head>span>span{display:flex;flex-direction:column}.live-location-panel__head strong{font-size:15px}.live-location-panel__head small{font-size:10px;color:#71838f}.live-location-panel__head svg{width:22px;height:22px;color:#0b8b72}.live-location-panel__actions{margin-inline-start:auto}.live-location-panel__actions .icon-btn{width:36px;height:36px;background:#edf4f7}
.live-location-map{height:260px;position:relative;overflow:hidden;background:#dce8e7;cursor:pointer;border-block:1px solid #d8e3e7}.live-location-map__tiles,.live-location-map__markers{position:absolute;inset:0}.live-location-map__tiles img{position:absolute;width:256px;height:256px;max-width:none;user-select:none}.live-location-map__markers{pointer-events:none}.live-location-marker{pointer-events:auto;position:absolute;transform:translate(-50%,-100%);border:0;background:transparent;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));z-index:3}.live-location-marker span{width:38px;height:38px;border:4px solid #fff;border-radius:50% 50% 50% 8px;transform:rotate(-45deg);background:#12629e;color:#fff;display:grid;place-items:center;font-weight:900}.live-location-marker span::first-letter{transform:rotate(45deg)}.live-location-marker strong{margin-top:4px;padding:3px 8px;border-radius:12px;background:#fff;color:#092f4a;font-size:10px;white-space:nowrap}.live-location-marker.is-me span{background:#0b9b79}.live-location-map__attribution{position:absolute;right:4px;bottom:3px;padding:1px 4px;background:rgba(255,255,255,.82);font-size:8px;color:#52636d;z-index:4}
.live-location-panel__people{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;padding:10px;background:#f5f8fa}.live-location-person{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #e0e8ec;border-radius:14px;background:#fff}.live-location-person__avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0e5f99;color:#fff;font-weight:900}.live-location-person>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column}.live-location-person small{color:#6c7d86;font-size:10px}.live-location-person__pulse{width:9px;height:9px;border-radius:50%;background:#14a782;box-shadow:0 0 0 5px rgba(20,167,130,.13)}.live-location-distance{grid-column:1/-1;padding:4px 8px;font-size:12px;font-weight:900;text-align:center;color:#08755f}
.live-location-panel.is-expanded{position:fixed;inset:clamp(8px,3vw,32px);z-index:10020;margin:0;border-radius:22px;display:flex;flex-direction:column}.live-location-panel.is-expanded .live-location-map{height:auto;flex:1;min-height:360px}.live-location-panel.is-expanded .live-location-panel__people{max-height:180px;overflow:auto}body.live-location-map-open{overflow:hidden}
@media(max-width:700px){.live-location-panel{margin:7px 7px 0;border-radius:16px}.live-location-map{height:220px}.live-location-panel__people{display:flex;overflow-x:auto;padding:8px}.live-location-person{min-width:210px}.live-location-panel.is-expanded{inset:0;border-radius:0}.live-location-panel.is-expanded .live-location-map{min-height:0}}

/* Standalone live-location workspace: never embedded in chat. */
.live-location-page{background:#eaf2f7}.live-location-page .page{padding:12px;overflow:hidden}.live-location-workspace{height:calc(var(--kani-viewport-height,100dvh) - var(--topbar-height,72px) - 24px);min-height:640px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;color:#0a2947}.live-location-picker{display:grid;grid-template-columns:minmax(250px,auto) minmax(230px,340px) 46px;grid-template-areas:"intro search refresh" "friends friends friends";align-items:center;gap:10px;padding:12px;border:1px solid rgba(155,184,205,.5);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 10px 35px rgba(7,38,70,.1);backdrop-filter:blur(18px)}.live-location-picker__intro{grid-area:intro;display:flex;align-items:center;gap:10px;min-width:0}.live-location-heading__icon{width:46px;height:46px;flex:0 0 46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#0d9d7d,#08745f);color:#fff;box-shadow:0 8px 20px rgba(11,146,117,.23)}.live-location-heading__icon svg{width:23px;height:23px}.live-location-picker__intro>span:last-child{min-width:0;display:flex;flex-direction:column}.live-location-picker__intro strong{font-size:15px;font-weight:900;line-height:1.3}.live-location-picker__intro small{max-width:430px;margin-top:3px;color:#61778a;font-size:10px;line-height:1.45}.live-location-search{grid-area:search;height:46px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid #cfdee9;border-radius:15px;background:#f2f7fb;color:#678095;transition:border-color .18s,box-shadow .18s,background .18s}.live-location-search:focus-within{border-color:#1675aa;background:#fff;box-shadow:0 0 0 4px rgba(22,117,170,.11)}.live-location-search>svg{width:20px;height:20px;flex:0 0 auto}.live-location-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#0a2947;font:inherit;font-size:13px;font-weight:750}.live-location-search input::placeholder{color:#8193a3}.live-location-search__spinner{width:16px;height:16px;flex:0 0 16px;border:2px solid #b8cada;border-top-color:#1675aa;border-radius:50%;animation:kani-spin .7s linear infinite}.live-location-refresh{grid-area:refresh;width:46px;height:46px;border-radius:15px;background:#eaf4fa;color:#126b9f}.live-location-refresh svg{width:21px;height:21px}.live-location-friends{grid-area:friends;display:flex;gap:9px;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:1px 1px 3px;scroll-snap-type:x proximity}.live-location-friend{position:relative;min-width:174px;max-width:218px;height:64px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #d6e3ec;border-radius:18px;background:#f7fafc;color:#153650;text-align:initial;cursor:pointer;scroll-snap-align:start;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s}.live-location-friend:hover{transform:translateY(-1px);border-color:#9bc3d9;background:#fff}.live-location-friend.is-selected{border-color:#18b995;background:linear-gradient(135deg,#0c355b,#0e5470);color:#fff;box-shadow:0 7px 19px rgba(7,57,86,.22)}.live-location-friend .avatar,.live-location-avatar{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;overflow:hidden;border:2px solid #fff;border-radius:50%;background:linear-gradient(145deg,#277ebb,#135282);color:#fff;font-size:14px;font-weight:900;box-shadow:0 3px 10px rgba(11,39,68,.16)}.live-location-friend .avatar img,.live-location-avatar img{width:100%;height:100%;object-fit:cover}.live-location-friend>span:nth-of-type(2){min-width:0;display:flex;flex:1;flex-direction:column}.live-location-friend strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:900}.live-location-friend small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#708699;font-size:9px}.live-location-friend.is-selected small{color:#c7e9e6}.live-location-friend>i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#a9b8c4}.live-location-friend.is-sharing>i,.live-location-friend.is-selected>i{background:#49e2b7;box-shadow:0 0 0 5px rgba(73,226,183,.14)}.live-location-friends__empty{min-height:58px;min-width:100%;display:flex;align-items:center;justify-content:center;gap:9px;border:1px dashed #cadbe7;border-radius:16px;color:#718696;font-size:11px}.live-location-friends__empty svg{width:20px;height:20px}.live-location-main{position:relative;min-height:0}.live-location-stage,.live-location-native-map{width:100%;height:100%;min-height:420px}.live-location-native-map{position:relative;overflow:hidden;border:1px solid #b7cad7;border-radius:25px;background:#cfdedc;box-shadow:0 14px 40px rgba(7,32,58,.18);touch-action:none;user-select:none;cursor:grab}.live-location-native-map.is-dragging{cursor:grabbing}.live-location-map-scene,.live-location-native-map__tiles,.live-location-native-map__routes,.live-location-native-map__markers{position:absolute;inset:0}.live-location-map-scene{will-change:transform}.live-location-native-map__tiles{background:#dbe7e5}.live-location-native-map__tiles img{position:absolute;width:256px;height:256px;max-width:none;user-select:none;pointer-events:none;filter:saturate(.92) contrast(1.03)}.live-location-native-map__routes{overflow:visible;pointer-events:none;z-index:2}.live-location-native-map__routes polyline{fill:none;stroke:#0b9275;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 10;filter:drop-shadow(0 2px 2px rgba(255,255,255,.9));animation:live-route-move 1.1s linear infinite}.live-location-native-map__markers{pointer-events:none;z-index:3}.live-location-native-marker{pointer-events:auto;position:absolute;width:auto;height:auto;transform:translate(-50%,-50%);border:0;background:transparent;display:grid;place-items:center;filter:drop-shadow(0 7px 9px rgba(0,32,55,.3));transition:left .42s ease-out,top .42s ease-out;z-index:3}.live-location-marker__accuracy{position:absolute;border:2px solid rgba(24,118,175,.35);border-radius:50%;background:rgba(39,139,193,.12);pointer-events:none}.live-location-native-marker.is-me .live-location-marker__accuracy{border-color:rgba(11,146,117,.42);background:rgba(11,146,117,.13)}.live-location-marker__avatar{position:relative;width:52px;height:52px;display:grid;place-items:center;overflow:hidden;border:4px solid #fff;border-radius:50%;background:#176da8;color:#fff;font-size:16px;font-weight:900;z-index:2}.live-location-marker__avatar img{width:100%;height:100%;object-fit:cover}.live-location-native-marker.is-me .live-location-marker__avatar{background:#0b9275;box-shadow:0 0 0 5px rgba(11,146,117,.2)}.live-location-native-marker b{position:absolute;top:37px;max-width:165px;padding:6px 10px;border-radius:11px;background:rgba(255,255,255,.96);color:#0b2946;font-size:10px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 5px 14px rgba(4,35,59,.16);z-index:4}.live-location-map-topline{position:absolute;top:14px;inset-inline:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;z-index:8}.live-location-selected,.live-location-connection{pointer-events:auto;display:flex;align-items:center;border:1px solid rgba(195,216,230,.8);background:rgba(255,255,255,.93);box-shadow:0 8px 24px rgba(6,35,59,.16);backdrop-filter:blur(16px)}.live-location-selected{gap:9px;min-width:190px;max-width:min(360px,65%);padding:8px 12px;border-radius:16px}.live-location-selected>svg{width:21px;height:21px;color:#1475aa}.live-location-selected>span{min-width:0;display:flex;flex-direction:column}.live-location-selected small{color:#718698;font-size:8px}.live-location-selected strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.live-location-connection{gap:7px;padding:8px 11px;border-radius:999px;color:#526b7c;font-size:9px;font-weight:900}.live-location-connection i{width:8px;height:8px;border-radius:50%;background:#d6a33a}.live-location-connection.is-live i{background:#10a47f;box-shadow:0 0 0 5px rgba(16,164,127,.14)}.live-location-connection.is-error i{background:#d54a58}.live-location-map-controls{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);display:grid;gap:7px;z-index:8}.live-location-map-controls button,.live-location-recenter{width:44px;height:44px;border:1px solid rgba(198,217,230,.9);border-radius:14px;background:rgba(255,255,255,.95);color:#0d5f91;font-size:22px;font-weight:900;box-shadow:0 6px 17px rgba(7,32,58,.17);backdrop-filter:blur(12px);transition:transform .15s,background .15s}.live-location-map-controls button:hover,.live-location-recenter:hover{transform:scale(1.04);background:#fff}.live-location-map-controls svg,.live-location-recenter svg{width:19px;height:19px}.live-location-recenter{position:absolute;inset-inline-end:14px;bottom:14px;display:grid;place-items:center;z-index:8}.live-location-map-empty{position:absolute;top:72px;inset-inline-start:14px;max-width:min(360px,calc(100% - 28px));display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(200,219,231,.9);border-radius:15px;background:rgba(255,255,255,.9);box-shadow:0 7px 18px rgba(7,32,58,.13);backdrop-filter:blur(14px);pointer-events:none;z-index:7}.live-location-map-empty>svg{width:21px;height:21px;flex:0 0 21px;color:#1675aa}.live-location-map-empty>span{display:flex;flex-direction:column}.live-location-map-empty strong{font-size:10px}.live-location-map-empty small{color:#617789;font-size:8px;line-height:1.35}.live-location-attribution{position:absolute;inset:auto auto 0 0;padding:3px 7px;border-radius:0 7px 0 0;background:rgba(255,255,255,.86);color:#60758b;font-size:8px;z-index:8}.live-location-dock{position:absolute;inset-inline-end:18px;bottom:18px;width:min(370px,calc(100% - 36px));max-height:calc(100% - 95px);overflow:auto;padding:14px;border:1px solid rgba(197,215,227,.82);border-radius:21px;background:rgba(252,254,255,.94);box-shadow:0 17px 44px rgba(5,30,53,.22);backdrop-filter:blur(22px);z-index:9}.live-location-dock__head{display:flex;align-items:center;justify-content:space-between;gap:10px}.live-location-dock__head>span{min-width:0;display:flex;flex-direction:column}.live-location-dock__head strong{font-size:14px;font-weight:900}.live-location-dock__head small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#657b8d;font-size:9px}.live-location-dock__head>b{padding:5px 9px;border-radius:999px;background:#dff4ed;color:#08745d;font-size:9px}.live-location-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.live-location-metrics article{min-width:0;display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;column-gap:6px;padding:8px;border-radius:13px;background:#edf5fa}.live-location-metrics svg{grid-row:1/3;width:18px;height:18px;align-self:center;color:#1374aa}.live-location-metrics small{color:#75899a;font-size:7px}.live-location-metrics strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.live-location-people{display:flex;gap:6px;overflow-x:auto;padding:8px 0 3px}.live-location-person-card{min-width:205px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #dbe7ef;border-radius:14px;background:#f4f8fb}.live-location-person-card .live-location-avatar{width:36px;height:36px;flex-basis:36px;font-size:11px}.live-location-person-card>span:nth-child(2){min-width:0;display:flex;flex:1;flex-direction:column}.live-location-person-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.live-location-person-card small{color:#667d8f;font-size:8px}.live-location-person-card i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#0b9b78;box-shadow:0 0 0 4px rgba(11,155,120,.13)}.live-location-notice{margin-top:7px;padding:8px 10px;border-radius:11px;background:#e7f4fa;color:#0b5f8d;font-size:9px;line-height:1.45}.live-location-notice.is-error{background:#fff0f1;color:#a33442}.live-location-duration{display:flex;gap:5px;margin-top:9px}.live-location-duration button{height:34px;flex:1;border:1px solid #cfdeea;border-radius:11px;background:#f3f7fb;color:#60758b;font-size:10px;font-weight:900}.live-location-duration button.active{border-color:#176fa6;background:#176fa6;color:#fff;box-shadow:0 5px 12px rgba(23,111,166,.2)}.live-location-actions{display:flex;gap:6px;margin-top:7px}.live-location-share,.live-location-stop{height:42px;flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:13px;padding:0 13px;background:linear-gradient(135deg,#0b9d7b,#08745f);color:#fff;font-size:10px;font-weight:900;box-shadow:0 7px 17px rgba(11,146,117,.2)}.live-location-share:disabled{opacity:.5;box-shadow:none}.live-location-stop{flex:0 0 auto;background:#b63e4c}.live-location-actions svg{width:18px;height:18px}.live-location-privacy{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;color:#718697;font-size:8px;line-height:1.35}.live-location-privacy svg{width:13px;height:13px;flex:0 0 13px;color:#0b9275}@keyframes live-route-move{to{stroke-dashoffset:-20}}
@media(max-width:760px){.live-location-page .page{padding:0}.live-location-workspace{height:calc(var(--kani-viewport-height,100dvh) - 64px - 78px);min-height:600px;gap:0;background:#d5e3e5}.live-location-picker{grid-template-columns:minmax(0,1fr) 43px;grid-template-areas:"intro refresh" "search search" "friends friends";gap:8px;padding:9px 10px 8px;border-width:0 0 1px;border-radius:0;box-shadow:0 5px 18px rgba(6,35,59,.1);z-index:12}.live-location-picker__intro strong{font-size:13px}.live-location-picker__intro small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-location-heading__icon{width:40px;height:40px;flex-basis:40px;border-radius:14px}.live-location-refresh{width:43px;height:43px}.live-location-search{height:42px;border-radius:14px}.live-location-friends{gap:7px}.live-location-friend{min-width:152px;height:56px;padding:6px 9px;border-radius:16px}.live-location-friend .avatar,.live-location-avatar{width:38px;height:38px;flex-basis:38px}.live-location-friend strong{font-size:11px}.live-location-main,.live-location-stage,.live-location-native-map{min-height:0}.live-location-native-map{border:0;border-radius:0;box-shadow:none}.live-location-map-topline{top:9px;inset-inline:9px}.live-location-selected{min-width:0;max-width:72%;padding:7px 9px;border-radius:14px}.live-location-selected>svg{width:18px}.live-location-selected small{font-size:7px}.live-location-selected strong{font-size:10px}.live-location-connection{padding:7px 9px}.live-location-map-empty{top:60px;inset-inline-start:9px;max-width:calc(100% - 18px);padding:7px 9px}.live-location-map-empty small{display:none}.live-location-map-controls{inset-inline-start:9px;top:43%}.live-location-map-controls button,.live-location-recenter{width:40px;height:40px;border-radius:13px}.live-location-recenter{inset-inline-end:9px;bottom:10px}.live-location-dock{inset-inline:9px;bottom:9px;width:auto;max-height:245px;padding:10px;border-radius:19px}.live-location-dock__head strong{font-size:12px}.live-location-metrics{margin-top:7px}.live-location-metrics article{padding:6px}.live-location-people{padding-top:6px}.live-location-person-card{min-width:178px}.live-location-duration{margin-top:6px}.live-location-actions{margin-top:6px}.live-location-share,.live-location-stop{height:39px}.live-location-privacy{display:none}.live-location-attribution{font-size:7px}}
@media(max-width:390px){.live-location-workspace{min-height:560px}.live-location-picker__intro small{display:none}.live-location-friend{min-width:140px}.live-location-dock{max-height:228px}.live-location-metrics article{grid-template-columns:1fr;grid-template-rows:auto auto;text-align:center}.live-location-metrics svg{display:none}.live-location-map-controls{top:38%}}
.message-date { display: table; margin: 8px auto 22px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; color: #edf5fb; background: rgba(42,76,101,.86); font-size: .65rem; }
.message-row { display: flex; align-items: flex-end; gap: 8px; margin: 5px 0; }
.message-row.own { justify-content: flex-end; }
.message-bubble { position: relative; max-width: min(72%, 660px); padding: 9px 11px 7px; border: 1px solid rgba(232,243,251,.27); border-radius: 6px 15px 15px 15px; color: #fff; background: #477493; box-shadow: 0 6px 20px rgba(22,48,70,.17); overflow-wrap: anywhere; }
.message-row.own .message-bubble { border-color: rgba(195,222,251,.32); border-radius: 15px 6px 15px 15px; background: linear-gradient(135deg, #397fc8, #2868ac); }
.message-author { margin-bottom: 3px; color: #e6f3ff; font-size: .68rem; font-weight: 760; }
.message-reply { margin-bottom: 6px; padding: 7px 9px; border-left: 3px solid var(--blue-400); border-radius: 7px; color: #e3eef7; background: rgba(39,72,97,.42); font-size: .72rem; }
.message-text { white-space: pre-wrap; }
.message-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 3px -2px -2px 13px; color: #edf5fb; font-size: .6rem; }
.message-meta svg { width: 13px; height: 13px; }
.message-actions { visibility: hidden; display: flex; align-items: center; gap: 2px; align-self: center; opacity: 0; transition: .12s; }
.message-row:hover .message-actions { visibility: visible; opacity: 1; }
.message-action { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #d9e8f3; background: rgba(42,76,101,.88); cursor: pointer; }
.message-action:hover { color: #fff; }
.message-action svg { width: 14px; height: 14px; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 3px; margin: 5px 0 -14px; }
.message-reaction { min-height: 22px; padding: 2px 6px; border: 1px solid rgba(193,221,250,.34); border-radius: 99px; color: #fff; background: #315a78; font-size: .68rem; }
.attachment-preview { display: block; overflow: hidden; margin-bottom: 6px; border-radius: 9px; }
.attachment-preview img { display: block; max-height: 320px; object-fit: cover; }
.reply-strip { display: none; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); background: rgba(64,107,137,.98); }
.reply-strip.visible { display: flex; }
.reply-strip__main { min-width: 0; flex: 1; padding-left: 9px; border-left: 3px solid var(--blue-500); }
.reply-strip strong, .reply-strip span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .71rem; }
.reply-strip strong { color: var(--blue-400); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 11px 14px 14px; border-top: 1px solid var(--line); background: rgba(64,107,137,.96); }
.composer .icon-btn { width: 40px; height: 40px; flex-basis: 40px; border: 0; background: transparent; }
.composer-input { min-height: 42px; max-height: 130px; flex: 1; padding: 10px 13px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 13px; color: #fff; background: rgba(45,82,109,.72); outline: none; resize: none; }
.composer-input:focus { border-color: rgba(96,165,250,.4); }
.composer-send { color: #fff !important; background: var(--blue-600) !important; }
.composer.is-disabled { opacity: .72; }
.composer :disabled, .message-reaction:disabled { cursor: not-allowed; }
.chat-header-actions .is-disabled { opacity: .38; cursor: not-allowed; }
.chat-interaction-notice { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-top: 1px solid rgba(255,231,139,.3); color: #fff0b8; background: rgba(130,83,14,.35); font-size: .72rem; }
.chat-interaction-notice[hidden] { display: none; }
.chat-interaction-notice svg { width: 16px; flex: 0 0 16px; }
.chat-details-summary { padding: 4px 0 20px; text-align: center; }
.chat-details-summary .avatar { margin: 0 auto 13px; }
.chat-details-summary h3 { margin: 0; font-size: 1.15rem; }
.chat-details-summary p { margin: 4px 0 0; color: var(--muted); font-size: .75rem; }
.chat-details-section { padding-top: 18px; border-top: 1px solid var(--line); }
.chat-details-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.chat-details-section > strong { display: block; margin-bottom: 5px; font-size: .82rem; }
.chat-details-section > p { margin: 0 0 15px; color: var(--muted); font-size: .73rem; line-height: 1.6; }
.callout { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted-strong); background: rgba(148,163,184,.06); font-size: .74rem; }
.callout.error { border-color: rgba(255,204,204,.3); color: #ffe5e5; background: rgba(128,35,48,.32); }
.callout svg { width: 17px; flex: 0 0 17px; }
.chat-empty { flex: 1; display: grid; place-items: center; padding: 30px; text-align: center; }
.chat-empty__inner { max-width: 390px; }
.chat-empty__icon { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 22px; color: var(--blue-400); background: rgba(59,130,246,.12); }
.chat-empty__icon svg { width: 35px; }
.chat-empty h2 { margin: 0 0 7px; }
.chat-empty p { margin: 0; color: var(--muted); }

/* Realtime chat controls */
.chat-live-pill { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid rgba(134,239,172,.28); border-radius: 99px; color: #d9ffe6; background: rgba(22,101,52,.25); font-size: .64rem; font-weight: 750; }
.chat-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.12); }
.chat-live-pill[data-state="syncing"] { color: #e3effa; border-color: rgba(191,219,254,.3); background: rgba(37,99,235,.19); }
.chat-live-pill[data-state="syncing"] i { background: #93c5fd; animation: chat-live-pulse 1s ease-in-out infinite; }
.chat-live-pill[data-state="offline"] { color: #ffe2e2; border-color: rgba(254,202,202,.3); background: rgba(127,29,29,.24); }
.chat-live-pill[data-state="offline"] i { background: #fca5a5; box-shadow: none; }
@keyframes chat-live-pulse { 50% { opacity: .35; transform: scale(.72); } }
.chat-contact span.typing { color: #baf7d0; }
.load-older { display: flex; justify-content: center; margin-bottom: 14px; }

.message-text a { color: #d9efff; text-decoration: underline; text-decoration-color: rgba(217,239,255,.55); text-underline-offset: 2px; }
.message-deleted { color: rgba(240,247,252,.72); }
.message-reply { width: 100%; display: block; margin-bottom: 6px; padding: 7px 9px; border: 0; border-left: 3px solid var(--blue-400); border-radius: 7px; color: #e3eef7; background: rgba(39,72,97,.42); text-align: left; cursor: pointer; }
.message-reply strong, .message-reply span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .72rem; }
.message-reply strong { color: #d8ecff; }
.message-highlight .message-bubble { animation: message-highlight 1.25s ease; }
@keyframes message-highlight { 0%, 100% { box-shadow: 0 6px 20px rgba(22,48,70,.17); } 35% { box-shadow: 0 0 0 4px rgba(147,197,253,.42), 0 10px 28px rgba(22,48,70,.28); } }
.message-receipt.read { color: #b9f5ff; }
.message-reaction.active { border-color: rgba(147,197,253,.75); background: #244f78; }
.message-reaction span { font-weight: 750; }

.attachment-image img { width: 100%; max-width: 420px; max-height: 360px; object-fit: cover; }
.attachment-video { width: min(430px, 100%); max-height: 360px; background: #24465e; }
.attachment-file { min-width: min(310px, 62vw); display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 10px; border: 1px solid rgba(221,237,249,.24); border-radius: 11px; color: #fff; background: rgba(35,75,103,.4); }
.attachment-file:hover { color: #fff; background: rgba(35,75,103,.6); }
.attachment-file > svg { width: 23px; flex: 0 0 23px; }
.attachment-file > svg:last-child { width: 17px; flex-basis: 17px; opacity: .8; }
.attachment-file > span { min-width: 0; flex: 1; }
.attachment-file strong, .attachment-file small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-file strong { font-size: .73rem; }
.attachment-file small { margin-top: 2px; color: #dcebf5; font-size: .61rem; }
.voice-message { min-width: min(330px, 63vw); display: flex; align-items: center; gap: 9px; margin: 2px 0 6px; }
.voice-message > svg { width: 22px; flex: 0 0 22px; }
.voice-message__main { min-width: 0; flex: 1; }
.voice-message audio { width: 100%; height: 34px; display: block; }
.voice-message__main > span { display: block; margin-top: 2px; color: #e1edf6; font-size: .58rem; }

.typing-row { margin-top: 10px; }
.typing-bubble { min-width: 96px; display: flex; align-items: center; gap: 4px; padding: 12px 14px; }
.typing-bubble > span { width: 7px; height: 7px; border-radius: 50%; background: #e4f2fb; animation: typing-dot 1.2s ease-in-out infinite; }
.typing-bubble > span:nth-child(2) { animation-delay: .15s; }
.typing-bubble > span:nth-child(3) { animation-delay: .3s; }
.typing-bubble small { margin-left: 5px; color: #e3eef6; font-size: .58rem; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.composer-wrap { position: relative; border-top: 1px solid var(--line); background: rgba(64,107,137,.96); }
.composer-wrap .composer { border-top: 0; background: transparent; }
.composer [hidden], .composer-accessory[hidden], .emoji-picker[hidden], .reaction-picker[hidden], .voice-recorder[hidden] { display: none !important; }
.composer-accessory { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 8px 10px; border: 1px solid rgba(215,233,246,.25); border-radius: 12px; background: rgba(42,82,110,.7); }
.attachment-selection__preview { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; color: #dcecff; background: rgba(30,64,175,.25); }
.attachment-selection__preview img { width: 100%; height: 100%; object-fit: cover; }
.attachment-selection__preview svg { width: 21px; }
.attachment-selection__main { min-width: 0; flex: 1; }
.attachment-selection__main strong, .attachment-selection__main span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-selection__main strong { font-size: .74rem; }
.attachment-selection__main span { margin-top: 2px; color: #dce9f3; font-size: .62rem; }
.attachment-selection .icon-btn { width: 34px; height: 34px; flex-basis: 34px; }

.emoji-picker { position: absolute; left: 12px; bottom: calc(100% + 8px); z-index: 25; width: min(350px, calc(100vw - 38px)); overflow: hidden; border: 1px solid rgba(221,237,249,.3); border-radius: 17px; background: #3a6685; box-shadow: 0 24px 55px rgba(14,36,54,.38); }
.emoji-picker__head { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px 7px 14px; border-bottom: 1px solid var(--line); }
.emoji-picker__head strong { font-size: .76rem; }
.emoji-picker__head .icon-btn { width: 31px; height: 31px; flex-basis: 31px; }
.emoji-grid { max-height: 250px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; overflow-y: auto; padding: 9px; }
.emoji-grid button, .reaction-picker button { display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.emoji-grid button { aspect-ratio: 1; font-size: 1.3rem; }
.emoji-grid button:hover, .reaction-picker button:hover { background: rgba(225,238,248,.14); transform: scale(1.08); }

.reaction-picker { position: fixed; z-index: 190; width: min(310px, calc(100vw - 20px)); height: 48px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 5px; border: 1px solid rgba(221,237,249,.3); border-radius: 99px; background: #3a6685; box-shadow: 0 18px 42px rgba(14,36,54,.42); }
.reaction-picker button { font-size: 1.25rem; }
.reaction-picker button svg { width: 17px; }

.voice-recorder { min-height: 58px; margin-bottom: 11px; }
.voice-recorder__cancel, .voice-recorder__send { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }
.voice-recorder__cancel { color: #ffd9d9; }
.voice-recorder__send { color: #fff; background: var(--blue-600) !important; }
.voice-recorder__pulse { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 0 5px rgba(251,113,133,.12); animation: record-pulse 1s ease-in-out infinite; }
.voice-recorder strong { min-width: 38px; font-size: .77rem; }
.voice-recorder__label { min-width: 0; flex: 1; color: #e3eef6; font-size: .69rem; }
@keyframes record-pulse { 50% { box-shadow: 0 0 0 8px rgba(251,113,133,.05); transform: scale(.88); } }
.composer-send.is-sending svg { animation: send-spin .8s linear infinite; }
@keyframes send-spin { to { transform: rotate(360deg); } }
.new-chat-person { cursor: pointer; }
.new-chat-person input { width: 18px; height: 18px; accent-color: #3b82f6; }

/* WhatsApp-inspired unified messages + calls */
.chat-shell { border-color: rgba(134, 150, 160, .24); background: #0b141a; }
.chat-list-pane { border-color: rgba(134, 150, 160, .2); background: #111b21; }
.chat-main-pane { background-color: #0b141a; background-image: radial-gradient(circle at 20% 20%, rgba(0,168,132,.055) 0 2px, transparent 2.5px), radial-gradient(circle at 75% 65%, rgba(134,150,160,.045) 0 2px, transparent 2.5px); background-size: 44px 44px, 52px 52px; }
.chat-main-header, .composer-wrap, .composer { background: #202c33; }
.chat-tabs { overflow-x: auto; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chat-tab svg { width: 14px; height: 14px; }
.chat-tab.active { color: #d9fff6; background: rgba(0,168,132,.2); }
.conversation:hover { background: rgba(134,150,160,.1); }
.conversation.active { background: rgba(42,57,66,.96); }
.conversation-unread, .composer-send { background: #00a884 !important; }
.message-bubble { border-color: rgba(134,150,160,.18); background: #202c33; box-shadow: 0 4px 12px rgba(0,0,0,.14); }
.message-row.own .message-bubble { border-color: rgba(0,168,132,.25); background: #005c4b; }
.message-date { border-color: rgba(134,150,160,.2); background: #182229; }
.composer-input { border-color: transparent; background: #2a3942; }
.composer-input:focus { border-color: rgba(0,168,132,.65); }
.reply-strip { background: #202c33; }
.emoji-picker, .reaction-picker { background: #233138; }
.message-reaction.active { border-color: rgba(0,168,132,.8); background: #075e54; }
.chat-live-pill { border-color: rgba(0,168,132,.42); background: rgba(0,92,75,.48); }

.chat-call-history-row { display: flex; align-items: center; gap: 6px; min-width: 0; border-bottom: 1px solid rgba(134,150,160,.13); border-radius: 11px; }
.chat-call-history-row:hover { background: rgba(134,150,160,.08); }
.chat-call-history-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; padding: 11px 4px 11px 10px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.chat-call-history-main:disabled { cursor: default; }
.chat-call-history-row .call-direction { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; color: #63d7bd; background: rgba(0,168,132,.13); }
.chat-call-history-row .call-direction.missed { color: #ff8f91; background: rgba(239,68,68,.13); }
.chat-call-again { margin-right: 7px; color: #63d7bd; }
.chat-call-again:disabled { opacity: .32; }

body.chat-call-open { overflow: hidden; }
.chat-call-layer { position: fixed; z-index: 245; inset: 0; display: grid; place-items: center; padding: clamp(10px, 3vw, 34px); background: rgba(3,10,14,.82); backdrop-filter: blur(12px); }
.chat-call-layer[hidden] { display: none !important; }
.chat-call-stage { width: min(1120px, 100%); height: min(760px, calc(100dvh - 40px)); min-height: 480px; border-color: rgba(134,150,160,.3); border-radius: 26px; background: radial-gradient(circle at 50% 28%, #214c47, #0b141a 68%); box-shadow: 0 35px 100px rgba(0,0,0,.58); }
.chat-call-stage .call-idle__icon { color: #baf7e9; border-color: rgba(0,168,132,.36); background: rgba(0,168,132,.17); }
.chat-call-stage .video-tile { background: #17282b; }
.chat-call-stage .video-tile__placeholder { background: radial-gradient(circle, #356c67, #122124 72%); }
.chat-call-stage .call-controls { background: rgba(17,27,33,.9); }
.chat-call-stage .call-control.active { background: #00a884; box-shadow: 0 8px 22px rgba(0,168,132,.28); }
.chat-call-minimize { position: absolute; z-index: 15; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: #fff; background: rgba(17,27,33,.76); font-size: 1.45rem; line-height: 1; cursor: pointer; }
[dir="rtl"] .chat-call-minimize { right: auto; left: 16px; }
.chat-call-layer.is-minimized { inset: auto 18px 18px auto; width: min(360px, calc(100vw - 24px)); height: 230px; padding: 0; background: transparent; backdrop-filter: none; }
[dir="rtl"] .chat-call-layer.is-minimized { right: auto; left: 18px; }
.chat-call-layer.is-minimized .chat-call-stage { width: 100%; height: 100%; min-height: 0; border-radius: 18px; box-shadow: 0 22px 65px rgba(0,0,0,.55); }
.chat-call-layer.is-minimized .call-controls { bottom: 9px; gap: 4px; padding: 5px; }
.chat-call-layer.is-minimized .call-control { width: 34px; height: 34px; border-radius: 50%; }
.chat-call-layer.is-minimized .call-control.end { width: 42px; }
.chat-call-layer.is-minimized .screen-control, .chat-call-layer.is-minimized #speakerControl { display: none; }
.chat-call-layer.is-minimized .call-top-info { top: 10px; max-width: calc(100% - 90px); }

.modal.chat-incoming-modal { z-index: 270; align-items: stretch; justify-content: stretch; padding: 0; background: #07161b; backdrop-filter: none; }
.modal-card.chat-incoming-card { width: 100%; max-width: none; max-height: none; min-height: 100dvh; display: grid; place-items: center; overflow: auto; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 22%, rgba(31,116,101,.46), transparent 28rem), linear-gradient(165deg, #17383a, #07161b 72%); text-align: center; box-shadow: none; }
.chat-incoming-card .modal-body { width: min(520px, 100%); padding: max(48px, env(safe-area-inset-top)) 25px max(36px, env(safe-area-inset-bottom)); }
.incoming-call-avatar { position: relative; width: 104px; height: 104px; margin: 0 auto 22px; }
.incoming-call-avatar .avatar { position: relative; z-index: 2; width: 104px; height: 104px; flex-basis: 104px; border: 3px solid rgba(255,255,255,.16); font-size: 2rem; }
.incoming-call-ring { position: absolute; inset: -9px; z-index: 1; border: 2px solid rgba(0,168,132,.5); border-radius: 50%; animation: incoming-ring 1.7s ease-out infinite; }
@keyframes incoming-ring { from { opacity: .85; transform: scale(.82); } to { opacity: 0; transform: scale(1.28); } }
.incoming-call-label { display: inline-flex; align-items: center; gap: 7px; color: #8fe7d1; font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.incoming-call-label i { width: 7px; height: 7px; border-radius: 50%; background: #00a884; box-shadow: 0 0 0 5px rgba(0,168,132,.14); }
.chat-incoming-card h2 { margin: 11px 0 5px; font-size: 1.45rem; }
.chat-incoming-card p { margin: 0; color: #aebac1; }
.incoming-call-actions { display: flex; justify-content: center; gap: 54px; margin-top: 34px; }
.incoming-call-action { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; color: #fff; background: transparent; font-size: .7rem; cursor: pointer; }
.incoming-call-action > span:first-child { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; }
.incoming-call-action svg { width: 25px; height: 25px; }
.incoming-call-action.decline > span:first-child { background: #ef4444; }
.incoming-call-action.accept > span:first-child { background: #00a884; animation: accept-pulse 1.8s ease-in-out infinite; }
@keyframes accept-pulse { 50% { box-shadow: 0 0 0 10px rgba(0,168,132,.12); } }

/* Calls */
.call-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr); gap: 20px; }
.call-stage { position: relative; min-height: min(720px, calc(100vh - 185px)); overflow: hidden; border: 1px solid rgba(210,231,239,.24); border-radius: 24px; background: radial-gradient(circle at 50% 30%, #294a4b, #101b20 66%); box-shadow: 0 28px 80px rgba(18,47,62,.3); }
.call-idle { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; }
.call-idle__inner { max-width: 470px; }
.call-idle__icon { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border: 1px solid rgba(205,230,251,.32); border-radius: 28px; color: #c8e2ff; background: rgba(44,99,158,.32); box-shadow: 0 20px 50px rgba(22,48,70,.25); }
.call-idle__icon svg { width: 42px; height: 42px; }
.call-idle h2 { margin: 0 0 7px; font-size: 1.5rem; }
.call-idle p { margin: 0 0 22px; color: var(--muted); }
.video-grid { position: absolute; inset: 0; display: grid; gap: 8px; padding: 8px; isolation:isolate; }
.video-grid[data-count="1"] { grid-template-columns: 1fr; }
.video-grid[data-count="2"] { display:block; }
.video-grid[data-count="2"] .video-tile.is-remote { position:absolute; inset:8px; }
.video-grid[data-count="2"] .video-tile.is-local { position:absolute; z-index:5; top:70px; right:18px; width:min(25%,220px); height:min(30%,165px); border:2px solid rgba(255,255,255,.72); box-shadow:0 18px 46px rgba(0,0,0,.4); }
[dir="rtl"] .video-grid[data-count="2"] .video-tile.is-local { right:auto; left:18px; }
.video-grid[data-count="3"], .video-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.video-grid[data-count="5"], .video-grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.video-grid[data-count="7"],.video-grid[data-count="8"],.video-grid[data-count="9"] { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
.video-grid[data-count="10"],.video-grid[data-count="11"],.video-grid[data-count="12"] { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
.video-grid[data-overflow="true"] { overflow:auto; grid-auto-rows:minmax(150px,1fr); }
.video-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 18px; background: #1a2b30; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.video-tile video { width: 100%; height: 100%; object-fit: cover; background:#111d21; }
.video-tile.mirror-video video { transform:scaleX(-1); }
.video-tile__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #3f7370, #17272b 72%); }
.video-tile__name { position: absolute; left: 10px; bottom: 9px; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; color: #fff; background: rgba(0,0,0,.48); backdrop-filter: blur(8px); font-size: .7rem; }
.video-tile__mic { display:grid; }
.video-tile.is-muted .video-tile__name { color:#ffdadd; background:rgba(108,24,35,.78); }
.video-tile__quality { position:absolute; top:9px; left:9px; display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#fff; background:#c83b4d; font-size:.7rem; font-weight:900; }
.video-tile__quality:empty { display:none; }
.call-top-info { position: absolute; top: 17px; left: 50%; z-index: 8; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; color: #dbeafe; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); font-size: .72rem; transform: translateX(-50%); }
.call-quality-badge { position:absolute; z-index:9; top:17px; right:18px; min-width:54px; height:32px; padding:0 10px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:#fff; background:rgba(8,18,21,.62); backdrop-filter:blur(10px); font-size:.63rem; font-weight:850; letter-spacing:.04em; cursor:pointer; }
[dir="rtl"] .call-quality-badge { right:auto; left:18px; }
.call-participants-panel { position:absolute; z-index:20; inset:10px 10px 10px auto; width:min(360px,calc(100% - 20px)); padding:16px; overflow:auto; border:1px solid rgba(255,255,255,.16); border-radius:20px; color:#eef8f8; background:rgba(13,28,32,.94); backdrop-filter:blur(18px); box-shadow:-20px 0 60px rgba(0,0,0,.32); }
[dir="rtl"] .call-participants-panel { inset:10px auto 10px 10px; }
.call-participants-panel__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.call-participants-panel__header small,.call-participants-panel__header strong { display:block; }
.call-participants-panel__header small { color:#9fc2c1; font-size:.65rem; }
.call-participants-panel__header .icon-btn { color:#eaf6f5; background:rgba(255,255,255,.08); }
.call-participant-list { display:grid; gap:5px; }
.call-participant-row { display:flex; align-items:center; gap:10px; padding:9px; border-radius:13px; background:rgba(255,255,255,.055); }
.call-participant-row>span:not(.avatar) { min-width:0; flex:1; }
.call-participant-row strong,.call-participant-row small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.call-participant-row small { color:#9fc2c1; font-size:.63rem; }
.call-participant-row>i { width:9px; height:9px; border-radius:50%; background:#6b7c7d; }
.call-participant-row>i.online { background:#2fd197; box-shadow:0 0 0 4px rgba(47,209,151,.12); }
.call-invite-box { display:grid; gap:9px; margin-top:15px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.call-invite-box>label { font-size:.7rem; font-weight:800; }
.call-invite-box .input { color:#eef8f8; border-color:rgba(255,255,255,.13); background:rgba(255,255,255,.07); }
.call-invite-results { display:grid; gap:4px; max-height:230px; overflow:auto; }
.call-invite-person { display:flex; align-items:center; gap:9px; padding:8px; border-radius:12px; cursor:pointer; }
.call-invite-person:hover { background:rgba(255,255,255,.06); }
.call-invite-person>span:last-child { min-width:0; flex:1; }
.call-invite-person strong,.call-invite-person small { display:block; }
.call-invite-person small,.call-invite-empty { color:#9fc2c1; font-size:.63rem; }
.call-invite-person input { width:18px; height:18px; accent-color:#21b48d; }
.call-controls { position: absolute; z-index: 10; left: 50%; bottom: 23px; display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(5,12,22,.72); backdrop-filter: blur(14px); transform: translateX(-50%); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.call-control { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; color: #fff; background: rgba(148,163,184,.15); cursor: pointer; }
.call-control:hover { background: rgba(148,163,184,.27); }
.call-control.active { background: var(--blue-600); box-shadow: 0 8px 22px rgba(37,99,235,.28); }
.call-control.off { color: #ffe5e5; background: rgba(128,35,48,.5); }
.call-control.end { width: 58px; border-radius: 16px; background: var(--red-500); }
.call-control svg { width: 22px; height: 22px; }
.call-sidebar { min-width: 0; display: grid; align-content: start; gap: 20px; }
.call-history-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.call-history-item:last-child { border: 0; }
.call-direction { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #d7fbe5; background: rgba(22,104,65,.32); }
.call-direction.missed { color: #ffe5e5; background: rgba(128,35,48,.32); }
.call-direction svg { width: 17px; }
.call-history-main { min-width: 0; flex: 1; }
.call-history-main strong, .call-history-main span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.call-history-main strong { font-size: .82rem; }
.call-history-main span { color: var(--muted); font-size: .69rem; }

/* Exchange */
.exchange-dashboard { --exchange-deep: #173f62; --exchange-blue: #2478df; --exchange-soft: rgba(205, 231, 251, .11); display: grid; gap: 18px; }
.exchange-dashboard [hidden] { display: none !important; }
.exchange-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(211,234,252,.28); border-radius: 26px; background: linear-gradient(135deg, #173f62 0%, #225a83 54%, #34779d 100%); box-shadow: 0 28px 70px rgba(15,45,67,.28); }
.exchange-hero::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -110px; top: -235px; border-radius: 50%; border: 72px solid rgba(158,211,248,.08); box-shadow: 0 0 0 48px rgba(255,255,255,.025); }
.exchange-hero::after { content: "$"; position: absolute; z-index: -1; right: 5%; top: 18px; color: rgba(255,255,255,.035); font-size: clamp(10rem, 19vw, 16rem); font-weight: 900; line-height: 1; transform: rotate(8deg); }
.exchange-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.exchange-live { display: inline-flex; align-items: center; gap: 9px; max-width: min(100%, 520px); min-height: 32px; padding: 6px 12px; border: 1px solid rgba(134,239,172,.2); border-radius: 999px; color: #d2ffe2; background: rgba(12,77,52,.25); font-size: .72rem; font-weight: 800; letter-spacing: .01em; }
.exchange-live::before { content: ""; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 5px rgba(74,222,128,.13); animation: pulse 1.8s infinite; }
.exchange-live.stale { color: #ffefbd; border-color: rgba(245,158,11,.23); background: rgba(124,78,11,.24); }
.exchange-live.stale::before { background: #fbbf24; box-shadow: 0 0 0 5px rgba(245,158,11,.12); animation: none; }
.exchange-live.empty { color: #dae6ef; border-color: rgba(203,213,225,.2); background: rgba(43,65,82,.28); }
.exchange-live.empty::before { background: #94a3b8; box-shadow: 0 0 0 5px rgba(148,163,184,.13); animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
.exchange-refresh-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 13px; border: 1px solid rgba(219,238,251,.22); border-radius: 11px; color: #f5fbff; background: rgba(16,54,82,.48); backdrop-filter: blur(10px); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.exchange-refresh-button:hover { border-color: rgba(219,238,251,.4); background: rgba(28,80,116,.62); transform: translateY(-1px); }
.exchange-refresh-button:disabled { cursor: wait; opacity: .74; transform: none; }
.exchange-refresh-button svg { width: 17px; height: 17px; }
.exchange-refresh-button.loading svg { animation: exchange-spin .8s linear infinite; }
@keyframes exchange-spin { to { transform: rotate(360deg); } }
.exchange-hero__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, 320px); align-items: end; gap: clamp(24px, 5vw, 70px); margin-top: clamp(28px, 4vw, 46px); }
.exchange-eyebrow { display: block; margin-bottom: 8px; color: #b9ddfa; font-size: .71rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.exchange-hero h1 { max-width: 680px; margin: 0; font-size: clamp(2rem, 3.9vw, 3.35rem); line-height: 1.04; letter-spacing: -.052em; }
.exchange-hero__copy p { max-width: 650px; margin: 13px 0 0; color: #e9f4fb; font-size: clamp(.86rem, 1.4vw, .98rem); }
.exchange-snapshot { padding: 18px; border: 1px solid rgba(219,238,251,.22); border-radius: 18px; background: rgba(16,52,77,.4); box-shadow: inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.exchange-snapshot > span { display: block; color: #bdd8ea; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.exchange-snapshot > strong { display: block; margin-top: 3px; overflow: hidden; color: #fff; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.exchange-snapshot__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.exchange-snapshot__stats span { min-width: 0; padding: 9px 8px; border-radius: 10px; background: rgba(219,238,251,.08); text-align: center; }
.exchange-snapshot__stats small, .exchange-snapshot__stats b { display: block; }
.exchange-snapshot__stats small { color: #b9d0e0; font-size: .59rem; }
.exchange-snapshot__stats b { margin-top: 2px; font-size: .8rem; font-variant-numeric: tabular-nums; }
.exchange-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.exchange-meta-card { min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(219,238,251,.16); border-radius: 14px; background: rgba(18,57,84,.29); }
.exchange-meta-card__icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #d8edff; background: rgba(118,183,232,.14); }
.exchange-meta-card__icon svg { width: 17px; height: 17px; }
.exchange-meta-card > span:last-child { min-width: 0; }
.exchange-meta-card small, .exchange-meta-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exchange-meta-card small { color: #b7d0e1; font-size: .62rem; }
.exchange-meta-card strong { margin-top: 2px; color: #f7fbff; font-size: .74rem; }
.exchange-meta-card a, .exchange-source-details a { color: inherit; }
.exchange-meta-card a:hover, .exchange-source-details a:hover { color: #c9e7ff; }
.exchange-source-details { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 13px; color: #cbdfea; font-size: .66rem; }
.exchange-source-details > span { display: inline-flex; align-items: center; gap: 6px; }
.exchange-source-details svg { width: 14px; height: 14px; color: #b9ddfa; }
.exchange-alerts { display: grid; gap: 10px; }
.exchange-dashboard .exchange-notice { margin: 0; border-color: rgba(164,205,235,.22); border-radius: 15px; background: rgba(47,89,118,.82); }
.exchange-dashboard .exchange-notice--warning { border-color: rgba(245,158,11,.26); background: rgba(111,75,25,.54); }
.exchange-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 370px); align-items: start; gap: 18px; }
.exchange-rates-panel, .exchange-converter-panel { border-color: rgba(216,235,249,.24); background: linear-gradient(160deg, rgba(68,113,144,.98), rgba(53,94,124,.98)); box-shadow: 0 18px 42px rgba(25,55,76,.15); }
.exchange-rates-panel { overflow: hidden; }
.exchange-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 20px 15px; }
.exchange-panel-header .panel-title, .exchange-converter-heading { display: flex; align-items: center; gap: 11px; }
.exchange-panel-header .panel-title h2, .exchange-converter-heading h2 { margin: 0; font-size: 1rem; }
.exchange-panel-header .panel-title p, .exchange-converter-heading p { margin: 2px 0 0; color: var(--muted); font-size: .7rem; }
.exchange-section-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgba(177,218,247,.19); border-radius: 12px; color: #d8ecff; background: rgba(36,120,223,.2); }
.exchange-section-icon svg { width: 19px; height: 19px; }
.exchange-search { width: min(245px, 42%); min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(212,232,246,.21); border-radius: 12px; color: #cde2f1; background: rgba(38,76,103,.48); transition: border-color .18s, box-shadow .18s; }
.exchange-search:focus-within { border-color: rgba(143,196,238,.65); box-shadow: 0 0 0 3px rgba(52,133,211,.16); }
.exchange-search svg { width: 17px; height: 17px; flex: 0 0 17px; }
.exchange-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: .76rem; }
.exchange-search input::placeholder { color: #b8cbd8; }
.exchange-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.exchange-list-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 13px; color: #bfd2e0; font-size: .67rem; }
.exchange-list-summary strong { color: #f6fbff; font-variant-numeric: tabular-nums; }
.exchange-rate-table-wrap { overflow-x: auto; border-top: 1px solid rgba(218,237,250,.16); }
.rate-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.rate-table th { padding: 11px 15px; border-bottom: 1px solid rgba(218,237,250,.15); color: #c8dce9; background: rgba(33,70,96,.22); font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.rate-table td { padding: 15px; border-bottom: 1px solid rgba(218,237,250,.13); }
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table tbody tr { transition: background .15s; }
.rate-table tbody tr:hover { background: rgba(202,230,250,.055); }
.currency-cell { display: flex; align-items: center; gap: 11px; min-width: 155px; }
.currency-flag { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid rgba(186,219,244,.16); border-radius: 12px; color: #e1f1ff; background: linear-gradient(145deg, rgba(63,139,216,.22), rgba(39,94,137,.25)); font-weight: 850; font-size: .72rem; box-shadow: inset 0 1px rgba(255,255,255,.07); }
.currency-cell strong, .currency-cell span { display: block; }
.currency-cell strong { font-size: .84rem; letter-spacing: .01em; }
.currency-cell span { max-width: 190px; overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.rate-value { color: #fbfdff; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-value small { display: none; }
.rate-change { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 4px 7px; border-radius: 8px; color: #d7fbe5; background: rgba(27,129,75,.2); font-size: .67rem; font-weight: 760; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-change svg { width: 13px; height: 13px; }
.rate-change.down { color: #ffe3e7; background: rgba(173,48,67,.2); }
.rate-change.flat { color: #d8e6f0; background: rgba(121,151,172,.16); }
.rate-source { min-width: 160px; }
.rate-source .badge { max-width: 240px; overflow: hidden; border-color: rgba(192,220,241,.18); color: #e4f0f8; background: rgba(44,83,109,.42); text-overflow: ellipsis; white-space: nowrap; }
.rate-source .badge a { color: inherit; }
.rate-source > small { display: block; margin-top: 5px; color: var(--muted); font-size: .61rem; }
.exchange-rate-cards { display: none; }
.exchange-rate-card { min-width: 0; padding: 14px; border: 1px solid rgba(211,234,250,.17); border-radius: 15px; background: linear-gradient(145deg, rgba(70,118,150,.68), rgba(47,88,117,.72)); box-shadow: inset 0 1px rgba(255,255,255,.045); }
.exchange-rate-card__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.exchange-rate-card__head > span:nth-child(2) { min-width: 0; flex: 1; }
.exchange-rate-card__head strong, .exchange-rate-card__head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exchange-rate-card__head strong { font-size: .84rem; }
.exchange-rate-card__head small { color: var(--muted); font-size: .65rem; }
.exchange-rate-card__head .rate-change { margin-left: auto; }
.exchange-rate-card__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.exchange-rate-card__values > span { min-width: 0; padding: 10px; border-radius: 10px; background: rgba(31,70,97,.35); }
.exchange-rate-card__values small, .exchange-rate-card__values strong { display: block; }
.exchange-rate-card__values small { color: #bfd3e1; font-size: .61rem; }
.exchange-rate-card__values strong { margin-top: 2px; overflow-wrap: anywhere; color: #fff; font-size: .86rem; font-variant-numeric: tabular-nums; }
.exchange-rate-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #bed2e0; font-size: .61rem; }
.exchange-rate-card__foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exchange-rate-card__foot a { color: inherit; }
.exchange-rate-empty { min-height: 210px; border-top: 1px solid rgba(218,237,250,.14); }
.exchange-converter-panel { position: sticky; top: calc(var(--header-h) + 18px); overflow: hidden; }
.exchange-converter-heading { padding: 20px 20px 5px; }
.converter { padding: 16px 20px 20px; }
.converter-field { padding: 14px; border: 1px solid rgba(214,235,250,.19); border-radius: 15px; background: rgba(37,76,103,.38); }
.converter-field label { display: block; margin-bottom: 8px; color: #cee0ec; font-size: .66rem; font-weight: 750; }
.converter-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 7px; }
.converter-row .input, .converter-row .select { height: 46px; border-color: rgba(207,230,247,.2); color: #fff; background-color: rgba(27,62,87,.54); }
.converter-row .input { font-size: 1rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.converter-row .input[readonly] { color: #dfeefa; opacity: 1; }
.converter-row .select { font-weight: 800; }
.converter-quick-amounts { display: flex; gap: 6px; margin-top: 9px; }
.converter-quick-amounts button { flex: 1; min-height: 29px; padding: 4px 7px; border: 1px solid rgba(203,228,246,.17); border-radius: 8px; color: #cfe1ee; background: rgba(71,118,150,.28); font-size: .64rem; font-weight: 750; cursor: pointer; }
.converter-quick-amounts button:hover, .converter-quick-amounts button.active { border-color: rgba(125,190,242,.54); color: #fff; background: rgba(36,120,223,.34); }
.converter-swap { position: relative; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; margin: -5px auto; border: 5px solid #3c6785; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2e8bec, #1c5fc5); box-shadow: 0 10px 24px rgba(15,55,102,.32); cursor: pointer; transition: transform .18s ease; }
.converter-swap:hover { transform: rotate(180deg); }
.converter-swap svg { width: 17px; height: 17px; }
.converter-result { margin-top: 14px; padding: 17px; border: 1px solid rgba(141,200,245,.25); border-radius: 15px; background: linear-gradient(135deg, rgba(31,102,209,.32), rgba(54,144,203,.17)); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.converter-result span { display: block; color: #c8dce9; font-size: .66rem; }
.converter-result strong { display: block; margin: 4px 0 3px; overflow-wrap: anywhere; color: #fff; font-size: clamp(1.25rem, 2.3vw, 1.65rem); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.converter-security { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: #c2d7e6; font-size: .64rem; }
.converter-security svg { width: 15px; height: 15px; flex: 0 0 15px; color: #b9ddfa; }
.exchange-disclaimer { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid rgba(207,231,247,.21); border-radius: 16px; color: #dceaf3; background: rgba(50,92,121,.73); }
.exchange-disclaimer__icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #d7ecff; background: rgba(54,135,209,.23); }
.exchange-disclaimer__icon svg { width: 17px; height: 17px; }
.exchange-disclaimer strong, .exchange-disclaimer div > span { display: block; }
.exchange-disclaimer strong { font-size: .76rem; }
.exchange-disclaimer div > span { margin-top: 2px; color: #cbdde9; font-size: .68rem; line-height: 1.55; }

/* TV */
.tv-page-header { align-items: flex-end; }
.tv-page-header .page-subtitle { max-width: 760px; }
.tv-summary { display: flex; align-items: stretch; gap: 8px; padding: 6px; border: 1px solid rgba(231,242,250,.2); border-radius: 18px; background: rgba(38,73,99,.42); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.tv-summary span { min-width: 102px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 9px 12px; border-radius: 13px; background: rgba(255,255,255,.055); }
.tv-summary strong { grid-row: span 2; font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-summary small { color: #d9e8f2; font-size: .64rem; line-height: 1.25; }
.tv-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) 390px; gap: 20px; }
.tv-player-panel { overflow: hidden; border-color: rgba(233,243,251,.28); background: linear-gradient(165deg, rgba(52,91,120,.96), rgba(39,75,102,.97)); box-shadow: 0 24px 58px rgba(14,33,48,.24); }
.tv-player { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: #02060b; }
.tv-player video, .tv-player iframe { width: 100%; height: 100%; border: 0; background: #000; }
.tv-player [hidden] { display: none !important; }
.tv-player-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; color: #d8e7f1; text-align: center; background: radial-gradient(circle at 50% 18%, rgba(64,127,169,.65), transparent 45%), linear-gradient(145deg, #173349, #0a1d2c 72%); }
.tv-player-empty::before { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(circle at center, #000, transparent 78%); }
.tv-player-empty > div { position: relative; max-width: 520px; }
.tv-player-empty strong { display: inline-block; margin-bottom: 4px; color: #fff; font-size: 1.04rem; }
.tv-player-empty svg { width: 56px; height: 56px; margin: 0 auto 15px; padding: 13px; border: 1px solid rgba(208,231,247,.2); border-radius: 18px; color: #d4edff; background: rgba(112,181,227,.13); }
.tv-player-empty .btn { margin-top: 16px; }
.tv-unavailable-hint { display: inline-block; max-width: 430px; margin-top: 10px; color: #aecade; font-size: .72rem; }
.tv-player__badge { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(255,214,214,.26); border-radius: 9px; color: #fff; background: rgba(177,22,35,.9); box-shadow: 0 8px 24px rgba(0,0,0,.28); font-size: .65rem; font-weight: 850; letter-spacing: .08em; }
.tv-player__badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.12); animation: tv-live-pulse 1.6s ease-in-out infinite; }
@keyframes tv-live-pulse { 50% { opacity: .45; transform: scale(.82); } }
.tv-player-notice { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1px solid rgba(219,234,254,.28); border-radius: 13px; color: #edf6ff; background: rgba(28,63,88,.94); box-shadow: 0 12px 34px rgba(4,18,30,.35); backdrop-filter: blur(10px); }
.tv-player-notice[hidden] { display: none; }
.tv-player-notice > span { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; font-size: .72rem; }
.tv-player-notice > span svg { width: 17px; height: 17px; flex: 0 0 17px; color: #f9d995; }
.tv-player-notice .btn { flex: 0 0 auto; padding: 7px 10px; font-size: .66rem; }
.tv-player-notice__close { width: 28px; height: 28px; flex: 0 0 28px; border: 0; border-radius: 8px; color: #d9e8f3; background: rgba(255,255,255,.08); font-size: 1rem; cursor: pointer; }
.tv-now { display: flex; align-items: center; gap: 14px; padding: 17px 19px 14px; }
.tv-now__logo { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(227,241,250,.2); border-radius: 15px; color: #eaf6ff; background: rgba(104,165,206,.16); font-weight: 850; box-shadow: inset 0 1px rgba(255,255,255,.07); }
.tv-now__logo img { width: 100%; height: 100%; object-fit: contain; }
.tv-now__main { min-width: 0; flex: 1; }
.tv-now__main strong, .tv-now__main span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-now__main strong { font-size: .95rem; }
.tv-now__main span { color: var(--muted); font-size: .73rem; }
.tv-now__actions { display: flex; align-items: center; gap: 8px; }
.tv-trust-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 18px 17px; padding: 11px 13px; border: 1px solid rgba(116,198,214,.2); border-radius: 13px; color: #d8e9f2; background: rgba(48,120,135,.13); font-size: .67rem; line-height: 1.45; }
.tv-trust-note > svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; color: #87e2e7; }
.tv-trust-note strong { color: #f2fbff; }
.channel-panel { max-height: calc(100vh - 155px); display: flex; flex-direction: column; overflow: hidden; border-color: rgba(233,243,251,.26); background: linear-gradient(180deg, rgba(66,108,138,.96), rgba(49,87,116,.97)); box-shadow: 0 20px 48px rgba(18,39,56,.18); }
.channel-panel .panel-header { display: block; padding-bottom: 12px; border-bottom: 1px solid rgba(227,239,248,.13); }
.channel-panel .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.channel-filters { display: flex; gap: 6px; overflow-x: auto; padding: 1px 0 4px; scrollbar-width: none; }
.channel-filters::-webkit-scrollbar { display: none; }
.channel-filter { flex: 0 0 auto; padding: 7px 11px; border: 1px solid transparent; border-radius: 99px; color: #dbe8f1; background: rgba(213,232,245,.07); font-size: .67rem; font-weight: 720; cursor: pointer; transition: .16s ease; }
.channel-filter:hover { border-color: rgba(220,238,250,.18); background: rgba(220,238,250,.1); }
.channel-filter.active { border-color: rgba(163,211,245,.27); color: #fff; background: linear-gradient(135deg, rgba(50,132,205,.7), rgba(54,118,167,.65)); box-shadow: 0 7px 18px rgba(20,59,91,.18); }
.channel-list { min-height: 0; overflow-y: auto; padding: 9px; }
.channel-item { width: 100%; display: flex; align-items: center; gap: 11px; margin-bottom: 5px; padding: 10px; border: 1px solid transparent; border-radius: 14px; color: inherit; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.channel-item:hover { border-color: rgba(225,240,250,.13); background: rgba(222,239,250,.08); }
.channel-item.active { border-color: rgba(139,201,242,.3); background: linear-gradient(100deg, rgba(42,131,203,.24), rgba(82,147,189,.12)); box-shadow: inset 3px 0 #72bdf0; }
.channel-item.is-unavailable { opacity: .74; }
.channel-item.is-unavailable:hover { opacity: .92; }
.channel-logo { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; color: #edf6ff; background: linear-gradient(145deg, #3b7196, #2c5673); border: 1px solid rgba(225,239,250,.22); font-weight: 800; font-size: .75rem; box-shadow: 0 7px 17px rgba(17,43,62,.16); }
.channel-logo img { width: 100%; height: 100%; object-fit: contain; }
.channel-main { min-width: 0; flex: 1; }
.channel-main strong, .channel-main span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.channel-main strong { font-size: .82rem; color: #f8fcff; }
.channel-main span { color: #d7e5ee; font-size: .67rem; }
.channel-live { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 7px; color: #fff0f0; background: rgba(181,32,45,.23); font-size: .56rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.channel-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff606b; box-shadow: 0 0 0 3px rgba(255,78,91,.12); }
.channel-live.unavailable { color: #d8e4ec; background: rgba(188,207,219,.08); }
.channel-live.unavailable::before { border-radius: 2px; background: #8ca9bb; box-shadow: none; }
.channel-load-more { width:100%; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:7px; border:1px solid rgba(224,241,252,.22); border-radius:13px; color:#f4f9fc; background:rgba(104,170,210,.18); font:inherit; font-size:.68rem; font-weight:800; cursor:pointer; }
.channel-load-more:hover,.channel-load-more:focus-visible { border-color:rgba(235,248,255,.46); background:rgba(111,184,228,.3); }
.channel-load-more span { color:#c9dfea; font-size:.58rem; }

/* Profile and settings */
.profile-cover { position: relative; min-height: 210px; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(115deg, #4a86b6, #3b6b8d 55%, #315874); }
.profile-cover::before, .profile-cover::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
.profile-cover::before { width: 400px; height: 400px; right: -90px; top: -250px; }
.profile-cover::after { width: 290px; height: 290px; right: 80px; bottom: -250px; }
.profile-summary { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 19px; margin: -62px 25px 0; }
.profile-summary .avatar { border: 6px solid var(--navy-950); box-shadow: var(--shadow-sm); }
.profile-summary__main { min-width: 0; flex: 1; padding-bottom: 6px; }
.profile-summary__main h1 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.profile-summary__main p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.profile-summary__action { padding-bottom: 9px; }
.profile-content { margin-top: 27px; }
.profile-info-list { display: grid; }
.profile-info-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.profile-info-item:last-child { border: 0; }
.profile-info-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--blue-400); background: rgba(59,130,246,.11); }
.profile-info-icon svg { width: 17px; }
.profile-info-main span, .profile-info-main strong { display: block; }
.profile-info-main span { color: var(--muted); font-size: .67rem; }
.profile-info-main strong { margin-top: 2px; font-size: .81rem; }
.settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
.settings-nav { position: sticky; top: calc(var(--header-h) + 20px); height: fit-content; padding: 9px; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; color: var(--muted); font-size: .78rem; font-weight: 680; }
.settings-nav a:hover, .settings-nav a.active { color: #fff; background: rgba(59,130,246,.12); }
.settings-nav svg { width: 18px; }
.settings-section + .settings-section { margin-top: 20px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border: 0; }
.settings-row__main strong, .settings-row__main span { display: block; }
.settings-row__main strong { font-size: .82rem; }
.settings-row__main span { margin-top: 2px; color: var(--muted); font-size: .71rem; }
.switch { position: relative; width: 42px; height: 23px; flex: 0 0 42px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #294c67; cursor: pointer; transition: .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #dce6f3; transition: .2s; }
.switch input:checked + span { background: var(--blue-600); }
.switch input:checked + span::after { transform: translateX(19px); background: #fff; }

/* Modals, menus, toasts */
.modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 20px; background: rgba(2,8,15,.72); backdrop-filter: blur(6px); }
.modal.open { display: flex; }
.modal-card { width: min(520px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--panel-solid); box-shadow: 0 35px 100px rgba(0,0,0,.5); animation: modal-in .18s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 20px; border-top: 1px solid var(--line); }
.menu { display: none; position: fixed; z-index: 220; min-width: 175px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: #365f7d; box-shadow: var(--shadow-lg); }
.menu.open { display: grid; }
.menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: var(--muted-strong); background: transparent; text-align: left; font-size: .75rem; cursor: pointer; }
.menu button:hover { color: #fff; background: rgba(148,163,184,.08); }
.menu button.danger { color: #ffe5e5; }
.menu svg { width: 16px; }
.toast-region { position: fixed; z-index: 300; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(370px, calc(100% - 36px)); }
body.chat-call-open .toast-region { top: max(18px, env(safe-area-inset-top)); bottom: auto; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 13px; color: #f7fbff; background: #3a6482; box-shadow: var(--shadow-lg); animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.toast.error { border-color: rgba(255,204,204,.32); background: #704656; }
.toast.success { border-color: rgba(195,247,216,.32); background: #2e6758; }
.toast svg { width: 18px; flex: 0 0 18px; }
body.incoming-call-open { overflow: hidden; }
.global-incoming-call { position: fixed; z-index: 260; inset: 0; width: auto; min-height: 100dvh; display: grid; align-content: center; justify-items: center; padding: max(48px, env(safe-area-inset-top)) 22px max(34px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; color: #fff; background: radial-gradient(circle at 50% 20%, rgba(44,140,123,.5), transparent 29rem), linear-gradient(165deg, #17383a, #07161b 72%); box-shadow: none; animation: incoming-screen-in .24s ease-out; }
.global-incoming-call__top { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.global-incoming-call__top > .avatar { width: 112px; height: 112px; flex-basis: 112px; border: 3px solid rgba(255,255,255,.2); font-size: 2.15rem; box-shadow: 0 0 0 12px rgba(0,168,132,.12), 0 18px 55px rgba(0,0,0,.3); animation: accept-pulse 1.8s ease-in-out infinite; }
.global-incoming-call__top > svg { width: 28px; height: 28px; margin-top: 2px; color: #8fe7d1; }
.global-incoming-call__main { min-width: 0; width: 100%; }
.global-incoming-call__main span, .global-incoming-call__main strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.global-incoming-call__main span { color: #9fd9cd; font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.global-incoming-call__main strong { margin-top: 9px; font-size: clamp(1.65rem, 7vw, 2.6rem); }
.global-incoming-call__actions { width: min(440px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.global-incoming-call__actions .btn { min-height: 58px; border-radius: 18px; font-weight: 850; }
@keyframes incoming-screen-in { from { opacity: 0; transform: scale(1.025); } }
.loading { position: relative; pointer-events: none; color: transparent !important; }
.loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { position: relative; overflow: hidden; color: transparent; background: rgba(148,163,184,.08); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); transform: translateX(-100%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Balanced navy motion theme: brighter than the original near-black skin,
   while keeping the portal comfortably darker than a white dashboard. */
.page > *, .auth-main > *, .landing-section > *, .admin-card {
  animation: surface-arrive .42s cubic-bezier(.2,.72,.28,1) both;
}
.page > *:nth-child(2), .auth-main > *:nth-child(2) { animation-delay: .04s; }
.page > *:nth-child(3), .auth-main > *:nth-child(3) { animation-delay: .08s; }
.page > *:nth-child(4), .auth-main > *:nth-child(4) { animation-delay: .12s; }
@keyframes surface-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.brand-mark { animation: brand-breathe 5s ease-in-out infinite; }
@keyframes brand-breathe {
  0%, 100% { box-shadow: 0 10px 28px rgba(37,99,235,.28), inset 0 1px rgba(255,255,255,.25); }
  50% { box-shadow: 0 12px 36px rgba(57,142,232,.48), 0 0 0 5px rgba(96,165,250,.06), inset 0 1px rgba(255,255,255,.28); }
}
.channel-item, .conversation, .quick-action { transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.channel-item:hover, .conversation:hover, .quick-action:hover { transform: translateX(3px); }
[dir="rtl"] .channel-item:hover, [dir="rtl"] .conversation:hover, [dir="rtl"] .quick-action:hover { transform: translateX(-3px); }
[dir="rtl"] .channel-item.active { box-shadow: inset -3px 0 #72bdf0; }

/* Responsive */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-layout { grid-template-columns: minmax(0, 1fr) 350px; }
  .exchange-content-grid { grid-template-columns: 1fr; }
  .exchange-converter-panel { position: static; }
  .exchange-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --sidebar-w: 250px; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .mobile-overlay { visibility: visible; opacity: 1; }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: inline-grid; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-main { width: min(580px, 100%); min-height: 100vh; padding: 40px 28px; }
  .auth-main > .brand { margin-bottom: 42px; }
  .auth-visual { display: none; }
  .call-layout { grid-template-columns: 1fr; }
  .call-stage { min-height: 620px; }
  .call-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-layout { grid-template-columns: 1fr; }
  .channel-panel { max-height: 560px; }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; }
  body { font-size: 14px; }
  .public-header__inner { width: calc(100% - 28px); }
  .public-menu-toggle { display: inline-grid; }
  .public-nav { display: none; position: absolute; top: 68px; right: 14px; left: 14px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 16px; background: #315875; box-shadow: var(--shadow-lg); }
  body.public-menu-open .public-nav { display: grid; }
  .public-nav .btn { width: 100%; }
  .brand-mark { width: 39px; height: 39px; flex-basis: 39px; }
  .page { padding: 21px 14px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 20px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full { grid-column: auto; }
  .topbar { padding: 0 14px; }
  .topbar-title span { display: none; }
  .topbar-actions .btn .btn-label { display: none; }
  .topbar-actions .btn { width: 42px; padding: 0; }
  .tv-now { align-items: flex-start; flex-wrap: wrap; }
  .tv-now__main { padding-top: 3px; }
  .tv-summary { width: 100%; }
  .tv-summary span { flex: 1; }
  .tv-player-notice { align-items: flex-start; flex-wrap: wrap; }
  .tv-player-notice > span { flex-basis: calc(100% - 38px); }
  .tv-player-notice .btn { margin-left: 25px; }
  .hero { padding-top: 70px; }
  .hero h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
  .hero-preview { margin-top: 48px; padding: 7px; border-radius: 18px; }
  .hero-preview__mock { min-height: 330px; grid-template-columns: 74px 1fr; border-radius: 12px; }
  .mock-sidebar { padding: 14px 9px; }
  .mock-nav-line { height: 27px; }
  .mock-main { padding: 15px; }
  .mock-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mock-wide { grid-column: span 2; }
  .mock-card { min-height: 75px; }
  .mock-tall, .mock-wide { min-height: 140px; }
  .landing-section { padding: 68px 16px; }
  .cta-card { align-items: flex-start; flex-direction: column; }
  .public-footer__inner { align-items: flex-start; flex-direction: column; }
  .chat-shell { height: calc(100dvh - var(--header-h) - 28px); min-height: 530px; grid-template-columns: 1fr; border-radius: 16px; }
  .chat-list-pane { border-right: 0; }
  .chat-main-pane { display: none; position: absolute; inset: var(--header-h) 0 0; z-index: 55; background-color: #0b141a; }
  .chat-shell.mobile-chat-open .chat-list-pane { display: none; }
  .chat-shell.mobile-chat-open .chat-main-pane { display: flex; }
  .chat-back { display: inline-grid; }
  .message-bubble { max-width: 85%; }
  .message-list { padding: 17px 10px; }
  .message-actions { display: flex; visibility: visible; opacity: .78; }
  .message-row.own .message-bubble { max-width: 84%; }
  .chat-main-header { min-height: 64px; padding: 8px 9px; }
  .chat-live-pill { width: 10px; height: 10px; padding: 0; border: 0; background: transparent; }
  .chat-live-pill > span { display: none; }
  .chat-live-pill i { width: 8px; height: 8px; }
  .chat-header-actions { gap: 2px; }
  .chat-header-actions .icon-btn { width: 35px; height: 35px; flex-basis: 35px; }
  .composer { gap: 3px; padding: 9px 7px calc(9px + env(safe-area-inset-bottom)); }
  .composer .icon-btn { width: 37px; height: 40px; flex-basis: 37px; }
  .composer-input { padding: 10px 11px; }
  .emoji-picker { left: 7px; bottom: calc(100% + 5px); }
  .emoji-grid { grid-template-columns: repeat(7, 1fr); max-height: 230px; }
  .attachment-file, .voice-message { min-width: min(275px, 72vw); }
  .composer-accessory { margin: 8px 8px 0; }
  .voice-recorder__label { display: none; }
  .chat-call-layer { padding: 0; }
  .chat-call-stage { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .chat-call-layer.is-minimized { right: 12px; bottom: 12px; width: min(300px, calc(100vw - 24px)); height: 190px; }
  [dir="rtl"] .chat-call-layer.is-minimized { right: auto; left: 12px; }
  .chat-call-layer.is-minimized .chat-call-stage { height: 100%; border: 1px solid rgba(134,150,160,.3); border-radius: 16px; }
  .incoming-call-actions { gap: 46px; }
  .call-stage { min-height: calc(100dvh - 150px); border-radius: 16px; }
  .chat-call-stage { min-height: 0; border-radius: 0; }
  .call-sidebar { grid-template-columns: 1fr; }
  .call-controls { bottom: calc(16px + env(safe-area-inset-bottom)); max-width: calc(100vw - 20px); gap: 6px; padding: 7px; }
  .call-control { width: 43px; height: 43px; border-radius: 13px; }
  .video-grid[data-count="2"] { display:block; }
  .video-grid[data-count="2"] .video-tile.is-remote { inset:5px; }
  .video-grid[data-count="2"] .video-tile.is-local { top:70px; right:12px; width:31vw; min-width:108px; max-width:145px; height:43vw; min-height:145px; max-height:195px; border-radius:16px; }
  [dir="rtl"] .video-grid[data-count="2"] .video-tile.is-local { right:auto; left:12px; }
  .video-grid[data-count="3"], .video-grid[data-count="4"], .video-grid[data-count="5"], .video-grid[data-count="6"],.video-grid[data-count="7"],.video-grid[data-count="8"],.video-grid[data-count="9"],.video-grid[data-count="10"],.video-grid[data-count="11"],.video-grid[data-count="12"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(140px, 1fr); overflow:auto; }
  .call-controls .screen-control { display:none; }
  .call-quality-badge { top:13px; right:12px; }
  [dir="rtl"] .call-quality-badge { right:auto; left:12px; }
  .call-participants-panel { inset:56px 8px calc(74px + env(safe-area-inset-bottom)) 8px; width:auto; border-radius:18px; }
  body.chat-call-open .toast-region { top: calc(68px + env(safe-area-inset-top)); right: 10px; width: calc(100% - 20px); }
  .exchange-hero { padding: 20px; border-radius: 18px; }
  .exchange-hero__body { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .exchange-snapshot { width: 100%; }
  .exchange-panel-header { align-items: flex-start; flex-direction: column; }
  .exchange-search { width: 100%; }
  .exchange-list-summary { padding-top: 1px; }
  .exchange-rate-table-wrap { display: none; }
  .exchange-rate-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 15px; }
  .exchange-rate-empty { min-height: 180px; }
  .table-scroll { overflow-x: auto; }
  .tv-player-panel { border-radius: 16px; }
  .channel-panel { max-height: none; }
  .tv-trust-note { margin: 0 14px 14px; }
  .profile-cover { min-height: 155px; border-radius: 17px; }
  .profile-summary { align-items: flex-start; flex-wrap: wrap; margin: -49px 15px 0; }
  .profile-summary .avatar-xl { width: 94px; height: 94px; flex-basis: 94px; }
  .profile-summary__main { align-self: flex-end; padding-bottom: 4px; }
  .profile-summary__action { width: 100%; }
  .profile-summary__action .btn { width: 100%; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .settings-nav a { flex: 0 0 auto; }
  .settings-row { align-items: flex-start; }
  .global-incoming-call { inset: 0; width: auto; }
}

@media (max-width: 450px) {
  .auth-main { padding: 28px 19px; }
  .auth-main > .brand { margin-bottom: 34px; }
  .hero-actions .btn { width: 100%; }
  .quick-actions { grid-template-columns: 1fr; }
  .stat-card { min-height: 132px; }
  .exchange-hero__top { align-items: flex-start; }
  .exchange-live { min-height: 30px; padding: 5px 9px; }
  .exchange-refresh-button { width: 38px; min-height: 36px; padding: 8px; flex: 0 0 38px; }
  .exchange-refresh-button > span:last-child { display: none; }
  .exchange-hero h1 { font-size: 1.85rem; }
  .exchange-meta-grid { grid-template-columns: 1fr; }
  .exchange-meta-card { min-height: 58px; }
  .exchange-rate-cards { grid-template-columns: 1fr; }
  .exchange-panel-header, .exchange-converter-heading { padding-left: 15px; padding-right: 15px; }
  .exchange-list-summary { padding-left: 15px; padding-right: 15px; }
  .converter { padding-left: 15px; padding-right: 15px; }
  .converter-row { grid-template-columns: minmax(0, 1fr) 92px; }
  .call-control.screen-control { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
body.compact-chats .conversation { padding-top: 7px; padding-bottom: 7px; }
body.compact-chats .conversation .avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: .72rem; }

/* Direction-aware foundations for Sorani Kurdish. */
[dir="rtl"] body { font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
[dir="rtl"] .sidebar { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .app-main { margin-left: 0; margin-right: var(--sidebar-w); }
[dir="rtl"] .side-nav a.active::before { left: auto; right: -16px; border-radius: 5px 0 0 5px; }
[dir="rtl"] .side-nav a:hover { transform: translateX(-2px); }
[dir="rtl"] .side-nav .nav-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .input-wrap > svg { left: auto; right: 13px; }
[dir="rtl"] .input-wrap .input { padding-left: 13px; padding-right: 42px; }
[dir="rtl"] .input-wrap .input-action { right: auto; left: 7px; }
[dir="rtl"] .select { padding-right: 13px; padding-left: 36px; background-position: 17px 20px, 12px 20px; }
[dir="rtl"] .chat-list-pane { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .message-bubble { border-radius: 15px 6px 15px 15px; }
[dir="rtl"] .message-row.own .message-bubble { border-radius: 6px 15px 15px 15px; }
[dir="rtl"] .message-reply, [dir="rtl"] .reply-strip__main { border-left: 0; border-right: 3px solid var(--blue-400); padding-left: 0; padding-right: 9px; }
[dir="rtl"] .message-reply { text-align: right; }
[dir="rtl"] .message-meta { margin-left: -2px; margin-right: 13px; }
[dir="rtl"] .emoji-picker { right: 12px; left: auto; }
[dir="rtl"] .rate-table th { text-align: right; }
[dir="rtl"] .exchange-hero::after { right: auto; left: 4%; }
[dir="rtl"] .exchange-hero::before { right: auto; left: -110px; }
[dir="rtl"] .exchange-rate-card__head .rate-change { margin-left: 0; margin-right: auto; }
[dir="rtl"] .exchange-search input { text-align: right; }
[dir="rtl"] .profile-cover::before { right: auto; left: -90px; }
[dir="rtl"] .profile-cover::after { right: auto; left: 80px; }
[dir="rtl"] .toast-region { right: auto; left: 18px; }

@media (max-width: 980px) {
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="rtl"] body.sidebar-open .sidebar { transform: translateX(0); }
  [dir="rtl"] .app-main { margin-right: 0; }
}

/* Messages V2 — one responsive, high-quality messenger surface. */
.chat-page {
  --chat-bg: #0d1b29;
  --chat-panel: #102437;
  --chat-panel-raised: #152c40;
  --chat-surface: #193247;
  --chat-surface-hover: #203b50;
  --chat-line: rgba(190, 218, 239, .13);
  --chat-line-strong: rgba(190, 218, 239, .22);
  --chat-text: #f4f9fc;
  --chat-muted: #9fb6c8;
  --chat-accent: #39a9d6;
  --chat-accent-strong: #1d84bf;
  --chat-green: #36d399;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% -12%, rgba(69, 173, 222, .26), transparent 34rem),
    radial-gradient(circle at 7% 105%, rgba(40, 125, 166, .2), transparent 32rem),
    #203f57;
  animation: none;
}
.chat-page::before { opacity: .12; }
.chat-page [hidden] { display: none !important; }
.chat-page .app-main { height: 100dvh; min-height: 0; overflow: hidden; }
.chat-page .topbar { background: rgba(25, 53, 74, .92); }
.chat-page .page {
  width: min(1660px, 100%);
  height: calc(100dvh - var(--header-h));
  padding: clamp(12px, 1.6vw, 24px);
  overflow: hidden;
}
.chat-page .page > * { animation: none; }
.chat-page .chat-shell {
  position: relative;
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
  border: 1px solid rgba(206, 229, 245, .22);
  border-radius: 24px;
  background: var(--chat-bg);
  box-shadow: 0 28px 80px rgba(5, 18, 29, .34), inset 0 1px rgba(255, 255, 255, .04);
}
.chat-page .chat-list-pane {
  border-color: var(--chat-line-strong);
  background: linear-gradient(180deg, #132a3e, #0f2233 58%, #0d1f2f);
}
.chat-page .chat-list-header { padding: 18px 18px 13px; }
.chat-page .chat-list-title { margin-bottom: 16px; }
.chat-list-heading { display: flex; align-items: center; min-width: 0; gap: 11px; }
.chat-list-heading > span:last-child { min-width: 0; }
.chat-list-heading__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid rgba(91, 189, 226, .27);
  border-radius: 14px;
  color: #dff6ff;
  background: linear-gradient(145deg, rgba(55, 163, 210, .33), rgba(29, 132, 191, .18));
  box-shadow: 0 10px 25px rgba(6, 25, 39, .23);
}
.chat-list-heading__icon svg { width: 21px; height: 21px; }
.chat-page .chat-list-title h1 { overflow: hidden; margin: 0; white-space: nowrap; text-overflow: ellipsis; font-size: 1.08rem; letter-spacing: -.025em; }
.chat-list-heading small { display: block; overflow: hidden; margin-top: 1px; color: var(--chat-muted); white-space: nowrap; text-overflow: ellipsis; font-size: .66rem; font-weight: 560; }
.chat-list-tools { display: flex; align-items: center; gap: 6px; }
.chat-list-tools .icon-btn { width: 38px; height: 38px; flex-basis: 38px; border-color: var(--chat-line); border-radius: 12px; background: rgba(166, 211, 240, .06); }
.chat-list-tools .chat-home-link { color: #ffe69a; border-color: rgba(255, 207, 30, .25); background: rgba(255, 207, 30, .11); }
.chat-list-tools .chat-new-button { color: #eaf9ff; border-color: rgba(69, 175, 219, .25); background: rgba(43, 145, 190, .18); }
.chat-list-menu { display: none; }
.chat-search {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--chat-line);
  border-radius: 13px;
  color: var(--chat-muted);
  background: rgba(6, 19, 30, .34);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.chat-search:focus-within { border-color: rgba(67, 179, 224, .6); background: rgba(7, 23, 36, .58); box-shadow: 0 0 0 3px rgba(57, 169, 214, .1); }
.chat-search > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.chat-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--chat-text); background: transparent; font-size: .76rem; }
.chat-search input::placeholder { color: #8fa8bb; opacity: 1; }
.chat-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .55; }
.chat-search kbd { min-width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--chat-line-strong); border-radius: 6px; color: #7894aa; background: rgba(255, 255, 255, .035); font-family: inherit; font-size: .66rem; font-weight: 600; line-height: 1; }
.chat-page .chat-tabs { gap: 6px; padding: 0 18px 12px; }
.chat-page .chat-tab {
  min-height: 31px;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  color: #9eb6c8;
  font-size: .68rem;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.chat-page .chat-tab:hover { color: #eaf7ff; background: rgba(168, 213, 240, .06); }
.chat-page .chat-tab.active { color: #e9faff; border-color: rgba(62, 175, 220, .2); background: rgba(39, 139, 183, .2); }
.chat-page .conversation-list { padding: 4px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(153, 191, 216, .2) transparent; }
.chat-page .conversation {
  min-height: 68px;
  gap: 12px;
  margin: 2px 0;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 15px;
  text-align: start;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.chat-page .conversation:hover { transform: none; border-color: rgba(184, 218, 239, .08); background: rgba(151, 196, 224, .075); }
.chat-page .conversation.active { border-color: rgba(73, 175, 216, .2); background: linear-gradient(100deg, rgba(37, 128, 169, .3), rgba(32, 75, 101, .34)); box-shadow: inset 3px 0 #43b1db; }
[dir="rtl"] .chat-page .conversation.active { box-shadow: inset -3px 0 #43b1db; }
.chat-page .conversation .avatar { width: 48px; height: 48px; flex-basis: 48px; border-color: rgba(214, 234, 248, .24); background: linear-gradient(145deg, #4b98bd, #245f8a); font-size: .85rem; }
.chat-page .conversation .presence { width: 12px; height: 12px; border-color: #112638; }
.chat-page .conversation-top strong { color: #eff8fd; font-size: .8rem; font-weight: 730; }
.chat-page .conversation-time { color: #829daf; font-size: .59rem; }
.chat-page .conversation-preview { margin-top: 4px; color: #9cb2c1; font-size: .67rem; }
.chat-page .conversation-unread { min-width: 19px; height: 19px; color: #062536; background: #5ed0e9 !important; font-size: .6rem; }
.chat-list-skeleton { display: grid; gap: 5px; padding: 4px; }
.chat-list-skeleton > div { display: flex; align-items: center; gap: 12px; padding: 10px 7px; }
.chat-list-skeleton i { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: rgba(160, 201, 226, .09); }
.chat-list-skeleton span { flex: 1; }
.chat-list-skeleton b, .chat-list-skeleton small { display: block; border-radius: 6px; background: rgba(160, 201, 226, .09); animation: chat-shimmer 1.3s ease-in-out infinite alternate; }
.chat-list-skeleton b { width: 52%; height: 9px; }
.chat-list-skeleton small { width: 78%; height: 7px; margin-top: 9px; }
@keyframes chat-shimmer { to { background: rgba(160, 201, 226, .16); } }

.chat-page .chat-main-pane {
  position: relative;
  background-color: var(--chat-bg);
  background-image:
    linear-gradient(rgba(23, 58, 80, .15), rgba(10, 27, 41, .1)),
    radial-gradient(circle at 16px 16px, rgba(103, 173, 208, .055) 0 1.5px, transparent 1.8px);
  background-size: 100% 100%, 38px 38px;
}
.chat-conversation { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.chat-page .chat-main-header {
  min-height: 72px;
  padding: 10px clamp(12px, 1.7vw, 22px);
  border-color: var(--chat-line);
  background: rgba(18, 43, 62, .94);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(3, 17, 27, .12);
}
.chat-page .chat-main-header .avatar { width: 44px; height: 44px; flex-basis: 44px; background: linear-gradient(145deg, #4b98bd, #245f8a); }
.chat-page .chat-main-header .presence { border-color: #142c40; }
.chat-page .chat-main-header > .chat-home-link { width: 38px; height: 38px; flex: 0 0 38px; border-color: rgba(255, 207, 30, .22); border-radius: 12px; color: #ffe69a; background: rgba(255, 207, 30, .09); }
.chat-page .chat-contact strong { color: var(--chat-text); font-size: .82rem; }
.chat-page .chat-contact span { margin-top: 2px; color: #8eb2c6; font-size: .64rem; }
.chat-page .chat-contact span.typing { color: #61dcb0; }
.chat-page .chat-header-actions { align-items: center; gap: 5px; }
.chat-page .chat-header-actions .icon-btn { width: 38px; height: 38px; flex-basis: 38px; border-color: transparent; border-radius: 12px; color: #bbcfdb; background: transparent; }
.chat-page .chat-header-actions .icon-btn:hover { color: #f3fbff; background: rgba(167, 211, 237, .09); }
.chat-page .chat-live-pill { height: 27px; padding: 0 9px; border-color: rgba(54, 211, 153, .22); color: #aef0d3; background: rgba(24, 117, 89, .22); }
.chat-page .message-list { padding: 22px clamp(18px, 4vw, 68px) 18px; scroll-behavior: auto; overscroll-behavior: contain; }
.chat-page .message-date { margin: 6px auto 18px; padding: 5px 11px; border-color: var(--chat-line); color: #9fb7c8; background: rgba(14, 37, 54, .88); backdrop-filter: blur(8px); }
.chat-page .message-row { gap: 7px; margin: 3px 0; }
.chat-page .message-row + .message-row:not(.own), .chat-page .message-row.own + .message-row.own { margin-top: 2px; }
.chat-page .message-bubble {
  max-width: min(68%, 680px);
  padding: 8px 10px 6px;
  border-color: rgba(184, 218, 239, .12);
  border-radius: 5px 15px 15px 15px;
  color: #f4f8fb;
  background: #1a3347;
  box-shadow: 0 5px 16px rgba(3, 16, 25, .15);
}
.chat-page .message-row.own .message-bubble { border-color: rgba(79, 189, 207, .19); border-radius: 15px 5px 15px 15px; background: linear-gradient(140deg, #196779, #15556a); }
.chat-page .message-author { color: #7bd3ea; }
.chat-page .message-text { font-size: .79rem; line-height: 1.48; }
.chat-page .message-meta { color: #a7c1cf; }
.chat-page .message-row.own .message-meta { color: #a9d5dd; }
.chat-page .message-action { color: #9eb8c8; background: rgba(12, 33, 48, .9); box-shadow: 0 4px 13px rgba(0, 0, 0, .15); }
.chat-page .message-action:hover { color: #fff; background: #21445c; }
.chat-page .message-reply { border-color: #55badb; background: rgba(6, 29, 43, .34); }
.chat-page .message-reaction { border-color: rgba(147, 202, 230, .24); background: #173b51; }
.chat-page .message-reaction.active { border-color: rgba(74, 192, 219, .72); background: #176476; }
.chat-page .message-row.is-pending .message-bubble { opacity: .76; }
.message-pending-dot { width: 12px; height: 12px; border: 1.5px solid rgba(211, 237, 247, .35); border-top-color: #d7f5ff; border-radius: 50%; animation: spin .75s linear infinite; }
.chat-page .message-list > .panel-empty { min-height: 100%; }
.chat-page .message-list > .panel-empty svg { width: 36px; height: 36px; }

.chat-page .reply-strip { border-color: var(--chat-line); background: #142c40; }
.chat-page .composer-wrap { border-color: var(--chat-line); background: rgba(17, 40, 58, .97); box-shadow: 0 -10px 30px rgba(4, 17, 27, .09); }
.chat-page .composer { align-items: flex-end; gap: 6px; padding: 10px clamp(10px, 1.5vw, 18px) calc(11px + env(safe-area-inset-bottom)); background: transparent; }
.chat-page .composer .icon-btn { width: 40px; height: 42px; flex-basis: 40px; border-radius: 12px; color: #a9c1d0; }
.chat-page .composer .icon-btn:hover { color: #f0faff; background: rgba(163, 210, 236, .08); }
.chat-page .composer-input {
  min-height: 44px;
  max-height: 140px;
  padding: 11px 14px;
  border: 1px solid rgba(190, 219, 238, .1);
  border-radius: 15px;
  color: #f5fbff;
  background: #1a3549;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.chat-page .composer-input::placeholder { color: #8fa8b8; }
.chat-page .composer-input:focus { border-color: rgba(62, 176, 218, .55); box-shadow: 0 0 0 3px rgba(51, 163, 207, .09); }
.chat-page .composer .composer-send { color: #fff; background: linear-gradient(145deg, #37a8d4, #167eb7) !important; box-shadow: 0 8px 20px rgba(21, 118, 170, .27); }
.chat-page .composer-accessory { border-color: var(--chat-line-strong); background: #18364b; }
.chat-page .emoji-picker { border-color: var(--chat-line-strong); background: #183247; box-shadow: 0 25px 65px rgba(2, 13, 22, .42); }

.chat-page .chat-empty { min-height: 0; background: radial-gradient(circle at 50% 47%, rgba(46, 139, 180, .09), transparent 24rem); }
.chat-page .chat-empty__inner { width: min(540px, 92%); max-width: none; }
.chat-page .chat-empty__icon { position: relative; width: 86px; height: 86px; margin-bottom: 22px; border: 1px solid rgba(88, 184, 222, .24); border-radius: 28px; color: #dff7ff; background: linear-gradient(145deg, rgba(50, 159, 205, .3), rgba(24, 101, 142, .18)); box-shadow: 0 22px 55px rgba(4, 22, 35, .26), inset 0 1px rgba(255, 255, 255, .08); }
.chat-page .chat-empty__icon svg { width: 38px; height: 38px; }
.chat-page .chat-empty__icon i { position: absolute; right: 3px; bottom: 6px; width: 15px; height: 15px; border: 4px solid #0f2131; border-radius: 50%; background: var(--chat-green); box-shadow: 0 0 0 5px rgba(54, 211, 153, .08); }
[dir="rtl"] .chat-page .chat-empty__icon i { right: auto; left: 3px; }
.chat-page .chat-empty h2 { color: #f4fbff; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -.03em; }
.chat-page .chat-empty p { max-width: 430px; margin: 0 auto; color: #98afbf; font-size: .78rem; line-height: 1.7; }
.chat-empty__features { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.chat-empty__features span { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--chat-line); border-radius: 99px; color: #a9c0ce; background: rgba(20, 47, 67, .62); font-size: .65rem; }
.chat-empty__features svg { width: 15px; height: 15px; color: #62c2df; }
.chat-page .panel-empty { min-height: 190px; color: var(--chat-muted); }
.chat-page .panel-empty svg { width: 34px; height: 34px; color: #6fbfdc; }
.chat-page .modal:not(.chat-incoming-modal) { background: rgba(2, 13, 22, .72); backdrop-filter: blur(10px); }
.chat-page .modal:not(.chat-incoming-modal) .modal-card { border-color: var(--chat-line-strong); border-radius: 22px; background: linear-gradient(155deg, #19364b, #102638); box-shadow: 0 34px 90px rgba(1, 10, 17, .5); }
.chat-page .modal:not(.chat-incoming-modal) .modal-header, .chat-page .modal:not(.chat-incoming-modal) .modal-footer { border-color: var(--chat-line); }
.chat-page .modal:not(.chat-incoming-modal) .input { border-color: var(--chat-line-strong); background: rgba(9, 28, 42, .6); }

@media (max-width: 1180px) {
  .chat-page .chat-shell { grid-template-columns: minmax(300px, 350px) minmax(0, 1fr); }
  .chat-page .message-bubble { max-width: 76%; }
}

@media (max-width: 760px) {
  .chat-page { min-height: 100dvh; background: var(--chat-bg); }
  .chat-page .topbar { display: none; }
  .chat-page .page { width: 100%; height: 100dvh; padding: 0; }
  .chat-page .chat-shell { height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .chat-page .chat-list-pane { border: 0; }
  .chat-list-menu { display: inline-grid; }
  .chat-page .chat-list-header { padding: calc(13px + env(safe-area-inset-top)) 14px 11px; }
  .chat-page .chat-list-heading__icon { width: 39px; height: 39px; flex-basis: 39px; border-radius: 13px; }
  .chat-page .chat-list-title { margin-bottom: 13px; }
  .chat-page .chat-search { height: 42px; }
  .chat-search kbd { display: none; }
  .chat-page .chat-tabs { padding: 0 14px 10px; }
  .chat-page .conversation-list { padding: 3px 7px calc(14px + env(safe-area-inset-bottom)); }
  .chat-page .conversation { min-height: 67px; margin: 1px 0; border-radius: 13px; }
  .chat-page .conversation.active { box-shadow: none; }
  .chat-page .chat-main-pane { position: fixed; inset: 0; z-index: 95; min-height: 100dvh; }
  .chat-page .chat-main-header { min-height: calc(64px + env(safe-area-inset-top)); padding: calc(7px + env(safe-area-inset-top)) 8px 7px; backdrop-filter: none; }
  .chat-page .chat-main-header .avatar { width: 40px; height: 40px; flex-basis: 40px; }
  .chat-page .chat-back { width: 34px; height: 38px; flex-basis: 34px; border: 0; background: transparent; }
  /* Home lives in the header, which stays above the independently scrolling
     messages and remains visible when VisualViewport lifts the shell over IME. */
  .chat-page .chat-main-header > .chat-home-link { width: 34px; height: 38px; flex-basis: 34px; border: 0; background: rgba(255, 207, 30, .1); }
  [dir="rtl"] .chat-page .chat-back svg { transform: rotate(180deg); }
  .chat-page .chat-live-pill { width: 9px; height: 9px; padding: 0; }
  .chat-page .chat-live-pill i { width: 7px; height: 7px; }
  .chat-page .chat-header-actions .icon-btn { width: 34px; height: 38px; flex-basis: 34px; }
  .chat-page .chat-header-actions #chatDetailsButton { display: none; }
  .chat-page .message-list { padding: 14px 8px 12px; }
  .chat-page .message-bubble, .chat-page .message-row.own .message-bubble { max-width: 86%; }
  .chat-page .message-row > .avatar-sm { display: none; }
  .chat-page .message-text { font-size: .8rem; }
  .chat-page .message-actions { gap: 0; transform: scale(.92); }
  .chat-page .message-action { width: 25px; height: 25px; }
  .chat-page .composer { gap: 2px; padding: 7px 6px calc(7px + env(safe-area-inset-bottom)); }
  .chat-page .composer .icon-btn { width: 35px; height: 42px; flex-basis: 35px; }
  .chat-page .composer-input { min-height: 42px; padding: 10px 11px; border-radius: 14px; }
  .chat-page .chat-empty { display: none; }
  .chat-page .emoji-picker { right: 7px; left: 7px; width: auto; bottom: calc(100% + 5px); }
  .chat-page .chat-call-layer { z-index: 280; }
}

@media (max-width: 390px) {
  .chat-list-heading small { display: none; }
  .chat-page .chat-tab { padding-inline: 9px; }
  .chat-page .chat-header-actions .chat-live-pill { display: none; }
  .chat-page .composer #emojiButton { display: none; }
}

/* Messenger reliability, voice-note controls and large-screen polish. */
.toast-count {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  padding: 0 6px;
  border-radius: 99px;
  color: #fff;
  background: rgba(255,255,255,.16);
  font-size: .67rem;
  font-weight: 800;
}
.chat-connection-banner {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px clamp(12px, 1.7vw, 22px);
  border-bottom: 1px solid rgba(251, 191, 36, .2);
  color: #ffe8a3;
  background: linear-gradient(90deg, rgba(120, 75, 16, .84), rgba(80, 55, 22, .76));
}
.chat-connection-banner__icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; }
.chat-connection-banner__icon svg { width: 19px; height: 19px; }
.chat-connection-banner__copy { min-width: 0; flex: 1; }
.chat-connection-banner__copy strong, .chat-connection-banner__copy small { display: block; }
.chat-connection-banner__copy strong { font-size: .72rem; }
.chat-connection-banner__copy small { overflow: hidden; margin-top: 1px; color: rgba(255, 239, 190, .78); white-space: nowrap; text-overflow: ellipsis; font-size: .62rem; }
.chat-connection-banner .btn { min-height: 30px; border-color: rgba(255,255,255,.18); color: #fff4d2; background: rgba(255,255,255,.09); }

.chat-page .voice-message {
  width: min(292px, 70vw);
  min-width: min(220px, 58vw);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 5px;
  padding: 3px 1px 1px;
}
.chat-page .voice-message audio { display: none; }
.voice-message__toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f2fcff;
  background: linear-gradient(145deg, #36a9d5, #167fb5);
  box-shadow: 0 7px 18px rgba(5, 30, 45, .28);
  cursor: pointer;
}
.voice-message__toggle svg { width: 20px; height: 20px; }
.voice-message__main { min-width: 0; flex: 1; }
.voice-message__waveform { position: relative; height: 27px; display: block; }
.voice-message__waveform > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; pointer-events: none; }
.voice-message__waveform i { width: 2px; height: var(--voice-bar); flex: 1 1 2px; border-radius: 2px; background: linear-gradient(180deg, #b6d9e5, #6ba3b7); opacity: .8; }
.voice-message.is-playing .voice-message__waveform i { background: linear-gradient(180deg, #baf8ee, #43cdb8); opacity: 1; }
.voice-message__waveform input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}
.voice-message__waveform input::-webkit-slider-thumb { width: 11px; height: 11px; appearance: none; border: 2px solid #e7fbff; border-radius: 50%; background: #2fc1d4; box-shadow: 0 2px 7px rgba(0,0,0,.3); }
.voice-message__waveform input::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #e7fbff; border-radius: 50%; background: #2fc1d4; box-shadow: 0 2px 7px rgba(0,0,0,.3); }
.voice-message__meta { min-width: 0; display: flex; align-items: center; gap: 7px; margin-top: 1px; color: #a9c5d1; font-size: .58rem; }
.voice-message__meta time { color: #cce0e7; font-variant-numeric: tabular-nums; }
.voice-message__meta > span { min-width: 0; overflow: hidden; flex: 1; white-space: nowrap; text-overflow: ellipsis; }
.voice-message__meta button { padding: 2px 5px; border: 1px solid rgba(211, 238, 246, .18); border-radius: 7px; color: #d9edf3; background: rgba(8, 32, 45, .22); font: inherit; font-weight: 800; cursor: pointer; }

.voice-recorder__wave { height: 30px; min-width: 80px; display: flex; align-items: center; gap: 3px; flex: 1; overflow: hidden; }
.voice-recorder__wave i { width: 3px; height: 26%; flex: 1 1 3px; border-radius: 3px; background: #8adced; animation: recorder-wave .85s ease-in-out infinite alternate; }
.voice-recorder__wave i:nth-child(3n+1) { animation-delay: -.6s; }
.voice-recorder__wave i:nth-child(3n+2) { animation-delay: -.3s; }
.voice-recorder__wave i:nth-child(4n) { animation-duration: .65s; }
@keyframes recorder-wave { to { height: 92%; opacity: .55; } }

.message-upload-progress { position: relative; height: 20px; display: flex; align-items: center; margin: 6px 1px 1px; overflow: hidden; border-radius: 99px; background: rgba(3, 24, 34, .35); }
.message-upload-progress > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #2aa9c9, #4bd2bc); transition: width .16s linear; }
[dir="rtl"] .message-upload-progress > span { right: 0; left: auto; }
.message-upload-progress small { position: relative; z-index: 1; width: 100%; color: #efffff; text-align: center; font-size: .56rem; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .chat-page, .chat-page .app-main, .chat-page .page, .chat-page .chat-shell { height: var(--chat-viewport-height, 100dvh); min-height: var(--chat-viewport-height, 100dvh); }
  .chat-page .chat-main-pane { height: var(--chat-viewport-height, 100dvh); min-height: var(--chat-viewport-height, 100dvh); }
  .chat-connection-banner { min-height: 42px; padding: 6px 9px; }
  .chat-connection-banner__copy strong { font-size: .67rem; }
  .chat-connection-banner__copy small { max-width: 55vw; }
  .chat-page .voice-message { width: min(268px, 72vw); min-width: min(210px, 56vw); gap: 7px; }
  .voice-message__toggle { width: 34px; height: 34px; flex-basis: 34px; }
  .voice-message__waveform { height: 25px; }
  .voice-recorder__wave { min-width: 55px; }
}

/* v4.4.20 native-style weather workspace. */
.weather-shell{display:grid;gap:18px}.weather-heading h1{margin:3px 0 6px;font-size:clamp(1.7rem,4vw,2.6rem)}.weather-heading p{margin:0;color:var(--muted)}
.weather-search{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px}.weather-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}.weather-results button{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--border);border-radius:14px;color:var(--text);background:var(--surface);text-align:start;cursor:pointer}.weather-results span{color:var(--muted);font-size:.72rem}
.weather-current{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;padding:clamp(20px,4vw,38px);border-radius:26px;color:#fff;background:linear-gradient(135deg,#2376a5,#53a6bb);box-shadow:0 20px 48px rgba(28,105,142,.24)}.weather-current>div:first-child{display:flex;flex-direction:column;gap:5px}.weather-current strong{font-size:clamp(3.5rem,10vw,6.5rem);line-height:.95}.weather-place{font-weight:850;font-size:1.15rem}.weather-metrics{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:8px}.weather-metrics span{padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.14);text-align:center;font-size:.72rem}.weather-metrics b{display:block;margin-top:4px;font-size:1rem}
.weather-forecast{padding:17px;border:1px solid var(--border);border-radius:22px;background:var(--surface)}.weather-forecast h2{margin:0 0 13px;font-size:1rem}.weather-hourly-rail{display:flex;gap:8px;overflow:auto;padding-bottom:5px;scrollbar-width:thin}.weather-hourly-rail article{min-width:82px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 8px;border-radius:15px;background:var(--surface-soft)}.weather-hourly-rail b{font-size:1.55rem}.weather-hourly-rail time,.weather-hourly-rail small{color:var(--muted);font-size:.64rem}.weather-daily-list{display:grid;gap:7px}.weather-daily-list article{display:grid;grid-template-columns:minmax(115px,1.2fr) 1fr auto 70px;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--surface-soft)}.weather-daily-list small{color:var(--muted);text-align:end}
@media(max-width:760px){.weather-search{grid-template-columns:1fr 1fr}.weather-search .input-wrap{grid-column:1/-1}.weather-current{grid-template-columns:1fr;padding:22px}.weather-metrics{grid-template-columns:repeat(3,1fr)}.weather-daily-list article{grid-template-columns:1fr auto}.weather-daily-list article span,.weather-daily-list article small{font-size:.67rem}}

@media (min-width: 1600px) {
  .chat-page .page { width: 100%; max-width: none; padding: clamp(18px, 1.3vw, 34px); }
  .chat-page .chat-shell { grid-template-columns: minmax(410px, 470px) minmax(0, 1fr); border-radius: 28px; }
  .chat-page .chat-list-header { padding: 23px 23px 16px; }
  .chat-page .chat-list-heading__icon { width: 50px; height: 50px; flex-basis: 50px; }
  .chat-page .chat-list-title h1 { font-size: 1.3rem; }
  .chat-list-heading small { font-size: .8rem; }
  .chat-page .chat-search { height: 50px; }
  .chat-page .chat-search input { font-size: .9rem; }
  .chat-page .chat-tabs { padding-inline: 23px; }
  .chat-page .chat-tab { min-height: 37px; padding: 8px 13px; font-size: .78rem; }
  .chat-page .conversation-list { padding-inline: 14px; }
  .chat-page .conversation { min-height: 82px; padding: 13px 14px; }
  .chat-page .conversation .avatar { width: 57px; height: 57px; flex-basis: 57px; font-size: 1rem; }
  .chat-page .conversation-top strong { font-size: .96rem; }
  .chat-page .conversation-preview { font-size: .8rem; }
  .chat-page .conversation-time { font-size: .7rem; }
  .chat-page .chat-main-header { min-height: 84px; }
  .chat-page .chat-main-header .avatar { width: 52px; height: 52px; flex-basis: 52px; }
  .chat-page .chat-contact strong { font-size: 1rem; }
  .chat-page .chat-contact span { font-size: .78rem; }
  .chat-page .chat-header-actions .icon-btn { width: 46px; height: 46px; flex-basis: 46px; }
  .chat-page .message-list { padding-inline: clamp(52px, 5vw, 130px); }
  .chat-page .message-text { font-size: .96rem; }
  .chat-page .message-bubble { max-width: min(66%, 850px); padding: 11px 13px 8px; }
  .chat-page .composer { padding-block: 14px calc(14px + env(safe-area-inset-bottom)); }
  .chat-page .composer-input { min-height: 52px; padding: 14px 17px; font-size: .94rem; }
  .chat-page .composer .icon-btn { width: 48px; height: 52px; flex-basis: 48px; }
  .chat-call-stage { width: min(1500px, 100%); height: min(920px, calc(100dvh - 56px)); }
  .chat-call-stage .call-controls { gap: 12px; padding: 11px; }
  .chat-call-stage .call-control { width: 78px; height: 62px; display: flex; flex-direction: column; gap: 4px; border-radius: 17px; }
  .chat-call-stage .call-control.end { width: 78px; }
  .chat-call-stage .call-control::after { content: attr(data-control-label); font-size: .61rem; font-weight: 700; }
}

@media (min-width: 2500px) {
  .chat-page .chat-shell { grid-template-columns: minmax(500px, 570px) minmax(0, 1fr); }
  .chat-page .conversation { min-height: 96px; }
  .chat-page .conversation .avatar { width: 66px; height: 66px; flex-basis: 66px; }
  .chat-page .conversation-top strong, .chat-page .chat-contact strong { font-size: 1.12rem; }
  .chat-page .conversation-preview, .chat-page .chat-contact span { font-size: .92rem; }
  .chat-page .message-text { font-size: 1.08rem; }
  .chat-page .message-bubble { max-width: min(62%, 1050px); }
}

/* KurdChannel visual system + viewport-safe messenger (v1.9). */
:root {
  --navy-950: #071329;
  --navy-900: #0a1c3a;
  --navy-850: #0e2850;
  --navy-800: #12366b;
  --navy-750: #173a61;
  --blue-600: #1f74e8;
  --blue-500: #3a8cff;
  --blue-400: #a9ccff;
  --cyan-400: #28ad4c;
  --green-500: #28ad4c;
  --amber-500: #ffcf1e;
  --red-500: #d71920;
  --ink: #f6f9fe;
  --muted: #aebfd4;
  --muted-strong: #dce7f5;
  --line: rgba(186, 208, 235, .14);
  --line-strong: rgba(186, 208, 235, .25);
  --panel: rgba(14, 40, 80, .94);
  --panel-solid: #0e2850;
  --panel-raised: #12366b;
  --glass: rgba(10, 28, 58, .9);
  --shadow-sm: 0 16px 38px rgba(1, 8, 22, .24);
  --shadow-lg: 0 36px 90px rgba(1, 7, 19, .38);
}

body {
  background:
    radial-gradient(circle at 88% -12%, rgba(31, 116, 232, .2), transparent 38rem),
    radial-gradient(circle at -8% 80%, rgba(40, 173, 76, .09), transparent 34rem),
    linear-gradient(145deg, #071329 0%, #0a1c3a 48%, #0e2850 100%);
}
body::before { opacity: .16; }
::selection { background: rgba(31, 116, 232, .48); }
a { color: #a9ccff; }
a:hover { color: #fff; }

.brand-mark {
  position: relative;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(to bottom, #d71920 0 32%, #fff 32% 68%, #28ad4c 68% 100%);
  box-shadow: 0 12px 28px rgba(2, 9, 24, .32), inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-mark::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: #ffcf1e; box-shadow: 0 0 0 3px rgba(255,207,30,.18); transform: translate(-50%,-50%); }
.brand-mark svg { opacity: 0; }
.brand-name span { color: #a9ccff; }
.public-header { border-color: rgba(186,208,235,.13); background: rgba(7,19,41,.88); }
.public-header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, #d71920 0 33.33%, #ffcf1e 33.33% 66.66%, #28ad4c 66.66%); opacity: .85; }
.sidebar { border-color: rgba(186,208,235,.14); background: linear-gradient(180deg, rgba(7,19,41,.99), rgba(14,40,80,.99)); }
.topbar { border-color: rgba(186,208,235,.14); background: rgba(10,28,58,.9); }
.panel { background: linear-gradient(145deg, rgba(14,40,80,.97), rgba(10,28,58,.97)); }
.stat-card { background: linear-gradient(145deg, rgba(18,54,107,.9), rgba(10,28,58,.97)); }
.input, .select, .textarea { color: #f6f9fe; background-color: rgba(7,19,41,.72); }
.input:focus, .select:focus, .textarea:focus { border-color: #3a8cff; background-color: rgba(10,28,58,.96); box-shadow: 0 0 0 4px rgba(58,140,255,.14); }
.btn { background: #1f74e8; box-shadow: 0 10px 24px rgba(31,116,232,.2); }
.btn:hover { background: #3a8cff; box-shadow: 0 14px 30px rgba(31,116,232,.27); }
.btn-secondary { background: rgba(169,204,255,.06); box-shadow: none; }

/* Public home. */
.public-page { background-color: #071329; }
.hero { padding: clamp(66px, 8vw, 110px) 22px clamp(72px, 8vw, 110px); }
.hero::after { top: -310px; left: 75%; background: rgba(31,116,232,.16); }
.hero-inner { width: min(1240px, 100%); text-align: start; }
.hero-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr); align-items: center; gap: clamp(45px, 7vw, 96px); }
.hero-copy { position: relative; z-index: 2; }
.hero-badge { margin-bottom: 25px; border-color: rgba(255,207,30,.2); color: #f8edbd; background: rgba(255,207,30,.07); }
.hero-badge::before { background: #ffcf1e; box-shadow: 0 0 15px rgba(255,207,30,.7); }
.hero h1 { max-width: 660px; margin: 0 0 25px; font-size: clamp(3.6rem, 6.2vw, 6.35rem); letter-spacing: -.075em; }
.hero h1 span { background: linear-gradient(100deg, #a9ccff 5%, #fff 55%, #a7e8b7); background-clip: text; -webkit-background-clip: text; }
.hero p { max-width: 610px; margin: 0 0 33px; color: #becde0; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero-actions { justify-content: flex-start; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 25px; color: #93a9c2; font-size: .71rem; font-weight: 650; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust i { width: 6px; height: 6px; border-radius: 50%; background: #28ad4c; box-shadow: 0 0 0 4px rgba(40,173,76,.1); }
.hero-preview { position: relative; max-width: none; margin: 0; padding: 0; overflow: hidden; border-color: rgba(186,208,235,.19); border-radius: 25px; background: #0a1c3a; box-shadow: 0 42px 100px rgba(1,7,19,.48); transform: perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.preview-flag-line, .auth-flag-line { position: absolute; z-index: 5; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #d71920 0 33.33%, #ffcf1e 33.33% 66.66%, #28ad4c 66.66%); }
.preview-window-bar { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 16px 0; border-bottom: 1px solid rgba(186,208,235,.12); color: #8fa6c0; background: #0d2445; font-size: .62rem; }
.preview-window-bar > span { display: flex; gap: 5px; }
.preview-window-bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #36506c; }
.preview-window-bar > span i:nth-child(1) { background: #d71920; }
.preview-window-bar > span i:nth-child(2) { background: #ffcf1e; }
.preview-window-bar > span i:nth-child(3) { background: #28ad4c; }
.preview-window-bar strong { color: #dce7f5; font-size: .68rem; }
.preview-window-bar small { justify-self: end; color: #78d993; }
.portal-preview { height: 425px; display: grid; grid-template-columns: 205px minmax(0,1fr); }
.preview-conversations { padding: 14px 10px; border-right: 1px solid rgba(186,208,235,.11); background: #0b203e; }
.preview-search { height: 35px; display: flex; align-items: center; gap: 8px; margin-bottom: 11px; padding: 0 10px; border-radius: 10px; color: #7990aa; background: #07172e; }
.preview-search svg { width: 14px; }
.preview-search i { width: 75%; height: 5px; border-radius: 5px; background: #273d59; }
.preview-person { min-width: 0; display: flex; align-items: center; gap: 9px; margin-bottom: 3px; padding: 9px 8px; border-radius: 12px; color: #a6b7ca; }
.preview-person.active { background: #12366b; box-shadow: inset 3px 0 #3a8cff; }
.preview-person > b, .preview-chat-head > b { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#3a8cff,#175fc2); font-size: .68rem; }
.preview-person > span { min-width: 0; flex: 1; }
.preview-person strong, .preview-person span i { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.preview-person strong { color: #eef4fb; font-size: .64rem; }
.preview-person span i { margin-top: 3px; color: #8298b0; font-size: .5rem; font-style: normal; }
.preview-person em { min-width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #071329; background: #28ad4c; font-size: .45rem; font-style: normal; font-weight: 800; }
.preview-chat { min-width: 0; display: flex; flex-direction: column; background: radial-gradient(circle at 55% 45%, rgba(31,116,232,.1), transparent 16rem), #08172c; }
.preview-chat-head { height: 56px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border-bottom: 1px solid rgba(186,208,235,.1); background: rgba(13,36,69,.93); }
.preview-chat-head > span { min-width: 0; flex: 1; }
.preview-chat-head strong, .preview-chat-head i { display: block; }
.preview-chat-head strong { color: #f0f5fb; font-size: .65rem; }
.preview-chat-head i { margin-top: 2px; color: #7f94aa; font-size: .48rem; font-style: normal; }
.preview-chat-head i em { width: 5px; height: 5px; display: inline-block; margin-right: 3px; border-radius: 50%; background: #28ad4c; }
.preview-chat-head > div { display: flex; gap: 7px; color: #a9bdd2; }
.preview-chat-head svg { width: 15px; }
.preview-messages { min-height: 0; flex: 1; padding: 22px 20px; }
.preview-day { width: max-content; display: block; margin: 0 auto 25px; padding: 4px 9px; border-radius: 99px; color: #8298b1; background: #102848; font-size: .48rem; }
.preview-messages p { width: max-content; max-width: 70%; margin: 6px 0; padding: 8px 10px; border-radius: 4px 12px 12px; color: #dce6f2; background: #173a61; font-size: .6rem; }
.preview-messages p.mine { margin-left: auto; border-radius: 12px 4px 12px 12px; background: #145537; }
.preview-messages p small { margin-left: 8px; color: #75e6a1; }
.preview-messages p.voice { display: flex; align-items: center; gap: 3px; min-width: 180px; color: #dff8e7; background: #145537; }
.preview-messages p.voice svg { width: 20px; margin-right: 5px; }
.preview-messages p.voice i { width: 3px; height: 10px; border-radius: 2px; background: #75d596; }
.preview-messages p.voice i:nth-of-type(2), .preview-messages p.voice i:nth-of-type(5) { height: 18px; }
.preview-messages p.voice i:nth-of-type(3) { height: 13px; }
.preview-messages p.voice b { margin-left: auto; font-size: .48rem; }
.preview-composer { min-height: 54px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-top: 1px solid rgba(186,208,235,.1); color: #869cb3; background: #0d2445; }
.preview-composer > svg { width: 15px; }
.preview-composer > i { height: 35px; display: flex; align-items: center; flex: 1; padding: 0 11px; border-radius: 11px; background: #07172e; font-size: .52rem; font-style: normal; }
.preview-composer > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #28ad4c; }
.preview-composer > b svg { width: 14px; }

.platform-proof { border-block: 1px solid rgba(186,208,235,.1); background: rgba(10,28,58,.66); }
.platform-proof__inner { width: min(1240px, calc(100% - 44px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.platform-proof article { min-height: 126px; display: grid; align-content: center; grid-template-columns: auto 1fr; column-gap: 13px; padding: 23px clamp(17px,2.5vw,35px); border-right: 1px solid rgba(186,208,235,.1); }
.platform-proof article:last-child { border-right: 0; }
.platform-proof strong { grid-row: span 2; align-self: start; color: #ffcf1e; font-size: .69rem; }
.platform-proof span { color: #f2f6fb; font-weight: 750; }
.platform-proof small { color: #849ab2; font-size: .66rem; }
.landing-section { padding: clamp(78px,8vw,112px) 22px; }
.landing-inner { width: min(1240px,100%); }
.section-heading { max-width: 760px; margin-bottom: 52px; }
.section-heading span, .section-kicker { color: #ffcf1e; }
.section-heading p { color: #9db0c6; }
.feature-card { position: relative; overflow: hidden; min-height: 275px; padding: 27px; border-color: rgba(186,208,235,.13); background: linear-gradient(145deg,rgba(14,40,80,.96),rgba(8,23,44,.98)); }
.feature-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--feature-accent,#3a8cff); }
.feature-card::after { content: ""; position: absolute; right: -45px; top: -50px; width: 135px; height: 135px; border-radius: 50%; background: var(--feature-accent,#3a8cff); opacity: .08; filter: blur(3px); }
.feature-card--red { --feature-accent:#d71920; }
.feature-card--yellow { --feature-accent:#ffcf1e; }
.feature-card--green { --feature-accent:#28ad4c; }
.feature-card--blue { --feature-accent:#3a8cff; }
.feature-card__icon { margin-bottom: 48px; color: var(--feature-accent); background: color-mix(in srgb,var(--feature-accent) 13%,transparent); }
.feature-card h3 { font-size: 1.12rem; }
.feature-card p { color: #99acc2; line-height: 1.65; }
.screen-section { background: linear-gradient(180deg,rgba(10,28,58,.25),rgba(14,40,80,.6)); }
.screen-story { display: grid; grid-template-columns: minmax(0,.85fr) minmax(520px,1.15fr); align-items: center; gap: clamp(45px,8vw,110px); }
.section-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.screen-story h2 { margin: 10px 0 18px; font-size: clamp(2.4rem,4.5vw,4.5rem); line-height: 1.02; letter-spacing: -.06em; }
.screen-story p { max-width: 560px; color: #9eb0c5; }
.screen-story ul { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.screen-story li { display: flex; align-items: center; gap: 10px; color: #dce6f2; font-size: .82rem; font-weight: 650; }
.screen-story li svg { width: 18px; color: #78d993; }
.screen-devices { position: relative; min-height: 430px; }
.device-desktop, .device-phone { position: absolute; overflow: hidden; border: 1px solid rgba(186,208,235,.2); background: #08172c; box-shadow: 0 32px 75px rgba(1,7,19,.42); }
.device-desktop { inset: 25px 0 25px 20px; border-radius: 22px; }
.device-desktop > header { height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 12px; background: #0d2445; }
.device-desktop > header span { width: 6px; height: 6px; border-radius: 50%; background: #435771; }
.device-desktop > main { height: calc(100% - 34px); display: grid; grid-template-columns: 28% 1fr; }
.device-desktop aside { border-right: 1px solid rgba(186,208,235,.1); background: #0b203e; }
.device-desktop section { display: flex; flex-direction: column; padding: 35px 30px 0; }
.device-desktop section b, .device-desktop section i { width: 35%; height: 32px; display: block; margin-bottom: 10px; border-radius: 4px 12px 12px; background: #173a61; }
.device-desktop section i { align-self: end; background: #145537; }
.device-desktop section footer { height: 46px; margin: auto -30px 0; border-top: 1px solid rgba(186,208,235,.1); background: #0d2445; }
.device-phone { right: -18px; bottom: -10px; width: 155px; height: 310px; border: 5px solid #112a4e; border-radius: 28px; }
.device-phone > header { height: 42px; border-bottom: 1px solid rgba(186,208,235,.1); background:#0d2445; }
.device-phone > main { height: calc(100% - 42px); display: flex; flex-direction: column; padding: 34px 12px 0; }
.device-phone b, .device-phone main i { width: 68%; height: 27px; margin-bottom: 8px; border-radius: 4px 10px 10px; background:#173a61; }
.device-phone main i { align-self: end; background:#145537; }
.device-phone footer { height: 39px; margin: auto -12px 0; border-top: 1px solid rgba(186,208,235,.1); background:#0d2445; }
.landing-cta { padding-top: 74px; }
.cta-card { border-color: rgba(186,208,235,.18); background: linear-gradient(125deg,#0e2850,#12366b 55%,#0e2850); }
.cta-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#d71920 0 33.33%,#ffcf1e 33.33% 66.66%,#28ad4c 66.66%); }
.cta-card::after { background:rgba(31,116,232,.2); }
.cta-card > div > span { color:#ffcf1e; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }

/* Authentication. */
.auth-page { position: relative; background: #071329; }
.auth-page::after { content:""; position:fixed; inset:0 auto 0 0; width:4px; background:linear-gradient(to bottom,#d71920 0 33.33%,#ffcf1e 33.33% 66.66%,#28ad4c 66.66%); }
.auth-main { width:min(550px,100%); padding:clamp(34px,5vw,66px); }
.auth-brand-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:clamp(55px,9vh,92px); }
.auth-secure { display:inline-flex; align-items:center; gap:7px; color:#8298b0; font-size:.66rem; font-weight:650; }
.auth-secure i { width:7px; height:7px; border-radius:50%; background:#28ad4c; box-shadow:0 0 0 4px rgba(40,173,76,.1); }
.auth-copy { margin-bottom:30px; }
.auth-eyebrow, .auth-visual__eyebrow { color:#ffcf1e; font-size:.69rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.auth-copy h1 { margin:9px 0 10px; font-size:clamp(2.35rem,4vw,3.25rem); }
.auth-copy p { max-width:430px; margin:0; color:#9fb1c6; }
.auth-form { padding:24px; border:1px solid rgba(186,208,235,.14); border-radius:20px; background:rgba(10,28,58,.66); box-shadow:0 25px 65px rgba(1,7,19,.27); }
.auth-form .input { min-height:51px; background:rgba(7,19,41,.8); }
.auth-form .btn { margin-top:4px; }
.auth-trust { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px; color:#7890aa; font-size:.66rem; }
.auth-trust svg { width:14px; color:#74d38f; }
.auth-switch { margin-top:16px; }
.auth-visual { align-items:center; margin:16px; border-color:rgba(186,208,235,.17); background:linear-gradient(145deg,#0e2850,#0a1c3a 70%); }
.auth-visual::before { background:radial-gradient(circle at 70% 25%,rgba(31,116,232,.24),transparent 25rem),radial-gradient(circle at 15% 85%,rgba(40,173,76,.12),transparent 20rem); }
.auth-visual__content { max-width:720px; }
.auth-visual__content h2 { margin:11px 0 18px; }
.auth-visual__content h2 em { color:#a9ccff; font-style:normal; }
.auth-visual__content p { color:#aebfd4; }
.auth-product-card { max-width:560px; margin:32px 0 24px; padding:17px; border:1px solid rgba(186,208,235,.14); border-radius:21px; background:rgba(7,19,41,.6); box-shadow:0 28px 65px rgba(1,7,19,.28); }
.auth-product-card__head { display:flex; align-items:center; gap:11px; padding:2px 3px 16px; }
.auth-product-logo { width:39px; height:39px; display:grid; place-items:center; border-radius:13px; color:#fff; background:#1f74e8; }
.auth-product-logo svg { width:20px; }
.auth-product-card__head > span:last-child { min-width:0; }
.auth-product-card__head strong, .auth-product-card__head small { display:block; }
.auth-product-card__head strong { color:#eef4fb; font-size:.8rem; }
.auth-product-card__head small { margin-top:3px; color:#7c92aa; font-size:.57rem; }
.auth-product-card__head small i { width:6px; height:6px; display:inline-block; margin-right:4px; border-radius:50%; background:#28ad4c; }
.auth-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.auth-product-grid > span { min-height:93px; display:flex; flex-direction:column; justify-content:center; padding:12px; border:1px solid rgba(186,208,235,.1); border-radius:14px; background:rgba(18,54,107,.45); }
.auth-product-grid svg { width:19px; margin-bottom:12px; color:#a9ccff; }
.auth-product-grid strong, .auth-product-grid small { display:block; }
.auth-product-grid strong { color:#e8eff8; font-size:.68rem; }
.auth-product-grid small { margin-top:2px; color:#7e94ab; font-size:.54rem; }
.feature-pill { border-color:rgba(186,208,235,.14); color:#c6d3e2; background:rgba(7,19,41,.35); }
.feature-pill svg { color:#78d993; }

/* Messages: KurdChannel tones and a composer that cannot be pushed off-screen. */
.chat-page {
  --chat-bg:#071329;
  --chat-panel:#0a1c3a;
  --chat-panel-raised:#0e2850;
  --chat-surface:#12366b;
  --chat-surface-hover:#173a61;
  --chat-line:rgba(186,208,235,.12);
  --chat-line-strong:rgba(186,208,235,.2);
  --chat-text:#f2f6fc;
  --chat-muted:#91a7c0;
  --chat-accent:#3a8cff;
  --chat-accent-strong:#1f74e8;
  --chat-green:#28ad4c;
  background:radial-gradient(circle at 88% -14%,rgba(31,116,232,.2),transparent 32rem),#071329;
}
.chat-page .topbar { background:rgba(7,19,41,.94); }
.chat-page .page, .chat-page .chat-shell, .chat-page .chat-list-pane, .chat-page .chat-main-pane, .chat-page .chat-conversation { min-height:0; }
.chat-page .chat-shell { isolation:isolate; border-color:rgba(186,208,235,.17); background:#071329; box-shadow:0 30px 85px rgba(1,7,19,.46); }
.chat-page .chat-shell::before { content:""; position:absolute; z-index:4; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#d71920 0 33.33%,#ffcf1e 33.33% 66.66%,#28ad4c 66.66%); pointer-events:none; }
.chat-page .chat-list-pane { height:100%; overflow:hidden; background:linear-gradient(180deg,#0e2850,#0a1c3a 56%,#08172f); }
.chat-page .chat-main-pane { height:100%; min-height:0; overflow:hidden; background-color:#071329; background-image:linear-gradient(rgba(14,40,80,.13),rgba(7,19,41,.1)),radial-gradient(circle at 16px 16px,rgba(169,204,255,.045) 0 1.3px,transparent 1.6px); }
.chat-page .chat-empty, .chat-page .chat-conversation { width:100%; height:100%; min-height:0; overflow:hidden; flex:1 1 0; }
.chat-page .chat-conversation { display:flex; flex-direction:column; }
.chat-page .chat-main-header, .chat-page .chat-connection-banner, .chat-page .reply-strip, .chat-page .chat-interaction-notice, .chat-page .composer-wrap { flex:0 0 auto; }
.chat-page .message-list { min-height:0; flex:1 1 0; overflow-x:hidden; overflow-y:auto; }
.chat-page .composer-wrap { position:relative; inset:auto; z-index:20; width:100%; margin-top:auto; background:#0d2445; box-shadow:0 -14px 38px rgba(1,7,19,.22); }
.chat-page .chat-list-heading__icon { border-color:rgba(255,207,30,.17); color:#fff4bd; background:linear-gradient(145deg,rgba(255,207,30,.14),rgba(215,25,32,.08)); }
.chat-page .chat-search { background:rgba(7,19,41,.68); }
.chat-page .chat-search:focus-within { border-color:rgba(58,140,255,.55); background:rgba(7,19,41,.9); box-shadow:0 0 0 3px rgba(58,140,255,.1); }
.chat-page .chat-tab.active { color:#fff; border-color:rgba(58,140,255,.22); background:rgba(31,116,232,.24); }
.chat-page .conversation.active { border-color:rgba(58,140,255,.2); background:linear-gradient(100deg,rgba(31,116,232,.28),rgba(18,54,107,.24)); box-shadow:inset 3px 0 #3a8cff; }
[dir="rtl"] .chat-page .conversation.active { box-shadow:inset -3px 0 #3a8cff; }
.chat-page .conversation .avatar, .chat-page .chat-main-header .avatar { background:linear-gradient(145deg,#3a8cff,#175fc2); }
.chat-page .conversation-unread { color:#071329; background:#ffcf1e!important; }
.chat-page .chat-main-header { background:rgba(13,36,69,.96); }
.chat-page .chat-main-header .presence { border-color:#0d2445; }
.chat-page .message-bubble { border-color:rgba(186,208,235,.12); background:#173a61; }
.chat-page .message-row.own .message-bubble { border-color:rgba(83,205,120,.18); background:linear-gradient(140deg,#176043,#114b34); }
.chat-page .message-author { color:#ffda52; }
.chat-page .message-row.own .message-meta { color:#a6d9b6; }
.chat-page .message-reply { border-color:#ffcf1e; background:rgba(7,19,41,.32); }
.chat-page .message-reaction { background:#12366b; }
.chat-page .message-reaction.active { border-color:rgba(255,207,30,.66); background:#574c17; }
.chat-page .reply-strip { background:#0e2850; }
.chat-page .composer-input { border-color:rgba(186,208,235,.12); color:#f2f6fc; background:#07172e; }
.chat-page .composer-input:focus { border-color:rgba(58,140,255,.55); box-shadow:0 0 0 3px rgba(58,140,255,.09); }
.chat-page .composer .composer-send { background:linear-gradient(145deg,#34bd5b,#218d43)!important; box-shadow:0 8px 20px rgba(33,141,67,.25); }
.chat-page .composer-accessory, .chat-page .emoji-picker { background:#0e2850; }
.chat-page .chat-empty { background:radial-gradient(circle at 50% 47%,rgba(31,116,232,.1),transparent 24rem); }
.chat-page .chat-empty__icon { border-color:rgba(255,207,30,.2); color:#fff5c8; background:linear-gradient(145deg,rgba(255,207,30,.13),rgba(215,25,32,.08)); }
.chat-empty__features svg { color:#78d993; }
.chat-page .voice-message { border-color:rgba(83,205,120,.18); background:linear-gradient(145deg,rgba(23,96,67,.96),rgba(17,75,52,.96)); }
.chat-page .voice-message__toggle { background:linear-gradient(145deg,#34bd5b,#218d43); }
.chat-page .voice-message__waveform i { background:linear-gradient(180deg,#bce7c8,#64bd7f); }
.chat-page .voice-message.is-playing .voice-message__waveform i { background:linear-gradient(180deg,#fff0a4,#ffcf1e); }
.chat-page .voice-message__waveform input::-webkit-slider-thumb { border-color:#edfff2; background:#28ad4c; }
.chat-page .voice-message__waveform input::-moz-range-thumb { border-color:#edfff2; background:#28ad4c; }
.chat-page .modal:not(.chat-incoming-modal) .modal-card { background:linear-gradient(155deg,#0e2850,#0a1c3a); }

@media (max-width:1100px) {
  .hero-layout, .screen-story { grid-template-columns:1fr; }
  .hero-copy { max-width:760px; }
  .hero-preview { width:min(760px,100%); }
  .screen-story__copy { max-width:720px; }
  .screen-devices { width:min(720px,100%); }
}
@media (max-width:760px) {
  .hero { padding:54px 16px 68px; }
  .hero-layout { gap:44px; }
  .hero h1 { font-size:clamp(3rem,15vw,4.6rem); }
  .portal-preview { height:350px; grid-template-columns:85px 1fr; }
  .preview-conversations { padding-inline:7px; }
  .preview-person { justify-content:center; padding-inline:4px; }
  .preview-person > span, .preview-person > em { display:none; }
  .preview-search i { display:none; }
  .platform-proof__inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .platform-proof article:nth-child(2) { border-right:0; }
  .platform-proof article:nth-child(-n+2) { border-bottom:1px solid rgba(186,208,235,.1); }
  .screen-devices { min-height:350px; }
  .device-desktop { left:0; }
  .device-phone { right:0; width:130px; height:270px; }
  .auth-page::after { width:3px; }
  .auth-main { min-height:100dvh; padding:28px 22px; }
  .auth-brand-row { margin-bottom:48px; }
  .auth-form { padding:18px; }
  .chat-page .chat-main-pane { height:var(--chat-viewport-height,100dvh); min-height:0; max-height:var(--chat-viewport-height,100dvh); overflow:hidden; }
  .chat-page .chat-conversation { height:100%; min-height:0; max-height:100%; }
  .chat-page .composer-wrap { padding-bottom:0; }
}
@media (min-width:1600px) {
  .hero-inner, .landing-inner, .platform-proof__inner { max-width:1500px; }
  .hero-layout { grid-template-columns:minmax(0,.85fr) minmax(650px,1.15fr); }
  .portal-preview { height:520px; grid-template-columns:260px minmax(0,1fr); }
  .preview-person { min-height:62px; }
  .chat-page .chat-main-pane, .chat-page .chat-conversation { min-height:0; overflow:hidden; }
}

/* Login refinement v1.9.1: open layout, no card around the credentials. */
.auth-page .auth-main { width:min(570px,100%); }
.auth-page .auth-copy { margin-bottom:34px; }
.auth-page .auth-copy h1 { font-size:clamp(2.55rem,4.2vw,3.55rem); }
.auth-page .auth-form {
  width:100%;
  max-width:480px;
  gap:20px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.auth-page .auth-form .form-group { gap:9px; }
.auth-page .auth-form .form-group label { color:#dce7f5; font-size:.73rem; font-weight:750; letter-spacing:.01em; }
.auth-page .auth-form .input-wrap { border-radius:16px; }
.auth-page .auth-form .input {
  min-height:58px;
  padding-block:14px;
  border:1px solid rgba(186,208,235,.2);
  border-radius:16px;
  background:rgba(10,28,58,.72);
  box-shadow:0 12px 28px rgba(1,7,19,.14),inset 0 1px rgba(255,255,255,.025);
}
.auth-page .auth-form .input:hover { border-color:rgba(169,204,255,.36); background:rgba(14,40,80,.72); }
.auth-page .auth-form .input:focus { border-color:#3a8cff; background:#0a1c3a; box-shadow:0 0 0 4px rgba(58,140,255,.13),0 14px 32px rgba(1,7,19,.2); }
.auth-page .auth-form .input-wrap > svg, .auth-page .auth-form .input-wrap > [data-icon] { left:16px; width:19px; height:19px; color:#8eabc8; }
.auth-page .auth-form .input-wrap .input { padding-left:48px; }
.auth-page .auth-form .input-action { right:9px; border:0; background:transparent; }
.auth-page .auth-form .btn { min-height:56px; margin-top:4px; border-radius:16px; }
.auth-form-footer { width:100%; max-width:480px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; }
.auth-page .auth-trust, .auth-page .auth-switch { margin:0; text-align:start; }
.auth-page .auth-switch { color:#8da3bb; font-size:.72rem; }
[dir="rtl"] .input-wrap > svg, [dir="rtl"] .input-wrap > [data-icon] { right:13px; left:auto; }
[dir="rtl"] .input-wrap .input { padding-right:42px; padding-left:13px; }
[dir="rtl"] .input-wrap .input-action { right:auto; left:7px; }
[dir="rtl"] .auth-page .auth-form .input-wrap > svg, [dir="rtl"] .auth-page .auth-form .input-wrap > [data-icon] { right:16px; left:auto; }
[dir="rtl"] .auth-page .auth-form .input-wrap .input { padding-right:48px; padding-left:48px; }
[dir="rtl"] .auth-page .auth-form .input-action { right:auto; left:9px; }
[dir="rtl"] .auth-page .auth-form-footer { text-align:right; }
[dir="rtl"] .auth-page .auth-form .btn svg { transform:rotate(180deg); }

@media (max-width:560px) {
  .auth-page .auth-main { padding-inline:20px; }
  .auth-page .auth-brand-row { margin-bottom:44px; }
  .auth-page .auth-copy { margin-bottom:28px; }
  .auth-page .auth-copy h1 { font-size:2.65rem; }
  .auth-form-footer { align-items:flex-start; flex-direction:column; gap:10px; }
}

/* v2.0 — brighter KurdChannel navy and a section-based home screen. */
.dashboard-page,
.tv-page {
  --panel-solid:#285d84;
  --panel-raised:#2d668f;
  --glass:rgba(31,77,112,.9);
  --line:rgba(224,241,255,.2);
  --line-strong:rgba(231,245,255,.32);
  --muted:#d0e2ef;
  --muted-strong:#eff8ff;
  background:
    radial-gradient(circle at 86% -12%,rgba(122,191,245,.42),transparent 34rem),
    radial-gradient(circle at -8% 75%,rgba(55,190,162,.16),transparent 30rem),
    linear-gradient(145deg,#265c83 0%,#1f4d75 48%,#2b638b 100%);
}
.dashboard-page .sidebar,
.tv-page .sidebar { background:linear-gradient(180deg,rgba(25,66,99,.98),rgba(31,78,113,.98)); }
.dashboard-page .topbar,
.tv-page .topbar { background:rgba(38,88,125,.92); }
.dashboard-page .page { width:min(1780px,100%); }
.dashboard-page .panel,
.tv-page .panel { border-color:rgba(224,241,255,.2); background:linear-gradient(145deg,rgba(47,104,144,.94),rgba(37,83,119,.97)); box-shadow:0 16px 40px rgba(14,47,73,.19); }
.dashboard-page .panel:hover,
.tv-page .panel:hover { border-color:rgba(230,245,255,.38); box-shadow:0 22px 50px rgba(14,47,73,.25); }

.dashboard-home { display:grid; gap:20px; }
.dashboard-hero {
  position:relative;
  isolation:isolate;
  min-height:260px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  align-items:center;
  gap:34px;
  overflow:hidden;
  padding:clamp(27px,4vw,48px);
  border:1px solid rgba(231,245,255,.26);
  border-radius:28px;
  background:linear-gradient(120deg,#326f9b 0%,#285f8c 48%,#22537e 100%);
  box-shadow:0 26px 65px rgba(11,44,70,.24);
}
.dashboard-hero::before { content:""; position:absolute; z-index:-1; width:420px; height:420px; inset:-210px -100px auto auto; border-radius:50%; background:rgba(140,205,255,.21); animation:dashboard-orbit 8s ease-in-out infinite alternate; }
.dashboard-hero::after { content:""; position:absolute; z-index:-1; width:250px; height:250px; inset:auto auto -165px 28%; border:1px solid rgba(255,255,255,.11); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 88px rgba(255,255,255,.018); }
@keyframes dashboard-orbit { to { transform:translate(-34px,28px) scale(1.08); } }
.dashboard-hero__copy { max-width:790px; }
.dashboard-hero__copy h1 { margin:0; font-size:clamp(2rem,4vw,4.2rem); line-height:1.04; letter-spacing:-.055em; }
.dashboard-hero__copy h1 span { color:#d7ecff; }
.dashboard-hero__copy p { max-width:730px; margin:15px 0 24px; color:#e1eff8; font-size:clamp(.9rem,1.2vw,1.04rem); }
.dashboard-hero__button { min-height:49px; padding-inline:20px; background:#f5fbff; color:#214f75; box-shadow:0 13px 30px rgba(10,42,68,.19); }
.dashboard-hero__button:hover { color:#173d60; background:#fff; }
.dashboard-section-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dashboard-section-nav a { min-height:82px; display:flex; align-items:center; gap:12px; padding:15px; border:1px solid rgba(235,247,255,.22); border-radius:18px; color:#f7fbff; background:rgba(17,58,90,.23); backdrop-filter:blur(10px); transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.dashboard-section-nav a:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.42); background:rgba(69,130,174,.5); }
.dashboard-section-nav a > span:first-child { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:13px; color:#fff; background:rgba(225,241,255,.15); }
.dashboard-section-nav svg { width:20px; }
.dashboard-section-nav a > span:last-child { font-size:.8rem; font-weight:780; }

.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.dashboard-metric { position:relative; min-height:112px; display:flex; align-items:center; gap:15px; overflow:hidden; padding:18px; border:1px solid rgba(229,244,255,.24); border-radius:20px; background:linear-gradient(145deg,rgba(54,115,156,.96),rgba(39,87,124,.96)); box-shadow:0 14px 34px rgba(13,45,70,.16); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.dashboard-metric::after { content:""; position:absolute; width:90px; height:90px; inset:auto -42px -44px auto; border-radius:50%; background:var(--metric-accent); opacity:.13; }
.dashboard-metric:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--metric-accent) 54%,white); box-shadow:0 21px 42px rgba(13,45,70,.23); }
.dashboard-metric__icon { width:48px; height:48px; display:grid; place-items:center; flex:0 0 48px; border-radius:15px; color:var(--metric-accent); background:color-mix(in srgb,var(--metric-accent) 16%,transparent); }
.dashboard-metric__icon svg { width:22px; }
.dashboard-metric strong,.dashboard-metric small { display:block; }
.dashboard-metric strong { color:#fff; font-size:1.55rem; line-height:1; }
.dashboard-metric small { margin-top:7px; color:#d6e7f3; font-size:.69rem; font-weight:650; }

.dashboard-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px; align-items:start; }
.dashboard-panel { scroll-margin-top:92px; }
.dashboard-panel--messages { grid-column:span 7; }
.dashboard-panel--actions { grid-column:span 5; }
.dashboard-tv-card { grid-column:span 5; scroll-margin-top:92px; position:relative; overflow:hidden; min-height:350px; display:flex; flex-direction:column; align-items:flex-start; padding:27px; border:1px solid rgba(228,244,255,.24); border-radius:22px; background:linear-gradient(145deg,#2b6792,#1e4d76); box-shadow:0 18px 44px rgba(13,44,69,.21); }
.dashboard-tv-card::after { content:""; position:absolute; width:300px; height:300px; inset:-155px -120px auto auto; border-radius:50%; background:rgba(108,195,255,.2); }
.dashboard-tv-card__icon { position:relative; width:54px; height:54px; display:grid; place-items:center; border-radius:17px; color:#fff; background:rgba(224,243,255,.15); }
.dashboard-tv-card__icon svg { width:25px; }
.dashboard-tv-card__icon i { position:absolute; top:5px; right:5px; width:8px; height:8px; border:2px solid #2d638a; border-radius:50%; background:#62d284; box-shadow:0 0 0 3px rgba(98,210,132,.14); }
.dashboard-tv-card__copy { margin:25px 0 20px; }
.dashboard-tv-card__copy > span { color:#fbd867; font-size:.67rem; font-weight:800; letter-spacing:.08em; }
.dashboard-tv-card h2 { margin:5px 0 9px; font-size:1.55rem; }
.dashboard-tv-card p { margin:0; color:#d6e7f3; font-size:.8rem; line-height:1.65; }
.dashboard-tv-card__counts { width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:auto 0 16px; }
.dashboard-tv-card__counts span { padding:12px; border:1px solid rgba(229,244,255,.18); border-radius:14px; background:rgba(17,57,88,.24); }
.dashboard-tv-card__counts strong,.dashboard-tv-card__counts small { display:block; }
.dashboard-tv-card__counts strong { font-size:1.2rem; }
.dashboard-tv-card__counts small { margin-top:3px; color:#c7dcea; font-size:.62rem; }
.dashboard-tv-card > .btn { width:100%; color:#f7fbff; border-color:rgba(232,245,255,.25); background:rgba(236,248,255,.1); }
.dashboard-panel--exchange { grid-column:span 7; scroll-margin-top:92px; }
.dashboard-panel--calls { grid-column:1/-1; scroll-margin-top:92px; }
.dashboard-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dashboard-action { min-width:0; min-height:105px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:15px; border:1px solid rgba(228,243,254,.17); border-radius:17px; color:#f6fbff; background:rgba(26,71,105,.3); transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.dashboard-action:hover { color:#fff; transform:translateY(-3px); border-color:rgba(229,244,255,.36); background:rgba(59,121,163,.58); }
.dashboard-action__icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#d9efff; background:rgba(207,234,252,.13); }
.dashboard-action__icon svg { width:20px; }
.dashboard-action > span:nth-child(2) { min-width:0; }
.dashboard-action strong,.dashboard-action small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dashboard-action strong { font-size:.73rem; }
.dashboard-action small { margin-top:3px; color:#c5d9e8; font-size:.6rem; }
.dashboard-action > svg { width:16px; color:#b9d7ea; }
[dir="rtl"] .dashboard-action > svg,[dir="rtl"] .dashboard-panel .btn svg,[dir="rtl"] .dashboard-tv-card > .btn svg { transform:rotate(180deg); }
.dashboard-empty { min-height:235px; }
.dashboard-list .list-item { min-height:65px; border-radius:14px; }
.dashboard-call-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.dashboard-call { min-width:0; display:flex; align-items:center; gap:12px; padding:13px; border:1px solid rgba(228,243,254,.16); border-radius:15px; background:rgba(27,72,106,.27); }
.dashboard-call .list-item__side { margin-inline-start:auto; }

/* Login stays navy, but no longer looks almost black. */
.auth-page {
  --muted:#d3e4f0;
  --muted-strong:#f1f8fd;
  --line:rgba(229,244,255,.21);
  --line-strong:rgba(234,247,255,.34);
  background:
    radial-gradient(circle at 13% 12%,rgba(126,197,247,.34),transparent 27rem),
    linear-gradient(140deg,#2b638b 0%,#214f76 54%,#2d6790 100%);
}
.auth-page::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) 1px,transparent 0); background-size:34px 34px; mask-image:linear-gradient(135deg,#000,transparent 75%); }
.auth-page .auth-main { width:min(610px,100%); }
.auth-page .auth-copy p { color:#d1e3ef; }
.auth-page .auth-secure { color:#d3e5f1; }
.auth-page .auth-form .form-group label { color:#f3f9fd; }
.auth-page .auth-form .input { border-color:rgba(235,247,255,.3); color:#fff; background:rgba(35,83,119,.78); box-shadow:0 12px 28px rgba(11,44,69,.14),inset 0 1px rgba(255,255,255,.05); }
.auth-page .auth-form .input::placeholder { color:#c4dae8; }
.auth-page .auth-form .input:hover { border-color:rgba(241,249,255,.47); background:rgba(43,99,140,.9); }
.auth-page .auth-form .input:focus { border-color:#b9ddfb; background:#255b83; box-shadow:0 0 0 4px rgba(184,220,250,.18),0 14px 32px rgba(10,42,67,.18); }
.auth-page .auth-form .input-wrap > svg,.auth-page .auth-form .input-wrap > [data-icon] { color:#d5e9f6; }
.auth-page .auth-form .btn { color:#214f75; background:#f7fbff; box-shadow:0 13px 31px rgba(11,43,68,.18); }
.auth-page .auth-form .btn:hover { color:#153c5f; background:#fff; }
.auth-page .auth-trust,.auth-page .auth-switch { color:#c9deeb; }
.auth-page .auth-switch a { color:#fff; }
.auth-page .auth-visual { border-color:rgba(235,247,255,.27); background:linear-gradient(145deg,#3979a5,#285f89 72%); box-shadow:0 30px 75px rgba(11,43,68,.26); }
.auth-page .auth-visual::before { background:radial-gradient(circle at 70% 25%,rgba(183,224,255,.3),transparent 25rem),radial-gradient(circle at 15% 85%,rgba(73,211,151,.14),transparent 20rem); }
.auth-page .auth-visual__content p { color:#e0edf6; }
.auth-page .auth-product-card { border-color:rgba(236,247,255,.23); background:rgba(27,71,105,.48); box-shadow:0 28px 65px rgba(12,43,66,.24); }
.auth-page .auth-product-grid > span { border-color:rgba(236,247,255,.16); background:rgba(49,112,154,.55); }
.auth-page .auth-product-card__head small,.auth-page .auth-product-grid small { color:#c2d9e8; }
.auth-page .feature-pill { border-color:rgba(235,247,255,.23); color:#eff8fd; background:rgba(27,70,104,.35); }

@media (max-width:1180px) {
  .dashboard-hero { grid-template-columns:1fr; }
  .dashboard-section-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .dashboard-section-nav a { min-height:70px; }
  .dashboard-panel--messages,.dashboard-panel--actions,.dashboard-tv-card,.dashboard-panel--exchange { grid-column:span 6; }
}
@media (max-width:820px) {
  .dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-panel--messages,.dashboard-panel--actions,.dashboard-tv-card,.dashboard-panel--exchange { grid-column:1/-1; }
  .dashboard-section-nav { overflow-x:auto; display:flex; padding-bottom:3px; scrollbar-width:none; }
  .dashboard-section-nav::-webkit-scrollbar { display:none; }
  .dashboard-section-nav a { min-width:142px; flex:0 0 auto; }
}
@media (max-width:560px) {
  .dashboard-home { gap:13px; }
  .dashboard-hero { min-height:0; gap:24px; padding:23px 18px; border-radius:21px; }
  .dashboard-hero__copy h1 { font-size:2rem; }
  .dashboard-hero__copy p { margin-block:11px 19px; font-size:.78rem; }
  .dashboard-hero__button { width:100%; }
  .dashboard-section-nav a { min-width:118px; min-height:61px; padding:10px; }
  .dashboard-section-nav a > span:first-child { width:35px; height:35px; flex-basis:35px; }
  .dashboard-metrics { gap:9px; }
  .dashboard-metric { min-height:92px; gap:10px; padding:12px; border-radius:16px; }
  .dashboard-metric__icon { width:39px; height:39px; flex-basis:39px; border-radius:12px; }
  .dashboard-metric strong { font-size:1.25rem; }
  .dashboard-metric small { font-size:.57rem; line-height:1.35; }
  .dashboard-bento { gap:13px; }
  .dashboard-actions { grid-template-columns:1fr; }
  .dashboard-action { min-height:72px; }
  .dashboard-tv-card { min-height:330px; padding:21px; border-radius:18px; }
  .dashboard-call-grid { grid-template-columns:1fr; }
  .dashboard-panel .panel-header { align-items:flex-start; }
  .dashboard-panel .panel-header .btn { flex:0 0 auto; }
  .dashboard-panel .panel-header .btn { font-size:0; }
  .dashboard-panel .panel-header .btn svg { width:18px; }
  .dashboard-rate-list .list-item__main strong { max-width:42vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
}

.tv-page .tv-player { background:radial-gradient(circle at 50% 45%,rgba(83,165,218,.17),transparent 25rem),#193f5f; }
.tv-page .tv-now { background:rgba(36,86,122,.94); }
.tv-page .channel-panel { border-color:rgba(227,242,253,.22); background:linear-gradient(180deg,rgba(47,104,144,.97),rgba(36,82,117,.98)); }
.tv-page .channel-item { border-color:rgba(227,242,253,.13); background:rgba(31,75,108,.38); }
.tv-page .channel-item:hover,.tv-page .channel-item.active { border-color:rgba(230,245,255,.34); background:rgba(63,128,171,.62); }
.channel-live.official { color:#fff3b9; border-color:rgba(255,220,98,.28); background:rgba(117,89,15,.32); }
.channel-item.has-official-page { opacity:1; }
.channel-item.has-official-page .channel-logo { filter:none; }
.tv-official-link { width:auto; margin-top:15px; }
.tv-official-link svg { display:inline-block; width:16px; }
[dir="rtl"] .tv-official-link svg { transform:rotate(270deg); }

/* v2.1 — quick, bright messaging inspired by familiar mobile chat patterns. */
.chat-page {
  color-scheme:light;
  --chat-bg:#e8eef2;
  --chat-panel:#f7fafc;
  --chat-panel-raised:#eef4f7;
  --chat-surface:#fff;
  --chat-surface-hover:#e7f0f6;
  --chat-line:rgba(38,88,125,.16);
  --chat-line-strong:rgba(38,88,125,.27);
  --chat-text:#16364d;
  --chat-muted:#668195;
  --chat-accent:#2e759f;
  --chat-accent-strong:#245f88;
  --chat-green:#22a060;
  --muted:#668195;
  --muted-strong:#284c65;
  background:linear-gradient(145deg,#d8e5ed,#c6d9e5 48%,#dce8ef);
  color:#16364d;
}
.chat-page .sidebar { border-color:rgba(225,241,252,.23); background:linear-gradient(180deg,#2c668f,#255979); }
.chat-page .topbar { border-color:rgba(230,244,253,.2); background:rgba(45,102,143,.96); }
.chat-page .page { width:min(1840px,100%); }
.chat-page .chat-shell { border-color:rgba(36,86,122,.22); background:#edf3f6; box-shadow:0 24px 65px rgba(26,67,96,.22); }
.chat-page .chat-list-pane { border-color:rgba(38,88,125,.15); background:linear-gradient(180deg,#f7fafc,#edf4f7 62%,#e7f0f4); }
.chat-page .chat-list-heading__icon { border-color:rgba(50,117,157,.18); color:#2c7199; background:#e2eef5; box-shadow:none; }
.chat-page .chat-list-title h1,.chat-page .conversation-top strong { color:#17384f; }
.chat-page .chat-list-heading small,.chat-page .conversation-preview,.chat-page .conversation-time { color:#698397; }
.chat-page .chat-list-tools .icon-btn { border-color:rgba(38,88,125,.13); color:#315f7d; background:#e7f0f5; }
.chat-page .chat-list-tools .chat-new-button { color:#fff; border-color:transparent; background:#2e789f; }
.chat-page .chat-search { border-color:rgba(38,88,125,.13); color:#688296; background:#e8f0f4; }
.chat-page .chat-search:focus-within { border-color:rgba(46,117,159,.45); background:#fff; box-shadow:0 0 0 3px rgba(46,117,159,.1); }
.chat-page .chat-search input { color:#18394f; }
.chat-page .chat-search input::placeholder { color:#748b9a; }
.chat-page .chat-search input::-webkit-search-cancel-button { filter:none; }
.chat-page .chat-search kbd { border-color:rgba(38,88,125,.17); color:#6d8798; background:#f8fbfc; }
.chat-page .chat-tab { color:#607d90; }
.chat-page .chat-tab:hover { color:#285f82; background:#e2edf3; }
.chat-page .chat-tab.active { color:#205d84; border-color:rgba(46,117,159,.19); background:#d7e9f4; }
.chat-page .conversation { color:#17384f; }
.chat-page .conversation:hover { border-color:rgba(38,88,125,.09); background:#e4eef4; }
.chat-page .conversation.active { border-color:rgba(46,117,159,.2); background:linear-gradient(100deg,#d5eaf6,#e8f2f7); box-shadow:inset 3px 0 #2f80aa; }
[dir="rtl"] .chat-page .conversation.active { box-shadow:inset -3px 0 #2f80aa; }
.chat-page .conversation .avatar,.chat-page .chat-main-header .avatar { border-color:rgba(255,255,255,.8); color:#fff; background:linear-gradient(145deg,#4f9bc3,#2f79a6); box-shadow:0 5px 14px rgba(36,92,126,.18); }
.chat-page .conversation .presence,.chat-page .chat-main-header .presence { border-color:#f7fafc; }
.chat-page .conversation-unread { color:#fff; background:#239b5f!important; }
.chat-page .chat-list-skeleton i,.chat-page .chat-list-skeleton b,.chat-page .chat-list-skeleton small { background:rgba(69,112,140,.1); }

.chat-page .chat-main-pane {
  background-color:#e7edef;
  background-image:radial-gradient(circle at 16px 16px,rgba(48,94,119,.055) 0 1.3px,transparent 1.6px),linear-gradient(rgba(242,247,249,.35),rgba(224,233,237,.28));
  background-size:38px 38px,100% 100%;
}
.chat-page .chat-main-header { border-color:rgba(38,88,125,.13); background:rgba(248,251,252,.97); box-shadow:0 7px 24px rgba(35,75,100,.08); }
.chat-page .chat-contact strong { color:#17384f; }
.chat-page .chat-contact span { color:#718899; }
.chat-page .chat-contact span.typing { color:#16885c; }
.chat-page .chat-header-actions .icon-btn { color:#54778e; }
.chat-page .chat-header-actions .icon-btn:hover { color:#245f88; background:#e6eff4; }
.chat-page .chat-live-pill { border-color:rgba(34,160,96,.2); color:#147b4e; background:#dcf3e6; }
.chat-page .message-list { padding-block:20px; }
.chat-page .message-date { border-color:rgba(38,88,125,.12); color:#526f82; background:rgba(247,250,252,.9); box-shadow:0 3px 10px rgba(30,70,96,.08); }
.chat-page .message-bubble { border-color:rgba(38,88,125,.09); color:#17384f; background:#fff; box-shadow:0 2px 8px rgba(32,72,96,.1); }
.chat-page .message-row.own .message-bubble { border-color:rgba(34,160,96,.13); color:#173d2b; background:#d9f6e2; box-shadow:0 2px 8px rgba(40,105,72,.1); }
.chat-page .message-author { color:#257ba3; }
.chat-page .message-meta,.chat-page .message-row.own .message-meta { color:#718899; }
.chat-page .message-receipt.read { color:#1688b8; }
.chat-page .message-reply { border-color:#3c94bd; color:#274c62; background:rgba(226,240,247,.72); }
.chat-page .message-reaction { border-color:rgba(38,88,125,.16); color:#2c5269; background:#f5fafc; }
.chat-page .message-reaction.active { border-color:rgba(34,160,96,.4); background:#d9f3e4; }
.chat-page .message-pending-dot { border-color:rgba(44,94,120,.28); border-top-color:#2f789e; }
.message-actions-menu { position:relative; align-self:center; flex:0 0 auto; }
.message-actions-menu > summary { width:27px; height:27px; display:grid; place-items:center; border:0; border-radius:50%; color:#688397; background:rgba(248,251,252,.82); box-shadow:0 2px 8px rgba(31,70,95,.1); cursor:pointer; list-style:none; opacity:0; transition:opacity .15s,background .15s; }
.message-actions-menu > summary::-webkit-details-marker { display:none; }
.message-row:hover .message-actions-menu > summary,.message-actions-menu[open] > summary,.message-actions-menu > summary:focus-visible { opacity:1; }
.message-actions-menu > summary svg { width:16px; }
.message-actions-popover { position:absolute; z-index:12; inset:auto 0 calc(100% + 5px) auto; display:flex; gap:3px; padding:5px; border:1px solid rgba(38,88,125,.14); border-radius:12px; background:#fff; box-shadow:0 12px 28px rgba(28,67,91,.18); }
.message-row:not(.own) .message-actions-popover { inset:auto auto calc(100% + 5px) 0; }
.chat-page .message-action { color:#56778c; background:#edf4f7; box-shadow:none; }
.chat-page .message-action:hover { color:#1f6289; background:#dcebf2; }
.chat-page .reply-strip { border-color:rgba(38,88,125,.12); color:#21465f; background:#f4f8fa; }
.chat-page .composer-wrap { border-color:rgba(38,88,125,.13); background:#f6f9fa; box-shadow:0 -8px 24px rgba(34,73,98,.08); }
.chat-page .composer { background:transparent; }
.chat-page .composer .icon-btn { color:#5c7a8d; }
.chat-page .composer .icon-btn:hover { color:#245f88; background:#e4edf2; }
.chat-page .composer-input { border-color:rgba(38,88,125,.13); color:#17384f; background:#fff; box-shadow:inset 0 1px rgba(255,255,255,.5); }
.chat-page .composer-input::placeholder { color:#7d929f; }
.chat-page .composer-input:focus { border-color:rgba(46,117,159,.45); box-shadow:0 0 0 3px rgba(46,117,159,.09); }
.chat-page .composer .composer-send,.chat-page .composer .composer-voice { color:#fff; background:#249a60!important; box-shadow:0 7px 17px rgba(34,143,89,.22); }
.chat-page .composer-accessory { border-color:rgba(38,88,125,.15); color:#24475e; background:#edf4f7; }
.chat-page .emoji-picker { border-color:rgba(38,88,125,.18); color:#193b51; background:#fff; box-shadow:0 22px 55px rgba(28,67,91,.2); }
.chat-page .voice-message { border-color:rgba(34,160,96,.15); color:#173d2b; background:#d0f0db; }
.chat-page .voice-message__toggle { color:#fff; background:#259c61; box-shadow:0 6px 14px rgba(34,143,89,.2); }
.chat-page .voice-message__waveform i { background:linear-gradient(180deg,#67b98a,#278d5a); }
.chat-page .voice-message.is-playing .voice-message__waveform i { background:linear-gradient(180deg,#2e9b68,#176f48); }
.chat-page .voice-message__meta,.chat-page .voice-message__meta time { color:#567665; }
.chat-page .voice-message__meta button { border-color:rgba(34,117,73,.18); color:#316b4e; background:rgba(255,255,255,.45); }
.chat-page .voice-message__waveform input::-webkit-slider-thumb { border-color:#fff; background:#22975d; }
.chat-page .voice-message__waveform input::-moz-range-thumb { border-color:#fff; background:#22975d; }
.chat-page .chat-empty { background:radial-gradient(circle at 50% 47%,rgba(56,125,163,.1),transparent 24rem); }
.chat-page .chat-empty__icon { border-color:rgba(46,117,159,.2); color:#2e759f; background:#dbeaf2; box-shadow:0 18px 45px rgba(39,83,108,.13); }
.chat-page .chat-empty__icon i { border-color:#e8eef2; }
.chat-page .chat-empty h2 { color:#17384f; }
.chat-page .chat-empty p { color:#6c8495; }
.chat-page .chat-empty__features span { border-color:rgba(38,88,125,.13); color:#5b7789; background:rgba(248,251,252,.72); }
.chat-page .chat-empty__features svg,.chat-page .panel-empty svg { color:#3b88ad; }
.chat-page .panel-empty { color:#6b8393; }
.chat-page .modal:not(.chat-incoming-modal) { background:rgba(34,70,92,.4); }
.chat-page .modal:not(.chat-incoming-modal) .modal-card { border-color:rgba(38,88,125,.2); color:#183a50; background:#f8fbfc; box-shadow:0 30px 80px rgba(26,63,86,.3); }
.chat-page .modal:not(.chat-incoming-modal) .modal-header,.chat-page .modal:not(.chat-incoming-modal) .modal-footer { border-color:rgba(38,88,125,.13); }
.chat-page .modal:not(.chat-incoming-modal) .input { border-color:rgba(38,88,125,.18); color:#183a50; background:#fff; }

/* The call stays visually connected to chat, while video itself remains dominant. */
.chat-page .chat-call-layer { background:rgba(34,70,92,.52); backdrop-filter:blur(10px); }
.chat-page .chat-call-stage { border-color:rgba(220,240,239,.28); background:radial-gradient(circle at 50% 30%,#315f5c,#111f24 70%); box-shadow:0 34px 95px rgba(13,35,42,.5); }
.chat-page .chat-call-stage .video-tile { background:#1a2d31; }
.chat-page .chat-call-stage .video-tile__placeholder { background:radial-gradient(circle,#4a7e78,#182a2e 72%); }
.chat-page .chat-call-stage .call-controls { border-color:rgba(255,255,255,.16); background:rgba(17,27,31,.86); box-shadow:0 17px 45px rgba(0,0,0,.3); }
.chat-page .chat-call-stage .call-control { color:#f3fbfa; background:rgba(255,255,255,.1); }
.chat-page .chat-call-stage .call-control:hover { background:rgba(255,255,255,.18); }
.chat-page .chat-call-stage .call-control.off { color:#fff; background:#be5662; }
.chat-page .chat-call-stage .call-control.active { color:#fff; background:#249a60; }
.chat-page .chat-call-stage .call-control.end { color:#fff; background:#df3f4c; }
.chat-page .chat-call-minimize { color:#f2fbfa; border-color:rgba(255,255,255,.22); background:rgba(17,27,31,.72); }

@media (max-width:760px) {
  .chat-page .message-list { padding:14px 9px 12px; }
  .chat-page .message-bubble,.chat-page .message-row.own .message-bubble { max-width:84%; }
  .message-actions-menu > summary { opacity:.72; background:rgba(248,251,252,.92); }
  .chat-page .chat-main-header { min-height:64px; padding-inline:9px; }
  .chat-page .chat-live-pill { display:none; }
  .chat-page .chat-header-actions { gap:0; }
  .chat-page .chat-header-actions .icon-btn { width:36px; height:36px; flex-basis:36px; }
  .chat-page .composer { gap:2px; padding-inline:6px; }
  .chat-page .composer .icon-btn { width:38px; flex-basis:38px; }
  .chat-page .composer-input { border-radius:22px; }
}

/* v2.1 — exchange data stays navy-branded without becoming a dark wall. */
.exchange-page {
  color-scheme:light;
  --muted:#668195;
  --muted-strong:#284c65;
  --line:rgba(38,88,125,.17);
  --line-strong:rgba(38,88,125,.28);
  background:linear-gradient(145deg,#d9e7ef,#cbdde7 52%,#e4edf2);
  color:#17384f;
}
.exchange-page .sidebar { border-color:rgba(229,244,253,.22); background:linear-gradient(180deg,#2c668f,#255979); }
.exchange-page .topbar { border-color:rgba(232,245,253,.2); background:rgba(45,102,143,.96); }
.exchange-page .page { width:min(1700px,100%); }
.exchange-page .exchange-dashboard { --exchange-deep:#2d6a92; --exchange-blue:#2e83b4; --exchange-soft:rgba(46,117,159,.08); }
.exchange-page .exchange-hero { border-color:rgba(255,255,255,.4); background:linear-gradient(135deg,#4d91b8 0%,#3b7fa8 54%,#5ba0c1 100%); box-shadow:0 23px 55px rgba(36,80,108,.22); }
.exchange-page .exchange-live { border-color:rgba(227,255,237,.35); color:#f1fff6; background:rgba(20,116,72,.28); }
.exchange-page .exchange-refresh-button { border-color:rgba(255,255,255,.34); color:#fff; background:rgba(33,91,124,.3); }
.exchange-page .exchange-refresh-button:hover { border-color:rgba(255,255,255,.58); background:rgba(31,83,114,.48); }
.exchange-page .exchange-eyebrow { color:#e5f4ff; }
.exchange-page .exchange-hero__copy p { color:#f0f8fc; }
.exchange-page .exchange-snapshot { border-color:rgba(255,255,255,.32); background:rgba(36,91,124,.28); }
.exchange-page .exchange-snapshot > span,.exchange-page .exchange-snapshot__stats small { color:#dcecf5; }
.exchange-page .exchange-meta-card { border-color:rgba(255,255,255,.26); background:rgba(35,88,119,.22); }
.exchange-page .exchange-meta-card small { color:#dcebf4; }
.exchange-page .exchange-source-details { color:#e6f2f8; }
.exchange-page .exchange-rates-panel,.exchange-page .exchange-converter-panel { border-color:rgba(38,88,125,.18); color:#17384f; background:#f8fbfc; box-shadow:0 16px 38px rgba(32,74,100,.14); }
.exchange-page .exchange-panel-header .panel-title h2,.exchange-page .exchange-converter-heading h2 { color:#17384f; }
.exchange-page .exchange-panel-header .panel-title p,.exchange-page .exchange-converter-heading p { color:#698294; }
.exchange-page .exchange-section-icon { border-color:rgba(46,117,159,.16); color:#2e759f; background:#e1edf4; }
.exchange-page .exchange-search { border-color:rgba(38,88,125,.14); color:#678195; background:#eaf1f5; }
.exchange-page .exchange-search:focus-within { border-color:rgba(46,117,159,.45); background:#fff; box-shadow:0 0 0 3px rgba(46,117,159,.09); }
.exchange-page .exchange-search input { color:#17384f; }
.exchange-page .exchange-search input::placeholder { color:#728999; }
.exchange-page .exchange-search input::-webkit-search-cancel-button { filter:none; }
.exchange-page .exchange-list-summary { color:#698294; }
.exchange-page .exchange-list-summary strong { color:#244d67; }
.exchange-page .exchange-rate-table-wrap { border-color:rgba(38,88,125,.12); }
.exchange-page .rate-table th { border-color:rgba(38,88,125,.12); color:#5b7688; background:#edf4f7; }
.exchange-page .rate-table td { border-color:rgba(38,88,125,.1); color:#24465d; }
.exchange-page .rate-table tbody tr:hover { background:#edf5f8; }
.exchange-page .currency-flag { border-color:rgba(46,117,159,.14); color:#2d678b; background:#e4eff5; box-shadow:none; }
.exchange-page .currency-cell span { color:#6c8393; }
.exchange-page .rate-value { color:#193d54; }
.exchange-page .rate-change { color:#14784b; background:#dcf3e6; }
.exchange-page .rate-change.down { color:#ad3747; background:#f8e1e5; }
.exchange-page .rate-change.flat { color:#5e7585; background:#e6eef2; }
.exchange-page .rate-source .badge { border-color:rgba(38,88,125,.14); color:#3c6076; background:#ebf2f5; }
.exchange-page .exchange-rate-card { border-color:rgba(38,88,125,.14); color:#17384f; background:#fff; box-shadow:0 5px 16px rgba(31,70,94,.08); }
.exchange-page .exchange-rate-card__head small,.exchange-page .exchange-rate-card__foot { color:#6c8393; }
.exchange-page .exchange-rate-card__values > span { background:#edf4f7; }
.exchange-page .exchange-rate-card__values small { color:#647f91; }
.exchange-page .exchange-rate-card__values strong { color:#17384f; }
.exchange-page .exchange-rate-empty { border-color:rgba(38,88,125,.11); color:#698294; }
.exchange-page .converter-field { border-color:rgba(38,88,125,.14); background:#edf4f7; }
.exchange-page .converter-field label { color:#526f82; }
.exchange-page .converter-row .input,.exchange-page .converter-row .select { border-color:rgba(38,88,125,.16); color:#17384f; background:#fff; }
.exchange-page .converter-row .input[readonly] { color:#244f68; }
.exchange-page .converter-quick-amounts button { border-color:rgba(38,88,125,.13); color:#4e6e82; background:#f8fbfc; }
.exchange-page .converter-quick-amounts button:hover,.exchange-page .converter-quick-amounts button.active { border-color:rgba(46,117,159,.4); color:#225f85; background:#dcecf4; }
.exchange-page .converter-swap { border-color:#f8fbfc; background:linear-gradient(135deg,#4192bb,#2a7199); box-shadow:0 8px 20px rgba(35,87,119,.22); }
.exchange-page .converter-result { border-color:rgba(46,117,159,.17); background:linear-gradient(135deg,#dcebf4,#edf5f8); box-shadow:none; }
.exchange-page .converter-result span { color:#637e90; }
.exchange-page .converter-result strong { color:#1d587d; }
.exchange-page .converter-security { color:#637e90; }
.exchange-page .converter-security svg { color:#27845b; }
.exchange-page .exchange-dashboard .exchange-notice { border-color:rgba(38,88,125,.16); color:#294e65; background:#eef5f8; }
.exchange-page .exchange-dashboard .exchange-notice--warning { border-color:rgba(194,133,25,.25); color:#6f531f; background:#fff3d8; }
.exchange-page .exchange-disclaimer { border-color:rgba(38,88,125,.16); color:#294e65; background:#edf4f7; }
.exchange-page .exchange-disclaimer__icon { color:#2d759f; background:#dcebf3; }
.exchange-page .exchange-disclaimer div > span { color:#657f90; }
.tv-remote-hint { display:flex; align-items:center; gap:7px; margin:9px 1px 0; color:#d7e8f3; font-size:.62rem; line-height:1.45; }
.tv-remote-hint svg { width:15px; height:15px; flex:0 0 15px; color:#f4d45e; }
.tv-page .channel-item:focus-visible { outline:3px solid rgba(255,224,100,.78); outline-offset:2px; }

/* v2.2 — internal news cards replace the old lower dashboard widgets. */
.dashboard-panel--wide,.dashboard-news { grid-column:1/-1; }
.dashboard-news { scroll-margin-top:92px; padding:clamp(18px,2.5vw,30px); border:1px solid rgba(226,241,251,.25); border-radius:24px; background:linear-gradient(145deg,rgba(54,104,137,.96),rgba(43,87,119,.98)); box-shadow:0 18px 44px rgba(15,46,68,.2); }
.dashboard-news__header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.dashboard-news__header h2 { margin:4px 0 5px; color:#fff; font-size:clamp(1.28rem,2vw,1.75rem); }
.dashboard-news__header p { margin:0; color:#d7e7f1; font-size:.76rem; }
.dashboard-news__eyebrow { color:#ffe277; font-size:.63rem; font-weight:850; letter-spacing:.13em; }
.dashboard-news__status { margin:13px 2px 0; color:#c9dce8; font-size:.62rem; }
.portal-news-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.portal-news-card { position:relative; min-height:210px; display:flex; flex-direction:column; overflow:hidden; padding:18px; border:1px solid rgba(226,241,251,.22); border-radius:19px; color:#edf7fb; background:linear-gradient(150deg,#346d92,#295a7c); box-shadow:0 11px 27px rgba(18,54,78,.18); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.portal-news-card::after { content:""; position:absolute; width:130px; height:130px; inset:-74px -48px auto auto; border-radius:50%; background:rgba(255,255,255,.07); }
.portal-news-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,.48); box-shadow:0 17px 36px rgba(17,50,73,.25); }
.portal-news-card.provider-ava { background:linear-gradient(150deg,#476f8b,#345b78); }
.portal-news-card.provider-rudaw { background:linear-gradient(150deg,#376f92,#225574); }
.portal-news-card.provider-nrt { background:linear-gradient(150deg,#4d6685,#314b6a); }
.portal-news-card__top,.portal-news-card__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.portal-news-card__top { position:relative; z-index:1; color:#cfe0eb; font-size:.61rem; }
.portal-news-card__source { padding:5px 8px; border-radius:8px; color:#132e42; background:#ffe279; font-size:.62rem; font-weight:900; letter-spacing:.08em; }
.provider-ava .portal-news-card__source { color:#fff; background:#bd3d4d; }
.provider-nrt .portal-news-card__source { color:#fff; background:#ca3348; }
.portal-news-card h2 { position:relative; z-index:1; margin:18px 0 9px; color:#fff; font-size:clamp(.85rem,1.15vw,1.04rem); line-height:1.62; }
.portal-news-card p { position:relative; z-index:1; display:-webkit-box; overflow:hidden; margin:0 0 14px; color:#d7e7f0; font-size:.68rem; line-height:1.65; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.portal-news-card__foot { position:relative; z-index:1; margin-top:auto; color:#c9dde9; font-size:.6rem; }
.portal-news-card__foot svg { width:17px; }
[dir="rtl"] .portal-news-card__foot svg { transform:rotate(180deg); }
.dashboard-news-empty { grid-column:1/-1; min-height:180px; display:grid; place-items:center; align-content:center; gap:8px; border:1px dashed rgba(225,241,251,.24); border-radius:18px; color:#dcebf4; text-align:center; }
.dashboard-news-empty svg { width:30px; }
.dashboard-news-empty span { color:#c7d9e5; font-size:.68rem; }

/* News listing and attributed in-portal article summaries. */
.news-page { color-scheme:light; background:linear-gradient(145deg,#c7d8e1,#aec5d2 50%,#d7e3e9); color:#17384f; }
.news-page .sidebar,.money-transfer-page .sidebar { background:linear-gradient(180deg,#2c668f,#255979); }
.news-page .topbar,.money-transfer-page .topbar { background:rgba(45,102,143,.96); }
.news-page-header { padding:clamp(20px,3vw,34px); border:1px solid rgba(38,88,125,.17); border-radius:24px; background:rgba(225,236,242,.83); box-shadow:0 16px 38px rgba(28,70,96,.13); }
.news-page .portal-news-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; }
.news-page-empty { min-height:360px; border:1px solid rgba(38,88,125,.16); border-radius:22px; background:rgba(225,236,242,.84); }
.portal-news-article { width:min(920px,100%); margin:0 auto; overflow:hidden; border:1px solid rgba(38,88,125,.18); border-radius:28px; background:#dfe9ee; box-shadow:0 25px 65px rgba(25,64,88,.2); }
.portal-news-back { display:inline-flex; align-items:center; gap:7px; margin:20px 24px 0; color:#2b668a; font-size:.72rem; font-weight:750; text-decoration:none; }
.portal-news-back svg { width:17px; }
[dir="rtl"] .portal-news-back svg { transform:rotate(180deg); }
.portal-news-article__header { padding:clamp(24px,5vw,52px); }
.portal-news-category { display:inline-flex; padding:6px 10px; border-radius:99px; color:#275e80; background:#c8dce7; font-size:.62rem; font-weight:800; }
.portal-news-article h1 { margin:18px 0 13px; color:#17384f; font-size:clamp(1.65rem,4vw,3rem); line-height:1.45; letter-spacing:-.025em; }
.portal-news-article__header time { color:#668093; font-size:.68rem; }
.portal-news-article__image { width:100%; max-height:520px; object-fit:cover; background:#b8ccd6; }
.portal-news-article__body { padding:clamp(24px,5vw,52px); border-top:1px solid rgba(38,88,125,.12); background:#e8eff2; }
.portal-news-article__body h2 { margin:0 0 18px; color:#245a7b; font-size:1.05rem; }
.portal-news-article__body p { margin:0 0 17px; color:#294d63; font-size:.91rem; line-height:2; }
.portal-news-article__body .portal-news-pending { padding:15px 17px; border:1px solid rgba(183,125,25,.2); border-radius:14px; color:#72551e; background:#fff2d4; font-size:.72rem; }

/* Reviewable money-transfer service — no card or banking secrets are collected. */
.money-transfer-page { color-scheme:light; background:linear-gradient(145deg,#c8dae3,#b1c9d5 52%,#dce6eb); color:#17384f; }
.transfer-page-header { align-items:center; padding:clamp(21px,3.5vw,40px); border:1px solid rgba(255,255,255,.35); border-radius:26px; color:#fff; background:linear-gradient(135deg,#397b9f,#2f678a 58%,#4b8bac); box-shadow:0 20px 50px rgba(32,75,101,.22); }
.transfer-page-header .page-kicker,.transfer-page-header .page-subtitle { color:#deedf4; }
.transfer-hero-icon { width:82px; height:82px; display:grid; place-items:center; flex:0 0 82px; border:1px solid rgba(255,255,255,.24); border-radius:25px; color:#fff; background:rgba(255,255,255,.11); }
.transfer-hero-icon svg { width:35px; height:35px; }
.money-transfer-page .flash { margin-top:16px; }
.transfer-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:20px; margin-top:20px; align-items:start; }
.money-transfer-page .panel { border-color:rgba(38,88,125,.18); color:#17384f; background:#e3ecef; box-shadow:0 16px 38px rgba(31,72,96,.13); }
.money-transfer-page .panel-title h2 { color:#17384f; }
.money-transfer-page .panel-title p { color:#688194; }
.transfer-form { display:grid; gap:15px; padding:20px; }
.transfer-field-grid,.transfer-amount-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.transfer-amount-row { grid-template-columns:minmax(0,1fr) 150px; }
.transfer-form .form-group { display:grid; gap:7px; color:#3b6077; font-size:.69rem; font-weight:750; }
.transfer-form .input,.transfer-form .select { min-height:48px; border-color:rgba(38,88,125,.17); color:#17384f; background:#f3f7f8; }
.transfer-form textarea.input { min-height:92px; resize:vertical; }
.transfer-security { display:flex; gap:11px; padding:14px; border:1px solid rgba(29,128,83,.18); border-radius:15px; color:#3a6954; background:#d6e9df; font-size:.67rem; line-height:1.65; }
.transfer-security svg { width:20px; flex:0 0 20px; color:#27845b; }
.transfer-security strong { display:block; margin-bottom:2px; color:#286047; }
.transfer-submit { min-height:50px; justify-content:center; background:linear-gradient(135deg,#278b5a,#1d7349); }
.transfer-history { display:grid; gap:11px; padding:0 18px 18px; }
.transfer-request { padding:15px; border:1px solid rgba(38,88,125,.15); border-inline-start:4px solid #2e759f; border-radius:16px; background:#d6e3e8; }
.transfer-request.status-completed { border-inline-start-color:#25875a; }
.transfer-request.status-rejected,.transfer-request.status-cancelled { border-inline-start-color:#b44b57; }
.transfer-request__top,.transfer-request__amount,.transfer-request__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.transfer-reference { color:#587488; font-size:.62rem; font-weight:800; }
.transfer-status { padding:5px 8px; border-radius:99px; color:#225d80; background:#c2d9e5; font-size:.58rem; font-weight:850; }
.transfer-request__amount { margin:15px 0; justify-content:flex-start; }
.transfer-request__amount strong { color:#17384f; font-size:1.45rem; }
.transfer-request__amount span { color:#2c6687; font-weight:800; }
.transfer-request__meta { align-items:flex-start; color:#688194; font-size:.62rem; line-height:1.65; }
.transfer-request__meta > span { display:grid; }
.transfer-request__meta b { color:#294f67; }
.transfer-request__meta time { display:block; }
.transfer-request > p { color:#536f81; font-size:.66rem; }
.transfer-request form { margin-top:10px; }
.transfer-upgrade { min-height:350px; margin-top:20px; border:1px solid rgba(38,88,125,.16); border-radius:22px; background:#e3ecef; }

/* v2.4 — provider-first Iraqi payments, with checkout kept on official domains. */
.transfer-provider-section { margin-top:20px; padding:clamp(18px,2.5vw,28px); border:1px solid rgba(39,91,124,.16); border-radius:24px; background:rgba(234,241,244,.78); box-shadow:0 15px 36px rgba(33,76,100,.11); }
.transfer-section-heading h2 { margin:5px 0 18px; color:#17384f; font-size:clamp(1rem,2vw,1.35rem); }
.transfer-provider-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.transfer-provider-card { min-width:0; display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:11px; padding:14px; border:1px solid rgba(39,91,124,.14); border-radius:17px; color:#234b64; background:#f5f8f9; text-decoration:none; box-shadow:0 7px 20px rgba(32,75,99,.08); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.transfer-provider-card:hover { transform:translateY(-3px); border-color:var(--provider-accent); box-shadow:0 12px 26px rgba(32,75,99,.13); }
.transfer-provider-card__mark { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:#fff; background:var(--provider-accent); font-size:.72rem; font-weight:950; letter-spacing:.04em; }
.transfer-provider-card > span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.transfer-provider-card strong { overflow:hidden; color:#17384f; font-size:.79rem; text-overflow:ellipsis; white-space:nowrap; }
.transfer-provider-card small { overflow:hidden; color:#6b8291; font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }
.transfer-provider-card > svg { width:18px; color:#7690a0; }
[dir="rtl"] .transfer-provider-card > svg { transform:rotate(180deg); }
.transfer-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.transfer-steps article { min-width:0; display:flex; align-items:center; gap:11px; padding:15px; border:1px solid rgba(39,91,124,.13); border-radius:17px; color:#2f5d76; background:rgba(228,238,242,.78); }
.transfer-steps article > svg { width:23px; flex:0 0 23px; color:#2d7d9d; }
.transfer-steps article > span { min-width:0; display:grid; gap:3px; }
.transfer-steps strong { color:#234b64; font-size:.7rem; }
.transfer-steps small { color:#6d8391; font-size:.57rem; line-height:1.55; }
.transfer-provider-picker { min-width:0; margin:0; padding:0; border:0; }
.transfer-provider-picker legend { margin-bottom:8px; color:#3b6077; font-size:.69rem; font-weight:750; }
.transfer-provider-picker > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.transfer-provider-picker label { min-width:0; cursor:pointer; }
.transfer-provider-picker input { position:absolute; opacity:0; pointer-events:none; }
.transfer-provider-picker label > span { min-height:62px; display:flex; align-items:center; gap:8px; padding:9px; border:1px solid rgba(38,88,125,.16); border-radius:14px; background:#f3f7f8; transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
.transfer-provider-picker label > span b { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:11px; color:#fff; background:var(--provider-accent); font-size:.61rem; }
.transfer-provider-picker label > span small { min-width:0; overflow:hidden; color:#496b80; font-size:.59rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.transfer-provider-picker input:checked + span { border-color:var(--provider-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--provider-accent) 16%,transparent); transform:translateY(-1px); }
.transfer-provider-picker input:focus-visible + span { outline:3px solid rgba(45,125,157,.24); outline-offset:2px; }
.transfer-request { border-inline-start-color:var(--provider-accent,#2e759f); }
.transfer-request.status-awaiting_payment { background:#e7e3d2; }
.transfer-request.status-processing,.transfer-request.status-approved { background:#d8e6eb; }
.transfer-request__provider { display:flex; align-items:center; gap:8px; margin-top:12px; color:#496b80; font-size:.65rem; }
.transfer-request__provider b { min-width:34px; padding:6px 8px; border-radius:9px; color:#fff; background:var(--provider-accent,#2e759f); text-align:center; font-size:.57rem; }
.transfer-payment-ready { display:grid; gap:7px; margin-top:13px; padding:12px; border:1px solid rgba(32,128,78,.18); border-radius:14px; background:#d2e9dc; }
.transfer-payment-ready .btn { justify-content:center; background:linear-gradient(135deg,#278b5a,#1d7349); }
.transfer-payment-ready small { color:#3a6954; font-size:.57rem; line-height:1.55; }

/* v2.2 — balanced messenger colors and stable, equal-width tabs. */
.chat-page {
  --chat-bg:#b8ccd6;
  --chat-panel:#d3e1e7;
  --chat-panel-raised:#c8d9e0;
  --chat-surface:#e7eef1;
  --chat-surface-hover:#c8dbe4;
  --chat-line:rgba(31,75,103,.18);
  --chat-line-strong:rgba(31,75,103,.3);
  --chat-text:#17384f;
  --chat-muted:#5f7b8e;
  background:linear-gradient(145deg,#b9ced9,#a9c2cf 50%,#c5d7df);
  color:#17384f;
}
.chat-page .chat-shell { border-color:rgba(30,73,101,.25); background:#c8d7de; box-shadow:0 24px 65px rgba(20,59,84,.23); }
.chat-page .chat-list-pane { border-color:rgba(31,75,103,.18); background:linear-gradient(180deg,#d6e3e8,#c9d9e0 62%,#bfd2db); }
.chat-page .chat-list-title h1,.chat-page .conversation-top strong { color:#16364c; }
.chat-page .chat-list-heading small,.chat-page .conversation-preview,.chat-page .conversation-time { color:#5f7a8c; }
.chat-page .chat-list-tools .icon-btn { border-color:rgba(31,75,103,.18); color:#315f7c; background:#bfd3dc; }
.chat-page .chat-list-tools .chat-new-button { color:#fff; background:#2e759f; }
.chat-page .chat-search { border-color:rgba(31,75,103,.17); color:#557488; background:#c2d4dc; }
.chat-page .chat-search:focus-within { border-color:rgba(40,104,142,.48); background:#dce8ed; }
.chat-page .chat-search input { color:#17384f; }
.chat-page .chat-search input::placeholder { color:#648092; }
.chat-page .chat-list-pane > .chat-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; padding:0 16px 13px; }
.chat-page .chat-list-pane > .chat-tabs .chat-tab { min-width:0; min-height:40px; justify-content:center; overflow:hidden; padding:8px 5px; border:1px solid rgba(31,75,103,.14); border-radius:12px; color:#43677d; background:#c4d6de; font-size:.68rem; text-overflow:ellipsis; }
.chat-page .chat-list-pane > .chat-tabs .chat-tab:hover { color:#214f6b; background:#b7cfda; }
.chat-page .chat-list-pane > .chat-tabs .chat-tab.active { color:#fff; border-color:#2d6f95; background:linear-gradient(145deg,#3b82a8,#2b668d); box-shadow:0 6px 14px rgba(35,84,115,.2); }
.chat-page .conversation { color:#17384f; }
.chat-page .conversation:hover { background:#bfd3dc; }
.chat-page .conversation.active { border-color:rgba(38,104,143,.25); background:linear-gradient(100deg,#b5d3e1,#c8dce5); }
.chat-page .chat-main-pane { background-color:#b9cbd2; background-image:radial-gradient(circle at 16px 16px,rgba(44,85,107,.07) 0 1.2px,transparent 1.5px),linear-gradient(rgba(214,225,230,.22),rgba(177,197,205,.18)); }
.chat-page .chat-main-header { border-color:rgba(31,75,103,.17); background:rgba(207,223,230,.97); }
.chat-page .chat-contact strong { color:#16364c; }
.chat-page .chat-contact span { color:#5c788b; }
.chat-page .chat-header-actions .icon-btn { color:#456b82; }
.chat-page .chat-header-actions .icon-btn:hover { color:#214f6b; background:#bdd2dc; }
.chat-page .chat-live-pill { color:#176f49; background:#bfe1ce; }
.chat-page .message-date { color:#496a7d; background:rgba(213,226,232,.92); }
.chat-page .message-bubble { border-color:rgba(31,75,103,.12); color:#17384f; background:#e3ebee; box-shadow:0 2px 8px rgba(28,67,91,.12); }
.chat-page .message-row.own .message-bubble { border-color:rgba(32,126,76,.17); color:#173d2b; background:#b9e2c7; }
.chat-page .message-author { color:#226c94; }
.chat-page .message-meta,.chat-page .message-row.own .message-meta { color:#597586; }
.chat-page .message-reply { color:#294f65; background:#cadde5; }
.message-actions-menu > summary { color:#527185; background:#d9e5e9; }
.message-actions-popover { border-color:rgba(31,75,103,.17); background:#dce7eb; }
.chat-page .message-action { color:#4b6c80; background:#c7d8df; }
.chat-page .reply-strip { color:#24485f; background:#c9d9df; }
.chat-page .composer-wrap { border-color:rgba(31,75,103,.18); background:#c7d7dd; }
.chat-page .composer-input { border-color:rgba(31,75,103,.17); color:#17384f; background:#e3ebee; }
.chat-page .composer-input::placeholder { color:#648092; }
.chat-page .composer .icon-btn { color:#4f7185; }
.chat-page .composer .icon-btn:hover { color:#245b7b; background:#b7ccd6; }
.chat-page .emoji-picker { color:#17384f; background:#dbe6ea; }
.chat-page .voice-message { color:#173d2b; background:#b5ddc3; }
.chat-page .chat-empty { background:radial-gradient(circle at 50% 47%,rgba(37,102,138,.11),transparent 24rem); }
.chat-page .chat-empty h2 { color:#17384f; }
.chat-page .chat-empty p { color:#5f798b; }
.chat-page .chat-empty__features span { color:#4e6e80; background:rgba(211,225,231,.76); }

@media (max-width:1100px) {
  .portal-news-grid,.news-page .portal-news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .transfer-layout { grid-template-columns:1fr; }
  .transfer-provider-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .dashboard-news { padding:17px; border-radius:20px; }
  .dashboard-news__header { align-items:flex-start; }
  .dashboard-news__header .btn { font-size:0; }
  .portal-news-grid,.news-page .portal-news-grid { grid-template-columns:1fr; }
  .portal-news-card { min-height:185px; }
  .news-page .portal-news-grid { margin-top:13px; }
  .portal-news-article { border-radius:0; }
  .transfer-page-header { align-items:flex-start; }
  .transfer-hero-icon { width:58px; height:58px; flex-basis:58px; border-radius:18px; }
  .transfer-field-grid,.transfer-amount-row { grid-template-columns:1fr; }
  .transfer-provider-grid,.transfer-steps { grid-template-columns:1fr; }
  .transfer-provider-picker > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chat-page .chat-list-pane > .chat-tabs { gap:5px; padding-inline:10px; }
  .chat-page .chat-list-pane > .chat-tabs .chat-tab { min-height:42px; padding-inline:3px; font-size:.61rem; }
  .chat-page .chat-list-pane > .chat-tabs .chat-tab svg { width:13px; }
}

/* v2.5 — calculator and locally playable games replace money transfers. */
.calculator-page,.games-page { color-scheme:light; color:#17384f; background:linear-gradient(145deg,#c7d9e2,#b4ccd7 52%,#dce7eb); }
.calculator-page .sidebar,.games-page .sidebar { background:linear-gradient(180deg,#2c668f,#255979); }
.calculator-page .topbar,.games-page .topbar { background:rgba(45,102,143,.96); }
.calculator-page-header,.games-page-header { align-items:center; padding:clamp(22px,3.5vw,40px); border:1px solid rgba(255,255,255,.38); border-radius:26px; color:#fff; background:linear-gradient(135deg,#397b9f,#2f678a 58%,#4b8bac); box-shadow:0 20px 50px rgba(32,75,101,.2); }
.calculator-page-header .page-kicker,.calculator-page-header .page-subtitle,.games-page-header .page-kicker,.games-page-header .page-subtitle { color:#e3f0f6; }
.calculator-hero-icon,.games-hero-icon { width:82px; height:82px; display:grid; place-items:center; flex:0 0 82px; border:1px solid rgba(255,255,255,.25); border-radius:25px; color:#fff; background:rgba(255,255,255,.12); }
.calculator-hero-icon svg,.games-hero-icon svg { width:36px; height:36px; }
.calculator-layout { display:grid; grid-template-columns:minmax(320px,560px) minmax(270px,1fr); gap:20px; align-items:start; max-width:1080px; margin:20px auto 0; }
.calculator-shell { overflow:hidden; border:1px solid rgba(39,91,124,.18); border-radius:28px; background:#edf3f5; box-shadow:0 22px 55px rgba(31,72,96,.2); }
.calculator-display { min-height:170px; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; overflow:hidden; padding:26px; color:#fff; background:linear-gradient(145deg,#285f84,#1f4f74); }
.calculator-expression { width:100%; overflow:hidden; color:#cce0ec; font-size:1rem; text-align:end; text-overflow:ellipsis; white-space:nowrap; }
.calculator-result { width:100%; overflow:hidden; margin-top:10px; font-size:clamp(2.5rem,7vw,4.6rem); line-height:1; text-align:end; text-overflow:ellipsis; white-space:nowrap; }
.calculator-keys { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:15px; }
.calculator-key { min-height:68px; border:1px solid rgba(38,88,125,.14); border-radius:18px; color:#17384f; background:#f8fbfc; box-shadow:0 5px 13px rgba(31,72,96,.07); font:inherit; font-size:1.15rem; font-weight:800; line-height:1; cursor:pointer; transition:transform .12s ease,background .12s ease,box-shadow .12s ease; }
.calculator-key:hover,.calculator-key:focus-visible { transform:translateY(-2px); background:#fff; box-shadow:0 8px 18px rgba(31,72,96,.13); }
.calculator-key:active { transform:translateY(1px); }
.calculator-key.is-command { color:#2e6685; background:#dce9ef; }
.calculator-key.is-operator { color:#fff; background:#3d7ea4; }
.calculator-key.is-equals { color:#fff; background:linear-gradient(145deg,#2b9162,#247a52); }
.calculator-history { overflow:hidden; border-color:rgba(38,88,125,.17); background:#e7eef1; box-shadow:0 16px 38px rgba(31,72,96,.13); }
.calculator-history__header { align-items:center; }
.calculator-history__list { display:grid; gap:8px; padding:0 18px 18px; }
.calculator-history__list > p { min-height:170px; display:grid; place-items:center; margin:0; color:#6a8291; font-size:.72rem; text-align:center; }
.calculator-history__list button { display:grid; gap:4px; padding:13px; border:1px solid rgba(38,88,125,.13); border-radius:14px; color:#597486; background:#f4f8f9; text-align:end; cursor:pointer; }
.calculator-history__list button:hover { border-color:rgba(38,88,125,.34); background:#fff; }
.calculator-history__list span { overflow:hidden; font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.calculator-history__list strong { color:#1e5878; font-size:1rem; }

.games-app { display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; margin-top:20px; align-items:start; }
.game-picker { display:grid; gap:10px; position:sticky; top:90px; }
.game-choice { min-width:0; display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:13px; padding:14px; border:1px solid rgba(38,88,125,.15); border-radius:18px; color:#345d75; background:rgba(238,244,246,.88); text-align:start; cursor:pointer; box-shadow:0 8px 20px rgba(31,72,96,.08); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.game-choice:hover,.game-choice.active { transform:translateY(-2px); border-color:rgba(45,112,151,.46); background:#fff; }
.game-choice.active { box-shadow:inset 4px 0 #2f7ca5,0 12px 25px rgba(31,72,96,.13); }
[dir="rtl"] .game-choice.active { box-shadow:inset -4px 0 #2f7ca5,0 12px 25px rgba(31,72,96,.13); }
.game-choice__icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(145deg,#4389ae,#2d6b91); font-size:1rem; font-weight:900; }
.game-choice > span:last-child { min-width:0; display:grid; gap:4px; }
.game-choice strong { color:#17384f; font-size:.78rem; }
.game-choice small { color:#6a8291; font-size:.58rem; line-height:1.55; }
.game-stage { min-height:590px; padding:clamp(18px,3vw,30px); border:1px solid rgba(38,88,125,.17); border-radius:26px; background:#eaf1f3; box-shadow:0 20px 48px rgba(31,72,96,.16); animation:game-stage-in .25s ease-out both; }
@keyframes game-stage-in { from { opacity:0; transform:translateY(8px); } }
.game-stage__header { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:20px; }
.game-stage__header > div { display:grid; gap:4px; }
.game-stage__header span { color:#668093; font-size:.65rem; }
.game-stage__header strong { color:#17384f; font-size:1rem; }
.xo-score { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:520px; margin:0 auto 16px; }
.xo-score span { display:grid; gap:4px; padding:10px; border:1px solid rgba(38,88,125,.13); border-radius:13px; color:#617d8e; background:#dce9ee; font-size:.61rem; text-align:center; }
.xo-score b { color:#245e80; font-size:1.05rem; }
.xo-board { width:min(520px,100%); aspect-ratio:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:auto; }
.xo-board button { border:1px solid rgba(38,88,125,.16); border-radius:20px; color:#2e759d; background:#f8fbfc; box-shadow:0 7px 18px rgba(31,72,96,.09); font:inherit; font-size:clamp(2.2rem,8vw,4.8rem); font-weight:900; line-height:1; cursor:pointer; transition:transform .13s ease,background .13s ease; }
.xo-board button[data-mark="O"] { color:#de8c2a; }
.xo-board button:not(:disabled):hover { transform:scale(1.025); background:#fff; }
.xo-board button.winner { color:#fff; background:linear-gradient(145deg,#2e9566,#257a54); }
.memory-board { width:min(650px,100%); display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin:auto; }
.memory-board button { position:relative; aspect-ratio:1; border:1px solid rgba(38,88,125,.17); border-radius:18px; color:#fff; background:linear-gradient(145deg,#397da4,#2a648b); box-shadow:0 8px 20px rgba(31,72,96,.13); font-size:clamp(1.3rem,4vw,2.3rem); cursor:pointer; transform-style:preserve-3d; transition:transform .25s ease,background .2s ease; }
.memory-board button span,.memory-board button strong { position:absolute; inset:0; display:grid; place-items:center; backface-visibility:hidden; }
.memory-board button strong { transform:rotateY(180deg); }
.memory-board button.open { transform:rotateY(180deg); background:#fff; color:#2e6c92; }
.memory-board button.matched { color:#247950; background:#cfe9da; box-shadow:none; }
.reaction-field { width:100%; min-height:470px; display:grid; place-items:center; align-content:center; gap:13px; padding:30px; border:0; border-radius:24px; color:#fff; background:linear-gradient(145deg,#397b9f,#2b6489); cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.15); transition:background .18s ease,transform .12s ease; }
.reaction-field:active { transform:scale(.992); }
.reaction-field[data-state="waiting"] { background:linear-gradient(145deg,#b27a2f,#8c5c21); }
.reaction-field[data-state="ready"] { background:linear-gradient(145deg,#2b9b64,#1f784d); }
.reaction-field[data-state="early"] { background:linear-gradient(145deg,#b94d5a,#8c3441); }
.reaction-symbol { font-size:3.5rem; }
.reaction-field strong { font-size:clamp(1.7rem,4vw,3.2rem); }
.reaction-field small { color:rgba(255,255,255,.82); font-size:.76rem; }

@media (max-width:900px) {
  .calculator-layout,.games-app { grid-template-columns:1fr; }
  .calculator-layout { max-width:620px; }
  .game-picker { position:static; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .game-choice { grid-template-columns:1fr; text-align:center; }
  .game-choice__icon { margin:auto; }
}
@media (max-width:600px) {
  .calculator-page-header,.games-page-header { align-items:flex-start; }
  .calculator-hero-icon,.games-hero-icon { width:58px; height:58px; flex-basis:58px; border-radius:18px; }
  .calculator-display { min-height:135px; padding:20px; }
  .calculator-key { min-height:58px; border-radius:15px; }
  .game-picker { display:flex; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .game-choice { min-width:150px; }
  .game-choice small { display:none; }
  .game-stage { min-height:500px; padding:15px; border-radius:21px; }
  .game-stage__header { align-items:flex-start; }
  .game-stage__header .btn { font-size:0; }
  .game-stage__header .btn svg { width:18px; }
  .xo-board,.memory-board { gap:7px; }
  .xo-board button,.memory-board button { border-radius:14px; }
  .reaction-field { min-height:390px; }
}

/* v2.6 — full Backgammon and Draw Dominoes. */
.games-app-pro { grid-template-columns:270px minmax(0,1fr); }
.games-app-pro .game-picker { grid-template-columns:1fr; }
.games-app-pro .game-stage { min-height:680px; }
.game-choice__icon--board { background:linear-gradient(145deg,#9d653c,#6f4329); }
.game-choice__icon--domino { background:linear-gradient(145deg,#315f7d,#1f425c); font-size:.7rem; letter-spacing:-.08em; }
.game-stage__actions { display:flex !important; grid-auto-flow:column; gap:8px !important; }
.game-stage__actions .btn { white-space:nowrap; }
.board-score-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0 0 14px; }
.board-score-row > span { min-height:58px; display:flex; align-items:center; justify-content:center; gap:9px; padding:9px 13px; border:1px solid rgba(38,88,125,.14); border-radius:15px; color:#56768a; background:#dce9ee; }
.board-score-row small { font-size:.61rem; }
.board-score-row b { color:#1f5f82; font-size:1.1rem; }
.bg-dice-box { flex-direction:column; gap:4px !important; }
.bg-dice-box b { display:flex; gap:5px; }
.bg-dice-box i { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; color:#17384f; background:#fff; box-shadow:0 3px 8px rgba(31,72,96,.12); font-style:normal; font-size:.8rem; }
.backgammon-board { position:relative; min-width:650px; min-height:530px; overflow:hidden; padding:16px 72px 16px 16px; border:9px solid #74482d; border-radius:18px; background:linear-gradient(135deg,#c28b55,#a66f41); box-shadow:inset 0 0 0 2px rgba(255,255,255,.19),0 18px 38px rgba(76,44,24,.2); }
[dir="rtl"] .backgammon-board { padding:16px 16px 16px 72px; }
.backgammon-points { min-height:480px; display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); grid-template-rows:1fr 1fr; position:relative; border:1px solid rgba(77,40,19,.38); background:#d8a36d; }
.bg-point { position:relative; z-index:2; grid-column:var(--bg-column); min-width:0; display:flex; flex-direction:column; align-items:center; gap:0; padding:5px 2px; border:0; background:transparent; cursor:pointer; }
.bg-point--top { grid-row:1; justify-content:flex-start; }
.bg-point--bottom { grid-row:2; justify-content:flex-end; }
.bg-point::before { content:""; position:absolute; z-index:-1; inset:0 3px; opacity:.94; }
.bg-point--top::before { clip-path:polygon(0 0,100% 0,50% 92%); background:#e6c08d; }
.bg-point--bottom::before { clip-path:polygon(50% 8%,100% 100%,0 100%); background:#e6c08d; }
.bg-point:nth-child(even)::before { background:#7b3e2e; }
.bg-point.is-source::after,.bg-point.is-destination::after { content:""; position:absolute; inset:3px; border:3px solid #36b87a; border-radius:8px; box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 18px rgba(54,184,122,.5); }
.bg-point.is-selected::after { border-color:#ffd35e; box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 20px rgba(255,211,94,.6); }
.bg-point:disabled { cursor:default; }
.bg-checker { width:clamp(24px,3.2vw,34px); height:clamp(24px,3.2vw,34px); display:block; flex:0 0 auto; margin-top:-3px; border-radius:50%; box-shadow:inset 0 2px 3px rgba(255,255,255,.65),0 2px 4px rgba(49,28,17,.4); }
.bg-point--top .bg-checker:first-child,.bg-point--bottom .bg-checker:last-of-type { margin-top:0; }
.bg-checker.human { border:2px solid #d6e6ec; background:linear-gradient(145deg,#f9fcfd,#bdd5df); }
.bg-checker.computer { border:2px solid #172f42; background:linear-gradient(145deg,#315f7c,#17384f); }
.bg-checker-count { position:relative; z-index:3; min-width:24px; padding:2px 5px; border-radius:99px; color:#fff; background:#17384f; font-size:.55rem; }
.bg-grid-bar { grid-column:7; grid-row:1; background:#704127; }
.bg-grid-bar--bottom { grid-row:2; }
.bg-bar { position:absolute; z-index:5; width:7.2%; inset:16px auto 16px 46.4%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:4px; border:0; color:#f7e4cf; background:linear-gradient(90deg,#63371f,#7e4b2d,#63371f); cursor:pointer; }
.bg-bar small { font-size:.52rem; font-weight:800; writing-mode:vertical-rl; }
.bg-bar span { display:grid; gap:2px; }
.bg-bar.is-source,.bg-bar.is-selected { box-shadow:inset 0 0 0 4px #ffd35e; }
.bg-off { position:absolute; width:54px; inset-inline-end:7px; display:grid; place-items:center; align-content:center; gap:5px; padding:5px; border:1px solid rgba(80,43,21,.35); border-radius:10px; color:#e7eff3; background:#294f68; }
.bg-off--computer { top:16px; bottom:51%; }
.bg-off--human { top:51%; bottom:16px; color:#244d65; background:#e5eef1; cursor:pointer; }
.bg-off b { font-size:1.2rem; }
.bg-off small { font-size:.48rem; text-align:center; }
.bg-off.is-destination { box-shadow:0 0 0 4px #36b87a,0 0 18px rgba(54,184,122,.55); }
.game-help { margin:13px 0 0; color:#587589; font-size:.67rem; text-align:center; }
.game-stage--backgammon { overflow-x:auto; }

.game-stage--dominoes { background:linear-gradient(145deg,#dfeaed,#edf3f4); }
.domino-table { min-height:530px; display:flex; flex-direction:column; gap:14px; padding:18px; border:1px solid rgba(21,75,61,.2); border-radius:22px; background:radial-gradient(circle at 50% 45%,rgba(54,151,110,.3),transparent 58%),linear-gradient(145deg,#287e61,#1d654f); box-shadow:inset 0 1px rgba(255,255,255,.18); }
.domino-opponent { display:flex; align-items:center; gap:10px; color:#e8fff6; }
.domino-opponent .avatar { background:#183f35; }
.domino-opponent > span:last-child { display:grid; gap:2px; }
.domino-opponent strong { font-size:.72rem; }
.domino-opponent small { color:#b8e2d1; font-size:.56rem; }
.domino-chain-wrap { min-height:210px; display:flex; align-items:center; overflow-x:auto; padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(12,60,47,.32); scrollbar-width:thin; }
.domino-chain { min-width:100%; display:flex; justify-content:center; align-items:center; gap:3px; }
.domino-chain-empty { margin:auto; color:rgba(255,255,255,.34); font-size:2.7rem; }
.domino-tile { width:46px; height:82px; display:grid; grid-template-rows:1fr 2px 1fr; flex:0 0 46px; overflow:hidden; padding:4px; border:1px solid #aebfc5; border-radius:8px; color:#17384f; background:linear-gradient(145deg,#fff,#dae5e8); box-shadow:0 4px 8px rgba(8,39,31,.25); }
button.domino-tile { font:inherit; cursor:pointer; transition:transform .14s ease,box-shadow .14s ease; }
button.domino-tile:hover,button.domino-tile.playable { transform:translateY(-6px); box-shadow:0 10px 15px rgba(8,39,31,.3),0 0 0 2px #73dcae; }
button.domino-tile.selected { transform:translateY(-10px); box-shadow:0 12px 18px rgba(8,39,31,.34),0 0 0 3px #ffd45f; }
button.domino-tile.disabled { opacity:.7; cursor:default; }
.domino-tile > b { background:#9fb1b7; }
.domino-pips { display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); place-items:center; }
.domino-pips i { width:5px; height:5px; border-radius:50%; background:#17384f; }
.domino-pips i[style*="--pip:1"] { grid-area:1/1; }.domino-pips i[style*="--pip:3"] { grid-area:1/3; }
.domino-pips i[style*="--pip:4"] { grid-area:2/1; }.domino-pips i[style*="--pip:5"] { grid-area:2/2; }.domino-pips i[style*="--pip:6"] { grid-area:2/3; }
.domino-pips i[style*="--pip:7"] { grid-area:3/1; }.domino-pips i[style*="--pip:9"] { grid-area:3/3; }
.domino-side-picker { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:9px; border-radius:14px; color:#fff; background:rgba(11,55,44,.55); }
.domino-side-picker[hidden] { display:none; }
.domino-side-picker span { width:100%; font-size:.6rem; text-align:center; }
.domino-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.domino-controls small { color:#b8e2d1; font-size:.56rem; }
.domino-hand-label { color:#e8fff6; font-size:.62rem; font-weight:800; }
.domino-hand { min-height:96px; display:flex; align-items:flex-end; justify-content:center; gap:7px; overflow-x:auto; padding:8px 5px 3px; }

@media (max-width:900px) {
  .games-app-pro { grid-template-columns:1fr; }
  .games-app-pro .game-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .games-app-pro .game-choice { grid-template-columns:54px minmax(0,1fr); text-align:start; }
  .games-app-pro .game-choice__icon { margin:0; }
}
@media (max-width:650px) {
  .games-app-pro .game-picker { display:flex; }
  .games-app-pro .game-choice { min-width:190px; grid-template-columns:48px minmax(0,1fr); }
  .games-app-pro .game-choice small { display:block; }
  .games-app-pro .game-stage { min-height:620px; }
  .game-stage__header { flex-direction:column; }
  .game-stage__header .game-stage__actions { width:100%; display:flex !important; }
  .game-stage__header .game-stage__actions .btn { flex:1; font-size:.58rem; }
  .backgammon-board { min-width:610px; min-height:500px; }
  .backgammon-points { min-height:450px; }
  .domino-table { padding:12px; }
  .domino-chain { justify-content:flex-start; }
  .domino-controls { align-items:flex-start; flex-direction:column; }
  .domino-hand { justify-content:flex-start; }
}

/* v2.6 — professional scientific calculator. */
.calculator-layout--pro { grid-template-columns:minmax(500px,720px) minmax(270px,1fr); max-width:1260px; }
.calculator-shell--pro { position:relative; }
.calculator-modebar { min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:8px 16px; border-bottom:1px solid rgba(255,255,255,.11); color:#bcd5e4; background:#204f70; font-size:.6rem; }
.calculator-modebar button { padding:5px 10px; border:1px solid rgba(255,255,255,.2); border-radius:99px; color:#fff; background:rgba(255,255,255,.1); font:inherit; font-weight:900; cursor:pointer; }
.calculator-shell--pro .calculator-display { min-height:145px; padding-top:18px; }
.calculator-result-row { width:100%; display:flex; align-items:center; gap:10px; }
.calculator-copy { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border:1px solid rgba(255,255,255,.17); border-radius:11px; color:#d5e7f0; background:rgba(255,255,255,.08); cursor:pointer; }
.calculator-copy svg { width:17px; }
.calculator-copy:hover { color:#fff; background:rgba(255,255,255,.15); }
.calculator-keys--scientific { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.calculator-keys--scientific .calculator-key { min-height:56px; border-radius:14px; font-size:.83rem; }
.calculator-key.is-science { color:#245d7d; background:#e3edf1; }
.calculator-key.is-memory { color:#744f17; background:#f6e9c9; }
.calculator-key--zero { grid-column:span 2; }
.calculator-key--equals { grid-column:span 3; }
.calculator-history__list button small { color:#7590a0; font-size:.52rem; }

@media (max-width:1020px) {
  .calculator-layout--pro { grid-template-columns:1fr; max-width:720px; }
}
@media (max-width:620px) {
  .calculator-layout--pro { width:calc(100% + 8px); margin-inline:-4px; }
  .calculator-shell--pro { border-radius:20px; }
  .calculator-keys--scientific { gap:5px; padding:9px; }
  .calculator-keys--scientific .calculator-key { min-height:51px; border-radius:11px; font-size:.7rem; }
  .calculator-shell--pro .calculator-display { min-height:125px; }
  .calculator-shell--pro .calculator-result { font-size:clamp(2rem,11vw,3.2rem); }
}

/* v2.6 — visual three-source news desk and full internal reader. */
.news-page-header { align-items:center; padding:clamp(23px,4vw,42px); border:1px solid rgba(255,255,255,.4); border-radius:26px; color:#fff; background:linear-gradient(135deg,#397da2,#2a668e 62%,#4a8fb2); box-shadow:0 18px 45px rgba(31,72,96,.19); }
.news-page-header .page-kicker,.news-page-header .page-subtitle { color:#e0eef5; }
.news-refresh-button { flex:0 0 auto; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.14); }
.news-refresh-button.is-loading svg { animation:news-spin .8s linear infinite; }
@keyframes news-spin { to { transform:rotate(360deg); } }
.news-source-tabs { display:flex; gap:8px; overflow-x:auto; margin:16px 0 4px; padding:4px; scrollbar-width:none; }
.news-source-tabs a { min-width:78px; padding:9px 16px; border:1px solid rgba(38,88,125,.16); border-radius:99px; color:#557387; background:rgba(239,245,247,.78); font-size:.66rem; font-weight:850; text-align:center; text-decoration:none; transition:.15s ease; }
.news-source-tabs a:hover,.news-source-tabs a.active { transform:translateY(-1px); color:#fff; background:#2f7399; box-shadow:0 8px 18px rgba(34,81,110,.18); }
.news-source-tabs .provider-ava.active { background:#ad3a4a; }.news-source-tabs .provider-nrt.active { background:#c02f46; }.news-source-tabs .provider-rudaw.active { color:#18384e; background:#f1ca45; }
.news-refresh-status { margin:8px 4px 0; color:#577487; font-size:.62rem; }
.portal-news-card { min-height:330px; display:grid; grid-template-rows:170px 1fr; overflow:hidden; padding:0; border-color:rgba(38,88,125,.16); color:#17384f; background:#eef4f6; box-shadow:0 13px 30px rgba(31,72,96,.14); }
.portal-news-card::after { display:none; }
.portal-news-card:hover { border-color:rgba(42,111,151,.46); box-shadow:0 19px 38px rgba(31,72,96,.22); }
.portal-news-card.provider-ava,.portal-news-card.provider-rudaw,.portal-news-card.provider-nrt { background:#eef4f6; }
.portal-news-card__media { position:relative; min-height:0; display:grid; place-items:center; overflow:hidden; color:rgba(255,255,255,.88); background:linear-gradient(145deg,#326f95,#234f70); font-size:2rem; font-weight:950; letter-spacing:.08em; }
.provider-ava .portal-news-card__media { background:linear-gradient(145deg,#b64755,#80323f); }.provider-nrt .portal-news-card__media { background:linear-gradient(145deg,#c74052,#8f2638); }.provider-rudaw .portal-news-card__media { color:#17384f; background:linear-gradient(145deg,#f5dc70,#d3a92a); }
.portal-news-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.portal-news-card:hover .portal-news-card__media img { transform:scale(1.035); }
.portal-news-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,34,49,.05),rgba(12,34,49,.64)); pointer-events:none; }
.portal-news-card__top { position:absolute; z-index:2; inset:12px 12px auto; color:#f1f7fa; text-shadow:0 1px 5px rgba(0,0,0,.35); }
.portal-news-card__source { color:#17384f; background:#f5d85d; box-shadow:0 5px 14px rgba(0,0,0,.14); }
.portal-news-card__content { min-width:0; display:flex; flex-direction:column; padding:16px; }
.portal-news-card__content h2 { margin:0 0 8px; color:#17384f; font-size:clamp(.82rem,1.1vw,1rem); line-height:1.58; }
.portal-news-card__content p { margin:0 0 13px; color:#617b8c; font-size:.65rem; line-height:1.7; -webkit-line-clamp:2; }
.portal-news-card__foot { margin-top:auto; color:#668193; }
.portal-news-card__foot > span { display:flex; align-items:center; gap:4px; color:#2b698f; font-weight:750; }
.portal-news-card__foot svg { width:15px; height:15px; }

.portal-news-article { overflow:visible; background:#edf3f5; }
.portal-news-article__header { position:relative; overflow:hidden; border-radius:0; }
.portal-news-article__header.has-image { min-height:440px; display:flex; align-items:flex-end; padding:0; }
.portal-news-article__hero { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portal-news-article__shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,29,42,.08),rgba(10,29,42,.88)); }
.portal-news-article__headline { position:relative; z-index:2; width:100%; padding:clamp(24px,5vw,52px); }
.portal-news-article__header.has-image h1 { max-width:790px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.32); }
.portal-news-article__header.has-image time { color:#d8e8f0; }
.portal-news-article__header.has-image .portal-news-category { color:#fff; background:rgba(255,255,255,.17); backdrop-filter:blur(8px); }
.portal-news-article__body { max-width:none; padding-inline:clamp(24px,9vw,110px); }
.portal-news-article__body > p { max-width:760px; margin-inline:auto; font-size:clamp(.88rem,1.5vw,1.02rem); line-height:2.05; }
.portal-news-article__body > h2 { max-width:760px; margin-inline:auto; }
.portal-news-article__body > h2 { margin-bottom:22px; }

@media (max-width:700px) {
  .news-page-header { align-items:flex-start; }
  .news-refresh-button { width:100%; justify-content:center; }
  .portal-news-card { min-height:300px; grid-template-rows:145px 1fr; }
  .portal-news-article__header.has-image { min-height:360px; }
  .portal-news-article__headline { padding:22px; }
  .portal-news-article__body { padding:24px 20px; }
}

/* v2.6 — WhatsApp-inspired messenger: dense list, calm canvas and readable bubbles. */
.chat-page {
  --chat-bg:#d8e5e9;
  --chat-panel:#edf3f5;
  --chat-panel-raised:#f5f8f9;
  --chat-surface:#e1eaee;
  --chat-surface-hover:#d6e5eb;
  --chat-line:rgba(36,82,110,.13);
  --chat-line-strong:rgba(36,82,110,.22);
  --chat-text:#17384f;
  --chat-muted:#6c8595;
  --chat-accent:#2e7da5;
  --chat-accent-strong:#22668e;
  --chat-green:#28a56c;
  background:linear-gradient(145deg,#2e688e,#245978);
}
.chat-page .topbar { background:rgba(43,98,135,.96); }
.chat-page .chat-shell { border-color:rgba(255,255,255,.34); background:#dbe7ea; box-shadow:0 28px 70px rgba(16,47,68,.28); }
.chat-page .chat-list-pane { border-color:rgba(40,85,111,.17); background:linear-gradient(180deg,#f2f6f7,#e8f0f3); }
.chat-page .chat-list-header { padding:16px 16px 11px; background:rgba(242,247,248,.95); }
.chat-list-heading__icon { border-color:rgba(48,119,158,.2); color:#fff; background:linear-gradient(145deg,#3d88ad,#2b6c94); box-shadow:0 8px 18px rgba(35,83,112,.16); }
.chat-page .chat-list-title h1 { color:#17384f; }
.chat-list-heading small { color:#6a8494; }
.chat-list-tools .icon-btn { border-color:rgba(36,82,110,.13); color:#356a87; background:#e2ecef; }
.chat-list-tools .chat-new-button { color:#fff; border-color:#2e799f; background:#2e799f; }
.chat-search { height:43px; border-color:transparent; color:#668292; background:#dce8ec; }
.chat-search:focus-within { border-color:rgba(47,126,166,.45); background:#fff; box-shadow:0 0 0 3px rgba(47,126,166,.09); }
.chat-search input { color:#17384f; }
.chat-search input::placeholder { color:#748d9c; }
.chat-search input::-webkit-search-cancel-button { filter:none; }
.chat-search kbd { border-color:rgba(36,82,110,.13); color:#6e8796; background:rgba(255,255,255,.46); }
.chat-page .chat-tabs { gap:7px; padding:0 15px 10px; border-bottom:1px solid rgba(36,82,110,.09); background:rgba(242,247,248,.95); }
.chat-page .chat-tab { min-height:32px; border:1px solid rgba(36,82,110,.1); border-radius:99px; color:#5e7c8f; background:#e4edf0; }
.chat-page .chat-tab:hover { color:#286b92; background:#d7e7ed; }
.chat-page .chat-tab.active { color:#fff; border-color:#2c7399; background:#2c7399; box-shadow:0 5px 12px rgba(34,91,124,.17); }
.chat-page .conversation-list { padding:0 8px 14px; background:#edf3f5; scrollbar-color:rgba(57,103,130,.22) transparent; }
.chat-page .conversation { min-height:76px; gap:12px; margin:0; padding:10px 9px; border:0; border-bottom:1px solid rgba(41,85,111,.1); border-radius:0; background:transparent; }
.chat-page .conversation:hover { border-color:rgba(41,85,111,.1); background:#e2ecef; }
.chat-page .conversation.active { border-color:rgba(41,85,111,.1); border-radius:12px; background:#d6e8ef; box-shadow:inset 4px 0 #2f83aa; }
[dir="rtl"] .chat-page .conversation.active { box-shadow:inset -4px 0 #2f83aa; }
.chat-page .conversation.has-unread { background:rgba(217,236,229,.55); }
.chat-page .conversation.has-unread.active { background:#d2e8e3; }
.chat-page .conversation .avatar { width:54px; height:54px; flex-basis:54px; border:2px solid rgba(255,255,255,.82); background:linear-gradient(145deg,#4c9ac0,#286b97); box-shadow:0 4px 12px rgba(32,76,102,.16); font-size:.9rem; }
.chat-page .conversation .presence { width:13px; height:13px; border:3px solid #edf3f5; }
.chat-page .conversation-top strong { color:#17384f; font-size:.78rem; }
.chat-page .conversation.has-unread .conversation-top strong { font-weight:900; }
.chat-page .conversation-time { color:#718a98; font-size:.56rem; }
.chat-page .conversation.has-unread .conversation-time { color:#21885a; font-weight:800; }
.chat-page .conversation-preview { margin-top:5px; color:#6c8391; font-size:.65rem; }
.chat-page .conversation-preview > span:first-child { display:flex; align-items:center; min-width:0; gap:4px; }
.conversation-receipt { display:inline-grid; flex:0 0 15px; color:#2b91bc; }
.conversation-receipt svg { width:15px; height:15px; }
.chat-page .conversation-unread { min-width:20px; height:20px; color:#fff; background:#27a66c !important; box-shadow:0 3px 8px rgba(23,129,81,.2); }
.chat-list-skeleton i,.chat-list-skeleton b,.chat-list-skeleton small { background:rgba(57,103,130,.1); }

.chat-page .chat-main-pane { background-color:#d8e5e8; background-image:radial-gradient(circle at 17px 17px,rgba(41,93,120,.055) 0 1.5px,transparent 1.8px),linear-gradient(rgba(237,244,246,.18),rgba(216,229,233,.12)); background-size:38px 38px,100% 100%; }
.chat-page .chat-main-header { border-color:rgba(255,255,255,.14); background:linear-gradient(100deg,#2d6688,#285b7b); box-shadow:0 7px 22px rgba(24,65,88,.17); }
.chat-page .chat-main-header .avatar { border-color:rgba(255,255,255,.36); background:linear-gradient(145deg,#5ba7c8,#367ca3); }
.chat-page .chat-main-header .presence { border-color:#2b6385; }
.chat-page .chat-contact strong { color:#fff; }
.chat-page .chat-contact span { color:#c4dce8; }
.chat-page .chat-contact span.typing { color:#9cf0c8; }
.chat-page .chat-header-actions .icon-btn { color:#e0edf3; }
.chat-page .chat-header-actions .icon-btn:hover { color:#fff; background:rgba(255,255,255,.12); }
.chat-page .chat-live-pill { border-color:rgba(115,232,177,.25); color:#c8f3de; background:rgba(14,91,64,.32); }
.chat-page .message-date { color:#557285; border-color:rgba(36,82,110,.12); background:rgba(237,244,246,.9); box-shadow:0 3px 10px rgba(32,75,99,.08); }
.chat-page .message-bubble { border-color:rgba(36,82,110,.11); color:#17384f; background:#f8fbfc; box-shadow:0 3px 10px rgba(33,74,97,.12); }
.chat-page .message-row.own .message-bubble { border-color:rgba(48,133,88,.14); color:#173d32; background:linear-gradient(145deg,#dff3e5,#cfead9); }
.chat-page .message-author { color:#2378a1; }
.chat-page .message-meta,.chat-page .message-row.own .message-meta { color:#6d8794; }
.chat-page .message-receipt.read { color:#2191bd; }
.chat-page .message-action { color:#51768a; background:rgba(239,245,247,.95); box-shadow:0 3px 10px rgba(36,75,98,.12); }
.chat-page .message-action:hover { color:#fff; background:#2f7399; }
.chat-page .message-reply { border-color:#2f8caf; background:rgba(45,113,148,.08); }
.chat-page .message-reaction { border-color:rgba(47,115,153,.2); background:#e5eff2; }
.chat-page .message-reaction.active { border-color:#2d8aac; background:#d0e8ef; }
.chat-page .reply-strip { border-color:rgba(36,82,110,.14); color:#17384f; background:#dbe8ec; }
.chat-page .composer-wrap { border-color:rgba(36,82,110,.13); background:rgba(231,239,242,.98); box-shadow:0 -8px 25px rgba(31,72,96,.08); }
.chat-page .composer .icon-btn { color:#55788c; }
.chat-page .composer .icon-btn:hover { color:#236b92; background:#d5e5ea; }
.chat-page .composer-input { border-color:rgba(36,82,110,.12); color:#17384f; background:#fff; box-shadow:0 2px 8px rgba(31,72,96,.07); }
.chat-page .composer-input::placeholder { color:#78909d; }
.chat-page .composer-input:focus { border-color:rgba(47,126,166,.5); box-shadow:0 0 0 3px rgba(47,126,166,.09); }
.chat-page .composer .composer-send { background:linear-gradient(145deg,#2ea06b,#218257) !important; box-shadow:0 7px 17px rgba(30,126,82,.23); }
.chat-page .composer-accessory { color:#17384f; border-color:rgba(36,82,110,.15); background:#dce9ed; }
.chat-page .emoji-picker { color:#17384f; border-color:rgba(36,82,110,.17); background:#edf3f5; box-shadow:0 22px 55px rgba(31,72,96,.25); }
.chat-page .chat-empty { background:radial-gradient(circle at 50% 47%,rgba(47,126,166,.11),transparent 24rem); }
.chat-page .chat-empty__icon { border-color:rgba(47,126,166,.2); color:#fff; background:linear-gradient(145deg,#428db2,#2c6e96); box-shadow:0 18px 45px rgba(31,72,96,.18); }
.chat-page .chat-empty__icon i { border-color:#dce8eb; }
.chat-page .chat-empty h2 { color:#17384f; }
.chat-page .chat-empty p { color:#698391; }
.chat-empty__features span { color:#5d7c8e; border-color:rgba(36,82,110,.12); background:rgba(239,245,247,.74); }
.chat-empty__features svg { color:#2e7fa5; }
.chat-page .panel-empty { color:#6b8392; }
.chat-page .panel-empty svg { color:#3b89aa; }
.chat-page .voice-message__waveform i { background:linear-gradient(180deg,#77a8b8,#3d7f96); }
.chat-page .message-row.own .voice-message__waveform i { background:linear-gradient(180deg,#5fa17d,#2c7755); }

@media (max-width:760px) {
  .chat-page .chat-list-header,.chat-page .chat-tabs { background:#edf3f5; }
  .chat-page .conversation { min-height:74px; }
  .chat-page .chat-main-pane { background-color:#d8e5e8; }
}

/* v2.8 — sectioned television, premium games and a mixed-colour portal. */
.dashboard-page {
  --muted:#627383;
  --muted-strong:#263847;
  color:#263847;
  background:
    radial-gradient(circle at 91% 3%,rgba(205,168,76,.2),transparent 28rem),
    radial-gradient(circle at 4% 82%,rgba(75,145,116,.14),transparent 27rem),
    linear-gradient(145deg,#e7e2d9,#dce3df 52%,#eee9df);
}
.dashboard-page .sidebar { background:linear-gradient(180deg,#172f4a,#203d59 66%,#263b50); }
.dashboard-page .topbar { background:rgba(27,52,77,.95); }
.dashboard-page .panel { color:#263847; border-color:rgba(42,59,70,.11); background:rgba(249,247,241,.91); box-shadow:0 16px 38px rgba(38,47,52,.12); }
.dashboard-page .panel:hover { border-color:rgba(82,104,104,.23); box-shadow:0 20px 46px rgba(38,47,52,.16); }
.dashboard-page .panel-title h2,.dashboard-page .list-item__main strong { color:#263847; }
.dashboard-page .panel-title p,.dashboard-page .list-item__main span,.dashboard-page .list-item__side { color:#6a7985; }
.dashboard-hero { border-color:rgba(255,255,255,.17); background:linear-gradient(118deg,#172f4a 0%,#273d58 48%,#56384d 100%); box-shadow:0 26px 65px rgba(35,40,51,.25); }
.dashboard-hero::before { background:rgba(213,168,76,.25); }
.dashboard-hero__copy h1 span { color:#efcf85; }
.dashboard-hero__copy p { color:#dce3e7; }
.dashboard-hero__button { color:#243b50; background:#f1d995; }
.dashboard-hero__button:hover { color:#162d43; background:#ffe9ab; }
.dashboard-section-nav a { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.055); }
.dashboard-section-nav a:nth-child(1) > span:first-child { background:#467f6a; }
.dashboard-section-nav a:nth-child(2) > span:first-child { background:#a84958; }
.dashboard-section-nav a:nth-child(3) > span:first-child { background:#b8823d; }
.dashboard-section-nav a:nth-child(4) > span:first-child { background:#7d5e91; }
.dashboard-section-nav a:nth-child(5) > span:first-child { color:#263847; background:#e0bd61; }
.dashboard-section-nav a:hover { border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.12); }
.dashboard-metric { border-color:rgba(43,60,70,.1); background:rgba(251,249,244,.92); box-shadow:0 12px 28px rgba(40,47,51,.1); }
.dashboard-metric strong { color:#263847; }
.dashboard-metric small { color:#657581; }
.dashboard-metric__icon { color:#fff; background:var(--metric-accent); box-shadow:0 8px 20px color-mix(in srgb,var(--metric-accent) 28%,transparent); }
.dashboard-news { border-color:rgba(64,74,75,.12); background:linear-gradient(145deg,#eee7d9,#e7e5dd); box-shadow:0 18px 42px rgba(45,50,50,.13); }
.dashboard-news__header h2 { color:#273947; }
.dashboard-news__header p,.dashboard-news__status { color:#697983; }
.dashboard-news__eyebrow { color:#9f394a; }
.dashboard-news .btn-ghost { color:#283b49; border-color:rgba(39,57,69,.13); background:rgba(255,255,255,.42); }

.news-page { color:#2d3338; background:linear-gradient(145deg,#eee8dc,#dedfd8 52%,#f1ece3); }
.news-page .sidebar { background:linear-gradient(180deg,#172f4a,#253e56); }
.news-page .topbar { background:rgba(28,53,76,.95); }
.news-page-header { border-color:rgba(255,255,255,.2); background:linear-gradient(128deg,#552e42,#863949 60%,#c28c46); box-shadow:0 18px 46px rgba(75,43,48,.22); }
.news-page-header .page-kicker,.news-page-header .page-subtitle { color:#f1e5dd; }
.news-source-tabs a { color:#5e5a58; border-color:rgba(78,63,59,.13); background:rgba(250,247,240,.82); }
.news-source-tabs a:hover,.news-source-tabs a.active { background:#6b394b; }
.news-page .portal-news-card,.dashboard-news .portal-news-card { border-color:rgba(74,65,59,.12); background:#faf7ef; box-shadow:0 13px 29px rgba(65,55,49,.12); }
.news-page .portal-news-card.provider-ava,.news-page .portal-news-card.provider-rudaw,.news-page .portal-news-card.provider-nrt,
.dashboard-news .portal-news-card.provider-ava,.dashboard-news .portal-news-card.provider-rudaw,.dashboard-news .portal-news-card.provider-nrt { background:#faf7ef; }

.calculator-page { color:#243c38; background:linear-gradient(145deg,#d9e4dc,#e8e2d6 52%,#dfe8e0); }
.calculator-page .sidebar { background:linear-gradient(180deg,#173b3a,#294f49); }
.calculator-page .topbar { background:rgba(29,65,61,.95); }
.calculator-page-header { background:linear-gradient(132deg,#173f3b,#2e6b5a 62%,#b18443); box-shadow:0 20px 50px rgba(32,65,56,.2); }
.calculator-display { background:linear-gradient(145deg,#1b403d,#2a5b51); }
.calculator-modebar { background:#193b39; }
.calculator-key.is-operator { background:#3e806b; }
.calculator-key.is-memory { color:#71501c; background:#f2dfad; }

.chat-page { background:linear-gradient(145deg,#263c51,#52655d); }
.chat-page .topbar { background:rgba(31,55,75,.96); }
.chat-page .chat-main-header { background:linear-gradient(100deg,#244458,#2e6255); }
.chat-page .chat-tab.active { border-color:#2f7f68; background:#2f7f68; }
.chat-page .conversation.active { background:#d8e8e1; box-shadow:inset 4px 0 #2f8c70; }
[dir="rtl"] .chat-page .conversation.active { box-shadow:inset -4px 0 #2f8c70; }

.tv-page {
  --muted:#65727d;
  --muted-strong:#263847;
  color:#263847;
  background:
    radial-gradient(circle at 90% 0,rgba(209,169,72,.19),transparent 27rem),
    linear-gradient(145deg,#dddeda,#ebe6da 52%,#d8e2df);
}
.tv-page .sidebar { background:linear-gradient(180deg,#172f4a,#213e58); }
.tv-page .topbar { background:rgba(27,52,77,.96); }
.tv-page-header { padding:clamp(23px,3vw,38px); border:1px solid rgba(255,255,255,.17); border-radius:27px; color:#fff; background:linear-gradient(125deg,#172f4a,#273e58 65%,#9b7440); box-shadow:0 20px 50px rgba(34,42,49,.2); }
.tv-page-header .page-kicker,.tv-page-header .page-subtitle { color:#dce5e8; }
.tv-summary { border-color:rgba(255,255,255,.17); background:rgba(10,27,43,.24); }
.tv-layout--shelves { grid-template-columns:minmax(0,1fr); }
.tv-layout--shelves .tv-player-panel { width:min(1180px,100%); margin-inline:auto; color:#fff; border-color:rgba(29,48,59,.16); background:#1d3343; box-shadow:0 24px 58px rgba(31,39,45,.23); }
.tv-page .tv-player { background:radial-gradient(circle at 50% 44%,rgba(66,134,112,.16),transparent 25rem),#111e27; }
.tv-page .tv-now { background:linear-gradient(100deg,#223d4f,#2b504c); }
.tv-page .tv-trust-note { color:#dce7e6; border-color:rgba(210,176,92,.23); background:rgba(190,145,54,.09); }
.tv-page .tv-trust-note strong { color:#f4e2ad; }
.tv-page .tv-trust-note > svg { color:#e3c36c; }
.tv-page .channel-library { max-height:none; overflow:visible; color:#263847; border-color:rgba(54,66,70,.12); background:rgba(249,247,241,.94); box-shadow:0 18px 44px rgba(41,46,47,.13); }
.tv-page .channel-library:hover { border-color:rgba(54,66,70,.2); box-shadow:0 22px 50px rgba(41,46,47,.16); }
.channel-library .panel-header { padding:20px 22px 14px; border-color:rgba(55,70,77,.1); }
.channel-library .panel-title h2 { color:#263847; }
.channel-library .badge { color:#39564f; border-color:rgba(47,117,90,.15); background:#dcebe4; }
.channel-library .input-wrap { max-width:620px; }
.channel-library .input { color:#263847; border-color:rgba(48,65,73,.12); background:#ebece7; }
.channel-library .channel-filter { color:#5c6d75; border-color:rgba(49,65,72,.08); background:#ebece7; }
.channel-library .channel-filter:hover { color:#263847; border-color:rgba(49,65,72,.18); background:#f6f3ec; }
.channel-library .channel-filter.active { color:#fff; border-color:#385f57; background:#385f57; box-shadow:0 7px 18px rgba(39,83,73,.18); }
.channel-library .tv-remote-hint { color:#65747a; }
.channel-library .tv-remote-hint svg { color:#9b743a; }
.channel-shelves { display:grid; gap:24px; overflow:visible; padding:20px 22px 25px; }
.channel-shelf { min-width:0; content-visibility:auto; contain-intrinsic-size:auto 270px; }
.channel-shelf__header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:11px; }
.channel-shelf__header > div { min-width:0; display:flex; align-items:center; gap:10px; }
.channel-shelf__index { width:37px; height:37px; display:grid; place-items:center; flex:0 0 37px; border-radius:12px; color:#fff; background:var(--shelf-accent); font-size:.62rem; font-weight:900; box-shadow:0 7px 16px color-mix(in srgb,var(--shelf-accent) 24%,transparent); }
.channel-shelf__header > div > span:last-child { min-width:0; display:grid; gap:2px; }
.channel-shelf__header strong { overflow:hidden; color:#263847; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.channel-shelf__header small { color:#748087; font-size:.58rem; }
.channel-shelf__controls { display:flex; gap:6px; }
.channel-shelf__controls button { width:38px; height:38px; display:grid; place-items:center; border:1px solid rgba(47,61,66,.12); border-radius:12px; color:#3b4e56; background:#eeeae1; cursor:pointer; transition:transform .15s ease,background .15s ease; }
.channel-shelf__controls button:hover { transform:translateY(-2px); color:#fff; background:var(--shelf-accent); }
.channel-shelf__controls svg { width:17px; }
.channel-shelf__track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,225px); gap:12px; overflow-x:auto; padding:2px 2px 9px; scroll-behavior:smooth; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--shelf-accent) 38%,transparent) transparent; direction:ltr; }
.channel-card { min-width:0; display:grid; grid-template-rows:116px auto; overflow:hidden; padding:0; border:1px solid rgba(49,61,66,.11); border-radius:18px; color:#263847; background:#fffdf8; box-shadow:0 8px 20px rgba(42,47,48,.09); text-align:left; scroll-snap-align:start; cursor:pointer; transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease; direction:ltr; }
[dir="rtl"] .channel-card { direction:rtl; text-align:right; }
.channel-card:hover,.channel-card:focus-visible { transform:translateY(-4px); border-color:color-mix(in srgb,var(--channel-accent) 52%,white); box-shadow:0 14px 27px rgba(42,47,48,.15); outline:0; }
.channel-card.active { border-color:var(--channel-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--channel-accent) 18%,transparent),0 14px 28px rgba(42,47,48,.14); }
.channel-card.is-unavailable { opacity:.68; }
.channel-card__media { position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,color-mix(in srgb,var(--channel-accent) 20%,#f5f1e9),#ecebe5); }
.channel-card__media::after { content:""; position:absolute; width:100px; height:100px; inset:-52px -40px auto auto; border:22px solid color-mix(in srgb,var(--channel-accent) 13%,transparent); border-radius:50%; }
.channel-card__logo { position:relative; z-index:1; width:68px; height:68px; display:grid; place-items:center; overflow:hidden; padding:6px; border:1px solid rgba(255,255,255,.75); border-radius:20px; color:#fff; background:linear-gradient(145deg,var(--channel-accent),color-mix(in srgb,var(--channel-accent) 74%,#263847)); box-shadow:0 10px 24px color-mix(in srgb,var(--channel-accent) 26%,transparent); font-size:.82rem; font-weight:900; }
.channel-card__logo img { width:100%; height:100%; object-fit:contain; border-radius:12px; }
.channel-card__status { position:absolute; z-index:2; top:9px; left:9px; display:inline-flex; align-items:center; gap:5px; max-width:112px; overflow:hidden; padding:5px 7px; border-radius:8px; color:#fff; background:rgba(28,46,53,.8); font-size:.49rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; backdrop-filter:blur(7px); }
[dir="rtl"] .channel-card__status { right:9px; left:auto; }
.channel-card__status i { width:6px; height:6px; border-radius:50%; background:#53d587; box-shadow:0 0 0 3px rgba(83,213,135,.14); }
.channel-card__status.official { background:rgba(125,91,27,.85); }
.channel-card__status.unavailable { background:rgba(74,82,84,.72); }
.channel-card__media > b { position:absolute; z-index:2; right:9px; bottom:9px; padding:4px 6px; border-radius:7px; color:#263847; background:#f0d17a; font-size:.49rem; }
[dir="rtl"] .channel-card__media > b { right:auto; left:9px; }
.channel-card__content { min-width:0; display:grid; gap:4px; padding:12px; }
.channel-card__content strong,.channel-card__content span,.channel-card__content small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channel-card__content strong { color:#263847; font-size:.75rem; }
.channel-card__content span { color:#68777e; font-size:.58rem; }
.channel-card__content small { color:color-mix(in srgb,var(--channel-accent) 74%,#44535a); font-size:.52rem; font-weight:800; }

.games-page { color:#332f35; background:linear-gradient(145deg,#e7dfd4,#d8dfda 52%,#ece5dc); }
.games-page .sidebar { background:linear-gradient(180deg,#202f46,#34344b 66%,#493848); }
.games-page .topbar { background:rgba(35,48,68,.96); }
.games-page-header { background:linear-gradient(130deg,#2b3449,#5a3b50 60%,#b77c3d); box-shadow:0 20px 50px rgba(53,41,52,.22); }
.games-page-header .page-kicker,.games-page-header .page-subtitle { color:#eee3dc; }
.games-hero-icon { color:#ffe3a4; background:rgba(255,226,161,.12); }
.game-choice { color:#4f4a4d; border-color:rgba(66,54,55,.12); background:rgba(250,247,239,.86); box-shadow:0 8px 20px rgba(61,49,49,.09); }
.game-choice:hover,.game-choice.active { border-color:rgba(150,94,65,.42); background:#fffaf1; }
.game-choice.active { box-shadow:inset 4px 0 #b27343,0 12px 25px rgba(61,49,49,.13); }
[dir="rtl"] .game-choice.active { box-shadow:inset -4px 0 #b27343,0 12px 25px rgba(61,49,49,.13); }
.game-choice strong { color:#38333a; }
.game-choice small { color:#776f70; }
.game-choice__icon--board { background:radial-gradient(circle at 34% 28%,#efc887,#a35f3f 58%,#6d3640); box-shadow:inset 0 1px rgba(255,255,255,.35),0 9px 20px rgba(101,51,53,.2); }
.game-choice__icon--domino { background:linear-gradient(145deg,#384d51,#1e3036); box-shadow:inset 0 1px rgba(255,255,255,.22),0 9px 20px rgba(30,48,54,.2); }
.game-difficulty { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid rgba(72,56,57,.12); border-radius:18px; background:rgba(249,244,235,.82); box-shadow:0 8px 20px rgba(61,49,49,.07); }
.game-difficulty > span { display:grid; gap:3px; }
.game-difficulty small { color:#83736d; font-size:.55rem; }
.game-difficulty strong { color:#483943; font-size:.72rem; }
.game-difficulty select { min-height:38px; padding:7px 10px; border:1px solid rgba(91,65,64,.15); border-radius:11px; color:#fff; background:#614252; font:inherit; font-size:.62rem; font-weight:800; }
.game-stage { border-color:rgba(70,55,54,.12); background:#f6f1e8; box-shadow:0 20px 48px rgba(61,49,49,.14); }
.game-stage__header strong { color:#3b3438; }
.game-stage__header span { color:#7e7270; }
.board-score-row > span { color:#6f6261; border-color:rgba(81,60,58,.12); background:#ebe2d7; }
.board-score-row b { color:#5d3d49; }
.bg-dice-box i { color:#523f42; background:#fff9eb; box-shadow:inset 0 0 0 1px rgba(91,64,58,.12),0 5px 11px rgba(60,44,43,.14); animation:dice-arrive .24s ease-out; }
@keyframes dice-arrive { from { opacity:0; transform:translateY(-8px) rotate(-12deg) scale(.8); } }
.backgammon-board { border-color:#3b2630; background:linear-gradient(135deg,#5d3642,#342d3a); box-shadow:inset 0 0 0 2px rgba(255,225,172,.18),0 22px 46px rgba(58,36,44,.28); }
.backgammon-board::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.055) 45%,transparent 70%); animation:board-sheen 7s ease-in-out infinite; }
@keyframes board-sheen { 50% { transform:translateX(28%); } }
.backgammon-points { border-color:rgba(34,26,31,.65); background:linear-gradient(145deg,#c89568,#a66d59); }
.bg-point--top::before,.bg-point--bottom::before { background:#e9c596; }
.bg-point:nth-child(even)::before { background:#694052; }
.bg-grid-bar { background:#392731; }
.bg-bar { color:#f4d8ae; background:linear-gradient(90deg,#2b2029,#50303c,#2b2029); }
.bg-checker { animation:checker-arrive .18s ease-out both; }
@keyframes checker-arrive { from { opacity:.45; transform:scale(.75); } }
.bg-checker.human { border-color:#fff3d9; background:radial-gradient(circle at 34% 25%,#fffdf7,#e5c998 63%,#b49060); }
.bg-checker.computer { border-color:#38232d; background:radial-gradient(circle at 34% 25%,#8f5a68,#53313e 60%,#281d25); }
.bg-off--computer { color:#f1d7b2; background:#4b303c; }
.bg-off--human { color:#513b40; background:#efe0c7; }
.game-help { color:#756b68; }
.game-stage--dominoes { background:#f2eee5; }
.domino-table { border-color:rgba(24,73,60,.3); background:radial-gradient(circle at 50% 42%,rgba(109,184,139,.25),transparent 56%),linear-gradient(145deg,#285e50,#173f38); box-shadow:inset 0 1px rgba(255,255,255,.2),0 20px 38px rgba(31,67,57,.18); }
.domino-chain-wrap { background:rgba(8,38,32,.38); box-shadow:inset 0 8px 32px rgba(4,24,20,.18); }
.domino-tile { border-color:#d4c8b1; color:#30383b; background:linear-gradient(145deg,#fffdf3,#e8dcc4); box-shadow:inset 0 1px #fff,0 5px 10px rgba(6,34,28,.32); }
.domino-pips i { background:#42323a; }

@media (max-width:760px) {
  .channel-library .panel-header,.channel-shelves { padding-inline:13px; }
  .channel-shelves { gap:20px; }
  .channel-shelf__track { grid-auto-columns:minmax(164px,74vw); gap:10px; }
  .channel-card { grid-template-rows:105px auto; border-radius:16px; }
  .channel-shelf__controls button { width:36px; height:36px; }
  .tv-page-header { align-items:flex-start; }
  .tv-summary { width:100%; }
  .tv-summary span { min-width:0; flex:1; }
  .game-difficulty { min-width:188px; flex:0 0 188px; }
}

@media (prefers-reduced-motion:reduce) {
  .channel-shelf__track { scroll-behavior:auto; }
  .backgammon-board::after,.bg-dice-box i,.bg-checker { animation:none; }
}

/* v2.9 — high-contrast navigation, pro calculator, exchange desk and true mobile boards. */
.app-shell .topbar { color:#fff; border-color:rgba(255,255,255,.12); }
.app-shell .topbar-title strong { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.14); }
.app-shell .topbar-title span { color:#c9d8e2; }
.app-shell .topbar .icon-btn { color:#f1f7fa; border-color:rgba(255,255,255,.19); background:rgba(255,255,255,.08); }
.app-shell .topbar .icon-btn:hover { color:#fff; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.16); }
.app-shell .sidebar { color:#fff; border-color:rgba(255,255,255,.12); }
.app-shell .sidebar .brand-name,.app-shell .sidebar .brand-name span { color:#fff; }
.app-shell .sidebar .brand-mark { color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.1); }
.app-shell .sidebar-label { color:#bed0dc; }
.app-shell .side-nav a { color:#e4edf2; }
.app-shell .side-nav a:hover { color:#fff; background:rgba(255,255,255,.1); }
.app-shell .side-nav a.active { color:#fff; border-color:rgba(239,202,112,.28); background:linear-gradient(90deg,rgba(208,161,67,.3),rgba(255,255,255,.07)); }
.app-shell .side-nav a.active::before { background:#f0c86b; box-shadow:0 0 18px rgba(240,200,107,.6); }
.app-shell .sidebar-user { color:#fff; border-color:rgba(255,255,255,.13); background:rgba(0,0,0,.08); }
.app-shell .sidebar-user__meta strong { color:#fff; }
.app-shell .sidebar-user__meta span,.app-shell .sidebar-logout { color:#c5d5df; }

.calculator-page .page { width:min(1340px,100%); }
.calculator-page-header { overflow:hidden; position:relative; background:linear-gradient(128deg,#183f3b,#285f52 58%,#b5803d); }
.calculator-page-header::after { content:""; position:absolute; width:260px; height:260px; inset:-135px -70px auto auto; border:45px solid rgba(255,232,179,.1); border-radius:50%; }
.calculator-layout--pro { grid-template-columns:minmax(500px,760px) minmax(280px,1fr); max-width:1180px; gap:24px; }
.calculator-shell--pro { border-color:rgba(35,59,54,.18); border-radius:30px; background:#eee8dc; box-shadow:0 26px 65px rgba(37,55,49,.2); }
.calculator-modebar { min-height:54px; gap:12px; padding:10px 18px; color:#d5e5df; background:#193b38; }
.calculator-mode-pill { display:inline-flex; align-items:center; gap:7px; margin-inline-end:auto; color:#f6e6bd; font-size:.61rem; font-weight:800; }
.calculator-mode-pill svg { width:15px; }
.calculator-modebar > span:not(.calculator-mode-pill) { padding:6px 10px; border-radius:9px; color:#cce0d9; background:rgba(255,255,255,.07); }
.calculator-modebar button { min-width:60px; border-color:rgba(244,215,147,.28); color:#2f3e38; background:#efd596; }
.calculator-shell--pro .calculator-display { min-height:190px; padding:28px; background:radial-gradient(circle at 88% 5%,rgba(228,189,98,.17),transparent 18rem),linear-gradient(145deg,#1d4742,#183a39); }
.calculator-expression { min-height:30px; color:#b7cec7; font-size:clamp(.85rem,2vw,1.05rem); }
.calculator-result-row { align-items:flex-end; }
.calculator-result { color:#fff9ea; font-size:clamp(2.7rem,7vw,5rem); letter-spacing:-.06em; }
.calculator-copy { color:#f3d68f; border-color:rgba(244,215,147,.2); background:rgba(244,215,147,.08); }
.calculator-control-deck { display:grid; gap:10px; padding:14px; background:linear-gradient(145deg,#eee8dc,#e6ded0); }
.calculator-control-deck .calculator-keys { padding:0; }
.calculator-keys--memory { grid-template-columns:repeat(4,1fr); gap:8px; }
.calculator-keys--science { grid-template-columns:repeat(6,1fr); gap:8px; padding:10px !important; border:1px solid rgba(70,76,67,.1); border-radius:17px; background:#dedfd3; }
.calculator-keys--main { grid-template-columns:repeat(4,1fr); gap:9px; }
.calculator-keys--main .calculator-key--equals { grid-column:span 2; }
.calculator-control-deck .calculator-key { min-height:59px; border-color:rgba(54,68,61,.11); border-radius:16px; color:#273c38; background:#fffdf7; box-shadow:0 5px 12px rgba(45,55,49,.08); font-size:1.03rem; }
.calculator-control-deck .calculator-key:hover { border-color:rgba(52,113,91,.32); box-shadow:0 9px 18px rgba(45,55,49,.13); }
.calculator-control-deck .calculator-key.is-memory { min-height:42px; color:#76561f; background:#f3e2b7; font-size:.7rem; }
.calculator-control-deck .calculator-key.is-science { min-height:47px; color:#2f5e53; background:#edf1e9; font-size:.72rem; }
.calculator-control-deck .calculator-key.is-command { color:#7a463e; background:#f2dfd6; }
.calculator-control-deck .calculator-key.is-operator { color:#fff; background:linear-gradient(145deg,#3b7b68,#285e52); }
.calculator-control-deck .calculator-key.is-equals { color:#2e2d29; background:linear-gradient(145deg,#f2d37f,#d7a94b); box-shadow:0 8px 20px rgba(181,132,41,.23); }
.calculator-history { overflow:hidden; border-color:rgba(50,67,60,.12); border-radius:25px; background:#f6f1e7; box-shadow:0 18px 44px rgba(40,54,47,.13); }
.calculator-history .panel-title h2 { color:#2b403b; }
.calculator-history__header { border-color:rgba(50,67,60,.1); background:#eee7d9; }
.calculator-history__header .btn { color:#604d29; border-color:rgba(112,83,35,.16); background:#f2dfb1; }
.calculator-history__list button { border-color:rgba(50,67,60,.1); color:#5e716b; background:#fffdf7; }
.calculator-history__list button strong { color:#285e52; }

.exchange-page { color:#293a3d; background:linear-gradient(145deg,#e8e2d8,#d9e2dd 52%,#efe9df); }
.exchange-page .sidebar { background:linear-gradient(180deg,#172f4a,#223f57); }
.exchange-page .topbar { background:rgba(27,52,77,.96); }
.exchange-page .exchange-dashboard { --exchange-deep:#1c4e46; --exchange-blue:#347a68; --exchange-soft:rgba(52,122,104,.09); display:grid; gap:18px; }
.exchange-page .exchange-hero { padding:clamp(20px,2.6vw,32px); border-color:rgba(255,255,255,.2); background:linear-gradient(128deg,#173b4b,#1f5b55 58%,#a6783c); box-shadow:0 24px 58px rgba(37,48,48,.22); }
.exchange-page .exchange-hero__body { margin-top:24px; }
.exchange-page .exchange-live { color:#e8fff4; border-color:rgba(102,222,162,.29); background:rgba(23,116,77,.37); }
.exchange-page .exchange-refresh-button { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.1); }
.exchange-page .exchange-eyebrow { color:#f1d486; }
.exchange-page .exchange-snapshot { border-color:rgba(255,255,255,.2); background:rgba(10,35,41,.24); }
.exchange-page .exchange-meta-grid { gap:8px; margin-top:20px; }
.exchange-page .exchange-meta-card { border-color:rgba(255,255,255,.17); background:rgba(255,255,255,.07); }
.exchange-alerts:empty { display:none; }
.exchange-section-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.exchange-section-tabs a { min-height:76px; display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid rgba(51,65,62,.11); border-radius:18px; color:#2e4443; background:rgba(250,247,240,.92); box-shadow:0 9px 22px rgba(47,53,50,.09); text-decoration:none; transition:transform .17s ease,box-shadow .17s ease; }
.exchange-section-tabs a:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(47,53,50,.14); }
.exchange-section-tabs a > svg { width:42px; height:42px; padding:10px; border-radius:13px; color:#fff; background:#3e806b; }
.exchange-section-tabs a:nth-child(2) > svg { background:#b6823f; }
.exchange-section-tabs a:nth-child(3) > svg { background:#7c5f8b; }
.exchange-section-tabs a:nth-child(4) > svg { background:#a34d58; }
.exchange-section-tabs a > span { display:grid; gap:2px; font-size:.72rem; font-weight:850; }
.exchange-section-tabs small { color:#89928e; font-size:.49rem; }
.exchange-rates-panel,.exchange-converter-panel,.exchange-chart-panel { scroll-margin-top:90px; }
.exchange-page .exchange-content-grid { grid-template-columns:minmax(0,1fr) minmax(340px,420px); gap:18px; }
.exchange-page .exchange-rates-panel,.exchange-page .exchange-converter-panel,.exchange-page .exchange-chart-panel { color:#293a3d; border-color:rgba(47,62,58,.11); border-radius:24px; background:#faf7f0; box-shadow:0 16px 38px rgba(42,50,47,.12); }
.exchange-page .exchange-panel-header .panel-title h2,.exchange-page .exchange-converter-heading h2,.exchange-page .exchange-chart-header h2 { color:#293a3d; }
.exchange-page .exchange-panel-header .panel-title p,.exchange-page .exchange-converter-heading p,.exchange-page .exchange-chart-header p { color:#73807d; }
.exchange-page .exchange-section-icon { color:#fff; border-color:transparent; background:#3f816d; }
.exchange-page .exchange-search { border-color:rgba(47,65,61,.1); color:#64736f; background:#ebece5; }
.exchange-page .exchange-rate-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 18px 20px; }
.exchange-page .exchange-rate-card { border-color:rgba(50,65,61,.11); border-radius:17px; background:#fffdf8; box-shadow:0 7px 17px rgba(42,50,47,.08); }
.exchange-page .exchange-rate-card:hover { transform:translateY(-3px); border-color:rgba(54,128,102,.26); box-shadow:0 13px 25px rgba(42,50,47,.12); }
.exchange-page .exchange-rate-card__values > span { background:#eef0e9; }
.exchange-page .exchange-rate-card__values > span:first-child { border-inline-start:3px solid #3f956e; }
.exchange-page .exchange-rate-card__values > span:last-child { border-inline-start:3px solid #b67849; }
.exchange-page .exchange-rate-table-wrap { display:none; }
.exchange-page .exchange-converter-panel { position:sticky; top:90px; }
.exchange-page .converter-field { border-color:rgba(48,67,61,.1); background:#eceee8; }
.exchange-page .converter-row .input,.exchange-page .converter-row .select { color:#293d39; border-color:rgba(48,67,61,.13); background:#fffdf8; }
.exchange-page .converter-swap { background:linear-gradient(135deg,#467f70,#2d6559); }
.exchange-page .converter-result { border-color:rgba(49,111,90,.15); background:linear-gradient(135deg,#dcebe2,#f1eee2); }
.exchange-page .converter-result strong { color:#285f52; }
.exchange-chart-panel { overflow:hidden; padding:clamp(17px,2.4vw,26px); }
.exchange-chart-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.exchange-chart-header .panel-title { display:flex; gap:12px; }
.exchange-chart-header .panel-title h2 { margin:0; }
.exchange-chart-header .panel-title p { margin:4px 0 0; font-size:.67rem; }
.exchange-chart-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.exchange-chart-controls select { min-height:39px; padding:8px 12px; border:1px solid rgba(48,67,61,.13); border-radius:11px; color:#2e4540; background:#ebece5; font:inherit; font-size:.62rem; font-weight:800; }
.exchange-chart-ranges { display:flex; gap:4px; padding:4px; border-radius:12px; background:#e9e9e1; }
.exchange-chart-ranges button { min-height:31px; padding:6px 10px; border:0; border-radius:9px; color:#6b7773; background:transparent; font:inherit; font-size:.56rem; font-weight:800; cursor:pointer; }
.exchange-chart-ranges button.active { color:#fff; background:#3e7d69; box-shadow:0 5px 12px rgba(47,112,91,.2); }
.exchange-chart-legend { display:flex; align-items:center; gap:14px; margin:19px 2px 9px; color:#687570; font-size:.59rem; }
.exchange-chart-legend span { display:inline-flex; align-items:center; gap:6px; }
.exchange-chart-legend i { width:18px; height:3px; border-radius:5px; background:#379568; }
.exchange-chart-legend i.sell { background:#c27b48; }
.exchange-chart-legend strong { margin-inline-start:auto; color:#30433f; font-size:.66rem; }
.exchange-chart-canvas { position:relative; height:300px; overflow:hidden; border:1px solid rgba(48,67,61,.1); border-radius:18px; background:linear-gradient(180deg,#eef1ea,#faf7ef); }
.exchange-chart-canvas svg { width:100%; height:100%; }
.exchange-chart-canvas svg .grid { stroke:rgba(52,71,65,.1); stroke-width:1; vector-effect:non-scaling-stroke; }
.exchange-chart-canvas svg .label { fill:#7a8883; font-size:11px; }
.exchange-chart-canvas svg path { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:3.5; vector-effect:non-scaling-stroke; }
.exchange-chart-canvas svg path.buy { stroke:#339268; }
.exchange-chart-canvas svg path.sell { stroke:#c27747; }
.exchange-chart-canvas svg path.area { fill:rgba(51,146,104,.08); stroke:none; }
.exchange-chart-empty { position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#75817d; font-size:.68rem; text-align:center; }
.exchange-chart-empty[hidden],.exchange-chart-canvas svg[hidden] { display:none; }
.exchange-history-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin-top:10px; }
.exchange-history-list span { min-width:0; display:grid; gap:3px; padding:9px; border:1px solid rgba(48,67,61,.09); border-radius:12px; background:#f1eee6; }
.exchange-history-list time { overflow:hidden; color:#78847f; font-size:.48rem; text-overflow:ellipsis; white-space:nowrap; }
.exchange-history-list b { color:#315f52; font-size:.56rem; font-variant-numeric:tabular-nums; }
.exchange-history-list b:last-child { color:#9a5e3d; }

@media (max-width:1080px) {
  .calculator-layout--pro,.exchange-page .exchange-content-grid { grid-template-columns:1fr; }
  .exchange-page .exchange-converter-panel { position:static; }
  .exchange-page .exchange-rate-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:650px) {
  .app-shell:not(.chat-page) .topbar { min-height:64px; height:64px; gap:10px; }
  .app-shell:not(.chat-page) .topbar-title strong { font-size:.88rem; }
  .app-shell:not(.chat-page) .sidebar-toggle { color:#fff; background:rgba(255,255,255,.12); }
  .calculator-page .page { padding-inline:10px; }
  .calculator-page-header { padding:20px 17px; border-radius:21px; }
  .calculator-page-header .page-subtitle { font-size:.7rem; }
  .calculator-layout--pro { width:100%; margin-inline:0; }
  .calculator-shell--pro { border-radius:22px; }
  .calculator-modebar { padding-inline:12px; }
  .calculator-mode-pill { font-size:0; }
  .calculator-mode-pill svg { width:18px; }
  .calculator-shell--pro .calculator-display { min-height:145px; padding:20px 16px; }
  .calculator-result { font-size:clamp(2.3rem,13vw,3.7rem); }
  .calculator-control-deck { gap:8px; padding:9px; }
  .calculator-keys--memory,.calculator-keys--science,.calculator-keys--main { gap:6px; }
  .calculator-keys--science { grid-template-columns:repeat(4,1fr); padding:7px !important; }
  .calculator-control-deck .calculator-key { min-height:54px; border-radius:13px; }
  .calculator-control-deck .calculator-key.is-memory { min-height:38px; }
  .calculator-control-deck .calculator-key.is-science { min-height:42px; }
  .calculator-history { border-radius:20px; }

  .exchange-page .page { padding-inline:11px; }
  .exchange-page .exchange-dashboard { gap:13px; }
  .exchange-page .exchange-hero { border-radius:21px; }
  .exchange-page .exchange-hero__body { margin-top:20px; }
  .exchange-page .exchange-hero h1 { font-size:1.75rem; }
  .exchange-page .exchange-meta-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exchange-page .exchange-meta-card { min-width:0; padding:10px; }
  .exchange-page .exchange-meta-card:nth-child(n+3) { display:none; }
  .exchange-section-tabs { display:flex; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .exchange-section-tabs::-webkit-scrollbar { display:none; }
  .exchange-section-tabs a { min-width:164px; min-height:67px; flex:0 0 164px; padding:11px; scroll-snap-align:start; }
  .exchange-section-tabs a > svg { width:38px; height:38px; }
  .exchange-page .exchange-rate-cards { grid-template-columns:1fr; padding-inline:12px; }
  .exchange-chart-header { display:grid; }
  .exchange-chart-controls { justify-content:stretch; }
  .exchange-chart-controls label,.exchange-chart-controls select { width:100%; }
  .exchange-chart-ranges { width:100%; }
  .exchange-chart-ranges button { flex:1; }
  .exchange-chart-canvas { height:235px; border-radius:15px; }
  .exchange-chart-legend { flex-wrap:wrap; }
  .exchange-chart-legend strong { width:100%; margin-inline-start:0; }
  .exchange-history-list { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .games-page .page { padding-inline:9px; }
  .games-page-header { padding:20px 17px; border-radius:21px; }
  .games-app-pro { gap:12px; }
  .games-app-pro .game-picker { width:100%; gap:8px; }
  .games-app-pro .game-choice { min-width:172px; }
  .games-app-pro .game-stage { width:100%; min-height:0; padding:11px; overflow:hidden; }
  .game-stage__header { margin-bottom:12px; }
  .board-score-row { gap:5px; }
  .board-score-row > span { min-height:49px; padding:6px; border-radius:12px; }
  .game-stage--backgammon { overflow:hidden; }
  .backgammon-board { width:100%; min-width:0; min-height:0; aspect-ratio:1.226/1; padding:7px 36px 7px 7px; border-width:5px; border-radius:13px; }
  [dir="rtl"] .backgammon-board { padding:7px 7px 7px 36px; }
  .backgammon-points { min-height:0; height:100%; }
  .bg-point { padding:2px 0; }
  .bg-point::before { inset:0 1px; }
  .bg-checker { width:clamp(14px,4.8vw,23px); height:clamp(14px,4.8vw,23px); margin-top:-2px; border-width:1px !important; }
  .bg-checker-count { min-width:17px; padding:1px 3px; font-size:.42rem; }
  .bg-bar { inset:7px auto 7px 46.4%; padding:1px; }
  .bg-bar small { display:none; }
  .bg-off { width:27px; inset-inline-end:4px; padding:2px; border-radius:7px; }
  .bg-off--computer { top:7px; }.bg-off--human { bottom:7px; }
  .bg-off small { font-size:.36rem; }.bg-off b { font-size:.8rem; }
  .domino-table { min-height:470px; padding:10px; border-radius:17px; }
  .domino-chain-wrap { min-height:180px; padding:10px; }
  .domino-tile { width:40px; height:72px; flex-basis:40px; }

  .chat-page .chat-list-header { padding-inline:11px; }
  .chat-page .chat-list-tools .icon-btn { color:#28556e; border-color:rgba(35,76,99,.15); background:#d8e6ea; }
  .chat-page .chat-list-tools .chat-new-button { color:#fff; background:#2c8067; }
  .chat-page .chat-list-menu { color:#fff; background:#274e65; }
  .chat-page .chat-list-pane > .chat-tabs { display:flex; gap:7px; overflow-x:auto; padding:0 10px 10px; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .chat-page .chat-list-pane > .chat-tabs::-webkit-scrollbar { display:none; }
  .chat-page .chat-list-pane > .chat-tabs .chat-tab { min-width:112px; flex:0 0 112px; min-height:40px; padding-inline:9px; border-radius:12px; scroll-snap-align:start; }
  .chat-page .chat-list-pane > .chat-tabs .chat-tab.active { border-color:#2d8067; background:#2d8067; }
  .chat-page .conversation-list { background:linear-gradient(180deg,#edf3f5,#e6edef); }
}

/* v3.0 final cascade — keep the new tables above earlier compatibility rules. */
.chat-page .attachment-preview.attachment-image { display:block; width:min(420px,100%); overflow:hidden; padding:0; border:0; border-radius:11px; background:#d6e2e6; cursor:zoom-in; }
.chat-page .attachment-image img { display:block; width:100%; max-width:none; max-height:420px; object-fit:cover; }
.games-page .games-app-pro { grid-template-columns:240px minmax(0,1fr); align-items:start; gap:18px; }
.games-page .games-app-pro>.game-picker { grid-column:1; grid-row:1 / span 2; }
.games-page .games-app-pro>.game-online-hub { grid-column:2; grid-row:1; }
.games-page .games-app-pro>.game-stage { grid-column:2; grid-row:2; }
.game-choice__icon--checkers { color:#fff5d9; background:linear-gradient(145deg,#9b4a4d,#5e2935); }
.game-choice__icon--four { color:#ffe36c; background:linear-gradient(145deg,#3768a6,#233f73); font-size:.68rem; letter-spacing:-.18em; }
.game-online-hub { display:grid; gap:10px; }
.game-mode-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-mode-switch { width:max-content; display:flex; gap:4px; padding:4px; border:1px solid rgba(48,75,86,.13); border-radius:15px; background:#e3ebec; box-shadow:0 8px 20px rgba(40,59,63,.08); }
.game-mode-switch button { min-height:42px; display:flex; align-items:center; gap:7px; padding:0 16px; border:0; border-radius:11px; color:#556c70; background:transparent; font:inherit; font-size:.68rem; font-weight:850; cursor:pointer; }
.game-mode-switch button svg { width:17px; }
.game-mode-switch button.active { color:#fff; background:linear-gradient(135deg,#24596b,#2f816a); box-shadow:0 7px 18px rgba(35,91,83,.22); }
.game-mode-switch button:disabled { opacity:.42; cursor:not-allowed; }
.game-fullscreen { min-height:42px; display:flex; align-items:center; gap:7px; padding:0 14px; border:1px solid rgba(48,75,86,.14); border-radius:13px; color:#395a61; background:#f4f8f7; font:inherit; font-size:.65rem; font-weight:850; cursor:pointer; box-shadow:0 7px 18px rgba(40,59,63,.08); }.game-fullscreen svg { width:17px; }
.game-online-panel { display:grid; gap:12px; padding:15px; border:1px solid rgba(41,79,87,.14); border-radius:20px; background:linear-gradient(145deg,#f8fbfa,#e9f0ed); box-shadow:0 14px 34px rgba(42,66,65,.1); }
.game-online-panel[hidden] { display:none !important; }
.game-online-panel__header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.game-online-panel__header small,.game-online-panel__header strong { display:block; }
.game-online-panel__header small { color:#6d8585; font-size:.61rem; }.game-online-panel__header strong { color:#234650; }
.online-current-room { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid rgba(37,127,98,.2); border-radius:16px; background:#e0eee7; }
.online-room-live { min-width:0; display:flex; align-items:center; gap:10px; }.online-room-live>div { min-width:0; }
.online-room-live small,.online-room-live strong,.online-room-live span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.online-room-live small { color:#668078; font-size:.58rem; }.online-room-live span { color:#567268; font-size:.62rem; }
.online-room-pulse { width:12px; height:12px; flex:0 0 12px; border-radius:50%; background:#2eaf78; box-shadow:0 0 0 7px rgba(46,175,120,.12); animation:accept-pulse 1.8s infinite; }
.online-room-list { display:grid; gap:7px; }.online-room-list__title { color:#5e7576; font-size:.62rem; font-weight:850; }
.online-room-card { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid rgba(40,72,78,.11); border-radius:14px; background:#fff; }
.online-room-card>div { min-width:0; flex:1; }.online-room-card strong,.online-room-card small { display:block; }.online-room-card small { color:#718487; font-size:.58rem; }
.online-room-empty { display:grid; justify-items:center; gap:6px; padding:20px; color:#758889; text-align:center; }.online-room-empty>span { font-size:1.8rem; }
.game-stage--checkers,.game-stage--connect-four { background:linear-gradient(155deg,#f3eee3,#ddd3c2) !important; }
.checkers-arena,.four-arena { max-width:850px; margin:auto; padding:clamp(13px,2vw,24px); border:1px solid rgba(54,37,31,.23); border-radius:25px; background:linear-gradient(145deg,#6c4231,#3d2825); box-shadow:inset 0 0 0 4px rgba(255,211,154,.08),0 24px 50px rgba(51,34,29,.28); }
.two-player-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:14px; }
.two-player-score>span { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#e8ded2; background:rgba(20,13,15,.28); opacity:.7; }
.two-player-score>span:nth-child(3) { justify-content:flex-end; }.two-player-score>span.active { opacity:1; box-shadow:0 0 0 2px #e1b55f; }
.two-player-score span>i { width:24px; height:24px; border-radius:50%; background:#a93e4a; box-shadow:inset 0 2px 3px rgba(255,255,255,.35); }.two-player-score .ivory>i { background:#f0dfbb; }
.two-player-score strong { font-size:.66rem; }.two-player-score b { margin-inline-start:auto; }.two-player-score .ivory b { margin-inline:0 auto; }
.turn-mark { width:48px; height:34px; display:grid; place-items:center; border-radius:11px; color:#3b2928; background:#efd9ab; font-size:.65rem; }
.checkers-board { width:min(100%,700px); aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); overflow:hidden; margin:auto; border:10px solid #291a1b; border-radius:12px; box-shadow:inset 0 0 24px rgba(0,0,0,.3),0 16px 35px rgba(0,0,0,.25); }
.checkers-board button { position:relative; display:grid; place-items:center; padding:0; border:0; }.checkers-board button.light { background:#d9b881; }.checkers-board button.dark { background:#734748; }
.checkers-board button.source::after,.checkers-board button.destination::after { content:""; position:absolute; inset:7%; border:3px solid #67d69b; border-radius:50%; box-shadow:0 0 15px rgba(103,214,155,.6); }.checkers-board button.destination::after { inset:31%; background:#67d69b; }
.checker-piece { position:relative; z-index:2; width:74%; aspect-ratio:1; display:grid; place-items:center; border:3px solid rgba(255,255,255,.35); border-radius:50%; background:radial-gradient(circle at 34% 25%,#e87677,#a93749 58%,#6b2133); box-shadow:inset 0 0 0 4px rgba(255,255,255,.08),0 5px 8px rgba(27,15,19,.42); }
.checker-piece.player-2 { background:radial-gradient(circle at 34% 25%,#fff8dc,#e2c797 58%,#a77c48); }.checker-piece.king b { color:#fff0ad; font-size:clamp(.6rem,2.3vw,1.3rem); }
.four-arena { max-width:760px; background:linear-gradient(145deg,#294d78,#172d50); }
.four-board { width:min(100%,650px); aspect-ratio:7/6; display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(3px,1vw,9px); margin:auto; padding:clamp(8px,1.5vw,15px); border:7px solid #142b50; border-radius:22px; background:linear-gradient(145deg,#3571b3,#204b86); box-shadow:inset 0 4px 10px rgba(255,255,255,.13),0 19px 38px rgba(0,0,0,.28); }
.four-board button { position:relative; padding:0; border:0; border-radius:50%; background:#152d4d; box-shadow:inset 0 5px 10px rgba(0,0,0,.44); cursor:pointer; }.four-board button i { position:absolute; inset:8%; border-radius:50%; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.four-board button[data-player="1"] i { background:radial-gradient(circle at 35% 25%,#ff8281,#c43d4d 62%,#801e34); box-shadow:inset 0 3px 4px rgba(255,255,255,.35); }.four-board button[data-player="2"] i { background:radial-gradient(circle at 35% 25%,#fff18a,#e4b833 62%,#a46c16); box-shadow:inset 0 3px 4px rgba(255,255,255,.38); }
.four-board button.winner { box-shadow:0 0 0 4px #75e4ae,inset 0 5px 10px rgba(0,0,0,.3); animation:accept-pulse 1s infinite; }
.four-players { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:16px; color:#e3edf8; }.four-players span { display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:12px; opacity:.55; }.four-players span.active { opacity:1; background:rgba(255,255,255,.1); }.four-players i { width:20px; height:20px; border-radius:50%; background:#c43d4d; }.four-players span:last-child i { background:#e4b833; }
.games-page .games-app-pro .game-stage { position:relative; overflow:hidden; min-height:720px; border:1px solid rgba(57,42,38,.16); border-radius:26px; background:linear-gradient(155deg,#f8f3e8,#e7ddd0); box-shadow:0 25px 60px rgba(49,38,37,.18); }
.games-page .games-app-pro .game-stage:fullscreen { width:100vw; height:100dvh; max-width:none; overflow:auto; padding:clamp(10px,2vw,24px); border:0; border-radius:0; }
.games-page .games-app-pro .game-stage--backgammon:fullscreen .backgammon-cabinet { max-width:min(94vw,1450px); }
.games-page .game-match-hud { max-width:980px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; margin:0 auto 12px; }
.games-page .game-player-seat { position:relative; min-width:0; display:flex; align-items:center; gap:9px; padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:16px; color:#f7f0e7; background:linear-gradient(145deg,#263848,#182735); box-shadow:0 9px 22px rgba(25,24,27,.2); }
.games-page .game-player-seat.human { flex-direction:row-reverse; text-align:end; background:linear-gradient(145deg,#8e5f36,#603c25); }
.games-page .game-player-avatar { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border:2px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:linear-gradient(145deg,#4c89a4,#285a73); box-shadow:0 5px 15px rgba(0,0,0,.25); font-style:normal; font-size:.78rem; font-weight:900; }
.games-page .game-player-seat.human .game-player-avatar { background:linear-gradient(145deg,#e8b35e,#a7602f); }
.games-page .game-player-seat small { color:#c7d2d8; font-size:.49rem; }.games-page .game-player-seat strong { font-size:.65rem; }
.games-page .game-match-hud .bg-dice-box { min-width:112px; display:grid; justify-items:center; gap:4px; padding:7px 12px; border:1px solid rgba(76,55,43,.14); border-radius:16px; background:#fff9ed; box-shadow:0 8px 20px rgba(62,44,35,.12); }
.games-page .game-match-hud .bg-dice-box i { width:35px; height:35px; border-radius:9px; color:#332d2e; background:linear-gradient(145deg,#fff,#eee3d2); }
.games-page .backgammon-cabinet { position:relative; max-width:980px; margin:auto; padding:13px; border:1px solid #4b2819; border-radius:25px; background:repeating-linear-gradient(98deg,rgba(255,255,255,.035) 0 2px,transparent 2px 11px),linear-gradient(145deg,#9c6236,#5e3521 52%,#a76d3d); box-shadow:inset 0 0 0 4px rgba(255,205,128,.12),inset 0 0 30px rgba(38,17,8,.32),0 24px 50px rgba(51,31,22,.3); }
.games-page .backgammon-board { width:100%; min-width:0; min-height:0; aspect-ratio:1.72/1; padding:12px 60px 12px 12px; border:3px solid #3d2319; border-radius:14px; background:linear-gradient(90deg,#543126 49.4%,#2e201d 49.4% 50.6%,#543126 50.6%); box-shadow:inset 0 0 0 2px rgba(255,227,177,.12); }
[dir="rtl"] .games-page .backgammon-board { padding:12px 12px 12px 60px; }
.games-page .backgammon-points { height:100%; min-height:0; border-color:rgba(53,25,17,.72); background:linear-gradient(90deg,rgba(0,0,0,.07) 49.5%,rgba(255,255,255,.05) 50%),linear-gradient(145deg,#d2a36a,#b77d4e); }
.games-page .bg-point--top::before,.games-page .bg-point--bottom::before { background:#e7c386; }.games-page .bg-point:nth-child(even)::before { background:#703649; }
.games-page .bg-checker.human { border-color:#f2e2c3; background:radial-gradient(circle at 36% 26%,#fff7df,#dec18e 57%,#9c7445); }
.games-page .bg-checker.computer { border-color:#33212a; background:radial-gradient(circle at 36% 26%,#906070,#593342 56%,#241a20); }
.games-page .game-stage--dominoes { background:linear-gradient(155deg,#211b21,#382b2b) !important; }
.games-page .domino-table { position:relative; max-width:1050px; min-height:590px; margin:auto; gap:10px; overflow:hidden; padding:16px 20px 14px; border:13px solid #5c321e; border-radius:38px; background:radial-gradient(ellipse at 50% 38%,rgba(61,164,105,.3),transparent 55%),linear-gradient(145deg,#17603d,#0f452f 62%,#0b3829); box-shadow:inset 0 0 0 3px rgba(224,171,98,.2),inset 0 0 70px rgba(0,0,0,.35),0 28px 60px rgba(10,9,12,.38); }
.games-page .domino-table .game-player-seat { z-index:2; width:min(270px,72%); align-self:center; }
.games-page .domino-table .domino-player { margin-top:auto; }
.games-page .domino-chain-wrap { position:relative; z-index:2; min-height:240px; padding:24px; border-color:rgba(255,255,255,.08); border-radius:22px; background:rgba(3,33,22,.26); }
.games-page .domino-chain { gap:2px; padding-block:20px; }
.games-page .domino-chain .domino-tile { width:74px; height:40px; grid-template:1fr/1fr 2px 1fr; flex-basis:74px; padding:4px 5px; }
.games-page .domino-chain .domino-tile.is-double { width:40px; height:74px; grid-template:1fr 2px 1fr/1fr; flex-basis:40px; margin-inline:4px; }
.games-page .domino-tile { border-color:#c9b997; color:#2a2725; background:linear-gradient(145deg,#fffbea,#ddd0ae); box-shadow:inset 1px 1px #fff,inset -1px -1px rgba(112,85,49,.25),0 6px 12px rgba(0,0,0,.35); }
.games-page .domino-pips i { background:#2d2425; }
.games-page .domino-hand { position:relative; z-index:2; min-height:105px; overflow-x:auto; justify-content:center; }
.games-page .domino-hand .domino-tile { width:48px; height:86px; flex-basis:48px; }
.games-page .domino-controls { position:relative; z-index:3; align-items:center; flex-direction:row; }

@media (max-width:900px) {
  .games-page .games-app-pro { grid-template-columns:1fr; }
  .games-page .games-app-pro>.game-picker,.games-page .games-app-pro>.game-online-hub,.games-page .games-app-pro>.game-stage { grid-column:1; grid-row:auto; }
}
@media (max-width:760px) {
  .game-online-panel__header { align-items:flex-start; flex-direction:column; }.game-online-panel__header .cluster { width:100%; }.game-online-panel__header .btn { flex:1; }
  .online-current-room { align-items:flex-start; flex-direction:column; }.online-current-room>.btn { width:100%; }
  .game-mode-switch { width:100%; }.game-mode-switch button { min-width:0; flex:1; justify-content:center; padding-inline:8px; }
  .game-mode-toolbar { align-items:stretch; }.game-fullscreen { width:46px; flex:0 0 46px; justify-content:center; padding:0; font-size:0; }
  .checkers-arena,.four-arena { padding:8px; border-radius:16px; }.checkers-board { border-width:5px; }.two-player-score strong { display:none; }
  .games-page .games-app-pro .game-stage { min-height:0; padding:10px; }
  .games-page .game-match-hud { gap:6px; margin-bottom:8px; }
  .games-page .game-player-seat { gap:5px; padding:5px 7px; border-radius:12px; }
  .games-page .game-player-avatar { width:30px; height:30px; flex-basis:30px; }
  .games-page .game-match-hud .bg-dice-box { min-width:82px; padding:5px 7px; }
  .games-page .game-match-hud .bg-dice-box i { width:28px; height:28px; }
  .games-page .backgammon-cabinet { padding:6px; border-radius:15px; }
  .games-page .backgammon-board { aspect-ratio:1.44/1; padding:6px 34px 6px 6px; border-width:2px; border-radius:9px; }
  [dir="rtl"] .games-page .backgammon-board { padding:6px 6px 6px 34px; }
  .games-page .bg-checker { width:clamp(13px,4.6vw,21px); height:clamp(13px,4.6vw,21px); }
  .games-page .domino-table { min-height:520px; gap:7px; padding:10px 8px 9px; border-width:7px; border-radius:23px; }
  .games-page .domino-chain-wrap { min-height:190px; padding:12px 8px; }
  .games-page .domino-chain { justify-content:flex-start; padding-block:14px; }
  .games-page .domino-chain .domino-tile { width:62px; height:34px; flex-basis:62px; }
  .games-page .domino-chain .domino-tile.is-double { width:34px; height:62px; flex-basis:34px; }
  .games-page .domino-hand { justify-content:flex-start; min-height:90px; gap:5px; }
  .games-page .domino-hand .domino-tile { width:42px; height:76px; flex-basis:42px; }
}

/* Kani v3.3: real supplied emblem and a readable notification centre. */
.brand-mark.brand-mark--logo {
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  color:transparent;
  background:#efe9da;
  box-shadow:0 10px 28px rgba(4,21,35,.28),0 0 0 3px rgba(225,171,73,.12);
}
.brand-mark.brand-mark--logo::after { display:none; }
.brand-mark.brand-mark--logo img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 48%;
  transform:scale(1.12);
}
.app-shell .sidebar .brand-mark.brand-mark--logo { border-color:rgba(255,255,255,.38); background:#efe9da; }

.notifications-page {
  --notification-ink:#163449;
  --notification-muted:#62798a;
  --notification-line:rgba(30,76,103,.14);
}
.notifications-page .page {
  background:
    radial-gradient(circle at 92% 4%,rgba(224,166,67,.16),transparent 28rem),
    radial-gradient(circle at 5% 78%,rgba(35,132,134,.11),transparent 30rem),
    linear-gradient(145deg,#eaf2f4 0%,#f8f3e8 50%,#e8f1f2 100%);
}
.notifications-page .notifications-hero {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  background:
    radial-gradient(circle at 14% 18%,rgba(62,174,163,.3),transparent 34%),
    linear-gradient(135deg,#153d59 0%,#245e72 58%,#775d36 130%);
  box-shadow:0 22px 58px rgba(24,56,74,.2);
}
.notifications-page .notifications-hero::after {
  content:"";
  position:absolute;
  inset-inline-end:-46px;
  inset-block-end:-72px;
  width:210px;
  height:210px;
  border:34px solid rgba(255,208,111,.11);
  border-radius:50%;
}
.notifications-page .notifications-hero h1 { color:#fff; }
.notifications-page .notifications-hero p { color:#dbeaf0; }
.notifications-page .notifications-hero .eyebrow { color:#ffd57c; }
.notifications-page .notifications-hero .btn { position:relative; z-index:1; border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.12); }
.notifications-page .notification-layout { align-items:start; }
.notifications-page .notification-panel {
  color:var(--notification-ink);
  border:1px solid var(--notification-line);
  background:linear-gradient(155deg,rgba(244,249,248,.98),rgba(226,238,239,.96));
  box-shadow:0 20px 48px rgba(31,65,78,.13);
}
.notifications-page .notification-panel:nth-child(2) {
  background:linear-gradient(155deg,rgba(255,249,237,.98),rgba(238,243,241,.98));
}
.notifications-page .notification-panel .eyebrow { color:#a36d1b; }
.notifications-page .notification-panel h2,
.notifications-page .contact-request-card strong,
.notifications-page .notification-card strong { color:var(--notification-ink); }
.notifications-page .contact-request-card,
.notifications-page .notification-card {
  color:var(--notification-ink);
  border-color:rgba(37,84,108,.16);
  background:rgba(255,255,255,.76);
  box-shadow:0 8px 22px rgba(36,70,82,.07);
}
.notifications-page .contact-request-card:hover,
.notifications-page .notification-card:hover { border-color:rgba(33,124,125,.4); background:#fff; }
.notifications-page .notification-card.unread {
  border-color:rgba(191,129,36,.34);
  background:linear-gradient(135deg,#fff5d9,#eef7f4);
  box-shadow:inset 4px 0 #d59634,0 9px 24px rgba(54,78,77,.09);
}
[dir="rtl"] .notifications-page .notification-card.unread { box-shadow:inset -4px 0 #d59634,0 9px 24px rgba(54,78,77,.09); }
.notifications-page .contact-request-card__copy span,
.notifications-page .notification-card p,
.notifications-page .notification-card small,
.notifications-page .contact-request-card small { color:var(--notification-muted); }
.notifications-page .notification-card__icon { color:#fff; background:linear-gradient(145deg,#2a7a82,#18546b); box-shadow:0 7px 18px rgba(27,86,103,.18); }
.notifications-page .count-pill { color:#17394c; background:#f4c663; box-shadow:0 0 0 4px rgba(244,198,99,.2); }
.notifications-page .notification-open-link { color:#fff; background:#267785; }
.notifications-page .btn-ghost { border-color:rgba(31,77,99,.16); color:#244c60; background:rgba(255,255,255,.64); }
.notifications-page .empty-state.compact {
  min-height:150px;
  padding:24px;
  border:1px dashed rgba(35,82,103,.2);
  border-radius:18px;
  color:var(--notification-muted);
  background:rgba(255,255,255,.44);
}
.notifications-page .empty-state.compact>span { width:54px; height:54px; color:#4b8291; opacity:.65; }
.notifications-page .empty-state.compact svg { width:32px; height:32px; }
.notifications-page .empty-state.compact p { color:var(--notification-muted); }
@media(max-width:620px) {
  .notifications-page .notifications-hero { align-items:flex-start; }
  .notifications-page .notifications-hero .btn { width:100%; }
  .notifications-page .notification-panel { padding:14px; border-radius:20px; }
  .notifications-page .notification-panel .section-heading { align-items:flex-start; }
  .notifications-page .notification-panel .section-heading .btn { max-width:145px; }
}

/* Kani chat location + mobile composer repair baseline. */
.chat-page .composer #emojiButton.composer-emoji-button {
  display:inline-grid !important;
  place-items:center;
  color:#175f4b;
  background:rgba(45,135,110,.12);
  border-radius:50%;
}
.chat-page .composer #emojiButton.composer-emoji-button:hover,
.chat-page .composer #emojiButton.composer-emoji-button[aria-expanded="true"] {
  color:#fff;
  background:#2d876e;
}
.composer-emoji-glyph { font-size:1.25rem; line-height:1; filter:saturate(.9); }
.composer-attach-menu { width:min(310px,calc(100vw - 16px)); grid-template-columns:repeat(2,minmax(0,1fr)); }
.composer-attach-menu button:disabled { opacity:.6; cursor:progress; }
.attach-menu-icon.location { background:linear-gradient(145deg,#39a77f,#1d7658); }

.message-location-card {
  position:relative;
  display:block;
  width:min(330px,72vw);
  overflow:hidden;
  margin-bottom:3px;
  border:1px solid rgba(30,84,70,.15);
  border-radius:14px;
  color:#17384f;
  background:#f7fbf9;
  text-decoration:none;
}
.message-location-card__open { display:block; width:100%; padding:0; border:0; color:inherit; background:transparent; font:inherit; text-align:inherit; text-decoration:none; cursor:pointer; }
.message-location-card__open:focus-visible { outline:3px solid rgba(43,125,131,.42); outline-offset:-3px; }
.message-location-card:hover { border-color:rgba(30,120,84,.38); box-shadow:0 8px 18px rgba(20,77,57,.13); }
.message-location-map {
  position:relative;
  height:148px;
  overflow:hidden;
  background-color:#dbe8df;
  background-image:linear-gradient(35deg,rgba(78,133,106,.13) 25%,transparent 25%),linear-gradient(145deg,rgba(78,133,106,.1) 25%,transparent 25%);
  background-size:34px 34px;
}
.message-location-map>img { width:100%; height:100%; display:block; object-fit:cover; image-rendering:auto; }
.message-location-marker {
  position:absolute;
  left:var(--location-x);
  top:var(--location-y);
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#23885f;
  border:3px solid #fff;
  border-radius:50% 50% 50% 0;
  box-shadow:0 5px 15px rgba(13,58,43,.38);
  transform:translate(-50%,-88%) rotate(-45deg);
}
.message-location-marker svg { width:18px; transform:rotate(45deg); }
.message-location-attribution { position:absolute; z-index:2; inset-inline-end:4px; top:126px; padding:2px 5px; border-radius:5px; color:#31524a; background:rgba(255,255,255,.88); font-size:.48rem; text-decoration:underline; }
.message-location-copy { display:flex; align-items:flex-start; gap:9px; padding:10px 11px 11px; }
.message-location-copy>svg { width:20px; flex:0 0 20px; margin-top:2px; color:#23885f; }
.message-location-copy>span { min-width:0; display:grid; gap:2px; }
.message-location-copy strong { font-size:.74rem; }
.message-location-copy small { direction:ltr; unicode-bidi:isolate; color:#66808a; font-size:.58rem; }

.chat-location-viewer { width:min(640px,calc(100vw - 24px)); max-height:min(92dvh,900px); }
.chat-location-viewer .modal-body { display:grid; gap:14px; padding:16px; }
.chat-location-viewer__canvas {
  position:relative;
  width:100%;
  aspect-ratio:1;
  min-height:260px;
  overflow:hidden;
  border:1px solid rgba(32,88,75,.17);
  border-radius:18px;
  background:#dbe8df;
}
.chat-location-viewer__tiles { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
.chat-location-viewer__tiles img { width:100%; height:100%; display:block; object-fit:cover; }
.chat-location-viewer__marker {
  --location-viewer-x:50%;
  --location-viewer-y:50%;
  position:absolute;
  z-index:3;
  left:var(--location-viewer-x);
  top:var(--location-viewer-y);
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:#fff;
  background:#23885f;
  border:4px solid #fff;
  border-radius:50% 50% 50% 0;
  box-shadow:0 7px 20px rgba(13,58,43,.42);
  transform:translate(-50%,-88%) rotate(-45deg);
}
.chat-location-viewer__marker svg { width:22px; transform:rotate(45deg); }
.chat-location-viewer__zoom { position:absolute; z-index:4; inset-inline-start:10px; top:10px; display:grid; overflow:hidden; border:1px solid rgba(23,56,79,.2); border-radius:11px; box-shadow:0 6px 18px rgba(23,56,79,.15); }
.chat-location-viewer__zoom button { width:42px; height:42px; display:grid; place-items:center; border:0; color:#17384f; background:rgba(255,255,255,.95); cursor:pointer; }
.chat-location-viewer__zoom button+button { border-top:1px solid rgba(23,56,79,.14); }
.chat-location-viewer__zoom button:disabled { opacity:.42; cursor:not-allowed; }
.chat-location-viewer__zoom svg { width:20px; }
.chat-location-viewer__attribution { position:absolute; z-index:4; inset-inline-end:5px; bottom:5px; padding:3px 6px; border-radius:5px; color:#31524a; background:rgba(255,255,255,.9); font-size:.5rem; }
.chat-location-viewer__copy { display:flex; align-items:flex-start; gap:10px; padding:12px 13px; border:1px solid rgba(35,82,103,.12); border-radius:15px; background:rgba(255,255,255,.82); }
.chat-location-viewer__copy>svg { width:24px; flex:0 0 24px; color:#23885f; }
.chat-location-viewer__copy>span { display:grid; gap:3px; min-width:0; }
.chat-location-viewer__copy strong { color:#17384f; font-size:.82rem; }
.chat-location-viewer__copy small { color:#66808a; font-size:.62rem; }
.chat-location-viewer__directions { display:grid; gap:8px; }
.chat-location-viewer__directions>strong { color:#17384f; font-size:.72rem; }
.chat-location-viewer__directions>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.chat-location-viewer__directions .btn { min-height:44px; justify-content:center; gap:6px; padding-inline:10px; text-align:center; }
.chat-location-viewer__directions .btn svg { width:18px; flex:0 0 18px; }
@media(max-width:520px) {
  .message-location-card { width:min(292px,75vw); }
  .message-location-map { height:132px; }
  .message-location-attribution { top:110px; }
  .composer-emoji-glyph { font-size:1.15rem; }
  .chat-location-viewer { width:calc(100vw - 12px); max-height:96dvh; }
  .chat-location-viewer__canvas { min-height:250px; aspect-ratio:1; border-radius:14px; }
  .chat-location-viewer__directions>div { grid-template-columns:1fr; }
}

/* One game, one dedicated page: mode selection and an immersive board. */
.game-play-page .page { width:min(1580px,calc(100% - 34px)); }
.game-back-link { width:max-content; display:inline-flex; align-items:center; gap:7px; margin-bottom:9px; color:#a65f22; font-size:.66rem; font-weight:850; text-decoration:none; }
.game-back-link svg { width:17px; height:17px; }
.games-page-header .games-hero-icon { border:1px solid rgba(29,76,94,.16); color:#fff; background:linear-gradient(145deg,#2b7281,#193f5c); cursor:pointer; }
.games-app-dedicated { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:14px; }
.games-app-dedicated>.game-launcher,
.games-app-dedicated>.game-online-hub,
.games-app-dedicated>.game-stage { grid-column:1!important; grid-row:auto!important; }
.game-launcher { display:grid; grid-template-columns:minmax(190px,.34fr) minmax(0,1fr); gap:16px; padding:16px; border:1px solid rgba(36,77,91,.15); border-radius:25px; color:#173b4c; background:linear-gradient(145deg,#fffaf0,#eaf3f2); box-shadow:0 16px 42px rgba(31,64,75,.11); }
.game-launcher__copy { display:flex; flex-direction:column; justify-content:center; padding:4px 9px; }
.game-launcher__copy>small { color:#a66d25; font-size:.57rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.game-launcher__copy>strong { margin-top:4px; font-size:1.05rem; }
.game-launcher__copy p { margin:5px 0 0; color:#687e86; font-size:.65rem; line-height:1.55; }
.game-launcher__modes { min-width:0; display:grid; grid-template-columns:repeat(5,minmax(135px,1fr)); gap:9px; }
.game-launch-mode { min-width:0; min-height:74px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(38,84,100,.14); border-radius:17px; color:#21485a; background:rgba(255,255,255,.74); box-shadow:0 6px 16px rgba(38,73,82,.06); text-align:start; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.game-launch-mode:hover { border-color:rgba(29,119,125,.38); background:#fff; transform:translateY(-2px); }
.game-launch-mode.active { border-color:#2b7d83; color:#fff; background:linear-gradient(145deg,#2b7d83,#1d536d); box-shadow:0 11px 24px rgba(31,92,105,.21); }
.game-launch-mode>svg,.game-launch-mode>span:first-child>svg { width:25px; height:25px; flex:0 0 25px; }
.game-launch-mode>span:last-child { min-width:0; display:grid; gap:2px; }
.game-launch-mode strong,.game-launch-mode small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.game-launch-mode strong { font-size:.66rem; }.game-launch-mode small { color:#748790; font-size:.5rem; }
.game-launch-mode.active small { color:#d9edec; }
.game-launch-mode--fullscreen { color:#684918; background:linear-gradient(145deg,#fff6dc,#f4dca8); }
.game-launcher .game-difficulty { min-height:74px; position:relative; top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border:1px solid rgba(38,84,100,.14); border-radius:17px; color:#244b5b; background:rgba(255,255,255,.74); }
.game-launcher .game-difficulty span { min-width:0; display:grid; }.game-launcher .game-difficulty small { color:#72858d; font-size:.48rem; }.game-launcher .game-difficulty strong { font-size:.62rem; }
.game-launcher .game-difficulty select { min-width:72px; height:36px; border:1px solid rgba(34,81,98,.15); border-radius:10px; color:#21485a; background:#eef5f4; font:inherit; font-size:.58rem; }
.games-app-dedicated .game-online-hub:has(.game-online-panel[hidden]) { display:none; }
.games-app-dedicated .game-online-hub { border-radius:20px; }
.games-app-dedicated>.game-stage { width:100%; min-height:min(820px,calc(100dvh - 175px)); }
.game-invite-modal-card { width:min(560px,calc(100vw - 24px)); color:#183a4d; background:linear-gradient(150deg,#f9f5e9,#e8f2f2); }
.game-invite-modal-card .modal-header,.game-invite-modal-card .modal-footer { border-color:rgba(36,79,95,.13); }
.game-invite-contact-list { max-height:min(460px,58dvh); display:grid; gap:8px; overflow:auto; }
.game-invite-contact { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid rgba(35,80,96,.13); border-radius:15px; color:#193b4c; background:rgba(255,255,255,.74); cursor:pointer; }
.game-invite-contact:has(input:checked) { border-color:#2d8183; background:#e7f5f0; box-shadow:inset 0 0 0 1px #2d8183; }
.game-invite-contact input { accent-color:#24787d; }.game-invite-contact>span:last-child { min-width:0; display:grid; flex:1; }.game-invite-contact strong,.game-invite-contact small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.game-invite-contact small { color:#6d838b; font-size:.56rem; }
.domino-four-current>div:last-child,.online-current-room>div:last-child { display:flex; flex-wrap:wrap; gap:7px; }
@media(max-width:1200px) { .game-launcher__modes { grid-template-columns:repeat(3,minmax(145px,1fr)); } }
@media(max-width:850px) {
  .game-play-page .page { width:min(100% - 18px,1580px); }
  .game-launcher { grid-template-columns:1fr; padding:12px; border-radius:20px; }
  .game-launcher__copy { padding:2px 4px; }
  .game-launcher__modes { display:flex; overflow-x:auto; padding-bottom:3px; scroll-snap-type:x proximity; }
  .game-launch-mode,.game-launcher .game-difficulty { min-width:178px; flex:0 0 178px; scroll-snap-align:start; }
  .games-app-dedicated>.game-stage { min-height:0; }
}
@media(max-width:560px) {
  .games-page-header { align-items:flex-start; }
  .games-page-header .games-hero-icon { width:46px; height:46px; flex:0 0 46px; }
  .game-launch-mode,.game-launcher .game-difficulty { min-width:160px; min-height:68px; }
  .game-play-page .page { width:calc(100% - 12px); }
}

/* A call launched from chat lives in a separate persistent window. */
.persistent-call-note { display:flex; align-items:center; gap:11px; margin:0 0 14px; padding:11px 14px; border:1px solid rgba(55,139,130,.25); border-radius:16px; color:#183e4b; background:linear-gradient(135deg,#e6f4ee,#fff4d8); box-shadow:0 9px 25px rgba(34,69,78,.09); }
.persistent-call-note>svg { width:24px; height:24px; flex:0 0 24px; color:#267c72; }.persistent-call-note>span { min-width:0; display:grid; gap:2px; }.persistent-call-note strong { font-size:.68rem; }.persistent-call-note small { color:#637b83; font-size:.57rem; }
.call-window .sidebar,.call-window .topbar,.call-window .mobile-overlay { display:none!important; }
.call-window .app-main { min-height:100dvh; margin:0!important; }
.call-window .page { width:100%; max-width:none; padding:12px; }
.call-window .page>.page-header { display:none; }
.call-window .call-layout { grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:12px; }
.call-window .call-stage { min-height:calc(100dvh - 68px); border-radius:20px; }
.call-window .call-sidebar { max-height:calc(100dvh - 68px); overflow:auto; gap:12px; }
@media(max-width:820px) {
  .call-window .page { padding:0; }
  .call-window .persistent-call-note { position:absolute; z-index:8; top:8px; inset-inline:8px; margin:0; padding:8px 10px; border-radius:13px; background:rgba(238,248,243,.91); backdrop-filter:blur(12px); }
  .call-window .persistent-call-note small { display:none; }
  .call-window .call-layout { display:block; }
  .call-window .call-stage { min-height:100dvh; border:0; border-radius:0; }
  .call-window .call-sidebar { display:none; }
}

.persistent-call-toolbar { min-height:58px; display:grid; grid-template-columns:46px minmax(0,1fr) 46px 46px; align-items:center; gap:8px; margin-bottom:10px; padding:6px 8px; border:1px solid rgba(194,221,226,.2); border-radius:18px; color:#f4fafb; background:linear-gradient(135deg,#153a49,#214f58); box-shadow:0 12px 34px rgba(8,31,39,.2); }
.persistent-call-toolbar__button { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:14px; color:#fff; background:rgba(255,255,255,.09); cursor:pointer; }
.persistent-call-toolbar__button:hover { background:rgba(255,255,255,.17); }.persistent-call-toolbar__button svg { width:23px; height:23px; }
.persistent-call-toolbar__button--end { border-color:rgba(255,123,123,.34); background:#d8323e; box-shadow:0 8px 20px rgba(166,24,39,.24); }
.persistent-call-toolbar__button--end:hover { background:#bd2633; }
.persistent-call-toolbar__brand { min-width:0; display:flex; align-items:center; justify-content:center; gap:9px; text-align:start; }.persistent-call-toolbar__brand .brand-mark { width:38px; height:38px; flex-basis:38px; }.persistent-call-toolbar__brand>span:last-child { min-width:0; display:grid; }.persistent-call-toolbar__brand strong { font-size:.78rem; }.persistent-call-toolbar__brand small { color:#bed4d7; font-size:.54rem; }
.persistent-call-workspace { position:fixed; z-index:40; inset:0; padding-top:78px; background:#e9f1f1; }
.persistent-call-workspace[hidden] { display:none!important; }
.persistent-call-workspace iframe { width:100%; height:100%; display:block; border:0; background:#eef4f3; }
.call-window-is-minimized .persistent-call-toolbar { position:fixed!important; z-index:90!important; inset-inline:8px; top:8px; box-shadow:0 0 0 3px rgba(228,184,86,.2),0 12px 34px rgba(8,31,39,.2); }
.call-window-is-minimized .persistent-call-note { display:none!important; }
.call-window-is-minimized .call-layout { position:fixed; z-index:80; inset:auto 14px 14px auto; width:min(300px,calc(100vw - 28px)); height:190px; display:block!important; margin:0!important; }
[dir="rtl"] .call-window-is-minimized .call-layout { right:auto; left:14px; }
.call-window-is-minimized .call-stage { width:100%; height:100%; min-height:0!important; overflow:hidden; border:3px solid #e1b85a; border-radius:24px!important; box-shadow:0 22px 58px rgba(8,31,39,.42); }
.call-window-is-minimized .call-sidebar,.call-window-is-minimized .call-controls,.call-window-is-minimized .call-top-info,.call-window-is-minimized .call-quality-badge,.call-window-is-minimized .call-participants-panel { display:none!important; }
.call-window-is-minimized .call-idle__inner h2,.call-window-is-minimized .call-idle__inner p,.call-window-is-minimized .call-idle__inner .btn { display:none; }
.call-window-is-minimized .call-idle__icon { width:70px; height:70px; margin:0; }
.call-window-is-minimized .video-tile__name { font-size:.55rem; }
@media(max-width:820px) {
  .call-window .persistent-call-toolbar { position:absolute; z-index:14; top:8px; inset-inline:8px; margin:0; background:rgba(18,52,62,.9); backdrop-filter:blur(14px); }
  .call-window .persistent-call-note { top:76px; z-index:13; }
  .call-window .call-top-info { top:142px; }
}

/* Kani 3.4 authentication: a calm light login card with the real Kani mark. */
.auth-page {
  min-height:100dvh;
  color:#17384b;
  background:
    radial-gradient(circle at 9% 8%,rgba(61,150,153,.2),transparent 26rem),
    radial-gradient(circle at 45% 100%,rgba(224,171,69,.2),transparent 31rem),
    linear-gradient(145deg,#e6f1f2 0%,#f8f3e8 48%,#dfecee 100%);
}
.auth-page::before { opacity:.32; background-image:radial-gradient(circle at 1px 1px,rgba(28,80,94,.16) 1px,transparent 0); mask-image:linear-gradient(135deg,#000 5%,transparent 72%); }
.auth-page::after { width:5px; background:linear-gradient(to bottom,#cf353d 0 33.33%,#e4b74f 33.33% 66.66%,#2f9b69 66.66%); }
.auth-page .auth-main { position:relative; z-index:2; width:min(620px,100%); min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,5vw,62px); }
.auth-page .auth-brand-row { margin:0 0 clamp(16px,3vh,28px); }
.auth-page .brand-name,.auth-page .auth-copy h1 { color:#17384b; }
.auth-page .brand-tagline,.auth-page .auth-copy p { color:#627a83; }
.auth-page .auth-secure { color:#3a6670; }
.auth-page .auth-copy { margin:0 0 20px; text-align:center; }
.auth-page .auth-copy h1 { margin:7px 0 7px; font-size:clamp(2rem,4vw,3.05rem); letter-spacing:-.045em; }
.auth-page .auth-copy p { max-width:450px; margin-inline:auto; }
.auth-page .auth-eyebrow { color:#a56b18; }
.kani-login-emblem { position:relative; width:190px; height:190px; display:grid; place-items:center; margin:0 auto 20px; isolation:isolate; animation:kani-emblem-float 4.2s ease-in-out infinite; }
.kani-login-emblem img { z-index:3; width:150px; height:150px; display:block; border:5px solid rgba(255,255,255,.92); border-radius:40px; object-fit:cover; box-shadow:0 22px 52px rgba(20,70,79,.24); }
.kani-login-emblem__glow { position:absolute; z-index:-1; inset:20px; border-radius:34px; background:rgba(51,137,139,.28); filter:blur(18px); animation:kani-glow 3s ease-in-out infinite; }
.kani-login-emblem__orbit { position:absolute; z-index:1; inset:4px; border:1px solid rgba(34,111,119,.25); border-radius:42%; animation:kani-orbit 10s linear infinite; }
.kani-login-emblem__orbit::before { content:""; position:absolute; top:5px; left:25px; width:9px; height:9px; border-radius:50%; background:#d7a844; box-shadow:0 0 0 5px rgba(215,168,68,.14); }
.kani-login-emblem__orbit.orbit-two { inset:11px; border-style:dashed; animation-duration:14s; animation-direction:reverse; }
.kani-login-emblem__orbit.orbit-two::before { top:auto; left:auto; right:5px; bottom:26px; width:7px; height:7px; background:#30936d; }
@keyframes kani-emblem-float { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } }
@keyframes kani-orbit { to { transform:rotate(360deg); } }
@keyframes kani-glow { 0%,100% { opacity:.55; transform:scale(.92); } 50% { opacity:1; transform:scale(1.12); } }
.auth-page .auth-form { width:100%; max-width:500px; margin-inline:auto; display:grid; gap:16px; padding:clamp(19px,3vw,27px); border:1px solid rgba(35,83,96,.16); border-radius:26px; color:#17384b; background:rgba(255,255,255,.84); box-shadow:0 24px 60px rgba(35,73,81,.15),inset 0 1px rgba(255,255,255,.95); backdrop-filter:blur(18px); }
.auth-page .auth-form .form-group label { color:#274e5c; font-size:.7rem; }
.auth-page .auth-form .input { min-height:56px; border:1px solid rgba(34,85,101,.17); border-radius:16px; color:#17384b; background:#edf4f3; box-shadow:inset 0 1px 2px rgba(22,67,79,.04); }
.auth-page .auth-form .input::placeholder { color:#7a9298; }
.auth-page .auth-form .input:hover { border-color:rgba(36,120,125,.38); background:#f5f9f7; }
.auth-page .auth-form .input:focus { border-color:#2c8383; color:#17384b; background:#fff; box-shadow:0 0 0 4px rgba(44,131,131,.13),0 12px 28px rgba(31,84,91,.08); }
.auth-page .auth-form .input-wrap > svg,.auth-page .auth-form .input-wrap > [data-icon] { color:#4f7b82; }
.auth-page .auth-form .input-action { color:#315d68; background:rgba(255,255,255,.68); }
.auth-page .auth-form .btn { min-height:57px; border:0; border-radius:17px; color:#fff; background:linear-gradient(135deg,#1d5268,#2b8581 65%,#4e9270); box-shadow:0 14px 29px rgba(30,91,99,.25); }
.auth-page .auth-form .btn:hover { color:#fff; background:linear-gradient(135deg,#173f57,#257873 65%,#438364); transform:translateY(-2px); }
.auth-page .auth-form-footer { width:100%; max-width:500px; margin:15px auto 0; }
.auth-page .auth-trust,.auth-page .auth-switch { color:#617b83; }
.auth-page .auth-switch a { color:#176a73; font-weight:850; }
.auth-page .auth-trust svg { color:#25855e; }
.auth-page .flash { width:100%; max-width:500px; margin:0 auto 12px; }
.auth-page .auth-visual { position:relative; overflow:hidden; margin:14px; border:1px solid rgba(255,255,255,.22); border-radius:36px; color:#fff; background:
  radial-gradient(circle at 76% 15%,rgba(225,183,86,.25),transparent 25rem),
  radial-gradient(circle at 5% 90%,rgba(67,170,147,.26),transparent 22rem),
  linear-gradient(145deg,#173b56 0%,#225d68 58%,#193f55 100%);
  box-shadow:0 28px 70px rgba(24,63,76,.2);
}
.auth-page .auth-visual::before { background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 40%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 0); background-size:auto,32px 32px; }
.auth-visual-brand { display:flex; align-items:center; gap:13px; margin-bottom:28px; }
.auth-visual-brand img { width:66px; height:66px; border:3px solid rgba(255,255,255,.55); border-radius:20px; object-fit:cover; box-shadow:0 13px 31px rgba(3,28,37,.25); animation:kani-emblem-float 4.8s ease-in-out infinite; }
.auth-visual-brand>span { display:grid; }.auth-visual-brand strong { color:#fff; font-size:1.18rem; letter-spacing:.02em; }.auth-visual-brand small { color:#c7dfe1; font-size:.6rem; }
.auth-page .auth-visual__content h2 { color:#fff; }.auth-page .auth-visual__content h2 em { color:#f5d180; }
.auth-page .auth-visual__content p { color:#d7e8e9; }
.auth-page .auth-product-card { border-color:rgba(255,255,255,.18); background:rgba(10,45,55,.42); backdrop-filter:blur(14px); }
.auth-page .auth-product-grid>span { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.08); }
.auth-page .auth-product-card__head small,.auth-page .auth-product-grid small { color:#c5d9dd; }
.auth-page .feature-pill { border-color:rgba(255,255,255,.18); color:#eff9f8; background:rgba(255,255,255,.08); }
@media(max-width:920px) {
  .auth-page { display:block; }
  .auth-page .auth-main { width:100%; min-height:100dvh; max-width:650px; margin:auto; }
  .auth-page .auth-visual { display:none; }
}
@media(max-width:560px) {
  .auth-page .auth-main { padding:18px 16px 28px; justify-content:flex-start; }
  .auth-page .auth-brand-row { margin-bottom:14px; }
  .auth-page .auth-copy { margin-bottom:15px; }
  .kani-login-emblem { width:166px; height:166px; margin-bottom:12px; }
  .kani-login-emblem img { width:132px; height:132px; border-radius:34px; }
  .auth-page .auth-form { padding:18px 15px; border-radius:22px; }
  .auth-page .auth-form-footer { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .kani-login-emblem,.kani-login-emblem__orbit,.kani-login-emblem__glow,.auth-visual-brand img { animation:none!important; } }

/* Game sessions now open as a real, board-first experience. */
.game-play-page .games-page-header { margin-bottom:10px; padding:12px 16px; border:1px solid rgba(29,75,91,.13); border-radius:20px; background:linear-gradient(145deg,rgba(250,246,235,.95),rgba(228,239,238,.96)); box-shadow:0 12px 32px rgba(35,67,76,.08); }
.game-play-page .games-page-header .page-kicker,.game-play-page .games-page-header .page-subtitle { display:none; }
.game-play-page .games-page-header .page-title { margin:0; font-size:1.24rem; }
.game-session-started .game-launcher__copy { display:none; }
.game-session-started .game-launcher { position:sticky; z-index:22; top:8px; grid-template-columns:1fr; padding:9px; border-radius:19px; background:rgba(244,247,242,.9); backdrop-filter:blur(16px); }
.game-session-started .game-launcher__modes { grid-template-columns:repeat(6,minmax(120px,1fr)); }
.games-app-dedicated>.game-stage.game-stage--launched { min-height:calc(100dvh - 96px); box-shadow:0 30px 78px rgba(14,43,54,.22); }
.games-app-dedicated>.game-stage:fullscreen { width:100vw; height:100dvh; min-height:100dvh; overflow:auto; border:0; border-radius:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:#17333d; }
.games-app-dedicated>.game-stage:fullscreen .game-stage__header { position:sticky; z-index:30; top:0; }
.game-stage--dominoes-four { background:linear-gradient(145deg,#243e42,#172e36)!important; }
.game-stage--dominoes-four .game-stage__header { color:#f8f2e7; background:rgba(20,47,52,.88); }
.domino-four-table { border:12px solid #714a2b!important; background:
  radial-gradient(ellipse at center,rgba(255,255,255,.11),transparent 48%),
  repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 2px,transparent 2px 11px),
  linear-gradient(145deg,#247154,#17523f)!important;
  box-shadow:inset 0 0 0 5px #b7864f,inset 0 0 45px rgba(3,30,23,.55),0 24px 55px rgba(7,29,31,.35)!important;
}
.domino-four-chain { padding:14px; border-radius:20px; background:rgba(7,43,32,.18); }
.domino-four-tile { border-color:#c8b99e!important; background:linear-gradient(145deg,#fffdf3,#e9dfca)!important; box-shadow:0 7px 14px rgba(9,31,26,.28),inset 0 1px #fff!important; }
.domino-four-seat { border-color:rgba(255,255,255,.25)!important; color:#fff!important; background:rgba(16,50,44,.86)!important; box-shadow:0 9px 22px rgba(5,27,23,.24); }
.domino-four-seat.active { box-shadow:0 0 0 4px rgba(239,194,86,.28),0 10px 24px rgba(5,27,23,.3)!important; }
.domino-four-error { display:grid; justify-items:center; gap:7px; padding:22px; border:1px solid rgba(176,69,67,.25); border-radius:18px; color:#6b2f2d; text-align:center; background:#fff0ed; }
.domino-four-error p { margin:0; color:#8a5650; font-size:.62rem; }
.backgammon-cabinet { filter:drop-shadow(0 24px 30px rgba(26,28,25,.25)); }
.backgammon-board { box-shadow:inset 0 0 0 5px rgba(255,232,190,.16),inset 0 0 38px rgba(50,25,12,.45),0 12px 30px rgba(34,34,31,.2)!important; }
@media(max-width:850px) {
  .game-play-page .page { width:100%; padding-inline:6px; }
  .game-play-page .games-page-header { margin:4px 6px 8px; }
  .game-launcher { margin-inline:6px; }
  .game-session-started .game-launcher__modes { display:flex; }
  .game-session-started .game-launch-mode,.game-session-started .game-difficulty { min-width:142px; flex-basis:142px; }
  .games-app-dedicated>.game-stage.game-stage--launched { min-height:calc(100dvh - 84px); border-radius:18px; }
  .domino-four-table { min-height:68dvh; border-width:8px!important; }
}

/* Profile media editor */
.profile-cover--image { background-position:center; background-size:cover; background-repeat:no-repeat; }
.modal-card--profile { width:min(760px,calc(100vw - 24px)); max-height:min(92dvh,920px); overflow:auto; }
.profile-crop-field { padding:14px; border:1px solid var(--border,rgba(35,70,84,.14)); border-radius:18px; background:rgba(246,249,248,.82); }
.profile-crop-preview { width:100%; margin-top:12px; overflow:hidden; border:1px solid rgba(35,70,84,.17); background:#dfe8e8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); }
.profile-crop-preview canvas { display:block; width:100%; height:100%; object-fit:cover; }
.profile-crop-preview--avatar { width:min(260px,100%); aspect-ratio:1; margin-inline:auto; border-radius:50%; }
.profile-crop-preview--cover { aspect-ratio:16/9; border-radius:16px; }
.profile-crop-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:13px; }
.profile-crop-controls label { display:grid; gap:6px; color:var(--muted,#65777f); font-size:.72rem; font-weight:700; }
.profile-crop-controls input[type="range"] { width:100%; accent-color:var(--primary,#265c83); }
@media(max-width:620px) {
  .modal-card--profile { width:calc(100vw - 12px); max-height:96dvh; border-radius:20px; }
  .profile-crop-controls { grid-template-columns:1fr; }
  .profile-crop-field { padding:11px; }
}

/* Internal YouTube hub */
.media-hub-page .page { max-width:1440px; }
.media-hub-header { align-items:center; padding:24px 26px; border:1px solid rgba(33,76,92,.13); border-radius:26px; background:linear-gradient(135deg,rgba(248,247,241,.97),rgba(225,239,239,.96)); box-shadow:0 18px 46px rgba(35,66,78,.09); }
.media-hub-mark { width:78px; height:78px; display:grid; place-items:center; flex:0 0 78px; border-radius:24px; color:#fff; box-shadow:0 16px 32px rgba(26,61,76,.19); }
.media-hub-mark svg { width:38px; height:38px; }
.media-hub-mark--youtube { background:linear-gradient(145deg,#bf3544,#802b39); }
.media-search-panel { margin-top:18px; }
.media-search-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; padding:18px; }
.media-search-form .form-group { margin:0; }
.input-with-icon { position:relative; display:block; }
.input-with-icon>span[data-icon] { position:absolute; z-index:2; inset-inline-start:14px; top:50%; width:19px; height:19px; transform:translateY(-50%); color:var(--muted,#65777f); pointer-events:none; }
.input-with-icon .input { padding-inline-start:44px; }
.embed-panel { margin-top:18px; overflow:hidden; }
.embed-panel .panel-header { align-items:center; gap:15px; }
.embed-shell { position:relative; width:100%; overflow:hidden; border-top:1px solid rgba(32,70,84,.13); background:#14252d; }
.embed-shell iframe { display:block; width:100%; height:100%; border:0; }
.embed-shell--video { aspect-ratio:16/9; min-height:360px; }
@media(max-width:760px) {
  .media-hub-header { padding:19px; }
  .media-hub-mark { width:62px; height:62px; flex-basis:62px; border-radius:20px; }
  .media-search-form { grid-template-columns:1fr; padding:14px; }
  .media-search-form .btn { width:100%; }
  .embed-panel .panel-header { align-items:flex-start; flex-direction:column; }
  .embed-shell--video { min-height:220px; }
}

/* Kani rich internal news reader */
.portal-news-rich{max-width:780px;margin:0 auto;color:#294d63;font-size:clamp(.88rem,1.5vw,1.02rem);line-height:2.05;overflow-wrap:anywhere}
.portal-news-rich p,.portal-news-rich li,.portal-news-rich blockquote{font:inherit;color:inherit;line-height:inherit}
.portal-news-rich h2,.portal-news-rich h3,.portal-news-rich h4{margin:28px 0 12px;color:#173f57;line-height:1.55}
.portal-news-rich ul,.portal-news-rich ol{margin:0 auto 20px;padding-inline-start:24px}
.portal-news-rich blockquote{margin:22px 0;padding:14px 18px;border-inline-start:4px solid #2b6f7e;border-radius:12px;background:rgba(43,111,126,.08)}
.portal-news-rich figure{margin:24px 0}.portal-news-rich img{display:block;width:100%;max-height:680px;object-fit:contain;border-radius:18px;background:#dce6ea}
.portal-news-rich figcaption,.portal-news-gallery figcaption{padding-top:8px;color:#607988;font-size:.72rem;line-height:1.7;text-align:center}
.portal-news-rich a{color:inherit;text-decoration:none;pointer-events:none}
.portal-news-media-grid{max-width:900px;margin:28px auto;display:grid;gap:18px}.portal-news-media-grid--video{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.portal-news-video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:18px;background:#10191e;box-shadow:0 10px 28px rgba(22,48,61,.14)}
.portal-news-video iframe{display:block;width:100%;height:100%;border:0}.portal-news-video-native{display:block;width:100%;max-height:620px;border-radius:18px;background:#10191e}
.portal-news-gallery{max-width:960px;margin:28px auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.portal-news-gallery figure{margin:0;padding:10px;border:1px solid rgba(38,88,125,.12);border-radius:18px;background:#f4f8f9}
.portal-news-gallery img{display:block;width:100%;height:240px;object-fit:cover;border-radius:13px;background:#dce6ea}
@media(max-width:640px){.portal-news-rich{font-size:.92rem}.portal-news-gallery{grid-template-columns:1fr}.portal-news-gallery img{height:auto;max-height:520px;object-fit:contain}}

/* Kani native-search YouTube */
.youtube-empty-state{min-height:330px;display:grid;place-items:center;align-content:center;gap:12px;padding:32px;text-align:center;border:1px dashed rgba(38,92,131,.28);border-radius:22px;color:var(--muted);background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(235,243,242,.82))}
.youtube-empty-state strong{max-width:680px;color:var(--ink);font-size:1rem;line-height:1.7}
.youtube-empty-state>span:last-child{font-size:.75rem;direction:ltr}
.youtube-empty-state__icon{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#c83f43,#8e2430);box-shadow:0 16px 34px rgba(142,36,48,.24)}
.youtube-empty-state__icon svg{width:34px;height:34px}
.youtube-empty-state--error{border-color:rgba(180,72,77,.32);background:rgba(180,72,77,.055)}
@media(max-width:680px){.youtube-empty-state{min-height:250px;padding:24px 16px}}

/* Kani profile polish: lighter cards, clearer type and phone spacing */
.profile-page .profile-cover{min-height:230px;border-color:rgba(40,92,108,.16);border-radius:28px;background:linear-gradient(120deg,#244e67 0%,#357a87 58%,#bd8150 100%);box-shadow:0 20px 48px rgba(34,73,88,.16)}
.profile-page .profile-summary{align-items:center;margin:-70px 24px 0;padding:16px 18px;border:1px solid rgba(35,70,84,.14);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(36,75,90,.13);backdrop-filter:blur(14px)}
.profile-page .profile-summary .avatar{border:6px solid #fff;background:linear-gradient(145deg,#4f9ab6,#2d6d8a);box-shadow:0 12px 30px rgba(31,77,97,.23)}
.profile-page .profile-summary__main h1{color:#172d36;font-size:clamp(1.45rem,3vw,2rem);line-height:1.12;letter-spacing:-.035em}
.profile-page .profile-summary__main p{margin-top:7px;color:#687b82;font-size:.77rem;line-height:1.5}
.profile-page .profile-content{gap:18px;margin-top:22px}
.profile-page .profile-content>.panel,.profile-page .profile-content>aside>.panel,.profile-page .quick-action{border-color:rgba(35,70,84,.12);border-radius:22px;background:rgba(255,255,255,.93);box-shadow:0 12px 30px rgba(39,79,94,.08)}
.profile-page .profile-info-item{padding:15px 2px}
.profile-page .profile-info-icon{width:42px;height:42px;border-radius:14px;color:#2a7185;background:linear-gradient(145deg,rgba(50,133,148,.14),rgba(197,132,77,.1))}
.profile-page .profile-info-main span{font-size:.71rem;letter-spacing:.015em}
.profile-page .profile-info-main strong{margin-top:3px;color:#203942;font-size:.88rem;line-height:1.45;overflow-wrap:anywhere}
.profile-page .modal-card--profile{width:min(760px,calc(100vw - 24px));border-radius:26px;box-shadow:0 30px 80px rgba(21,55,67,.28)}
.profile-page .modal-card--profile .modal-header{padding:19px 21px;border-bottom:1px solid rgba(35,70,84,.11)}
.profile-page .modal-card--profile .modal-body{gap:15px;padding:20px}
.profile-page .modal-card--profile .input{min-height:48px;border-radius:14px;background:#fbfdfc}
@media(max-width:720px){.profile-page .profile-cover{min-height:175px;border-radius:20px}.profile-page .profile-summary{align-items:flex-start;margin:-54px 12px 0;padding:14px;gap:13px}.profile-page .profile-summary .avatar-xl{width:88px;height:88px;flex-basis:88px}.profile-page .profile-summary__action{width:100%;padding:0}.profile-page .profile-summary__action .btn{width:100%}.profile-page .profile-content{margin-top:14px}}

/* Kani native YouTube search cards, never a pasted-link form. */
.youtube-inside-note{display:flex;align-items:center;gap:7px;margin:0 18px 16px;color:var(--muted);font-size:.74rem;font-weight:750}
.youtube-inside-note svg{width:16px;color:#2d7d9d}
.youtube-results-panel{margin-top:18px;padding:18px}
.youtube-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.youtube-result-card{min-width:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr;border:1px solid rgba(38,92,131,.14);border-radius:18px;color:var(--ink);background:rgba(255,255,255,.92);text-decoration:none;box-shadow:0 8px 22px rgba(31,73,99,.09);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.youtube-result-card:hover{transform:translateY(-3px);border-color:rgba(169,49,60,.38);box-shadow:0 14px 32px rgba(31,73,99,.15)}
.youtube-result-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#152430}
.youtube-result-card__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .22s ease}
.youtube-result-card:hover .youtube-result-card__media img{transform:scale(1.035)}
.youtube-result-card__media>small{position:absolute;inset:auto auto 8px 8px;padding:4px 7px;border-radius:7px;color:#fff;background:rgba(10,18,24,.84);font-size:.65rem;font-weight:850;direction:ltr}
.youtube-result-card__play{position:absolute;inset:50% auto auto 50%;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(169,49,60,.92);box-shadow:0 8px 22px rgba(0,0,0,.24);transform:translate(-50%,-50%)}
.youtube-result-card__play svg{width:22px;height:22px}
.youtube-result-card__body{min-width:0;display:grid;align-content:start;gap:7px;padding:13px}
.youtube-result-card__body>strong{display:-webkit-box;overflow:hidden;color:var(--ink);font-size:.82rem;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.youtube-result-card__body>span{overflow:hidden;color:var(--muted);font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}
.youtube-result-card__meta{display:flex!important;gap:8px;white-space:normal!important}
.youtube-result-card__meta b{font-size:.61rem;font-weight:700}
.youtube-player-panel{margin-top:18px}
@media(max-width:1050px){.youtube-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.youtube-results-panel{padding:13px}.youtube-result-grid{grid-template-columns:1fr;gap:11px}.youtube-result-card{grid-template-columns:42% minmax(0,1fr);grid-template-rows:1fr}.youtube-result-card__media{height:100%;min-height:112px;aspect-ratio:auto}.youtube-result-card__play{width:38px;height:38px}.youtube-result-card__body{padding:11px}.youtube-inside-note{margin-inline:14px}}

/* Kani light-surface contrast guard and complete Friends centre. */
.settings-page,.profile-page,.contacts-page,.media-hub-page,.notifications-page {
  color-scheme:light;
  --ink:#17384f;
  --muted:#657d89;
  --muted-strong:#294b5c;
  --line:rgba(38,82,99,.14);
  --line-strong:rgba(38,82,99,.24);
  --panel:#fffdf8;
  --panel-solid:#fffdf8;
  --panel-raised:#f1f5f3;
  color:#17384f;
  background:linear-gradient(145deg,#dfe9e8,#f1ede4 52%,#e3eceb);
}
.settings-page .sidebar,.profile-page .sidebar,.contacts-page .sidebar,.media-hub-page .sidebar,.notifications-page .sidebar { color:#fff; background:linear-gradient(180deg,#172f4a,#23465b); }
.settings-page .topbar,.profile-page .topbar,.contacts-page .topbar,.media-hub-page .topbar,.notifications-page .topbar { color:#fff; background:rgba(27,58,76,.96); }
.settings-page .panel,.profile-page .panel,.contacts-page .panel,.media-hub-page .panel {
  color:#17384f;
  border-color:rgba(38,82,99,.13);
  background:rgba(255,253,248,.94);
  box-shadow:0 13px 32px rgba(31,65,77,.1);
}
.settings-page .panel:hover,.profile-page .panel:hover,.contacts-page .panel:hover,.media-hub-page .panel:hover { border-color:rgba(45,118,128,.29); box-shadow:0 17px 38px rgba(31,65,77,.14); }
.settings-page .panel-title h2,.settings-page .panel-title h3,.profile-page .panel-title h2,.profile-page .panel-title h3,.media-hub-page .panel-title h2,.media-hub-page .panel-title h3 { color:#17384f; }
.settings-page .input,.settings-page .select,.settings-page .textarea,
.profile-page .input,.profile-page .select,.profile-page .textarea,
.contacts-page .input,.contacts-page .select,.contacts-page .textarea,
.media-hub-page .input,.media-hub-page .select,.media-hub-page .textarea {
  color:#17384f;
  border-color:rgba(38,82,99,.18);
  background:#f7faf8;
}
.settings-page .input::placeholder,.profile-page .input::placeholder,.contacts-page .input::placeholder,.media-hub-page .input::placeholder { color:#738995; }
.settings-page .form-group label,.profile-page .form-group label,.contacts-page .form-group label,.media-hub-page .form-group label { color:#294b5c; }
.settings-page .settings-nav a { color:#496879; background:transparent; }
.settings-page .settings-nav a:hover { color:#1d5669; background:#e3efed; }
.settings-page .settings-nav a.active { color:#fff; background:linear-gradient(135deg,#2d7180,#347f69); box-shadow:0 7px 18px rgba(38,102,103,.18); }
.settings-page .settings-row__main strong { color:#1e3d4c; }
.settings-page .settings-row__main span,.settings-page .form-hint { color:#667f8b; }
.profile-page .quick-action { color:#244756; }
.profile-page .quick-action:hover { color:#17384f; background:#f5faf7; }
.profile-page .modal-card--profile { color:#17384f; background:#fffdf8; }
.media-hub-page .media-hub-header { color:#17384f; }
.media-hub-page .page-title,.media-hub-page .youtube-result-card,.media-hub-page .youtube-result-card__body>strong { color:#17384f; }
.media-hub-page .page-subtitle,.media-hub-page .panel-title p,.media-hub-page .youtube-result-card__body>span { color:#657d89; }
.notifications-page .notification-panel,.notifications-page .contact-request-card,.notifications-page .notification-card { color:#17384f; }
.notifications-page .notification-panel h2,.notifications-page .contact-request-card strong,.notifications-page .notification-card strong { color:#17384f; }
.notifications-page .contact-request-card__copy span,.notifications-page .notification-card p,.notifications-page .notification-card small,.notifications-page .contact-request-card small { color:#657d89; }

.auth-page .auth-main,.auth-page .auth-copy h1,.auth-page .auth-form label,.auth-page .auth-switch { color:#17384f; }
.auth-page .auth-copy p,.auth-page .auth-trust,.auth-page .form-hint { color:#657d89; }
.auth-page .auth-form .input { color:#17384f; background:#f8faf8; }
.auth-page .auth-form .input::placeholder { color:#768b94; }
.auth-language-switch { position:absolute; z-index:7; inset-block-start:26px; inset-inline-end:clamp(20px,5vw,60px); display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid rgba(35,83,96,.16); border-radius:999px; color:#245a68; background:rgba(255,255,255,.68); font-size:.71rem; font-weight:850; text-decoration:none; backdrop-filter:blur(10px); }
.auth-language-switch:hover { color:#173f52; border-color:rgba(39,125,128,.36); background:#fff; }
.auth-language-switch svg { width:16px; height:16px; }
.register-page .auth-main { justify-content:flex-start; padding-block:30px; }
.register-page .auth-brand-row { margin-bottom:8px; }
.register-page .kani-register-emblem { width:142px; height:142px; margin-bottom:8px; }
.register-page .kani-register-emblem img { width:112px; height:112px; border-radius:31px; }
.register-page .auth-copy { margin-bottom:14px; }
.register-page .auth-form { max-width:560px; }
.auth-page .auth-terms { align-items:flex-start; color:#385967; line-height:1.65; }
.auth-page .auth-terms input { flex:0 0 auto; margin-top:3px; accent-color:#2b8273; }
.auth-register-footer { max-width:560px!important; }
@media(max-width:560px) {
  .auth-language-switch { position:static; align-self:flex-end; margin:-4px 0 8px; }
  .register-page .kani-register-emblem { width:118px; height:118px; }
  .register-page .kani-register-emblem img { width:92px; height:92px; border-width:4px; border-radius:25px; }
  .register-page .auth-form .form-grid { grid-template-columns:1fr; }
}

.contacts-page .page { max-width:1440px; }
.friends-hero { position:relative; overflow:hidden; align-items:center; padding:clamp(23px,3.5vw,40px); border:1px solid rgba(255,255,255,.24); border-radius:28px; color:#fff; background:radial-gradient(circle at 8% 12%,rgba(78,173,151,.3),transparent 34%),linear-gradient(135deg,#173c57,#246271 62%,#79603a); box-shadow:0 22px 55px rgba(25,58,73,.2); }
.friends-hero::after { content:""; position:absolute; inset:auto -65px -95px auto; width:240px; height:240px; border:38px solid rgba(240,198,102,.11); border-radius:50%; }
.friends-hero>div,.friends-hero>.btn { position:relative; z-index:1; }
.friends-hero .eyebrow { color:#f5d17b; }
.friends-hero h1 { margin:6px 0 9px; color:#fff; font-size:clamp(1.75rem,3.4vw,3rem); letter-spacing:-.045em; }
.friends-hero p { max-width:760px; margin:0; color:#d9eaec; line-height:1.75; }
.friends-hero .btn { color:#fff; border-color:rgba(255,255,255,.27); background:rgba(255,255,255,.11); }
.friends-app { display:grid; gap:16px; margin-top:18px; }
.friends-status { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px 14px; border:1px solid rgba(174,117,38,.25); border-radius:17px; color:#5e4927; background:#fff5dc; box-shadow:0 7px 18px rgba(75,62,30,.07); }
.friends-status[hidden] { display:none!important; }
.friends-status>span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#895d1f; background:#f7dfac; }
.friends-status>span svg { width:21px; }
.friends-status>div { min-width:0; }
.friends-status strong,.friends-status small { display:block; }
.friends-status strong { color:#563f1e; font-size:.76rem; }
.friends-status small { margin-top:3px; color:#78623e; font-size:.62rem; line-height:1.55; }
.friends-status.is-error { border-color:rgba(169,62,72,.23); color:#77343b; background:#ffebed; }
.friends-status.is-error>span { color:#9b3e48; background:#f7d3d7; }
.friends-status.is-error strong { color:#76323a; }
.friends-status.is-error small { color:#8c5358; }
.friends-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.friends-overview article { min-height:96px; display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:13px; padding:16px 18px; border:1px solid rgba(36,79,95,.12); border-radius:20px; color:#17384f; background:rgba(255,253,248,.94); box-shadow:0 10px 26px rgba(35,68,78,.08); }
.friends-overview article>span { width:48px; height:48px; grid-row:1/3; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(145deg,#367d82,#23566d); }
.friends-overview article:nth-child(2)>span { background:linear-gradient(145deg,#a85d5e,#773d50); }
.friends-overview article:nth-child(3)>span { background:linear-gradient(145deg,#4d946e,#2d7254); }
.friends-overview svg { width:23px; }
.friends-overview strong { align-self:end; font-size:1.35rem; line-height:1; }
.friends-overview small { align-self:start; margin-top:5px; color:#687f8b; font-size:.67rem; }
.friends-tabs { display:flex; gap:7px; overflow-x:auto; padding:6px; border:1px solid rgba(36,79,95,.13); border-radius:18px; background:rgba(232,241,240,.88); box-shadow:0 7px 18px rgba(35,68,78,.06); scrollbar-width:none; }
.friends-tabs::-webkit-scrollbar { display:none; }
.friends-tabs button { min-width:145px; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; flex:1; padding:9px 14px; border:0; border-radius:13px; color:#4d6b78; background:transparent; font:inherit; font-size:.75rem; font-weight:850; cursor:pointer; }
.friends-tabs button:hover { color:#20596a; background:rgba(255,255,255,.7); }
.friends-tabs button.active { color:#fff; background:linear-gradient(135deg,#2e7580,#347c69); box-shadow:0 7px 18px rgba(40,105,101,.2); }
.friends-tabs button svg { width:18px; }
.friends-tabs button b { min-width:21px; height:21px; display:grid; place-items:center; padding:0 5px; border-radius:999px; color:inherit; background:rgba(255,255,255,.22); font-size:.58rem; }
.friends-tabs button:not(.active) b { color:#345f70; background:#d7e6e6; }
.friends-panel { min-width:0; overflow:hidden; padding:18px; border:1px solid rgba(36,79,95,.13); border-radius:24px; color:#17384f; background:rgba(255,253,248,.95); box-shadow:0 16px 38px rgba(35,68,78,.1); }
.friends-panel__head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:10px; padding:0 3px 13px; border-bottom:1px solid rgba(36,79,95,.1); }
.friends-panel__head h2 { margin:4px 0 0; color:#17384f; font-size:1.05rem; }
.friends-panel__head .eyebrow { color:#9a681e; }
.friends-panel__head>b { min-width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:#245266; background:#dcebea; }
.friends-card-list { display:grid; gap:8px; }
.friend-card { min-width:0; min-height:76px; display:flex; align-items:center; gap:13px; padding:11px 12px; border:1px solid rgba(36,79,95,.11); border-radius:17px; color:#17384f; background:#f8faf7; transition:border-color .17s ease,transform .17s ease,box-shadow .17s ease; }
.friend-card:hover { transform:translateY(-1px); border-color:rgba(43,128,128,.3); box-shadow:0 8px 20px rgba(35,68,78,.08); }
.friend-card.is-busy { opacity:.65; }
.friend-card__avatar { position:relative; display:block; flex:0 0 auto; }
.friend-card__avatar .presence { border-color:#f8faf7; }
.friend-card__main { min-width:0; flex:1; display:grid; gap:3px; }
.friend-card__main strong,.friend-card__main span,.friend-card__main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-card__main strong { color:#17384f; font-size:.84rem; }
.friend-card__main span,.friend-card__main small { color:#6b818b; font-size:.65rem; }
.friend-card__actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.friend-card__actions .btn-ghost { color:#536f7a; border-color:rgba(36,79,95,.12); background:#eaf1ef; }
.friend-card__actions .btn-ghost:hover { color:#8e3441; background:#f8e8e9; }
.friends-presence { display:inline-flex!important; align-items:center; gap:6px; }
.friends-presence.online { color:#247657; }
.friends-presence i { width:7px; height:7px; border-radius:50%; background:#2b9b68; box-shadow:0 0 0 3px rgba(43,155,104,.11); }
.friends-requests-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.friends-request-column { min-width:0; }
.friends-request-column+ .friends-request-column { padding-inline-start:16px; border-inline-start:1px solid rgba(36,79,95,.1); }
.friends-search { display:grid; gap:8px; margin-bottom:17px; padding:15px; border:1px solid rgba(36,79,95,.11); border-radius:18px; background:#eef5f3; }
.friends-search>label { color:#294d5c; font-size:.72rem; font-weight:800; }
.friends-search__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.friends-search .input { min-height:49px; background:#fff; }
.friends-loading { min-height:155px; display:flex; align-items:center; justify-content:center; gap:10px; color:#667d88; }
.friends-empty { min-height:170px; display:grid; place-items:center; align-content:center; gap:7px; padding:24px; color:#6a808b; text-align:center; }
.friends-empty>span { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:#3b7a83; background:#dfeceb; }
.friends-empty svg { width:25px; }
.friends-empty strong { color:#284a58; }
.friends-empty small { max-width:430px; line-height:1.6; }
@media(max-width:840px) {
  .friends-requests-grid { grid-template-columns:1fr; }
  .friends-request-column+.friends-request-column { padding:16px 0 0; border:0; border-top:1px solid rgba(36,79,95,.1); }
}
@media(max-width:620px) {
  .friends-status { grid-template-columns:38px minmax(0,1fr); padding:10px; }
  .friends-status>span { width:38px; height:38px; }
  .friends-status .btn { grid-column:1/-1; width:100%; }
  .friends-hero { align-items:flex-start; padding:20px; }
  .friends-hero .btn { width:100%; }
  .friends-overview { grid-template-columns:1fr 1fr 1fr; gap:7px; }
  .friends-overview article { min-height:82px; grid-template-columns:36px 1fr; column-gap:8px; padding:10px; border-radius:16px; }
  .friends-overview article>span { width:36px; height:36px; border-radius:12px; }
  .friends-overview svg { width:18px; }
  .friends-overview strong { font-size:1rem; }
  .friends-overview small { font-size:.53rem; }
  .friends-tabs { scroll-snap-type:x mandatory; }
  .friends-tabs button { min-width:132px; flex:0 0 132px; scroll-snap-align:start; }
  .friends-panel { padding:12px; border-radius:19px; }
  .friend-card { align-items:flex-start; flex-wrap:wrap; padding:10px; }
  .friend-card__main { width:calc(100% - 78px); flex:none; padding-top:6px; }
  .friend-card__actions { width:100%; }
  .friend-card__actions .btn { flex:1; }
  .friends-search__row { grid-template-columns:1fr; }
}

/* Kani compact exchange: essentials first, provenance second. */
.exchange-page .exchange-dashboard { gap:12px; }
.exchange-page .exchange-hero { padding:17px 19px 18px; border-radius:22px; }
.exchange-page .exchange-hero__body { grid-template-columns:1fr; margin-top:13px; }
.exchange-page .exchange-hero__copy { min-width:0; }
.exchange-page .exchange-eyebrow { margin-bottom:3px; font-size:.6rem; }
.exchange-page .exchange-hero h1 { font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-.035em; }
.exchange-page .exchange-hero__copy p { max-width:760px; margin-top:6px; font-size:.73rem; line-height:1.45; }
.exchange-page .exchange-snapshot,
.exchange-page .exchange-meta-grid,
.exchange-page .exchange-source-details,
.exchange-page .exchange-section-tabs,
.exchange-page .exchange-chart-panel { display:none!important; }
.exchange-page #exchangeTimestampNotice { display:none!important; }
.exchange-key-section { margin-top:15px; }
.exchange-key-title { display:block; margin-bottom:7px; color:#e5f4ee; font-size:.64rem; font-weight:850; }
.exchange-key-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.exchange-key-rate { min-width:0; display:grid; grid-template-columns:auto minmax(42px,1fr) minmax(54px,auto) minmax(54px,auto); align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(255,255,255,.16); border-radius:14px; color:#fff; background:rgba(255,255,255,.09); }
.exchange-key-rate__flag { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.1); font-size:1rem; }
.exchange-key-rate span { min-width:0; }
.exchange-key-rate strong,.exchange-key-rate small,.exchange-key-rate b { display:block; white-space:nowrap; }
.exchange-key-rate strong { font-size:.75rem; }
.exchange-key-rate small { color:rgba(244,252,249,.66); font-size:.51rem; }
.exchange-key-rate b { overflow:hidden; font-size:.71rem; font-variant-numeric:tabular-nums; text-overflow:ellipsis; }
.exchange-page .exchange-content-grid { grid-template-columns:minmax(330px,400px) minmax(0,1fr); grid-template-areas:"converter rates" "telegram rates"; align-items:start; gap:12px; }
.exchange-page .exchange-converter-panel { grid-area:converter; position:static; }
.exchange-page .exchange-rates-panel { grid-area:rates; }
.exchange-page .exchange-telegram-card { grid-area:telegram; }
.exchange-page .exchange-converter-heading { padding:15px 15px 3px; }
.exchange-page .converter { padding:12px 15px 15px; gap:8px; }
.exchange-page .converter-field { padding:10px; border-radius:14px; }
.exchange-page .converter-row .input,.exchange-page .converter-row .select { min-height:42px; }
.exchange-page .converter-swap { width:38px; height:38px; }
.exchange-page .converter-result { min-height:78px; padding:11px 13px; }
.exchange-page .converter-result strong { font-size:1.35rem; }
.exchange-page .converter-security { margin-top:0; }
.exchange-page .exchange-rate-table-wrap { display:none!important; }
.exchange-page .exchange-rate-cards { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 13px 13px; }
.exchange-page .exchange-panel-header { padding:15px 15px 10px; }
.exchange-page .exchange-list-summary { padding:0 15px 9px; }
.exchange-page .exchange-rate-card { padding:11px; border-radius:14px; }
.exchange-page .exchange-rate-card__values { margin-top:9px; }
.exchange-page .currency-flag,.exchange-page .exchange-key-rate__flag { font-size:1.2rem; line-height:1; }
.exchange-page .converter-row select,.exchange-page .exchange-chart-controls select { font-family:inherit; }
.exchange-client-refresh { display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.17); border-radius:14px; color:#f8fcff; background:rgba(255,255,255,.07); }
.exchange-client-refresh__icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; color:#d8edff; background:rgba(118,183,232,.14); }
.exchange-client-refresh__icon svg { width:17px; height:17px; }
.exchange-client-refresh>span:last-child { min-width:0; }
.exchange-client-refresh small,.exchange-client-refresh strong { display:block; }
.exchange-client-refresh small { color:#dcebf4; font-size:.64rem; }
.exchange-client-refresh strong { margin-top:2px; color:#fff; font-size:.72rem; font-variant-numeric:tabular-nums; }
.exchange-client-refresh[data-state="checking"] .exchange-client-refresh__icon svg { animation:exchange-spin .8s linear infinite; }
.exchange-client-refresh[data-state="error"] { border-color:rgba(255,210,126,.44); background:rgba(106,62,23,.38); }
.exchange-client-refresh[data-state="error"] small { color:#ffe4ad; }
.exchange-client-refresh[data-state="paused"] { opacity:.82; }
.exchange-page .exchange-telegram-card { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr); gap:9px; padding:12px; border:1px solid rgba(36,79,95,.12); border-radius:17px; color:#294d5c; background:rgba(247,250,247,.92); box-shadow:0 7px 18px rgba(35,61,61,.07); }
.exchange-page .exchange-telegram-card[hidden] { display:none!important; }
.exchange-telegram-card__icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,#2d8eb4,#247461); }
.exchange-telegram-card__icon svg { width:19px; }
.exchange-telegram-card>div { min-width:0; }
.exchange-telegram-card small,.exchange-telegram-card strong,.exchange-telegram-card>div>span { display:block; }
.exchange-telegram-card small { color:#6b8086; font-size:.58rem; font-weight:800; }
.exchange-telegram-card strong { margin-top:2px; color:#183e4b; font-size:.91rem; font-variant-numeric:tabular-nums; }
.exchange-telegram-card>div>span { margin-top:2px; color:#687d82; font-size:.57rem; }
.exchange-telegram-card>a { grid-column:1/-1; overflow:hidden; color:#286a79; font-size:.6rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.exchange-page .exchange-disclaimer { padding:11px 13px; border-radius:14px; }

@media(max-width:880px) {
  .exchange-page .exchange-content-grid { grid-template-columns:1fr; grid-template-areas:"converter" "telegram" "rates"; }
  .exchange-page .exchange-rate-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .exchange-page .exchange-dashboard { gap:9px; }
  .exchange-page .exchange-hero { padding:13px; border-radius:18px; }
  .exchange-page .exchange-hero__body { margin-top:8px; }
  .exchange-page .exchange-hero h1 { font-size:1.34rem; }
  .exchange-page .exchange-hero__copy p { max-height:2.9em; overflow:hidden; margin-top:4px; font-size:.64rem; }
  .exchange-page .exchange-refresh-button { width:34px; min-height:34px; flex-basis:34px; }
  .exchange-key-section { margin-top:10px; }
  .exchange-key-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .exchange-key-rate { grid-template-columns:auto 1fr auto; gap:6px; padding:7px; border-radius:11px; }
  .exchange-key-rate__flag { width:26px; height:26px; font-size:.85rem; }
  .exchange-key-rate>span:nth-child(4) { display:none; }
  .exchange-key-rate b { font-size:.66rem; }
  .exchange-page .exchange-alerts { gap:6px; }
  .exchange-page .exchange-notice { padding:9px 11px; font-size:.62rem; }
  .exchange-page .exchange-converter-heading { padding:12px 12px 2px; }
  .exchange-page .converter { padding:9px 12px 12px; }
  .exchange-page .converter-field { padding:8px; }
  .exchange-page .converter-quick-amounts { display:none; }
  .exchange-page .exchange-rate-cards { grid-template-columns:1fr; padding:0 10px 10px; }
  .exchange-page .exchange-panel-header { padding:12px 12px 8px; }
  .exchange-page .exchange-list-summary { padding:0 12px 8px; }
  .exchange-page .exchange-disclaimer { font-size:.61rem; }
}

/* Chat composer/contact profile: fixed visual controls with bidi-aware message text. */
.chat-page .chat-profile-trigger {
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  gap:11px;
  padding:2px;
  border:0;
  border-radius:13px;
  color:inherit;
  background:transparent;
  text-align:start;
  cursor:pointer;
}
.chat-page .chat-profile-trigger:hover,.chat-page .chat-profile-trigger:focus-visible { background:rgba(255,255,255,.08); outline:none; }
.chat-page .chat-profile-trigger .avatar-wrap { flex:0 0 auto; }
.chat-page .chat-profile-trigger .chat-contact { min-width:0; flex:1; }
.chat-page .composer { direction:ltr; }
.chat-page .composer-input { text-align:start; unicode-bidi:plaintext; }
.chat-page .composer-emoji-button { order:0; }
.chat-page #attachmentButton { order:1; }
.chat-page .composer-input { order:2; }
.chat-page .composer-voice,.chat-page .composer-send { order:3; flex:0 0 44px; }
.chat-page .chat-list-status {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  margin:0 8px 10px;
  padding:9px 10px;
  border:1px solid rgba(181,119,34,.24);
  border-radius:12px;
  color:#664c24;
  background:#fff3d7;
  box-shadow:0 5px 15px rgba(75,62,30,.08);
}
.chat-page .chat-list-status[hidden] { display:none!important; }
.chat-page .chat-list-status>span { min-width:0; display:flex; align-items:center; gap:8px; }
.chat-page .chat-list-status>span>svg { width:18px; flex:0 0 18px; }
.chat-page .chat-list-status>span>span { min-width:0; }
.chat-page .chat-list-status strong,.chat-page .chat-list-status small { display:block; }
.chat-page .chat-list-status strong { font-size:.61rem; }
.chat-page .chat-list-status small { margin-top:2px; overflow:hidden; font-size:.52rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-page .chat-list-status .btn { flex:0 0 auto; }
.chat-contact-info-card { width:min(520px,calc(100vw - 24px)); max-height:min(88vh,820px); overflow:hidden; }
.chat-contact-info-card .modal-body { overflow-y:auto; }
.chat-details-profile-actions { display:flex; justify-content:center; gap:12px; margin-top:16px; }
.chat-details-profile-actions button { min-width:78px; display:grid; justify-items:center; gap:5px; padding:10px 13px; border:1px solid rgba(42,116,101,.18); border-radius:14px; color:#287862; background:#edf7f3; cursor:pointer; }
.chat-details-profile-actions svg { width:21px; height:21px; }
.chat-details-profile-actions span { font-size:.62rem; font-weight:800; }
.chat-details-count { min-width:25px; height:25px; display:grid; place-items:center; padding-inline:6px; border-radius:99px; color:#286d5d; background:#e5f3ee; font-size:.58rem; font-weight:850; }
.chat-details-categories { display:flex; gap:6px; margin:0 0 10px; }
.chat-details-categories span { flex:1; padding:7px 5px; border-radius:9px; color:#617b84; background:#edf3f4; text-align:center; font-size:.55rem; font-weight:800; }
.chat-details-media-grid .chat-details-video { aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:6px; overflow:hidden; padding:8px; border-radius:8px; color:#fff; background:linear-gradient(145deg,#397d8f,#285e72); text-align:center; }
.chat-details-media-grid .chat-details-video span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.16); }
.chat-details-media-grid .chat-details-video svg { width:18px; }
.chat-details-media-grid .chat-details-video strong { width:100%; overflow:hidden; font-size:.52rem; text-overflow:ellipsis; white-space:nowrap; }
.chat-details-links { display:grid; gap:6px; margin:10px 0; }
.chat-details-links a { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:9px; padding:9px; border:1px solid rgba(36,82,110,.12); border-radius:11px; color:#244e66; background:#edf4f6; }
.chat-details-links a>svg { width:18px; }
.chat-details-links a span { min-width:0; }
.chat-details-links strong,.chat-details-links small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-details-links strong { font-size:.62rem; }.chat-details-links small { color:#6d8592; font-size:.5rem; }
@media(max-width:620px) {
  .chat-contact-info-modal { align-items:flex-end; padding:0; }
  .chat-contact-info-card { width:100%; max-height:92dvh; border-radius:24px 24px 0 0; }
  .chat-page .chat-profile-trigger { gap:8px; }
  .chat-page .composer .composer-emoji-button { display:inline-grid!important; }
}

/* v4.4.12 mobile messenger viewport contract.
   The app shell follows the Visual Viewport (height + offsetTop), instead of
   the taller layout viewport that Android leaves behind the software keyboard. */
@media (max-width:760px) {
  html.chat-viewport-lock,
  html.chat-viewport-lock body.chat-page {
    width:100%;
    height:100%;
    max-height:100%;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  html.chat-viewport-lock body.chat-page { margin:0; }
  html.chat-viewport-lock body.chat-page .app-main {
    position:fixed;
    z-index:0;
    inset-inline:0;
    top:var(--chat-viewport-top,0px);
    bottom:auto;
    width:100%;
    height:var(--chat-viewport-height,100dvh);
    min-height:0;
    max-height:var(--chat-viewport-height,100dvh);
    overflow:hidden;
  }
  html.chat-viewport-lock body.chat-page .page,
  html.chat-viewport-lock body.chat-page .chat-shell,
  html.chat-viewport-lock body.chat-page .chat-list-pane,
  html.chat-viewport-lock body.chat-page .chat-main-pane,
  html.chat-viewport-lock body.chat-page .chat-conversation {
    height:100%;
    min-height:0;
    max-height:100%;
  }
  html.chat-viewport-lock body.chat-page .chat-main-pane {
    position:absolute;
    inset:0;
    width:100%;
    overflow:hidden;
  }
  html.chat-viewport-lock body.chat-page .message-list {
    min-height:0;
    flex:1 1 0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    overflow-anchor:none;
    touch-action:pan-y;
  }
  html.chat-viewport-lock body.chat-page .composer-wrap {
    position:relative;
    inset:auto;
    flex:0 0 auto;
    width:100%;
    max-height:calc(var(--chat-viewport-height,100dvh) - 76px);
    margin-top:auto;
    transform:translateZ(0);
  }
  html.chat-viewport-lock body.chat-page .composer-input {
    max-height:min(130px,calc(var(--chat-viewport-height,100dvh) - 150px));
  }
  /* The visual viewport already excludes the keyboard. Do not add the device
     home-indicator inset a second time while the keyboard is showing. */
  html.chat-keyboard-open body.chat-page .composer {
    padding-bottom:7px;
  }
}

/* v4.4.12 social inbox + 24-hour Status stories */
.chat-page .chat-list-pane {
  color:#172f42;
  background:#fff;
}
.chat-page .chat-list-header {
  border-bottom:0;
  background:rgba(255,255,255,.96);
}
.chat-page .chat-list-heading__icon {
  color:#fff;
  background:linear-gradient(145deg,#ef2d72,#7437da);
  box-shadow:0 8px 18px rgba(168,43,138,.22);
}
.chat-page .chat-list-heading h1 { color:#112c40; }
.chat-page .chat-list-heading small { color:#728795; }
.chat-page .chat-search {
  border:0;
  color:#708592;
  background:#f0f3f5;
  box-shadow:none;
}
.chat-page .chat-search input { color:#17384d; }
.chat-stories {
  flex:0 0 auto;
  min-width:0;
  padding:0 0 9px;
  border-bottom:1px solid #edf0f2;
  background:#fff;
}
.chat-stories__head {
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 17px 7px;
}
.chat-stories__head strong { color:#19364a; font-size:.76rem; }
.chat-stories__head small {
  padding:2px 7px;
  border-radius:999px;
  color:#7b8790;
  background:#f2f4f5;
  font-size:.54rem;
  font-weight:800;
}
.chat-stories__refresh {
  display:grid;
  width:26px;
  height:26px;
  margin-inline-start:auto;
  padding:0;
  place-items:center;
  border:0;
  border-radius:50%;
  color:#607784;
  background:transparent;
  cursor:pointer;
}
.chat-stories__refresh svg { width:15px; }
.chat-stories__refresh.loading svg { animation:spin .8s linear infinite; }
.chat-stories__rail {
  display:flex;
  min-width:0;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 13px 3px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.chat-stories__rail::-webkit-scrollbar { display:none; }
.status-story-stack {
  position:relative;
  display:block;
  width:64px;
  min-width:64px;
  scroll-snap-align:start;
}
.status-story-stack .status-story { scroll-snap-align:none; }
.status-story-add {
  position:absolute;
  z-index:2;
  inset:23px -7px auto auto;
  display:grid;
  width:44px;
  height:44px;
  padding:0;
  place-items:center;
  border:0;
  background:transparent;
  cursor:pointer;
}
[dir="rtl"] .status-story-add { right:auto; left:-7px; }
.status-story-add > span {
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#1787e8;
  box-shadow:0 3px 8px rgba(23,80,119,.2);
}
.status-story-add svg { width:12px; height:12px; stroke-width:2.5; }
.status-story {
  display:flex;
  width:64px;
  min-width:64px;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:0;
  border:0;
  color:#2a4658;
  background:none;
  font:inherit;
  font-size:.59rem;
  font-weight:700;
  cursor:pointer;
  scroll-snap-align:start;
}
.status-story > span:last-child {
  width:100%;
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.status-story__ring {
  position:relative;
  display:grid;
  width:57px;
  height:57px;
  padding:3px;
  place-items:center;
  border-radius:50%;
  background:#d9e0e4;
}
.status-story.has-unviewed .status-story__ring {
  background:linear-gradient(145deg,#f9ce34 5%,#ee2a7b 47%,#6228d7 92%);
}
.status-story.is-viewed .status-story__ring { background:#c9d1d6; }
.status-story__ring .avatar {
  width:51px;
  height:51px;
  border:2px solid #fff;
  color:#fff;
  background:linear-gradient(145deg,#2b698e,#319c79);
  font-size:.86rem;
}
.status-story__ring .avatar img { width:100%; height:100%; object-fit:cover; }
.status-story__ring > i {
  position:absolute;
  inset:auto -1px -1px auto;
  display:grid;
  width:21px;
  height:21px;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#1787e8;
}
.status-story__ring > i svg { width:12px; height:12px; stroke-width:2.5; }
.status-story--add .status-story__ring { padding:0; background:transparent; }
.status-story--skeleton { pointer-events:none; }
.status-story--skeleton i {
  width:57px;
  height:57px;
  border-radius:50%;
  background:linear-gradient(90deg,#edf1f3 25%,#f8fafb 45%,#edf1f3 65%);
  background-size:220% 100%;
  animation:status-shimmer 1.25s linear infinite;
}
.status-story--skeleton b { width:46px; height:7px; border-radius:5px; background:#edf1f3; }
@keyframes status-shimmer { to { background-position:-220% 0; } }
.chat-stories__notice {
  margin:6px 13px 0;
  padding:7px 9px;
  border-radius:9px;
  color:#546d7b;
  background:#f3f6f7;
  font-size:.61rem;
  cursor:pointer;
}
.chat-stories__notice.error { color:#a63e50; background:#fff0f2; }

/* Flat, Instagram-style message and call rows: the identity and last activity
   remain visually primary, without the old heavy card stack. */
.chat-page .chat-list-pane > .chat-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:0 12px;
  border-bottom:1px solid #edf0f2;
  background:#fff;
}
.chat-page .chat-list-pane > .chat-tabs .chat-tab {
  min-width:0;
  min-height:43px;
  padding:8px 3px 7px;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  color:#7b8d98;
  background:transparent;
  box-shadow:none;
  font-size:.62rem;
}
.chat-page .chat-list-pane > .chat-tabs .chat-tab.active {
  color:#193d56;
  border-bottom-color:#193d56;
  background:transparent;
  box-shadow:none;
}
.chat-page .conversation-list { padding:3px 8px 12px; background:#fff; }
.chat-page .conversation {
  min-height:72px;
  margin:0;
  padding:9px 8px;
  border:0;
  border-bottom:1px solid #f0f2f3;
  border-radius:0;
  color:#17364b;
  background:transparent;
  box-shadow:none;
}
.chat-page .conversation:hover,.chat-page .conversation.active { background:#f5f8f9; }
.chat-page .conversation .avatar { width:52px; height:52px; border:0; box-shadow:none; }
.chat-page .conversation.has-unread .avatar-wrap::before {
  content:"";
  position:absolute;
  inset:-3px;
  border:2px solid #e83679;
  border-radius:50%;
}
.chat-page .conversation-top strong { color:#15354a; font-size:.78rem; }
.chat-page .conversation-preview { color:#6e818d; font-size:.65rem; }
.chat-page .conversation-time { color:#8b9aa3; font-size:.55rem; }
.chat-page .conversation-unread { color:#fff; background:#e62f74; }
.chat-page .conversation-camera {
  display:grid;
  width:35px;
  height:35px;
  flex:0 0 35px;
  place-items:center;
  border-radius:50%;
  color:#6d7f8b;
}
.chat-page .conversation-camera svg { width:21px; height:21px; }
.chat-page .chat-call-history-row {
  min-height:72px;
  border:0;
  border-bottom:1px solid #f0f2f3;
  border-radius:0;
  color:#17364b;
  background:#fff;
  box-shadow:none;
}
.chat-page .chat-call-history-row:hover { background:#f6f8f9; }
.chat-page .chat-call-history-main { gap:11px; padding:8px; }
.chat-page .chat-call-history-avatar { width:52px; height:52px; flex:0 0 52px; }
.chat-page .chat-call-history-avatar .avatar { width:52px; height:52px; border:0; }
.chat-page .chat-call-history-avatar .call-direction {
  position:absolute;
  inset:auto -2px -2px auto;
  display:grid;
  width:21px;
  height:21px;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  color:#fff;
  background:#1b9a72;
}
.chat-page .chat-call-history-avatar .call-direction.missed { background:#e34865; }
.chat-page .chat-call-history-avatar .call-direction svg { width:11px; height:11px; }
.chat-page .chat-call-again { color:#177ac7; background:#edf6fc; }

.status-bg--navy { background:linear-gradient(145deg,#081b3a,#143e6a 58%,#28758c); }
.status-bg--ocean { background:linear-gradient(145deg,#075985,#0891b2 50%,#34d399); }
.status-bg--sunset { background:linear-gradient(145deg,#7c2d5e,#e34861 52%,#f5a43c); }
.status-bg--forest { background:linear-gradient(145deg,#12392f,#19714f 56%,#6eaa43); }
.status-bg--plum { background:linear-gradient(145deg,#321653,#713b91 54%,#cb5c9b); }
.status-bg--gold { background:linear-gradient(145deg,#654414,#b67e22 52%,#f3c969); }
.status-composer-card { width:min(620px,100%); overflow:hidden; }
.status-composer-card .modal-header span:first-child { display:block; }
.status-composer-card .modal-header small { color:#718793; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.status-composer-card .modal-header h2 { margin-top:3px; }
.status-composer-body { display:grid; gap:13px; }
.status-composer-body > p { margin:0; color:#6a7f8b; font-size:.75rem; line-height:1.6; }
.status-compose-canvas {
  position:relative;
  display:grid;
  min-height:270px;
  overflow:hidden;
  place-items:center;
  border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 17px 38px rgba(28,62,80,.17);
}
.status-compose-canvas::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 12%,rgba(255,255,255,.24),transparent 32%),radial-gradient(circle at 82% 85%,rgba(255,255,255,.13),transparent 35%);
  pointer-events:none;
}
.status-compose-canvas textarea {
  position:relative;
  z-index:2;
  width:88%;
  min-height:150px;
  resize:none;
  border:0;
  outline:0;
  color:#fff;
  background:transparent;
  font:700 clamp(1.1rem,4vw,1.65rem)/1.55 inherit;
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.2);
}
.status-compose-canvas textarea::placeholder { color:rgba(255,255,255,.65); }
.status-compose-canvas.has-media { place-items:stretch; }
.status-compose-canvas.has-media textarea {
  position:absolute;
  z-index:4;
  inset:auto 5% 10px;
  width:90%;
  min-height:58px;
  max-height:100px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.38);
  font-size:.84rem;
}
.status-media-preview { position:absolute; z-index:1; inset:0; }
.status-media-preview img,.status-media-preview video { width:100%; height:100%; object-fit:cover; }
.status-media-preview__remove {
  position:absolute;
  z-index:5;
  inset:12px 12px auto auto;
  display:grid;
  width:34px;
  height:34px;
  padding:0;
  place-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  color:#fff;
  background:rgba(3,10,18,.68);
}
.status-media-preview__remove svg { width:17px; }
.status-backgrounds { display:flex; justify-content:center; gap:9px; }
.status-background {
  width:31px;
  height:31px;
  padding:0;
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 1px #cad3d8;
  cursor:pointer;
}
.status-background.active { box-shadow:0 0 0 3px #2584a2; transform:scale(1.07); }
.status-media-button {
  display:flex;
  width:100%;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #dce5e9;
  border-radius:16px;
  color:#25485d;
  background:#f5f8f9;
  text-align:start;
  cursor:pointer;
}
.status-media-button > svg { width:23px; color:#8c35bb; }
.status-media-button > span { display:grid; gap:2px; }
.status-media-button strong { font-size:.75rem; }
.status-media-button small { color:#7b8d97; font-size:.57rem; }
.status-media-button > i { margin-inline-start:auto; }
.status-media-button > i svg { width:18px; }
.status-publish-button { background:linear-gradient(135deg,#1e6b86,#27926f); }

.status-viewer {
  position:fixed;
  z-index:420;
  inset:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
  color:#fff;
  background:#020712;
}
.status-viewer[hidden] { display:none; }
.status-viewer__progress {
  position:relative;
  z-index:3;
  display:flex;
  gap:4px;
  padding:max(9px,env(safe-area-inset-top)) 12px 5px;
}
.status-viewer__progress span { flex:1; height:3px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.3); }
.status-viewer__progress i { display:block; width:0; height:100%; border-radius:inherit; background:#fff; }
.status-viewer__progress .complete i { width:100%; }
.status-viewer__progress .active i.animate { animation:status-progress var(--status-duration,7000ms) linear forwards; }
@keyframes status-progress { from { width:0; } to { width:100%; } }
.status-viewer__header {
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
  padding:5px 12px 9px;
  background:linear-gradient(#020712,transparent);
}
.status-viewer__header .icon-btn { color:#fff; background:rgba(255,255,255,.12); }
.status-viewer__identity { display:flex; min-width:0; align-items:center; gap:9px; }
.status-viewer__identity .avatar { width:37px; height:37px; border:2px solid rgba(255,255,255,.75); font-size:.7rem; }
.status-viewer__identity > span { display:grid; min-width:0; }
.status-viewer__identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
.status-viewer__identity small { color:rgba(255,255,255,.7); font-size:.58rem; }
.status-viewer__stage { position:relative; display:grid; min-height:0; overflow:hidden; place-items:center; }
.status-viewer__stage::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -80px 80px -80px #000; pointer-events:none; }
.status-viewer__stage img,.status-viewer__stage video { width:100%; height:100%; object-fit:contain; background:#000; }
.status-viewer__stage p { max-width:min(820px,86vw); margin:0; padding:28px; color:#fff; font:750 clamp(1.5rem,5vw,3.2rem)/1.5 inherit; text-align:center; text-wrap:balance; text-shadow:0 3px 20px rgba(0,0,0,.3); }
.status-viewer__caption {
  position:absolute;
  z-index:4;
  inset:auto 10% max(64px,calc(env(safe-area-inset-bottom) + 48px));
  max-height:24vh;
  overflow:auto;
  padding:10px 14px;
  border-radius:14px;
  color:#fff;
  background:rgba(0,0,0,.48);
  font-size:.84rem;
  line-height:1.55;
  text-align:center;
  white-space:pre-wrap;
}
.status-viewer__nav {
  position:absolute;
  z-index:5;
  top:50%;
  display:grid;
  width:46px;
  height:58px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:14px;
  color:#fff;
  background:rgba(0,0,0,.28);
  transform:translateY(-50%);
}
.status-viewer__nav svg { width:25px; }
.status-viewer__nav--previous { left:12px; }
.status-viewer__nav--next { right:12px; }
[dir="rtl"] .status-viewer__nav--previous { right:12px; left:auto; }
[dir="rtl"] .status-viewer__nav--next { right:auto; left:12px; }
.status-viewer__footer {
  position:relative;
  z-index:4;
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  color:rgba(255,255,255,.82);
  background:#020712;
  font-size:.66rem;
}
.status-viewer__footer svg { width:17px; }
body.status-viewer-open { overflow:hidden!important; }
body.status-viewer-open .mobile-app-nav { display:none!important; }

@media (max-width:760px) {
  .chat-page .chat-list-header { padding-top:max(10px,env(safe-area-inset-top)); }
  .chat-stories__head { padding-inline:13px; }
  .chat-stories__rail { padding-inline:9px; }
  .chat-page .chat-list-pane > .chat-tabs { padding-inline:7px; }
  .chat-page .chat-list-pane > .chat-tabs .chat-tab { font-size:.58rem; }
  .chat-page .conversation-list { padding-inline:4px; }
  .chat-page .conversation { min-height:70px; padding-inline:10px; }
  .status-composer-modal { align-items:flex-end; padding:0; }
  .status-composer-card { width:100%; max-height:94dvh; border-radius:25px 25px 0 0!important; }
  .status-compose-canvas { min-height:310px; border-radius:19px; }
  .status-viewer__nav { width:38px; height:52px; background:transparent; }
  .status-viewer__nav--previous { left:0; }
  .status-viewer__nav--next { right:0; }
  [dir="rtl"] .status-viewer__nav--previous { right:0; }
  [dir="rtl"] .status-viewer__nav--next { left:0; }
}

/* v4.4.14 compact account sheet + native-feeling five-action dock.
   This final layer intentionally avoids backdrop filters: they made the old
   mobile shell expensive to paint and produced the oversized pale menu shown
   on some Android browsers. */
.profile-dropdown[data-profile-menu-version="4.4.14"] {
  width:min(316px,calc(100vw - 20px));
  max-height:min(620px,calc(100dvh - 88px));
  overflow:auto;
  overscroll-behavior:contain;
  padding:8px;
  border:1px solid #dce5e9;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 48px rgba(12,38,54,.2);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__identity {
  min-height:62px;
  margin:0 0 7px;
  padding:9px 10px;
  border:1px solid #e5ecef;
  border-radius:15px;
  background:linear-gradient(135deg,#f5f9fa,#fff);
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__identity .avatar {
  width:42px;
  height:42px;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin:0 0 8px;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick a {
  min-height:62px;
  gap:5px;
  padding:6px 2px;
  border:0;
  border-radius:13px;
  background:#f2f7f8;
  transform:none;
  touch-action:manipulation;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick a:hover,
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick a:focus-visible {
  background:#e6f2f1;
  transform:none;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick a span {
  width:30px;
  height:30px;
  border-radius:10px;
  background:#164b63;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick a:nth-child(2) span,
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick a:nth-child(3) span {
  background:#23856f;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__quick b {
  font-size:.5rem;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] .profile-dropdown__label {
  margin:5px 9px 2px;
}
.profile-dropdown[data-profile-menu-version="4.4.14"] > a,
.profile-dropdown[data-profile-menu-version="4.4.14"] > form button {
  min-height:42px;
  padding:8px 10px;
  border-radius:11px;
  font-size:.7rem;
  touch-action:manipulation;
}

@media (max-width:620px) {
  .profile-menu-wrap { position:static; }
  .profile-dropdown[data-profile-menu-version="4.4.14"] {
    position:fixed;
    inset-block-start:calc(env(safe-area-inset-top,0px) + 64px);
    inset-inline:10px;
    width:auto;
    max-height:calc(100dvh - 78px - env(safe-area-inset-top,0px));
  }
}

@media (max-width:760px) {
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] {
    min-height:calc(62px + env(safe-area-inset-bottom));
    padding:4px 5px calc(3px + env(safe-area-inset-bottom));
    border-top:1px solid #e4e8eb;
    background:#fff;
    box-shadow:0 -5px 20px rgba(17,43,57,.08);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] a {
    min-height:54px;
    gap:2px;
    border-radius:0;
    color:#71828b;
    font-size:.48rem;
    touch-action:manipulation;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] a.active {
    color:#0d344b;
    background:transparent;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] a.active::before {
    inset:auto 38% 1px;
    height:3px;
    border-radius:999px;
    background:#16856f;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] .mobile-app-nav__icon,
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] .mobile-app-nav__icon svg {
    width:27px;
    height:27px;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] .mobile-app-nav__messages .mobile-app-nav__icon {
    width:29px;
    height:29px;
    border-radius:0;
    color:currentColor;
    background:transparent;
    box-shadow:none;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] .mobile-app-nav__messages .mobile-app-nav__icon svg {
    width:27px;
    height:27px;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.4.14"] .mobile-app-nav__profile .avatar {
    width:29px;
    height:29px;
  }
  body.app-shell:not(.chat-page) .app-main { padding-bottom:calc(66px + env(safe-area-inset-bottom)); }
}

/* Reduce work for long feeds without changing their scroll position. */
@supports (content-visibility:auto) {
  .news-list > *,
  .conversation-list > *,
  .notification-list > * { content-visibility:auto; contain-intrinsic-size:auto 92px; }
}

.translator-suggestion{display:flex;align-items:center;gap:10px;margin:0 16px 12px;padding:11px 12px;border:1px solid rgba(205,159,52,.35);border-radius:14px;background:rgba(245,194,66,.11);color:var(--ink,#17324b)}
.translator-suggestion[hidden]{display:none}.translator-suggestion>div{display:grid;gap:2px;min-width:0;flex:1}.translator-suggestion strong{font-size:.72rem;color:var(--muted,#647786)}.translator-suggestion b{font-size:.94rem;overflow-wrap:anywhere}.translator-suggestion button{border:0;border-radius:11px;padding:8px 11px;background:#218872;color:#fff;font-weight:800;cursor:pointer}

/* Kani 4.4.22: final chat presentation layer. Keep this last so legacy themes cannot override it. */
.chat-shell[data-chat-design="whatsapp-4.4.22"]{--wa-green:#00a884;--wa-dark-green:#008069;--wa-paper:#fff;--wa-ui:#f0f2f5;--wa-wall:#efeae2;--wa-ink:#111b21;--wa-muted:#667781;--wa-line:#e9edef;height:calc(100dvh - var(--header-h) - clamp(24px,4vw,54px));grid-template-columns:minmax(300px,390px) minmax(0,1fr);border:1px solid #dfe3e5;border-radius:12px;background:var(--wa-ui);box-shadow:0 12px 38px rgba(11,20,26,.14)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-pane{border-color:var(--wa-line);background:var(--wa-paper)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-header{padding:12px;background:var(--wa-ui);border:0}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-title{min-height:45px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-heading h1{color:var(--wa-ink);font-size:1.35rem}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-heading small{color:var(--wa-muted)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-heading__icon{color:#fff;background:var(--wa-dark-green)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .icon-btn{color:var(--wa-muted);background:transparent;border:0;box-shadow:none}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-new-button{color:#fff;background:var(--wa-green)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-search{height:38px;margin-top:8px;border:0;border-radius:9px;color:var(--wa-muted);background:#fff}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-search input{color:var(--wa-ink)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-stories{padding:9px 12px;border-color:var(--wa-line);background:#fff}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-stories__head,.chat-shell[data-chat-design="whatsapp-4.4.22"] .status-story{color:var(--wa-ink)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-tabs{gap:6px;padding:8px 12px;border-color:var(--wa-line);background:#fff}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-tab{min-height:31px;padding:5px 10px;border:1px solid var(--wa-line);border-radius:999px;color:var(--wa-muted);background:#fff}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-tab.active{border-color:#d9fdd3;color:#008069;background:#e7fce8}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation-list{padding:0;background:#fff}.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation{min-height:72px;margin:0;padding:10px 12px;border:0;border-bottom:1px solid var(--wa-line);border-radius:0;color:var(--wa-ink);background:#fff;box-shadow:none}.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation:hover,.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation.active{background:#f0f2f5}.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation .avatar{width:49px;height:49px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation-top strong{font-size:.95rem}.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation-time,.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation-preview{color:var(--wa-muted)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .conversation-unread{background:#25d366;color:#fff}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-main-pane,.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-conversation{background:var(--wa-wall)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-main-header{min-height:64px;padding:8px 13px;border-color:#d7dadd;background:var(--wa-ui)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-profile-trigger{color:var(--wa-ink)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-contact strong{color:var(--wa-ink)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-contact span{color:var(--wa-muted)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-live-pill{display:none}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-home-link--conversation{display:none}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-list{padding:14px clamp(9px,5vw,72px);background-color:var(--wa-wall);background-image:radial-gradient(circle at 18px 18px,rgba(90,101,96,.08) 1.3px,transparent 1.4px),radial-gradient(circle at 44px 41px,rgba(90,101,96,.055) 5px,transparent 5.8px);background-size:58px 58px}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-row{gap:5px;margin:2px 0}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-row:not(.own){justify-content:flex-start}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-row.own{justify-content:flex-end}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-row>.avatar{display:none}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-bubble{max-width:min(72%,650px);padding:7px 8px 5px;border:0;border-radius:0 8px 8px 8px;color:var(--wa-ink);background:#fff;box-shadow:0 1px 1px rgba(11,20,26,.13)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-row.own .message-bubble{border:0;border-radius:8px 0 8px 8px;color:var(--wa-ink);background:#d9fdd3}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-text{color:var(--wa-ink);font-size:.91rem;line-height:1.34}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-author{color:#008069}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-meta,.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-meta time{color:var(--wa-muted)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-receipt.read{color:#53bdeb}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .attachment-image{width:min(320px,64vw);max-height:360px;border-radius:7px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .attachment-image img{width:100%;height:auto;max-height:360px;object-fit:cover}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message{width:min(290px,68vw);min-width:210px;gap:8px;margin:0}.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__toggle{width:38px;height:38px;flex:0 0 38px;color:#fff;background:var(--wa-green)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__waveform{height:24px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__waveform i{background:#9aa8a8}.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__meta,.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__meta time{color:var(--wa-muted)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__meta>span{display:none}.chat-shell[data-chat-design="whatsapp-4.4.22"] .voice-message__meta button{color:var(--wa-muted);border-color:#ccd4d7;background:rgba(255,255,255,.42)}
.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer-wrap{border-color:#d7dadd;background:var(--wa-ui)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer{gap:5px;padding:8px 10px;background:var(--wa-ui)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer-input{min-height:42px;padding:10px 14px;border:0;border-radius:22px;color:var(--wa-ink);background:#fff}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer-input:focus{border:0;box-shadow:0 0 0 2px rgba(0,168,132,.16)}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer-voice,.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer-send{color:#fff!important;background:var(--wa-green)!important;border-radius:50%}

/* Kani 4.4.22: Weather remains usable from 320px phones through desktop. */
.weather-shell{width:min(100%,1180px);margin-inline:auto;min-width:0}.weather-search>*{min-width:0}.weather-current,.weather-forecast{min-width:0;overflow:hidden}.weather-hourly-rail{overscroll-behavior-inline:contain;scroll-snap-type:x proximity}.weather-hourly-rail article{scroll-snap-align:start}.weather-daily-list article>*{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){body.weather-page .app-main{padding-inline:12px}.weather-shell{gap:12px}.weather-heading h1{font-size:1.75rem}.weather-heading p{font-size:.84rem}.weather-search{grid-template-columns:1fr;gap:8px}.weather-search .input-wrap{grid-column:auto}.weather-search .btn{width:100%;min-height:44px}.weather-current{grid-template-columns:1fr;gap:16px;padding:18px 15px;border-radius:20px}.weather-current strong{font-size:clamp(3.1rem,21vw,4.8rem)}.weather-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.weather-metrics span{padding:10px 5px;font-size:.62rem}.weather-metrics b{font-size:.82rem}.weather-forecast{padding:13px 10px;border-radius:17px}.weather-hourly-rail{margin-inline:-2px}.weather-hourly-rail article{min-width:72px;padding:9px 6px}.weather-daily-list article{grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:10px 8px}.weather-daily-list article span,.weather-daily-list article small{white-space:normal;text-align:start}}
@media(max-width:700px){.chat-shell[data-chat-design="whatsapp-4.4.22"]{height:calc(100dvh - var(--header-h));min-height:0;border:0;border-radius:0;grid-template-columns:1fr}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-list-pane,.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-main-pane{min-height:0}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-main-header{min-height:58px;padding:5px 7px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-main-header .avatar{width:39px;height:39px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-header-actions{gap:0}.chat-shell[data-chat-design="whatsapp-4.4.22"] .chat-header-actions .icon-btn{width:38px;height:38px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-list{padding:10px 7px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .message-bubble{max-width:86%}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer{padding:7px 6px calc(7px + env(safe-area-inset-bottom))}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer .icon-btn{width:38px;height:38px;flex-basis:38px}.chat-shell[data-chat-design="whatsapp-4.4.22"] .composer-emoji-button{display:none}}

/* ===== Kani Walkie-Talkie 4.6.3 ===== */
body.walkie-page { --ptt-navy:#082f43; --ptt-navy-2:#0b4155; --ptt-green:#08a87a; --ptt-green-dark:#07825f; --ptt-lime:#58d6a9; --ptt-red:#e34852; --ptt-paper:#fff; --ptt-soft:#eef5f3; --ptt-ink:#12323d; --ptt-muted:#71848a; --ptt-line:#dce8e5; overflow:hidden; }
body.walkie-page .page { width:100%; max-width:none; height:calc(100dvh - var(--header-h)); padding:0; overflow:hidden; animation:none; }
body.walkie-page .page > * { animation:none; }
.walkie-app { position:relative; display:grid; grid-template-columns:330px minmax(440px,1fr) 290px; width:100%; height:100%; min-height:0; overflow:hidden; color:var(--ptt-ink); background:#eaf1f0; }
.walkie-app button,.walkie-app input,.walkie-app textarea,.walkie-app select { font:inherit; }
.walkie-app button { -webkit-tap-highlight-color:transparent; }
.walkie-install-notice { position:absolute; z-index:100; inset:18px 18px auto; display:flex; align-items:flex-start; gap:12px; padding:14px 17px; border:1px solid #f1c99c; border-radius:16px; color:#6d4718; background:#fff8ec; box-shadow:0 18px 45px rgba(60,44,17,.16); }
.walkie-install-notice>svg { width:22px; flex:0 0 22px; }
.walkie-install-notice strong { display:block; margin-bottom:3px; }
.walkie-install-notice p { margin:0; font-size:.78rem; }
.walkie-rail { min-width:0; min-height:0; display:flex; flex-direction:column; border-inline-end:1px solid var(--ptt-line); color:#fff; background:linear-gradient(180deg,#073146 0%,#0b3d50 45%,#0a3547 100%); overflow:hidden; }
.walkie-rail__hero { position:relative; overflow:hidden; display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:14px; padding:22px 20px 18px; }
.walkie-rail__hero::after { content:""; position:absolute; inset:-80px -50px auto auto; width:190px; height:190px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.024),0 0 0 70px rgba(255,255,255,.018); }
.walkie-hero-icon { position:relative; z-index:1; width:62px; height:62px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:20px; color:#fff; background:linear-gradient(145deg,#14ba89,#087b62); box-shadow:0 16px 32px rgba(0,20,27,.28),inset 0 1px 0 rgba(255,255,255,.27); }
.walkie-hero-icon svg { width:29px; height:29px; }
.walkie-hero-icon i { position:absolute; inset:-5px; border:1px solid rgba(56,222,170,.22); border-radius:24px; animation:walkieHalo 2.2s ease-out infinite; }
.walkie-eyebrow { display:block; margin-bottom:3px; color:#74dfbc; font-size:.59rem; font-weight:900; letter-spacing:.16em; }
.walkie-rail__hero h1 { margin:0; color:#fff; font-size:1.32rem; letter-spacing:-.02em; }
.walkie-rail__hero p { margin:4px 0 0; color:#b8d5dd; font-size:.68rem; line-height:1.5; }
.walkie-presence { padding:0 16px 13px; }
.walkie-presence__button { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:#fff; background:rgba(255,255,255,.065); text-align:start; cursor:pointer; transition:.18s ease; }
.walkie-presence__button:hover { background:rgba(255,255,255,.11); }
.walkie-presence__button>svg { width:16px; color:#9fc0ca; }
.walkie-presence__button strong,.walkie-presence__button small { display:block; }
.walkie-presence__button strong { font-size:.76rem; }
.walkie-presence__button small { margin-top:2px; color:#9fc0ca; font-size:.58rem; }
.walkie-presence__dot { width:10px; height:10px; border-radius:50%; background:#45d69c; box-shadow:0 0 0 4px rgba(69,214,156,.13); }
.walkie-presence__dot[data-status="busy"] { background:#f3b64b; box-shadow:0 0 0 4px rgba(243,182,75,.14); }
.walkie-presence__dot[data-status="offline"] { background:#91a3aa; box-shadow:0 0 0 4px rgba(145,163,170,.12); }
.walkie-rail__actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 16px 17px; border-bottom:1px solid rgba(255,255,255,.08); }
.walkie-action-card { min-width:0; min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 4px; border:1px solid rgba(255,255,255,.105); border-radius:15px; color:#dff6ef; background:rgba(255,255,255,.055); cursor:pointer; transition:.18s ease; }
.walkie-action-card:hover { transform:translateY(-2px); border-color:rgba(63,218,171,.4); background:rgba(15,173,126,.14); }
.walkie-action-card svg { width:21px; height:21px; color:#5bd8af; }
.walkie-action-card b { overflow:hidden; max-width:100%; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
.walkie-rail__section { min-height:0; display:flex; flex:1; flex-direction:column; padding:15px 10px 10px; }
.walkie-section-heading { display:flex; align-items:center; justify-content:space-between; padding:0 7px 10px; color:#a9c9d2; font-size:.64rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.walkie-section-heading button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:9px; color:#a9c9d2; background:transparent; cursor:pointer; }
.walkie-section-heading button:hover { color:#fff; background:rgba(255,255,255,.08); }
.walkie-section-heading svg { width:15px; }
.walkie-channel-list { min-height:0; overflow:auto; padding-inline:2px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }
.walkie-channel { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:4px; padding:10px; border:1px solid transparent; border-radius:16px; color:#e9f5f6; background:transparent; text-align:start; cursor:pointer; transition:.17s ease; }
.walkie-channel:hover { background:rgba(255,255,255,.055); }
.walkie-channel.is-active { border-color:rgba(75,224,177,.25); background:linear-gradient(135deg,rgba(16,172,127,.22),rgba(255,255,255,.065)); box-shadow:inset 3px 0 #2bd49d; }
[dir="rtl"] .walkie-channel.is-active { box-shadow:inset -3px 0 #2bd49d; }
.walkie-channel-avatar { position:relative; width:43px; height:43px; display:grid; place-items:center; flex:0 0 43px; border-radius:15px; color:#08765d; background:linear-gradient(145deg,#dffbf1,#8ee8c9); box-shadow:inset 0 1px #fff; }
.walkie-channel-avatar svg { width:20px; height:20px; }
.walkie-channel-avatar::after { content:""; position:absolute; inset:auto -1px -1px auto; width:11px; height:11px; border:2px solid #0a394b; border-radius:50%; background:#42d99e; }
.walkie-channel__body { min-width:0; }
.walkie-channel__top,.walkie-channel__bottom { display:flex; align-items:center; gap:6px; min-width:0; }
.walkie-channel__top strong { overflow:hidden; flex:1; color:#f8fcfd; font-size:.77rem; text-overflow:ellipsis; white-space:nowrap; }
.walkie-channel__top time { color:#91b3bd; font-size:.52rem; direction:ltr; }
.walkie-channel__bottom { margin-top:4px; color:#9ebdc5; font-size:.59rem; }
.walkie-channel__bottom span { overflow:hidden; flex:1; text-overflow:ellipsis; white-space:nowrap; }
.walkie-channel__badge { min-width:20px; height:20px; display:grid; place-items:center; padding:0 6px; border-radius:999px; color:#073d30; background:#5ce0b5; font-size:.53rem; font-weight:900; }
.walkie-channel__flags { display:flex; flex-direction:column; align-items:center; gap:4px; color:#92b3bc; }
.walkie-channel__flags svg { width:13px; height:13px; }
.walkie-skeleton { height:62px; margin:5px; border-radius:16px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04)); background-size:220% 100%; animation:walkieShimmer 1.4s linear infinite; }
.walkie-stage { min-width:0; min-height:0; position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg,#f6faf9 0%,#edf3f2 100%); }
.walkie-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; }
.walkie-empty__rings { position:relative; width:112px; height:112px; display:grid; place-items:center; margin-bottom:25px; border:1px solid #cbe3dd; border-radius:50%; color:#0c9270; background:#fff; box-shadow:0 18px 50px rgba(36,94,81,.12),0 0 0 22px rgba(15,163,122,.05),0 0 0 44px rgba(15,163,122,.025); }
.walkie-empty__rings svg { width:45px; height:45px; }
.walkie-empty h2 { margin:0; color:#173c47; font-size:1.35rem; }
.walkie-empty p { max-width:430px; margin:9px 0 0; color:#73868d; font-size:.78rem; line-height:1.65; }
.walkie-room { min-height:0; flex:1; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; }
.walkie-room__header { min-height:74px; display:flex; align-items:center; gap:13px; padding:11px 17px; border-bottom:1px solid var(--ptt-line); background:rgba(255,255,255,.93); backdrop-filter:blur(14px); }
.walkie-mobile-back { display:none; }
.walkie-room__identity { min-width:0; display:flex; align-items:center; gap:11px; flex:1; }
.walkie-room__identity .walkie-channel-avatar { width:46px; height:46px; flex-basis:46px; }
.walkie-room__identity h2 { overflow:hidden; margin:0; color:#153b46; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.walkie-room__identity p { display:flex; align-items:center; gap:6px; margin:4px 0 0; color:#71858b; font-size:.62rem; }
.walkie-live-dot { width:7px; height:7px; border-radius:50%; background:#14bd85; box-shadow:0 0 0 3px rgba(20,189,133,.13); }
.walkie-room__tools { display:flex; align-items:center; gap:4px; }
.walkie-room__tools button,.walkie-mobile-back { width:39px; height:39px; display:grid; place-items:center; border:0; border-radius:12px; color:#55727b; background:transparent; cursor:pointer; }
.walkie-room__tools button:hover,.walkie-mobile-back:hover { color:#08775e; background:#e8f4f1; }
.walkie-room__tools button.is-active { color:#07815f; background:#dff5ee; }
.walkie-room__tools svg,.walkie-mobile-back svg { width:19px; height:19px; }
.walkie-now { position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:15px; margin:14px 16px 8px; padding:14px 16px; border:1px solid rgba(10,138,103,.16); border-radius:21px; background:linear-gradient(135deg,#ffffff,#e9f7f2); box-shadow:0 10px 28px rgba(44,96,84,.075); }
.walkie-now::after { content:""; position:absolute; inset:-80px -55px auto auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(45,202,154,.14),transparent 68%); }
.walkie-now.is-talking { border-color:rgba(8,168,122,.45); box-shadow:0 12px 32px rgba(8,135,99,.16),inset 0 0 0 1px rgba(8,168,122,.08); }
.walkie-now__avatar { position:relative; width:55px; height:55px; display:grid; place-items:center; border-radius:18px; color:#fff; background:linear-gradient(145deg,#0eb886,#08765e); box-shadow:0 9px 22px rgba(8,118,94,.23); }
.walkie-now__avatar svg { width:25px; }
.walkie-now__avatar i,.walkie-now__avatar b { position:absolute; inset:-5px; border:1px solid rgba(16,185,134,.24); border-radius:22px; opacity:0; }
.walkie-now.is-talking .walkie-now__avatar i { opacity:1; animation:walkieHalo 1.4s infinite; }
.walkie-now.is-talking .walkie-now__avatar b { inset:-11px; opacity:1; animation:walkieHalo 1.4s .32s infinite; }
.walkie-now__copy { min-width:0; position:relative; z-index:1; }
.walkie-now__copy span,.walkie-now__copy strong,.walkie-now__copy small { display:block; }
.walkie-now__copy span { margin-bottom:3px; color:#07906c; font-size:.57rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.walkie-now__copy strong { overflow:hidden; color:#153b45; font-size:.87rem; text-overflow:ellipsis; white-space:nowrap; }
.walkie-now__copy small { margin-top:3px; color:#73878d; font-size:.6rem; }
.walkie-signal { position:relative; z-index:1; height:35px; display:flex; align-items:flex-end; gap:3px; padding:0 4px; }
.walkie-signal i { width:4px; height:8px; border-radius:999px; background:#a4c9bd; }
.walkie-now.is-talking .walkie-signal i { background:#12b985; animation:walkieBars .72s ease-in-out infinite alternate; }
.walkie-now.is-talking .walkie-signal i:nth-child(2),.walkie-now.is-talking .walkie-signal i:nth-child(4) { animation-delay:.15s; }
.walkie-now.is-talking .walkie-signal i:nth-child(3) { animation-delay:.3s; }
.walkie-history { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:9px 16px 20px; scroll-behavior:smooth; }
.walkie-history__loading { min-height:100px; display:grid; place-items:center; }
.walkie-spinner { width:24px; height:24px; border:3px solid #d7e8e4; border-top-color:#0ca379; border-radius:50%; animation:walkieSpin .8s linear infinite; }
.walkie-day { width:max-content; margin:8px auto 12px; padding:5px 10px; border:1px solid #dbe8e5; border-radius:999px; color:#73868c; background:rgba(255,255,255,.75); font-size:.55rem; font-weight:800; }
.walkie-event { display:grid; grid-template-columns:38px minmax(0,1fr); gap:9px; max-width:620px; margin:0 0 11px; }
.walkie-event.is-own { margin-inline-start:auto; grid-template-columns:minmax(0,1fr) 38px; }
.walkie-event.is-own .walkie-event__avatar { grid-column:2; }
.walkie-event.is-own .walkie-event__content { grid-row:1; grid-column:1; align-items:flex-end; }
.walkie-event__avatar { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; border:1px solid #d8e6e2; border-radius:13px; color:#07775d; background:#dff5ed; font-size:.72rem; font-weight:900; }
.walkie-event__avatar img { width:100%; height:100%; object-fit:cover; }
.walkie-event__content { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.walkie-event__meta { display:flex; align-items:center; gap:6px; margin:0 3px 4px; color:#75898f; font-size:.53rem; }
.walkie-event__meta strong { color:#31525c; font-size:.6rem; }
.walkie-event__bubble { position:relative; min-width:160px; max-width:min(100%,480px); padding:10px 12px; border:1px solid #dce8e5; border-radius:5px 17px 17px 17px; color:#24434c; background:#fff; box-shadow:0 5px 14px rgba(35,75,67,.055); }
.walkie-event.is-own .walkie-event__bubble { border-color:#bce8d9; border-radius:17px 5px 17px 17px; background:#dff8ef; }
.walkie-event.is-emergency .walkie-event__bubble { border-color:#f0b5ba; background:#fff2f3; box-shadow:0 6px 18px rgba(191,55,65,.1); }
.walkie-event__text { margin:0; font-size:.74rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.walkie-voice { min-width:235px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:9px; }
.walkie-voice__play { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:#0aa77b; cursor:pointer; box-shadow:0 7px 16px rgba(10,146,109,.2); }
.walkie-voice__play svg { width:18px; }
.walkie-wave { height:30px; display:flex; align-items:center; gap:2px; overflow:hidden; }
.walkie-wave i { width:2px; height:var(--h,8px); flex:0 0 2px; border-radius:999px; background:#8bb8ab; }
.walkie-event.is-own .walkie-wave i { background:#69a996; }
.walkie-voice time { color:#71868c; font-size:.52rem; direction:ltr; }
.walkie-event__image { display:block; overflow:hidden; width:min(330px,100%); border-radius:12px; cursor:pointer; }
.walkie-event__image img { display:block; width:100%; max-height:320px; object-fit:cover; }
.walkie-location-card { min-width:240px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; color:#21444e; text-decoration:none; }
.walkie-location-card>span:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#08795f; background:#d9f3eb; }
.walkie-location-card strong,.walkie-location-card small { display:block; }
.walkie-location-card strong { font-size:.69rem; }
.walkie-location-card small { margin-top:3px; color:#74878c; font-size:.55rem; direction:ltr; }
.walkie-location-card>svg { width:16px; color:#739087; }
.walkie-alert-card { display:flex; align-items:flex-start; gap:10px; }
.walkie-alert-card>span { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:13px; color:#fff; background:#e44751; }
.walkie-alert-card strong,.walkie-alert-card small { display:block; }
.walkie-alert-card strong { color:#9b252e; font-size:.75rem; }
.walkie-alert-card small { margin-top:3px; color:#89585c; font-size:.6rem; line-height:1.45; }
.walkie-event__delete { position:absolute; inset:5px 5px auto auto; width:27px; height:27px; display:none; place-items:center; border:0; border-radius:9px; color:#87999d; background:rgba(255,255,255,.72); cursor:pointer; }
[dir="rtl"] .walkie-event__delete { inset:5px auto auto 5px; }
.walkie-event:hover .walkie-event__delete { display:grid; }
.walkie-event__delete svg { width:13px; }
.walkie-controls { position:relative; z-index:5; display:grid; grid-template-columns:auto auto minmax(220px,1fr); align-items:center; gap:18px; padding:11px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--ptt-line); background:rgba(255,255,255,.96); box-shadow:0 -8px 24px rgba(37,76,68,.05); backdrop-filter:blur(16px); }
.walkie-quick-actions { display:flex; align-items:center; gap:5px; }
.walkie-quick-actions button { min-width:48px; height:49px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:0; border-radius:14px; color:#55737b; background:#edf5f3; cursor:pointer; transition:.16s; }
.walkie-quick-actions button:hover { color:#08775e; background:#dff3ed; }
.walkie-quick-actions button.walkie-sos { color:#c93640; background:#fff0f1; }
.walkie-quick-actions svg { width:18px; }
.walkie-quick-actions small { font-size:.48rem; font-weight:800; }
.walkie-ptt-wrap { position:relative; width:145px; height:82px; display:grid; place-items:center; }
.walkie-ptt-timer { position:absolute; inset:-2px auto auto 50%; z-index:4; transform:translate(-50%,-100%); min-width:54px; padding:3px 8px; border-radius:999px; color:#fff; background:#173f4a; font-size:.56rem; font-weight:800; text-align:center; direction:ltr; opacity:0; transition:.16s; }
.walkie-ptt-wrap.is-talking .walkie-ptt-timer { opacity:1; }
.walkie-ptt { position:relative; width:138px; height:72px; padding:0; border:0; border-radius:24px; color:#fff; background:linear-gradient(145deg,#14b987,#07805f); box-shadow:0 11px 24px rgba(5,123,91,.26),inset 0 1px rgba(255,255,255,.28); cursor:pointer; user-select:none; touch-action:none; transition:transform .12s,filter .16s,box-shadow .16s; }
.walkie-ptt:hover { filter:brightness(1.04); }
.walkie-ptt:active,.walkie-ptt.is-talking { transform:scale(.97); background:linear-gradient(145deg,#e14a55,#be303a); box-shadow:0 8px 20px rgba(184,45,56,.28),inset 0 1px rgba(255,255,255,.23); }
.walkie-ptt:disabled { cursor:not-allowed; filter:grayscale(.4); opacity:.55; }
.walkie-ptt__pulse { position:absolute; inset:-6px; border:2px solid rgba(15,181,132,.2); border-radius:29px; opacity:0; }
.walkie-ptt.is-talking .walkie-ptt__pulse { opacity:1; border-color:rgba(226,70,81,.3); animation:walkiePttPulse 1.2s ease-out infinite; }
.walkie-ptt__inner { position:relative; z-index:2; height:100%; display:grid; grid-template-columns:31px 1fr; grid-template-rows:1fr 1fr; align-items:end; column-gap:7px; padding:14px 15px 13px; text-align:start; pointer-events:none; }
.walkie-ptt__inner svg { width:28px; height:28px; grid-row:1/3; align-self:center; }
.walkie-ptt__inner b { align-self:end; font-size:.61rem; letter-spacing:.045em; }
.walkie-ptt__inner small { align-self:start; margin-top:2px; color:rgba(255,255,255,.75); font-size:.48rem; }
.walkie-composer { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 43px; align-items:center; gap:7px; padding:5px 6px 5px 14px; border:1px solid #dbe7e4; border-radius:19px; background:#f2f7f6; }
[dir="rtl"] .walkie-composer { padding:5px 14px 5px 6px; }
.walkie-composer input { min-width:0; height:39px; border:0; outline:0; color:#23434c; background:transparent; font-size:.72rem; }
.walkie-composer input::placeholder { color:#84969a; }
.walkie-composer button { width:43px; height:43px; display:grid; place-items:center; border:0; border-radius:15px; color:#fff; background:#0aa67a; cursor:pointer; }
.walkie-composer button svg { width:18px; }
.walkie-details { min-width:0; min-height:0; overflow-y:auto; padding:18px 15px; border-inline-start:1px solid var(--ptt-line); background:#fff; }
.walkie-details__empty { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; }
.walkie-details__empty>svg { width:42px; height:42px; margin-bottom:14px; color:#0b9d77; }
.walkie-details__empty h3 { margin:0; font-size:.88rem; }
.walkie-details__empty p { margin:7px 0 0; color:#7c8d92; font-size:.63rem; line-height:1.6; }
.walkie-details__hero { display:flex; flex-direction:column; align-items:center; padding:16px 8px 20px; text-align:center; }
.walkie-details__hero .walkie-channel-avatar { width:68px; height:68px; margin-bottom:12px; border-radius:22px; }
.walkie-details__hero .walkie-channel-avatar svg { width:29px; }
.walkie-details__hero h3 { margin:0; color:#163a45; font-size:.94rem; }
.walkie-details__hero p { margin:6px 0 0; color:#798b90; font-size:.62rem; line-height:1.5; }
.walkie-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:15px; }
.walkie-stat-grid>div { padding:12px 8px; border:1px solid var(--ptt-line); border-radius:15px; text-align:center; background:#f6faf9; }
.walkie-stat-grid strong,.walkie-stat-grid span { display:block; }
.walkie-stat-grid strong { color:#08775d; font-size:1.05rem; }
.walkie-stat-grid span { margin-top:3px; color:#7b8c91; font-size:.54rem; }
.walkie-detail-row { display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; margin-bottom:7px; padding:10px; border:1px solid var(--ptt-line); border-radius:15px; }
.walkie-detail-row>svg { width:38px; height:38px; padding:9px; border-radius:12px; color:#08775e; background:#e3f5ef; }
.walkie-detail-row strong,.walkie-detail-row small { display:block; }
.walkie-detail-row strong { font-size:.64rem; }
.walkie-detail-row small { margin-top:3px; color:#7a8d92; font-size:.51rem; line-height:1.45; }
.walkie-members-preview { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; margin-top:12px; padding:11px; border:1px solid var(--ptt-line); border-radius:15px; color:#23434c; background:#fff; text-align:start; cursor:pointer; }
.walkie-members-preview>span:first-child { min-width:0; display:flex; }
.walkie-members-preview .walkie-mini-avatar { margin-inline-end:-7px; }
.walkie-members-preview b { font-size:.58rem; }
.walkie-members-preview>svg { width:15px; color:#7b8d91; }
.walkie-mini-avatar { width:28px; height:28px; display:grid; place-items:center; overflow:hidden; border:2px solid #fff; border-radius:10px; color:#086f57; background:#d9f3eb; font-size:.5rem; font-weight:900; }
.walkie-mini-avatar img { width:100%; height:100%; object-fit:cover; }
.walkie-dialog { width:min(92vw,520px); max-height:min(86dvh,760px); padding:0; border:0; border-radius:24px; color:var(--ptt-ink); background:transparent; overflow:visible; }
.walkie-dialog::backdrop { background:rgba(3,27,37,.62); backdrop-filter:blur(5px); }
.walkie-dialog__card { max-height:min(86dvh,760px); display:flex; flex-direction:column; gap:14px; padding:20px; border:1px solid rgba(255,255,255,.7); border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(3,28,39,.3); overflow:auto; }
.walkie-dialog__card--wide { min-width:min(92vw,620px); }
.walkie-dialog__card--compact { gap:8px; }
.walkie-dialog__card>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px; }
.walkie-dialog__card>header>div { display:flex; align-items:center; gap:10px; }
.walkie-dialog__card h2 { margin:0; font-size:1.03rem; }
.walkie-dialog__card>header>button { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:11px; color:#61777e; background:#edf4f2; cursor:pointer; }
.walkie-dialog__card>header>button svg { width:17px; }
.walkie-dialog__icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(145deg,#0eb485,#07775d); }
.walkie-dialog__icon svg { width:20px; }
.walkie-dialog__card>label:not(.walkie-toggle):not(.walkie-search) { display:grid; gap:6px; color:#536d75; font-size:.63rem; font-weight:800; }
.walkie-dialog input[type="text"],.walkie-dialog input[type="search"],.walkie-dialog input:not([type]),.walkie-dialog textarea,.walkie-dialog select { width:100%; min-height:45px; padding:10px 12px; border:1px solid #d8e5e2; border-radius:13px; outline:0; color:#23434c; background:#f8fbfa; font:inherit; font-size:.72rem; }
.walkie-dialog textarea { resize:vertical; }
.walkie-dialog input:focus,.walkie-dialog textarea:focus,.walkie-dialog select:focus { border-color:#38b791; box-shadow:0 0 0 4px rgba(19,171,128,.09); }
.walkie-dialog__card>footer { display:flex; justify-content:flex-end; gap:8px; margin-top:3px; }
.walkie-dialog .btn { min-height:42px; border-radius:13px; }
.walkie-segment { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.walkie-segment label { position:relative; }
.walkie-segment input { position:absolute; opacity:0; pointer-events:none; }
.walkie-segment label>span { min-height:61px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #dbe7e4; border-radius:14px; color:#60777e; background:#f6faf9; cursor:pointer; }
.walkie-segment input:checked+span { border-color:#22ae83; color:#08775d; background:#e3f6ef; box-shadow:0 0 0 3px rgba(18,168,125,.08); }
.walkie-segment svg { width:18px; }
.walkie-segment b { font-size:.67rem; }
.walkie-search { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:7px; padding:0 11px; border:1px solid #d9e6e3; border-radius:14px; background:#f7faf9; }
.walkie-search svg { width:17px; color:#789096; }
.walkie-search input { min-height:44px!important; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
.walkie-dialog-list,.walkie-contact-picker { min-height:60px; max-height:390px; overflow:auto; border:1px solid #e0eae7; border-radius:16px; }
.walkie-contact-picker:empty { display:none; }
.walkie-list-row { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 11px; border:0; border-bottom:1px solid #e8efed; color:#25454e; background:#fff; text-align:start; cursor:pointer; }
.walkie-list-row:last-child { border-bottom:0; }
.walkie-list-row:hover { background:#f3f9f7; }
.walkie-list-row>div { min-width:0; }
.walkie-list-row strong,.walkie-list-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.walkie-list-row strong { font-size:.69rem; }
.walkie-list-row small { margin-top:3px; color:#7b8d92; font-size:.55rem; }
.walkie-list-row>span:last-child,.walkie-list-row>button { min-width:62px; padding:7px 9px; border:0; border-radius:10px; color:#08745b; background:#dff5ed; font-size:.55rem; font-weight:850; text-align:center; }
.walkie-list-row input[type="checkbox"] { width:19px; height:19px; accent-color:#0aa278; }
.walkie-empty-list { padding:30px 18px; color:#7d8e92; font-size:.66rem; text-align:center; }
.walkie-toggle { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid #e7efed; cursor:pointer; }
.walkie-toggle span b,.walkie-toggle span small { display:block; }
.walkie-toggle span b { font-size:.7rem; }
.walkie-toggle span small { margin-top:3px; color:#7b8d92; font-size:.56rem; line-height:1.45; }
.walkie-toggle input { position:absolute; opacity:0; pointer-events:none; }
.walkie-toggle i { position:relative; width:44px; height:25px; border-radius:999px; background:#cbd8d5; transition:.18s; }
.walkie-toggle i::after { content:""; position:absolute; inset:3px auto 3px 3px; width:19px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(29,57,52,.2); transition:.18s; }
[dir="rtl"] .walkie-toggle i::after { inset:3px 3px 3px auto; }
.walkie-toggle input:checked+i { background:#0aaa7d; }
.walkie-toggle input:checked+i::after { transform:translateX(19px); }
[dir="rtl"] .walkie-toggle input:checked+i::after { transform:translateX(-19px); }
.walkie-menu-row { width:100%; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; padding:11px; border:0; border-radius:14px; color:#27474f; background:#f5f9f8; text-align:start; cursor:pointer; }
.walkie-menu-row>svg { width:42px; height:42px; padding:11px; border-radius:13px; color:#08785f; background:#dff4ed; }
.walkie-menu-row b,.walkie-menu-row small { display:block; }
.walkie-menu-row b { font-size:.69rem; }
.walkie-menu-row small { margin-top:3px; color:#798b90; font-size:.54rem; }
.walkie-menu-row--danger { color:#a42e37; background:#fff2f3; }
.walkie-menu-row--danger>svg { color:#c83742; background:#ffe1e4; }
@keyframes walkieSpin { to { transform:rotate(360deg); } }
@keyframes walkieShimmer { to { background-position:-220% 0; } }
@keyframes walkieHalo { 0% { transform:scale(.88); opacity:0; } 30% { opacity:1; } 100% { transform:scale(1.28); opacity:0; } }
@keyframes walkieBars { from { height:7px; } to { height:34px; } }
@keyframes walkiePttPulse { from { transform:scale(.94); opacity:.9; } to { transform:scale(1.16); opacity:0; } }

@media (max-width:1180px) {
  .walkie-app { grid-template-columns:310px minmax(420px,1fr); }
  .walkie-details { display:none; }
}
@media (max-width:800px) {
  body.walkie-page .topbar { display:none; }
  body.walkie-page .app-main { margin-top:0; }
  body.walkie-page .page { height:calc(100dvh - 62px - env(safe-area-inset-bottom)); padding:0!important; }
  .walkie-app { grid-template-columns:1fr; }
  .walkie-rail { grid-column:1; grid-row:1; border:0; }
  .walkie-stage { position:absolute; z-index:4; inset:0; transform:translateX(105%); transition:transform .24s ease; }
  [dir="rtl"] .walkie-stage { transform:translateX(-105%); }
  .walkie-app.has-room .walkie-stage { transform:translateX(0); }
  .walkie-mobile-back { display:grid; flex:0 0 39px; }
  .walkie-rail__hero { padding-top:calc(18px + env(safe-area-inset-top)); }
  .walkie-rail__actions { padding-bottom:13px; }
  .walkie-rail__section { padding-bottom:4px; }
  .walkie-room__header { min-height:62px; padding:7px 7px; }
  .walkie-room__identity { gap:8px; }
  .walkie-room__identity .walkie-channel-avatar { width:40px; height:40px; flex-basis:40px; border-radius:13px; }
  .walkie-room__identity h2 { font-size:.85rem; }
  .walkie-room__tools { gap:0; }
  .walkie-room__tools button { width:36px; height:36px; }
  .walkie-room__tools button[data-action="pin"] { display:none; }
  .walkie-now { margin:8px 8px 4px; padding:10px 11px; border-radius:17px; }
  .walkie-now__avatar { width:44px; height:44px; border-radius:14px; }
  .walkie-now__copy span { font-size:.49rem; }
  .walkie-now__copy strong { font-size:.73rem; }
  .walkie-now__copy small { font-size:.52rem; }
  .walkie-history { padding:6px 7px 14px; }
  .walkie-event { grid-template-columns:32px minmax(0,1fr); gap:6px; margin-bottom:8px; }
  .walkie-event.is-own { grid-template-columns:minmax(0,1fr) 32px; }
  .walkie-event__avatar { width:32px; height:32px; border-radius:10px; }
  .walkie-event__bubble { max-width:calc(100vw - 64px); padding:8px 9px; }
  .walkie-voice { min-width:min(235px,65vw); }
  .walkie-controls { grid-template-columns:auto minmax(0,1fr); gap:7px; padding:7px 7px calc(8px + env(safe-area-inset-bottom)); }
  .walkie-quick-actions { grid-column:1; grid-row:1; }
  .walkie-quick-actions button { min-width:40px; width:40px; height:42px; border-radius:12px; }
  .walkie-quick-actions small { display:none; }
  .walkie-ptt-wrap { grid-column:2; grid-row:1; width:100%; height:58px; }
  .walkie-ptt { width:100%; height:54px; border-radius:18px; }
  .walkie-ptt__inner { grid-template-columns:27px 1fr; padding:9px 13px; }
  .walkie-ptt__inner svg { width:24px; height:24px; }
  .walkie-composer { grid-column:1/-1; grid-row:2; min-height:48px; border-radius:17px; }
  .walkie-dialog { width:calc(100vw - 20px); max-height:calc(100dvh - 32px); }
  .walkie-dialog__card,.walkie-dialog__card--wide { min-width:0; max-height:calc(100dvh - 32px); padding:16px; border-radius:21px; }
}
@media (max-width:420px) {
  .walkie-rail__hero { grid-template-columns:52px minmax(0,1fr); padding-inline:15px; }
  .walkie-hero-icon { width:52px; height:52px; border-radius:17px; }
  .walkie-rail__hero h1 { font-size:1.16rem; }
  .walkie-presence,.walkie-rail__actions { padding-inline:12px; }
  .walkie-room__tools button[data-action="mute"] { display:none; }
  .walkie-signal { display:none; }
  .walkie-now { grid-template-columns:auto minmax(0,1fr); }
  .walkie-voice { min-width:205px; }
  .walkie-quick-actions button { width:37px; min-width:37px; }
  .walkie-ptt__inner b { font-size:.55rem; }
  .walkie-ptt__inner small { font-size:.44rem; }
}
@media (prefers-reduced-motion:reduce) {
  .walkie-app * { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}

/* ===== Kani 4.6.3 modern shell + Zello-style Kani Radio ===== */
:root {
  --kani-viewport-height: 100dvh;
  --kani-keyboard-height: 0px;
}

/* Modern desktop / RTL side rail. */
.sidebar[data-sidebar-version="4.6.3"] {
  overflow:hidden;
  padding:18px 13px 14px;
  border-color:rgba(151,196,239,.16);
  background:
    radial-gradient(circle at 18% 4%,rgba(69,145,226,.23),transparent 16rem),
    radial-gradient(circle at 88% 88%,rgba(29,190,148,.12),transparent 18rem),
    linear-gradient(165deg,#0b2346 0%,#0d315d 49%,#092747 100%);
  box-shadow:18px 0 55px rgba(4,20,42,.16);
}
[dir="rtl"] .sidebar[data-sidebar-version="4.6.3"] { box-shadow:-18px 0 55px rgba(4,20,42,.16); }
.sidebar[data-sidebar-version="4.6.3"]::before {
  content:"";
  position:absolute;
  inset:-130px -90px auto auto;
  width:250px;
  height:250px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 76px rgba(255,255,255,.018);
  pointer-events:none;
}
.sidebar[data-sidebar-version="4.6.3"] .brand {
  position:relative;
  z-index:1;
  min-height:68px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 1px 10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:19px;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 30px rgba(3,17,37,.18);
}
.sidebar[data-sidebar-version="4.6.3"] .brand-mark {
  width:45px;
  height:45px;
  flex:0 0 45px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:15px;
  box-shadow:0 8px 20px rgba(1,13,29,.28),0 0 0 4px rgba(62,151,235,.12);
}
.sidebar[data-sidebar-version="4.6.3"] .brand-name { color:#fff; font-size:1.2rem; }
.sidebar[data-sidebar-version="4.6.3"] .brand-name span { color:#6ee2be; }
.sidebar[data-sidebar-version="4.6.3"] .sidebar-label {
  position:relative;
  z-index:1;
  padding:13px 12px 7px;
  color:#8fb4d7;
  font-size:.58rem;
  letter-spacing:.14em;
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav {
  position:relative;
  z-index:1;
  gap:4px;
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a {
  min-height:50px;
  gap:11px;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:16px;
  color:#c2d6e8;
  font-size:.77rem;
  font-weight:720;
  transform:none;
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a > [data-icon] {
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  flex:0 0 37px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  color:#b8d2e9;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
  transition:.18s ease;
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a > [data-icon] svg { width:18px; height:18px; }
.sidebar[data-sidebar-version="4.6.3"] .side-nav a:hover {
  color:#fff;
  border-color:rgba(144,195,240,.13);
  background:rgba(255,255,255,.075);
  transform:none;
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a:hover > [data-icon] {
  color:#fff;
  border-color:rgba(128,192,246,.22);
  background:rgba(72,147,218,.18);
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a.active {
  color:#fff;
  border-color:rgba(100,181,246,.26);
  background:linear-gradient(110deg,rgba(40,117,198,.38),rgba(36,105,178,.18));
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 22px rgba(2,18,40,.14);
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a.active::before { display:none; }
.sidebar[data-sidebar-version="4.6.3"] .side-nav a.active > [data-icon] {
  color:#fff;
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(145deg,#2d86db,#1e62b0);
  box-shadow:0 8px 18px rgba(4,30,66,.25),inset 0 1px rgba(255,255,255,.24);
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a.side-nav__walkie > [data-icon] {
  color:#80edc5;
  background:rgba(22,175,132,.12);
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a.side-nav__walkie.active {
  border-color:rgba(74,226,177,.25);
  background:linear-gradient(110deg,rgba(14,167,124,.32),rgba(28,104,119,.18));
}
.sidebar[data-sidebar-version="4.6.3"] .side-nav a.side-nav__walkie.active > [data-icon] {
  background:linear-gradient(145deg,#19bd8b,#087e67);
}
.sidebar[data-sidebar-version="4.6.3"] .sidebar-user {
  position:relative;
  z-index:1;
  gap:9px;
  margin-top:12px;
  padding:10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  box-shadow:inset 0 1px rgba(255,255,255,.07);
}
.sidebar[data-sidebar-version="4.6.3"] .sidebar-user .avatar { border:2px solid rgba(255,255,255,.55); box-shadow:0 6px 15px rgba(3,20,42,.22); }
.sidebar[data-sidebar-version="4.6.3"] .sidebar-user__meta strong { color:#fff; }
.sidebar[data-sidebar-version="4.6.3"] .sidebar-user__meta span { color:#91b2cf; }
.sidebar[data-sidebar-version="4.6.3"] .sidebar-logout {
  border:1px solid rgba(255,255,255,.08);
  color:#d6e5f1;
  background:rgba(255,255,255,.055);
}

/* Modern top-bar buttons and profile panel. */
body.app-shell .topbar-actions > .icon-btn {
  width:40px;
  height:40px;
  border:1px solid rgba(126,172,210,.18);
  border-radius:14px;
  color:#d7e8f5;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
body.app-shell .topbar-actions > .icon-btn:hover { color:#fff; border-color:rgba(103,198,234,.3); background:rgba(58,139,199,.18); }
.profile-dropdown[data-profile-menu-version="4.6.3"] {
  overflow:hidden;
  border:1px solid rgba(158,193,220,.26);
  border-radius:22px;
  background:linear-gradient(155deg,rgba(251,254,255,.99),rgba(238,247,251,.99));
  box-shadow:0 28px 80px rgba(4,26,52,.26);
}
.profile-dropdown[data-profile-menu-version="4.6.3"] .profile-dropdown__identity {
  margin:-2px -2px 10px;
  padding:16px;
  border-radius:19px;
  color:#fff;
  background:linear-gradient(135deg,#123e70,#0a2850 68%,#0c615c);
}
.profile-dropdown[data-profile-menu-version="4.6.3"] .profile-dropdown__quick { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.profile-dropdown[data-profile-menu-version="4.6.3"] .profile-dropdown__quick a {
  min-height:68px;
  border:1px solid #dce9ef;
  border-radius:15px;
  background:#f7fbfd;
}
.profile-dropdown[data-profile-menu-version="4.6.3"] .profile-dropdown__quick a span {
  width:34px;
  height:34px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(145deg,#2b78bd,#174f8a);
}
.profile-dropdown[data-profile-menu-version="4.6.3"] .profile-dropdown__quick a:last-child span { background:linear-gradient(145deg,#19b485,#08775f); }

/* Floating, non-classic mobile footer. */
@media (max-width:760px) {
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] {
    inset-inline:8px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    min-height:65px;
    padding:5px 6px;
    border:1px solid rgba(116,166,211,.24);
    border-radius:22px;
    background:linear-gradient(135deg,rgba(10,36,72,.97),rgba(14,54,97,.97));
    box-shadow:0 14px 40px rgba(3,21,44,.3),inset 0 1px rgba(255,255,255,.08);
    transition:transform .22s ease,opacity .18s ease;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] a {
    min-height:53px;
    gap:2px;
    border-radius:16px;
    color:#9ebbd3;
    font-size:.49rem;
    font-weight:750;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] a::before { display:none; }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] a.active {
    color:#fff;
    background:linear-gradient(145deg,rgba(70,146,215,.28),rgba(46,105,169,.15));
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] .mobile-app-nav__icon {
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    color:currentColor;
    background:rgba(255,255,255,.05);
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] .mobile-app-nav__icon svg { width:18px; height:18px; }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] a.active .mobile-app-nav__icon {
    border-color:rgba(255,255,255,.16);
    color:#fff;
    background:linear-gradient(145deg,#3283cc,#1c5794);
    box-shadow:0 6px 14px rgba(3,20,43,.24);
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] .mobile-app-nav__walkie {
    color:#8de8c6;
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] .mobile-app-nav__walkie .mobile-app-nav__icon {
    width:37px;
    height:37px;
    margin-top:-8px;
    border-color:rgba(97,234,186,.28);
    border-radius:14px;
    color:#fff;
    background:linear-gradient(145deg,#20c895,#087a64);
    box-shadow:0 9px 20px rgba(4,99,78,.34),0 0 0 4px rgba(42,205,157,.1);
  }
  body.app-shell .mobile-app-nav[data-mobile-nav-version="4.6.3"] .mobile-app-nav__profile .avatar {
    width:31px;
    height:31px;
    border:2px solid rgba(255,255,255,.35);
    border-radius:11px;
  }
  body.app-shell:not(.chat-page) .app-main { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  body.kani-keyboard-open .mobile-app-nav,
  body.walkie-keyboard-open .mobile-app-nav {
    opacity:0;
    pointer-events:none;
    transform:translateY(calc(120% + env(safe-area-inset-bottom)));
  }
}

/* Pure-CSS two-way-radio artwork used throughout Kani Talk. */
.kani-radio {
  --radio-w:74px;
  --radio-h:102px;
  position:relative;
  width:var(--radio-w);
  height:var(--radio-h);
  display:inline-block;
  flex:0 0 auto;
  filter:drop-shadow(0 13px 17px rgba(3,26,45,.26));
}
.kani-radio__antenna {
  position:absolute;
  z-index:1;
  inset:0 auto auto 18%;
  width:12%;
  height:31%;
  border:1px solid rgba(202,226,239,.3);
  border-radius:999px 999px 3px 3px;
  background:linear-gradient(90deg,#152f48,#385972 55%,#10273e);
  transform:rotate(-4deg);
  transform-origin:bottom;
}
[dir="rtl"] .kani-radio__antenna { inset:0 18% auto auto; transform:rotate(4deg); }
.kani-radio__knob {
  position:absolute;
  z-index:2;
  inset:18% 17% auto auto;
  width:18%;
  height:8%;
  border-radius:4px 4px 2px 2px;
  background:repeating-linear-gradient(90deg,#162d43 0 2px,#3e5d73 2px 4px);
  box-shadow:0 2px 4px rgba(0,0,0,.28);
}
[dir="rtl"] .kani-radio__knob { inset:18% auto auto 17%; }
.kani-radio__body {
  position:absolute;
  z-index:3;
  inset:21% 7% 1%;
  overflow:visible;
  border:1px solid rgba(173,213,239,.28);
  border-radius:18% 18% 15% 15%;
  background:
    linear-gradient(90deg,rgba(255,255,255,.12),transparent 16%,transparent 82%,rgba(0,0,0,.16)),
    linear-gradient(155deg,#173d62,#0b2848 57%,#081f39);
  box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -8px 15px rgba(0,0,0,.2),0 9px 16px rgba(0,13,29,.25);
}
.kani-radio__screen {
  position:absolute;
  inset:10% 15% auto;
  height:23%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  padding:0 8%;
  border:1px solid rgba(118,233,192,.33);
  border-radius:18%;
  color:#d7fff0;
  background:linear-gradient(145deg,#083a3b,#0b6555);
  box-shadow:inset 0 0 10px rgba(66,243,184,.15),0 2px 5px rgba(0,0,0,.2);
  font-style:normal;
}
.kani-radio__screen b { font-size:calc(var(--radio-w)*.105); letter-spacing:.08em; }
.kani-radio__screen small { color:#78efc4; font-size:calc(var(--radio-w)*.08); font-weight:900; }
.kani-radio__speaker {
  position:absolute;
  inset:42% 18% auto;
  height:32%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:skewY(-2deg);
}
.kani-radio__speaker b {
  display:block;
  width:100%;
  height:8%;
  border-radius:999px;
  background:linear-gradient(90deg,#06182a,#25445d 50%,#06182a);
  box-shadow:0 1px rgba(255,255,255,.055);
}
.kani-radio__mic {
  position:absolute;
  inset:auto auto 8% 50%;
  width:13%;
  aspect-ratio:1;
  border:2px solid #4f748f;
  border-radius:50%;
  background:#07192a;
  transform:translateX(-50%);
  box-shadow:0 0 0 2px rgba(255,255,255,.035);
}
.kani-radio__side {
  position:absolute;
  inset:31% auto auto -7%;
  width:8%;
  height:26%;
  border-radius:4px 0 0 4px;
  background:linear-gradient(#28c994,#07826a);
  box-shadow:0 3px 7px rgba(1,17,32,.24);
}
[dir="rtl"] .kani-radio__side { inset:31% -7% auto auto; border-radius:0 4px 4px 0; }
.kani-radio__wave {
  position:absolute;
  z-index:0;
  inset:24% -13% auto auto;
  width:25%;
  height:30%;
  border:2px solid #57e5b7;
  border-block-color:transparent;
  border-inline-start-color:transparent;
  border-radius:0 100% 100% 0;
  opacity:.72;
}
.kani-radio__wave--two { inset:17% -26% auto auto; width:38%; height:44%; opacity:.34; }
[dir="rtl"] .kani-radio__wave { inset:24% auto auto -13%; border-inline-start-color:#57e5b7; border-inline-end-color:transparent; border-radius:100% 0 0 100%; }
[dir="rtl"] .kani-radio__wave--two { inset:17% auto auto -26%; }
.kani-radio--rail { --radio-w:58px; --radio-h:76px; z-index:2; justify-self:center; }
.kani-radio--empty { --radio-w:128px; --radio-h:174px; }
.kani-radio--avatar { --radio-w:27px; --radio-h:36px; filter:none; }
.kani-radio--details { --radio-w:96px; --radio-h:130px; }
.kani-radio--details-empty { --radio-w:88px; --radio-h:120px; margin-bottom:18px; }
.kani-radio--gate { --radio-w:42px; --radio-h:57px; filter:drop-shadow(0 8px 12px rgba(0,16,32,.22)); }
.kani-radio--avatar .kani-radio__wave,
.kani-radio--avatar .kani-radio__screen small,
.kani-radio--gate .kani-radio__wave { display:none; }

/* New Walkie-Talkie command surface. */
body.walkie-page {
  --ptt-navy:#0b294e;
  --ptt-navy-2:#123f70;
  --ptt-green:#11b986;
  --ptt-green-dark:#087963;
  --ptt-lime:#70e8bf;
  --ptt-paper:#fff;
  --ptt-soft:#edf4f7;
  --ptt-ink:#102f47;
  --ptt-muted:#708595;
  --ptt-line:#d8e5ec;
  background:#dfeaf0;
}
body.walkie-page .page { height:calc(var(--kani-viewport-height,100dvh) - var(--header-h)); }
.walkie-app {
  grid-template-columns:340px minmax(440px,1fr) 320px;
  background:linear-gradient(145deg,#e8f0f4,#dce8ee);
}
.walkie-rail {
  border-color:rgba(157,198,226,.14);
  background:
    radial-gradient(circle at 12% 3%,rgba(70,147,218,.28),transparent 15rem),
    radial-gradient(circle at 86% 94%,rgba(30,190,145,.12),transparent 17rem),
    linear-gradient(165deg,#0c2a50 0%,#123f70 52%,#0a3053 100%);
  box-shadow:12px 0 40px rgba(4,25,49,.12);
}
[dir="rtl"] .walkie-rail { box-shadow:-12px 0 40px rgba(4,25,49,.12); }
.walkie-rail__hero { grid-template-columns:70px minmax(0,1fr); min-height:116px; padding:20px 19px 15px; }
.walkie-rail__hero::after { border-color:rgba(138,197,242,.11); }
.walkie-eyebrow { color:#78ecc5; }
.walkie-presence__button,
.walkie-action-card {
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.walkie-action-card > [data-icon] {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:linear-gradient(145deg,rgba(33,193,145,.95),rgba(7,121,99,.95));
  box-shadow:0 7px 14px rgba(3,37,55,.2);
}
.walkie-action-card svg { width:17px; height:17px; color:inherit; }
.walkie-channel { min-height:66px; border-radius:18px; }
.walkie-channel.is-active {
  border-color:rgba(100,230,186,.3);
  background:linear-gradient(125deg,rgba(26,181,137,.27),rgba(74,136,193,.13));
  box-shadow:inset 3px 0 #48dfad,0 9px 20px rgba(2,22,43,.11);
}
.walkie-channel-avatar {
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(145deg,#e5fff6,#83e4c3);
  box-shadow:inset 0 1px #fff,0 7px 15px rgba(4,59,72,.13);
}
.walkie-channel-avatar--radio { overflow:visible; background:linear-gradient(145deg,#effaf8,#d9f4ec); }
.walkie-channel-avatar--radio::after { z-index:5; }
.walkie-stage { background:linear-gradient(180deg,#f7fafc 0%,#eaf1f5 100%); }
.walkie-empty__visual {
  width:215px;
  height:215px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
  border:1px solid rgba(95,161,197,.18);
  border-radius:44px;
  background:
    radial-gradient(circle at 50% 36%,rgba(77,224,175,.17),transparent 46%),
    linear-gradient(145deg,#fff,#e8f1f5);
  box-shadow:0 26px 65px rgba(30,76,105,.13),inset 0 1px #fff,0 0 0 12px rgba(255,255,255,.33);
}
.walkie-empty h2 { color:#12334e; font-size:1.48rem; }
.walkie-empty p { color:#698194; font-size:.82rem; }
.walkie-room__header {
  min-height:76px;
  border-color:#d6e4eb;
  background:rgba(250,253,255,.94);
  box-shadow:0 8px 24px rgba(19,62,91,.045);
}
.walkie-room__tools button,
.walkie-mobile-back {
  border:1px solid #dce8ee;
  border-radius:14px;
  color:#41657e;
  background:#f0f6f8;
}
.walkie-room__tools button:hover,
.walkie-mobile-back:hover { color:#fff; border-color:#1aa97f; background:linear-gradient(145deg,#1cba8b,#087761); }
.walkie-now {
  margin:13px 15px 8px;
  border-color:rgba(41,139,185,.17);
  border-radius:23px;
  background:
    radial-gradient(circle at 92% 8%,rgba(40,203,151,.13),transparent 12rem),
    linear-gradient(135deg,#fff,#edf6f8);
  box-shadow:0 13px 32px rgba(27,72,96,.08),inset 0 1px #fff;
}
.walkie-now__avatar { border:1px solid rgba(255,255,255,.65); background:linear-gradient(145deg,#1ac596,#087964); }
.walkie-event__bubble { border-color:#d8e5eb; box-shadow:0 8px 20px rgba(22,64,91,.07); }
.walkie-event.is-own .walkie-event__bubble { border-color:#b9e4d7; background:linear-gradient(145deg,#e2f8f0,#d7f2e9); }
.walkie-controls {
  gap:14px;
  padding:10px 15px calc(11px + env(safe-area-inset-bottom));
  border-color:#d4e2e9;
  background:rgba(250,253,255,.96);
  box-shadow:0 -12px 32px rgba(24,67,94,.07);
}
.walkie-quick-actions button {
  border:1px solid #dbe8ed;
  color:#45677e;
  background:linear-gradient(145deg,#f8fbfc,#eaf2f5);
  box-shadow:inset 0 1px #fff;
}
.walkie-ptt {
  border:1px solid rgba(255,255,255,.48);
  background:linear-gradient(145deg,#20c895,#087861);
  box-shadow:0 14px 28px rgba(5,112,89,.26),inset 0 1px rgba(255,255,255,.3),0 0 0 5px rgba(28,188,141,.07);
}
.walkie-composer {
  border-color:#d4e3e9;
  background:linear-gradient(145deg,#f8fbfc,#edf4f6);
  box-shadow:inset 0 1px #fff;
}
.walkie-composer:focus-within { border-color:#35b88f; box-shadow:0 0 0 4px rgba(29,177,134,.1),inset 0 1px #fff; }
.walkie-composer button { background:linear-gradient(145deg,#1cbb8b,#08775f); box-shadow:0 7px 14px rgba(6,112,88,.19); }

/* Modern right-side command panel. */
.walkie-details {
  padding:15px;
  border-color:#d4e2e9;
  background:
    radial-gradient(circle at 50% -4%,rgba(56,141,207,.13),transparent 16rem),
    linear-gradient(180deg,#f7fbfd,#eaf2f6);
}
.walkie-details__empty,
.walkie-details__content { min-height:100%; }
.walkie-details__empty {
  justify-content:center;
  padding:22px 18px;
  border:1px solid rgba(116,166,198,.15);
  border-radius:25px;
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 1px #fff;
}
.walkie-details__eyebrow {
  display:block;
  margin:0 0 5px;
  color:#148468;
  font-size:.54rem;
  font-weight:900;
  letter-spacing:.14em;
}
.walkie-details__empty h3 { color:#173c57; font-size:1rem; }
.walkie-details__empty p { max-width:225px; color:#718695; font-size:.65rem; }
.walkie-details__hero {
  margin-bottom:10px;
  padding:17px 10px 20px;
  border:1px solid rgba(125,173,205,.16);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 20%,rgba(67,221,170,.15),transparent 9rem),
    linear-gradient(145deg,#fff,#edf5f8);
  box-shadow:0 12px 27px rgba(21,65,91,.07),inset 0 1px #fff;
}
.walkie-details__hero h3 { color:#153b56; font-size:1rem; }
.walkie-autoplay-monitor {
  display:grid;
  grid-template-columns:43px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  padding:11px;
  border:1px solid rgba(35,178,134,.2);
  border-radius:17px;
  background:linear-gradient(135deg,#e8faf3,#f8fcfb);
  box-shadow:inset 0 1px #fff;
}
.walkie-autoplay-monitor__icon {
  position:relative;
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,#20bf8e,#087962);
  box-shadow:0 8px 16px rgba(6,105,84,.2);
}
.walkie-autoplay-monitor__icon svg { width:19px; }
.walkie-autoplay-monitor__icon i {
  position:absolute;
  inset:-4px;
  border:1px solid rgba(33,191,143,.25);
  border-radius:17px;
  animation:walkieHalo 2s ease-out infinite;
}
.walkie-autoplay-monitor strong,
.walkie-autoplay-monitor small { display:block; }
.walkie-autoplay-monitor strong { color:#0c5f4c; font-size:.64rem; }
.walkie-autoplay-monitor small { margin-top:3px; color:#627f78; font-size:.5rem; line-height:1.4; }
.walkie-autoplay-monitor button {
  padding:7px 9px;
  border:0;
  border-radius:10px;
  color:#fff;
  background:#0b8d6d;
  font-size:.51rem;
  font-weight:850;
  cursor:pointer;
}
.walkie-stat-grid > div,
.walkie-detail-row,
.walkie-members-preview {
  border-color:#d7e5eb;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px #fff;
}
.walkie-detail-row > svg { color:#176d9e; background:#e4f1f7; }

/* Browser audio-policy prompt; disappears permanently after a successful tap. */
.walkie-audio-gate {
  position:absolute;
  z-index:120;
  inset:14px 50% auto auto;
  width:min(610px,calc(100% - 28px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:10px 11px 10px 13px;
  border:1px solid rgba(123,195,229,.3);
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,rgba(10,42,79,.98),rgba(14,75,103,.98));
  box-shadow:0 22px 55px rgba(3,23,46,.3),inset 0 1px rgba(255,255,255,.1);
  transform:translateX(50%);
}
.walkie-audio-gate[hidden] { display:none!important; }
.walkie-audio-gate strong,
.walkie-audio-gate p { display:block; }
.walkie-audio-gate strong { font-size:.72rem; }
.walkie-audio-gate p { margin:3px 0 0; color:#bdd7e7; font-size:.58rem; line-height:1.45; }
.walkie-audio-gate button {
  min-height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,#1bc493,#087660);
  box-shadow:0 8px 17px rgba(2,30,46,.24);
  cursor:pointer;
}
.walkie-audio-gate button svg { width:17px; }
.walkie-audio-gate button b { font-size:.57rem; }

@media (max-width:1260px) {
  .walkie-app { grid-template-columns:320px minmax(420px,1fr) 300px; }
}
@media (max-width:1180px) {
  .walkie-app { grid-template-columns:310px minmax(420px,1fr); }
}
@media (max-width:800px) {
  body.walkie-page .page { height:calc(var(--kani-viewport-height,100dvh) - 78px - env(safe-area-inset-bottom)); }
  .walkie-rail__hero { grid-template-columns:66px minmax(0,1fr); }
  .kani-radio--rail { --radio-w:54px; --radio-h:72px; }
  .walkie-empty__visual { width:175px; height:175px; border-radius:37px; }
  .kani-radio--empty { --radio-w:104px; --radio-h:142px; }
  .walkie-audio-gate {
    inset:calc(8px + env(safe-area-inset-top)) 8px auto;
    width:auto;
    grid-template-columns:auto minmax(0,1fr);
    transform:none;
  }
  .walkie-audio-gate button { grid-column:1/-1; justify-content:center; width:100%; }
  body.kani-keyboard-open.walkie-page .page,
  body.walkie-keyboard-open.walkie-page .page {
    height:var(--kani-viewport-height,100dvh);
  }
  body.kani-keyboard-open.walkie-page .walkie-controls,
  body.walkie-keyboard-open.walkie-page .walkie-controls {
    grid-template-columns:minmax(0,1fr);
    gap:0;
    padding:6px 7px calc(6px + env(safe-area-inset-bottom));
  }
  body.kani-keyboard-open.walkie-page .walkie-quick-actions,
  body.kani-keyboard-open.walkie-page .walkie-ptt-wrap,
  body.walkie-keyboard-open.walkie-page .walkie-quick-actions,
  body.walkie-keyboard-open.walkie-page .walkie-ptt-wrap { display:none!important; }
  body.kani-keyboard-open.walkie-page .walkie-composer,
  body.walkie-keyboard-open.walkie-page .walkie-composer {
    grid-column:1;
    grid-row:1;
    min-height:50px;
    border-radius:18px;
  }
  body.kani-keyboard-open.walkie-page .walkie-history,
  body.walkie-keyboard-open.walkie-page .walkie-history { padding-bottom:8px; }
}
@media (max-width:420px) {
  .walkie-rail__hero { grid-template-columns:59px minmax(0,1fr); }
  .kani-radio--rail { --radio-w:48px; --radio-h:65px; }
  .walkie-audio-gate { grid-template-columns:38px minmax(0,1fr); gap:9px; }
  .kani-radio--gate { --radio-w:34px; --radio-h:46px; }
}

/* Kani 4.5.2 — larger, modern Walkie controls and destructive channel actions. */
.walkie-room__header { min-height:84px; padding:14px 20px; }
.walkie-room__identity .walkie-channel-avatar { width:54px; height:54px; flex-basis:54px; border-radius:18px; }
.walkie-room__identity .walkie-channel-avatar svg { width:25px; height:25px; }
.walkie-room__identity h2 { font-size:1.08rem; }
.walkie-room__tools { gap:7px; }
.walkie-room__tools button,.walkie-mobile-back { width:46px; height:46px; border:1px solid rgba(27,83,99,.08); border-radius:15px; background:#f3f8f7; }
.walkie-room__tools svg,.walkie-mobile-back svg { width:23px; height:23px; }
.walkie-now { margin:16px 18px 9px; padding:18px 20px; border-radius:25px; background:linear-gradient(135deg,#fff,#e6f8f2); }
.walkie-now__avatar { width:64px; height:64px; border-radius:21px; }
.walkie-now__avatar svg { width:30px; }
.walkie-now__copy strong { font-size:.98rem; }
.walkie-controls { grid-template-columns:auto auto minmax(250px,1fr); gap:20px; padding:14px 18px calc(15px + env(safe-area-inset-bottom)); }
.walkie-quick-actions button { min-width:58px; height:58px; border-radius:18px; }
.walkie-quick-actions svg { width:23px; height:23px; }
.walkie-ptt-wrap { width:178px; height:96px; }
.walkie-ptt { width:168px; height:84px; border-radius:29px; box-shadow:0 15px 33px rgba(5,123,91,.28),0 0 0 8px rgba(20,185,135,.07),inset 0 1px rgba(255,255,255,.3); }
.walkie-ptt__inner { grid-template-columns:39px 1fr; padding:16px 19px; }
.walkie-ptt__inner svg { width:35px; height:35px; }
.walkie-ptt__inner b { font-size:.72rem; }
.walkie-ptt__inner small { font-size:.54rem; }
.walkie-composer { grid-template-columns:minmax(0,1fr) 51px; padding:7px 8px 7px 17px; border-radius:23px; }
[dir="rtl"] .walkie-composer { padding:7px 17px 7px 8px; }
.walkie-composer input { height:45px; font-size:.8rem; }
.walkie-composer button { width:51px; height:51px; border-radius:18px; }
.walkie-composer button svg { width:23px; height:23px; }
.walkie-dialog__card--compact { gap:11px; padding:22px; background:linear-gradient(160deg,#fff,#f4faf8); }
.walkie-menu-row { grid-template-columns:52px minmax(0,1fr); gap:13px; min-height:72px; padding:12px 14px; border:1px solid rgba(20,92,104,.08); border-radius:18px; box-shadow:0 7px 18px rgba(31,80,70,.05); }
.walkie-menu-row>svg { width:52px; height:52px; padding:14px; border-radius:16px; }
.walkie-menu-row b { font-size:.78rem; }
.walkie-menu-row small { margin-top:5px; font-size:.6rem; line-height:1.45; }
.walkie-menu-row--critical { border-color:rgba(196,49,61,.24); background:linear-gradient(135deg,#fff5f6,#ffecef); }
.walkie-menu-row[hidden] { display:none!important; }

@media (max-width:700px) {
  .walkie-room__header { min-height:68px; padding:8px 9px; }
  .walkie-room__identity .walkie-channel-avatar { width:44px; height:44px; flex-basis:44px; border-radius:15px; }
  .walkie-room__tools { gap:2px; }
  .walkie-room__tools button { width:40px; height:40px; border-radius:13px; }
  .walkie-controls { gap:10px; padding:10px 9px calc(11px + env(safe-area-inset-bottom)); }
  .walkie-quick-actions button { min-width:49px; height:50px; border-radius:15px; }
  .walkie-ptt-wrap { width:100%; height:64px; }
  .walkie-ptt { width:100%; height:60px; border-radius:20px; }
  .walkie-ptt__inner { grid-template-columns:30px 1fr; padding:10px 14px; }
  .walkie-ptt__inner svg { width:27px; height:27px; }
}

/* 4.6 final cascade. */
body.app-shell{background:radial-gradient(circle at 88% 8%,rgba(98,212,222,.18),transparent 27rem),radial-gradient(circle at 18% 92%,rgba(40,124,193,.12),transparent 32rem),#eef5fb;color:#0b2747}
.sidebar{background:linear-gradient(165deg,#061833,#0a2448 52%,#0e3b69);border-inline-end:1px solid rgba(255,255,255,.08);box-shadow:16px 0 44px rgba(6,24,51,.18)}
.side-nav a.active{color:#fff;background:linear-gradient(135deg,#287cc1,#1599ad);box-shadow:0 10px 25px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.28)}
.topbar{background:rgba(247,251,255,.80);border-bottom:1px solid rgba(31,89,140,.13);box-shadow:0 8px 30px rgba(6,24,51,.06);backdrop-filter:blur(22px) saturate(155%)}
.mobile-app-nav{background:rgba(6,24,51,.95);border-top:1px solid rgba(255,255,255,.09);box-shadow:0 -12px 34px rgba(6,24,51,.23)}.mobile-app-nav a.active{background:linear-gradient(145deg,#287cc1,#19a6b5);color:#fff}
.walkie-app{border:1px solid rgba(255,255,255,.72);border-radius:28px;background:rgba(255,255,255,.72);box-shadow:0 18px 48px rgba(6,24,51,.12);backdrop-filter:blur(24px) saturate(145%)}
.walkie-rail{background:linear-gradient(180deg,#f8fbff,#eaf4fb);border-inline-end:1px solid rgba(31,89,140,.13)}.walkie-room__header{background:rgba(255,255,255,.84);border-bottom:1px solid rgba(31,89,140,.13);backdrop-filter:blur(18px)}
.walkie-now{background:linear-gradient(135deg,#fff,#e9f5ff);border:1px solid rgba(31,89,140,.13);box-shadow:0 10px 28px rgba(6,24,51,.07)}
.walkie-ptt{background:linear-gradient(145deg,#287cc1,#0f8da1);box-shadow:0 16px 36px rgba(25,107,169,.32),0 0 0 9px rgba(40,124,193,.08),inset 0 1px rgba(255,255,255,.35)}.walkie-ptt:active,.walkie-ptt.is-transmitting{transform:scale(.97);background:linear-gradient(145deg,#df3c55,#a70d2d)}
.walkie-composer{background:#fff;border:1px solid rgba(31,89,140,.13);box-shadow:0 9px 24px rgba(6,24,51,.08)}
@media(max-width:700px){.walkie-app{border-radius:0;border-inline:0}.topbar{min-height:62px}.icon-btn{width:46px;height:46px;border-radius:15px}}
@keyframes kani-spin{to{transform:rotate(360deg)}}

/* Standalone live location: map-first, touch-stable presentation. */
.live-location-native-map{overscroll-behavior:contain}
.live-location-native-map__routes{display:none!important}
.live-location-picker__intro small{font-size:12px}
.live-location-search input{font-size:14px}
.live-location-friend strong{font-size:13px}
.live-location-friend small{font-size:12px}
.live-location-selected small,.live-location-connection{font-size:12px}
.live-location-selected strong{font-size:13px}
.live-location-map-empty strong{font-size:13px}
.live-location-map-empty small{font-size:12px}
.live-location-native-marker b{font-size:12px}
.live-location-dock__head strong{font-size:16px}
.live-location-dock__head small,.live-location-dock__head>b{font-size:12px}
.live-location-metrics small{font-size:12px}
.live-location-metrics strong,.live-location-person-card strong{font-size:12px}
.live-location-person-card small,.live-location-notice{font-size:12px}
.live-location-duration button,.live-location-share,.live-location-stop{font-size:13px}
.live-location-privacy{font-size:12px}

@media(max-width:760px){
  body.live-location-page{overflow:hidden;background:#e8f0f3}
  body.live-location-page .mobile-app-nav{display:none!important}
  body.live-location-page .app-main{height:var(--kani-viewport-height,100dvh);min-height:0;padding-bottom:0!important}
  body.live-location-page .topbar{height:64px;min-height:64px}
  body.live-location-page .topbar-actions{display:none}
  body.live-location-page .page{height:calc(var(--kani-viewport-height,100dvh) - 64px);min-height:0;padding:0;overflow:hidden}
  .live-location-workspace{position:relative;display:block;height:100%;min-height:0;overflow:hidden;background:#dbe6e5}
  .live-location-main,.live-location-stage,.live-location-native-map{height:100%;min-height:0}
  .live-location-native-map{border:0;border-radius:0;box-shadow:none;touch-action:none;overscroll-behavior:none}
  .live-location-picker{position:absolute;top:10px;inset-inline:10px;z-index:12;grid-template-columns:minmax(0,1fr) 42px;grid-template-areas:"search refresh" "friends friends";gap:7px;padding:8px;border:1px solid rgba(187,210,223,.9);border-radius:20px;background:rgba(251,254,255,.94);box-shadow:0 10px 28px rgba(5,30,53,.16);backdrop-filter:blur(20px) saturate(145%)}
  .live-location-picker__intro{display:none}
  .live-location-search{height:42px;border-radius:14px;background:rgba(239,246,250,.95)}
  .live-location-refresh{width:42px;height:42px;border-radius:14px}
  .live-location-friends{gap:7px;padding-bottom:0;scrollbar-width:none}
  .live-location-friends::-webkit-scrollbar{display:none}
  .live-location-friend{min-width:146px;max-width:190px;height:51px;padding:5px 8px;border-radius:15px}
  .live-location-friend .avatar,.live-location-avatar{width:37px;height:37px;flex-basis:37px}
  .live-location-friend strong{font-size:13px}
  .live-location-friend small{font-size:12px}
  .live-location-friends__empty{min-height:49px;font-size:12px}
  .live-location-map-topline{display:none}
  .live-location-map-empty{top:190px;inset-inline:12px;max-width:none;padding:9px 11px;border-radius:15px}
  .live-location-map-empty strong{font-size:13px}
  .live-location-map-empty small{display:block;font-size:12px}
  .live-location-map-controls{top:132px;inset-inline-start:12px;transform:none;gap:8px}
  .live-location-native-map:not(.has-live-people) .live-location-map-controls{display:none}
  .live-location-map-control--zoom{display:none!important}
  .live-location-map-controls button,.live-location-recenter{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 7px 20px rgba(5,31,55,.19)}
  .live-location-recenter{inset-inline-end:12px;top:132px;bottom:auto}
  .live-location-attribution{bottom:200px;padding:3px 7px;font-size:10px}
  .live-location-native-marker{transition:left .28s ease-out,top .28s ease-out}
  .live-location-marker__avatar{width:48px;height:48px}
  .live-location-native-marker b{top:35px;padding:5px 9px;font-size:12px}
  .live-location-dock{inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;max-height:min(190px,42%);overflow:auto;padding:12px;border-radius:22px;background:rgba(253,254,255,.97);box-shadow:0 16px 42px rgba(5,30,53,.25);backdrop-filter:blur(22px)}
  .live-location-dock__head strong{font-size:16px}
  .live-location-dock__head small,.live-location-dock__head>b{font-size:12px}
  .live-location-metrics,.live-location-people,.live-location-privacy{display:none}
  .live-location-notice{margin-top:7px;padding:7px 9px;font-size:12px}
  .live-location-duration{gap:7px;margin-top:9px}
  .live-location-duration button{height:39px;border-radius:12px;font-size:13px}
  .live-location-actions{gap:7px;margin-top:8px}
  .live-location-share,.live-location-stop{height:44px;border-radius:14px;font-size:13px}
  .live-location-dock.is-sharing .live-location-duration{display:none}
}

@media(max-width:390px){
  .live-location-picker{top:7px;inset-inline:7px}
  .live-location-friend{min-width:136px}
  .live-location-map-empty{top:185px}
  .live-location-dock{inset-inline:7px;bottom:calc(7px + env(safe-area-inset-bottom));max-height:178px;padding:10px}
  .live-location-recenter{inset-inline-end:9px;top:127px;bottom:auto}
  .live-location-attribution{bottom:188px}
}

/* Persistent Sorani / English switch shared by every authenticated page. */
.topbar-language-switch{height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid rgba(31,89,140,.14);border-radius:14px;background:rgba(255,255,255,.88);color:#164f7d;text-decoration:none;box-shadow:0 7px 18px rgba(6,24,51,.07);font-size:12px;font-weight:850;white-space:nowrap;transition:transform .16s ease,background .16s ease}
.topbar-language-switch:hover{transform:translateY(-1px);background:#fff}
.topbar-language-switch svg{width:18px;height:18px}
.public-language-switch{display:inline-flex!important;align-items:center;gap:6px;font-weight:800}.public-language-switch svg{width:17px;height:17px}

/* Desktop receives the same map-first treatment as mobile. */
@media(min-width:761px){
  body.live-location-page{overflow:hidden;background:#e8f0f3}
  body.live-location-page .app-main{height:100dvh;min-height:0;overflow:hidden}
  body.live-location-page .page{height:calc(100dvh - var(--topbar-height,72px));min-height:0;padding:12px;overflow:hidden}
  .live-location-workspace{position:relative;display:block;height:100%;min-height:560px;overflow:hidden;border:1px solid rgba(166,193,211,.72);border-radius:26px;background:#dbe6e5;box-shadow:0 18px 48px rgba(5,30,53,.14)}
  .live-location-main,.live-location-stage,.live-location-native-map{height:100%;min-height:0}
  .live-location-native-map{border:0;border-radius:26px;box-shadow:none}
  .live-location-picker{position:absolute;top:16px;inset-inline-start:16px;z-index:12;width:min(820px,calc(100% - 32px));grid-template-columns:minmax(260px,1fr) 46px;grid-template-areas:"search refresh" "friends friends";gap:8px;padding:10px;border-radius:21px;background:rgba(252,254,255,.94);box-shadow:0 12px 32px rgba(5,30,53,.16);backdrop-filter:blur(22px) saturate(150%)}
  .live-location-picker__intro{display:none}
  .live-location-search{height:44px;border-radius:14px;background:rgba(238,246,250,.96)}
  .live-location-refresh{width:44px;height:44px;border-radius:14px}
  .live-location-friends{gap:7px;padding-bottom:0;scrollbar-width:thin}
  .live-location-friend{min-width:155px;max-width:205px;height:52px;padding:6px 9px;border-radius:15px}
  .live-location-friend .avatar,.live-location-avatar{width:38px;height:38px;flex-basis:38px}
  .live-location-map-topline{display:none}
  .live-location-map-empty{top:154px;inset-inline-start:16px;max-width:390px;padding:10px 13px;border-radius:16px}
  .live-location-map-controls{inset-inline-start:18px;top:52%;gap:8px}
  .live-location-map-controls button,.live-location-recenter{width:46px;height:46px;border-radius:50%}
  .live-location-recenter{inset-inline-end:18px;bottom:18px}
  .live-location-attribution{inset-inline-start:12px;inset-inline-end:auto;bottom:10px;padding:4px 8px;border-radius:9px;background:rgba(255,255,255,.9);color:#536d80;text-decoration:none;font-size:10px}
  .live-location-dock{inset-inline-end:18px;bottom:18px;width:min(420px,calc(100% - 36px));max-height:min(350px,calc(100% - 175px));padding:14px 15px;border-radius:22px;background:rgba(253,254,255,.96)}
  .live-location-dock:not(.is-sharing) .live-location-metrics,.live-location-dock:not(.is-sharing) .live-location-people,.live-location-dock:not(.is-sharing) .live-location-privacy{display:none}
  .live-location-dock.is-sharing .live-location-duration{display:none}
}

@media(max-width:760px){
  .topbar-language-switch{height:40px;padding:0 10px;border-radius:13px}
  .topbar-language-switch b{font-size:11px}
  .live-location-attribution{color:#536d80;text-decoration:none}
}

/* Keep a consented participant visible while the phone waits for a fresh GPS
   fix. The amber treatment is intentionally clear without implying that the
   share ended; expiry/Stop remain the authoritative session boundary. */
.live-location-native-marker.is-stale .live-location-marker__avatar{border-color:#fff1c7;filter:saturate(.72);box-shadow:0 0 0 5px rgba(222,161,39,.2)}
.live-location-person-card.is-stale{border-color:#ead9ab;background:#fffaf0}
.live-location-person-card.is-stale i{background:#dca126;box-shadow:0 0 0 4px rgba(220,161,38,.14)}