/* GARS OS — TWR M7. Monochrome-luxe glass. No color pop; one cool focus state. */
:root{
  --void:#08090b; --base:#0c0e11; --panel:#15171c; --panel-2:#1b1e24;
  --ink:#f4f6f8; --ink-2:#c2c7cf; --ink-3:#878d98; --ink-4:#565c66;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --glass:rgba(22,25,31,.55); --glass-hi:rgba(40,45,54,.55);
  --focus:#9fb6c9; --danger:#d98a86; --ok:#9fc9a8;
  --radius:16px; --radius-sm:10px;
  --shadow:0 24px 64px -20px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.03) inset;
  --blur:saturate(140%) blur(22px);
  --font:'Segoe UI',-apple-system,system-ui,'Inter',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Cascadia Code',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink); background:var(--void);
  overflow:hidden; -webkit-font-smoothing:antialiased; letter-spacing:.01em; user-select:none;
}
button{font-family:inherit; color:inherit; cursor:pointer; background:none; border:none}
input,textarea,select{font-family:inherit; color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);background-clip:content-box}
.hidden{display:none!important}

#wallpaper{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(120,140,160,.16), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(80,95,115,.14), transparent 55%),
    linear-gradient(160deg,#0a0c0f 0%,#0e1014 45%,#070809 100%);}
#wallpaper::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%); mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%);}

.glass{background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:var(--ink);font-size:13px;font-weight:500;letter-spacing:.02em;transition:.16s ease;white-space:nowrap}
.btn:hover{border-color:rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#e9edf1,#cfd6dd);color:#14171c;border-color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.danger{border-color:rgba(217,138,134,.5);color:var(--danger)}
.btn.danger:hover{background:rgba(217,138,134,.12)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.input{width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  background:rgba(0,0,0,.32);border:1px solid var(--line);color:var(--ink);font-size:14px;transition:.16s;user-select:text}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(159,182,201,.14)}
.muted{color:var(--ink-3)} .small{font-size:12px} .tiny{font-size:11px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.err{color:var(--danger);font-size:12.5px;min-height:16px}
.row{display:flex;gap:10px;align-items:center}
.spread{justify-content:space-between}
hr.line{border:none;border-top:1px solid var(--line);margin:16px 0}
mono,.mono{font-family:var(--mono);font-size:12px}

#auth{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:412px;padding:34px}
.brand{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:26px}
.crystal{width:62px;height:62px;filter:drop-shadow(0 8px 24px rgba(159,182,201,.25))}
.brand h1{font-size:21px;font-weight:600;letter-spacing:.18em}
.brand .sub{font-size:11px;letter-spacing:.4em;color:var(--ink-3);text-transform:uppercase;text-align:center;max-width:280px;line-height:1.6}
.seg{display:flex;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px;margin-bottom:20px}
.seg button{flex:1;padding:8px;border-radius:7px;font-size:12px;color:var(--ink-3);transition:.16s}
.seg button.on{background:rgba(255,255,255,.1);color:var(--ink)}
.wallet-row{display:flex;flex-direction:column;gap:10px}
.auth-pane{display:flex;flex-direction:column;gap:4px}
.auth-pane.hidden{display:none}
select.input{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

#desktop{position:fixed;inset:0;z-index:1}
#windows{position:absolute;inset:0}
.win{position:absolute;display:flex;flex-direction:column;min-width:340px;min-height:220px;border-radius:var(--radius);overflow:hidden;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--line-2);box-shadow:var(--shadow);opacity:0;transform:scale(.98);
  transition:opacity .14s ease,transform .14s ease}
.win.show{opacity:1;transform:none}
.win.min{opacity:0;transform:scale(.96) translateY(16px);pointer-events:none}
.win.max{border-radius:0}
.win-bar{height:44px;display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  border-bottom:1px solid var(--line);cursor:grab}
.win-bar .title{flex:1;font-size:13px;letter-spacing:.04em;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-ctrl{display:flex;gap:8px}
.win-ctrl button{width:30px;height:30px;border-radius:8px;color:var(--ink-3);font-size:14px;display:flex;align-items:center;justify-content:center}
.win-ctrl button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.win-ctrl .x:hover{background:rgba(217,138,134,.18);color:var(--danger)}
.win-body{flex:1;overflow:auto;position:relative}
.resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:5}

.app-pad{padding:20px}
.app-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.app-head h2{font-size:15px;font-weight:600;letter-spacing:.05em}
.list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.list .item{display:flex;align-items:center;gap:12px;padding:11px 13px;background:rgba(255,255,255,.015);transition:.12s}
.list .item:hover{background:rgba(255,255,255,.05)}
.list .item .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--ink-3)}
.tag.on{color:var(--ok);border-color:rgba(159,201,168,.4)}
.tag.off{color:var(--ink-4)}

/* ===== DESKTOP taskbar: full-width bar across the bottom (Windows-like) ===== */
#taskbar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:8px;padding:7px 16px;border-radius:0;
  background:var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:1px solid var(--line-2);box-shadow:0 -10px 34px -12px rgba(0,0,0,.7)}
#dock-apps{display:flex;align-items:center;gap:6px}
.dock-btn{width:62px;height:50px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-2);transition:.16s;position:relative}
.dock-btn:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.dock-btn.active{background:rgba(255,255,255,.06);color:var(--ink)}
.dock-btn.active::after{content:"";position:absolute;bottom:2px;width:14px;height:2px;border-radius:2px;background:var(--ink-2)}
.dock-btn svg{width:20px;height:20px}
.dock-btn .lbl{font-size:9px;letter-spacing:.04em;white-space:nowrap}
.dock-sep{width:1px;height:30px;background:var(--line);margin:0 4px}
#clock{margin-left:auto;padding:0 6px 0 16px;text-align:right;line-height:1.15}
#clock .t{font-size:14px;font-variant-numeric:tabular-nums}
#clock .d{font-size:10px;color:var(--ink-3);letter-spacing:.08em}

.scrim{position:fixed;inset:0;z-index:60;background:rgba(4,5,7,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;padding:30px}
.modal h2{font-size:18px;letter-spacing:.04em;margin-bottom:6px}
.modal .scroll{overflow:auto;padding-right:8px;margin:14px 0;line-height:1.62;font-size:13.5px;color:var(--ink-2);user-select:text}
.modal .scroll h3{color:var(--ink);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:18px 0 6px}
.modal .scroll p{margin-bottom:10px}
.modal .scroll strong{color:var(--ink)}
.check{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);cursor:pointer;margin:8px 0 16px}
.check input{width:16px;height:16px;accent-color:var(--focus)}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tile{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;background:rgba(255,255,255,.02);
  transition:.16s;cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:120px}
.tile:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.tile .tt{font-size:14px;font-weight:600}
.tile .td{font-size:11.5px;color:var(--ink-3);flex:1}
canvas{display:block;background:#0a0c0f;border-radius:var(--radius-sm)}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:18px}
.kpi .box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.kpi .n{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi .l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.switch{position:relative;width:44px;height:24px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid var(--line-2);transition:.16s;flex:0 0 auto;cursor:pointer}
.switch.on{background:rgba(159,201,168,.35);border-color:rgba(159,201,168,.5)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#e8ecf0;transition:.16s}
.switch.on::after{transform:translateX(20px)}
.chat-log{display:flex;flex-direction:column;gap:12px;padding:4px}
.bub{max-width:82%;padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;user-select:text;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:linear-gradient(180deg,#e9edf1,#cfd6dd);color:#14171c}
.bub.ai{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:80;padding:11px 18px;
  border-radius:12px;font-size:13px;background:var(--glass-hi);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--line-2);box-shadow:var(--shadow);opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button{padding:9px 14px;font-size:12.5px;color:var(--ink-3);border-bottom:2px solid transparent;transition:.14s}
.tabs button.on{color:var(--ink);border-bottom-color:var(--focus)}
@media (max-width:560px){.auth-card{padding:26px}.win{min-width:280px}}

/* ============================= M7 BOOT SPLASH ============================= */
#splash{position:fixed;inset:0;z-index:90;background:var(--void);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}
#splash.gone{opacity:0;pointer-events:none}
#splash img{max-width:min(74vw,820px);max-height:64vh;object-fit:contain;filter:drop-shadow(0 18px 60px rgba(0,0,0,.55));animation:splashrise .8s cubic-bezier(.2,.7,.2,1)}
@keyframes splashrise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
#splash .bar{position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);width:190px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
#splash .bar i{position:absolute;left:0;top:0;height:100%;width:34%;background:linear-gradient(90deg,transparent,#c7d6e4,transparent);animation:bootslide 1.15s infinite ease-in-out}
@keyframes bootslide{0%{left:-34%}100%{left:100%}}

/* ============================= START / M7 BUTTON ============================= */
.dock-start{width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.16s;position:relative}
.dock-start img{width:30px;height:30px;object-fit:contain}
.dock-start:hover{background:rgba(255,255,255,.08);transform:translateY(-3px)}
.dock-start.active{background:rgba(255,255,255,.1)}

/* ============================= APP LAUNCHER ============================= */
#launcher{position:fixed;inset:0;z-index:55;display:none;align-items:center;justify-content:center;background:rgba(4,5,7,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
#launcher.open{display:flex}
#launcher .lwrap{width:min(92vw,980px);max-height:86vh;overflow:auto}
#launcher .lhead{display:flex;align-items:center;gap:14px;margin-bottom:22px}
#launcher .lhead img{width:38px;height:38px}
#launcher .lhead h2{font-size:15px;font-weight:600;letter-spacing:.18em}
#launcher .lhead .sub{font-size:11px;color:var(--ink-3);letter-spacing:.3em;text-transform:uppercase}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.lcard{padding:22px 18px;border-radius:16px;background:var(--glass);border:1px solid var(--line);display:flex;flex-direction:column;gap:11px;transition:.16s;cursor:pointer;text-align:left}
.lcard:hover{background:var(--glass-hi);border-color:var(--line-2);transform:translateY(-3px)}
.lcard svg{width:28px;height:28px;color:var(--ink-2)}
.lcard .lt{font-size:14px;font-weight:600}
.lcard .ld{font-size:11px;color:var(--ink-3);line-height:1.45}

/* shared focus ring (spatial nav, most visible on TV) */
.focused{outline:2px solid var(--focus)!important;outline-offset:3px}

/* a calm inline notice (secure-context / capability warnings) */
.notice{padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(217,138,134,.08);color:var(--ink-2);font-size:13px;line-height:1.5;margin:10px 0}
.notice strong{color:var(--ink)}

/* ============================= TV MODE ============================= */
body.tv{font-size:18px}
body.tv #wallpaper::after{opacity:.5}
body.tv #taskbar{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:0;justify-content:space-between;padding:12px 28px;gap:10px}
body.tv #dock-apps{display:flex;align-items:center;gap:10px}
body.tv .dock-btn{width:auto;height:auto;flex-direction:row;gap:9px;padding:11px 18px;border-radius:12px}
body.tv .dock-btn .lbl{font-size:13px;letter-spacing:.04em}
body.tv .dock-btn svg{width:22px;height:22px}
body.tv .dock-start{width:auto;padding:8px 14px;gap:10px}
body.tv .dock-start::after{content:"M7";font-size:13px;letter-spacing:.14em;color:var(--ink-2)}
body.tv #clock .t{font-size:16px}
/* TV: apps are full-screen cards, no drag/resize/minimize */
body.tv .win{left:0!important;top:0!important;width:100vw!important;height:calc(100vh - 72px)!important;border-radius:0;border-left:none;border-right:none}
body.tv .win-ctrl .m,body.tv .win-ctrl .z{display:none}
body.tv .resize{display:none}
body.tv .win-bar{padding:14px 20px}
body.tv .auth-card{max-width:560px;padding:48px}
body.tv .seg button{padding:12px;font-size:14px}
body.tv .input{padding:14px 16px;font-size:16px}
body.tv .btn{padding:13px 20px;font-size:15px}
body.tv .lgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
body.tv .lcard{padding:30px 26px}
body.tv .lcard .lt{font-size:16px}
body.tv .lcard .ld{font-size:12.5px}

/* ============================= MOBILE LAYOUT (<=820px) ============================= */
@media (max-width: 820px) {
  /* auth card fills the screen comfortably */
  #auth{padding:16px}
  .auth-card{max-width:none;width:100%;padding:26px 20px}
  .seg button{padding:10px;font-size:12px}

  /* apps open full-screen as cards — dragging/resizing a window on a phone is pointless */
  .win{left:0!important;top:0!important;width:100vw!important;height:calc(100vh - 64px)!important;
    border-radius:0;border-left:none;border-right:none}
  .win-ctrl .m,.win-ctrl .z{display:none}      /* keep only Close */
  .resize{display:none}
  .win-bar{padding:13px 16px}
  .win-body{-webkit-overflow-scrolling:touch}

  /* bottom bar: M7 button + horizontally scrollable icon dock + compact clock */
  #taskbar{padding:6px 8px;gap:6px}
  #dock-apps{flex:1;overflow-x:auto;overflow-y:hidden;gap:2px;scrollbar-width:none}
  #dock-apps::-webkit-scrollbar{display:none}
  .dock-btn{width:54px;height:48px;flex:0 0 auto}
  .dock-btn .lbl{font-size:8px}
  .dock-btn svg{width:21px;height:21px}
  .dock-start{width:48px;height:48px;flex:0 0 auto}
  .dock-start img{width:30px;height:30px}
  .dock-sep{display:none}
  #clock{margin-left:4px;padding:0 6px;flex:0 0 auto}
  #clock .t{font-size:13px}
  #clock .d{display:none}            /* save width on narrow screens */

  /* launcher: full-screen, two big touch columns */
  #launcher .lwrap{width:100%;padding:0 16px}
  .lgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .lcard{padding:20px 16px}

  /* app content breathing room for touch */
  .app-pad{padding:16px}
  .btn{padding:11px 16px}
  .input{padding:12px 14px;font-size:16px}   /* 16px avoids iOS zoom-on-focus */
  .list .item{padding:12px 10px}

  /* safe-area insets for Android gesture bar / notches (viewport-fit=cover) */
  #taskbar{padding-bottom:calc(6px + env(safe-area-inset-bottom));padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
  .win{height:calc(100vh - 64px - env(safe-area-inset-bottom))!important}
  .win-bar{padding-top:calc(13px + env(safe-area-inset-top))}
  #auth{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  #launcher .lwrap{padding-top:calc(16px + env(safe-area-inset-top))}
  /* comfortable tap targets + no accidental text selection on chrome */
  .tile,.lcard,.dock-btn,.btn{-webkit-tap-highlight-color:transparent}
  .app-head h2{font-size:19px}
}
/* very small phones */
@media (max-width: 380px){
  .lgrid{grid-template-columns:repeat(2,1fr);gap:9px}
  .dock-btn{width:50px}
  .xbt-grid{grid-template-columns:1fr 1fr}
}

/* ---------------- XBT wallet intelligence ---------------- */
.xbt .mono, .xbt-arow .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.xbt-head { padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.xbt-addr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.xbt-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.flag { font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; letter-spacing: .02em; }
.flag.high { background: rgba(210,58,74,.14); color: #f0a5ad; border-color: rgba(210,58,74,.4); }
.flag.warn { background: rgba(220,160,60,.12); color: #e6c187; border-color: rgba(220,160,60,.35); }
.flag.info { background: rgba(125,155,180,.12); color: #a9c0d2; border-color: rgba(125,155,180,.3); }
.xbt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.xbt-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 9px 10px; }
.xbt-stat .k { font-size: 11px; color: #8a93a0; letter-spacing: .03em; }
.xbt-stat .v { font-size: 14px; margin-top: 3px; color: #e6edf3; }
.xbt-fund { margin-top: 10px; font-size: 12px; }
.xbt-fund .pivot, .xbt-arow .pivot { color: #9fd0e0; cursor: pointer; text-decoration: none; }
.xbt-fund .pivot:hover, .xbt-arow .pivot:hover { text-decoration: underline; }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7d8794; margin: 16px 0 8px; }
.xbt-graph { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 6px; }
.xbt-assoc { display: flex; flex-direction: column; gap: 6px; }
.xbt-arow { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.xbt-arow .bar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.xbt-arow .bar i { display: block; height: 100%; background: linear-gradient(90deg,#4a6274,#9fd0e0); }
.xbt-tokens, .xbt-graph + .eyebrow { }
.xbt-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #c2cbd6; }
@media (max-width: 820px) {
  .xbt-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- M7 Market ---------------- */
.market .seg { margin-top: 10px; }
.notice { background: rgba(220,160,60,.1); border: 1px solid rgba(220,160,60,.3); color: #e6c187; padding: 8px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mk-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .12s, border-color .12s; }
.mk-card:hover { transform: translateY(-2px); border-color: rgba(159,208,224,.4); }
.mk-img { height: 130px; background-size: cover; background-position: center; background-color: #12161c; }
.mk-img.empty, .mk-hero.empty { background: linear-gradient(135deg,#1a1f27,#0e1116); }
.mk-body { padding: 12px; }
.mk-tier { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7d9bb4; }
.mk-title { font-size: 15px; font-weight: 600; margin-top: 2px; }
.mk-sub { font-size: 12px; }
.mk-price { margin-top: 8px; font-size: 15px; }
.mk-price.big { font-size: 20px; margin: 10px 0; }
.mk-was { text-decoration: line-through; opacity: .5; font-size: 13px; margin-right: 4px; }
.mk-dur { font-size: 11px; margin-top: 4px; }
.mk-scrim { position: absolute; inset: 0; background: rgba(6,7,10,.72); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px; }
.mk-modal { position: relative; width: min(560px, 94%); max-height: 90%; overflow: auto; background: #10141a; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; }
.mk-x { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; border: 0; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.mk-hero { height: 200px; background-size: cover; background-position: center; }
.mk-mbody { padding: 18px; }
.mk-mbody h3 { margin: 6px 0 2px; }
.mk-specs { margin: 12px 0; padding-left: 18px; color: #c2cbd6; font-size: 13px; }
.mk-specs li { margin: 3px 0; }
.mk-buy { margin-top: 14px; }
.mk-pay { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; }
.mk-amt { font-size: 20px; margin: 4px 0 8px; }
.mk-wallet { font-size: 12px; word-break: break-all; background: rgba(0,0,0,.3); padding: 6px 8px; border-radius: 8px; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.ok-box { background: rgba(42,179,106,.12); border: 1px solid rgba(42,179,106,.4); color: #7fd6a1; padding: 10px 12px; border-radius: 10px; }
@media (max-width: 820px) { .mk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .mk-img { height: 100px; } }

/* ---------------- M11 entry sales landing ---------------- */
#entry-gate { position: fixed; inset: 0; z-index: 60; overflow: auto; background: radial-gradient(1200px 600px at 70% -10%, #1a2130, #0a0c10 60%); color: #eef2f6; }
.eg-wrap { max-width: 1000px; margin: 0 auto; padding: 24px calc(20px + env(safe-area-inset-right)) 40px calc(20px + env(safe-area-inset-left)); }
.eg-head { display: flex; align-items: center; gap: 12px; padding-top: env(safe-area-inset-top); }
.eg-logo { width: 34px; height: 34px; border-radius: 9px; }
.eg-brand { font-weight: 600; letter-spacing: .16em; }
.eg-signout { margin-left: auto; }
.eg-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; margin-top: 30px; align-items: center; }
.eg-hero-media { aspect-ratio: 1/1; border-radius: 18px; background: linear-gradient(135deg,#1c2430,#0e1116); background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.08); }
.eg-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #7d9bb4; }
.eg-hero-body h1 { font-size: 34px; margin: 8px 0 6px; line-height: 1.1; }
.eg-sub { color: #9fb0c0; margin: 0 0 14px; }
.eg-price { font-size: 30px; font-weight: 600; margin: 6px 0 12px; }
.eg-price span { font-size: 15px; color: #8a97a5; font-weight: 400; }
.eg-desc { color: #b3becb; font-size: 14px; }
.eg-specs { margin: 12px 0; padding-left: 18px; color: #c2cbd6; font-size: 13px; }
.eg-specs li { margin: 4px 0; }
.eg-buy { margin-top: 18px; }
.eg-pay { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; }
.eg-amt { font-size: 22px; margin: 4px 0 8px; }
.eg-wallet { font-size: 12px; word-break: break-all; background: rgba(0,0,0,.3); padding: 6px 8px; border-radius: 8px; }
.eg-more { margin-top: 34px; }
.eg-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; }
.eg-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; cursor: pointer; }
.eg-card:hover { border-color: rgba(159,208,224,.4); }
.eg-card-price { font-weight: 600; margin-top: 6px; }
.eg-note { margin-top: 26px; font-size: 12px; text-align: center; }
@media (max-width: 760px) { .eg-hero { grid-template-columns: 1fr; } .eg-hero-body h1 { font-size: 27px; } }

/* ---------------- lower-right license readout ---------------- */
#lic-hud { position: fixed; right: calc(12px + env(safe-area-inset-right)); bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: flex-end; gap: 6px; font-family: ui-monospace, Menlo, monospace; }
#lic-hud .lic-body { background: rgba(12,14,17,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 6px 10px; text-align: right; backdrop-filter: blur(8px); }
#lic-hud .lic-tier { font-size: 11px; color: #cdd9e4; letter-spacing: .06em; }
#lic-hud .lic-id { font-size: 12px; color: #9fd0e0; }
#lic-hud .lic-exp { font-size: 10px; color: #8a97a5; }
#lic-hud .lic-eye { background: rgba(12,14,17,.72); border: 1px solid rgba(255,255,255,.1); color: #9fb0c0; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 12px; }
#lic-hud.hidden-hud .lic-body { display: none; }
.chip-x { background: none; border: 0; color: #8a97a5; cursor: pointer; font-size: 11px; padding: 0; }
.chip-x:hover { color: #e0868a; }

/* XBT expanded: pair history, tx lists, watchlist */
.xbt-exp { background: none; border: 1px solid rgba(255,255,255,.14); color: #9fb0c0; width: 20px; height: 20px; border-radius: 6px; cursor: pointer; font-size: 10px; line-height: 1; padding: 0; }
.xbt-pair { margin: 2px 0 8px 28px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px; }
.xbt-pair-tot { font-size: 12px; color: #c2cbd6; margin-bottom: 8px; }
.xbt-txs { display: flex; flex-direction: column; gap: 3px; }
.xbt-txs.scroll { max-height: 320px; overflow: auto; }
.xbt-tx { display: grid; grid-template-columns: 22px 90px 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; padding: 3px 6px; border-radius: 6px; }
.xbt-tx:hover { background: rgba(255,255,255,.03); }
.xbt-tx .dir { font-weight: 700; text-align: center; }
.xbt-tx .dir.out { color: #e6a15a; } .xbt-tx .dir.in { color: #7fd6a1; } .xbt-tx .dir.other { color: #8a97a5; }
.list .item.unread { border-left: 2px solid #9fd0e0; }
.btn.danger { color: #e0868a; border-color: rgba(224,134,138,.4); }
.row.spread { display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 820px) { .xbt-tx { grid-template-columns: 20px 1fr auto; } .xbt-tx .mono, .xbt-tx .muted:first-of-type { display: none; } }

/* ---------------- Arcade carousel (Steam-style) ---------------- */
.arc-carousel { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(255,255,255,.08); }
.arc-track { position: relative; height: 300px; }
.arc-slide { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: flex-end; opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 6s ease; pointer-events: none; }
.arc-slide.on { opacity: 1; transform: scale(1); pointer-events: auto; }
.arc-info { padding: 26px 30px; max-width: 62%; }
.arc-eyebrow { font-size: 11px; letter-spacing: .18em; color: #9fd0e0; font-weight: 600; }
.arc-title { font-size: 30px; font-weight: 700; margin: 6px 0 6px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.6); line-height: 1.05; }
.arc-sub { font-size: 14px; color: #cdd7e2; max-width: 520px; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.arc-tags { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.arc-tags span { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: #e6edf3; backdrop-filter: blur(4px); }
.arc-cta { margin-top: 14px; }
.arc-dots { position: absolute; bottom: 12px; right: 16px; display: flex; gap: 6px; }
.arc-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; transition: all .2s; }
.arc-dot.on { background: #9fd0e0; width: 22px; border-radius: 4px; }
.tile.has-cover { padding: 0; overflow: hidden; position: relative; min-height: 150px; justify-content: flex-end; }
.tile.has-cover .tile-cover { position: absolute; inset: 0; background-size: cover; background-position: center; }
.tile.has-cover .tt, .tile.has-cover .td, .tile.has-cover .tag { position: relative; z-index: 1; padding-left: 12px; padding-right: 12px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.tile.has-cover .tt { margin-top: auto; padding-top: 8px; }
.tile.has-cover .td { padding-bottom: 4px; }
.tile.has-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,14,.92), rgba(8,10,14,.1) 60%); }
.tile.has-cover .tt, .tile.has-cover .td, .tile.has-cover .tag { z-index: 2; }
@media (max-width: 820px) { .arc-track { height: 220px; } .arc-info { max-width: 82%; padding: 18px; } .arc-title { font-size: 22px; } }

/* image field preview thumbnail */
.img-prev { display: none; margin-top: 8px; width: 160px; height: 90px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.1); }

/* ---------------- Omega conversation rail ---------------- */
.omega-rail { width: 210px; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,.08); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; }
.omega-col { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px; }
.omega-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.omega-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; }
.omega-item:hover { background: rgba(255,255,255,.04); }
.omega-item.on { background: rgba(159,208,224,.1); border-color: rgba(159,208,224,.3); }
.omega-item .ot { font-size: 13px; color: #dbe4ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omega-item .od { font-size: 10px; }
.omega-x { background: none; border: 0; color: #6b7784; cursor: pointer; font-size: 11px; opacity: 0; padding: 2px; }
.omega-item:hover .omega-x { opacity: 1; }
.omega-x:hover { color: #e0868a; }
@media (max-width: 760px) { .omega-rail { width: 140px; } }