:root{--zg-neutral-0:#fff;--zg-neutral-50:#f8fafc;--zg-neutral-100:#f1f5f9;--zg-neutral-200:#e2e8f0;--zg-neutral-300:#cbd5e1;--zg-neutral-400:#94a3b8;--zg-neutral-500:#64748b;--zg-neutral-700:#334155;--zg-neutral-800:#1e293b;--zg-neutral-900:#0f172a;--zg-organisation-primary:#2dd4bf;--zg-organisation-dark:#0f766e;--zg-organisation-secondary:#ccfbf1;--zg-state-danger:#dc2626;--zg-state-danger-soft:#fee2e2;--zg-state-warning:#d97706;--zg-state-warning-soft:#fef3c7;--zg-state-success:#16a34a;--zg-state-success-soft:#dcfce7;--zg-font-family:"Open Sans",Arial,sans-serif;--zg-radius-sm:6px;--zg-radius-md:10px;--zg-radius-lg:14px;--zg-shadow-soft:0 1px 3px rgba(15,23,42,.1);--sidebar:252px}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--zg-neutral-50);color:var(--zg-neutral-700);font-family:var(--zg-font-family)}button,input,select{font:inherit}:focus-visible{outline:3px solid rgba(45,212,191,.42);outline-offset:2px}.skip-link{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-150%);padding:10px 14px;border-radius:8px;background:#fff;color:#0f172a}.skip-link:focus{transform:none}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;z-index:20;width:var(--sidebar);overflow:auto;background:var(--zg-neutral-900);color:#fff;transition:width .18s ease}.brand{display:flex;height:70px;align-items:center;gap:12px;padding:0 14px;font-size:16px}.icon-button{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer}.icon-button:hover{background:rgba(255,255,255,.1)}.sidebar-toggle{font-size:28px}.back-link{display:block;padding:8px 16px 18px;color:var(--zg-neutral-300);font-size:13px;text-decoration:none}.sidebar nav{display:grid;gap:5px;padding-right:8px}.nav-item{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;width:100%;min-height:58px;padding:9px 10px 9px 14px;border:0;border-left:5px solid transparent;border-radius:0 10px 10px 0;background:transparent;color:var(--zg-neutral-300);cursor:pointer;text-align:left}.nav-item:hover,.nav-item.is-active{border-left-color:var(--zg-organisation-primary);background:var(--zg-neutral-800);color:#fff}.nav-item>span:last-child{display:grid;gap:2px}.nav-item strong{font-size:14px}.nav-item small{overflow:hidden;color:var(--zg-neutral-400);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.nav-icon{display:grid;place-items:center;color:var(--zg-organisation-primary);font-size:20px;font-weight:800}.sidebar-foot{position:absolute;bottom:18px;left:16px;display:flex;align-items:center;gap:8px;color:var(--zg-neutral-400);font-size:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--zg-organisation-primary)}.main-content{min-height:100vh;margin-left:var(--sidebar);padding:32px clamp(20px,4vw,54px) 60px;transition:margin-left .18s ease}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto 24px}.topbar h1{margin:0;color:var(--zg-neutral-900);font-size:clamp(28px,3vw,38px);line-height:1.15}.topbar p{margin:6px 0 0;color:var(--zg-neutral-500)}.topbar .eyebrow{margin:0 0 3px;color:var(--zg-organisation-dark);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.header-actions{display:flex;align-items:center;gap:12px}.user-chip{display:grid;width:42px;height:42px;place-items:center;border:1px solid var(--zg-neutral-200);border-radius:50%;background:#fff;color:var(--zg-neutral-700);font-size:13px;font-weight:800}.button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:7px;padding:0 16px;border:1px solid transparent;border-radius:10px;cursor:pointer;font-weight:700}.button.primary{background:var(--zg-organisation-dark);color:#fff}.button.primary:hover{background:#115e59}.button.secondary{border-color:var(--zg-neutral-300);background:#fff;color:var(--zg-neutral-700)}.button.ghost{min-height:34px;padding:0 10px;background:transparent;color:var(--zg-organisation-dark)}.create-wrap{position:relative}.create-menu{position:absolute;z-index:30;top:50px;right:0;width:220px;padding:7px;border:1px solid var(--zg-neutral-200);border-radius:12px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.16)}.create-menu button{display:flex;width:100%;gap:10px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--zg-neutral-700);cursor:pointer;text-align:left}.create-menu button:hover{background:var(--zg-neutral-100)}.banner{display:flex;max-width:1440px;margin:0 auto 18px;padding:12px 16px;border-radius:10px;gap:10px;font-size:13px}.banner.warning{border:1px solid #fde68a;background:var(--zg-state-warning-soft);color:#92400e}.loading-grid,#view,.state-card{max-width:1440px;margin:auto}.loading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.loading-grid div{height:260px;border-radius:14px;background:linear-gradient(100deg,#e2e8f0 20%,#f8fafc 40%,#e2e8f0 60%);background-size:220% 100%;animation:loading 1.3s infinite}@keyframes loading{to{background-position-x:-220%}}.state-card{padding:60px 24px;border:1px solid var(--zg-neutral-200);border-radius:14px;background:#fff;text-align:center}.state-card h2{margin:14px 0 4px;color:var(--zg-neutral-900)}.state-card p{margin:0 0 20px;color:var(--zg-neutral-500)}.state-icon{display:grid;width:46px;height:46px;margin:auto;place-items:center;border-radius:50%;background:var(--zg-state-danger-soft);color:var(--zg-state-danger);font-weight:800}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.metric{padding:17px;border:1px solid var(--zg-neutral-200);border-radius:14px;background:#fff;box-shadow:var(--zg-shadow-soft)}.metric span{color:var(--zg-neutral-500);font-size:12px;font-weight:700}.metric strong{display:block;margin-top:5px;color:var(--zg-neutral-900);font-size:26px}.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.panel{min-width:0;border:1px solid var(--zg-neutral-200);border-radius:14px;background:#fff;box-shadow:var(--zg-shadow-soft)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 12px}.panel h2{margin:0;color:var(--zg-neutral-900);font-size:18px}.panel-head p{margin:4px 0 0;color:var(--zg-neutral-500);font-size:12px}.item-list{display:grid}.list-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:13px 18px;border-top:1px solid var(--zg-neutral-100);cursor:pointer}.list-item:hover{background:var(--zg-neutral-50)}.list-item h3{overflow:hidden;margin:0;color:var(--zg-neutral-900);font-size:14px;text-overflow:ellipsis;white-space:nowrap}.list-item p{margin:5px 0 0;color:var(--zg-neutral-500);font-size:12px}.item-meta{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.badge{display:inline-flex;min-height:23px;align-items:center;padding:0 9px;border-radius:999px;background:var(--zg-neutral-100);color:var(--zg-neutral-700);font-size:11px;font-weight:700}.badge.danger{background:var(--zg-state-danger-soft);color:#991b1b}.badge.warning{background:var(--zg-state-warning-soft);color:#92400e}.badge.success{background:var(--zg-state-success-soft);color:#166534}.badge.area{background:var(--zg-organisation-secondary);color:#115e59}.empty{padding:35px 18px;border-top:1px solid var(--zg-neutral-100);color:var(--zg-neutral-500);font-size:13px;text-align:center}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;overflow:auto}.toolbar input,.toolbar select{min-height:42px;padding:0 12px;border:1px solid var(--zg-neutral-300);border-radius:10px;background:#fff;color:var(--zg-neutral-700)}.toolbar input{min-width:250px}.tabs{display:flex;gap:5px;padding:5px;border:1px solid var(--zg-neutral-200);border-radius:12px;background:#fff}.tab{min-height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--zg-neutral-500);cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}.tab.is-active{background:var(--zg-organisation-secondary);color:#115e59}.area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.area-card{padding:18px;border:1px solid var(--zg-neutral-200);border-top:4px solid var(--area-color,var(--zg-organisation-primary));border-radius:14px;background:#fff;cursor:pointer}.area-card:hover{box-shadow:0 8px 24px rgba(15,23,42,.1);transform:translateY(-1px)}.area-card h2{margin:0;color:var(--zg-neutral-900);font-size:17px}.area-card p{margin:6px 0 18px;color:var(--zg-neutral-500);font-size:12px}.area-stats{display:flex;gap:18px}.area-stats strong{display:block;color:var(--zg-neutral-900)}.area-stats span{font-size:11px}.dialog{width:min(620px,calc(100% - 28px));max-height:85vh;padding:0;border:0;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.25)}.dialog::backdrop{background:rgba(15,23,42,.5)}.dialog-close{position:absolute;top:12px;right:12px;color:var(--zg-neutral-500);font-size:24px}.dialog-body{padding:28px}.dialog-body h2{margin:0 45px 8px 0;color:var(--zg-neutral-900)}.dialog-body>p{color:var(--zg-neutral-500);line-height:1.6}.detail-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.detail-meta div{padding:12px;border-radius:10px;background:var(--zg-neutral-50)}.detail-meta span{display:block;color:var(--zg-neutral-500);font-size:11px}.detail-meta strong{display:block;margin-top:3px;color:var(--zg-neutral-900);font-size:13px}.toast{position:fixed;z-index:50;right:22px;bottom:22px;padding:13px 17px;border-radius:10px;background:var(--zg-neutral-900);color:#fff;box-shadow:0 8px 24px rgba(15,23,42,.2);font-size:13px}.mobile-menu{display:none;color:var(--zg-neutral-900)}.sidebar-collapsed .sidebar{width:64px}.sidebar-collapsed .sidebar .brand strong,.sidebar-collapsed .back-link,.sidebar-collapsed .nav-item>span:last-child,.sidebar-collapsed .sidebar-foot{display:none}.sidebar-collapsed .nav-item{display:flex;justify-content:center;padding-left:7px}.sidebar-collapsed .main-content{margin-left:64px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,1fr)}.area-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sidebar{width:min(310px,88vw);transform:translateX(-100%);box-shadow:0 10px 30px rgba(15,23,42,.3);transition:transform .18s}.sidebar.is-open{transform:none}.sidebar-toggle{display:none}.main-content,.sidebar-collapsed .main-content{margin-left:0;padding:18px 14px 45px}.mobile-menu{display:grid}.topbar{align-items:flex-start;gap:10px}.topbar>div:nth-child(2){flex:1}.topbar h1{font-size:25px}.topbar #viewSubtitle,.user-chip{display:none}.dashboard-grid,.loading-grid{grid-template-columns:1fr}.area-grid{grid-template-columns:1fr}.header-actions{gap:6px}.button{padding:0 12px}.toolbar{align-items:stretch;flex-direction:column}.toolbar input{min-width:0;width:100%}.tabs{overflow:auto}.list-item{grid-template-columns:1fr}.item-meta{justify-content:flex-start}.banner{align-items:flex-start;flex-direction:column}.detail-meta{grid-template-columns:1fr}}
@media(max-width:430px){.metrics{grid-template-columns:1fr 1fr}.metric strong{font-size:21px}.metric{padding:14px}.topbar .eyebrow{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.detail-badges{justify-content:flex-start}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.create-form{display:grid;gap:15px}.create-form>p,.create-form h2{margin:0}.create-form label{display:grid;gap:6px;color:var(--zg-neutral-700);font-size:13px;font-weight:700}.create-form input,.create-form select,.create-form textarea{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--zg-neutral-300);border-radius:10px;background:#fff;color:var(--zg-neutral-900);font:inherit}.create-form textarea{resize:vertical}.create-form input[type=color]{width:72px;padding:4px}.create-form .check-label{display:flex;align-items:center}.create-form .check-label input{width:18px;min-height:18px}.form-error{padding:10px 12px;border-radius:8px;background:var(--zg-state-danger-soft);color:#991b1b!important;font-size:12px}
.sidebar-toggle span{display:block;transition:transform .18s ease}.sidebar-collapsed .sidebar-toggle span{transform:rotate(180deg)}.task-editor{display:grid;gap:16px}.task-editor>p,.task-editor>h2{margin:0}.form-section{display:grid;gap:14px;padding:0 0 18px;border-bottom:1px solid var(--zg-neutral-200)}.form-section h3{margin:0;padding:8px 12px;border-radius:8px;background:var(--zg-organisation-dark);color:#fff;font-size:13px;text-transform:uppercase}.form-grid{display:grid;gap:14px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.task-editor label{display:grid;gap:6px;color:var(--zg-neutral-700);font-size:13px;font-weight:700}.task-editor input,.task-editor select,.task-editor textarea{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--zg-neutral-300);border-radius:9px;background:#fff;color:var(--zg-neutral-900);font:inherit}.task-editor select[multiple]{min-height:76px}.task-editor textarea{resize:vertical}.task-editor input[type=color]{width:72px;padding:4px}.task-editor .check-label{display:flex;align-items:center;align-self:end;min-height:42px}.task-editor .check-label input{width:18px;min-height:18px}@media(max-width:620px){.form-grid.two{grid-template-columns:1fr}}