/* theme.css - Radio Server: glassy app theme + responsive nav + app layout.
 * Loads AFTER app.css. Auto light/dark (theme.js sets data-theme), presets,
 * custom colours, plus app-style components and overflow fixes.
 */

:root {
  --accent: #7c5cff; --accent-2: #4aa8ff;
  --bg-1:#eef1ff; --bg-2:#fde9f3; --bg-3:#e6fbff;
  --text:#1b1c2a; --muted:#5b5e72;
  --surface:rgba(255,255,255,.6); --surface-2:rgba(255,255,255,.78);
  --border:rgba(120,120,160,.18); --ring:rgba(124,92,255,.35);
  --shadow:0 10px 30px rgba(31,38,90,.12);
  --radius:18px; --blur:14px;
}
html[data-theme="dark"]{
  --bg-1:#0c0e1a; --bg-2:#141325; --bg-3:#0a1622;
  --text:#e7e9f5; --muted:#9aa0bd;
  --surface:rgba(28,30,52,.55); --surface-2:rgba(34,36,62,.72);
  --border:rgba(255,255,255,.08); --ring:rgba(124,92,255,.5);
  --shadow:0 14px 40px rgba(0,0,0,.45);
}
html[data-preset="ocean"]  { --accent:#2bb6ff; --accent-2:#27e0c4; }
html[data-preset="sunset"] { --accent:#ff6b6b; --accent-2:#ff9f43; }
html[data-preset="forest"] { --accent:#36c980; --accent-2:#8fd14f; }
html[data-preset="grape"]  { --accent:#a06bff; --accent-2:#ff6bd6; }
html[data-preset="mono"]   { --accent:#7d8597; --accent-2:#aab2c5; }

/* ---------- base ---------- */
html, body { overflow-x: hidden; }
body {
  color: var(--text) !important;
  background:
    radial-gradient(1200px 800px at 8% -10%, var(--bg-2), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, var(--bg-3), transparent 55%),
    var(--bg-1) !important;
  background-attachment: fixed; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
#rs-bg { position: fixed; inset: 0; width:100%; height:100%; z-index:-1; pointer-events:none; }
a { color: var(--accent); }
.container { max-width: 1080px; margin: 20px auto 64px; padding: 0 16px; }
h1 { font-size: clamp(20px, 4vw, 26px); }

/* ---------- glass surfaces ---------- */
.card, .mo-card, .speech-tile, .mo-hero, .dev-card, .panel, .tile, #usage_card {
  background: var(--surface) !important;
  backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow); border-radius: var(--radius) !important;
}
.card, .mo-card, .mo-hero { padding: 18px 20px; }
.mo-hero h1, .page-title {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- TOP BAR ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="dark"] .topbar { background: rgba(15,17,33,.94) !important; }
.brand { font-weight: 800; font-size: 18px; color: var(--text) !important; text-decoration: none; }
.grow { flex: 1 1 auto; }
.badge { background: var(--accent-2); color:#fff; border-radius: 10px;
  padding: 1px 7px; font-size: 11px; font-weight: 700; margin-left: 4px; }
.rs-xp { display:inline-block; padding:.25em .7em; border-radius:1em; font-weight:700;
  font-size:.85em; color:#fff; text-decoration:none;
  background: linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 6px 16px var(--ring); }

/* hamburger (mobile only) */
.rs-burger { display:grid; width:42px; height:42px; border-radius:12px; cursor:pointer;
  place-items:center; border:1px solid var(--border); background:var(--surface); color:var(--text); }
.rs-burger span, .rs-burger span::before, .rs-burger span::after{
  content:""; display:block; width:18px; height:2px; border-radius:2px; background:currentColor; position:relative; }
.rs-burger span::before{ position:absolute; top:-6px; } .rs-burger span::after{ position:absolute; top:6px; }
.rs-backdrop{ position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .25s; }
.rs-backdrop.open{ opacity:1; pointer-events:auto; }

/* ---------- NAV: desktop = inline dropdowns ---------- */
.rs-nav { display:none; }  /* desktop dropdowns removed - burger menu is used everywhere */
.rs-nav > a, .navgroup > summary {
  color: var(--text); text-decoration:none; font-size:14px; font-weight:600;
  padding: 9px 12px; border-radius: 11px; cursor:pointer; white-space:nowrap; list-style:none;
}
.rs-nav > a:hover, .navgroup > summary:hover { background: var(--surface); }
.navgroup { position: relative; }
.navgroup > summary::-webkit-details-marker { display:none; }
.navgroup > summary::after { content:" \25BE"; opacity:.6; font-size:11px; }
.navgroup .navlinks {
  position:absolute; top:calc(100% + 6px); left:0; min-width:190px;
  display:none; flex-direction:column; padding:8px; gap:2px;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow);
  backdrop-filter: blur(calc(var(--blur)+4px));
}
.navgroup:hover .navlinks, .navgroup:focus-within .navlinks { display:flex; }
.navlinks a { color:var(--text); text-decoration:none; padding:10px 12px; border-radius:10px; font-size:14px; }
.navlinks a:hover { background: var(--surface); }

/* ---------- NAV: mobile = full-screen overlay menu ---------- */

/* animated hamburger -> X */
.rs-burger span, .rs-burger span::before, .rs-burger span::after { transition: transform .25s, opacity .2s; }
.rs-burger.open span { background: transparent; }
.rs-burger.open span::before { transform: translateY(6px) rotate(45deg); }
.rs-burger.open span::after  { transform: translateY(-6px) rotate(-45deg); }

/* full-screen overlay (body-level; can never be trapped by a filtered ancestor) */
.rs-mobile-menu {
  position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 600px at 100% 0%, var(--bg-3), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, var(--bg-2), transparent 55%),
    var(--bg-1);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  overflow-y: auto; padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
}
.rs-mobile-menu.open { opacity: 1; pointer-events: auto; transform: none; }
.rs-mm-head { display:flex; align-items:center; justify-content:space-between; padding:6px 4px 12px;
  position:sticky; top:0; }
.rs-mm-head .brand { font-weight:800; font-size:18px; color:var(--text); text-decoration:none; }
.rs-mm-close { width:42px; height:42px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:18px; cursor:pointer; }
.rs-mm-group { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  font-weight:800; margin:16px 8px 8px; }
.rs-mm-link { display:flex; align-items:center; gap:14px; padding:14px 16px; margin:6px 0;
  border-radius:16px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); text-decoration:none; font-size:16px; font-weight:600; }
.rs-mm-link:active { transform: scale(.99); }
.rs-mm-link .mmic { width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid;
  place-items:center; font-size:20px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.rs-mm-link.c2 .mmic{background:linear-gradient(135deg,#ff6b6b,#ff9f43)}
.rs-mm-link.c3 .mmic{background:linear-gradient(135deg,#36c980,#8fd14f)}
.rs-mm-link.c4 .mmic{background:linear-gradient(135deg,#ff6bd6,#a06bff)}
.rs-mm-link.c5 .mmic{background:linear-gradient(135deg,#2bb6ff,#27e0c4)}
body.rs-noscroll { overflow: hidden; }

/* ---------- forms ---------- */
input, select, textarea {
  background: var(--surface-2) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
  padding: 10px 12px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline:none; box-shadow: 0 0 0 3px var(--ring); }
label { color: var(--muted); }

/* ---------- buttons (bigger, friendlier) ---------- */
button, .btn, .btn-big, .small-btn, .mo-tab {
  border-radius: 12px !important; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 600;
  min-height: 40px; padding: 9px 14px; transition: transform .08s, box-shadow .15s, filter .15s;
}
button:hover { filter: brightness(1.05); }
button:active { transform: translateY(1px); }
.btn-big, button.primary, .small-btn.primary, button.warn, .primary, a.primary {
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  color:#fff !important; border:none !important; box-shadow:0 8px 20px var(--ring); }
button.danger, button.bad { background: #ef5575 !important; color:#fff !important; border:none !important; }
.mo-tab.active { background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important; color:#fff !important; border:none !important; }

/* ---------- overflow / layout fixes (the dashboard bug etc.) ---------- */
.row { flex-wrap: wrap; min-width: 0; }
.row > * { min-width: 0; }
.grow { min-width: 0; }
.dev-card { flex-wrap: wrap; gap: 12px; }
.dev-card .info, .dev-card .controls { min-width: 0; }
.dev-card select, .card select, .dev-card .grow { width: 100%; max-width: 100%; }
table { display: block; overflow-x: auto; }   /* tables scroll inside their card, not the page */

/* ---------- app components: icon tiles + grids (Duolingo-style) ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.tile { display:flex; flex-direction:column; gap:10px; padding:16px; text-decoration:none;
  color: var(--text); align-items:flex-start; transition: transform .12s, box-shadow .15s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.tile .ic, .icon-badge {
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;
  box-shadow: 0 8px 20px var(--ring); }
.tile .t { font-weight: 700; }
.tile .d { color: var(--muted); font-size: 13px; }
/* colour-coded variants for variety */
.tile.c1 .ic{background:linear-gradient(135deg,#7c5cff,#4aa8ff)}
.tile.c2 .ic{background:linear-gradient(135deg,#ff6b6b,#ff9f43)}
.tile.c3 .ic{background:linear-gradient(135deg,#36c980,#8fd14f)}
.tile.c4 .ic{background:linear-gradient(135deg,#ff6bd6,#a06bff)}
.tile.c5 .ic{background:linear-gradient(135deg,#2bb6ff,#27e0c4)}

/* page header row */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom: 14px; }

/* ---------- floating theme control (theme.js) ---------- */
.rs-theme-fab { position:fixed; right:16px; bottom:16px; z-index:9998; width:50px; height:50px;
  border-radius:50%; display:grid; place-items:center; font-size:20px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); box-shadow:var(--shadow);
  backdrop-filter: blur(var(--blur)); }
.rs-theme-panel { position:fixed; right:16px; bottom:76px; z-index:9999; width:min(320px,calc(100vw - 32px));
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(var(--blur)); padding:14px; display:none; }
.rs-theme-panel.open { display:block; }
.rs-theme-panel h4 { margin:4px 0 8px; font-size:13px; }
.rs-seg { display:flex; gap:6px; margin-bottom:12px; }
.rs-seg button { flex:1; }
.rs-seg button.on { background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border:none; }
.rs-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.rs-swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid var(--border); }
.rs-swatch.on { outline:2px solid var(--accent); outline-offset:2px; }
.rs-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0; }
.rs-row input[type="color"] { width:42px; height:30px; padding:0; border-radius:8px; }
.rs-actions { display:flex; gap:8px; margin-top:10px; } .rs-actions button { flex:1; }

/* ---------- mobile bottom tab bar (Duolingo-style) ---------- */
.rs-tabs { display: none; }
@media (max-width: 980px) {
  .rs-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 57;
    justify-content: space-around; align-items: center; gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface-2); border-top: 1px solid var(--border);
    backdrop-filter: blur(calc(var(--blur) + 4px));
    -webkit-backdrop-filter: blur(calc(var(--blur) + 4px));
  }
  .rs-tabs a, .rs-tabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent; border: none; box-shadow: none; min-height: auto;
    padding: 6px 0; color: var(--muted); font-size: 11px; font-weight: 600;
    text-decoration: none; cursor: pointer;
  }
  .rs-tabs .ti { font-size: 21px; line-height: 1; }
  .rs-tabs a.active { color: var(--accent); }
  .rs-tabs a.active .ti { filter: drop-shadow(0 4px 10px var(--ring)); }
  .container { padding-bottom: 86px; }   /* clear the bar */
  .rs-theme-fab { bottom: 84px; }        /* lift FAB above the tabs */
  .rs-theme-panel { bottom: 144px; }
}

/* ---------- reference layout: browse list (Image 1) ---------- */
.section-label { color: var(--accent); font-weight: 800; margin: 18px 4px 10px; font-size: .95em; }
.browse-list { display: flex; flex-direction: column; gap: 10px; }
.browse-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: transform .1s, box-shadow .15s;
}
.browse-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.browse-row .bic { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.browse-row .btext { flex: 1; min-width: 0; }
.browse-row .btext .bt { font-weight: 700; }
.browse-row .btext .bs { color: var(--muted); font-size: .82em; }
.browse-row .bcount { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: 1em; padding: .2em .7em; font-weight: 700; font-size: .85em; color: var(--muted); }
.browse-row.c1 .bic{background:linear-gradient(135deg,#7c5cff,#4aa8ff)}
.browse-row.c2 .bic{background:linear-gradient(135deg,#ff6b6b,#ff9f43)}
.browse-row.c3 .bic{background:linear-gradient(135deg,#36c980,#8fd14f)}
.browse-row.c4 .bic{background:linear-gradient(135deg,#ff6bd6,#a06bff)}
.browse-row.c5 .bic{background:linear-gradient(135deg,#2bb6ff,#27e0c4)}

/* ---------- reference layout: artwork tile grid (Image 2) ---------- */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.art-tile { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px;
  border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer; transition: transform .12s, box-shadow .15s; }
.art-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.18); }
.art-tile .art { aspect-ratio: 1 / 1; max-height: 190px; border-radius: 14px; overflow: hidden; display: grid;
  place-items: center; color: #fff; font-weight: 800; font-size: 1.7em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.art-tile .art img { width: 100%; height: 100%; object-fit: cover; }
.art-tile .art-name { font-weight: 700; font-size: .95em; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-tile .art-sub { color: var(--muted); font-size: .78em; }
.art-tile .art-actions { display: flex; gap: 6px; margin-top: 2px; }
.art-tile .art-actions button, .art-tile .art-actions a { flex: 1; min-height: 32px; padding: 7px; font-size: 12px;
  display:grid; place-items:center; border-radius:10px; text-decoration:none; text-align:center; }

/* locked content (orgs) */
.art-tile.locked .art { filter: grayscale(.4) brightness(.8); }
.art-tile.locked .art-sub { color: var(--accent-2); font-weight: 600; }
.lock-row { display:flex; align-items:center; gap:6px; font-size:.78em; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:.8em; padding:.18em .6em; }

/* ---------- compact / customizable artwork grid density ---------- */
.art-grid { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
.art-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.art-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.art-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.art-grid.cols-6 { grid-template-columns: repeat(6,1fr); }
.art-grid.cols-3 .art-tile, .art-grid.cols-4 .art-tile, .art-grid.cols-6 .art-tile { padding:7px; gap:6px; }
.art-grid.cols-3 .art-name, .art-grid.cols-4 .art-name, .art-grid.cols-6 .art-name { font-size:.82em; }
.art-grid.cols-4 .art-sub, .art-grid.cols-6 .art-sub { display:none; }
/* dense grids: tap the artwork to play; hide the button row to fit more */
.art-grid .art { cursor: pointer; position: relative; }
.art-grid.cols-4 .art-actions, .art-grid.cols-6 .art-actions { display:none; }
.art-grid.cols-3 .art-actions button { font-size:11px; padding:4px; min-height:28px; }
.cols-seg { display:inline-flex; gap:4px; }
.cols-seg button { min-height:34px; padding:5px 10px; font-weight:700; }
.cols-seg button.on { background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border:none; }

/* ---------- dashboard app-launcher grid (all menu icons) ---------- */
.launch-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:12px; }
.launch-tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px;
  border-radius:18px; background:var(--surface); border:1px solid var(--border);
  text-decoration:none; color:var(--text); text-align:center; transition:transform .12s, box-shadow .15s; }
.launch-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.launch-tile .ic { width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  font-size:24px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.launch-tile .ll { font-size:12px; font-weight:600; line-height:1.2; }
.launch-tile.c2 .ic{background:linear-gradient(135deg,#ff6b6b,#ff9f43)}
.launch-tile.c3 .ic{background:linear-gradient(135deg,#36c980,#8fd14f)}
.launch-tile.c4 .ic{background:linear-gradient(135deg,#ff6bd6,#a06bff)}
.launch-tile.c5 .ic{background:linear-gradient(135deg,#2bb6ff,#27e0c4)}

/* ---------- nicer radio player (dashboard device card) ---------- */
.rp { display:flex; align-items:center; gap:14px; }
.rp .rp-play { width:54px; height:54px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  font-size:20px; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 8px 22px var(--ring); }
.rp .rp-play:active { transform:scale(.96); }
.rp .rp-mid { flex:1; min-width:0; }
.rp .rp-now { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp .rp-sub { font-size:.8em; color:var(--muted); }
.rp-vol { display:flex; align-items:center; gap:8px; margin-top:12px; }
.rp-vol input[type=range]{ flex:1; accent-color:var(--accent); }

/* ---------- customizable bottom bar sheet ---------- */
.rs-cust { position:fixed; inset:0; z-index:9500; background:rgba(0,0,0,.5); display:none; align-items:flex-end; }
.rs-cust.open { display:flex; }
.rs-cust .sheet { background:var(--surface-2); border:1px solid var(--border);
  border-radius:20px 20px 0 0; width:100%; max-height:82vh; overflow:auto;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
.rs-cust .sheet h3 { margin:0 0 4px; }
.rs-cust .sheet { max-height:88vh; display:flex; flex-direction:column; }
#rsCustOpts { max-height:62vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.rs-cust .opt { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  border:1px solid var(--border); margin:8px 0; background:var(--surface); cursor:pointer; }
.rs-cust .opt .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:18px;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex:0 0 auto; }
.rs-cust .opt.sel { outline:2px solid var(--accent); }
.rs-cust .opt .chk { margin-left:auto; font-weight:800; color:var(--accent); }

/* ---------- legacy page polish: lifts not-yet-converted pages app-wide ----------
   Scoped so it never fights the converted pages (.page-title, .art-*, .tile, .rs-*). */
.container > h1 {
  font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 800; margin: 4px 0 14px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.container > h2 { font-size: 1.15rem; margin: 18px 0 10px; }
fieldset { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin: 12px 0; background: var(--surface); }
legend { padding: 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: 12px; color: var(--muted); }
thead th { text-align: left; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); padding: 8px 10px; white-space: nowrap; }
tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.empty { text-align: center; color: var(--muted); padding: 26px 16px; border: 1px dashed var(--border); border-radius: 14px; }
/* generic collapsibles match the app */
details > summary { cursor: pointer; }

/* ===== Friendly "Duolingo-style" components (leaderboards, friends, profile) ===== */
.lb-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:6px;}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;}
.lb-row + .lb-row{border-top:1px solid var(--border);}
.lb-row.me{background:linear-gradient(90deg,rgba(88,204,2,.16),transparent);}
.lb-rank{width:30px;text-align:center;font-weight:800;color:var(--muted);font-size:15px;flex:0 0 auto;}
.lb-rank.m1{color:#f5b800;} .lb-rank.m2{color:#9aa7b4;} .lb-rank.m3{color:#cd7f32;}
.av-circle{width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:18px;color:#fff;overflow:hidden;}
.av-circle img{width:100%;height:100%;object-fit:cover;}
.av-c1{background:#1cb0f6;} .av-c2{background:#ff9600;} .av-c3{background:#a560ff;}
.av-c4{background:#58cc02;} .av-c5{background:#ff4b4b;} .av-c6{background:#2b70c9;}
.av-lg{width:84px;height:84px;font-size:34px;}
.lb-main{flex:1 1 auto;min-width:0;}
.lb-name{font-weight:800;font-size:16px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.lb-val{flex:0 0 auto;font-weight:800;color:var(--muted);font-size:15px;}
.btn-cta{display:block;width:100%;border:none;border-radius:16px;padding:15px;font-weight:800;
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:#fff;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 4px 0 rgba(0,0,0,.18);}
.btn-cta:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.18);}
.feed-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:16px;margin-bottom:14px;}
.feed-main{flex:1 1 auto;min-width:0;}
.feed-head{display:flex;align-items:center;gap:10px;}
.feed-name{font-weight:800;}
.feed-time{font-size:12px;color:var(--muted);}
.feed-body{margin:8px 0 10px;font-size:16px;line-height:1.35;}
.like-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);
  background:var(--surface-2);border-radius:14px;padding:8px 14px;font-weight:700;cursor:pointer;}
.profile-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 0 4px;}
.profile-name{font-weight:800;font-size:1.5rem;}

/* row-card: friendly replacement for wide data tables on mobile */
.rowcard{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px 14px;margin-bottom:10px;}
.rowcard .rc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.rowcard .rc-title{font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.rowcard .rc-meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;}
.rowcard .rc-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}