/* ── Reset & base ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; }
html { font-size:16px; scroll-behavior:smooth; }
body { background:#FFFFF7; color:#333; line-height:1.6;
    min-height:100vh; display:flex; flex-direction:column; }

/* ── Header (matches login page exactly) ──────────────── */
header { background:#1a1a1a; padding:1.25rem 0; text-align:center; }
.header-container { max-width:920px; margin:0 auto; padding:0 1.5rem; }
.title-row { display:flex; align-items:center; gap:10px; font-weight:600; }
.title-row h1 { flex:2; font-size:2.5rem; color:#f0f0f0; }
.right { flex:1; }
.left { flex:1; }
.title-logo { width:0.9em; height:0.9em; vertical-align:-0.1em; margin-left:6px; }
/* SVG fill helpers */
.svga{fill:#fbca3b}.svgb{fill:#e5962b}
.svge,.svgf{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10}
.svge{stroke-width:70px}.svgf{stroke-width:50px}

/* ── Main layout ──────────────────────────────────────── */
main { flex:1; max-width:1100px; margin:0 auto; width:100%;
    padding:2.5rem 1.5rem 4rem; }

.section-label { font-size:0.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.09em; color:#888; margin-bottom:1rem; }

/* ── Preview ──────────────────────────────────────────── */
.preview-section { display:flex; gap:4rem; align-items:flex-start;
    margin-bottom:3rem; flex-wrap:wrap; margin-top:2rem; }
.preview-left { flex:0 0 380px; }
.preview-right { flex:1; min-width:220px; padding-top:.25rem; }
.preview-right h2 { font-size:1.6rem; font-weight:700; color:#1a1a1a;
    margin-bottom:2rem; line-height:1.3; }
.preview-right p { color:#555; font-size:.95rem; margin-bottom:1rem; }
.badge-row { display:flex; gap:8px; flex-wrap:wrap; }
.badge { font-size:.75rem; font-weight:600; padding:4px 10px;
    border-radius:999px; border:1px solid; }
.badge-yellow { background:#fff9e6; color:#a07000; border-color:#f5d76e; }
.badge-blue   { background:#e8f4fd; color:#1565c0; border-color:#90caf9; }
.badge-green  { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }

.captcha-preview-wrap { border:1px solid #ddd; border-radius:12px;
    overflow:hidden; width: 100%; background:#fff; }
.captcha-preview-wrap iframe { display:block; width:100%;  height: 376px; border:none; }

/* ── Divider ──────────────────────────────────────────── */
hr.divider { border:none; border-top:1px solid #e0e0e0; margin:0 0 2.5rem; }

/* ── Key-gen section ──────────────────────────────────── */
.keygen-section { margin-bottom:3rem; }

.keygen-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 1.75rem 2rem;

    max-width: 650px;   /* controls how wide it can get */
    width: 90%;         /* allows it to shrink on small screens */
    margin: 50px auto;  /* centers it horizontally */
}

.keygen-box h3 { font-size:1.1rem; font-weight:700; margin-bottom:.35rem; }
.keygen-box .sub { font-size:.88rem; color:#777; margin-bottom:1.25rem; }

/* Generate bar */
.generate-bar { display:flex; gap:10px; align-items:center; }
.generate-bar input { flex:1; padding:.7rem 1rem; border:1px solid #ccc;
    border-radius:6px; font-size:.95rem; background:#f9f9f9; color:#555;
    outline:none; cursor:default; }

/* Buttons (matches login page) */
.primary-btn { display:inline-flex; align-items:center; justify-content:center;
    padding:.7rem 1.4rem; border:none; border-radius:6px; cursor:pointer;
    font-size:.95rem; font-weight:600; background:#4581A9; color:#fff;
    white-space:nowrap; transition:background .2s; }
.primary-btn:hover { background:#0056b3; }
.primary-btn:disabled { opacity:.55; cursor:not-allowed; }
.register-btn { background:#89badb; }
.register-btn:hover { background:#5fa3cc; }

/* Alert */
.alert { display:none; padding:9px 14px; border-radius:6px;
    font-size:.85rem; margin-top:.75rem; }
.alert.show    { display:block; }
.alert.error   { background:#fff0ee; color:#c0311e; border:1px solid #f5c6c0; }
.alert.success { background:#eef7f2; color:#1a7a42; border:1px solid #a8d9bb; }

/* Auth prompt */
.auth-prompt { display:none; margin-top:1.25rem;
    background:#f5f8fb; border:1px solid #c9dce9; border-radius:10px;
    padding:1.25rem 1.5rem; }
.auth-prompt.visible { display:block; }
.auth-prompt-msg { font-size:.9rem; color:#444; margin-bottom:1rem; }

/* Auth tabs */
.auth-tabs { display:flex; border-bottom:1px solid #ddd; margin-bottom:1rem; }
.auth-tab { padding:7px 18px 9px; font-size:.85rem; font-weight:600;
    cursor:pointer; color:#888; border-bottom:2px solid transparent;
    margin-bottom:-1px; transition:all .15s; }
.auth-tab.active { color:#1a1a1a; border-bottom-color:#4581A9; }
.auth-form-wrap { display:none; }
.auth-form-wrap.active { display:block; }

/* Form fields (matches login page) */
.form-group { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem; }
label { font-size:.83rem; color:#333; font-weight:500; }
input[type=email], input[type=password] {
    padding:.65rem .8rem; border-radius:6px;
    border:1px solid rgba(148,163,184,.4);
    background:#fff; color:#111; outline:none; font-size:.92rem;
    transition:border .2s, box-shadow .2s; }
input::placeholder { color:#94a3b8; }
input:focus { border-color:#4581A9; box-shadow:0 0 0 3px rgba(69,129,169,.18); }
.input-error { border:2px solid #e74c3c !important; background:#fff6f6; }

.form-actions { display:flex; justify-content:flex-end; margin-bottom:.5rem; }
.forgot-password { font-size:.78rem; color:#4581A9; text-decoration:none; }
.forgot-password:hover { text-decoration:underline; }

.or-divider { display:flex; align-items:center; margin:1rem 0;
    color:#94a3b8; font-size:.75rem; }
.or-divider::before, .or-divider::after { content:''; flex:1; height:1px;
    background:rgba(148,163,184,.3); }
.or-divider span { margin:0 .75rem; }
.google-btn-wrapper { display:flex; justify-content:center; width:100%; }

/* Keys display */
.keys-display { display:none; margin-top:1.25rem; }
.keys-display.visible { display:block; }
.key-block { background:#f5f8fb; border:1px solid #dde8f0;
    border-radius:8px; padding:1rem 1.25rem; margin-bottom:.75rem; }
.key-block-label { font-size:.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; color:#888; margin-bottom:.5rem; }
.key-row { display:flex; gap:8px; align-items:center; }
.key-val { flex:1; font-family:'Courier New',monospace; font-size:.82rem;
    background:#fff; border:1px solid #ddd; border-radius:5px;
    padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.key-val.blurred { filter:blur(4px); cursor:pointer; transition:filter .2s; }
.key-val.blurred:hover { filter:none; }
.copy-btn { padding:6px 12px; font-size:.78rem; font-weight:600;
    border:1px solid #ccc; border-radius:5px; background:#fff;
    cursor:pointer; transition:all .15s; white-space:nowrap; }
.copy-btn:hover { background:#f0f0f0; }
.copy-btn.copied { color:#2e7d32; border-color:#81c784; }
.keys-note { font-size:.78rem; color:#888; margin-top:.5rem; }
.rotate-link { font-size:.8rem; color:#e53935; cursor:pointer;
    text-decoration:underline; margin-top:.75rem; display:inline-block; }
.signout-link { font-size:.8rem; color:#888; cursor:pointer;
    text-decoration:underline; margin-top:.75rem; display:inline-block;
    margin-left:.5rem; }

/* ── Docs ─────────────────────────────────────────────── */
.docs-section { margin-bottom:3rem; }
.docs-section h2 { font-size:1.35rem; font-weight:700; margin-bottom:1.5rem; color:#1a1a1a; }

.steps { display:flex; flex-direction:column; gap:1rem; margin-bottom:2rem; }
.step { display:flex; gap:1rem; align-items:flex-start;
    background:#fff; border:1px solid #e0e0e0; border-radius:10px;
    padding:1rem 1.25rem; }
.step-num { width:28px; height:28px; border-radius:50%; background:#4581A9;
    color:#fff; font-size:.8rem; font-weight:700; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; }
.step-body { flex:1; }
.step-title { font-weight:700; font-size:.92rem; margin-bottom:.2rem; }
.step-desc  { font-size:.83rem; color:#666; }

.snippet-wrap { border:1px solid #ddd; border-radius:10px;
    overflow:hidden; margin-bottom:1.5rem; }
.snippet-tabs { display:flex; background:#f5f5f5; border-bottom:1px solid #ddd; }
.snippet-tab { padding:8px 16px; font-size:.8rem; font-weight:600;
    cursor:pointer; color:#888; border-bottom:2px solid transparent; transition:all .15s; }
.snippet-tab.active { color:#1a1a1a; background:#fff; border-bottom-color:#4581A9; }
pre { background:#1e1e1e; color:#d4d4d4; padding:1.25rem 1.5rem;
    font-family:'Courier New',Courier,monospace; font-size:.78rem;
    line-height:1.65; overflow-x:auto; margin:0; }
code.inline { font-family:'Courier New',monospace; background:#f0f0f0;
    padding:1px 5px; border-radius:3px; font-size:.95em; color:#c0311e; }

.validate-table { width:100%; border-collapse:collapse; font-size:.83rem; margin-top:.75rem; }
.validate-table th, .validate-table td { padding:8px 12px; border:1px solid #e0e0e0; text-align:left; }
.validate-table th { background:#f5f5f5; font-weight:700; color:#555; }
.validate-table tr:nth-child(even) td { background:#fafafa; }

/* Header */
header {
    background-color: #1a1a1a;
    padding: 1.25rem 0; /* 20px -> 1.25rem */
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    color: #f0f0f0;
}

header p {
    font-size: 1rem;
    color: #b0b0b0;
}


.google-btn-wrapper {
    display: flex;
    justify-content: center;   /* horizontal center */
    width: 100%;
    margin-top: 10px;
}


.input-error {
    border: 2px solid #e74c3c !important;
    background-color: #fff6f6;
}



/* LOGIN WRAPPER */
.login-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* LOGIN CARD */
.login-card {
    width: 100%;
    max-width: 420px;
    background: #ECECEC;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* FORM */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

label {
    font-size: 0.85rem;
    color: #111;
}

/* INPUTS */
input {
    padding: 0.7rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: #fff;
    color: #111;
    outline: none;
    font-size: 16px;
    transition: border 0.2s, box-shadow 0.2s;
}

input::placeholder {
    color: #64748b;
}

input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* ACTIONS */
.form-actions {
    display: flex;
    justify-content: flex-end;
}

.forgot-password {
    font-size: 0.8rem;
    color: #38bdf8;
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}





/* BUTTONS */
.primary-btn {
    display: inline-block;
    width: auto;             /* ✅ allow natural width */
    min-width: 120px;        /* ✅ not too small */
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

/* PRIMARY */
.primary-btn {
    background: #4581A9;
    color: #fff;
}


.primary-btn:hover {
    background-color: #0056b3;
}




/* DIVIDER */
.divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: #64748b;
    font-size: 0.75rem;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.25);
}

.divider span {
    margin: 0 0.75rem;
}



footer {
    text-align: center;
    padding: 1.25rem 0; /* 20px -> 1.25rem */
    background-color: #1a1a1a;
    color: #b0b0b0;
}
footer a {
    color: #b0b0b0;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* MOBILE */
@media (max-width: 480px) {
    .login-card {
        padding: 1.5rem;
    }

    .title-row h1{
        flex: 0 0 60%;
        font-size: 2rem;
    }

}



/* ── Responsive ───────────────────────────────────────── */
@media(max-width:680px){
    .preview-section { flex-direction:column; align-items:center; }
    .preview-right   { padding-top:0; }
    .title-row h1    { flex:0 0 80%; font-size:2rem; }
    .keygen-box      { padding:1.25rem; }
    .generate-bar    { flex-direction:column; align-items:stretch; }
    .keygen-box { margin: 0; }
}