:root {
    --zd-primary: #16836d;
    --zd-primary-dark: #0b5d50;
    --zd-accent: #d6a43b;
    --zd-ink: #172b3a;
    --zd-muted: #6b7b86;
    --zd-line: #dce7e9;
    --zd-surface: #ffffff;
    --zd-background: #f2f7f6;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--zd-ink); background: var(--zd-background); line-height: 1.5; }
a { color: var(--zd-primary-dark); font-weight: 650; text-decoration: none; }
a:hover { text-decoration: underline; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 10%, #d7eee7 0, transparent 33%), linear-gradient(135deg, #f7fbfa, #eaf3f0); }
.auth-card { width: min(100%, 440px); padding: 42px; background: var(--zd-surface); border: 1px solid var(--zd-line); border-radius: 18px; box-shadow: 0 22px 65px rgba(24, 66, 58, .14); }
.brand { display: flex; align-items: center; gap: 11px; font-size: 27px; font-weight: 800; letter-spacing: -.8px; color: var(--zd-ink); margin: 0 0 30px; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, var(--zd-primary), #31aa80); border-radius: 11px; box-shadow: 0 7px 16px rgba(22, 131, 109, .28); }
.auth-card h1 { font-size: 25px; margin: 0 0 7px; letter-spacing: -.4px; }
.auth-card > p { margin: 0 0 28px; color: var(--zd-muted); }
form { display: grid; gap: 17px; }
label { display: grid; gap: 7px; font-size: 14px; font-weight: 700; color: #344a55; }
input, select, textarea { width: 100%; border: 1px solid #c8d6d9; border-radius: 9px; background: #fff; padding: 11px 12px; color: var(--zd-ink); font: inherit; outline: none; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--zd-primary); box-shadow: 0 0 0 3px rgba(22, 131, 109, .13); }
.check-field { display: flex; align-items: center; gap: 9px; font-weight: 500; color: var(--zd-muted); }
.check-field input { width: 17px; height: 17px; accent-color: var(--zd-primary); }
button, .button { border: 0; border-radius: 9px; padding: 11px 17px; background: var(--zd-primary); color: white; cursor: pointer; font: inherit; font-weight: 750; transition: background .15s, transform .15s; }
button:hover, .button:hover { background: var(--zd-primary-dark); text-decoration: none; transform: translateY(-1px); }
.errors { margin: 20px 0 0; padding: 12px 15px 12px 34px; border-radius: 9px; color: #9f2f2f; background: #fff0f0; border: 1px solid #f3cccc; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.app-shell:not(.builder-shell) { display: block; }
.app-topbar { min-height: 76px; display: flex; align-items: center; gap: 26px; padding: 0 42px; background: white; border-bottom: 1px solid var(--zd-line); box-shadow: 0 2px 10px rgba(20, 52, 47, .04); }
.app-topbar .brand { margin: 0; color: var(--zd-ink); font-size: 23px; }
.app-topbar .brand:hover { text-decoration: none; }
.app-topnav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.app-topnav a { padding: 9px 13px; color: #38525a; border-radius: 8px; font-weight: 700; }
.app-topnav a:hover { color: var(--zd-primary-dark); background: #eef7f4; text-decoration: none; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; padding: 9px 13px; border: 1px solid var(--zd-line); border-radius: 9px; color: #38525a; font-weight: 700; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 180px; padding: 8px; background: white; border: 1px solid var(--zd-line); border-radius: 10px; box-shadow: 0 10px 25px rgba(20, 52, 47, .14); }
.user-menu-panel a, .user-menu-panel button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: #38525a; background: transparent; text-align: left; font: inherit; font-weight: 700; }
.user-menu-panel a:hover, .user-menu-panel button:hover { color: var(--zd-primary-dark); background: #eef7f4; text-decoration: none; transform: none; }
.status-message { color: var(--zd-primary-dark) !important; font-weight: 700; }
.app-sidebar { padding: 27px 16px; background: #123c3a; color: #dcefeb; }
.app-sidebar .brand { color: white; margin: 0 9px 34px; font-size: 24px; }
.app-sidebar nav { display: grid; gap: 7px; }
.app-sidebar nav a { padding: 11px 13px; border-radius: 8px; color: #d3e3e0; font-weight: 650; }
.app-sidebar nav a:hover, .app-sidebar nav a[aria-current="page"] { color: white; background: rgba(255,255,255,.13); text-decoration: none; }
.app-content { padding: 42px; max-width: 1240px; width: 100%; }
.app-content:has(.builder-frame) { max-width: none; padding: 0; overflow: hidden; }
.builder-frame { display: block; width: 100%; height: 100vh; border: 0; background: #f7f9fb; }
.builder-shell { display: block; }
.builder-shell .app-sidebar { display: none; }
.builder-shell .app-content { max-width: none; padding: 0; overflow: hidden; }
.app-content h1 { margin: 0 0 6px; font-size: 29px; letter-spacing: -.55px; }
.app-content > p { color: var(--zd-muted); }
.app-content form { max-width: 680px; padding: 25px; background: white; border: 1px solid var(--zd-line); border-radius: 13px; box-shadow: 0 5px 18px rgba(20, 52, 47, .05); }
.app-content form.connection-form { max-width: 1120px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 24px; }
.connection-field-wide { grid-column: 1 / -1; }
.connection-password-help { margin: -10px 0 0; color: var(--zd-muted); font-size: 13px; }
.connection-form .check-field { align-self: end; min-height: 44px; }
.connection-form-actions { display: flex; justify-content: flex-end; gap: 12px; }
.button-secondary { color: var(--zd-primary-dark); background: white; border: 1px solid var(--zd-primary); }
.button-secondary:hover { color: white; background: var(--zd-primary-dark); }
.connection-test-feedback { min-height: 22px; margin: -6px 0 0; font-weight: 650; }
.connection-test-feedback.is-success { color: var(--zd-primary-dark); }
.connection-test-feedback.is-error { color: #a22c2c; }
.app-content form[style*="inline"] { display: inline; padding: 0; background: transparent; border: 0; box-shadow: none; }
table { width: 100%; margin-top: 22px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--zd-line); border-radius: 12px; background: white; box-shadow: 0 5px 18px rgba(20, 52, 47, .05); }
.empty-state { margin-top: 28px; padding: 40px; max-width: 680px; text-align: center; background: white; border: 1px dashed #bfd4d0; border-radius: 14px; }
.empty-state h2 { margin: 0 0 7px; font-size: 20px; }
.empty-state p { margin: 0; color: var(--zd-muted); }
.dashboard-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dashboard-summary .button { flex: 0 0 auto; }
th, td { padding: 13px 15px; text-align: left; border-bottom: 1px solid #edf1f1; }
th { background: #f7faf9; color: #52656b; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
tr:last-child td { border-bottom: 0; }
td button { padding: 7px 10px; font-size: 13px; }

@media (max-width: 760px) {
    .auth-card { padding: 30px 24px; }
    .app-shell { display: block; }
    .app-sidebar { padding: 17px; }
    .app-sidebar .brand { margin-bottom: 15px; }
    .app-sidebar nav { grid-template-columns: repeat(3, 1fr); }
    .app-sidebar nav a { padding: 9px 6px; text-align: center; font-size: 13px; }
    .app-topbar { min-height: auto; padding: 14px 17px; align-items: flex-start; flex-direction: column; gap: 13px; }
    .app-topnav { width: 100%; margin: 0; justify-content: space-between; }
    .app-topnav a { padding: 8px 6px; font-size: 13px; }
    .app-content { padding: 26px 17px; overflow-x: auto; }
    .app-content form.connection-form { grid-template-columns: 1fr; }
    .connection-field-wide { grid-column: auto; }
    .connection-form-actions { justify-content: stretch; }
    .connection-form-actions button { flex: 1; }
}