/* ══════════════════════════════════════════════════════
   ODDSFORGE v3 — Production DeFi Terminal
   Inspired: Jupiter Price Bar · Kamino Earn · Drift Perps
   ══════════════════════════════════════════════════════ */

:root {
  --bg-root: #080A0E;
  --bg-panel: #0F1119;
  --bg-card: #131620;
  --bg-hover: #191D28;
  --bg-input: #0A0C12;
  --border: rgba(255,255,255,0.06);
  --border-focus: rgba(255,255,255,0.10);
  --text: #F5F3EE;
  --text2: #9398A5;
  --text3: #5F6470;
  --amber: #F2762E;
  --amber-dim: rgba(242,118,46,0.10);
  --green: #34D399;
  --green-dim: rgba(52,211,153,0.10);
  --red: #F87171;
  --red-dim: rgba(248,113,113,0.10);
  --blue: #5B8AA6;
  --blue-dim: rgba(91,138,166,0.10);
  --font-d: 'Space Grotesk',system-ui,sans-serif;
  --font-b: 'Inter',system-ui,sans-serif;
  --font-m: 'IBM Plex Mono','SF Mono',monospace;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --ease: cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;background:var(--bg-root);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family:var(--font-b);line-height:1.5;min-height:100vh;overflow-x:hidden}
a{color:var(--blue);text-decoration:none;transition:color .15s}
a:hover{color:var(--amber)}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* ═══ LAYOUT ═══ */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;padding:16px 10px;overflow-y:auto;transition:transform .25s var(--ease)}
.main-area{flex:1;margin-left:220px;min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:0 20px;height:52px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.price-bar{background:var(--bg-card);border-bottom:1px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:24px;overflow-x:auto;white-space:nowrap;font-size:12px;scrollbar-width:none}
.price-bar::-webkit-scrollbar{display:none}
.price-ticker{display:flex;align-items:center;gap:8px;font-family:var(--font-b);flex-shrink:0}
.price-ticker .ticker-symbol{font-weight:600;color:var(--text);font-size:13px}
.price-ticker .ticker-price{font-family:var(--font-m);color:var(--text2)}
.price-ticker .ticker-change{font-family:var(--font-m);font-size:11px}
.page-content{flex:1;padding:20px 24px 40px}

/* ═══ SIDEBAR ═══ */
.sidebar-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 20px}
.sidebar-brand img{width:28px;height:28px;border-radius:var(--r-sm)}
.sidebar-brand span{font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.02em}
.nav-group{margin-bottom:16px}
.nav-group-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:0 8px;margin-bottom:2px}
.nav-link{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-md);font-size:13px;font-weight:500;color:var(--text2);transition:all .12s var(--ease);border:1px solid transparent;margin-bottom:1px}
.nav-link:hover{background:var(--bg-hover);color:var(--text)}
.nav-link.active{background:var(--amber-dim);color:var(--amber);border-color:rgba(242,118,46,.12)}
.nav-icon{width:16px;height:16px;opacity:.5;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-link.active .nav-icon{opacity:1}
.nav-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ TOPBAR ═══ */
.tb-left{display:flex;align-items:center;gap:14px}
.tb-right{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:30px;height:30px;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text2)}
.menu-btn:hover{color:var(--text);border-color:var(--border-focus)}
.network-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);font-size:10px;font-weight:600;font-family:var(--font-m);background:var(--green-dim);color:var(--green);border:1px solid rgba(52,211,153,.15)}
.network-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-dot 2s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
.wallet-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-md);font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--bg-card);color:var(--text2);transition:all .15s var(--ease)}
.wallet-btn:hover{border-color:var(--border-focus);color:var(--text);transform:translateY(-1px)}
.wallet-btn.connected{border-color:rgba(52,211,153,.25);color:var(--green);background:var(--green-dim)}
.icon-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--text2);transition:all .15s var(--ease)}
.icon-btn:hover{border-color:var(--border-focus);color:var(--text);transform:translateY(-1px)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ CARDS ═══ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;transition:border-color .2s var(--ease)}
.card:hover{border-color:var(--border-focus)}
.card-accent{border-color:rgba(242,118,46,.15);background:var(--amber-dim)}

/* ═══ METRICS ═══ */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 18px;transition:border-color .2s var(--ease)}
.metric-card:hover{border-color:var(--border-focus)}
.metric-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:5px}
.metric-value{font-family:var(--font-d);font-size:20px;font-weight:700;letter-spacing:-.02em;transition:color .3s}
.metric-value.flash-up{color:var(--green)}
.metric-change{font-size:11px;margin-top:3px;font-family:var(--font-m)}
.metric-change.up{color:var(--green)}.metric-change.down{color:var(--red)}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600;transition:all .15s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--amber);color:#fff}
.btn-primary:hover{background:#E0681C;box-shadow:0 0 24px rgba(242,118,46,.25);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-card);border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--border-focus);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2)}
.btn-ghost:hover{color:var(--text);background:var(--bg-hover)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{opacity:.9;transform:translateY(-1px)}
.btn-sm{padding:5px 10px;font-size:11px;border-radius:var(--r-sm)}
.btn-lg{padding:13px 22px;font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.3;pointer-events:none;transform:none!important}

/* ═══ TABLES ═══ */
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:9px 12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:10px 12px;font-size:13px;border-bottom:1px solid var(--border);white-space:nowrap;transition:background .15s}
.data-table tr:hover td{background:var(--bg-hover)}
.data-table .mono{font-family:var(--font-m);font-size:12px}

/* ═══ TABS ═══ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:18px}
.tab{padding:9px 15px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s var(--ease)}
.tab:hover{color:var(--text)}
.tab.active{color:var(--amber);border-bottom-color:var(--amber)}

/* ═══ FORGE BAR ═══ */
.forge-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 22px;overflow:hidden;position:relative;margin-bottom:20px}
.forge-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--amber-dim) 50%,transparent 100%);animation:forge-sweep 4s ease-in-out infinite}
@keyframes forge-sweep{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.forge-ingots{display:flex;gap:10px;position:relative;z-index:1}
.forge-ingot{flex:1;padding:14px 18px;background:var(--bg-root);border:1px solid var(--border);border-radius:var(--r-md);position:relative;overflow:hidden}
.forge-ingot::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--amber),#ffb347,var(--amber));animation:ingot-glow 2.5s ease-in-out infinite alternate}
.forge-ingot:nth-child(2)::after{animation-delay:.6s}.forge-ingot:nth-child(3)::after{animation-delay:1.2s}
@keyframes ingot-glow{0%{opacity:.35;filter:brightness(1)}100%{opacity:1;filter:brightness(1.8)}}
.forge-ingot-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin-bottom:3px}
.forge-ingot-apy{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--green)}
.forge-ingot-sub{font-size:10px;color:var(--text2);margin-top:2px}

/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-full);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-amber{background:var(--amber-dim);color:var(--amber)}
.badge-blue{background:var(--blue-dim);color:var(--blue)}

/* ═══ SWAP ═══ */
.swap-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;max-width:440px;margin:0 auto}
.swap-field{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:1px;transition:border-color .2s}
.swap-field:focus-within{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-dim)}
.swap-field-header{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-bottom:6px}
.swap-field-body{display:flex;justify-content:space-between;align-items:center}
.swap-input{font-family:var(--font-m);font-size:20px;font-weight:500;background:transparent;border:none;color:var(--text);outline:none;width:60%}
.swap-input::placeholder{color:var(--text3)}
.token-btn{display:flex;align-items:center;gap:7px;padding:5px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-full);font-size:13px;font-weight:600;transition:all .15s var(--ease)}
.token-btn:hover{border-color:var(--border-focus);transform:translateY(-1px)}
.swap-divider{display:flex;justify-content:center;margin:-3px 0;position:relative;z-index:1}
.swap-divider button{width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .15s var(--ease)}
.swap-divider button:hover{color:var(--amber);border-color:var(--amber)}
.swap-info{font-size:11px;color:var(--text2);padding:10px 0}
.swap-info-row{display:flex;justify-content:space-between;padding:3px 0}

/* ═══ INPUTS ═══ */
.input{width:100%;padding:9px 11px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-md);font-size:13px;color:var(--text);outline:none;transition:border-color .2s}
.input:focus{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-dim)}
.input::placeholder{color:var(--text3)}
.select{width:100%;padding:9px 11px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-md);font-size:13px;color:var(--text);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%238B93A1' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}

/* ═══ TOGGLE ═══ */
.toggle{width:38px;height:20px;border-radius:10px;background:var(--bg-input);border:1px solid var(--border);cursor:pointer;position:relative;transition:all .2s var(--ease);flex-shrink:0}
.toggle.on{background:var(--amber);border-color:var(--amber)}
.toggle::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s var(--ease)}
.toggle.on::after{transform:translateX(18px)}

/* ═══ CHECKBOX ═══ */
.cb-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.cb-row input[type="checkbox"]{margin-top:2px;accent-color:var(--amber);width:15px;height:15px;flex-shrink:0}
.cb-row label{font-size:12px;color:var(--text2);cursor:pointer}

/* ═══ MODALS ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(8,10,14,.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.modal-overlay.active{opacity:1;pointer-events:auto}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;width:92%;max-width:420px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scale(.95) translateY(8px);transition:transform .25s var(--ease)}
.modal-overlay.active .modal{transform:scale(1) translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-header h2{font-family:var(--font-d);font-size:17px;font-weight:700}
.modal-close{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:15px;transition:all .15s var(--ease)}
.modal-close:hover{color:var(--text);border-color:var(--border-focus);background:var(--bg-hover)}

/* ═══ TOAST ═══ */
.toast-container{position:fixed;top:60px;right:16px;z-index:1100;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;font-size:12px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:toast-in .3s var(--ease);pointer-events:auto;max-width:320px}
.toast.success{border-color:rgba(52,211,153,.2);color:var(--green)}
.toast.error{border-color:rgba(248,113,113,.2);color:var(--red)}
@keyframes toast-in{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}

/* ═══ SPINNER ═══ */
.spinner{width:32px;height:32px;border:2.5px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .6s linear infinite;margin:0 auto 14px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ STATUS ICON ═══ */
.status-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.status-ok{background:var(--green-dim);color:var(--green)}
.status-bad{background:var(--red-dim);color:var(--red)}

/* ═══ STRATEGY CARDS ═══ */
.strat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.strat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-xl);padding:22px;transition:all .2s var(--ease)}
.strat-card:hover{border-color:var(--amber);box-shadow:0 0 28px rgba(242,118,46,.15);transform:translateY(-2px)}
.strat-icon{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;margin-bottom:14px;font-family:var(--font-m)}
.strat-card h3{font-family:var(--font-d);font-size:15px;font-weight:600;margin-bottom:5px}
.strat-card p{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:10px}
.strat-apy{font-family:var(--font-d);font-size:30px;font-weight:700;color:var(--green);margin:10px 0 3px}
.strat-apy-unit{font-size:15px;font-weight:600;color:var(--green)}

/* ═══ CHART PLACEHOLDER ═══ */
.chart-box{background:var(--bg-input);border:1px dashed var(--border);border-radius:var(--r-md);height:160px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text3);font-family:var(--font-m)}

/* ═══ PROGRESS ═══ */
.progress{height:5px;background:var(--bg-input);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .5s var(--ease)}

/* ═══ TIER ═══ */
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.tier-card{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--r-lg);padding:16px;text-align:center;transition:all .2s var(--ease)}
.tier-card.current{border-color:var(--amber);box-shadow:0 0 18px rgba(242,118,46,.2)}
.tier-card .tier-icon{font-size:24px;margin-bottom:6px}
.tier-card .tier-name{font-family:var(--font-d);font-weight:700;font-size:14px}
.tier-card .tier-range{font-size:10px;font-family:var(--font-m);color:var(--text3);margin:3px 0}
.tier-card .tier-desc{font-size:11px;color:var(--text2);line-height:1.4;margin-top:6px}

/* ═══ ACCORDION ═══ */
.acc{border-top:1px solid var(--border)}
.acc-item{border-bottom:1px solid var(--border)}
.acc-trigger{width:100%;padding:12px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500;text-align:left;transition:color .15s}
.acc-trigger:hover{color:var(--amber)}
.acc-arrow{transition:transform .2s var(--ease);color:var(--text3)}
.acc-item.open .acc-arrow{transform:rotate(180deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc-item.open .acc-panel{max-height:200px;padding-bottom:14px;font-size:12px;color:var(--text2);line-height:1.6}

/* ═══ LANDING ═══ */
.hero{text-align:center;padding:56px 20px 40px;max-width:700px;margin:0 auto}
.hero-logo{width:64px;height:64px;margin:0 auto 20px;filter:drop-shadow(0 0 20px rgba(242,118,46,.3))}
.hero h1{font-family:var(--font-d);font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:14px;background:linear-gradient(135deg,var(--text) 0%,var(--amber) 55%,#ffb347 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:15px;color:var(--text2);max-width:480px;margin:0 auto 24px;line-height:1.6}
.hero-stats{display:flex;justify-content:center;gap:40px;margin:36px 0}

/* ═══ FOOTER ═══ */
.footer{border-top:1px solid var(--border);padding:36px 24px 24px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px;max-width:1080px;margin:0 auto}
.footer-col h4{font-size:12px;font-weight:600;margin-bottom:10px}
.footer-col a{display:block;font-size:12px;color:var(--text2);margin-bottom:6px;transition:color .15s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{text-align:center;padding-top:20px;margin-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--text3)}
.footer-logo{width:24px;height:24px;border-radius:4px;margin-bottom:6px}

/* ═══ MOBILE NAV ═══ */
.mnav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--bg-panel);border-top:1px solid var(--border);padding:4px 6px env(safe-area-inset-bottom,6px);z-index:100}
.mnav-inner{display:flex;justify-content:space-around}
.mnav-item{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;font-size:10px;font-weight:500;color:var(--text3);cursor:pointer;transition:color .15s}
.mnav-item.active{color:var(--amber)}
.mnav-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){.metrics-row{grid-template-columns:repeat(2,1fr)}.strat-grid{grid-template-columns:1fr}.tier-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,.5)}
  .main-area{margin-left:0}
  .menu-btn{display:flex}
  .mnav{display:block}
  .page-content{padding:14px 10px 72px}
  .hero h1{font-size:26px}.hero-stats{flex-direction:column;gap:12px;align-items:center}
  .metrics-row{grid-template-columns:1fr 1fr;gap:6px}
  .forge-ingots{flex-direction:column}.price-bar{padding:6px 12px;gap:16px}
  .topbar{padding:0 10px}
  .modal{width:96%;padding:16px}
}

/* ═══ UTILS ═══ */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.tc{text-align:center}
.green{color:var(--green)}.red{color:var(--red)}.muted{color:var(--text2)}.mono{font-family:var(--font-m)}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}
@media(min-width:769px){.dt-only{display:flex}.mb-only{display:none}}
@media(max-width:768px){.dt-only{display:none}.mb-only{display:block}}