/* Shared design tokens + nav/footer/button/card styles used by all AiLib tool sub-pages
   (index.html keeps its own inline copy of this since it was built first — this file exists so
   new pages don't duplicate ~150 lines each). */
:root{
  --bg:#06070c;
  --bg-alt:#0b0d16;
  --card:#10131f;
  --card-border:rgba(255,255,255,.08);
  --text:#eef0ff;
  --text-dim:#9296b3;
  --accent1:#7c3aed;
  --accent2:#06b6d4;
  --accent-grad:linear-gradient(120deg,var(--accent1),var(--accent2));
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --sans:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;overflow-x:hidden;position:relative;}
body::before{
  content:'';position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(124,58,237,.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(6,182,212,.16), transparent 40%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto,auto,42px 42px,42px 42px;
  z-index:-1;pointer-events:none;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(6,7,12,.7);border-bottom:1px solid var(--card-border);}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{font-weight:700;font-size:20px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-grad);box-shadow:0 0 12px var(--accent2);}
.navlinks{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--text-dim);}
.navlinks a:hover{color:var(--text);}
.credit-pill{font-family:var(--mono);font-size:12px;background:var(--card);border:1px solid var(--card-border);padding:6px 12px;border-radius:999px;color:var(--accent2);cursor:default;}
.signin-link{font-size:13px;color:var(--text-dim);border:1px solid var(--card-border);padding:6px 12px;border-radius:999px;cursor:pointer;background:none;font-family:var(--sans);}
.signin-link:hover{color:var(--text);border-color:var(--accent2);}

main{padding:56px 0 96px;}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--accent2);background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.25);padding:6px 14px;border-radius:999px;margin-bottom:20px;}
h1{font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.03em;margin-bottom:14px;}
h1 span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sub{color:var(--text-dim);font-size:16px;max-width:560px;margin-bottom:36px;}

.card{background:var(--card);border:1px solid var(--card-border);border-radius:20px;padding:28px;position:relative;overflow:hidden;}
.btn{display:inline-block;background:var(--accent-grad);color:#fff;font-weight:600;padding:13px 26px;border-radius:12px;border:none;cursor:pointer;font-size:15px;font-family:var(--sans);}
.btn:hover{filter:brightness(1.1);}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;}
.btn.ghost{background:transparent;border:1px solid var(--card-border);color:var(--text);}

footer{border-top:1px solid var(--card-border);padding:48px 0;color:var(--text-dim);font-size:13px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--text);}

/* email sign-in modal, shared across pages */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(6,7,12,.75);backdrop-filter:blur(4px);z-index:100;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:28px;max-width:380px;width:100%;}
.modal h3{font-size:17px;margin-bottom:8px;}
.modal p{color:var(--text-dim);font-size:13px;margin-bottom:16px;}
.modal input{width:100%;background:var(--bg-alt);border:1px solid var(--card-border);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:14px;margin-bottom:14px;}
.modal .row{display:flex;gap:10px;}
.modal .row .btn{flex:1;text-align:center;}
.modal .status{font-size:13px;color:var(--accent2);margin-top:10px;min-height:16px;}