:root {
    --bg: #f5f6fb;
    --sidebar: #ffffff;
    --panel: #ffffff;
    --panel-soft: #f7f8fc;
    --line: #e7eaf3;
    --text: #1f2430;
    --muted: #7f8798;
    --primary: #5664d2;
    --primary-soft: #eef1ff;
    --warning: #ff7d45;
    --danger: #e25454;
    --shadow: 0 18px 45px rgba(27, 39, 94, 0.08);
    --radius-xl: 24px;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: "Segoe UI", "Trebuchet MS", sans-serif; color: var(--text); background: var(--bg); }
button, input, textarea { font: inherit; }

.login-screen {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 32px 20px;
    background:
        radial-gradient(circle at top left, rgba(86, 100, 210, 0.14), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 125, 69, 0.12), transparent 24%),
        linear-gradient(180deg, #f7f8fd 0%, #eef1f9 100%);
}

.login-panel {
    width: min(520px, 100%);
    padding: 40px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(231, 234, 243, 0.9);
    border-radius: 32px;
    box-shadow: 0 24px 70px rgba(27, 39, 94, 0.12);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.login-copy {
    margin-bottom: 22px;
}

.login-copy h2 {
    margin: 0 0 10px;
    font-size: 2rem;
    line-height: 1.15;
}

.login-copy p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.auth-form-centered {
    gap: 14px;
}

.forgot-password-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.auth-copy {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.5;
}

.auth-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.centered {
    text-align: center;
}

.shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 24px; height: 100vh; padding: 28px 22px; background: var(--sidebar); border-right: 1px solid var(--line); }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 14; background: rgba(15, 22, 48, 0.38); backdrop-filter: blur(3px); }
.brand { display: flex; gap: 14px; align-items: center; }
.avatar { display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--primary), #7d87ea); }
.brand-mark { display: block; width: 48px; height: 48px; border-radius: 14px; object-fit: cover; box-shadow: 0 8px 18px rgba(178, 64, 0, 0.18); }
.brand h1, .page-header h2, .section-head h3, .modal-header h3, .agent-card h4, .property-card h4 { margin: 0; }
.eyebrow, .side-title, .meta-label { margin: 0 0 10px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.side-group { display: grid; gap: 8px; }
.side-link { width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; text-align: left; background: transparent; color: var(--text); cursor: pointer; }
.side-link.active { color: var(--primary); background: var(--primary-soft); border-color: #dbe2ff; font-weight: 700; }
.side-link.accent { color: #fff; background: linear-gradient(135deg, var(--primary), #6f7bf2); }

.auth-card, .surface-card, .metric-card, .agent-card, .property-card, .profile-card, .modal-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.auth-card { margin-top: auto; padding: 18px; }
.auth-form, .wizard-form { display: grid; gap: 12px; }
input, textarea { width: 100%; padding: 13px 14px; border: 1px solid #dfe5f0; border-radius: 12px; background: #fff; color: var(--text); }
input:focus, textarea:focus { outline: 2px solid rgba(86, 100, 210, 0.16); border-color: var(--primary); }

.primary-button, .ghost-button, .danger-button, .icon-button { cursor: pointer; border: 0; }
.text-button { align-self: end; padding: 0; border: 0; color: var(--primary); background: transparent; font-weight: 600; cursor: pointer; }
.primary-button, .ghost-button, .danger-button { padding: 11px 16px; border-radius: 999px; font-weight: 600; }
.primary-button { color: #fff; background: linear-gradient(135deg, var(--primary), #6d79ef); }
.ghost-button, .icon-button { color: var(--text); background: #fff; border: 1px solid var(--line); }
.danger-button { color: #fff; background: linear-gradient(135deg, #cf4747, var(--danger)); }
.icon-button { width: 40px; height: 40px; border-radius: 12px; }
.wide { width: 100%; }
.auth-note { margin: 12px 0 0; color: var(--muted); font-size: 0.92rem; }

.main-panel { padding: 28px; }
.topbar, .page-header, .section-head, .toolbar, .agent-card-head, .agent-card-footer, .property-card-head, .property-card-footer, .detail-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.topbar { margin-bottom: 18px; }
.drawer-toggle { display: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.user-chip span { display: block; color: var(--muted); font-size: 0.82rem; }
.avatar { width: 54px; height: 54px; border-radius: 16px; }
.avatar.tiny { width: 34px; height: 34px; border-radius: 12px; font-size: 0.8rem; }
.avatar.large { width: 84px; height: 84px; border-radius: 24px; }
.avatar img, .property-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.page-header { margin-bottom: 24px; }
.breadcrumb { color: var(--muted); font-size: 0.94rem; }

.dashboard-shell.hidden, .view-panel, .modal.hidden, .hidden { display: none !important; }
.view-panel.active { display: block !important; }
.section-head { margin-bottom: 16px; }
.section-head.compact { margin-top: 22px; }

.metric-grid, .agents-grid, .properties-grid { display: grid; gap: 16px; }
.metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card, .surface-card, .agent-card, .property-card, .profile-card { padding: 22px; }
.metric-card strong { display: block; margin: 12px 0 6px; font-size: 2.4rem; }
.metric-card p, .agent-description, .property-description { margin: 0; color: var(--muted); }

.toolbar { margin-bottom: 16px; }
.agents-grid, .properties-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agent-pill, .property-pill { display: inline-flex; align-items: center; padding: 7px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 0.84rem; font-weight: 600; }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--muted); }
.agent-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 14px 0; }
.property-image { height: 180px; margin-bottom: 14px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #dce3ff, #f0f3ff); }
.price { font-size: 1.6rem; }
.property-agent { display: flex; align-items: center; gap: 10px; }
.property-agent .avatar { width: 42px; height: 42px; border-radius: 12px; }

.profile-card { padding: 24px; }
.profile-card-body { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; }
.profile-panel { padding: 18px; border-radius: 18px; background: var(--panel-soft); border: 1px solid var(--line); }
.profile-meta { display: grid; gap: 14px; }

.settings-wrap { position: relative; }
.settings-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 220px; padding: 10px; display: grid; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); z-index: 4; }

.modal { position: fixed; inset: 0; z-index: 20; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 22, 48, 0.36); }
.modal-card { position: relative; z-index: 1; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; margin: 16px auto; padding: 24px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.step { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.step.active { color: #fff; background: linear-gradient(135deg, var(--primary), #6f7bf2); }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.form-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.form-grid.two-columns > label { flex: 1 1 calc(50% - 6px); }
label span { display: block; margin-bottom: 8px; font-weight: 600; }
.upload-card { padding: 18px; border-radius: 16px; background: var(--panel-soft); border: 1px solid var(--line); }
.toggle { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; }
.toggle input { width: 18px; height: 18px; margin: 0; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.form-error { margin: 0; padding: 12px 14px; border-radius: 14px; color: #fff; background: var(--danger); }
.empty-state { padding: 28px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed #d6dcea; border-radius: 18px; }

@media (max-width: 1120px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 16;
        width: min(320px, calc(100vw - 32px));
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.24s ease;
        border-right: 0;
        box-shadow: 0 24px 70px rgba(12, 20, 48, 0.18);
    }
    .shell.drawer-open .sidebar { transform: translateX(0); }
    .drawer-toggle { display: inline-grid; place-items: center; }
    .topbar { justify-content: space-between; }
    .metric-grid, .agents-grid, .properties-grid, .profile-card-body { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .main-panel, .sidebar { padding: 18px; }
    .login-panel { padding: 28px 20px; }
    .topbar, .page-header, .section-head, .detail-actions, .agent-card-footer, .property-card-footer, .topbar-right, .wizard-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .auth-actions { flex-direction: column; }
    .metric-grid, .agents-grid, .properties-grid { grid-template-columns: 1fr; }
    .form-grid.two-columns > label { flex-basis: 100%; }
    .stepper { grid-template-columns: 1fr; }
    .topbar-right { width: 100%; }
    .user-chip { width: 100%; justify-content: space-between; }
}