@font-face{font-family:Poppins;src:url('../branding/font-dsv/PoppinsRegular.ttf') format('truetype');font-display:swap}
@font-face{font-family:MontserratExtra;src:url('../branding/font-dsv/MontserratExtraBold.otf') format('opentype');font-display:swap}
:root{--bg:#f7fbfa;--surface:#ffffff;--surface-soft:#edf7f4;--text:#0e2423;--muted:#58706c;--line:#dce9e5;--teal:#006c68;--teal-dark:#034743;--green:#35b86f;--gold:#e6b44c;--shadow:0 22px 70px rgba(6,47,44,.12);--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Poppins,Arial,sans-serif;line-height:1.6}a{color:inherit}.site-header{position:sticky;top:0;z-index:20;height:78px;padding:0 max(22px,calc((100% - var(--max))/2));display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(247,251,250,.88);border-bottom:1px solid transparent;backdrop-filter:blur(18px);transition:border-color .2s,box-shadow .2s}.site-header[data-elevated=true]{border-color:var(--line);box-shadow:0 12px 40px rgba(6,47,44,.08)}.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:8px;background:var(--teal-dark);color:#fff;font-family:MontserratExtra;font-size:13px}.brand strong,.brand small{display:block}.brand strong{font-family:MontserratExtra;font-size:16px}.brand small{color:var(--muted);font-size:12px;margin-top:1px}.main-nav{display:flex;gap:24px;color:var(--muted);font-size:14px}.main-nav a,.developer-link{text-decoration:none}.main-nav a:hover,.developer-link:hover{color:var(--teal)}.developer-link{min-height:42px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;padding:0 15px;font-size:13px;font-weight:700;background:var(--surface)}.menu-button{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px}.menu-button span{display:block;height:2px;background:var(--text);margin:5px 0}
.hero{width:min(var(--max),calc(100% - 44px));margin:48px auto 0;min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:48px;align-items:center}.hero-copy h1{font-family:MontserratExtra;font-size:clamp(54px,7vw,96px);line-height:.93;margin:0 0 24px;max-width:760px}.hero-copy p{font-size:19px;color:var(--muted);max-width:650px;margin:0}.hero-actions{display:flex;gap:13px;margin:34px 0}.button{min-height:48px;border-radius:8px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border:1px solid var(--line);font-size:14px}.button.primary{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 12px 26px rgba(0,108,104,.18)}.button.secondary{background:#fff;color:var(--teal-dark)}.button:hover{transform:translateY(-1px)}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:680px;margin:0}.hero-proof div{padding:17px;border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:8px}.hero-proof dt{font-family:MontserratExtra;font-size:22px;color:var(--teal)}.hero-proof dd{margin:4px 0 0;color:var(--muted);font-size:12px}.hero-visual{position:relative;min-height:570px;border-radius:8px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line)}.hero-visual img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(6,47,44,.48));pointer-events:none}.control-panel{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;padding:20px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:8px;box-shadow:0 18px 40px rgba(2,32,31,.18)}.control-panel header{display:flex;justify-content:space-between;margin-bottom:13px}.control-panel header span{color:var(--muted);font-size:12px}.control-panel header strong{font-family:MontserratExtra}.panel-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0;font-size:13px}.panel-row b{color:var(--teal)}
.apps-section,.process-section,.developer-section,.guide-section{width:min(var(--max),calc(100% - 44px));margin:90px auto 0}.section-heading{text-align:center;max-width:760px;margin:0 auto 34px}.section-heading.align-left{text-align:left;margin-left:0}.section-heading h2,.process-section h2,.developer-section h2,.guide-section h2{font-family:MontserratExtra;font-size:clamp(34px,4vw,58px);line-height:1.02;margin:0 0 14px}.section-heading p,.process-section p,.developer-section p,.guide-section p{color:var(--muted);margin:0}.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.app-grid article{min-height:230px;padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 18px 48px rgba(6,47,44,.06)}.app-grid span{color:var(--green);font-family:MontserratExtra}.app-grid h3{font-family:MontserratExtra;font-size:21px;margin:54px 0 10px}.app-grid p{color:var(--muted);font-size:13px;margin:0}.process-section{display:grid;grid-template-columns:360px minmax(0,1fr);gap:44px;align-items:start;padding:44px;border-radius:8px;background:var(--teal-dark);color:#fff}.process-section .section-heading p{color:#bad5d0}.process-section .button{align-self:start;grid-column:1}.process-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.process-list li{padding:20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:8px}.process-list span{width:34px;height:34px;border-radius:8px;background:var(--green);color:#062f2c;display:grid;place-items:center;font-family:MontserratExtra}.process-list strong{display:block;font-family:MontserratExtra;margin:18px 0 8px}.process-list p{color:#c5dbd6;font-size:13px}.developer-section{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:38px;align-items:center}.developer-copy ul{padding-left:20px;color:var(--muted)}.dashboard-preview{padding:22px;border-radius:8px;background:#0b2f2d;color:#fff;box-shadow:var(--shadow)}.preview-top,.preview-table>div{display:flex;justify-content:space-between;gap:20px}.preview-top span{color:#a8c5c0}.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.preview-metrics div{padding:15px;border-radius:8px;background:rgba(255,255,255,.08)}.preview-metrics span,.preview-table span{color:#a8c5c0;font-size:12px}.preview-metrics b{display:block;font-family:MontserratExtra;font-size:28px}.preview-table{border-top:1px solid rgba(255,255,255,.13)}.preview-table>div{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:13px}.preview-table em{font-style:normal;color:var(--green);font-weight:800}.guide-section{padding:42px;display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-bottom:70px}.guide-section>div:first-child{max-width:680px}.guide-actions{display:flex;gap:12px;flex-wrap:wrap}.site-footer{border-top:1px solid var(--line);padding:34px max(22px,calc((100% - var(--max))/2));display:flex;align-items:flex-start;justify-content:space-between;gap:30px;color:var(--muted);background:#fff}.site-footer strong{font-family:MontserratExtra;color:var(--text)}.site-footer p{margin:5px 0 0}
@media(max-width:980px){.main-nav,.developer-link{display:none}.menu-button{display:block}.site-header.nav-open{height:auto;align-items:flex-start;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}.site-header.nav-open .main-nav,.site-header.nav-open .developer-link{display:flex}.site-header.nav-open .main-nav{order:4;width:100%;flex-direction:column;gap:10px}.hero{grid-template-columns:1fr;min-height:0}.hero-visual{min-height:440px}.app-grid{grid-template-columns:repeat(2,1fr)}.process-section,.developer-section{grid-template-columns:1fr}.process-section .button{grid-column:auto}.guide-section{display:grid}}
@media(max-width:640px){.site-header{height:70px}.brand small{display:none}.hero,.apps-section,.process-section,.developer-section,.guide-section{width:calc(100% - 28px);margin-top:44px}.hero-copy h1{font-size:52px}.hero-actions,.hero-proof,.process-list,.app-grid{grid-template-columns:1fr;display:grid}.hero-actions{gap:10px}.hero-visual{min-height:360px}.control-panel{left:14px;right:14px;bottom:14px}.app-grid{grid-template-columns:1fr}.process-section,.guide-section{padding:24px}.preview-metrics{grid-template-columns:1fr}.site-footer{display:grid;padding:28px 16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.button:hover{transform:none}}

.portal-admin{background:#f6faf9;color:#102220}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:28px}.auth-panel{width:min(520px,100%);padding:32px;border:1px solid #dce8e3;border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(7,55,50,.12)}.auth-panel.wide{width:min(860px,100%)}.auth-panel h1,.admin-hero h1,.admin-card h2{font-family:MontserratExtra;margin:0 0 12px}.auth-panel p,.admin-hero p,.empty{color:#5c726d}.alert{padding:13px 15px;border:1px solid #ffb4b4;background:#fff1f1;border-radius:8px;margin:18px 0;color:#912626}.admin-form{display:grid;gap:15px;margin-top:22px}.admin-form label span{display:block;color:#5c726d;font-size:12px;margin-bottom:6px}.admin-form input{width:100%;height:46px;border:1px solid #dce8e3;border-radius:8px;padding:0 13px;font:inherit}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wide-field{grid-column:1/-1}.admin-header{min-height:72px;display:flex;justify-content:space-between;align-items:center;padding:0 max(22px,calc((100% - 1180px)/2));background:#fff;border-bottom:1px solid #dce8e3}.admin-header a{text-decoration:none}.admin-header strong,.admin-header span{display:block}.admin-header span{color:#5c726d;font-size:12px}.admin-header nav{display:flex;align-items:center;gap:18px}.admin-shell{width:min(1180px,calc(100% - 44px));margin:34px auto 70px}.admin-hero{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin-bottom:22px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.metric-grid article,.admin-card{padding:22px;border:1px solid #dce8e3;border-radius:8px;background:#fff}.metric-grid span{color:#5c726d;font-size:12px}.metric-grid strong{display:block;font-family:MontserratExtra;font-size:38px}.admin-card{margin-top:16px}.admin-card header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid #dce8e3;padding-bottom:14px;margin-bottom:14px}.admin-card header span{color:#5c726d;font-size:12px}.table{display:grid}.table>div{display:grid;grid-template-columns:1fr 1.7fr 1fr 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #edf2f0;font-size:13px}.table b{color:#5c726d}.table span{min-width:0;overflow:hidden;text-overflow:ellipsis}.button{min-height:46px;border-radius:8px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border:1px solid #dce8e3;cursor:pointer}.button.primary{background:#006c68;color:#fff;border-color:#006c68}.button.secondary{background:#fff;color:#006c68}
@media(max-width:760px){.form-grid,.metric-grid,.table>div{grid-template-columns:1fr}.admin-hero,.admin-card header,.admin-header{display:grid}.admin-header nav{justify-content:space-between}.wide-field{grid-column:auto}}

/* Developer Portal V0.2 visual refresh */
body{background:#f2fbff}
.site-header{background:rgba(255,255,255,.82);box-shadow:0 18px 48px rgba(31,129,165,.08)}
.brand img{width:58px;height:46px;object-fit:contain;display:block}.brand-mark{display:none}
.brand strong{letter-spacing:0;color:#092237}.brand small{color:#527084}
.public-hero{position:relative;width:100%;margin:0;min-height:720px;padding:132px max(22px,calc((100% - var(--max))/2)) 82px;grid-template-columns:minmax(0,680px) minmax(320px,460px);overflow:hidden;background:#eaf9ff url('../branding/dev-bcg-light.png') center/cover no-repeat}
.public-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,252,255,.96) 0%,rgba(244,252,255,.83) 38%,rgba(244,252,255,.38) 78%,rgba(244,252,255,.58) 100%);pointer-events:none}
.public-hero .hero-copy,.hero-logo-panel{position:relative;z-index:1}.public-hero .hero-copy h1{font-size:clamp(42px,5.8vw,84px);line-height:1.01;color:#071f35;text-wrap:balance}.public-hero .hero-copy p{font-size:20px;color:#315c72;max-width:720px}
.hero-logo-panel{align-self:center;display:grid;place-items:center;min-height:390px;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:rgba(255,255,255,.48);box-shadow:0 28px 90px rgba(19,118,158,.22);backdrop-filter:blur(10px)}
.hero-logo-panel img{width:min(92%,460px);height:auto;filter:drop-shadow(0 28px 34px rgba(4,79,122,.22))}
.main-nav a{font-weight:800;color:#345d72}.main-nav a:hover{color:#008a9a}.button.primary{background:#007f7a;border-color:#007f7a}.button.secondary{color:#006c68;background:rgba(255,255,255,.86)}
.app-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.app-grid article{background:linear-gradient(180deg,#fff,#f8fdff);border-color:#d7edf4}.app-grid article:nth-child(5){background:#06233d;color:#fff}.app-grid article:nth-child(5) p{color:#bedbeb}
.process-section{background:#06233d url('../branding/dev-bcg-dark.png') center/cover no-repeat;position:relative;overflow:hidden}.process-section:before{content:"";position:absolute;inset:0;background:rgba(3,16,34,.72)}.process-section>*{position:relative;z-index:1}
.feature-band{width:min(var(--max),calc(100% - 44px));margin:90px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:38px;align-items:start}.feature-band h2,.contact-section h2{font-family:MontserratExtra;font-size:clamp(34px,4vw,56px);line-height:1.04;margin:0 0 14px}.feature-band p,.contact-section p{color:var(--muted);font-size:17px}.feature-list{display:grid;gap:12px}.feature-list article{padding:20px;border:1px solid #d7edf4;border-radius:8px;background:#fff;box-shadow:0 18px 44px rgba(4,87,121,.07)}.feature-list strong,.feature-list span{display:block}.feature-list strong{font-family:MontserratExtra;color:#06233d}.feature-list span{color:#557484;margin-top:5px;font-size:14px}
.contact-section{width:min(var(--max),calc(100% - 44px));margin:90px auto 80px;padding:44px;display:flex;justify-content:space-between;gap:28px;align-items:center;border-radius:8px;background:linear-gradient(135deg,#07233c,#007f7a);color:#fff}.contact-section p{color:#d3f4f2;max-width:760px}
.portal-admin{background:#eff8fb}.login-page{background:#051527 url('../branding/dev-bcg-dark.png') center/cover fixed no-repeat}.login-page:before{content:"";position:fixed;inset:0;background:rgba(3,12,26,.64);backdrop-filter:blur(1px)}.login-page .auth-wrap{position:relative;z-index:1}.login-page .auth-panel{background:rgba(255,255,255,.93);box-shadow:0 34px 100px rgba(0,0,0,.34)}
.auth-logo{display:block;width:min(260px,84%);height:auto;margin:0 auto 18px}.auth-panel{text-align:left}.auth-panel h1{color:#06233d}.admin-form select{width:100%;height:46px;border:1px solid #dce8e3;border-radius:8px;padding:0 13px;font:inherit;background:#fff}
.admin-header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px)}.admin-brand{display:flex;align-items:center;gap:12px}.admin-brand img{width:54px;height:42px;object-fit:contain}.admin-brand small{display:block;color:#5c726d;font-size:12px}.admin-header nav a{font-weight:800;color:#315c72}.admin-header nav a.active{color:#007f7a}
.admin-hero{padding:28px;border-radius:8px;background:#fff;border:1px solid #dce8e3;box-shadow:0 20px 60px rgba(20,95,128,.08)}.metric-grid article,.admin-card{box-shadow:0 18px 50px rgba(20,95,128,.06)}.admin-grid-two{display:grid;grid-template-columns:420px minmax(0,1fr);gap:16px}.admin-form.compact{margin-top:0}.alert.success{border-color:#9bd9b1;background:#f0fff5;color:#1c6a35}
.account-list{display:grid;gap:10px}.account-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid #edf2f0;border-radius:8px;background:#fbfefd}.account-row .avatar{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:#e2f6f3;color:#007f7a;font-family:MontserratExtra}.account-row strong,.account-row small{display:block}.account-row small{color:#6b827d;overflow:hidden;text-overflow:ellipsis}.account-row em{font-style:normal;font-size:12px;font-weight:800;color:#007f7a;background:#eaf8f6;border-radius:999px;padding:6px 10px;white-space:nowrap}
@media(max-width:980px){.public-hero{grid-template-columns:1fr;padding-top:110px}.hero-logo-panel{min-height:300px}.feature-band,.admin-grid-two{grid-template-columns:1fr}.contact-section{display:grid}.admin-header nav{flex-wrap:wrap}.admin-header nav span{width:100%}}
@media(max-width:640px){.public-hero{padding:94px 14px 48px;min-height:auto}.public-hero .hero-copy h1{font-size:42px}.public-hero .hero-copy p{font-size:16px}.hero-logo-panel{min-height:220px}.hero-logo-panel img{width:88%}.feature-band,.contact-section{width:calc(100% - 28px);margin-top:44px}.contact-section{padding:24px}.account-row{grid-template-columns:40px minmax(0,1fr)}.account-row em{grid-column:2}.admin-brand img{width:46px}.admin-header nav{gap:10px}}

/* V0.2.1: controlled media, cache-safe themeable UI */
:root{
    --page:#f3fbff;
    --page-2:#e9f7fb;
    --panel:#ffffff;
    --panel-2:#f7fcfd;
    --ink:#082337;
    --ink-soft:#315d71;
    --stroke:#d7e9ef;
    --accent:#007f7a;
    --accent-2:#0aa6d6;
    --admin-bg:#eef8fb;
    --admin-panel:#ffffff;
    --admin-ink:#0b2436;
    --admin-muted:#587285;
    --admin-line:#d9eaf0;
}
html[data-theme="dark"]{
    --page:#06111f;
    --page-2:#0b1d32;
    --panel:#0f2438;
    --panel-2:#132d44;
    --ink:#f5fbff;
    --ink-soft:#b8d3df;
    --stroke:#22425a;
    --accent:#21d6c5;
    --accent-2:#45b8ff;
    --admin-bg:#071524;
    --admin-panel:#0d2337;
    --admin-ink:#f4fbff;
    --admin-muted:#a7c2d2;
    --admin-line:#24445e;
}
html,body{max-width:100%;overflow-x:hidden}
body{background:var(--page);color:var(--ink)}
.site-header{
    height:76px!important;
    background:color-mix(in srgb,var(--panel) 88%,transparent)!important;
    border-bottom:1px solid var(--stroke)!important;
    box-shadow:0 16px 50px rgba(3,48,78,.08)!important;
}
.brand img{
    width:54px!important;
    height:42px!important;
    max-width:54px!important;
    object-fit:contain!important;
    flex:0 0 54px!important;
}
.brand strong{color:var(--ink)!important}
.brand small,.main-nav a{color:var(--ink-soft)!important}
.site-header .theme-toggle{flex:0 0 auto}
.theme-toggle{
    min-height:38px;
    border:1px solid var(--stroke);
    border-radius:8px;
    padding:0 14px;
    font:700 13px/1 Poppins,Arial,sans-serif;
    color:var(--ink);
    background:var(--panel);
    cursor:pointer;
    box-shadow:0 10px 28px rgba(3,48,78,.08);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.floating-theme{position:fixed;top:18px;right:18px;z-index:50}
.public-hero{
    width:100%!important;
    margin:0!important;
    min-height:calc(100vh - 10px)!important;
    padding:124px max(24px,calc((100% - var(--max))/2)) 64px!important;
    display:grid!important;
    grid-template-columns:minmax(0,620px) minmax(360px,520px)!important;
    gap:56px!important;
    align-items:center!important;
    background:
        radial-gradient(circle at 84% 20%, color-mix(in srgb,var(--accent-2) 18%,transparent), transparent 34%),
        linear-gradient(135deg,var(--page),var(--page-2))!important;
}
.public-hero:before{display:none!important}
.public-hero .hero-copy{max-width:620px!important}
.public-hero .hero-copy h1{
    margin:0 0 22px!important;
    color:var(--ink)!important;
    font-size:clamp(42px,5.4vw,76px)!important;
    line-height:1.03!important;
    letter-spacing:0!important;
}
.public-hero .hero-copy p{color:var(--ink-soft)!important;font-size:clamp(16px,1.5vw,20px)!important;max-width:600px!important}
.hero-logo-panel{
    position:relative!important;
    min-height:500px!important;
    height:auto!important;
    overflow:hidden!important;
    border-radius:8px!important;
    border:1px solid color-mix(in srgb,var(--stroke) 80%,transparent)!important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.68)),
        url('../branding/dev-bcg-light.png') center/cover no-repeat!important;
    box-shadow:0 32px 90px rgba(4,80,130,.18)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    padding:28px!important;
}
html[data-theme="dark"] .hero-logo-panel{
    background:
        linear-gradient(180deg,rgba(3,10,24,.06),rgba(3,10,24,.86)),
        url('../branding/dev-bcg-dark.png') center/cover no-repeat!important;
}
.hero-logo-panel img{
    position:absolute!important;
    top:24px!important;
    left:24px!important;
    width:min(300px,46%)!important;
    max-width:300px!important;
    height:auto!important;
    filter:drop-shadow(0 16px 26px rgba(3,42,74,.22))!important;
}
.hero-media-copy{
    position:relative!important;
    z-index:1!important;
    width:min(100%,430px)!important;
    padding:20px!important;
    border:1px solid rgba(255,255,255,.45)!important;
    border-radius:8px!important;
    background:color-mix(in srgb,var(--panel) 78%,transparent)!important;
    backdrop-filter:blur(16px)!important;
}
.hero-media-copy strong,.hero-media-copy span{display:block!important}
.hero-media-copy strong{font-family:MontserratExtra,Arial,sans-serif;color:var(--ink)!important;font-size:20px!important;line-height:1.15!important}
.hero-media-copy span{margin-top:8px;color:var(--ink-soft)!important;font-size:13px!important}
.apps-section,.feature-band,.contact-section,.process-section{color:var(--ink)}
.section-heading h2,.feature-band h2,.contact-section h2{color:var(--ink)}
.section-heading p,.feature-band p{color:var(--ink-soft)}
.app-grid article,.feature-list article{background:var(--panel)!important;border-color:var(--stroke)!important;color:var(--ink)!important}
.app-grid article p,.feature-list span{color:var(--ink-soft)!important}
.process-section{box-shadow:0 28px 90px rgba(3,30,55,.22)}
.contact-section{background:linear-gradient(135deg,#06233d,#007f7a)!important;color:#fff}
.site-footer{background:var(--panel)!important;border-color:var(--stroke)!important;color:var(--ink-soft)!important}
.site-footer strong{color:var(--ink)!important}

.portal-admin{
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--accent-2) 18%,transparent), transparent 28%),
        var(--admin-bg)!important;
    color:var(--admin-ink)!important;
}
.admin-header{
    position:sticky!important;
    top:0!important;
    z-index:40!important;
    min-height:72px!important;
    display:flex!important;
    align-items:center!important;
    gap:24px!important;
    background:color-mix(in srgb,var(--admin-panel) 92%,transparent)!important;
    border-bottom:1px solid var(--admin-line)!important;
    box-shadow:0 16px 46px rgba(3,36,62,.08)!important;
}
.admin-brand{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-width:220px!important;
    text-decoration:none!important;
}
.admin-brand img{
    width:54px!important;
    height:42px!important;
    max-width:54px!important;
    object-fit:contain!important;
    flex:0 0 54px!important;
}
.admin-brand strong{color:var(--admin-ink)!important;font-family:MontserratExtra,Arial,sans-serif!important;font-size:15px!important}
.admin-brand small{color:var(--admin-muted)!important}
.admin-header nav{margin-left:auto!important;display:flex!important;align-items:center!important;gap:14px!important}
.admin-header nav a{color:var(--admin-muted)!important;text-decoration:none!important;font-weight:800!important}
.admin-header nav a.active{color:var(--accent)!important}
.admin-header nav span{color:var(--admin-muted)!important;font-size:12px!important;font-weight:700!important}
.admin-shell{width:min(1180px,calc(100% - 44px))!important;margin:30px auto 70px!important}
.admin-hero{
    min-height:220px!important;
    align-items:flex-end!important;
    padding:30px!important;
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--admin-panel) 96%,transparent),color-mix(in srgb,var(--admin-panel) 84%,transparent)),
        url('../branding/dev-bcg-light.png') center right/cover no-repeat!important;
    border-color:var(--admin-line)!important;
    color:var(--admin-ink)!important;
}
html[data-theme="dark"] .admin-hero{
    background:
        linear-gradient(90deg,rgba(13,35,55,.96),rgba(13,35,55,.72)),
        url('../branding/dev-bcg-dark.png') center right/cover no-repeat!important;
}
.admin-hero h1{color:var(--admin-ink)!important;font-size:clamp(34px,4vw,54px)!important}
.admin-hero p,.empty{color:var(--admin-muted)!important}
.metric-grid article,.admin-card{
    background:var(--admin-panel)!important;
    border-color:var(--admin-line)!important;
    color:var(--admin-ink)!important;
}
.metric-grid span,.admin-card header span,.admin-form label span{color:var(--admin-muted)!important}
.metric-grid strong,.admin-card h2{color:var(--admin-ink)!important}
.admin-form input,.admin-form select{
    background:color-mix(in srgb,var(--admin-panel) 94%,#fff)!important;
    border-color:var(--admin-line)!important;
    color:var(--admin-ink)!important;
}
.table>div{border-color:var(--admin-line)!important}
.table b{color:var(--admin-muted)!important}
.login-page{background:var(--admin-bg) url('../branding/dev-bcg-dark.png') center/cover fixed no-repeat!important}
html[data-theme="light"] .login-page{background:var(--admin-bg) url('../branding/dev-bcg-light.png') center/cover fixed no-repeat!important}
.login-page .auth-panel{background:color-mix(in srgb,var(--admin-panel) 92%,transparent)!important;color:var(--admin-ink)!important}
.auth-logo{width:min(220px,76%)!important;max-width:220px!important}
.auth-panel p{color:var(--admin-muted)!important}
@media(max-width:980px){
    .site-header{height:auto!important;min-height:70px!important}
    .site-header.nav-open .theme-toggle{order:3}
    .public-hero{grid-template-columns:1fr!important;gap:28px!important;padding-top:104px!important}
    .hero-logo-panel{min-height:360px!important}
    .hero-logo-panel img{width:220px!important;max-width:52%!important}
    .admin-header{display:grid!important;grid-template-columns:1fr!important;padding-top:12px!important;padding-bottom:12px!important}
    .admin-header nav{margin-left:0!important;flex-wrap:wrap!important}
}
@media(max-width:640px){
    .brand img{width:46px!important;height:36px!important;max-width:46px!important}
    .public-hero{padding:92px 16px 44px!important}
    .public-hero .hero-copy h1{font-size:38px!important}
    .hero-logo-panel{min-height:300px!important;padding:16px!important}
    .hero-logo-panel img{top:16px!important;left:16px!important;width:170px!important;max-width:58%!important}
    .hero-media-copy{padding:15px!important}
    .hero-media-copy strong{font-size:17px!important}
    .admin-shell{width:calc(100% - 28px)!important}
    .admin-header{padding-left:16px!important;padding-right:16px!important}
    .admin-brand{min-width:0!important}
    .admin-brand img{width:46px!important;height:36px!important;max-width:46px!important}
    .admin-header nav a,.admin-header nav span{font-size:13px!important}
}

/* V0.2.2: dev-bcg belongs to the page, cards follow the active theme */
body:not(.portal-admin){
    background:
        linear-gradient(90deg, color-mix(in srgb,var(--page) 94%,transparent), color-mix(in srgb,var(--page) 70%,transparent)),
        url('../branding/dev-bcg-light.png') center top/cover fixed no-repeat!important;
}
html[data-theme="dark"] body:not(.portal-admin){
    background:
        linear-gradient(90deg, rgba(6,17,31,.94), rgba(6,17,31,.72)),
        url('../branding/dev-bcg-dark.png') center top/cover fixed no-repeat!important;
}
.portal-admin{
    background:
        linear-gradient(90deg, color-mix(in srgb,var(--admin-bg) 92%,transparent), color-mix(in srgb,var(--admin-bg) 72%,transparent)),
        url('../branding/dev-bcg-light.png') center top/cover fixed no-repeat!important;
}
html[data-theme="dark"] .portal-admin{
    background:
        linear-gradient(90deg, rgba(7,21,36,.94), rgba(7,21,36,.76)),
        url('../branding/dev-bcg-dark.png') center top/cover fixed no-repeat!important;
}
.public-hero{
    background:linear-gradient(90deg,color-mix(in srgb,var(--page) 98%,transparent) 0%,color-mix(in srgb,var(--page) 84%,transparent) 52%,transparent 100%)!important;
}
.hero-logo-panel,
.admin-hero,
.process-section,
.feature-list article,
.app-grid article,
.metric-grid article,
.admin-card,
.auth-panel{
    background:color-mix(in srgb,var(--panel) 92%,transparent)!important;
    border-color:var(--stroke)!important;
    backdrop-filter:blur(16px)!important;
}
.portal-admin .admin-hero,
.portal-admin .metric-grid article,
.portal-admin .admin-card,
.portal-admin .auth-panel,
.portal-admin .account-row,
.portal-admin .process-section{
    background:color-mix(in srgb,var(--admin-panel) 92%,transparent)!important;
    border-color:var(--admin-line)!important;
}
html[data-theme="dark"] .hero-logo-panel,
html[data-theme="dark"] .admin-hero,
html[data-theme="dark"] .process-section,
html[data-theme="dark"] .feature-list article,
html[data-theme="dark"] .app-grid article,
html[data-theme="dark"] .metric-grid article,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .auth-panel{
    background:color-mix(in srgb,var(--panel) 88%,transparent)!important;
}
html[data-theme="dark"] .portal-admin .admin-hero,
html[data-theme="dark"] .portal-admin .metric-grid article,
html[data-theme="dark"] .portal-admin .admin-card,
html[data-theme="dark"] .portal-admin .auth-panel,
html[data-theme="dark"] .portal-admin .account-row{
    background:color-mix(in srgb,var(--admin-panel) 88%,transparent)!important;
}
.admin-hero,
.process-section{
    color:var(--ink)!important;
    box-shadow:0 26px 80px rgba(3,48,78,.10)!important;
}
.process-section:before{display:none!important}
.process-section .section-heading p,
.process-list p{color:var(--ink-soft)!important}
.process-list li{
    background:color-mix(in srgb,var(--panel-2) 84%,transparent)!important;
    border-color:var(--stroke)!important;
}
.process-list span{background:var(--accent)!important;color:#fff!important}
.contact-section{
    background:
        linear-gradient(135deg, color-mix(in srgb,var(--accent) 88%,#06233d), color-mix(in srgb,var(--accent-2) 70%,#06233d))!important;
}
.hero-logo-panel:before{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:8px;
    background:url('../branding/dev-logo-full-slogan.png') center/contain no-repeat;
    opacity:.11;
    pointer-events:none;
}
.hero-logo-panel img{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    width:min(280px,58%)!important;
    max-width:280px!important;
    margin-bottom:auto!important;
    z-index:1!important;
}
.hero-media-copy{margin-top:auto!important}
.login-page:before{background:color-mix(in srgb,var(--admin-bg) 46%,transparent)!important}
@media(max-width:980px){
    .public-hero{background:color-mix(in srgb,var(--page) 90%,transparent)!important}
}
@media(max-width:640px){
    .hero-logo-panel img{width:min(190px,62%)!important;max-width:190px!important}
}

/* V0.3.0: developer console sidebar, profile photos, live clock, widget controls */
@font-face{font-family:Digital7;src:url('../branding/font-dsv/digital-7.ttf') format('truetype');font-display:swap}
.developer-console{
    min-height:100vh!important;
    padding:0!important;
}
.developer-sidebar{
    position:fixed;
    top:18px;
    left:18px;
    bottom:18px;
    z-index:45;
    width:300px;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 88%,transparent);
    box-shadow:0 30px 90px rgba(3,32,57,.18);
    backdrop-filter:blur(20px);
    transition:width .22s ease, padding .22s ease;
}
.sidebar-collapse{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    align-self:flex-end;
    border:1px solid var(--admin-line);
    border-radius:8px;
    color:var(--admin-ink);
    background:color-mix(in srgb,var(--admin-panel) 92%,transparent);
    cursor:pointer;
    font:800 18px/1 Poppins,Arial,sans-serif;
}
.sidebar-logo{
    min-height:58px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px;
    border-radius:8px;
    text-decoration:none;
    color:var(--admin-ink);
}
.sidebar-logo:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.sidebar-logo img{
    width:58px;
    height:44px;
    object-fit:contain;
    flex:0 0 58px;
}
.sidebar-logo strong,.sidebar-logo small{display:block}
.sidebar-logo strong{
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:15px;
    line-height:1.1;
}
.sidebar-logo small{
    color:var(--admin-muted);
    font-size:12px;
    margin-top:2px;
}
.clock-panel{
    display:grid;
    place-items:center;
    text-align:center;
    overflow:hidden;
    padding:16px 14px 14px;
    border:1px solid color-mix(in srgb,var(--accent) 28%,var(--admin-line));
    border-radius:8px;
    background:
        linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 62%),
        color-mix(in srgb,var(--admin-panel) 84%,transparent);
}
.clock-panel strong{
    display:block;
    color:var(--accent);
    font-family:Digital7,Consolas,monospace;
    font-size:34px;
    font-weight:400;
    line-height:1;
    letter-spacing:0;
    text-shadow:
        0 0 8px color-mix(in srgb,var(--accent) 62%,transparent),
        0 0 20px color-mix(in srgb,var(--accent-2) 38%,transparent);
    white-space:nowrap;
}
.clock-panel span{
    display:block;
    margin-top:9px;
    color:var(--admin-muted);
    font-size:12px;
    font-weight:800;
}
.sidebar-profile{
    display:grid;
    justify-items:center;
    gap:7px;
    padding:16px 12px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 78%,transparent);
}
.profile-avatar{
    width:92px;
    height:92px;
    display:grid;
    place-items:center;
    border:3px solid color-mix(in srgb,var(--accent) 34%,#fff);
    border-radius:50%;
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,#fff),color-mix(in srgb,var(--accent-2) 18%,#fff));
    color:var(--accent);
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:32px;
    object-fit:cover;
    box-shadow:0 16px 34px rgba(0,127,122,.18);
}
.profile-avatar.fallback{text-transform:uppercase}
.sidebar-profile strong{
    color:var(--admin-ink);
    font-family:MontserratExtra,Arial,sans-serif;
    text-align:center;
    line-height:1.15;
}
.sidebar-profile small{
    color:var(--admin-muted);
    font-size:12px;
    overflow-wrap:anywhere;
}
.sidebar-profile em{
    border-radius:999px;
    padding:5px 10px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 12%,transparent);
    font-size:11px;
    font-style:normal;
    font-weight:900;
}
.profile-upload{
    width:100%;
    display:grid;
    gap:8px;
    margin-top:8px;
}
.profile-upload label span{
    display:block;
    margin-bottom:5px;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
}
.profile-upload input[type=file]{
    width:100%;
    color:var(--admin-muted);
    font-size:12px;
}
.compact-button{
    width:100%;
    min-height:38px!important;
    font-size:12px!important;
}
.sidebar-nav{
    display:grid;
    gap:7px;
    margin-top:auto;
}
.sidebar-nav a{
    min-height:42px;
    display:flex;
    align-items:center;
    border:1px solid transparent;
    border-radius:8px;
    padding:0 12px;
    color:var(--admin-muted);
    text-decoration:none;
    font-weight:900;
}
.sidebar-nav a:hover,
.sidebar-nav a.active{
    border-color:color-mix(in srgb,var(--accent) 22%,var(--admin-line));
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 10%,transparent);
}
.developer-main{
    width:auto;
    max-width:calc(100% - 334px);
    min-height:100vh;
    margin-left:334px;
    padding:28px 28px 70px;
    transition:margin-left .22s ease, max-width .22s ease;
}
.developer-topbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:18px;
    padding:28px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 88%,transparent);
    box-shadow:0 24px 70px rgba(3,36,62,.10);
    backdrop-filter:blur(18px);
}
.developer-topbar h1{
    margin:0 0 8px;
    color:var(--admin-ink);
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:clamp(32px,4vw,54px);
    line-height:1.02;
}
.developer-topbar p{
    max-width:780px;
    margin:0;
    color:var(--admin-muted);
}
.topbar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.widget-controls{
    margin-top:0!important;
    margin-bottom:18px!important;
}
.widget-toggle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:10px;
}
.widget-toggle-grid button,
[data-widget-hide]{
    min-height:38px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:0 12px;
    color:var(--admin-ink);
    background:color-mix(in srgb,var(--admin-panel) 92%,transparent);
    cursor:pointer;
    font:900 12px/1 Poppins,Arial,sans-serif;
}
.widget-toggle-grid button:hover,
[data-widget-hide]:hover{
    border-color:var(--accent);
    color:var(--accent);
}
.widget-toggle-grid button.is-muted{
    color:var(--admin-muted);
    background:color-mix(in srgb,var(--admin-panel) 70%,transparent);
    border-style:dashed;
}
.dashboard-widget.is-hidden{display:none!important}
.developer-main .metric-grid article{
    position:relative;
    min-height:156px;
    padding-top:44px!important;
}
.developer-main .metric-grid article [data-widget-hide]{
    position:absolute;
    top:12px;
    right:12px;
    min-height:30px;
    padding:0 10px;
}
.account-row img.avatar{
    display:block;
    object-fit:cover;
    background:none;
}
.sidebar-collapsed .developer-sidebar{
    width:88px;
    padding:12px;
}
.sidebar-collapsed .developer-main{
    max-width:calc(100% - 122px);
    margin-left:122px;
}
.sidebar-collapsed .sidebar-collapse{align-self:center}
.sidebar-collapsed .sidebar-logo{justify-content:center;padding:4px}
.sidebar-collapsed .sidebar-logo span,
.sidebar-collapsed .sidebar-profile strong,
.sidebar-collapsed .sidebar-profile small,
.sidebar-collapsed .sidebar-profile em,
.sidebar-collapsed .profile-upload{display:none}
.sidebar-collapsed .sidebar-logo img{
    width:50px;
    height:40px;
    flex-basis:50px;
}
.sidebar-collapsed .clock-panel{display:none}
.sidebar-collapsed .sidebar-profile{
    padding:12px 6px;
}
.sidebar-collapsed .profile-avatar{
    width:54px;
    height:54px;
    font-size:19px;
    border-width:2px;
}
.sidebar-collapsed .sidebar-nav a{
    min-height:38px;
    justify-content:center;
    padding:0;
    font-size:0;
}
.sidebar-collapsed .sidebar-nav a:before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:currentColor;
}
@media(max-width:980px){
    .developer-sidebar{
        position:relative;
        top:auto;
        left:auto;
        bottom:auto;
        width:calc(100% - 28px);
        margin:14px auto 0;
    }
    .developer-main,
    .sidebar-collapsed .developer-main{
        max-width:100%;
        margin-left:0;
        padding:14px 14px 54px;
    }
    .developer-topbar{
        align-items:flex-start;
        display:grid;
        padding:22px;
    }
    .topbar-actions{justify-content:flex-start}
    .sidebar-collapsed .developer-sidebar{
        width:calc(100% - 28px);
        max-height:84px;
        overflow:hidden;
    }
    .sidebar-collapsed .sidebar-logo span{display:block}
}
@media(max-width:640px){
    .developer-sidebar{padding:12px}
    .developer-topbar h1{font-size:32px}
    .developer-topbar p{font-size:14px}
    .widget-toggle-grid{grid-template-columns:1fr}
    .developer-main .metric-grid article{min-height:136px}
    .clock-panel strong{font-size:30px}
    .profile-avatar{width:78px;height:78px}
}

/* V0.3.1: national villages and token administration */
.compact-hero{min-height:170px!important}
.data-metrics article strong{
    font-size:clamp(26px,3vw,38px)!important;
    white-space:nowrap;
}
.form-note{
    display:block;
    color:var(--admin-muted);
    font-size:12px;
    line-height:1.5;
}
.filter-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:12px;
    align-items:end;
}
.filter-form label span{
    display:block;
    margin-bottom:6px;
    color:var(--admin-muted);
    font-size:12px;
    font-weight:800;
}
.filter-form input,
.filter-form select,
.inline-token-form select,
.inline-token-form input{
    width:100%;
    min-height:40px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:0 11px;
    color:var(--admin-ink);
    background:color-mix(in srgb,var(--admin-panel) 94%,#fff);
    font:700 12px/1.2 Poppins,Arial,sans-serif;
}
.data-table{
    display:grid;
    overflow:auto;
}
.data-table>div{
    min-width:980px;
    display:grid;
    gap:14px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid var(--admin-line);
    font-size:13px;
}
.data-table>div:first-child{
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
}
.data-table span,
.data-table small,
.data-table strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.data-table strong,
.data-table small{
    display:block;
}
.data-table small{
    color:var(--admin-muted);
    font-size:11px;
    line-height:1.4;
}
.villages-table>div{grid-template-columns:120px minmax(180px,1.1fr) minmax(140px,.9fr) minmax(180px,1fr) minmax(120px,.8fr) 130px}
.tokens-table>div{grid-template-columns:minmax(260px,1.25fr) 150px 110px minmax(180px,.9fr) minmax(320px,1.4fr)}
.status-badge{
    display:inline-flex;
    min-height:28px;
    align-items:center;
    border-radius:999px;
    padding:0 10px;
    color:var(--admin-muted);
    background:color-mix(in srgb,var(--admin-muted) 12%,transparent);
    font-size:11px;
    font-style:normal;
    font-weight:900;
    white-space:nowrap;
}
.status-badge.active{color:#08735e;background:rgba(18,181,137,.12)}
.status-badge.pending{color:#8a6716;background:rgba(230,180,76,.16)}
.status-badge.suspended,
.status-badge.expired,
.status-badge.revoked{color:#9c2a2a;background:rgba(214,69,69,.12)}
.status-badge.none{color:var(--admin-muted);background:color-mix(in srgb,var(--admin-line) 65%,transparent)}
.inline-token-form{
    display:grid;
    grid-template-columns:1fr 120px 136px 80px 82px;
    gap:7px;
    align-items:center;
}
.inline-token-form .compact-button{
    min-height:40px!important;
    padding:0 10px!important;
}
@media(max-width:980px){
    .filter-form{grid-template-columns:1fr}
    .filter-form .button{width:100%}
    .inline-token-form{grid-template-columns:1fr 1fr}
    .inline-token-form .compact-button{grid-column:1/-1}
}

/* V0.3.3: unified sidebar pages, token table scrolling, and display preferences */
.display-menu{
    position:relative;
}
.display-menu summary{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:0 14px;
    color:var(--admin-ink);
    background:color-mix(in srgb,var(--admin-panel) 92%,transparent);
    box-shadow:0 10px 28px rgba(3,48,78,.08);
    cursor:pointer;
    font:800 13px/1 Poppins,Arial,sans-serif;
    list-style:none;
}
.display-menu summary::-webkit-details-marker{display:none}
.display-popover{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:70;
    width:260px;
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 96%,transparent);
    box-shadow:0 24px 70px rgba(3,36,62,.18);
    backdrop-filter:blur(18px);
}
.display-popover label span,
.display-popover small{
    display:block;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
}
.display-popover select{
    width:100%;
    min-height:38px;
    margin-top:5px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:0 10px;
    color:var(--admin-ink);
    background:var(--admin-panel);
    font:800 12px/1 Poppins,Arial,sans-serif;
}
.display-density-compact .developer-topbar,
.display-density-compact .admin-card,
.display-density-compact .metric-grid article{padding:16px!important}
.display-density-compact .developer-main{padding-top:20px}
.display-density-comfortable .developer-topbar,
.display-density-comfortable .admin-card{padding:28px!important}
.display-width-normal .developer-main{
    max-width:min(1180px,calc(100% - 334px));
}
.display-width-wide .developer-main{
    max-width:min(1480px,calc(100% - 334px));
}
.display-width-full .developer-main{
    max-width:calc(100% - 334px);
}
.sidebar-collapsed.display-width-normal .developer-main{
    max-width:min(1180px,calc(100% - 122px));
}
.sidebar-collapsed.display-width-wide .developer-main{
    max-width:min(1480px,calc(100% - 122px));
}
.sidebar-collapsed.display-width-full .developer-main{
    max-width:calc(100% - 122px);
}
.display-font-small .developer-main{font-size:14px}
.display-font-normal .developer-main{font-size:15px}
.display-font-large .developer-main{font-size:17px}
.token-filter-form{
    grid-template-columns:190px minmax(260px,1fr) 130px auto auto;
}
.table-scroll{
    max-height:68vh;
    overflow:auto;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 76%,transparent);
}
.table-scroll .data-table{
    overflow:visible;
}
.table-scroll .data-table>div{
    padding-left:14px;
    padding-right:14px;
}
.tokens-table>div{
    min-width:1480px;
    grid-template-columns:minmax(360px,1.1fr) 230px 120px minmax(280px,.85fr) minmax(430px,1.15fr);
}
.tokens-table .region-cell,
.tokens-table .region-cell strong,
.tokens-table .region-cell small,
.tokens-table .license-cell{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
}
.tokens-table .token-hint-cell{
    min-width:220px;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    font-family:Consolas,monospace;
    font-size:12px;
}
.table-pagination{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:14px;
    color:var(--admin-muted);
    font-size:12px;
    font-weight:800;
}
.table-pagination>div{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
@media(max-width:980px){
    .display-popover{
        left:0;
        right:auto;
        width:min(280px,calc(100vw - 40px));
    }
    .display-width-normal .developer-main,
    .display-width-wide .developer-main,
    .display-width-full .developer-main,
    .sidebar-collapsed.display-width-normal .developer-main,
    .sidebar-collapsed.display-width-wide .developer-main,
    .sidebar-collapsed.display-width-full .developer-main{
        max-width:100%;
    }
    .token-filter-form{grid-template-columns:1fr}
    .table-pagination{display:grid}
    .table-pagination>div{justify-content:flex-start}
}

/* V0.3.4: display and theme settings live inside the sidebar */
.developer-sidebar{
    overflow-y:auto;
    scrollbar-width:thin;
}
.sidebar-settings{
    display:grid;
    gap:10px;
    padding:12px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:
        linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 64%),
        color-mix(in srgb,var(--admin-panel) 76%,transparent);
}
.sidebar-settings header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.sidebar-settings header span{
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
}
.sidebar-settings .sidebar-theme-toggle{
    min-height:34px;
    padding:0 12px;
    box-shadow:none;
    font-size:12px;
}
.sidebar-settings .display-menu,
.sidebar-settings .display-menu summary{
    width:100%;
}
.sidebar-settings .display-menu summary{
    min-height:36px;
    box-shadow:none;
}
.sidebar-settings .display-popover{
    position:static;
    width:100%;
    margin-top:8px;
    padding:12px;
    box-shadow:none;
    background:color-mix(in srgb,var(--admin-panel) 84%,transparent);
    backdrop-filter:none;
}
.sidebar-collapsed .sidebar-settings{
    display:none;
}
@media(max-width:980px){
    .sidebar-settings .display-popover{
        width:100%;
    }
}

/* V0.3.5: cleaner sidebar profile, token table ergonomics, and dashboard footer */
.clock-panel{
    flex:0 0 auto;
    min-height:104px;
    padding:18px 12px 16px;
}
.clock-panel strong{
    font-size:36px;
}
.clock-panel span{
    line-height:1.35;
}
.sidebar-profile{
    flex:0 0 auto;
    gap:6px;
    padding:14px 12px;
}
.sidebar-profile .profile-avatar{
    width:82px;
    height:82px;
    font-size:29px;
}
.profile-edit-menu{
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 78%,transparent);
}
.profile-edit-menu summary{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 12px;
    color:var(--admin-ink);
    cursor:pointer;
    font:900 12px/1 Poppins,Arial,sans-serif;
    list-style:none;
}
.profile-edit-menu summary::-webkit-details-marker{display:none}
.profile-edit-menu summary:after{
    content:"+";
    color:var(--accent);
    font-size:16px;
}
.profile-edit-menu[open] summary:after{content:"-"}
.profile-edit-menu .profile-upload{
    padding:0 12px 12px;
    margin-top:0;
}
.mini-alert{
    margin:0 12px 10px;
    padding:10px;
    font-size:11px;
    line-height:1.45;
}
.sidebar-collapsed .profile-edit-menu{
    display:none;
}
.developer-footer{
    margin-top:24px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 86%,transparent);
    color:var(--admin-muted);
    box-shadow:0 18px 52px rgba(3,36,62,.08);
}
.developer-footer-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}
.developer-footer-brand img{
    width:54px;
    height:40px;
    object-fit:contain;
    flex:0 0 54px;
}
.developer-footer-brand strong,
.developer-footer-brand span{
    display:block;
}
.developer-footer-brand strong{
    color:var(--admin-ink);
    font-family:MontserratExtra,Arial,sans-serif;
    line-height:1.15;
}
.developer-footer-brand span,
.developer-footer-meta span{
    font-size:12px;
}
.developer-footer-meta{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
    text-align:right;
    font-weight:800;
}
.tokens-table>div{
    min-width:1740px;
    grid-template-columns:minmax(390px,1.05fr) 240px 130px minmax(300px,.82fr) minmax(620px,1.35fr);
}
.tokens-table>div:first-child{
    position:sticky;
    top:0;
    z-index:3;
    background:color-mix(in srgb,var(--admin-panel) 96%,transparent);
}
.column-hint{
    width:max-content;
    cursor:help;
    border-bottom:1px dotted color-mix(in srgb,var(--accent) 52%,transparent);
}
.tokens-table .token-action-cell,
.tokens-table .token-action-cell *{
    overflow:visible;
    text-overflow:clip;
}
.inline-token-form{
    grid-template-columns:minmax(180px,1fr) 132px 148px 92px 92px;
    min-width:590px;
}
.inline-token-form .compact-button{
    min-width:86px;
}
.table-scroll{
    max-height:78vh;
}
@media(max-width:980px){
    .developer-footer{
        display:grid;
        text-align:left;
    }
    .developer-footer-meta{
        justify-content:flex-start;
        text-align:left;
    }
    .clock-panel{
        min-height:96px;
    }
    .tokens-table>div{
        min-width:1680px;
    }
    .inline-token-form{
        grid-template-columns:1fr 1fr;
        min-width:560px;
    }
    .inline-token-form .compact-button{
        grid-column:1/-1;
    }
}
@media(max-width:640px){
    .clock-panel strong{
        font-size:32px;
    }
    .developer-footer-brand img{
        width:46px;
        height:34px;
        flex-basis:46px;
    }
}

/* V0.3.6: token validity duration is calculated from realtime activation date */
.tokens-table>div{
    min-width:2020px;
    grid-template-columns:minmax(390px,1fr) 240px 130px minmax(320px,.78fr) minmax(850px,1.45fr);
}
.inline-token-form{
    grid-template-columns:minmax(190px,1fr) 132px 330px 102px 92px;
    min-width:820px;
    align-items:end;
}
.token-form-field,
.duration-picker label{
    display:grid;
    gap:5px;
    min-width:0;
}
.token-form-field span,
.duration-picker label span{
    color:var(--admin-muted);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
}
.duration-picker{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    min-width:0;
}
.license-preview{
    grid-column:1/-1;
    display:block;
    color:var(--admin-muted);
    font-size:11px;
    font-weight:900;
    line-height:1.45;
}
.compact-license-field input{
    min-width:0;
}
@media(max-width:980px){
    .tokens-table>div{
        min-width:1900px;
    }
    .inline-token-form{
        grid-template-columns:1fr 1fr;
        min-width:700px;
    }
    .duration-picker,
    .license-preview,
    .inline-token-form .compact-button{
        grid-column:1/-1;
    }
}

/* V0.3.7: manual village creation, one-time token reveal, and footer credit */
.manual-village-card{
    grid-column:1/-1;
}
.manual-village-form{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:end;
}
.manual-village-form .button{
    width:100%;
}
.checkbox-field{
    min-height:46px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    background:color-mix(in srgb,var(--admin-panel) 82%,transparent);
    color:var(--admin-ink);
    font-size:12px;
    font-weight:900;
}
.checkbox-field input{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px;
}
.checkbox-field span{
    margin:0!important;
    color:var(--admin-ink)!important;
    font-size:12px!important;
}
.generated-token-alert{
    display:grid;
    gap:8px;
}
.generated-token-alert code{
    width:max-content;
    max-width:100%;
    padding:9px 12px;
    border:1px solid color-mix(in srgb,var(--accent) 34%,var(--admin-line));
    border-radius:8px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 10%,transparent);
    font:900 13px/1.4 Consolas,monospace;
    overflow:auto;
}
.developer-footer{
    flex-wrap:wrap;
    padding:0;
    overflow:hidden;
}
.developer-footer-brand,
.developer-footer-meta{
    padding:18px 20px;
}
.developer-footer-credit{
    width:100%;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 20px;
    color:#a9b9c8;
    background:#071523;
    font-weight:900;
}
.site-footer{
    min-height:54px;
    padding:0 max(22px,calc((100% - var(--max))/2))!important;
    align-items:center;
    color:#a9b9c8!important;
    background:#071523!important;
    border-color:#071523!important;
    font-weight:900;
}
@media(max-width:980px){
    .manual-village-form{
        grid-template-columns:1fr 1fr;
    }
    .developer-footer-credit{
        display:grid;
        align-content:center;
        padding:14px 20px;
    }
}
@media(max-width:640px){
    .manual-village-form{
        grid-template-columns:1fr;
    }
    .generated-token-alert code{
        width:100%;
    }
    .site-footer{
        display:grid;
        gap:8px;
        padding:14px 16px!important;
    }
}

/* V0.3.8: public visit verification popup with cache refresh */
.public-refresh-open{
    overflow:hidden;
}
.public-refresh-modal[hidden]{
    display:none!important;
}
.public-refresh-modal{
    position:fixed;
    inset:0;
    z-index:200;
    display:grid;
    place-items:center;
    padding:24px;
}
.public-refresh-backdrop{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb,var(--accent-2) 28%,transparent), transparent 30%),
        rgba(3,15,26,.72);
    backdrop-filter:blur(16px);
}
.public-refresh-card{
    position:relative;
    z-index:1;
    width:min(460px,100%);
    display:grid;
    gap:14px;
    justify-items:center;
    padding:34px;
    border:1px solid color-mix(in srgb,var(--stroke) 72%,transparent);
    border-radius:8px;
    color:var(--ink);
    background:
        linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel-2) 94%,transparent));
    box-shadow:0 34px 110px rgba(1,16,27,.36);
    text-align:center;
}
.public-refresh-card img{
    width:84px;
    height:66px;
    object-fit:contain;
}
.public-refresh-card span{
    color:var(--accent);
    font-size:12px;
    font-weight:900;
    letter-spacing:0;
    text-transform:uppercase;
}
.public-refresh-card h2{
    margin:0;
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:clamp(30px,5vw,44px);
    line-height:1;
}
.public-refresh-card p{
    margin:0;
    color:var(--ink-soft);
    font-size:15px;
}
.public-refresh-card .button{
    width:100%;
    margin-top:8px;
}
.public-refresh-card .button:disabled{
    opacity:.72;
    cursor:wait;
    transform:none;
}
@media(max-width:640px){
    .public-refresh-modal{
        padding:16px;
    }
    .public-refresh-card{
        padding:26px 20px;
    }
}

/* V0.4.0: configurable public page and developer-side content control */
.developer-landing-hero{
    width:100%;
    min-height:calc(100vh - 76px);
    display:grid;
    grid-template-columns:minmax(0,620px) minmax(360px,520px);
    align-items:center;
    gap:58px;
    padding:124px max(24px,calc((100% - var(--max))/2)) 70px;
    background:
        linear-gradient(120deg,color-mix(in srgb,var(--page) 96%,transparent) 0%,color-mix(in srgb,var(--page-2) 84%,transparent) 54%,color-mix(in srgb,var(--accent-2) 13%,transparent) 100%),
        url('../branding/dev-bcg-light.png') center/cover no-repeat;
}
html[data-theme="dark"] .developer-landing-hero{
    background:
        linear-gradient(120deg,rgba(3,13,25,.94) 0%,rgba(6,25,43,.9) 62%,rgba(0,127,122,.2) 100%),
        url('../branding/dev-bcg-dark.png') center/cover no-repeat;
}
.landing-hero-copy h1{
    margin:0 0 22px;
    color:var(--ink);
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:clamp(44px,6.1vw,86px);
    line-height:1;
    max-width:760px;
}
.landing-hero-copy p{
    max-width:680px;
    margin:0;
    color:var(--ink-soft);
    font-size:19px;
}
.landing-product-panel{
    position:relative;
    min-height:470px;
    display:grid;
    align-content:center;
    justify-items:center;
    gap:24px;
    padding:28px;
    border:1px solid color-mix(in srgb,var(--stroke) 72%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--panel) 78%,transparent);
    box-shadow:0 34px 100px rgba(4,70,96,.22);
    backdrop-filter:blur(14px);
}
.landing-product-panel img{
    width:min(94%,420px);
    height:auto;
    filter:drop-shadow(0 30px 36px rgba(3,57,83,.2));
}
.product-console{
    width:100%;
    display:grid;
    gap:10px;
    padding:18px;
    border:1px solid color-mix(in srgb,var(--stroke) 76%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--panel) 88%,transparent);
}
.product-console strong,
.product-console span,
.product-console b,
.product-console em{
    display:block;
}
.product-console strong{
    color:var(--ink);
    font-family:MontserratExtra,Arial,sans-serif;
    line-height:1.15;
}
.product-console span,
.product-console em{
    color:var(--ink-soft);
    font-size:13px;
}
.product-console div{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding-top:10px;
    border-top:1px solid var(--stroke);
}
.product-console b{
    color:var(--accent);
    font-size:13px;
}
.landing-stats{
    width:min(var(--max),calc(100% - 44px));
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:28px auto 0;
}
.landing-stats article{
    min-height:118px;
    display:grid;
    align-content:center;
    padding:22px;
    border:1px solid var(--stroke);
    border-radius:8px;
    background:var(--panel);
    box-shadow:0 18px 50px rgba(4,70,96,.08);
}
.landing-stats strong{
    color:var(--accent);
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:clamp(28px,4vw,44px);
    line-height:1;
}
.landing-stats span{
    color:var(--ink-soft);
    font-weight:800;
}
.landing-section,
.landing-process,
.trust-section{
    width:min(var(--max),calc(100% - 44px));
    margin:92px auto 0;
}
.landing-app-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.landing-app-grid article{
    min-height:246px;
    display:grid;
    align-content:start;
    padding:24px;
    border:1px solid var(--stroke);
    border-radius:8px;
    background:linear-gradient(180deg,var(--panel),var(--panel-2));
    box-shadow:0 18px 48px rgba(4,70,96,.07);
}
.landing-app-grid span{
    color:var(--accent);
    font-family:MontserratExtra,Arial,sans-serif;
}
.landing-app-grid h3{
    margin:52px 0 10px;
    color:var(--ink);
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:21px;
}
.landing-app-grid p{
    margin:0;
    color:var(--ink-soft);
    font-size:14px;
}
.split-section{
    display:grid;
    grid-template-columns:minmax(0,1fr) 520px;
    gap:42px;
    align-items:start;
}
.split-section h2,
.trust-section h2{
    margin:0 0 14px;
    color:var(--ink);
    font-family:MontserratExtra,Arial,sans-serif;
    font-size:clamp(34px,4vw,58px);
    line-height:1.04;
}
.split-section p,
.trust-section p{
    margin:0;
    color:var(--ink-soft);
    font-size:17px;
}
.landing-process{
    display:grid;
    grid-template-columns:360px minmax(0,1fr);
    gap:44px;
    padding:42px;
    border-radius:8px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(5,23,40,.94),rgba(0,96,96,.72)),
        url('../branding/dev-bcg-dark.png') center/cover no-repeat;
}
.landing-process .section-heading p,
.landing-process .process-list p{
    color:#c5dbd6;
}
.trust-section{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,520px);
    gap:36px;
    align-items:center;
    padding:36px;
    border:1px solid var(--stroke);
    border-radius:8px;
    background:var(--panel);
    box-shadow:0 20px 60px rgba(4,70,96,.08);
}
.trust-list{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.trust-list span{
    min-height:40px;
    display:inline-flex;
    align-items:center;
    border:1px solid color-mix(in srgb,var(--accent) 24%,var(--stroke));
    border-radius:999px;
    padding:0 14px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 9%,transparent);
    font-size:13px;
    font-weight:900;
}
.public-content-form{
    display:grid;
    gap:16px;
}
.public-content-form textarea{
    width:100%;
    min-height:120px;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:12px;
    color:var(--admin-ink);
    background:color-mix(in srgb,var(--admin-panel) 94%,transparent);
    font:700 13px/1.55 Poppins,Arial,sans-serif;
    resize:vertical;
}
.public-editor-grid{
    margin-bottom:12px;
}
.public-editor-grid input,
.public-editor-grid textarea{
    min-height:44px;
}
.public-section-toggle-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:10px;
}
.public-save-card{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
}
.public-save-card .button{
    min-width:190px;
}
@media(max-width:980px){
    .developer-landing-hero,
    .split-section,
    .landing-process,
    .trust-section{
        grid-template-columns:1fr;
    }
    .developer-landing-hero{
        min-height:auto;
        padding-top:104px;
    }
    .landing-product-panel{
        min-height:320px;
    }
    .landing-stats,
    .landing-app-grid{
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:640px){
    .developer-landing-hero{
        padding:94px 14px 42px;
        gap:30px;
    }
    .landing-hero-copy h1{
        font-size:42px;
    }
    .landing-hero-copy p{
        font-size:16px;
    }
    .landing-stats,
    .landing-app-grid{
        grid-template-columns:1fr;
    }
    .landing-section,
    .landing-process,
    .trust-section{
        width:calc(100% - 28px);
        margin-top:48px;
    }
    .landing-process,
    .trust-section{
        padding:24px;
    }
    .public-save-card{
        display:grid;
        justify-content:stretch;
    }
    .public-save-card .button{
        width:100%;
    }
}

/* V0.4.9: Google Drive OAuth Broker */
.broker-status-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.broker-status-grid article{
    min-width:0;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:16px;
    background:color-mix(in srgb,var(--admin-panel) 94%,transparent);
}
.broker-status-grid span,
.broker-status-grid small{
    display:block;
    color:var(--admin-muted);
    font-size:12px;
}
.broker-status-grid strong{
    display:block;
    margin:7px 0;
    color:var(--admin-ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.oauth-broker-form{
    margin-top:0;
}
.oauth-broker-form textarea{
    width:100%;
    border:1px solid var(--admin-line);
    border-radius:8px;
    padding:12px;
    color:var(--admin-ink);
    background:color-mix(in srgb,var(--admin-panel) 94%,transparent);
    font:700 13px/1.55 Poppins,Arial,sans-serif;
    resize:vertical;
}
.form-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
}
.compact-note{
    margin:12px 0 0;
    font-size:13px;
}
.broker-connection-table>div{
    grid-template-columns:110px 130px minmax(180px,1fr) 180px 180px;
}
.oauth-steps{
    margin:0;
    padding-left:20px;
    color:var(--admin-muted);
}
.oauth-steps li+li{
    margin-top:8px;
}
.oauth-result-panel{
    text-align:left;
}
.oauth-result-badge{
    display:inline-flex;
    min-height:32px;
    align-items:center;
    border-radius:8px;
    padding:0 12px;
    margin-bottom:14px;
    font-weight:900;
    letter-spacing:.04em;
    border:1px solid var(--admin-line);
}
.oauth-result-panel.is-success .oauth-result-badge{
    color:#116333;
    background:#eafff0;
    border-color:#9bd9b1;
}
.oauth-result-panel.is-error .oauth-result-badge{
    color:#912626;
    background:#fff1f1;
    border-color:#ffb4b4;
}
.oauth-result-details{
    display:grid;
    gap:8px;
    margin:18px 0 0;
}
.oauth-result-details div{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:12px;
    border-top:1px solid var(--admin-line);
    padding-top:8px;
}
.oauth-result-details dt{
    color:var(--admin-muted);
    font-weight:800;
}
.oauth-result-details dd{
    margin:0;
    min-width:0;
    overflow-wrap:anywhere;
}
@media(max-width:900px){
    .broker-status-grid{
        grid-template-columns:1fr;
    }
    .broker-connection-table>div{
        grid-template-columns:1fr;
    }
    .oauth-result-details div{
        grid-template-columns:1fr;
    }
}