:root{
  --sf-primary:#F89D29;
  --sf-surface:#0b1220;
  --sf-radius:18px;
  --sf-font: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  --sf-bg:#0b1220;
  --sf-card:#0f1a2e;
  --sf-text:#eaf0ff;
  --sf-muted:#a7b2d6;
  --sf-border:rgba(255,255,255,.12);
  --sf-success:#22c55e;
  --sf-danger:#ef4444;
  --sf-warn:#f59e0b;
}

html,body{height:100%}
body{
  margin:0;
  font-family:var(--sf-font);
  background: radial-gradient(1200px 600px at 25% 0%, rgba(248,157,41,.22), transparent 55%),
              radial-gradient(900px 600px at 80% 10%, rgba(125,211,252,.18), transparent 55%),
              var(--sf-bg);
  color:var(--sf-text);
}

.sf-wrap{max-width:1080px; margin:0 auto; padding:18px}
.sf-topbar{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(10,16,30,.6); border-bottom:1px solid var(--sf-border)}
.sf-topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.sf-brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none}
.sf-logo{width:28px; height:28px; border-radius:8px}
.sf-brand-name{font-weight:700; letter-spacing:.2px}
.sf-nav{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end}
.sf-nav-link{color:var(--sf-muted); text-decoration:none; padding:8px 10px; border-radius:12px}
.sf-nav-link:hover{background:rgba(255,255,255,.06); color:var(--sf-text)}

.sf-main{padding:18px 0 30px}
.sf-hero{padding:20px 0}
.sf-hero-card{
  padding:22px;
  border-radius: calc(var(--sf-radius) + 8px);
  border:1px solid var(--sf-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.sf-h1{font-size:38px; line-height:1.05; margin:0 0 10px}
.sf-h2{font-size:22px; margin:0 0 12px}
.sf-h3{font-size:16px; margin:0 0 8px}
.sf-sub{color:var(--sf-muted); margin:0 0 14px; max-width:68ch}
.sf-muted{color:var(--sf-muted)}

.sf-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.sf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: 14px; border:1px solid var(--sf-border);
  text-decoration:none; cursor:pointer; font-weight:650; letter-spacing:.1px;
  background: rgba(255,255,255,.05); color:var(--sf-text);
}
.sf-btn:hover{transform: translateY(-1px)}
.sf-btn:disabled{opacity:.5; cursor:not-allowed}
.sf-btn-primary{
  border-color: rgba(248,157,41,.45);
  background: linear-gradient(135deg, rgba(248,157,41,1), rgba(248,157,41,.65));
  color:#1b1308;
  box-shadow: 0 12px 30px rgba(248,157,41,.22);
}
.sf-btn-ghost{background: rgba(255,255,255,.03)}
.sf-pill{margin-top:14px; display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--sf-border)}

.sf-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin-top:14px}
.sf-grid-2{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px}
.sf-grid-3{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px}
@media (max-width: 900px){ .sf-grid{grid-template-columns: 1fr} .sf-grid-2,.sf-grid-3{grid-template-columns:1fr} .sf-h1{font-size:30px}}

.sf-card{
  padding:16px;
  border-radius: var(--sf-radius);
  border:1px solid var(--sf-border);
  background: rgba(15,26,46,.68);
}
.sf-row{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.sf-balance{min-width:160px; text-align:right}
.sf-balance-num{font-size:28px; font-weight:800}
.sf-price{display:flex; align-items:baseline; gap:10px; margin:10px 0 12px}
.sf-price-main{font-size:28px; font-weight:800}

.sf-alert{
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--sf-border);
  margin: 0 0 14px;
  background: rgba(255,255,255,.05);
}
.sf-alert-danger{border-color: rgba(239,68,68,.45)}
.sf-alert-success{border-color: rgba(34,197,94,.45)}
.sf-alert-warn{border-color: rgba(245,158,11,.45)}

.sf-label{display:block; margin:10px 0 6px; color:var(--sf-muted); font-size:13px}
.sf-input,.sf-textarea{
  width:100%;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--sf-border);
  background: rgba(255,255,255,.04);
  color: var(--sf-text);
  outline:none;
}
.sf-input:focus,.sf-textarea:focus{border-color: rgba(125,211,252,.5)}
.sf-check{display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--sf-muted)}

.sf-table{width:100%; border-collapse:collapse}
.sf-table th,.sf-table td{padding:10px 8px; border-bottom:1px solid var(--sf-border); text-align:left}
.sf-pos{color: rgba(34,197,94,.9)}
.sf-neg{color: rgba(239,68,68,.9)}

.sf-footer{border-top:1px solid var(--sf-border); padding:18px 0; background: rgba(10,16,30,.55)}
.sf-footer-inner{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}
.sf-footer-link{color:var(--sf-muted); text-decoration:none; margin-left:12px}
.sf-footer-link:hover{color:var(--sf-text)}


.sf-pre{white-space:pre-wrap; word-break:break-word; background:rgba(255,255,255,.06); border:1px solid var(--sf-border); border-radius:14px; padding:12px; overflow:auto;}