/* ============================================================
   iOS-style theme — glass, blur, capsule buttons, SF system font
   ============================================================ */
:root{
  --bg:#030308;
  --bg2:#0a0b14;
  --card: rgba(255,255,255,0.045);
  --card-solid:#0f1019;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --accent:#4f6bff;
  --accent2:#39e0c9;
  --accent-grad: linear-gradient(135deg,#5b5bf6 0%, #4f6bff 55%, #3d8bff 130%);
  --text:#f5f6fa;
  --muted:#94949c;
  --muted2:#68686f;
  --danger:#ff453a;
  --success:#30d158;
  --warning:#ff9f0a;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow-card: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-btn: 0 8px 22px rgba(79,107,255,0.4);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(680px 420px at 8% -10%, rgba(79,107,255,0.28), transparent 60%),
    radial-gradient(560px 360px at 105% 0%, rgba(57,224,201,0.14), transparent 55%),
    radial-gradient(900px 600px at 50% 115%, rgba(79,107,255,0.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  min-height:100vh;
  padding-bottom: env(safe-area-inset-bottom);
}
a{color:var(--accent2);text-decoration:none; transition:opacity .15s ease;}
a:hover{opacity:.8}
h1,h2,h3{letter-spacing:-0.02em; font-weight:700;}
h1{font-size:34px; line-height:1.15}
h2{font-size:22px; margin:28px 0 14px}
h3{font-size:17px}
p{line-height:1.5}

.container{max-width:1080px;margin:0 auto;padding:0 18px}

/* ---------------- Navbar: iOS translucent blur bar ---------------- */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  margin:14px auto 0;
  max-width:1080px;
  border-radius: 980px;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  position:sticky; top:10px; z-index:50;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.navbar .brand{font-weight:800;font-size:18px;color:var(--text); display:flex; align-items:center; gap:8px;}
.navbar .brand::before{content:"◆"; color:var(--accent2); font-size:14px;}
.navbar nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.navbar nav a{
  margin-left:2px;color:var(--muted); font-size:14px; font-weight:600;
  padding:8px 14px; border-radius:980px; transition: all .18s ease;
}
.navbar nav a:hover{color:var(--text); background:rgba(255,255,255,0.08); opacity:1;}

.container > .navbar + *{margin-top:8px}

/* ---------------- Buttons: iOS capsule buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent-grad); color:#fff;border:none;
  padding:12px 22px;border-radius:980px;cursor:pointer;font-size:15px;font-weight:600;
  box-shadow: var(--shadow-btn);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{opacity:.94; box-shadow:0 10px 26px rgba(124,92,255,.45);}
.btn:active{transform:scale(0.96); box-shadow:0 4px 14px rgba(124,92,255,.35);}
.btn.secondary{
  background:rgba(255,255,255,0.08); color:var(--text);
  border:1px solid var(--border-strong); box-shadow:none;
}
.btn.secondary:hover{background:rgba(255,255,255,0.13)}
.btn.small{padding:8px 16px;font-size:13px}
.btn.danger{background:var(--danger); box-shadow:0 8px 20px rgba(255,69,58,.35)}

/* ---------------- Cards: frosted glass ---------------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:24px;
  margin-bottom:18px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-card);
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:20px 0}

.pkg-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px 16px;text-align:center;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pkg-card:hover{transform:translateY(-4px); border-color:var(--border-strong); box-shadow:var(--shadow-card);}
.pkg-card img{max-width:64px;margin-bottom:8px; border-radius:14px;}
.pkg-card h3{margin:6px 0;font-size:16px}
.pkg-card .price{color:var(--accent2);font-weight:800;font-size:19px;margin:6px 0}
.pkg-card .old-price{color:var(--muted);text-decoration:line-through;font-size:13px}

/* ---------------- Feature / step cards (landing page) ---------------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:20px 0 32px}
.feature-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; backdrop-filter: blur(20px);
}
.feature-card .icon{
  width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-grad); font-size:20px; margin-bottom:14px; box-shadow:var(--shadow-btn);
}
.feature-card h3{margin:0 0 6px}
.feature-card p{color:var(--muted); font-size:14px; margin:0}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:20px 0 32px}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px;}
.step .step-num{
  display:inline-block; font-size:12px; font-weight:800; color:var(--accent2);
  background:rgba(51,217,196,0.12); padding:4px 10px; border-radius:980px; margin-bottom:10px;
}

.hero{
  display:flex; align-items:center; gap:36px; flex-wrap:wrap;
  text-align:left; padding:42px 34px; position:relative; overflow:hidden;
}
.hero-copy{flex:1 1 380px; min-width:280px;}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--accent2); background:rgba(57,224,201,0.12); border:1px solid rgba(57,224,201,.25);
  padding:5px 12px; border-radius:980px; margin-bottom:14px;
}
.hero h1{margin:0 0 12px; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{color:var(--muted); font-size:16px; max-width:520px; margin:0 0 20px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap;}

/* ---------------- Hero receipt preview widget ---------------- */
.receipt{
  flex:0 0 260px; width:260px; background:var(--card-solid); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:0; overflow:hidden; box-shadow:var(--shadow-card);
  transform:rotate(2deg); transition:transform .3s ease;
}
.receipt:hover{transform:rotate(0deg);}
.receipt-head{
  display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px dashed var(--border-strong);
  background:rgba(48,209,88,0.08);
}
.receipt-head .dot{width:8px;height:8px;border-radius:50%;background:var(--success); box-shadow:0 0 8px var(--success);}
.receipt-head span{font-size:12px; font-weight:700; color:var(--success); letter-spacing:.03em;}
.receipt-body{padding:18px;}
.receipt-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;}
.receipt-row .k{font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.05em;}
.receipt-row .v{font-size:14px; font-weight:700; color:var(--text);}
.receipt-row .v.price{color:var(--accent2); font-size:18px;}
.receipt-foot{border-top:1px solid var(--border); padding:12px 18px; font-size:11px; color:var(--muted2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}

/* ---------------- Tables ---------------- */
table{width:100%;border-collapse:collapse; overflow:hidden; border-radius:var(--radius-md);}
table th, table td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
table th{color:var(--muted);font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
table tr:hover td{background:rgba(255,255,255,0.03)}

/* ---------------- Badges: iOS capsule tags ---------------- */
.badge{display:inline-block;padding:4px 12px;border-radius:980px;font-size:12px; font-weight:700; letter-spacing:.01em;}
.badge.pending{background:rgba(255,159,10,0.15);color:var(--warning)}
.badge.approved,.badge.success,.badge.complete{background:rgba(48,209,88,0.15);color:var(--success)}
.badge.rejected,.badge.failed,.badge.cancel{background:rgba(255,69,58,0.15);color:var(--danger)}
.badge.none{background:rgba(255,255,255,0.08);color:var(--muted)}

/* ---------------- Auth ---------------- */
.auth-box{
  max-width:420px;margin:60px auto;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;
  backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--shadow-card);
}
.auth-box h2{margin-top:0}

/* ---------------- Forms: iOS grouped-list inputs ---------------- */
form label{display:block;margin-bottom:16px;font-size:13px;color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
form input, form select, form textarea{
  width:100%;padding:13px 14px;margin-top:7px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(255,255,255,0.05);color:var(--text);
  font-size:15px; font-family:inherit; transition: border-color .15s ease, background .15s ease;
}
form input:focus, form select:focus, form textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(124,92,255,0.08);
}

/* ---------------- Alerts ---------------- */
.alert{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px; border:1px solid transparent;}
.alert-error{background:rgba(255,69,58,0.12);color:#ff9a94; border-color:rgba(255,69,58,0.25)}
.alert-success{background:rgba(48,209,88,0.12);color:#8ff0a8; border-color:rgba(48,209,88,0.25)}
.muted{color:var(--muted);font-size:13px}

/* ---------------- Stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;
  backdrop-filter: blur(20px);
}
.stat .num{font-size:28px;font-weight:800; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat .label{color:var(--muted);font-size:13px; margin-top:4px;}

/* ---------------- Admin: floating glass sidebar ---------------- */
.admin-wrap{display:flex; gap:18px; max-width:1200px; margin:14px auto; padding:0 18px; align-items:flex-start;}
.admin-sidebar{
  width:230px;min-width:230px; background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 0; position:sticky; top:16px;
  backdrop-filter: blur(24px) saturate(150%); box-shadow:var(--shadow-card);
}
.admin-sidebar a{
  display:flex; align-items:center; padding:11px 22px; color:var(--muted); font-size:14px; font-weight:600;
  margin:2px 10px; border-radius:12px; transition: all .15s ease;
}
.admin-sidebar a:hover{color:var(--text);background:rgba(255,255,255,0.06);}
.admin-sidebar a.active{color:#fff; background:var(--accent-grad); box-shadow:var(--shadow-btn);}
.admin-content{flex:1; min-width:0; padding:6px 0 40px;}

/* ---------------- Code blocks ---------------- */
code, pre{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:8px;padding:3px 8px;color:#ffcf7a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
pre{padding:16px;overflow-x:auto; border-radius:var(--radius-sm);}
pre code{background:none;border:none;padding:0;color:inherit}

/* ---------------- Footer ---------------- */
.footer{text-align:center;color:var(--muted2);padding:40px 0 24px;font-size:13px}

/* ---------------- Responsive ---------------- */
@media (max-width: 720px){
  .navbar{border-radius:24px; flex-direction:column; align-items:stretch; gap:10px; padding:14px;}
  .navbar nav{justify-content:center;}
  .hero{padding:26px 20px;}
  h1{font-size:27px}
  .admin-wrap{flex-direction:column; padding:0 12px;}
  .admin-sidebar{width:100%; position:relative; top:0; display:flex; overflow-x:auto; padding:10px;}
  .admin-sidebar a{margin:0 4px; white-space:nowrap;}
}