:root{
  --bg:#07101d;
  --bg2:#0c1730;
  --panel:#0d1830;
  --soft:#12203d;
  --line:#21385c;
  --text:#edf4ff;
  --muted:#92a7c7;
  --blue:#4f8cff;
  --cyan:#48dcff;
  --pink:#ff7bc5;
  --good:#34d399;
  --warn:#fbbf24;
  --bad:#fb7185;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--text);
  background:
    linear-gradient(rgba(6,12,25,.88), rgba(6,12,25,.92)),
    url('/assets/img/bg-otpinaja.png') center/cover fixed no-repeat,
    radial-gradient(circle at 80% -10%,#1d3f72 0,transparent 35%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.shell{min-height:100vh}
.sidebar{
  position:fixed;inset:0 auto 0 0;width:265px;
  background:rgba(9,17,34,.84);
  backdrop-filter:blur(20px);
  border-right:1px solid var(--line);
  padding:18px 16px;z-index:20;
}
.brand{
  display:flex;align-items:center;gap:12px;
  margin:4px 6px 24px;padding:8px;
  border:1px solid rgba(72,220,255,.16);
  background:linear-gradient(180deg,rgba(18,32,61,.78),rgba(10,20,40,.64));
  border-radius:18px;
}
.brand-logo{width:56px;height:56px;object-fit:contain;flex:0 0 56px}
.brand-copy{display:grid;gap:2px;min-width:0}
.brand-title{font-size:18px;font-weight:800;line-height:1.1;word-break:break-word}
.brand-copy small{color:var(--muted)}
.sidebar nav{display:grid;gap:7px}
.sidebar nav a{
  padding:12px 13px;border-radius:12px;color:#d5e3f5;
  border:1px solid transparent;
}
.sidebar nav a:hover,.sidebar nav a.active{
  background:rgba(25,45,78,.72);
  border-color:rgba(79,140,255,.18);
  color:#fff;
}
.main{margin-left:265px}
.topbar{
  position:sticky;top:0;z-index:10;height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 26px;background:#07111ed9;backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar>div:first-of-type{display:grid}
.topbar small{color:var(--muted);margin-top:3px}
.burger{display:none;background:var(--soft);color:white;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.balance-pill{padding:10px 13px;border:1px solid #2a446b;background:#11233e;border-radius:12px;color:var(--muted)}
.balance-pill b{color:white}
.content{padding:26px;max-width:1200px;margin:auto}
.footer{padding:30px;text-align:center;color:var(--muted);font-size:12px}
.hero{
  position:relative;overflow:hidden;
  padding:26px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(135deg,rgba(16,31,53,.9),rgba(10,18,36,.88));
  box-shadow:0 20px 60px #0005;
}
.hero::after{
  content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;
  background:url('/assets/img/mascot-otpinaja.png') center/contain no-repeat;opacity:.16;pointer-events:none;
}
.hero h1{margin:0 0 8px;font-size:clamp(26px,5vw,44px)}
.hero p{color:var(--muted);max-width:720px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:18px}
.card{
  grid-column:span 4;background:linear-gradient(180deg,rgba(16,31,53,.86),rgba(11,22,39,.88));
  border:1px solid var(--line);border-radius:18px;padding:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.card.wide{grid-column:span 8}
.card.full{grid-column:1/-1}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}
.kpi{font-size:28px;font-weight:800;margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:11px 15px;background:linear-gradient(135deg,var(--blue),#6f72ff);color:white;font-weight:700;cursor:pointer}
.btn.secondary{background:var(--soft);border:1px solid var(--line)}
.btn.danger{background:#4b1724;color:#ffc4cf}
.btn:disabled{opacity:.55;cursor:not-allowed}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
label{color:#cdd8e7;font-size:13px;font-weight:650}
input,select,textarea{
  width:100%;padding:12px 13px;border-radius:12px;border:1px solid var(--line);
  background:#091523;color:white;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #4f8cff22}
table{width:100%;border-collapse:collapse}
.table-wrap{overflow:auto}
.table-wrap th,.table-wrap td{padding:12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-size:13px}
.table-wrap th{color:#93a9c4}
.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#1b2b42}
.status.SUCCESS,.status.approved{background:#11352d;color:#72f0ca}
.status.PENDING,.status.pending,.status.PROCESSING{background:#3b3013;color:#f8d26e}
.status.FAILED,.status.CANCELED,.status.rejected{background:#451925;color:#ff9aac}
.alert{padding:12px 14px;border-radius:12px;margin-bottom:16px;border:1px solid var(--line)}
.alert.success{background:#103126;color:#7ee8c2}
.alert.error{background:#421723;color:#ffb0bf}
.alert.info{background:#132a49;color:#a8caff}
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(460px,100%);background:rgba(13,25,42,.92);border:1px solid var(--line);border-radius:20px;padding:24px}
.auth-card h1{margin-top:0}
.stack{display:grid;gap:13px}
.price{font-size:25px;font-weight:900;color:#9fc0ff}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.split{display:flex;justify-content:space-between;gap:14px;align-items:center}
.note{padding:11px 13px;background:#0b1626;border:1px dashed #2d4465;border-radius:11px;color:var(--muted);font-size:13px;overflow-wrap:anywhere;word-break:break-word}
.code{font-family:ui-monospace,monospace;overflow-wrap:anywhere;word-break:break-word}
.otp{font-size:24px;letter-spacing:3px;color:#88f0cc;font-weight:900}
.search-input{padding-left:42px}
.search-wrap{position:relative}
.search-wrap::before{content:'⌕';position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7ea4da;font-size:18px;pointer-events:none}
.country-hint{font-size:12px;color:var(--muted);margin-top:6px}
.recent-list{display:grid;gap:10px;margin-top:8px}
.recent-item{padding:12px;border-radius:14px;background:rgba(10,20,36,.7);border:1px solid rgba(79,140,255,.12)}
.recent-item .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.recent-item .name{font-weight:700}
.recent-item .meta{font-size:12px;color:var(--muted);margin-top:4px}
.recent-empty{padding:12px;border-radius:14px;background:rgba(10,20,36,.55);border:1px dashed rgba(79,140,255,.18);color:var(--muted)}
.webhook-box{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:850px){
  .sidebar{transform:translateX(-100%);transition:.25s;width:270px}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .burger{display:block}
  .topbar{padding:0 14px}
  .content{padding:14px}
  .card,.card.wide{grid-column:1/-1}
  .form-grid{grid-template-columns:1fr}
  .balance-pill{font-size:12px}
  .hero{padding:19px}
  .hero::after{width:140px;height:140px;right:-20px;bottom:-30px;opacity:.14}
  .brand-logo{width:48px;height:48px}
}