:root{--primary:#1D4ED8;--purple:#7C3AED;--pink:#EC4899;--orange:#F97316;--teal:#14B8A6;--navy:#0F172A;--slate:#475569;--bg:#F8FAFC;--border:#E2E8F0;--danger:#B91C1C;--success:#15803D}
*{box-sizing:border-box}body{margin:0;font-family:"Noto Sans Thai","Sarabun",Arial,sans-serif;color:var(--navy);background:linear-gradient(145deg,#EFF6FF,#FAF5FF,#FFF7ED);min-height:100vh}
a{color:var(--primary);font-weight:700;text-decoration:none}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.brand-side{padding:56px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%,rgba(249,115,22,.18),transparent 32%),radial-gradient(circle at 80% 20%,rgba(236,72,153,.18),transparent 30%),rgba(255,255,255,.55)}
.brand-content{max-width:560px}.brand-content img{width:210px}.brand-content h1{font-size:44px;line-height:1.2;margin:28px 0 12px}.brand-content p{font-size:18px;line-height:1.8;color:var(--slate)}
.form-side{display:grid;place-items:center;padding:32px;background:rgba(255,255,255,.78)}.card{width:min(480px,100%);background:#fff;border:1px solid var(--border);border-radius:24px;padding:32px;box-shadow:0 18px 60px rgba(15,23,42,.10)}
.card h2{margin:0 0 8px;font-size:30px}.muted{color:var(--slate);font-size:14px}.group{margin:16px 0}.label{display:block;font-weight:800;margin-bottom:7px}.input{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:12px;outline:0}.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(29,78,216,.1)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.btn{width:100%;border:0;border-radius:12px;padding:13px 18px;font-weight:900;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--purple));color:#fff}.btn-secondary{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.alert{padding:12px 14px;border-radius:12px;margin:14px 0}.alert-error{background:#FEE2E2;color:var(--danger)}.alert-success{background:#DCFCE7;color:var(--success)}.errors{margin:0;padding-left:22px}.row{display:flex;justify-content:space-between;align-items:center;gap:14px}.center{text-align:center}.top-logo{width:145px;margin-bottom:12px}
.dashboard{min-height:100vh;background:var(--bg);padding:40px}.dash-card{max-width:850px;margin:auto;background:#fff;border:1px solid var(--border);border-radius:24px;padding:32px;box-shadow:0 14px 45px rgba(15,23,42,.08)}.role{display:inline-flex;padding:7px 12px;border-radius:999px;background:#EDE9FE;color:#6D28D9;font-weight:800}
@media(max-width:850px){.auth-shell{grid-template-columns:1fr}.brand-side{display:none}.grid-2{grid-template-columns:1fr}.form-side{padding:18px}.card{padding:24px}}
/* Marketing Hub Login Logo */
.login-main-logo {
    width: 260px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 34px;
    object-fit: contain;
}

.top-logo {
    width: 160px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 0 24px;
    object-fit: contain;
}

/* Developer Credit */
.system-credit {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    font-size: 14px;
    color: #64748b;
    z-index: 20;
    pointer-events: none;
}