:root {
  --admin-paper: #fffdf7;
  --admin-card: #ffffff;
  --admin-soft: #eef7ff;
  --admin-ink: #152033;
  --admin-muted: #5a6779;
  --admin-border: rgba(21, 32, 51, .16);
  --admin-accent: #10b879;
  --admin-accent-soft: #dff8ee;
  --admin-yellow: #ffd75a;
  color-scheme: light;
}

html[data-admin-theme="dark"] {
  --admin-paper: #12181e;
  --admin-card: #1a232b;
  --admin-soft: #202b33;
  --admin-ink: #c9d2d9;
  --admin-muted: #909da7;
  --admin-border: rgba(174, 189, 201, .19);
  --admin-accent: #4f8973;
  --admin-accent-soft: #1c332b;
  --admin-yellow: #665f45;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body.owner-page { min-width: 0; margin: 0; background: var(--admin-paper); color: var(--admin-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.admin-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--admin-ink); font-size: .9rem; font-weight: 900; text-decoration: none; }
.admin-brand > span { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid var(--admin-accent); border-radius: 9px; color: var(--admin-accent); }

.admin-login-view { display: grid; min-height: 100svh; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); background: var(--admin-paper); }
.admin-login-panel { width: min(430px, 100%); padding: clamp(1.5rem, 4vw, 2.4rem); border: 2px solid var(--admin-ink); border-radius: 24px; background: var(--admin-card); box-shadow: 9px 9px 0 var(--admin-accent); }
.admin-login-brand { margin-bottom: 2.3rem; }
.login-heading > span, .eyebrow { margin: 0 0 .55rem; color: var(--admin-accent); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.login-heading h1 { margin: 0 0 1.4rem; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; letter-spacing: -.05em; }
.login-heading p { margin: .7rem 0 1.4rem; color: var(--admin-muted); font-size: .84rem; }
.admin-login-panel > label, .customer-editor label { display: grid; gap: .4rem; margin-top: .9rem; color: var(--admin-ink); font-size: .72rem; font-weight: 800; }
.admin-login-panel input, .customer-editor input, .customer-editor select, .customer-editor textarea, .directory-tools input, .directory-tools select { width: 100%; min-height: 46px; border: 1px solid var(--admin-border); border-radius: 10px; background: var(--admin-paper); color: var(--admin-ink); }
.admin-login-panel > button[type="submit"] { width: 100%; margin-top: 1.2rem; }
.admin-login-panel button[type="submit"], .customer-editor button[type="submit"], .customer-card > button { min-height: 44px; border: 2px solid var(--admin-ink); border-radius: 999px; background: var(--admin-ink); color: var(--admin-card); font-weight: 850; box-shadow: 4px 4px 0 var(--admin-accent); }
.form-error { min-height: 1rem; color: #d14750; font-size: .73rem; }

.password-input-wrap { position: relative; width: 100%; }
.password-input-wrap input { padding-right: 2.8rem !important; }
.password-visibility-toggle { position: absolute; top: 50%; right: .35rem; display: grid; width: 2.1rem !important; min-width: 2.1rem; height: 2.1rem; place-items: center; margin: 0 !important; padding: 0; transform: translateY(-50%); border: 0; border-radius: 50%; background: transparent; color: var(--admin-muted); box-shadow: none !important; }
.password-visibility-toggle svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.admin-dashboard { min-height: 100svh; background: var(--admin-paper); }
.admin-header { position: sticky; z-index: 30; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 max(24px, calc((100vw - 1220px) / 2)); border-bottom: 1px solid var(--admin-border); background: color-mix(in srgb, var(--admin-paper) 94%, transparent); backdrop-filter: blur(16px); }
.admin-header-actions { display: flex; align-items: center; gap: .65rem; }
.theme-toggle { display: grid; width: 42px; min-width: 42px; height: 42px; place-items: center; padding: 0; border: 2px solid var(--admin-ink); border-radius: 50%; background: var(--admin-card); color: var(--admin-ink); }
.admin-identity { display: grid; padding: .3rem .85rem; border: 1px solid var(--admin-border); border-radius: 999px; background: var(--admin-card); }
.admin-identity span { color: var(--admin-muted); font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.admin-identity strong { font-size: .72rem; }
.admin-header button.secondary, .admin-intro button.secondary, .close-button { border: 1px solid var(--admin-border); background: var(--admin-card); color: var(--admin-ink); }

.admin-content { width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: clamp(2.2rem, 5vw, 4.5rem) 0 5rem; }
.admin-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.admin-intro h1 { margin: .25rem 0 0; font-size: clamp(2.8rem, 6vw, 5rem); line-height: .94; letter-spacing: -.06em; }
.admin-intro > div > p:last-child { max-width: 680px; margin: 1rem 0 0; color: var(--admin-muted); font-size: .94rem; line-height: 1.55; }

.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 2.2rem 0; }
.admin-metrics article { display: grid; gap: .35rem; padding: 1.15rem; border: 1px solid var(--admin-border); border-radius: 16px; background: var(--admin-card); }
.admin-metrics strong { font-size: 2rem; letter-spacing: -.04em; }
.admin-metrics span { color: var(--admin-muted); font-size: .7rem; font-weight: 750; }

.customer-directory { padding: clamp(1rem, 2.5vw, 1.6rem); border: 2px solid var(--admin-ink); border-radius: 24px; background: var(--admin-soft); box-shadow: 8px 8px 0 var(--admin-ink); }
.directory-heading { display: flex; align-items: center; justify-content: space-between; }
.directory-heading h2 { margin: 0; font-size: 1.45rem; }
.directory-heading p { margin: .2rem 0 0; color: var(--admin-muted); font-size: .72rem; }
.directory-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .3fr); gap: .75rem; margin: 1rem 0; }
.directory-tools label { display: grid; gap: .35rem; color: var(--admin-muted); font-size: .66rem; font-weight: 800; }
.directory-tools input, .directory-tools select { padding-inline: .8rem; background: var(--admin-card); }
.customer-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.customer-card { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1.15rem; border: 1px solid var(--admin-border); border-radius: 18px; background: var(--admin-card); box-shadow: 0 .5rem 1.2rem rgba(23, 35, 50, .06); }
.customer-card-profile { display: flex; min-width: 0; align-items: center; gap: .75rem; }
.customer-card-profile > div { min-width: 0; }
.customer-card-profile h3 { margin: 0; overflow: hidden; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.customer-card-profile span, .customer-card-profile a { display: block; overflow: hidden; margin-top: .15rem; color: var(--admin-muted); font-size: .68rem; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.admin-avatar { display: grid; width: 46px; height: 46px; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: var(--admin-accent); color: #09261c; font-size: .72rem; font-weight: 950; }
.admin-avatar.large { width: 76px; height: 76px; font-size: 1rem; }
.admin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.customer-card-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.status-chip { align-self: start; padding: .35rem .55rem; border: 1px solid var(--admin-border); border-radius: 999px; color: var(--admin-muted); font-size: .6rem; font-weight: 800; text-transform: capitalize; }
.status-chip.active { border-color: color-mix(in srgb, var(--admin-accent) 55%, transparent); color: var(--admin-accent); }
.customer-card-facts { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: .75rem; border-radius: 12px; background: var(--admin-soft); }
.customer-card-facts div { min-width: 0; padding: 0 .65rem; border-left: 1px solid var(--admin-border); }
.customer-card-facts div:first-child { border-left: 0; }
.customer-card-facts dt { color: var(--admin-muted); font-size: .6rem; }
.customer-card-facts dd { margin: .2rem 0 0; overflow: hidden; font-size: .7rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.customer-card > button { grid-column: 1 / -1; box-shadow: none; }
.admin-empty, .inline-empty { padding: 2rem 1rem; border: 1px dashed var(--admin-border); border-radius: 14px; color: var(--admin-muted); font-size: .76rem; text-align: center; }

.customer-dialog { width: min(920px, calc(100% - 2rem)); max-height: min(92svh, 960px); padding: 0; overflow: hidden; border: 2px solid var(--admin-ink); border-radius: 22px; background: var(--admin-card); color: var(--admin-ink); box-shadow: 9px 9px 0 var(--admin-accent); }
.customer-dialog::backdrop { background: rgba(7, 11, 16, .72); backdrop-filter: blur(5px); }
.customer-dialog-shell { max-height: min(92svh, 960px); overflow-y: auto; }
.customer-dialog-header { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--admin-border); background: color-mix(in srgb, var(--admin-card) 96%, transparent); backdrop-filter: blur(12px); }
.dialog-customer-identity { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.dialog-customer-identity > div { min-width: 0; }
.dialog-customer-identity p, .dialog-customer-identity h2, .dialog-customer-identity span { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-customer-identity p, .dialog-customer-identity span { color: var(--admin-muted); font-size: .66rem; }
.dialog-customer-identity h2 { margin: .12rem 0; font-size: 1.25rem; }
.close-button { width: 42px; min-width: 42px; height: 42px; padding: 0; border-radius: 10px; font-size: 1.35rem; }
.customer-editor { display: grid; gap: .9rem; padding: 1.25rem; }
.editor-section { padding: 1rem; border: 1px solid var(--admin-border); border-radius: 16px; background: var(--admin-soft); }
.editor-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.editor-section-heading h3 { margin: 0; font-size: 1rem; }
.editor-section-heading p { margin: .3rem 0 0; color: var(--admin-muted); font-size: .68rem; }
.admin-avatar-editor { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; }
.admin-avatar-editor input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.profile-upload { display: inline-flex !important; min-height: 38px; align-items: center; justify-content: center; margin: 0 !important; padding: .5rem .75rem; border-radius: 9px; background: var(--admin-ink); color: var(--admin-card) !important; cursor: pointer; }
.text-button { display: block; margin-top: .3rem; padding: .2rem 0; border: 0; background: transparent; color: var(--admin-muted); font-size: .66rem; }
.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.editor-grid label { margin: 0; }
.editor-grid input, .editor-grid select, .notes-field textarea { padding-inline: .75rem; }
.full-field { grid-column: 1 / -1; }
.subscription-summary { padding: .35rem .6rem; border: 1px solid var(--admin-border); border-radius: 999px; color: #c74750; font-size: .65rem; font-weight: 850; }
.subscription-summary.active { color: var(--admin-accent); }
.account-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.account-overview div { padding: .7rem; border-radius: 10px; background: var(--admin-card); }
.account-overview dt { color: var(--admin-muted); font-size: .6rem; }
.account-overview dd { margin: .25rem 0 0; overflow: hidden; font-size: .72rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.notes-field textarea { min-height: 84px; resize: vertical; }
.connected-accounts, .payment-history { display: grid; gap: .55rem; margin-top: .9rem; }
.connected-account-row, .payment-row { display: grid; grid-template-columns: 1fr minmax(0, 1.4fr) auto; gap: .8rem; align-items: center; padding: .75rem; border: 1px solid var(--admin-border); border-radius: 11px; background: var(--admin-card); }
.connected-account-row strong, .connected-account-row b { font-size: .7rem; }
.connected-account-row span { color: var(--admin-muted); font-size: .67rem; }
.connected-account-row b { color: var(--admin-accent); text-transform: capitalize; }
.payment-row { grid-template-columns: minmax(0, 1fr) auto; }
.payment-row > div { display: grid; gap: .2rem; }
.payment-row > div:last-child { justify-items: end; }
.payment-row strong, .payment-row b { font-size: .74rem; }
.payment-row span { color: var(--admin-muted); font-size: .62rem; text-transform: capitalize; }
.payment-actions { display: flex !important; grid-auto-flow: column; gap: .35rem; margin-top: .35rem; }
.payment-actions button { min-height: 32px; padding: .35rem .55rem; border-radius: 7px; font-size: .62rem; }
.editor-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.editor-actions > button { min-height: 46px; padding-inline: 1rem; }
.editor-actions > button[type="submit"] { flex: 1; }
.danger { border: 1px solid #e35d66; background: #e35d66; color: #fff; }

.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; max-width: min(26rem, calc(100% - 2rem)); padding: .8rem 1rem; border: 1px solid var(--admin-border); border-radius: 10px; background: var(--admin-card); color: var(--admin-ink); box-shadow: 0 .8rem 2.5rem rgba(0,0,0,.25); font-size: .76rem; }
.toast.error { border-color: #d14750; color: #d14750; }

html[data-admin-theme="dark"] .customer-directory { border-color: #62717c; box-shadow: 9px 9px 0 #080c10; }
html[data-admin-theme="dark"] .admin-login-panel, html[data-admin-theme="dark"] .customer-dialog { box-shadow: 8px 8px 0 #355e50; }
html[data-admin-theme="dark"] .customer-card > button, html[data-admin-theme="dark"] .admin-login-panel button[type="submit"], html[data-admin-theme="dark"] .customer-editor button[type="submit"] { border-color: #53636f; background: #26343d; color: #d0d8de; box-shadow: 3px 3px 0 #355e50; }

@media (max-width: 900px) {
  .customer-list { grid-template-columns: 1fr; }
  .account-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .admin-header { min-height: 64px; padding: 0 12px; }
  .admin-header .admin-brand { font-size: 0; }
  .admin-header .admin-brand > span { font-size: .9rem; }
  .admin-identity { display: none; }
  .admin-header-actions { gap: .4rem; }
  .admin-content { width: calc(100% - 24px); padding-top: 2rem; }
  .admin-intro { align-items: stretch; flex-direction: column; }
  .admin-intro h1 { font-size: clamp(2.8rem, 15vw, 4rem); }
  .admin-intro > button { width: 100%; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-directory { padding: .75rem; border-radius: 18px; box-shadow: 5px 5px 0 var(--admin-ink); }
  .directory-tools, .editor-grid { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .customer-card { grid-template-columns: 1fr; }
  .customer-card-status { justify-content: flex-start; }
  .customer-card-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-card-facts div:nth-child(3) { border-left: 0; }
  .customer-card-facts div:nth-child(n+3) { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--admin-border); }
  .customer-card > button { grid-column: auto; }
  .customer-dialog { width: calc(100% - 16px); }
  .customer-dialog-header { padding: .9rem; }
  .customer-editor { padding: .75rem; }
  .admin-avatar-editor { align-items: flex-start; }
  .account-overview { grid-template-columns: 1fr 1fr; }
  .connected-account-row { grid-template-columns: 1fr; gap: .25rem; }
  .payment-row { align-items: start; grid-template-columns: 1fr; }
  .payment-row > div:last-child { justify-items: start; }
  .editor-actions { align-items: stretch; flex-direction: column; }
  .editor-actions > button { width: 100%; }
}