@font-face {
  font-family: 'Vazirmatn';
  src: url('/fonts/Vazirmatn.woff2') format('woff2-variations'), url('/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --accent: #3390ec;
  --accent-hover: #2a7fd4;
  --accent-soft: rgba(51, 144, 236, .1);
  --bg: #ffffff;
  --bg-2: #f4f4f5;
  --hover: #f4f4f5;
  --active: #3390ec;
  --fg: #000000;
  --fg-2: #707579;
  --border: #dadce0;
  --danger: #e53935;
  --green: #4fae4e;
  --chat-bg: linear-gradient(160deg, #d9e6b8 0%, #b4d39f 45%, #8fbf96 100%);
  --bubble-in: #ffffff;
  --bubble-out: #eeffde;
  --bubble-out-meta: #4fae4e;
  --bubble-in-meta: #a0acb6;
  --link-out: #3a8e2d;
  --shadow: 0 1px 2px rgba(16, 35, 47, .15);
  --menu-bg: rgba(255, 255, 255, .96);
  --menu-shadow: 0 .25rem .5rem .125rem rgba(0, 0, 0, .1);
  --system-bg: rgba(0, 0, 0, .25);
  --radius: 12px;
  --sidebar-w: 420px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --accent: #8774e1;
  --accent-hover: #7a66d8;
  --accent-soft: rgba(135, 116, 225, .15);
  --bg: #212121;
  --bg-2: #181818;
  --hover: #2c2c2c;
  --active: #8774e1;
  --fg: #ffffff;
  --fg-2: #aaaaaa;
  --border: #303030;
  --chat-bg: linear-gradient(160deg, #1d2a3b 0%, #2a2340 50%, #1b2333 100%);
  --bubble-in: #212121;
  --bubble-out: #766ac8;
  --bubble-out-meta: #ffffffcc;
  --bubble-in-meta: #888;
  --link-out: #fff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --menu-bg: rgba(33, 33, 33, .96);
  --menu-shadow: 0 .25rem .5rem .125rem rgba(0, 0, 0, .35);
  --system-bg: rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Vazirmatn', Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
svg.i { width: 24px; height: 24px; fill: currentColor; flex: none; }
.hidden { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--fg-2); }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#app { height: 100%; height: 100dvh; }
.splash { height: 100%; display: grid; place-items: center; }
.splash img { animation: pulse 1.4s ease-in-out infinite; border-radius: 50%; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .7; } }

/* ---------- auth */
.auth { height: 100%; overflow: auto; display: flex; justify-content: center; padding: 48px 16px; }
.auth-box { width: 100%; max-width: 360px; text-align: center; }
.auth-logo { width: 160px; height: 160px; margin: 0 auto 20px; display: block; border-radius: 50%; }
.auth h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.auth p.hint { color: var(--fg-2); margin: 0 0 28px; font-size: 14px; }
.auth .btn { width: 100%; margin-top: 8px; }
.auth .alt-links { margin-top: 16px; font-size: 14px; }
.code-input { letter-spacing: 12px; text-align: center; font-size: 22px !important; direction: ltr; }

/* ---------- form */
.field { position: relative; margin-bottom: 18px; text-align: right; }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  padding: 14px 16px; outline: none; transition: border-color .15s, box-shadow .15s; font-size: 16px;
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field label { position: absolute; top: -9px; right: 12px; padding: 0 4px; background: var(--bg); color: var(--fg-2); font-size: 12px; }
.field .help { font-size: 12px; color: var(--fg-2); margin-top: 6px; }
.field .help.err { color: var(--danger); }
.field .help.ok { color: var(--green); }
.field .prefix { position: absolute; left: 14px; top: 15px; color: var(--fg-2); direction: ltr; pointer-events: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px;
  background: var(--accent); color: #fff; border-radius: 10px; font-weight: 600; font-size: 15px; transition: background .15s, opacity .15s;
}
.btn:hover { background: var(--accent-hover); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn.flat { background: transparent; color: var(--accent); }
.btn.flat:hover { background: var(--accent-soft); }
.btn.danger { background: transparent; color: var(--danger); }
.btn.danger:hover { background: rgba(229, 57, 53, .08); }
.btn.small { height: 36px; font-size: 14px; padding: 0 14px; }
.err-text { color: var(--danger); font-size: 13px; min-height: 18px; margin: 4px 0 8px; }

/* ---------- layout */
.main { display: flex; height: 100%; position: relative; overflow: hidden; overflow: clip; }
.sidebar {
  width: var(--sidebar-w); min-width: 280px; max-width: 40vw; height: 100%; display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--border); background: var(--bg); position: relative; z-index: 2;
}
.chat-pane { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; position: relative; background: var(--chat-bg); }
.chat-pane::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 40% 80%, #fff 0 1px, transparent 2px);
  background-size: 120px 120px, 90px 90px, 60px 60px;
}
:root[data-theme='dark'] .chat-pane::before { opacity: .06; }
.info-pane {
  width: 0; height: 100%; overflow: hidden; background: var(--bg); border-inline-start: 1px solid var(--border);
  transition: width .25s ease; display: flex; flex-direction: column; flex: none;
}
.main.info-open .info-pane { width: var(--sidebar-w); }
.empty-chat { margin: auto; position: relative; }
.empty-chat span { background: var(--system-bg); color: #fff; padding: 4px 12px; border-radius: 16px; font-size: 14px; }

@media (max-width: 900px) {
  .sidebar { width: 100%; max-width: none; border: 0; }
  .chat-pane { position: absolute; inset: 0; transform: translateX(-100%); transition: transform .25s ease; z-index: 3; }
  .main.chat-open .chat-pane { transform: none; }
  .main.chat-open .sidebar { transform: translateX(20%); transition: transform .25s ease; }
  .info-pane { position: absolute; inset: 0; width: 100% !important; transform: translateX(-100%); transition: transform .25s ease; z-index: 4; border: 0; }
  .main.info-open .info-pane { transform: none; }
}
@media (min-width: 901px) and (max-width: 1275px) {
  .main.info-open .info-pane { position: absolute; left: 0; top: 0; bottom: 0; z-index: 4; box-shadow: var(--menu-shadow); }
}

/* ---------- topbars */
.topbar { height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px; padding-top: var(--safe-t); box-sizing: content-box; }
.sidebar .topbar { padding-inline: 12px 8px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--fg-2); flex: none; transition: background .15s; position: relative;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn.accent { color: var(--accent); }
.search {
  flex: 1; height: 42px; border-radius: 22px; background: var(--bg-2); display: flex; align-items: center; gap: 8px; padding: 0 12px;
  border: 2px solid transparent; transition: border-color .15s, background .15s;
}
.search:focus-within { border-color: var(--accent); background: var(--bg); }
.search input { flex: 1; border: 0; background: none; outline: none; min-width: 0; }
.search svg { color: var(--fg-2); width: 22px; height: 22px; }
.chat-head {
  background: var(--bg); border-bottom: 1px solid var(--border); position: relative; z-index: 2; cursor: default;
  padding-inline: 8px 12px;
}
.chat-head .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px; border-radius: 8px; }
.chat-head .t { font-weight: 600; font-size: 16px; }
.chat-head .s { font-size: 13px; color: var(--fg-2); }
.chat-head .s.on { color: var(--accent); }
.back-btn { display: none; }
@media (max-width: 900px) { .back-btn { display: grid; } }

/* ---------- avatar */
.avatar {
  width: 54px; height: 54px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600;
  font-size: 20px; position: relative; user-select: none; background-size: cover; background-position: center; background-clip: padding-box;
}
.avatar.sm { width: 42px; height: 42px; font-size: 16px; }
.avatar.xs { width: 34px; height: 34px; font-size: 14px; }
.avatar.lg { width: 120px; height: 120px; font-size: 44px; }
.avatar.saved { background: linear-gradient(#72d5fd, #2a9ef1); }
.avatar .on-dot { position: absolute; bottom: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%; background: #0ac630; border: 2.5px solid var(--item-bg, var(--bg)); box-sizing: border-box; z-index: 1; }
.avatar.sm .on-dot { width: 13px; height: 13px; bottom: -1px; left: -1px; border-width: 2px; }
.avatar.xs .on-dot { width: 11px; height: 11px; bottom: -1px; left: -1px; border-width: 2px; }
.c0 { background: linear-gradient(#ff885e, #ff516a); } .c1 { background: linear-gradient(#ffcd6a, #ffa85c); }
.c2 { background: linear-gradient(#82b1ff, #665fff); } .c3 { background: linear-gradient(#a0de7e, #54cb68); }
.c4 { background: linear-gradient(#53edd6, #28c9b7); } .c5 { background: linear-gradient(#72d5fd, #2a9ef1); }
.c6 { background: linear-gradient(#e0a2f3, #d669ed); }

/* ---------- chat list */
.list-scroll { flex: 1; overflow-y: auto; padding: 0 8px 8px; overscroll-behavior: contain; }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: var(--radius); cursor: pointer; position: relative; user-select: none; }
.chat-item:hover { background: var(--hover); }
.chat-item.active { background: var(--active); color: #fff; }
.chat-item.active .muted, .chat-item.active .time, .chat-item.active .preview, .chat-item.active .ticks { color: rgba(255, 255, 255, .85) !important; }
.chat-item .row { display: flex; align-items: center; gap: 6px; }
.chat-item .name { font-weight: 600; flex: 1; min-width: 0; }
.chat-item .time { font-size: 12px; color: var(--fg-2); flex: none; }
.chat-item .preview { color: var(--fg-2); flex: 1; min-width: 0; font-size: 14.5px; }
.chat-item .preview .from { color: var(--fg); }
.chat-item.active .preview .from { color: #fff; }
.chat-item .typing { color: var(--accent); }
.chat-item.active .typing { color: #fff; }
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--green); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; flex: none; }
.badge.muted-b { background: #c4c9cc; }
:root[data-theme='dark'] .badge.muted-b { background: #555; }
.chat-item.active .badge { background: #fff; color: var(--accent); }
.pin-ic { width: 16px; height: 16px; color: #c4c9cc; }
.type-ic { width: 16px; height: 16px; color: var(--fg); }
.chat-item.active .type-ic { color: #fff; }
.ticks { width: 18px; height: 18px; color: var(--green); flex: none; }
.section-title { font-size: 14px; color: var(--fg-2); padding: 12px 10px 6px; font-weight: 600; }
.list-empty { color: var(--fg-2); text-align: center; padding: 32px 16px; }

.fab {
  position: absolute; left: 20px; bottom: calc(20px + var(--safe-b)); width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); z-index: 3; transition: transform .2s;
}
.fab:hover { background: var(--accent-hover); }
.banner { margin: 0 8px 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; gap: 10px; font-size: 14px; }
.banner .grow { line-height: 1.5; }

/* ---------- messages */
.msgs { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; padding: 8px 0; overscroll-behavior: contain; display: flex; flex-direction: column; }
.msgs-inner { width: 100%; max-width: 760px; margin: auto auto 0; padding: 0 16px; display: flex; flex-direction: column; }
@media (max-width: 600px) { .msgs-inner { padding: 0 8px; } }
.day-sep { align-self: center; margin: 10px 0; position: sticky; top: 4px; z-index: 1; }
.day-sep span, .sys-msg span { background: var(--system-bg); color: #fff; padding: 3px 10px; border-radius: 14px; font-size: 13px; font-weight: 500; display: inline-block; }
.sys-msg { align-self: center; margin: 6px 0; text-align: center; max-width: 80%; }
.msg { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; max-width: 100%; position: relative; }
.msg.first { margin-top: 8px; }
.msg.out { flex-direction: row-reverse; align-self: flex-end; }
.msg.in { align-self: flex-start; }
.msg .avatar { visibility: hidden; }
.msg.last .avatar { visibility: visible; }
.msg.selected::after { content: ''; position: absolute; inset: -1px -100vw; background: var(--accent-soft); z-index: -1; }
.bubble {
  max-width: min(480px, 78vw); padding: 6px 9px 6px; border-radius: 15px; background: var(--bubble-in); box-shadow: var(--shadow);
  position: relative; word-wrap: break-word; overflow-wrap: anywhere; min-width: 64px;
}
.channel-msgs .bubble { max-width: min(560px, 88vw); }
.msg.out .bubble { background: var(--bubble-out); }
:root[data-theme='dark'] .msg.out .bubble { color: #fff; }
.msg.in.last .bubble { border-bottom-right-radius: 4px; }
.msg.out.last .bubble { border-bottom-left-radius: 4px; }
.bubble .author { font-weight: 600; font-size: 14px; margin-bottom: 1px; cursor: pointer; }
.bubble .text { white-space: pre-wrap; direction: auto; text-align: start; unicode-bidi: plaintext; font-size: var(--msg-size, 15px); line-height: 1.5; }
.bubble .text a { word-break: break-all; }
.msg.out .text a { color: var(--link-out); }
.bubble .meta {
  float: left; margin: 6px 8px -4px 0; font-size: 12px; color: var(--bubble-in-meta); display: inline-flex; align-items: center; gap: 3px;
  line-height: 1; height: 16px; position: relative; top: 3px; user-select: none; direction: ltr;
}
.msg.out .bubble .meta { color: var(--bubble-out-meta); }
.bubble .meta .ticks { width: 18px; height: 18px; color: inherit; }
.bubble .meta .views { margin-right: 8px; }
.bubble .text .meta { margin-bottom: -6px; }
.bubble > .meta { float: none; display: flex; justify-content: flex-end; margin: 2px 0 0; top: 0; }
.bubble .meta svg.eye { width: 14px; height: 14px; }
.bubble.media-only { padding: 0; overflow: hidden; background: transparent; box-shadow: none; }
.bubble.media-only .meta { position: absolute; left: 6px; bottom: 6px; top: auto; margin: 0; float: none; background: rgba(0, 0, 0, .35); color: #fff !important; padding: 2px 6px; height: 20px; border-radius: 10px; }
.bubble .photo { display: block; max-width: 100%; border-radius: 10px; margin: -2px -5px 4px; width: calc(100% + 10px); max-height: 420px; object-fit: cover; cursor: zoom-in; background: rgba(0,0,0,.05); }
.bubble.media-only .photo { margin: 0; width: 100%; border-radius: 15px; }
.bubble video.photo { cursor: default; }
.bubble .file { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 2px 0; }
.bubble .file .fi { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.msg.out .bubble .file .fi { background: var(--green); }
:root[data-theme='dark'] .msg.out .bubble .file .fi { background: #fff; color: var(--bubble-out); }
.bubble .file .fn { font-weight: 600; font-size: 14px; }
.bubble .file .fs { font-size: 13px; color: var(--bubble-in-meta); direction: ltr; text-align: right; }
.msg.out .bubble .file .fs { color: var(--bubble-out-meta); }
.bubble audio { width: 260px; max-width: 100%; height: 40px; display: block; }
.reply-q, .fwd-h {
  border-inline-start: 3px solid var(--accent); padding: 2px 8px; margin: 2px 0 4px; border-radius: 4px; background: var(--accent-soft);
  font-size: 14px; cursor: pointer; max-width: 100%; overflow: hidden;
}
.msg.out .reply-q { border-color: var(--green); background: rgba(79, 174, 78, .12); }
:root[data-theme='dark'] .msg.out .reply-q { border-color: #fff; background: rgba(255,255,255,.12); }
.reply-q b, .fwd-h b { color: var(--accent); font-weight: 600; display: block; font-size: 13.5px; }
.msg.out .reply-q b { color: var(--green); }
:root[data-theme='dark'] .msg.out .reply-q b { color: #fff; }
.fwd-h { background: none; border: 0; padding: 0; margin: 0 0 4px; color: var(--accent); }
.fwd-h b { display: inline; }
.msg.out .fwd-h { color: var(--green); }
:root[data-theme='dark'] .msg.out .fwd-h { color: #fff; }
.msg.flash .bubble { animation: flash 1.2s ease; }
@keyframes flash { 30% { filter: brightness(.85); } }
.edited { font-style: normal; margin-left: 2px; }
.load-more { align-self: center; margin: 8px; }
.jump-down {
  position: absolute; left: 20px; bottom: 80px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--fg-2);
  display: grid; place-items: center; box-shadow: var(--menu-shadow); z-index: 3;
}
.jump-down .badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }

/* ---------- composer */
.composer-wrap { flex: none; padding: 8px 16px calc(12px + var(--safe-b)); position: relative; z-index: 2; }
.composer-wrap .inner { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; }
@media (max-width: 600px) { .composer-wrap { padding-inline: 8px; } }
.composer { flex: 1; min-width: 0; background: var(--bg); border-radius: 18px; border-bottom-left-radius: 4px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.composer .row { display: flex; align-items: flex-end; min-height: 54px; padding: 0 4px; }
.composer textarea {
  flex: 1; border: 0; outline: none; background: none; resize: none; max-height: 220px; padding: 15px 6px; line-height: 1.4;
  min-height: 54px; direction: auto; unicode-bidi: plaintext; text-align: start;
}
.composer .icon-btn { margin-bottom: 7px; }
.composer .ctx-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 0; }
.composer .ctx-bar .q { flex: 1; min-width: 0; border-inline-start: 2px solid var(--accent); padding-inline-start: 8px; font-size: 14px; }
.composer .ctx-bar .q b { color: var(--accent); display: block; font-size: 13.5px; }
.send-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--bg); color: var(--accent); display: grid; place-items: center; box-shadow: var(--shadow); flex: none; transition: background .15s, color .15s; }
.send-btn.go { background: var(--accent); color: #fff; }
.send-btn.rec { background: var(--danger); color: #fff; animation: rec 1s infinite; }
@keyframes rec { 50% { box-shadow: 0 0 0 8px rgba(229, 57, 53, .2); } }
.send-btn svg { transform: scaleX(-1); }
.rec-info { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 54px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.bottom-bar { flex: none; padding: 8px 16px calc(12px + var(--safe-b)); display: flex; justify-content: center; position: relative; z-index: 2; }
.bottom-bar .btn { width: 100%; max-width: 480px; background: var(--bg); color: var(--accent); box-shadow: var(--shadow); border-radius: 14px; }
.bottom-bar .btn:hover { background: var(--hover); }
.bottom-bar .btn.primary { background: var(--accent); color: #fff; }

/* ---------- info pane / pages */
.page { display: flex; flex-direction: column; height: 100%; background: var(--bg); }
.page .scroll { flex: 1; overflow-y: auto; }
.page .topbar .title { font-size: 19px; font-weight: 600; flex: 1; }
.profile-head { text-align: center; padding: 8px 16px 18px; }
.profile-head .avatar { margin: 0 auto 12px; cursor: pointer; }
.profile-head .n { font-size: 20px; font-weight: 600; }
.profile-head .s { color: var(--fg-2); font-size: 14px; }
.row-item { display: flex; align-items: center; gap: 20px; padding: 10px 20px; cursor: pointer; min-height: 56px; border-radius: 10px; margin: 0 8px; }
.row-item:hover { background: var(--hover); }
.row-item > svg { color: var(--fg-2); }
.row-item .v { font-size: 15.5px; word-break: break-word; }
.row-item .l { font-size: 13px; color: var(--fg-2); }
.row-item.danger, .row-item.danger svg { color: var(--danger); }
.row-item .sw { margin-inline-start: auto; }
.sep { height: 10px; background: var(--bg-2); margin: 8px 0; }
.page form { padding: 16px; }
.avatar-pick { position: relative; width: 120px; margin: 8px auto 24px; cursor: pointer; }
.avatar-pick .ov { position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); display: grid; place-items: center; color: #fff; }

/* switch */
.switch { position: relative; width: 36px; height: 14px; border-radius: 7px; background: #c4c9cc; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: -3px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #c4c9cc; transition: transform .2s, border-color .2s; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(-20px); border-color: var(--accent); }

/* radios */
.radio { display: flex; align-items: center; gap: 16px; padding: 12px 20px; cursor: pointer; border-radius: 10px; margin: 0 8px; }
.radio:hover { background: var(--hover); }
.radio .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--fg-2); position: relative; flex: none; }
.radio.on .dot { border-color: var(--accent); }
.radio.on .dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }

/* member / pick lists */
.pick-item { display: flex; align-items: center; gap: 12px; padding: 7px 12px; border-radius: 10px; cursor: pointer; margin: 0 8px; }
.pick-item:hover { background: var(--hover); }
.pick-item .role { font-size: 13px; color: var(--fg-2); margin-inline-start: auto; }
.pick-item .chk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex: none; margin-inline-start: auto; display: grid; place-items: center; }
.pick-item.on .chk { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); border-radius: 16px; padding: 2px 4px 2px 10px; font-size: 14px; }
.chip .avatar { width: 28px; height: 28px; font-size: 12px; }

/* ---------- menus / modal / toast */
#layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#layer > * { pointer-events: auto; }
.backdrop { position: fixed; inset: 0; z-index: 50; }
.backdrop.dim { background: rgba(0, 0, 0, .35); animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.menu {
  position: fixed; min-width: 200px; max-width: 280px; background: var(--menu-bg); backdrop-filter: blur(10px); border-radius: 12px;
  box-shadow: var(--menu-shadow); padding: 4px 0; z-index: 51; animation: pop .14s ease-out; transform-origin: top right;
}
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
.menu button { width: 100%; display: flex; align-items: center; gap: 18px; padding: 8px 16px; font-size: 14.5px; font-weight: 500; text-align: start; border-radius: 6px; }
.menu button:hover { background: rgba(0, 0, 0, .06); }
:root[data-theme='dark'] .menu button:hover { background: rgba(255, 255, 255, .08); }
.menu button svg { width: 20px; height: 20px; color: var(--fg-2); }
.menu button.danger, .menu button.danger svg { color: var(--danger); }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg); border-radius: 14px; z-index: 51;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; padding: 20px 20px 12px; box-shadow: var(--menu-shadow); animation: pop .15s;
}
.modal h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.modal .body { color: var(--fg); margin-bottom: 12px; line-height: 1.7; }
.modal .actions { display: flex; justify-content: flex-start; gap: 4px; flex-wrap: wrap; flex-direction: row-reverse; }
.modal .check { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; cursor: pointer; }
.modal .check .box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--fg-2); display: grid; place-items: center; }
.modal .check.on .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.modal-preview { text-align: center; }
.modal-preview .avatar { margin: 0 auto 12px; }
#toast {
  position: fixed; bottom: calc(24px + var(--safe-b)); left: 50%; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .8); color: #fff;
  padding: 10px 18px; border-radius: 12px; font-size: 14px; z-index: 60; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.viewer { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 55; display: grid; place-items: center; animation: fade .15s; }
.viewer img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.viewer .icon-btn { position: absolute; top: 12px; color: #fff; }
.viewer .icon-btn:hover { background: rgba(255,255,255,.1); }

.spinner { width: 24px; height: 24px; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 24px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.conn-state { font-size: 13px; color: var(--fg-2); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .2); border-radius: 3px; }
:root[data-theme='dark'] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== v0.2 ===================== */

/* app-like: no zoom, no text-selection callouts on UI chrome (message text stays copyable via the menu) */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable], .safety-code, .dns { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
@media (pointer: fine) { .bubble .text { -webkit-user-select: text; user-select: text; } }
img { -webkit-user-drag: none; }
@media (max-width: 900px) {
  /* iOS zooms into inputs smaller than 16px — keep them at 16px */
  input, textarea, select, .composer textarea { font-size: 16px !important; }
}

.lock-ic { width: 14px; height: 14px; color: var(--green); vertical-align: -1px; margin-inline-end: 4px; }
.e2e-note { align-self: center; max-width: 420px; margin: 10px auto 6px; background: var(--system-bg); color: #fff; padding: 8px 14px; border-radius: 14px; font-size: 13px; display: flex; gap: 8px; align-items: center; line-height: 1.7; }
.e2e-note svg { width: 18px; height: 18px; flex: none; }
.e2e-err { color: var(--fg-2); font-style: italic; }
.photo.loading { min-height: 160px; min-width: 200px; background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* reactions */
.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 14px; background: var(--accent-soft); font-size: 15px; line-height: 1.6; }
.react span { font-size: 13px; color: var(--accent); font-weight: 600; }
.react.mine { background: var(--accent); }
.react.mine span { color: #fff; }
.msg.out .react { background: rgba(79,174,78,.15); }
.msg.out .react span { color: var(--green); }
.msg.out .react.mine { background: var(--green); }
.msg.out .react.mine span { color: #fff; }
.bubble > .meta { margin-top: 4px; }
.menu.with-header { padding-top: 0; min-width: 312px; max-width: 330px; }
.menu-reacts { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.menu-reacts button { width: 34px !important; height: 34px; padding: 0 !important; font-size: 22px !important; justify-content: center; border-radius: 50% !important; transition: transform .12s; flex: none; }
.menu-reacts button:hover { transform: scale(1.2); background: none !important; }
.menu-reacts button.mine { background: var(--accent-soft) !important; }

/* pinned bar */
.pin-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--border); cursor: pointer; position: relative; z-index: 2; min-height: 48px; }
.pin-bar b { color: var(--accent); font-size: 13.5px; display: block; }
.pin-bar .ellipsis { font-size: 14px; }
.pin-lines { display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; }
.pin-lines span { width: 3px; flex: 1; max-height: 14px; border-radius: 2px; background: var(--accent-soft); }
.pin-lines span.on { background: var(--accent); }
.pin-meta { width: 12px; height: 12px; }

/* multi-select */
.sel-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.15); flex: none; display: grid; place-items: center; align-self: center; color: #fff; }
.msg.selected .sel-dot { background: var(--green); border-color: var(--green); }
.msg.selected .sel-dot svg { width: 16px; height: 16px; }
.msg.selected::after { content: ''; position: absolute; inset: -1px -100vw; background: var(--accent-soft); z-index: -1; }
.select-bar { gap: 8px; }
.select-bar .btn { flex: 1; max-width: 240px; }
.select-bar .btn.danger { background: var(--bg); }

/* emoji */
.emoji-panel { max-width: 760px; margin: 0 auto 8px; background: var(--bg); border-radius: 14px; box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; padding: 6px 10px 10px; }
.emoji-cat { font-size: 12px; color: var(--fg-2); padding: 6px 4px 2px; font-weight: 600; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.emoji-grid button { font-size: 24px; height: 40px; border-radius: 8px; }
.emoji-grid button:hover { background: var(--hover); }
.composer .row .icon-btn:first-child { margin-inline-start: 2px; }

/* story reply reference in a bubble */
.story-ref { display: flex; gap: 8px; align-items: center; border-inline-start: 3px solid var(--accent); padding: 4px 8px; margin: 2px 0 6px; border-radius: 4px; background: var(--accent-soft); font-size: 13px; }
.story-ref .thumb { width: 32px; height: 48px; border-radius: 4px; background: #000 center/cover; flex: none; }
.story-ref b { color: var(--accent); display: block; }

/* archive row + unread dot */
.archive-av { background: #9aa3ab; }
.archive-av svg { color: #fff; }
.badge.dot { min-width: 12px; width: 12px; height: 12px; padding: 0; }

/* banners */
.banner.warn { background: rgba(229,57,53,.08); }
.banner.warn svg { color: var(--danger); }

/* stories bar */
.list-scroll-wrap { flex: 1; overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior: contain; }
.list-scroll-wrap .list-scroll { flex: none; overflow: visible; }
.story-bar { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.story-bar::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; flex: none; }
.story-item .nm { font-size: 12px; max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.ring { position: relative; padding: 2px; border-radius: 50%; background: conic-gradient(from 180deg, #3390ec, #7c4dff, #00c6ff, #3390ec); }
.ring .avatar { border: 2px solid var(--bg); width: 54px; height: 54px; }
.ring.seen { background: #c4c9cc; }
:root[data-theme='dark'] .ring.seen { background: #555; }
.ring.add { background: transparent; }
.ring .plus { position: absolute; bottom: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid var(--bg); display: grid; place-items: center; }
.ring .plus svg { width: 14px; height: 14px; }

/* story viewer */
.story-viewer { position: fixed; inset: 0; background: #000; z-index: 70; display: grid; place-items: center; animation: fade .15s; }
.sv-frame { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: 100dvh; max-height: 100dvh; background: #111; overflow: hidden; }
@media (min-width: 700px) { .sv-frame { height: 92vh; border-radius: 12px; width: min(460px, calc(92vh * 9 / 16)); } }
.sv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sv-bars { position: absolute; top: calc(8px + var(--safe-t)); left: 8px; right: 8px; display: flex; gap: 4px; z-index: 3; direction: rtl; }
.sv-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-bars i { display: block; height: 100%; background: #fff; float: right; }
.sv-head { position: absolute; top: calc(18px + var(--safe-t)); left: 8px; right: 12px; display: flex; align-items: center; gap: 10px; z-index: 4; color: #fff; }
.sv-head b { display: block; font-size: 15px; }
.sv-head span { font-size: 12px; opacity: .8; }
.sv-head .icon-btn { color: #fff; }
.sv-head .icon-btn:hover { background: rgba(255,255,255,.12); }
.sv-tap { position: absolute; top: 70px; bottom: 120px; width: 40%; z-index: 2; }
.sv-tap.left { left: 0; }
.sv-tap.right { right: 0; }
.sv-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px calc(14px + var(--safe-b)); z-index: 4; background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.sv-caption { font-size: 15px; line-height: 1.7; margin-bottom: 10px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sv-reacts { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.sv-reacts button { font-size: 26px; transition: transform .15s; }
.sv-reacts button.pop { transform: scale(1.4); }
.sv-reply { display: flex; gap: 6px; align-items: center; }
.sv-reply input { flex: 1; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.3); color: #fff; border-radius: 22px; padding: 10px 16px; outline: none; }
.sv-reply .icon-btn { color: #fff; }
.sv-reply .icon-btn svg { transform: scaleX(-1); }
.sv-views { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 auto; }
.sv-views svg { width: 20px; height: 20px; }
.story-prev { width: 100%; max-height: 50vh; object-fit: contain; border-radius: 10px; background: #000; }
.seg { display: flex; background: var(--bg-2); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 8px; border-radius: 8px; font-size: 14px; }
.seg button.on { background: var(--bg); box-shadow: var(--shadow); font-weight: 600; }

/* avatar cropper */
.crop-modal { width: min(380px, calc(100vw - 24px)); }
.crop-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.crop-stage { position: relative; overflow: hidden; border-radius: 12px; background: #000; touch-action: none; cursor: grab; }
.crop-stage:active { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.8); }
.crop-tools { display: flex; align-items: center; gap: 10px; width: 100%; }
.crop-zoom { flex: 1; accent-color: var(--accent); }

/* E2E settings */
.e2e-hero { text-align: center; padding: 12px 24px 8px; }
.e2e-hero > svg { width: 56px; height: 56px; color: var(--green); }
.e2e-hero p { line-height: 1.9; font-size: 14px; }
.e2e-state { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.e2e-state.ready { background: rgba(79,174,78,.15); color: var(--green); }
.e2e-state.locked, .e2e-state.lost { background: rgba(229,57,53,.1); color: var(--danger); }
.safety-code { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; font-family: ui-monospace, monospace; font-size: 18px; text-align: center; padding: 8px 0 12px; letter-spacing: 1px; }

/* ===================== v0.3 — Telegram-like polish ===================== */

/* chat list items: inner layer slides for swipe-to-archive, item colour drives the online-dot ring */
.chat-item { --item-bg: var(--bg); padding: 0; display: block; overflow: hidden; background: transparent !important; }
.chat-item:hover { --item-bg: var(--hover); }
.chat-item.active { --item-bg: var(--active); }
.ci-inner { display: flex; align-items: center; gap: 10px; padding: 9px; background: var(--item-bg); border-radius: var(--radius); position: relative; z-index: 1; will-change: transform; }
.ci-swipe { position: absolute; inset: 0; border-radius: var(--radius); background: #9aa3ab; color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 22px; font-size: 14px; font-weight: 600; opacity: 0; }
.chat-item.swiping .ci-swipe { opacity: 1; }
.chat-item.swipe-ready .ci-swipe { background: var(--accent); }
.chat-item.archive-row { display: flex; align-items: center; gap: 10px; padding: 9px; background: var(--item-bg) !important; }
.chat-item .name { font-size: 16px; }
.chat-item .preview { font-size: 15px; }
.draft { color: var(--danger); }
.chat-item.active .draft { color: #ffd7d7; }
.ctags { display: inline-flex; gap: 4px; flex: none; }
.ctag { font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 9px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); font-weight: 600; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item.active .ctag { color: #fff; background: rgba(255,255,255,.22); }
.list-empty .empty-ic { font-size: 44px; margin-bottom: 8px; }

/* folder tabs */
.ftabs { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; flex: none; border-bottom: 1px solid var(--border); }
.ftabs::-webkit-scrollbar { display: none; }
.ftabs.force-hide { display: none; }
.ftab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px 11px; font-size: 14.5px; font-weight: 600; color: var(--fg-2); border-radius: 8px 8px 0 0; white-space: nowrap; overflow: hidden; }
.ftab:hover { background: var(--hover); }
.ftab.on { color: var(--accent); }
.ftab.on::after { content: ''; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.tbadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #a0acb6; color: #fff; font-size: 11px; display: grid; place-items: center; }
.ftab.on .tbadge { background: var(--accent); }
.tdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tdot.big { width: 14px; height: 14px; }
.fe { font-size: 22px; width: 28px; text-align: center; flex: none; }

/* bubble tails (Telegram) — incoming on the right, outgoing on the left in RTL */
.msg.last .bubble:not(.media-only)::after {
  content: ''; position: absolute; bottom: 0; width: 11px; height: 18px; background: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M0 0v18h11C5 17 1 12 0 0z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M0 0v18h11C5 17 1 12 0 0z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.msg.in.last .bubble:not(.media-only) { border-bottom-right-radius: 0; }
.msg.in.last .bubble:not(.media-only)::after { right: -10px; }
.msg.out.last .bubble:not(.media-only) { border-bottom-left-radius: 0; }
.msg.out.last .bubble:not(.media-only)::after { left: -10px; transform: scaleX(-1); }
.msg.in.last { margin-inline-end: 10px; }
.msg.out.last { margin-inline-start: 10px; }
.msg.in, .msg.out { padding-inline: 2px; }
.msg.in:not(.last), .msg.out:not(.last) { margin-inline: 10px; }
.msg.reply-ready .bubble { box-shadow: 0 0 0 2px var(--accent); }

/* unread divider */
.unread-sep { align-self: stretch; text-align: center; margin: 8px -16px; background: rgba(255,255,255,.55); color: var(--fg-2); font-size: 13px; padding: 3px 0; font-weight: 600; }
:root[data-theme='dark'] .unread-sep { background: rgba(0,0,0,.3); color: #ccc; }

/* typing dots */
.tdots { display: inline-flex; gap: 2px; margin-inline-start: 3px; vertical-align: middle; }
.tdots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .3; animation: tdot 1.2s infinite; }
.tdots i:nth-child(2) { animation-delay: .2s; }
.tdots i:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 30% { opacity: 1; transform: translateY(-2px); } 60% { opacity: .3; transform: none; } }

/* ripple */
.ripple-host { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .12; transform: scale(0); animation: ripple .55s ease-out forwards; pointer-events: none; z-index: 2; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.icon-btn .ripple { opacity: .18; }

/* page transitions (RTL: new pages slide in from the left) */
.sidebar > .page:not(.side-root), .info-pane > .page { animation: pageIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn { from { transform: translateX(-24px); opacity: 0; } }
.no-anim *, .no-anim *::before, .no-anim *::after { animation: none !important; transition: none !important; }
.no-pattern .chat-pane::before { display: none; }

/* snackbar with action */
#toast.has-act { pointer-events: auto; display: flex; align-items: center; gap: 16px; padding-inline-end: 10px; }
.toast-act { color: #8ec5ff; font-weight: 700; padding: 4px 8px; border-radius: 6px; }
.toast-act:hover { background: rgba(255,255,255,.1); }
:root[data-theme='dark'] .toast-act { color: #b3a6ff; }

/* drawer */
.drawer-bd { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 58; transition: background .22s; }
.drawer-bd.open { background: rgba(0,0,0,.4); }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(300px, 84vw); background: var(--bg); z-index: 59; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: var(--menu-shadow); padding-bottom: var(--safe-b); }
.drawer.open { transform: none; }
.drawer-head { position: relative; padding: calc(20px + var(--safe-t)) 20px 14px; background: linear-gradient(135deg, #3d9ae8, #5b5fe6); color: #fff; }
:root[data-theme='dark'] .drawer-head { background: linear-gradient(135deg, #3a3170, #2a2a4a); }
.drawer-head .avatar { width: 64px; height: 64px; font-size: 24px; margin-bottom: 12px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.drawer-head .dn { font-weight: 700; font-size: 16px; }
.drawer-head .dp { font-size: 14px; opacity: .85; text-align: right; }
.drawer-head .theme-btn { position: absolute; top: calc(14px + var(--safe-t)); left: 12px; color: #fff; }
.drawer-head .theme-btn:hover { background: rgba(255,255,255,.12); }
.drawer-items { flex: 1; overflow-y: auto; padding: 6px 0; }
.drawer-item { width: 100%; display: flex; align-items: center; gap: 22px; padding: 12px 22px; font-size: 15px; font-weight: 500; text-align: start; }
.drawer-item:hover { background: var(--hover); }
.drawer-item > svg { color: var(--fg-2); }
.drawer-sep { height: 1px; background: var(--border); margin: 6px 0; }
.drawer-foot { font-size: 12px; color: var(--fg-2); padding: 10px 22px 14px; }

/* chat settings page */
.settings-preview { background: var(--chat-bg); padding: 16px 8px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.settings-preview .msg { pointer-events: none; }
.settings-preview .msg.out { align-self: flex-end; }
.size-row { display: flex; align-items: center; gap: 12px; padding: 4px 24px 12px; }
.size-range { flex: 1; accent-color: var(--accent); }
.walls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 4px 20px 12px; }
.wall { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px solid transparent; box-shadow: var(--shadow); }
.wall.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--bg) inset; }

/* folders pages */
.folders-hero { text-align: center; padding: 12px 24px 4px; }
.folders-hero .big-ic { font-size: 56px; }
.folders-hero p { font-size: 14px; color: var(--fg-2); line-height: 1.9; }
.folder-name { display: flex; align-items: center; gap: 12px; padding: 16px 16px 8px; }
.emoji-pick { width: 52px; height: 52px; font-size: 28px; border-radius: 12px; background: var(--bg-2); flex: none; }
.emoji-grid.small { grid-template-columns: repeat(8, 1fr); padding: 8px; }
.icon-btn .flip, svg.flip { transform: rotate(180deg); }
.color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.swatch.on { border-color: var(--bg); box-shadow: 0 0 0 2px currentColor; color: var(--fg); }
.row-item .icon-btn[disabled] { opacity: .3; pointer-events: none; }
.pick-item .chk svg { width: 16px; height: 16px; }
.row-item.accent, .row-item.accent svg { color: var(--accent); }

/* Telegram-ish details */
.chat-head .t { font-size: 16.5px; }
.composer { border-radius: 22px; border-bottom-left-radius: 22px; }
.send-btn { transition: transform .15s, background .15s, color .15s; }
.send-btn:active { transform: scale(.92); }
.fab { transition: transform .2s, box-shadow .2s; }
.fab:active { transform: scale(.94); }
.jump-down { transition: opacity .15s, transform .15s; }
.jump-down.hidden { display: grid !important; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
.menu button { min-height: 40px; }
@media (max-width: 900px) {
  .menu { min-width: 220px; }
  .menu button { min-height: 46px; font-size: 15.5px; }
}

/* ===================== v0.4 ===================== */
/* folder emoji picker: buttons must not inherit the menu's full-width rows */
.menu .emoji-grid button { width: auto; min-height: 0; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 24px; border-radius: 8px; }
.emoji-grid.small { grid-template-columns: repeat(auto-fill, 40px); justify-content: center; gap: 2px; padding: 8px; max-height: min(300px, 50vh); overflow-y: auto; box-sizing: border-box; }
.menu.with-header:has(.emoji-grid) { width: min(320px, calc(100vw - 16px)); min-width: 0; max-width: none; padding-bottom: 0; }

/* selecting chats in the list */
.side-root .sel-top { display: none; }
.side-root.list-selecting .main-top { display: none; }
.side-root.list-selecting .sel-top { display: flex; background: var(--bg); }
.sel-top .sel-n { font-weight: 600; font-size: 16px; padding: 0 4px; }
.sel-top .icon-btn:disabled { opacity: .35; }
.side-root.list-selecting .fab { display: none; }
.chat-item { position: relative; }
.ci-check { position: absolute; inset-inline-start: 46px; top: 44px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--item-bg, var(--bg)); background: var(--border); display: grid; place-items: center; color: #fff; z-index: 2; }
.ci-check svg { width: 15px; height: 15px; }
.chat-item.selected { background: var(--accent-soft); }
.chat-item.selected .ci-check { background: var(--accent); }
.sel-all { gap: 6px; white-space: nowrap; }
.sel-all svg { width: 18px; height: 18px; }
.pick-bar { display: flex; align-items: center; gap: 8px; padding: 0 0 6px; }
.pick-bar .btn svg, .inv-head .btn svg { width: 18px; height: 18px; margin-inline-end: 4px; }

/* hidden space */
.hid-ic, .lock-ic { width: 16px; height: 16px; vertical-align: -2px; margin-inline-end: 4px; }
.hid-ic { color: var(--fg-2); }
.sec-chip { font-size: 11px; font-weight: 500; color: var(--fg-2); background: var(--bg-2, var(--hover)); border-radius: 8px; padding: 1px 7px; margin-inline-start: 6px; vertical-align: 2px; }
.hidden-banner { display: flex; gap: 14px; margin: 12px 16px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #2b2f3a, #3b3f4d); color: #e8eaf0; line-height: 1.8; font-size: 13.5px; }
.hidden-banner svg { width: 28px; height: 28px; flex: none; color: #b7bdd0; margin-top: 2px; }
.hidden-banner b { font-size: 14.5px; display: block; color: #fff; }

/* buzz */
.buzz-msg span { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 152, 0, .9) !important; color: #fff !important; font-weight: 600; }
.buzz-msg svg { width: 16px; height: 16px; fill: #fff; }
.buzz-msg small { font-weight: 400; opacity: .85; margin-inline-start: 4px; }
@keyframes buzz { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-9px, 3px) rotate(-.6deg); } 20% { transform: translate(8px, -4px) rotate(.6deg); } 30% { transform: translate(-8px, -2px); } 40% { transform: translate(7px, 4px) rotate(-.4deg); } 50% { transform: translate(-6px, 2px); } 60% { transform: translate(5px, -3px); } 70% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } 90% { transform: translate(-2px, 1px); } }
#app.buzzing { animation: buzz .8s ease-in-out; }
.chat-pane.buzz-sent .msgs { animation: buzz .5s ease-in-out; }
.no-anim #app.buzzing, .no-anim .chat-pane.buzz-sent .msgs { animation: none; }

/* contacts */
.contacts-q { margin: 8px 16px 4px; }
.section-title .cnt { font-weight: 500; color: var(--fg-2); margin-inline-start: 6px; font-size: 12.5px; }
.section-title.inv-head { display: flex; align-items: center; gap: 4px; padding-inline: 18px 10px; }
.inv-btn { font-size: 13px; font-weight: 600; color: var(--accent); padding: 4px 10px; border-radius: 14px; background: var(--accent-soft); }
.inv-item .avatar { opacity: .8; }
.inv-bar { position: sticky; bottom: 0; padding: 10px 16px; background: linear-gradient(transparent, var(--bg) 30%); }
.inv-bar .btn { width: 100%; gap: 8px; }
.pick-item .muted.on { color: var(--accent); }
.pill-on { font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: 10px; }

/* ===================== v0.5 ===================== */
.vbadge { flex: none; vertical-align: -3px; margin-inline-start: 4px; }
.chat-item .row .vbadge { margin-inline-start: 2px; }
.profile-head .vlabel { font-size: 13px; font-weight: 600; margin-top: -2px; }
.biz-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fg-2); background: var(--bg-2); border-radius: 12px; padding: 2px 10px; margin: 4px 0; }
.biz-tag svg { width: 15px; height: 15px; }
.biz-tag .yes { color: var(--green); } .biz-tag .no { color: var(--danger); }
.ro-note { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--bg); color: var(--fg-2); font-size: 13.5px; width: 100%; text-align: center; }
.ro-note.warn { background: rgba(229,57,53,.1); color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip, button.chip { padding: 5px 12px; cursor: pointer; border: 1px solid transparent; }
.chip.on, button.chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 0; cursor: pointer; }
.toggle-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.toggle-line.pad { padding: 8px 20px; }
.toggle-line .help { font-size: 12px; color: var(--fg-2); }
.inline-field { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2); margin: 6px 0; flex-wrap: wrap; }
.inline-field input, .inline-field select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); }
.form-pad { padding: 4px 20px 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* cards inside bubbles */
.bubble.card-bubble { padding: 4px; min-width: 240px; max-width: min(340px, 82vw); }
.product-card { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--bg-2); cursor: pointer; }
.pc-img { height: 160px; background: var(--hover) center/cover; display: grid; place-items: center; color: var(--fg-2); }
.pc-img.empty svg { width: 42px; height: 42px; opacity: .5; }
.pc-body { padding: 8px 10px 10px; }
.pc-title { font-weight: 700; font-size: 15px; }
.pc-price { color: var(--accent); font-weight: 600; margin-top: 2px; font-size: 14px; }
.pc-owner { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-2); margin-top: 4px; }
.pc-owner svg { width: 14px; height: 14px; }
.pc-na, .cc-na { display: inline-block; font-size: 11px; color: #fff; background: var(--danger); border-radius: 6px; padding: 0 6px; margin-top: 4px; }
.event-card { border-radius: 10px; background: var(--bg-2); padding: 10px 12px; cursor: pointer; border-inline-start: 4px solid var(--accent); }
.ec-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ec-head svg { width: 20px; height: 20px; color: var(--accent); }
.ec-when { font-size: 13.5px; margin: 4px 0; color: var(--fg); }
.ec-loc, .ec-link { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fg-2); }
.ec-loc svg, .ec-link svg { width: 15px; height: 15px; }
.ec-rsvp { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ec-hint { font-size: 12px; color: var(--fg-2); margin-top: 6px; }
.auto-label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--fg-2); margin-top: 4px; }
.auto-label svg { width: 13px; height: 13px; }
.notice-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; margin-bottom: 4px; }
.notice-tag svg { width: 15px; height: 15px; }
.notice-tag.police { background: rgba(229,57,53,.12); color: var(--danger); }
.bubble:has(.notice-tag) { padding-top: 8px; }

/* report dialog */
.report-intro { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--fg-2); line-height: 1.8; margin: 8px 0 6px; }
.report-intro svg { width: 28px; height: 28px; flex: none; color: var(--danger); }
.report-reasons .radio { padding: 7px 4px; }

/* business */
.biz-box { margin: 8px 16px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); }
.biz-head { display: flex; align-items: center; gap: 10px; }
.biz-head > svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.biz-head .muted { font-size: 13px; }
.biz-open { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--bg); white-space: nowrap; }
.biz-open.yes { color: var(--green); } .biz-open.no { color: var(--danger); }
.biz-desc { margin-top: 8px; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.row-item.hours { align-items: flex-start; }
.hours-table { width: 100%; margin-top: 4px; }
.hours-table .hrow { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: var(--fg-2); }
.hours-table .hrow.today { color: var(--fg); font-weight: 700; }
.map-links { display: flex; gap: 4px; flex-wrap: wrap; }
.biz-intro, .pill-intro { display: flex; gap: 12px; margin: 12px 16px; padding: 14px; border-radius: 14px; background: var(--accent-soft); line-height: 1.8; font-size: 13.5px; }
.biz-intro svg, .pill-intro svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.biz-intro b, .pill-intro b { display: block; }
.hours-edit { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.hours-edit .dname { width: 72px; }
.hours-edit input[type=time] { padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); }
.hours-edit input:disabled { opacity: .4; }
.auto-block { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.auto-block textarea { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
.composer-wrap { position: relative; }
.quick-pop { position: absolute; bottom: 100%; inset-inline: 8px; background: var(--menu-bg); box-shadow: var(--menu-shadow); border-radius: 12px; padding: 4px; z-index: 5; max-height: 260px; overflow-y: auto; }
.quick-item { display: flex; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: start; font-size: 14px; }
.quick-item:hover { background: var(--hover); }
.quick-item b { color: var(--accent); flex: none; }

/* catalog */
.cat-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px 0; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px; }
.cat-grid.small { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); padding: 4px 0; }
.cat-card { border-radius: 12px; overflow: hidden; background: var(--bg-2); cursor: pointer; text-align: start; transition: transform .12s; }
.cat-card:hover { transform: translateY(-2px); }
.cat-card.na, .cat-card.hid { opacity: .6; }
.cat-card .ci-img { aspect-ratio: 1; background: var(--hover) center/cover; display: grid; place-items: center; }
.cat-card .ci-img.empty svg { width: 36px; height: 36px; opacity: .4; }
.cat-card .cc-t { font-weight: 600; font-size: 14px; padding: 6px 8px 0; }
.cat-card .cc-p { color: var(--accent); font-size: 13px; padding: 2px 8px 8px; }
.cat-card .cc-na { margin: 0 8px 8px; }
.cat-cols { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 0; align-items: center; }
.cat-cols .chip { cursor: pointer; padding: 4px 10px; }
.item-gallery { position: relative; margin: 8px -20px 0; }
.ig-img { aspect-ratio: 4/3; background: var(--bg-2) center/cover; cursor: zoom-in; display: grid; place-items: center; }
.ig-dots { position: absolute; bottom: 8px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.ig-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); }
.ig-dots button.on { background: #fff; }
.item-title { margin: 12px 0 4px; font-size: 18px; }
.item-price { color: var(--accent); font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.item-desc { margin-top: 10px; line-height: 1.9; white-space: pre-wrap; font-size: 14px; }
.img-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.img-edit .ie { width: 72px; height: 72px; border-radius: 10px; background: var(--bg-2) center/cover; position: relative; display: grid; place-items: center; }
.img-edit .ie button { position: absolute; top: -6px; inset-inline-end: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; }
.img-edit .ie.add { border: 2px dashed var(--border); color: var(--fg-2); }
.img-edit .ie.add svg { width: 26px; height: 26px; }

/* calendar */
.cal-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 4px; }
.cal-title b { font-size: 17px; }
.cal-title .muted { font-size: 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 4px 8px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--fg-2); padding: 4px 0; }
.cal-wd.fri { color: var(--danger); }
.cal-cell { position: relative; min-height: 58px; border-radius: 10px; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; padding: 4px 2px; gap: 1px; cursor: pointer; border: 2px solid transparent; }
.cal-cell.empty { background: none; cursor: default; }
.cal-cell .cd { font-size: 16px; font-weight: 600; line-height: 1.2; }
.cal-cell .cg { font-size: 10px; color: var(--fg-2); line-height: 1; }
.cal-cell.holiday .cd { color: var(--danger); }
.cal-cell.today { background: var(--accent); }
.cal-cell.today .cd, .cal-cell.today .cg { color: #fff; }
.cal-cell.sel { border-color: var(--accent); }
.cal-cell .cs { font-size: 9.5px; line-height: 1.3; padding: 0 4px; border-radius: 6px; background: var(--sc); color: #fff; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal-cell .cs.off { opacity: .55; }
.cal-cell .cdots { display: flex; gap: 2px; margin-top: auto; }
.cal-cell .cdots i { width: 6px; height: 6px; border-radius: 50%; }
.cal-agenda { padding: 8px 0 24px; }
.ag-day { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 16px; }
.ag-hol { margin: 2px 16px; color: var(--danger); font-size: 14px; }
.ag-shift, .ag-ev { display: flex; gap: 12px; align-items: center; margin: 6px 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); cursor: pointer; border-inline-start: 4px solid var(--sc, var(--ec, var(--accent))); }
.ag-ev { border-inline-start-color: var(--ec); }
.ag-shift svg { width: 20px; height: 20px; color: var(--sc); flex: none; }
.ag-time { min-width: 52px; font-weight: 700; font-size: 14px; color: var(--fg-2); }
.ag-shift .muted, .ag-ev .muted { font-size: 13px; }
.rsvp-s { font-size: 12px; margin-top: 2px; }
.rsvp-s.pending { color: #e68a00; } .rsvp-s.yes { color: var(--green); } .rsvp-s.no { color: var(--danger); }
.ev-detail > div, .ev-detail > a { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 14px; }
.ev-detail svg { width: 18px; height: 18px; color: var(--fg-2); flex: none; }
.evd-when { font-weight: 600; }
.evd-notes { white-space: pre-wrap; line-height: 1.8; background: var(--bg-2); padding: 8px 10px; border-radius: 10px; }
.cycle-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; flex-wrap: wrap; }
.cycle-row input { padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); }
.cycle-row input[type=color] { width: 34px; height: 30px; padding: 2px; }
.cycle-row .cnum { width: 22px; text-align: center; color: var(--fg-2); }
.time-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--bg-2); border-radius: 16px; padding: 2px 6px; }
.time-chip input { border: 0; background: none; color: var(--fg); font: inherit; }
.time-chip button { color: var(--fg-2); }
.date-holder { position: relative; }
.date-holder .jdp-input, .date-holder input { width: 100%; box-sizing: border-box; }
.jdp-panel { font-family: inherit !important; border-radius: 14px !important; box-shadow: var(--menu-shadow) !important; border-color: var(--border) !important; }
:root[data-theme='dark'] .jdp-panel { background: #2a2a2a !important; color: #fff; }
:root[data-theme='dark'] .jdp-panel button { color: #fff; }
:root[data-theme='dark'] .jdp-day:hover:not(:disabled), :root[data-theme='dark'] .jdp-title-btns button:hover { background: #3a3a3a !important; }
.jdp-day.jdp-selected { background: var(--accent) !important; }
.modal .jdp-panel { position: absolute; }

/* pills */
.dose { display: flex; align-items: center; gap: 10px; margin: 6px 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); }
.dose.taken { opacity: .7; } .dose.skipped { opacity: .5; }
.dose-t { font-weight: 700; min-width: 46px; }
.dose-c { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dose .btn { white-space: nowrap; }

/* verification */
.badge-legend { margin: 4px 16px 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); display: grid; gap: 6px; font-size: 13px; }
.badge-legend > div { display: flex; align-items: center; gap: 8px; }
.verify-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; text-align: center; }
.verify-done > svg { width: 44px; height: 44px; color: var(--fg-2); }

/* ===================== v0.6 games ===================== */
.gs { --g1: #3b6cf6; --g2: #1d2f7a; --gacc: #fff; position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(130% 70% at 50% -10%, var(--g1) 0%, var(--g2) 62%, #0d1023 100%); animation: gs-in .22s ease-out; overflow: hidden; user-select: none; -webkit-user-select: none; }
.gs.closing { animation: gs-out .16s ease-in forwards; }
@keyframes gs-in { from { opacity: 0; transform: scale(.98); } }
@keyframes gs-out { to { opacity: 0; transform: scale(.98); } }
.gs.theme-warm { --g1: #ffb259; --g2: #b6512b; --gacc: #8f3a1c; }
.gs.theme-slate { --g1: #4f8fb8; --g2: #1f3a51; --gacc: #1f3a51; }
.gs.theme-green { --g1: #52c27a; --g2: #155e3a; --gacc: #155e3a; }
.gs.theme-purple { --g1: #a275ff; --g2: #3d1d86; --gacc: #3d1d86; }
.gs.theme-blue { --g1: #4aa3ff; --g2: #173f8f; --gacc: #173f8f; }
.gs.theme-navy { --g1: #3a7bff; --g2: #0f2766; --gacc: #0f2766; }
.gs-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 12px 4px; }
.gs-round { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; font-size: 19px; font-weight: 800; flex: none; backdrop-filter: blur(6px); }
.gs-round svg { width: 22px; height: 22px; fill: #fff; }
.gs-round.ghost { background: none; }
.gs-round:active { transform: scale(.94); }
.gs-title { flex: 1; text-align: center; font-weight: 800; font-size: 19px; letter-spacing: -.2px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gs-emoji { font-size: 22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.gs-stats { display: flex; gap: 10px; justify-content: center; padding: 6px 12px 0; min-height: 52px; }
.gs-stat { position: relative; min-width: 84px; padding: 6px 14px; border-radius: 14px; background: rgba(255,255,255,.14); text-align: center; backdrop-filter: blur(6px); }
.gs-stat small { display: block; font-size: 11.5px; opacity: .78; }
.gs-stat b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 12px; position: relative; touch-action: none; }
.gs-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; padding: 8px 12px calc(16px + var(--safe-b)); }
.gs-chips { display: inline-flex; padding: 3px; border-radius: 22px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.gs-chip { padding: 8px 14px; border-radius: 19px; font-weight: 700; font-size: 13.5px; color: #fff; white-space: nowrap; transition: background .15s, color .15s; }
.gs-chip.on { background: #fff; color: var(--gacc); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gs-act { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 22px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: 14.5px; white-space: nowrap; backdrop-filter: blur(6px); transition: transform .1s; }
.gs-act:active { transform: scale(.95); }
.gs-act.primary { background: #fff; color: var(--gacc); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.gs-act:disabled { opacity: .4; }
.gs-ic { font-size: 17px; line-height: 1; }

.gs { --size: min(92vw, calc(100dvh - 250px - var(--safe-t) - var(--safe-b)), 470px); }

/* result sheet */
.gs-sheet { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(8,10,25,.55); backdrop-filter: blur(4px); animation: gs-in .2s; padding: 16px; }
.gs-card { width: min(340px, 100%); background: #fff; color: #1d1d1f; border-radius: 24px; padding: 22px 20px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: card-up .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes card-up { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.gs-card-emoji { font-size: 58px; line-height: 1.1; animation: bounce-e .6s .15s both; }
@keyframes bounce-e { 0% { transform: scale(.3); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.gs-card-title { font-size: 21px; font-weight: 800; margin: 8px 0 4px; }
.gs-card-text { color: #555; font-size: 14px; line-height: 1.8; margin-bottom: 6px; }
.gs-card-rows { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; }
.gs-card-rows > div { flex: 1; background: #f3f4f8; border-radius: 12px; padding: 8px 4px; }
.gs-card-rows small { display: block; font-size: 11.5px; color: #777; }
.gs-card-rows b { font-size: 18px; }
.gs-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.gs-card-actions .gs-act { justify-content: center; background: #eef0f6; color: #333; backdrop-filter: none; }
.gs-card-actions .gs-act.primary { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; }

/* 2048 */
.g2k { --gap: calc(var(--size) * .028); --cell: calc((var(--size) - var(--gap) * 5) / 4); position: relative; width: var(--size); height: var(--size); padding: var(--gap); box-sizing: border-box;
  display: grid; grid-template-columns: repeat(4, var(--cell)); gap: var(--gap); border-radius: 18px; background: rgba(120, 60, 25, .45); box-shadow: 0 14px 40px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.12); direction: ltr; }
.g2k.nudge { animation: nudge .18s; }
@keyframes nudge { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.g2k-bg { border-radius: 10px; background: rgba(255,255,255,.14); }
.g2k-tiles { position: absolute; inset: var(--gap); }
.g2k-t { position: absolute; width: var(--cell); height: var(--cell); border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--cell) * .42); color: #6b5a4a;
  transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap)))); transition: transform .11s ease-in-out; background: #f3e9df; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.g2k-t.fresh { animation: tile-in .18s .08s both; }
.g2k-t.merged { animation: tile-pop .2s .08s; z-index: 2; }
.g2k-t.gone { z-index: 1; }
@keyframes tile-in { from { scale: 0; } }
@keyframes tile-pop { 50% { scale: 1.16; } }
.g2k-t.v4 { background: #f1dcb7; }
.g2k-t.v8 { background: #f7b06b; color: #fff; } .g2k-t.v16 { background: #f8945a; color: #fff; } .g2k-t.v32 { background: #f87956; color: #fff; }
.g2k-t.v64 { background: #f55a32; color: #fff; } .g2k-t.v128 { background: #f2d06b; color: #fff; font-size: calc(var(--cell) * .36); }
.g2k-t.v256 { background: #f1cb57; color: #fff; font-size: calc(var(--cell) * .36); } .g2k-t.v512 { background: #f0c544; color: #fff; font-size: calc(var(--cell) * .36); box-shadow: 0 0 18px rgba(255,214,90,.5); }
.g2k-t.v1024, .g2k-t.v2048, .g2k-t.v4096, .g2k-t.v8192 { background: #efc033; color: #fff; font-size: calc(var(--cell) * .3); box-shadow: 0 0 26px rgba(255,214,90,.75); }
.g2k-t.v4096, .g2k-t.v8192 { background: #3c3a32; }
.g2k-plus { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); animation: plus-up .7s forwards; pointer-events: none; }
@keyframes plus-up { to { transform: translate(-50%, -26px); opacity: 0; } }

/* minesweeper */
.mn { --cols: 8; --rows: 10; --c: min(calc((94vw - 16px - (var(--cols) - 1) * 3px) / var(--cols)), calc((100dvh - 290px - var(--safe-t) - var(--safe-b) - (var(--rows) - 1) * 3px) / var(--rows)), 46px);
  display: grid; grid-template-columns: repeat(var(--cols), var(--c)); gap: 3px; padding: 8px; border-radius: 16px; background: rgba(0,0,0,.22); box-shadow: 0 14px 40px rgba(0,0,0,.3); direction: ltr; }
.mn-c { width: var(--c); height: var(--c); border-radius: 7px; padding: 0; font-weight: 900; font-size: calc(var(--c) * .5); display: grid; place-items: center;
  background: linear-gradient(#7fb6d8, #5b93b8); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35); color: #fff; transition: transform .08s; }
.mn-c:active { transform: scale(.92); }
.mn-c.o { background: rgba(255,255,255,.88); box-shadow: none; animation: mn-open .15s; }
@keyframes mn-open { from { transform: scale(.8); opacity: .3; } }
.mn-c.f { background: linear-gradient(#ffb36b, #f0853a); }
.mn-c.boom { background: #ff4b4b; animation: boom .4s; }
@keyframes boom { 30% { transform: scale(1.25); } }
.mn-c.n1 { color: #1e6fe0; } .mn-c.n2 { color: #2e9a3e; } .mn-c.n3 { color: #e0362b; } .mn-c.n4 { color: #6c2bd3; }
.mn-c.n5 { color: #c26a00; } .mn-c.n6 { color: #00879a; } .mn-c.n7 { color: #333; } .mn-c.n8 { color: #888; }

/* snake */
.sn-wrap { position: relative; width: var(--size); height: var(--size); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.12); }
.sn-canvas { width: 100%; height: 100%; display: block; }
.sn-tap { position: absolute; inset: 0; background: transparent; color: #fff; font-weight: 800; font-size: 17px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.sn-wrap[data-state='ready'] .sn-tap, .sn-wrap[data-state='paused'] .sn-tap { background: rgba(10, 40, 20, .45); }
.sn-pad { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 46px); gap: 6px; direction: ltr; }
.sn-pad button { border-radius: 14px; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; backdrop-filter: blur(6px); }
.sn-pad button:active { background: rgba(255,255,255,.35); }
.sn-up { grid-column: 2; grid-row: 1; } .sn-left { grid-column: 1; grid-row: 2; } .sn-down { grid-column: 2; grid-row: 2; } .sn-right { grid-column: 3; grid-row: 2; }
.sn-side { display: flex; flex-direction: column; gap: 8px; align-items: center; }
@media (pointer: fine) { .sn-pad { display: none; } }

/* memory */
.mm { --cols: 4; --rows: 4; --c: min(calc((92vw - (var(--cols) - 1) * 10px) / var(--cols)), calc((100dvh - 280px - var(--safe-t) - var(--safe-b) - (var(--rows) - 1) * 10px) / var(--rows)), 104px);
  display: grid; grid-template-columns: repeat(var(--cols), var(--c)); gap: 10px; perspective: 900px; }
.mm-c { width: var(--c); height: var(--c); padding: 0; background: none; }
.mm-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .38s cubic-bezier(.3,1.3,.5,1); transform-style: preserve-3d; }
.mm-c.up .mm-in { transform: rotateY(180deg); }
.mm-back, .mm-face { position: absolute; inset: 0; border-radius: 16px; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mm-back { background: linear-gradient(135deg, #c3a5ff, #7b4fe0); box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.25); font-size: calc(var(--c) * .38); font-weight: 900; color: rgba(255,255,255,.55); }
.mm-face { background: #fff; transform: rotateY(180deg); font-size: calc(var(--c) * .55); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.mm-c.done .mm-face { background: #e9fbe9; box-shadow: 0 0 0 3px #6ee7a0, 0 6px 16px rgba(0,0,0,.2); }
.mm-c.pop .mm-in { animation: mm-pop .35s; }
@keyframes mm-pop { 50% { scale: 1.12; } }
.mm-c.shake .mm-in { animation: mm-shake .3s; }
@keyframes mm-shake { 25% { translate: -5px; } 75% { translate: 5px; } }

/* two-player boards */
.gb { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gb-holder { display: flex; justify-content: center; }
.gb-msg { font-weight: 800; font-size: 16px; padding: 6px 16px; border-radius: 16px; background: rgba(255,255,255,.12); min-height: 22px; }
.gb-msg.hot { background: #fff; color: var(--gacc); animation: pulse-h 1.4s infinite; }
@keyframes pulse-h { 50% { box-shadow: 0 0 0 8px rgba(255,255,255,.15); } }
.gp-bar { display: flex; gap: 10px; width: var(--size); justify-content: space-between; }
.gp { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px; background: rgba(255,255,255,.1); transition: background .2s, transform .2s; min-width: 0; }
.gp.on { background: rgba(255,255,255,.24); transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.gp-mark { width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.gp-mark svg { width: 26px; height: 26px; }
.gp-name { flex: 1; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-score { font-size: 18px; }
.gp-mark .c4-p { position: static; width: 22px; height: 22px; animation: none; }

.tt { --tsize: min(var(--size), 400px); width: var(--tsize); height: var(--tsize); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; direction: ltr; }
.tt-c { border-radius: 18px; background: rgba(255,255,255,.12); padding: 12%; display: grid; place-items: center; transition: background .15s, transform .1s; }
.tt.live .tt-c:not(:disabled):hover { background: rgba(255,255,255,.2); }
.tt-c:not(:disabled):active { transform: scale(.94); }
.tt-c svg { width: 100%; height: 100%; overflow: visible; }
.mk-l { fill: none; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 180; stroke-dashoffset: 180; animation: draw-l .28s ease-out forwards; }
.mk-l.d2 { animation-delay: .12s; }
@keyframes draw-l { to { stroke-dashoffset: 0; } }
.tt-c.p0 .mk-l, .gp.p0 .mk-l { stroke: #ffd447; }
.tt-c.p1 .mk-l, .gp.p1 .mk-l { stroke: #ff6b8b; }
.gp .mk-l { animation: none; stroke-dashoffset: 0; stroke-width: 15; }
.tt-c.win { background: rgba(255,255,255,.34); animation: win-c .6s infinite alternate; }
@keyframes win-c { to { box-shadow: 0 0 0 4px rgba(255,255,255,.55); } }
.tt.small { --tsize: 150px; gap: 4px; margin: 6px auto; }
.tt.small .tt-c { border-radius: 8px; background: rgba(0,0,0,.07); padding: 18%; }
.tt.small .mk-l { animation: none; stroke-dashoffset: 0; }
.tt.small .tt-c.p0 .mk-l { stroke: #e9a800; } .tt.small .tt-c.p1 .mk-l { stroke: #e0355b; }
.tt.small .tt-c.win { animation: none; background: rgba(79,174,78,.3); }

.cfour { --csize: min(var(--size), 460px); --hole: calc((var(--csize) - 16px - 6 * 5px) / 7); display: grid; grid-template-columns: repeat(7, var(--hole)); gap: 5px; padding: 8px;
  border-radius: 20px; background: linear-gradient(#2f6df5, #1a49c4); box-shadow: 0 16px 40px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25); direction: ltr; }
.c4-col { display: grid; grid-template-rows: repeat(6, var(--hole)); gap: 5px; padding: 0; background: none; border-radius: calc(var(--hole) / 2); transition: background .15s; }
.cfour.live .c4-col:not(:disabled):hover, .cfour.live .c4-col:not(:disabled):focus-visible { background: rgba(255,255,255,.14); }
.c4-h { position: relative; width: var(--hole); height: var(--hole); border-radius: 50%; background: #0d1a44; box-shadow: inset 0 3px 6px rgba(0,0,0,.5); }
.c4-p { position: absolute; inset: 0; border-radius: 50%; display: block; }
.c4-p.p0 { background: radial-gradient(circle at 35% 30%, #ff8a80, #e53935 60%, #b71c1c); }
.c4-p.p1 { background: radial-gradient(circle at 35% 30%, #fff59d, #fbc02d 60%, #c49000); }
.c4-p.drop { animation: c4-drop calc(.12s + var(--r) * .05s) cubic-bezier(.55, 0, 1, .45); }
@keyframes c4-drop { from { transform: translateY(calc(var(--r) * -1 * (var(--hole) + 5px) - var(--hole))); } }
.c4-h.win .c4-p { box-shadow: 0 0 0 3px #fff, 0 0 16px #fff; animation: win-c .6s infinite alternate; }
.cfour.small { --csize: 196px; gap: 2px; padding: 4px; border-radius: 10px; margin: 6px auto; --hole: calc((196px - 8px - 12px) / 7); }
.cfour.small .c4-col { gap: 2px; grid-template-rows: repeat(6, var(--hole)); }
.cfour.small .c4-p.drop, .cfour.small .c4-h.win .c4-p { animation: none; }
.tt.small .tt-c, .cfour.small .c4-col { pointer-events: none; }

/* hub */
.gh { padding-bottom: 24px; }
.gh-hero { display: flex; gap: 14px; align-items: center; margin: 12px 14px 4px; padding: 16px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #5b7cff, #8a4fff); box-shadow: 0 8px 24px rgba(91,124,255,.3); line-height: 1.7; font-size: 13px; }
.gh-hero b { font-size: 18px; }
.gh-hero-e { font-size: 42px; }
.gh-sec { font-weight: 800; font-size: 15px; padding: 18px 18px 8px; }
.gh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.gh-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; min-height: 128px; border-radius: 20px; color: #fff; text-align: start; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: transform .12s; }
.gh-card:active, .gh-wide button:active, .gh-live:active { transform: scale(.97); }
.gh-card::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.12); inset-inline-end: -40px; bottom: -50px; }
.gh-e { font-size: 34px; line-height: 1.2; margin-bottom: 4px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.2)); }
.gh-e.sm { font-size: 22px; margin: 0; }
.gh-card b { font-size: 17px; }
.gh-d { font-size: 12.5px; opacity: .88; }
.gh-best { margin-top: auto; font-size: 11.5px; background: rgba(0,0,0,.18); padding: 2px 8px; border-radius: 10px; }
.g-2048 { background: linear-gradient(135deg, #ffb259, #e56b35); }
.g-mines { background: linear-gradient(135deg, #5f9fc7, #29506e); }
.g-snake { background: linear-gradient(135deg, #5fd08a, #1f7a4a); }
.g-memory { background: linear-gradient(135deg, #b48cff, #6a3fd6); }
.g-tictactoe { background: linear-gradient(135deg, #4aa3ff, #2456c9); }
.g-connect4 { background: linear-gradient(135deg, #3a7bff, #18338a); }
.gh-wide { margin: 0 14px 12px; padding: 14px; border-radius: 20px; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.gh-wide-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.gh-wide-top b { font-size: 17px; }
.gh-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gh-modes button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.18); color: #fff; font-size: 20px; transition: transform .1s; }
.gh-modes button span { font-size: 12.5px; font-weight: 700; }
.gh-live { display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 0 14px 8px; padding: 10px 14px; border-radius: 16px; background: var(--bg-2, var(--hover)); text-align: start; }
.gh-live b { font-size: 15px; }
.gh-live .gh-d { opacity: .7; }
.gh-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; background: rgba(0,0,0,.08); white-space: nowrap; }
.gh-chip.on { background: #2ecc71; color: #fff; }
.gh-pick { max-height: 55vh; overflow-y: auto; margin: 0 -12px; }
.gh-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.gh-choose button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: 16px; background: var(--bg-2, var(--hover)); font-weight: 700; }

/* game card in chat */
.gcard { min-width: 220px; border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg, rgba(74,163,255,.14), rgba(36,86,201,.1)); cursor: pointer; text-align: center; }
.gcard.k-connect4 { background: linear-gradient(135deg, rgba(58,123,255,.14), rgba(251,192,45,.12)); }
.gcard-head { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.gcard-players { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.gcard-players span.on { color: var(--accent); font-weight: 700; }
.gcard-status { font-weight: 700; font-size: 13.5px; margin-top: 4px; }
.gcard-cta { margin-top: 8px; padding: 7px; border-radius: 10px; background: rgba(0,0,0,.06); font-weight: 700; font-size: 13px; color: var(--accent); }
.gcard-cta.hot { background: var(--accent); color: #fff; }

/* ===================== v0.6 chat polish ===================== */
.chat-item .name-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; }
.chat-item .name-wrap .name { flex: 0 1 auto; }
.pro-star { font-size: 13px; flex: none; }
.emo-status { font-size: 15px; flex: none; line-height: 1; }
/* big emoji: 1–3 emoji and nothing else, like Telegram */
.bubble.jumbo { background: none !important; box-shadow: none !important; padding: 2px 4px !important; }
.bubble.jumbo::before, .bubble.jumbo::after { display: none !important; }
.bubble.jumbo .text { font-size: 56px; line-height: 1.15; letter-spacing: 2px; }
.bubble.jumbo.j2 .text { font-size: 46px; }
.bubble.jumbo.j3 .text { font-size: 38px; }
.bubble.jumbo .meta { background: rgba(0,0,0,.32); color: #fff !important; border-radius: 10px; padding: 1px 7px; }
.bubble.jumbo .meta svg { fill: #fff !important; color: #fff !important; }
.bubble.jumbo .text { animation: jumbo-in .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes jumbo-in { from { transform: scale(.4); } }

/* ===================== v0.6 contacts ===================== */
.ct-top { padding: 8px 12px 4px; position: sticky; top: 0; z-index: 3; background: var(--bg); }
.ct-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 21px; background: var(--bg-2, var(--hover)); }
.ct-search svg { width: 20px; height: 20px; color: var(--fg-2); flex: none; }
.ct-search input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--fg); min-width: 0; }
.ct-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 6px; }
.ct-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--fg); }
.ct-act:hover { background: var(--hover); }
.ct-act-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ct-act-ic svg { width: 23px; height: 23px; }
.ct-act.hot .ct-act-ic { background: var(--accent); color: #fff; }
.ct-act-ic.sm { width: 40px; height: 40px; flex: none; }
.ct-sort { display: flex; gap: 6px; padding: 4px 0 6px; }
.ct-chip { padding: 5px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; color: var(--fg-2); background: var(--bg-2, var(--hover)); }
.ct-chip.on { background: var(--accent); color: #fff; }
.ct-body { position: relative; }
.ct-list { padding-bottom: 24px; }
.ct-letter { position: sticky; top: 0; padding: 8px 18px 4px; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--bg); z-index: 1; }
.ct-row { margin: 0 6px; }
.ct-name { font-weight: 600; display: flex; align-items: center; gap: 3px; }
.ct-sub { font-size: 13px; }
.ct-sub.on { color: var(--accent); }
.ct-index { position: fixed; inset-inline-end: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; z-index: 4; }
.sidebar .ct-index { position: absolute; top: 40px; transform: none; }
.ct-index button { font-size: 11px; font-weight: 700; color: var(--accent); padding: 1px 6px; line-height: 1.35; }
.ct-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 30px 24px; line-height: 1.8; color: var(--fg-2); }
.ct-empty b { color: var(--fg); font-size: 17px; }
.ct-empty-e { font-size: 56px; }
.ct-empty .btn { width: 100%; gap: 8px; }
.ct-inv-head { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 14px 8px 4px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2, var(--hover)); text-align: start; }
.ct-inv-head .muted { font-size: 12.5px; }
.ct-caret { font-size: 20px; color: var(--fg-2); transition: transform .2s; }
.ct-caret.open { transform: rotate(180deg); }
.ct-inv-tools { display: flex; gap: 6px; padding: 4px 12px; }
.ct-inv-tools .btn svg { width: 18px; height: 18px; margin-inline-end: 4px; }
/* import page */
.im { padding: 8px 12px 24px; }
.im-intro { margin: 4px 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; line-height: 1.8; }
.im-card { display: flex; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg); }
.im-card.hot { border-color: var(--accent); box-shadow: 0 4px 16px rgba(51,144,236,.12); }
.im-e { font-size: 30px; line-height: 1.2; flex: none; }
.im-e.big { font-size: 56px; }
.im-card b { display: block; font-size: 15px; margin-bottom: 4px; }
.im-t { font-size: 13px; color: var(--fg-2); line-height: 1.8; margin-bottom: 10px; }
.im-card .btn { margin-top: 4px; }
.im-card textarea { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2, var(--hover)); color: var(--fg); font: inherit; resize: vertical; }
.im-steps { margin: 4px 0 10px; padding-inline-start: 20px; font-size: 13px; line-height: 2; color: var(--fg-2); }
.im-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px; border: 2px dashed var(--border); border-radius: 14px; cursor: pointer; text-align: center; font-size: 13px; color: var(--fg-2); }
.im-drop svg { width: 30px; height: 30px; color: var(--accent); }
.im-drop b { color: var(--fg); }
.im-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.im-done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px 12px; line-height: 1.8; }
.im-done b { font-size: 16px; }

/* ===================== v0.6 accounts ===================== */
.acc-toggle { position: absolute; left: 14px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 22px; line-height: 1; transition: transform .2s; }
.acc-toggle:hover { background: rgba(255,255,255,.14); }
.acc-toggle.open { transform: rotate(180deg); }
.acc-box { border-bottom: 1px solid var(--border); padding: 4px 0; }
.acc-item .avatar { width: 30px; height: 30px; font-size: 13px; }
.acc-item { gap: 16px !important; }
.acc-cur { width: 20px; height: 20px; border-radius: 50%; background: #4fae4e; color: #fff; display: grid; place-items: center; }
.acc-cur svg { width: 14px; height: 14px; fill: #fff; color: #fff; }
.auth-back { position: absolute; top: calc(12px + var(--safe-t)); right: 12px; }

/* ===================== v0.6 Pro ===================== */
.pro-row .v { font-weight: 700; }
.pro-row > svg { color: #f5b301 !important; }
.pro-page { padding-bottom: 20px; }
.pro-hero { margin: 12px 14px; padding: 20px; border-radius: 22px; text-align: center; color: #fff; line-height: 1.8; background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f59e0b); box-shadow: 0 10px 30px rgba(236,72,153,.25); }
.pro-hero b { display: block; font-size: 20px; }
.pro-hero-e { font-size: 52px; animation: bounce-e .7s both; }
.pro-perks { padding: 0 8px; }
.pro-perk { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; }
.pro-perk-e { font-size: 26px; width: 40px; text-align: center; flex: none; }
.pro-perk b { font-size: 14.5px; }
.pro-perk .muted { font-size: 12.5px; }
.pro-perk > div { flex: 1; }
.pro-ok { color: #2ecc71; font-weight: 900; font-size: 18px; }
.pro-cur { font-size: 20px; margin-inline-start: 6px; }
.pro-emoji { padding: 0 14px 8px; grid-template-columns: repeat(auto-fill, 44px); }
.pro-emoji button { font-size: 24px; height: 44px; border-radius: 10px; }
.pro-emoji button:hover { background: var(--hover); }
.bot-chip { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 8px; margin-inline-start: 6px; vertical-align: 2px; }

/* ===================== v0.6 bots ===================== */
.kb { display: flex; flex-direction: column; gap: 4px; margin: 8px -4px -2px; }
.kb-row { display: flex; gap: 4px; }
.kb-btn { flex: 1; min-height: 38px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.06); color: var(--accent); font-weight: 600; font-size: 14px; transition: background .12s; }
:root[data-theme='dark'] .kb-btn { background: rgba(255,255,255,.08); }
.kb-btn:hover { background: rgba(51,144,236,.14); }
.kb-btn.busy { opacity: .5; pointer-events: none; }
.bot-start { width: 100%; max-width: 420px; margin: 0 auto; font-size: 16px; font-weight: 800; letter-spacing: .5px; }
.bot-cmd { font-size: 20px; font-weight: 900; color: var(--accent); }

/* ===================== v0.6 social ===================== */
.feed-wrap { padding-bottom: 30px; background: var(--bg-2, var(--hover)); min-height: 100%; }
.feed-compose { display: flex; align-items: center; gap: 12px; margin: 10px; padding: 10px 14px; border-radius: 18px; background: var(--bg); color: var(--fg-2); cursor: text; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.feed-compose svg { width: 22px; height: 22px; color: #4fae4e; }
.feed-new { display: block; margin: 0 auto 8px; padding: 6px 16px; border-radius: 16px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; position: sticky; top: 6px; z-index: 2; }
.feed-more { display: block; margin: 8px auto; }
.feed-sec { font-weight: 800; font-size: 14px; padding: 14px 16px 8px; }
.feed-empty, .sp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 24px 10px; text-align: center; color: var(--fg-2); line-height: 1.8; }
.feed-empty b { color: var(--fg); font-size: 16px; }
.fe-e { font-size: 48px; }
.sugg { display: flex; gap: 10px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; }
.sugg::-webkit-scrollbar { display: none; }
.sugg-card { flex: none; width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 16px; background: var(--bg); text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.sugg-card b { font-size: 14px; max-width: 100%; display: flex; align-items: center; gap: 3px; }
.sugg-card .muted { font-size: 12px; max-width: 100%; }
.sugg-card .btn { width: 100%; margin-top: 4px; }
.post { background: var(--bg); margin: 0 0 10px; padding-bottom: 6px; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px 4px; cursor: pointer; }
.post-av { padding: 0; background: none; flex: none; padding-inline-start: 8px; }
.post-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 3px; }
.post-time { font-size: 12px; color: var(--fg-2); }
.post-text { padding: 2px 14px 10px; font-size: 15px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.post-text.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; position: relative; }
.more-btn { color: var(--fg-2); font-weight: 600; padding: 0 4px; background: var(--bg); position: absolute; bottom: 0; left: 14px; }
.post-media { position: relative; background: #000; }
.pm-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; max-height: 70vh; }
.post-media.one .pm-track { aspect-ratio: auto; max-height: 75vh; }
.pm-track::-webkit-scrollbar { display: none; }
.pm-track > img, .pm-track > video { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; user-select: none; -webkit-user-drag: none; }
.post-media.one .pm-track > img { object-fit: contain; height: auto; max-height: 75vh; background: #000; }
.pm-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.pm-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: all .2s; }
.pm-dots i.on { background: #fff; width: 14px; border-radius: 3px; }
.pm-count { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; }
.heart-burst { position: absolute; left: 50%; top: 50%; font-size: 90px; transform: translate(-50%, -50%); animation: burst .8s ease-out forwards; pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.post-actions { display: flex; align-items: center; gap: 2px; padding: 4px 6px 0; }
.pa-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px; border-radius: 20px; color: var(--fg); font-weight: 700; font-size: 14px; }
.pa-btn svg { width: 26px; height: 26px; }
.pa-btn:hover { background: var(--hover); }
.pa-btn.like.on { color: #ed4956; }
.pa-btn.like.on svg { animation: like-pop .35s; }
@keyframes like-pop { 50% { transform: scale(1.3); } }
.pa-likers { font-size: 13px; font-weight: 700; color: var(--fg); padding: 4px 10px; }
.post-cap { padding: 2px 14px 4px; font-size: 14.5px; line-height: 1.8; }
.post-cap b { cursor: pointer; }
.post-cap .post-text { display: inline; padding: 0; }
.post-cmts { color: var(--fg-2); font-size: 13.5px; padding: 2px 14px 6px; }
/* composer */
.post-comp { padding: 12px 14px; width: 100%; max-width: 680px; margin: 0 auto; box-sizing: border-box; }
.pc-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pc-text { width: 100%; box-sizing: border-box; border: 0; outline: none; resize: none; background: none; color: var(--fg); font: inherit; font-size: 17px; line-height: 1.8; min-height: 110px; }
.pc-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.pc-th { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #000; }
.pc-th img, .pc-th video { width: 100%; height: 100%; object-fit: cover; }
.pc-th button { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; }
.pc-add { aspect-ratio: 1; border-radius: 12px; border: 2px dashed var(--border); color: var(--fg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; }
.pc-add svg { width: 28px; height: 28px; color: #4fae4e; }
.pc-vis { display: flex; gap: 6px; flex-wrap: wrap; }
/* profile */
.sp { padding-bottom: 30px; }
.sp-cover { height: 150px; background: linear-gradient(135deg, #5b7cff, #a855f7 50%, #ec4899) center/cover; }
.sp-cover.edit { display: grid; place-items: center; cursor: pointer; color: #fff; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sp-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px; margin-top: -44px; gap: 10px; }
.sp-av .avatar { width: 92px; height: 92px; font-size: 34px; box-shadow: 0 0 0 4px var(--bg); cursor: pointer; }
.sp-btns { display: flex; gap: 8px; padding-bottom: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sp-btns .btn { padding: 8px 16px; font-size: 14px; }
.sp-info { padding: 10px 18px 4px; }
.sp-name { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sp-user { color: var(--fg-2); font-size: 14px; text-align: right; }
.sp-fm { display: inline-block; margin-top: 4px; font-size: 12px; padding: 1px 8px; border-radius: 8px; background: var(--bg-2, var(--hover)); color: var(--fg-2); }
.sp-bio { margin-top: 8px; font-size: 14.5px; line-height: 1.8; white-space: pre-wrap; }
.sp-web { display: inline-block; margin-top: 4px; color: var(--accent); font-size: 14px; text-decoration: none; }
.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 12px 12px 0; padding: 10px 0; border-radius: 16px; background: var(--bg-2, var(--hover)); }
.sp-stats > * { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; background: none; color: var(--fg); }
.sp-stats b { font-size: 18px; }
.sp-stats span { font-size: 12.5px; color: var(--fg-2); }
.sp-tabs { display: flex; margin-top: 12px; border-bottom: 1px solid var(--border); }
.sp-tabs button { flex: 1; padding: 10px; color: var(--fg-2); border-bottom: 2px solid transparent; }
.sp-tabs button.on { color: var(--fg); border-bottom-color: var(--fg); }
.sp-tabs svg { width: 24px; height: 24px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sp-cell { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--bg-2, var(--hover)); }
.sp-cell img, .sp-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cell.txt { display: flex; align-items: center; justify-content: center; padding: 8px; font-size: 12px; line-height: 1.6; color: #fff; background: linear-gradient(135deg, #5b7cff, #a855f7); text-align: center; overflow: hidden; }
.sp-multi { position: absolute; top: 6px; left: 6px; color: #fff; font-style: normal; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sp-list { background: var(--bg-2, var(--hover)); padding-top: 8px; }
/* post page + comments */
.post-page { padding-bottom: 80px; }
.cm-title { font-weight: 800; padding: 12px 16px 4px; }
.cm { display: flex; gap: 10px; padding: 8px 12px; }
.cm .post-av { padding: 0; }
.cm-b { font-size: 14px; line-height: 1.8; background: var(--bg-2, var(--hover)); padding: 6px 12px; border-radius: 4px 16px 16px 16px; display: inline-block; max-width: 100%; word-break: break-word; }
.cm-b b { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.cm-t { font-size: 11.5px; color: var(--fg-2); padding: 2px 12px; }
.cm-bar { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--border); }
.cm-bar textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 20px; padding: 9px 14px; font: inherit; background: var(--bg-2, var(--hover)); color: var(--fg); max-height: 120px; }
.bell-n { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ed4956; color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.icon-btn { position: relative; }
.notif b { font-weight: 700; }

/* ===================== v0.7 games ===================== */
.g-sudoku { background: linear-gradient(135deg, #6aa7d6, #2b4f74); }
.g-slide { background: linear-gradient(135deg, #ffc46b, #d2672c); }
.g-breakout { background: linear-gradient(135deg, #ff7aa2, #7a3cff); }
.g-simon { background: linear-gradient(135deg, #46d1c3, #1c6f9c); }
.g-reversi { background: linear-gradient(135deg, #3fbf74, #12603a); }
.gh-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gh-link { color: var(--danger, #e53935); font-size: 13px; font-weight: 700; padding: 4px 8px; border-radius: 10px; }
.gh-link:hover { background: var(--hover); }
.gh-live { padding: 0; gap: 0; overflow: hidden; }
.gh-live.hot { box-shadow: inset 3px 0 0 #2ecc71; }
.gh-live-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: start; }
.gh-live-main:active { transform: scale(.98); }
.gh-live:active { transform: none; }
.gh-x { width: 44px; align-self: stretch; display: grid; place-items: center; color: var(--fg-2); border-inline-start: 1px solid var(--border); }
.gh-x svg { width: 18px; height: 18px; fill: currentColor; }
.gh-x:hover { color: var(--danger, #e53935); background: var(--hover); }
.gh-more { display: block; margin: 0 14px 6px; width: calc(100% - 28px); padding: 9px; border-radius: 14px; color: var(--accent); font-weight: 700; font-size: 13.5px; background: var(--hover); }
.gh-choose { grid-template-columns: repeat(3, 1fr); }
.gcard.k-reversi { background: linear-gradient(135deg, rgba(63,191,116,.16), rgba(18,96,58,.1)); }
.gcard.ended { opacity: .92; }

/* reversi */
.rv { --rsize: min(var(--size), 440px); width: var(--rsize); height: var(--rsize); display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding: 6px; border-radius: 18px;
  background: #0f5a33; box-shadow: inset 0 0 0 3px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.3); direction: ltr; }
.rv-c { position: relative; border-radius: 6px; background: #1d8a4f; padding: 0; display: grid; place-items: center; }
.rv-c.hint::after { content: ''; width: 26%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.4); animation: pulse-h 1.4s infinite; }
.rv.live .rv-c.hint:hover { background: #27a560; }
.rv-c.last { box-shadow: inset 0 0 0 2px rgba(255,214,71,.85); }
.rv-d { width: 82%; height: 82%; border-radius: 50%; display: block; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.rv-d.p0 { background: radial-gradient(circle at 35% 30%, #666, #111 60%); }
.rv-d.p1 { background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8 65%); }
.rv-d.flip { animation: rv-flip .45s ease; }
.rv-d.put { animation: rv-put .25s cubic-bezier(.3,1.6,.5,1); }
@keyframes rv-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.9); } 100% { transform: rotateY(0); } }
@keyframes rv-put { from { transform: scale(.3); } to { transform: scale(1); } }
.gp-mark .rv-d { width: 22px; height: 22px; }
.rv.small { --rsize: 176px; gap: 1px; padding: 3px; border-radius: 10px; margin: 6px auto; pointer-events: none; }
.rv.small .rv-c { border-radius: 2px; }
.rv.small .rv-d { animation: none; box-shadow: none; }
.rv.small .rv-c.hint::after { display: none; }

/* sudoku */
.sd-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sd { --ssize: min(var(--size), calc(100dvh - 380px), 440px); width: var(--ssize); height: var(--ssize); min-width: 252px; min-height: 252px; display: grid; grid-template-columns: repeat(9, 1fr);
  background: #fff; border-radius: 12px; overflow: hidden; border: 2px solid #1f3a51; direction: ltr; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sd.busy { opacity: .5; }
.sd-c { color: #2b5ab8; font-size: calc(var(--ssize) / 17); font-weight: 700; border-right: 1px solid #d5dbe4; border-bottom: 1px solid #d5dbe4; display: grid; place-items: center; padding: 0; background: #fff; font-variant-numeric: tabular-nums; }
.sd-c.bx { border-right: 2px solid #1f3a51; }
.sd-c.by { border-bottom: 2px solid #1f3a51; }
.sd-c.given { color: #1d1d1f; font-weight: 800; }
.sd-c.peer { background: #eef3fa; }
.sd-c.same { background: #cfe0f7; }
.sd-c.sel { background: #9ec2f0; }
.sd-c.bad { color: #e53935; background: #fde8e8; }
.sd-c.hinted { color: #1f8f4e; }
.sd-c.bad-pop { animation: shake-x .3s; }
.sd.solved .sd-c { animation: win-c .5s 2 alternate; }
.sd-notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; font-size: calc(var(--ssize) / 38); color: #6b7a90; font-weight: 600; }
.sd-notes i { font-style: normal; display: grid; place-items: center; }
.sd-tools { display: flex; gap: 8px; }
.sd-t { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 14px; color: #fff; font-size: 18px; background: rgba(255,255,255,.12); }
.sd-t span { font-size: 11.5px; font-weight: 700; }
.sd-t.on { background: #fff; color: var(--gacc); }
.sd-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; width: min(var(--size), 440px); direction: ltr; }
.sd-n { position: relative; height: 50px; border-radius: 12px; background: rgba(255,255,255,.92); color: #1f3a51; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sd-n b { font-size: 22px; line-height: 1; }
.sd-n small { font-size: 10px; opacity: .6; height: 12px; }
.sd-n.full { opacity: .35; }
.sd-n:active { transform: scale(.93); }
@keyframes shake-x { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* sliding puzzle */
.sl { --ssize: min(var(--size), 420px); position: relative; width: var(--ssize); height: var(--ssize); border-radius: 18px; background: rgba(0,0,0,.18); padding: 6px; box-sizing: border-box; direction: ltr; }
.sl-t { --cell: calc((var(--ssize) - 12px) / var(--n)); position: absolute; left: 6px; top: 6px; width: calc(var(--cell) - 6px); height: calc(var(--cell) - 6px); margin: 3px;
  transform: translate(calc(var(--x) * var(--cell)), calc(var(--y) * var(--cell))); transition: transform .14s ease, background .2s;
  border-radius: 14px; background: linear-gradient(160deg, #fff, #ffe9d2); color: #8f3a1c; font-weight: 800; font-size: calc(var(--cell) * .38); display: grid; place-items: center;
  box-shadow: 0 4px 0 #e2a26c, 0 6px 12px rgba(0,0,0,.18); }
.sl-t.ok { background: linear-gradient(160deg, #fffbe9, #ffd98a); }
.sl.solved .sl-t { animation: win-c .5s 2 alternate; }

/* breakout */
.bo-wrap { position: relative; width: min(92vw, 480px); height: min(calc(100dvh - 230px - var(--safe-t) - var(--safe-b)), 640px); display: grid; place-items: center; }
.bo { display: block; border-radius: 16px; touch-action: none; }
.bo-tap { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); padding: 10px 20px; border-radius: 20px; background: rgba(255,255,255,.92); color: var(--gacc); font-weight: 800; cursor: pointer; animation: pulse-h 1.4s infinite; white-space: nowrap; }
.bo-tap.hidden { display: none; }

/* simon */
.smn { --s: min(var(--size), 380px); position: relative; width: var(--s); height: var(--s); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; direction: ltr; }
.smn.shake { animation: shake-x .25s 2; }
.smn-p { border-radius: 24px; opacity: .55; transition: opacity .08s, transform .08s, filter .08s; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.smn-p:nth-child(1) { border-top-left-radius: 50%; } .smn-p:nth-child(2) { border-top-right-radius: 50%; }
.smn-p:nth-child(3) { border-bottom-left-radius: 50%; } .smn-p:nth-child(4) { border-bottom-right-radius: 50%; }
.smn-p.g { background: #2ecc71; } .smn-p.r { background: #ff4f5e; } .smn-p.y { background: #ffd23f; } .smn-p.b { background: #3a8bff; }
.smn-p.lit, .smn-p:active { opacity: 1; transform: scale(.97); filter: brightness(1.25) drop-shadow(0 0 18px rgba(255,255,255,.7)); }
.smn-mid { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: #241356; color: #fff; font-weight: 800; font-size: 20px;
  box-shadow: 0 0 0 8px rgba(255,255,255,.12); }
.smn-mid.busy { color: #ffd23f; }

/* ===================== v0.7 text direction ===================== */
/* Each line takes the direction of its own first strong letter; an English message keeps its time on the right. */
.bubble .text, .post-text, .comment-text, .note-text, .row-item .v[dir=auto] { unicode-bidi: plaintext; text-align: start; }
.composer textarea, textarea[dir=auto], input[dir=auto] { unicode-bidi: plaintext; text-align: start; }
.bubble.ltr .text .meta { float: right; margin: 6px 0 -4px 8px; }
.chat-item .preview[dir=auto] { text-align: right; }

/* ===================== v0.7 profile photo gallery ===================== */
.tappable { cursor: pointer; }
.pv { position: fixed; inset: 0; z-index: 90; background: #000; color: #fff; display: flex; flex-direction: column; animation: gs-in .18s; }
.pv-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + var(--safe-t)) 8px 6px; background: linear-gradient(rgba(0,0,0,.6), transparent); position: relative; z-index: 2; }
.pv-title { flex: 1; min-width: 0; }
.pv-title b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-count { font-size: 12.5px; opacity: .75; }
.pv-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.pv-btn:hover { background: rgba(255,255,255,.12); }
.pv-btn svg { width: 24px; height: 24px; fill: currentColor; }
.pv-dots { display: flex; gap: 4px; padding: 0 12px 6px; }
.pv-dots i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.pv-dots i.on { background: #fff; }
.pv-stage { flex: 1; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; }
.pv-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.pv-img.slide { animation: gs-in .2s; }
.pv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; color: #fff; }
.pv-nav svg { width: 24px; height: 24px; fill: currentColor; }
.pv-nav.prev { right: 12px; }
.pv-nav.next { left: 12px; transform: translateY(-50%) scaleX(-1); }
.pv-nav[hidden] { display: none; }
@media (pointer: coarse) { .pv-nav { display: none; } }
.pv-date { text-align: center; font-size: 13px; opacity: .75; padding: 8px; }
.pv-bottom { display: flex; justify-content: center; padding: 6px 12px calc(14px + var(--safe-b)); }
.pv-bottom .btn { display: inline-flex; align-items: center; gap: 8px; }
.pv-bottom .btn svg { width: 20px; height: 20px; fill: currentColor; }

/* ===================== v0.7 swipe actions & hidden archive ===================== */
.ci-swipe { --sc: var(--accent); }
.ci-swipe.to-r { justify-content: flex-end; }
.ci-swipe.to-l { justify-content: flex-start; }
.chat-item.swipe-ready .ci-swipe { background: var(--sc); }
.ci-swipe svg { width: 24px; height: 24px; fill: currentColor; }
.chat-item.swipe-ready .ci-swipe svg { animation: rv-put .25s; }
.chat-item.archive-row.arc-hidden { max-height: 0; padding-block: 0 !important; overflow: hidden; opacity: 0; transition: max-height .25s ease, opacity .2s, padding .25s; }
.chat-item.archive-row.arc-hidden.revealed { max-height: 90px; padding-block: 9px !important; opacity: 1; }
.arc-tag { font-size: 11px; font-weight: 700; color: var(--fg-2); background: var(--hover); padding: 1px 7px; border-radius: 9px; margin-inline-start: 6px; }
.swipe-sel { border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 13px; width: 128px; flex: none; }

/* ===================== v0.7 notes ===================== */
.c-none { --nc: var(--bg); --nb: var(--border); }
.c-yellow { --nc: #fff6c7; --nb: #f2df84; } .c-green { --nc: #ddf6df; --nb: #a6dcaa; } .c-blue { --nc: #dcecff; --nb: #a9cdf6; }
.c-purple { --nc: #ece2ff; --nb: #c9b5f4; } .c-pink { --nc: #ffe1ec; --nb: #f5b3cb; } .c-orange { --nc: #ffe8d4; --nb: #f6c296; } .c-gray { --nc: #eceff1; --nb: #cfd6db; }
:root[data-theme='dark'] .c-yellow { --nc: #3b3720; --nb: #5c5427; } :root[data-theme='dark'] .c-green { --nc: #1f3424; --nb: #2f5236; }
:root[data-theme='dark'] .c-blue { --nc: #1c2c42; --nb: #2c4566; } :root[data-theme='dark'] .c-purple { --nc: #2c2440; --nb: #45386a; }
:root[data-theme='dark'] .c-pink { --nc: #3c2230; --nb: #5f3349; } :root[data-theme='dark'] .c-orange { --nc: #3c2c1e; --nb: #5f442b; } :root[data-theme='dark'] .c-gray { --nc: #2a2e33; --nb: #3d434a; }
.nt-page { position: relative; }
.nt-top { padding: 8px 12px 4px; display: flex; flex-direction: column; gap: 8px; }
.nt-top .search { margin: 0; }
.nt-chips { display: flex; gap: 6px; }
.nt-grid { columns: 2 150px; column-gap: 10px; padding: 8px 12px 90px; }
.nt-card { position: relative; display: block; width: 100%; break-inside: avoid; margin-bottom: 10px; padding: 12px 12px 8px; border-radius: 16px; text-align: start;
  background: var(--nc); border: 1px solid var(--nb); color: var(--fg); transition: transform .1s, box-shadow .15s; }
.nt-card:hover { box-shadow: var(--shadow); }
.nt-card:active { transform: scale(.98); }
.nt-title { display: block; font-size: 15.5px; margin-bottom: 4px; padding-inline-end: 18px; overflow-wrap: anywhere; }
.nt-body { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; max-height: 9.6em; overflow: hidden; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.nt-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--fg-2); }
.nt-shared { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 700; }
.nt-shared svg { width: 15px; height: 15px; fill: currentColor; }
.nt-role { background: rgba(0,0,0,.06); padding: 1px 7px; border-radius: 8px; }
.nt-pin { position: absolute; top: 10px; inset-inline-end: 10px; color: var(--fg-2); }
.nt-pin svg { width: 15px; height: 15px; fill: currentColor; }
.nt-empty { column-span: all; text-align: center; padding: 50px 20px; color: var(--fg-2); line-height: 1.9; }
.nt-fab { position: absolute; }
.ne-page { background: var(--nc); }
.ne-page .topbar { background: transparent; }
.ne-page .scroll { display: flex; flex-direction: column; }
.ne { flex: 1; display: flex; flex-direction: column; padding: 4px 18px 0; }
.ne-title { border: 0; outline: none; background: none; font: inherit; font-size: 22px; font-weight: 800; color: var(--fg); padding: 8px 0; }
.ne-body { flex: 1; min-height: 50vh; border: 0; outline: none; background: none; resize: none; font: inherit; font-size: 16px; line-height: 1.8; color: var(--fg); padding: 4px 0 30px; }
.ne-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 8px 18px calc(10px + var(--safe-b)); font-size: 12.5px; color: var(--fg-2); background: linear-gradient(transparent, var(--nc) 40%); }
.ne-status.ok { color: var(--fg-2); }
.ne-status.err { color: var(--danger, #e53935); }
.ne-status.live { color: var(--accent); font-weight: 700; }
.ne-status.live::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-inline-end: 6px; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ne-ro { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; background: rgba(0,0,0,.07); padding: 3px 10px; border-radius: 10px; }
.ne-ro svg { width: 15px; height: 15px; fill: currentColor; }
.ne-people { display: flex; align-items: center; padding: 4px 6px; border-radius: 20px; }
.ne-people:hover { background: var(--hover); }
.ne-people .avatar { width: 28px; height: 28px; font-size: 12px; border: 2px solid var(--nc); margin-inline-start: -8px; }
.ne-people .avatar:first-child { margin-inline-start: 0; }
.ne-more { font-size: 12px; font-weight: 700; margin-inline-start: 4px; }
.ne-share-lbl { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; font-size: 13.5px; padding: 0 6px; }
.ne-share-lbl svg { width: 19px; height: 19px; fill: currentColor; }
.nt-live-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-2); background: var(--hover); padding: 8px 12px; border-radius: 12px; margin: 6px 0 10px; }
.nt-live-note svg { width: 18px; height: 18px; fill: var(--accent); flex: none; }
.nt-share-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.nt-share-actions .btn svg { width: 18px; height: 18px; fill: currentColor; }
.nt-roles { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.nt-roles button { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; text-align: start; padding: 12px; border-radius: 14px; background: var(--hover); column-gap: 8px; }
.nt-roles .e { grid-row: span 2; font-size: 24px; display: grid; place-items: center; }
.nt-roles small { color: var(--fg-2); }
.nt-colors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.nt-color { aspect-ratio: 1; border-radius: 50%; background: var(--nc); border: 2px solid var(--nb); }
.nt-color.on { box-shadow: 0 0 0 3px var(--accent); }
.ncard { min-width: 230px; max-width: 300px; border-radius: 14px; padding: 10px 12px; background: var(--nc); border: 1px solid var(--nb); cursor: pointer; color: var(--fg); }
.ncard.off { opacity: .7; }
.ncard-head { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.ncard-head b { flex: 1; min-width: 0; }
.ncard-live { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #e53935; }
.ncard-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.2s infinite; }
.ncard-body { font-size: 13.5px; color: var(--fg-2); margin: 6px 0; line-height: 1.6; max-height: 6.4em; overflow: hidden; unicode-bidi: plaintext; text-align: start; }
.ncard-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-2); }

/* ===================== v0.7 spaces ===================== */
.sp-btn { --spc: var(--fg-2); position: relative; display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 18px; flex: none; color: var(--fg-2); background: var(--hover); font-weight: 700; font-size: 13px; max-width: 110px; }
.sp-btn.on { background: color-mix(in srgb, var(--spc) 16%, transparent); color: var(--spc); box-shadow: inset 0 0 0 1.5px var(--spc); }
.sp-btn svg { width: 19px; height: 19px; fill: currentColor; }
.sp-btn .sp-e { font-size: 17px; }
.sp-btn .sp-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-dot { position: absolute; top: 3px; inset-inline-end: 3px; width: 9px; height: 9px; border-radius: 50%; background: #e53935; border: 2px solid var(--bg); }
.menu-h { padding: 10px 16px 4px; font-weight: 800; font-size: 13px; color: var(--fg-2); }
.sp-item { display: flex; align-items: center; gap: 10px; min-width: 190px; flex: 1; }
.menu button .sp-item { flex: 1; }
.sp-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800; flex: none; }
.sp-ic.lg { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
.sp-check { width: 18px; height: 18px; fill: var(--accent); }
.sp-intro { display: flex; gap: 12px; align-items: center; margin: 12px 14px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(58,139,255,.12), rgba(138,92,246,.12)); line-height: 1.8; font-size: 13.5px; }
.sp-intro-e { font-size: 36px; }
.sp-row { display: flex; align-items: center; margin: 0 8px; border-radius: 14px; }
.sp-row.on { background: var(--hover); }
.sp-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; text-align: start; }
.sp-row-main .muted { font-size: 12.5px; }
.sp-row-tools { display: flex; }
.sp-row-tools .icon-btn { font-size: 11px; width: 34px; height: 34px; }
.sp-form { padding: 8px 16px; }
.sp-emojis { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.sp-emo { aspect-ratio: 1; font-size: 20px; border-radius: 10px; }
.sp-emo.on { background: var(--hover); box-shadow: inset 0 0 0 2px var(--accent); }
.sp-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-col { width: 32px; height: 32px; border-radius: 50%; }
.sp-col.on { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px currentColor; color: var(--fg); }
.sp-sec { display: flex; align-items: center; justify-content: space-between; }
.sp-banner { display: flex; align-items: center; gap: 8px; margin: 4px 10px 8px; padding: 8px 12px; border-radius: 12px; background: var(--hover); font-size: 13px; font-weight: 600; }
.pick-item.on { background: var(--hover); }
/* dialogs and menus opened from a full-screen game or the photo gallery sit above them */
body:has(> .gs) #layer, body:has(> .pv) #layer { z-index: 100; }
.main-top .search { min-width: 0; }
.sp-btn { max-width: 96px; padding: 0 9px; }
.sp-btn .sp-n { max-width: 52px; }
@media (max-width: 360px) { .sp-btn .sp-n { display: none; } }

/* ===================== v0.8 login code in the app ===================== */
.otp-app { display: flex; gap: 12px; align-items: center; text-align: start; background: var(--hover); border-radius: 16px; padding: 12px 14px; margin: 4px 0 8px; line-height: 1.7; font-size: 13.5px; }
.otp-app b { font-size: 14.5px; }
.otp-app-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; }
.otp-app-ic svg { width: 22px; height: 22px; fill: #fff; }
.otp-resend { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 36px; }
.otp-resend .btn svg { width: 18px; height: 18px; fill: currentColor; }
.otp-q { font-size: 13px; color: var(--fg-2); }
.sp-sec-box { border-top: 1px solid var(--border); margin-top: 10px; }
.sp-sec-box .toggle-line { display: flex; gap: 10px; align-items: center; padding: 6px 0 10px; }

/* ===================== v0.8 note checklists ===================== */
.ne-list { padding: 4px 0 40px; }
.ne-list.hidden, .ne-body.hidden { display: none; }
.ne-li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px dashed color-mix(in srgb, var(--nb) 70%, transparent); }
.ne-li-t { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--fg); padding: 8px 0; unicode-bidi: plaintext; text-align: start; }
.ne-li.done .ne-li-t { text-decoration: line-through; color: var(--fg-2); }
.ne-li.plain .ne-li-t { font-weight: 600; }
.ne-chk { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--fg-2); display: grid; place-items: center; flex: none; padding: 0; transition: background .15s, border-color .15s; }
.ne-chk.on { background: var(--accent); border-color: var(--accent); }
.ne-chk.on svg { width: 18px; height: 18px; fill: #fff; animation: rv-put .2s; }
.ne-chk.ghost { border: 0; }
.ne-add { display: flex; align-items: center; gap: 8px; color: var(--fg-2); padding: 10px 0; font-size: 15px; }
.ne-add svg { width: 22px; height: 22px; fill: currentColor; }
.ne-mode { font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 12px; background: rgba(0,0,0,.06); color: var(--fg); }
.ne-prog { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.nt-prog { font-weight: 700; color: var(--accent); }
.nt-prog.all { color: #2e9e5a; }

/* ===================== v0.8 board & card tables ===================== */
.tbl .gs-stage { padding: 4px 8px; align-items: stretch; }
.tbl-wrap { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.tbl-players { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tbl-p { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 14px; background: rgba(255,255,255,.12); font-size: 12.5px; font-weight: 700; max-width: 46%; }
.tbl-p .tbl-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-p.on { background: #fff; color: var(--gacc); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.tbl-p.me { outline: 2px dashed rgba(255,255,255,.5); outline-offset: 1px; }
.tbl-p.t0 .tbl-dot { background: #4fc3f7; } .tbl-p.t1 .tbl-dot { background: #ff8a65; }
.tbl-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); flex: none; }
.tbl-p.p0 .tbl-dot { background: #e53935; } .tbl-p.p1 .tbl-dot { background: #43a047; } .tbl-p.p2 .tbl-dot { background: #fbc02d; } .tbl-p.p3 .tbl-dot { background: #1e88e5; }
.k-hokm .tbl-p .tbl-dot, .k-shelem .tbl-p .tbl-dot { }
.tbl-b { font-size: 12px; } .tbl-b.sm { opacity: .85; font-weight: 600; }
.tbl-board { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }
.tbl-msg { align-self: center; text-align: center; font-size: 14px; }
.tbl-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 40px; }
.tbl-wait b { font-size: 17px; } .tbl-wait div { font-size: 13px; opacity: .85; }
.tbl-note { font-size: 12.5px; background: rgba(0,0,0,.25); padding: 6px 12px; border-radius: 12px; text-align: center; display: flex; align-items: center; gap: 4px; justify-content: center; flex-wrap: wrap; }
.tbl-note.sm { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* playing cards */
.pc { --w: 54px; position: relative; width: var(--w); height: calc(var(--w) * 1.42); border-radius: 7px; background: #fff; color: #1d1d1f; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  display: inline-block; flex: none; padding: 0; font-family: inherit; direction: ltr; user-select: none; transition: transform .15s, box-shadow .15s; }
.pc.red { color: #d32f2f; }
.pc-c { position: absolute; top: 3px; left: 4px; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pc-c b { font-size: calc(var(--w) * .3); font-weight: 800; letter-spacing: -1px; }
.pc-c i { font-style: normal; font-size: calc(var(--w) * .26); }
.pc-m { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .55); padding-top: 10%; padding-left: 12%; opacity: .92; font-weight: 800; }
.pc.back { background: repeating-linear-gradient(45deg, #2d5bd6 0 5px, #2148ad 5px 10px); border: 3px solid #fff; }
.pc.sm { --w: 30px; border-radius: 4px; }
.pc.sm .pc-m { display: none; }
.pc.sm.back { border-width: 2px; }
.pc.ok { cursor: pointer; }
.pc.no { filter: brightness(.72); }
.pc.sel { transform: translateY(-14px); box-shadow: 0 0 0 3px #ffd54f, 0 6px 14px rgba(0,0,0,.4); }
.hand { --n: 8; display: flex; justify-content: center; padding: 14px 4px 4px; direction: ltr; width: 100%; }
.hand .pc { --w: min(58px, calc((100vw - 40px) / (var(--n) * .62 + .5))); margin-left: calc(var(--w) * -.38); }
.hand .pc:first-child { margin-left: 0; }
.hand .pc.ok:hover, .hand .pc.ok:focus-visible { transform: translateY(-10px); z-index: 2; }
.hand .pc.ok { box-shadow: 0 0 0 2px rgba(255,235,59,.9), 0 2px 6px rgba(0,0,0,.35); }
.backs { display: inline-flex; align-items: center; direction: ltr; }
.backs .pc { margin-left: -22px; } .backs .pc:first-child { margin-left: 0; }
.backs b { margin-left: 6px; font-size: 12px; background: rgba(0,0,0,.3); padding: 1px 6px; border-radius: 8px; }
.felt { position: relative; width: 100%; aspect-ratio: 1.15; max-height: 44vh; border-radius: 26px; background: radial-gradient(ellipse at center, rgba(255,255,255,.16), rgba(0,0,0,.18)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.seat .backs .pc { --w: 22px; margin-left: -16px; }
.seat.on .seat-n { background: #fff; color: var(--gacc); }
.seat-n { background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 10px; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-t { top: 8px; left: 50%; transform: translateX(-50%); }
.s-r { right: 6px; top: 50%; transform: translateY(-50%); }
.s-l { left: 6px; top: 50%; transform: translateY(-50%); }
.trick { position: absolute; inset: 0; }
.trick .pc { --w: 50px; position: absolute; left: 50%; top: 50%; animation: card-in .22s ease-out; }
.trick .tr-b { transform: translate(-50%, -8%); } .trick .tr-t { transform: translate(-50%, -92%); }
.trick .tr-r { transform: translate(18%, -50%) rotate(6deg); } .trick .tr-l { transform: translate(-118%, -50%) rotate(-6deg); }
.trick.done .pc { opacity: .55; } .trick.done .pc.win { opacity: 1; box-shadow: 0 0 0 3px #ffd54f; }
@keyframes card-in { from { opacity: 0; scale: .7; } }
.trump-chip { position: absolute; top: 8px; right: 10px; background: #fff; color: #1d1d1f; font-weight: 800; padding: 3px 10px; border-radius: 12px; font-size: 14px; }
.trump-chip.red { color: #d32f2f; }
.card-info { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 12px; }
.card-info span { background: rgba(0,0,0,.22); padding: 3px 9px; border-radius: 10px; }
.card-info .us { background: rgba(79,195,247,.3); } .card-info .them { background: rgba(255,138,101,.3); }
.pick-suit { display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(0,0,0,.35); padding: 10px 12px; border-radius: 16px; }
.pick-suit > div { display: flex; gap: 8px; }
.pick-suit.float { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 6; background: rgba(10,15,40,.92); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.suit-btn { display: flex; flex-direction: column; align-items: center; background: #fff; color: #1d1d1f; border-radius: 12px; padding: 6px 12px; font-weight: 700; font-size: 12px; min-width: 56px; }
.suit-btn span { font-size: 26px; line-height: 1; } .suit-btn.red { color: #d32f2f; }
.bid-box { display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(0,0,0,.3); padding: 10px; border-radius: 16px; }
.bid-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bid-btn { min-width: 52px; padding: 8px 12px; border-radius: 12px; background: #fff; color: var(--gacc); font-weight: 800; }
.bid-btn.shelem { background: linear-gradient(135deg, #ffd54f, #ff8f00); color: #3b1d00; }
.bid-btn.pass { background: rgba(255,255,255,.2); color: #fff; }
.bid-btn:disabled { opacity: .45; }
.hk-centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px; direction: ltr; }
.hk-stock { position: relative; padding: 0; } .hk-stock.ok .pc { box-shadow: 0 0 0 3px #ffeb3b; animation: pulse-h 1.4s infinite; }
.hk-stock b { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 12px; }
.hk-pile { position: relative; width: 60px; height: 80px; }
.hk-pile .pc { position: absolute; left: 0; top: 0; transform: rotate(calc(var(--k) * -7deg)) translate(calc(var(--k) * -4px), 0); }
.hk-suit { font-size: 30px; background: #fff; color: #1d1d1f; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.hk-suit.red { color: #d32f2f; }
.hk-dir { font-size: 26px; opacity: .7; }
.hk-pending { position: absolute; top: 14px; right: 16px; background: #e53935; color: #fff; font-weight: 800; padding: 4px 10px; border-radius: 12px; animation: pulse-h 1s infinite; }
.hk-btns { display: flex; gap: 8px; min-height: 0; }
.ps-table { position: absolute; inset: 24% 10%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; direction: ltr; }
.ps-table .pc { --w: 46px; }
.ps-choose { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 6; background: rgba(10,30,20,.95); padding: 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ps-opt { display: flex; gap: 4px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.14); direction: ltr; }

/* dice */
.dice-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
.dice-txt { font-size: 13px; opacity: .85; }
.dice { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 #c9cfda, 0 8px 18px rgba(0,0,0,.3); padding: 0; }
.dice:disabled { opacity: .7; }
.dice.pulse { animation: dice-wob 1.2s infinite; }
@keyframes dice-wob { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) scale(1.05); } }
.dice-q { font-size: 34px; }
.pip-face { width: 46px; height: 46px; border-radius: 10px; background: #fff; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px; box-sizing: border-box; }
.dice .pip-face { width: 52px; height: 52px; }
.pip-face i { width: 9px; height: 9px; border-radius: 50%; background: #1d1d1f; place-self: center; }
.pip-face.f1 i { grid-area: 2/2; }
.pip-face.f2 i:nth-child(1) { grid-area: 1/1; } .pip-face.f2 i:nth-child(2) { grid-area: 3/3; }
.pip-face.f3 i:nth-child(1) { grid-area: 1/1; } .pip-face.f3 i:nth-child(2) { grid-area: 2/2; } .pip-face.f3 i:nth-child(3) { grid-area: 3/3; }
.pip-face.f4 i:nth-child(1) { grid-area: 1/1; } .pip-face.f4 i:nth-child(2) { grid-area: 1/3; } .pip-face.f4 i:nth-child(3) { grid-area: 3/1; } .pip-face.f4 i:nth-child(4) { grid-area: 3/3; }
.pip-face.f5 i:nth-child(1) { grid-area: 1/1; } .pip-face.f5 i:nth-child(2) { grid-area: 1/3; } .pip-face.f5 i:nth-child(3) { grid-area: 2/2; } .pip-face.f5 i:nth-child(4) { grid-area: 3/1; } .pip-face.f5 i:nth-child(5) { grid-area: 3/3; }
.pip-face.f6 i:nth-child(1) { grid-area: 1/1; } .pip-face.f6 i:nth-child(2) { grid-area: 2/1; } .pip-face.f6 i:nth-child(3) { grid-area: 3/1; } .pip-face.f6 i:nth-child(4) { grid-area: 1/3; } .pip-face.f6 i:nth-child(5) { grid-area: 2/3; } .pip-face.f6 i:nth-child(6) { grid-area: 3/3; }
.pip-face.used { opacity: .35; }

/* snakes & ladders */
.sn-board { position: relative; width: min(100%, calc(100dvh - 330px), 520px); aspect-ratio: 1; display: grid; grid-template: repeat(10, 1fr) / repeat(10, 1fr); border-radius: 14px; overflow: hidden; direction: ltr;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); background: #fff8e1; }
.sn-c { background: #fff3cd; border: 1px solid rgba(0,0,0,.05); position: relative; }
.sn-c.alt { background: #ffe0a3; }
.sn-c small { position: absolute; top: 1px; left: 3px; font-size: 9px; color: rgba(0,0,0,.45); font-weight: 700; }
.sn-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sn-svg .ladder line { stroke: #6d4c2a; stroke-width: .9; stroke-linecap: round; }
.sn-svg .ladder .rung { stroke-width: .7; }
.sn-svg .snake { fill: none; stroke: #2e7d32; stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.sn-svg .snake-h { fill: #1b5e20; }
.tok { position: absolute; width: 5.5%; height: 5.5%; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.4); transition: left .45s ease, top .45s ease; z-index: 2; }

/* ludo */
.ld-board { position: relative; width: min(100%, calc(100dvh - 330px), 520px); aspect-ratio: 1; display: grid; grid-template: repeat(15, 1fr) / repeat(15, 1fr); background: #fff; border-radius: 12px; overflow: hidden; direction: ltr; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.ld-c { border: .5px solid rgba(0,0,0,.08); }
.ld-c.yard { border: 0; }
.ld-c.y0 { background: #ef9a9a; } .ld-c.y1 { background: #a5d6a7; } .ld-c.y2 { background: #fff59d; } .ld-c.y3 { background: #90caf9; }
.ld-c.centre { background: conic-gradient(from 45deg, #43a047 0 25%, #f9a825 0 50%, #1e88e5 0 75%, #e53935 0); border: 0; }
.ld-c.trk { background: #fff; }
.ld-c.safe::after { content: '★'; display: grid; place-items: center; height: 100%; color: rgba(0,0,0,.25); font-size: 10px; }
.lp { position: absolute; width: calc(100% / 15 * .8); height: calc(100% / 15 * .8); border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.45); padding: 0; transition: left .35s, top .35s; z-index: 2; }
.lp.ok { animation: lp-pulse .8s infinite alternate; z-index: 3; cursor: pointer; }
@keyframes lp-pulse { to { box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 12px var(--c); transform: scale(1.12); } }

/* backgammon */
.bg-board { position: relative; display: flex; gap: 4px; width: min(100%, 560px); aspect-ratio: 1.45; background: #6d4524; border-radius: 12px; padding: 8px; box-sizing: border-box; direction: ltr; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.bg-half { flex: 1; display: flex; flex-direction: column; justify-content: space-between; background: #e8cf9f; border-radius: 6px; padding: 2px; }
.bg-row { display: flex; height: 46%; }
.bg-pt { flex: 1; position: relative; padding: 0; background: none; }
.bg-pt::before { content: ''; position: absolute; inset: 0 8%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #a44a2d; }
.bg-pt.bot::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bg-pt.b::before { background: #3e4c59; }
.bg-pt.from::before { filter: brightness(1.25); }
.bg-pt.sel::before { background: #fbc02d; }
.bg-pt.tgt::before { background: #43a047; animation: pulse-h 1s infinite; }
.bg-stack { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.bg-pt.bot .bg-stack { top: auto; bottom: 0; flex-direction: column-reverse; }
.ck { width: 86%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4); margin: -1px 0; }
.ck.p0 { background: radial-gradient(circle at 35% 30%, #fff, #ddd); color: #333; }
.ck.p1 { background: radial-gradient(circle at 35% 30%, #666, #111); color: #fff; }
.bg-bar { width: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0; }
.bar-c { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 26px; min-height: 30px; padding: 0; border-radius: 8px; }
.bar-c .ck { width: 22px; }
.bar-c.from { box-shadow: 0 0 0 2px #fbc02d; } .bar-c.sel { background: rgba(251,192,45,.4); }
.bg-off { width: 34px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6px 0; color: #fff; font-size: 12px; border-radius: 8px; background: rgba(0,0,0,.2); }
.bg-off .ck { width: 22px; }
.bg-off.tgt { background: #43a047; animation: pulse-h 1s infinite; }
.bg-dice { display: flex; gap: 10px; justify-content: center; align-items: center; min-height: 52px; }
.g-pool { background: linear-gradient(135deg, #2fbf71, #0f6b37); }
.g-shoot { background: linear-gradient(135deg, #f87171, #7f1d1d); }
.g-racing { background: linear-gradient(135deg, #94a3b8, #1e293b); }
.g-snakes { background: linear-gradient(135deg, #86d36b, #2e7d32); }
.g-ludo { background: linear-gradient(135deg, #ff9a6b, #c62828); }
.g-backgammon { background: linear-gradient(135deg, #c28a52, #5d3a1a); }
.g-hokm { background: linear-gradient(135deg, #4c6fff, #1b2a6b); }
.g-shelem { background: linear-gradient(135deg, #b26bff, #4a148c); }
.g-haftkhabis { background: linear-gradient(135deg, #34b4eb, #0d47a1); }
.g-pasur { background: linear-gradient(135deg, #3fbf74, #1b5e20); }
.gh-modes.two { grid-template-columns: 1fr 1fr; }
.gh-resume { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 4px; scrollbar-width: none; }
.gh-res { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; padding: 10px 12px; border-radius: 16px; color: #fff; text-align: start; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.gh-res b { font-size: 14px; } .gh-res .gh-d { font-weight: 700; }
.gh-choose button small { display: block; font-size: 11px; color: var(--fg-2); font-weight: 600; }
.gcard.eng { background: linear-gradient(135deg, rgba(63,191,116,.14), rgba(58,123,255,.1)); }
.gcard-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 0 2px; font-size: 12.5px; }
.gcard-seats span { background: rgba(0,0,0,.05); border-radius: 8px; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard-seats span.on { background: var(--accent); color: #fff; font-weight: 700; }
.gcard-seats span.t0 { border-inline-start: 3px solid #4fc3f7; } .gcard-seats span.t1 { border-inline-start: 3px solid #ff8a65; }
.pool-wrap { width: 100%; height: min(calc(100dvh - 240px - var(--safe-t) - var(--safe-b)), 760px); display: grid; place-items: center; }
.pool { touch-action: none; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.gs-stat.wide { min-width: 0; max-width: 46%; } .gs-stat.wide b { font-size: 12.5px; white-space: nowrap; }
.shoot, .racing { touch-action: none; border-radius: 16px; display: block; }
.sh-reload { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: #fbbf24; color: #3b1d00; font-weight: 800; padding: 10px 18px; border-radius: 20px; animation: pulse-h 1s infinite; }
.sh-reload.hidden { display: none; }
.tbl-board { justify-content: safe center; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.tbl-wrap { height: 100%; }
.k-shelem .felt, .k-hokm .felt { aspect-ratio: 1.35; }

/* ---------- v0.8 Mini Apps */
.wa { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: var(--bg); }
.wa-top { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); min-height: 52px; }
.wa-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.wa-title b, .wa-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-title small { color: var(--fg-2); font-size: 12px; }
.wa-body { position: relative; flex: 1; min-height: 0; }
.wa-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.wa-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; background: var(--bg); }
.wa-main { margin: 8px 12px calc(8px + env(safe-area-inset-bottom)); height: 48px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 16px; }
.wa-main:disabled { opacity: .55; }
.bot-app-btn { flex: none; align-self: center; height: 34px; padding: 0 12px; margin-inline-end: 4px; border: 0; border-radius: 17px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.app-row:hover { background: var(--hover, rgba(0,0,0,.04)); }
.app-ic { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.app-ic.ph { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 20px; }
.app-bot { color: var(--fg-2); font-size: 13px; }

/* ===================== v0.8 shared bits ===================== */
.ellipsis2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.danger-t { color: var(--danger) !important; }
.row-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.row-select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.file-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; margin: 4px 0 4px 6px; border-radius: 10px; background: var(--bg-2); color: var(--fg); text-decoration: none; font-size: 14px; max-width: 100%; }
.file-chip small { color: var(--fg-2); }
.file-chip .icon-btn { width: 24px; height: 24px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.modal-wide { width: min(560px, calc(100vw - 24px)); }
.cls-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; align-items: center; }
.cls-desc { white-space: pre-wrap; line-height: 1.85; padding: 6px 16px 10px; word-wrap: break-word; }
.cls-note { padding: 4px 16px 12px; font-size: 13.5px; line-height: 1.8; }
.muted.bad, .bad { color: var(--danger); }
.section-title + .form-pad { padding-top: 0; }

/* channel strip under the header */
.kind-bar { display: flex; gap: 6px; padding: 6px 10px; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.kind-bar button { flex: 1 0 auto; padding: 7px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; }
.kind-bar .badge { position: static; }

/* ===================== teaching channels ===================== */
.cls-hero { display: flex; gap: 14px; align-items: center; padding: 16px; }
.cls-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, #6a5cff22, #3390ec33); flex: none; }
.cls-ic.live { background: linear-gradient(135deg, #ff525233, #ff8a6533); animation: pulse-live 1.6s infinite; }
@keyframes pulse-live { 50% { box-shadow: 0 0 0 8px rgba(255,82,82,.12); } }
.cls-hero b { font-size: 17px; }
.cls-meet { font-size: 12.5px; color: var(--accent); margin-top: 2px; }
.cls-page .seg, .shop-page .seg { margin: 0 16px 8px; }
.cls-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.cls-row:hover { background: var(--hover); }
.cls-row .chev { transform: scaleX(-1); color: var(--fg-2); width: 18px; }
.cls-row-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2); font-size: 20px; flex: none; }
.cls-row.live .cls-row-ic { background: rgba(255,82,82,.14); }
.cls-row .grow { min-width: 0; }
.cls-row .muted { font-size: 13px; }
.cls-sub { font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
.cls-sub.good { color: var(--green); } .cls-sub.bad { color: var(--danger); }
.cls-join { background: #e53935 !important; }
.live-dot, .live-badge i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e53935; animation: blink-live 1.2s infinite; }
@keyframes blink-live { 50% { opacity: .35; } }
.cls-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 16px 12px; }
.cls-stat { background: var(--bg-2); border-radius: 12px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cls-stat b { font-size: 17px; } .cls-stat span { font-size: 12px; color: var(--fg-2); }
.cls-table-wrap { overflow-x: auto; padding: 0 16px 12px; }
.cls-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cls-table th, .cls-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.cls-table th { color: var(--fg-2); font-weight: 500; }
.cls-person { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.cls-person.clickable { cursor: pointer; } .cls-person.clickable:hover { background: var(--hover); }
.cls-person .grow { min-width: 0; } .cls-person .muted { font-size: 12.5px; }
.att { font-size: 12px; padding: 3px 10px; border-radius: 10px; font-weight: 600; flex: none; }
.att.on { background: rgba(47,180,90,.14); color: var(--green); } .att.off { background: var(--bg-2); color: var(--fg-2); } .att.mid { background: rgba(242,160,30,.16); color: #c27c00; }
.cls-ok { margin: 4px 16px; padding: 10px 12px; border-radius: 12px; background: rgba(47,180,90,.12); color: var(--green); font-size: 14px; }
.cls-grade { margin: 6px 16px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(47,180,90,.14), rgba(51,144,236,.1)); text-align: center; }
.cls-grade b { font-size: 30px; } .cls-fb { margin-top: 8px; text-align: start; line-height: 1.8; }
.cls-file { padding: 4px 0; }
.cls-card { text-align: start; background: linear-gradient(135deg, rgba(106,92,255,.14), rgba(51,144,236,.1)); }
.cls-card.live { background: linear-gradient(135deg, rgba(229,57,53,.16), rgba(255,138,101,.12)); }
.cls-card-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cls-card-ic { font-size: 20px; }
.cls-card-when { font-size: 13px; color: var(--fg-2); margin-top: 6px; }
.cls-card-st { font-size: 12.5px; margin-top: 2px; }
.live-badge { display: inline-flex; align-items: center; gap: 5px; background: #e53935; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.live-badge i { background: #fff; width: 7px; height: 7px; }
.cls-card.live .gcard-cta { background: #e53935; color: #fff; }

/* ===================== shop channels ===================== */
.shop-page .scroll { padding-bottom: 80px; }
.shop-top { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.shop-closed { margin: 0 16px 8px; padding: 10px 12px; border-radius: 12px; background: rgba(242,160,30,.14); color: #a86b00; font-size: 14px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 16px 16px; }
.shop-grid > .list-empty { grid-column: 1 / -1; }
.shop-tile { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.shop-tile.off { opacity: .6; }
.shop-img { aspect-ratio: 1; background: var(--bg-2) center / cover no-repeat; display: grid; place-items: center; font-size: 40px; position: relative; cursor: pointer; }
.shop-tag { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; padding: 2px 8px; border-radius: 8px; }
.shop-tag.sale { background: #e53935; }
.shop-tile.na .shop-img { filter: grayscale(.8); }
.shop-tile-b { padding: 8px 10px 4px; cursor: pointer; flex: 1; }
.shop-t { font-size: 14px; line-height: 1.6; min-height: 2.9em; }
.shop-p { display: flex; flex-direction: column; align-items: flex-start; margin-top: 4px; }
.shop-p s { color: var(--fg-2); font-size: 12px; } .shop-p b { font-size: 14px; }
.shop-add { margin: 6px 8px 8px; padding: 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
.shop-cartbar { position: absolute; bottom: calc(14px + var(--safe-b, 0px)); inset-inline: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: var(--accent); color: #fff; font: inherit; font-size: 15px; box-shadow: 0 6px 20px rgba(51,144,236,.35); z-index: 3; }
.shop-cart-n { background: #fff; color: var(--accent); min-width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.shop-page .fab { bottom: 84px; }
.shop-hero { aspect-ratio: 4 / 3; max-height: 46vh; background: var(--bg-2) center / contain no-repeat; display: grid; place-items: center; font-size: 64px; cursor: zoom-in; }
.shop-dots { display: flex; gap: 6px; justify-content: center; padding: 8px; }
.shop-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--border); padding: 0; }
.shop-dots button.on { background: var(--accent); width: 20px; border-radius: 4px; }
.shop-h { font-size: 19px; margin: 8px 0 4px; }
.shop-price { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.shop-price b { font-size: 19px; color: var(--accent); } .shop-price s { color: var(--fg-2); }
.shop-qty { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.shop-qty > button:not(.btn) { width: 36px; height: 36px; border-radius: 10px; background: var(--bg-2); font-size: 20px; font-weight: 700; }
.shop-qty b { min-width: 24px; text-align: center; }
.shop-qty .btn { flex: 1; }
.shop-qty.sm { margin: 0; gap: 6px; } .shop-qty.sm > button { width: 30px; height: 30px; font-size: 17px; }
.shop-imgs { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.shop-thumb { width: 64px; height: 64px; border-radius: 12px; background: var(--bg-2) center / cover no-repeat; position: relative; flex: none; display: grid; place-items: center; font-size: 26px; }
.shop-thumb .icon-btn { position: absolute; top: -6px; inset-inline-end: -6px; width: 24px; height: 24px; background: var(--bg); box-shadow: var(--shadow); }
.shop-thumb.add { border: 2px dashed var(--border); color: var(--fg-2); font-size: 28px; }
.cart-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; }
.cart-row .grow { min-width: 0; } .cart-row .muted { font-size: 13px; }
.cart-sum { margin: 8px 16px; padding: 12px; border-radius: 14px; background: var(--bg-2); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cart-sum > div { display: flex; justify-content: space-between; }
.cart-sum .tot { border-top: 1px solid var(--border); padding-top: 8px; font-size: 15px; }
.ord-head { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 4px; }
.ord-head b { font-size: 17px; }
.cls-sub.st-pending, .cls-sub.st-paid { color: #c27c00; } .cls-sub.st-confirmed, .cls-sub.st-shipped { color: var(--accent); } .cls-sub.st-delivered { color: var(--green); } .cls-sub.st-canceled { color: var(--danger); }
.ord-steps { display: flex; padding: 10px 12px; gap: 2px; }
.ord-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-2); text-align: center; position: relative; }
.ord-step i { width: 14px; height: 14px; border-radius: 50%; background: var(--border); position: relative; z-index: 1; }
.ord-step::before { content: ''; position: absolute; top: 6px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--border); }
.ord-step:last-child::before { display: none; }
.ord-step.on { color: var(--accent); font-weight: 600; } .ord-step.on i, .ord-step.on::before { background: var(--accent); }
.ord-addr { padding: 0 16px 8px; line-height: 1.9; font-size: 14px; }
.ord-track { margin: 4px 16px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; gap: 6px; }
.ord-pay { margin: 0 16px; padding: 12px; border-radius: 12px; border: 1px dashed var(--accent); white-space: pre-wrap; line-height: 1.9; position: relative; padding-inline-end: 44px; }
.ord-pay .icon-btn { position: absolute; top: 6px; inset-inline-end: 6px; }
.ord-amount { padding: 8px 16px; }
.ord-receipt { padding: 4px 0; } .ord-receipt img { max-width: 200px; max-height: 240px; border-radius: 12px; cursor: zoom-in; }
.section-title + .ord-receipt { padding: 0 16px; }
.ord-hist { padding: 4px 16px 16px; font-size: 12.5px; color: var(--fg-2); line-height: 1.9; }
.shop-card { text-align: start; padding: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--border); min-width: 240px; max-width: 300px; }
.shop-card-img { aspect-ratio: 4 / 3; background: var(--bg-2) center / cover no-repeat; }
.shop-card-img.empty { display: grid; place-items: center; font-size: 44px; }
.shop-card.na .shop-card-img { filter: grayscale(.8); }
.shop-card-b { padding: 8px 12px 0; }
.shop-card .shop-p { flex-direction: row; gap: 8px; align-items: baseline; }
.shop-card-add { display: block; width: calc(100% - 16px); margin: 8px; padding: 8px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px; }
.shop-card .gcard-cta { margin: 0 8px 8px; }

/* ===================== office letters ===================== */
.ofc-tabs { display: flex; gap: 6px; padding: 4px 12px 10px; overflow-x: auto; scrollbar-width: none; }
.ofc-tabs button { flex: none; padding: 7px 12px; border-radius: 18px; background: var(--bg-2); font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.ofc-tabs button.on { background: var(--accent); color: #fff; }
.ofc-tabs .badge { position: static; min-width: 18px; height: 18px; font-size: 11px; }
.ofc-pro { margin: 0 16px 10px; padding: 10px 12px; border-radius: 12px; background: rgba(242,176,30,.14); font-size: 13.5px; line-height: 1.8; }
.ofc-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); }
.ofc-row:hover { background: var(--hover); }
.ofc-row.unread b { font-weight: 800; } .ofc-row.unread { background: var(--accent-soft); }
.ofc-row .grow { min-width: 0; } .ofc-row .chev { transform: scaleX(-1); color: var(--fg-2); width: 18px; }
.ofc-row-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; font-size: 20px; flex: none; }
.ofc-row-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ofc-row .muted { font-size: 13px; }
.ofc-row-meta { font-size: 12px; color: var(--fg-2); }
.ofc-pri { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: rgba(229,57,53,.12); color: var(--danger); flex: none; }
.ofc-pri.immediate { background: var(--danger); color: #fff; }
.ofc-sec { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: rgba(0,0,0,.08); flex: none; }
.ofc-form .ofc-body-in { min-height: 220px; line-height: 2; }
.ofc-people { display: flex; flex-wrap: wrap; gap: 6px; }
.ofc-people .chip.add { background: var(--accent-soft); color: var(--accent); padding: 6px 12px; }
.ofc-pick { max-height: 60vh; overflow-y: auto; }
.ofc-atts { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; }
.ofc-signbar { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(51,144,236,.12); font-weight: 600; }
.ofc-wait { margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font-size: 13.5px; line-height: 1.8; }
.ofc-paper { margin: 12px; padding: 20px 18px; border-radius: 6px; background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 14.5px; }
.ofc-lh { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #222; padding-bottom: 10px; margin-bottom: 14px; }
.ofc-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; flex: none; }
.ofc-logo.ph { display: grid; place-items: center; background: #eef2f6; font-size: 24px; font-weight: 700; }
.ofc-org { flex: 1; min-width: 0; line-height: 1.6; } .ofc-org b { font-size: 15.5px; }
.ofc-meta { font-size: 12px; line-height: 1.9; text-align: start; }
.ofc-to, .ofc-subj, .ofc-cc { margin: 6px 0; line-height: 1.8; }
.ofc-text { white-space: pre-wrap; line-height: 2.1; margin: 16px 0 22px; text-align: justify; word-wrap: break-word; }
.ofc-sigs { display: flex; flex-wrap: wrap; gap: 14px; }
.ofc-sig { text-align: center; min-width: 140px; }
.ofc-sig .muted { color: #666; font-size: 12px; }
.ofc-stamp { border: 2px solid #1a7f37; color: #1a7f37; border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; margin-bottom: 6px; font-weight: 700; transform: rotate(-3deg); }
.ofc-stamp small { font-weight: 400; font-size: 10.5px; }
.ofc-stamp.wait { border-color: #aaa; color: #999; transform: none; border-style: dashed; }
.ofc-paper .file-chip { background: #f1f3f5; color: #111; }
.ofc-verify { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding-top: 10px; border-top: 1px dashed #aaa; font-size: 11.5px; color: #333; }
.ofc-verify small { display: block; color: #777; word-break: break-all; }
.ofc-verify .ltr { word-break: break-all; }
.ofc-qr svg { display: block; background: #fff; }
.ofc-acts { justify-content: center; }
.ofc-signbox { display: flex; flex-direction: column; gap: 10px; line-height: 1.8; }
.ofc-signbox .cls-actions { padding: 0; }
.ofc-code { font-size: 24px; letter-spacing: 8px; text-align: center; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--fg); font-family: inherit; }
.ofc-logo-pick { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ofc-logo-pick img, .ofc-logo-pick > span { width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: var(--bg-2); display: grid; place-items: center; color: var(--fg-2); font-size: 13px; }
@media (max-width: 420px) { .ofc-lh { flex-wrap: wrap; } .ofc-meta { width: 100%; display: flex; flex-wrap: wrap; gap: 0 12px; } }
.shop-page, .cls-page, .ofc-page { position: relative; }
.auth { position: relative; }
.auth-lang { position: absolute; top: calc(12px + var(--safe-t, 0px)); left: 16px; padding: 6px 14px; border-radius: 16px; background: var(--bg-2); color: var(--fg); font: inherit; font-size: 14px; z-index: 2; }

/* ===================== v0.8.1 feedback ===================== */
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fb-hint { font-size: 13px; margin-top: -6px; }
.fb-row { margin: 0 16px 10px; padding: 12px; border-radius: 14px; background: var(--bg-2); }
.fb-row-top { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.fb-row-top .muted { margin-inline-start: auto; font-size: 12px; }
.fb-kind { font-weight: 600; }
.fb-st { font-size: 12px; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.06); }
.fb-st.st-answered { background: rgba(47,180,90,.14); color: var(--green); }
.fb-text { white-space: pre-wrap; line-height: 1.8; font-size: 14.5px; word-wrap: break-word; }
.fb-answer { margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--bg); line-height: 1.8; font-size: 14px; white-space: pre-wrap; }
.fb-answer b { display: block; color: var(--accent); font-size: 13px; margin-bottom: 2px; }

/* ===================== v0.8.1 in-app banners ===================== */
.ib-stack { position: fixed; top: calc(8px + var(--safe-t, 0px)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 16px)); z-index: 140; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ib { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 18px; background: var(--menu-bg, rgba(255,255,255,.96)); color: var(--fg);
  box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; animation: ib-in .26s cubic-bezier(.2,.9,.3,1.2); transition: transform .2s, opacity .2s; }
.ib.out { opacity: 0; transform: translateY(-24px); }
@keyframes ib-in { from { opacity: 0; transform: translateY(-30px); } }
.ib .avatar { flex: none; }
.ib-emo { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 20px; flex: none; }
.ib-b { flex: 1; min-width: 0; line-height: 1.45; }
.ib-b b { display: block; font-size: 14.5px; }
.ib-t { font-size: 13.5px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ib-x { width: 30px; height: 30px; flex: none; color: var(--fg-2); }
.ib-x svg { width: 18px; height: 18px; }
.code-copy { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; flex: none; }
.code-copy svg { width: 16px; height: 16px; fill: currentColor; }
.code-copy.done { background: var(--green); }
.bubble .code-copy { margin: 6px 0 2px; }

/* ===================== v0.8.1 form polish ===================== */
.field > label { z-index: 2; pointer-events: none; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field input, .field select, .field textarea { min-width: 0; color: var(--fg); font-family: inherit; }
.field input, .field select { min-height: 52px; }
.field select { -webkit-appearance: none; appearance: none; padding-left: 40px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat left 12px center / 22px; }
.field input[type=time], .field input[type=date], .field input[type=number], .field input[type=tel], .field input[inputmode=numeric] { direction: ltr; text-align: right; }
.field input[type=time] { -webkit-appearance: none; appearance: none; display: block; }
.field input[type=time]::-webkit-date-and-time-value { text-align: right; }
.two > * { min-width: 0; }
.two > .field { margin-bottom: 18px; }
.date-holder { display: block; }
.date-holder input { min-height: 52px; }
@media (max-width: 360px) { .two { grid-template-columns: 1fr; } }
.toggle-line + .grid2, .toggle-line + .two, .toggle-line + .field { margin-top: 14px; }
.toggle-line { min-height: 44px; }
.section-title + .field, .sp-form .section-title + .field { margin-top: 14px; }
.grid2 > * { min-width: 0; }
/* primary action of a form page: full width at the bottom */
.form-pad > .btn:not(.flat):not(.small), .ofc-form .cls-actions > .btn:first-child { width: 100%; margin-top: 6px; }
.form-pad > .btn.flat { width: 100%; }
.row-line + .field, .row-line + .two { margin-top: 16px; }
.row-line { min-height: 44px; border-bottom: 1px solid var(--border); }
.row-line:last-of-type { border-bottom: 0; }
.empty-ic { font-size: 48px; line-height: 1.2; margin-bottom: 6px; }
.list-empty { padding: 32px 24px; text-align: center; color: var(--fg-2); line-height: 1.9; }
.field .help { line-height: 1.7; }
.help bdi, .muted bdi { unicode-bidi: isolate; direction: ltr; }
.shop-imgs .shop-thumb.add { width: 84px; height: 84px; }
.chips + .field, .chips + div > .field:first-child { margin-top: 18px; }

/* ===================== v0.8.2 product options, attributes, addresses ===================== */
.shop-opts-hint { font-size: 11.5px; color: var(--fg-2); margin-top: 2px; }
.shop-off { font-size: 12px; font-weight: 700; color: #fff; background: #e53935; padding: 2px 8px; border-radius: 8px; }
.shop-opts { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; }
.shop-opt-n { font-size: 13.5px; color: var(--fg-2); margin-bottom: 6px; }
.shop-opt-n b { color: var(--fg); }
.shop-opt-vals { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-ov { min-width: 46px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; }
.shop-ov.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.shop-ov.na { opacity: .45; text-decoration: line-through; }
.shop-attrs table { width: 100%; border-collapse: collapse; font-size: 14px; }
.shop-attrs th, .shop-attrs td { padding: 9px 4px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; }
.shop-attrs th { color: var(--fg-2); font-weight: 500; width: 38%; }
.shop-attrs .section-title { padding-inline: 0; }
.shop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.shop-cat, .shop-tagc { font-size: 12.5px; padding: 3px 10px; border-radius: 10px; background: var(--bg-2); color: var(--fg-2); }
.shop-cat { background: var(--accent-soft); color: var(--accent); }
.cart-var { font-size: 12.5px; color: var(--accent); margin-top: 1px; }
.pe-sec { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.pe-sec-h { display: flex; flex-direction: column; gap: 2px; }
.pe-sec-h span { font-size: 12.5px; color: var(--fg-2); }
.pe-row { display: flex; gap: 8px; align-items: center; }
.pe-row > *:not(button) { flex: 1; min-width: 0; }
.pe-row input, .pe-bulk input, .pe-var-f input, .chip-in input, .pe-vimg { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14.5px; }
.pe-attrs, .pe-opts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.pe-attrs > .btn, .pe-opts > .btn { align-self: flex-start; }
.pe-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--bg-2); }
.dl-wrap { min-width: 0; }
.chip-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); cursor: text; min-height: 44px; }
.chip-in input { flex: 1; min-width: 120px; border: 0 !important; padding: 6px !important; background: transparent !important; }
.chip-in.ro { cursor: default; margin: 4px 0 12px; }
.chip-v { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13.5px; }
.chip-v button { width: 20px; height: 20px; border-radius: 50%; color: inherit; font-size: 16px; line-height: 1; }
.chip-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip-sug:empty { display: none; }
.pe-vars .section-title { padding-inline: 0; }
.pe-bulk { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; margin-bottom: 6px; }
.pe-var { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; }
.pe-var.off { opacity: .55; }
.pe-var-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pe-var-f { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; }
.pe-var-f label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--fg-2); }
.pe-cat .form-pad b { display: inline-block; margin-top: 10px; font-size: 14px; }
@media (max-width: 420px) { .pe-bulk { grid-template-columns: 1fr 1fr; } }
.addr-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin: 0 0 8px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; }
.page .scroll > .addr-opt { margin: 0 16px 8px; }
.addr-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.addr-opt input[type=radio] { margin-top: 4px; accent-color: var(--accent); }
.addr-opt .muted { font-size: 13px; }
.addr-t { font-size: 13.5px; line-height: 1.7; margin-top: 2px; }
.addr-def { font-size: 11px; font-weight: 600; margin-inline-start: 8px; padding: 1px 7px; border-radius: 8px; background: var(--accent); color: #fff; }
.addr-form { margin-top: 10px; }

/* media is shown, not handed out: no long-press «download / open in new tab» on pictures and videos */
img, video, .shop-img, .shop-hero, .shop-thumb, .media, .pv-img, .sv-media { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.ct-onb .ct-onb-b { text-align: center; padding-top: 8px; }
.ct-onb-ic { font-size: 54px; line-height: 1.2; }
.ct-onb h3 { margin: 8px 0 6px; font-size: 19px; }
.ct-onb p { line-height: 1.9; margin: 0 0 10px; }
.ct-onb-n { font-size: 12.5px; line-height: 1.8; margin-top: 6px; }
.ct-onb .actions { justify-content: center; }
.ct-onb .actions .btn:last-child { background: var(--accent); color: #fff; padding: 0 22px; }

/* v0.8.3 */
.sp-grid > .sp-empty { grid-column: 1 / -1; }
.sp-empty .btn { white-space: nowrap; }

/* v0.8.3 — medication & health companion */
.px { padding-bottom: 24px; }
.px-tabs { margin: 10px 16px 6px; }
.px-week { display: flex; gap: 4px; padding: 8px 12px 4px; }
.px-wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; border-radius: 14px; color: var(--fg-2); }
.px-wd b { font-size: 16px; color: var(--fg); }
.px-wd small { font-size: 11.5px; }
.px-wd.today b { color: var(--accent); }
.px-wd.on { background: var(--accent); color: #fff; }
.px-wd.on b { color: #fff; }
.px-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.px-dot.full { background: #43a047; } .px-dot.part { background: #f2b01e; } .px-dot.miss { background: #e53935; }
.px-wd.on .px-dot.full, .px-wd.on .px-dot.part, .px-wd.on .px-dot.miss { box-shadow: 0 0 0 2px #fff; }
.px-sum { display: flex; align-items: center; gap: 14px; margin: 8px 16px; padding: 14px; border-radius: 18px; background: var(--bg-2); line-height: 1.8; }
.px-sum b { font-size: 16px; }
.px-ringbox { position: relative; flex: none; display: grid; place-items: center; }
.px-ringbox svg { position: absolute; inset: 0; }
.px-ringbox b { font-size: 15px; position: relative; }
.px-ring circle { fill: none; stroke-width: 8; }
.px-ring .bg { stroke: var(--border); } .px-ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray .4s; }
.px-alert { display: flex; align-items: center; gap: 12px; margin: 8px 16px; padding: 12px 14px; border-radius: 16px; background: rgba(242,176,30,.13); line-height: 1.7; cursor: default; }
.px-alert.blue { background: var(--accent-soft); cursor: pointer; }
.px-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--mc, var(--accent)) 16%, transparent); }
.px-ic.sm { width: 36px; height: 36px; font-size: 19px; border-radius: 11px; }
.px-check { margin: 8px 16px; padding: 12px 14px; border-radius: 16px; background: var(--bg-2); text-align: center; }
.px-moods { display: flex; justify-content: space-between; gap: 4px; margin-top: 8px; }
.px-moods button { flex: 1; font-size: 28px; padding: 6px 0; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.px-moods button:hover { background: var(--hover); }
.px-moods.big button small { font-size: 11.5px; color: var(--fg-2); }
.px-moods.big button.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.px-time { padding: 14px 20px 2px; font-weight: 800; color: var(--fg-2); font-size: 13px; letter-spacing: .5px; }
.px-dose { display: flex; align-items: center; gap: 12px; margin: 6px 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg-2); border-inline-start: 4px solid var(--mc, var(--accent)); line-height: 1.6; }
.px-dose > .grow { min-width: 0; cursor: pointer; }
.px-dose b small { font-weight: 500; color: var(--fg-2); }
.px-dose.taken { opacity: .72; } .px-dose.skipped { opacity: .55; }
.px-dose.late { box-shadow: inset 0 0 0 1.5px rgba(229,57,53,.5); }
.px-ok { color: #43a047; font-size: 12.5px; font-weight: 600; }
.px-late { color: var(--danger); font-size: 12.5px; font-weight: 600; }
.px-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.px-acts .btn, .px-dose > .btn { white-space: nowrap; }
.px-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 28px; color: var(--fg-2); line-height: 1.9; }
.px-empty .e { font-size: 46px; } .px-empty b { color: var(--fg); font-size: 16px; }
.px-med { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; line-height: 1.7; }
.px-med:hover { background: var(--hover); }
.px-med.off { opacity: .6; }
.px-med .grow { min-width: 0; }
.px-med b small { font-weight: 500; color: var(--fg-2); }
.px-chev { width: 18px; height: 18px; color: var(--fg-2); transform: scaleX(-1); flex: none; }
.px-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.px-tags span { font-size: 11.5px; padding: 0 8px; border-radius: 8px; background: var(--hover); color: var(--fg-2); }
.px-tags span.warn { background: rgba(229,57,53,.12); color: var(--danger); }
.px-addrow { margin: 4px 12px; }
.px-off summary { padding: 10px 16px; color: var(--fg-2); cursor: pointer; font-size: 14px; }
.px-inl { display: flex; align-items: center; gap: 8px; }
.px-tin { border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; background: var(--bg); color: var(--fg); font: inherit; direction: ltr; }
.px-buddy { margin: 8px 16px; padding: 12px 14px; border-radius: 16px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.px-bh, .px-bu { display: flex; gap: 12px; align-items: center; width: 100%; line-height: 1.7; }
.px-pick { max-height: 300px; overflow: auto; margin: 8px 0; display: flex; flex-direction: column; }
.px-pick .pick-item { text-align: start; width: 100%; border-radius: 10px; }
.px-pick .pick-item.on { background: var(--accent-soft); }
.px-modal input:not([type=checkbox]), .px-pick + * select { width: 100%; }
.px-edit { padding-top: 6px; }
.px-card { margin: 10px 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.px-card .field { margin: 0; }
.px-lbl { font-size: 13px; font-weight: 700; color: var(--fg-2); }
.px-drow { display: flex; align-items: center; gap: 8px; }
.px-drow input[type=time] { border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; background: var(--bg); color: var(--fg); font: inherit; direction: ltr; }
.px-q { width: 64px; text-align: center; border: 1px solid var(--border); border-radius: 10px; padding: 6px; background: var(--bg); color: var(--fg); font: inherit; }
.px-foot { display: flex; flex-direction: column; gap: 8px; margin: 14px 12px; }
.px-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 4px 12px; }
.px-mt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 16px; background: var(--bg-2); text-align: start; min-height: 96px; position: relative; overflow: hidden; }
.px-mt.add { align-items: center; justify-content: center; color: var(--accent); border: 2px dashed var(--border); background: none; }
.px-mt-h { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.px-mt-h span { font-size: 20px; }
.px-mt-v b { font-size: 20px; } .px-mt-v small { color: var(--fg-2); }
.px-spark { position: absolute; bottom: 6px; left: 8px; width: 46%; height: 26px; }
.px-spark path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.px-mhead { display: flex; align-items: center; gap: 12px; }
.px-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.px-stats div { background: var(--bg); border-radius: 12px; padding: 8px 4px; display: flex; flex-direction: column; }
.px-stats b { font-size: 16px; } .px-stats small { font-size: 11px; color: var(--fg-2); }
.px-chart svg { width: 100%; height: 150px; direction: ltr; }
.px-chart text { fill: var(--fg-2); }
.px-vals { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.px-big { width: 110px !important; font-size: 26px !important; text-align: center; font-weight: 700; border: 0; border-bottom: 2px solid var(--accent); background: none; color: var(--fg); padding: 4px; direction: ltr; }
.px-sl { font-size: 26px; color: var(--fg-2); }
.chip.sm { font-size: 11px; padding: 0 8px; margin-inline-start: 6px; }
.px-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.px-btns .btn { flex: 1; min-width: 140px; }
.px-rep { margin: 10px 12px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.px-rep .hr { padding: 16px 14px; font-size: 13px; }
.px-print { position: fixed; width: 0; height: 0; border: 0; left: -10px; top: -10px; }
.px-link { padding: 10px; border-radius: 10px; background: var(--bg-2); word-break: break-all; margin: 10px 0 6px; font-size: 14px; }
.px-card textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--bg); color: var(--fg); font: inherit; resize: vertical; }
.px-big::placeholder { font-size: 14px; font-weight: 500; }
.px-v { unicode-bidi: isolate; direction: ltr; }
/* v0.8.3 — @mentions and linked-system tasks in the calendar */
.mn-wrap { position: relative; }
.mn-pop { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; background: var(--bg); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 4px; max-height: 260px; overflow: auto; }
.mn-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; text-align: start; }
.mn-item.on, .mn-item:hover { background: var(--hover); }
.mn-item small { color: var(--fg-2); }
.mn-chip { display: inline-flex; align-items: center; gap: 4px; }
.mn-chip button { color: inherit; opacity: .8; margin-inline-start: 2px; }
.cdots i.tk { border-radius: 2px; }
.cdots i.tk.done { opacity: .45; }
.ag-task .ag-time { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; }
.ag-task .ag-time small { font-size: 11px; color: var(--fg-2); white-space: nowrap; }
.ag-task.done b { text-decoration: line-through; opacity: .7; }
.evd-notes a { color: var(--accent); }
a.pick-item { color: inherit; text-decoration: none; }