:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #f5f8fc;
  --surface: #ffffff;
  --ink: #182744;
  --muted: #73829b;
  --line: #e3eaf4;
  --blue: #2068cd;
  --blue-dark: #174d9d;
  --green: #0a9b68;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg); font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.icon { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 16px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 43px; letter-spacing: .035em; }
.brand img { border-radius: 13px; box-shadow: 0 4px 14px #2367bd17; }
.brand strong { display: block; font-size: 13px; font-weight: 850; white-space: nowrap; letter-spacing: .045em; }
.brand small { display: block; margin-top: 3px; color: #5f789b; font-size: 9px; font-weight: 750; letter-spacing: .27em; }
.nav-label, .eyebrow { color: #7484a0; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.nav-label { padding: 0 14px; margin: 0 0 13px; }
.nav-link { display: flex; align-items: center; gap: 11px; min-height: 44px; margin: 5px 0; padding: 11px 14px; border-radius: 10px; color: #60728d; font-weight: 680; transition: .18s ease; }
.nav-link:hover { background: #f4f8ff; color: var(--blue); }
.nav-link.selected { background: #ecf4ff; color: #185bbb; box-shadow: inset 3px 0 #2169d4; }
.sidebar-foot { margin-top: auto; padding: 18px; border: 1px solid #dce8f7; border-radius: 15px; background: #f6f9ff; }
.sidebar-foot strong { display: block; margin: 12px 0 5px; font-size: 13px; }
.sidebar-foot p { margin: 0; line-height: 1.55; color: #73839a; font-size: 11px; }
.foot-symbol { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--blue); background: #e6f0ff; }
.main-area { min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 82px; padding: 15px clamp(22px, 3vw, 48px); display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: #ffffffdb; }
.top-title { font-size: 18px; font-weight: 800; margin-top: 4px; letter-spacing: -.025em; }
.top-actions, .account-pill { display: flex; align-items: center; gap: 12px; }
.account-pill { font-weight: 750; }
.account-pill small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; margin-top: 2px; }
.avatar { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #245fb5; }
.content { flex: 1; width: min(1480px, 100%); margin: 0 auto; padding: 34px clamp(22px, 3vw, 48px) 70px; }
.glass { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 7px 27px #213a6410; }
.hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 335px; overflow: hidden; border-color: #d6e6fa; background: linear-gradient(112deg, #fff 5%, #f3f8ff 65%, #e6f0ff); }
.hero-copy { z-index: 1; padding: 46px 48px; }
.hero h1 { max-width: 660px; margin: 20px 0 15px; font-size: clamp(35px, 4vw, 56px); line-height: 1.11; letter-spacing: -.055em; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero p { max-width: 525px; margin: 0; color: #5e708c; font-size: 15px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.hero-art { position: relative; min-height: 310px; display: grid; place-items: center; overflow: hidden; }
.hero-art::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: #d9eafd9c; }
.orb { position: absolute; border-radius: 50%; }
.orb-a { width: 280px; height: 280px; border: 1px solid #89b5ed88; }
.orb-b { width: 355px; height: 355px; border: 1px solid #bfd6f0; }
.hero-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 225px; padding: 22px 24px; background: #ffffffeb; border: 1px solid #d9e5f4; box-shadow: 0 20px 50px #21509121; border-radius: 19px; }
.hero-center img { width: 95px; height: 95px; }
.hero-center span { font-weight: 850; letter-spacing: .06em; }
.hero-center small { color: #6a80a0; font-size: 9px; letter-spacing: .28em; }
.floating-chip { position: absolute; z-index: 1; display: flex; align-items: center; gap: 7px; padding: 9px 11px; background: white; border: 1px solid #dbe7f7; border-radius: 10px; color: #376193; box-shadow: 0 8px 22px #2d5a8a18; font-size: 11px; font-weight: 700; }
.floating-chip .icon { width: 15px; height: 15px; color: var(--blue); }
.floating-chip.top { right: 8%; top: 14%; }
.floating-chip.bottom { left: 7%; bottom: 14%; }
.live-dot, .status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #17aa78; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 11px 16px; border: 1px solid transparent; border-radius: 10px; font-weight: 750; white-space: nowrap; transition: transform .17s, box-shadow .17s, background .17s; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--blue); color: #fff; box-shadow: 0 7px 16px #2068cd25; }
.btn.primary:hover { background: var(--blue-dark); box-shadow: 0 9px 21px #2068cd36; }
.btn.secondary { background: #ecf4ff; color: #1859b1; border-color: #d0e3fc; }
.btn.ghost, .btn.glass-btn { background: white; color: #405d82; border-color: #d9e4f2; }
.btn.small { padding: 6px 11px; min-height: 33px; font-size: 12px; }
.btn.full { width: 100%; }
.balance-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #d4e5f7; border-radius: 10px; background: white; color: #315c91; font-weight: 750; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; margin: 37px 0 18px; }
.section-heading h1, .section-heading h2 { margin: 6px 0 0; font-size: 26px; letter-spacing: -.035em; }
.counter { padding: 8px 11px; border: 1px solid #dce6f3; border-radius: 9px; background: white; color: #627894; font-size: 12px; white-space: nowrap; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-card { display: flex; flex-direction: column; min-height: 290px; padding: 23px; transition: border-color .17s, transform .17s, box-shadow .17s; }
.product-card:hover { transform: translateY(-3px); border-color: #aac8ec; box-shadow: 0 13px 30px #1c5ca819; }
.card-head, .product-bottom, .order-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.provider-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffdfa9; border-radius: 13px; background: #fff6e6; color: #ec9719; }
.provider-icon.vultr { color: #146ccd; background: #eaf4ff; border-color: #cce3ff; }
.provider-icon .icon { width: 25px; height: 25px; }
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 6px 9px; border-radius: 8px; font-size: 11px; font-weight: 780; white-space: nowrap; }
.badge.available { color: #07865b; background: #e8f8f0; border: 1px solid #cbebdc; }
.badge.empty { color: #aa6644; background: #fff1e9; border: 1px solid #f4dacb; }
.badge.empty .status-dot { background: #d38c67; }
.provider { margin-top: 25px; color: #7589a4; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.product-card h3 { font-size: 21px; margin: 8px 0 4px; letter-spacing: -.025em; }
.product-card p { min-height: 43px; margin: 5px 0; color: #71829b; line-height: 1.55; }
.card-rule { margin: auto 0 17px; border-top: 1px solid #e9eef5; }
.product-bottom small { display: block; margin-bottom: 3px; color: #8796ad; font-size: 10px; letter-spacing: .07em; }
.product-bottom strong { font-size: 22px; letter-spacing: -.03em; }
.assurance { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding: 25px 8px; border-top: 1px solid #e4eaf3; color: #68809c; }
.assurance div { display: flex; align-items: center; gap: 9px; }.assurance .icon { color: var(--blue); }
.footer { display: flex; justify-content: space-between; gap: 10px; padding: 15px 48px 28px; color: #8a99af; font-size: 11px; }
.alert { padding: 12px 15px; margin-bottom: 22px; border-radius: 10px; }.alert.success { background: #eaf9f0; border: 1px solid #c7e9d3; color: #187349; }.alert.error { background: #fff0ef; border: 1px solid #f2d2cf; color: #aa3b38; }
.muted { color: var(--muted); }.positive { color: #068856; }.negative { color: #c6554b; }.block { display: block; margin-top: 4px; }
.empty-state { grid-column: 1 / -1; padding: 47px; text-align: center; color: var(--muted); }.empty-state .icon { width: 42px; height: 42px; color: var(--blue); }.empty-state h3 { color: var(--ink); }
.order-list { display: grid; gap: 16px; }.order-card { padding: 24px; }.order-top { justify-content: flex-start; }.order-top > div:nth-child(2) { flex: 1; }.order-top h3 { font-size: 18px; margin: 6px 0; }.order-top small { color: var(--muted); }
.delivery { margin-top: 18px; padding: 18px; border: 1px solid #dfe9f5; border-radius: 12px; background: #f7faff; }.delivery-heading { display: flex; align-items: center; gap: 8px; font-weight: 750; }.delivery-heading .icon { color: var(--blue); }.delivery pre { padding: 12px 0; margin: 4px 0; color: #344b69; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.wallet-hero { display: flex; justify-content: space-between; align-items: center; padding: 32px; background: linear-gradient(110deg, white, #eef6ff); }.wallet-hero h1 { margin: 7px 0; font-size: 44px; }.wallet-hero p { color: var(--muted); }.wallet-icon { padding: 20px; color: var(--blue); border-radius: 16px; background: #dcecff; }.wallet-icon .icon { width: 35px; height: 35px; }
.table-wrap { overflow-x: auto; }table { width: 100%; min-width: 480px; border-collapse: collapse; text-align: left; }th { background: #f7faff; color: #7185a0; font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }td, th { padding: 14px 17px; border-bottom: 1px solid #e9eef6; }td { color: #455b79; font-size: 12px; }td strong { color: var(--ink); }tbody tr:last-child td { border-bottom: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.stat-card { display: flex; flex-direction: column; gap: 10px; padding: 21px; }.stat-card small { color: var(--muted); }.stat-card strong { font-size: 26px; letter-spacing: -.035em; }.stat-symbol { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }.stat-symbol.violet { background: #eeebff; color: #7461c3; }.stat-symbol.blue { background: #e5f0ff; color: #236bc7; }.stat-symbol.green { background: #e6f7f0; color: #159b6b; }.stat-symbol.pink { background: #fff0f5; color: #c2688f; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }.admin-panel { padding: 22px; }.panel-heading { margin-bottom: 21px; }.panel-heading h2 { font-size: 18px; margin: 6px 0; }
.form-row { display: flex; gap: 12px; }.form-row label { flex: 1; min-width: 0; }form label { display: block; margin-bottom: 13px; color: #52657e; font-size: 12px; font-weight: 700; }input, select, textarea { display: block; width: 100%; min-height: 41px; margin-top: 7px; padding: 10px 12px; color: #233653; background: #fbfdff; border: 1px solid #d9e3ef; border-radius: 9px; outline: 0; }input:focus, select:focus, textarea:focus { border-color: #5a99e7; box-shadow: 0 0 0 3px #3487ec1d; }textarea { resize: vertical; }input::placeholder, textarea::placeholder { color: #9aaabe; }.form-hint { color: #8090a7; font-size: 11px; line-height: 1.5; }
.stock-panel { border-color: #bad4f9; box-shadow: 0 14px 35px rgba(23, 85, 169, .06); }.stock-panel .panel-heading { margin-bottom: 15px; }.stock-panel .panel-heading .form-hint { margin: 8px 0 0; }.stock-panel .optional { color: #8696ac; font-weight: 500; }.stock-panel .btn { width: 100%; justify-content: center; }.stock-panel .btn:disabled { opacity: .55; cursor: not-allowed; }
.connect-panel { margin: 18px 0 27px; padding: 22px; }.connect-panel h2 { margin: 0 0 6px; font-size: 18px; }.connect-panel p { margin: 0 0 13px; color: #71819b; line-height: 1.5; }.connect-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.checkout-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }.checkout-card { display: grid; gap: 12px; width: min(460px, 100%); padding: 34px; }.checkout-card h1 { margin: 0; font-size: 28px; }.checkout-card p { margin: 0; color: #647894; line-height: 1.6; }.checkout-card strong { color: #18395e; font-size: 22px; }.checkout-card small { overflow-wrap: anywhere; color: #8090a7; }
.inline-form { display: flex; align-items: center; gap: 7px; min-width: 125px; }.inline-form input { width: 84px; min-height: 32px; margin: 0; padding: 6px; }.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }.text-btn { padding: 5px; background: none; border: 0; color: #b9584b; }
.auth-grid { display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 7%; align-items: start; }.auth-intro { padding: 70px 0; }.auth-intro h1 { margin: 18px 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; letter-spacing: -.05em; }.auth-intro p { max-width: 460px; color: #72839e; line-height: 1.8; }.hero-emblem { padding: 34px 0; }.hero-emblem img { width: 120px; height: 120px; }.auth-card { padding: 30px; }.auth-card h2 { margin: 8px 0 25px; font-size: 27px; }.auth-divider { margin: 27px 0 18px; border-top: 1px solid #e1e8f1; text-align: center; }.auth-divider span { position: relative; top: -9px; display: inline-block; padding: 0 13px; background: white; color: var(--muted); font-size: 11px; }.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }.auth-wrap .auth-card { width: min(450px, 100%); }
@media(max-width: 1160px) { .app-shell { grid-template-columns: 210px minmax(0, 1fr); }.sidebar { width: 210px; }.brand strong { font-size: 11px; }.brand small { font-size: 8px; }.product-grid, .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.two-col { grid-template-columns: 1fr; }.hero-copy { padding: 39px; } }
@media(max-width: 760px) { .app-shell { display: block; }.sidebar { position: relative; width: auto; height: auto; padding: 12px 16px; }.brand { padding: 0 0 10px; }.sidebar nav { display: flex; overflow-x: auto; gap: 5px; }.nav-link { white-space: nowrap; padding: 10px; }.nav-label, .sidebar-foot { display: none; }.topbar { min-height: 70px; }.content { padding: 20px 16px 55px; }.hero { grid-template-columns: 1fr; }.hero-copy { padding: 30px; }.hero-art { min-height: 230px; }.product-grid, .admin-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.auth-grid { grid-template-columns: 1fr; gap: 0; }.auth-intro { padding: 5px 0 10px; }.auth-intro h1 { font-size: 32px; }.hero-emblem { display: none; }.footer { padding: 16px; }.footer span { display: none; } }
@media(max-width: 560px) { .product-grid, .admin-grid, .stat-grid { grid-template-columns: 1fr; }.hero h1 { font-size: 35px; }.hero-art { min-height: 210px; }.account-pill > span:nth-child(2) { display: none; }.section-heading h1, .section-heading h2 { font-size: 22px; }.form-row { display: block; }.footer { font-size: 10px; } }
.install-card { width: min(590px, 100%) !important; }.install-card > img { display: block; margin-bottom: 14px; }.install-card h1 { margin: 8px 0; font-size: 28px; }.install-card > p { line-height: 1.55; margin-bottom: 22px; }