/* Dedicated small-screen presentation. Existing desktop styles remain authoritative. */
.bxy-mobile-brand,.bxy-mobile-nav,.bxy-mobile-shortcuts,.bxy-mobile-range,.bxy-mobile-menu { display:none; }
html[data-channel-layout="mobile"] { --mobile-gutter:14px; scroll-padding-bottom:100px; }
html[data-channel-layout="mobile"] body { min-width:320px; }
html[data-channel-layout="mobile"] .layout { display:block; min-height:100dvh; }
html[data-channel-layout="mobile"] .sidebar { display:none; }
html[data-channel-layout="mobile"] .main { padding:14px var(--mobile-gutter) calc(94px + env(safe-area-inset-bottom)); width:100%; }
html[data-channel-layout="mobile"] .topbar { min-height:44px; margin-bottom:16px; gap:8px; }
html[data-channel-layout="mobile"] .topbar h1 { font-size:24px; text-wrap:balance; }
html[data-channel-layout="mobile"] .topbar p { font-size:13px; overflow-wrap:anywhere; }
html[data-channel-layout="mobile"] .topbar-actions { display:none; }
html[data-channel-layout="mobile"] .bxy-mobile-brand { display:flex; align-items:center; gap:10px; padding:12px var(--mobile-gutter); padding-top:calc(12px + env(safe-area-inset-top)); background:var(--surface); border-bottom:1px solid var(--line); min-height:64px; }
html[data-channel-layout="mobile"] .bxy-mobile-brand strong { font-size:20px; white-space:nowrap; }
html[data-channel-layout="mobile"] .bxy-mobile-brand > span { font-size:13px; padding-left:10px; border-left:1px solid var(--line-strong); color:var(--muted); }
.bxy-mobile-logo { display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--green-dark); border-radius:7px; font-size:23px; flex-shrink:0; }
html[data-channel-layout="mobile"] .bxy-mobile-brand > button { margin-left:auto; width:44px; height:44px; border:0; background:transparent; color:var(--muted); border-radius:8px; }
.bxy-mobile-brand svg,.bxy-mobile-nav svg,.bxy-mobile-shortcuts svg,.bxy-mobile-menu svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.bxy-skip { position:fixed; top:0; left:10px; transform:translateY(-200%); z-index:2000; padding:12px; color:var(--green-dark); background:white; border:2px solid var(--green-dark); }
.bxy-skip:focus { transform:translateY(0); }
html[data-channel-layout="mobile"] :is(button,a,input,select,summary):focus-visible { outline:3px solid var(--green-dark); outline-offset:2px; }
html[data-channel-layout="mobile"] :is(input,select,textarea) { min-width:0; max-width:100%; font-size:16px; min-height:44px; scroll-margin:100px 0; }
html[data-channel-layout="mobile"] .button { min-height:44px; padding:10px 12px; font-size:15px; }
html[data-channel-layout="mobile"] .button:not(.secondary):not(.danger) { background:var(--green-dark); border-color:var(--green-dark); }
html[data-channel-layout="mobile"] .bxy-mobile-nav { position:fixed; bottom:0; left:0; right:0; z-index:90; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(23,33,38,.03); }
.bxy-mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:56px; min-width:0; padding:5px 2px; border:0; border-radius:8px; font:inherit; font-size:12px; background:transparent; color:var(--muted); }
.bxy-mobile-nav button.active { background:var(--green-soft); color:var(--green-dark); font-weight:700; }
html[data-channel-layout="mobile"].channel-keyboard-open .bxy-mobile-nav { display:none; }
html[data-channel-layout="mobile"] .bxy-mobile-shortcuts { display:grid; grid-template-columns:repeat(auto-fit,minmax(68px,1fr)); margin:0 0 16px; border:1px solid var(--line); background:var(--surface); border-radius:10px; overflow:hidden; }
.bxy-mobile-shortcuts button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:80px; padding:10px 2px; background:transparent; border:0; color:var(--green-dark); font:inherit; font-size:13px; }
.bxy-mobile-shortcuts button+button { border-left:1px solid var(--line); }
html[data-channel-layout="mobile"] .dashboard-search-panel { display:block; padding:0; background:transparent; border:0; box-shadow:none; margin-bottom:14px; }
html[data-channel-layout="mobile"] .dashboard-search-copy { display:none; }
html[data-channel-layout="mobile"] .dashboard-search-form { grid-template-columns:minmax(0,1fr) auto; }
html[data-channel-layout="mobile"] .dashboard-search-form input { padding:12px 10px; }
html[data-channel-layout="mobile"] .dashboard-search-button { min-width:56px; width:auto; }
html[data-channel-layout="mobile"] .dashboard-search-button svg { display:none; }
html[data-channel-layout="mobile"] :is(.panel,.table-panel,.detail-panel) { min-width:0; padding:16px; border-radius:10px; box-shadow:none; }
html[data-channel-layout="mobile"] :is(.panel-head,.detail-page-head) { gap:10px; min-width:0; }
html[data-channel-layout="mobile"] .panel-head p { line-height:1.6; }
html[data-channel-layout="mobile"] .code-category-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
html[data-channel-layout="mobile"] .code-category .panel-head { flex-direction:row; align-items:flex-start; }
html[data-channel-layout="mobile"] .code-category .panel-head h3 { font-size:18px; margin:0 0 4px; }
html[data-channel-layout="mobile"] .code-category .panel-head > .button { flex-shrink:0; padding:8px; border:0; color:var(--green-dark); }
html[data-channel-layout="mobile"] .code-category .plan-tabs { flex-wrap:wrap; gap:8px; overflow:visible; margin:0 0 10px; padding:0; }
html[data-channel-layout="mobile"] .code-category .plan-tabs .tab { min-height:40px; min-width:0; padding:8px 10px; white-space:normal; font-size:13px; }
html[data-channel-layout="mobile"] .code-category-value { min-height:64px; margin-bottom:12px; padding:10px 8px; border-radius:7px; background:var(--green-soft); }
html[data-channel-layout="mobile"] .code-category .random-code { padding:0; margin:0; border:0; background:transparent; }
html[data-channel-layout="mobile"] .code-category .code { font-size:clamp(16px,4.5vw,23px); line-height:1.5; word-break:break-word; color:var(--green-dark); font-variant-numeric:tabular-nums; }
html[data-channel-layout="mobile"] .random-code-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
html[data-channel-layout="mobile"] .random-code-actions .button { width:100%; font-size:14px; }
html[data-channel-layout="mobile"] .metrics,html[data-channel-layout="mobile"] .usage-summary-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
html[data-channel-layout="mobile"] .metric { min-width:0; min-height:90px; padding:13px; }
html[data-channel-layout="mobile"] .metric strong { font-size:25px; margin-top:8px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
html[data-channel-layout="mobile"] .metric span { font-size:13px; }
html[data-channel-layout="mobile"] .metrics > .bxy-mobile-long-metric { grid-column:1/-1; min-height:0; }
html[data-channel-layout="mobile"] .bxy-mobile-long-metric strong { font-size:16px; line-height:1.5; }
html[data-channel-layout="mobile"] :is(.toolbar,.usage-history-toolbar,.content-grid) { display:grid; grid-template-columns:minmax(0,1fr)!important; gap:10px; }
html[data-channel-layout="mobile"] .toolbar input { width:100%; }
html[data-channel-layout="mobile"] .toolbar select { width:100%; }
html[data-channel-layout="mobile"] .usage-range-toolbar { display:block; width:100%; }
html[data-channel-layout="mobile"] .usage-range-toolbar > :is(label,select) { display:none; }
html[data-channel-layout="mobile"] .bxy-mobile-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:3px; background:var(--bg); border:1px solid var(--line); border-radius:8px; gap:4px; }
.bxy-mobile-range button { min-height:44px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:15px; border-radius:6px; }
.bxy-mobile-range button[aria-pressed="true"] { color:white; background:var(--green-dark); font-weight:700; }
html[data-channel-layout="mobile"] .usage-chart-heading { gap:14px; }
html[data-channel-layout="mobile"] .main:has(> .statistics-usage-section) { display:flex; flex-direction:column; }
html[data-channel-layout="mobile"] .main > .topbar { order:-2; }
html[data-channel-layout="mobile"] .main > .statistics-usage-section { order:-1; margin-top:0!important; margin-bottom:16px; }
html[data-channel-layout="mobile"] .usage-chart-scroll { contain:inline-size; }
html[data-channel-layout="mobile"] .usage-chart-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; font-size:12px; }
html[data-channel-layout="mobile"] .usage-chart-label { font-size:11px; }
html[data-channel-layout="mobile"] .usage-chart-controls select { width:100%; }
html[data-channel-layout="mobile"] .table-wrap { overflow:visible; border:0; }
html[data-channel-layout="mobile"] .bxy-mobile-table { display:block; width:100%; min-width:0!important; border:0; }
html[data-channel-layout="mobile"] .bxy-mobile-table > thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html[data-channel-layout="mobile"] .bxy-mobile-table > tbody { display:grid; gap:12px; }
html[data-channel-layout="mobile"] .bxy-mobile-table > tbody > tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; border:1px solid var(--line); border-radius:9px; background:white; min-width:0; }
html[data-channel-layout="mobile"] .bxy-mobile-table td { display:flex; flex-direction:column; gap:5px; padding:0; min-width:0; border:0; white-space:normal; overflow-wrap:anywhere; font-size:14px; text-align:left; }
html[data-channel-layout="mobile"] .bxy-mobile-table td::before { content:attr(data-mobile-label); color:var(--muted); font-size:12px; font-weight:400; }
html[data-channel-layout="mobile"] .bxy-mobile-table td:first-child { grid-column:1/-1; font-weight:700; font-size:16px; }
html[data-channel-layout="mobile"] .bxy-mobile-table td:last-child:has(button),html[data-channel-layout="mobile"] .bxy-mobile-table td[colspan] { grid-column:1/-1; }
html[data-channel-layout="mobile"] .bxy-mobile-table td[colspan]::before { content:none; }
html[data-channel-layout="mobile"] .bxy-mobile-table .row-actions { display:flex; flex-wrap:wrap; gap:8px; }
html[data-channel-layout="mobile"] .bxy-mobile-table :is(.icon-button,.text-button) { min-height:44px; padding:8px 12px; }
html[data-channel-layout="mobile"] .pagination { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
html[data-channel-layout="mobile"] :is(.detail-grid,.user-detail-grid,.recharge-package-grid) { grid-template-columns:minmax(0,1fr); }
html[data-channel-layout="mobile"] .bxy-mobile-menu[open] { display:block; }
.bxy-mobile-menu { position:fixed; inset:auto 0 0; width:100%; max-width:600px; max-height:min(85dvh,720px); margin:0 auto; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); border:0; border-radius:16px 16px 0 0; color:var(--text); background:var(--surface); overflow:auto; overscroll-behavior:contain; }
.bxy-mobile-menu::backdrop { background:rgba(23,33,38,.38); }
.bxy-menu-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bxy-menu-heading h2 { margin:0; font-size:20px; }
.bxy-menu-heading button { width:44px; height:44px; border:0; background:var(--bg); border-radius:8px; font-size:25px; color:var(--muted); }
.bxy-mobile-menu nav { display:grid; gap:8px; }
.bxy-menu-item { display:flex; align-items:center; gap:14px; min-height:52px; width:100%; padding:12px; background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; color:var(--text); font:inherit; text-align:left; }
.bxy-menu-item svg { color:var(--green-dark); }
.bxy-menu-item.bxy-logout { color:var(--red); margin-top:8px; }
.bxy-menu-item.bxy-logout svg { color:var(--red); }
html[data-channel-layout="mobile"] .toast { bottom:calc(86px + env(safe-area-inset-bottom)); max-width:calc(100vw - 28px); overflow-wrap:anywhere; }
html[data-channel-layout="mobile"] :is(.recharge-dialog,.forced-announcement-dialog) { width:calc(100% - 24px); max-height:calc(100dvh - 32px); overflow-y:auto; }
html[data-channel-layout="mobile"] .login-screen { display:block; min-height:100dvh; }
html[data-channel-layout="mobile"] .login-brand { display:none; }
html[data-channel-layout="mobile"] .login-panel { min-height:100dvh; padding:24px 16px; }
html[data-channel-layout="mobile"] .login-card { width:100%; max-width:420px; padding:24px; }
@media (prefers-reduced-motion:reduce) { .bxy-mobile-nav *, .bxy-mobile-menu * { scroll-behavior:auto; transition:none; } }