/* XORA Design System v6 — one card, button, header, row, spacing and type scale for every screen.
   Modeled on the founder's Flutter "Xora OS" app (XoraCard r16/p16/1px border, GradientButton h52/r14 + glow,
   bottom nav pill r12 / 10px labels) and the Nexus moodboard. Hide-only: nothing removed from the DOM. */
html.xc{--ds-r:16px;--ds-rb:14px;--ds-s1:8px;--ds-s2:12px;--ds-s3:16px;--ds-s4:24px;--ds-s5:32px;
 --ds-card:rgba(17,22,36,.86);--ds-card-2:rgba(24,31,50,.9);--ds-line:rgba(var(--ds-hi),.12);--ds-line-2:rgba(var(--ds-hi),.28);
 --ds-ac1:#2F6FE4;--ds-ac2:#173F96;--ds-glow:rgba(var(--ds-mid),.42);--ds-text:#F2F5FF;--ds-muted:#A9B6D3;
 --ds-ease:cubic-bezier(.2,.8,.2,1);--ds-spring:cubic-bezier(.34,1.4,.64,1)}
/* ---------- Type scale: 28 / 20 / 17 / 15 / 13 / 11 ---------- */
html.xc .screen h1{font:700 28px/1.15 "XC Display",system-ui,sans-serif!important;letter-spacing:-.02em!important;text-transform:none!important;
 background:none!important;-webkit-background-clip:border-box!important;color:var(--ds-text)!important;margin:0 0 6px!important}
html.xc .screen h1 > span{display:none!important}
html.xc .screen h2{font:650 20px/1.25 "XC Display",system-ui,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;color:var(--ds-text)!important;background:none!important}
html.xc .screen h3{font:600 17px/1.3 "XC Display",system-ui,sans-serif!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--ds-text)!important}
html.xc .screen .gold-gradient-text{background:none!important;color:var(--ds-text)!important;-webkit-text-fill-color:currentColor!important;text-transform:none!important;letter-spacing:-.01em!important}
html.xc .screen p{line-height:1.5}
html.xc .screen h1 + p,html.xc .screen h1 ~ p.text-sm{font-size:15px!important;color:var(--ds-muted)!important;margin-bottom:var(--ds-s4)!important}
html.xc .screen .text-xs{font-size:13px!important}
html.xc .screen :is(.text-\[10px\],.text-\[11px\],.text-\[9px\]){font-size:11px!important;letter-spacing:.02em}
/* Kicker / status chips ("BUILDING", "SCAN", "CREATE", "PRACTICE") are noise on mobile: hidden, not deleted */
html.xc .screen :is(.xora-status-badge,.status-chip,.xora-engine-badge,[class*="badge-building"],[data-status-badge]){display:none!important}
html.xc .screen p.tracking-widest{display:none!important}
/* ---------- Card: XoraCard ---------- */
html.xc .screen :is(.card-base,.card,.glass-card,.xc-panel){background:var(--ds-card)!important;border:1px solid var(--ds-line)!important;border-radius:var(--ds-r)!important;
 box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35)!important;backdrop-filter:none!important;padding:var(--ds-s3)!important}
html.xc .screen :is(.card-base,.card) :is(.card-base,.card){background:var(--ds-card-2)!important;box-shadow:none!important}
html.xc .screen :is(.mb-4,.mb-6,.mb-8):is(.card-base,.card,.grid){margin-bottom:var(--ds-s3)!important}
html.xc .screen :is(.grid){gap:var(--ds-s2)!important}
/* ---------- Buttons: GradientButton ---------- */
html.xc .screen .btn-gold,html.xc #scan-cta{min-height:52px!important;border-radius:var(--ds-rb)!important;font:650 16px/1 "XC Text",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
 background:linear-gradient(180deg,var(--ds-ac1),var(--ds-ac2))!important;color:var(--ds-on)!important;border:1px solid rgba(var(--ds-hi),.55)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px var(--ds-glow)!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px!important}
html.xc .screen .btn-ghost,html.xc .screen button.rounded-xl:not(.btn-gold):not(.card-base):not(.xa-tile),html.xc .screen button.rounded-lg:not(.btn-gold):not(.card-base):not(.role-chip):not(.xa-tile){
 min-height:44px;border-radius:12px!important;background:rgba(255,255,255,.04)!important;border:1px solid var(--ds-line-2)!important;color:var(--ds-text)!important;font-weight:600!important;font-size:14px!important;text-transform:none!important;letter-spacing:0!important}
/* first primary in a screen goes full width = the one primary action */
@media (max-width:1023px){html.xc .screen.active .btn-gold{width:100%}}
/* ---------- Inputs / list rows ---------- */
html.xc .screen :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){min-height:48px;border-radius:12px!important;background:rgba(8,11,20,.7)!important;border:1px solid var(--ds-line-2)!important;color:var(--ds-text)!important;font-size:16px!important;padding:0 14px!important}
html.xc .screen textarea{padding:12px 14px!important}
html.xc .screen label{font-size:13px!important;color:var(--ds-muted)!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important}
html.xc .screen :is(details,.faq-item,.list-row)>summary{min-height:52px;display:flex;align-items:center}
/* ---------- Header: logo + one icon; page title lives in the screen, not twice ---------- */
@media (max-width:1023px){
 html.xc header.sticky{padding:10px 16px!important;background:rgba(7,9,16,.82)!important;border-bottom:1px solid var(--ds-line)!important;min-height:56px}
 html.xc #header-title-c3d4{display:none!important}
 html.xc #easy-more-btn{font-size:0!important;width:40px;height:40px;padding:0!important;border-radius:12px!important;justify-content:center;gap:0!important}
 html.xc #easy-more-btn svg{width:20px;height:20px}
 html.xc #live-clock-g7h8{display:none!important}
 html.xc .main-content > div{padding:20px 16px 0!important}
}
/* ---------- Bottom nav = main navigation ---------- */
html.xc .mobile-bottom-bar{border-radius:22px!important;border:1px solid var(--ds-line-2)!important;background:rgba(10,14,26,.86)!important;height:68px;align-items:center}
html.xc .mobile-bottom-bar>button{font:600 10px/1 "XC Text",sans-serif!important;letter-spacing:.01em;border-radius:12px!important;transition:color .2s var(--ds-ease),background .2s var(--ds-ease),transform .15s var(--ds-ease)}
html.xc .mobile-bottom-bar>button:is([aria-current="page"],.active){background:rgba(var(--ds-mid),.16)!important;color:var(--ds-soft)!important}
html.xc .mobile-bottom-bar>button:is([aria-current="page"],.active) svg{filter:drop-shadow(0 0 6px var(--ds-glow))}
/* ---------- Home: action hub ---------- */
.xa-hub{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 var(--ds-s4)}
.xa-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;padding:12px 4px;border-radius:var(--ds-r);
 background:linear-gradient(180deg,var(--ds-card-2),var(--ds-card));border:1px solid var(--ds-line-2);color:var(--ds-text);font:600 12px/1 "XC Text",sans-serif;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.35)}
.xa-tile .xa-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,var(--ds-ac1),var(--ds-ac2));box-shadow:0 0 16px var(--ds-glow)}
.xa-tile svg{width:20px;height:20px;color:var(--ds-on)}
.xa-tile:first-child{border-color:rgba(var(--ds-hi),.6)}
.xa-label{font:600 11px/1 "XC Text",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ds-muted);margin:0 0 10px}
/* Home: hub replaces the old stats/next-steps/quick-actions stack (hidden, not deleted) */
html.xc #screen-dashboard :is(#empire-command,#dash-stats,#scan-cta,#qa-add-q7r8){display:none!important}
html.xc #screen-dashboard [data-id="102"],html.xc #screen-dashboard [data-id="101"],html.xc #screen-dashboard [data-id="121"]{display:none!important}
html.xc #screen-dashboard > .mb-8{margin-bottom:var(--ds-s4)!important}
html.xc #screen-dashboard #dash-greeting{font-size:28px!important}
/* Home rooms: swipeable card stack */
html.xc #screen-dashboard .xc-deck{order:2}
html.xc #screen-dashboard .xc-mods{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.xc #screen-dashboard .xc-mods::-webkit-scrollbar{display:none}
html.xc #screen-dashboard .xc-mod{flex:0 0 72%;scroll-snap-align:center;border-radius:var(--ds-r)!important;border:1px solid var(--ds-line-2)!important;min-height:200px;
 transition:transform .35s var(--ds-ease),box-shadow .35s var(--ds-ease)}
html.xc #screen-dashboard .xc-mod h3{text-transform:none!important;letter-spacing:-.005em!important;font-size:16px!important}
/* ---------- Motion (transform/opacity only: CLS 0) ---------- */
@keyframes dsIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dsScreen{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
html.xc .screen.active{animation:dsScreen .38s var(--ds-ease) both}
html.xc .screen.active > *{animation:dsIn .5s var(--ds-ease) both}
html.xc .screen.active > *:nth-child(2){animation-delay:.04s}html.xc .screen.active > *:nth-child(3){animation-delay:.08s}
html.xc .screen.active > *:nth-child(4){animation-delay:.12s}html.xc .screen.active > *:nth-child(5){animation-delay:.16s}
html.xc .screen.active > *:nth-child(n+6){animation-delay:.2s}
html.xc .screen.active .xa-tile{animation:dsIn .5s var(--ds-spring) both}
.xa-tile:nth-child(2){animation-delay:.05s!important}.xa-tile:nth-child(3){animation-delay:.1s!important}.xa-tile:nth-child(4){animation-delay:.15s!important}.xa-tile:nth-child(5){animation-delay:.2s!important}
html.xc .screen.active .xc-mod{animation:dsIn .55s var(--ds-ease) both}
html.xc .screen.active .xc-mod:nth-child(2){animation-delay:.06s}html.xc .screen.active .xc-mod:nth-child(3){animation-delay:.12s}html.xc .screen.active .xc-mod:nth-child(n+4){animation-delay:.18s}
html.xc :is(.btn-gold,.btn-ghost,.xa-tile,.xc-mod,.card-base[onclick],button.card-base,.mobile-bottom-bar>button){transition:transform .16s var(--ds-ease),box-shadow .25s var(--ds-ease),background .2s,border-color .2s}
html.xc :is(.btn-gold,.btn-ghost,.xa-tile,.xc-mod,button.card-base,.mobile-bottom-bar>button):active{transform:scale(.96)}
@media (hover:hover){html.xc :is(.xa-tile,.xc-mod,button.card-base):hover{transform:translateY(-2px);border-color:rgba(var(--ds-hi),.6)!important;box-shadow:0 0 0 1px rgba(var(--ds-hi),.25),0 14px 34px rgba(var(--ds-mid),.35)!important}}
html.xc :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:none!important;box-shadow:0 0 0 2px #0A0E1A,0 0 0 4px rgb(var(--ds-hi)),0 0 22px rgba(var(--ds-mid),.65)!important;border-radius:12px}
@media (prefers-reduced-motion:reduce){html.xc *,html.xc *::before,html.xc *::after{animation:none!important;transition:none!important}}
/* ---------- v6 polish pass 2 ---------- */
html.xc{--gold:var(--ds-link);--gold-l:var(--ds-soft)}
html.xc .screen span.rounded-full.font-bold.inline-block{display:none!important}
html.xc #screen-dashboard .xc-mod{padding:0!important}
html.xc #screen-dashboard .xc-mod h3{background:rgba(255,255,255,.04)!important}
html.xc #screen-dashboard .xc-deck::before{content:"Rooms";display:block;font:600 11px/1 "XC Text",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ds-muted);margin:0 0 10px}
html.xc #dash-greeting{color:var(--ds-text)!important;background:none!important}
html.xc .mobile-bottom-bar>button::before,html.xc .mobile-bottom-bar>button::after{display:none!important}
html.xc .mobile-bottom-bar>button:is([aria-current="page"],.xc-on,.active){background:rgba(var(--ds-mid),.18)!important;box-shadow:inset 0 0 0 1px rgba(var(--ds-hi),.35)!important;color:var(--ds-text)!important}
/* Sign-in: same button + field system */
html.xc #auth-card{background:rgba(14,18,30,.92)!important;border:1px solid var(--ds-line-2)!important;border-radius:20px!important;padding:32px 24px!important}
html.xc #auth-card button[onclick="doSignIn()"],html.xc #auth-card :is(#tab-signin,#tab-join)[style*="linear-gradient"]{background:linear-gradient(180deg,var(--ds-ac1),var(--ds-ac2))!important;color:var(--ds-on)!important;border:1px solid rgba(var(--ds-hi),.55)!important;box-shadow:0 6px 18px var(--ds-glow)!important}
html.xc #auth-card button[onclick="doSignIn()"]{height:52px!important;border-radius:14px!important}
html.xc #auth-card [style*="border-bottom:1px solid rgba(201,162,39"]{border-color:var(--ds-line-2)!important}
html.xc #auth-card :is(.auth-link,a){color:var(--ds-link)!important}
/* Collection: one primary (Add item); Scan is in the bottom-nav/hub */
@media (max-width:1023px){html.xc #scan-coll-btn{display:none!important}}
html.xc .screen :is(h1,h2,h3),html.xc #dash-greeting{-webkit-text-fill-color:currentColor!important;background-image:none!important}
html.xc,html.xc body,html.xc #main-app-r5s3{--metal-grad:var(--ds-head)}
html.xc body #main-app-r5s3 .screen :is(h1,h2,h3,.gold-gradient-text),html.xc body .screen :is(h1,h2,h3){background-image:var(--ds-head)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
/* One primary per screen: buttons nested inside cards become secondary (outlined accent) */
html.xc body .screen :is(.card-base,.card) .btn-gold{background:rgba(var(--ds-mid),.12)!important;box-shadow:none!important;border:1px solid rgba(var(--ds-hi),.45)!important;color:var(--ds-soft)!important;min-height:48px!important;font-size:15px!important}
html.xc #screen-collection.coll-is-empty :is([onclick*="exportCollection"],[onclick*="CSV"],[onclick*="Csv"]){display:none!important}
html.xc #screen-collection.coll-is-empty #coll-export-csv{display:none!important}