/* A quiet studio frame keeps the characters and gift controls in focus. */
:root { color-scheme:light; font-family:"Segoe UI",system-ui,sans-serif; --studio-ink:#30283e; --studio-muted:#706779; --studio-accent:#765285; }
body { background:#211e30; color:var(--studio-ink); }
.app-shell { max-width:1440px; padding:12px; gap:10px; height:100dvh; }
.stream-card { border:1px solid #ffffff26; border-radius:22px; box-shadow:0 8px 28px #0c0a182d; }
.live-bar { left:16px; right:16px; top:14px; }
.host-profile { background:#272136ef; border-color:#ffffff20; box-shadow:0 4px 18px #0002; padding:7px 10px 7px 7px; gap:10px; border-radius:16px; }
.host-avatar { width:38px; height:38px; border:0; }
.live-bar .host-stack b { color:#fff; font-size:15px; }
.host-profile #like-count,.host-profile .like-pill small { color:#e5d7e9; }
.host-profile .like-pill,.host-profile .like-pill>span { color:#ffb7cf; }
.host-profile .live-pill { background:#cf3164; border-radius:6px; font-size:11px; }
.sound-button,.live-bar .viewer-pill { height:40px; background:#272136eb; border-color:#ffffff29; }
.sound-button { width:40px; }
.viewer-pill .ui-icon { width:19px; height:19px; }
.gift-dock { display:grid; grid-template-columns:minmax(0,1fr); border-radius:20px; background:#fbf9fe; border:1px solid #e4deed; padding:12px; gap:10px; box-shadow:none; }
.dock-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 3px; }
.gift-ledger { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; height:auto; padding:0; min-width:0; color:var(--studio-ink); }
.dock-title { font-size:16px; font-weight:750; }
.gift-ledger>span#target-status { color:var(--studio-muted); font-weight:500; font-size:13px; }
.gift-ledger.has-queue #gift-status { position:static!important; width:auto!important; height:auto!important; overflow:visible!important; clip:auto!important; white-space:normal!important; margin:0!important; color:#8a5076; font-size:12px; }
.dock-wallet { display:flex; align-items:center; gap:14px; flex:none; }
.dock-wallet>span { display:flex; flex-direction:column; text-align:right; gap:1px; color:var(--studio-ink); }
.dock-wallet strong { font-size:19px; line-height:1.1; font-variant-numeric:tabular-nums; }
.dock-wallet small { font-size:12px; color:var(--studio-muted); }
.wardrobe-open { min-height:44px; gap:7px; padding:9px 16px; border-radius:12px; border:1px solid #665079; background:#665079; color:white; font-size:14px; }
.wardrobe-open .ui-icon { width:20px; height:20px; }
.wardrobe-open:hover { background:#503a63; }
.gift-buttons { gap:8px; }
.gift-buttons button,.gift-buttons button.gg { min-height:76px; flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:2px; padding:10px 14px; border:1px solid #e0d8e9; border-radius:12px; background:#fff; color:#594566; box-shadow:0 2px 0 #e1d8e9; }
.gift-buttons button:nth-child(3),.gift-buttons button:nth-child(4) { color:#445e80; background:#f4f7fc; border-color:#dce3ee; box-shadow:0 2px 0 #dce3ee; }
.gift-buttons button b { font-size:15px; }
.gift-icon { width:31px; height:31px; }
.gift-value { font-size:13px; line-height:1; font-weight:650; padding:5px 7px; border-radius:6px; background:#f4eaf3; color:#845371; }
.gift-value.subtract { color:#5f6781; background:#eaeef7; }
.gift-buttons button:hover:not(:disabled) { border-color:#a989bd; background:#faf3ff; transform:translateY(-1px); }
.gift-buttons button:active { transform:translateY(1px); }
.gift-buttons button:focus-visible,.wardrobe-open:focus-visible,.sound-button:focus-visible { outline:3px solid #e397c2; outline-offset:3px; }
.bubble { padding:10px 13px; font-family:inherit; font-size:14px; line-height:1.35; font-weight:650; color:#47354f; border-color:#dfcde2; border-radius:14px; box-shadow:0 4px 14px #291f3826; }
.points-toast { font-family:inherit; }
/* Wardrobe: clear collections, generous art, and one action per outfit. */
.wardrobe-dialog { color:var(--studio-ink); background:#f6f3f9; border-color:#ded6e6; border-radius:22px; }
.studio-header { background:#fff; border-color:#e7e0ed; padding:18px 22px; }
.studio-header h2 { font-size:24px; letter-spacing:-.025em; }
.studio-header #wardrobe-count { display:block; color:var(--studio-muted); font-size:13px; margin-top:2px; }
.wardrobe-dialog #wardrobe-close { color:#61506e; background:#f5f1f8; border-color:#e6deed; min-width:44px; height:44px; }
.wardrobe-dialog .wardrobe-wallet { border-color:#e7dfed; background:#f8f4fc; color:#684d7e; padding:10px 14px; }
.wardrobe-dialog .wardrobe-wallet strong { color:#4f3a65; }
.wardrobe-dialog .wardrobe-controls { background:#fff; border-color:#e7e0ed; padding:12px 22px; gap:12px; }
.wardrobe-dialog .wardrobe-tabs { padding:4px; background:#f0ebf5; border-radius:12px; }
.wardrobe-dialog .wardrobe-tabs button { border:0; background:transparent; border-radius:9px; min-height:38px; color:#67586f; padding:7px 17px; }
.wardrobe-dialog .wardrobe-tabs button[aria-pressed="true"] { background:#765285; color:white; box-shadow:0 2px 5px #3b244824; }
.wardrobe-dialog[data-section="mia"] .wardrobe-tabs button[aria-pressed="true"] { background:#526e99; }
.wardrobe-tools { flex-wrap:wrap; }
.wardrobe-dialog .wardrobe-tools select { border-color:#e0d7e9; border-radius:9px; background:#fff; color:#645370; padding:8px 10px; min-height:40px; }
.wardrobe-tools label[hidden] { display:none; }
.closet-collection { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); padding:20px 22px; gap:16px; scrollbar-color:#c3b2ce transparent; }
.closet-card { grid-template-rows:210px minmax(56px,auto) 44px; gap:10px; padding:12px; border:1px solid #e6dfed; background:#fff; border-radius:16px; box-shadow:0 3px 12px #33253f05; }
.closet-card.is-equipped { padding:11px; border-color:#a27fb7; background:#fff; box-shadow:0 0 0 3px #a27fb718; }
.wardrobe-dialog[data-section="mia"] .closet-card.is-equipped { background:#fff; border-color:#87a0c1; box-shadow:0 0 0 3px #87a0c118; }
.closet-art { position:relative; padding:10px; border-radius:10px; background:#f8f5fa; }
.closet-caption { align-self:center; text-align:center; }
.closet-caption>small { color:#786683; font-size:12px; }
.closet-card h3 { font-size:16px; margin:4px 0 0; font-weight:650; line-height:1.25; }
.starter-badge { position:absolute; top:8px; left:8px; border-radius:6px; padding:4px 7px; background:#e7efe9; color:#426c52; font:650 12px system-ui; }
.closet-card>button { background:#765285; border-color:#765285; border-radius:10px; min-height:44px; }
.closet-card>button:hover:not(:disabled) { filter:brightness(.92); }
.closet-card>button:disabled,.wardrobe-dialog[data-section="mia"] .closet-card>button:disabled { background:#f1ecf5; color:#8a7b94; border-color:#e8dfed; }
.closet-card.is-equipped>button:disabled { background:#efe7f6; color:#75508b; border-color:transparent; }
.wardrobe-dialog[data-section="mia"] .closet-card.is-equipped>button:disabled { background:#e9eff7; color:#526e99; }
.wardrobe-dialog[data-layout="rail"] .closet-card { grid-template-rows:minmax(0,1fr) auto 44px; }
.wardrobe-dialog[data-layout="list"] .closet-card { grid-template-columns:86px minmax(0,1fr) 140px; grid-template-rows:100px; padding:10px; }
.wardrobe-dialog[data-layout="list"] .closet-card.is-equipped { padding:9px; }
.wardrobe-dialog[data-layout="list"] .closet-caption,.wardrobe-dialog[data-layout="list"] .closet-card h3 { text-align:left; }
.wardrobe-dialog[data-layout="list"] .starter-badge { top:2px; left:2px; font-size:11px; padding:2px 4px; }
.studio-footer { border-color:#e7e0ed; background:#fff; padding:8px 22px; min-height:50px; }
.wardrobe-dialog #wardrobe-status { color:#766781; font-size:14px; }
.studio-music .ambient-controls { background:#fff; border-color:#ddd1e5; }
.reset-open { color:#8c6a7a; }
@media(max-width:800px) and (orientation:portrait) {
  .app-shell { padding:6px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); gap:6px; }
  .stream-card { border-radius:18px; }
  .live-bar { left:9px; right:9px; top:10px; gap:6px; }
  .host-profile { border-radius:13px; gap:7px; padding:6px 8px 6px 6px; }
  .host-avatar { width:31px; height:31px; }
  .live-bar .host-stack b { font-size:14px; }
  .sound-button,.live-bar .viewer-pill { height:36px; }
  .sound-button { width:36px; }
  .gift-dock { padding:9px; gap:8px; border-radius:16px; }
  .dock-heading { gap:8px; }
  .dock-title { font-size:15px; }
  .dock-wallet { gap:9px; }
  .dock-wallet strong { font-size:17px; }
  .wardrobe-open { padding:8px 12px; min-height:42px; }
  .gift-buttons { gap:5px; }
  .gift-buttons button,.gift-buttons button.gg { min-height:88px; flex-direction:column; flex-wrap:nowrap; gap:4px; padding:8px 2px; border-radius:10px; }
  .gift-buttons button b { font-size:13px; }
  .gift-icon { width:27px; height:27px; }
  .gift-value { font-size:12px; padding:3px 5px; }
  .bubble { font-size:13px; padding:8px 10px; }
}
@media(max-width:700px) {
  .wardrobe-dialog { border-radius:0; }
  .studio-header { padding:12px; gap:10px; }
  .studio-header h2 { font-size:21px; }
  .wardrobe-dialog .wardrobe-controls { padding:10px 12px; align-items:stretch; flex-direction:column; }
  .wardrobe-dialog .wardrobe-tabs { align-self:flex-start; }
  .wardrobe-dialog .wardrobe-tools { margin:0; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr); gap:6px; }
  .wardrobe-dialog .wardrobe-tools select { width:100%; padding:8px 7px; font-size:13px; }
  .closet-collection { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:10px; }
  .closet-card { padding:9px; gap:8px; grid-template-rows:clamp(130px,22dvh,200px) minmax(56px,auto) 44px; border-radius:13px; }
  .closet-card.is-equipped { padding:8px; }
  .closet-art { padding:9px; }
  .closet-card h3 { font-size:15px; }
  .wardrobe-dialog[data-layout="list"] .closet-card { grid-template-columns:64px minmax(0,1fr) 99px; grid-template-rows:92px; gap:9px; padding:8px; }
  .wardrobe-dialog[data-layout="list"] .closet-card.is-equipped { padding:7px; }
  .studio-footer { padding:8px 12px max(8px,env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  .host-avatar { display:none; }
  .dock-wallet { gap:7px; }
  .wardrobe-open { padding:8px 10px; }
}
@media(orientation:landscape) and (max-height:560px) {
  .app-shell { padding:5px; gap:5px; }
  .gift-dock { grid-template-columns:230px minmax(0,1fr); padding:7px; gap:10px; }
  .dock-heading { gap:8px; }
  .dock-title { font-size:14px; }
  .dock-wallet { gap:8px; }
  .dock-wallet small { display:none; }
  .gift-buttons { grid-column:2; grid-row:1; gap:5px; }
  .gift-buttons button,.gift-buttons button.gg { min-height:54px; padding:5px; gap:4px; }
  .gift-buttons button b { font-size:13px; }
  .gift-icon { width:22px; height:22px; }
  .gift-value { font-size:12px; padding:3px; }
}
@media(prefers-reduced-motion:reduce) { .gift-buttons button { transition:none; } }