@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#292631;background:#fbf9f8;font-synthesis:none}
*{box-sizing:border-box}html{min-height:100%;}body{margin:0;min-height:100vh;overflow-x:hidden}a{text-decoration:none;color:inherit}button,input{font:inherit}[hidden]{display:none!important}
header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(25px,calc((100vw - 1180px)/2));position:relative;z-index:5;background:rgba(255,255,255,.64);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.8)}
.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:800;letter-spacing:-1.1px}.brand img{width:37px;height:37px;object-fit:contain}.brand b{color:#e25298}.home{font-size:13px;font-weight:700;color:#77717f;padding:10px 16px;background:rgba(255,255,255,.65);border:1px solid rgba(124,110,124,.13);border-radius:999px;transition:.2s}.home:hover{background:#fff;color:#292631}
.auth-stage{min-height:calc(100vh - 116px);position:relative;isolation:isolate;display:grid;align-items:center;padding:56px 25px 70px;background:radial-gradient(ellipse at 12% 12%,#fff2f8 0,transparent 40%),radial-gradient(ellipse at 90% 85%,#fff0df 0,transparent 40%),linear-gradient(135deg,#fbfaf9,#f8f6f6 55%,#faf7f4)}
.ambient{position:absolute;z-index:-1;pointer-events:none;filter:blur(7px);opacity:.85;border-radius:50%}.ambient-one{width:370px;height:370px;top:3%;left:6%;background:radial-gradient(circle,#fad9e9,transparent 70%)}.ambient-two{width:450px;height:450px;bottom:-11%;right:2%;background:radial-gradient(circle,#fbe6c5,transparent 70%)}.ambient-three{width:270px;height:270px;top:26%;right:28%;background:radial-gradient(circle,#d8f5f9,transparent 70%)}
.auth-layout{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,460px);align-items:center;gap:clamp(36px,7vw,100px)}
.brand-story{max-width:535px;padding:18px 0}.story-kicker{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(255,255,255,.68);border:1px solid #fff;border-radius:999px;color:#ae4c7b;font-size:10px;font-weight:800;letter-spacing:1.3px;box-shadow:0 6px 25px #d8b4c327}.kicker-dot{width:8px;height:8px;background:#e5559a;border-radius:50%}
.brand-story h2{font-size:clamp(45px,5.4vw,72px);letter-spacing:-3.8px;line-height:1.07;font-weight:800;margin:25px 0 20px}.brand-story h2 span{background:linear-gradient(95deg,#dc4aa1,#f18072,#f7b645);background-clip:text;-webkit-background-clip:text;color:transparent}.brand-story>p{max-width:440px;font-size:16px;color:#7b7280;line-height:1.85;margin:0 0 34px}
.story-preview{background:rgba(255,255,255,.43);border:1px solid rgba(255,255,255,.9);border-radius:25px;padding:22px 24px;max-width:430px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 20px 48px #8d688019,inset 0 1px 0 #fff}.preview-header{display:flex;align-items:center;gap:11px}.preview-avatar{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:#f9deec;color:#c9448e;font-size:22px}.preview-header strong,.preview-header small{display:block}.preview-header strong{font-size:13px}.preview-header small{font-size:11px;color:#968b96;margin-top:4px}.preview-check{margin-left:auto;background:#e1f4e4;color:#319d58;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:12px}.preview-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:19px 0 14px}.preview-stats>div{padding:15px;border-radius:16px;background:rgba(255,255,255,.67);border:1px solid #ffffffc9}.preview-stats small{display:block;color:#958996;font-size:11px;margin-bottom:6px}.preview-stats strong{font-size:24px;letter-spacing:-1px}.preview-note{font-size:12px;color:#9a6886}.preview-note span{color:#df4e97;margin-right:6px}.story-foot{display:flex;align-items:center;gap:14px;font-size:12px;color:#a197a3;margin-top:28px}.color-dots{display:flex;gap:5px}.color-dots i{width:7px;height:7px;border-radius:50%;background:#e350a0}.color-dots i:nth-child(2){background:#05bde5}.color-dots i:nth-child(3){background:#ffbb4f}.color-dots i:nth-child(4){background:#7ec638}
.form-shell{position:relative}.form-shell:before{content:'';position:absolute;inset:-14px;border-radius:38px;background:rgba(255,255,255,.23);border:1px solid rgba(255,255,255,.5);pointer-events:none;z-index:-1}.panel{width:100%;padding:36px 35px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);border-radius:25px;box-shadow:0 22px 65px rgba(80,59,70,.1),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%)}
.eyebrow{color:#d25195;font-size:10px;font-weight:800;letter-spacing:1.6px;margin-bottom:11px}h1{font-size:31px;line-height:1.18;letter-spacing:-1.25px;margin:0}.intro{color:#837c8b;line-height:1.6;font-size:13px;margin:9px 0 20px}.tabs{display:flex;gap:22px;margin-bottom:17px;border-bottom:1px solid #ddd4dd80}.tabs button{border:0;background:none;padding:10px 0 12px;font-size:13px;font-weight:750;color:#98919d;border-bottom:2px solid transparent;cursor:pointer}.tabs button.active{color:#292631;border-color:#df4e98}label{display:block;margin:13px 0 7px;font-size:12px;font-weight:750}input:not([type=checkbox]){width:100%;padding:12px 14px;border:1px solid #ded9dfb8;background:rgba(255,255,255,.68);border-radius:11px;outline:none;color:#302b34;font-size:13px;transition:border-color .2s,box-shadow .2s}input:not([type=checkbox]):focus{border-color:#db6ca5;box-shadow:0 0 0 4px #e85b9917;background:#fff}.roles{display:flex;flex-wrap:wrap;gap:8px}.roles label{display:flex;align-items:center;gap:6px;margin:0;border:1px solid #e8dfe7;background:rgba(255,255,255,.6);border-radius:10px;padding:9px 11px;cursor:pointer;font-size:12px}input[type=checkbox]{accent-color:#e25298}.tiny{font-size:11px;color:#988e9a;line-height:1.6}
.primary{display:block;width:100%;padding:13px 16px;margin-top:20px;border:none;border-radius:11px;background:#292631;color:white;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 9px 18px #28242d21;transition:transform .2s,background .2s}.primary:hover{background:#3c3543;transform:translateY(-1px)}.primary:disabled{opacity:.55;cursor:wait;transform:none}.textbutton{display:block;border:0;background:none;padding:9px 0;color:#bf4987;font-size:12px;font-weight:700;cursor:pointer;text-align:left}.textbutton:hover{text-decoration:underline}.divider{display:flex;align-items:center;gap:12px;font-size:11px;color:#a29aa4;margin:17px 0}.divider:before,.divider:after{content:'';height:1px;background:#e8e2e8;flex:1}.providers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.provider{padding:12px;background:rgba(255,255,255,.62);border:1px solid #e5dee5;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer}.provider:not(:disabled):hover{background:#fff}.provider:disabled{opacity:.45;cursor:not-allowed}#message{font-size:12px;min-height:17px;color:#bd345f;line-height:1.4;margin-bottom:0}#message.good{color:#16835d}.info{padding:15px;border-radius:12px;background:#ffffffae;font-size:13px;line-height:1.8;overflow-wrap:anywhere}.info p{margin:5px 0}footer{text-align:center;color:#aaa1ab;font-size:11px;padding:12px;background:#faf8f7}
@media(max-width:900px){.auth-layout{grid-template-columns:1fr;max-width:500px;gap:20px}.brand-story{padding:0}.brand-story h2{font-size:40px;letter-spacing:-2px;margin:17px 0 8px}.brand-story>p{font-size:13px;margin:0}.story-preview,.story-foot{display:none}.auth-stage{padding:38px 20px 60px}.panel{padding:30px}}
@media(max-width:500px){header{height:67px;padding:0 19px}.brand{font-size:21px}.brand img{width:33px;height:33px}.brand-story h2{font-size:34px;line-height:1.1}.story-kicker{font-size:9px;letter-spacing:.7px}.form-shell:before{inset:-6px;border-radius:26px}.panel{border-radius:21px;padding:26px 22px}.auth-stage{padding:26px 19px 48px}.brand-story>p{line-height:1.6}h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Font Awesome 4.7 visual alignment */
.fa {line-height:inherit;} .home .fa{margin-right:5px;} .provider .fa{margin-right:8px;}


/* Step 02F: shared brand/header visual language across Homepage + Account. */
:root{--ink:#292630;--pink:#e3549e;--border:#eee7e6}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink)}
.site-header{height:auto;min-height:84px;position:relative;top:auto;z-index:20;padding:0;background:rgba(255,250,247,.79);border-bottom:1px solid rgba(60,48,65,.08);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.shell{width:min(1140px,calc(100% - 44px));margin-inline:auto}
.site-header .header-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.site-header .brand{display:flex;align-items:center;gap:11px;font-size:27px;font-weight:850;letter-spacing:-1.4px;white-space:nowrap}
.site-header .brand img{width:44px;height:44px;object-fit:contain}
.site-header .brand-accent{color:#e3549e}
.site-header .top-nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:650;color:#625966}
.site-header .top-nav a:hover{color:#bd377d}
.site-header .header-actions{display:flex;gap:13px;align-items:center}
.site-header .button{border-radius:14px;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;gap:9px;font-weight:750;font-size:14px;transition:transform .17s ease}
.site-header .button:hover{transform:translateY(-1px)}
.site-header .button.outline{background:rgba(255,255,255,.72);border:1px solid #eadfdd;color:#292630}
.site-header .pill{border-radius:999px;padding:9px 12px;white-space:nowrap;font-size:12px;font-weight:750}
.site-header .beta-pill{background:#fbe5ef;color:#a53268}
/* Show real translucent glass over a rich, yet restrained, backdrop. */
.auth-stage{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 116px);background:linear-gradient(125deg,#fff7fa 0%,#f8f8fd 47%,#fff9f0 100%)}
.auth-stage::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 33% 52% at 12% 35%,rgba(231,78,161,.25),transparent 85%),radial-gradient(ellipse 30% 47% at 83% 76%,rgba(255,175,89,.25),transparent 85%),radial-gradient(ellipse 28% 46% at 55% 24%,rgba(45,196,225,.17),transparent 85%)}
.auth-stage::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:410px;height:410px;right:4%;top:4%;border-radius:42% 58% 67% 33% / 48% 40% 60% 52%;background:linear-gradient(145deg,rgba(245,110,174,.17),rgba(103,204,224,.13),rgba(255,189,85,.22));transform:rotate(-17deg);filter:blur(1px)}
.ambient{filter:blur(38px);opacity:.72;mix-blend-mode:multiply}
.ambient-one{background:rgba(232,93,158,.23);left:-8%;top:12%;width:500px;height:500px}
.ambient-two{background:rgba(255,175,90,.28);right:-10%;bottom:-12%;width:570px;height:570px}
.ambient-three{background:rgba(40,196,223,.20);right:26%;top:7%;width:340px;height:340px}
.form-shell:before{inset:-13px;border-radius:38px;background:rgba(255,255,255,.19);border:1px solid rgba(255,255,255,.7);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 85px rgba(102,72,103,.08);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.panel{background:linear-gradient(155deg,rgba(255,255,255,.67),rgba(255,255,255,.37));border:1px solid rgba(255,255,255,.92);border-radius:27px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.92),inset 1px 0 0 rgba(255,255,255,.35),0 24px 75px rgba(72,55,91,.12);backdrop-filter:blur(36px) saturate(185%);-webkit-backdrop-filter:blur(36px) saturate(185%)}
.story-preview{background:linear-gradient(140deg,rgba(255,255,255,.52),rgba(255,255,255,.25));border:1px solid rgba(255,255,255,.89);box-shadow:inset 0 1px 0 #fff,0 24px 60px rgba(110,77,98,.12);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
.preview-stats>div{background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.77)}
input:not([type=checkbox]){background:rgba(255,255,255,.56);border-color:rgba(117,102,124,.18);backdrop-filter:blur(9px)}
input:not([type=checkbox]):focus{background:rgba(255,255,255,.9)}
.provider{background:rgba(255,255,255,.44);border-color:rgba(255,255,255,.82);box-shadow:inset 0 1px rgba(255,255,255,.65)}
.story-kicker{background:rgba(255,255,255,.48);backdrop-filter:blur(15px)}
@media(max-width:1050px){.site-header .top-nav{gap:16px}}
@media(max-width:750px){.shell{width:min(100% - 32px,600px)}.site-header,.site-header .header-inner{min-height:70px}.site-header .brand{font-size:22px;letter-spacing:-.8px}.site-header .brand img{width:39px;height:39px}.site-header .top-nav,.site-header .beta-pill{display:none}}
@media(max-width:500px){.site-header .header-inner{padding:0}.site-header .button{font-size:12px;padding:7px 11px}.auth-stage::after{width:260px;height:260px;right:-80px;top:30px}.panel{background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(255,255,255,.54))}}
@media(prefers-reduced-transparency:reduce){.panel{background:rgba(255,255,255,.96)}.story-preview{background:rgba(255,255,255,.94)}}

/* Step 02G role onboarding, consistent with Modern Glass */
.onboarding-roles{display:grid;gap:12px;margin:24px 0}.onboarding-roles label{display:flex;align-items:center;gap:12px;cursor:pointer;padding:16px;border-radius:16px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px rgba(255,255,255,.7);font-weight:650}.onboarding-roles label:has(input:checked){border-color:rgba(227,84,158,.65);background:rgba(251,227,240,.75)}.onboarding-roles input{accent-color:#df4e98;width:18px;height:18px}.onboarding-roles .fa{width:21px;text-align:center;color:#cf4a90}#onboardingMessage{color:#b42a61;font-size:13px;min-height:20px}#editTypes{margin:14px 0}#onboardingPanel[hidden],#authPanel[hidden],#accountPanel[hidden]{display:none!important}

/* Step 03: Google is the sole OAuth provider. */
.providers{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
.providers .provider{width:100%;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px}
.dashboard-go{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;min-height:44px;margin:20px 0 6px;background:#292630;color:white;border-radius:11px;font-size:13px;font-weight:750;text-decoration:none}
.dashboard-go:hover{background:#433847}

/* Step 03B: single provider full width */
.providers{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important}.providers .provider{display:flex;width:100%!important;max-width:none!important;justify-content:center}