@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root { --ink:#16202b; --muted:#70808f; --line:#e5eaf0; --paper:#ffffff; --canvas:#f4f7fb; --navy:#142333; --blue:#2f6fed; --green:#1ca47a; --amber:#d58a18; --violet:#7456d8; --red:#d95656; --shadow:0 16px 40px rgba(22,32,43,.07); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--canvas); }
body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.5 'DM Sans',system-ui,sans-serif; }
* { scrollbar-width:thin; scrollbar-color:rgba(121,145,166,.55) transparent; }
*::-webkit-scrollbar { width:9px; height:9px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:rgba(121,145,166,.55); background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(121,145,166,.8); background-clip:padding-box; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:20; width:260px; color:#d8e3ed; background:linear-gradient(180deg,#152a3d 0%,#102132 100%); display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.06); overflow:hidden; }
.brand { display:flex; align-items:center; gap:12px; padding:26px 24px 24px; color:#fff; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,#5e8cff,#2f6fed); box-shadow:0 10px 22px rgba(47,111,237,.3); }
.brand-mark svg { width:21px; height:21px; }
.brand strong { font:800 17px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; }
.brand small { display:block; margin-top:4px; color:#8ea5b8; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.nav-scroll { flex:1 1 auto; overflow:auto; padding:10px 14px 24px; scrollbar-color:rgba(142,165,184,.35) transparent; }
.nav-scroll::-webkit-scrollbar { width:6px; }
.nav-scroll::-webkit-scrollbar-thumb { border:0; background:rgba(142,165,184,.28); }
.nav-label { padding:20px 12px 8px; color:#718a9f; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.nav-link { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border:1px solid transparent; border-radius:10px; color:#aebecd; transition:.18s ease; }
.nav-link:hover { color:#fff; background:rgba(255,255,255,.06); }
.nav-link.active { color:#fff; background:rgba(70,127,239,.22); border-color:rgba(125,164,255,.18); box-shadow:inset 3px 0 0 #6d98ff; }
.nav-icon { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:8px; color:#9fb2c4; background:rgba(255,255,255,.025); }
.nav-link svg { width:18px; height:18px; opacity:.96; }
.nav-link.active .nav-icon,.nav-link:hover .nav-icon { color:#fff; background:rgba(255,255,255,.08); }
.sidebar-footer { margin-top:auto; padding:16px; border-top:1px solid rgba(255,255,255,.07); }
.user-mini { display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; background:rgba(255,255,255,.05); }
.avatar { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#dbe7ff; background:#2f6fed; font-weight:700; }
.user-mini strong { display:block; color:#fff; font-size:12px; }
.user-mini span { display:block; margin-top:2px; color:#8ea5b8; font-size:11px; }
.main { width:calc(100% - 260px); margin-left:260px; min-width:0; }
.topbar { position:sticky; top:0; z-index:10; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:rgba(244,247,251,.88); border-bottom:1px solid rgba(229,234,240,.8); backdrop-filter:blur(14px); }
.topbar-left { display:flex; align-items:center; gap:14px; }
.eyebrow { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.topbar h1 { margin:2px 0 0; font:700 18px 'Plus Jakarta Sans',sans-serif; letter-spacing:-.02em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.content { max-width:1500px; padding:34px; margin:0 auto; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.page-head h2 { margin:0; font:800 28px/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing:-.035em; }
.page-head p { margin:8px 0 0; color:var(--muted); }
.actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 15px; border:1px solid transparent; border-radius:9px; color:#fff; background:var(--blue); font-weight:700; transition:.18s ease; box-shadow:0 7px 16px rgba(47,111,237,.16); }
.btn:hover { transform:translateY(-1px); filter:brightness(1.04); }
.btn svg { width:16px; height:16px; }
.btn.secondary { color:var(--ink); background:#fff; border-color:var(--line); box-shadow:none; }
.btn.danger { background:var(--red); box-shadow:0 7px 16px rgba(217,86,86,.16); }
.btn.icon-only { width:40px; min-width:40px; padding:0; }
.btn.small { min-height:34px; padding:0 11px; border-radius:8px; font-size:12px; }
.flash { display:flex; align-items:center; gap:10px; padding:13px 15px; margin-bottom:18px; border:1px solid #cfe2ff; border-radius:10px; color:#24538d; background:#eef6ff; }
.flash.error { color:#8d3131; border-color:#f2caca; background:#fff1f1; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.metric { min-height:140px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:var(--shadow); }
.metric-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-weight:600; }
.metric-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; }
.metric-icon.blue { color:#336be1; background:#edf3ff; }.metric-icon.green { color:#158b67; background:#eafaf4; }.metric-icon.amber { color:#b8730e; background:#fff7e8; }.metric-icon.violet { color:#6446c4; background:#f1edff; }.metric-icon svg,.tab-icon svg { width:18px; height:18px; display:block; }
.metric-value { margin-top:19px; font:800 30px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; }
.metric-note { margin-top:8px; color:var(--muted); font-size:12px; }
.grid-2 { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); gap:20px; }
.panel { border:1px solid var(--line); border-radius:14px; background:var(--paper); box-shadow:var(--shadow); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--line); }
.panel-head h3 { margin:0; font:700 16px 'Plus Jakarta Sans',sans-serif; }
.panel-head p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.panel-body { padding:22px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th { padding:13px 20px; color:#8a98a7; background:#fbfcfe; font-size:10px; font-weight:800; letter-spacing:.08em; text-align:left; text-transform:uppercase; white-space:nowrap; }
td { padding:16px 20px; border-top:1px solid #edf0f4; vertical-align:middle; }
tr:hover td { background:#fcfdff; }
.cell-title { display:flex; align-items:center; gap:11px; }
.cell-title strong { display:block; font-weight:700; }.cell-title small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.status { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.status::before { width:6px; height:6px; content:""; border-radius:50%; background:currentColor; }.status.ok { color:#16805e; background:#e8f8f1; }.status.warn { color:#a97116; background:#fff5df; }.status.off { color:#7f8b98; background:#eef1f4; }.status.bad { color:#b34444; background:#fff0f0; }
.table-actions { display:flex; gap:7px; align-items:center; justify-content:flex-end; }
.empty { padding:44px 22px; color:var(--muted); text-align:center; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field { display:flex; flex-direction:column; gap:7px; }.field.full { grid-column:1/-1; }.field label { color:#516170; font-size:12px; font-weight:700; }.field small { color:var(--muted); font-size:11px; }
input,select,textarea { width:100%; min-height:44px; padding:0 13px; outline:none; border:1px solid #dce3eb; border-radius:9px; color:var(--ink); background:#fff; transition:.16s ease; }
input[type=file] { min-height:52px; padding:8px; cursor:pointer; color:#637487; background:#fbfcfe; }
input[type=file]::file-selector-button { height:34px; margin-right:12px; padding:0 13px; border:1px solid #d9e2ec; border-radius:8px; color:#243447; background:#fff; font-weight:700; cursor:pointer; transition:.16s ease; }
input[type=file]::file-selector-button:hover { border-color:#bfcce0; background:#f5f8fc; }
textarea { min-height:110px; padding-top:11px; resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { border-color:#6e98ee; box-shadow:0 0 0 3px rgba(47,111,237,.11); }
.check { display:flex; align-items:center; gap:8px; min-height:44px; color:#516170; font-size:13px; font-weight:600; }.check input { width:17px; min-height:17px; accent-color:var(--blue); }
.form-footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:10px; margin-top:22px; border-top:1px solid var(--line); }
.notice { display:flex; gap:11px; padding:14px; border:1px solid #dce8ff; border-radius:10px; color:#47658b; background:#f5f8ff; font-size:12px; }.notice svg { flex:0 0 auto; width:17px; margin-top:1px; }
.split { display:flex; gap:20px; align-items:flex-start; }.split > * { flex:1; min-width:0; }
.search { display:flex; gap:9px; }.search input { min-width:240px; }
.pagination { padding:18px 20px; border-top:1px solid var(--line); }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:30px; background:linear-gradient(135deg,#eef4ff 0%,#f6f8fb 48%,#edf8f4 100%); }
.auth-card { width:min(100%,460px); padding:36px; border:1px solid rgba(255,255,255,.9); border-radius:20px; background:rgba(255,255,255,.92); box-shadow:0 24px 70px rgba(26,55,84,.13); backdrop-filter:blur(18px); }.auth-card .brand { padding:0; color:var(--ink); }.auth-card .brand strong { color:var(--ink); }.auth-card .brand small { color:var(--muted); }.auth-card h1 { margin:32px 0 7px; font:800 26px 'Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; }.auth-card > p { margin:0 0 25px; color:var(--muted); }.auth-card .btn { width:100%; margin-top:8px; }
.install-page { min-height:100vh; display:grid; place-items:center; padding:30px; background:#f4f7fb; }.install-card { width:min(100%,880px); padding:35px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }.install-card h1 { margin:0; font:800 28px 'Plus Jakarta Sans',sans-serif; }.install-card > p { margin:8px 0 26px; color:var(--muted); }.requirements { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0 26px; }.requirement { display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:#fbfcfe; }.requirement .status { padding:4px 8px; }.install-card .form-grid { margin-top:24px; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:20px; background:rgba(12,25,39,.5); backdrop-filter:blur(5px); }.modal-backdrop.open { display:grid; }.modal { width:min(100%,520px); padding:24px; border-radius:16px; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,.2); }.modal-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }.modal-head h3 { margin:0; font:800 17px 'Plus Jakarta Sans',sans-serif; }.modal p { color:var(--muted); }
.api-doc-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }
.api-doc-nav { position:sticky; top:98px; padding:14px; }
.api-doc-nav a { display:flex; align-items:center; min-height:38px; padding:0 10px; border-radius:8px; color:#617184; font-weight:700; }
.api-doc-nav a:hover { color:var(--ink); background:#f6f8fb; }
.api-doc-section { display:grid; gap:16px; }
.endpoint-card { border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.endpoint-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line); }
.endpoint-head h3 { margin:0; font:800 15px 'Plus Jakarta Sans',sans-serif; }
.endpoint-head p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.method { display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border-radius:7px; color:#fff; background:#233447; font-size:11px; font-weight:800; }
.method.get { background:#1f7a5c; }.method.post { background:#2f6fed; }.method.put { background:#936f18; }.method.delete { background:#c94f4f; }
.code-tabs { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.code-block { min-width:0; padding:18px 20px; }
.code-block + .code-block { border-left:1px solid var(--line); }
.code-block strong { display:block; margin-bottom:10px; color:#617184; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
pre { margin:0; overflow:auto; padding:14px; border-radius:10px; color:#dbeafe; background:#101d2b; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.migration-preview { min-height:58px; padding:14px; border:1px dashed #cfd9e6; border-radius:10px; background:#fbfcfe; }
.migration-preview strong { display:block; margin-bottom:8px; font:800 13px 'Plus Jakarta Sans',sans-serif; }
.migration-preview ul { display:grid; gap:6px; padding:0; margin:0; list-style:none; }
.migration-preview li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border:1px solid #edf0f4; border-radius:8px; background:#fff; }
.migration-preview li span { color:var(--muted); font-size:12px; }
.error-text { color:var(--red); font-weight:700; }
.mobile-toggle { display:none; }
@media (max-width:1100px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.grid-2 { grid-template-columns:1fr; } }
@media (max-width:760px) { .sidebar { transform:translateX(-100%); transition:.2s ease; }.sidebar.open { transform:translateX(0); }.main { width:100%; margin-left:0; }.topbar { height:66px; padding:0 18px; }.mobile-toggle { display:inline-flex; }.content { padding:24px 18px; }.page-head { align-items:flex-start; flex-direction:column; }.page-head h2 { font-size:24px; }.metrics { grid-template-columns:1fr 1fr; gap:11px; }.metric { min-height:124px; padding:15px; }.metric-value { font-size:24px; }.form-grid,.requirements { grid-template-columns:1fr; }.field.full { grid-column:auto; }.panel-body { padding:17px; }.topbar-actions .hide-mobile { display:none; }.search { width:100%; }.search input { min-width:0; }.auth-card,.install-card { padding:24px; } }

/* Premium surfaces */
.modal-wide { width:min(100%,760px); max-height:min(88vh,820px); overflow:auto; }
.muted-text { color:var(--muted); font-size:12px; }
.tag { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border:1px solid #e4eaf1; border-radius:7px; color:#607182; background:#f8fafc; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.tag-list { display:flex; flex-wrap:wrap; gap:5px; max-width:340px; }
.check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fbfcfe; }
.check-grid .check { min-height:52px; align-items:flex-start; padding:8px; border:1px solid transparent; border-radius:8px; background:#fff; }
.check-grid .check:has(input:checked) { border-color:#cbdcff; background:#f4f7ff; }
.check-grid .check span { display:block; min-width:0; }.check-grid .check strong { display:block; color:var(--ink); font-size:11px; }.check-grid .check small { display:block; margin-top:2px; color:var(--muted); font-size:10px; font-weight:400; }
.secret-banner { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; margin-bottom:20px; border:1px solid #f0d89c; border-radius:12px; background:#fff9e9; }.secret-banner strong,.secret-banner span { display:block; }.secret-banner span { margin-top:3px; color:#796326; font-size:12px; }.copy-line,.copy-field { display:flex; align-items:center; gap:8px; min-width:0; }.copy-line code { max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.copy-field input { min-width:0; }.copied { color:#16805e!important; border-color:#bce4d3!important; background:#effbf5!important; }
.settings-shell { display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start; }.settings-nav { position:sticky; top:98px; overflow:hidden; }.settings-nav-head { display:flex; align-items:center; gap:11px; padding:18px; border-bottom:1px solid var(--line); }.settings-nav-head strong,.settings-nav-head small { display:block; }.settings-nav-head strong { font-size:12px; }.settings-nav-head small { margin-top:3px; color:var(--muted); font-size:11px; }.settings-tabs { padding:10px; }.settings-tabs button { display:flex; align-items:center; gap:10px; width:100%; min-height:58px; padding:9px 10px; border:1px solid transparent; border-radius:9px; color:var(--muted); background:transparent; text-align:left; }.settings-tabs button:hover { color:var(--ink); background:#f7f9fc; }.settings-tabs button.active { color:var(--ink); border-color:#dbe5fb; background:#f2f6ff; box-shadow:inset 3px 0 0 var(--blue); }.settings-tabs button strong,.settings-tabs button small { display:block; }.settings-tabs button strong { color:inherit; font-size:12px; }.settings-tabs button small { margin-top:2px; color:var(--muted); font-size:10px; }.tab-icon { width:28px; height:28px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; color:var(--blue); background:#eaf1ff; font-weight:800; }.settings-panel { display:none; }.settings-panel.active { display:block; animation:panel-in .2s ease; }.compact-panel { margin-top:16px; }.inline-test { display:flex; align-items:end; gap:14px; }.inline-test .field { flex:1; }.brand-editor { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr); gap:20px; align-items:stretch; }.brand-preview { display:flex; align-items:center; gap:12px; min-height:104px; padding:18px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(135deg,#f3f6ff,#fff); }.brand-preview img { width:54px; height:54px; object-fit:contain; border-radius:10px; }.brand-preview-mark { width:54px; height:54px; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--preview-color); font:800 16px 'Plus Jakarta Sans',sans-serif; }.brand-preview strong,.brand-preview small { display:block; }.brand-preview strong { font:800 16px 'Plus Jakarta Sans',sans-serif; }.brand-preview small { margin-top:4px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }.color-input { display:grid; grid-template-columns:56px minmax(0,1fr); gap:8px; }.color-input input[type=color] { height:44px; padding:4px; cursor:pointer; }.color-input input[type=text] { min-width:0; }.settings-content .panel { box-shadow:var(--shadow); }
.portal-body { background:#f4f7fb; }.portal-shell { width:min(100%,1240px); padding:28px 24px 36px; margin:0 auto; }.portal-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:58px; }.portal-brand { display:flex; align-items:center; gap:11px; }.portal-brand img { width:42px; height:42px; object-fit:contain; border-radius:11px; }.portal-brand-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--blue); font:800 14px 'Plus Jakarta Sans',sans-serif; }.portal-brand strong,.portal-brand small { display:block; }.portal-brand strong { font:800 16px 'Plus Jakarta Sans',sans-serif; }.portal-brand small { margin-top:3px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.portal-secure { display:flex; align-items:center; gap:7px; color:#16805e; font-size:12px; font-weight:700; }.portal-secure svg { width:16px; height:16px; }.portal-hero { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:48px 0 30px; }.portal-hero h1 { max-width:650px; margin:6px 0 0; font:800 36px/1.12 'Plus Jakarta Sans',sans-serif; letter-spacing:-.04em; }.portal-hero p { max-width:590px; margin:10px 0 0; color:var(--muted); font-size:15px; }.portal-hero-badge { min-width:190px; padding:16px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }.portal-hero-badge strong { display:block; margin-top:11px; font:800 17px 'Plus Jakarta Sans',sans-serif; }.portal-alert { display:flex; gap:10px; padding:13px 15px; margin-bottom:16px; border:1px solid #cfe2ff; border-radius:10px; color:#24538d; background:#eef6ff; }.portal-alert strong { white-space:nowrap; }.portal-alert.error { color:#8d3131; border-color:#f2caca; background:#fff1f1; }.portal-alert.success { color:#16805e; border-color:#c6ead9; background:#effbf5; }.portal-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.portal-metrics article { min-height:125px; padding:18px; border:1px solid var(--line); border-radius:13px; background:#fff; box-shadow:var(--shadow); }.portal-metrics span,.portal-metrics small { display:block; color:var(--muted); }.portal-metrics span { font-size:12px; font-weight:700; }.portal-metrics strong { display:block; margin-top:15px; overflow:hidden; font:800 21px/1.15 'Plus Jakarta Sans',sans-serif; text-overflow:ellipsis; white-space:nowrap; }.portal-metrics small { margin-top:7px; font-size:11px; }.portal-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:18px; margin-top:18px; }.portal-card { padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); }.portal-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.portal-card h2 { margin:3px 0 0; font:800 20px 'Plus Jakarta Sans',sans-serif; letter-spacing:-.025em; }.portal-card-head p,.portal-card > p { color:var(--muted); font-size:12px; }.portal-card > p { margin:16px 0 0; }.portal-detail-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:22px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.portal-detail-list span,.portal-detail-list strong { display:block; }.portal-detail-list span { color:var(--muted); font-size:11px; }.portal-detail-list strong { margin-top:5px; font-size:13px; }.portal-action-form { margin-top:20px; }.portal-primary,.portal-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 15px; border:1px solid transparent; border-radius:9px; color:#fff; background:var(--blue); font-weight:700; cursor:pointer; }.portal-primary:disabled { cursor:not-allowed; opacity:.48; }.portal-primary svg { width:16px; height:16px; }.portal-secondary { color:var(--ink); border-color:var(--line); background:#fff; }.portal-note { display:flex; flex-direction:column; gap:4px; padding:13px; margin-top:18px; border-radius:10px; color:#16805e; background:#effbf5; font-size:12px; }.portal-note span { color:#4c7867; }.portal-form { display:grid; gap:13px; margin-top:19px; }.portal-form label,.portal-device-add label,.pix-layout label { display:block; color:#516170; font-size:11px; font-weight:700; }.portal-form input,.portal-device-add input { margin-top:6px; }.portal-device-list { display:grid; gap:8px; margin-top:18px; }.portal-device-row { display:flex; align-items:center; gap:11px; min-width:0; padding:11px; border:1px solid #edf0f4; border-radius:10px; }.portal-device-row > div { flex:1; min-width:0; }.portal-device-row strong,.portal-device-row small { display:block; }.portal-device-row strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.portal-device-row small { margin-top:3px; color:var(--muted); font-size:11px; }.device-status { width:9px; height:9px; flex:0 0 auto; border-radius:50%; }.device-status.active { background:#1ca47a; box-shadow:0 0 0 4px #e5f8ef; }.device-status.pending { background:#d58a18; box-shadow:0 0 0 4px #fff5df; }.portal-quota { color:var(--blue); font:800 18px 'Plus Jakarta Sans',sans-serif; }.portal-device-add { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end; padding-top:18px; margin-top:18px; border-top:1px solid var(--line); }.portal-empty { padding:24px 0; color:var(--muted); font-size:12px; text-align:center; }.portal-payment-card { margin-top:18px; }.pix-layout { display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; align-items:center; margin-top:18px; }.pix-layout img,.pix-placeholder { width:150px; height:150px; object-fit:contain; border:1px solid var(--line); border-radius:10px; }.pix-placeholder { display:grid; place-items:center; color:var(--muted); background:#f8fafc; font:800 24px 'Plus Jakarta Sans',sans-serif; }.pix-amount { display:block; margin-top:15px; font:800 22px 'Plus Jakarta Sans',sans-serif; }.portal-footer { display:flex; justify-content:space-between; gap:20px; padding-top:26px; color:var(--muted); font-size:11px; }
@keyframes panel-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
  .settings-shell { grid-template-columns:1fr; }
  .settings-nav { position:static; }
  .settings-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .brand-editor { grid-template-columns:1fr; }
  .check-grid { grid-template-columns:1fr; }
  .inline-test { align-items:stretch; flex-direction:column; }
  .secret-banner { align-items:stretch; flex-direction:column; }
  .api-doc-layout { grid-template-columns:1fr; }
  .api-doc-nav { position:static; display:flex; gap:7px; overflow:auto; }
  .api-doc-nav a { flex:0 0 auto; }
  .endpoint-head { align-items:flex-start; flex-direction:column; }
  .code-tabs { grid-template-columns:1fr; }
  .code-block + .code-block { border-left:0; border-top:1px solid var(--line); }
  .portal-shell { padding:18px 15px 28px; }
  .portal-topbar { align-items:flex-start; }
  .portal-secure { display:none; }
  .portal-hero { align-items:flex-start; flex-direction:column; padding:34px 0 24px; }
  .portal-hero h1 { font-size:29px; }
  .portal-hero-badge { width:100%; }
  .portal-metrics { grid-template-columns:1fr 1fr; }
  .portal-grid { grid-template-columns:1fr; }
  .portal-detail-list { grid-template-columns:1fr 1fr; }
  .portal-device-add { grid-template-columns:1fr; }
  .pix-layout { grid-template-columns:1fr; }
  .pix-layout img,.pix-placeholder { margin:0 auto; }
  .portal-footer { flex-direction:column; gap:7px; }
}

/* Unified icon system */
.ui-icon { display:block; flex:0 0 auto; width:18px; height:18px; overflow:visible; vertical-align:middle; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.btn > .ui-icon { width:17px; height:17px; }
.btn.icon-only { width:40px; min-width:40px; height:40px; min-height:40px; padding:0; line-height:0; }
.btn.icon-only > .ui-icon { width:18px; height:18px; }
.btn.small > .ui-icon { width:15px; height:15px; }
.nav-icon { line-height:0; }
.nav-icon > .ui-icon { width:18px; height:18px; }
.brand-mark { line-height:0; }
.brand-mark > .ui-icon { width:21px; height:21px; }
.metric-icon > .ui-icon { width:18px; height:18px; }
.tab-icon > .ui-icon { width:17px; height:17px; }
.notice > .ui-icon { width:18px; height:18px; margin-top:0; }
.portal-secure > .ui-icon { width:16px; height:16px; }
.portal-primary > .ui-icon,.portal-secondary > .ui-icon { width:16px; height:16px; }
.table-actions { gap:8px; }
.table-actions > form { display:flex; margin:0; }
.table-actions .btn { width:36px; min-width:36px; height:36px; min-height:36px; padding:0; border-radius:9px; line-height:0; }
.table-actions .btn > .ui-icon { width:17px; height:17px; }
.table-actions .btn.secondary:hover { color:var(--blue); border-color:#cbd9f4; background:#f5f8ff; box-shadow:0 5px 12px rgba(47,111,237,.1); }
.table-actions .btn.danger:hover { color:#fff; border-color:#d95656; background:#c94b4b; }
.btn:focus-visible,.nav-link:focus-visible,.settings-tabs button:focus-visible { outline:3px solid rgba(47,111,237,.22); outline-offset:2px; }
.settings-tabs button .tab-icon { line-height:0; }
.modal-head .btn.icon-only { flex:0 0 40px; }
.copy-field > .btn.icon-only { flex:0 0 40px; }
@media (max-width:760px) {
  .table-actions { gap:6px; }
  .table-actions .btn { width:35px; min-width:35px; height:35px; min-height:35px; }
}