@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root { font-family: 'DM Sans', sans-serif; color: #e6f0e9; background: #0d1512; --panel: #15221d; --panel-2: #1a2b24; --line: #2b4438; --muted: #91a99b; --mint: #6ee7a5; --amber: #f0bd68; --red: #fa8585; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: radial-gradient(circle at 10% 0%, #204f3a 0, transparent 32%), #0d1512; } button, input, textarea { font: inherit; } button { cursor: pointer; } .shell { width: min(1180px, 92vw); margin: 0 auto; padding-bottom: 60px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; border-bottom: 1px solid var(--line); }.brand { display: flex; align-items: center; gap: 12px; }.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: #102018; border-radius: 12px; background: var(--mint); font: 700 12px 'Space Mono'; }.brand strong, .brand small { display: block; }.brand strong { font-size: 16px; }.brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 11px 'Space Mono'; }.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px #f0bd6830; }.dot.online { background: var(--mint); box-shadow: 0 0 0 5px #6ee7a530; }.dot.danger { background: var(--red); box-shadow: 0 0 0 5px #fa858530; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 65px 0 38px; }.kicker { margin: 0 0 10px; color: var(--mint); font: 700 10px 'Space Mono'; letter-spacing: .1em; }.intro h1 { max-width: 650px; margin: 0 0 12px; font-size: clamp(32px, 5vw, 58px); line-height: 1; letter-spacing: -.05em; }.lede { max-width: 590px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }.panel { border: 1px solid var(--line); border-radius: 16px; background: #15221dec; box-shadow: 0 16px 45px #0000001c; }.settings { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; margin-bottom: 16px; }.panel h2 { margin: 0; font-size: 16px; }.panel p:not(.kicker) { color: var(--muted); font-size: 11px; }.token-row { display: flex; gap: 8px; width: min(100%, 450px); }.token-row input, input, textarea { width: 100%; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #0f1a16; padding: 11px 12px; font-size: 11px; }.token-row input:focus, input:focus, textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px #6ee7a51f; }.primary, .secondary { padding: 11px 15px; border: 0; border-radius: 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }.primary { color: #102018; background: var(--mint); }.primary:disabled { cursor: not-allowed; opacity: .45; }.secondary { color: var(--mint); border: 1px solid var(--line); background: transparent; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }.metric { display: grid; gap: 8px; padding: 17px; }.metric span, .metric small { color: var(--muted); font-size: 10px; }.metric strong { font: 700 19px 'Space Mono'; overflow-wrap: anywhere; }.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }.qr-panel, .send-panel, .logs-panel { padding: 20px; }.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }.badge { padding: 6px 8px; color: var(--amber); border: 1px solid #f0bd6840; border-radius: 6px; background: #f0bd6812; font-size: 9px; font-weight: 700; white-space: nowrap; }.badge.green { color: var(--mint); border-color: #6ee7a540; background: #6ee7a512; }.empty { display: grid; place-items: center; min-height: 220px; gap: 7px; color: var(--muted); text-align: center; font-size: 11px; }.empty strong { color: #d4e4d9; font-size: 13px; }.qr-image { display: block; width: min(100%, 250px); aspect-ratio: 1; margin: 0 auto 16px; padding: 10px; border-radius: 10px; background: #fff; }.qr-help { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }.qr-help b { color: #d4e4d9; }.send-panel form { display: grid; gap: 13px; }.send-panel label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; }.send-panel textarea { resize: vertical; }.feedback { min-height: 15px; margin: 0 !important; }.logs { display: grid; gap: 7px; max-height: 430px; overflow-y: auto; }.logs .empty { min-height: 80px; }.log { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 9px; background: var(--panel-2); }.log > div { display: grid; gap: 4px; }.log strong { font-size: 11px; font-weight: 500; }.log small { color: var(--muted); font-size: 9px; }.log-type { flex: none; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--amber); }.log-type.in { background: var(--mint); }.log-type.out { background: #9fbbff; }.log-type.danger { background: var(--red); }.global-error { min-height: 18px; margin: 15px 0 0; color: var(--red); font-size: 11px; }
 .commerce-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }.commerce-panel { padding: 20px; }.product-list, .order-list { display: grid; gap: 7px; max-height: 250px; overflow-y: auto; }.product, .order { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 9px; background: var(--panel-2); }.product > div, .order > div, .product > span, .order > span { display: grid; gap: 4px; }.product strong, .order strong { font-size: 11px; }.product small, .order small { color: var(--muted); font-size: 9px; }.product > span, .order > span { color: var(--mint); font: 700 10px 'Space Mono'; text-align: right; }.order > span { color: var(--amber); }.command-note { margin-bottom: 0; line-height: 1.6; }.command-note b { color: #d4e4d9; }
@media (max-width: 800px) { .intro, .settings { align-items: stretch; flex-direction: column; }.metrics, .commerce-grid { grid-template-columns: repeat(2, 1fr); }.main-grid { grid-template-columns: 1fr; } .token-row { width: 100%; } }
@media (max-width: 500px) { .shell { width: min(92vw, 450px); }.topbar { align-items: flex-start; flex-direction: column; padding: 18px 0; }.intro { padding: 42px 0 28px; }.metrics { grid-template-columns: 1fr; }.settings { padding: 15px; }.token-row { align-items: stretch; flex-direction: column; }.intro h1 { font-size: 36px; } }
#auth-panel[hidden] { display: none; }
.log code { display: block; max-width: 100%; margin-top: 3px; overflow-wrap: anywhere; color: #f0bd68; font: 9px 'Space Mono'; white-space: pre-wrap; }
.product img { width: 42px; height: 42px; flex: none; border-radius: 8px; object-fit: cover; background: #0f1a16; }
.log details { margin-top: 3px; color: var(--muted); font-size: 9px; }.log summary { cursor: pointer; color: var(--muted); }