/* ==========================================================================
   FlipOMS — Design System (SANDBOX) · v2 premium
   Sirf DESIGN. Live PHP project me copy hoga. CLASS NAAM NAHI BADLE.
   Colour / spacing / shadow / radius freely tuned for a clean, compact SaaS look.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap');

:root{
  --bg:#f4f6fc; --panel:#ffffff; --panel2:#f1f3fb; --line:#e6e9f4; --line2:#eef0f8;
  --txt:#111428; --txt2:#3a3f5c; --muted:#7b8199;
  --flip:#2569eb; --flip-ink:#1550c9; --flip-soft:#eaf1fe; --flip2:#f0b70a;
  --green:#0f9d58; --green-soft:#e6f6ee; --red:#e5484d; --red-soft:#fdecec; --amber:#de8a0c;
  --radius:16px; --radius-sm:11px; --radius-xs:9px;
  --shadow-xs:0 1px 2px rgba(17,20,40,.05);
  --shadow-sm:0 2px 8px rgba(20,40,90,.06),0 1px 2px rgba(20,40,90,.04);
  --shadow-md:0 10px 26px rgba(20,40,90,.10),0 2px 6px rgba(20,40,90,.05);
  --shadow-lg:0 22px 48px rgba(20,40,90,.16);
  --ring:0 0 0 3px rgba(37,105,235,.16);
}
body.dark,:root[data-theme="dark"]{
  --bg:#080a14; --panel:#131627; --panel2:#1b1f36; --line:#252a45; --line2:#20243c;
  --txt:#f0f2fc; --txt2:#c4c8e0; --muted:#8b90b2;
  --flip:#4d86f7; --flip-ink:#5b90f8; --flip-soft:#161f38; --flip2:#f5c327;
  --green:#28c07a; --green-soft:#10241c; --red:#ff6b6f; --red-soft:#2a1518;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  --shadow-md:0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 50px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(77,134,247,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(920px 460px at 88% -10%,color-mix(in srgb,var(--flip) 9%,transparent) 0%,transparent 62%),
    radial-gradient(720px 420px at -8% 4%,color-mix(in srgb,var(--flip2) 7%,transparent) 0%,transparent 55%),
    var(--bg);
  color:var(--txt);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in srgb,var(--flip) 24%,transparent)}

/* ---- Top nav ---- */
.flip-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 20px;
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-xs)}
.flip-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--txt);text-decoration:none;letter-spacing:-.4px}
.flip-brand .fb-badge{background:linear-gradient(135deg,var(--flip),var(--flip-ink));color:#fff;border-radius:9px;padding:3px 9px;font-weight:900;letter-spacing:-.3px;box-shadow:0 4px 12px color-mix(in srgb,var(--flip) 40%,transparent)}
.flip-brand .fb-badge b{color:var(--flip2)}
.flip-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.flip-links a,.flip-links button{font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;
  color:var(--txt2);background:transparent;border:1px solid transparent;
  border-radius:var(--radius-xs);padding:7px 11px;transition:.15s ease;display:inline-flex;align-items:center;gap:6px}
.flip-links a:hover{background:var(--panel2);color:var(--txt)}
.flip-links button{background:var(--panel2);border-color:var(--line)}
.flip-links a.active{background:var(--flip);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--flip) 34%,transparent)}
.flip-links a.active:hover{background:var(--flip-ink);color:#fff}
.fpill{background:var(--panel2);border:1px solid var(--line)!important;color:var(--txt2);cursor:default;font-weight:700}
.fquota{display:inline-flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)!important;border-radius:var(--radius-xs);padding:7px 11px;font-weight:800;font-size:12px;color:var(--green)!important;text-decoration:none}
.fquota:hover{background:var(--green-soft)!important;filter:brightness(1.03)}
.fquota .fq-dot{width:8px;height:8px;border-radius:50%;background:var(--qc,var(--green));box-shadow:0 0 0 3px color-mix(in srgb,var(--qc,var(--green)) 30%,transparent)}

/* ---- Header quota meter ---- */
.fmeter{display:inline-flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:5px 11px;text-decoration:none}
.fmeter .fm-used-n{color:var(--red);font-size:12px;font-weight:900}
.fmeter .fm-left-n{color:var(--green);font-size:12px;font-weight:900}
.fmeter .fm-bar{width:90px;height:7px;border-radius:6px;background:var(--green);overflow:hidden;display:flex}
.fmeter .fm-used{height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 72%,var(--amber)),var(--red));border-right:2px solid var(--panel)}
.fmeter:hover{border-color:color-mix(in srgb,var(--flip) 40%,var(--line))}
.fplan{display:inline-flex;align-items:center;gap:6px;background:var(--flip-soft);border:1px solid color-mix(in srgb,var(--flip) 22%,transparent)!important;color:var(--flip)!important;font-weight:800;border-radius:var(--radius-xs);padding:7px 11px;font-size:12px;text-decoration:none;cursor:pointer;list-style:none}
.fplan::-webkit-details-marker{display:none}
.fplan:hover{filter:brightness(1.02);background:var(--flip-soft)!important}
.fplan .fp-q{background:var(--flip);color:#fff;border-radius:20px;padding:1px 8px;font-size:11px;font-weight:800}
.fplan .fp-up{font-size:10px;opacity:.8}
.fplan-wrap{position:relative}
.fplan-dd[open] .fp-up{transform:rotate(180deg)}
.fplan-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:200px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:6px;display:grid;gap:2px}
.fplan-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:var(--radius-xs);font-size:12.5px;color:var(--txt2);text-decoration:none;white-space:nowrap}
.fplan-row b{color:var(--txt);font-weight:700;white-space:nowrap}
.fplan-row span{font-weight:800;color:var(--flip)}
a.fplan-row:hover{background:var(--flip-soft)}
.fplan-row.cur{background:var(--green-soft)}
.fplan-row.cur span{color:var(--green)}

/* ---- Layout ---- */
.flip-wrap{max-width:1140px;margin:0 auto;padding:26px 18px 64px}
.flip-foot{max-width:1140px;margin:8px auto 0;padding:20px 18px 34px;color:var(--muted);font-size:12px;text-align:center;line-height:1.7;border-top:1px solid var(--line2)}
h1{letter-spacing:-.8px;font-weight:800}
h2{letter-spacing:-.5px;font-weight:800}

/* ---- Card ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 16px;box-shadow:var(--shadow-sm);transition:box-shadow .18s,border-color .18s,transform .18s}
.card h3{margin:0 0 10px;letter-spacing:-.3px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px}
a.card:hover{border-color:color-mix(in srgb,var(--flip) 45%,var(--line));box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:14px;padding:10px 17px;border-radius:var(--radius-sm);color:#fff;
  background:linear-gradient(135deg,var(--flip),var(--flip-ink));
  box-shadow:0 4px 12px color-mix(in srgb,var(--flip) 26%,transparent);
  transition:transform .14s,box-shadow .14s,filter .14s;text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--flip) 34%,transparent);filter:brightness(1.04)}
.btn:active{transform:translateY(0)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:var(--radius-xs)}
.btn.ghost{background:var(--panel);border-color:var(--line);color:var(--txt);box-shadow:var(--shadow-xs)}
.btn.ghost:hover{border-color:var(--flip);color:var(--flip);background:var(--flip-soft);box-shadow:none}
.btn.green{background:linear-gradient(135deg,var(--green),color-mix(in srgb,var(--green) 78%,#000));border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb,var(--green) 26%,transparent)}
.btn.wa{background:linear-gradient(135deg,#25d366,#1eb958);border-color:transparent;box-shadow:0 4px 12px rgba(37,211,102,.28)}

/* ---- Inputs ---- */
input,select,textarea{font-family:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--panel);color:var(--txt);transition:border-color .14s,box-shadow .14s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--flip);box-shadow:var(--ring)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--flip) 40%,var(--line))}
label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* ---- Stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:18px}
.stat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;box-shadow:var(--shadow-xs);overflow:hidden;transition:border-color .16s,box-shadow .16s,transform .16s}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--flip);opacity:.85}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--flip) 30%,var(--line))}
.stat .k{font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.stat .v{font-size:23px;font-weight:900;margin-top:4px;color:var(--txt);line-height:1.1;letter-spacing:-.5px}
.stat .v.g{color:var(--green)} .stat .v.r{color:var(--red)}
.bar{height:6px;border-radius:6px;background:color-mix(in srgb,var(--flip) 14%,transparent);overflow:hidden;margin-top:9px}
.bar>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--flip),color-mix(in srgb,var(--flip) 55%,#8fb6ff))}

/* ---- Badges / pills ---- */
.pill{font-size:12px;font-weight:800;padding:5px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;line-height:1.4}
.pill.ok{background:var(--green-soft);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 24%,transparent)}
.pill.bad{background:var(--red-soft);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 24%,transparent)}
.pill.flat{background:var(--flip-soft);color:var(--flip);border:1px solid color-mix(in srgb,var(--flip) 20%,transparent)}

/* ---- Tables ---- */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--muted);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-top:1px solid var(--line2);vertical-align:top}
tr:hover td{background:color-mix(in srgb,var(--flip) 4%,transparent)}

/* ---- Plan cards ---- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;text-align:center;position:relative;box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .18s,border-color .18s}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--flip) 35%,var(--line))}
.plan.pop{border:1.5px solid var(--flip);box-shadow:0 12px 34px color-mix(in srgb,var(--flip) 20%,transparent)}
.plan.pop::after{content:"";position:absolute;inset:0;border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--flip) 7%,transparent),transparent 40%);pointer-events:none}
.plan .price{font-size:34px;font-weight:900;color:var(--txt);letter-spacing:-1px}
.plan .price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--flip),var(--flip-ink));color:#fff;font-size:10px;font-weight:800;padding:4px 13px;border-radius:20px;letter-spacing:.6px;box-shadow:0 6px 14px color-mix(in srgb,var(--flip) 34%,transparent)}

.muted{color:var(--muted)}

/* ---- Plan feature list ---- */
.feat{list-style:none;margin:14px 0;padding:0;text-align:left;display:grid;gap:9px}
.feat li{font-size:13px;color:var(--txt2);padding-left:24px;position:relative;line-height:1.4}
.feat li::before{content:"✓";position:absolute;left:0;top:0;color:var(--green);font-weight:900}
.feat li b{color:var(--txt);font-weight:800}

/* ---- Quick top-up tiles ---- */
.qtop{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 10px;background:var(--panel);position:relative;transition:.15s ease;box-shadow:var(--shadow-xs)}
.qtop:hover{border-color:var(--flip);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.qtop b{font-size:22px;font-weight:900;color:var(--flip);letter-spacing:-.5px;line-height:1}
.qtop span{font-size:10.5px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.qtop em{font-style:normal;font-weight:800;font-size:14px;margin-top:5px;color:var(--txt)}
.qtop-pop{border-color:var(--flip);background:var(--flip-soft)}
.qtop-tag{position:absolute;top:-9px;right:10px;background:linear-gradient(135deg,var(--flip),var(--flip-ink));color:#fff;font-size:9px;font-weight:800;padding:2px 9px;border-radius:10px;letter-spacing:.5px}

/* ---- Numbered steps ---- */
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px}
.steps li{position:relative;padding-left:34px;font-size:13.5px;color:var(--txt2);line-height:1.5}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:-1px;width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,var(--flip),var(--flip-ink));color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}

/* ---- How-it-works flow (AI listing hero) ---- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow-xs)}
.flow-step .ico{font-size:26px;line-height:1}
.flow-step .t{font-weight:800;font-size:13.5px}
.flow-step .d{font-size:11.5px;color:var(--muted);line-height:1.35}
.flow-arrow{color:var(--flip);font-size:20px;font-weight:900}
.sec-num{width:26px;height:26px;border-radius:8px;background:var(--flip-soft);color:var(--flip);font-weight:900;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
@media(max-width:680px){.flow{grid-template-columns:1fr;gap:8px}.flow-arrow{transform:rotate(90deg);justify-self:center}}
@media(max-width:640px){.flip-links a .fb-tx{display:none}.flip-wrap{padding:18px 12px 48px}}