:root {
  color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ink:#faf2ff; --muted:#cdbbd8; --teal:#942cc1; --teal-dark:#711c99; --green:#47d697;
  --red:#ff687e; --soft:#2d1c36; --line:#4a2b55; --card:rgba(22,12,29,.94);
  --dialog:#160c1d; --input:#2c1c33; --secondary:#3a2344; --secondary-hover:#4b2b58;
  --danger:#4d1927; --message:#2e1f35; --outgoing:#481d54; --map-bg:#211527;
  --on-accent:#fff; --shadow:0 16px 42px rgba(0,0,0,.34); --page-tint:rgba(5,2,10,.44);
  --bg-color:#050508; --bg-image:url("/watch/theme-purple-flower.png"); --bg-size:min(900px,100vw) auto;
  --bg-repeat:no-repeat; --bg-position:center 5rem; --theme-browser:#09040d;
}
html[data-theme="wine"] {
  --ink:#fff1ef; --muted:#d6b6b5; --teal:#b31943; --teal-dark:#86102f; --green:#4dd38f;
  --red:#ff7070; --soft:#41191f; --line:#603039; --card:rgba(29,8,12,.95);
  --dialog:#1d080c; --input:#34181c; --secondary:#4a1c24; --secondary-hover:#5c2430;
  --danger:#52181c; --message:#341c20; --outgoing:#5a1828; --map-bg:#2a1116;
  --shadow:0 16px 42px rgba(15,0,3,.42); --page-tint:rgba(8,0,2,.36);
  --bg-color:#130104; --bg-image:url("/watch/theme-wine-texture.png"); --bg-size:420px 742px;
  --bg-repeat:repeat; --bg-position:center top; --theme-browser:#130104;
}
html[data-theme="cast"] {
  color-scheme:light; --ink:#151515; --muted:#555; --teal:#191919; --teal-dark:#000; --green:#23805b;
  --red:#9b2626; --soft:#e2e2e2; --line:#bebebe; --card:rgba(244,244,244,.95);
  --dialog:#f3f3f3; --input:#e1e1e1; --secondary:#d6d6d6; --secondary-hover:#c7c7c7;
  --danger:#ebd1d1; --message:#dadada; --outgoing:#bebebe; --map-bg:#d2d2d2;
  --on-accent:#fff; --shadow:0 16px 42px rgba(0,0,0,.24); --page-tint:rgba(0,0,0,.18);
  --bg-color:#202020; --bg-image:url("/watch/theme-cast-cat.png"); --bg-size:cover;
  --bg-repeat:no-repeat; --bg-position:center center; --theme-browser:#686868;
}
html[data-theme="ocean"] {
  --ink:#e6fffc; --muted:#a2d0cf; --teal:#00bea6; --teal-dark:#009881; --green:#3de7a5;
  --red:#ff707f; --soft:#0b454d; --line:#17606a; --card:rgba(3,35,46,.93);
  --dialog:#03232e; --input:#09353f; --secondary:#0b454d; --secondary-hover:#105762;
  --danger:#4f1b2a; --message:#08323c; --outgoing:#035d60; --map-bg:#052d36;
  --shadow:0 16px 42px rgba(0,13,21,.36); --page-tint:rgba(0,16,26,.22);
  --bg-color:#011523; --bg-image:linear-gradient(145deg,#011523 0%,#024753 58%,#00ad96 130%);
  --bg-size:cover; --bg-repeat:no-repeat; --bg-position:center; --theme-browser:#011523;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; color:var(--ink); background:var(--bg-color);
}
body::before,body::after { content:""; position:fixed; inset:0; pointer-events:none; }
body::before {
  z-index:-2; background-color:var(--bg-color); background-image:var(--bg-image);
  background-size:var(--bg-size); background-repeat:var(--bg-repeat); background-position:var(--bg-position);
}
body::after { z-index:-1; background:var(--page-tint); }
body,button,input,select,dialog { transition:background-color .22s,color .22s,border-color .22s; }
}
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
.shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:24px 0 56px; }
header {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:18px;
  margin-bottom:20px; padding:14px 16px; border:1px solid var(--line); border-radius:24px;
  background:var(--card); box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.brand { display:flex; align-items:center; gap:13px; }
.watch-mark {
  width:50px; height:50px; border-radius:16px; display:grid; place-items:center; color:#fff; font-weight:900;
  letter-spacing:-.08em; background:linear-gradient(145deg,var(--teal),var(--teal-dark)); box-shadow:0 12px 28px rgba(0,0,0,.24);
}
h1 { margin:0; font-size:clamp(1.65rem,4vw,2.45rem); letter-spacing:-.045em; line-height:1; }
.subtitle { color:var(--muted); margin-top:6px; font-size:.94rem; }
.theme-picker { display:flex; align-items:center; justify-content:center; gap:8px; }
.theme-swatch {
  width:30px; height:30px; flex:0 0 30px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.42);
  box-shadow:0 4px 12px rgba(0,0,0,.24); opacity:.7; transition:transform .16s,opacity .16s,box-shadow .16s; cursor:pointer;
}
.theme-swatch:hover { opacity:1; transform:scale(1.08); }
.theme-swatch[aria-pressed="true"] { opacity:1; transform:scale(1.1); box-shadow:0 0 0 3px var(--ink),0 5px 15px rgba(0,0,0,.32); }
.theme-swatch.purple { background:linear-gradient(135deg,#050508 0 49%,#770091 51%); }
.theme-swatch.wine { background:linear-gradient(135deg,#50030f 0 49%,#050506 51%); }
.theme-swatch.cast { background:linear-gradient(135deg,#111 0 49%,#e6e6e6 51%); }
.theme-swatch.ocean { background:linear-gradient(135deg,#011523 0 49%,#00ddbe 51%); }
.account { display:flex; align-items:center; justify-content:flex-end; gap:9px; text-align:right; flex-wrap:wrap; }
.role { display:inline-flex; align-items:center; gap:7px; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-weight:750; }
.role::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.app-download { display:inline-flex; align-items:center; gap:7px; min-height:38px; border-radius:999px; padding:8px 13px; color:var(--on-accent); background:var(--teal); font-weight:800; font-size:.86rem; text-decoration:none; box-shadow:0 7px 18px rgba(0,0,0,.2); }
.app-download:hover { background:var(--teal-dark); }
.app-download span { font-size:1.15rem; line-height:.7; }
.logout-button { border:0; background:transparent; color:var(--muted); padding:7px 4px; font-size:.84rem; text-decoration:underline; text-underline-offset:3px; }
.layout { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:start; }
.card { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:20px; box-shadow:var(--shadow); backdrop-filter:blur(8px); }
.hero { grid-column:span 8; padding:0; overflow:hidden; }
.status-card { grid-column:span 4; }
.span-4 { grid-column:span 4; }
.span-6 { grid-column:span 6; }
.span-8 { grid-column:span 8; }
.span-12 { grid-column:span 12; }
.card h2 { margin:0 0 7px; font-size:1.3rem; letter-spacing:-.025em; }
.help { margin:0 0 15px; color:var(--muted); font-size:.92rem; line-height:1.5; }
.status-head { padding:20px 20px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.connection { display:flex; align-items:center; gap:9px; font-size:1.25rem; font-weight:850; }
.connection::before { content:""; width:11px; height:11px; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(173,59,55,.1); }
.connection.online { color:var(--green); }
.connection.online::before { background:var(--green); box-shadow:0 0 0 5px rgba(20,128,91,.1); }
.coordinates { color:var(--muted); margin-top:7px; font-variant-numeric:tabular-nums; }
.map-wrap { height:440px; background:var(--map-bg); position:relative; }
.map-wrap iframe { border:0; width:100%; height:100%; display:block; }
.map-empty { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); text-align:center; padding:28px; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.stat { padding:14px; border-radius:17px; background:var(--soft); }
.stat-label { display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; }
.stat-value { display:block; margin-top:5px; font-size:1.3rem; font-weight:850; }
.stat-value.compact { font-size:1rem; }
.updated { color:var(--muted); font-size:.82rem; text-align:center; margin-top:14px; }
.stack { display:grid; gap:10px; }
label { color:var(--muted); font-size:.88rem; font-weight:700; }
input,select { width:100%; margin-top:6px; border:1px solid var(--line); background:var(--input); color:var(--ink); border-radius:13px; padding:12px 13px; outline:none; transition:.18s; }
input:focus,select:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,120,110,.1); }
.check { display:flex; align-items:center; justify-content:space-between; gap:14px; color:var(--ink); padding:11px 0; }
.check input { width:48px; height:26px; margin:0; accent-color:var(--teal); }
.button { border:0; border-radius:13px; padding:12px 16px; min-height:46px; font-weight:820; color:var(--on-accent); background:var(--teal); box-shadow:0 7px 18px rgba(0,0,0,.2); transition:.16s; }
.button:hover { background:var(--teal-dark); }
.button:active { transform:translateY(1px); }
.button.secondary { color:var(--ink); background:var(--secondary); box-shadow:none; border:1px solid var(--line); }
.button.secondary:hover { background:var(--secondary-hover); }
.button.danger { color:var(--red); background:var(--danger); box-shadow:none; border:1px solid var(--line); }
.button.hold { touch-action:none; user-select:none; position:relative; overflow:hidden; }
.button.hold::after { content:""; position:absolute; inset:0; width:var(--hold,0%); background:rgba(255,255,255,.22); pointer-events:none; }
.voice-button.recording { background:var(--red); }
.delivery { color:var(--muted); font-size:.86rem; min-height:1.3em; }
.messages { display:grid; gap:10px; max-height:420px; overflow:auto; padding:3px 2px; }
.message { width:min(82%,500px); padding:12px 14px; border-radius:17px; background:var(--message); }
.message.outgoing { justify-self:end; background:var(--outgoing); }
.message small { display:block; color:var(--muted); margin-bottom:7px; }
.message p { margin:0; line-height:1.4; }
audio { display:block; width:100%; height:38px; }
.phonebook-summary { color:var(--ink); line-height:1.55; margin:10px 0 14px; }
.hidden { display:none !important; }
.notice { display:flex; gap:10px; align-items:center; padding:12px 14px; background:var(--soft); border-radius:15px; color:var(--muted); font-size:.87rem; }
.notice strong { color:var(--ink); }
dialog { width:min(720px,calc(100% - 24px)); max-height:88vh; border:1px solid var(--line); border-radius:22px; padding:0; color:var(--ink); background:var(--dialog); box-shadow:0 28px 80px rgba(0,0,0,.4); }
dialog::backdrop { background:rgba(10,30,29,.55); backdrop-filter:blur(3px); }
.login-dialog { width:min(430px,calc(100% - 24px)); }
.login-panel { display:grid; gap:18px; padding:28px; background:var(--dialog); }
.login-panel .watch-mark { width:58px; height:58px; border-radius:18px; }
.login-panel h2 { margin:0 0 6px; font-size:1.65rem; letter-spacing:-.035em; }
.login-panel .help { margin:0; }
.login-error { min-height:1.3em; color:var(--red); font-size:.88rem; }
.dialog-head { position:sticky; top:0; z-index:2; background:var(--dialog); padding:20px 22px 14px; border-bottom:1px solid var(--line); }
.dialog-head h2 { margin:0 0 5px; }
.dialog-body { padding:16px 22px; display:grid; gap:10px; }
.contact-row { display:grid; grid-template-columns:54px 1fr 1.2fr; gap:10px; align-items:end; padding:10px; background:var(--soft); border-radius:15px; }
.contact-index { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--card); font-weight:850; color:var(--teal); align-self:center; }
.dialog-actions { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; background:var(--dialog); border-top:1px solid var(--line); padding:14px 22px 20px; }
.toast { position:fixed; left:50%; bottom:22px; z-index:20; transform:translate(-50%,30px); opacity:0; pointer-events:none; max-width:min(520px,calc(100% - 28px)); background:#153d3b; color:#fff; border-radius:14px; padding:12px 16px; box-shadow:0 15px 36px #0004; transition:.22s; text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#7d2f2c; }
@media(max-width:900px) {
  .hero,.status-card,.span-4,.span-6,.span-8 { grid-column:span 12; }
  .hero { order:0; } .status-card { order:-1; } .map-wrap { height:360px; }
}
@media(max-width:620px) {
  .shell { width:min(100% - 20px,1180px); padding-top:14px; }
  header { grid-template-columns:1fr; align-items:center; gap:12px; padding:14px; }
  .brand { grid-column:1; grid-row:1; }
  .theme-picker { grid-column:1; grid-row:2; justify-content:flex-start; padding-left:56px; }
  .account { grid-column:1; grid-row:3; justify-content:flex-start; width:100%; }
  .theme-swatch { width:28px; height:28px; flex-basis:28px; }
  .watch-mark { width:43px; height:43px; border-radius:14px; }
  .account { max-width:none; } .role,.app-download { font-size:.78rem; text-align:left; } .logout-button { margin-left:auto; font-size:.78rem; }
  .card { border-radius:20px; padding:17px; } .hero { padding:0; }
  .status-head { padding:17px; } .map-wrap { height:310px; }
  .contact-row { grid-template-columns:42px 1fr; } .contact-row label:last-child { grid-column:2; }
  .dialog-body { padding:13px; } .dialog-head,.dialog-actions { padding-left:16px; padding-right:16px; }
  .dialog-actions .button { flex:1; }
  .login-panel { padding:22px; }
}