/* One visual language for Nilo's workspaces. All artwork here is drawn by CSS. */
body[data-view="dashboard"]:not([data-shell="listen"]) {
  --vr-canvas:#161b18;
  --vr-ink:#f0eee4;
  --vr-muted:#b7c0b5;
  --vr-rule:#49564a;
  --vr-accent:#dce7a7;
  background:var(--vr-canvas);
}
body[data-view="dashboard"]:not([data-shell="listen"]) .topbar {
  background:linear-gradient(155deg,#101612 20%,#19231b 100%);
  border-right-color:#374339;
}
body[data-view="dashboard"]:not([data-shell="listen"]) .topbar::after {
  content:""; position:absolute; inset:auto 0 100px; height:120px; z-index:-1;
  background:radial-gradient(circle,#afc18724 1px,transparent 1.6px) 0 0/15px 15px;
  mask-image:linear-gradient(to top,#000,transparent);
  pointer-events:none;
}
body[data-view="dashboard"]:not([data-shell="listen"]) .area-nav button.active,
body[data-view="dashboard"]:not([data-shell="listen"]) .area-nav button.active:hover { background:#273329; }
body[data-view="dashboard"]:not([data-shell="listen"]) .area-nav button.active::before { background:var(--vr-accent); }
body[data-view="dashboard"]:not([data-shell="listen"]) main { padding-inline:clamp(18px,2vw,36px); }
body[data-view="dashboard"]:not([data-shell="listen"]) .dashboard,
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-utility { max-width:none; }
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-utility { min-height:56px; margin-bottom:8px; border-bottom-color:#3c493e; }
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header {
  position:relative; isolation:isolate; align-items:center; min-height:98px;
  margin:0 0 14px; padding:12px 20px 16px 0; overflow:hidden;
  border-bottom:1px solid var(--vr-rule);
}
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header::before {
  content:""; position:absolute; inset:0 0 0 34%; z-index:-1;
  background:
    radial-gradient(circle,#c6d7a83b 1px,transparent 1.6px) 0 0/18px 18px,
    repeating-linear-gradient(135deg,transparent 0 76px,#d5e6b217 77px 78px,transparent 79px 116px);
  mask-image:linear-gradient(90deg,transparent 0%,#000 76%);
  pointer-events:none;
  animation:nilo-pattern-breathe 24s ease-in-out infinite alternate;
}
@keyframes nilo-pattern-breathe { from { opacity:.5; transform:translateX(0); } to { opacity:.9; transform:translateX(12px); } }
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header::after {
  content:""; position:absolute; right:12%; top:-80px; width:390px; height:390px; z-index:-1;
  border:1px solid #d4e6aa1e; border-radius:50%; box-shadow:0 0 0 80px #d4e6aa09,0 0 0 160px #d4e6aa06;
  pointer-events:none;
}
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header h1 {
  font-size:clamp(35px,3vw,46px); line-height:1.05; max-width:23ch;
}
body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-description { max-width:55ch; color:var(--vr-muted); }
body[data-view="dashboard"]:not([data-shell="listen"]) .connection { position:relative; z-index:1; padding:8px 11px; border:1px solid #596b5580; border-radius:100px; background:#172018c9; color:#d5decf; }
body[data-view="dashboard"]:not([data-shell="listen"]) .connection i { background:var(--vr-accent); }
body[data-area="music"] .workspace-header { min-height:88px!important; margin-bottom:12px!important; }
body[data-area="music"] .workspace-header h1 { font-size:clamp(35px,3vw,46px)!important; }
body[data-area="account"] .workspace-header { min-height:88px!important; }

/* The overview is a useful index, with one expressive listening tile. */
body[data-view="dashboard"] .home-space-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px!important; }
body[data-view="dashboard"] .home-space {
  position:relative; isolation:isolate; overflow:hidden; align-items:end; min-height:148px;
  grid-template-columns:1fr auto; padding:21px!important; border:1px solid #4b594c!important;
  border-radius:12px!important; background:#1d2520!important;
  transition:background .2s,border-color .2s,transform .2s;
}
body[data-view="dashboard"] .home-space::before {
  content:""; position:absolute; inset:0 0 0 40%; z-index:-1;
  background:radial-gradient(circle,#bed0a633 1px,transparent 1.6px) 0 0/17px 17px;
  mask-image:linear-gradient(90deg,transparent,#000);
}
body[data-view="dashboard"] .home-space:hover { border-color:#a9c18a!important; background:#26342a!important; transform:translateY(-2px); }
body[data-view="dashboard"] .home-space .platform-mark { display:none; }
body[data-view="dashboard"] .home-space strong { font:normal clamp(22px,2vw,29px)/1.08 Georgia,serif; margin:10px 0 12px; }
body[data-view="dashboard"] .home-space small { color:var(--vr-accent); font:650 10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.17em; }
body[data-view="dashboard"] .home-space em { max-width:44ch; color:var(--vr-muted); }
body[data-view="dashboard"] .home-space>b { align-self:end; font-size:24px; color:var(--vr-accent); }
body[data-view="dashboard"] .music-summary {
  order:-1; grid-column:1/-1; min-height:172px; padding:24px 28px!important;
  background:linear-gradient(100deg,#213029 0%,#1c2822 53%,#1b211c 100%)!important;
}
body[data-view="dashboard"] .music-summary::before {
  inset:-150px 2% -150px auto; width:420px; border-radius:50%;
  background:repeating-radial-gradient(circle,#dce8aa38 0 1px,transparent 2px 15px),radial-gradient(circle,#99ba7955 0,transparent 66%);
  mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent);
}
body[data-view="dashboard"] .music-summary strong { font-size:clamp(31px,3vw,43px); }
body[data-view="dashboard"] .home-space[data-home-area="discord"]::before { background:linear-gradient(#c0d5b320 1px,transparent 1px),linear-gradient(90deg,#c0d5b320 1px,transparent 1px); background-size:22px 22px; }
body[data-view="dashboard"] .home-space[data-home-area="telegram"]::before { background:repeating-linear-gradient(145deg,transparent 0 23px,#c9d9b526 24px 25px,transparent 26px 70px); }

/* Settings use a scan-friendly grid: controls for one task stay together. */
body[data-area="discord"] .area-page[data-area-page="discord"],
body[data-area="telegram"] .area-page[data-area-page="telegram"] { gap:14px; }
body[data-area="discord"] .settings-jump { display:flex; flex-wrap:wrap; gap:7px; padding:2px 0 5px; }
body[data-area="discord"] .settings-jump button { min-height:38px; padding:7px 13px; border:1px solid #566a55; border-radius:30px; background:#1b271f; color:#d9e4cf; cursor:pointer; font-size:12px; }
body[data-area="discord"] .settings-jump button:hover,
body[data-area="discord"] .settings-jump button:focus-visible { border-color:#c9dda2; background:#2a3b2d; color:#f2f7de; }
body[data-area="discord"] [id^="discord-"] { scroll-margin-top:24px; }
@media(min-width:980px) {
  body[data-area="discord"] .area-page[data-area-page="discord"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-area="discord"] .area-page[data-area-page="discord"]>.resource-selector,
  body[data-area="discord"] .area-page[data-area-page="discord"]>.settings-jump,
  body[data-area="discord"] .area-page[data-area-page="discord"]>.accent-card,
  body[data-area="discord"] .area-page[data-area-page="discord"]>#discord-alerts-mount { grid-column:1/-1; }
  body[data-area="discord"] .area-page[data-area-page="discord"]>.two-column { display:contents; }
  body[data-area="telegram"] .area-page[data-area-page="telegram"] { grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); align-items:start; }
  body[data-area="telegram"] .telegram-intro { grid-column:1/-1; }
  body[data-area="telegram"] #telegram-alerts-mount { grid-column:1/-1; }
}
body[data-area="discord"] .setting-card,
body[data-area="telegram"] .setting-card,
body[data-area="discord"] .broadcast-settings .setting-card,
body[data-area="telegram"] .broadcast-settings .setting-card {
  position:relative; padding:20px!important;
  border:1px solid #4b5e4e!important;
  border-radius:13px!important; background:#1d2820!important;
}
body[data-area="discord"] .setting-card .number,
body[data-area="telegram"] .setting-card .number { position:static; display:inline-block; margin-bottom:8px; color:#b7ce96; }
body[data-area="discord"] .setting-head h2,
body[data-area="telegram"] .setting-head h2 { color:var(--vr-ink); font:normal 23px/1.12 Georgia,serif; letter-spacing:-.025em; }
body[data-area="discord"] .setting-head p,
body[data-area="telegram"] .setting-head p { max-width:66ch; color:var(--vr-muted); line-height:1.5; }
body[data-area="discord"] .area-page[data-area-page="discord"]>.two-column,
body[data-area="telegram"] .broadcast-settings .two-column { gap:14px; }
body[data-area="discord"] .setting-card .field select,
body[data-area="discord"] .setting-card .field textarea,
body[data-area="discord"] .setting-card .field input,
body[data-area="telegram"] .setting-card .field select,
body[data-area="telegram"] .setting-card .field textarea,
body[data-area="telegram"] .setting-card .field input {
  border-color:#4b5b4c; background:#1b231e; border-radius:7px;
}
body[data-area="discord"] .broadcast-settings,
body[data-area="telegram"] .broadcast-settings { margin-top:10px; gap:14px; border-top:0; }
@media(min-width:980px) {
  body[data-area="discord"] .broadcast-settings,
  body[data-area="telegram"] .broadcast-settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-area="discord"] .broadcast-settings>.destination-route-heading,
  body[data-area="telegram"] .broadcast-settings>.destination-route-heading,
  body[data-area="discord"] .broadcast-settings>.setting-card:last-child,
  body[data-area="telegram"] .broadcast-settings>.setting-card:last-child { grid-column:1/-1; }
}
body[data-area="discord"] .destination-route-heading,
body[data-area="telegram"] .destination-route-heading { padding:22px 0 16px; grid-template-columns:36px minmax(0,1fr); }
body[data-area="discord"] .destination-route-heading .platform-mark,
body[data-area="telegram"] .destination-route-heading .platform-mark { width:34px; height:34px; border:0; font-size:25px; }
body[data-area="discord"] .destination-route-heading h2,
body[data-area="telegram"] .destination-route-heading h2 { font:normal 29px/1.1 Georgia,serif; }
body[data-area="discord"] .destination-editor,
body[data-area="telegram"] .destination-editor { background:#1b241e; border-color:#4c5c4d; }
body[data-area="discord"] .save-bar,
body[data-area="telegram"] .save-bar { background:#202a22; border-color:#61755e; box-shadow:0 12px 40px #0008; }
body[data-area="telegram"] .telegram-intro { position:relative; min-height:76px; padding:7px 0 10px; }
body[data-area="telegram"] .telegram-intro::after { content:""; position:absolute; top:8px; right:3%; width:180px; height:70px; background:repeating-linear-gradient(145deg,transparent 0 19px,#cbdab31b 20px 21px,transparent 22px 45px); mask-image:linear-gradient(90deg,transparent,#000); pointer-events:none; }
body[data-area="telegram"] .telegram-intro .platform-hero-mark { border-color:#718b7b; color:#d9eadb; }
body[data-area="telegram"] .telegram-intro h2 { font-size:25px; }
body[data-area="telegram"] .area-page[data-area-page="telegram"]>.setting-card { padding-block:20px!important; }
body[data-area="telegram"] .area-page[data-area-page="telegram"]>.setting-card .status-badge { color:#d4dfbd; }

/* Music keeps its disc, but the search and playback content lead the page. */
body[data-area="music"] .playback-destination { padding:0 0 10px; margin-bottom:10px; border-bottom:1px solid var(--vr-rule); }
body[data-area="music"] .browser-search-head {
  grid-template-columns:minmax(250px,.65fr) minmax(360px,1fr); gap:20px; align-items:end;
  padding:0 0 13px; border:0; border-bottom:1px solid var(--vr-rule);
  border-radius:0!important; background:transparent!important;
}
body[data-area="music"] .browser-search-head h2 { margin:3px 0; font-size:clamp(23px,1.8vw,29px); line-height:1.08; }
body[data-area="music"] .browser-search-head p { max-width:48ch; margin-bottom:0; font-size:12px; }
body[data-area="music"] .browser-search-head .field { margin:0; }
body[data-area="music"] .browser-search-line .primary-button { border-radius:8px; }
body[data-area="music"] .browser-music-status:empty { min-height:0; }
body[data-area="music"] .browser-music-surface { gap:10px; }
body[data-view="dashboard"][data-area="music"]:not([data-shell="listen"]) .browser-music-layout { grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:12px; }
body[data-area="music"] .browser-player-card,
body[data-area="music"] .browser-library-card { border-color:#4d5c4e; border-radius:12px!important; background:#1b241e!important; }
body[data-area="music"] .browser-player-card,
body[data-area="music"] .browser-library-card { min-height:500px!important; }
body[data-area="music"] .browser-player-empty {
  position:relative; isolation:isolate; min-height:500px;
  background:radial-gradient(circle at 50% 44%,#354934 0,transparent 58%),#1b241e;
}
body[data-area="music"] .browser-player-empty::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle,#c2d69a38 1px,transparent 1.6px) 0 0/20px 20px;
  mask-image:radial-gradient(circle at 50% 45%,transparent 0 24%,#000 67%,transparent 88%);
}
body[data-area="music"] .browser-player-empty>span { width:190px; border:9px solid #202b23; box-shadow:0 20px 40px #0008,inset 0 0 0 1px #ceddb879; background:repeating-radial-gradient(circle,#1b271e 0 2px,#314131 3px 5px); font-size:63px; }
body[data-area="music"] .browser-player-empty h3 { margin-top:20px; font-size:24px; }
body[data-area="music"] .browser-library-card { display:flex; flex-direction:column; }
body[data-area="music"] .browser-library-card .browser-track-list { flex:1; max-height:590px; min-height:0; }
body[data-area="music"] .browser-list-empty { text-align:left; padding:30px 20px; }
body[data-area="music"] .browser-library-tabs { padding:4px 16px 0; gap:21px; }
body[data-area="music"] .browser-library-tabs button { position:relative; padding:13px 0; border-radius:0; background:transparent; }
body[data-area="music"] .browser-library-tabs button.active { color:#f0eee4; background:transparent; }
body[data-area="music"] .browser-library-tabs button.active::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--vr-accent); }
body[data-area="music"] .browser-track-row>img,
body[data-area="music"] .browser-track-fallback { border-radius:6px; }
body[data-area="music"] .browser-disc-stage { min-height:255px; background:radial-gradient(circle at 50% 45%,#617b4a55,transparent 70%),#19241c; }
body[data-area="music"] .browser-disc-stage::before { content:""; position:absolute; width:240px; height:240px; border:1px solid #bbce9e3d; border-radius:50%; box-shadow:0 0 0 30px #b9cc9416,0 0 0 60px #b9cc940c; pointer-events:none; }
body[data-area="music"] .browser-disc-stage { position:relative; }
body[data-area="music"] .browser-disc { z-index:1; width:min(205px,55vw); }
body[data-area="music"] .browser-current-copy { padding:14px 20px 11px; }
body[data-area="music"] .browser-current-copy h3 { margin:4px 0 2px; font-size:23px; }
body[data-area="music"] #browser-current-source { display:inline-block; margin-top:7px; color:#d5e7aa; font-size:12px; text-underline-offset:3px; }
body[data-area="music"] .browser-player-controls { display:grid; gap:10px; padding:13px 20px 15px; border-top:1px solid var(--vr-rule); }
body[data-area="music"] .browser-transport { display:flex; align-items:center; justify-content:center; gap:9px; }
body[data-area="music"] .browser-transport button,
body[data-area="music"] .browser-volume-control button { display:grid; place-items:center; min-width:42px; min-height:42px; padding:0; border:1px solid #637760; border-radius:50%; background:#243127; color:#edf2dd; cursor:pointer; font-size:19px; }
body[data-area="music"] .browser-transport button:hover,
body[data-area="music"] .browser-transport button:focus-visible,
body[data-area="music"] .browser-volume-control button:hover { background:#3c503d; }
body[data-area="music"] .browser-transport button.active { border-color:#dbed9e; color:#ecf9bb; background:#41523c; }
body[data-area="music"] #browser-play-pause { width:54px; height:54px; color:#172519; background:#dce9a6; border-color:#dce9a6; font-size:23px; }
body[data-area="music"] #browser-play-pause:hover { background:#eff8bf; }
body[data-area="music"] .browser-transport button:disabled { opacity:.4; cursor:not-allowed; }
body[data-area="music"] .browser-seek-control { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; color:#cbd5c2; font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-area="music"] .browser-seek-control input,
body[data-area="music"] .browser-volume-control input { width:100%; accent-color:#dce9a6; cursor:pointer; }
body[data-area="music"] .browser-volume-control { display:flex; justify-content:flex-end; align-items:center; gap:11px; }
body[data-area="music"] .browser-volume-control input { width:min(150px,35%); }
body[data-area="music"] .browser-player-card iframe { min-height:166px; height:166px; flex:none; border-top:1px solid var(--vr-rule); }
body[data-area="music"] .music-scene,
body[data-area="music"] .music-idle-scene { background:radial-gradient(circle at 50% 43%,#3a5635 0,transparent 66%),#19251d!important; }
body[data-area="music"] .music-scene::before,
body[data-area="music"] .music-idle-scene::before { opacity:.4; background:radial-gradient(circle,#b4cc9733 1px,transparent 1.5px) 0 0/20px 20px; }
body[data-area="music"] .music-scene::after,
body[data-area="music"] .music-idle-scene::after { border:0; }
body[data-area="music"] .music-idle { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
body[data-area="music"] .music-idle-scene { min-height:265px; border:1px solid #4b5e4e; border-radius:12px!important; }
body[data-area="music"] .music-idle-sheet { min-height:265px; justify-content:center; padding:28px; border:1px solid #4b5e4e; border-radius:12px; background:#1b241e!important; }
body[data-area="music"] .music-idle-mark { width:min(45%,160px); border-color:#1d2b21; color:#dce7bc; }
body[data-area="music"] .music-idle h2 { font-size:clamp(30px,2.8vw,42px); }
body[data-area="music"] .music-idle-footer { margin-top:24px; padding-top:18px; }

/* Twitch gets a signal diagram instead of a fake spherical illustration. */
body[data-area="twitch"] .twitch-feature {
  min-height:172px; grid-template-columns:minmax(0,1fr) minmax(160px,.36fr);
  border-color:#566952; border-radius:12px;
  background:linear-gradient(112deg,#202d24,#1b2821 60%,#1a211c);
}
body[data-area="twitch"] .twitch-feature-copy { padding:22px clamp(23px,2vw,34px); }
body[data-area="twitch"] .twitch-feature h2 { max-width:32ch; margin:4px 0 6px; font-size:clamp(28px,2.3vw,36px); }
body[data-area="twitch"] .twitch-feature p { font-size:14px; }
body[data-area="twitch"] .twitch-feature-actions { margin-top:13px; }
body[data-area="twitch"] .twitch-feature-art { min-height:172px; overflow:hidden; }
body[data-area="twitch"] .twitch-feature-art::before {
  width:100%; height:100%; right:0; top:0; border:0; border-radius:0; box-shadow:none;
  background:radial-gradient(circle,#d7e7ab5c 1.5px,transparent 2px) 0 0/18px 18px;
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 70%,transparent);
}
body[data-area="twitch"] .twitch-feature-mark {
  top:calc(50% - 29px); right:calc(50% - 29px); width:58px; height:58px;
  border:1px solid #bed3a5; border-radius:12px; background:#1a2820; color:#e7f0d6;
  font:normal 32px Georgia,serif; box-shadow:0 0 0 9px #19251fcc,0 0 0 10px #b8ce9d6b;
}
body[data-area="twitch"] .twitch-orbit { transform:none; border:1px solid #c4d8a447; border-radius:16px; }
body[data-area="twitch"] .twitch-orbit.one { width:190px; height:190px; top:calc(50% - 95px); right:calc(50% - 95px); }
body[data-area="twitch"] .twitch-orbit.two { width:270px; height:270px; top:calc(50% - 135px); right:calc(50% - 135px); }
body[data-area="twitch"] .twitch-sources,
body[data-area="twitch"] .twitch-delivery,
body[data-area="twitch"] .twitch-future { padding:21px; border-color:#4d5d4f; border-radius:12px; background:#1b241e; }
body[data-area="twitch"] .twitch-future { background:transparent; }

/* The profile stays calm; the identity mark is its single expressive detail. */
body[data-area="account"] .account-summary { min-height:120px; position:relative; }
body[data-area="account"] .account-summary::after {
  content:""; position:absolute; right:0; top:0; width:165px; height:105px;
  background:radial-gradient(circle,#c9d8ab3e 1px,transparent 1.5px) 0 0/16px 16px;
  mask-image:linear-gradient(90deg,transparent,#000);
  pointer-events:none;
}
body[data-area="account"] .account-profile-mark { width:76px; height:76px; background:#27382b; box-shadow:0 0 0 8px #1a231d,0 0 0 9px #859b7c; }
@media(min-width:1150px) {
  body[data-area="account"] .account-page { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
  body[data-area="account"] .account-summary,
  body[data-area="account"] .account-note { grid-column:1/-1; }
  body[data-area="account"] .account-profile-editor,
  body[data-area="account"] .account-connections { display:block; min-height:230px; padding:22px; border:1px solid #4d5d4f; border-radius:12px; background:#1b241e; }
  body[data-area="account"] .account-editor-control,
  body[data-area="account"] #account-connection-list { margin-top:17px; }
  body[data-area="account"] .account-logout { grid-column:1/-1; }
}

@media(min-width:801px) {
  body[data-area="music"] .music-live { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr); grid-template-areas:"scene queue" "player queue"; gap:0 16px; align-items:stretch; }
  body[data-area="music"] .music-live .listening-sheet { display:contents; }
  body[data-area="music"] .music-live .music-scene { grid-area:scene; min-height:285px; border:1px solid #4b5e4e; border-bottom:0; border-radius:12px 12px 0 0!important; }
  body[data-area="music"] .music-live .music-player-card { grid-area:player; padding:22px 26px 26px; border:1px solid #4b5e4e; border-top:0; border-radius:0 0 12px 12px; background:#1b241e; }
  body[data-area="music"] .music-live .music-queue-card { grid-area:queue; margin:0; padding:24px; border:1px solid #4b5e4e; border-radius:12px; background:#1b241e; }
  body[data-area="music"] .music-live .music-artwork { width:min(55%,230px); }
  body[data-area="music"] .music-live .music-track-copy { margin-top:19px; }
  body[data-area="music"] .music-live .music-progress { margin-top:22px; }
}
@media(max-width:1100px) {
  body[data-view="dashboard"] .home-space-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-view="dashboard"] .music-summary { grid-column:1/-1; }
  body[data-area="music"] .browser-search-head { grid-template-columns:1fr; align-items:start; }
  body[data-view="dashboard"][data-area="music"]:not([data-shell="listen"]) .browser-music-layout { grid-template-columns:1fr; }
  body[data-area="music"] .browser-library-card { min-height:260px!important; }
  body[data-area="music"] .browser-library-card .browser-track-list { max-height:380px; }
}
@media(max-width:850px) {
  body[data-view="dashboard"]:not([data-shell="listen"]) .topbar::after { display:none; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header { min-height:145px; }
  body[data-area="music"] .music-live .music-scene,
  body[data-area="music"] .music-live .music-idle-scene { min-height:250px; }
  body[data-area="music"] .music-idle { grid-template-columns:1fr; gap:0; }
  body[data-area="music"] .music-idle-sheet { order:-1; min-height:0; border-radius:12px 12px 0 0; border-bottom:0; }
  body[data-area="music"] .music-idle-scene { min-height:250px; border-radius:0 0 12px 12px!important; }
}
@media(max-width:650px) {
  body[data-area="discord"] .settings-jump { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
  body[data-area="discord"] .settings-jump button { flex:none; }
  body[data-area="discord"] [id^="discord-"] { scroll-margin-top:110px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header { min-height:0; padding:12px 0 20px; margin-bottom:17px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header::after { display:none; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header h1 { font-size:42px; }
  body[data-view="dashboard"]:not([data-shell="listen"]) .workspace-header .connection { width:max-content; max-width:100%; }
  body[data-view="dashboard"] .home-space-grid { grid-template-columns:1fr; gap:9px!important; }
  body[data-view="dashboard"] .home-space,
  body[data-view="dashboard"] .music-summary { grid-column:auto; min-height:145px; padding:21px!important; }
  body[data-view="dashboard"] .music-summary strong { font-size:29px; }
  body[data-area="discord"] .setting-card,
  body[data-area="telegram"] .setting-card,
  body[data-area="discord"] .broadcast-settings .setting-card,
  body[data-area="telegram"] .broadcast-settings .setting-card { padding:19px 0 23px 33px!important; }
  body[data-area="discord"] .setting-card .number,
  body[data-area="telegram"] .setting-card .number { left:0; top:29px; }
  body[data-area="discord"] .save-bar,
  body[data-area="telegram"] .save-bar { flex-direction:row; align-items:center; gap:8px; padding:8px; bottom:8px; }
  body[data-area="discord"] .save-bar p:not([data-kind="error"]),
  body[data-area="telegram"] .save-bar p:not([data-kind="error"]) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  body[data-area="discord"] .save-bar button,
  body[data-area="telegram"] .save-bar button { width:100%; }
  body[data-area="music"] .browser-search-head { gap:16px; }
  body[data-area="music"] .browser-player-card { min-height:0!important; }
  body[data-area="music"] .browser-player-empty { min-height:290px; }
  body[data-area="music"] .browser-player-empty>span { width:144px; font-size:48px; }
  body[data-area="music"] .browser-transport { gap:5px; }
  body[data-area="music"] .browser-transport button { min-width:42px; }
  body[data-area="music"] .browser-current-copy { padding:12px 16px; }
  body[data-area="music"] .browser-player-controls { padding:12px 16px; }
  body[data-area="music"] .browser-disc-stage { min-height:225px; }
  body[data-area="music"] .browser-disc { width:min(180px,53vw); }
  body[data-area="twitch"] .twitch-feature { grid-template-columns:1fr; }
  body[data-area="twitch"] .twitch-feature-art { display:none; }
}
body[data-motion="off"] .home-space { transition:none; }
body[data-motion="off"] .workspace-header::before { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .home-space { transition:none!important; }.workspace-header::before { animation:none!important; } }