/* Shared tokens and UI Part 1. Result/detail layouts remain in index.html. */
:root {
  --brand-green:#0A9E7C; --brand-green-soft:#EDF9F5; --brand-green-strong:#058267;
  --brand-gradient:linear-gradient(105deg,#2BB39C,var(--brand-green));
  --text-primary:#112039; --text-secondary:#7A8496; --text-muted:#BCC2C9;
  --border-color:#E9EDF1; --surface:#FFF; --surface-soft:#F7F8FA; --page-bg:#FFF;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px;
  --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:24px;
  --font-amount:32px; --font-title:28px; --font-asset:16px; --font-network:13px; --font-caption:12px;
  --green:var(--brand-green); --green-ink:var(--brand-green-strong); --green-soft:var(--brand-green-soft);
  --ink:var(--text-primary); --muted:var(--text-secondary); --line:var(--border-color);
  --soft:var(--surface-soft); --paper:var(--surface); --radius:var(--radius-md);
  --device-width:390px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}

/* P01: independent network row; all query controls retain their size while loading. */
#workspace{background:var(--page-bg)}
#queryPanel .brand-line{margin-bottom:var(--space-md)}
#queryPanel .wordmark{font-size:30px}
#queryPanel .page-title{font-size:var(--font-title)}
#queryPanel .subtitle{font-size:var(--font-network);color:var(--text-secondary)}
#queryPanel .workspace-title{margin-bottom:var(--space-md)}
#queryPanel .asset-card{height:auto;min-height:96px;padding:var(--space-md);border-radius:var(--radius-md);background:var(--surface-soft)}
#queryPanel .field-label{font-size:var(--font-network);margin-bottom:var(--space-sm);color:var(--text-primary)}
#queryPanel .asset-amount{height:48px;gap:var(--space-sm)}
#queryPanel .asset-control{height:48px;min-width:144px;max-width:160px;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-sm);background:var(--surface);box-shadow:none}
#queryPanel .asset-code{font-size:var(--font-asset)}
#queryPanel .amount-field{border-color:var(--border-color);padding-left:var(--space-sm)}
#queryPanel .amount-field:focus-within{border-color:var(--brand-green)}
#queryPanel .amount-field input{font-size:var(--font-amount);color:var(--text-primary);caret-color:var(--brand-green)}
#queryPanel .amount-field input::placeholder{color:var(--text-muted);opacity:1}
#queryPanel .amount-field input:focus::placeholder{color:transparent}
#queryPanel .output-placeholder{font-size:var(--font-amount);color:var(--text-muted)}
.query-network{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-sm);padding-top:var(--space-xs);border-top:1px solid var(--border-color);min-height:48px}
.query-network[hidden]{display:none}
.network-label{font-size:var(--font-caption);color:var(--text-secondary)}
.network-control,.network-static{display:flex;align-items:center;gap:var(--space-sm);min-height:44px;font-size:var(--font-network);color:var(--text-primary)}
.network-control{padding:0 var(--space-sm);border-radius:var(--radius-sm)}
.network-control:hover{background:var(--brand-green-soft)}
.query-network .asset-icon{width:20px;height:20px}
.network-control>.icon{width:16px;height:16px;color:var(--text-secondary)}
#queryPanel .swap-line{height:48px;gap:var(--space-sm)}
#queryPanel .swap-btn{height:40px;width:40px;background:var(--brand-green-soft);color:var(--brand-green);box-shadow:none}
#queryPanel .query-btn{height:48px;margin-top:var(--space-sm);border-radius:var(--radius-sm);font-size:var(--font-asset);background:var(--brand-gradient)}
#queryPanel .query-btn:hover{filter:brightness(.98)}
#queryPanel .query-btn:disabled{background:var(--brand-gradient);opacity:.55;filter:none}

/* Shared four-tab navigation, outside the scrolling page body. */
.bottom-nav{background:var(--surface);border-color:var(--border-color);padding:var(--space-sm) var(--space-sm) max(20px,env(safe-area-inset-bottom))}
.bottom-nav button{min-height:48px;gap:var(--space-xs);font-size:var(--font-caption);color:var(--text-secondary)}
.bottom-nav .icon{width:24px;height:24px;stroke-width:1.7}
.bottom-nav .icon.filled{stroke-width:1.7}
.bottom-nav .active{color:var(--brand-green)}

/* Asset/network sheets only; other choice dialogs retain their existing layout. */
.sheet.selector-sheet{top:60px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--surface)}
.selector-sheet .sheet-head{height:48px;min-height:48px;padding:0 var(--space-sm);font-size:18px}
.selector-sheet .sheet-scroll{padding:var(--space-sm) var(--space-md) max(var(--space-lg),env(safe-area-inset-bottom))}
.selector-sheet .grabber{background:var(--border-color)}
.selector-sheet .searchbox{margin:var(--space-xs) 0 var(--space-sm);min-height:44px;background:var(--surface-soft);border-radius:var(--radius-lg)}
.selector-sheet .searchbox input{font-size:15px}
.selector-sheet .category-tabs{margin-bottom:var(--space-sm);border-color:var(--border-color)}
.selector-sheet .category-tabs button{font-size:15px;min-height:44px}
.selector-sheet .category-tabs button.active{color:var(--brand-green)}
.selector-sheet .category-tabs button.active:after{height:3px;background:var(--brand-green)}
.selector-sheet .asset-group+.asset-group{margin-top:var(--space-lg)}
.selector-sheet .list-label{font-size:14px;font-weight:650;padding:var(--space-sm) 0}
.selector-sheet .asset-row{height:64px;margin:var(--space-xs) 0;padding:var(--space-sm);gap:var(--space-md);border-radius:var(--radius-md)}
.selector-sheet .asset-row .asset-icon{width:44px;height:44px}
.selector-sheet .row-title{font-size:var(--font-asset);color:var(--text-primary)}
.selector-sheet .row-sub{font-size:var(--font-network);color:var(--text-secondary)}
.selector-sheet .asset-row.selected{background:var(--brand-green-soft)}
.selector-sheet .asset-row>.icon{width:18px;height:18px;color:var(--text-secondary)}
.selector-sheet .asset-row.selected>.icon{color:var(--brand-green)}
.selector-sheet .network-header{gap:var(--space-md);padding:var(--space-sm) var(--space-sm) var(--space-md)}
.selector-sheet .network-header>.asset-icon{width:56px;height:56px}
.selector-sheet .network-header h3{font-size:20px}
.selector-sheet .network-header p{font-size:var(--font-network);color:var(--text-secondary)}
.selector-sheet .network-row{border:1px solid var(--border-color);height:64px;margin:var(--space-sm) 0}
.selector-sheet .network-row.selected{border-color:var(--brand-green-soft)}
.selector-sheet .network-row.selected>.icon{width:24px;height:24px;stroke-width:2.5}
.selector-sheet .sheet-note{display:flex;align-items:flex-start;gap:var(--space-sm);margin-top:var(--space-md);padding:var(--space-sm);border-radius:var(--radius-md);background:var(--surface-soft);color:var(--text-secondary);font-size:var(--font-caption)}
.selector-sheet .sheet-note>.icon{margin-top:var(--space-xs)}
@media(max-width:374px){#queryPanel .asset-control{min-width:132px}#queryPanel .amount-field input,#queryPanel .output-placeholder{font-size:28px}}