.is-dashboard .navigation,.is-dashboard .home,.is-dashboard .home-bottom,.is-dashboard .features,.is-dashboard > .footer { display: none; }
.is-dashboard .pattern-scroll { opacity: .3; }
#dashboard { min-height: 100svh; display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 56px; padding: 24px 48px 24px 24px; max-width: 1800px; margin: 0 auto; }
.dashboard-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 28px; min-height: calc(100svh - 48px); min-width: 0; }
.dashboard-brand { align-self: center; font-size: 20px; height: 48px; }
.new-site { position: relative; width: 100%; height: 68px; flex-shrink: 0; padding: 0; background: transparent; color: var(--bg); transition: transform 180ms ease; }
.new-site svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--accent); }
.new-site span { position: relative; font-size: 28px; font-weight: 400; }
.new-site:hover { transform: scale(1.025); }
.new-site:hover svg { fill: #efc526; }
.dashboard-sites { min-height: 0; flex: 1; }
.sidebar-caption { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--secondary); font-size: 11px; }
#dashboard-refresh { min-height: 32px; padding: 0 4px; font-size: 18px; }
#dashboard-site-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.site-tab { display: flex; align-items: center; gap: 12px; min-height: 60px; width: 100%; padding: 10px 12px; background: transparent; color: var(--secondary); border-radius: 10px; text-align: left; }
.site-tab:hover { color: var(--text); background: #2c2e3166; }
.site-tab[aria-current=true] { background: var(--surface); color: var(--text); }
.site-tab-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: var(--surface); color: var(--text); position: relative; overflow: hidden; }
.site-tab-icon img { position: absolute; width: 20px; height: 20px; object-fit: contain; }
.site-tab[aria-current=true] .site-tab-icon { color: var(--bg); background: var(--accent); }
.site-tab-copy { min-width: 0; display: grid; gap: 5px; }
.site-tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.site-tab-status { font-size: 11px; color: var(--secondary); }
#dashboard-list-status { padding-inline: 12px; overflow-wrap: anywhere; }
.dashboard-sidebar-bottom { margin-top: auto; display: grid; gap: 8px; padding: 0 12px; position: sticky; bottom: 24px; }
#plan-button { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
#dashboard-account #login-button { width: 100%; font-size: 12px; }
#dashboard-account #account-label { max-width: 140px; }
#dashboard-account .account-avatar { width: 28px; height: 28px; font-size: 12px; }
#dashboard-account .account-dropdown { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; z-index: 8; transform-origin: bottom left; }
.dashboard-workspace { padding-top: 12px; display: flex; flex-direction: column; min-width: 0; min-height: calc(100svh - 48px); }
.workspace-heading { min-height: 72px; display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.workspace-identity { min-width: 0; flex: 1; }
#dashboard-title { font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; white-space: normal; overflow-wrap: anywhere; }
#dashboard-subtitle,#dashboard-url { display: block; font-size: 12px; margin-top: 5px; color: var(--secondary); overflow-wrap: anywhere; }
#dashboard-url:hover { color: var(--accent); }
.settings-button { width: 44px; height: 44px; padding: 10px; background: var(--surface); border-radius: 50%; flex-shrink: 0; }
#dashboard-open { color: var(--accent); font-size: 12px; white-space: nowrap; }
.dashboard-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 540px; padding: 24px 0; }
.empty-handwritten { color: var(--accent); font: 26px/1.4 Caveat,cursive; }
#dashboard-box .upload-art { width: 280px; height: 300px; align-self: auto; transform: none; margin: 0; }
#dashboard-box .doodle,#dashboard-box .mobile-drop-title,#dashboard-box .upload-hint,#dashboard-box .drop-label { display: none; }
#dashboard-box .drop-zone { width: 260px; height: 260px; left: 10px; top: 20px; margin: 0; }
#dashboard-box .drop-zone svg { width: 320px; height: 320px; top: -30px; left: -30px; }
.dashboard-empty h2 { font-size: 32px; max-width: 360px; }
.dashboard-empty .small { margin-top: 16px; line-height: 1.8; }
.dashboard-upload-actions { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.dashboard-upload-actions .text-button { font-size: 13px; }
.dashboard-footer { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dashboard-footer .small { margin-top: 0; font-size: 11px; }
.dashboard-footer button { white-space: nowrap; }
.site-preview { border-radius: 12px; overflow: hidden; background: var(--surface); }
.preview-toolbar { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; font-size: 11px; color: var(--secondary); }
.preview-toolbar span:first-child { text-transform: uppercase; letter-spacing: .06em; }
#preview-stage { min-height: 440px; height: min(650px,calc(100svh - 240px)); position: relative; }
#preview-stage iframe { display: block; border: 0; width: 100%; height: 100%; background: #fff; }
.preview-placeholder { height: 100%; min-height: inherit; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.preview-placeholder h2 { font-size: 24px; }
.preview-placeholder p { max-width: 360px; line-height: 1.7; }
.preview-status { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 12px; }
.preview-status .small { margin: 0; }
#dashboard-update { color: var(--accent); font-size: 12px; white-space: nowrap; }
.preview-note { margin-top: 4px; font-size: 11px; }
.dashboard-signed-out { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 400px; text-align: center; }
#sites-dialog .site-row h3 { font-size: 20px; }
#sites-dialog .site-url { display: block; overflow-wrap: anywhere; color: var(--accent); font-size: 13px; margin-top: 12px; }
#sites-dialog .site-actions { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 20px; }
#sites-dialog .site-actions .text-button { font-size: 13px; }
.plan-dialog { width: min(448px,calc(100% - 32px)); padding: 28px; border-radius: 24px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.confirm-actions > .primary { margin: 0; }
.plan-dialog .dialog-heading { margin-bottom: 24px; }
.plan-switcher { position: relative; height: 64px; border-radius: 32px; background: var(--bg); --switch-ease: cubic-bezier(.34,.96,.6,.99); }
.plan-indicator { position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px); border-radius: 28px; background: var(--accent); transition: transform 500ms var(--switch-ease); }
.plan-switcher.is-premium .plan-indicator { transform: translateX(100%); }
.plan-options { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.plan-options button { border-radius: 32px; color: var(--text); background: transparent; font-size: 14px; transition: color 500ms var(--switch-ease); }
.plan-options button[aria-checked=true] { color: var(--bg); }
#plan-premium { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; transition: opacity 500ms var(--switch-ease), transform 500ms var(--switch-ease); }
#plan-premium small { font-size: 10px; color: var(--secondary); }
.plan-switcher.is-premium #plan-premium { opacity: 0; transform: translateY(10px); pointer-events: none; }
.billing-options { position: absolute; top: 8px; bottom: 8px; left: 50%; right: 8px; display: flex; opacity: 0; visibility: hidden; transform: scale(.6); transition: opacity 500ms var(--switch-ease), transform 500ms var(--switch-ease), visibility 0s 500ms; }
.plan-switcher.is-premium .billing-options { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.billing-options button { position: relative; flex: 1; min-width: 0; border-radius: 24px; padding: 0 3px; font-size: 11px; background: transparent; color: var(--bg); }
.billing-indicator { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 24px; background: #fff; transition: transform 500ms var(--switch-ease); }
.billing-options.is-annual .billing-indicator { transform: translateX(100%); }
.plan-summary { margin-top: 28px; }
.plan-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
#plan-price { font-size: 40px; letter-spacing: -1.1px; margin: 0; }
#plan-price.is-discounted, #plan-discount { color: var(--accent); }
#plan-original-price { font-size: 22px; color: var(--secondary); }
#plan-discount { font-size: 12px; font-weight: 600; letter-spacing: .2px; }
#plan-billing { margin-top: 8px; }
#plan-details { padding: 0; list-style: none; font-size: 14px; line-height: 1.6; display: grid; gap: 14px; min-height: 156px; margin: 28px 0; }
#plan-action { width: 100%; }
#plan-action:disabled { cursor: default; background: #3c3e41; color: var(--secondary); }
#subscription-summary { margin: 0 0 20px; line-height: 1.5; }
#subscription-help { line-height: 1.5; }
@media(max-width:1000px) and (min-width:701px) { #dashboard { grid-template-columns: 176px minmax(0,1fr); gap: 28px; padding-right: 24px; }.dashboard-upload-actions { flex-wrap: wrap; justify-content: center; } }
@media(max-width:700px) {
  #dashboard { grid-template-columns: 48px minmax(0,1fr); gap: 16px; padding: 16px 16px 16px 12px; }
  .dashboard-sidebar { gap: 24px; min-height: calc(100svh - 32px); }
  .dashboard-brand { height: 32px; }.dashboard-brand img { width: 32px; height: 32px; }.dashboard-brand span { display: none; }
  .new-site { width: 48px; height: 48px; }.new-site span { font-size: 24px; }
  .sidebar-caption span,.site-tab-copy,#dashboard-list-status { display: none; }
  .sidebar-caption { padding: 0; justify-content: center; }
  .site-tab { padding: 5px; min-height: 48px; justify-content: center; }.site-tab-icon { width: 38px; height: 38px; }
  .dashboard-sidebar-bottom { padding: 0; bottom: 16px; }.dashboard-sidebar-bottom #plan-button { justify-content: center; font-size: 10px; }#plan-button span:last-child { display: none; }
  #dashboard-account #account-label { display: none; }#dashboard-account #login-button { justify-content: center; }#dashboard-account #login-button:not(.is-signed-in) #account-label { display: block; font-size: 10px; }
  #dashboard-account .account-dropdown { left: 0; max-width: calc(100vw - 24px); }
  .dashboard-workspace { padding-top: 0; min-height: calc(100svh - 32px); }.workspace-heading { min-height: 40px; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
  #dashboard-title { font-size: 20px; }.settings-button { width: 32px; height: 32px; padding: 6px; min-height: 32px; }
  #dashboard-url,#dashboard-subtitle { font-size: 10px; }#dashboard-open { font-size: 11px; margin-left: auto; min-height: 32px; padding: 8px 0; }
  .dashboard-empty { min-height: 520px; padding: 20px 0; }.empty-handwritten { font-size: 21px; }
  #dashboard-box { width: 100%; }#dashboard-box .upload-art { width: 100%; height: 230px; }#dashboard-box .drop-zone { width: 200px; height: 200px; top: 15px; left: 50%; margin-left: -100px; }#dashboard-box .drop-zone svg { width: 240px; height: 240px; top: -20px; left: -20px; }
  .dashboard-empty h2 { font-size: 28px; max-width: 200px; }.dashboard-empty .small { font-size: 11px; }.dashboard-upload-actions { width: 100%; flex-direction: column; gap: 4px; }.dashboard-upload-actions .primary { width: 100%; }
  .dashboard-footer { flex-direction: column; gap: 0; text-align: center; padding-top: 16px; }.dashboard-footer .small { font-size: 10px; }
  .preview-toolbar { padding: 12px; font-size: 9px; }#preview-stage { min-height: 480px; height: calc(100svh - 240px); }.preview-status { align-items: flex-start; flex-direction: column; gap: 0; }.preview-status .small { font-size: 11px; }.preview-placeholder { padding: 20px; }.preview-placeholder h2 { font-size: 20px; }
  .plan-dialog { padding: 24px; }.billing-options button { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .new-site,.plan-switcher * { transition: none; }.new-site:hover { transform: none; } }

.usage-row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:22px 0;font-size:14px}.usage-row progress{grid-column:1/-1;width:100%;height:5px;accent-color:var(--accent,#e2b714)}.usage-row span:last-of-type{font-variant-numeric:tabular-nums;color:var(--text-muted,#aaa)}.domain-item{margin:28px 0}.domain-item h3,.dns-record{overflow-wrap:anywhere}.dns-record{font-size:13px}.dns-record span,.dns-record code{display:block}.dns-record code{user-select:all;margin-top:4px;color:var(--text,#d1d0c5)}#domain-form{display:grid;gap:12px;margin-top:28px}#domain-kind{font:inherit;color:inherit;background:var(--surface,#2c2e31);border:1px solid #646669;border-radius:8px;padding:10px}#domain-form .primary{justify-self:start}#usage-body{min-width:0}

#domains-dialog .domain-item { margin: 24px 0; padding-bottom: 12px; }
#domains-dialog .domain-item h3 { overflow-wrap: anywhere; }
#domains-dialog .dns-record { margin: 16px 0; }
.dns-copy-row { display: flex; align-items: start; gap: 12px; margin-top: 8px; }
.dns-copy-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.dns-copy-row button { flex-shrink: 0; font-size: 12px; }

.billing-policy a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.is-subscription .home,.is-subscription .home-bottom,.is-subscription .features,.is-subscription > .footer { display: none; }
.is-subscription .pattern-scroll { opacity: .18; }
.subscription-page { width: min(920px,calc(100% - 48px)); margin: 32px auto 72px; animation: membership-enter 240ms ease-out; }
.subscription-heading { margin: 40px 0 32px; }
.subscription-heading .eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .15em; margin-bottom: 16px; }
.subscription-heading h1 { font-size: clamp(32px,5vw,48px); letter-spacing: -1.5px; line-height: 1.15; }
.subscription-heading > .muted { margin-top: 16px; line-height: 1.6; }
.membership-status { padding: 28px; border-radius: 16px; background: var(--surface); display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: center; }
.membership-status .plan-badge { font-size: 22px; letter-spacing: -.5px; }
#membership-summary { margin-top: 12px; font-size: 13px; line-height: 1.6; max-width: 400px; }
.membership-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; max-width: 300px; }
.membership-actions .primary { width: 100%; margin: 0; font-size: 14px; }
.membership-actions .text-button { font-size: 12px; }
#membership-status { grid-column: 1/-1; margin: 0; }
#membership-status:empty { display: none; }
.membership-features { margin-top: 48px; }
.membership-features h2,.membership-notes h2 { font-size: 22px; letter-spacing: -.5px; }
.membership-features > p { font-size: 14px; margin: 12px 0 28px; line-height: 1.6; }
.membership-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.membership-table th,.membership-table td { padding: 18px 12px; text-align: left; border-bottom: 1px solid #64666955; line-height: 1.5; overflow-wrap: anywhere; }
.membership-table th:first-child { width: 50%; padding-left: 0; }
.membership-table tbody th { font-weight: 400; color: var(--secondary); }
.membership-table thead th:last-child { color: var(--accent); }
.membership-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.membership-notes p { font-size: 13px; color: var(--secondary); line-height: 1.8; margin-top: 16px; }
.membership-notes a,.membership-footer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.membership-footer { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 16px 28px; font-size: 12px; }
@keyframes membership-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width:700px) {
 .subscription-page { width: calc(100% - 40px); margin-top: 24px; }
 .membership-status { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
 .membership-actions { max-width: none; }
 .membership-table { font-size: 12px; }.membership-table th,.membership-table td { padding: 14px 8px; }.membership-table th:first-child { width: 44%; }
 .membership-notes { grid-template-columns: 1fr; gap: 32px; }
 .subscription-heading { margin-top: 28px; }
}
@media(prefers-reduced-motion:reduce) { .subscription-page { animation: none; } }

@media(max-width:700px) { #dashboard-account #login-button.is-signed-in { flex-direction: column; gap: 5px; } #dashboard-account .account-copy { align-items: center; } }

.is-agents .home,.is-agents .home-bottom,.is-agents .features,.is-agents > .footer { display: none; }
.is-agents .pattern-scroll { opacity: .18; }
.agent-request-form { margin: 28px 0 16px; max-width: 600px; }
.agent-code-row { display: flex; align-items: center; gap: 16px; }
.agent-code-row input { min-width: 0; flex: 1; font-family: monospace; text-transform: uppercase; letter-spacing: .1em; }
.agent-code-row button { flex-shrink: 0; }
#agent-status { margin: 20px 0; }
.agent-consent { background: var(--surface); padding: 28px; border-radius: 16px; margin-top: 24px; }
.agent-consent p { margin-top: 16px; line-height: 1.7; }
.agent-consent ul { padding-left: 20px; line-height: 1.8; margin: 20px 0; font-size: 14px; }
#agent-request-name { overflow-wrap: anywhere; font-size: 20px; }
.agent-code { color: var(--accent); font-family: monospace; font-size: 24px; letter-spacing: .1em; }
.agent-grants-heading,.agent-grant { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.agent-grant { padding: 20px 0; border-bottom: 1px solid #64666955; }
.agent-grant h3 { font-size: 16px; margin: 0; overflow-wrap: anywhere; }.agent-grant p { margin-top: 6px; }
.agent-grant button { flex-shrink: 0; color: var(--accent); font-size: 13px; }
.agent-consent .site-actions { display: flex; gap: 24px; margin-top: 24px; }
@media(max-width:600px) { .agent-code-row { flex-direction: column; align-items: stretch; }.agent-consent { padding: 20px; }.agent-code { font-size: 20px; }.agent-grant { align-items: start; flex-direction: column; gap: 4px; } }

.site-tab-row { display:flex; align-items:center; border-radius:10px; min-width:0; }
.site-tab-row.is-selected { background:var(--surface); }
.site-tab-row .site-tab { flex:1; min-width:0; padding-right:4px; }
.site-power { flex:none; display:grid; place-items:center; width:44px; min-height:44px; padding:0; margin-right:4px; border-radius:10px; background:transparent; }
.site-power-track { display:block; width:32px; height:20px; padding:3px; border-radius:12px; background:#56595c; transition:background 180ms ease; }
.site-power-thumb { display:block; width:14px; height:14px; border-radius:50%; background:var(--text); box-shadow:0 1px 3px #0003; transition:transform 180ms ease,background 180ms ease; }
.site-power[aria-checked=true] .site-power-track { background:var(--accent); }
.site-power[aria-checked=true] .site-power-thumb { transform:translateX(12px); background:var(--bg); }
.site-power:disabled { opacity:.4; cursor:default; }
@media(max-width:700px) { .site-tab-row { flex-direction:column; }.site-tab-row .site-tab { padding:5px; }.site-power { margin:0; min-height:36px; width:48px; } }
@media(prefers-reduced-motion:reduce) { .site-power-track,.site-power-thumb { transition:none; } }

.site-more { background:transparent; flex:none; width:28px; min-height:44px; padding:0; color:var(--secondary); border-radius:8px; font-size:20px; }
.site-more:hover,.site-more[aria-expanded=true] { color:var(--accent); background:#64666922; }
.site-tab-row .site-tab { gap:8px; padding-left:8px; }.site-tab-row .site-power { width:36px; margin-right:0; }
.site-context-menu { position:fixed; z-index:30; width:188px; padding:6px; border-radius:12px; background:var(--surface); border:1px solid #64666966; box-shadow:0 12px 32px #0005; animation:site-menu-enter 140ms ease-out; }
.site-context-menu button { background:transparent; display:block; width:100%; min-height:40px; padding:10px 12px; border-radius:7px; text-align:left; font-size:13px; color:var(--text); }
.site-context-menu button:hover,.site-context-menu button:focus { background:#64666933; color:var(--accent); outline:none; }
.site-context-menu .is-danger { color:#ef9b93; border-top:1px solid #64666944; border-radius:0 0 7px 7px; }
.site-context-menu .is-danger:focus,.site-context-menu .is-danger:hover { color:#ffb3aa; }
.site-icon-preview { display:grid; place-items:center; width:64px; height:64px; margin:0 0 24px; border-radius:16px; background:var(--accent); color:var(--bg); font-size:24px; overflow:hidden; }
.site-icon-preview img { width:48px; height:48px; object-fit:contain; }
.site-icon-presets { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }.site-icon-presets button { width:40px; min-height:40px; border-radius:8px; background:var(--bg); font-size:20px; }.site-icon-presets button:hover { outline:1px solid var(--accent); }
.icon-upload { display:block; position:relative; margin:8px 0; cursor:pointer; color:var(--accent); }.icon-upload input { display:block; margin-top:8px; font-size:12px; width:100%; }
#site-editor-dialog .small { line-height:1.6; }
@keyframes site-menu-enter { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:700px) { .site-tab-row { display:grid; grid-template-columns:24px 24px; }.site-tab-row .site-tab { grid-column:1/-1; padding:5px; }.site-tab-row .site-power { width:24px; min-height:36px; }.site-power-track { transform:scale(.75); }.site-more { width:24px; min-height:36px; } }
@media(prefers-reduced-motion:reduce) { .site-context-menu { animation:none; } }

.site-tab-icon > span { font-size:16px; }
/* Keep the account usage popover above the animated upload area on narrow screens. */
.dashboard-sidebar-bottom{z-index:20}