* { box-sizing: border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:320px; background:var(--color-canvas); color:var(--color-text); font:14px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--color-brand); text-underline-offset:3px; }
button,input { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; min-height:44px; border:1px solid transparent; border-radius:var(--radius-sm); background:var(--color-brand); color:#fff; text-decoration:none; font-size:13px; font-weight:650; cursor:pointer; }
button:hover,.button:hover { background:var(--color-brand-hover); }
button:disabled { opacity:.6; cursor:wait; }
button.secondary { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text-soft); }
button.secondary:hover { background:var(--color-surface-subtle); }
:focus-visible { outline:3px solid var(--color-brand); outline-offset:3px; }
label { display:block; margin:0 0 6px; color:var(--color-text-soft); font-size:12px; font-weight:600; }
input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--color-border-strong); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text); }
input:focus { border-color:var(--color-brand); outline:0; box-shadow:0 0 0 3px #1668dc1f; }
input::placeholder { color:var(--color-faint); }
h1,h2,p { margin-top:0; }
h1 { font-size:30px; line-height:1.2; letter-spacing:-.035em; margin-bottom:12px; font-weight:720; }
h2 { font-size:18px; letter-spacing:-.02em; }
.muted,.hint { color:var(--color-muted); }
.hint { font-size:12px; margin:7px 0 0; }
.auth { min-height:calc(100dvh - 36px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-wrap { width:100%; max-width:440px; }
.logo { display:block; width:190px; height:auto; }
.auth-logo { display:block; width:fit-content; margin:0 auto 28px; }
.panel { border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:30px; background:var(--color-surface); box-shadow:var(--shadow-sm); }
.eyebrow { color:var(--color-brand); font-size:10px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.field { margin-top:20px; }
.password-field { display:flex; gap:8px; }
.password-field input { min-width:0; }
.password-toggle { padding:8px 10px; flex-shrink:0; }
.form-submit { width:100%; margin-top:24px; }
.auth-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; font-size:12px; }
.message { padding:12px 14px; margin:18px 0 0; border-radius:var(--radius-sm); background:var(--color-brand-soft); color:var(--color-text); overflow-wrap:anywhere; }
.message.error { background:var(--color-danger-soft); color:var(--color-danger); }
.shell { display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); min-height:calc(100dvh - 36px); }
.sidebar { padding:26px 20px; border-right:1px solid var(--color-border); display:flex; flex-direction:column; gap:24px; }
.sidebar .logo { width:166px; }
.nav-item { display:block; border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:10px 12px; color:var(--color-brand); background:var(--color-brand-soft); font-weight:600; text-decoration:none; }
.sidebar button { margin-top:auto; }
.content { padding:48px; max-width:1040px; width:100%; }
.content .panel { max-width:660px; margin-top:24px; }
.account-row { padding:18px 0; border-bottom:1px solid var(--color-border); }
.account-row:last-child { border-bottom:0; padding-bottom:0; }
.account-row dt { font-size:12px; color:var(--color-muted); margin-bottom:4px; }
.account-row dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
.url-preview { display:block; margin-top:12px; padding:12px; background:var(--color-surface-subtle); border-radius:var(--radius-sm); font-size:13px; overflow-wrap:anywhere; }
.confirm-label { display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:12px; }
.confirm-label input { width:18px; min-height:18px; margin:2px 0 0; flex-shrink:0; }
.local-banner { min-height:36px; padding:8px 20px; font-size:11px; text-align:center; color:var(--color-muted); border-bottom:1px solid var(--color-border); }
.local-banner a { margin-left:12px; }
.loading { padding:48px; text-align:center; color:var(--color-muted); }
.mailbox { max-width:740px; padding:32px 20px; margin:auto; }
.mailbox h1 { margin-top:24px; }
.mailbox .panel { margin:16px 0; }
@media(max-width:700px) {
  .shell { display:block; }
  .sidebar { border-right:0; border-bottom:1px solid var(--color-border); padding:18px 20px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px; }
  .sidebar .logo { width:140px; }
  .sidebar nav { margin-left:auto; }
  .sidebar button { margin:0; }
  .content { padding:28px 20px; }
  .panel { padding:24px 20px; }
  .auth { padding:28px 16px; }
  h1 { font-size:27px; }
}

.sidebar nav{display:grid;gap:6px}.nav-item{border-color:transparent;background:transparent;color:var(--color-text-soft)}.nav-item.selected,.nav-item[aria-current=page]{color:var(--color-brand);background:var(--color-brand-soft);border-color:var(--color-border)}.nav-item:hover{background:var(--color-surface-selected)}
.workspace{max-width:1320px}.workspace .panel{max-width:none}.workspace-heading{display:flex;justify-content:space-between;align-items:center}.toolbar,.actions,.mode-tabs,.inline-field{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.toolbar{justify-content:space-between;margin-bottom:20px}.search-field{max-width:440px;width:100%}.search-field input{margin-top:6px}.mode-tabs{margin:16px 0}.mode-tabs .active{background:var(--color-brand-soft);border-color:var(--color-brand);color:var(--color-brand)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.inline-field{align-items:flex-end}.inline-field .field{flex:1;min-width:180px}.inline-field button{margin-bottom:1px}.editor-actions{display:flex;gap:12px;align-items:center;margin:24px 0 48px}.suggestion{margin-top:16px;padding:16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-brand-soft)}.media-preview{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}.media-preview img,.media-preview video{width:120px;height:120px;object-fit:cover;border-radius:var(--radius-md)}.media-preview audio{max-width:100%}.remove-media{margin-top:8px}.button.secondary{background:#fff;border-color:var(--color-border);color:var(--color-text-soft)}.button.secondary:hover{background:var(--color-surface-subtle)}.link-row{padding:22px}.link-info{display:flex;gap:16px;align-items:center;margin-bottom:16px}.link-info img{width:64px;height:64px;object-fit:cover;border-radius:8px}.link-info>div{min-width:0}.link-info h2{margin:3px 0;font-size:16px;overflow-wrap:anywhere}.link-url{font-size:12px;margin:4px 0;overflow-wrap:anywhere}.type-label{font-size:11px;color:var(--color-brand);font-weight:650}.text-danger{color:var(--color-danger)!important}.danger{background:var(--color-danger)}dialog{max-width:440px;width:calc(100% - 32px);padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text)}dialog::backdrop{background:#0a1a3366}.filters{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}.filters label{margin:0;min-width:140px}.filters .hint{width:100%}select{display:block;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:white;color:var(--color-text);font:inherit;margin-top:6px}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}.metric{padding:20px 16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.metric span{display:block;font-size:12px;color:var(--color-muted)}.metric strong{font-size:26px;display:block;margin-top:8px}.breakdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--color-border);overflow-wrap:anywhere}th{color:var(--color-muted);font-weight:600}.home-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.home-card{display:flex;flex-direction:column;min-height:178px;padding:22px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:white;text-decoration:none;color:var(--color-text)}.home-card strong{font-size:16px;margin:12px 0 5px}.home-card .muted{font-size:12px}.home-card:hover{border-color:var(--color-brand)}
@media(max-width:900px){.content{padding:30px 24px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.breakdown-grid{grid-template-columns:1fr}.home-cards{grid-template-columns:1fr}}
@media(max-width:700px){.sidebar nav{display:flex;overflow-x:auto;width:100%;order:3;margin:0}.sidebar .nav-item{white-space:nowrap;font-size:12px;padding:8px}.sidebar button{margin-left:auto}.content{padding:24px 16px}.form-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric strong{font-size:23px}.panel{padding:20px 16px}.toolbar{align-items:flex-start}.editor-actions{flex-wrap:wrap}.mode-tabs{gap:6px}.mode-tabs button{font-size:12px;padding:9px 12px}.filters label{min-width:0;flex:1 1 130px}.link-row .actions{gap:7px}.actions .button,.actions button{padding:8px 10px}}

/* Compact account and editor forms; shared brand tokens stay unchanged. */
.auth-wrap { max-width:380px; }
.auth-logo { margin-bottom:18px; }
.auth-logo .logo { width:156px; }
.auth .panel { padding:24px; border-radius:10px; box-shadow:none; }
.auth h1 { font-size:23px; margin-bottom:8px; }
.auth .muted { font-size:13px; margin-bottom:16px; }
.auth .field, .content form .field { margin-top:14px; }
.auth label, .content form label { margin-bottom:4px; }
.auth input, .content form input:not([type=checkbox]):not([type=hidden]) { min-height:36px; padding:7px 10px; border-radius:5px; }
.auth button, .content form button, .content form .button, .mode-tabs button { min-height:36px; padding:7px 12px; border-radius:5px; }
.auth .form-submit, .content form .form-submit { margin-top:18px; }
.auth-links { margin-top:16px; gap:8px 16px; }
.auth .hint { margin-top:5px; }
.content .panel:has(form), #editor .panel { padding:20px; border-radius:8px; box-shadow:none; }
#editor .panel { margin-top:16px; }
.content .panel:has(form) h2, #editor h2 { font-size:16px; margin-bottom:12px; }
#editor .url-preview, .content form .url-preview { margin-top:8px; padding:8px 10px; font-size:12px; }
#editor .editor-actions { margin-top:18px; }
@media(max-width:700px) {
  .auth .panel { padding:20px; }
  .auth input, .content form input:not([type=checkbox]):not([type=hidden]) { font-size:16px; min-height:40px; }
  .auth button, .content form button, .content form .button, .mode-tabs button { min-height:40px; }
  .content .panel:has(form), #editor .panel { padding:16px; }
}

/* Use desktop width for parallel editor sections, not stretched fields. */
.content.workspace:has(#editor) { max-width:1180px; padding:28px 24px; }
.workspace:has(#editor) h1 { font-size:24px; margin-bottom:8px; }
.workspace:has(#editor) .eyebrow { margin-bottom:8px; }
.workspace:has(#editor) .mode-tabs { margin:14px 0; }
#editor { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start; }
#editor > .panel { min-width:0; margin:0; padding:16px; }
#editor > .panel:nth-of-type(1) { grid-column:1; grid-row:1 / span 2; }
#editor > .panel:nth-of-type(2) { grid-column:2; grid-row:1; }
#editor > .panel:nth-of-type(3) { grid-column:2; grid-row:2; }
#editor > .editor-actions { grid-column:1 / -1; margin:0 0 20px; }
#editor .field { margin-top:10px; }
#editor h2 { margin-bottom:8px; font-size:15px; }
#editor .form-grid { gap:0 12px; }
#editor .inline-field .field { min-width:110px; }
#editor .media-preview:empty { display:none; }
#editor .media-preview img, #editor .media-preview video { width:80px; height:80px; }
#editor input[type=file] { min-width:0; font-size:12px; padding:6px; }
@media(max-width:1000px) {
 #editor { grid-template-columns:minmax(0,1fr); }
 #editor > .panel:nth-of-type(n), #editor > .editor-actions { grid-column:1; grid-row:auto; }
}

/* Compact analytics while preserving the established section order. */
.content.workspace:has(#analytics-link) { max-width:1180px; padding:28px 24px; }
.workspace:has(#analytics-link) h1 { font-size:24px; margin-bottom:8px; }
.workspace:has(#analytics-link) .eyebrow { margin-bottom:8px; }
.workspace:has(#analytics-link) .panel { padding:16px; margin-top:14px; border-radius:8px; box-shadow:none; }
.workspace:has(#analytics-link) .filters { gap:10px 14px; }
.workspace:has(#analytics-link) .filters select,
.workspace:has(#analytics-link) .filters input,
.workspace:has(#analytics-link) .filters button { min-height:34px; padding:6px 10px; border-radius:5px; }
.workspace:has(#analytics-link) .filters .hint { margin:0; font-size:11px; }
.workspace:has(#analytics-link) .metrics { gap:10px; margin-top:14px; }
.workspace:has(#analytics-link) .metric { padding:12px 14px; border-radius:6px; }
.workspace:has(#analytics-link) .metric strong { font-size:22px; margin-top:3px; line-height:1.3; }
.workspace:has(#analytics-link) h2 { font-size:15px; margin-bottom:10px; }
.workspace:has(#analytics-link) th,
.workspace:has(#analytics-link) td { padding:7px 6px; }
.workspace:has(#analytics-link) .breakdown-grid { gap:14px; }
@media(max-width:700px) {
 .content.workspace:has(#analytics-link) { padding:20px 16px; }
 .workspace:has(#analytics-link) .filters select,
 .workspace:has(#analytics-link) .filters input,
 .workspace:has(#analytics-link) .filters button { min-height:40px; }
}

/* Account details use the same compact scale as forms and analytics. */
.content:has(#account-email) { max-width:900px; padding:28px 24px; }
.content:has(#account-email) h1 { font-size:24px; margin-bottom:8px; }
.content:has(#account-email) .eyebrow { margin-bottom:8px; }
.content:has(#account-email) > .muted { font-size:13px; margin-bottom:14px; }
.content:has(#account-email) .panel { max-width:620px; padding:16px 18px; margin-top:14px; border-radius:8px; box-shadow:none; }
.content:has(#account-email) h2 { font-size:15px; margin-bottom:10px; }
.content:has(#account-email) dl { margin:0; }
.content:has(#account-email) .account-row { padding:10px 0; }
.content:has(#account-email) .account-row:first-child { padding-top:0; }
.content:has(#account-email) .account-row:last-child { padding-bottom:0; }
.content:has(#account-email) .account-row dt { margin-bottom:2px; }
.content:has(#account-email) .panel p { font-size:13px; margin-bottom:12px; }
.content:has(#account-email) .button { min-height:34px; padding:6px 12px; border-radius:5px; }
@media(max-width:700px) {
 .content:has(#account-email) { padding:20px 16px; }
 .content:has(#account-email) .panel { padding:16px; }
 .content:has(#account-email) .button { min-height:40px; }
}
.dropdown-field{position:relative;min-width:140px;max-width:340px;flex:0 1 240px}
.dropdown-label{display:block;font-size:12px;font-weight:600;color:var(--color-text-soft);margin-bottom:6px}
.filters .dropdown-trigger{width:100%;justify-content:space-between;gap:14px;background:var(--color-surface);border:1px solid var(--color-border-strong);color:var(--color-text);font-weight:400;text-align:left}
.dropdown-trigger::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);flex-shrink:0;margin:0 3px 3px 0}
.dropdown-trigger[aria-expanded=true]{border-color:var(--color-brand)}
.dropdown-list{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:20;padding:4px;border:1px solid var(--color-border-strong);border-radius:6px;background:var(--color-surface);box-shadow:0 5px 16px #0a1a331a;max-height:250px;overflow:auto}
.filters .dropdown-option{display:flex;width:100%;justify-content:flex-start;text-align:left;min-height:32px;padding:7px 9px;border:0;background:transparent;color:var(--color-text);font-weight:400;white-space:normal;overflow-wrap:anywhere}
.filters .dropdown-option:hover,.filters .dropdown-option:focus{background:var(--color-surface-subtle);outline:none}
.filters .dropdown-option[aria-selected=true]{background:var(--color-brand-soft);color:var(--color-brand);font-weight:600}
@media(max-width:700px){.dropdown-field{min-width:0;flex:1 1 130px}.filters .dropdown-option{min-height:40px}}
#breakdowns table{table-layout:fixed}
#breakdowns th:not(:first-child),#breakdowns td:not(:first-child){white-space:nowrap;overflow-wrap:normal}
#breakdowns th:first-child,#breakdowns td:first-child{width:45%;overflow-wrap:anywhere}
@media(max-width:700px){#breakdowns table{min-width:340px}}
.dropdown-list .dropdown-search{position:sticky;top:0;z-index:1;display:block;width:100%;min-height:34px;padding:7px 9px;margin:0 0 5px;background:var(--color-surface);font-size:12px}
.dropdown-empty{padding:8px;font-size:12px;color:var(--color-muted);margin:0}
#breakdowns .breakdown-grid > .panel{min-width:0}
#breakdowns table{min-width:0;width:100%;table-layout:fixed}
#breakdowns th:first-child,#breakdowns td:first-child{width:34%}
#breakdowns th:not(:first-child){white-space:normal;overflow-wrap:normal;word-break:normal}
#breakdowns td:not(:first-child){white-space:normal;overflow-wrap:anywhere}
#breakdowns .breakdown-grid > .panel:first-child th:first-child,
#breakdowns .breakdown-grid > .panel:first-child td:first-child{width:20%}
/* Final shared analytics alignment and dropdown interaction states. */
.workspace:has(#analytics-link) #custom-dates{align-items:flex-end}
.workspace:has(#analytics-link) #custom-dates > label{display:flex;flex-direction:column;gap:6px;margin:0;line-height:1.5}
.workspace:has(#analytics-link) #custom-dates input{margin:0;height:34px;min-height:34px;box-sizing:border-box}
.workspace:has(#analytics-link) .dropdown-trigger,.workspace:has(#analytics-link) #refresh{height:34px;box-sizing:border-box}
.filters button.dropdown-trigger:hover,.filters button.dropdown-trigger:active,.filters button.dropdown-trigger:focus,.filters button.dropdown-trigger[aria-expanded=true]{background:var(--color-surface);color:var(--color-text)}
.filters button.dropdown-trigger[aria-expanded=true]{border-color:var(--color-brand)}
@media(max-width:700px){.workspace:has(#analytics-link) #custom-dates input,.workspace:has(#analytics-link) .dropdown-trigger,.workspace:has(#analytics-link) #refresh{height:40px;min-height:40px}}