/* Solid screen foundations with translucent interface surfaces. Media pixels stay untouched. */
:root {
  --accent:#b59aff; --accent-press:#9671e5; --accent-2:#b6e8ee; --muted:#b7b2c4;
  --line:rgba(255,255,255,.16); --surface:#201c30; --surface-2:#2a253d; --radius:18px;
  --screen-bg:#181526; --nav-fill:#231e36; --tile-fill:rgba(255,255,255,.075);
  --glass-fill:rgba(31,26,47,.68); --glass-line:rgba(255,255,255,.19);
  --glass-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.09);
}
body { background:var(--screen-bg); }
body[data-screen=home],body[data-screen=following],body[data-screen=post] { --screen-bg:#181526; --nav-fill:#28203e; }
body[data-screen=explore],body[data-screen=lesson] { --screen-bg:#102833; --nav-fill:#173644; }
body[data-screen=inbox],body[data-screen=messages],body[data-screen=chat] { --screen-bg:#241b31; --nav-fill:#33253e; }
body[data-screen=profile],body[data-screen=friends] { --screen-bg:#17263c; --nav-fill:#213550; }
body[data-screen=groups],body[data-screen=room] { --screen-bg:#142b29; --nav-fill:#1d3a36; }
body[data-screen=study],body[data-screen=challenge] { --screen-bg:#242033; --nav-fill:#322c45; }
body[data-screen=settings],body[data-screen=music] { --screen-bg:#1c2034; --nav-fill:#282e45; }
.app,#main,.page,.feed-page { background:transparent; }
/* Home, Explore and the other primary destinations have a steady solid-color base. */
.feed-page { background:var(--screen-bg); }
.rail-nav,.tabbar { background:var(--nav-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); }
.tabbar { border-radius:24px 24px 0 0; border-bottom:0; }
.tabbar>a { margin:4px 2px; height:calc(100% - 8px); border-radius:16px; transition:color .12s; }
.tabbar>a.active { background:#56427b; color:#fff; box-shadow:inset 0 1px 0 #ffffff26; }
.tabbar>a[data-tab=explore].active { background:#245465; }
.tabbar>a[data-tab=inbox].active { background:#634263; }
.tabbar>a[data-tab=profile].active { background:#345676; }
.rail-nav [data-nav].active { background:rgba(168,139,235,.22); border-radius:13px; }
.tabbar .tab-create { background:#a98af3; color:#171122; box-shadow:inset 0 1px 0 #ffffff45,0 3px 18px #8e66df25; }
/* A single transparent tile treatment is shared by lists, collections and social cards. */
.tile,.card-form,.settings .card-form,.study-card,.me-card,.group-card,.connection-row,.live-card,.intro-card,.challenge-card,.group-message,.conv,.notif,.person,.producer-output,.producer-mixer,.home-desk-scroll {
  background:var(--tile-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow);
}
.card-form,.me-card,.group-card,.group-message,.live-card,.intro-card,.producer-output,.producer-mixer { border-radius:20px; }
.connection-row { padding:14px; border-radius:18px; margin:10px 0; }
.conv,.notif { border-radius:16px; margin-block:6px; }
.person { border-radius:14px; }
.tile { border-radius:19px; overflow:hidden; }
.tile-media { background:rgba(255,255,255,.025); }
.tile .tile-title,.tile .tile-meta { padding-inline:10px; }
.tile .tile-meta { padding-bottom:10px; }
.settings-row { border-bottom-color:var(--glass-line); background:rgba(255,255,255,.025); }
.settings-row:hover,.person:hover,.conv:hover { background:rgba(255,255,255,.105); }
.sheet-panel,.welcome-card { background:var(--glass-fill); border:1px solid var(--glass-line); box-shadow:var(--glass-shadow); }
.sheet-head,.chat-head,.inbox-head,.sub-head,.profile-top { background:var(--nav-fill); border-bottom-color:var(--glass-line); }
.btn { border-radius:15px; }
.btn-primary { background:#b69afa; color:#171122; box-shadow:inset 0 1px 0 #ffffff30; }
.btn-primary:hover { background:#c6afff; }
.btn-ghost,.chip,.seg,.chat-intro .btn { border:1px solid #ffffff24; background:rgba(255,255,255,.055); }
.feed-top .icon-btn,.story-view-actions .btn,.story-view-head .icon-btn,.direct-tools>button,.direct-secondary-tools>button,.creator-camera-top .icon-btn {
  background:rgba(31,26,47,.52); border:1px solid #ffffff26; box-shadow:inset 0 1px 0 #ffffff18;
}
.story-caption.text-only { color:#fff; }
/* Blur belongs to a small, fixed layer, never every moving tile in a list. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .sheet-panel,.welcome-card { backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); }
  .feed-top .icon-btn,.story-view-actions .btn { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  :root { --tile-fill:#2b273b; --glass-fill:#242033; }
  .sheet-panel,.welcome-card,.feed-top .icon-btn,.story-view-actions .btn { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:#242033!important; }
  .direct-tools>button,.direct-secondary-tools>button,.creator-camera-top .icon-btn { background:#242033!important; }
}
html[data-transparency=reduce] { --tile-fill:#2b273b; --glass-fill:#242033; }
html[data-transparency=reduce] .sheet-panel,html[data-transparency=reduce] .welcome-card,html[data-transparency=reduce] .feed-top .icon-btn,html[data-transparency=reduce] .story-view-actions .btn {
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:#242033!important;
}
html[data-transparency=reduce] .direct-tools>button,html[data-transparency=reduce] .direct-secondary-tools>button { background:#242033!important; }
.feed-tabs { min-width:0; flex:1; justify-content:center; gap:12px; }
.feed-tabs a { font-size:14px; }
.feed-top-right { gap:0; }
.feed-top-right>a[aria-label=Search] { display:none; }
/* Touch tablets use the reel's swipe gesture; an overlaid desktop pager can cover the avatar. */
@media(max-width:1023px) and (pointer:coarse) {
  .feed-page>.pager { display:none; }
}
@media(max-width:350px) {
  .feed-top { padding-inline:4px; gap:0; }
  .feed-tabs { gap:7px; }
  .feed-tabs a { font-size:12px; }
  .feed-top .icon-btn { width:36px; min-width:36px; height:44px; }
  .connection-row { padding:12px; }
}