/* AB Lock Tool — Website Stylesheet
   Modern glassmorphism design matching the tool's light palette */

:root {
  --bg: #f0f2f8;
  --bg-card: rgba(255,255,255,0.72);
  --bg-card-solid: #ffffff;
  --bg-glass: rgba(255,255,255,0.55);
  --bg-input: rgba(244,246,251,0.8);
  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-dim: #94a3b8;
  --border: rgba(148,163,184,0.2);
  --border-hover: rgba(59,91,253,0.35);
  --accent: #3b5bfd;
  --accent-end: #5b7cff;
  --accent-purple: #8a5bff;
  --accent-glow: rgba(59,91,253,0.15);
  --green: #00b894;
  --green-end: #00d4a8;
  --red: #ef4444;
  --amber: #f59e0b;
  --accent-bg: rgba(59,91,253,0.08);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 40px rgba(59,91,253,0.1), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-glow: 0 0 30px rgba(59,91,253,0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── BG Blobs ─────────────────────────── */
.bg-blobs { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35; animation:blobFloat 20s ease-in-out infinite; }
.blob-1 { width:500px;height:500px;background:var(--accent);top:-10%;right:-5%; }
.blob-2 { width:400px;height:400px;background:var(--accent-purple);bottom:10%;left:-8%;animation-delay:-7s; }
.blob-3 { width:350px;height:350px;background:var(--green);top:40%;right:20%;animation-delay:-14s;opacity:0.18; }
@keyframes blobFloat{0%,100%{transform:translate(0,0)scale(1)}25%{transform:translate(30px,-40px)scale(1.05)}50%{transform:translate(-20px,20px)scale(.95)}75%{transform:translate(15px,30px)scale(1.02)}}

/* ── Accent Strip ─────────────────────── */
.accent-strip { height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-purple),var(--green),var(--accent)); background-size:300% 100%; animation:stripSlide 3s linear infinite; position:fixed;top:0;left:0;right:0;z-index:200; }
@keyframes stripSlide{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── Nav ──────────────────────────────── */
.site-nav { position:sticky;top:3px;z-index:100; background:var(--bg-glass); backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid var(--border); padding:0 24px; display:flex; align-items:center; height:64px; gap:20px; }
.nav-logo { font-weight:900;font-size:16px; background:linear-gradient(135deg,var(--accent),var(--accent-purple)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; white-space:nowrap;letter-spacing:-0.3px; text-decoration:none; }
.nav-links { display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none; }
.nav-links::-webkit-scrollbar{display:none}
.nav-links a { font-family:var(--sans);background:none;border:none;padding:8px 14px;font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer;border-radius:var(--radius-sm);white-space:nowrap;transition:all .25s;position:relative;text-decoration:none; }
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { color:var(--accent);background:var(--accent-bg); }
.nav-user { display:flex;align-items:center;gap:10px; }
.nav-username { font-size:13px;font-weight:700;color:var(--fg); }
.nav-logout { font-size:16px;color:var(--fg-dim);text-decoration:none; }
.nav-logout:hover { color:var(--red); }

/* ── Main & Footer ────────────────────── */
main { min-height: calc(100vh - 120px); }
.site-footer { text-align:center;padding:32px 24px;font-size:12px;color:var(--fg-dim);border-top:1px solid var(--border); }

/* ── Page Animation ───────────────────── */
.page-enter { animation: pageIn .5s cubic-bezier(.4,0,.2,1); }
@keyframes pageIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Reveal ───────────────────────────── */
.reveal { opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity:1;transform:translateY(0); }

/* ── Hero ─────────────────────────────── */
.hero { text-align:center;padding:72px 20px 56px;max-width:760px;margin:0 auto; }
.hero-badge { display:inline-flex;align-items:center;gap:8px;background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border);color:var(--accent);font-size:12px;font-weight:700;padding:8px 18px;border-radius:100px;margin-bottom:24px;box-shadow:var(--shadow-sm);animation:badgePulse 3s ease-in-out infinite; }
@keyframes badgePulse{0%,100%{box-shadow:var(--shadow-sm)}50%{box-shadow:var(--shadow-glow)}}
.hero-badge .dot { width:6px;height:6px;background:var(--green);border-radius:50%;animation:dotBlink 2s ease-in-out infinite; }
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1 { font-size:clamp(32px,5.5vw,52px);font-weight:900;line-height:1.1;letter-spacing:-1px;margin-bottom:18px;text-wrap:balance; }
.hero h1 .gradient { background:linear-gradient(135deg,var(--accent) 0%,var(--accent-purple) 50%,var(--accent-end) 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease-in-out infinite; }
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero p { font-size:16px;color:var(--fg-muted);max-width:520px;margin:0 auto 32px;line-height:1.7; }
.hero-actions { display:flex;gap:14px;justify-content:center;flex-wrap:wrap; }

/* ── Buttons ──────────────────────────── */
.btn { display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border:none;border-radius:var(--radius-sm);font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;text-decoration:none; }
.btn::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,0.15) 50%,transparent 100%);transform:translateX(-100%);transition:transform .5s; }
.btn:hover::before{transform:translateX(100%)}
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-end));color:#fff;box-shadow:0 4px 16px rgba(59,91,253,0.3); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(59,91,253,0.35); }
.btn-outline { background:var(--bg-card);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--fg); }
.btn-outline:hover { border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md); }
.btn-green { background:linear-gradient(135deg,var(--green),var(--green-end));color:#003d31;box-shadow:0 4px 16px rgba(0,184,148,0.3); }
.btn-green:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,184,148,0.35); }
.btn-sm { padding:8px 16px;font-size:12px; }
.btn-danger { background:var(--red);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,0.25); }
.btn-ghost { background:transparent;color:var(--fg-muted);border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--accent);color:var(--accent); }

/* ── Cards ────────────────────────────── */
.card { background:var(--bg-card);backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:all .3s cubic-bezier(.4,0,.2,1); }
.card:hover { box-shadow:var(--shadow-md); }
.card-glow:hover { box-shadow:var(--shadow-lg);border-color:var(--border-hover); }

/* ── Feature Cards ────────────────────── */
.features { max-width:1000px;margin:0 auto 56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;padding:0 20px; }
.feature-card { background:var(--bg-card);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:all .35s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden; }
.feature-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-purple));opacity:0;transition:opacity .3s; }
.feature-card:hover { transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-hover); }
.feature-card:hover::before{opacity:1}
.feature-icon { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;transition:transform .3s; }
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(-3deg)}
.feature-icon.blue{background:var(--accent-bg)} .feature-icon.green{background:rgba(0,184,148,0.08)} .feature-icon.purple{background:rgba(138,91,255,0.08)}
.feature-card h3 { font-size:15px;font-weight:800;margin-bottom:8px; }
.feature-card p { font-size:13px;color:var(--fg-muted);line-height:1.6; }

/* ── Section Headers ──────────────────── */
.section-header { display:flex;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--border); }
.section-header h2 { font-size:20px;font-weight:800; }
.section-sep { font-size:10px;font-weight:800;color:var(--accent);letter-spacing:2px;text-transform:uppercase;position:relative;padding-left:14px;margin:28px 0 16px; }
.section-sep::before { content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:16px;background:linear-gradient(180deg,var(--accent),var(--accent-purple));border-radius:2px; }

/* ── Stats ────────────────────────────── */
.stats-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px; }
.stat-card { background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-sm);transition:all .3s; }
.stat-card:hover { transform:translateY(-3px);box-shadow:var(--shadow-md); }
.stat-icon { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
.stat-value { font-size:26px;font-weight:900; }
.stat-label { font-size:11px;color:var(--fg-dim);font-weight:600; }

/* ── Table ────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%;border-collapse:collapse;font-size:13px; }
th { text-align:left;padding:12px 16px;font-size:10px;font-weight:800;color:var(--fg-dim);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border);white-space:nowrap; }
td { padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap; }
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--accent-bg)}

.badge { display:inline-flex;padding:4px 12px;border-radius:100px;font-size:11px;font-weight:700; }
.badge-active { background:rgba(0,184,148,0.1);color:var(--green); }
.badge-expired { background:rgba(239,68,68,0.08);color:var(--red); }
.badge-pending { background:rgba(245,158,11,0.1);color:var(--amber); }
.badge-op { background:var(--accent-bg);color:var(--accent);font-family:var(--mono);font-size:11px; }

/* ── Sidebar Layout ───────────────────── */
.dash-layout { max-width:1200px;margin:24px auto;display:grid;grid-template-columns:250px 1fr;gap:20px;align-items:start;padding:0 20px; }
@media(max-width:768px){.dash-layout{grid-template-columns:1fr}.sidebar{display:none}}
.sidebar { background:var(--bg-card);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);padding:18px 14px;position:sticky;top:84px;box-shadow:var(--shadow-sm); }
.sidebar-item { display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer;transition:all .25s;border:none;background:none;width:100%;text-align:left;font-family:var(--sans);text-decoration:none; }
.sidebar-item:hover { background:var(--accent-bg);color:var(--accent);transform:translateX(4px);text-decoration:none; }
.sidebar-item.active { background:var(--accent-bg);color:var(--accent);font-weight:700; }
.sidebar-icon { font-size:17px;width:22px;text-align:center; }
.sidebar-label { font-size:10px;font-weight:800;color:var(--fg-dim);letter-spacing:1.5px;text-transform:uppercase;padding:12px 14px 6px; }

/* ── Login Card ───────────────────────── */
.login-wrapper { max-width:440px;margin:80px auto;padding:0 16px; }
.login-card { background:var(--bg-card);backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--border);border-radius:20px;padding:40px 36px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden; }
.login-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-purple),var(--green)); }
.login-card h2 { font-size:22px;font-weight:900;margin-bottom:4px;text-align:center; }
.login-card .sub { font-size:13px;color:var(--fg-muted);text-align:center;margin-bottom:28px; }

.form-group { margin-bottom:18px; }
.form-label { font-size:12px;font-weight:700;color:var(--fg);margin-bottom:7px;display:block; }
.form-input { width:100%;padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:var(--sans);background:var(--bg-input);color:var(--fg);outline:none;transition:all .3s; }
.form-input:focus { border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow); }

/* ── Posts ─────────────────────────────── */
.post-card { background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;transition:all .3s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden; }
.post-card::after { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent-purple));opacity:0;transition:opacity .3s; }
.post-card:hover { transform:translateX(4px);box-shadow:var(--shadow-md);border-color:var(--border-hover); }
.post-card:hover::after{opacity:1}
.post-meta { font-size:11px;color:var(--fg-dim);margin-bottom:10px;display:flex;align-items:center;gap:10px;font-weight:500; }
.post-card h3 { font-size:15px;font-weight:800;margin-bottom:8px; }
.post-card p { font-size:13px;color:var(--fg-muted);line-height:1.6; }
.tag { display:inline-flex;padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:0.5px; }
.tag-update{background:var(--accent-bg);color:var(--accent)} .tag-release{background:rgba(0,184,148,0.08);color:var(--green)} .tag-notice{background:rgba(245,158,11,0.08);color:var(--amber)}

/* ── Social ───────────────────────────── */
.social-row { display:flex;gap:12px;flex-wrap:wrap; }
.social-btn { display:inline-flex;align-items:center;gap:10px;padding:12px 22px;background:var(--bg-card);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--fg);cursor:pointer;font-family:var(--sans);transition:all .3s;box-shadow:var(--shadow-sm);text-decoration:none; }
.social-btn:hover { border-color:var(--border-hover);color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none; }

/* ── Reviews ──────────────────────────── */
.reviews-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px; }
.review-card { background:var(--bg-card);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);transition:all .3s;position:relative; }
.review-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-md); }
.review-card::before { content:'"';position:absolute;top:12px;right:18px;font-size:48px;font-weight:900;color:var(--accent);opacity:0.08;line-height:1; }
.review-stars { color:var(--amber);font-size:15px;margin-bottom:10px; }
.review-text { font-size:13px;color:var(--fg-muted);line-height:1.7;margin-bottom:14px;font-style:italic; }
.review-author { font-size:12px;font-weight:700; }
.review-loc { font-size:11px;color:var(--fg-dim); }

/* ── Progress ─────────────────────────── */
.progress-track { height:8px;background:var(--border);border-radius:4px;overflow:hidden; }
.progress-fill { height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-end));transition:width 1.2s cubic-bezier(.4,0,.2,1);position:relative; }
.progress-fill::after { content:'';position:absolute;right:0;top:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3));border-radius:0 4px 4px 0;animation:progressShine 2s ease-in-out infinite; }
@keyframes progressShine{0%,100%{opacity:.3}50%{opacity:.8}}

/* ── Search ───────────────────────────── */
.search-box { display:flex;align-items:center;gap:10px;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 16px;margin-bottom:18px;transition:all .3s; }
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.search-box input { border:none;background:none;outline:none;font-size:13px;color:var(--fg);flex:1;font-family:var(--sans); }

/* ── Alert ────────────────────────────── */
.alert { padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:13px;font-weight:600; }
.alert-success { background:rgba(0,184,148,0.08);border:1px solid rgba(0,184,148,0.2);color:var(--green); }
.alert-error { background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:var(--red); }
.alert-warning { background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.2);color:var(--amber); }

/* ── PC List ──────────────────────────── */
.pc-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px; }
.pc-card { background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 18px;display:flex;align-items:center;gap:14px;transition:all .25s; }
.pc-card:hover{border-color:var(--border-hover)}
.pc-dot { width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 8px rgba(0,184,148,0.4);animation:dotGlow 2s ease-in-out infinite; }
@keyframes dotGlow{0%,100%{box-shadow:0 0 8px rgba(0,184,148,0.4)}50%{box-shadow:0 0 16px rgba(0,184,148,0.6)}}
.pc-dot.inactive{background:var(--fg-dim);box-shadow:none;animation:none}
.pc-name { font-size:13px;font-weight:700; }
.pc-hwid { font-size:10px;color:var(--fg-dim);font-family:var(--mono); }
.pc-date { font-size:10px;color:var(--fg-dim);margin-left:auto;white-space:nowrap; }

/* ── Sub Card ─────────────────────────── */
.sub-card { background:var(--bg-card);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow-sm); }
.sub-icon { width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent-purple));display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 4px 16px rgba(59,91,253,0.25);animation:iconPulse 3s ease-in-out infinite; }
@keyframes iconPulse{0%,100%{box-shadow:0 4px 16px rgba(59,91,253,0.25)}50%{box-shadow:0 4px 24px rgba(59,91,253,0.4)}}

/* ── Utility ──────────────────────────── */
.mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}
.flex-between { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; }
.max-w { max-width:1000px;margin-left:auto;margin-right:auto;padding:0 20px; }
.content-area { min-width:0;padding-bottom:56px; }
.text-center { text-align:center; }
.mt-16{margin-top:16px}

@media(max-width:600px){
  .hero{padding:48px 12px 36px}
  .stats-row{grid-template-columns:1fr 1fr}
  .login-card{padding:32px 24px}
  .stat-value{font-size:20px}
}