:root{--bg:#f3f7f5;--surface:#fff;--ink:#13251f;--muted:#66756e;--line:#dfe9e4;--primary:#0e7a5d;--primary-2:#0b5e48;--accent:#dff7ec;--shadow:0 12px 30px rgba(24,64,51,.08);--danger:#b42318;--warn:#9a6700;--success:#087443}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:var(--primary-2)}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh}.topbar{position:fixed;z-index:50;left:0;right:0;top:0;height:70px;background:linear-gradient(110deg,#0f2f26,#0e7a5d);color:#fff;display:flex;align-items:center;padding:0 18px;gap:14px;box-shadow:0 8px 24px rgba(7,51,39,.18)}.icon-btn{border:0;background:transparent;color:#fff;font-size:21px;width:40px;height:40px;border-radius:12px;cursor:pointer;display:grid;place-items:center}.icon-btn:hover{background:rgba(255,255,255,.12)}.brand-link{text-decoration:none;color:#fff;display:flex;align-items:center;gap:10px}.brand-mark{font-weight:950;font-size:22px;letter-spacing:1.2px}.brand-mark span{color:#a5f1d2}.brand-sub{font-size:10px;letter-spacing:2px;opacity:.72;border-left:1px solid rgba(255,255,255,.25);padding-left:10px}.topbar-spacer{flex:1}.top-user{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-size:13px}.top-user span{font-size:11px;opacity:.72;margin-top:3px}.logout-form{margin:0}.sidebar{position:fixed;z-index:45;left:0;top:70px;bottom:0;width:260px;background:#fff;border-right:1px solid var(--line);padding:18px 12px;overflow:auto;transition:transform .22s ease}.sidebar-label{padding:4px 12px 10px;font-size:10px;text-transform:uppercase;letter-spacing:1.6px;color:#8a9992;font-weight:800}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 13px;margin:4px 0;border-radius:12px;color:#385047;text-decoration:none;font-size:14px;font-weight:650}.nav-item:hover{background:#edf8f3;color:var(--primary-2)}.nav-item.active{background:linear-gradient(90deg,#dff7ec,#f2fbf7);color:var(--primary-2);box-shadow:inset 3px 0 0 var(--primary)}.nav-icon{width:22px;text-align:center;font-size:16px}.sidebar-footer{display:flex;align-items:center;gap:8px;margin:20px 8px 8px;padding:10px 12px;border:1px dashed #cfe1d9;border-radius:12px;color:#648077;font-size:11px}.status-dot{width:8px;height:8px;border-radius:50%;background:#19a974;box-shadow:0 0 0 4px #e6f8f0}.content{margin-left:260px;padding:94px 28px 34px;min-width:0}.nav-overlay{display:none}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}.page-head h1{margin:0;font-size:28px;letter-spacing:-.4px}.page-sub{margin:5px 0 0;color:var(--muted);font-size:13px}.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 15%,rgba(255,255,255,.14),transparent 28%),linear-gradient(135deg,#0e3328,#0e7a5d);color:#fff;border-radius:22px;padding:26px;margin-bottom:18px;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;bottom:-90px;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 25px rgba(255,255,255,.035),0 0 0 50px rgba(255,255,255,.02)}.hero h1{margin:0 0 8px;font-size:26px}.hero p{margin:0;max-width:680px;color:rgba(255,255,255,.78);line-height:1.6}.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.metric-card{position:relative;min-height:120px}.metric-card .metric-label{color:var(--muted);font-size:12px;font-weight:700}.metric{font-size:28px;font-weight:900;letter-spacing:-.8px;margin-top:8px}.metric-note{font-size:11px;color:#7c8b84;margin-top:7px}.card-icon{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:12px;background:var(--accent);color:var(--primary-2);display:grid;place-items:center;font-weight:900}.panel{margin-top:18px}.panel h2{margin:0 0 12px;font-size:18px}.table-wrap{overflow:auto;border-radius:12px}table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:660px}th,td{padding:12px;border-bottom:1px solid #edf2ef;text-align:left;vertical-align:middle;white-space:nowrap}th{background:#f7faf8;color:#50645c;font-size:11px;text-transform:uppercase;letter-spacing:.5px}tr:last-child td{border-bottom:0}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn{display:inline-flex;justify-content:center;align-items:center;gap:7px;min-height:42px;border:0;border-radius:11px;padding:10px 14px;background:var(--primary);color:#fff;text-decoration:none;cursor:pointer;font-weight:800;box-shadow:0 6px 14px rgba(14,122,93,.15)}.btn:hover{background:var(--primary-2)}.btn.secondary{background:#eef3f1;color:#345148;box-shadow:none}.btn.secondary:hover{background:#e3ece8}.btn.danger{background:#b42318}.btn.ghost{background:transparent;color:var(--primary-2);box-shadow:none}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field label{display:block;font-size:12px;font-weight:800;color:#41564d;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid #ccdcd4;border-radius:11px;background:#fff;color:var(--ink);outline:none}.field textarea{min-height:96px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:#78c9ad;box-shadow:0 0 0 4px #e7f7f0}.full{grid-column:1/-1}.muted{color:var(--muted);font-size:13px}.notice{padding:12px 14px;border-radius:12px;background:#fff7e6;border:1px solid #efd08b;color:#704b00}.flash{position:sticky;top:84px;z-index:30;padding:12px 14px;border-radius:12px;background:#e7fbf1;border:1px solid #b6e5d0;color:#14543f;margin-bottom:16px;box-shadow:var(--shadow);transition:opacity .3s}.flash.fade{opacity:.15}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef2f0;color:#55665f;font-size:11px;font-weight:850}.badge.success{background:#e6f7ef;color:#087443}.badge.warning{background:#fff4d8;color:#9a6700}.badge.danger{background:#fde8e7;color:#b42318}.badge.neutral{background:#eef2f0;color:#55665f}.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.quick{padding:15px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:#fff}.quick strong{display:block;color:#1d332b}.quick span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 80% 10%,rgba(165,241,210,.16),transparent 28%),linear-gradient(135deg,#0d2e24,#0e7a5d)}.loginbox{width:min(470px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 24px 60px rgba(0,0,0,.22)}.loginbox .brand-link{color:var(--ink)}.loginbox h1{margin:14px 0 7px}.center{text-align:center}.public{max-width:980px;margin:auto;padding:22px}.public .brand-link{color:var(--ink)}.member-card{margin:28px auto}.member-card h1{font-size:28px;margin-top:0}.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.empty{padding:30px;text-align:center;color:var(--muted);border:1px dashed #cbdad3;border-radius:14px}.mobile-bar{display:none}.search-box{display:flex;gap:8px;align-items:center}.small{font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{width:240px}.content{margin-left:240px;padding-left:20px;padding-right:20px}.split{grid-template-columns:1fr}}
@media(max-width:820px){.top-user{display:none}.sidebar{transform:translateX(-100%);box-shadow:18px 0 40px rgba(14,44,34,.18)}.content{margin-left:0;padding:88px 14px 24px}.nav-open .sidebar{transform:translateX(0)}.nav-open .nav-overlay{display:block;position:fixed;z-index:44;inset:70px 0 0;background:rgba(9,31,25,.42)}.grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.brand-sub{display:none}.page-head h1{font-size:22px}.panel,.card{padding:15px}}
@media(max-width:560px){.grid,.quick-grid{grid-template-columns:1fr}.topbar{padding:0 10px;height:64px}.sidebar{top:64px}.nav-open .nav-overlay{inset:64px 0 0}.content{padding-top:82px}.hero{padding:20px;border-radius:18px}.hero h1{font-size:22px}.metric{font-size:24px}.panel{border-radius:15px}.btn{width:100%}.actions .btn{width:auto}.page-head .btn{width:auto}.loginbox{padding:23px;border-radius:20px}.public{padding:12px}.member-card h1{font-size:22px}table{min-width:560px}.field input,.field select,.field textarea{min-height:44px}}