/* Banner, flowing waves, and website tiles. */
body[data-theme=tide]{--banner-height:clamp(280px,36svh,420px)}
body[data-theme=tide] .scene-header{height:var(--banner-height);min-height:0;background-position:48% calc(35% + 55px);box-shadow:none;mask-image:linear-gradient(to bottom,#000 calc(100% - 65px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 65px),transparent 100%)}
/* One continuous wallpaper behind the page: glass samples the pixels beneath it. */
body[data-theme=tide] .wallpaper{background:#eef4fc url('/assets/wallpaper.jpg') center center/cover no-repeat;filter:blur(26px);transform:scale(1.07)}
body[data-theme=tide] .wallpaper:after{display:none}
body[data-theme=tide] .wallpaper-shade{background:linear-gradient(to bottom,#eef4fc 0,#eef4fc var(--banner-height),rgba(238,244,252,.7) calc(var(--banner-height) + 160px),rgba(238,244,252,.7) 100%)}
.work-card #countdown-label{font-size:16px;line-height:1.6}
.work-heading-icon{width:35px;height:24px;overflow:hidden;border-radius:6px;flex-shrink:0}
.work-heading-icon img{display:block;width:100%;height:100%;object-fit:contain}
.work-card #work-caption{font-size:12px;line-height:1.5}
.work-card .work-footer{font-size:13px;line-height:1.6;column-gap:12px}
.work-card .work-footer svg{width:16px;height:16px}
.work-card #vacation-countdown{font-size:14px}
body[data-theme=tide] .dashboard{padding-top:calc(var(--banner-height) - 16px)}
body[data-theme=tide] .topbar{top:calc(var(--banner-height) - 175px);right:max(36px,calc((100vw - 1510px)/2));height:54px}
body[data-theme=tide] .profile-bar{top:calc(var(--banner-height) - 172px);right:137px;height:48px;gap:12px}
body[data-theme=tide] .topbar .icon-button{background:#faffff8c;color:#7892a8}
body[data-theme=tide] .profile-bar .avatar{width:35px;height:35px}
body[data-theme=tide] .profile-bar .theme-switch{min-width:86px}
.water-edge{height:115px;bottom:-1px;filter:drop-shadow(0 -3px 7px #e8f6ff60);pointer-events:none;overflow:hidden}
.wave-layer{animation:water-flow 20s linear infinite;will-change:transform}
.wave-layer-back{animation-duration:26s;animation-delay:-8s}.wave-layer-light{animation-duration:19s;animation-delay:-4s;animation-direction:reverse}.wave-layer-mid{animation-duration:23s;animation-delay:-13s}.wave-layer-front{animation-duration:32s;animation-delay:-18s}
@keyframes water-flow{from{transform:translateX(0)}to{transform:translateX(-720px)}}
.website-panel{min-width:0;position:relative}
.website-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(130px,1fr));gap:16px;height:100%}
.website-tile{position:relative;display:flex;align-items:center;justify-content:center;gap:17px;min-width:0;overflow:hidden;padding:24px;border:1px solid #ffffff55;border-radius:13px;color:#fff;background:#ffffff16;box-shadow:0 5px 22px #263c5d0a,inset 0 1px 0 #ffffff45;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);transition:transform .25s,box-shadow .25s}
.website-tile:before,.website-tile:after{content:none}
body[data-theme=tide] .website-tile{color:#243a57;background:#ffffff26;border-color:#ffffffb0}
body[data-theme=tide] .website-tile>svg{filter:none}
body[data-theme=tide] .website-tile>strong{text-shadow:none}
.website-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px #354d6b22,inset 0 1px 0 #ffffff65}
.website-tile:active{transform:translateY(0)}
.website-tile>svg{width:31px;height:31px;stroke-width:2.2;filter:drop-shadow(0 2px 7px #17263250)}
.website-tile>strong{font-size:26px;font-weight:600;letter-spacing:1px;text-shadow:0 2px 12px #15233250}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:1600px){.website-grid{gap:18px}.website-tile>strong{font-size:31px}.website-tile>svg{height:35px;width:35px}}
@media(max-width:1100px){.website-tile{gap:12px;padding:18px}.website-tile>strong{font-size:23px}.website-tile>svg{width:27px;height:27px}}
@media(max-width:820px){body[data-theme=tide]{--banner-height:310px}body[data-theme=tide] .scene-header{background-position:36% calc(27% + 35px)}body[data-theme=tide] .dashboard{padding-top:calc(var(--banner-height) + 22px)}body[data-theme=tide] .topbar{top:calc(var(--banner-height) - 175px);right:18px}body[data-theme=tide] .profile-bar{top:calc(var(--banner-height) - 172px);right:125px;gap:10px}.links-card.website-panel{display:block;padding:0;min-height:0}.website-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:160px;gap:14px}}
@media(max-width:580px){body[data-theme=tide]{--banner-height:300px}body[data-theme=tide] .scene-header{background-position:26% 0;background-size:auto 490px}body[data-theme=tide] .dashboard{padding-top:calc(var(--banner-height) + 20px)}body[data-theme=tide] .topbar{top:calc(var(--banner-height) - 145px);right:14px}body[data-theme=tide] .profile-bar{top:calc(var(--banner-height) - 142px);right:122px;gap:8px}body[data-theme=tide] .profile-bar .theme-switch{min-width:76px}.water-edge{height:78px}.website-grid{grid-template-rows:130px;gap:12px}.website-tile{padding:14px;gap:9px;border-radius:12px}.website-tile>strong{font-size:20px}.website-tile>svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.wave-layer{animation:none;will-change:auto}.website-tile{transition:none}}

/* Data integrations are visual placeholders until providers are connected. */
.settings-dialog .rest-options{border:0;padding:0;margin:21px 0 4px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.settings-dialog .rest-options legend{font-size:12px;color:#667b9c;margin-bottom:1px;padding:0}
.settings-dialog .rest-option{display:flex;align-items:center;gap:8px;padding:12px 10px;margin:0;border:1px solid #cbddeb70;background:#ffffff45;border-radius:10px;cursor:pointer;min-width:0}
.settings-dialog .rest-option:has(input:checked){border-color:#fff;background:#fff;box-shadow:0 3px 14px #8198b422}
.settings-dialog .rest-option input[type=radio]{appearance:none;display:inline-block;width:16px;height:16px;min-width:16px;padding:0;margin:0;border:1px solid #a2b1c3;border-radius:50%;background:transparent;cursor:pointer}
.settings-dialog .rest-option input[type=radio]:checked{background:#fff;border:5px solid #647f9f}
.settings-dialog .rest-option>span{float:none;display:flex;flex-direction:column;gap:4px;color:#4c6688;font-size:12px}
.settings-dialog .rest-option strong{font-weight:550}.settings-dialog .rest-option small{font-size:10px;color:#8b9eb8;line-height:1.5}
.overview-cards{margin-bottom:17px}
.overview-cards .overview-card,body[data-theme=tide] .overview-cards .overview-card{min-height:0;height:238px;padding:23px 25px;display:flex;flex-direction:column}
.overview-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:19px}
.overview-provider{display:flex;align-items:center;gap:12px;min-width:0}
.overview-provider h2{font-size:16px;font-weight:650;margin:0;line-height:1.4;white-space:nowrap}
.overview-provider p{font-size:8px;letter-spacing:1.8px;color:#93a2b8;margin:5px 0 0}
.provider-mark{width:31px;height:31px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:800;letter-spacing:-.7px}
.deepseek-mark{border-radius:10px;background:#e1ecff;color:#5083ee}
.codex-mark{border:1px solid #95a5bc6b;border-radius:11px;font-size:9px;letter-spacing:-.5px;color:#3a506c}
.provider-avatar{object-fit:cover;object-position:center;border:0;background:#fff}
.electricity-mark{color:#12b4e8}.electricity-mark svg{width:30px;height:30px}
.pending-badge{font-size:10px;white-space:nowrap;border:1px solid #b8c8db60;background:#f3f7fc66;border-radius:20px;padding:4px 9px;color:#8b9cb3}
.balance-placeholder{display:flex;align-items:baseline;gap:10px;margin:1px 0 20px}
.overview-value{font-size:38px;line-height:1;font-weight:600;letter-spacing:-1px;color:#35506d}
.overview-unit{font-size:11px;color:#8a9cb4}
.quota-detail{display:flex;align-items:center;justify-content:space-between;color:#869ab4;font-size:10px;margin-bottom:9px}
.empty-meter{height:7px;border-radius:10px;background:#afc3de30;border:1px solid #c4d5e52a}
.integration-caption{font-size:10px;letter-spacing:.2px;color:#99a9be;margin:12px 0 0}
.quota-rings{display:flex;align-items:center;justify-content:space-evenly;gap:16px;flex:1}
.quota-item{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0;color:#7d91af;font-size:10px}
.empty-ring{width:76px;height:76px;border:6px solid #b1c5df38;border-radius:50%;display:flex;align-items:center;justify-content:center}
.empty-ring span{font-size:24px;font-weight:500;color:#8fa4bf}
.remaining-ring{position:relative;border:0;background:conic-gradient(#20b8e9 var(--remaining),#b1c5df38 0);isolation:isolate}
.remaining-ring:before{content:'';position:absolute;inset:6px;border-radius:50%;background:#f1f6fc;z-index:-1}
.remaining-ring span{font-size:23px;color:#355b7d;font-weight:600}
.reset-ring{background:conic-gradient(#a09bea var(--remaining),#b1c5df38 0)}
.reset-ring span{font-size:14px;letter-spacing:-.5px;color:#7778a5}
[data-integration=codex] .overview-provider h2{font-size:16px}
[data-integration=codex] .overview-header{gap:8px;flex-wrap:nowrap;margin-bottom:8px}
.codex-account{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:14px;min-width:0;margin-left:auto;flex-shrink:1}
.codex-account img{width:27px;height:27px;border-radius:50%;object-fit:cover;background:#fff}
.codex-account-copy{display:flex;flex-direction:row;align-items:center;min-width:0;gap:7px;white-space:nowrap}
.codex-account-copy strong{font-size:11px;line-height:1.3;font-weight:550;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.codex-account-copy small{font-size:11px;line-height:1.2;opacity:.8;flex-shrink:0}
@media(max-width:1100px){[data-integration=codex] .overview-header{margin-bottom:6px;gap:5px}[data-integration=codex] .overview-provider h2{font-size:12px}[data-integration=codex] .empty-ring{width:53px;height:53px;border-width:4px}[data-integration=codex] .remaining-ring:before{inset:4px}[data-integration=codex] .remaining-ring span{font-size:17px}[data-integration=codex] .reset-ring span{font-size:11px}.codex-account{padding:4px 6px;max-width:124px}.codex-account img{width:24px;height:24px}}
[data-integration=codex][data-state=connected] .pending-badge{color:#448c83;border-color:#a0d7cd80;background:#e1f4ee80}
#codex-windows .quota-item{gap:5px}
#codex-windows .quota-item small{font-size:9px;color:#8b9db5;white-space:nowrap}
#codex-windows{display:grid;grid-template-columns:repeat(var(--quota-count,2),minmax(0,1fr));align-content:center;align-items:start;gap:12px;padding:4px 0}
@media(max-width:820px) and (min-width:581px){.remaining-ring span{font-size:17px}.remaining-ring:before{inset:4px}#codex-windows .quota-item small{font-size:8px}}
.electricity-value{display:flex;align-items:baseline;gap:9px;margin:0 0 13px}
.empty-chart{position:relative;flex:1;min-height:65px;border-bottom:1px solid #a7c2dc38;background:repeating-linear-gradient(to top,transparent 0,transparent 23px,#a7c2dc1c 23px,#a7c2dc1c 24px);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.empty-chart>span{font-size:10px;color:#96a9c0;background:#f3f8fe60;padding:3px 7px}
.empty-chart-axis{position:absolute;left:0;right:0;bottom:-19px;display:flex;justify-content:space-between;font-size:8px;color:#9aabc2}
@media(max-width:1100px){.overview-cards .overview-card,body[data-theme=tide] .overview-cards .overview-card{padding:20px 18px;height:230px}.overview-provider{gap:8px}.overview-provider h2{font-size:13px}.overview-provider p{font-size:6px;letter-spacing:1px}.pending-badge{font-size:8px;padding:4px 6px}.quota-rings{gap:7px}.empty-ring{height:62px;width:62px;border-width:5px}.quota-item{font-size:9px}.overview-value{font-size:34px}}
@media(max-width:820px){.overview-cards,body[data-theme=tide] .overview-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.overview-provider{gap:7px}.provider-mark{width:24px;height:24px;font-size:10px}.codex-mark{font-size:7px}.overview-provider h2{font-size:12px}.overview-header{flex-wrap:wrap;row-gap:9px}.overview-provider p{font-size:6px}.empty-ring{height:47px;width:47px;border-width:4px}.quota-rings{gap:5px}.quota-item{font-size:8px}.overview-cards .overview-card,body[data-theme=tide] .overview-cards .overview-card{height:232px;padding:18px 13px}}
@media(max-width:580px){.overview-cards,body[data-theme=tide] .overview-cards{grid-template-columns:1fr;gap:13px;margin-bottom:13px}.overview-cards .overview-card,body[data-theme=tide] .overview-cards .overview-card{height:210px;padding:22px}.overview-header{flex-wrap:nowrap;margin-bottom:15px}.overview-provider{gap:11px}.overview-provider h2{font-size:15px}.overview-provider p{font-size:7px;letter-spacing:1.5px}.provider-mark{width:29px;height:29px;font-size:12px}.codex-mark{font-size:8px}.pending-badge{font-size:10px;padding:4px 9px}.balance-placeholder{margin-bottom:15px}.empty-ring{width:69px;height:69px;border-width:5px}.quota-item{font-size:10px;gap:7px}.integration-caption{margin-top:10px}.electricity-value{margin-bottom:9px}}

/* Narrow screens keep natural card heights; desktop columns share a bottom edge. */
.daily-cards .music-card,body[data-theme=tide] .daily-cards .music-card{align-self:start;min-height:0}
.daily-cards .music-body{flex:0 0 auto}

.lunch-sticker,.work-animation{grid-column:2;grid-row:2/4;align-self:center;justify-self:end;width:100%;height:auto;object-fit:contain;pointer-events:none}
.lunch-sticker[hidden],.work-animation[hidden]{display:none}
.work-card.has-sticker .work-main{--sticker-size:clamp(82px,8vw,130px);container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) var(--sticker-size);column-gap:8px;align-items:center}
.work-card.has-sticker #countdown-label{grid-column:1;grid-row:1;margin-bottom:8px}
.work-card.has-sticker #countdown{grid-column:1;grid-row:2;font-size:clamp(24px,calc((100cqw - var(--sticker-size) - 8px)/5.1),43px)}
.work-card.has-sticker #work-caption{grid-column:1;grid-row:3;word-break:keep-all}
.work-card[data-mode=evening] #countdown{font-size:clamp(21px,6cqw,27px);white-space:normal;line-height:1.6;letter-spacing:0}
.work-card[data-mode=evening] #work-caption:empty{display:none}
body[data-theme=glass] .website-tile{color:#243a57;background:linear-gradient(115deg,rgba(255,255,255,var(--glass-opacity)),rgba(243,248,255,calc(var(--glass-opacity) - .1)));border:1px solid var(--border);box-shadow:0 10px 38px #374e7a1a,inset 0 1px 0 #ffffffb3;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:20px}
body[data-theme=glass] .website-tile>svg{filter:none}
body[data-theme=glass] .website-tile>strong{text-shadow:none}
@media(min-width:821px){
  .daily-cards .music-card,body[data-theme=tide] .daily-cards .music-card{align-self:stretch}
  .daily-cards .music-body,body[data-theme=tide] .daily-cards .music-body{flex:1;min-height:0;align-items:stretch}
  .daily-cards .now-playing{display:flex;flex-direction:column;align-items:stretch}
  .daily-cards .now-playing .player-controls{margin-top:12px;padding-top:0}
  .daily-cards .tracklist,body[data-theme=tide] .daily-cards .tracklist{height:0;min-height:100%}
}
@media(max-width:580px){.work-card.has-sticker .work-main{--sticker-size:100px;text-align:left}}

/* Four equal website tiles, two per row at every breakpoint. */
.website-tile{gap:10px;padding:18px 10px}
.website-tile>strong{font-size:clamp(17px,1.5vw,23px);letter-spacing:0}
.website-tile>svg{width:26px;height:26px}
@media(max-width:1100px){.website-grid{gap:12px}.website-tile{flex-direction:column;gap:9px}.website-tile>strong{font-size:18px}}
@media(max-width:820px){.website-grid{grid-template-rows:repeat(2,130px)}.website-tile{flex-direction:row}.website-tile>strong{font-size:21px}}
@media(max-width:580px){.website-grid{grid-template-rows:repeat(2,120px);gap:12px}.website-tile>strong{font-size:19px}.website-tile>svg{width:24px;height:24px}}
@media(max-width:820px){body[data-theme=tide] .dashboard{padding-top:calc(var(--banner-height) - 8px)}}

/* Give the artwork more room and keep playback controls beside its metadata. */
.daily-cards .music-body,body[data-theme=tide] .daily-cards .music-body,
body[data-theme=glass] .daily-cards .music-body{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:18px}
.daily-cards .music-card .cover-wrap,body[data-theme=tide] .daily-cards .music-card .cover-wrap,
body[data-theme=glass] .daily-cards .music-card .cover-wrap{width:100%;height:auto;aspect-ratio:1;margin-bottom:12px}
.daily-cards .now-playing .player-controls,body[data-theme=tide] .daily-cards .now-playing .player-controls{margin-top:12px;padding-top:0}
@media(max-width:1100px){.daily-cards .music-body,body[data-theme=tide] .daily-cards .music-body{gap:12px}}
@media(max-width:580px){.daily-cards .music-body,body[data-theme=tide] .daily-cards .music-body{gap:14px}}


/* Settings enter/leave gently; the DX preference affects page/theme transitions. */
.settings-dialog[open]{animation:settings-enter 280ms cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 45%}
.settings-dialog[open]::backdrop{animation:settings-backdrop-enter 280ms ease both}
.settings-dialog[open].is-closing{animation:settings-leave 180ms ease both;pointer-events:none}
.settings-dialog[open].is-closing::backdrop{animation:settings-backdrop-leave 180ms ease both}
@keyframes settings-enter{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes settings-leave{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes settings-backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes settings-backdrop-leave{to{opacity:0}}
.settings-dialog .animation-preference{display:flex;align-items:center;gap:9px;margin-top:12px;padding:8px 10px;background:#ffffff45;border:1px solid #cbddeb70;border-radius:9px;cursor:pointer}
.settings-dialog .animation-preference input[type=checkbox]{appearance:auto;display:block;flex:0 0 auto;width:16px;height:16px;padding:0;margin:0;accent-color:#14b4e7}
.settings-dialog .animation-preference>span{float:none;display:flex;flex-direction:column;gap:3px;color:#4c6688}
.settings-dialog .animation-preference strong{font-size:12px;font-weight:550}
.settings-dialog .animation-preference small{font-size:10px;color:#8b9eb8}
@media(prefers-reduced-motion:reduce){.settings-dialog[open],.settings-dialog[open]::backdrop,.settings-dialog[open].is-closing,.settings-dialog[open].is-closing::backdrop{animation:none}}

/* A compact settings sheet; retain touch/keyboard scrolling without chrome. */
.settings-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:23px 26px;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.settings-dialog::-webkit-scrollbar{display:none;width:0;height:0}
.settings-dialog .dialog-heading{margin-bottom:11px}
.settings-dialog .dialog-heading h2{margin:0;font-size:22px}
.settings-dialog label{margin-top:13px}
.settings-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]){padding:10px 12px;margin-top:7px}
.settings-dialog .rest-options{margin-top:17px;gap:9px}
.settings-dialog .rest-option{margin:0;padding:11px 12px}
.settings-dialog .rest-options legend{margin-bottom:7px}
.settings-dialog .rest-option strong{font-size:13px}
.settings-dialog .rest-option small{font-size:11px}
.settings-dialog .settings-help{margin:12px 0;font-size:10px;line-height:1.6}
.settings-dialog input[type=range]{margin-top:13px}
.settings-dialog .animation-preference{width:fit-content;max-width:100%;min-height:44px;margin-top:12px;padding:8px 10px}
.settings-dialog .animation-preference{transition:transform 180ms ease,border-color 180ms ease,background 180ms ease}
.settings-dialog .animation-preference:hover{border-color:#a9bfd780}
.settings-dialog .animation-preference:active{transform:scale(.987)}
.settings-dialog .animation-preference:has(input:checked){background:#ffffff45;border-color:#cbddeb70;box-shadow:none}
.settings-dialog .animation-preference input[type=checkbox]{appearance:none;position:relative;width:17px;height:17px;border:1px solid #a2b1c3;border-radius:5px;background:transparent}
.settings-dialog .animation-preference input[type=checkbox]:checked{background:#fff;border-color:#647f9f}
.settings-dialog .animation-preference input[type=checkbox]{transition:transform 180ms ease,border-color 180ms ease}
.settings-dialog .animation-preference input[type=checkbox]:checked:after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #647f9f;border-width:0 2px 2px 0;transform:rotate(45deg);animation:preference-check-in 200ms cubic-bezier(.2,.9,.3,1.3) both}
@keyframes preference-check-in{from{opacity:0;transform:rotate(45deg) scale(.35)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.settings-dialog .save-button{transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease}
.settings-dialog .save-button:hover{transform:translateY(-1px);box-shadow:0 5px 16px #12b4e92b}
.settings-dialog .save-button:active{transform:scale(.985)}
.settings-dialog .animation-preference strong{font-size:13px}
.settings-dialog .animation-preference small{font-size:11px}
.settings-dialog #settings-error:empty{display:none}
.settings-dialog .save-button{padding:11px 17px}
@media(max-width:580px){.settings-dialog{padding:21px 19px}.settings-dialog .form-links{grid-template-columns:1fr}.settings-dialog .rest-option{padding:11px 9px;gap:8px}}
@media(min-width:581px) and (max-height:800px){
  .settings-dialog{padding:18px 22px}
  .settings-dialog .dialog-heading{margin-bottom:6px}
  .settings-dialog label{margin-top:9px}
  .settings-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]){padding:8px 11px}
  .settings-dialog .rest-options{margin-top:13px;gap:7px}
  .settings-dialog .rest-option{padding:8px 10px;margin:0}
  .settings-dialog .settings-help{margin:9px 0;line-height:1.45}
  .settings-dialog .animation-preference{margin-top:10px;padding:8px 10px}
  .settings-dialog input[type=range]{margin-top:10px}
  .settings-dialog .save-button{padding:10px 17px}
}

/* Inspired by soki.moe's layered entrance, without a full-screen DX overlay. */
.soft-entry .scene-header{animation:soft-banner-enter 550ms ease both}
.soft-entry .profile-bar{animation:soft-card-enter 420ms ease both}
.soft-entry .overview-cards>.card{animation:soft-card-enter 460ms cubic-bezier(.2,.8,.2,1) both}
.soft-entry .overview-cards>.card:nth-child(2){animation-delay:45ms}
.soft-entry .overview-cards>.card:nth-child(3){animation-delay:90ms}
.soft-entry .daily-cards>section{animation:soft-card-enter 460ms cubic-bezier(.2,.8,.2,1) 110ms both}
.soft-entry .daily-cards>section:nth-child(2){animation-delay:155ms}
.soft-entry .daily-cards>section:nth-child(3){animation-delay:200ms}
@keyframes soft-banner-enter{from{opacity:.3}to{opacity:1}}
@keyframes soft-card-enter{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.soft-entry .scene-header,.soft-entry .profile-bar,.soft-entry .overview-cards>.card,.soft-entry .daily-cards>section{animation:none}}

/* Keep quota values centered independently of text length and viewport height. */
#codex-windows{container-type:inline-size;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:start;justify-items:center;gap:8px}
#codex-windows .quota-item{width:100%;text-align:center;line-height:1.5}
#codex-windows .empty-ring{position:relative;flex:none;width:min(76px,27cqw);height:auto;aspect-ratio:1;border:0;display:grid;place-items:center}
#codex-windows .remaining-ring:before{inset:clamp(4px,2cqw,6px)}
#codex-windows .empty-ring>span{position:absolute;inset:0;display:grid;place-items:center;margin:0;line-height:1;font-size:clamp(14px,8cqw,23px);font-variant-numeric:tabular-nums;letter-spacing:-.5px;white-space:nowrap}
#codex-windows .reset-ring>span{font-size:clamp(9px,5cqw,14px)}
#codex-windows .quota-item>span{max-width:100%;text-align:center}
#codex-windows .quota-item small{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}
#fullscreen-button[hidden]{display:none}
@media(max-width:1100px),(hover:none) and (pointer:coarse){
  #fullscreen-button{display:none}
  body[data-theme=tide] .profile-bar{right:86px}
}

/* One compact toolbar shared by both themes. */
body[data-theme] .profile-bar{position:absolute;top:22px;right:max(24px,calc((100vw - 1510px)/2));left:auto;transform:none;width:max-content;max-width:calc(100% - 32px);height:52px;margin:0;padding:7px 12px;gap:12px;border:1px solid #ffffffb3;border-radius:30px;background:linear-gradient(115deg,#ffffffc9,#f3f8ffb8);box-shadow:0 5px 24px #344e7620;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:5}
body[data-theme] .profile-bar .online{display:inline-flex}
body[data-theme] .profile-bar .profile-clock{display:block;font-size:11px;margin:0;font-variant-numeric:tabular-nums;color:#72849e}
body[data-theme] .profile-bar .theme-switch{margin:0 0 0 3px;min-width:80px;height:34px;padding:6px 9px;font-size:11px}
.profile-bar .tools{display:flex;gap:5px;align-items:center;border-left:1px solid #a5b7d044;padding-left:8px}
.profile-bar .icon-button{background:#ffffff45;color:#59718f}
.profile-bar .icon-button:hover{background:#fff}
.service-status-wrap{position:relative;display:flex;align-items:center}
.profile-bar .service-status{border:0;background:transparent;padding:5px 0;margin:0;font-size:10px;letter-spacing:.8px;white-space:nowrap;border-radius:5px;color:#5c718d;gap:8px}
.service-status[data-state=offline]{color:#b7626c}
.service-status[data-state=offline] i{background:#e47780;box-shadow:0 0 0 3px #e477801a}
.service-status[data-state=checking] i{background:#d9ac58;box-shadow:0 0 0 3px #d9ac581a}
.service-tooltip{display:none;position:absolute;top:calc(100% + 16px);left:0;min-width:210px;max-width:min(320px,calc(100vw - 40px));border:1px solid #ffffffd9;border-radius:12px;padding:12px 14px;color:#4e6280;background:#f8fbfff5;box-shadow:0 8px 25px #23395b20;white-space:pre-line;font-size:11px;line-height:1.75;letter-spacing:0;pointer-events:none;z-index:20}
.service-status-wrap:hover .service-tooltip,.service-status-wrap:focus-within .service-tooltip{display:block}
body[data-theme=glass] .dashboard{min-height:100svh;justify-content:flex-start;padding-top:clamp(200px,38svh,350px)}

@media(max-width:580px){body[data-theme] .profile-bar{top:14px;right:14px;max-width:calc(100% - 28px);height:46px;padding:5px 9px;gap:8px}body[data-theme] .profile-bar .theme-switch{min-width:72px;height:32px;font-size:10px;gap:6px}.profile-bar .tools{gap:3px;padding-left:6px}.profile-bar .icon-button{width:28px;height:28px}.profile-bar .service-status{font-size:9px;gap:6px}.profile-bar .profile-clock{font-size:10px}}
@media(max-width:380px){body[data-theme] .profile-bar .profile-clock{display:none}}