:root {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #203b50;
    background: #f4f7f9;
    color-scheme: light;
    --portal-ink: #203b50;
    --portal-muted: #647987;
    --portal-border: #dce7ec;
    --portal-primary: #007fce;
    --portal-primary-dark: #0069ad;
    --portal-teal: #009fb9;
    --portal-surface: #fff;
    --portal-shadow: 0 12px 36px rgba(32, 59, 80, .08);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background-color: #f4f7f9; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 290px; background: linear-gradient(135deg, #edf8fb 0%, #f7fbfc 50%, #eaf4f8 100%); z-index: -1; }
header, main { width: min(1180px, 100%); margin: 0 auto; padding: 24px 32px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.brand-title { display: grid; gap: 3px; }
.brand-title span { color: var(--portal-muted); font-size: 12px; font-weight: 600; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 23px; letter-spacing: -.025em; }
h2 { margin-bottom: 7px; font-size: clamp(22px, 3vw, 29px); letter-spacing: -.035em; color: var(--portal-ink); }
h3 { margin-bottom: 6px; font-size: 16px; color: var(--portal-ink); }
section { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 18px; padding: 30px; margin: 12px 0 24px; box-shadow: var(--portal-shadow); }
article { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: 14px; padding: 20px; margin: 12px 0; }
.eyebrow { display: block; margin-bottom: 8px; color: #008ba5; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.section-lead { max-width: 720px; margin-bottom: 22px; color: var(--portal-muted); font-size: 14px; line-height: 1.6; }
.muted, .field-help { color: var(--portal-muted); font-size: 12px; line-height: 1.5; }
.field-help { margin: -5px 0 4px; }
.content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
form { display: grid; gap: 16px; margin: 18px 0; }
label { display: grid; gap: 7px; color: #405968; font-size: 12px; font-weight: 700; }
input, textarea, select, button { max-width: 100%; font: inherit; }
input, textarea, select { width: 100%; border: 1px solid #cbdbe2; border-radius: 9px; padding: 11px 12px; color: var(--portal-ink); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { border-color: var(--portal-primary); box-shadow: 0 0 0 3px rgba(0, 127, 206, .12); }
input[type="file"] { padding: 9px; background: #f8fafb; }
textarea { min-height: 110px; resize: vertical; }
button, .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 41px; border: 0; border-radius: 9px; padding: 10px 16px; color: #fff; background: var(--portal-primary); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
button:hover, .button-link:hover { background: var(--portal-primary-dark); box-shadow: 0 7px 18px rgba(0, 127, 206, .18); transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: wait; transform: none; }
.secondary { border: 1px solid #cfe1e8; color: #285b70; background: #edf6f8; }
.secondary:hover { color: #17495e; background: #e0f0f4; box-shadow: none; }
.danger { background: #b93636; }
.danger:hover { background: #982b2b; }
.ghost-danger { min-height: 34px; padding: 7px 11px; color: #aa3030; background: #fff2f2; }
a { color: var(--portal-primary); font-weight: 650; }
nav, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#message { position: sticky; top: 12px; z-index: 20; margin: 0; border: 1px solid #fecaca; border-radius: 10px; padding: 12px 14px; color: #9f2828; background: #fff5f5; box-shadow: 0 8px 22px rgba(159, 40, 40, .1); white-space: pre-wrap; }
#message:empty { display: none; }
[hidden] { display: none !important; }
details { margin: 14px 0; border: 1px solid var(--portal-border); border-radius: 12px; background: #fbfdfe; }
summary { padding: 15px 17px; cursor: pointer; color: var(--portal-ink); font-size: 13px; font-weight: 750; }
details[open] > summary { border-bottom: 1px solid var(--portal-border); }
details > form, details > div, details > article, details > button { margin-left: 17px; margin-right: 17px; }

/* Public portal */
.portal-public header { border-bottom: 1px solid rgba(220, 231, 236, .8); }
#portal-logo { width: auto; max-width: 190px; max-height: 58px; object-fit: contain; }
.portal-public header:has(#portal-logo:not([hidden])) .brand-title { padding-left: 22px; border-left: 1px solid var(--portal-border); }
.portal-login { background-size: cover; background-position: center; background-attachment: fixed; }
.portal-login::after { content: ""; position: fixed; inset: 0; z-index: -2; background: rgba(244, 247, 249, .82); backdrop-filter: blur(3px); }
.portal-login main { width: min(560px, 100%); padding-top: 42px; }
.login-card { padding: 38px; border-radius: 20px; box-shadow: 0 20px 55px rgba(32, 59, 80, .14); }
.login-card form { margin-bottom: 0; }
.login-card form > button { width: 100%; margin-top: 4px; }
.portal-space { background: transparent; border: 0; box-shadow: none; padding: 0; }
.portal-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 30px; border: 1px solid var(--portal-border); border-radius: 18px; background: #fff; box-shadow: var(--portal-shadow); }
.action-panel { margin: 18px 0; background: #fff; }
.filter-bar { margin: 22px 0 12px; padding-bottom: 14px; border-bottom: 1px solid var(--portal-border); }
.filter-bar button { min-height: 34px; padding: 7px 12px; }
.item-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.item-card { margin: 0; box-shadow: 0 5px 18px rgba(32, 59, 80, .045); }
.badge, .status-pill { display: inline-flex; border-radius: 99px; padding: 5px 9px; color: #17647c; background: #e6f5f7; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .055em; }
.reply { margin: 10px 0; border-left: 3px solid #74c6d5; padding: 10px 12px; background: #f4fafb; }

/* Embedded admin pages */
.embedded { background: transparent; }
.embedded::before { display: none; }
.embedded > header, .embedded > main > nav { display: none; }
.embedded main { width: 100%; max-width: none; padding: 0; }
.embedded section { margin: 0; }
.admin-page { border-radius: 12px; padding: 25px; box-shadow: none; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-heading .section-lead { margin-bottom: 0; }
.form-card, .create-user-card, .materials-panel { border: 1px solid var(--portal-border); border-radius: 13px; padding: 20px; background: #fbfdfe; }
details.create-user-card, details.materials-panel { padding: 0; }
.form-card > .muted { margin-bottom: 16px; }
.settings-form { gap: 16px; }
.settings-form > button[type="submit"] { justify-self: end; min-width: 220px; }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.media-preview { display: grid; place-items: center; height: 150px; margin: 16px 0; overflow: hidden; border: 1px dashed #bdd1da; border-radius: 11px; color: #82949e; background: #f1f6f8; font-size: 12px; font-weight: 700; }
.media-preview img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.background-preview img { object-fit: cover; padding: 0; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 15px; }
.checkbox-row { display: flex; align-items: center; gap: 10px; min-height: 44px; border: 1px solid var(--portal-border); border-radius: 9px; padding: 10px 12px; background: #fff; font-size: 13px; }
.checkbox-row input { order: -1; width: 18px; height: 18px; accent-color: var(--portal-primary); }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.form-grid > button[type="submit"] { justify-self: start; }
.fields-page > label, .fields-page > div:not(.definition-list) { margin: 12px 0; }
.definition-list { display: grid; gap: 9px; margin-top: 18px; }
.definition-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 15px 17px; }
.definition-row p { margin: 3px 0 0; }
.empty-state { border: 1px dashed #cbdbe2; border-radius: 12px; padding: 28px; color: var(--portal-muted); text-align: center; }
.users-page > label { max-width: 340px; margin: 18px 0; }
.user-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 14px; }
.user-identity { display: flex; align-items: center; gap: 12px; }
.user-identity h3, .user-identity p { margin: 0; }
.user-avatar { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--portal-primary), var(--portal-teal)); font-size: 14px; font-weight: 800; }
.status-pill.active { color: #177157; background: #e7f7f0; }
.status-pill.inactive { color: #8b5252; background: #f8eded; }
.status-pill.open { color: #17647c; background: #e6f5f7; }
.status-pill.in_progress { color: #8a6018; background: #fff5d8; }
.status-pill.closed { color: #60717c; background: #edf1f3; }
.user-row > .actions { justify-content: flex-end; }
.user-row > .inline-editor, .user-row > .danger { grid-column: 1 / -1; }
.ticket-toolbar { display: grid; grid-template-columns: repeat(2, minmax(180px, 280px)); gap: 12px; margin: 18px 0; }
.ticket-list { display: grid; gap: 12px; }
.ticket-card { margin: 0; }
.ticket-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ticket-card-top h3 { margin-bottom: 8px; }
.ticket-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 16px; }
.ticket-controls label { min-width: 180px; }
.ticket-thread { margin-top: 18px; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.portal-card { display: flex; flex-direction: column; margin: 0; min-height: 190px; }
.portal-card > .actions { margin-top: auto; padding-top: 18px; }

@media (max-width: 760px) {
    header, main { padding: 18px 16px; }
    header { min-height: 82px; }
    .portal-public header:has(#portal-logo:not([hidden])) .brand-title { display: none; }
    section, .admin-page { padding: 20px; }
    .login-card { padding: 26px 22px; }
    .portal-hero, .page-heading { flex-direction: column; }
    .media-grid, .form-grid, .ticket-toolbar { grid-template-columns: 1fr; }
    .user-row { grid-template-columns: 1fr auto; }
    .user-row > .actions { grid-column: 1 / -1; justify-content: flex-start; }
    .item-list { grid-template-columns: 1fr; }
}

/* Dark mode */
html.dark, body.dark {
    color-scheme: dark;
    color: #e5e7eb;
    background-color: #111827;
    --portal-ink: #f3f4f6;
    --portal-muted: #9ca3af;
    --portal-border: #374151;
    --portal-primary: #3b82f6;
    --portal-primary-dark: #2563eb;
    --portal-teal: #06b6d4;
    --portal-surface: #1f2937;
    --portal-shadow: 0 12px 36px rgba(0, 0, 0, .4);
}

body.dark::before {
    background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
}

body.dark input,
body.dark textarea,
body.dark select {
    background: #111827;
    border-color: #4b5563;
    color: #f3f4f6;
}

body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}

body.dark label {
    color: #d1d5db;
}

body.dark input[type="file"] {
    background: #1f2937;
    color: #9ca3af;
}

body.dark .secondary {
    border-color: #4b5563;
    color: #e5e7eb;
    background: #374151;
}

body.dark .secondary:hover {
    color: #fff;
    background: #4b5563;
}

body.dark .ghost-danger {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

body.dark details {
    background: #1e293b;
    border-color: #374151;
}

body.dark details[open] > summary {
    border-bottom-color: #374151;
}

body.dark .portal-hero,
body.dark .action-panel {
    background: #1f2937;
    border-color: #374151;
}

body.dark .form-card,
body.dark .create-user-card,
body.dark .materials-panel {
    background: #1f2937;
    border-color: #374151;
}

body.dark .checkbox-row {
    background: #111827;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark .media-preview {
    background: #111827;
    border-color: #4b5563;
    color: #9ca3af;
}

body.dark .empty-state {
    border-color: #4b5563;
    color: #9ca3af;
}

body.dark .reply {
    background: #1e293b;
    border-left-color: #06b6d4;
    color: #e5e7eb;
}

body.dark .status-pill.open {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

body.dark .status-pill.in_progress {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
}

body.dark .status-pill.closed {
    color: #9ca3af;
    background: rgba(156, 163, 175, 0.15);
}

body.dark .status-pill.active {
    color: #34d399;
    background: rgba(52, 211, 153, 0.15);
}

body.dark .status-pill.inactive {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
}

body.dark .badge {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}

body.dark #message {
    border-color: #dc2626;
    color: #fca5a5;
    background: #450a0a;
}

body.dark.portal-login::after {
    background: rgba(17, 24, 39, 0.88);
}