:root, :root[data-crm-theme="light"] {
    --crm-bg:#f3f6fb; --crm-surface:#fff; --crm-surface-alt:#f8fafc;
    --crm-text:#172337; --crm-muted:#64748b; --crm-border:#dbe3ef;
    --crm-accent:#2458b5; --crm-accent-text:#fff; --crm-hover:#eaf0fa;
    --crm-danger:#b91c1c; --crm-danger-bg:#fef2f2;
    --crm-success:#065f46; --crm-success-bg:#ecfdf5;
    --crm-shadow:0 12px 36px rgba(15,23,42,.09); color-scheme:light;
}
:root[data-crm-theme="dark"] {
    --crm-bg:#0e1420; --crm-surface:#182233; --crm-surface-alt:#202d40;
    --crm-text:#e8eef8; --crm-muted:#a9b8cb; --crm-border:#33445b;
    --crm-accent:#76a5ff; --crm-accent-text:#081628; --crm-hover:#283b55;
    --crm-danger:#ff9a9a; --crm-danger-bg:#48272e;
    --crm-success:#8ae1b5; --crm-success-bg:#1b4035;
    --crm-shadow:0 12px 36px rgba(0,0,0,.35); color-scheme:dark;
}
html,body { min-height:100%; margin:0; }
body { background:var(--crm-bg); color:var(--crm-text); }
.crm-shell { min-height:100vh; display:flex; flex-direction:column; background:var(--crm-bg); color:var(--crm-text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.crm-shell * { box-sizing:border-box; }
.crm-header { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 1.5rem; background:var(--crm-surface); border-bottom:1px solid var(--crm-border); }
.crm-brand { display:flex; align-items:center; gap:.7rem; color:var(--crm-text); text-decoration:none; font-size:1.06rem; font-weight:600; }
.crm-brand-icon { display:grid; place-items:center; width:34px; height:34px; background:var(--crm-accent); color:var(--crm-accent-text); border-radius:10px; font-weight:800; }
.crm-theme-toggle { background:var(--crm-surface-alt); color:var(--crm-text); border:1px solid var(--crm-border); border-radius:9px; padding:.6rem .9rem; cursor:pointer; font:inherit; }
.crm-theme-toggle:hover { background:var(--crm-hover); }
.crm-layout { flex:1; display:grid; grid-template-columns:235px minmax(0,1fr); }
.crm-sidebar { background:var(--crm-surface); border-right:1px solid var(--crm-border); padding:1.6rem .8rem; }
.crm-nav-label { color:var(--crm-muted); font-size:.7rem; font-weight:750; letter-spacing:.12em; padding:0 .8rem .8rem; }
.crm-nav { display:flex; flex-direction:column; gap:.3rem; }
.crm-nav a { display:flex; align-items:center; gap:.7rem; border-radius:9px; padding:.75rem .85rem; text-decoration:none; color:var(--crm-muted); font-weight:600; }
.crm-nav a:hover { background:var(--crm-hover); color:var(--crm-text); }
.crm-nav a.active { background:var(--crm-hover); color:var(--crm-accent); }
.crm-main-column { min-width:0; display:flex; flex-direction:column; }
.crm-content { flex:1; min-width:0; width:100%; }
.crm-footer { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; border-top:1px solid var(--crm-border); color:var(--crm-muted); font-size:.8rem; background:var(--crm-surface); }
.crm-shell input,.crm-shell select,.crm-shell textarea { background-color:var(--crm-surface); color:var(--crm-text); border-color:var(--crm-border); }
@media(max-width:760px) {
    .crm-header { padding:0 1rem; }
    .crm-brand { font-size:.9rem; }
    .crm-layout { display:flex; flex-direction:column; }
    .crm-sidebar { border-right:0; border-bottom:1px solid var(--crm-border); padding:.45rem .75rem; }
    .crm-nav-label { display:none; }
    .crm-nav { flex-direction:row; overflow-x:auto; }
    .crm-nav a { white-space:nowrap; padding:.6rem .75rem; }
    .crm-footer { padding:1rem; }
}

/* Account dropdown */

.crm-account-menu {
    position: relative;
}

.crm-account-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--crm-border);
    border-radius: 9px;
    background: var(--crm-surface-alt);
    color: var(--crm-text);
    cursor: pointer;
    font-size: 13px;
    list-style: none;
}

    .crm-account-trigger::-webkit-details-marker {
        display: none;
    }

    .crm-account-trigger:hover {
        background: var(--crm-hover);
    }

.crm-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1100;
    width: 250px;
    padding: 8px;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow);
}

.crm-account-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    color: var(--crm-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--crm-border);
    margin-bottom: 6px;
}

    .crm-account-info strong {
        color: var(--crm-text);
        font-size: 13px;
    }

.crm-account-dropdown a,
.crm-account-dropdown button {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--crm-text);
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

    .crm-account-dropdown a:hover,
    .crm-account-dropdown button:hover {
        background: var(--crm-hover);
    }

.crm-account-dropdown form {
    margin: 0;
    border-top: 1px solid var(--crm-border);
    padding-top: 6px;
}

.crm-login-link {
    color: var(--crm-accent);
    font-weight: 600;
    text-decoration: none;
}