*{box-sizing:border-box;margin:0;padding:0}:root{font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#f4f7ff;background:#0b0d1a;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body{min-height:100vh;background:linear-gradient(160deg,#1b1f3b,#0b0d1a 60% 100%)}#app{padding:24px}.page{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,#f8636359,#63b3ff40);border:1px solid rgba(255,255,255,.08)}.hero h1{font-size:26px;margin-bottom:6px}.hero p{color:#d6dcff;font-size:13px}.badge{padding:6px 14px;border-radius:999px;background:#48bb7833;color:#b7f0c9;border:1px solid rgba(72,187,120,.5);font-size:12px}.badge.off{background:#ff636333;color:#ffc2c2;border-color:#ff636380}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}.stat{padding:14px 16px;border-radius:14px;background:#141c34cc;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:8px}.stat span{font-size:12px;color:#9cb0ff}.stat strong{font-size:18px}.card{padding:20px;border-radius:18px;background:#101628e6;border:1px solid rgba(255,255,255,.06);box-shadow:0 12px 30px #00000059;display:flex;flex-direction:column;gap:14px}.card h2{font-size:18px}.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#b0b9dd}input{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#070b18cc;color:#f4f7ff}button{padding:10px 16px;border-radius:10px;border:none;cursor:pointer;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}button:hover{transform:translateY(-1px)}.primary{background:linear-gradient(135deg,#f56565,#4dabf7);color:#10131f;box-shadow:0 10px 20px #f565654d}.ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:#f4f7ff}.banner{padding:12px 14px;border-radius:14px;font-size:13px;display:flex;align-items:center;gap:8px;background:#0d1426cc;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 24px #00000040}.banner:before{content:"";width:8px;height:8px;border-radius:50%;display:inline-block}.banner.error{color:#ffb3b3;border-color:#ff505080}.banner.error:before{background:#ff5c5c;box-shadow:0 0 8px #ff5c5ccc}.banner.success{color:#8ce6b8;border-color:#3cdc8c73}.banner.success:before{background:#3cdc8c;box-shadow:0 0 8px #3cdc8ccc}.msg{padding:10px 12px;border-radius:10px;font-size:13px}.msg.error{background:#ff505026;color:#ffb3b3;border:1px solid rgba(255,80,80,.35)}.msg.success{background:#3cdc8c1f;color:#8ce6b8;border:1px solid rgba(60,220,140,.3)}.highlight{border:1px solid rgba(99,179,255,.4)}.order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.order-grid span{font-size:12px;color:#9cb0ff}.order-grid strong{font-size:16px}.order-list{display:grid;gap:10px}.order-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#080c1899;border:1px solid rgba(255,255,255,.05);font-size:12px}.order-item span{display:block;color:#b0b9dd}