:root {
    color-scheme: dark;
    --bg: #070b12;
    --bg-deep: #05080e;
    --surface: #0d131d;
    --surface-2: #111a26;
    --surface-3: #162130;
    --border: #202c3b;
    --border-soft: #172331;
    --text: #edf4fb;
    --text-soft: #9aaabc;
    --text-muted: #65788d;
    --blue: #3b82f6;
    --cyan: #22b8cf;
    --green: #2ecb81;
    --amber: #f3b94f;
    --red: #ef5d6a;
    --sidebar-width: 264px;
    --topbar-height: 76px;
    --radius: 14px;
    --shadow: 0 24px 70px rgb(0 0 0 / 32%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.5; }
body.sidebar-open { overflow: hidden; }
button, input, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid #62c9ff; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 14px; border-radius: 8px; background: var(--text); color: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.eyebrow { margin: 0 0 6px; color: #63c7eb; font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }

.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: #f5f9fd; font-size: 16px; font-weight: 650; letter-spacing: .04em; }
.brand-lockup strong { color: #5ac8ec; font-weight: 800; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #2d4358; border-radius: 10px; background: linear-gradient(145deg, #16283a, #0a111c); box-shadow: inset 0 1px rgb(255 255 255 / 6%), 0 8px 24px rgb(13 129 190 / 10%); }
.brand-mark svg { width: 23px; height: 23px; fill: #eaf5fd; stroke: none; }
.brand-mark svg .brand-mark-accent { fill: #39bde5; }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 700; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; }
.button svg { width: 18px; height: 18px; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .65; transform: none; }
.button-primary { border-color: #278dc2; background: linear-gradient(135deg, #137db7, #2199c8); color: #fff; box-shadow: 0 10px 28px rgb(20 145 197 / 18%); }
.button-primary:hover { background: linear-gradient(135deg, #1689c6, #27a6d5); }
.button-secondary { border-color: #2b475d; background: #142434; color: #bfeeff; }
.button-secondary:hover { border-color: #3a647e; background: #193047; }
.button-ghost { border-color: var(--border); background: transparent; color: var(--text-soft); }
.button-ghost:hover { background: var(--surface-3); color: var(--text); }
.button-danger { border-color: #a63d49; background: #9e3440; color: #fff; }
.button-danger:hover { background: #b53c49; }
.icon-button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--text-soft); cursor: pointer; }
.icon-button:hover { border-color: #314257; background: var(--surface-3); color: var(--text); }
.icon-button svg { width: 19px; height: 19px; }

/* Login */
.login-page { overflow-x: hidden; background: var(--bg-deep); }
.login-page::before, .login-page::after { position: fixed; z-index: 0; width: 520px; height: 520px; border-radius: 50%; content: ""; filter: blur(110px); pointer-events: none; }
.login-page::before { top: -270px; left: 22%; background: rgb(18 127 180 / 15%); }
.login-page::after { right: -330px; bottom: -280px; background: rgb(40 95 175 / 12%); }
.login-shell { position: relative; z-index: 1; display: grid; min-height: 100vh; grid-template-columns: minmax(420px, 1.05fr) minmax(460px, .95fr); }
.login-brand { position: relative; display: flex; min-width: 0; overflow: hidden; flex-direction: column; justify-content: space-between; padding: clamp(34px, 5vw, 72px); border-right: 1px solid var(--border-soft); background: radial-gradient(circle at 20% 50%, rgb(19 102 148 / 13%), transparent 38%), linear-gradient(145deg, #080e17, #070b12 72%); }
.login-brand::after { position: absolute; right: -160px; bottom: 8%; width: 420px; height: 420px; border: 1px solid rgb(74 167 209 / 8%); border-radius: 50%; box-shadow: 0 0 0 70px rgb(74 167 209 / 3%), 0 0 0 140px rgb(74 167 209 / 2%); content: ""; }
.login-brand-copy { position: relative; z-index: 1; max-width: 620px; margin: auto 0; padding: 70px 0; }
.login-brand-copy h1 { margin: 0; font-size: clamp(48px, 5.4vw, 78px); font-weight: 690; letter-spacing: -.055em; line-height: .99; }
.login-brand-copy h1 span { color: #57c8e8; }
.login-brand-copy > p:last-child { max-width: 520px; margin: 28px 0 0; color: var(--text-soft); font-size: 17px; line-height: 1.7; }
.security-note { position: relative; z-index: 1; display: flex; max-width: 440px; align-items: center; gap: 13px; color: var(--text-soft); }
.security-note-icon { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid rgb(46 203 129 / 24%); border-radius: 50%; background: rgb(46 203 129 / 8%); }
.security-note-icon::before { position: absolute; inset: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgb(46 203 129 / 60%); content: ""; }
.security-note div { display: flex; flex-direction: column; }
.security-note strong { color: #cbd8e4; font-size: 13px; }
.security-note span { font-size: 12px; }
.login-panel { display: flex; min-width: 0; align-items: center; justify-content: center; padding: 42px; background: rgb(8 12 19 / 78%); }
.login-card { width: 100%; max-width: 430px; min-width: 0; }
.login-card-heading { margin-bottom: 28px; }
.login-card-heading h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.035em; }
.login-card-heading > p:last-child { margin: 0; color: var(--text-soft); }
.alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid; border-radius: 9px; font-size: 13px; }
.alert-error { border-color: rgb(239 93 106 / 25%); background: rgb(239 93 106 / 8%); color: #f6b6bc; }
.alert-dot { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--red); }
.auth-form { display: grid; gap: 19px; }
.field { display: grid; gap: 8px; color: #cbd7e3; font-size: 13px; font-weight: 650; }
.field small { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.field input, .field select, .table-search input { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 9px; outline: 0; background: #0a111a; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.field input { padding: 0 13px; }
.field select { padding: 0 38px 0 13px; }
.field input::placeholder, .table-search input::placeholder { color: #4e6175; }
.field input:focus, .field select:focus, .table-search input:focus { border-color: #2c91c3; background: #0c1520; box-shadow: 0 0 0 3px rgb(34 184 207 / 9%); }
.input-wrap { position: relative; display: block; }
.input-wrap > svg { position: absolute; z-index: 1; top: 13px; left: 13px; width: 18px; height: 18px; color: #60758a; }
.input-wrap input { padding-left: 42px; }
.input-wrap input[type="password"], .input-wrap input[type="text"][data-password-input] { padding-right: 44px; }
.password-toggle { position: absolute; top: 5px; right: 5px; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; background: transparent; color: #60758a; cursor: pointer; }
.password-toggle:hover { color: #a5bbcf; }
.password-toggle svg { width: 18px; height: 18px; }
.button-login { width: 100%; min-height: 47px; margin-top: 4px; }
.button-login svg { margin-left: auto; }
.login-footnote { margin: 24px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }

/* Application shell */
.admin-page { overflow-x: hidden; }
.sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); flex-direction: column; border-right: 1px solid var(--border-soft); background: #080d15; }
.sidebar-top { display: flex; min-height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--border-soft); }
.sidebar-close { display: none; }
.sidebar-nav { overflow-y: auto; padding: 18px 13px 30px; scrollbar-width: thin; scrollbar-color: #223040 transparent; }
.nav-label { margin: 23px 11px 8px; color: #50657a; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.nav-label:first-of-type { margin-top: 26px; }
.nav-item { position: relative; display: flex; min-height: 40px; align-items: center; gap: 11px; margin: 3px 0; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; color: #8497aa; font-size: 13px; font-weight: 600; }
a.nav-item:hover { background: #0e1722; color: #c8d7e4; }
.nav-item.is-active { border-color: rgb(49 156 202 / 16%); background: linear-gradient(90deg, rgb(23 133 179 / 19%), rgb(23 133 179 / 5%)); color: #d9f4ff; }
.nav-item.is-active::before { position: absolute; left: -14px; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: #3bb7dd; box-shadow: 0 0 14px rgb(59 183 221 / 45%); content: ""; }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item small { margin-left: auto; color: #405367; font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }
.nav-item.is-disabled { cursor: not-allowed; opacity: .62; }
.nav-placeholder { width: 15px; height: 15px; flex: none; border: 1px solid #344557; border-radius: 4px; }
.sidebar-footer { display: flex; flex-direction: column; margin-top: auto; padding: 18px 24px; border-top: 1px solid var(--border-soft); color: #44566a; font-size: 10px; }
.sidebar-version { color: #6b8095; font-weight: 750; letter-spacing: .08em; }
.admin-workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; min-height: var(--topbar-height); align-items: center; justify-content: space-between; padding: 0 clamp(20px, 3vw, 42px); border-bottom: 1px solid var(--border-soft); background: rgb(7 11 18 / 88%); backdrop-filter: blur(16px); }
.topbar-title { display: flex; align-items: center; gap: 13px; }
.topbar-title h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.topbar-kicker { display: none; color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.menu-button { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.api-status { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.status-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgb(243 185 79 / 8%); }
.api-status.is-online .status-pulse { background: var(--green); box-shadow: 0 0 0 4px rgb(46 203 129 / 8%), 0 0 13px rgb(46 203 129 / 30%); }
.api-status.is-offline .status-pulse { background: var(--red); box-shadow: 0 0 0 4px rgb(239 93 106 / 8%); }
.account-menu { position: relative; }
.account-menu summary { display: flex; min-width: 170px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: pointer; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--surface); }
.account-menu summary > svg { width: 16px; height: 16px; margin-left: auto; color: var(--text-muted); }
.avatar { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid #28516a; border-radius: 9px; background: linear-gradient(145deg, #15364a, #102332); color: #aeeaff; font-size: 12px; font-weight: 800; }
.avatar-large { width: 42px; height: 42px; font-size: 14px; }
.account-copy { display: flex; min-width: 0; flex-direction: column; }
.account-copy strong { overflow: hidden; max-width: 115px; font-size: 12px; text-overflow: ellipsis; }
.account-copy small { color: var(--text-muted); font-size: 10px; text-transform: capitalize; }
.account-popover { position: absolute; top: calc(100% + 10px); right: 0; width: 240px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #0d141e; box-shadow: var(--shadow); }
.account-popover-identity { display: flex; align-items: center; gap: 11px; padding: 8px 8px 13px; border-bottom: 1px solid var(--border-soft); }
.account-popover-identity > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.account-popover-identity strong { overflow: hidden; text-overflow: ellipsis; }
.account-popover-identity small { color: var(--text-muted); text-transform: capitalize; }
.logout-button { display: flex; width: 100%; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: #e58c95; cursor: pointer; text-align: left; }
.logout-button:hover { background: rgb(239 93 106 / 8%); color: #ffadb5; }
.logout-button svg { width: 18px; height: 18px; }
.main-content { width: min(100%, 1580px); margin: 0 auto; padding: clamp(24px, 3vw, 42px); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h2 { margin: 0 0 5px; font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -.035em; }
.page-heading p:last-child { margin: 0; color: var(--text-soft); }

/* Dashboard */
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.metric-card { position: relative; display: flex; min-height: 154px; align-items: flex-start; gap: 15px; overflow: hidden; padding: 21px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(150deg, #101823, #0b111a); box-shadow: inset 0 1px rgb(255 255 255 / 2%); }
.metric-card::after { position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; border-radius: 50%; background: currentColor; content: ""; filter: blur(70px); opacity: .08; }
.metric-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border: 1px solid currentColor; border-radius: 10px; background: rgb(255 255 255 / 2%); }
.metric-icon svg { width: 20px; height: 20px; }
.metric-card > div:last-child { display: flex; flex-direction: column; }
.metric-card span { color: var(--text-soft); font-size: 12px; font-weight: 650; }
.metric-card strong { margin: 7px 0 1px; color: var(--text); font-size: 30px; line-height: 1.15; }
.metric-card small { color: var(--text-muted); font-size: 11px; }
.metric-blue { color: #5798f5; }.metric-green { color: var(--green); }.metric-amber { color: var(--amber); }.metric-cyan { color: var(--cyan); }
.metric-card .metric-status { margin-top: 12px; font-size: 17px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr); gap: 15px; margin-top: 15px; }
.panel { border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(155deg, #0e1620, #0a1018); box-shadow: inset 0 1px rgb(255 255 255 / 2%); }
.panel-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--border-soft); }
.panel-header h3 { margin: 0; font-size: 15px; }
.panel-header p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.quiet-badge { padding: 4px 8px; border: 1px solid var(--border); border-radius: 99px; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.empty-state { display: flex; min-height: 360px; align-items: center; justify-content: center; flex-direction: column; padding: 35px 20px; color: var(--text-soft); text-align: center; }
.empty-state.compact { min-height: 250px; }
.empty-state strong { margin-top: 14px; color: #bac9d6; font-size: 14px; }
.empty-state p { max-width: 420px; margin: 5px 0 18px; color: var(--text-muted); font-size: 12px; }
.empty-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: #506b80; }
.empty-icon svg { width: 23px; height: 23px; }
.coming-list { display: grid; gap: 0; margin: 0; padding: 9px 18px 17px; list-style: none; }
.coming-list li { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--border-soft); }
.coming-list li:last-child { border: 0; }
.coming-symbol { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: #71879c; font-size: 11px; font-weight: 800; }
.coming-list li > span:last-child { display: flex; flex-direction: column; }
.coming-list strong { font-size: 12px; }
.coming-list small { color: var(--text-muted); font-size: 10px; }

/* Applications */
.applications-panel { overflow: hidden; }
.applications-header { min-height: 78px; }
.table-search { position: relative; width: min(100%, 280px); }
.table-search svg { position: absolute; top: 12px; left: 12px; width: 17px; height: 17px; color: var(--text-muted); }
.table-search input { min-height: 41px; padding: 0 12px 0 38px; }
.loading-state { display: flex; min-height: 300px; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); }
.error-state { display: flex; min-height: 360px; align-items: center; justify-content: center; flex-direction: column; padding: 35px 20px; color: var(--text-soft); text-align: center; }
.error-state strong { margin-top: 14px; color: var(--red); font-size: 14px; }
.error-state p { max-width: 420px; margin: 5px 0 18px; color: var(--text-muted); font-size: 12px; }
.app-id-cell { display: flex; align-items: center; gap: 6px; }
.row-action-icon { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer; line-height: 1; }
.row-action-icon:hover { background: var(--surface-2); color: var(--text); }
.spinner { width: 20px; height: 20px; border: 2px solid #26384a; border-top-color: #48bde2; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.data-table th { padding: 12px 16px; border-bottom: 1px solid var(--border); background: #0a1119; color: #64798e; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 15px 16px; border-bottom: 1px solid var(--border-soft); color: #9dafc0; font-size: 12px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgb(30 56 76 / 10%); }
.application-name { display: flex; align-items: center; gap: 10px; }
.application-monogram { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #26485d; border-radius: 8px; background: #102536; color: #8edcf5; font-size: 11px; font-weight: 800; }
.application-name strong { color: #d8e3ed; font-size: 12px; }
.slug-code { padding: 4px 7px; border: 1px solid var(--border-soft); border-radius: 5px; background: #090f17; color: #8399ad; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: capitalize; }
.status-badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-active { border-color: rgb(46 203 129 / 20%); background: rgb(46 203 129 / 7%); color: #63dca0; }
.status-disabled { border-color: rgb(239 93 106 / 18%); background: rgb(239 93 106 / 6%); color: #e7838d; }
.maintenance-badge { color: var(--amber); }.maintenance-off { color: #53677b; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-action { min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: #8397aa; cursor: pointer; font-size: 11px; font-weight: 700; }
.row-action:hover { border-color: #35516a; background: var(--surface-3); color: #d4e2ee; }
.row-action.danger:hover { border-color: rgb(239 93 106 / 28%); background: rgb(239 93 106 / 7%); color: #ed929b; }
.row-action:disabled { cursor: not-allowed; opacity: .35; }

/* Dialogs and forms */
.modal { width: min(calc(100% - 30px), 650px); max-height: calc(100vh - 30px); padding: 0; overflow: visible; border: 1px solid #29394a; border-radius: 16px; background: #0d141e; color: var(--text); box-shadow: 0 30px 100px rgb(0 0 0 / 60%); }
.modal::backdrop { background: rgb(1 4 8 / 74%); backdrop-filter: blur(5px); }
.modal-card { display: block; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-header { display: flex; min-height: 84px; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; border-bottom: 1px solid var(--border-soft); }
.modal-header h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.modal-body { padding: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.field-full { grid-column: 1 / -1; }
.switch-field { display: flex; min-height: 66px; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.switch-field > span:first-child { display: flex; flex-direction: column; }
.switch-field strong { font-size: 12px; }.switch-field small { color: var(--text-muted); font-size: 11px; }
.switch-field input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 42px; height: 23px; flex: none; border: 1px solid #33465a; border-radius: 99px; background: #151f2b; transition: .16s ease; }
.switch::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #77899b; content: ""; transition: .16s ease; }
.switch-field input:checked + .switch { border-color: #258bb7; background: #12658a; }
.switch-field input:checked + .switch::after { background: #dff8ff; transform: translateX(19px); }
.switch-field input:focus-visible + .switch { outline: 2px solid #62c9ff; outline-offset: 3px; }
.form-error { margin: 0 22px 5px; padding: 10px 12px; border: 1px solid rgb(239 93 106 / 25%); border-radius: 8px; background: rgb(239 93 106 / 7%); color: #f2a1aa; font-size: 12px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 17px 22px; border-top: 1px solid var(--border-soft); }
.application-form { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; }
.application-form .modal-body { overflow-y: auto; overscroll-behavior: contain; }
.application-form .form-error { margin: 0 22px 14px; }
.offline-modal-card { display: grid; gap: 14px; margin-top: 2px; padding: 17px; border: 1px solid #29465b; border-radius: 12px; background: linear-gradient(145deg, rgb(18 39 53 / 72%), rgb(10 21 31 / 88%)); }
.offline-modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.offline-modal-heading h3 { margin: 2px 0 0; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.offline-modal-card .switch-field { min-height: 60px; background: rgb(7 16 24 / 45%); }
.offline-effective { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 9px; color: var(--text-muted); font-size: 12px; }
.offline-effective strong { color: #ef6c78; letter-spacing: .04em; }
.offline-effective strong.is-enabled { color: #57d7a0; }
.offline-effective p { width: 100%; margin: 0; color: #e3ac59; }
.offline-overrides { display: grid; grid-template-columns: 1fr 180px; gap: 12px; transition: opacity .18s ease; }
.offline-overrides.is-inherited { opacity: .52; }
.offline-overrides .switch-field { grid-column: 1 / -1; }
.offline-global-info { display: flex; grid-column: 1 / -1; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 11px 13px; border-radius: 9px; background: rgb(7 16 24 / 50%); font-size: 12px; }
.offline-global-info strong { color: var(--cyan); }
.offline-global-info small { width: 100%; color: var(--text-muted); }
.security-review-verdict { margin: 10px 0 2px; padding: 7px 10px; border-radius: 8px; background: rgb(7 16 24 / 50%); font-size: 12px; }
.security-review-verdict strong { color: var(--cyan); }
.security-review-note { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; }
.security-review-form { display: grid; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.security-review-form small { color: var(--text-muted); font-size: 11px; }
.security-review-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.integrity-mode-help { padding: 11px 13px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgb(7 16 24 / 50%); font-size: 12px; }
.integrity-mode-help p { margin: 0 0 6px; color: var(--text-muted); }
.integrity-mode-help p:last-child { margin-bottom: 0; }
.integrity-mode-help strong { color: var(--cyan); }
.integrity-mode-note { color: #e3ac59 !important; }
.device-sheet { margin-top: 6px; }
.device-sheet > summary { color: var(--cyan); cursor: pointer; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.device-sheet-group, .online-device-group { margin: 9px 0 4px; color: var(--text-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.device-sheet-list { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 12px; }
.device-sheet-list dt { color: var(--text-muted); }
.device-sheet-list dd { margin: 0; }
.key-prefix-preview { margin: 6px 0 0; padding: 9px 12px; border-radius: 9px; background: rgb(7 16 24 / 50%); color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .06em; }
.key-prefix-warning { margin: 6px 0 0; color: #e3ac59; font-size: 12px; }
.modal-small { width: min(calc(100% - 30px), 440px); }
.modal-small .modal-card { padding-top: 25px; }
.danger-symbol { display: grid; width: 48px; height: 48px; margin: 0 auto 13px; place-items: center; border: 1px solid rgb(239 93 106 / 25%); border-radius: 13px; background: rgb(239 93 106 / 8%); color: var(--red); }
.danger-symbol svg { width: 24px; height: 24px; }
.confirm-copy { padding: 0 30px 22px; text-align: center; }
.confirm-copy h2 { margin: 0 0 8px; font-size: 20px; }
.confirm-copy p { margin: 0; color: var(--text-soft); font-size: 12px; }
.confirm-copy strong { color: var(--text); }
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; width: min(calc(100% - 44px), 360px); gap: 9px; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 10px; background: #111a25; box-shadow: 0 18px 50px rgb(0 0 0 / 40%); animation: toast-in .2s ease both; }
.toast::before { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--green); content: ""; }
.toast.is-error::before { background: var(--red); }
.toast strong { display: block; font-size: 12px; }.toast span { color: var(--text-soft); font-size: 11px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Error */
.error-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 30%, rgb(22 124 169 / 12%), transparent 40%), var(--bg); }
.error-card { width: min(100%, 500px); padding: 40px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.error-card .brand-lockup { margin-bottom: 35px; }
.error-code { display: block; color: #3db9df; font-size: 54px; font-weight: 800; letter-spacing: -.05em; }
.error-card h1 { margin: 2px 0 8px; font-size: 24px; }.error-card p { margin: 0 0 25px; color: var(--text-soft); }

.mobile-backdrop { display: none; }

@media (max-width: 1180px) {
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .login-shell { grid-template-columns: minmax(0, 1fr); }
    .login-brand { min-height: 310px; padding: 32px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
    .login-brand-copy { padding: 52px 0 24px; }
    .login-brand-copy h1 { font-size: clamp(40px, 10vw, 62px); }
    .security-note { display: none; }
    .login-panel { padding: 52px 25px 70px; }

    .sidebar { transform: translateX(-101%); transition: transform .22s ease; }
    .sidebar.is-open { transform: none; }
    .sidebar-close, .menu-button { display: grid; }
    .mobile-backdrop { position: fixed; z-index: 40; inset: 0; background: rgb(0 0 0 / 62%); }
    .mobile-backdrop.is-visible { display: block; }
    .admin-workspace { margin-left: 0; }
    .topbar-kicker { display: block; }
}

@media (max-width: 680px) {
    .topbar { min-height: 68px; padding: 0 15px; }
    .topbar-actions { gap: 8px; }
    .api-status > span:last-child { display: none; }
    .account-menu summary { min-width: 0; padding: 4px; }
    .account-copy, .account-menu summary > svg { display: none; }
    .main-content { padding: 23px 15px 40px; }
    .page-heading { align-items: stretch; flex-direction: column; }
    .page-heading .button { align-self: flex-start; }
    .metrics-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 132px; }
    .applications-header { align-items: stretch; flex-direction: column; }
    .table-search { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .field-full { grid-column: auto; }
    .switch-field { grid-column: auto; }
    .modal-footer { align-items: stretch; flex-direction: column-reverse; }
    .modal-footer .button { width: 100%; }
    .toast-region { right: 15px; bottom: 15px; width: calc(100% - 30px); }
}

@media (max-width: 480px) {
    .login-brand { min-height: 270px; padding: 24px; }
    .login-brand-copy { padding-top: 42px; }
    .login-brand-copy > p:last-child { margin-top: 18px; font-size: 14px; }
    .login-panel { padding: 40px 20px 60px; }
    .login-card-heading h2 { font-size: 26px; }
    .panel-header { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Etapa 6 — Management pages (server-rendered) */
.manage-section { margin-top: 16px; padding: 18px 20px; }
.manage-section h3 { margin: 0 0 12px; font-size: 14px; }
.manage-section > .form-grid { margin-top: 0; }
.manage-section .form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.manage-notice { padding: 12px 16px; margin-bottom: 12px; border: 1px solid rgb(46 203 129 / 25%); border-radius: 10px; background: rgb(46 203 129 / 8%); color: #a8e5c6; font-size: 12px; }
.manage-error  { padding: 12px 16px; margin-bottom: 12px; border: 1px solid rgb(239 93 106 / 30%); border-radius: 10px; background: rgb(239 93 106 / 8%); color: #f0b0b6; font-size: 12px; }
.picker-panel { padding: 14px 18px; margin-bottom: 14px; }
.picker-panel form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.picker-panel .field { flex: 1 1 320px; }
.action-cluster { display: flex; flex-direction: column; gap: 6px; }
/* Direct children only. This is the layout for a one-line form dropped
   straight into a cluster -- rename, renew, revoke. A form inside a body panel
   lays itself out, and before this was scoped it won on specificity
   (.action-cluster form beats .admin-manage-form) and flattened every stacked
   panel into a single row of labels and far-away inputs. */
.action-cluster > form { display: flex; gap: 6px; flex-wrap: wrap; }
.action-cluster input, .action-cluster select { min-width: 0; flex: 1 1 auto; }
.action-cluster .button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.action-cluster-summary { list-style: none; cursor: pointer; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-3); color: #bfeeff; font-size: 11px; font-weight: 700; text-align: center; }
.action-cluster[open] .action-cluster-summary { background: #193047; }
.keys-callout { padding: 16px 20px; margin-top: 14px; border: 2px dashed rgb(243 185 79 / 55%); border-radius: 12px; background: rgb(243 185 79 / 6%); }
.keys-callout h3 { margin: 0 0 6px; color: #ffd88a; font-size: 14px; }
.keys-callout p { margin: 0 0 12px; color: var(--text-soft); font-size: 12px; }
.keys-block { user-select: all; white-space: pre-wrap; padding: 14px 16px; margin: 0; border-radius: 8px; background: #05080e; color: #d3e6f2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; overflow-x: auto; }
.pager { display: flex; gap: 12px; align-items: center; padding: 12px 18px; color: var(--text-soft); font-size: 12px; }
.hint { padding: 10px 18px; color: var(--text-muted); font-size: 11px; }
.meta-json { display: block; max-width: 420px; overflow-x: auto; padding: 6px 8px; border: 1px solid var(--border-soft); border-radius: 6px; background: #05080e; color: #86a4bd; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; white-space: nowrap; }
.fp-code { padding: 3px 6px; border: 1px solid var(--border-soft); border-radius: 5px; background: #05080e; color: #8edcf5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.subtle-id { display: block; color: var(--text-muted); font-size: 10px; margin-top: 2px; }

/* Etapa 7 — Days UX (chips + keys actions) */
.preset-row { grid-column: 1 / -1; }
.preset-row.is-disabled { opacity: .45; pointer-events: none; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-3); color: #bfeeff; cursor: pointer; font-size: 11px; font-weight: 700; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.chip:hover { border-color: #35516a; background: #193047; }
.chip:focus-visible { outline: 2px solid #62c9ff; outline-offset: 2px; }
.chip-lifetime { border-color: rgb(243 185 79 / 30%); background: rgb(243 185 79 / 8%); color: #ffd88a; }
.chip-lifetime:hover { border-color: rgb(243 185 79 / 55%); background: rgb(243 185 79 / 14%); }
.keys-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.keys-feedback { margin: 10px 0 0; color: #63dca0; font-size: 12px; }
.field small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; font-weight: 500; }
.field input:disabled { opacity: .55; cursor: not-allowed; background: #05080e; }

.app-id-field { display: grid; gap: 8px; }
.app-id-field .field-label { color: #cbd7e3; font-size: 13px; font-weight: 650; }
.app-id-row { display: flex; gap: 8px; align-items: stretch; }
.app-id-row input[readonly] { flex: 1; min-width: 0; min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: 9px; background: #05080e; color: var(--text-muted); font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 13px; cursor: default; opacity: .85; }
.app-id-copy { flex-shrink: 0; white-space: nowrap; }

/* Trash & lifecycle extras */
.filter-tabs { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-tab { padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-soft); font-size: 12px; font-weight: 650; text-decoration: none; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.filter-tab:hover { background: var(--surface-3); border-color: #35516a; color: var(--text); }
.filter-tab.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.button-xs { padding: 4px 10px; font-size: 11px; min-height: 28px; }
.action-divider { border: 0; border-top: 1px solid var(--border-soft); margin: 6px 0; width: 100%; }
.col-check { width: 36px; text-align: center; }
.col-check input[type="checkbox"] { cursor: pointer; }
.col-key { min-width: 180px; }
.key-masked { color: var(--text-muted); font-family: monospace; letter-spacing: 2px; }
.key-revealed { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 13px; color: var(--cyan); word-break: break-all; }
.key-unavailable { color: var(--text-muted); font-size: 11px; font-style: italic; }
.key-actions { display: flex; gap: 4px; margin-top: 4px; }
.input-with-action { display: flex; gap: 8px; align-items: stretch; }
.input-with-action input { flex: 1; min-width: 0; }
.key-search-result { margin-top: 12px; }
.search-no-result { padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-muted); }
.search-found { padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.search-found strong { display: block; margin-bottom: 8px; color: var(--green); }
.search-error { padding: 12px 16px; background: rgb(239 93 106 / 8%); border: 1px solid rgb(239 93 106 / 25%); border-radius: var(--radius); color: var(--red); }
.data-table.compact td { padding: 6px 12px; font-size: 12px; }
.bulk-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form { display: inline-flex; }

/* ── Docs pages ── */
.docs-container { display: flex; flex-direction: column; gap: 18px; }
.docs-code-block { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 8px; overflow-x: auto; }
.docs-code-block code, .docs-code-block pre { margin: 0; padding: 0; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12.5px; line-height: 1.6; color: var(--cyan); white-space: pre; flex: 1; }
.docs-code-block .button { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.docs-note { margin: 10px 0 0; color: var(--text-muted); font-size: 12px; }
.docs-warning { margin: 12px 0 0; padding: 10px 14px; background: rgb(243 185 79 / 8%); border: 1px solid rgb(243 185 79 / 20%); border-radius: 8px; color: var(--amber); font-size: 12.5px; }
.docs-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.docs-method { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.docs-method.post { background: rgb(46 203 129 / 14%); color: var(--green); }
.docs-method.get { background: rgb(59 130 246 / 14%); color: var(--blue); }
.docs-meta code { font-size: 13px; color: var(--text); }
.docs-endpoint h4 { margin: 16px 0 6px; font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; }
.docs-list { margin: 4px 0 0 18px; padding: 0; font-size: 13px; color: var(--text-soft); }
.docs-list li { margin-bottom: 4px; }

/* SDK badges and cards */
.sdk-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.sdk-badge.available { background: rgb(46 203 129 / 14%); color: var(--green); }
.sdk-badge.preview { background: rgb(234 179 8 / 14%); color: var(--yellow, #ca8a04); }
.sdk-badge.planned { background: rgb(59 130 246 / 14%); color: var(--blue); }
.sdk-planned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sdk-planned-card { padding: 16px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; }
.sdk-planned-card strong { display: block; margin-bottom: 4px; }
.sdk-planned-card p { margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; }

/* Integration flow */
.integration-flow { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.flow-step { flex: 1; min-width: 140px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; text-align: center; }
.flow-step strong { display: block; margin: 6px 0 4px; font-size: 13px; }
.flow-step p { margin: 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }
.flow-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgb(59 130 246 / 16%); color: var(--blue); border-radius: 50%; font-size: 12px; font-weight: 700; }
.flow-arrow { display: flex; align-items: center; color: var(--text-muted); font-size: 18px; padding-top: 30px; }

/* Settings */
.settings-heading { margin-bottom: 18px; }
.settings-global { display: grid; gap: 16px; }
.settings-card { overflow: hidden; }
.settings-card + .settings-card, .settings-applications { margin-top: 16px; }
.settings-card-header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--border-soft); }
.settings-card-header h3 { margin: 2px 0 0; font-size: 16px; }
.settings-card-header p { margin: 5px 0 0; color: var(--text-muted); font-size: 12px; }
.settings-card-kicker { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.settings-card-body { padding: 22px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.settings-grid-one { grid-template-columns: minmax(260px, 560px); }
.settings-security-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-card .field > span:first-child { min-height: 18px; }
.settings-card .field input, .settings-card .field select { padding: 0 13px; }
.settings-card-featured { border-color: rgb(34 184 207 / 35%); box-shadow: inset 0 1px rgb(255 255 255 / 3%), 0 0 32px rgb(34 184 207 / 4%); }
.settings-switch-wide { margin-bottom: 20px; }
.settings-duration-grid { max-width: 760px; margin-bottom: 18px; }
.settings-toggle-grid { margin-bottom: 18px; }
.signing-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.signing-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.signing-badge.is-ready { border-color: rgb(46 203 129 / 28%); background: rgb(46 203 129 / 8%); color: var(--green); }
.signing-badge.is-missing { border-color: rgb(239 93 106 / 28%); background: rgb(239 93 106 / 8%); color: var(--red); }
.unit-input { display: flex; min-width: 0; align-items: stretch; }
.unit-input input { min-width: 0; flex: 1; border-radius: 9px 0 0 9px !important; }
.unit-input b { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--border); border-left: 0; border-radius: 0 9px 9px 0; background: #111b27; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.settings-info { padding: 14px 16px; margin: 0; border: 1px solid rgb(34 184 207 / 16%); border-radius: 10px; background: rgb(34 184 207 / 5%); color: #a9c3d4; font-size: 12px; line-height: 1.55; }
.settings-global-footer { display: flex; justify-content: flex-end; padding: 4px 0 8px; }
.settings-global-footer .button { min-width: 190px; }
.settings-app-list { display: grid; gap: 1px; background: var(--border-soft); }
.settings-app { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.2fr) minmax(300px, 1.5fr) auto; gap: 16px; align-items: center; padding: 18px 22px; background: #0b121b; }
.settings-app:hover { background: #0d1620; }
.settings-app-name { min-width: 0; }
.settings-app-name strong, .settings-app-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-app-name strong { color: var(--text); font-size: 13px; }
.settings-app-name small { margin-top: 4px; color: var(--text-muted); font-size: 9px; }
.settings-app .switch-field { min-height: 54px; padding: 9px 12px; }
.settings-app-overrides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transition: opacity .15s ease; }
.settings-app-overrides.is-inherited { opacity: .42; }
.settings-system-note { padding: 16px 18px; border-left: 3px solid var(--cyan); border-radius: 0 9px 9px 0; background: rgb(34 184 207 / 5%); }
.settings-system-note strong { font-size: 13px; }
.settings-system-note p { margin: 7px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.account-popover-link { display: block; padding: 10px 12px; margin: 4px 0; border-radius: 8px; color: var(--text-soft); font-size: 12px; font-weight: 650; text-decoration: none; }
.account-popover-link:hover { background: var(--surface-3); color: var(--text); }
.account-page-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr); gap: 16px; }
.account-details { display: grid; gap: 1px; margin: 0; background: var(--border-soft); }
.account-details > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 20px; background: #0b121b; }
.account-details dt { color: var(--text-muted); font-size: 11px; }
.account-details dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 650; }
.admin-list-panel { margin-top: 16px; }

@media (max-width: 1100px) { .settings-security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-app { grid-template-columns: 1fr 1fr; } .settings-app-overrides { grid-column: 1 / -1; } }
@media (max-width: 900px) { .account-page-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .settings-grid, .settings-security-grid { grid-template-columns: 1fr; } .settings-card-header { align-items: flex-start; flex-direction: column; padding: 16px; } .settings-card-body { padding: 16px; } .settings-app { grid-template-columns: 1fr; padding: 16px; } .settings-app-overrides { grid-column: auto; grid-template-columns: 1fr; } .settings-app .button { width: 100%; } .settings-global-footer .button { width: 100%; } .offline-modal-heading { align-items: flex-start; flex-direction: column; } .offline-overrides { grid-template-columns: 1fr; } .offline-modal-card { padding: 13px; } }

@media (max-width: 680px) {
    .action-cluster > form { flex-direction: column; align-items: stretch; }
    .keys-actions { flex-direction: column; align-items: stretch; }
    .filter-tabs { gap: 6px; }
    .row-actions { flex-direction: column; gap: 4px; }
    .input-with-action { flex-direction: column; }
    .flow-arrow { display: none; }
    .integration-flow { flex-direction: column; }
}

/* ── Applications: cards, toolbar and detail hub ─────────────────────────── */
.app-toolbar { padding: 14px 16px; margin-bottom: 15px; }
.app-toolbar form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.app-toolbar .table-search { flex: 1 1 240px; min-width: 200px; }
.app-toolbar-field { flex: 0 1 auto; margin: 0; }
.app-toolbar-field select { min-width: 170px; }
.app-grid-count { margin: 0 0 10px; color: var(--text-muted); font-size: 11px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px; }
.app-grid-metrics { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 15px; }
.app-card { display: flex; flex-direction: column; gap: 13px; padding: 18px; border: 1px solid var(--border-soft); border-radius: var(--radius); background: linear-gradient(155deg, #0e1620, #0a1018); box-shadow: inset 0 1px rgb(255 255 255 / 2%); transition: border-color .15s ease, transform .15s ease; }
.app-card:hover { border-color: var(--border); transform: translateY(-1px); }
.app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-card-title h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.app-card-title h3 a { color: var(--text); text-decoration: none; }
.app-card-title h3 a:hover { text-decoration: underline; }
.app-card-title small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.app-version { flex: none; padding: 4px 9px; border: 1px solid var(--border); border-radius: 99px; color: var(--text-soft); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.app-version-lg { font-size: 12px; padding: 6px 12px; }
.app-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.app-card-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 13px 0; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.app-card-metrics > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-card-metrics dt { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.app-card-metrics dd { margin: 0; color: var(--text); font-size: 19px; font-weight: 650; line-height: 1.1; }
.app-card-metrics dd small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; font-weight: 500; }
.app-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.app-card-more { position: relative; }
.app-card-more-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.app-card-more-list a { padding: 6px 8px; border-radius: 7px; color: var(--text-soft); font-size: 12px; text-decoration: none; }
.app-card-more-list a:hover { background: var(--surface-3); color: var(--text); }
.app-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: 11px; }
.app-card-details { color: var(--text-soft); font-weight: 600; text-decoration: none; }
.app-card-details:hover { color: var(--text); }
.app-card-metric { gap: 4px; }
.app-card-metric span { color: var(--text-muted); font-size: 11px; font-weight: 650; }
.app-card-metric strong { color: var(--text); font-size: 26px; line-height: 1.15; }
.app-card-metric small { color: var(--text-muted); font-size: 10px; }
.app-detail-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.app-shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.app-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.app-shortcut:hover { border-color: var(--border); background: var(--surface-2); }
.app-shortcut strong { font-size: 13px; font-weight: 600; }
.app-shortcut span { color: var(--text-muted); font-size: 11px; }
.button-ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.button-ghost:hover { color: var(--text); }


/* Segurança -> Bloqueios: tabs, the shared-network warning, and the inline
   edit cluster inside each row's Ações menu. */
.block-tabs { display: flex; gap: 8px; margin: 0 0 15px; }
.block-tab { padding: 9px 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-muted); font-size: 12px; font-weight: 700; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.block-tab:hover { border-color: #2c91c3; color: var(--text); }
.block-tab.is-active { border-color: #2c91c3; background: #133047; color: #bfeeff; }
.block-warning { margin: 0 0 17px; padding: 11px 13px; border: 1px solid #6b4a1f; border-radius: 9px; background: #241a0d; color: #f0c98b; font-size: 12px; line-height: 1.5; }
.action-cluster-body { display: grid; gap: 10px; max-width: 420px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); }
.action-cluster-body .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.action-cluster-body .field { font-size: 11px; }
.action-cluster-body .field input, .action-cluster-body .field select { min-height: 34px; font-size: 12px; }
.field-check { display: flex; align-items: center; gap: 9px; }
.field-check input { width: auto; min-height: 0; }
.field-check span { color: var(--text-muted); font-size: 12px; font-weight: 500; }

@media (max-width: 720px) {
    .block-tabs { flex-direction: column; }
    .action-cluster-body .form-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Select — one component for every dropdown in the panel.
   The native <select> stays in the DOM (it is what submits); it is just
   moved out of sight. The panel is portalled to <body> and positioned
   fixed, so no `overflow` ancestor and no table scroller can clip it.
   =================================================================== */
.asel { position: relative; display: block; width: 100%; min-width: 0; }
.asel-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; opacity: 0; pointer-events: none; }
.asel-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px 0 13px; border: 1px solid var(--border); border-radius: 9px; background: #0a111a; color: var(--text); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.asel-button:hover:not(:disabled) { border-color: #2c6d8f; }
.asel-button:focus-visible { border-color: #2c91c3; box-shadow: 0 0 0 3px rgb(34 184 207 / 9%); outline: 0; }
.asel.is-open .asel-button { border-color: #2c91c3; background: #0c1520; }
.asel-button:disabled { opacity: .55; cursor: not-allowed; }
.asel-value { overflow: hidden; flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.asel-value.is-placeholder { color: var(--text-muted); }
.asel-caret { flex: none; width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s ease; }
.asel.is-open .asel-caret { transform: rotate(180deg); }

.asel-panel { position: fixed; z-index: 2000; display: flex; overflow: hidden; flex-direction: column; max-width: calc(100vw - 24px); border: 1px solid #2a3b4e; border-radius: 11px; background: var(--surface-2); box-shadow: 0 18px 44px rgb(0 0 0 / 55%); }
.asel-search { padding: 8px; border-bottom: 1px solid var(--border-soft); }
.asel-search input { width: 100%; min-height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: #0a111a; color: var(--text); font-size: 12px; }
.asel-search input:focus { border-color: #2c91c3; outline: 0; }
.asel-list { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.asel-list:focus { outline: 0; }
.asel-option { padding: 8px 10px; border-radius: 7px; color: var(--text-soft); font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.asel-option.is-active { background: var(--surface-3); color: var(--text); }
.asel-option.is-selected { color: #bfeeff; font-weight: 650; }
.asel-option.is-selected::after { content: "✓"; float: right; margin-left: 8px; }
.asel-option.is-disabled { opacity: .45; cursor: not-allowed; }
.asel-empty { margin: 0; padding: 14px 12px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* A field wrapper keeps its label above the control. */
.field .asel { margin: 0; }

/* ===================================================================
   Applications — a real card grid at every width.
   =================================================================== */
.app-toolbar { padding: 12px 14px; margin-bottom: 15px; }
.app-toolbar form { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.app-toolbar .table-search { flex: 1 1 260px; min-width: 180px; margin: 0; }
.app-toolbar-field { flex: 0 1 190px; min-width: 150px; margin: 0; }
.app-toolbar .button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }

.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.app-card { gap: 12px; padding: 17px; }
/* Long names wrap inside the card; long slugs get an ellipsis instead. */
.app-card-title { min-width: 0; }
.app-card-title h3 { overflow-wrap: anywhere; }
.app-card-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Usuários and Chaves are the two numbers that matter, so they get boxes;
   Assinaturas and Dispositivos ride along underneath, compact. */
.app-card-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 0; border: 0; }
.app-card-metrics > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgb(255 255 255 / 2%); }
.app-card-metrics > div.is-compact { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 11px; background: none; }
.app-card-metrics dt { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.app-card-metrics dd { margin: 0; color: var(--text); font-size: 21px; font-weight: 650; line-height: 1.1; }
.app-card-metrics > div.is-compact dd { font-size: 14px; }
.app-card-metrics dd small { margin-left: 5px; color: var(--text-muted); font-size: 10px; font-weight: 500; }
.app-card-metrics > div:not(.is-compact) dd small { display: block; margin: 2px 0 0; }

.app-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.app-card-actions .button { flex: 0 0 auto; }
.app-card-more { position: relative; flex: 0 0 auto; }
.app-card-more > summary { min-height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* The menu floats over the card instead of pushing it taller. */
.app-card-more[open] .app-card-more-list { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 190px; box-shadow: 0 16px 38px rgb(0 0 0 / 50%); }
.app-card-foot { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border-soft); }

@media (max-width: 1100px) {
    .app-toolbar-field { flex: 1 1 160px; }
}
@media (max-width: 620px) {
    .app-grid { grid-template-columns: 1fr; }
    .app-toolbar form { flex-direction: column; align-items: stretch; }
    /* In a column, flex-basis is a HEIGHT: leaving the row values here gave the
       search box 260px of height and each filter 190px, which is what made the
       toolbar hundreds of pixels tall with nothing in it. */
    .app-toolbar .table-search,
    .app-toolbar-field { flex: 0 0 auto; }
    .app-toolbar .button { width: 100%; }
    .app-card-actions .button { flex: 1 1 auto; text-align: center; justify-content: center; }
}

/* ===================================================================
   Discord — the same card grid as Applications, with the configuration
   folded away until it is asked for. Reuses .app-grid / .app-card and
   the shared badges; nothing here redefines a colour or a radius.
   =================================================================== */
.discord-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }
.discord-summary > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: rgb(255 255 255 / 2%); }
.discord-summary dt { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.discord-summary dd { margin: 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; font-weight: 600; }

.discord-empty { padding: 15px 13px; border: 1px dashed var(--border); border-radius: 11px; text-align: center; }
.discord-empty strong { display: block; color: var(--text-soft); font-size: 13px; }
.discord-empty p { margin: 5px 0 0; color: var(--text-muted); font-size: 11px; }

.discord-config { margin-top: auto; }
/* Collapsed, a card is one cell of the grid. Open it and it takes the whole
   row, which is the only way the event toggles get more than one column
   without making every card wide. Browsers without :has() simply keep the
   narrow card, which still lays out correctly. */
.app-card:has(.discord-config[open]) { grid-column: 1 / -1; }
.discord-config-summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; }
.discord-config-summary::-webkit-details-marker { display: none; }
.discord-config[open] > .discord-config-summary { margin-bottom: 12px; }
.discord-config-body { display: grid; gap: 14px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.discord-form { display: grid; gap: 10px; margin: 0; }
/* The field and its button share a row: the input is never on one side of the
   screen with Salvar somewhere else. */
.discord-webhook-row { display: flex; align-items: flex-end; gap: 8px; }
.discord-webhook-row .field { flex: 1 1 auto; min-width: 0; margin: 0; }
.discord-webhook-row .button { flex: 0 0 auto; min-height: 44px; }
.discord-hint { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.discord-section-title { margin: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.discord-group-label { margin: 6px 0 0; color: #63c7eb; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.discord-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }
.discord-event-grid .switch-field { grid-column: auto; margin: 0; padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgb(255 255 255 / 2%); font-size: 12px; }
.discord-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.discord-actions form { margin: 0; }

@media (max-width: 620px) {
    .discord-summary { grid-template-columns: 1fr; }
    .discord-event-grid { grid-template-columns: 1fr; }
    .discord-webhook-row { flex-direction: column; align-items: stretch; }
    .discord-webhook-row .button { width: 100%; }
}

/* Segurança -> Integridade do cliente: the status strip and the pager. */
.integrity-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 15px; }
.integrity-status .status-badge { font-size: 10px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px; border-top: 1px solid var(--border-soft); color: var(--text-muted); font-size: 12px; }
/* Presence is a temporal value; the strip says when it was last read. */
.auto-refresh-note { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; color: var(--text-muted); font-size: 11px; }
.auto-refresh-note b { color: var(--text-soft); font-weight: 650; }

/* Aplicações -> Modo offline. Same shape as the Discord card: collapsed it is
   one grid cell, open it takes the whole row so the form and the recent-grants
   table have room. Browsers without :has() keep the narrow card, which still
   lays out correctly. */
.offline-explainer .settings-card-body { display: grid; gap: 8px; }
.offline-explainer .settings-info { margin: 0; font-size: 11px; line-height: 1.55; }
.offline-config { margin-top: auto; }
.app-card:has(.offline-config[open]) { grid-column: 1 / -1; }
.offline-config-summary { display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 650; }
.offline-config-summary::-webkit-details-marker { display: none; }
.offline-config[open] > .offline-config-summary { margin-bottom: 12px; }
.offline-form { display: grid; gap: 10px; margin: 0; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.offline-form .field { margin: 0; }
/* Two switches side by side rather than one per row: the global .switch-field
   rule spans the whole row, which left a tall column of single toggles. */
.offline-form .switch-field { grid-column: auto; margin: 0; padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: rgb(255 255 255 / 2%); font-size: 12px; }
.offline-custom { display: grid; gap: 5px; margin: 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; }
.offline-custom legend { padding: 0 5px; color: var(--text-muted); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.offline-custom .unit-input { max-width: 220px; }
.offline-custom b { display: inline-flex; }
.offline-custom b select { min-height: 32px; border: 0; background: transparent; font-size: 11px; }
.offline-stop { border-color: rgb(233 168 96 / 45%) !important; }
.offline-stop-note { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.offline-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.offline-recent { margin-top: 14px; }
.offline-recent h4 { margin: 0 0 8px; color: var(--text); font-size: 12px; font-weight: 700; }
.offline-table { font-size: 11px; }
.offline-table td small { color: var(--text-muted); }

@media (max-width: 620px) {
    .offline-form { grid-template-columns: 1fr; }
    .offline-custom .unit-input { max-width: none; }
}

/* Segurança -> Eventos. The event cell expands in place, so a row stays one
   line until the operator asks for the detail. */
.security-table { font-size: 11px; }
.security-table td { vertical-align: top; }
.security-table td small { color: var(--text-muted); }
.security-detail > summary { list-style: none; cursor: pointer; font-weight: 600; }
.security-detail > summary::-webkit-details-marker { display: none; }
.security-detail[open] > summary { margin-bottom: 7px; }
.security-detail-body { padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); }
.security-detail-body p { margin: 0 0 7px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.security-detail-body dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 0; }
.security-detail-body dt { color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.security-detail-body dd { margin: 1px 0 0; color: var(--text); font-size: 11px; word-break: break-word; }

@media (max-width: 900px) {
    .security-table { font-size: 10px; }
    .security-detail-body dl { grid-template-columns: 1fr; }
}

/* Sistema -> Administradores. The manage panel used to be unlabelled inputs in
   a table cell: two bare selects with no way to tell which one was the status.
   Each control now says what it does, and the destructive action is separated
   and marked. */
/* The row panel is a dialog now, not an expanding cell. `.admin-manage-body`
   keeps its stacked layout; what changes is where it lives. */
.modal-manage { width: min(calc(100% - 30px), 430px); }
.modal-manage .modal-header { min-height: 0; padding: 16px 18px; }
.modal-manage .modal-header h2 { font-size: 16px; }
.modal-manage .admin-manage-body { min-width: 0; max-width: none; padding: 16px 18px; border: 0; border-radius: 0; background: transparent; }
.admin-manage-open { width: 100%; }
.admin-manage { position: relative; }
.admin-list-panel .data-table td { vertical-align: top; }
.admin-manage-body { display: grid; gap: 11px; min-width: 260px; max-width: 340px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); }
.admin-manage-form { display: grid; gap: 8px; margin: 0; }
.admin-manage-form .field { margin: 0; }
.admin-manage-form .field > span { font-size: 10px; }
.admin-manage-form small { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.admin-manage-title { margin: 0; color: var(--text); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.admin-manage-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.admin-manage-actions .button { flex: 1 1 auto; }
.admin-app-grid { display: grid; gap: 5px; }
/* Two switches side by side rather than one per row: the global .switch-field
   rule spans the whole row, which left a tall column of single toggles. */
.admin-app-grid .switch-field { grid-column: auto; margin: 0; padding: 6px 9px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 11px; }
.admin-danger { padding: 9px 10px; border: 1px solid rgb(231 76 60 / 35%); border-radius: 9px; }
.admin-danger .admin-manage-title { color: #e8907f; }
.admin-tag { display: block; color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 760px) {
    .admin-manage-body { min-width: 0; max-width: none; }
}

/* Operação -> Online agora. Totals strip, per-product chips, one row per
   session. Status is a marker AND a word, never colour alone. */
.online-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin: 0 0 15px; }
.online-total { display: grid; gap: 3px; padding: 14px 15px; border: 1px solid var(--border-soft); border-radius: 13px; background: var(--surface-2); }
.online-total-value { color: var(--text); font-size: 26px; font-weight: 760; line-height: 1; }
.online-total-label { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }

.online-products { margin-bottom: 15px; }
.online-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 9px; }
.online-product { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--surface-2); color: inherit; text-decoration: none; }
.online-product:hover { border-color: var(--border); }
.online-product.is-selected { border-color: #63c7eb; }
.online-product strong { font-size: 12px; }
.online-product small { color: var(--text-muted); font-size: 10px; }
.online-product-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.online-chip { padding: 2px 7px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.online-chip-on { border-color: rgb(46 204 113 / 45%); color: #7fe0a6; }
.online-chip-away { border-color: rgb(230 126 34 / 45%); color: #e8b57f; }

.online-table { font-size: 11px; }
.online-table td { vertical-align: top; }
.online-table td small { display: block; color: var(--text-muted); font-size: 10px; }
.online-device > summary { list-style: none; cursor: pointer; font-weight: 600; }
.online-device > summary::-webkit-details-marker { display: none; }
.online-device[open] > summary { margin-bottom: 6px; }
.online-device-body { padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface-2); }
.online-device-body dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin: 0; }
.online-device-body dt { color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.online-device-body dd { margin: 1px 0 0; color: var(--text); font-size: 11px; word-break: break-word; }

@media (max-width: 900px) {
    .online-table { font-size: 10px; }
    .online-device-body dl { grid-template-columns: 1fr; }
}
.dashboard-online-note { margin: -8px 0 15px; font-size: 11px; }