:root{
  --green:#06cf13;--green-dark:#04a90f;--green-soft:#eaffec;--purple:#ac1aab;--purple-soft:#faeafa;
  --ink:#172018;--muted:#6e776f;--line:#e7ebe7;--bg:#f6f8f6;--white:#fff;--danger:#d64242;
  --shadow:0 10px 30px rgba(25,45,27,.07);--radius:18px;--sidebar:286px;
}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;background:var(--bg)}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.no-scroll{overflow:hidden}
/* LOGIN */
.login-page{min-height:100vh;background:#fff}.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(440px,.95fr)}.login-visual{position:relative;overflow:hidden;background:linear-gradient(135deg,#03be10 0%,#07db16 62%,#39ed45 100%);display:flex;align-items:center;padding:8vw}.visual-pattern{position:absolute;inset:0;background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.23) 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,rgba(172,26,171,.16) 0 130px,transparent 131px);background-size:34px 34px,auto;opacity:.9}.visual-content{position:relative;max-width:570px}.login-logo{width:170px;height:105px;object-fit:contain;background:white;border-radius:18px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.12);margin-bottom:32px}.eyebrow{display:inline-block;font-size:12px;letter-spacing:.16em;font-weight:800}.visual-content .eyebrow{color:#06440a}.visual-content h1{font-size:clamp(58px,6vw,96px);line-height:.88;margin:16px 0 26px;letter-spacing:-.06em}.visual-content p{max-width:520px;font-size:18px;line-height:1.65;color:#164c1a}.login-panel{display:flex;align-items:center;justify-content:center;padding:50px;background:#fff}.login-card{width:min(440px,100%)}.login-card-head{display:flex;align-items:center;gap:16px;margin-bottom:34px}.login-mark{width:54px;height:54px;border-radius:16px;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:900}.login-card-head span{font-size:13px;color:var(--muted)}.login-card-head h2{margin:3px 0 0;font-size:30px}.field-label{display:block;font-size:13px;font-weight:750;margin:18px 0 8px}.input{width:100%;border:1px solid #dfe5df;border-radius:12px;padding:13px 14px;background:#fff;outline:none;transition:.2s}.input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(6,207,19,.1)}.password-field{position:relative}.password-field .input{padding-right:75px}.password-field button{position:absolute;right:10px;top:8px;border:0;background:transparent;color:var(--purple);font-weight:750;cursor:pointer;padding:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:11px;padding:12px 16px;font-weight:800;cursor:pointer}.btn-primary{background:var(--green);color:#08370b;box-shadow:0 8px 18px rgba(6,207,19,.18)}.btn-primary:hover{background:#05bd12}.btn-light{background:#f0f4f0;color:#334034}.btn-block{width:100%;margin-top:24px}.login-help{text-align:center;color:#8a928b;font-size:12px;margin-top:18px}.alert{border-radius:12px;padding:12px 14px;margin:12px 0;font-size:13px}.alert.error{background:#fff0f0;color:#a22727}.alert.success{background:#ecfff0;color:#097a12}.alert.warning{background:#fff9e5;color:#755900;border:1px solid #ffe58c}
/* APP */
.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);background:#fff;border-right:1px solid var(--line);z-index:50;display:flex;flex-direction:column}.sidebar-brand{height:92px;display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line)}.brand-logo-wrap{width:74px;height:60px;display:grid;place-items:center;border-radius:14px;background:#fff;overflow:hidden}.brand-logo{max-width:100%;max-height:100%;object-fit:contain}.brand-copy{display:flex;flex-direction:column}.brand-copy strong{font-size:15px}.brand-copy span{font-size:11px;color:var(--muted);margin-top:3px}.sidebar-nav{padding:14px 10px;overflow:auto;flex:1}.nav-group{margin-bottom:5px}.nav-group-toggle{width:100%;border:0;background:transparent;display:grid;grid-template-columns:28px 28px 1fr 18px;align-items:center;gap:5px;border-radius:12px;padding:10px 9px;color:#526053;cursor:pointer;text-align:left}.nav-group-toggle:hover,.nav-group.active>.nav-group-toggle{background:var(--green-soft);color:#124e16}.nav-number{font-size:10px;color:#9aa39a;font-weight:800}.nav-icon{font-size:17px;text-align:center}.nav-title{font-size:13px;font-weight:750;line-height:1.25}.nav-chevron{font-size:14px;transition:.2s}.nav-group.open .nav-chevron{transform:rotate(180deg)}.nav-submenu{display:none;padding:4px 0 7px 61px}.nav-group.open .nav-submenu{display:block}.nav-subitem{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.35;padding:8px 8px 8px 0;color:#687369;border-radius:8px}.nav-subitem span{width:5px;height:5px;border-radius:50%;background:#bdc5bd;margin-top:5px;flex:0 0 auto}.nav-subitem:hover,.nav-subitem.active{color:#103d13;font-weight:750}.nav-subitem.active span{background:var(--green)}.sidebar-bottom{border-top:1px solid var(--line);padding:14px}.mini-user{display:flex;align-items:center;gap:10px;padding:7px}.avatar-sm,.avatar{border-radius:50%;display:grid;place-items:center;font-weight:900}.avatar-sm{width:34px;height:34px;background:var(--purple);color:#fff;font-size:12px}.mini-user div:nth-child(2){display:flex;flex-direction:column;min-width:0}.mini-user strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-user span{font-size:10px;color:var(--muted)}.logout-link{display:block;margin-top:5px;padding:8px 9px;font-size:11px;color:#9a3e3e}.app-main{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}.topbar-left,.topbar-right,.top-user{display:flex;align-items:center}.topbar-left{gap:13px}.breadcrumb{display:flex;gap:9px;align-items:center;font-size:12px;color:#8c958d}.breadcrumb strong{color:#344035}.topbar-right{gap:12px}.icon-button,.mobile-menu{border:1px solid var(--line);background:#fff;border-radius:11px;width:38px;height:38px;cursor:pointer}.mobile-menu{display:none}.top-user{gap:10px;border-left:1px solid var(--line);padding-left:14px}.top-user-copy{text-align:right;display:flex;flex-direction:column}.top-user-copy strong{font-size:12px}.top-user-copy span{font-size:10px;color:var(--muted)}.avatar{width:38px;height:38px;background:#133e16;color:#fff;font-size:13px}.content{padding:28px;max-width:1600px;width:100%;margin:0 auto;flex:1}.footer{padding:0 28px 24px;color:#9aa29a;font-size:11px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-heading h1{font-size:32px;letter-spacing:-.03em;margin:7px 0 5px}.page-heading p{margin:0;color:var(--muted);font-size:14px}.eyebrow.green{color:var(--green-dark)}.month-filter{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:8px 10px;border-radius:13px}.month-filter label{font-size:11px;font-weight:800;color:#687268}.month-filter input{border:0;outline:0;background:#f4f7f4;border-radius:8px;padding:8px 10px;color:#344034}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.metric-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-height:210px;box-shadow:0 3px 10px rgba(20,34,21,.025);position:relative;overflow:hidden}.metric-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-30px;bottom:-35px;background:#f4f8f4}.metric-satisfaction:after{background:var(--green-soft)}.metric-top{display:flex;justify-content:space-between;align-items:center}.metric-icon{width:40px;height:40px;border-radius:12px;background:#f1f6f1;display:grid;place-items:center;font-size:19px;color:#365237}.metric-chip{font-size:9px;letter-spacing:.08em;font-weight:900;border-radius:999px;background:var(--green-soft);color:#14711a;padding:5px 8px}.metric-chip.purple{background:var(--purple-soft);color:#8d198c}.metric-value{font-size:42px;line-height:1;margin:24px 0 8px;font-weight:900;letter-spacing:-.05em}.metric-value small{font-size:22px}.metric-card h3{font-size:14px;margin:0 0 6px}.metric-card p{font-size:11px;color:var(--muted);margin:0}.metric-foot{font-size:10px;color:#23802a;font-weight:750;margin-top:14px}.metric-foot.down{color:#b54a4a}.dashboard-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.72fr);gap:16px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 10px rgba(20,34,21,.025);padding:20px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.panel-head.compact{margin-bottom:10px}.panel-head h2{font-size:18px;margin:4px 0 4px}.panel-head p{font-size:12px;color:var(--muted);margin:0}.panel-kicker{font-size:9px;letter-spacing:.12em;color:var(--purple);font-weight:900}.quick-slider{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);overflow-x:auto;gap:12px;padding-bottom:6px;scroll-snap-type:x mandatory}.quick-card{position:relative;border:1px solid var(--line);border-radius:15px;background:#fbfdfb;min-height:140px;scroll-snap-align:start}.quick-card>a{height:100%;display:flex;flex-direction:column;padding:17px}.quick-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--green-soft);font-size:18px;margin-bottom:17px}.quick-card strong{font-size:13px;max-width:145px}.quick-card small{font-size:10px;color:var(--muted);margin-top:auto;padding-top:12px}.favorite-remove{position:absolute;right:8px;top:8px}.favorite-remove button{width:25px;height:25px;border:0;border-radius:50%;background:#fff;color:#9aa29a;cursor:pointer}.favorite-remove button:hover{background:#fee;color:#a33}.empty-state{text-align:center;padding:30px 20px;background:#fafcfa;border:1px dashed #cfd7cf;border-radius:14px}.empty-state span{font-size:30px;color:var(--green)}.empty-state strong{display:block;font-size:14px;margin:8px}.empty-state p{font-size:12px;color:var(--muted);margin:0}.connection-list{display:flex;flex-direction:column}.connection-row{display:grid;grid-template-columns:12px 1fr 18px;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid #eef1ee}.connection-row:last-child{border:0}.connection-row div{display:flex;flex-direction:column}.connection-row strong{font-size:12px}.connection-row small{font-size:10px;color:var(--muted);margin-top:2px}.connection-row>b{font-size:12px;color:#819081}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.active{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.status-dot.pending{background:#d8b13d;box-shadow:0 0 0 4px #fff7df}
.drawer-overlay{position:fixed;inset:0;background:rgba(12,20,13,.35);z-index:70;opacity:0;visibility:hidden;transition:.2s}.drawer-overlay.open{opacity:1;visibility:visible}.drawer{position:fixed;z-index:80;right:0;top:0;bottom:0;width:min(480px,94vw);background:#fff;box-shadow:-20px 0 50px rgba(15,30,16,.14);transform:translateX(102%);transition:.25s;display:flex;flex-direction:column}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}.drawer-head h2{margin:4px 0 0}.drawer-head>button{width:34px;height:34px;border:0;border-radius:9px;background:#f2f5f2;font-size:20px;cursor:pointer}.drawer-search{padding:15px 18px}.drawer-links{overflow:auto;padding:0 12px 25px}.drawer-link button{width:100%;display:grid;grid-template-columns:42px 1fr 20px;gap:10px;align-items:center;border:0;background:#fff;text-align:left;padding:11px;border-radius:12px;cursor:pointer}.drawer-link button:hover{background:var(--green-soft)}.drawer-link-icon{width:36px;height:36px;border-radius:10px;background:#f2f6f2;display:grid;place-items:center}.drawer-link button>span:nth-child(2){display:flex;flex-direction:column}.drawer-link small{font-size:9px;color:#8b948c}.drawer-link strong{font-size:12px;margin-top:2px}.drawer-link b{color:var(--green-dark);font-size:18px}.module-placeholder{text-align:center;padding:54px 30px}.placeholder-icon{width:68px;height:68px;border-radius:20px;background:var(--green-soft);display:grid;place-items:center;font-size:30px;margin:0 auto 16px}.status-badge{display:inline-block;background:var(--purple-soft);color:#8c1b8b;font-size:10px;font-weight:800;padding:6px 9px;border-radius:999px}.module-placeholder h2{font-size:28px;margin:14px 0 8px}.module-placeholder>p{max-width:650px;margin:0 auto;color:var(--muted);font-size:13px;line-height:1.6}.route-box{max-width:650px;margin:20px auto;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f6f8f6;border-radius:12px;padding:12px 14px;text-align:left}.route-box span{font-size:10px;font-weight:900;text-transform:uppercase;color:#89928a}.route-box code{font-size:11px;color:#38543a;overflow-wrap:anywhere}.form-panel form{display:grid;gap:3px}.form-panel .btn{margin-top:18px}.form-panel.narrow{max-width:620px}.two-col-layout{display:grid;grid-template-columns:minmax(300px,.7fr) minmax(400px,1.3fr);gap:16px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{text-align:left;padding:12px 10px;border-bottom:1px solid #edf0ed;font-size:12px}.data-table th{font-size:10px;color:#7c877d;text-transform:uppercase;letter-spacing:.05em}.data-table td:first-child{display:flex;flex-direction:column}.data-table td small{color:var(--muted);margin-top:2px}.tag{font-size:10px;background:var(--purple-soft);color:#7d207d;border-radius:999px;padding:5px 8px}.status-pill{font-size:10px;background:var(--green-soft);color:#17751c;border-radius:999px;padding:5px 8px}.sidebar-backdrop{display:none}
@media(max-width:1180px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-columns{grid-template-columns:1fr}.two-col-layout{grid-template-columns:1fr}}
@media(max-width:880px){.login-layout{grid-template-columns:1fr}.login-visual{min-height:300px;padding:45px}.visual-content h1{font-size:54px}.visual-content p{font-size:15px}.login-logo{width:130px;height:80px;margin-bottom:18px}.login-panel{padding:38px 24px}.sidebar{transform:translateX(-102%);transition:.25s}.sidebar.mobile-open{transform:translateX(0)}.app-main{margin-left:0}.mobile-menu{display:block}.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:45;opacity:0;visibility:hidden}.sidebar-backdrop.show{opacity:1;visibility:visible}.topbar{padding:0 16px}.content{padding:20px}.top-user-copy{display:none}.breadcrumb span,.breadcrumb b{display:none}}
@media(max-width:600px){.page-heading{align-items:flex-start;flex-direction:column}.month-filter{width:100%;justify-content:space-between}.metric-grid{grid-template-columns:1fr}.metric-card{min-height:180px}.dashboard-heading h1,.page-heading h1{font-size:27px}.panel-head{flex-direction:column}.panel-head .btn{width:100%}.quick-slider{grid-auto-columns:78%}.topbar-right .icon-button{display:none}.visual-content p{display:none}.login-visual{min-height:240px}.visual-content h1{font-size:45px}.login-panel{align-items:flex-start}.route-box{align-items:flex-start;flex-direction:column}}