/* Theme selection changes the palette; layout is controlled by separate position settings. */
.app[class*="theme-"] .panel{top:0;right:auto;bottom:0;left:0;width:min(500px,100%);max-width:none;height:auto;max-height:none;border-radius:0;border-top:0;border-bottom:0;border-right-width:1px;border-left-width:0;box-shadow:24px 0 70px #0000006b;-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);transform:translateX(-102%)}
.app[class*="theme-"] .panel.open{transform:translateX(0)}
.app[class*="theme-"] .panel-head{padding:18px 14px 14px 22px;border-bottom-width:1px;border-radius:0}
.app[class*="theme-"] .panel-title h2{font-size:23px;letter-spacing:-.5px}
.app[class*="theme-"] .search{margin:8px 14px;height:48px;border-radius:16px}
.app[class*="theme-"] .quickbar{margin:0;padding:0 14px 7px}
.app[class*="theme-"] .quickbar button{border-radius:11px}
.app[class*="theme-"] .chips{margin:0;padding:0 14px 9px;gap:7px}
.app[class*="theme-"] .chips button{border-radius:13px}
.app[class*="theme-"] .grid{padding:2px 18px calc(100px + env(safe-area-inset-bottom))}
.app[class*="theme-"] .card{height:120px;padding:5px;gap:3px;border-radius:12px;box-shadow:0 7px 18px #00000029,inset 0 1px #ffffff0b}
.app[class*="theme-"] .logo{aspect-ratio:1.32/1;border-radius:9px}
.app[class*="theme-"] .name{height:2.1em;font-size:12px;line-height:1.15}
.app[class*="theme-"] .card-favorite{top:6px;right:6px;border-radius:9px}
.app[class*="theme-"] .dock{border-radius:16px;box-shadow:0 14px 38px #00000080,inset 0 1px #ffffff0f}
.app.dock-center .dock{bottom:18px;border-radius:99px}
.app[class*="theme-"] .settings-card{max-height:min(82vh,700px);overflow-y:auto;overscroll-behavior:contain}

.app.panel-left .panel{left:0;right:auto;border-right-width:1px;border-left-width:0;box-shadow:24px 0 70px #0000006b;transform:translateX(-102%)}
.app.panel-left .panel.open{transform:translateX(0)}
.app.panel-center .panel{top:auto;bottom:92px;left:50%;right:auto;width:min(900px,calc(100% - 32px));height:min(58vh,560px);border:1px solid rgba(164,239,225,.42);border-radius:26px;box-shadow:0 18px 70px #04233052;transform:translate(-50%,calc(100% + 24px))}
.app.panel-center .panel.open{transform:translate(-50%,0)}
.app.panel-center .panel-head{border-radius:25px 25px 0 0}
.app.panel-center .grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.app.panel-right .panel{left:auto;right:0;border-left-width:1px;border-right-width:0;box-shadow:-24px 0 70px #0000006b;transform:translateX(102%)}
.app.panel-right .panel.open{transform:translateX(0)}

.app.dock-left .dock{left:max(18px,env(safe-area-inset-left));right:auto;transform:none}
.app.dock-center .dock{left:50%;right:auto;transform:translateX(-50%)}
.app.dock-right .dock{left:auto;right:max(18px,env(safe-area-inset-right));transform:none}
.app.dock-left.asleep .dock,.app.dock-right.asleep .dock{transform:translateY(8px)}
.app.dock-center.asleep .dock{transform:translate(-50%,8px)}

@media(max-width:760px){
  .app.panel-left .panel,.app.panel-right .panel{width:min(430px,92vw)}
  .app.panel-center .panel{width:min(900px,calc(100% - 24px))}
}
@media(min-width:900px)and (orientation:landscape){
  .app.panel-left .panel,.app.panel-right .panel{width:min(440px,36vw)}
}
@media(orientation:landscape)and (max-height:620px){
  .app.panel-left .panel,.app.panel-right .panel{width:min(420px,48vw)}
}
@media(orientation:portrait)and (max-width:900px){
  .app.panel-left .panel,.app.panel-right .panel{width:100%}
}
@media(orientation:landscape)and (max-height:700px){
  .app.panel-left .panel,.app.panel-right .panel{width:min(430px,46vw)}
}
@media(max-width:760px){
  .app.panel-left .panel,.app.panel-right .panel{width:min(430px,92vw)}
}
@media(max-width:560px){
  .app.panel-center .panel{bottom:78px;width:calc(100% - 18px);height:min(62vh,560px);border-radius:20px;transform:translate(-50%,calc(100% + 18px))}
  .app.panel-center .panel.open{transform:translate(-50%,0)}
  .app.panel-center .panel-head{border-radius:19px 19px 0 0}
  .app.panel-center .grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding-left:12px;padding-right:12px}
}
.card-favorite svg{fill:none}
.card-favorite.on{color:#ffc26e;background:#ffb35f29;border-color:#ffb35f80}
.card-favorite.on svg{fill:currentColor}
.favorite-order{gap:2px}
.favorite-order button{width:24px;height:14px;display:grid;place-items:center;padding:0;border:1px solid rgba(220,235,245,.18);border-radius:4px;background:#060d12b3;color:#cbd7df}
.favorite-order button:hover{background:var(--accent);color:var(--accent-ink)}
.favorite-order button svg{display:block;pointer-events:none}
@media(orientation:landscape)and (max-height:700px){
  .app[class*="theme-"] .logo{aspect-ratio:1.25/1}
}
@media(max-width:420px){
  .app[class*="theme-"] .logo{aspect-ratio:1.42/1}
}