:root{
    --ink:#1d2939;
    --muted:#667085;
    --line:#e7edf5;
    --paper:#f6f8fb;
    --panel:#ffffff;
    --navy:#101828;
    --blue:#0d6efd;
    --blue-dark:#0757d8;
    --teal:#12b76a;
    --green:#16a34a;
    --danger:#d92d20;
    --warning:#f59e0b;
    --violet:#7c3aed;
    --shadow:0 12px 34px rgba(16,24,40,.07);
    --soft-shadow:0 6px 18px rgba(16,24,40,.05);
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color:var(--ink);
    background:var(--paper);
}

a{color:inherit;text-decoration:none}

button,input{
    font:inherit;
}

input,
select,
textarea{
    width:100%;
    min-height:44px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 13px;
    color:var(--ink);
    background:#fff;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus{
    outline:3px solid rgba(37,99,235,.28);
    outline-offset:3px;
}

textarea{
    min-height:130px;
    resize:vertical;
}

.guest-shell{
    width:min(1120px, calc(100% - 28px));
    margin:0 auto;
    padding:28px 0 42px;
}

.public-guest-shell{
    display:grid;
    gap:22px;
}

body:has(.login-card){
    min-height:100vh;
    background:
        radial-gradient(circle at 50% 0%, rgba(13,110,253,.10), transparent 28%),
        linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);
}

body:has(.login-card) .login-guest-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:32px 0;
}

.hero-page{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
    gap:40px;
    align-items:center;
    min-height:520px;
    padding:56px;
    border-radius:26px;
    color:#fff;
    background:linear-gradient(135deg,#173b57,#1f6f83 62%,#0f766e);
    box-shadow:var(--shadow);
}

.hero-copy h1{
    max-width:650px;
    margin:18px 0;
    font-size:60px;
    line-height:1.04;
}

.hero-copy p{
    max-width:640px;
    color:rgba(255,255,255,.88);
    font-size:18px;
    line-height:1.75;
}

.hero-actions{
    justify-content:flex-start;
    margin-top:20px;
}

.pill{
    display:inline-flex;
    align-items:center;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.30);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}

.hero-preview{
    padding:22px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:22px;
    background:rgba(255,255,255,.12);
}

.preview-window{
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    color:var(--ink);
}

.preview-top{
    height:52px;
    border-bottom:1px solid var(--line);
    background:#f8fbff;
}

.preview-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    padding:18px;
}

.preview-grid span{
    min-height:92px;
    display:flex;
    align-items:center;
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    font-weight:800;
}

.public-portal{
    display:grid;
    gap:22px;
}

.public-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
}

.public-page-header{
    padding:24px;
    border:1px solid var(--line);
    border-radius:8px;
    background:
        radial-gradient(circle at 96% 0%, rgba(13,110,253,.08), transparent 30%),
        #fff;
    box-shadow:var(--soft-shadow);
}

.public-page-header h1{
    margin:6px 0 8px;
    color:var(--navy);
    font-size:32px;
    line-height:1.15;
}

.public-page-header p:last-child{
    max-width:760px;
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

.public-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 4px 0;
    color:var(--muted);
    font-size:13px;
}

.public-footer nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.public-footer a{
    color:#475467;
    font-weight:800;
}

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

.public-brand-mark{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    overflow:hidden;
    border-radius:10px;
    color:#fff;
    background:var(--blue);
    font-weight:900;
    box-shadow:0 12px 24px rgba(13,110,253,.18);
}

.public-brand-mark img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.public-brand strong,
.public-brand small{
    display:block;
    line-height:1.15;
}

.public-brand strong{
    color:var(--navy);
    font-size:18px;
}

.public-brand small{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
}

.public-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
}

.public-nav a,
.public-nav summary{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 11px;
    border-radius:8px;
    color:#475467;
    font-size:13px;
    font-weight:800;
}

.public-nav summary{
    cursor:pointer;
    list-style:none;
}

.public-nav summary::-webkit-details-marker{
    display:none;
}

.public-nav summary::after{
    content:"";
    width:7px;
    height:7px;
    margin-left:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
}

.public-nav a:hover,
.public-nav summary:hover,
.public-nav-group[open] summary{
    background:#f2f6ff;
    color:var(--blue);
}

.public-nav .public-login-link{
    color:#fff;
    background:var(--blue);
}

.public-nav .public-danger-link{
    background:#d92d20;
    box-shadow:0 10px 22px rgba(217,45,32,.18);
}

.public-nav .public-user-chip{
    color:var(--blue);
    background:#eef4ff;
    box-shadow:inset 0 0 0 1px #d6e4ff;
}

.public-nav-group{
    position:relative;
}

.public-nav-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:25;
    display:grid;
    min-width:230px;
    gap:4px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:0 22px 46px rgba(16,24,40,.14);
}

.public-nav-menu a{
    justify-content:flex-start;
    min-height:38px;
    white-space:nowrap;
}

.public-mobile-menu,
.public-mobile-login,
.public-mobile-drawer-toggle,
.public-mobile-drawer,
.public-mobile-drawer-head,
.public-mobile-drawer-backdrop,
.public-mobile-bottom-nav{
    display:none;
}

.public-landing{
    gap:0;
    overflow:hidden;
    border:1px solid rgba(207,216,231,.72);
    border-radius:8px;
    background:
        linear-gradient(180deg,#ffffff 0%,#f6f9fd 46%,#f2f6fb 100%);
    box-shadow:0 24px 70px rgba(16,24,40,.08);
}

.landing-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
    align-items:center;
    min-height:472px;
    padding:72px 72px 88px;
    overflow:hidden;
    border-radius:0;
    background:
        radial-gradient(circle at 78% 18%, rgba(13,110,253,.16), transparent 28%),
        radial-gradient(circle at 18% 88%, rgba(18,183,106,.10), transparent 24%),
        linear-gradient(180deg,#fbfdff 0%,#eaf4ff 100%);
}

.landing-hero::before{
    content:"";
    position:absolute;
    inset:22px 22px auto auto;
    width:170px;
    height:170px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(13,110,253,.08));
    opacity:.9;
}

.landing-hero::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(13,110,253,.22),transparent);
}

.landing-hero-slider{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.landing-hero-slider::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(5,18,42,.82) 0%,rgba(5,18,42,.62) 35%,rgba(5,18,42,.26) 66%,rgba(5,18,42,.08) 100%),
        linear-gradient(180deg,rgba(7,21,45,.18),rgba(13,110,253,.16));
}

.landing-hero-slider img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.04);
    animation:landingHeroFade 18s infinite;
}

.landing-hero-slider img:nth-child(2){animation-delay:6s}
.landing-hero-slider img:nth-child(3){animation-delay:12s}

.landing-hero-slider.slide-count-1 img{
    opacity:1;
    animation:none;
}

.landing-hero-slider.slide-count-2 img{
    animation-duration:12s;
}

.landing-hero-slider.slide-count-2 img:nth-child(2){
    animation-delay:6s;
}

.landing-hero-slider.slide-count-3 img{
    animation-duration:18s;
}

.landing-hero-slider.slide-count-3 img:nth-child(2){animation-delay:6s}
.landing-hero-slider.slide-count-3 img:nth-child(3){animation-delay:12s}

@keyframes landingHeroFade{
    0%{opacity:0; transform:scale(1.04)}
    8%{opacity:1}
    28%{opacity:1}
    38%{opacity:0; transform:scale(1.10)}
    100%{opacity:0; transform:scale(1.10)}
}

.landing-hero.has-photo-slider{
    background:#0b1f45;
}

.landing-hero.has-photo-slider::before{
    display:none;
}

.landing-hero.has-photo-slider .landing-copy h1,
.landing-hero.has-photo-slider .landing-copy h1 span{
    color:#fff;
}

.landing-hero.has-photo-slider .landing-copy p{
    color:rgba(255,255,255,.86);
}

.landing-hero.has-photo-slider .landing-actions .secondary-button{
    color:#fff;
    border-color:rgba(255,255,255,.32);
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 16px 30px rgba(0,0,0,.12);
}

.landing-hero.has-photo-slider .landing-visual{
    display:none;
}

.landing-copy{
    position:relative;
    z-index:2;
}

.landing-copy h1{
    margin:0;
    color:#0b1f45;
    font-size:56px;
    line-height:1;
    letter-spacing:0;
}

.landing-copy h1 span{
    color:var(--blue);
}

.landing-copy p{
    max-width:470px;
    margin:20px 0 0;
    color:#4c5f76;
    font-size:16px;
    line-height:1.78;
}

.landing-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}

.landing-actions .primary-button,
.landing-actions .secondary-button{
    min-width:166px;
    min-height:46px;
    box-shadow:0 16px 30px rgba(13,110,253,.18);
}

.landing-actions .secondary-button{
    border:1px solid #cfe0ff;
    box-shadow:0 10px 24px rgba(16,24,40,.06);
}

.landing-visual{
    position:relative;
    min-height:330px;
}

.landing-skyline{
    position:absolute;
    inset:28px 20px auto auto;
    display:flex;
    align-items:flex-end;
    gap:16px;
    opacity:.28;
}

.landing-skyline span{
    display:block;
    width:48px;
    border-radius:10px 10px 0 0;
    background:#9bc8ff;
}

.landing-skyline span:nth-child(1){height:86px}
.landing-skyline span:nth-child(2){height:132px}
.landing-skyline span:nth-child(3){height:110px}
.landing-skyline span:nth-child(4){height:160px}

.landing-house{
    position:absolute;
    right:72px;
    bottom:54px;
    width:270px;
    height:190px;
    z-index:3;
}

.landing-roof{
    position:absolute;
    top:0;
    left:32px;
    width:212px;
    height:94px;
    clip-path:polygon(50% 0,100% 55%,100% 100%,0 100%,0 55%);
    background:linear-gradient(135deg,#c9e6ff,#6faeff);
    box-shadow:0 20px 36px rgba(13,75,150,.20);
}

.landing-wall{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:126px;
    border-radius:16px 16px 10px 10px;
    background:linear-gradient(180deg,#fff,#bedcff);
    box-shadow:0 28px 60px rgba(13,75,150,.20);
}

.landing-door,
.landing-window{
    position:absolute;
    z-index:4;
    border-radius:6px;
    background:#1f7df2;
}

.landing-door{
    left:116px;
    bottom:22px;
    width:48px;
    height:70px;
}

.landing-window{
    bottom:88px;
    width:50px;
    height:42px;
    background:#56a9ff;
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.76);
}

.landing-window-left{left:42px}
.landing-window-right{right:42px}

.landing-sign{
    position:absolute;
    right:-30px;
    bottom:18px;
    z-index:5;
    padding:8px 10px;
    border-radius:6px;
    color:#0b4fba;
    background:#fff;
    font-size:12px;
    font-weight:900;
    box-shadow:0 12px 22px rgba(16,24,40,.12);
}

.landing-tree{
    position:absolute;
    z-index:4;
    width:62px;
    height:62px;
    border-radius:50%;
    background:#45b84a;
    box-shadow:-20px 16px 0 #2aa148, 18px 14px 0 #5cc957;
}

.landing-tree-left{
    right:332px;
    bottom:44px;
}

.landing-tree-right{
    right:34px;
    bottom:46px;
}

.landing-ground{
    position:absolute;
    right:12px;
    bottom:16px;
    width:520px;
    height:54px;
    border-radius:50%;
    background:linear-gradient(180deg,#b9dbff,#7eb9ff);
    opacity:.82;
}

.landing-feature-strip{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    width:min(980px, calc(100% - 96px));
    margin:-58px auto 44px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.landing-feature-card{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:14px;
    min-height:136px;
    padding:22px 20px;
    overflow:hidden;
    border:1px solid rgba(207,216,231,.82);
    border-radius:8px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 42px rgba(16,24,40,.09);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.landing-feature-card .public-service-icon{
    grid-row:1 / 3;
}

.landing-feature-card:last-child{
    border-right:1px solid rgba(207,216,231,.82);
}

.landing-feature-card::after{
    content:"";
    position:absolute;
    right:-34px;
    bottom:-42px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(13,110,253,.07);
}

.landing-feature-card:hover{
    transform:translateY(-4px);
    border-color:#bdd4ff;
    box-shadow:0 26px 56px rgba(16,24,40,.12);
}

.landing-feature-card strong,
.landing-feature-card small{
    display:block;
}

.landing-feature-card strong{
    color:var(--navy);
    font-size:15px;
}

.landing-feature-card small{
    grid-column:2;
    margin-top:6px;
    color:var(--muted);
    line-height:1.58;
}

.landing-section{
    padding:0 72px 46px;
    scroll-margin-top:24px;
}

.landing-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.landing-section-head h2{
    margin:0;
    color:var(--navy);
    font-size:24px;
    line-height:1.15;
}

.landing-section-head a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 10px;
    border-radius:8px;
    color:var(--blue);
    background:#eef4ff;
    font-size:12px;
    font-weight:900;
}

.landing-news-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.landing-news-card{
    position:relative;
    min-height:190px;
    padding:22px;
    overflow:hidden;
    border:1px solid rgba(207,216,231,.82);
    border-radius:8px;
    background:
        linear-gradient(180deg,#fff,#fbfdff);
    box-shadow:0 14px 34px rgba(16,24,40,.07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.landing-news-card::after{
    content:"";
    position:absolute;
    right:-46px;
    top:-44px;
    width:126px;
    height:126px;
    border-radius:50%;
    background:rgba(13,110,253,.07);
}

.landing-news-card:hover{
    transform:translateY(-3px);
    border-color:#bdd4ff;
    box-shadow:0 24px 50px rgba(16,24,40,.11);
}

.landing-news-card span{
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    color:var(--blue);
    background:#eef4ff;
    font-size:11px;
    font-weight:900;
}

.landing-news-card strong{
    display:block;
    margin-top:14px;
    color:var(--navy);
    font-size:17px;
    line-height:1.35;
}

.landing-news-card p{
    margin:10px 0 16px;
    color:var(--muted);
    line-height:1.62;
}

.landing-news-card small{
    color:#667085;
}

.landing-stats-band{
    display:grid;
    grid-template-columns:1.4fr repeat(4,minmax(0,1fr));
    gap:16px;
    align-items:center;
    margin:0 72px 46px;
    padding:22px 26px;
    border-radius:8px;
    color:#fff;
    background:
        radial-gradient(circle at 96% 0%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg,#0d6efd,#0757d8);
    box-shadow:0 24px 54px rgba(13,110,253,.26);
}

.landing-stats-band > div,
.landing-area{
    display:flex;
    align-items:center;
    gap:12px;
}

.landing-stats-band > div:not(.landing-area){
    min-height:66px;
    padding:12px 14px;
    border-radius:8px;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

.landing-stats-band strong,
.landing-stats-band small{
    display:block;
}

.landing-stats-band small{
    color:rgba(255,255,255,.72);
}

.landing-stats-band > div:not(.landing-area) strong{
    font-size:24px;
}

.landing-gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}

.landing-gallery-grid figure{
    margin:0;
    overflow:hidden;
    border:1px solid rgba(207,216,231,.82);
    border-radius:8px;
    background:#fff;
    box-shadow:0 14px 34px rgba(16,24,40,.07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.landing-gallery-grid figure:only-child{
    max-width:360px;
}

.landing-gallery-empty{
    grid-column:1 / -1;
    margin:0;
    padding:22px;
    border:1px dashed #cfd8e7;
    border-radius:8px;
    color:var(--muted);
    background:#fff;
    box-shadow:var(--soft-shadow);
}

.landing-gallery-grid figure:hover{
    transform:translateY(-3px);
    border-color:#bdd4ff;
    box-shadow:0 24px 50px rgba(16,24,40,.11);
}

.landing-gallery-grid figure span,
.landing-gallery-grid figure img{
    display:block;
    width:100%;
    aspect-ratio:16 / 10;
    object-fit:cover;
    background:
        linear-gradient(135deg,rgba(13,110,253,.22),rgba(18,183,106,.20)),
        linear-gradient(45deg,#dbeafe,#f8fbff);
}

.landing-gallery-link{
    display:block;
    cursor:zoom-in;
}

.landing-gallery-grid figure:nth-child(2) span{background:linear-gradient(135deg,#e0f2fe,#dbeafe)}
.landing-gallery-grid figure:nth-child(3) span{background:linear-gradient(135deg,#dcfce7,#bfdbfe)}
.landing-gallery-grid figure:nth-child(4) span{background:linear-gradient(135deg,#ede9fe,#dbeafe)}

.landing-gallery-grid figcaption{
    display:grid;
    gap:4px;
    min-height:54px;
    padding:12px 14px;
    color:var(--navy);
    font-size:13px;
    font-weight:900;
}

.landing-gallery-grid figcaption small{
    color:#667085;
    font-size:11px;
}

.gallery-lightbox{
    position:fixed;
    inset:0;
    z-index:90;
    display:grid;
    place-items:center;
    padding:28px;
    background:rgba(15,23,42,.74);
}

.gallery-lightbox[hidden]{
    display:none;
}

.has-gallery-lightbox{
    overflow:hidden;
}

.gallery-lightbox figure{
    position:relative;
    width:min(980px,100%);
    max-height:calc(100vh - 72px);
    margin:0;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.28);
}

.gallery-lightbox img{
    display:block;
    width:100%;
    max-height:calc(100vh - 160px);
    object-fit:contain;
    background:#0f172a;
}

.gallery-lightbox figcaption{
    display:grid;
    gap:4px;
    padding:14px 16px;
}

.gallery-lightbox figcaption strong{
    color:var(--navy);
}

.gallery-lightbox figcaption small{
    color:var(--muted);
}

.gallery-lightbox-close{
    position:fixed;
    top:20px;
    right:20px;
    z-index:91;
    min-height:38px;
    padding:8px 12px;
    border:0;
    border-radius:8px;
    color:#fff;
    background:rgba(255,255,255,.16);
    cursor:pointer;
    font-weight:900;
}

.landing-agenda-list,
.landing-contact-section .public-contact-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.landing-agenda-list article,
.landing-contact-section .public-contact-list a{
    border-color:rgba(207,216,231,.82);
    background:#fff;
    box-shadow:0 14px 34px rgba(16,24,40,.07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.landing-agenda-list article:hover,
.landing-contact-section .public-contact-list a:hover{
    transform:translateY(-3px);
    border-color:#bdd4ff;
    box-shadow:0 24px 50px rgba(16,24,40,.11);
}

.public-hero{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
    gap:24px;
    align-items:stretch;
    min-height:430px;
    padding:36px;
    overflow:hidden;
    border-radius:8px;
    color:#fff;
    background:
        radial-gradient(circle at 92% 16%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(135deg,#0b63e5 0%,#1689ff 100%);
    box-shadow:0 24px 64px rgba(13,110,253,.18);
}

.public-hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.public-hero .eyebrow{
    color:rgba(255,255,255,.82);
}

.public-hero h1{
    max-width:680px;
    margin:8px 0 14px;
    color:#fff;
    font-size:44px;
    line-height:1.08;
}

.public-hero p{
    max-width:640px;
    margin:0;
    color:rgba(255,255,255,.84);
    line-height:1.75;
}

.public-action-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:22px;
}

.public-hero .secondary-button{
    color:#fff;
    background:rgba(255,255,255,.16);
}

.public-hero .ghost-button{
    color:#fff;
    background:rgba(255,255,255,.10);
    border-color:rgba(255,255,255,.26);
}

.public-hero-card{
    display:grid;
    place-items:center;
}

.public-phone-shell{
    width:min(310px,100%);
    padding:18px;
    border:1px solid rgba(255,255,255,.30);
    border-radius:28px;
    background:rgba(255,255,255,.16);
    box-shadow:0 28px 60px rgba(3,41,91,.20);
}

.public-phone-top{
    width:74px;
    height:8px;
    margin:0 auto 18px;
    border-radius:999px;
    background:rgba(255,255,255,.38);
}

.public-phone-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.public-phone-grid span,
.public-phone-list span{
    display:block;
    border-radius:10px;
    background:#fff;
}

.public-phone-grid span{
    min-height:78px;
    padding:12px;
    color:var(--navy);
    font-size:12px;
    font-weight:900;
}

.public-phone-list{
    display:grid;
    gap:10px;
    margin-top:14px;
}

.public-phone-list span{
    height:44px;
    opacity:.92;
}

.public-quick-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.public-action-card,
.public-panel{
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
}

.public-action-card{
    display:grid;
    gap:9px;
    min-height:144px;
    padding:18px;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.public-action-card:hover{
    transform:translateY(-2px);
    border-color:#cfe0ff;
    box-shadow:0 18px 38px rgba(16,24,40,.09);
}

.public-action-card strong{
    color:var(--navy);
    font-size:16px;
}

.public-action-card small{
    color:var(--muted);
    line-height:1.45;
}

.public-action-danger{
    border-color:#ffd5d2;
}

.public-service-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    color:var(--blue);
    background:#eef4ff;
    box-shadow:inset 0 0 0 1px #d6e4ff;
}

.public-service-icon::before{
    content:"";
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:var(--public-service-mask) center / contain no-repeat;
    mask:var(--public-service-mask) center / contain no-repeat;
}

.public-service-letter{
    --public-service-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m0 3.2V17h16V8.2l-8 5.2zM5.5 7l6.5 4.3L18.5 7z'/%3E%3C/svg%3E");
}

.public-service-status{
    --public-service-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v2H4zm0 4h16v12H4zm3 3v2h10v-2zm0 4v2h7v-2z'/%3E%3C/svg%3E");
}

.public-service-login,
.public-service-profile{
    --public-service-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10m-9 9c.5-4.5 3.5-7 9-7s8.5 2.5 9 7z'/%3E%3C/svg%3E");
}

.public-service-panic{
    color:var(--danger);
    background:#fff1f0;
    box-shadow:inset 0 0 0 1px #fecaca;
    --public-service-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 22 20H2zm-1 7v5h2V9zm0 7v2h2v-2z'/%3E%3C/svg%3E");
}

.public-service-finance{
    color:var(--violet);
    background:#f5f3ff;
    box-shadow:inset 0 0 0 1px #ddd6fe;
    --public-service-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h14a2 2 0 0 1 2 2v2h-2V7H4v10h16v-2h2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m11 5h7v4h-7a2 2 0 0 1 0-4'/%3E%3C/svg%3E");
}

.public-section-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:18px;
}

.public-panel{
    padding:24px;
}

.public-service-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.public-service-list a{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfdff;
}

.public-service-list strong,
.public-service-list small{
    display:block;
}

.public-service-list strong{
    color:var(--navy);
}

.public-service-list small{
    margin-top:4px;
    color:var(--muted);
    line-height:1.45;
}

.public-stat-list{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.public-stat-list div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfdff;
}

.public-stat-list span{
    color:var(--muted);
    font-weight:800;
}

.public-stat-list strong{
    color:var(--navy);
    font-size:22px;
}

.public-contact-card{
    display:grid;
    gap:6px;
    margin-top:16px;
    padding:16px;
    border-radius:8px;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--blue-dark));
}

.public-contact-card span{
    color:rgba(255,255,255,.84);
}

.public-community-grid,
.public-support-grid{
    align-items:start;
}

.public-timeline-list,
.public-agenda-list,
.public-contact-list,
.public-security-list{
    display:grid;
    gap:12px;
}

.public-timeline-list article,
.public-agenda-list article,
.public-contact-list a,
.public-security-list div{
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfdff;
}

.public-timeline-list article{
    display:grid;
    gap:5px;
    padding:15px;
}

.public-timeline-list span{
    width:max-content;
    padding:4px 9px;
    border-radius:999px;
    color:var(--blue);
    background:#eef4ff;
    font-size:11px;
    font-weight:900;
}

.public-timeline-list strong,
.public-timeline-list small,
.public-agenda-list strong,
.public-agenda-list small,
.public-contact-list strong,
.public-contact-list small,
.public-security-list strong,
.public-security-list span{
    display:block;
}

.public-timeline-list strong,
.public-agenda-list strong,
.public-contact-list strong,
.public-security-list strong{
    color:var(--navy);
}

.public-timeline-list small,
.public-agenda-list small,
.public-contact-list small,
.public-security-list span{
    margin-top:4px;
    color:var(--muted);
    line-height:1.45;
}

.public-agenda-list article{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
}

.public-agenda-list time{
    display:grid;
    place-items:center;
    width:52px;
    min-height:52px;
    flex:0 0 52px;
    border-radius:8px;
    color:var(--blue);
    background:#eef4ff;
    font-weight:900;
}

.public-contact-list a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
}

.public-security-list div{
    padding:14px;
}

.public-security-panel .primary-button{
    width:100%;
    margin-top:16px;
}

.public-notice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.public-notice p{
    max-width:680px;
    margin:8px 0 0;
    color:var(--muted);
    line-height:1.7;
}

.public-service-page{
    display:grid;
    gap:18px;
    width:min(920px,100%);
    margin:0 auto;
}

.public-service-hero{
    position:relative;
    overflow:hidden;
    padding:28px;
    border-radius:8px;
    color:#fff;
    background:
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.20), transparent 22%),
        linear-gradient(135deg,#0b63e5 0%,#1689ff 100%);
    box-shadow:0 22px 54px rgba(13,110,253,.18);
}

.public-service-hero .public-service-icon{
    margin-bottom:18px;
    color:#fff;
    background:rgba(255,255,255,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

.public-service-hero .eyebrow,
.public-service-hero p{
    color:rgba(255,255,255,.84);
}

.public-service-hero h1,
.public-service-hero h2{
    max-width:680px;
    margin:6px 0 10px;
    color:#fff;
    font-size:34px;
    line-height:1.14;
}

.public-service-hero p{
    max-width:680px;
    margin:0;
    line-height:1.7;
}

.public-danger-hero{
    background:
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.18), transparent 22%),
        linear-gradient(135deg,#c81e1e 0%,#ef4444 100%);
}

.public-form-panel{
    padding:24px;
}

.public-help-strip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    border:1px solid #d6e4ff;
    border-radius:8px;
    color:#175cd3;
    background:#f2f6ff;
}

.public-help-strip span{
    color:#475467;
}

.public-danger-strip{
    border-color:#fecaca;
    color:#b42318;
    background:#fff5f5;
}

.public-status-search{
    margin-bottom:16px;
}

.public-status-card{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    margin-bottom:16px;
}

.public-status-card div{
    padding:16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfdff;
}

.public-status-card span,
.public-status-card strong{
    display:block;
}

.public-status-card span{
    color:var(--muted);
    font-size:12px;
    font-weight:900;
}

.public-status-card strong{
    margin-top:8px;
    color:var(--navy);
    font-size:20px;
}

.public-error-panel{
    display:grid;
    justify-items:start;
    gap:12px;
    padding:28px;
}

.public-error-panel h2{
    margin:0;
    color:var(--navy);
    font-size:24px;
}

.public-error-panel p{
    max-width:680px;
    margin:0;
    color:var(--muted);
    line-height:1.7;
}

.resident-action-panel{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
    align-items:center;
    gap:18px;
    padding:18px;
    overflow:hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(13,110,253,.10), transparent 32%),
        #fff;
}

.resident-action-panel .public-action-row{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:0;
}

.resident-shortcut{
    display:grid;
    justify-items:center;
    gap:7px;
    min-height:104px;
    padding:14px 10px;
    border:1px solid var(--line);
    border-radius:8px;
    text-align:center;
    background:#fbfdff;
    box-shadow:var(--soft-shadow);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.resident-shortcut:hover{
    transform:translateY(-2px);
    border-color:#cfe0ff;
    box-shadow:0 16px 34px rgba(16,24,40,.09);
}

.resident-shortcut strong,
.resident-shortcut small{
    display:block;
}

.resident-shortcut strong{
    color:var(--navy);
    font-size:14px;
}

.resident-shortcut small{
    color:var(--muted);
    font-size:12px;
    line-height:1.25;
}

.resident-shortcut-danger{
    border-color:#fed7d7;
    background:#fffafa;
}

.resident-summary-grid .public-action-card,
.finance-summary-grid .public-action-card{
    position:relative;
    min-height:132px;
    overflow:hidden;
    padding:20px;
    background:
        linear-gradient(180deg,#fff,#fbfdff);
}

.resident-summary-grid .public-action-card::after{
    content:"";
    position:absolute;
    right:-24px;
    bottom:-30px;
    width:96px;
    height:96px;
    border-radius:50%;
    background:rgba(13,110,253,.08);
}

.resident-summary-grid .public-action-card:nth-child(2)::after{
    background:rgba(18,183,106,.09);
}

.resident-summary-grid .public-action-card:nth-child(3)::after,
.resident-summary-grid .public-action-card:nth-child(4)::after{
    background:rgba(124,58,237,.08);
}

.resident-summary-grid .public-action-card > span:not(.public-service-icon),
.finance-summary-grid .public-action-card > span:not(.public-service-icon){
    color:#526174;
    font-size:12px;
    font-weight:900;
}

.resident-summary-grid .public-action-card strong,
.finance-summary-grid .public-action-card strong{
    position:relative;
    z-index:1;
    overflow-wrap:anywhere;
    font-size:32px;
    line-height:1;
}

.resident-summary-grid .public-service-icon{
    width:42px;
    height:42px;
    border-radius:12px;
}

.resident-list-grid{
    display:grid;
    gap:12px;
}

.resident-list-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-height:76px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfdff;
    box-shadow:var(--soft-shadow);
}

.resident-list-card strong,
.resident-list-card small{
    display:block;
}

.resident-list-card strong{
    color:var(--navy);
}

.resident-list-card small,
.resident-list-card time{
    color:var(--muted);
    line-height:1.45;
}

.resident-avatar{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    color:var(--blue);
    background:#eef4ff;
    box-shadow:inset 0 0 0 1px #d6e4ff;
    font-weight:900;
}

.resident-letter-card,
.resident-due-card{
    grid-template-columns:auto minmax(0,1fr) auto auto;
}

.resident-dues-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.finance-summary-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
}

.content-card,
.center-card,
.login-card,
.panel{
    margin-top:20px;
    padding:24px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
    transition:border-color .18s ease, box-shadow .18s ease;
}

.panel:hover{
    border-color:#d6e4ff;
    box-shadow:0 18px 38px rgba(16,24,40,.08);
}

.content-card h2,
.panel h2{
    margin:0;
    color:var(--navy);
    font-size:20px;
    line-height:1.25;
}

.content-card p,
.center-card p,
.login-card p{
    color:var(--muted);
    line-height:1.75;
}

.center-card,
.login-card{
    max-width:520px;
    margin:70px auto;
}

.login-screen{
    display:grid;
    grid-template-columns:minmax(320px,.92fr) minmax(380px,1.08fr);
    width:min(1060px, 100%);
    min-height:650px;
    overflow:hidden;
    border:1px solid rgba(214,228,255,.9);
    border-radius:8px;
    background:#fff;
    box-shadow:0 26px 80px rgba(16,24,40,.13);
}

.login-hero-panel{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:650px;
    padding:76px 70px 54px;
    color:#fff;
    background:
        radial-gradient(circle at 115% 38%, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(145deg,#0c6df5 0%,#1689ff 100%);
}

.login-hero-panel::before{
    content:"";
    position:absolute;
    top:42px;
    left:36px;
    width:78px;
    height:78px;
    opacity:.20;
    background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px);
    background-size:12px 12px;
}

.login-hero-panel::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-84px;
    width:360px;
    height:210px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.login-hero-brand,
.login-mobile-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.login-hero-logo{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    flex:0 0 48px;
    overflow:hidden;
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
    font-weight:900;
}

.login-hero-logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.login-hero-brand strong,
.login-hero-brand small,
.login-mobile-brand strong,
.login-mobile-brand small{
    display:block;
    line-height:1.14;
}

.login-hero-brand strong{
    color:#fff;
    font-size:21px;
}

.login-hero-brand small{
    margin-top:4px;
    color:rgba(255,255,255,.78);
    font-size:13px;
}

.login-hero-copy{
    position:relative;
    z-index:1;
    max-width:330px;
    margin-top:84px;
}

.login-hero-copy h2{
    margin:0;
    color:#fff;
    font-size:30px;
    line-height:1.22;
}

.login-hero-copy p{
    margin:18px 0 0;
    color:rgba(255,255,255,.84);
    font-size:14px;
    line-height:1.75;
}

.login-illustration{
    position:absolute;
    right:34px;
    bottom:0;
    left:34px;
    height:260px;
    z-index:1;
}

.login-illustration .ground{
    position:absolute;
    right:-70px;
    bottom:-40px;
    left:-70px;
    height:116px;
    border-radius:50% 50% 0 0;
    background:linear-gradient(180deg,rgba(116,190,255,.62),rgba(86,166,255,.88));
}

.login-illustration .building{
    position:absolute;
    bottom:64px;
    width:38px;
    border-radius:8px 8px 0 0;
    background:rgba(255,255,255,.12);
}

.building-one{left:54px;height:82px}
.building-two{left:112px;height:116px}
.building-three{right:68px;height:96px}

.house{
    position:absolute;
    left:110px;
    bottom:58px;
    width:150px;
    height:104px;
}

.house .roof{
    position:absolute;
    top:0;
    left:20px;
    width:112px;
    height:62px;
    clip-path:polygon(50% 0,100% 52%,100% 100%,0 100%,0 52%);
    background:linear-gradient(135deg,#dceeff,#8fc4ff);
    box-shadow:0 14px 30px rgba(3,41,91,.18);
}

.house .wall{
    position:absolute;
    right:4px;
    bottom:0;
    left:4px;
    height:68px;
    border-radius:10px 10px 6px 6px;
    background:linear-gradient(180deg,#f6fbff,#b7dbff);
    box-shadow:0 18px 36px rgba(3,41,91,.22);
}

.house .door,
.house .window{
    position:absolute;
    z-index:2;
    bottom:14px;
    border-radius:4px;
    background:#1267d9;
}

.house .door{
    left:65px;
    width:28px;
    height:42px;
}

.house .window{
    width:26px;
    height:24px;
    background:#55a8ff;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.72);
}

.window-left{left:22px}
.window-right{right:22px}

.tree{
    position:absolute;
    left:58px;
    bottom:52px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#38c172;
    box-shadow:-18px 14px 0 #22a85b, 17px 16px 0 #2fb968;
}

.login-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:min(420px, calc(100% - 64px));
    max-width:none;
    margin:0 auto;
    padding:54px 0;
    overflow:hidden;
    border:0;
    background:#fff;
    box-shadow:none;
}

.login-mobile-brand{
    display:none;
}

.login-lock{
    position:relative;
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    margin:0 auto 20px;
    border-radius:999px;
    background:#eef4ff;
}

.login-lock::before{
    content:"";
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--blue),var(--blue-dark));
    box-shadow:0 14px 26px rgba(13,110,253,.25);
}

.login-lock::after{
    content:"";
    position:absolute;
    width:20px;
    height:20px;
    background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10H4V11a1 1 0 0 1 1-1zm2 0h8V8a4 4 0 0 0-8 0zm5 7.7V15h-2v2.7z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10H4V11a1 1 0 0 1 1-1zm2 0h8V8a4 4 0 0 0-8 0zm5 7.7V15h-2v2.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.login-heading{
    position:relative;
    z-index:1;
    margin-bottom:28px;
    text-align:center;
}

.login-heading p:last-child{
    max-width:340px;
    margin:0 auto;
    color:#667085;
    font-size:13px;
    line-height:1.55;
}

.login-card .form-stack{
    position:relative;
    z-index:1;
    gap:16px;
}

.login-card label{
    color:#344054;
    font-size:12px;
    letter-spacing:0;
}

.login-field{
    position:relative;
}

.login-field::before{
    content:"";
    position:absolute;
    left:14px;
    bottom:15px;
    z-index:2;
    width:18px;
    height:18px;
    background:#667085;
    -webkit-mask:var(--login-field-icon) center / contain no-repeat;
    mask:var(--login-field-icon) center / contain no-repeat;
}

.login-field:first-of-type{
    --login-field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m2 4v2h6V8zm0 4v2h8v-2zm11-3a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-3 8h6c-.2-1.7-1.2-2.7-3-2.7s-2.8 1-3 2.7'/%3E%3C/svg%3E");
}

.login-field:nth-of-type(2){
    --login-field-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 10V8a6 6 0 1 1 12 0v2h1a1 1 0 0 1 1 1v10H4V11a1 1 0 0 1 1-1zm2 0h8V8a4 4 0 0 0-8 0zm5 7.7V15h-2v2.7z'/%3E%3C/svg%3E");
}

.login-card input{
    min-height:50px;
    border-color:#d8e4f5;
    border-radius:8px;
    padding-left:44px;
    background:#fbfdff;
    box-shadow:inset 0 1px 0 rgba(16,24,40,.02);
}

.login-card input:focus{
    border-color:#9ec5fe;
    background:#fff;
}

.login-card .primary-button{
    width:100%;
    min-height:52px;
    margin-top:16px;
    box-shadow:0 16px 30px rgba(13,110,253,.24);
}

.login-card .primary-button:hover{
    background:var(--blue-dark);
}

.login-copyright{
    margin:42px 0 0;
    color:#98a2b3;
    font-size:12px;
    text-align:center;
}

.login-helper{
    margin:16px 0 0;
    padding:11px 12px;
    border-radius:8px;
    color:#475467;
    background:#f8fbff;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

.center-card h1,
.login-card h1{
    margin:0 0 10px;
    color:var(--navy);
    font-size:28px;
    letter-spacing:0;
}

.app-shell{
    min-height:100vh;
    display:block;
}

.sidebar{
    position:fixed;
    inset:16px auto 16px 16px;
    z-index:20;
    width:252px;
    height:calc(100vh - 32px);
    overflow-y:auto;
    border:1px solid var(--line);
    border-radius:8px;
    padding:20px 16px;
    background:#fff;
    color:var(--ink);
    box-shadow:var(--soft-shadow);
}

.sidebar::-webkit-scrollbar{
    width:8px;
}

.sidebar::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#d0d9e8;
}

.brand{
    display:flex;
    gap:12px;
    align-items:center;
    min-height:48px;
}

.brand-mark{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:8px;
    color:#fff;
    background:var(--blue);
    font-weight:900;
    overflow:hidden;
}

.brand-mark img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.brand small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:12px;
}

.mobile-menu-control,
.mobile-notification,
.mobile-drawer-toggle,
.mobile-drawer-head,
.mobile-drawer-backdrop,
.mobile-bottom-nav{
    display:none;
}

.nav-list{
    display:grid;
    gap:16px;
    margin-top:26px;
}

.nav-section{
    display:grid;
    gap:6px;
}

.nav-section-title{
    margin:0 0 2px;
    padding:0 10px;
    color:#98a2b3;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.nav-link{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:9px 10px;
    border-radius:8px;
    color:#475467;
    font-size:14px;
    font-weight:700;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.nav-link > span:nth-child(2){
    flex:1;
    min-width:0;
}

.nav-badge{
    display:inline-grid;
    place-items:center;
    min-width:22px;
    height:22px;
    padding:0 7px;
    border-radius:999px;
    color:#fff;
    background:#ef4444;
    font-size:11px;
    font-weight:900;
    box-shadow:0 8px 18px rgba(239,68,68,.25);
}

.nav-icon{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    flex:0 0 18px;
    border-radius:6px;
    color:var(--blue);
    background:#eef4ff;
    box-shadow:inset 0 0 0 1px #d6e4ff;
}

.nav-icon::before{
    content:"";
    width:13px;
    height:13px;
    background:currentColor;
    -webkit-mask:var(--nav-mask) center / contain no-repeat;
    mask:var(--nav-mask) center / contain no-repeat;
}

.nav-icon-dashboard,
.nav-icon-default{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E");
}

.nav-icon-residents,
.nav-icon-family,
.nav-icon-users{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8m8-1a3 3 0 1 1 0-6 3 3 0 0 1 0 6M2 20c.4-4 3-6 7-6s6.6 2 7 6zm13.5-1.8c-.4-1.7-1.2-3-2.5-4 1-.7 2.2-1 3.6-1 3.3 0 5.2 1.7 5.4 5z'/%3E%3C/svg%3E");
}

.nav-icon-card,
.nav-icon-dues,
.nav-icon-proofs{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6.5A2.5 2.5 0 0 1 5.5 4h13A2.5 2.5 0 0 1 21 6.5V8H3zm0 4h18v7A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5zm3 4v2h5v-2z'/%3E%3C/svg%3E");
}

.nav-icon-letters{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m0 3.2V17h16V8.2l-8 5.2zM5.5 7l6.5 4.3L18.5 7z'/%3E%3C/svg%3E");
}

.nav-icon-monitor,
.nav-icon-gallery,
.nav-icon-reports,
.nav-icon-audit{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h18v2H2V4h2zm2-2V9h4v8zm6 0V5h4v12zm6 0v-6h4v6z'/%3E%3C/svg%3E");
}

.nav-icon-history{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 1-8.2 12.7l1.9-.7A7 7 0 1 0 5 12H2l4-4 4 4H7a5 5 0 1 1 1.5 3.5l1.4-1.4A3 3 0 1 0 9 12h3V7h2v7H9.3A5 5 0 0 1 12 3'/%3E%3C/svg%3E");
}

.nav-icon-finance,
.nav-icon-arrears,
.nav-icon-expenses,
.nav-icon-assets{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h14a2 2 0 0 1 2 2v2h-2V7H4v10h16v-2h2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m11 5h7v4h-7a2 2 0 0 1 0-4m0 1.5a.5.5 0 0 0 0 1h1v-1z'/%3E%3C/svg%3E");
}

.nav-icon-security{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5-3.3 8.3-8 11-4.7-2.7-8-6-8-11V5zm0 4.2L7 8v3c0 3.5 2 6 5 7.8 3-1.8 5-4.3 5-7.8V8z'/%3E%3C/svg%3E");
}

.nav-icon-cameras{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h11a2 2 0 0 1 2 2v1.5l5-3v11l-5-3V16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}

.nav-icon-panic,
.nav-icon-incidents{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 22 20H2zm-1 7v5h2V9zm0 7v2h2v-2z'/%3E%3C/svg%3E");
}

.nav-icon-settings{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.5 2h3l.5 2.4q.9.3 1.6.7l2.1-1.3 2.1 2.1-1.3 2.1q.4.8.7 1.6l2.4.5v3l-2.4.5q-.3.9-.7 1.6l1.3 2.1-2.1 2.1-2.1-1.3q-.8.4-1.6.7l-.5 2.4h-3l-.5-2.4q-.9-.3-1.6-.7l-2.1 1.3-2.1-2.1 1.3-2.1q-.4-.8-.7-1.6L2 13.5v-3l2.4-.5q.3-.9.7-1.6L3.8 6.3l2.1-2.1 2.1 1.3q.8-.4 1.6-.7zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6'/%3E%3C/svg%3E");
}

.nav-icon-logout{
    --nav-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h9v2H6v14h7v2H4zm12.6 4.4L21.2 12l-4.6 4.6-1.4-1.4 2.2-2.2H10v-2h7.4l-2.2-2.2z'/%3E%3C/svg%3E");
}

.mobile-logout-section{
    display:none;
}

.nav-link:hover{
    transform:translateX(2px);
    background:#f2f6ff;
    color:var(--blue);
}

.nav-link:hover .nav-icon{
    background:#e0edff;
}

.nav-link.is-active{
    color:#fff;
    background:var(--blue);
    box-shadow:0 8px 20px rgba(13,110,253,.22);
    transform:none;
}

.nav-link.is-active .nav-icon{
    color:#fff;
    background:rgba(255,255,255,.24);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}

.nav-link.is-active .nav-badge{
    color:var(--blue);
    background:#fff;
}

.main-area{
    margin-left:284px;
    min-width:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:24px 28px 24px 0;
}

.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding:4px 0 2px;
}

.topbar h1{
    margin:4px 0 0;
    color:var(--navy);
    font-size:26px;
    line-height:1.22;
}

.topbar-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.date-pill,
.user-pill{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:#475467;
    box-shadow:var(--soft-shadow);
}

.date-pill{
    padding:0 12px;
    font-size:13px;
    font-weight:800;
}

.user-pill{
    gap:10px;
    padding:6px 10px 6px 6px;
}

.user-pill strong,
.user-pill small{
    display:block;
    line-height:1.15;
}

.user-pill strong{
    color:var(--navy);
    font-size:13px;
}

.user-pill small{
    margin-top:2px;
    color:var(--muted);
    font-size:11px;
}

.user-avatar{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:999px;
    color:#fff;
    background:#101828;
    font-size:12px;
    font-weight:900;
}

.page-content{
    flex:1;
    width:100%;
    max-width:1180px;
}

.admin-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:24px;
    padding:18px 4px 0;
    color:var(--muted);
    font-size:13px;
}

.eyebrow{
    margin:0 0 6px;
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    letter-spacing:0;
    text-transform:none;
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.metric-card{
    position:relative;
    min-height:112px;
    padding:18px 18px 18px 64px;
    border:1px solid var(--line);
    border-radius:8px;
    background:
        radial-gradient(circle at 92% 0%, rgba(13,110,253,.08), transparent 32%),
        #fff;
    box-shadow:0 16px 34px rgba(16,24,40,.07);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.metric-card:hover,
.quick-card:hover,
.important-item:hover{
    transform:translateY(-2px);
    border-color:#cfe0ff;
    box-shadow:0 20px 42px rgba(16,24,40,.10);
}

.metric-card::before{
    content:"";
    position:absolute;
    top:20px;
    left:18px;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#eef4ff;
    box-shadow:inset 0 0 0 1px #d6e4ff;
}

.metric-card::after{
    content:"";
    position:absolute;
    top:29px;
    left:28px;
    width:14px;
    height:14px;
    background:var(--blue);
    -webkit-mask:var(--metric-mask) center / contain no-repeat;
    mask:var(--metric-mask) center / contain no-repeat;
}

.metric-card:nth-child(1){
    --metric-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8m8-1a3 3 0 1 1 0-6 3 3 0 0 1 0 6M2 20c.4-4 3-6 7-6s6.6 2 7 6zm13.5-1.8c-.4-1.7-1.2-3-2.5-4 1-.7 2.2-1 3.6-1 3.3 0 5.2 1.7 5.4 5z'/%3E%3C/svg%3E");
}

.metric-card:nth-child(2)::before{
    background:#ecfdf3;
    box-shadow:inset 0 0 0 1px #bbf7d0;
}

.metric-card:nth-child(2)::after{
    background:var(--teal);
}

.metric-card:nth-child(3)::before{
    background:#fff7ed;
    box-shadow:inset 0 0 0 1px #fed7aa;
}

.metric-card:nth-child(3)::after{
    background:var(--warning);
}

.metric-card:nth-child(4)::before{
    background:#f5f3ff;
    box-shadow:inset 0 0 0 1px #ddd6fe;
}

.metric-card:nth-child(4)::after{
    background:var(--violet);
}

.metric-card:nth-child(2),
.metric-card:nth-child(3),
.metric-card:nth-child(4){
    --metric-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 6.5A2.5 2.5 0 0 1 5.5 4h13A2.5 2.5 0 0 1 21 6.5V8H3zm0 4h18v7A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5zm3 4v2h5v-2z'/%3E%3C/svg%3E");
}

.metric-card span{
    display:block;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.metric-card strong{
    display:block;
    margin-top:8px;
    color:var(--navy);
    font-size:26px;
    line-height:1;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:20px;
}

.quick-card{
    position:relative;
    display:grid;
    gap:8px;
    min-height:118px;
    padding:22px 18px 18px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:0 14px 30px rgba(16,24,40,.06);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.quick-card::before{
    content:"";
    width:34px;
    height:34px;
    border-radius:8px;
    background:#eef4ff;
    box-shadow:inset 0 0 0 1px #d6e4ff;
}

.quick-card::after{
    content:"";
    position:absolute;
    top:32px;
    left:28px;
    width:14px;
    height:14px;
    background:var(--blue);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v2H4zm0 4h16v12H4zm3 3v2h10v-2zm0 4v2h7v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v2H4zm0 4h16v12H4zm3 3v2h10v-2zm0 4v2h7v-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quick-card:nth-child(2)::before{
    background:#ecfdf3;
    box-shadow:inset 0 0 0 1px #bbf7d0;
}

.quick-card:nth-child(2)::after{
    background:var(--teal);
}

.quick-card:nth-child(3)::before{
    background:#fff7ed;
    box-shadow:inset 0 0 0 1px #fed7aa;
}

.quick-card:nth-child(3)::after{
    background:var(--warning);
}

.quick-card:nth-child(4)::before{
    background:#f5f3ff;
    box-shadow:inset 0 0 0 1px #ddd6fe;
}

.quick-card:nth-child(4)::after{
    background:var(--violet);
}

.quick-card strong{
    color:var(--navy);
    font-size:16px;
}

.quick-card span{
    color:var(--muted);
    line-height:1.5;
    font-size:13px;
}

.public-service-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid #eef2f7;
}

.primary-button,
.secondary-button,
.ghost-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    border:0;
    border-radius:8px;
    padding:9px 14px;
    cursor:pointer;
    font-weight:800;
    font-size:13px;
}

.primary-button{
    color:#fff;
    background:var(--blue);
    box-shadow:0 8px 18px rgba(13,110,253,.22);
}

.secondary-button{
    color:var(--blue);
    background:#eef4ff;
}

.ghost-button{
    color:#475467;
    background:#fff;
    border:1px solid var(--line);
}

.table-wrap{
    overflow:auto;
    border:1px solid var(--line);
    border-radius:8px;
    box-shadow:var(--soft-shadow);
}

.admin-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.admin-gallery-card{
    display:grid;
    gap:14px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
}

.admin-gallery-card img,
.admin-gallery-preview{
    display:block;
    width:100%;
    object-fit:cover;
}

.admin-gallery-card img{
    aspect-ratio:16 / 10;
}

.admin-gallery-card > div{
    padding:0 16px;
}

.admin-gallery-card h3{
    margin:10px 0 6px;
    color:var(--navy);
    font-size:17px;
}

.admin-gallery-card p{
    min-height:42px;
    margin:0 0 10px;
    color:var(--muted);
    line-height:1.5;
}

.admin-gallery-card small{
    color:#667085;
}

.admin-gallery-card .button-row{
    justify-content:flex-start;
    padding:0 16px 16px;
}

.admin-gallery-preview{
    max-height:280px;
    border:1px solid var(--line);
    border-radius:8px;
}

.access-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(286px,1fr));
    gap:20px;
}

.access-card-visual{
    display:grid;
    align-content:start;
    gap:12px;
}

.access-card-face{
    position:relative;
    display:grid;
    width:100%;
    max-width:356px;
    aspect-ratio:85.6 / 54;
    overflow:hidden;
    padding:18px;
    border-radius:8px;
    color:#fff;
    background:
        radial-gradient(circle at 92% 18%, rgba(255,255,255,.26), transparent 24%),
        linear-gradient(135deg,#0d6efd,#0757d8);
    box-shadow:0 22px 52px rgba(13,110,253,.24);
}

.access-card-brand{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    min-width:0;
    gap:10px;
}

.access-card-logo{
    flex:0 0 auto;
    width:34px;
    height:34px;
    object-fit:cover;
    border-radius:8px;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}

.access-card-logo-fallback{
    display:grid;
    place-items:center;
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.access-card-brand span{
    display:grid;
    min-width:0;
    gap:2px;
}

.access-card-brand b{
    color:#fff;
    font-size:15px;
    line-height:1.1;
}

.access-card-brand small{
    color:rgba(255,255,255,.76);
    font-size:11px;
    font-weight:800;
    line-height:1.2;
}

.access-card-mainline{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:12px;
    margin-top:14px;
}

.access-card-face::after{
    content:"";
    position:absolute;
    right:-42px;
    bottom:-64px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.access-card-visual.is-inactive .access-card-face{
    background:
        radial-gradient(circle at 92% 18%, rgba(255,255,255,.22), transparent 24%),
        linear-gradient(135deg,#667085,#344054);
    box-shadow:0 22px 52px rgba(52,64,84,.18);
}

.access-card-topline,
.access-card-meta{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.access-card-topline > span:first-child{
    color:rgba(255,255,255,.78);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.access-card-topline .status-pill{
    color:#fff;
    background:rgba(255,255,255,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

.access-card-chip{
    position:relative;
    z-index:1;
    width:46px;
    height:34px;
    border-radius:8px;
    background:linear-gradient(135deg,#f8d66d,#d4a62f);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}

.access-card-chip::before,
.access-card-chip::after{
    content:"";
    position:absolute;
    inset:9px auto auto 0;
    width:100%;
    height:1px;
    background:rgba(64,52,20,.25);
}

.access-card-chip::after{
    inset:auto auto 9px 0;
}

.access-card-face strong{
    position:relative;
    z-index:1;
    min-width:0;
    font-size:clamp(15px,1.55vw,20px);
    line-height:1;
    letter-spacing:.04em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.access-card-owner{
    position:relative;
    z-index:1;
    display:grid;
    gap:4px;
    margin-top:16px;
}

.access-card-owner span,
.access-card-meta span{
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:800;
}

.access-card-owner b{
    font-size:17px;
}

.access-card-footerline{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:12px;
    margin-top:12px;
}

.access-card-footerline .access-card-owner{
    margin-top:0;
}

.access-card-meta{
    margin-top:10px;
}

.access-card-qr{
    display:grid;
    justify-items:center;
    gap:4px;
    width:62px;
    padding:5px;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
}

.access-card-qr svg{
    display:block;
    width:44px;
    height:44px;
    border-radius:6px;
}

.access-card-qr span{
    color:rgba(255,255,255,.8);
    font-size:9px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.access-card-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:10px;
    padding:0 2px;
}

.access-card-actions form{
    margin:0;
}

.access-card-print-sheet{
    display:grid;
    place-items:center;
    min-height:62vh;
    padding:28px 0;
}

.access-card-print-card{
    width:min(100%,420px);
}

.access-card-print-face{
    max-width:none;
    box-shadow:0 28px 72px rgba(13,110,253,.28);
}

.access-card-verify-panel{
    display:grid;
    gap:22px;
    max-width:760px;
    margin:0 auto;
    border-top:5px solid var(--primary);
}

.access-card-verify-panel.is-valid{
    border-top-color:#16a34a;
}

.access-card-verify-panel.is-inactive{
    border-top-color:#f59e0b;
}

.access-card-verify-panel.is-invalid{
    border-top-color:#ef4444;
}

.access-card-verify-mark{
    width:64px;
    height:64px;
    border-radius:18px;
    background:
        linear-gradient(135deg,rgba(13,110,253,.12),rgba(13,110,253,.22)),
        #fff;
    box-shadow:inset 0 0 0 1px rgba(13,110,253,.18);
}

.access-card-verify-panel.is-valid .access-card-verify-mark{
    background:
        radial-gradient(circle at 50% 50%, #16a34a 0 28%, transparent 29%),
        linear-gradient(135deg,rgba(22,163,74,.12),rgba(22,163,74,.24)),
        #fff;
}

.access-card-verify-panel.is-inactive .access-card-verify-mark{
    background:
        radial-gradient(circle at 50% 50%, #f59e0b 0 28%, transparent 29%),
        linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.24)),
        #fff;
}

.access-card-verify-panel.is-invalid .access-card-verify-mark{
    background:
        radial-gradient(circle at 50% 50%, #ef4444 0 28%, transparent 29%),
        linear-gradient(135deg,rgba(239,68,68,.12),rgba(239,68,68,.24)),
        #fff;
}

.access-card-verify-panel h2{
    margin:0;
    font-size:clamp(28px,3vw,42px);
}

.access-card-verify-panel p{
    margin:8px 0 0;
    color:var(--muted);
}

.access-card-verify-details{
    margin-top:4px;
}

.resident-access-card-panel .panel-head{
    align-items:flex-start;
}

.resident-access-card-wrap{
    display:grid;
    grid-template-columns:minmax(0,356px) minmax(220px,1fr);
    align-items:end;
    gap:18px;
}

.resident-access-card-wrap .muted-text{
    max-width:360px;
    margin:0;
}

.resident-pending-family{
    display:grid;
    gap:14px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--line);
}

table{
    width:100%;
    min-width:760px;
    border-collapse:collapse;
    background:#fff;
}

th,td{
    padding:13px 14px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:13px;
}

th{
    color:#526174;
    background:#f9fbff;
    font-weight:900;
}

.empty-state{
    margin:0;
    padding:20px;
    border:1px dashed #cfd8e7;
    border-radius:8px;
    color:var(--muted);
    background:#f9fbff;
}

.form-stack,
.form-grid{
    display:grid;
    gap:14px;
}

.form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.field{
    display:grid;
    gap:7px;
}

.field.full,
.form-actions.full{
    grid-column:1 / -1;
}

label{
    color:#26354a;
    font-weight:800;
    font-size:13px;
}

small{
    color:var(--danger);
}

.form-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.settings-logo-row{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:20px;
    align-items:start;
}

.settings-logo-preview{
    display:grid;
    place-items:center;
    width:112px;
    height:112px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#f8fbff;
    overflow:hidden;
    color:var(--navy);
    font-size:30px;
    font-weight:900;
}

.settings-logo-preview img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.settings-logo-form{
    align-self:stretch;
}

.settings-logo-form small{
    color:var(--muted);
}

.settings-slider-form{
    display:grid;
    gap:16px;
}

.settings-slider-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.settings-slider-card{
    display:grid;
    gap:12px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fbfdff;
    box-shadow:var(--soft-shadow);
}

.settings-slider-preview{
    display:grid;
    place-items:center;
    overflow:hidden;
    aspect-ratio:16 / 9;
    border:1px solid var(--line);
    border-radius:8px;
    color:#526174;
    background:linear-gradient(135deg,#eef4ff,#f8fbff);
    font-weight:900;
}

.settings-slider-preview img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.settings-slider-card small{
    color:var(--muted);
}

.settings-remove-check{
    display:flex;
    align-items:center;
    gap:8px;
    color:#475467;
}

.settings-remove-check input{
    width:18px;
    min-height:18px;
}

.button-row{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}

.search-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    margin-bottom:16px;
}

.alert{
    margin:16px 0;
    padding:13px 14px;
    border:1px solid #ffc9c2;
    border-radius:8px;
    color:var(--danger);
    background:#fff4f2;
}

.live-alert-panel{
    border-color:#fecaca;
}

.live-alert-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
    padding:14px 16px;
    border:1px solid #fca5a5;
    border-radius:8px;
    color:#7f1d1d;
    background:#fef2f2;
}

.live-alert-banner[hidden]{
    display:none;
}

.live-alert-list{
    display:grid;
    gap:12px;
}

.live-alert-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
}

.live-alert-item div{
    display:grid;
    gap:5px;
}

.live-alert-item span,
.live-alert-item small{
    color:var(--muted);
}

.important-panel{
    border-color:var(--line);
    background:
        linear-gradient(180deg,rgba(255,255,255,.98),#fff),
        radial-gradient(circle at 100% 0%, rgba(13,110,253,.08), transparent 30%);
}

.important-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.important-item{
    position:relative;
    display:grid;
    gap:10px;
    min-height:96px;
    padding:18px 18px 18px 66px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.important-item::before{
    content:"";
    position:absolute;
    top:20px;
    left:18px;
    width:34px;
    height:34px;
    border-radius:8px;
    background:#fff4ed;
    box-shadow:inset 0 0 0 1px #fed7aa;
}

.important-item::after{
    content:"";
    position:absolute;
    top:30px;
    left:28px;
    width:14px;
    height:14px;
    background:var(--warning);
    -webkit-mask:var(--important-mask) center / contain no-repeat;
    mask:var(--important-mask) center / contain no-repeat;
}

.important-item:nth-child(1){
    --important-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m0 3.2V17h16V8.2l-8 5.2zM5.5 7l6.5 4.3L18.5 7z'/%3E%3C/svg%3E");
}

.important-item:nth-child(2){
    --important-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h14a2 2 0 0 1 2 2v2h-2V7H4v10h16v-2h2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m11 5h7v4h-7a2 2 0 0 1 0-4'/%3E%3C/svg%3E");
}

.important-item:nth-child(2)::before{
    background:#f5f3ff;
    box-shadow:inset 0 0 0 1px #ddd6fe;
}

.important-item:nth-child(2)::after{
    background:var(--violet);
}

.important-item:nth-child(3),
.important-item:nth-child(4){
    --important-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 22 20H2zm-1 7v5h2V9zm0 7v2h2v-2z'/%3E%3C/svg%3E");
}

.important-item:nth-child(3)::before,
.important-item:nth-child(4)::before{
    background:#fef2f2;
    box-shadow:inset 0 0 0 1px #fecaca;
}

.important-item:nth-child(3)::after,
.important-item:nth-child(4)::after{
    background:var(--danger);
}

.important-item span{
    color:var(--muted);
    font-weight:800;
    font-size:13px;
}

.important-item strong{
    color:var(--navy);
    font-size:22px;
    overflow-wrap:anywhere;
}

.status-pill{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    color:#0f5f47;
    background:#e9fbf3;
    font-weight:800;
    font-size:11px;
}

.detail-list{
    display:grid;
    gap:12px;
    margin:18px 0;
}

.detail-list div{
    display:grid;
    grid-template-columns:160px minmax(0,1fr);
    gap:14px;
    padding:13px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
}

.detail-list span{
    color:var(--muted);
    font-weight:800;
}

.camera-meta{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}

.camera-meta div{
    display:grid;
    gap:7px;
    padding:15px 16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
}

.camera-meta span{
    color:var(--muted);
    font-weight:800;
}

.camera-meta strong{
    min-width:0;
    overflow-wrap:anywhere;
}

.camera-preview{
    overflow:hidden;
    aspect-ratio:16 / 9;
    min-height:320px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#07111f;
}

.camera-preview iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#07111f;
}

.camera-preview video{
    display:block;
    width:100%;
    height:100%;
    background:#07111f;
}

.camera-grid-preview{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.camera-grid-item{
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
}

.camera-grid-item header,
.camera-grid-item footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
}

.camera-grid-item header{
    border-bottom:1px solid var(--line);
}

.camera-grid-item footer{
    border-top:1px solid var(--line);
}

.camera-grid-item header div{
    display:grid;
    gap:4px;
}

.camera-grid-item header span{
    color:var(--muted);
}

.camera-grid-frame{
    aspect-ratio:16 / 9;
    min-height:220px;
    background:#07111f;
}

.camera-grid-frame iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#07111f;
}

.camera-grid-frame video{
    display:block;
    width:100%;
    height:100%;
    background:#07111f;
}

.inline-link{
    color:var(--blue);
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
}

.inline-form{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:250px;
}

.inline-form select{
    min-height:40px;
    padding:8px 10px;
}

.inline-form .secondary-button{
    min-height:40px;
    padding:8px 12px;
}

.inline-actions{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:180px;
}

.inline-actions .secondary-button,
.inline-actions .ghost-button{
    min-height:40px;
    padding:8px 12px;
}

.timeline-list{
    display:grid;
    gap:14px;
}

.timeline-item{
    display:grid;
    gap:10px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    box-shadow:var(--soft-shadow);
}

.timeline-item div{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.timeline-item p{
    margin:0;
    color:var(--ink);
    line-height:1.65;
}

.timeline-item small{
    color:var(--muted);
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
}

@media (max-width:980px){
    .hero-page{
        grid-template-columns:1fr;
    }

    .hero-copy h1{
        font-size:44px;
    }

    .public-hero{
        grid-template-columns:1fr;
        min-height:auto;
        padding:28px;
    }

    .landing-hero{
        grid-template-columns:1fr;
        min-height:auto;
        padding:34px 28px 58px;
    }

    .landing-copy h1{
        font-size:38px;
    }

    .landing-visual{
        min-height:280px;
        margin-top:12px;
    }

    .landing-feature-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:calc(100% - 44px);
    }

    .landing-feature-card:nth-child(2){
        border-right:0;
    }

    .landing-feature-card:nth-child(-n+2){
        border-bottom:1px solid var(--line);
    }

    .landing-section{
        padding:0 28px 28px;
    }

    .landing-news-grid,
    .landing-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .landing-stats-band{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin:0 28px 28px;
    }

    .landing-area{
        grid-column:1 / -1;
    }

    .landing-agenda-list,
    .landing-contact-section .public-contact-list{
        grid-template-columns:1fr;
    }

    .admin-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .access-card-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .settings-slider-grid{
        grid-template-columns:1fr;
    }

    .public-hero h1{
        font-size:34px;
    }

    .public-hero-card{
        display:none;
    }

    .public-quick-actions{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .resident-action-panel{
        grid-template-columns:1fr;
    }

    .resident-action-panel .public-action-row{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

    .resident-dues-grid{
        grid-template-columns:1fr;
    }

    .finance-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .public-section-grid{
        grid-template-columns:1fr;
    }

    .public-service-list{
        grid-template-columns:1fr;
    }

    .public-notice{
        align-items:flex-start;
        flex-direction:column;
    }

    body:has(.login-card) .login-guest-shell{
        width:min(420px, calc(100% - 28px));
        padding:24px 0;
    }

    .public-page-header h1{
        font-size:28px;
    }

    .login-screen{
        display:block;
        min-height:auto;
        border-radius:22px;
        overflow:hidden;
    }

    .login-hero-panel{
        display:none;
    }

    .login-card{
        width:100%;
        padding:34px 28px 28px;
    }

    .login-mobile-brand{
        display:flex;
        justify-content:center;
        margin-bottom:28px;
    }

    .login-mobile-brand .login-hero-logo{
        color:#fff;
        background:var(--blue);
        box-shadow:0 12px 26px rgba(13,110,253,.22);
    }

    .login-mobile-brand strong{
        color:var(--navy);
        font-size:19px;
    }

    .login-mobile-brand small{
        margin-top:4px;
        color:var(--muted);
        font-size:12px;
    }

    .sidebar{
        position:fixed;
        top:0;
        right:0;
        left:0;
        width:100%;
        height:74px;
        max-height:none;
        display:grid;
        grid-template-columns:32px minmax(0,1fr) 32px;
        align-items:center;
        gap:12px;
        overflow:visible;
        border:0;
        border-bottom:1px solid var(--line);
        border-radius:0;
        padding:12px 18px;
        color:#fff;
        background:linear-gradient(180deg,#1176ff 0%,#0767ed 100%);
        box-shadow:0 10px 24px rgba(13,110,253,.24);
    }

    .brand{
        min-height:0;
        min-width:0;
        width:auto;
        color:#fff;
    }

    .brand-mark{
        display:none;
    }

    .brand strong{
        display:block;
        color:#fff;
        font-size:15px;
        line-height:1.1;
        white-space:nowrap;
    }

    .brand small{
        color:rgba(255,255,255,.78);
        font-size:11px;
    }

    .mobile-menu-control{
        display:grid;
        gap:5px;
        width:32px;
        height:32px;
        place-content:center;
    }

    .mobile-menu-control span{
        display:block;
        width:16px;
        height:2px;
        border-radius:999px;
        background:#fff;
    }

    .mobile-notification{
        position:relative;
        display:grid;
        place-items:center;
        justify-self:end;
        width:28px;
        height:28px;
        border-radius:999px;
        color:#fff;
        font-size:11px;
        font-weight:900;
        background:rgba(255,255,255,.16);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
    }

    .nav-list{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        z-index:45;
        display:grid;
        align-content:start;
        width:min(320px, 86vw);
        height:100dvh;
        gap:16px;
        margin-top:0;
        overflow-y:auto;
        padding:20px 18px 28px;
        border-right:1px solid var(--line);
        background:#fff;
        box-shadow:20px 0 50px rgba(16,24,40,.18);
        transform:translateX(-104%);
        transition:transform .22s ease;
    }

    .nav-section{
        display:grid;
        gap:6px;
        min-width:0;
    }

    .nav-section-title{
        display:block;
        padding:0 10px;
        color:#98a2b3;
    }

    .nav-link{
        display:flex;
        min-height:40px;
        max-width:none;
        justify-items:initial;
        align-content:initial;
        gap:10px;
        padding:10px;
        border-radius:8px;
        color:#475467;
        font-size:14px;
        font-weight:800;
        white-space:nowrap;
    }

    .nav-link span:last-child{
        max-width:none;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .nav-icon{
        width:20px;
        height:20px;
        flex-basis:20px;
        border-radius:6px;
    }

    .nav-link.is-active{
        color:#fff;
        background:var(--blue);
        box-shadow:0 8px 20px rgba(13,110,253,.22);
    }

    .nav-link.is-active .nav-icon{
        color:#fff;
        background:rgba(255,255,255,.24);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
    }

    .mobile-drawer-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:4px 2px 10px;
        border-bottom:1px solid var(--line);
    }

    .mobile-drawer-head strong{
        color:var(--navy);
        font-size:17px;
    }

    .mobile-drawer-head label{
        display:inline-flex;
        align-items:center;
        min-height:34px;
        padding:7px 10px;
        border-radius:8px;
        color:var(--blue);
        background:#eef4ff;
        font-size:12px;
        font-weight:900;
    }

    .mobile-logout-section{
        display:grid;
        margin-top:4px;
        padding-top:14px;
        border-top:1px solid var(--line);
    }

    .mobile-logout-link{
        color:var(--danger);
        background:#fff5f5;
    }

    .mobile-logout-link .nav-icon{
        color:var(--danger);
        background:#fee4e2;
        box-shadow:inset 0 0 0 1px #fecaca;
    }

    .mobile-drawer-backdrop{
        position:fixed;
        inset:0;
        z-index:40;
        background:rgba(16,24,40,.38);
    }

    .mobile-drawer-toggle:not(:checked) ~ .mobile-drawer-backdrop{
        display:none;
    }

    .mobile-drawer-toggle:checked ~ .nav-list{
        transform:translateX(0);
    }

    .mobile-drawer-toggle:checked ~ .mobile-drawer-backdrop{
        display:block;
    }

    .mobile-bottom-nav{
        position:fixed;
        right:0;
        bottom:0;
        left:0;
        z-index:35;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        min-height:66px;
        padding:7px 8px calc(8px + env(safe-area-inset-bottom));
        border-top:1px solid var(--line);
        background:rgba(255,255,255,.96);
        box-shadow:0 -10px 24px rgba(16,24,40,.08);
        backdrop-filter:blur(12px);
    }

    .mobile-nav-link{
        display:grid;
        place-items:center;
        align-content:center;
        gap:4px;
        min-width:0;
        min-height:50px;
        border-radius:8px;
        color:#667085;
        font-size:10px;
        font-weight:900;
        text-align:center;
    }

    .mobile-nav-link span:last-child{
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mobile-nav-link.is-active{
        color:var(--blue);
    }

    .mobile-nav-link.is-active .nav-icon{
        color:#fff;
        background:var(--blue);
        box-shadow:none;
    }

    .mobile-more-link{
        cursor:pointer;
    }

    .main-area{
        margin-left:0;
        padding:92px 18px calc(86px + env(safe-area-inset-bottom));
    }

    .page-content{
        max-width:none;
    }

    .metric-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .quick-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .topbar{
        margin-bottom:14px;
        padding:0;
        gap:6px;
        align-items:flex-start;
    }

    .topbar .eyebrow{
        margin-bottom:3px;
        color:#344054;
        font-size:12px;
        font-weight:900;
    }

    .topbar h1{
        font-size:18px;
    }

    .topbar-actions{
        display:none;
    }

    .panel{
        margin-top:14px;
    }

    .metric-card{
        min-height:98px;
        padding:15px 14px 14px 56px;
    }

    .metric-card::before{
        top:17px;
        left:14px;
        width:32px;
        height:32px;
    }

    .metric-card strong{
        font-size:22px;
    }

    .metric-card span,
    .quick-card span,
    .important-item span{
        font-size:12px;
    }

    .quick-card{
        min-height:104px;
        padding:15px;
    }

    .quick-card strong{
        font-size:14px;
    }

    .panel-head{
        margin-bottom:12px;
    }

    .panel h2{
        font-size:17px;
    }

    .admin-footer{
        display:none;
    }
}

@media (max-width:640px){
    .guest-shell{
        width:calc(100% - 24px);
        padding-top:16px;
    }

    .public-portal{
        gap:14px;
    }

    .public-landing{
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .public-topbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:50;
        display:grid;
        grid-template-columns:32px minmax(0,1fr) 42px;
        align-items:center;
        justify-content:initial;
        padding:14px 18px;
        border:0;
        border-radius:0;
        color:#fff;
        background:linear-gradient(180deg,#1176ff 0%,#0767ed 100%);
        box-shadow:0 10px 24px rgba(13,110,253,.24);
    }

    .public-guest-shell{
        width:100%;
        padding:74px 0 calc(74px + env(safe-area-inset-bottom));
        gap:0;
    }

    .public-nav{
        display:none;
    }

    .public-mobile-menu{
        display:grid;
        justify-items:end;
        gap:5px;
        width:32px;
        height:32px;
        place-content:center;
    }

    .public-mobile-menu span{
        display:block;
        width:17px;
        height:2px;
        border-radius:999px;
        background:#fff;
    }

    .public-mobile-login{
        display:inline-grid;
        place-items:center;
        justify-self:end;
        min-height:30px;
        padding:6px 8px;
        border-radius:999px;
        color:#fff;
        background:rgba(255,255,255,.14);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
        font-size:10px;
        font-weight:900;
    }

    .public-mobile-drawer{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        z-index:58;
        display:grid;
        align-content:start;
        width:min(320px, 86vw);
        height:100dvh;
        gap:16px;
        overflow-y:auto;
        padding:20px 18px 28px;
        border-right:1px solid var(--line);
        background:#fff;
        box-shadow:20px 0 50px rgba(16,24,40,.18);
        transform:translateX(-104%);
        transition:transform .22s ease;
    }

    .public-mobile-drawer-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:4px 2px 10px;
        border-bottom:1px solid var(--line);
    }

    .public-mobile-drawer-head strong{
        color:var(--navy);
        font-size:17px;
    }

    .public-mobile-drawer-head label{
        display:inline-flex;
        align-items:center;
        min-height:34px;
        padding:7px 10px;
        border-radius:8px;
        color:var(--blue);
        background:#eef4ff;
        font-size:12px;
        font-weight:900;
    }

    .public-drawer-section{
        display:grid;
        gap:6px;
    }

    .public-drawer-section p{
        margin:0 0 2px;
        padding:0 10px;
        color:#98a2b3;
        font-size:11px;
        font-weight:900;
        letter-spacing:.08em;
        text-transform:uppercase;
    }

    .public-drawer-section a{
        display:flex;
        align-items:center;
        gap:10px;
        min-height:40px;
        padding:10px;
        border-radius:8px;
        color:#475467;
        font-size:14px;
        font-weight:800;
    }

    .public-drawer-section a:hover{
        color:var(--blue);
        background:#f2f6ff;
    }

    .public-drawer-section .public-mobile-icon{
        width:20px;
        height:20px;
        color:var(--blue);
        background:#eef4ff;
        border-radius:6px;
        box-shadow:inset 0 0 0 1px #d6e4ff;
    }

    .public-drawer-section .public-mobile-icon::before{
        width:13px;
        height:13px;
    }

    .public-mobile-drawer-backdrop{
        position:fixed;
        inset:0;
        z-index:56;
        background:rgba(16,24,40,.38);
    }

    .public-mobile-drawer-toggle:not(:checked) ~ .public-mobile-drawer-backdrop{
        display:none;
    }

    .public-mobile-drawer-toggle:checked ~ .public-mobile-drawer{
        transform:translateX(0);
    }

    .public-mobile-drawer-toggle:checked ~ .public-mobile-drawer-backdrop{
        display:block;
    }

    .public-mobile-bottom-nav{
        position:fixed;
        right:0;
        bottom:0;
        left:0;
        z-index:55;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        min-height:66px;
        padding:7px 8px calc(8px + env(safe-area-inset-bottom));
        color:#fff;
        background:var(--blue);
        box-shadow:0 -10px 24px rgba(16,24,40,.08);
    }

    .public-mobile-bottom-nav a{
        display:grid;
        place-items:center;
        align-content:center;
        gap:4px;
        min-width:0;
        color:rgba(255,255,255,.88);
        font-size:10px;
        font-weight:900;
    }

    .public-mobile-icon{
        display:grid;
        place-items:center;
        width:20px;
        height:20px;
    }

    .public-mobile-icon::before{
        content:"";
        width:17px;
        height:17px;
        background:currentColor;
        -webkit-mask:var(--mobile-mask) center / contain no-repeat;
        mask:var(--mobile-mask) center / contain no-repeat;
    }

    .public-mobile-home{--mobile-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 3 10 8h-3v10h-6v-6h-2v6H5V11H2z'/%3E%3C/svg%3E")}
    .public-mobile-service{--mobile-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z'/%3E%3C/svg%3E")}
    .public-mobile-info{--mobile-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16v2H4zm0 4h16v12H4zm3 3v2h10v-2zm0 4v2h7v-2z'/%3E%3C/svg%3E")}
    .public-mobile-gallery{--mobile-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3zm2 2v10h16V7zm3 8 3-4 2 3 2-2 3 3z'/%3E%3C/svg%3E")}
    .public-mobile-contact{--mobile-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E")}

    .public-page-header{
        padding:18px;
    }

    .public-page-header h1{
        font-size:24px;
    }

    .public-footer{
        display:none;
    }

    .public-brand-mark{
        display:none;
    }

    .public-brand{
        min-width:0;
        justify-self:start;
    }

    .public-brand strong{
        color:#fff;
        font-size:14px;
    }

    .public-brand small{
        color:rgba(255,255,255,.78);
    }

    .landing-hero{
        min-height:auto;
        padding:22px 18px 26px;
        border-radius:0;
    }

    .landing-hero.has-photo-slider{
        min-height:430px;
    }

    .landing-hero.has-photo-slider .landing-hero-slider::after{
        background:
            linear-gradient(180deg,rgba(5,18,42,.78),rgba(5,18,42,.42) 58%,rgba(5,18,42,.18)),
            linear-gradient(180deg,rgba(13,110,253,.12),rgba(13,110,253,.10));
    }

    .landing-copy h1{
        font-size:26px;
    }

    .landing-copy p{
        margin-top:10px;
        font-size:12px;
        line-height:1.65;
    }

    .landing-actions{
        display:grid;
        gap:10px;
        margin-top:16px;
    }

    .landing-actions .primary-button,
    .landing-actions .secondary-button{
        width:100%;
    }

    .landing-visual{
        min-height:180px;
    }

    .landing-house{
        right:58px;
        bottom:28px;
        width:166px;
        height:120px;
        transform:scale(.78);
        transform-origin:bottom right;
    }

    .landing-tree-left{
        right:236px;
        bottom:24px;
        transform:scale(.68);
    }

    .landing-tree-right{
        right:30px;
        bottom:28px;
        transform:scale(.62);
    }

    .landing-ground{
        right:20px;
        bottom:12px;
        width:320px;
        height:38px;
    }

    .landing-skyline{
        transform:scale(.65);
        transform-origin:top right;
    }

    .landing-feature-strip{
        grid-template-columns:repeat(4,minmax(0,1fr));
        width:100%;
        margin:0;
        border-right:0;
        border-left:0;
        border-radius:0;
        box-shadow:none;
    }

    .landing-feature-card{
        display:grid;
        justify-items:center;
        gap:7px;
        min-height:94px;
        padding:12px 6px;
        border-right:0;
        border-bottom:0!important;
        text-align:center;
    }

    .landing-feature-card .public-service-icon{
        width:34px;
        height:34px;
        grid-row:auto;
    }

    .landing-feature-card strong{
        font-size:11px;
        line-height:1.2;
    }

    .landing-feature-card small{
        display:none;
    }

    .landing-section{
        padding:18px 16px 10px;
    }

    .landing-section-head h2{
        font-size:16px;
    }

    .landing-news-grid,
    .landing-gallery-grid,
    .landing-agenda-list,
    .landing-contact-section .public-contact-list{
        grid-template-columns:1fr;
    }

    .landing-news-card{
        padding:14px;
    }

    .landing-stats-band{
        grid-template-columns:repeat(2,minmax(0,1fr));
        margin:18px 16px 10px;
        padding:16px;
    }

    .gallery-lightbox{
        padding:14px;
    }

    .gallery-lightbox figure{
        max-height:calc(100vh - 86px);
    }

    .gallery-lightbox img{
        max-height:calc(100vh - 160px);
    }

    .gallery-lightbox-close{
        top:12px;
        right:12px;
    }

    .admin-gallery-grid{
        grid-template-columns:1fr;
    }

    .access-card-grid{
        grid-template-columns:1fr;
    }

    .resident-access-card-wrap{
        grid-template-columns:1fr;
    }

    .landing-area{
        grid-column:1 / -1;
    }

    .public-nav{
        display:none;
    }

    .public-nav-group{
        position:static;
    }

    .public-nav-menu{
        right:auto;
        left:12px;
        min-width:min(260px, calc(100vw - 48px));
    }

    .public-hero{
        padding:22px 18px;
    }

    .public-hero h1{
        font-size:28px;
    }

    .public-hero p{
        font-size:14px;
        line-height:1.65;
    }

    .public-action-row{
        align-items:stretch;
        flex-direction:column;
    }

    .public-action-row .primary-button,
    .public-action-row .secondary-button,
    .public-action-row .ghost-button{
        width:100%;
    }

    .public-quick-actions{
        gap:10px;
    }

    .public-action-card{
        min-height:128px;
        padding:14px;
    }

    .public-action-card strong{
        font-size:14px;
    }

    .public-action-card small{
        font-size:12px;
    }

    .public-panel{
        padding:18px;
    }

    .public-timeline-list article,
    .public-agenda-list article,
    .public-contact-list a,
    .public-security-list div{
        padding:13px;
    }

    .public-agenda-list time{
        width:48px;
        min-height:48px;
        flex-basis:48px;
        font-size:12px;
    }

    .public-service-page{
        gap:14px;
    }

    .public-service-hero{
        padding:22px 18px;
    }

    .public-service-hero h1{
        font-size:28px;
    }

    .public-form-panel{
        padding:18px;
    }

    .public-help-strip{
        align-items:flex-start;
        flex-direction:column;
    }

    .public-status-card{
        grid-template-columns:1fr;
    }

    .resident-action-panel .public-action-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .resident-action-panel{
        padding:16px;
    }

    .resident-shortcut{
        min-height:96px;
        padding:12px 8px;
    }

    .resident-summary-grid .public-action-card,
    .finance-summary-grid .public-action-card{
        min-height:118px;
        padding:16px;
    }

    .resident-summary-grid .public-action-card strong,
    .finance-summary-grid .public-action-card strong{
        font-size:26px;
    }

    .resident-list-card,
    .resident-letter-card,
    .resident-due-card{
        grid-template-columns:auto minmax(0,1fr);
        align-items:flex-start;
    }

    .resident-list-card time,
    .resident-list-card .status-pill,
    .resident-list-card .inline-link{
        grid-column:2;
        width:max-content;
    }

    .hero-page{
        min-height:auto;
        padding:28px 20px;
        border-radius:22px;
    }

    .hero-preview{
        display:none;
    }

    .hero-copy h1{
        font-size:32px;
    }

    .content-card,
    .center-card,
    .login-card,
    .panel{
        padding:18px;
        border-radius:8px;
    }

    .login-card{
        padding:30px 20px 24px;
        border-radius:0;
    }

    .login-screen{
        border-radius:20px;
    }

    .login-mobile-brand{
        margin-bottom:24px;
    }

    .login-lock{
        width:64px;
        height:64px;
        margin-bottom:18px;
    }

    .login-heading{
        margin-bottom:24px;
    }

    .login-card h1{
        font-size:25px;
    }

    .login-card input,
    .login-card .primary-button{
        min-height:48px;
    }

    .login-copyright{
        margin-top:30px;
    }

    .app-shell{
        display:block;
    }

    .main-area{
        padding:88px 14px 82px;
    }

    .sidebar{
        height:72px;
        padding:11px 18px;
    }

    .brand strong{
        font-size:14px;
    }

    .nav-list{
        width:min(300px, 88vw);
        height:100dvh;
        padding:18px 16px 26px;
    }

    .nav-section{
        min-width:0;
    }

    .nav-link{
        max-width:none;
        font-size:13px;
    }

    .nav-link span:last-child{
        max-width:none;
    }

    .mobile-bottom-nav{
        min-height:64px;
        padding:6px 6px calc(8px + env(safe-area-inset-bottom));
    }

    .mobile-nav-link{
        min-height:50px;
        font-size:10px;
    }

    .topbar,
    .panel-head,
    .form-actions,
    .button-row,
    .live-alert-item,
    .live-alert-banner{
        flex-direction:column;
        align-items:stretch;
    }

    .topbar h1{
        font-size:17px;
    }

    .public-service-grid,
    .camera-meta,
    .camera-grid-preview,
    .form-grid,
    .settings-logo-row,
    .search-form{
        grid-template-columns:1fr;
    }

    .metric-grid,
    .quick-grid,
    .important-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .detail-list div{
        grid-template-columns:1fr;
        gap:6px;
    }

    .inline-form,
    .inline-actions{
        min-width:220px;
    }

    .camera-preview{
        min-height:220px;
    }

    .camera-grid-item header,
    .camera-grid-item footer{
        flex-direction:column;
        align-items:stretch;
    }

    .camera-grid-frame{
        min-height:190px;
    }
}

@media print{
    @page{
        size:A4 portrait;
        margin:12mm;
    }

    .no-print,
    .sidebar,
    .admin-sidebar,
    .topbar,
    .admin-header,
    .admin-footer,
    .public-topbar,
    .public-footer,
    .public-mobile-drawer-toggle,
    .public-mobile-drawer,
    .bottom-nav,
    .mobile-bottom-nav{display:none!important}

    *{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }

    body{background:#fff}
    .app-shell,
    .main-area,
    .page-content{
        display:block;
        width:auto;
        min-height:0;
        margin:0;
        padding:0;
        background:#fff;
    }

    .content-card,
    .panel{
        box-shadow:none;
        border-color:#ddd;
    }

    .access-card-print-sheet{
        display:block;
        min-height:0;
        padding:0;
    }

    .access-card-print-card{
        width:85.6mm;
        break-inside:avoid;
    }

    .access-card-print-face{
        width:85.6mm;
        height:54mm;
        max-width:none;
        aspect-ratio:auto;
        padding:4.2mm;
        border-radius:3mm;
        box-shadow:none;
    }

    .access-card-print-face .status-pill{
        font-size:7pt;
        padding:1.5mm 2.5mm;
    }

    .access-card-print-face .access-card-logo{
        width:8mm;
        height:8mm;
        border-radius:2mm;
    }

    .access-card-print-face .access-card-brand{
        gap:2mm;
    }

    .access-card-print-face .access-card-brand b{
        font-size:9pt;
    }

    .access-card-print-face .access-card-brand small{
        font-size:6.5pt;
    }

    .access-card-print-face .access-card-mainline{
        gap:3mm;
        margin-top:4mm;
    }

    .access-card-print-face .access-card-chip{
        width:13mm;
        height:9.5mm;
        border-radius:2mm;
    }

    .access-card-print-face strong{
        font-size:10.5pt;
        line-height:1;
    }

    .access-card-print-face .access-card-owner{
        margin-top:0;
        gap:1mm;
    }

    .access-card-print-face .access-card-owner span,
    .access-card-print-face .access-card-meta span{
        font-size:7pt;
    }

    .access-card-print-face .access-card-owner b{
        font-size:10pt;
    }

    .access-card-print-face .access-card-footerline{
        gap:2.5mm;
        margin-top:3.5mm;
    }

    .access-card-print-face .access-card-meta{
        margin-top:2mm;
    }

    .access-card-print-face .access-card-qr{
        width:15mm;
        padding:1mm;
        border-radius:2mm;
        gap:.8mm;
    }

    .access-card-print-face .access-card-qr svg{
        width:12mm;
        height:12mm;
        border-radius:1mm;
    }

    .access-card-print-face .access-card-qr span{
        font-size:5pt;
    }
}