:root{--nav:#071b3d;--nav2:#0c2b59;--blue:#087cff;--cyan:#07d9ff;--bg:#f4f7fb;--card:#fff;--ink:#10223c;--muted:#6a7b92;--line:#e1e8f1;--ok:#15865d;--shadow:0 16px 45px rgba(8,30,65,.09)}*{box-sizing:border-box}html{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0}.shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--nav),var(--nav2));color:#fff;padding:20px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff;margin-bottom:24px}.brand>span{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-weight:900}.brand b{line-height:1}.brand small{display:block;color:#9fc6f7;margin-top:5px;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.product{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;margin-bottom:18px;background:rgba(255,255,255,.06)}.product i{font-style:normal;font-size:24px}.product small,.product strong{display:block}.product small{font-size:10px;color:#9fc6f7;margin-bottom:3px}.product strong{font-size:13px}.sidebar nav{display:grid;gap:6px}.sidebar nav a,.back{color:#d7e8ff;text-decoration:none;padding:11px 12px;border-radius:10px;font-weight:700;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.11);color:#fff}.back{margin-top:auto;border:1px solid rgba(255,255,255,.14);text-align:center}main{min-width:0}header{height:78px;display:flex;align-items:center;gap:14px;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);padding:0 26px;position:sticky;top:0;z-index:5}header small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}header h1{font-size:21px;margin:3px 0 0}.actions{display:flex;align-items:center;gap:9px}.actions form{margin:0}.primary,.ghost{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none}.primary{background:var(--blue);color:#fff}.ghost{background:#edf4fb;color:#24496f}.content{padding:24px;max-width:1500px;margin:auto}.notice,.flash{border-radius:13px;padding:12px 14px;margin-bottom:16px;font-size:14px}.notice{background:#eef8ff;border:1px solid #cfe9ff;color:#285174}.flash{background:#edf9f2;border:1px solid #bfe7cf;color:#17653f}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stats article,.panel{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}.stats article{padding:17px}.stats small{color:var(--muted);display:block;margin-bottom:7px}.stats strong{font-size:22px}.ok{color:var(--ok)}.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:16px}.panel{padding:18px;overflow:hidden}.panel h2{margin:0 0 4px;font-size:19px}.panel p{margin:0;color:var(--muted);font-size:13px}.table-wrap{overflow:auto;margin-top:14px}table{border-collapse:collapse;width:100%;min-width:720px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:13px}th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.status{display:inline-flex;background:#edf7f2;color:#167248;padding:5px 8px;border-radius:999px;font-weight:800;font-size:11px}.row-actions{display:flex;align-items:center;gap:8px}.row-actions a,.row-actions button{border:0;background:none;padding:0;color:#086ad7;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.row-actions button{color:#c13b3b}.row-actions form{margin:0}.empty{text-align:center;color:var(--muted);padding:30px}.form-panel form{display:grid;gap:11px;margin-top:16px}.form-panel label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#465a72}.form-panel input{width:100%;border:1px solid #ccd8e6;border-radius:10px;padding:11px 12px;font:inherit;outline:none}.form-panel input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,124,255,.12)}.full{width:100%;text-align:center}.cancel{text-align:center;text-decoration:none;color:#63758a;font-weight:700;font-size:13px}.menu{display:none;border:0;background:#edf4fb;border-radius:9px;padding:9px 10px;font-weight:900}@media(max-width:1050px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:780px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:260px;z-index:20;transition:.2s}.nav-open .sidebar{left:0}.menu{display:block}header{padding:0 14px}.actions .ghost{display:none}.content{padding:16px}.stats{grid-template-columns:1fr 1fr}}@media(max-width:520px){.stats{grid-template-columns:1fr}.actions .primary{padding:9px 10px}.product strong{font-size:12px}}
.form-panel select{width:100%;border:1px solid #ccd8e6;border-radius:10px;padding:11px 12px;font:inherit;background:#fff;color:var(--ink);outline:none}.form-panel select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,124,255,.12)}

/* LIVE-035: foco visível e ações acessíveis sem scripts inline. */
:where(.menu,.row-actions a,.row-actions button):focus-visible{outline:3px solid #07d9ff;outline-offset:3px}
@media(max-width:780px){.menu{min-width:44px;min-height:44px}}

/* LIVE-052 — contagem real por módulo, derivada do SQLite isolado. */
.module-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.module-overview a{display:grid;gap:4px;padding:12px;border-radius:12px;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);min-width:0}
.module-overview a.selected{border-color:var(--blue);box-shadow:0 0 0 2px rgba(8,124,255,.1)}
.module-overview b{font-size:12px}.module-overview span{font-size:11px;color:var(--muted)}

/* LIVE-054 — acessibilidade de tabela e salto ao conteúdo. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-skip{position:absolute;left:12px;top:-90px;z-index:100;background:#fff;color:#071b3d;padding:12px 16px;border-radius:8px}
.demo-skip:focus{top:12px}
.module-overview a:focus-visible,.sidebar a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* LIVE-058 — fluxo real do segmento sem prometer integrações externas. */
.demo-workflow{padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:16px}.demo-workflow-head{display:grid;gap:3px}.demo-workflow-head b{font-size:14px}.demo-workflow-head small{font-size:12px;color:var(--muted)}.demo-workflow ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;counter-reset:workflow}.demo-workflow li{counter-increment:workflow;display:inline-flex;gap:8px;align-items:center;padding:8px 11px;border-radius:999px;background:#eef6ff;color:#245176;font-size:12px;font-weight:700}.demo-workflow li:before{content:counter(workflow,decimal-leading-zero);font-size:10px;color:#087cff;font-weight:900}

/* LIVE-066 — indicadores diretamente dos registros da sessão SQLite. */
.demo-domain-metrics{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px 17px;margin-bottom:16px}.demo-domain-metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}.demo-domain-metrics-grid a{border:1px solid #d7e6f8;background:#f5faff;border-radius:12px;padding:12px;text-decoration:none;color:#19416d;display:grid;gap:4px}.demo-domain-metrics-grid a strong{font-size:24px}.demo-domain-metrics-grid a span{font-size:12px;overflow-wrap:anywhere}.demo-domain-metrics-grid a:focus-visible{outline:3px solid var(--cyan)}@media(max-width:780px){.demo-domain-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:400px){.demo-domain-metrics-grid{grid-template-columns:1fr}}

/* LIVE-068 — pesquisa local sobre os registros exibidos da sessão. */
.demo-search{display:grid;gap:7px;margin-top:14px;font-size:12px;font-weight:800;color:var(--muted)}.demo-search input{width:100%;border:1px solid #ccd8e6;border-radius:10px;padding:12px;font:inherit;min-height:44px;color:var(--ink)}.demo-search input:focus-visible{outline:3px solid #6ecfff;outline-offset:2px}.demo-search-feedback{margin:8px 0!important;color:#26537d!important}

/* LIVE-069 — recuperar tabela com um toque ou Escape. */
.demo-clear-search{justify-self:start;padding:9px 13px;border-radius:10px;border:1px solid #bfdbf6;background:#edf7ff;color:#154d7c;font-weight:750;cursor:pointer;min-height:44px}.demo-clear-search[hidden]{display:none}

/* LIVE-070 — exportação exclusivamente de registros da sessão. */
.demo-export{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-align:center}@media(max-width:650px){.panel-head{flex-wrap:wrap;gap:10px}.demo-export{width:100%}}

/* LIVE-072 — paginação server-side dos registros da sessão (25 por página). */
.demo-pages{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 16px;margin:15px 0 0;font-size:12px}.demo-pages span{margin-right:auto;color:var(--muted)}.demo-pages a{border-radius:10px;padding:10px 13px;min-height:44px;text-decoration:none;display:inline-flex;align-items:center;color:#0958af;background:#edf5ff;font-weight:800}.demo-pages a:focus-visible{outline:3px solid var(--cyan)}

/* LIVE-074 — qualidade visual em telas compactas, contraste e movimento reduzido. */
@media(max-width:780px){.demo-workflow li{font-size:11px}.panel{padding:14px}.form-panel input,.form-panel select{min-height:44px}.demo-search{min-width:0}.demo-search input{max-width:100%}.demo-pages{justify-content:space-between}.demo-pages span{width:100%}.sidebar nav a{min-height:44px;display:flex;align-items:center}}
@media(max-width:440px){header h1{font-size:17px}.actions{gap:5px}.demo-domain-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.module-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none!important}*{scroll-behavior:auto!important}}
[data-demo-record][hidden]{display:none!important}

/* LIVE-077 — pesquisa server-side em todas as páginas do módulo. */
.demo-global-search{display:grid;gap:9px;margin:14px 0 0;padding:14px;border-radius:12px;background:#f4f9ff;border:1px solid #dae8f8}.demo-global-search>label{font-size:13px;font-weight:850;color:#24486e}.demo-global-search>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.demo-global-search input{flex:1 1 200px;min-width:0;border:1px solid #ccd8e6;border-radius:10px;padding:11px 12px;font:inherit;min-height:44px}.demo-global-search small{color:var(--muted);font-size:11px}.demo-global-search .ghost{display:inline-flex;align-items:center;min-height:44px}

/* LIVE-080 — ordenação explícita de registros da sessão. */
.demo-sort{display:grid;gap:5px;font-size:11px;color:#3f5875;font-weight:800}.demo-sort select{min-height:44px;border:1px solid #ccd8e6;border-radius:10px;background:#fff;padding:8px 10px;font:inherit;color:#152e48}

/* LIVE-084 — roteiro acessível para cada módulo sem integração externa. */
.module-guide{padding:17px 19px;background:#fff;border:1px solid #bfdbf8;border-left:4px solid var(--blue);border-radius:14px;margin-bottom:16px;box-shadow:var(--shadow)}.module-guide-kicker{font-size:10px;letter-spacing:.12em;color:#136abd;font-weight:900}.module-guide h2{font-size:17px;margin:5px 0 9px}.module-guide ol{margin:0;padding-left:20px;display:grid;gap:5px}.module-guide li{font-size:12px;line-height:1.55;color:#405c7c}.module-guide p{font-size:12px;margin:12px 0 0;color:#215070;background:#eef8ff;padding:9px 11px;border-radius:9px}@media(max-width:600px){.module-guide{padding:14px}.module-guide h2{font-size:16px}}

/* LIVE-092 — ajuda contextual: campos reais do módulo em uso. */
.module-guide-fields{display:flex;gap:6px;flex-wrap:wrap;font-size:11px;color:#526b86;margin-top:9px;line-height:1.5}.module-guide-fields b{color:#254a72}

/* LIVE-093 — orientação reforçada para módulos com dados sensíveis. */
.demo-privacy{background:#fff8e8;border-color:#f2d8a5;color:#785620}.demo-privacy b{color:#6b4911}

/* VERTICAL-343 — CONNECT premium tokens; the approved brand mark and carousel are untouched. */
:root{
 --demo-accent:#087cff;--demo-accent-soft:#eaf5ff;--demo-accent-ink:#124b83;
 --demo-edge:#d9e5f1;--demo-fade:#f5f9fe;--demo-radius:18px;
 --demo-ease:cubic-bezier(.2,.7,.2,1);
 --shadow:0 12px 34px rgba(10,39,80,.065),0 1px 3px rgba(10,39,80,.035)
}
html{scroll-behavior:smooth}
body{background:linear-gradient(150deg,#f2f7fe 0%,#f6f9fd 48%,#edf5ff 100%);color:var(--ink)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--demo-accent);outline-offset:3px}
:where(button,a,input,select){touch-action:manipulation}
:where(a,button){transition:background-color .18s var(--demo-ease),border-color .18s var(--demo-ease),box-shadow .18s var(--demo-ease)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}:where(a,button,input,select){transition:none!important}}

/* VERTICAL-344 — premium dashboard depth, card rhythm and table clarity. */
.content{padding:clamp(17px,2.35vw,34px);max-width:1540px}
header{backdrop-filter:blur(15px);background:rgba(255,255,255,.965)}
.stats article,.panel,.demo-workflow,.demo-domain-metrics{
 border-color:var(--demo-edge);border-radius:var(--demo-radius)
}
.stats article{min-height:100px;background:linear-gradient(165deg,#fff 35%,var(--demo-fade) 135%)}
.stats article strong{font-weight:850;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.panel h2{letter-spacing:-.028em}.panel-head{align-items:flex-start;gap:12px}
.panel-head>div{min-width:0}
:where(.panel,.stats article,.module-guide,.demo-workflow){overflow-wrap:anywhere}
.sidebar nav a{min-height:43px;display:flex;align-items:center}
.sidebar nav a[aria-current="page"]{background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 var(--cyan)}
.primary{background:var(--demo-accent);box-shadow:0 5px 15px rgba(8,124,255,.16)}
.primary:hover{filter:brightness(.96);box-shadow:0 7px 21px rgba(8,124,255,.22)}
.ghost:hover,.module-overview a:hover{background:var(--demo-accent-soft)}
.module-overview a.selected{border-color:var(--demo-accent)}
.table-wrap{max-inline-size:100%;overscroll-behavior-x:contain}
.table-wrap th{white-space:nowrap;background:#f8fbff}
.table-wrap tbody tr:hover{background:#f8fbff}
.row-actions{min-width:100px;flex-wrap:wrap}

/* VERTICAL-345 — smartphone UX, keep Reset demo and contract CTAs available. */
.demo-nav-backdrop[hidden]{display:none!important}
@media(max-width:780px){
 body.nav-open{overflow:hidden}
 .demo-nav-backdrop:not([hidden]){position:fixed;inset:0;background:rgba(3,18,42,.58);backdrop-filter:blur(3px);display:block;z-index:19}
 .sidebar{left:0;transform:translateX(-105%);width:min(290px,88vw);transition:transform .23s var(--demo-ease);box-shadow:14px 0 38px rgba(0,0,0,.13)}
 .nav-open .sidebar{transform:translateX(0)}
 .sidebar nav{overflow-y:auto;min-height:0}
 header{height:auto;min-height:78px;padding:12px 16px;gap:10px;flex-wrap:wrap}
 header>div{min-width:0;flex:1 1 180px}
 header h1{font-size:clamp(16px,4.4vw,21px);overflow-wrap:anywhere}
 .actions{display:flex;gap:8px;flex:1 1 100%;justify-content:flex-start}
 .actions .ghost{display:inline-flex;align-items:center;justify-content:center}
 .actions form,.actions>a{flex:1 1 135px;min-width:0}
 .actions button,.actions>a{width:100%;min-height:44px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
 .menu{min-width:44px;min-height:44px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stats article{min-height:88px;padding:13px}
 .stats strong{font-size:20px}
 .content{padding:16px}
 .panel{min-width:0}
}
@media(max-width:390px){
 header{padding:12px}.content{padding:12px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats article{padding:11px}
 .stats strong{font-size:18px}
 .actions{flex-wrap:wrap}.actions>a,.actions form{flex:1 1 126px}
 .row-actions a,.row-actions button{min-height:36px;display:inline-flex;align-items:center}
 .module-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* VERTICAL-346 — tablet, fluid fields and readable two-column breakpoints. */
@media(min-width:781px) and (max-width:1180px){
 .shell{grid-template-columns:220px minmax(0,1fr)}
 .sidebar{padding:18px 12px}
 .content{padding:20px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid{grid-template-columns:minmax(0,1fr)}
 header{padding-inline:20px}
 .module-overview{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
}
@media(min-width:1100px) and (max-width:1360px){
 .grid{grid-template-columns:minmax(0,1.45fr) minmax(290px,.85fr)}
}

/* VERTICAL-347 — premium ultra-wide without stretching form labels and copy. */
@media(min-width:1650px){
 .content{max-width:1580px;padding-inline:clamp(24px,2vw,44px)}
 .shell{grid-template-columns:280px minmax(0,1fr)}
 .sidebar{padding-inline:22px}
 .grid{grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr);gap:22px}
 .stats{gap:17px}
 .module-guide,.notice{max-width:100%}
}
@media(min-width:2350px){
 .content{max-width:1680px}
 .panel{padding:24px}
}

/* VERTICAL-348 — form ergonomics, tap targets and accessible input state. */
.form-panel form{gap:14px}
.form-panel label{gap:7px;line-height:1.4;overflow-wrap:anywhere}
.form-panel input,.form-panel select{
 min-width:0;max-width:100%;min-height:46px;font-size:16px;
 background:#fff;color:#10223c;border-color:#bfd1e4
}
.form-panel input::placeholder{color:#687b92}
.form-panel input:focus-visible,.form-panel select:focus-visible{outline:3px solid var(--demo-accent);outline-offset:2px}
.form-panel :is(input,select):user-invalid{border-color:#af2d43;background:#fff9fa}
.form-panel .demo-submit{min-height:47px}
.demo-submitting .demo-submit{opacity:.72;cursor:progress}
@media(max-width:780px){.form-panel input,.form-panel select{font-size:16px}}

/* VERTICAL-349 — discoverable horizontal table scroll with keyboard focus. */
.demo-table-help{color:#45617d!important;font-size:12px!important;margin:13px 0 0!important}
.table-wrap:focus-visible{outline:3px solid var(--demo-accent);outline-offset:3px;border-radius:10px}
.table-wrap{scrollbar-color:#9bbbd9 #edf4fb;scrollbar-width:thin}
.table-wrap th,.table-wrap td{vertical-align:middle;line-height:1.45}
.table-wrap tbody tr:nth-child(even){background:#fbfdff}
.table-wrap .row-actions button:focus-visible,.table-wrap .row-actions a:focus-visible{outline-color:var(--demo-accent)}
@media(min-width:1100px){.demo-table-help{display:none}}

/* VERTICAL-350 — loading feedback without disabled form fields or lost POST data. */
.demo-submitting :where(.primary,.ghost)[aria-busy="true"]{
 cursor:progress;opacity:.72;filter:saturate(.75)
}
.demo-search-feedback[hidden]{display:none!important}
:where(.demo-global-search,.demo-search) input[type="search"]{min-height:46px}
:where(.demo-global-search,.demo-search) input[type="search"]:focus-visible{outline:3px solid var(--demo-accent);outline-offset:2px}
.demo-global-search>div{align-items:end}
.demo-pages a:hover{background:var(--demo-accent-soft)}

/* VERTICAL-351 — each of 8 vertical products gets its own restrained accent.
   Shared CONNECT typography/grid and the existing brand mark remain unchanged. */
body[data-product="PHP-001"]{--demo-accent:#1169d7;--demo-accent-soft:#e8f3ff;--demo-accent-ink:#17497d;--demo-fade:#edf6ff}
body[data-product="PHP-002"]{--demo-accent:#3857c5;--demo-accent-soft:#eef0ff;--demo-accent-ink:#313c82;--demo-fade:#f0f3ff}
body[data-product="PHP-003"]{--demo-accent:#08778b;--demo-accent-soft:#e3f8fb;--demo-accent-ink:#185b68;--demo-fade:#eafbfe}
body[data-product="PHP-004"]{--demo-accent:#7650a5;--demo-accent-soft:#f4efff;--demo-accent-ink:#533477;--demo-fade:#f8f2ff}
body[data-product="PHP-005"]{--demo-accent:#137969;--demo-accent-soft:#e7f7f2;--demo-accent-ink:#185f52;--demo-fade:#f1fcf7}
body[data-product="PHP-006"]{--demo-accent:#a94d1b;--demo-accent-soft:#fff2e6;--demo-accent-ink:#743b18;--demo-fade:#fff8ee}
body[data-product="PHP-007"]{--demo-accent:#6352ab;--demo-accent-soft:#f0edff;--demo-accent-ink:#463878;--demo-fade:#f7f4ff}
body[data-product="PHP-008"]{--demo-accent:#a33877;--demo-accent-soft:#ffecf6;--demo-accent-ink:#772b57;--demo-fade:#fff4fa}
body[data-product^="PHP-"] :where(.demo-workflow li,.demo-domain-metrics-grid a.selected,.module-overview a.selected){
 border-color:var(--demo-accent);color:var(--demo-accent-ink)
}
body[data-product^="PHP-"] .demo-workflow li{background:var(--demo-accent-soft)}
body[data-product^="PHP-"] .module-guide{border-left-color:var(--demo-accent)}
body[data-product^="PHP-"] .module-guide-kicker{color:var(--demo-accent-ink)}
body[data-product^="PHP-"] .primary:focus-visible{outline-color:var(--cyan)}

/* VERTICAL-352 — sector-specific guidance that never claims real integrations. */
.demo-segment-note{margin:0 0 15px;padding:13px 16px;border:1px solid var(--demo-edge);border-left:4px solid var(--demo-accent);border-radius:13px;background:linear-gradient(105deg,var(--demo-accent-soft),#fff 74%);color:var(--demo-accent-ink);font-size:13px;line-height:1.55}
.demo-segment-note b{font-weight:850}
@media(max-width:500px){.demo-segment-note{padding:12px 13px}}

/* VERTICAL-408 — accessibility and responsive resilience for existing eight demo layouts. */
:root{color-scheme:light}
.demo-nav-backdrop:not([hidden]){overscroll-behavior:contain}
.sidebar nav a:focus-visible,.menu:focus-visible,.actions a:focus-visible,.actions button:focus-visible{
 outline:3px solid #65d9ff;outline-offset:3px
}
.demo-search-feedback{min-height:16px;overflow-wrap:anywhere}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel,.stats article{min-width:0}
:where(button,a,input,select):focus-visible{scroll-margin:22px}
@media(max-width:780px){
 header,.actions{max-width:100%}
 .sidebar{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 .content{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 .demo-global-search>div{display:flex;flex-wrap:wrap}
 .demo-global-search input[type=search]{min-width:min(100%,250px);flex:1 1 230px}
 .demo-sort{min-width:0;flex:1 1 130px}
 .demo-pages{display:flex;flex-wrap:wrap;gap:10px}
 .demo-pages a{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:360px){
 .stats{grid-template-columns:minmax(0,1fr)}
 .stats article{min-height:74px}
 .module-overview{grid-template-columns:minmax(0,1fr)}
 .content{padding-inline:10px}
 .form-panel{padding:13px}
}
@media(min-width:1920px){
 .content{max-width:1720px}
 .grid{gap:25px}
}
@media(prefers-reduced-motion:reduce){
 :where(.sidebar,.primary,.ghost,.module-overview a){transition:none!important}
}

/* VERTICAL-431: durable touch/focus behavior on all eight demo product interfaces. */
:where(.panel,.form-panel,.table-wrap){min-width:0}
:where(button,a,input,select):focus-visible{scroll-margin-block:18px}
:where(.row-actions a,.row-actions button,.demo-pages a,.demo-clear-search){min-height:42px}
:where(.demo-global-search,.demo-search) input[type="search"]{max-width:100%;font-size:16px}
.demo-submitting .demo-submit[aria-busy="true"]{pointer-events:none}
@media(max-width:360px){
 .content{padding-inline:10px}
 .actions{gap:6px}
 .actions a,.actions button{min-width:0}
 .demo-global-search>div,.demo-pages{min-width:0}
 .form-panel{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
 .sidebar,.demo-nav-backdrop{transition:none!important;animation:none!important}
}

/* VERTICAL-446 — premium finishing without touching approved brand/carousel assets. */
:where(.panel,.form-panel,.module-guide){overflow-wrap:anywhere}
:where(.primary,.ghost,.menu,.demo-pages a,.demo-clear-search){touch-action:manipulation}
:where(input,select,button):focus-visible{outline:3px solid #0781dd;outline-offset:3px}
.table-wrap{contain:layout;scrollbar-gutter:stable}
.demo-search-feedback:not([hidden]){display:block;padding-block:5px;color:#1b567a;font-weight:650}
@media(max-width:420px){
 .content{padding-inline:clamp(10px,3vw,16px)}
 header h1{line-height:1.3}
 .panel-head{flex-wrap:wrap;gap:12px}
 .panel-head>a{min-height:44px;max-width:100%}
 .demo-global-search input[type=search]{min-width:0}
 .demo-pages a{min-height:44px}
}
@media(min-width:780px) and (max-width:1050px){
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid{grid-template-columns:minmax(0,1fr)}
 .module-overview{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
}
@media(min-width:2000px){.content{max-width:1780px}.stats{gap:18px}.panel{padding:24px}}
@media(prefers-reduced-motion:reduce){
 .sidebar,.nav-open .sidebar{transition:none!important}
}

/* VERTICAL-496: respect Windows High Contrast Mode */
@media(forced-colors:active){.demo-nav-backdrop:not([hidden]){outline:2px solid CanvasText}.sidebar nav a[aria-current=page]{outline:2px solid Highlight}.primary:focus-visible,.ghost:focus-visible{outline:3px solid Highlight}.table-wrap{border:1px solid CanvasText}}

/* VERTICAL-576 print layout: interactive controls remain accessible onscreen. */
@media print{.demo-nav-backdrop,.menu,.actions,.demo-search,.demo-global-search,.demo-pages,.row-actions,.form-panel{display:none!important}.content{max-width:none!important;padding:0!important}.panel,.stats article{box-shadow:none!important;break-inside:avoid}.table-wrap{overflow:visible!important}}

/* VERTICAL-596 larger monitors retain readable line lengths */
@media(min-width:2200px){.content{max-width:1780px}.panel{line-height:1.52}.stats{gap:22px}}
@media(max-width:345px){.content{padding-inline:9px}.actions{gap:6px}.panel{padding:12px}.stats article{padding:11px}}

/* VERTICAL-796: 320 px touch and extreme-wide focus without affecting approved media */
@media(max-width:320px){.content{padding-inline:8px}.panel,.form-panel{padding:10px}.stats{gap:7px}.actions{flex-wrap:wrap}.demo-pages a{min-height:44px}}
@media(min-width:2400px){.content{max-width:1880px}.grid{gap:26px}.stats{gap:23px}}
@media(forced-colors:active){.demo-global-search input:focus-visible,.demo-search input:focus-visible{outline:3px solid Highlight}}


/* MULTIVIEW-V1 — explicit Site / Client / Admin switcher. */
.demo-view-links{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #cfe0ec;border-radius:11px;background:#f3f8fc}
.demo-view-links a{display:inline-flex;align-items:center;min-height:32px;padding:6px 9px;border-radius:8px;font-size:11px;font-weight:800;color:#3e617d;text-decoration:none;white-space:nowrap}
.demo-view-links a:hover,.demo-view-links a:focus-visible{background:#e6f2fb;color:#075eb5}
.demo-view-links a.active{background:#075eb5;color:#fff}
@media(max-width:860px){main>header .actions{flex-wrap:wrap;justify-content:flex-end}.demo-view-links{order:3;width:100%;overflow:auto}.demo-view-links a{flex:1;justify-content:center}}


/* MULTIVIEW-V1.1 — admin switcher fits narrow screens without horizontal clipping. */
@media(max-width:620px){
  .demo-view-links{display:grid;grid-template-columns:1fr;overflow:visible}
  .demo-view-links a{min-width:0;padding:6px 4px;font-size:10px;line-height:1.15;white-space:normal;text-align:center}
}