/* ClassMind — Shared Stylesheet */
:root{--teal:#0EA5A0;--teal-l:#E0F5F4;--teal-m:#9DDEDD;--teal-d:#0A7E7A;--violet:#7C3AED;--violet-l:#EDE9FE;--violet-m:#C4B5FD;--orange:#F97316;--orange-l:#FFF0E6;--orange-m:#FDBA74;--green:#16A34A;--green-l:#F0FDF4;--green-m:#BBF7D0;--pink:#EC4899;--pink-l:#FCE7F3;--amber:#D97706;--amber-l:#FFFBEB;--amber-m:#FCD34D;--red:#DC2626;--red-l:#FEF2F2;--red-m:#FECACA;--ink:#0F172A;--ink-mid:#334155;--ink-l:#64748B;--bg:#F1F5FB;--white:#fff;--border:rgba(15,23,42,0.08);--border-m:rgba(15,23,42,0.14);--r:12px;--rl:18px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}

/* ── Nav ───────────────────────────────────────────────── */
nav{background:var(--white);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:1000}
.logo{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;letter-spacing:-0.02em;color:var(--ink);text-decoration:none}.logo span{color:var(--teal)}
.nav-links{display:flex;gap:0.15rem}
.nav-link{padding:0.4rem 0.75rem;border-radius:8px;font-size:0.8rem;font-weight:500;color:var(--ink-l);text-decoration:none;transition:all 0.15s;white-space:nowrap;display:inline-flex;align-items:center}
.nav-link:hover{background:var(--bg);color:var(--ink)}.nav-link.active{background:var(--teal-l);color:var(--teal-d);font-weight:600}
.nav-right{display:flex;align-items:center;gap:0.625rem}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink-l);border-radius:2px}
.trial-badge{font-size:0.72rem;padding:0.25rem 0.75rem;background:var(--orange-l);color:var(--orange);border-radius:20px;font-weight:600;border:1px solid var(--orange-m)}
.beta-badge{font-size:0.7rem;padding:0.22rem 0.65rem;background:var(--teal-l);color:var(--teal-d);border-radius:20px;font-weight:700;border:1px solid var(--teal-m);letter-spacing:0.03em;text-transform:uppercase}
.avatar-wrap{position:relative}
.avatar{width:34px;height:34px;background:linear-gradient(135deg,var(--teal),var(--violet));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.75rem;font-weight:600;cursor:pointer;border:none;font-family:'Plus Jakarta Sans',sans-serif}
.avatar-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);min-width:180px;box-shadow:0 8px 24px rgba(15,23,42,0.1);display:none;z-index:999;overflow:hidden}
.avatar-menu.open{display:block}
.avatar-info{padding:0.875rem 1rem;border-bottom:1px solid var(--border)}
.avatar-info strong{display:block;font-size:0.85rem;color:var(--ink)}.avatar-info span{font-size:0.75rem;color:var(--ink-l)}
.am-sep{height:1px;background:var(--border)}
.am-item{display:flex;align-items:center;gap:0.6rem;padding:0.65rem 1rem;font-size:0.8rem;color:var(--ink-mid);cursor:pointer;text-decoration:none;border:none;background:none;width:100%;font-family:'Plus Jakarta Sans',sans-serif;transition:background 0.1s}
.am-item:hover{background:var(--bg);color:var(--ink)}.am-item.danger{color:#DC2626}.am-item.danger:hover{background:#FEF2F2}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--white);z-index:2000;padding:1.5rem;flex-direction:column;gap:0.5rem;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu-close{align-self:flex-end;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink-l);margin-bottom:0.5rem;padding:0.25rem}
.mobile-menu-link{padding:0.875rem 1rem;border-radius:10px;font-size:0.95rem;font-weight:500;color:var(--ink-mid);text-decoration:none;border:1.5px solid var(--border);display:block}
.mobile-menu-link.active{background:var(--teal-l);border-color:var(--teal-m);color:var(--teal-d);font-weight:600}

/* ── Trial banner ──────────────────────────────────────── */
.trial-top-banner{background:var(--orange-l);border-bottom:1.5px solid var(--orange-m);padding:0.55rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:0.8rem}
.trial-top-banner .ttb-msg{color:var(--ink-mid);font-weight:500}
.trial-top-banner .ttb-msg strong{color:var(--orange)}
.trial-top-banner a.ttb-btn{padding:0.3rem 0.875rem;background:var(--orange);color:white;border-radius:6px;font-size:0.775rem;font-weight:600;text-decoration:none;transition:background 0.15s;white-space:nowrap}
.trial-top-banner a.ttb-btn:hover{background:#ea6c0a}
.trial-top-banner .ttb-close{background:none;border:none;cursor:pointer;color:var(--ink-l);font-size:1.1rem;padding:0.15rem;line-height:1;display:flex;align-items:center}
.beta-top-banner{background:#F8FAFC;border-bottom:1.5px solid var(--border-m);padding:0.55rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:0.8rem}
.beta-top-banner .btb-msg{color:var(--ink-mid);font-weight:500}
.beta-top-banner .btb-msg strong{color:var(--teal-d)}
.beta-top-banner a,.beta-top-banner button{font-family:'Plus Jakarta Sans',sans-serif}
.beta-top-banner .btb-link{color:var(--teal-d);font-weight:700;text-decoration:none}
.beta-top-banner .btb-btn{padding:0.3rem 0.875rem;background:var(--teal);color:white;border-radius:6px;font-size:0.775rem;font-weight:700;text-decoration:none;border:none;cursor:pointer;white-space:nowrap}
.beta-top-banner .btb-close{background:none;border:none;cursor:pointer;color:var(--ink-l);font-size:1.1rem;padding:0.15rem;line-height:1;display:flex;align-items:center}
.cm-review-checklist{margin-top:0.75rem;background:var(--teal-l);border:1.5px solid var(--teal-m);border-radius:12px;padding:0.85rem 1rem;color:var(--teal-d)}
.cm-review-checklist strong{display:block;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.55rem}
.cm-review-checklist label{display:inline-flex;align-items:center;gap:0.35rem;margin-right:1rem;margin-bottom:0.35rem;font-size:0.8rem;font-weight:600;color:var(--ink-mid)}
.cm-review-checklist input{accent-color:var(--teal)}
.cm-review-checklist button{margin-top:0.45rem;padding:0.32rem 0.75rem;border-radius:7px;border:1.5px solid var(--teal);background:white;color:var(--teal-d);font-size:0.74rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer}
.cm-feedback-modal{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:1rem}
.cm-feedback-modal.open{display:flex}
.cm-feedback-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.48)}
.cm-feedback-card{position:relative;background:white;border:1.5px solid var(--border);border-radius:16px;max-width:520px;width:100%;box-shadow:0 24px 80px rgba(15,23,42,0.24);overflow:hidden}
.cm-feedback-head{padding:1rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cm-feedback-head h2{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:400;color:var(--ink)}
.cm-feedback-close{border:none;background:none;color:var(--ink-l);font-size:1rem;cursor:pointer}
.cm-feedback-body{padding:1.2rem}
.cm-feedback-body .form-group{margin-bottom:0.9rem}
.cm-feedback-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.cm-feedback-status{font-size:0.78rem;color:var(--ink-l);margin-top:0.75rem}

/* ── Forms ─────────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem}
.form-label{display:block;font-size:0.68rem;font-weight:700;color:var(--ink-l);margin-bottom:0.375rem;text-transform:uppercase;letter-spacing:0.07em}
.form-label .req{color:var(--teal-d);margin-left:1px;font-style:normal}
.form-input,.form-select{width:100%;padding:0.65rem 0.875rem;border:1.5px solid var(--border-m);border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.875rem;color:var(--ink);background:var(--bg);outline:none;transition:all 0.15s}
.form-input:focus,.form-select:focus{border-color:var(--teal);background:var(--white);box-shadow:0 0 0 3px rgba(14,165,160,0.1)}
.form-hint{font-size:0.72rem;color:var(--ink-l);margin-top:0.3rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem}

/* Password toggle */
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-right:2.75rem}
.pw-toggle{position:absolute;right:0.875rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink-l);padding:0.2rem;display:flex;align-items:center;justify-content:center}
.pw-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:color 0.15s}
.pw-toggle:hover svg{color:var(--ink)}

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.7rem 1.4rem;border-radius:10px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s;border:1.5px solid transparent;text-decoration:none}
.btn-primary{background:var(--teal);color:white;border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-d);transform:translateY(-1px);box-shadow:0 4px 14px rgba(14,165,160,0.3)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-primary:disabled{opacity:0.65;cursor:not-allowed;transform:none;box-shadow:none}
.btn-secondary{background:var(--white);color:var(--ink-l);border-color:var(--border-m)}
.btn-secondary:hover{background:var(--bg);color:var(--ink)}
.btn-full{width:100%;justify-content:center}

/* Loading state */
.btn-loading{pointer-events:none;opacity:0.75;position:relative}
.btn-loading .btn-text::after{content:'';display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,0.4);border-top-color:white;border-radius:50%;animation:cm-spin 0.65s linear infinite;margin-left:8px;vertical-align:middle}
@keyframes cm-spin{to{transform:rotate(360deg)}}

/* ── Messages ──────────────────────────────────────────── */
.error-msg{display:flex;align-items:flex-start;gap:0.5rem;background:var(--red-l);border:1.5px solid var(--red-m);border-radius:9px;padding:0.65rem 0.875rem;font-size:0.8rem;color:var(--red);margin-bottom:1rem}
.error-msg svg{flex-shrink:0;margin-top:1px;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.success-msg{display:flex;align-items:flex-start;gap:0.5rem;background:var(--green-l);border:1.5px solid var(--green-m);border-radius:9px;padding:0.65rem 0.875rem;font-size:0.8rem;color:var(--green);margin-bottom:1rem}
.success-msg svg{flex-shrink:0;margin-top:1px;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flash{display:flex;align-items:center;gap:0.6rem;padding:0.8rem 1.1rem;border-radius:9px;font-size:0.825rem;margin-bottom:1.25rem;font-weight:500}
.flash svg{flex-shrink:0;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flash-success{background:var(--green-l);border:1.5px solid var(--green-m);color:var(--green)}
.flash-error{background:var(--red-l);border:1.5px solid var(--red-m);color:var(--red)}

/* ── Shared UI atoms ───────────────────────────────────── */
.sec-label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--ink-l);margin-bottom:0.875rem}

/* Year / style / tone selectors */
.yr-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0.6rem;margin-top:0.375rem}
.yr-btn{padding:0.75rem 0.4rem;border-radius:10px;border:1.5px solid var(--border-m);background:var(--white);cursor:pointer;text-align:center;transition:all 0.15s;font-family:'Plus Jakarta Sans',sans-serif;user-select:none}
.yr-btn .yn{font-size:1.1rem;font-weight:700;color:var(--ink);display:block;line-height:1;margin-bottom:0.2rem}
.yr-btn .yl{font-size:0.62rem;font-weight:600;color:var(--ink-l);text-transform:uppercase;letter-spacing:0.05em}
.yr-btn:hover{border-color:var(--teal);background:var(--teal-l)}
.yr-btn:hover .yn{color:var(--teal-d)}
.yr-btn.sel{border-color:var(--teal);background:var(--teal)}
.yr-btn.sel .yn,.yr-btn.sel .yl{color:white}
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-top:0.375rem}
.style-opt{padding:0.875rem 1rem;border-radius:10px;border:1.5px solid var(--border-m);background:var(--white);cursor:pointer;transition:all 0.15s;user-select:none}
.style-opt:hover,.style-opt.sel{border-color:var(--teal);background:var(--teal-l)}
.style-opt strong{display:block;font-size:0.825rem;color:var(--ink);margin-bottom:0.15rem;pointer-events:none}
.style-opt p{font-size:0.75rem;color:var(--ink-l);line-height:1.4;pointer-events:none}
.style-opt.sel strong{color:var(--teal-d)}
.tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.6rem;margin-top:0.375rem}
.tone-opt{padding:0.75rem 0.875rem;border-radius:10px;border:1.5px solid var(--border-m);background:var(--white);cursor:pointer;transition:all 0.15s;text-align:center;user-select:none}
.tone-opt:hover,.tone-opt.sel{border-color:var(--teal);background:var(--teal-l)}
.tone-opt strong{display:block;font-size:0.825rem;color:var(--ink);margin-bottom:0.15rem}
.tone-opt p{font-size:0.72rem;color:var(--ink-l)}
.tone-opt.sel strong{color:var(--teal-d)}

/* ── Animations ────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes mIn{from{opacity:0;transform:scale(0.97)}to{opacity:1;transform:scale(1)}}

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:900px){.nav-links{gap:0}.nav-link{padding:0.4rem 0.5rem;font-size:0.75rem}}
@media(max-width:768px){.nav-links{display:none}.nav-hamburger{display:flex}.form-row,.cm-feedback-row{grid-template-columns:1fr}.beta-top-banner{align-items:flex-start;flex-direction:column}}