:root:not([data-theme="light"]) {
  --bg:#111720; --s1:#192230; --s2:#212d3c; --card:var(--s1);
  --line:#324055; --line2:#465873; --ink:#eef3fa; --mute:#aab9cb;
  --surface-tint:#202d3e; --ind:#83bdff; --mint-soft:#203751;
}
:root[data-theme="light"] {
  --bg:#edf1f6; --s1:#fbfcfe; --s2:#e8eef6; --card:var(--s1);
  --line:#d2dce8; --line2:#aabbd0; --ink:#172639; --mute:#4e627a;
  --surface-tint:#e6eef9; --ind:#195cae; --mint-soft:#dceafb;
}
:root .in { --shell-nav:190px; --shell-rail:270px; --shell-header:64px; }
:root .in main { max-width:1640px; padding:0 20px 28px; }
:root .in section#app {
  display:grid; grid-template-columns:var(--shell-nav) minmax(0,1fr) var(--shell-rail);
  gap:20px; align-items:start;
}
:root .in > header {
  position:sticky; top:0; z-index:50; margin:0; max-width:none; width:100%;
  height:var(--shell-header); min-height:var(--shell-header);
  padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));
  background:var(--s1)!important; border-bottom:1px solid var(--line);
}
:root .in > header .brand-wordmark { display:flex; width:114px; align-items:center; margin-right:auto; }
:root .in > header .brand-wordmark img { width:110px; height:auto; }
:root[data-theme="light"] .in > header .brand-wordmark img { filter:brightness(0) saturate(100%) opacity(.84); }
:root .in #side {
  top:calc(var(--shell-header) + 16px); margin:16px 0 0; min-height:0; padding:12px;
  background:var(--s1)!important; border:1px solid var(--line); border-radius:14px;
  max-height:calc(100dvh - var(--shell-header) - 30px); overflow:auto;
}
:root .in #side .sidebar-brand, :root .sidebar-signoff { display:none; }
:root .in #side .tabs { gap:4px; }
:root .in #side .tabs button { color:var(--ink)!important; min-height:44px; }
:root .in #side .tabs button .ico { color:inherit!important; }
:root .in #side .tabs button.on {
  background:#245da4!important; color:#fff!important; border-color:#326db5!important; box-shadow:none!important;
}
:root .in #side .tabs button:last-child:not(.on) {
  background:var(--surface-tint)!important; color:var(--ink)!important; border-color:var(--line);
}
#mobileNavToggle { display:none; }
:root .in #center, :root .in #right { padding-top:16px; }
:root .in #view { overflow-wrap:anywhere; }
:root .in footer { margin:0; }
:root .clash-dashboard { gap:16px; }
:root .welcome-banner, :root[data-theme="light"] .welcome-banner {
  background:var(--surface-tint)!important; border-color:var(--line); min-height:0;
  box-shadow:none; padding:22px;
}
:root .welcome-banner > .mountain-art { display:none; }
:root .clash-dashboard .clash-mode-card, :root[data-theme="light"] .clash-dashboard .clash-mode-card {
  background:var(--s1)!important; border-color:var(--line); box-shadow:none;
}
:root .clash-dashboard .clash-mode-card .ic { background:var(--surface-tint)!important; box-shadow:none; color:var(--ind); }
:root .clash-dashboard .clash-mode-card .ic .ico { color:var(--ind)!important; filter:none; }
:root .clash-dashboard .clash-mode-card .pri { background:#245da4; color:white; }
:root .subject-tiles .tile { white-space:normal; min-height:44px; max-width:100%; }
:root .subject-tiles .tile .subject-symbol { display:inline-grid; }
:root .online-player-list, :root .all-players { display:grid; grid-template-columns:minmax(0,1fr)!important; }
:root .online-player {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; text-align:left;
  gap:12px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px;
}
:root .online-player .av { margin:0; }
:root .online-player-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.meath-section-intro {
  display:flex; align-items:center; gap:16px; background:var(--surface-tint);
  border:1px solid var(--line); padding:22px; margin:0 0 16px; border-radius:14px;
}
.meath-section-intro > .ico { width:32px; height:32px; color:var(--ind); }
.meath-section-intro h2 { margin:0 0 4px; }
.meath-section-intro p { margin:0; color:var(--mute); }
.achievement-share {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,150px) auto;
  gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--line);
}
.achievement-share small { display:block; color:var(--mute); }
.achievement-share [role=status] { grid-column:1/-1; }
:root body[data-page="feed"] .mx-post { padding:16px; margin:10px 0; border:1px solid var(--line); border-radius:12px; background:var(--s2); }
@media(max-width:1190px) {
  :root .in section#app { grid-template-columns:var(--shell-nav) minmax(0,1fr); }
  :root .in #center { grid-column:2; }
  :root .in #right { display:none; }
}
@media(max-width:780px) {
  :root .in main { padding:0 12px 24px; }
  :root .in section#app { display:block; }
  :root .in > header { gap:6px; }
  :root .in > header .brand-wordmark { width:72px; }
  :root .in > header .brand-wordmark img { width:72px; }
  :root .in > header button { min-width:36px; padding-inline:7px; }
  :root .in #mobileNavToggle { display:inline-grid; place-items:center; }
  :root .in > header #chips { display:none; }
  :root .in #side { display:none; }
  :root .in.navigation-open #side {
    position:fixed; display:block; top:calc(var(--shell-header) + 8px); left:12px;
    width:min(280px,calc(100vw - 24px)); z-index:49; margin:0; box-shadow:0 8px 28px #0003;
  }
  :root .in #side .tabs { position:static; display:grid; padding:0; border:0; overflow:visible; }
  :root .in #side .tabs button { flex-direction:row; gap:10px; min-height:44px; font-size:14px!important; }
  :root .online-player { grid-template-columns:auto minmax(0,1fr); }
  :root .online-player-actions { grid-column:2; justify-content:flex-start; }
  .achievement-share { grid-template-columns:minmax(0,1fr) auto; }
  .achievement-share > div { grid-column:1/-1; }
}
.chat-workspace { display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,2.2fr); gap:16px; margin-top:16px; }
.chat-contacts { display:grid; align-content:start; gap:7px; }
.chat-contacts button { text-align:left; white-space:normal; overflow-wrap:anywhere; }
#mxChatPane { min-width:0; border:1px solid var(--line); border-radius:12px; padding:14px; }
#mxChatPane:empty { display:none; }
:root .mx-message { background:var(--s2); }
:root .mx-message.mine { background:var(--mint-soft); }
:root .manjil-head { background:var(--surface-tint); box-shadow:none; }
:root .meath-plan-grid .plan-current { border-color:var(--ind); }
:root .plan-benefits { margin-top:8px; }
:root .profile-public-card .profile-cover { background:var(--surface-tint); color:var(--ink); }
@media(max-width:600px) { .chat-workspace { grid-template-columns:1fr; } .chat-contacts { grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)); } }
#meathSearch { display:none; }
:root .in #meathSearch { display:inline-flex; align-items:center; justify-content:space-between; gap:16px; min-width:180px; margin-right:auto; }
:root .in > header .brand-wordmark { margin-right:12px; }
#meathSearch kbd { font:inherit; color:var(--mute); font-size:11px; }
.page-search-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.page-search-results button { text-align:left; }
@media(max-width:780px) { :root .in #meathSearch { min-width:0; font-size:12px; margin-right:auto; } #meathSearch kbd { display:none; } :root .in > header .brand-wordmark { margin-right:0; } }
@media(max-width:360px) { :root .in #meathSearch { display:none; } :root .in > header .brand-wordmark { margin-right:auto; } }
.achievement-author { display:flex; align-items:center; gap:10px; }
:root .mx-post .achievement-author + h4 { color:var(--ink); margin:12px 0 4px; }
#avatarCanvas { display:block; max-width:100%; height:auto; margin:0 auto 12px; border-radius:12px; }
#avatarCrop input[type="range"] { padding:0; }
.learner-cover { height:88px; border-radius:14px 14px 0 0; background:linear-gradient(105deg,var(--surface-tint),var(--s2)); }
.invite-row { padding:14px 0; border-top:1px solid var(--line); }
.invite-row p { margin:4px 0 10px; color:var(--mute); }
@media(max-width:520px) { :root .in #meathSearch { display:none; } #inviteInbox { font-size:11px; } }
.mentor-symbol { display:grid; place-items:center; width:68px; height:68px; flex:none; color:var(--ind); border:1px solid var(--line); border-radius:16px; background:var(--s1); }
.mentor-symbol .ico { width:32px; height:32px; }
.study-filter-row { display:flex; align-items:end; flex-wrap:wrap; gap:10px; padding:14px 0; }
.study-filter-row label { margin:0; min-width:min(100%,130px); flex:1; }
.study-filter-row button { margin:0; }
body[data-page="mist"] #mxNotebookEntries .mx-post { border:1px solid var(--line); padding:16px; margin:10px 0; border-radius:12px; background:var(--s2); }
body[data-page="mist"] #mxNotebookEntries h3 { margin:8px 0; }
body[data-page="mist"] #mxNotebookEntries button { margin:8px 6px 0 0; }
body[data-page="upgrade"] .plan-card { border:1px solid var(--line); }
body[data-page="upgrade"] .plan-card h3 { margin:8px 0; }
body[data-page="upgrade"] .plan-price { padding-bottom:14px; border-bottom:1px solid var(--line); }
#inviteInbox .ico { vertical-align:middle; }
@media(max-width:780px) { #inviteInbox .invite-label { display:none; } }
@media(max-width:360px) { :root .in > header { gap:4px; padding-inline:8px; } :root .in > header .brand-wordmark, :root .in > header .brand-wordmark img { width:64px; } }