/* 777 HOSTING — Mini App theme. Tokens from design-system/MASTER.md */
:root{
  --bg:#0a0306; --bg-elev:#140509; --surface:#1b070d; --surface-2:#250a12;
  --border:#3a0e18; --primary:#e10b1f; --primary-hi:#ff2d4e; --accent:#ff1a4b;
  --gold:#f7d774; --success:#26d07c; --warning:#ffb020; --danger:#ff3b3b;
  --text:#f6e9ec; --text-2:#c9a3ac; --text-3:#8a6b72;
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,sans-serif; font-size:16px; line-height:1.5;
  min-height:100dvh; overflow-x:hidden;
}
.hidden{display:none!important}

/* ambient background glow */
.app-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,26,75,.18) 0%, rgba(225,11,31,.08) 28%, transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(225,11,31,.10) 0%, transparent 55%),
    var(--bg);
}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px calc(12px); backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(10,3,6,.92), rgba(10,3,6,.55));
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:baseline; gap:8px; font-family:"Chakra Petch",sans-serif}
.brand-777{
  font-weight:700; font-size:26px; letter-spacing:2px; color:#fff;
  text-shadow:0 0 8px rgba(225,11,31,.9),0 0 22px rgba(255,26,75,.6);
}
.brand-sub{font-weight:600; font-size:13px; letter-spacing:4px; color:var(--text-2)}
.balance-pill{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; border-radius:999px; font:600 13px/1 "JetBrains Mono",monospace;
  background:var(--surface-2); border:1px solid var(--border);
  box-shadow:0 0 0 1px rgba(225,11,31,.25), 0 6px 18px -10px rgba(225,11,31,.5);
  color:var(--gold);
}
.balance-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* layout */
.root{padding:18px 16px calc(96px + var(--safe-b)); max-width:680px; margin:0 auto}
.view{animation:fade .25s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h2.section-title{font:700 13px/1 Inter; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-2); margin:24px 4px 12px}

/* cards */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:16px; box-shadow:0 4px 16px -8px #000;
}
.card + .card{margin-top:12px}

/* hero balance */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  padding:22px; border:1px solid rgba(255,26,75,.3);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,26,75,.2), transparent 55%),
    linear-gradient(135deg, #2a0a13, #160509);
  box-shadow:0 0 0 1px rgba(225,11,31,.25), 0 18px 48px -20px rgba(225,11,31,.6);
}
.hero .label{font:600 12px/1 Inter; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-2)}
.hero .amount{font:700 38px/1.1 "Chakra Petch",sans-serif; margin:8px 0 2px; color:#fff;
  text-shadow:0 0 18px rgba(255,26,75,.45)}
.hero .coins{font:500 14px/1 "JetBrains Mono",monospace; color:var(--gold)}
.hero-stats{display:flex; gap:10px; margin-top:18px}
.stat{flex:1; background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px}
.stat .v{font:700 22px/1 "Chakra Petch"; color:#fff}
.stat .k{font:500 11px/1 Inter; color:var(--text-2); margin-top:4px; text-transform:uppercase; letter-spacing:.5px}

/* chips */
.chips{display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; padding:9px 15px; border-radius:999px; font:600 13px/1 Inter; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  transition:.2s; min-height:38px; display:flex; align-items:center;
}
.chip.active{background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; border-color:transparent;
  box-shadow:0 0 0 1px rgba(225,11,31,.4),0 8px 22px -10px var(--accent)}

/* sort row + counts */
.sort-row{margin-top:2px}
.chip.sort{padding:7px 12px;font-size:12px;min-height:32px;background:transparent}
.chip.sort.active{background:var(--surface-2);color:var(--text);border-color:var(--accent);box-shadow:none}
.muted-count{font:500 11px/1 Inter;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin:10px 4px 8px}
.price .per{font:500 11px/1 Inter;color:var(--text-2);font-style:normal;margin-left:2px}

/* service card */
.svc{display:flex; flex-direction:column; gap:6px}
.svc .top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.svc .title{font:600 16px/1.25 Inter; color:var(--text)}
.svc .price{font:700 17px/1 "Chakra Petch"; color:#fff; white-space:nowrap}
.svc .price small{display:block; font:500 11px/1.4 "JetBrains Mono"; color:var(--gold); text-align:right}
.svc .desc{font:400 13px/1.45 Inter; color:var(--text-2)}
.svc .specs{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.spec-tag{font:500 11px/1 "JetBrains Mono"; color:var(--text-2); background:var(--surface-2);
  border:1px solid var(--border); padding:6px 9px; border-radius:8px}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 18px; border:none; border-radius:var(--r-sm); cursor:pointer;
  font:600 15px/1 Inter; color:#fff; width:100%; margin-top:12px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 8px 24px -10px var(--accent); transition:transform .12s ease, filter .2s;
}
.btn:active{transform:scale(.97)}
.btn.secondary{background:var(--surface-2); border:1px solid var(--border); color:var(--text); box-shadow:none}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text-2); box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#b81f1f,var(--danger))}
.btn-row{display:flex; gap:10px}
.btn-row .btn{margin-top:0}

/* server card */
.server .head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.server .name{font:600 15px/1.2 Inter}
.server .meta{margin-top:10px; display:grid; grid-template-columns:auto 1fr; gap:6px 10px;
  font:500 13px/1.3 "JetBrains Mono"; color:var(--text-2)}
.server .meta b{color:var(--text); font-weight:500}
.status{display:inline-flex; align-items:center; gap:6px; font:600 12px/1 Inter; padding:6px 10px; border-radius:999px}
.status .s-dot{width:8px;height:8px;border-radius:50%}
.status.online{color:var(--success); background:rgba(38,208,124,.12)} .status.online .s-dot{background:var(--success);box-shadow:0 0 8px var(--success)}
.status.prov{color:var(--warning); background:rgba(255,176,32,.12)} .status.prov .s-dot{background:var(--warning)}
.status.susp{color:var(--danger); background:rgba(255,59,59,.12)} .status.susp .s-dot{background:var(--danger)}
.status.pending{color:var(--text-2); background:var(--surface-2)} .status.pending .s-dot{background:var(--text-3)}
.actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px}

/* amount input */
.amount-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0}
.amount-grid .amt{padding:14px 0; text-align:center; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  font:600 16px/1 "Chakra Petch"; cursor:pointer; min-height:48px}
.amount-grid .amt.sel{border-color:var(--accent); color:#fff; box-shadow:0 0 0 1px var(--accent)}
input.field{width:100%; min-height:48px; padding:0 14px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  font:600 16px "JetBrains Mono"; outline:none}
input.field:focus{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}

/* inline SVG icons (replace emoji) */
.ic{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px}
.btn .ic,.chip .ic{width:18px;height:18px}
.ic-coin{width:15px;height:15px;color:var(--gold);vertical-align:-2px}
.coins .ic-coin{filter:drop-shadow(0 0 4px rgba(247,215,116,.6))}
.toast .ic{width:16px;height:16px;vertical-align:-3px}
.empty .ic{width:48px;height:48px}

/* config box */
.config-box{margin-top:14px; padding:14px; border-radius:var(--r-md); background:var(--surface-2);
  border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:10px; animation:fade .2s}
.config-box .qr{width:180px; height:180px; border-radius:12px; background:#fff; padding:8px}
.config-box .cfg-link{font-size:11px; text-align:center}
.config-box .cfg-title{display:flex;align-items:center;gap:6px;align-self:flex-start;font:600 12px Inter;color:var(--accent);margin-top:6px}
.config-box .cfg-title .ic{width:16px;height:16px}
.config-box .awg-text{width:100%;font:500 10px/1.4 "JetBrains Mono";resize:none;text-align:left}

/* empty / skeleton */
.empty{text-align:center; padding:48px 16px; color:var(--text-2)}
.empty svg{width:48px;height:48px;opacity:.4;margin-bottom:12px;stroke:var(--accent);fill:none;stroke-width:1.5}
.skeleton-wrap{display:flex;flex-direction:column;gap:12px}
.sk-card{height:90px;border-radius:var(--r-md);background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:200% 100%; animation:shimmer 1.3s infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* bottom nav */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:space-around; align-items:stretch;
  padding:8px 6px calc(8px + var(--safe-b));
  background:linear-gradient(0deg, rgba(10,3,6,.98), rgba(10,3,6,.82));
  backdrop-filter:blur(16px); border-top:1px solid var(--border);
}
.nav-item{
  flex:1; background:none; border:none; cursor:pointer; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0;
  font:600 10px/1 Inter; min-height:48px; transition:color .2s;
}
.nav-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-item.active{color:var(--accent)}
.nav-item.active svg{filter:drop-shadow(0 0 6px rgba(255,26,75,.8))}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(86px + var(--safe-b)); transform:translateX(-50%) translateY(20px);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:12px 18px; border-radius:var(--r-sm); font:500 14px Inter; z-index:50;
  opacity:0; pointer-events:none; transition:.25s; max-width:90%;
  box-shadow:0 12px 32px -12px #000, 0 0 0 1px rgba(225,11,31,.2);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}