@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--ink:#202435;--muted:#73788a;--line:#e8e9ef;--paper:#fff;--wash:#f7f8fb;--teal:#17b9bb;--teal-dark:#078d91;--navy:#151a2b;--shadow:0 18px 50px rgba(32,36,53,.07)}
html,body{font-family:'DM Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
body{background:var(--wash);color:var(--ink)}
a{transition:color .15s ease}
.brand,.auth-logo{font-family:'DM Sans',Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.45px}
.brand{gap:10px;font-size:18px}
.brand-icon{display:block;width:35px;height:35px;flex:0 0 35px;object-fit:contain;border-radius:10px}
.brand strong,.auth-logo .brand-word>span{font-weight:700;color:var(--teal-dark)}
.brand-glyph{display:none!important}
/* Use the same clean, pale workspace theme across login/setup/account pages. */
.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;max-width:none;margin:0;padding:1px 20px 48px;background:var(--wash)}
.auth-brand{display:flex!important}
.auth-card{align-self:auto;justify-self:auto;width:min(100%,470px);margin:clamp(44px,9vh,96px) auto 28px;padding:clamp(25px,4vw,42px);background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.auth-logo{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-.55px;color:var(--ink);margin-bottom:29px;text-decoration:none}
.auth-logo .brand-icon{width:36px;height:36px;flex-basis:36px}
.auth-logo .brand-word{color:var(--ink);font-weight:700;white-space:nowrap}
.auth-logo .brand-word>span{color:var(--teal-dark);font-weight:700}
.auth-card h2{font-family:'DM Sans',Inter,system-ui,sans-serif;font-size:25px;letter-spacing:-.7px;font-weight:700}
.auth-card input,.admin-card input,.admin-card select,.inline-form input{font-family:'DM Sans',Inter,system-ui,sans-serif;border-color:var(--line);border-radius:9px}
.auth-card input:focus,.admin-card input:focus,.admin-card select:focus{border-color:#54c8c5;box-shadow:0 0 0 3px #17b9bb1c}
.primary{background:linear-gradient(105deg,#17b9bb,#4386e8 58%,#7650df);box-shadow:0 8px 18px #4765db20}
.admin-body{background:var(--wash);color:var(--ink);padding:0 20px 50px}
.admin-header{max-width:1280px;height:78px;border-bottom:1px solid var(--line);padding:0 0;gap:20px}
.admin-header .auth-logo{margin:0;font-size:18px}
.admin-header nav{gap:22px}
.admin-header nav a,.nav-signout{font-family:'DM Sans',Inter,system-ui,sans-serif;color:#5f6678;font-size:12px;font-weight:600}
.admin-main{max-width:1280px;margin:37px auto 0}
.admin-heading h1{font-family:'DM Sans',Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.8px}
.admin-card,.users-card{background:var(--paper);border-color:var(--line);border-radius:14px;box-shadow:0 7px 24px rgba(28,34,52,.025)}
th{background:#f7f8fb;color:#7d899b}
td{border-top-color:#eef0f5}
.brand-name{font-family:'DM Sans',Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.45px}
/* Dashboard pricing cards: active administrator-published plans are visible without opening the billing page. */
.dashboard-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.dashboard-plan-card{display:flex;flex-direction:column;min-width:0;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--paper);box-shadow:0 7px 20px rgba(28,34,52,.025);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.dashboard-plan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.dashboard-plan-card.current-dashboard-plan{border-color:#8bdad5;box-shadow:0 0 0 2px #17b9bb12}
.dashboard-plan-top{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:18px}
.dashboard-plan-kicker{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--teal-dark)}
.dashboard-plan-duration{border-radius:20px;padding:5px 8px;background:#eaf8f6;color:#087e80;font-size:10px;font-weight:700;white-space:nowrap}
.dashboard-plan-card h3{font-size:17px;margin:0 0 7px;letter-spacing:-.25px}
.dashboard-plan-description{min-height:42px;font-size:11px;line-height:1.6;color:var(--muted);margin:0 0 17px}
.dashboard-plan-price{font-size:29px;line-height:1.1;font-weight:700;letter-spacing:-1.1px;color:var(--ink);white-space:nowrap}
.dashboard-plan-price small{font-size:10px;font-weight:500;color:var(--muted);letter-spacing:0}
.dashboard-plan-includes{display:flex;flex-direction:column;gap:8px;margin:17px 0 22px;padding-top:15px;border-top:1px solid var(--line);color:#5f687a;font-size:10px}
.dashboard-plan-includes span:first-letter{color:var(--teal-dark)}
.dashboard-plan-action{margin-top:auto}
.dashboard-plan-action .primary-button,.dashboard-plan-action .secondary-button{width:100%;justify-content:center}
.plan-empty-state{padding:30px 20px}
.project-thumb{background:transparent!important;box-shadow:none!important}
.project-thumb-icon{display:block;width:43px;height:43px;object-fit:contain;border-radius:11px}
/* User-selected dark appearance. The editor remains governed by its existing appearance controls. */
html.ui-theme-dark{color-scheme:dark;--ink:#e8edf5;--muted:#a3aec0;--line:#354358;--paper:#1e293b;--wash:#111827;--teal:#31d0cb;--teal-dark:#55d8d2;--navy:#0b1220;--shadow:0 18px 50px rgba(0,0,0,.22)}
html.ui-theme-dark body{background:var(--wash);color:var(--ink)}
html.ui-theme-dark .dash-topbar,html.ui-theme-dark .manage-header,html.ui-theme-dark .auth-card,html.ui-theme-dark .admin-card,html.ui-theme-dark .users-card,html.ui-theme-dark .template-card,html.ui-theme-dark .empty-state,html.ui-theme-dark .no-plan-state,html.ui-theme-dark .empty-projects,html.ui-theme-dark .project-list,html.ui-theme-dark .project-row,html.ui-theme-dark .manage-panel,html.ui-theme-dark .plan-row,html.ui-theme-dark .checkout-plan,html.ui-theme-dark .result-card,html.ui-theme-dark .receipt-panel{background:#1e293b;border-color:#354358;color:#e8edf5}
html.ui-theme-dark .dash-topbar,html.ui-theme-dark .manage-header,html.ui-theme-dark .admin-header{border-bottom-color:#354358}
html.ui-theme-dark .brand,html.ui-theme-dark .brand strong,html.ui-theme-dark .auth-logo,html.ui-theme-dark .auth-logo .brand-word,html.ui-theme-dark .auth-logo .brand-word>span,html.ui-theme-dark .dashboard-plan-card h3,html.ui-theme-dark .dashboard-plan-price{color:#e8edf5}
html.ui-theme-dark .welcome-copy,html.ui-theme-dark .section-head p:not(.eyebrow),html.ui-theme-dark .dashboard-plan-description,html.ui-theme-dark .dashboard-plan-includes,html.ui-theme-dark .manage-hero>p:last-child,html.ui-theme-dark .panel-heading p,html.ui-theme-dark .plan-row>p,html.ui-theme-dark .result-copy,html.ui-theme-dark .muted,html.ui-theme-dark .signed-in-label{color:#a3aec0}
html.ui-theme-dark .secondary-button,html.ui-theme-dark .outline-button,html.ui-theme-dark .auth-card input,html.ui-theme-dark .admin-card input,html.ui-theme-dark .admin-card select,html.ui-theme-dark .inline-form input,html.ui-theme-dark .manage-form input:not([type=file]),html.ui-theme-dark .manage-form textarea{background:#111827;border-color:#3c4a60;color:#e8edf5}
html.ui-theme-dark .subscription-active{background:#153b3b;border-color:#285c5e}
html.ui-theme-dark .subscription-needed{background:#3b3020;border-color:#5c4a28}
html.ui-theme-dark .subscription-copy span,html.ui-theme-dark .user-chip small,html.ui-theme-dark .project-detail span,html.ui-theme-dark .dash-footer,html.ui-theme-dark .plan-meta,html.ui-theme-dark .plan-price small,html.ui-theme-dark .redirect-note{color:#a3aec0}
html.ui-theme-dark .dashboard-plan-duration,html.ui-theme-dark .count-pill,html.ui-theme-dark .panel-number{background:#24464a;color:#67e2dc}
html.ui-theme-dark .dashboard-plan-includes,html.ui-theme-dark .receipt-panel>div{border-color:#354358}
html.ui-theme-dark .project-thumb{background:transparent!important}
html.ui-theme-dark th{background:#172235;color:#a3aec0}
html.ui-theme-dark td{border-top-color:#354358}
html.ui-theme-dark .auth-card label,html.ui-theme-dark .admin-card label{color:#c7d1df}
html.ui-theme-dark .empty-graphic{background:#213f44;color:#67e2dc}
@media(max-width:900px){.dashboard-plan-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.admin-header{align-items:center}.admin-main{margin-top:25px}}
@media(max-width:650px){.brand-icon{width:31px;height:31px;flex-basis:31px}.auth-card{margin-top:32px}.dashboard-plan-grid{grid-template-columns:1fr}.dashboard-plan-description{min-height:0}.admin-header{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 0}.admin-header nav{flex-wrap:wrap;gap:10px}.admin-heading{flex-direction:column}.user-count{align-self:flex-start}}

.footer-brand{display:inline-flex;align-items:center;gap:8px;font:700 13px 'DM Sans',Inter,system-ui,sans-serif;letter-spacing:-.3px;color:var(--ink)}
.footer-brand img{width:25px;height:25px;object-fit:contain}
.footer-brand strong{color:var(--teal-dark)}
html.ui-theme-dark .footer-brand{color:#e8edf5}
html.ui-theme-dark .footer-brand strong{color:#67e2dc}
html.ui-theme-dark .auth-links a,html.ui-theme-dark .secondary-link{color:#75deda}
html.ui-theme-dark .otp-note{background:#172235;border-color:#354358;color:#c7d1df}
html.ui-theme-dark .auth-card button.secondary{background:#111827;border-color:#3c4a60;color:#e8edf5}


/* v144.2 full dashboard theme: all dashboard surfaces and controls follow the editor Appearance value. */
html.ui-theme-dark{color-scheme:dark}
html.ui-theme-dark body{background:#111827;color:#e8edf5}
html.ui-theme-dark .dash-topbar{background:#1e293b;border-bottom-color:#354358}
html.ui-theme-dark .brand,html.ui-theme-dark .brand strong{color:#e8edf5}
html.ui-theme-dark .quiet-link{color:#c1ccdc}
html.ui-theme-dark .user-chip,html.ui-theme-dark .user-chip small{color:#e8edf5}
html.ui-theme-dark .user-avatar{background:#24464a;color:#67e2dc}
html.ui-theme-dark .subscription-strip{background:#153b3b;border-color:#285c5e;color:#e8edf5}
html.ui-theme-dark .subscription-needed{background:#3b3020;border-color:#5c4a28}
html.ui-theme-dark .subscription-copy span{color:#a3aec0}
html.ui-theme-dark .subscription-mark{background:#24464a;color:#67e2dc}
html.ui-theme-dark .subscription-needed .subscription-mark{background:#574521;color:#f5d58e}
html.ui-theme-dark .strip-button,html.ui-theme-dark .text-action,html.ui-theme-dark .welcome-secondary{color:#67e2dc}
html.ui-theme-dark .template-card,html.ui-theme-dark .empty-state,html.ui-theme-dark .no-plan-state,html.ui-theme-dark .empty-projects,html.ui-theme-dark .project-list,html.ui-theme-dark .project-row{background:#1e293b;border-color:#354358;color:#e8edf5}
html.ui-theme-dark .section-head h2,html.ui-theme-dark .template-info h3,html.ui-theme-dark .project-detail strong,html.ui-theme-dark .empty-state h3{color:#e8edf5}
html.ui-theme-dark .section-head p:not(.eyebrow),html.ui-theme-dark .welcome-copy,html.ui-theme-dark .template-info p,html.ui-theme-dark .project-detail span,html.ui-theme-dark .empty-state p,html.ui-theme-dark .empty-projects p,html.ui-theme-dark .dash-footer{color:#a3aec0}
html.ui-theme-dark .secondary-button,html.ui-theme-dark .outline-button{background:#111827;border-color:#3c4a60;color:#e8edf5}
html.ui-theme-dark .project-row{border-bottom-color:#354358}


/* Auth pages: reference split-screen design (left creative panel + right form card). */
.auth-shell {
  width: 100%;
  max-width: 1800px;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(18px, 3vw, 56px);
  margin: 0 auto;
  padding: clamp(12px, 1.15vw, 20px);
  overflow: hidden;
  background: var(--wash);
}
.auth-brand {
  display: flex !important;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  min-height: calc(100svh - clamp(24px, 2.3vw, 40px));
  padding: clamp(32px, 5vw, 78px);
  border-radius: 23px;
  overflow: hidden;
  background: linear-gradient(140deg, #18c3c6 0%, #377cd9 46%, #7450dd 100%);
  color: #fff;
}
.auth-brand .brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 14px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font: 700 25px/1 'DM Sans', Inter, sans-serif;
}
.auth-brand .eyebrow { color: #f1f5ff; }
.auth-brand h1 { color: #fff; }
.auth-brand h1 em { color: #fbe7b0; }
.auth-brand > p:not(.eyebrow) { color: #edf5ff; }
.auth-card {
  align-self: center;
  justify-self: center;
  width: min(100%, 480px);
  max-width: 100%;
  margin: 20px auto;
  padding: clamp(28px, 4vw, 54px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
html.ui-theme-dark .auth-brand { background: linear-gradient(140deg, #087e91 0%, #2857ae 49%, #5937b4 100%); }
html.ui-theme-dark .auth-brand .brand-mark { color: #fff; }
@media (max-width: 850px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100svh;
    align-items: start;
    gap: 16px;
    padding: 12px;
    overflow: visible;
  }
  .auth-brand {
    min-height: auto;
    padding: clamp(25px, 5vw, 40px);
    border-radius: 19px;
  }
  .auth-brand h1 { font-size: clamp(36px, 6.4vw, 49px); }
  .auth-brand > p:not(.eyebrow) { max-width: 560px; }
  .auth-art { display: block; height: clamp(125px, 23vw, 180px); max-width: 440px; margin-top: 23px; }
  .auth-card { align-self: start; justify-self: center; width: min(100%, 520px); margin: 0 auto 14px; }
}
@media (max-width: 520px) {
  .auth-shell { gap: 12px; padding: 10px; }
  .auth-brand { padding: 23px 21px; border-radius: 16px; }
  .auth-brand h1 { font-size: clamp(32px, 8vw, 40px); }
  .auth-brand .eyebrow { margin-top: 17px; letter-spacing: 2.2px; }
  .auth-brand > p:not(.eyebrow) { font-size: 12px; line-height: 1.6; margin-bottom: 0; }
  .auth-art { height: 122px; max-width: 330px; margin-top: 18px; }
  .art-paper strong { margin: 9px 0; letter-spacing: 2.5px; }
  .auth-card { padding: 25px 21px; border-radius: 16px; }
  .auth-logo { margin-bottom: 24px; }
  .auth-card h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-brand, .auth-card, .auth-brand::before, .auth-brand::after, .art-photo, .art-paper, .auth-art::after { animation: none !important; }
}


/* v144.5: authoritative split-screen auth layout. Overrides legacy one-column theme rules. */
html body .auth-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: initial !important;
  gap: clamp(18px, 3vw, 56px) !important;
  width: 100%;
  max-width: 1800px !important;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto !important;
  padding: clamp(12px, 1.15vw, 20px) !important;
  overflow: hidden;
  background: var(--wash);
}
html body .auth-shell > .auth-brand {
  display: flex !important;
  visibility: visible !important;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  min-height: calc(100svh - clamp(24px, 2.3vw, 40px));
  padding: clamp(32px, 5vw, 78px);
  border-radius: 23px;
  overflow: hidden;
  background: linear-gradient(140deg, #18c3c6 0%, #377cd9 46%, #7450dd 100%);
  color: #fff;
}
html body .auth-shell > .auth-brand .brand-mark { display: grid; }
html body .auth-shell > .auth-card {
  display: block;
  align-self: center;
  justify-self: center;
  width: min(100%, 480px);
  max-width: 100%;
  margin: 20px auto;
  padding: clamp(28px, 4vw, 54px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
html.ui-theme-dark body .auth-shell > .auth-brand {
  background: linear-gradient(140deg, #087e91 0%, #2857ae 49%, #5937b4 100%);
}
@media (max-width: 900px) {
  html body .auth-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 12px !important;
    overflow: visible;
  }
  html body .auth-shell > .auth-brand {
    min-height: auto;
    padding: clamp(25px, 5vw, 40px);
    border-radius: 19px;
  }
  html body .auth-shell > .auth-brand h1 { font-size: clamp(36px, 6.4vw, 49px); }
  html body .auth-shell > .auth-brand > p:not(.eyebrow) { max-width: 560px; }
  html body .auth-shell .auth-art {
    display: block;
    height: clamp(125px, 23vw, 180px);
    max-width: 440px;
    margin-top: 23px;
  }
  html body .auth-shell > .auth-card {
    align-self: start;
    justify-self: center;
    width: min(100%, 520px);
    margin: 0 auto 14px;
    padding: clamp(26px, 4vw, 42px);
  }
}
@media (max-width: 520px) {
  html body .auth-shell { gap: 12px !important; padding: 10px !important; }
  html body .auth-shell > .auth-brand { padding: 23px 21px; border-radius: 16px; }
  html body .auth-shell > .auth-brand h1 { font-size: clamp(32px, 8vw, 40px); }
  html body .auth-shell > .auth-brand .eyebrow { margin-top: 17px; letter-spacing: 2.2px; }
  html body .auth-shell > .auth-brand > p:not(.eyebrow) { font-size: 12px; line-height: 1.6; margin-bottom: 0; }
  html body .auth-shell .auth-art { height: 122px; max-width: 330px; margin-top: 18px; }
  html body .auth-shell .art-paper strong { margin: 9px 0; letter-spacing: 2.5px; }
  html body .auth-shell > .auth-card { padding: 25px 21px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .auth-shell > .auth-brand,
  html body .auth-shell > .auth-card,
  html body .auth-shell > .auth-brand::before,
  html body .auth-shell > .auth-brand::after,
  html body .auth-shell .art-photo,
  html body .auth-shell .art-paper,
  html body .auth-shell .auth-art::after { animation: none !important; }
}