@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#24312b;--muted:#829087;--sage:#738671;--dark:#40584a;--pale:#edf2e9;--line:#e5eae2;--bg:#f7f8f5;--white:#fff;--warn:#ab754e;--shadow:0 12px 35px rgba(37,55,43,.055);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}svg.ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round;flex:none}h1,h2,h3,h4,p{margin:0}h1,h2,h3{font-family:'Manrope',sans-serif}a{text-decoration:none;color:inherit}.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}.sidebar{background:#fff;border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:8px;padding:8px 10px 13px}.brand img{width:84px;height:58px;object-fit:contain}.brand-title strong{display:block;font-family:Manrope;font-size:14px;letter-spacing:1.6px}.brand-title small{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}.navLabel{font-size:10px;letter-spacing:1.5px;color:#9ca9a0;padding:0 15px;text-transform:uppercase;font-weight:800}.navigation{display:grid;gap:5px}.navbtn{border:0;background:transparent;display:flex;align-items:center;gap:13px;text-align:left;padding:13px 14px;border-radius:12px;color:#718076;font-weight:600;width:100%;transition:background .2s,color .2s}.navbtn:hover{background:#f4f7f2}.navbtn.active{background:var(--pale);color:var(--dark)}.navbtn .ico{width:19px;height:19px}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:19px 8px 2px;display:flex;align-items:center;gap:10px}.avatar{height:35px;width:35px;border-radius:12px;background:var(--pale);display:grid;place-items:center;color:var(--dark);font-weight:800}.sidebar-foot small{display:block;color:var(--muted);margin-top:2px}.main{min-width:0}.topbar{height:83px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:15px}.breadcrumb{font-weight:700;color:var(--dark);display:flex;align-items:center;gap:10px}.topActions{display:flex;align-items:center;gap:12px}.roleSwitch{background:#f2f5f0;border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;align-items:center;gap:3px}.roleSwitch button{font-size:12px;border:0;background:transparent;color:#7b897e;padding:8px 12px;border-radius:7px;font-weight:700}.roleSwitch button.selected{background:#fff;color:var(--dark);box-shadow:0 1px 5px #c5d0c53c}.circleBtn{border:1px solid var(--line);background:#fff;border-radius:50%;width:37px;height:37px;display:grid;place-items:center;color:var(--sage)}.content{max-width:1370px;margin:auto;padding:32px 36px 55px}.prototype{display:flex;gap:9px;align-items:center;background:#fff9ef;color:#8e724e;border:1px solid #f0e5cc;border-radius:12px;padding:12px 16px;font-size:12px;margin-bottom:26px}.prototype .ico{width:16px;height:16px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.8px;color:var(--sage);font-weight:800;margin-bottom:10px}.pageHeader{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px}.pageHeader h1{font-size:29px;letter-spacing:-1.1px;font-weight:800;line-height:1.2}.sub{color:var(--muted);font-size:13px;margin-top:8px;line-height:1.65}.btn{border:0;border-radius:11px;background:var(--dark);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;min-height:43px;transition:transform .2s,background .2s}.btn:hover{background:#334b3d;transform:translateY(-1px)}.btn.secondary{background:#fff;color:var(--dark);border:1px solid #dfe6dd}.btn.secondary:hover{background:var(--pale)}.btn.ghost{background:transparent;color:var(--dark);border:1px solid var(--line)}.btn.small{padding:8px 11px;min-height:33px;font-size:12px;border-radius:9px}.btn .ico{width:16px;height:16px}.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.95fr);gap:22px}.stack{display:grid;gap:20px;align-content:start}.card{background:#fff;border:1px solid #e6ebe4;border-radius:18px;box-shadow:var(--shadow);padding:24px}.hero{position:relative;overflow:hidden;border-radius:20px;min-height:218px;background:linear-gradient(112deg,#526c58 0%,#79947e 100%);color:white;padding:29px 32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero:after{content:'';width:300px;height:300px;position:absolute;border:1px solid #ffffff20;border-radius:50%;right:-80px;top:-130px;box-shadow:0 0 0 60px #ffffff0a,0 0 0 120px #ffffff06}.hero h2{font-size:28px;letter-spacing:-.9px;max-width:390px;position:relative;z-index:1}.hero p{margin-top:12px;color:#e5eee5;max-width:400px;line-height:1.65;position:relative;z-index:1}.hero .mini{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px;color:#dae9d8;z-index:1}.quickgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.quick{min-height:128px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;background:white;border:1px solid var(--line);border-radius:16px;padding:18px;color:var(--dark);transition:transform .2s,box-shadow .2s}.quick:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.iconwell{background:var(--pale);border-radius:11px;display:grid;place-items:center;width:42px;height:42px;color:var(--dark)}.quick span:last-child{font-weight:700;font-size:13px}.headingrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.headingrow h3{font-size:16px;letter-spacing:-.3px}.plainLink{color:var(--sage);font-weight:700;background:none;border:0;font-size:12px}.item{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #f0f2ee}.item:last-child{border:0;padding-bottom:0}.iteminfo{flex:1;min-width:0}.iteminfo strong{display:block;font-size:13px}.iteminfo small{display:block;color:var(--muted);margin-top:5px}.chip{font-size:10px;color:var(--dark);background:var(--pale);padding:7px 9px;border-radius:30px;white-space:nowrap;font-weight:800}.chip.gray{background:#f2f4f1;color:#869188}.noticebox{background:#f2f6f0;border:1px solid #e7eee4;border-radius:14px;padding:19px;display:flex;gap:13px;align-items:flex-start}.noticebox p{margin-top:6px;line-height:1.55;color:#78877b}.smallcaps{font-weight:800;font-size:10px;letter-spacing:1px;color:#809082;text-transform:uppercase}.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}.kpi{border:1px solid var(--line);padding:20px;background:#fff;border-radius:16px}.kpi strong{font-family:Manrope;font-size:30px;display:block;margin-top:9px}.kpi small{color:var(--muted)}.sectionTitle{font-size:16px;font-weight:800;margin-bottom:15px}.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:800;color:#4c5e52}.field input,.field select,.field textarea{width:100%;border:1px solid #e0e6dc;background:#fff;border-radius:10px;color:var(--ink);padding:12px 13px;min-height:44px;outline:none;transition:border-color .2s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#8ba58b;box-shadow:0 0 0 3px #e5eee5}.field textarea{resize:vertical}.field .help{font-size:11px;color:var(--muted);line-height:1.5}.switchbox{padding:15px;border-radius:12px;background:var(--bg);display:flex;gap:10px;align-items:flex-start;line-height:1.5}.switchbox input{margin-top:3px;accent-color:var(--dark)}.tableWrap{overflow-x:auto}.dataTable{width:100%;border-collapse:collapse;min-width:550px;text-align:left}.dataTable th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#95a098;font-weight:800;padding:13px 8px;border-bottom:1px solid var(--line)}.dataTable td{padding:15px 8px;border-bottom:1px solid #edf0ea;font-size:12px}.dataTable tr:last-child td{border:0}.pillDate{width:46px;min-width:46px;height:49px;background:var(--pale);border-radius:11px;text-align:center;display:grid;align-content:center;color:var(--dark)}.pillDate strong{font-size:17px}.pillDate small{font-size:10px;text-transform:uppercase}.accordion{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff}.accItem{border-bottom:1px solid var(--line)}.accItem:last-child{border:0}.accHead{width:100%;border:0;background:#fff;display:flex;align-items:center;gap:12px;padding:17px;color:var(--dark);font-weight:800;text-align:left}.accHead span{flex:1}.accBody{display:none;padding:0 20px 18px 50px;color:#647268;line-height:1.7}.accItem.open .accBody{display:block}.accBody li{margin:7px 0}.accItem.open .accHead{background:#fafcf9}.wifiGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.wifiCard{border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px}.wifiCard h3{font-size:15px;letter-spacing:-.2px}.wifiCard .passRow{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:10px;margin-top:17px;padding:9px 11px;gap:8px}.wifiCard .pass{font-size:12px;font-weight:700;letter-spacing:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wifiCard .muted{font-size:11px;color:var(--muted);margin-top:9px}.iconbtn{border:0;background:transparent;color:var(--sage);padding:4px}.upload{border:1.5px dashed #cddbd0;border-radius:12px;padding:24px;text-align:center;background:#fbfcfa;color:var(--sage)}.upload p{margin-top:7px;font-size:12px;color:var(--muted)}.alert{padding:12px 14px;background:#eff6ed;border:1px solid #deebd9;color:#526b50;border-radius:12px;font-size:12px;line-height:1.6}.empty{text-align:center;padding:35px 12px;color:var(--muted)}.empty h3{color:var(--dark);margin:12px 0 6px}.empty p{max-width:360px;margin:auto;line-height:1.6}.footer{margin-top:42px;border-top:1px solid var(--line);padding:22px 0;color:#9ba89e;font-size:11px;display:flex;justify-content:space-between}.toast{position:fixed;bottom:27px;right:25px;background:#2d4736;color:#fff;border-radius:12px;padding:14px 18px;box-shadow:0 15px 30px #273d2e33;z-index:100;opacity:0;transform:translateY(15px);pointer-events:none;transition:.25s;font-size:13px;max-width:min(90vw,370px)}.toast.show{opacity:1;transform:translateY(0)}.mobileNav{display:none}.onlymobile{display:none}.accentIcon{width:45px;height:45px;border-radius:12px;background:var(--pale);display:grid;place-items:center;color:var(--dark)}.smallnote{color:var(--muted);font-size:12px;line-height:1.65}.formActions{display:flex;gap:10px;justify-content:flex-end;margin-top:17px;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.tag{font-size:10px;font-weight:800;color:var(--sage);border:1px solid #dbe6d9;padding:5px 9px;border-radius:40px}.regGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.regCell{border:1px solid var(--line);border-radius:13px;background:white;padding:15px}.regCell h4{font-size:12px;margin-bottom:7px}.regCell small{color:var(--muted)}
@media(max-width:1100px){.layout{grid-template-columns:1fr}.quickgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.app{display:block;padding-bottom:82px}.sidebar{display:none}.topbar{height:68px;padding:0 18px}.content{padding:22px 17px 35px}.pageHeader{align-items:flex-start}.pageHeader h1{font-size:24px}.quickgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick{min-height:118px}.hero{min-height:208px;padding:25px}.hero h2{font-size:25px}.topActions{gap:5px}.mobileNav{position:fixed;display:flex;bottom:0;left:0;right:0;background:#ffffffef;backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:9px 5px calc(8px + env(safe-area-inset-bottom));z-index:90;justify-content:space-around}.mobileNav button{border:0;background:none;color:#89988b;display:flex;flex-direction:column;gap:5px;align-items:center;font-size:10px;font-weight:700;min-width:57px}.mobileNav button.active{color:var(--dark)}.mobileNav .ico{width:20px;height:20px}.onlymobile{display:block}.grid2{grid-template-columns:1fr}.regGrid{grid-template-columns:repeat(2,1fr)}.footer{padding-bottom:35px}}@media(max-width:520px){.pageHeader{display:block}.pageHeader>.btn{margin-top:17px}.roleSwitch button{padding:8px 7px;font-size:11px}.breadcrumb{font-size:13px}.circleBtn{display:none}.card{padding:19px}.layout{gap:15px}.formGrid{grid-template-columns:1fr}.kpis{gap:8px}.kpi{padding:13px}.kpi strong{font-size:23px}.kpi small{font-size:10px}.wifiGrid{grid-template-columns:1fr}.pageHeader h1{font-size:25px}.hero{min-height:195px}.hero h2{font-size:24px}}

/* Long Beach Digital 2.0 · Editorial calm / responsive motion system */
.layout > *, .stack, .card, .tableWrap {min-width:0;}
:root{--ink:#22322a;--dark:#365344;--sage:#6b806d;--muted:#7c8b80;--pale:#ebf2e9;--line:#e5ece4;--bg:#f3f5f0;--shadow:0 12px 38px rgba(29,56,39,.055);--shadowHover:0 19px 52px rgba(29,56,39,.115);--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 89% 0%,#e9f1e8 0,transparent 38%),var(--bg);font-size:14px;-webkit-font-smoothing:antialiased}::selection{background:#d9e9d8;color:#274431}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a8c2a7;outline-offset:3px}button{touch-action:manipulation}button,.quick,.card,.kpi,.wifiCard,.navbtn{-webkit-tap-highlight-color:transparent}
.app{grid-template-columns:266px 1fr}.sidebar{background:#fbfcfa;border-right:1px solid #e3ebe1;padding:27px 16px 18px;gap:25px;z-index:22}.brand{padding:9px 11px 12px;gap:12px}.brand img{width:91px;height:64px;filter:contrast(1.02)}.brand-title strong{font-size:12px;letter-spacing:2px}.brand-title small{font-size:9px;letter-spacing:1.4px}.navigation{gap:5px}.navLabel{font-size:10px;letter-spacing:1.7px;color:#99a69a}.navbtn{min-height:46px;border:1px solid transparent;border-radius:13px;padding:12px 14px;font-size:13px;color:#738175;position:relative;transition:background .24s var(--ease),transform .24s var(--ease),color .24s}.navbtn:hover{background:#eef4ee;color:#355344;transform:translateX(2px)}.navbtn.active{background:#e5eee3;border-color:#dbe8d7;color:#355343;box-shadow:inset 3px 0 0 #718970}.navbtn .ico{width:18px;height:18px}.sidebar-foot{background:#eff4ec;border:1px solid #e2e9df;border-radius:17px;margin-top:auto;padding:12px;cursor:pointer;transition:transform .25s var(--ease),background .25s}.sidebar-foot:hover{background:#e5eee2;transform:translateY(-2px)}.sidebar-foot small{font-size:11px}.avatar{background:#728d77;color:#fff;border-radius:12px;width:40px;height:40px;font-family:Manrope}
.topbar{height:83px;background:rgba(255,255,255,.77);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid #e8eee5;padding:0 39px;position:sticky;top:0;z-index:20}.breadcrumb{font-size:12px;font-weight:800;letter-spacing:.2px}.breadcrumb .ico{color:var(--sage)}.topActions{gap:13px}.roleSwitch{background:#eff3ed;padding:4px;border-radius:14px}.roleSwitch button{padding:9px 15px;border-radius:10px;transition:background .2s,color .2s,box-shadow .2s}.roleSwitch button.selected{box-shadow:0 3px 11px #5276571e}.circleBtn{width:40px;height:40px;transition:transform .25s var(--ease),background .25s}.circleBtn:hover{background:#eaf2e9;transform:translateY(-2px)}.topClock{display:flex;align-items:center;gap:8px;color:#88988a;font-weight:600;font-size:11px;margin-right:9px}.topClock .ico{width:16px;height:16px}
.content{max-width:1460px;padding:34px 40px 60px}.prototype{background:#fcf8ee;border-color:#efe7d4;color:#947c56;border-radius:12px;padding:10px 14px;font-size:11px;line-height:1.5;margin-bottom:22px}.prototype .ico{flex:none}.pageHeader{margin-bottom:25px}.pageHeader h1{font-size:clamp(25px,2.4vw,33px);letter-spacing:-1.2px}.eyebrow{letter-spacing:2px;font-size:10px}.sub{font-size:13px}.btn{border-radius:13px;transition:transform .24s var(--ease),background .2s,box-shadow .24s var(--ease);box-shadow:0 3px 10px #2a523a12}.btn:hover{box-shadow:0 8px 20px #2a523a23;transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.985)}.btn.secondary{box-shadow:none}.btn.secondary:hover{box-shadow:0 6px 20px #274d3112}.card,.kpi,.wifiCard{border:1px solid #e5ece4;box-shadow:var(--shadow);border-radius:20px}.card{padding:26px}.layout{grid-template-columns:minmax(0,1.64fr) minmax(282px,.92fr);gap:20px}.stack{gap:20px}.kpis{gap:15px}.kpi{transition:transform .3s var(--ease),box-shadow .3s}.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadowHover)}.kpi strong{letter-spacing:-1px}.headingrow h3{font-size:16px}.plainLink{transition:color .15s,transform .15s}.plainLink:hover{color:#314e3a;transform:translateX(2px)}.quickgrid{gap:12px}.quick{border-radius:17px;min-height:124px;padding:17px;position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}.quick:after{content:'↗';position:absolute;top:17px;right:15px;font-size:16px;color:#97aa9a;opacity:0;transform:translate(-4px,4px);transition:opacity .25s,transform .25s}.quick:hover{transform:translateY(-5px);box-shadow:var(--shadowHover);border-color:#d6e3d5}.quick:hover:after{opacity:1;transform:none}.quick:active{transform:scale(.98)}.quick span:last-child{font-size:12px;line-height:1.35}.iconwell{width:43px;height:43px;border-radius:14px;background:#eaf2e7;color:#587661}.iconwell .ico{width:21px;height:21px}
.hero{min-height:246px;border-radius:24px;background:linear-gradient(120deg,#365748 0%,#607a63 51%,#8da088 100%);padding:32px 36px;box-shadow:0 15px 35px #4a6a4d25;isolation:isolate}.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 24%,#e7f5d93b,transparent 36%);pointer-events:none}.hero:after{width:290px;height:290px;right:-65px;top:-85px;box-shadow:0 0 0 53px #ffffff0e,0 0 0 109px #ffffff08,0 0 0 166px #ffffff05}.hero .mini{display:inline-flex;align-items:center;gap:8px;background:#ffffff18;border:1px solid #ffffff2a;padding:9px 12px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:1.2px;margin-bottom:13px}.hero h2{font-size:clamp(26px,2.4vw,35px);letter-spacing:-1.25px;line-height:1.18}.hero p{font-size:13px;max-width:420px;line-height:1.75}.heroActions{display:flex;gap:10px;margin-top:21px;position:relative;z-index:2;flex-wrap:wrap}.heroAction{border:1px solid #ffffff3c;background:#fff;color:#3b5946;font-size:12px;font-weight:800;padding:10px 16px;border-radius:11px;display:flex;align-items:center;gap:9px;transition:transform .28s var(--ease),background .28s}.heroAction:hover{background:#f0f6ed;transform:translateY(-2px)}.heroAction.alt{background:#ffffff1d;color:white}.heroAction.alt:hover{background:#ffffff31}
.welcomeHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:25px}.welcomeHead h1{font-size:clamp(28px,2.75vw,39px);line-height:1.2;letter-spacing:-1.75px;margin-top:7px}.welcomeHead .smallGreeting{font-weight:800;letter-spacing:1.3px;font-size:10px;color:#67806a;text-transform:uppercase}.welcomeHead p{color:var(--muted);margin-top:9px;line-height:1.6}.welcomeRight{display:flex;gap:10px;align-items:center}.welcomeDate{border:1px solid #dfebe0;border-radius:15px;background:#ffffffb2;padding:12px 16px;display:flex;gap:9px;align-items:center;color:#748978;font-size:12px;font-weight:700;white-space:nowrap}.welcomeDate .ico{width:16px;height:16px}.greetingWave{display:inline-block;transform-origin:70% 80%;animation:waveHi 1.15s .65s both}.personalizeBtn{color:#5e7663;background:#fff;border:1px solid #e0e9e0;box-shadow:0 2px 12px #314d340d;border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;transition:transform .2s,background .2s}.personalizeBtn:hover{background:#eef5ec;transform:translateY(-2px)}
.homeBand{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(275px,.9fr);gap:20px;margin-bottom:20px}.homeBand .hero{height:100%}.miniPanel{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:22px;background:linear-gradient(145deg,#fcfefb,#eff5ec);border:1px solid #e4eee1;border-radius:22px}.miniPanel .label{font-size:10px;color:#7d8d7c;text-transform:uppercase;letter-spacing:1.2px;font-weight:800}.miniPanel h3{font-size:18px;letter-spacing:-.6px;line-height:1.35;margin-top:5px}.miniPanel p{color:#7c8b7c;line-height:1.55;font-size:12px}.miniPanel .minisymbol{height:48px;width:48px;border-radius:16px;background:#dceadd;color:#57765c;display:grid;place-items:center}.miniPanel .minisymbol .ico{width:23px;height:23px}.miniPanel button{border:0;background:transparent;text-align:left;font-weight:800;color:#486c4d;display:flex;align-items:center;gap:8px;padding:0;font-size:12px}
.sectionLead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.sectionLead h3{font-size:17px;font-weight:800;letter-spacing:-.45px}.sectionLead small{color:#8e9d90;font-size:11px}.softCard{background:#fff;border-radius:20px;border:1px solid #e3ebe0;padding:22px;box-shadow:var(--shadow)}.smallnote{line-height:1.65}.tag,.chip{border-radius:10px}
#view{animation:viewEnter .55s var(--ease) both}#view .card,#view .quick,#view .kpi,#view .noticebox,#view .wifiCard{animation:cardEnter .5s var(--ease) both}#view .quick:nth-child(2),#view .kpi:nth-child(2){animation-delay:.055s}#view .quick:nth-child(3),#view .kpi:nth-child(3){animation-delay:.11s}#view .quick:nth-child(4){animation-delay:.16s}#view .quick:nth-child(5){animation-delay:.20s}#view .quick:nth-child(6){animation-delay:.24s}
@keyframes viewEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes cardEnter{from{opacity:0;transform:translateY(12px) scale(.993)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes waveHi{0%{transform:rotate(0)}24%{transform:rotate(23deg)}45%{transform:rotate(-9deg)}65%{transform:rotate(17deg)}85%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.toast{border-radius:14px;box-shadow:0 18px 50px #273c2b29;padding:14px 18px;max-width:min(94vw,440px)}.noticebox{border-radius:17px}.dataTable tbody tr{transition:background .2s}.dataTable tbody tr:hover{background:#f7faf6}.accHead{transition:background .2s}.accHead:hover{background:#f6faf5}.accBody{animation:openBody .3s var(--ease)}@keyframes openBody{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}.wifiCard{transition:transform .3s var(--ease),box-shadow .3s}.wifiCard:hover{transform:translateY(-3px);box-shadow:var(--shadowHover)}
.modalLayer{position:fixed;inset:0;z-index:150;display:grid;place-items:center;background:#23392d75;backdrop-filter:blur(7px);padding:18px;animation:fadeIn .18s ease-out}.modalDialog{width:min(440px,100%);background:#fff;border-radius:25px;padding:29px;border:1px solid #dce7da;box-shadow:0 30px 90px #162d2145;animation:modalIn .35s var(--ease)}.modalDialog h2{font-size:22px;letter-spacing:-.7px}.modalDialog p{color:#718175;font-size:13px;line-height:1.7;margin:10px 0 21px}.modalDialog .field{margin-bottom:20px}.modalTop{display:flex;justify-content:space-between;align-items:center;gap:12px}.closeModal{background:#eef4eb;border:0;border-radius:50%;height:33px;width:33px;color:#59725b;display:grid;place-items:center}.modalActions{display:flex;gap:10px;justify-content:flex-end}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.mobileMoreBackdrop{display:none}.mobileMorePanel{display:none}.profileTag{display:inline-flex;align-items:center;gap:7px;background:#f1f5ed;border:1px solid #e1e9dd;border-radius:999px;padding:7px 11px;color:#718871;font-size:11px;font-weight:800}
@media(max-width:1180px){.topClock{display:none}.homeBand{grid-template-columns:1fr}.miniPanel{display:grid;grid-template-columns:auto 1fr;align-items:center}.miniPanel button{grid-column:2}.miniPanel .minisymbol{grid-row:1/3}.layout{grid-template-columns:1fr}.content{padding-left:29px;padding-right:29px}}
@media(max-width:800px){.topbar{height:66px;position:sticky;top:0;padding:0 18px}.content{padding:21px 16px 40px}.welcomeHead{margin-bottom:19px}.welcomeHead h1{font-size:31px}.welcomeDate{display:none}.welcomeHead p{font-size:12px}.hero{min-height:235px}.homeBand{gap:14px;margin-bottom:18px}.miniPanel{padding:17px}.quickgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick{min-height:116px}.mobileNav{background:#fffffff0;box-shadow:0 -10px 40px #1c3c2811;border-color:#e4ebe2;padding-top:10px}.mobileNav button{min-width:0;flex:1;padding:5px 2px;font-size:10px;transition:transform .25s var(--ease),color .25s}.mobileNav button.active{color:#345a3e;transform:translateY(-3px)}.mobileNav button.active .ico{stroke-width:2.2}.mobileMoreBackdrop{position:fixed;inset:0;background:#1e342954;z-index:101;backdrop-filter:blur(3px)}.mobileMoreBackdrop.open{display:block;animation:fadeIn .22s}.mobileMorePanel{display:block;position:fixed;left:10px;right:10px;bottom:calc(83px + env(safe-area-inset-bottom));z-index:102;pointer-events:none;opacity:0;transform:translateY(24px) scale(.98);transition:opacity .28s var(--ease),transform .28s var(--ease);background:#fff;border-radius:24px;padding:19px;box-shadow:0 16px 60px #1b372942;border:1px solid #e6ece3;max-height:min(68vh,550px);overflow:auto}.mobileMorePanel.open{opacity:1;transform:none;pointer-events:auto}.mobileMorePanel h3{margin-bottom:4px;font-size:18px}.mobileMorePanel p{color:#839084;font-size:12px;margin-bottom:15px}.mobileMoreGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mobileMoreGrid button{border:1px solid #e5ede3;background:#f9fbf7;color:#3f5946;border-radius:14px;padding:15px 12px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;font-size:12px;font-weight:800}.mobileMoreGrid button .ico{color:#6e9070;width:20px;height:20px}.pageHeader{margin-bottom:20px}}
@media(max-width:520px){.pageHeader h1{font-size:26px}.welcomeHead h1{font-size:29px;letter-spacing:-1.4px}.welcomeHead .smallGreeting{font-size:9px}.personalizeBtn{padding:11px}.personalizeBtn span{display:none}.hero{padding:25px 23px;min-height:240px}.hero h2{font-size:27px}.hero .mini{font-size:9px}.hero p{font-size:12px}.heroActions .heroAction{font-size:11px;padding:10px 12px}.miniPanel{padding:16px}.miniPanel h3{font-size:15px}.miniPanel p{font-size:11px}.quick{min-height:115px}.card{padding:19px}.topbar .roleSwitch button{padding:8px 9px}.topbar .roleSwitch{gap:1px}.prototype{margin-bottom:19px}.layout,.stack{gap:15px}.sectionLead{margin-bottom:13px}.sectionLead h3{font-size:15px}.modalDialog{padding:22px}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.kpi small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}


/* Long Beach Digital 2.1 · Mobile-first improvements */
.rulesHero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:235px;padding:32px 36px;border-radius:25px;background:linear-gradient(115deg,#2f5444 0%,#577964 55%,#a4b9a4 100%);color:#fff;box-shadow:0 18px 38px #385e492b}
.rulesHero:after{content:"";position:absolute;width:310px;height:310px;border:1px solid #ffffff42;border-radius:50%;right:-110px;top:-130px;box-shadow:0 0 0 56px #ffffff10,0 0 0 116px #ffffff0d}
.rulesHeroText{position:relative;z-index:1;max-width:560px}.rulesHero .mini{font-size:10px;letter-spacing:1.5px;font-weight:800;display:flex;gap:6px;align-items:center;color:#e8efe5}.rulesHero h2{font-family:Manrope,sans-serif;font-size:clamp(27px,4vw,42px);line-height:1.14;letter-spacing:-1.6px;margin:16px 0 10px}.rulesHero p{color:#e0ebe2;line-height:1.7;max-width:440px}.rulesHeroMark{opacity:.2;transform:scale(5);margin-right:80px}.rulesTags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.rulesTags span{font-size:11px;padding:7px 12px;background:#ffffff25;border:1px solid #ffffff30;border-radius:20px}
.rulesHighlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.rulesHighlight{background:#fff;border:1px solid var(--line);border-radius:17px;padding:19px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}.rulesHighlight>.ico{color:#567d62;flex:none;width:22px;height:22px}.rulesHighlight strong,.rulesHighlight small{display:block}.rulesHighlight strong{font-size:14px}.rulesHighlight small{font-size:11px;color:var(--muted);margin-top:4px}
.rulesGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.ruleTile{min-width:0;background:#fff;border:1px solid #e1e9de;border-radius:19px;overflow:hidden;transition:box-shadow .3s,transform .3s,border-color .3s}.ruleTile:hover{box-shadow:var(--shadowHover);transform:translateY(-2px)}.ruleTile.open{border-color:#a8c3ad;box-shadow:0 12px 40px #426b4812}.ruleTileHead{display:flex;align-items:center;text-align:left;width:100%;gap:13px;background:none;border:0;padding:19px;color:var(--ink)}.ruleTileIcon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:#edf4eb;color:#4a7858;flex:none}.ruleTileTitle{flex:1;min-width:0}.ruleTileTitle strong,.ruleTileTitle small{display:block}.ruleTileTitle strong{font-size:13px}.ruleTileTitle small{font-size:11px;color:var(--muted);margin-top:4px}.ruleTileArrow{color:#809388;transition:transform .3s}.ruleTile.open .ruleTileArrow{transform:rotate(180deg)}.ruleTile .accBody{display:none;padding:0 22px 20px}.ruleTile.open .accBody{display:block;animation:viewEnter .3s var(--ease)}.ruleTile .accBody ul{margin:2px 0 0;padding-left:18px;color:#66776c;line-height:1.85;font-size:13px}.ruleTile .accBody li{margin:7px 0}
.assignmentPreview{background:#edf4ed;border:1px solid #dbe9da;padding:13px 15px;border-radius:13px}.assignmentPreview small,.assignmentPreview strong{display:block}.assignmentPreview small{font-size:11px;color:#7b907f;margin-bottom:6px}.assignmentPreview strong{color:#375642}.addApartmentForm{display:flex;gap:12px;align-items:end}.addApartmentForm .field{flex:1;min-width:0}.addApartmentForm .btn{min-height:45px}.deptButton{text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s;border:1px solid #e3eae2!important}.deptButton:hover{transform:translateY(-2px);box-shadow:0 9px 20px #3f5a4418}.deptButton small{display:block;color:#788a7e;margin-top:8px;overflow-wrap:anywhere}
@media(max-width:800px){.rulesHero{padding:25px;min-height:215px}.rulesHeroMark{display:none}.rulesHighlights{grid-template-columns:1fr 1fr}.rulesGrid{grid-template-columns:1fr}.addApartmentForm{align-items:stretch;flex-direction:column}.addApartmentForm .btn{width:100%}}
@media(max-width:520px){.rulesHero{border-radius:20px;padding:24px 21px}.rulesHero h2{font-size:30px}.rulesHero p{font-size:12px}.rulesHighlights{grid-template-columns:1fr;gap:9px}.rulesHighlight{padding:12px 15px}.ruleTileHead{padding:15px}.ruleTile .accBody{padding:0 16px 16px}.regGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.deptButton{padding:13px 11px}.deptButton h4{font-size:13px}.layout{min-width:0}.field input[type=file]{max-width:100%}}

/* LONG BEACH DIGITAL V4 · Editorial coastal design system */
:root{--ink:#23392f;--muted:#687c70;--sage:#819784;--dark:#344f43;--pale:#edf2e9;--line:#e0e9df;--bg:#f7f8f4;--white:#fff;--warn:#a67a51;--sand:#d9c5a5;--shadow:0 12px 34px rgba(27,56,37,.065);--shadowHover:0 20px 44px rgba(30,60,42,.12)}
body{background:radial-gradient(ellipse at 93% 7%,#e7eee5 0%,transparent 43%),#f7f8f4;color:var(--ink)}
.sidebar{background:#fcfdfa;border-right-color:#e2e9dd;padding-top:24px}
.brand{padding-bottom:20px}.brand-title strong{color:#344d40}.navLabel{color:#879c89}
.navbtn{color:#607568;border-radius:12px;transition:background .24s ease,color .24s ease,transform .24s ease}
.navbtn:hover{background:#edf3e9;transform:translateX(3px)}.navbtn.active{background:#e4eddf;color:#2d513b;box-shadow:inset 3px 0 #6a8d71}
.topbar{background:#fdfefbdf;backdrop-filter:blur(18px);border-bottom-color:#e3eade}
.content{max-width:1370px;padding-top:35px}
.prototype{background:#fffaf1;border-color:#efdfc2;color:#967750;font-weight:500}
.welcomeHead h1{font-size:clamp(31px,3vw,42px);letter-spacing:-1.7px;color:#233b30}.welcomeHead p{color:#688072;font-size:14px}
.smallGreeting,.eyebrow{color:#6e8d75;letter-spacing:2px}
.welcomeDate,.personalizeBtn{background:#fff;border-color:#e2eadd;border-radius:13px}
.hero{background:linear-gradient(112deg,#2d5142 0%,#517560 55%,#91a48d 100%);border:1px solid #ffffff24;box-shadow:0 20px 42px #3556442b;min-height:206px;padding:28px 33px;transition:box-shadow .35s ease,transform .35s ease}
.hero:hover{box-shadow:0 25px 48px #35564433}.hero:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 85% 6%,#ffffff25,transparent 34%);pointer-events:none}
.hero h2{font-size:clamp(26px,2.6vw,35px);line-height:1.17;letter-spacing:-1.3px}.hero p{color:#e2eee4;max-width:430px}
.hero .mini{color:#e1ebdf}.hero:after{right:-105px;top:-145px;opacity:.75;transform:scale(1.04)}
.heroAction{transition:transform .24s,box-shadow .24s,background .24s}.heroAction:hover{transform:translateY(-2px);box-shadow:0 7px 16px #193d2c2a}
.miniPanel{border:1px solid #e3e9df;background:linear-gradient(145deg,#fffefa,#f3f7f0);box-shadow:0 11px 30px #25463108}
.miniPanel .minisymbol{background:#e2eddf;color:#42694b}
.card,.softCard,.kpi,.quick,.wifiCard,.rulesHighlight{border-color:#e1e9df;box-shadow:var(--shadow)}
.card,.softCard{border-radius:20px}.kpi{border-radius:19px;padding:22px}.kpi strong{font-size:33px;color:#2d483a}.kpi small{color:#728376}
.quick{background:#fefefc;border-radius:19px;min-height:122px;position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.quick:after{content:'↗';position:absolute;right:17px;top:19px;color:#95a999;font-size:16px;transition:transform .25s,color .25s}.quick:hover{transform:translateY(-4px);border-color:#b6cdb6;box-shadow:var(--shadowHover)}.quick:hover:after{transform:translate(2px,-2px);color:#355b40}
.iconwell,.accentIcon{background:#e7efe4;color:#476a4f;border-radius:13px}
.headingrow h3,.sectionLead h3{color:#2a4035;letter-spacing:-.45px}
.btn{background:#365746;border-radius:12px;box-shadow:0 6px 14px #31504014;transition:transform .22s ease,background .22s ease,box-shadow .22s ease}.btn:hover{background:#294b39;box-shadow:0 10px 24px #27453225;transform:translateY(-2px)}
.btn.secondary{box-shadow:none;border-color:#d8e3d6}.btn.ghost{box-shadow:none}
.btn:focus-visible,.navbtn:focus-visible,.quick:focus-visible,.ruleTileHead:focus-visible,.mobileNav button:focus-visible{outline:3px solid #94b399;outline-offset:3px}
.noticebox{background:#eff4ec;border-color:#dfe9dc}.noticebox strong{color:#365644}.noticebox p{color:#6b7d6f}
.dataTable th{color:#657b6a}.dataTable tbody tr:hover{background:#f3f8f0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#779d7f;box-shadow:0 0 0 3px #dcebdc}
.chip{background:#e8f0e5}.profileTag{background:#eff4ec}
/* More expressive rules hub */
.rulesHero{min-height:221px;background:linear-gradient(105deg,#2b5140,#567962 63%,#98a88e);box-shadow:0 20px 40px #294f3b28;border-radius:23px}
.rulesHero:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#ffffff0a,transparent 48%),radial-gradient(circle at 89% 50%,#e6dcc53c,transparent 32%)}
.rulesHero h2{font-size:clamp(28px,4vw,44px)}
.rulesTags span{background:#ffffff1b;backdrop-filter:blur(4px)}
.rulesHighlights{gap:14px}.rulesHighlight{position:relative;background:#fffefb;border-radius:19px;padding:20px;transition:transform .26s,box-shadow .26s}.rulesHighlight:nth-child(2){background:#f7f8f2}.rulesHighlight:hover{transform:translateY(-3px);box-shadow:var(--shadowHover)}
.rulesHighlight>.ico{background:#e8efe3;border-radius:12px;width:44px;height:44px;padding:11px;color:#456c50}.rulesHighlight strong{font-size:14px}.rulesHighlight small{font-size:12px}
.ruleTile{border-radius:20px;background:#fefefc;box-shadow:0 5px 18px #28412e08;transition:transform .3s,box-shadow .3s,border-color .3s}
.ruleTile:hover{transform:translateY(-3px);border-color:#b9d0b9;box-shadow:0 15px 32px #294a3018}.ruleTile.open{background:#fff;border-color:#a7c3aa;box-shadow:0 16px 34px #3b64451a}
.ruleTileHead{padding:20px}.ruleTileTitle strong{font-size:14px}.ruleTileIcon{background:linear-gradient(135deg,#e4eedf,#f2f5eb);color:#416e50}
.ruleTile:nth-child(4n+2) .ruleTileIcon{background:#f5ecdf;color:#8d7652}.ruleTile:nth-child(4n+3) .ruleTileIcon{background:#e8efed;color:#507b71}
.ruleTile .accBody ul{color:#51685a}.ruleTile .accBody li::marker{color:#89a58c}
/* Rhythm and interaction */
#view{animation:viewEnter .42s cubic-bezier(.2,.8,.2,1) both}
#view .card,#view .quick,#view .kpi,#view .noticebox,#view .wifiCard,#view .ruleTile{animation:cardEnter .45s cubic-bezier(.2,.8,.2,1) both}
#view .ruleTile:nth-child(2n),#view .quick:nth-child(2n){animation-delay:.055s}
#view .ruleTile:nth-child(3n),#view .quick:nth-child(3n){animation-delay:.1s}
@media(min-width:801px){.sidebar-foot{border-top-color:#dfe8df}.topbar{position:sticky;top:0;z-index:20}}
@media(max-width:800px){body{background:#f7f8f4}.topbar{background:#fdfefbf2}.content{padding:23px 17px calc(110px + env(safe-area-inset-bottom))}.hero{min-height:210px}.homeBand{gap:13px}.miniPanel{box-shadow:none}.rulesHero{min-height:205px}.mobileNav{background:#fffefaf2;backdrop-filter:blur(18px);border-top-color:#dbe6db}.mobileNav button{min-height:50px}.mobileMorePanel{background:#fffefa}}
@media(max-width:520px){.welcomeHead h1{font-size:30px}.welcomeHead p{font-size:12px}.hero{min-height:218px;padding:24px 22px}.hero h2{font-size:27px}.hero p{font-size:12px}.heroActions{flex-wrap:wrap}.heroAction{min-height:39px}.quickgrid{gap:10px}.quick{min-height:111px;padding:15px}.quick:after{right:14px;top:13px}.card,.softCard{padding:18px}.kpi{padding:15px 12px}.kpi strong{font-size:25px}.kpi small{font-size:10px}.rulesHero{padding:23px 21px;min-height:219px}.rulesHero h2{font-size:29px}.rulesHighlights{grid-template-columns:1fr;gap:10px}.rulesHighlight{padding:11px 14px}.rulesHighlight>.ico{width:40px;height:40px;padding:10px}.rulesGrid{grid-template-columns:1fr}.ruleTileHead{padding:17px}.pageHeader{flex-wrap:wrap}.pageHeader>.btn{max-width:100%}.formGrid{grid-template-columns:1fr}.dataTable{min-width:520px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* LONG BEACH V5 · warm editorial palette / mobile payments */
.paymentKpis{grid-template-columns:repeat(3,minmax(0,1fr))}.paymentKpis .kpi{min-width:0}.paymentKpis .kpi strong{font-size:clamp(19px,2.1vw,29px);overflow-wrap:anywhere}
@media(max-width:700px){.paymentKpis{grid-template-columns:1fr}.paymentKpis .kpi{padding:16px 20px}.paymentKpis .kpi strong{font-size:25px}}
:root{--ink:#303731;--muted:#69766b;--sage:#788674;--dark:#788674;--pale:#f2f3ee;--line:#e7e6df;--bg:#f4f2ed;--sand:#ddd5c9;--shadow:0 12px 30px rgba(49,55,45,.06)}
body{background:radial-gradient(ellipse at 92% 4%,#e6ebe3 0,transparent 43%),#f4f2ed}
.sidebar{background:#fdfcf9;border-right-color:#e8e6df}.topbar{background:#fefdfaee;border-bottom-color:#e9e7e0}
.navbtn.active{background:#e5ebe1;color:#455d4a;box-shadow:inset 3px 0 #91a48a}
.navbtn:hover{background:#edf0e9}.hero{background:linear-gradient(115deg,#718773,#91a18d 60%,#c7c9b8);box-shadow:0 14px 34px #74877022}.rulesHero{background:linear-gradient(112deg,#7b8e79,#acb7a1 77%,#d1c8b6)}
.hero p,.hero .mini,.rulesHero p{color:#fcfefa}.btn{background:#748871}.btn:hover{background:#5e755e}.btn.secondary{background:#fff;color:#556950;border-color:#dce3d8}.btn.secondary:hover{background:#eff3ed}
.kpi strong{color:#465c48}.eyebrow,.smallGreeting{color:#778a77}.iconwell,.accentIcon{background:#eef1e9;color:#657e63}.rulesHighlight:nth-child(2){background:#faf9f5}
.paymentIntro{display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(115deg,#faf9f5,#eaece5);border:1px solid #e3e4da;border-radius:23px;padding:27px 31px;margin-bottom:20px;overflow:hidden;position:relative}
.paymentIntro h2{font-size:clamp(22px,2.7vw,33px);letter-spacing:-1px;line-height:1.15;margin:11px 0}.paymentIntro p{color:#727e73;line-height:1.6;max-width:550px;margin:0}.paymentSeal{width:76px;height:76px;flex:0 0 auto;display:grid;place-items:center;background:#e0e8df;color:#69856e;border-radius:23px;transform:rotate(-6deg)}.paymentSeal svg{width:33px;height:33px}
.paymentItem{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding:17px 0}.paymentItem:last-child{border-bottom:0}.paymentIcon{display:grid;place-items:center;background:#f0f2eb;color:#70886e;border-radius:12px;width:43px;height:43px;flex:none}.paymentText{flex:1;min-width:0}.paymentText strong{display:block;font-size:13px}.paymentText small{display:block;color:#78847a;margin-top:5px;font-size:11px}.paymentDue{margin-top:7px;font-size:11px;color:#616f62}.paymentRight{display:flex;align-items:flex-end;flex-direction:column;gap:9px;flex:none}.payBadge{font-size:10px;font-weight:700;padding:6px 9px;border-radius:100px;background:#eef0e8;color:#5e705b}.payBadge.paid{background:#e4eee2;color:#47754f}.payBadge.partial{background:#f7eddb;color:#966e39}.payBadge.late{background:#fbebdf;color:#ad5e3e}.payBadge.pending{background:#f0f0eb;color:#6a7369}
@media(max-width:800px){.paymentIntro{padding:23px 19px}.paymentSeal{width:55px;height:55px;border-radius:15px}.paymentSeal svg{width:25px;height:25px}.paymentItem{align-items:flex-start;flex-wrap:wrap}.paymentRight{margin-left:auto}}
@media(max-width:440px){.paymentSeal{display:none}.paymentIntro h2{font-size:24px}.paymentItem{gap:10px}.paymentRight{width:100%;flex-direction:row;justify-content:flex-end;align-items:center}.paymentText{min-width:calc(100% - 60px)}.paymentItem .btn.small{padding:8px 11px}.kpi strong{font-size:25px}}


/* V5.1 · Identidad original sin etiquetas añadidas */
.sidebar .brand{display:flex;justify-content:flex-start;align-items:center;padding:10px 14px 22px;min-height:106px;}
.sidebar .brand img{display:block;width:164px;max-width:100%;height:auto;object-fit:contain;filter:none;}
@media(min-width:801px) and (max-width:1060px){.sidebar .brand img{width:142px}}

/* V5.2 · Indicadores de renta exclusivos de administración */
.revenueSection{background:#fff;border:1px solid #e6e9df;border-radius:21px;box-shadow:0 9px 26px #4e624e0d;padding:25px;margin-bottom:21px;animation:fadeUp .45s ease both}
.revenueHeading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:21px}
.revenueHeading h2{font-size:21px;letter-spacing:-.55px;color:#36463a}.revenueHeading p{color:#758076;font-size:12px;line-height:1.6;margin-top:7px}
.revenueMonthField{min-width:175px}.revenueMonthField input{min-height:40px;background:#f9faf7}
.revenueTiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.revenueTile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:20px;border-radius:16px;background:#f7f8f3;border:1px solid #ecefe7;min-width:0}
.revenueTile.expected{background:#ecf0e8}.revenueTile.collected{background:#f5f4ef}.revenueTile.open{background:#faf8f3}
.revenueIcon{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;background:#fff8;color:#667d67;margin-bottom:4px}.revenueIcon svg{width:17px;height:17px}
.revenueLabel{font-size:12px;color:#687769;font-weight:700}.revenueTile strong{font-size:clamp(21px,2.4vw,30px);color:#344638;letter-spacing:-.9px;font-family:Manrope,sans-serif;overflow-wrap:anywhere}.revenueTile small{font-size:11px;color:#79857b;line-height:1.45}
.revenueFoot{margin-top:17px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#7b867c;font-size:11px;line-height:1.5}.revenueFoot svg{width:16px;height:16px}.revenueFoot button{margin-left:auto}
@media(max-width:800px){.revenueSection{padding:19px}.revenueHeading{flex-direction:column;align-items:stretch}.revenueMonthField{width:100%}.revenueTiles{gap:9px}.revenueTile{padding:15px}.revenueTile strong{font-size:clamp(19px,3.4vw,26px)}}
@media(max-width:570px){.revenueTiles{grid-template-columns:1fr}.revenueTile{display:grid;grid-template-columns:39px 1fr;column-gap:12px;row-gap:4px;align-items:center}.revenueIcon{grid-row:1/4;margin:0}.revenueTile strong{font-size:25px}.revenueFoot button{margin-left:0}}

/* Long Beach V5.3 — Occupancy summary */
.occupancySection{margin:22px 0;padding:24px;background:#fff;border:1px solid #e7e8e1;border-radius:23px;box-shadow:0 12px 32px #2d403009}.occupancySectionHead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.occupancySectionHead h2{font-size:21px;color:#303731;letter-spacing:-.5px;margin:6px 0}.occupancySectionHead p,.vacantHeader p{color:#7e887f;font-size:12px;line-height:1.6}.occupancyKpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.occupancyKpi{border-radius:17px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#f7f8f5;border:1px solid #eef0ea}.occupancyKpi.vacant{background:#f4f3ed}.occupancyKpi .occIcon{display:grid;place-items:center;background:#e7eee5;color:#788674;width:35px;height:35px;border-radius:11px;margin-bottom:6px}.occupancyKpi small{font-size:12px;color:#6f796e}.occupancyKpi strong{font-size:32px;color:#303731;line-height:1.3;letter-spacing:-1px}.occupancyKpi>span:last-child{font-size:11px;color:#819083}.vacantPanel{margin-top:17px;padding:18px;border:1px solid #e7eae3;border-radius:17px}.vacantHeader{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:14px}.vacantHeader h3{font-size:15px;margin-bottom:4px}.vacantList{display:flex;gap:9px;flex-wrap:wrap}.vacantApt{border:1px solid #dce4da;background:#fafbf8;border-radius:12px;color:#4c6653;padding:10px 12px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}.vacantApt:hover{background:#e9eee6;border-color:#a3b59e;transform:translateY(-2px)}.vacantApt>span{display:inline-flex}.vacantApt svg{width:14px;height:14px}.allOccupied{font-size:13px;color:#58735e;display:flex;gap:7px;align-items:center}.directoryHint{background:#f7f8f4;color:#6a7b6b;border-radius:12px;padding:11px 14px;font-size:12px;margin:8px 0 16px;display:flex;gap:9px;align-items:center}.directoryHint svg{flex-shrink:0}
@media(max-width:800px){.occupancySection{padding:18px;margin:17px 0}.occupancySectionHead{align-items:start;flex-direction:column}.occupancySectionHead .btn{width:100%;justify-content:center}.occupancyKpi{padding:14px}.occupancyKpi strong{font-size:28px}}@media(max-width:520px){.occupancyKpis{gap:7px}.occupancyKpi{padding:11px 9px;border-radius:13px}.occupancyKpi .occIcon{width:30px;height:30px}.occupancyKpi small{font-size:10px}.occupancyKpi strong{font-size:25px}.occupancyKpi>span:last-child{font-size:9px;line-height:1.25}.vacantHeader{flex-wrap:wrap}.vacantPanel{padding:13px}.vacantApt{font-size:11px;padding:10px}.occupancySectionHead h2{font-size:20px}}