@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --bg-0: #060a12;
    --bg-1: #0b111c;
    --bg-2: #111a28;
    --panel: rgba(16, 23, 34, 0.82);
    --panel-soft: rgba(20, 30, 45, 0.72);
    --border: rgba(123, 151, 184, 0.22);
    --border-focus: rgba(112, 179, 224, 0.62);
    --text: #e6ebf3;
    --muted: #9aa9bd;
    --primary: #8ea7c2;
    --primary-2: #6f8faf;
    --accent: #4f7cd6;
    --accent-2: #3a5fb0;
    --success: #62b984;
    --warning: #d6a84f;
    --danger: #f2a8b6;
    --danger-bg: rgba(122, 31, 56, 0.22);
    --app-safe-top: max(env(safe-area-inset-top), 0px);
    --app-safe-bottom: max(env(safe-area-inset-bottom), 0px);
    --app-safe-left: max(env(safe-area-inset-left), 0px);
    --app-safe-right: max(env(safe-area-inset-right), 0px);
}

:root[data-theme="light"] {
    --bg-0: #f4f6f8;
    --bg-1: #f4f6f8;
    --bg-2: #f8fafc;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-soft: rgba(248, 250, 252, 0.96);
    --border: #e3e8ef;
    --border-focus: rgba(95, 127, 159, 0.35);
    --text: #2b3445;
    --muted: #6b7280;
    --primary: #5f7f9f;
    --primary-2: #526f8e;
    --accent: #4f7cd6;
    --accent-2: #3a5fb0;
    --danger: #a84b63;
    --danger-bg: rgba(179, 86, 109, 0.14);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
    min-height: 100dvh;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 80% 12%, rgba(24, 87, 126, 0.2), transparent 55%),
        radial-gradient(900px 500px at 10% 90%, rgba(20, 62, 94, 0.24), transparent 55%),
        linear-gradient(170deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
}

a { color: inherit; }

/* ============================================================
   LOGIN — replica a estética da marca
   ============================================================ */

.theme-toggle {
    position: absolute;
    top: 32px;
    right: 22px;
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.theme-icon { font-size: 18px; line-height: 1; }
:root[data-theme="dark"] .icon-sun,
:root:not([data-theme="light"]) .icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: none; }

.login-page {
    min-height: 100dvh;
    padding-top: max(12px, var(--app-safe-top));
    padding-right: max(12px, var(--app-safe-right));
    padding-bottom: max(12px, var(--app-safe-bottom));
    padding-left: max(12px, var(--app-safe-left));
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-shell {
    position: relative;
    width: min(1050px, 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(8, 13, 22, 0.62);
    backdrop-filter: blur(4px);
    overflow: hidden;
}
:root[data-theme="light"] .login-shell {
    background: rgba(244, 246, 248, 0.96);
}

.login-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 72px 16px 20px;
    border-bottom: 1px solid var(--border);
}

.brand-row { display: flex; align-items: center; gap: 12px; }

.brand-logo-sm {
    width: 56px; height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 22px;
    letter-spacing: -0.5px;
    box-shadow: 0 6px 16px rgba(58, 95, 176, 0.35);
}

.brand-copy h1 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.6px;
    font-weight: 800;
}
.brand-copy p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.top-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.top-badges span {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel-soft);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 12px;
}
:root[data-theme="light"] .top-badges span {
    background: #ffffff;
    color: #6b7280;
}

.login-main {
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    min-height: 420px;
}

.login-card-left {
    border-right: 1px solid var(--border);
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.brand-logo-lg {
    width: 180px; height: 180px;
    border-radius: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 80px;
    letter-spacing: -2px;
    box-shadow: 0 18px 40px rgba(58, 95, 176, 0.4);
}

.login-card-left h2 {
    margin: 12px 0 4px;
    font-size: clamp(34px, 4.2vw, 52px);
    letter-spacing: -0.9px;
    font-weight: 800;
}
.login-card-left h3 {
    margin: 0 0 8px;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 600;
    color: var(--muted);
}
.login-card-left p {
    margin: 0;
    max-width: 420px;
    color: var(--muted);
    font-size: clamp(16px, 1.7vw, 22px);
    line-height: 1.4;
}

.login-card-right {
    padding: 26px;
    display: flex;
    align-items: center;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
    color: var(--muted);
    font-size: 17px;
    font-weight: 500;
}

.input-wrap { position: relative; }
.input-wrap input {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(12, 20, 31, 0.88);
    color: var(--text);
    font-size: 17px;
    padding: 12px 44px 12px 42px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
:root[data-theme="light"] .input-wrap input {
    background: #f8fafc;
    color: #2b3445;
}
.input-wrap input::placeholder { color: #7f8ea1; }
.input-wrap input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(83, 145, 191, 0.18);
}
.input-wrap.has-error input { border-color: #b85a72; }

.input-icon {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: #8ea1b8;
}

.input-icon svg, .password-toggle svg {
    width: 100%; height: 100%;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.password-toggle {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    border: none; background: transparent;
    color: #8ea1b8; cursor: pointer; padding: 0;
}
.password-toggle .hidden { display: none; }

.forgot-link {
    align-self: center;
    order: 3;
    margin-top: 4px;
    color: #7ec2ff;
    text-decoration: none;
    font-size: 15px;
}
.forgot-link:hover { text-decoration: underline; }
:root[data-theme="light"] .forgot-link { color: #6ea5da; }

.login-form .error-message,
.login-form .btn-login { order: 2; }

.btn-login {
    min-height: 50px;
    border: 1px solid rgba(58, 95, 176, 0.55);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(58, 95, 176, 0.32);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.btn-login:hover { filter: brightness(1.06); }
.btn-login:disabled {
    background: linear-gradient(180deg, #c9d3e2, #b8c4d6);
    color: #6b7a8e;
    box-shadow: none;
    cursor: not-allowed;
}

:root[data-theme="light"] .login-card-left h2,
:root[data-theme="light"] .login-card-left h3 { color: #21354d; }
:root[data-theme="light"] .login-card-left p,
:root[data-theme="light"] .benefits p,
:root[data-theme="light"] .brand-copy p { color: #6c829f; }

.field-error {
    min-height: 16px;
    color: #f4a8b8;
    font-size: 12px;
}

.error-message {
    display: none;
    border: 1px solid rgba(188, 80, 107, 0.65);
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}
.error-message.show { display: block; }

.benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
}
.benefits article {
    padding: 14px;
    border-right: 1px solid var(--border);
}
.benefits article:last-child { border-right: none; }
.benefits h4 {
    margin: 0;
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.benefits article[data-benefit] h4::before {
    display: inline-block;
    font-size: 0.85em;
    line-height: 1;
    flex-shrink: 0;
}
.benefits article[data-benefit="central"] h4::before { content: "🗝️"; }
.benefits article[data-benefit="audit"] h4::before { content: "📋"; }
.benefits article[data-benefit="multi"] h4::before { content: "🧩"; }
.benefits article[data-benefit="secure"] h4::before { content: "🛡️"; }

.benefits p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.35;
}

.login-footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    padding: 12px 20px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.login-version {
    display: inline-block;
    font-size: 11px;
    opacity: 0.55;
    letter-spacing: 0.4px;
}

@media (max-width: 1024px) {
    .login-card-left h2 { font-size: 46px; }
    .login-card-left h3 { font-size: 31px; }
    .login-card-left p  { font-size: 21px; }
}

@media (max-width: 820px) {
    .login-page { align-items: stretch; padding: 8px; }
    .login-shell { width: 100%; min-height: calc(100dvh - 16px); border-radius: 12px; }
    .top-badges, .login-top { display: none; }
    .login-card { grid-template-columns: 1fr; min-height: auto; border-radius: 12px; }
    .login-card-left { border-right: none; border-bottom: none; padding: 18px 16px 8px; }
    .brand-logo-lg { width: clamp(88px, 26vw, 128px); height: clamp(88px, 26vw, 128px); font-size: clamp(40px, 12vw, 60px); border-radius: 22px; }
    .login-card-left h2 { font-size: clamp(40px, 12vw, 54px); margin: 8px 0 2px; }
    .login-card-left h3 { font-size: clamp(24px, 6.6vw, 30px); margin: 0; }
    .login-card-left p { font-size: clamp(14px, 4.2vw, 19px); max-width: 100%; line-height: 1.35; }
    .login-card-right { padding: 8px 14px 14px; }
    .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benefits article:nth-child(2n) { border-right: none; }
}

@media (max-width: 520px) {
    .theme-toggle { top: 8px; right: 8px; }
    .login-page { padding: 0; align-items: stretch; }
    .login-shell {
        border-radius: 0; border: none; box-shadow: none;
        min-height: 100dvh;
    }
    .login-main { padding: 8px 10px 6px; gap: 8px; }
    .login-card-left { padding: 10px 8px 4px; }
    .brand-logo-lg { width: clamp(72px, 21vw, 96px); height: clamp(72px, 21vw, 96px); }
    .login-card-left h2 { font-size: clamp(30px, 9vw, 42px); margin: 6px 0 2px; }
    .login-card-left h3 { font-size: clamp(16px, 4.8vw, 20px); margin-bottom: 4px; }
    .login-card-left p  { font-size: clamp(11px, 3.3vw, 14px); line-height: 1.32; }
    .login-card-right { padding: 6px 10px 10px; }
    .form-group label { font-size: 14px; }
    .input-wrap input { font-size: 15px; min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
    .btn-login { min-height: 44px; font-size: 17px; }
    .forgot-link { font-size: 14px; }
    .benefits { border-radius: 10px; }
    .benefits article { padding: 8px 7px; }
    .benefits h4 { font-size: 18px; }
    .benefits p  { font-size: 12px; line-height: 1.3; }
    .login-footer { padding: 6px 10px 8px; font-size: 11px; justify-content: center; text-align: center; }
}

/* ============================================================
   ADMIN PANEL — layout interno após login
   ============================================================ */

/* ── Topbar (fixa no topo) ─────────────────────────────────────────── */
.app-topbar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 18px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}
.topbar-burger {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: 16px; cursor: pointer;
}
.topbar-burger:hover { background: var(--panel); color: var(--accent); }
.topbar-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.topbar-brand strong { font-weight: 700; letter-spacing: 0.01em; }
.topbar-actions {
    margin-left: auto;
    display: flex; align-items: center; gap: 8px;
}
.topbar-session {
    height: 36px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 12px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}
.topbar-session .nl-icon { color: var(--muted); }
.topbar-session strong { color: var(--text); font-weight: 600; }
.topbar-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: 15px; cursor: pointer; text-decoration: none;
    transition: background .12s, color .12s;
}
.topbar-btn:hover { background: var(--panel); color: var(--accent); }
.topbar-btn-danger:hover { color: #ef4444; border-color: rgba(239,68,68,.4); }

.topbar-link {
    height: 36px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.topbar-link:hover { background: var(--panel); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.topbar-link-active { background: color-mix(in oklab, var(--accent) 18%, var(--panel-soft)); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); }
.topbar-link-icon { line-height: 1; display:inline-flex; align-items:center; }
.topbar-link-caret { color: var(--muted); margin-left: 2px; transition: transform .15s; }

.nl-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.nl-icon-sm { width: 14px; height: 14px; }
.topbar-burger .nl-icon { width: 20px; height: 20px; }
.topbar-btn .nl-icon { width: 18px; height: 18px; }
.topbar-menu-icon .nl-icon { width: 20px; height: 20px; color: var(--accent); }
.topbar-menu a.is-current .nl-icon { color: var(--accent); }
.topbar-menu a:not(.is-current) .nl-icon { color: var(--text); opacity: 0.85; }
.topbar-link .nl-icon { color: currentColor; }

.topbar-dropdown { position: relative; }
.topbar-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 280px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    padding: 6px;
    display: none;
    z-index: 1000;
}
.topbar-dropdown.open .topbar-menu { display: block; }
.topbar-dropdown.open .topbar-link-caret { transform: rotate(180deg); }
.topbar-menu a {
    display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
}
.topbar-menu a:hover { background: var(--panel-soft); }
.topbar-menu a.is-current { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); }
.topbar-menu a strong { display: block; font-weight: 600; font-size: 13px; }
.topbar-menu a small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.topbar-menu-icon { font-size: 18px; text-align: center; line-height: 1; }

@media (max-width: 640px) {
    .topbar-menu { left: auto; right: 0; min-width: 260px; }
}

@media (max-width: 640px) {
    .topbar-session { display: none; }
    .topbar-brand strong { display: none; }
    .topbar-link-label { display: none; }
    .topbar-link { padding: 0 10px; }
}

.app-shell {
    min-height: calc(100dvh - 60px);
    display: grid;
    grid-template-columns: 240px 1fr;
    transition: grid-template-columns .18s ease;
}

/* Sidebar colapsado (toggle via body.sidebar-collapsed) */
body.sidebar-collapsed .app-shell { grid-template-columns: 0 1fr; }
body.sidebar-collapsed .app-sidebar {
    overflow: hidden; padding-left: 0; padding-right: 0; border-right: 0;
    visibility: hidden;
}

.app-sidebar {
    border-right: 1px solid var(--border);
    background: var(--panel);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: padding .18s ease;
}

/* Brand grande dentro do sidebar é redundante agora que tem topbar */
.sidebar-brand-row { display: none !important; }

.app-sidebar .brand-row { padding: 4px 6px; }

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.app-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.app-nav a:hover {
    background: var(--panel-soft);
    color: var(--text);
}
.app-nav a.active {
    background: linear-gradient(180deg, rgba(79, 124, 214, 0.18), rgba(58, 95, 176, 0.10));
    color: var(--text);
    border: 1px solid rgba(79, 124, 214, 0.28);
}

.app-nav .nav-icon {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}

/* Grupos colapsáveis no menu */
.app-nav details.nav-group,
.app-nav details.nav-subgroup { margin: 0; }
.app-nav details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    user-select: none;
    position: relative;
}
.app-nav details > summary::-webkit-details-marker { display: none; }
.app-nav details > summary::after {
    content: "▸";
    margin-left: auto;
    font-size: 10px;
    color: var(--muted);
    transition: transform .15s;
}
.app-nav details[open] > summary::after { transform: rotate(90deg); }
.app-nav details > summary:hover { background: var(--panel-soft); color: var(--text); }
.app-nav details > summary.group-active,
.app-nav details > summary.subgroup-active { color: var(--text); }

/* Sub-itens nível 1 (dentro de nav-group) */
.app-nav .nav-sub {
    padding-left: 28px;
    font-size: 13px;
    font-weight: 500;
}
/* Sub-items nível 2 (dentro de nav-subgroup) */
.app-nav .nav-sub2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 44px;
    border-radius: 10px;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}
.app-nav .nav-sub2:hover { background: var(--panel-soft); color: var(--text); }
.app-nav .nav-sub2.active {
    background: linear-gradient(180deg, rgba(79, 124, 214, 0.18), rgba(58, 95, 176, 0.10));
    color: var(--text);
    border: 1px solid rgba(79, 124, 214, 0.28);
}
/* Quando subgroup-summary é nav-sub, alinha como nav-sub mas com chevron */
.app-nav details.nav-subgroup > summary {
    padding-left: 28px;
    font-size: 13px;
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 14px;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-footer a { color: var(--accent); text-decoration: none; }

.app-main {
    padding: 24px 28px 40px;
    min-width: 0;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 14px;
    flex-wrap: wrap;
}
.page-header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.page-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, background 0.15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary {
    border-color: rgba(58, 95, 176, 0.55);
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 4px 12px rgba(58, 95, 176, 0.28);
}
.btn-danger {
    border-color: rgba(188, 80, 107, 0.55);
    color: var(--danger);
    background: var(--danger-bg);
}
.btn-warning {
    border-color: rgba(214, 168, 79, 0.55);
    color: #d6a84f;
    background: rgba(214, 168, 79, 0.14);
    font-weight: 700;
}
.btn-success {
    border-color: rgba(46, 194, 126, 0.55);
    color: #2ec27e;
    background: rgba(46, 194, 126, 0.12);
    font-weight: 700;
}
.btn-sm { padding: 6px 10px; font-size: 13px; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}
.card-label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.card-value {
    font-size: 28px;
    font-weight: 700;
    margin-top: 4px;
}
.card-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.panel h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.data th, table.data td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}
table.data th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
table.data tbody tr:hover {
    background: var(--panel-soft);
}

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--muted);
}
.badge-active   { color: #2ec27e; border-color: rgba(46, 194, 126, 0.4); background: rgba(46, 194, 126, 0.12); }
.badge-suspended{ color: #d6a84f; border-color: rgba(214, 168, 79, 0.4); background: rgba(214, 168, 79, 0.12); }
.badge-expired  { color: #c45656; border-color: rgba(196, 86, 86, 0.4);  background: rgba(196, 86, 86, 0.12); }
.badge-canceled { color: #6b7280; border-color: var(--border); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(12, 20, 31, 0.6);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}
:root[data-theme="light"] .form-grid input,
:root[data-theme="light"] .form-grid select,
:root[data-theme="light"] .form-grid textarea {
    background: #f8fafc;
    color: #2b3445;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(83, 145, 191, 0.18);
}
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: flex-end;
}

.flash {
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    border: 1px solid var(--border);
}
.flash-success { color: #2ec27e; border-color: rgba(46, 194, 126, 0.4); background: rgba(46, 194, 126, 0.12); }
.flash-error   { color: var(--danger); border-color: rgba(188, 80, 107, 0.55); background: var(--danger-bg); }

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 14px;
}
.modules-grid label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--panel-soft);
    cursor: pointer;
}
.modules-grid input[type="checkbox"] { accent-color: var(--accent); }

.kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 18px;
    font-size: 14px;
}
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.code-inline {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: rgba(12, 20, 31, 0.6);
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 13px;
}
:root[data-theme="light"] .code-inline { background: #eef2f7; }

/* ─── Padrão global de form: if-cell (label + hint + input) ──────────────── */
.if-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 18px;
    align-items: stretch;
}
.if-grid.if-grid-4 { grid-template-columns: repeat(4, 1fr); }
.if-grid.if-grid-3 { grid-template-columns: repeat(3, 1fr); }
.if-cell {
    display: grid;
    grid-template-rows: 18px 16px 1fr;
    gap: 4px;
    margin: 0;
}
.if-cell.if-full   { grid-column: 1 / -1; }
.if-cell.if-span-2 { grid-column: span 2; }
.if-cell .if-label {
    font-size: 12px; font-weight: 600; color: var(--text); line-height: 18px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.if-cell .if-hint {
    font-size: 11px; color: var(--muted); line-height: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.if-cell input,
.if-cell select,
.if-cell textarea {
    height: 38px; padding: 0 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 7px;
    font: inherit; width: 100%; box-sizing: border-box;
}
.if-cell textarea {
    height: auto; min-height: 64px;
    padding: 10px 12px; resize: vertical; line-height: 1.4;
}
.if-cell input:focus,
.if-cell select:focus,
.if-cell textarea:focus {
    outline: none;
    border-color: rgba(58,95,176,0.7);
}
.form-block {
    margin-top: 10px;
    padding: 16px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.form-actions-end {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
@media (max-width: 1100px) {
    .if-grid.if-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .if-grid.if-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .if-grid,
    .if-grid.if-grid-4,
    .if-grid.if-grid-3 { grid-template-columns: 1fr; }
    .if-cell.if-span-2 { grid-column: 1 / -1; }
}

/* ─── Mobile (largura <= 820px) ─────────────────────────────────────────── */
@media (max-width: 820px) {
    html:not(.force-desktop) body {
        font-size: 14px;
    }
    html:not(.force-desktop) .app-shell { grid-template-columns: 1fr; }
    html:not(.force-desktop) .app-sidebar {
        position: sticky; top: 0; z-index: 50;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px 12px;
        background: var(--panel);
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    html:not(.force-desktop) .app-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    html:not(.force-desktop) .app-nav a {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }
    html:not(.force-desktop) .sidebar-footer {
        display: flex; justify-content: space-between; align-items: center;
        flex-wrap: wrap; gap: 8px;
        font-size: 12px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
    html:not(.force-desktop) .sidebar-footer > div { display: inline-flex; gap: 8px; }

    /* Page header e topbar */
    html:not(.force-desktop) .page-header {
        flex-direction: column; align-items: stretch; gap: 10px;
    }
    html:not(.force-desktop) .page-header h1 { font-size: 22px; }
    html:not(.force-desktop) .page-header p { font-size: 13px; }

    /* Forms */
    html:not(.force-desktop) .form-grid,
    html:not(.force-desktop) .if-grid,
    html:not(.force-desktop) .if-grid.if-grid-4,
    html:not(.force-desktop) .if-grid.if-grid-3 {
        grid-template-columns: 1fr !important;
    }
    html:not(.force-desktop) .if-cell.if-span-2 { grid-column: 1 / -1 !important; }
    html:not(.force-desktop) .if-cell input,
    html:not(.force-desktop) .if-cell select,
    html:not(.force-desktop) .if-cell textarea {
        height: 42px;  /* alvo de toque maior */
        font-size: 15px;
    }
    html:not(.force-desktop) .if-cell .if-label,
    html:not(.force-desktop) .if-cell .if-hint { white-space: normal; }

    /* Tabelas: rolagem horizontal forçada */
    html:not(.force-desktop) table.data {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    html:not(.force-desktop) table.data thead,
    html:not(.force-desktop) table.data tbody,
    html:not(.force-desktop) table.data tfoot,
    html:not(.force-desktop) table.data tr { display: table-row; }
    html:not(.force-desktop) table.data { width: 100%; }

    /* Painéis */
    html:not(.force-desktop) .panel { padding: 14px 12px; border-radius: 10px; }

    /* Stats cards: já são grid auto-fit, fica 1 ou 2 colunas naturalmente */

    /* Botões maiores no toque */
    html:not(.force-desktop) .btn { min-height: 38px; padding: 8px 14px; }
    html:not(.force-desktop) .btn-sm { min-height: 32px; padding: 6px 10px; }

    /* Key-value lists */
    html:not(.force-desktop) .kv { grid-template-columns: 1fr; gap: 4px; }
    html:not(.force-desktop) .kv dt { color: var(--muted); margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

    /* Page-stack: respiro */
    html:not(.force-desktop) .page-stack > * + * { margin-top: 14px; }

    /* Modais de edit inline ficam mais legíveis */
    html:not(.force-desktop) details > summary { font-size: 14px; padding: 12px 14px; }
}

@media (max-width: 480px) {
    html:not(.force-desktop) .page-header h1 { font-size: 20px; }
    html:not(.force-desktop) .panel { padding: 12px 10px; }
    html:not(.force-desktop) .ar-stat-value,
    html:not(.force-desktop) .dre-stat-value,
    html:not(.force-desktop) .ina-stat-value,
    html:not(.force-desktop) .ext-stat-value { font-size: 20px; }
}

/* Botão "Modo desktop / mobile" no rodapé do sidebar */
.view-mode-toggle {
    margin-top: 8px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    color: var(--muted);
    cursor: pointer;
}
.view-mode-toggle:hover { color: var(--text); }
html.force-desktop .view-mode-toggle::before { content: "🖥️ "; }
html:not(.force-desktop) .view-mode-toggle::before { content: "📱 "; }