/* UG visual refinement: quiet dark frame, crisp data rows, one restrained accent. */
:root{
  --color-bg:#0e141b;
  --color-bg-elevated:#111a23;
  --color-surface:#17212b;
  --color-surface-raised:#1c2934;
  --color-surface-soft:#243441;
  --color-border:#2a3945;
  --color-border-strong:#405360;
  --color-text:#f3f5f5;
  --color-text-secondary:#b4c0c7;
  --color-text-muted:#91a2ad;
  --color-accent:#a6d0da;
  --color-accent-soft:#1b3942;
  --color-highlight:#f6a090;
  --paper:#18232d;
  --paper-soft:#202e3a;
  --paper-ink:#f1f5f6;
  --paper-sub:#a8b9c3;
  --game-deep:#a6d0da;
  --shadow-card:0 2px 12px rgba(0,0,0,.08);
  --radius-md:12px;
  --radius-lg:15px;
}
body[data-game="dota2"]{--color-accent:#f5aa98;--color-accent-soft:#3b2b2b;--game-deep:#f5aa98}
body[data-game="cs2"]{--color-accent:#e8bf85;--color-accent-soft:#3b3427;--game-deep:#e8bf85}
body[data-game="valorant"]{--color-accent:#e9a7ae;--color-accent-soft:#402d35;--game-deep:#e9a7ae}
html,body,.app-shell{background:var(--color-bg)}
body{background:var(--color-bg);font-family:"Segoe UI Variable","Microsoft YaHei UI","Segoe UI",sans-serif}
.page.active{animation:page-in .15s ease-out}
@media(prefers-reduced-motion:reduce){.page.active{animation:none}*{scroll-behavior:auto!important;transition-duration:0ms!important}}

/* Frame and wayfinding */
.topbar{height:64px;border-color:var(--color-border);background:#0d141b;backdrop-filter:none}
.brand{gap:10px}.brand img{width:34px;height:34px;padding:2px;border:0;border-radius:7px;background:transparent}
.brand strong{font-size:17px;letter-spacing:.01em}.brand small{font-size:10px}
.sync-state{display:none!important}
.analysis-grid>.module-polymarket{grid-column:1 / -1;min-width:0;width:100%;box-sizing:border-box}
.module-polymarket{text-align:center}
.module-polymarket .analysis-card-header{justify-content:center}
.map-history-sides{display:grid;gap:20px}
.map-history-side{min-width:0}
.map-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.map-controls strong{margin-inline-end:auto}
.map-controls label{display:flex;align-items:center;gap:6px;font-size:12px}
.map-controls select{padding:6px;border:1px solid #46606b;border-radius:6px;background:#17242e;color:#eef4f6}
.map-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px;font-size:12px;color:#adbdc8}
.map-summary b{color:#eef4f6}
.map-table-scroll{overflow:auto;max-height:520px;border:1px solid #354550;border-radius:8px}
.map-history-table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}
.map-history-table th,.map-history-table td{padding:12px 10px;border-bottom:1px solid #354550;text-align:center}
.map-history-table th{position:sticky;top:0;background:#17242e;color:#adbdc8}
.map-history-table .threshold-high{color:#a6d0da;font-weight:800}
@media(min-width:1100px){.map-history-sides{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sync-state i{width:6px;height:6px;background:#83c9ad;box-shadow:none}
.mobile-nav{border-color:var(--color-border);background:#111b24;box-shadow:none}
.nav-button{color:var(--color-text-secondary);transition:background .15s ease,color .15s ease}
.nav-button:hover{background:#20313e;color:var(--color-text)}
.nav-button.active{border-color:#415765!important;background:#263946!important;color:#fff!important;box-shadow:none!important}
.nav-button.active::after{display:none!important}
.nav-button img{opacity:.8}.nav-button.active img{opacity:1;filter:invert(1) brightness(1.08)}

/* Heading, game switch, state tabs */
.page-intro{padding:0 2px 16px}
.page-intro .eyebrow{margin-bottom:7px;color:var(--color-text-muted);font-size:10px;letter-spacing:.09em}
.page-intro>div h1{margin:0;color:#fff;font-size:31px;line-height:1.1;letter-spacing:-.035em}
.page-intro>p:last-child,#sync-note{margin-top:8px;color:var(--color-text-muted);font-size:11px}
#today-date{color:var(--color-text-secondary);font-size:12px;font-weight:700}
.game-switch{gap:0;margin-bottom:15px;padding:0;border:0;border-bottom:1px solid var(--color-border);border-radius:0;background:transparent}
.game-switch button{position:relative;min-height:54px;gap:2px;border:0;border-radius:0;background:transparent;color:var(--color-text-muted)}
.game-switch button span{font-family:Bahnschrift,"Segoe UI Variable",sans-serif;font-size:17px;font-weight:750}
.game-switch button small{font-size:10px}
.game-switch button.active{background:transparent;color:#f5f8f8;box-shadow:none}
.game-switch button.active::after{left:24%;right:24%;bottom:-1px;height:2px;border-radius:0;background:var(--color-accent);box-shadow:none}
.status-tabs{margin-bottom:16px;border-color:var(--color-border)}
.status-tabs button{min-height:42px;color:var(--color-text-muted);font-size:12px}
.status-tabs button.active{color:#f4f6f7;box-shadow:inset 0 -2px var(--color-accent)}
.status-tabs button b{min-width:18px;height:18px;border-radius:5px;background:#22313d;color:#a6b9c4}
.status-tabs button.active b{background:var(--color-accent-soft);color:var(--color-accent)}

/* First match is prominent without becoming a billboard. */
.featured-match{margin-bottom:20px;border:1px solid #3a4a56;border-radius:14px;background:#17232d;box-shadow:none}
.featured-match::before{display:none}
.featured-match>a{padding:17px 22px 15px}
.featured-kicker{margin:0;color:var(--color-text-muted);font-size:11px}
.featured-kicker span{color:var(--color-text-secondary);letter-spacing:.02em}
.featured-kicker strong{padding-right:36px;color:var(--color-text-muted);font-weight:700}
.featured-time{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-top:7px;text-align:center}
.featured-time strong{font-size:27px;line-height:1}.featured-time span{margin:0;font-size:11px}
.featured-teams{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);margin:11px 0 14px}
.featured-teams>div{grid-template-columns:48px minmax(0,1fr);align-items:center;justify-items:start;gap:9px;text-align:left}
.featured-teams>div:last-child{grid-template-columns:minmax(0,1fr) 48px;justify-items:end;text-align:right}
.featured-teams>div:last-child img{grid-column:2;grid-row:1}.featured-teams>div:last-child strong{grid-column:1;grid-row:1}
.featured-teams img{width:48px;height:48px;padding:5px;border:1px solid #40515e;border-radius:9px;background:#111a23;box-shadow:none}
.featured-teams strong{font-size:16px;line-height:1.25}.featured-teams>b{color:var(--color-text-muted);font-size:11px}
.featured-forecast{padding:10px 11px;border:1px solid #2b3b47;border-radius:8px;background:#111a22}
.featured-forecast strong{font-size:18px}.featured-forecast span{color:var(--color-text-muted);font-size:10px}
.featured-forecast i{height:4px;margin-top:8px;background:linear-gradient(90deg,var(--color-accent) 0 var(--p),#eca493 var(--p))}
.featured-forecast i::after{width:7px;height:7px;border:1px solid #f4f6f6;background:#17232d}
.featured-action{margin-top:11px;padding-top:10px;border-color:#32424e;color:var(--color-text-secondary);font-size:11px;font-weight:700}
.featured-action span{color:var(--color-accent);font-size:16px}
.schedule-list-heading{margin-bottom:10px}.schedule-list-heading h2{font-size:17px}.schedule-list-heading span{color:var(--color-text-muted);font-size:10px}

/* Schedule and library use a single, consistent dark data surface. */
.schedule-predict{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:9px 15px;border-top:1px solid var(--color-border);color:var(--paper-sub);font-size:12px}
.schedule-predict button{border:1px solid #405361;border-radius:7px;background:#1d2c37;color:#e9f0f4;padding:6px 12px;font:inherit;cursor:pointer;max-width:100%;overflow-wrap:anywhere}
.schedule-predict button:hover,.schedule-predict button.selected{border-color:#63c2b2;background:#21453f;color:#a7f0df}
.schedule-predict button:disabled{opacity:.5;cursor:wait}
.card-list,.library-grid,.ranking-list{gap:7px}
.schedule-row,.library-card,.ranking-entry,.expert-product{border:1px solid var(--color-border);border-radius:11px;background:var(--paper);box-shadow:none}
.schedule-row>a{min-height:79px;grid-template-columns:65px minmax(0,1fr) 64px;gap:15px;padding:11px 15px;color:var(--paper-ink)}
.schedule-row>a:hover{background:#21303b}.schedule-row>a:active{background:#283b48}
.schedule-time{border-right:1px solid var(--color-border)}
.schedule-time strong{color:#edf4f6;font-size:18px}.schedule-time span{font-size:10px}
.schedule-league{margin-bottom:6px;color:var(--paper-sub);font-size:10px}
.schedule-teams{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:5px}
.schedule-teams span,.schedule-teams span:last-child{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;justify-content:start;text-align:start;gap:7px;color:var(--paper-ink);font-size:13px;line-height:1.2;min-height:28px}
.schedule-teams em{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal}
.schedule-teams img{display:block;width:28px;height:28px;min-width:28px;max-width:28px;box-sizing:border-box;object-fit:contain;object-position:center;margin:0;padding:3px;border:1px solid #3d4d5b;border-radius:6px;background:#111a23;filter:none;outline:none}
.schedule-teams b{color:var(--color-text-muted);font-size:10px}
.schedule-edge strong{color:var(--color-accent);font-size:15px}.schedule-edge span{font-size:9px}.schedule-edge i{color:var(--color-text-muted);font-size:18px}
.schedule-row .favorite-button{top:7px;right:7px;width:27px;height:27px;border-color:#3b4b58;background:#1e2c37;color:#a6b5bf}
.favorite-button{border-radius:8px;box-shadow:none;backdrop-filter:none}
.favorite-button.active{border-color:#be8a75;background:#49342e;color:#ffc0a8}
.library-card.team-entry{min-height:100px;color:var(--paper-ink)}
.library-card h3{color:var(--paper-ink);font-size:16px}.library-card p{font-size:11px}
.library-card>img{border-radius:10px;box-shadow:none;filter:none}
.team-rank{border-color:var(--color-border)}.team-rank span{color:var(--color-accent)}.team-rank small{color:var(--color-text-muted)}
.team-power span{border-color:var(--color-border);color:var(--paper-sub)}
.entry-next.muted{color:var(--color-text-muted)}
.library-search{border-color:var(--color-border);border-radius:10px;background:#17232d;box-shadow:none}
.game-filter button{border-color:var(--color-border);border-radius:7px;background:#18232d;color:var(--color-text-secondary);font-size:11px}
.game-filter button.active{border-color:#56717c;background:#263b43;color:#d5eef2}

/* Detail and community pages keep the same visual language. */
.detail-hero{border-color:#3a4a56;background:#17232d}
.analysis-card,.points-card{border:1px solid var(--color-border);border-radius:12px;background:var(--paper);color:var(--paper-ink);box-shadow:none}
.analysis-card .eyebrow{color:var(--color-accent)}
.reference-card{background:#1d2533}.reference-card::after{display:none}
.hero-chip,.player-card,.form-side,.h2h-list{background:var(--paper-soft);color:var(--paper-ink)}
.bp-side+.bp-side,.form-head,.form-row,.h2h-row{border-color:var(--color-border)}
.form-side,.h2h-list{border-color:var(--color-border)}
.h2h-summary{background:#202d38}.h2h-score .winner{color:#f1f5f6}
.profile-hero,.wallet-panel,.ranking-lead,.account-panel,.expert-center{border-color:var(--color-border);background:#17232d;box-shadow:none}
.ranking-lead,.expert-lead{padding:19px 21px;border-radius:12px;background:#17232d}
.ranking-lead h2{font-size:22px}.ranking-lead p{font-size:12px}.ranking-lead>strong{color:#eab79c;font-size:31px}
.ranking-entry,.expert-product{color:var(--paper-ink)}.ranking-place{background:#2c3f4b;color:#e6f0f3}
.ranking-user small,.ranking-cell,.product-meta,.product-match,.product-preview{color:var(--paper-sub)}
.ranking-score{color:var(--color-accent)}
.expert-product{padding:19px 21px}.product-foot{border-color:var(--color-border)}
.product-meta>strong{background:#293a46;color:#d1e0e7}.product-foot>div strong{color:#eab79c}
.wallet-top{background:#1a2a36}.wallet-breakdown,.wallet-ledger{border-color:var(--color-border)}
.wallet-points{border-color:var(--color-border);background:#223440}
.nickname-form input,.expert-form input,.expert-form textarea,.expert-form select{border-color:#40525f;background:#111b24}

@media(min-width:900px){
  .app-shell{grid-template-columns:184px minmax(0,1fr);grid-template-rows:64px minmax(0,1fr)}
  .topbar{height:64px;padding-inline:24px}
  #app-main{padding:25px 36px 44px}
  .mobile-nav{gap:4px;padding:18px 9px;border-color:var(--color-border);background:#121d26}
  .nav-button{min-height:46px;gap:12px;padding:0 13px;border-radius:8px;font-size:13px}
  .nav-button.active{border-radius:8px}
  .page-intro>div h1{font-size:34px}
}
@media(max-width:899px){
  #app-main{padding-top:15px}
  .topbar{height:62px}
  .mobile-nav{border-top:1px solid var(--color-border)}
  .nav-button{min-height:52px;border-radius:8px;font-size:10px}
  .nav-button.active{border-radius:8px}
}
@media(max-width:620px){
  .page-intro>div h1{font-size:28px}
  .featured-match>a{padding:14px 14px 12px}
  .featured-time strong{font-size:24px}
  .featured-teams{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
  .featured-teams>div{grid-template-columns:38px minmax(0,1fr);gap:6px}
  .featured-teams>div:last-child{grid-template-columns:minmax(0,1fr) 38px}
  .featured-teams img{width:38px;height:38px}
  .featured-teams strong{font-size:12px}
  .schedule-row>a{min-height:91px;grid-template-columns:51px minmax(0,1fr) 45px;gap:8px;padding:9px}
  .schedule-time strong{font-size:16px}.schedule-time span{font-size:8px}
  .schedule-teams{grid-template-columns:minmax(0,1fr);gap:3px}
  .schedule-teams span,.schedule-teams span:last-child{justify-content:flex-start;gap:5px;text-align:left;font-size:11.5px}
  .schedule-teams span,.schedule-teams span:last-child{grid-template-columns:24px minmax(0,1fr);min-height:24px}
  .schedule-teams b{display:none}.schedule-teams img{width:24px;height:24px;min-width:24px;max-width:24px;padding:2px}
  .schedule-league{font-size:9px}.schedule-edge strong{font-size:12px}
  .schedule-list-heading span{display:none}
  .library-card h3{font-size:15px}
  .ranking-lead{padding:16px}.expert-product{padding:16px}
}
@media(min-width:900px){
  body.preview-phone .app-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
  body.preview-phone #app-main{padding:15px 13px 26px}
  body.preview-phone .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);padding:7px 4px}
  body.preview-phone .nav-button{display:grid;justify-content:center;gap:4px;padding:4px 1px;font-size:10px}
  body.preview-phone .page-intro>div h1{font-size:28px}
  body.preview-phone .featured-match>a{padding:14px 14px 12px}
  body.preview-phone .featured-time strong{font-size:24px}
  body.preview-phone .featured-teams{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
  body.preview-phone .featured-teams>div{grid-template-columns:38px minmax(0,1fr);gap:6px}
  body.preview-phone .featured-teams>div:last-child{grid-template-columns:minmax(0,1fr) 38px}
  body.preview-phone .featured-teams img{width:38px;height:38px}
  body.preview-phone .featured-teams strong{font-size:12px}
  body.preview-phone .schedule-row>a{min-height:91px;grid-template-columns:51px minmax(0,1fr) 45px;gap:8px;padding:9px}
  body.preview-phone .schedule-time strong{font-size:16px}
  body.preview-phone .schedule-time span{font-size:8px}
  body.preview-phone .schedule-teams{grid-template-columns:minmax(0,1fr);gap:3px}
  body.preview-phone .schedule-teams span,body.preview-phone .schedule-teams span:last-child{justify-content:flex-start;gap:5px;text-align:left;font-size:11.5px}
  body.preview-phone .schedule-teams b{display:none}
  body.preview-phone .schedule-teams span,body.preview-phone .schedule-teams span:last-child{grid-template-columns:24px minmax(0,1fr);min-height:24px}
  body.preview-phone .schedule-teams img{width:24px;height:24px;min-width:24px;max-width:24px;padding:2px}
  body.preview-phone .schedule-league{font-size:9px}
  body.preview-phone .schedule-edge strong{font-size:12px}
  body.preview-phone .schedule-list-heading span{display:none}
  body.preview-phone .library-card h3{font-size:15px}
  body.preview-phone .ranking-filters{display:grid;gap:8px}
  body.preview-phone .ranking-period-label{justify-content:space-between}
  body.preview-phone .ranking-table-head{display:none}
  body.preview-phone .ranking-entry{grid-template-columns:minmax(0,1fr) 84px 75px;gap:5px 8px;padding:11px 13px}
  body.preview-phone .ranking-user{grid-column:1/-1}
  body.preview-phone .ranking-cell{font-size:12px}
  body.preview-phone .ranking-cell::before,body.preview-phone .ranking-score::before{content:attr(data-label) ' ';color:#8091a1;font:700 10px/1 "Microsoft YaHei UI",sans-serif}
  body.preview-phone .ranking-entry .ranking-cell:first-of-type{text-align:left}
  body.preview-phone .ranking-score{font-size:17px}
}

/* Top navigation and account entry. The match workspace stays full-width. */
.app-shell{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:64px 54px minmax(0,1fr)!important}
.topbar{grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;margin:0!important;padding:0 24px!important;border-inline:0!important;border-bottom:1px solid var(--color-border)!important}
.mobile-nav{grid-column:1!important;grid-row:2!important;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:4px;width:100%!important;max-width:none!important;min-height:54px!important;margin:0!important;padding:4px 24px!important;border:0!important;border-bottom:1px solid var(--color-border)!important;border-radius:0!important;background:#121d26!important}
.mobile-nav .nav-button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:105px;min-height:44px;margin:0;padding:0 15px;border:1px solid transparent;border-radius:8px;font-size:12px;white-space:nowrap}
.mobile-nav .nav-button img{width:18px;height:18px}
.mobile-nav .nav-button.active{border-color:#415765!important;border-radius:8px}
#app-main{grid-column:1!important;grid-row:3!important;min-height:0}
.header-actions,.auth-actions{display:flex;align-items:center;gap:8px}
.auth-actions[hidden]{display:none!important}
.auth-actions button{min-height:34px;padding:0 13px;border:1px solid #3b4c59;border-radius:7px;background:#17232d;color:#ecf3f5;font:700 12px/1 "Segoe UI Variable","Microsoft YaHei UI",sans-serif;cursor:pointer}
.auth-actions button:hover{border-color:#8fbac6;background:#253a46}
.auth-actions button.primary{border-color:#a6d0da;background:#a6d0da;color:#101e27}
.auth-actions button.primary:hover{background:#c7e5ea}
#auth-account{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-dialog{position:relative;width:min(440px,100%);max-height:none;margin:30px auto;padding:29px;border:1px solid #46606b;border-radius:15px;background:#17242e;color:#f2f6f6;box-shadow:none}
#auth-bind-open{display:none!important}
.auth-forgot[hidden]{display:none}
.site-footer{padding:28px 12px;text-align:center;color:#9fb1bb;font-size:12px}
.site-footer a{color:inherit;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.auth-dialog::backdrop{background:rgba(4,10,15,.77)}
.auth-dialog[open]{animation:page-in .18s ease-out}
.auth-close{position:absolute;top:16px;right:17px;width:30px;height:30px;border:0;border-radius:6px;background:#263844;color:#dce8eb;font-size:24px;line-height:1;cursor:pointer}
.auth-dialog .eyebrow{margin:0 0 8px;color:var(--color-accent);font-size:10px;letter-spacing:.13em}
.auth-dialog h2{margin:0;color:#fff;font-size:27px;letter-spacing:-.025em}
.auth-intro{margin:7px 0 22px;color:#a9bac4;font-size:12px;line-height:1.5}
#auth-form{display:grid;gap:14px}
.auth-methods{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border:1px solid #405360;border-radius:9px;background:#0f1a23}
.auth-methods button{min-height:34px;border:0;border-radius:6px;background:transparent;color:#9fb1bb;font-size:12px;font-weight:750;cursor:pointer}
.auth-methods button[aria-pressed="true"]{background:#a6d0da;color:#0f2028}
#auth-form label{display:grid;gap:6px;color:#d5e1e5;font-size:12px;font-weight:700}
#auth-form [hidden]{display:none!important}
#auth-form input{width:100%;min-height:43px;padding:0 12px;border:1px solid #405360;border-radius:7px;outline:0;background:#0f1a23;color:#fff;font:500 14px "Segoe UI Variable","Microsoft YaHei UI",sans-serif}
#auth-form input:focus{border-color:#a6d0da;box-shadow:0 0 0 3px rgba(166,208,218,.14)}
#auth-form input::placeholder{color:#8498a3}
.auth-code-field>label{display:block;margin:0 0 6px;color:#d5e1e5;font-size:12px;font-weight:700}
.auth-code-row{display:grid;grid-template-columns:minmax(0,1fr) 111px;gap:8px}
.auth-code-row button{border:1px solid #547281;border-radius:7px;background:#253e4b;color:#dbf0f3;font-size:11px;font-weight:700;cursor:pointer}
.auth-code-row button:disabled{opacity:.56;cursor:not-allowed}
.auth-submit{min-height:44px;margin-top:4px;border:0;border-radius:7px;background:#a6d0da;color:#0f2028;font-size:14px;font-weight:800;cursor:pointer}
.auth-submit:hover{background:#c4e3e9}.auth-submit:disabled{opacity:.55;cursor:wait}
.auth-error{margin:0;color:#ffafa6;font-size:12px}
.auth-forgot{margin:10px 0 0;text-align:right}
.auth-forgot button{border:0;background:transparent;color:#b5e1e9;font-size:12px;font-weight:700;cursor:pointer}
.auth-bind-open{margin-top:12px;padding:9px 12px;border:1px solid #4a6875;border-radius:7px;background:#1a313d;color:#d6edf0;font-size:12px;font-weight:700;cursor:pointer}
.auth-switch{margin:18px 0 0;color:#9fb1bb;font-size:12px;text-align:center}
.auth-switch button{border:0;background:transparent;color:#b5e1e9;font-weight:800;cursor:pointer}
.auth-footnote{margin:18px 0 0;padding-top:13px;border-top:1px solid #344650;color:#91a4af;font-size:11px;line-height:1.5}
@media(max-width:899px){
  .app-shell{grid-template-rows:60px 52px minmax(0,1fr)!important}
  .topbar{height:60px!important;padding:0 13px!important}
  .brand img{width:29px;height:29px}.brand strong{font-size:15px}.brand small{font-size:9px}
  .header-actions{gap:5px}.auth-actions{gap:5px}
  .auth-actions button{min-height:30px;padding:0 10px;font-size:11px}
  .mobile-nav{min-height:52px!important;padding:3px 5px!important;gap:1px}
  .mobile-nav .nav-button{display:grid;align-content:center;justify-items:center;gap:2px;flex:1;min-width:0;min-height:45px;padding:3px 0;font-size:10px}
  .mobile-nav .nav-button img{width:18px;height:18px}
  .sync-state{display:none}
  #app-main{padding-bottom:25px}
}
@media(min-width:900px){
  body.preview-phone .app-shell{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:60px 52px minmax(0,1fr)!important}
  body.preview-phone .topbar{height:60px!important;padding:0 13px!important}
  body.preview-phone .brand img{width:29px;height:29px}
  body.preview-phone .brand strong{font-size:15px}
  body.preview-phone .brand small{font-size:9px}
  body.preview-phone .header-actions,body.preview-phone .auth-actions{gap:5px}
  body.preview-phone .auth-actions button{min-height:30px;padding:0 10px;font-size:11px}
  body.preview-phone .sync-state{display:none}
  body.preview-phone .mobile-nav{min-height:52px!important;padding:3px 5px!important;gap:1px}
  body.preview-phone .mobile-nav .nav-button{display:grid;align-content:center;justify-items:center;gap:2px;flex:1;min-width:0;min-height:45px;padding:3px 0;font-size:10px}
  body.preview-phone .mobile-nav .nav-button img{width:18px;height:18px}
}