:root{--frosted-mint:#d8f3dc;--mint-leaf:#74c69d;--sea-green:#40916c;--evergreen:#081c15;--evergreen-dark:#05130e;--evergreen-surface:#0e261d;--evergreen-card:#0e261dd9;--evergreen-border:#74c69d26;--mint-leaf-subtle:#74c69d14;--mint-leaf-border:#74c69d40;--sea-green-hover:#357a5b;--color-alert-warning:#e9c46a;--color-alert-danger:#e76f51;--color-alert-info:#74c69d;--bg-app: var(--frosted-mint);--bg-surface: var(--frosted-mint);--bg-card: var(--frosted-mint);--border-color: var(--frosted-mint);--color-primary:var(--sea-green);--color-accent:var(--mint-leaf);--color-accent-light:var(--frosted-mint);--color-text-title:var(--evergreen);--color-text-subtitle:var(--mint-leaf);--color-text-body:#c5e3cc;--color-text-muted:#8db89a;--color-text-inverse:var(--evergreen);--font-title:"Oswald", sans-serif;--font-subtitle:"Inter", sans-serif;--font-body:"Noto Serif", serif;--font-ui:"Inter", sans-serif;font-family:var(--font-body);color:var(--color-text-body);background-color:var(--bg-app)}h1,h2,h3,.font-title{font-family:var(--font-title);text-transform:uppercase;letter-spacing:1px;color:var(--color-text-title)}h4,h5,h6,.font-subtitle{font-family:var(--font-subtitle);color:var(--color-text-subtitle);font-weight:600}p,body,.font-body{font-family:var(--font-body);color:gray;line-height:1.6}button,input,select,textarea,.font-ui{font-family:var(--font-ui)}*{box-sizing:border-box}body{background-color:var(--bg-app);color:var(--color-text-body);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;margin:0;padding:0}#root{flex-direction:column;width:100%;min-height:100vh;margin:0;padding:0;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--evergreen-dark)}::-webkit-scrollbar-thumb{background:var(--sea-green);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--mint-leaf)}.sidebar{background:var(--evergreen);border-right:1px solid var(--evergreen-border);z-index:100;flex-direction:column;width:250px;min-height:100vh;padding:0;display:flex;position:fixed;top:0;left:0;box-shadow:2px 0 16px #00000040}.sidebar__brand{border-bottom:1px solid var(--evergreen-border);justify-content:center;align-items:center;padding:24px 20px 20px;display:flex}.sidebar__logo-img{width:auto;height:36px;transition:opacity .2s}.sidebar__logo-img:hover{opacity:.9}.sidebar__nav{flex-direction:column;flex:1;gap:4px;padding:20px 12px;display:flex}.sidebar__link{color:var(--color-text-muted);font-family:var(--font-subtitle);letter-spacing:.2px;border-radius:8px;align-items:center;gap:12px;padding:11px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar__link:hover{background:var(--mint-leaf-subtle);color:var(--frosted-mint);transform:translate(2px)}.sidebar__link--active{color:var(--frosted-mint);border-left:3px solid var(--sea-green);background:#40916c40;padding-left:13px;font-weight:600}.sidebar__icon{text-align:center;width:20px;color:var(--mint-leaf);font-size:15px}.sidebar__link--active .sidebar__icon{color:var(--frosted-mint)}.sidebar__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sidebar__footer{border-top:1px solid var(--evergreen-border);padding:16px 20px}.sidebar__logout_btn{font-family:var(--font-subtitle);letter-spacing:.2px;color:#e64a4ae6;border-radius:8px;justify-content:center;padding:11px 16px;font-size:14px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.sidebar__logout_btn:hover{background:var(--mint-leaf-subtle);color:var(--frosted-mint);transform:translate(2px)}.sidebar__status{font-family:var(--font-ui);color:var(--mint-leaf);opacity:.8;align-items:center;gap:6px;font-size:12px;display:flex}.topbar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--evergreen-border);z-index:50;background:#081c15eb;justify-content:space-between;align-items:center;height:64px;padding:0 32px;display:flex;position:sticky;top:0}.topbar__title{font-family:var(--font-title);color:var(--frosted-mint);letter-spacing:.8px;text-transform:uppercase;margin:0;font-size:20px;font-weight:500}.topbar__right{align-items:center;gap:20px;display:flex}.topbar__date{font-family:var(--font-subtitle);color:var(--color-text-muted);text-transform:capitalize;font-size:13px}.topbar__badge{font-family:var(--font-subtitle);letter-spacing:.5px;text-transform:uppercase;border-radius:6px;padding:5px 12px;font-size:11px;font-weight:600}.topbar__badge--ok{color:var(--frosted-mint);border:1px solid var(--sea-green);background:#40916c33}.topbar__badge--alert{color:var(--color-alert-warning);background:#e9c46a26;border:1px solid #e9c46a4d}.topbar__badge--critical{color:var(--color-alert-danger);background:#e76f5126;border:1px solid #e76f514d}.app-layout{background:var(--bg-app);min-height:100vh;display:flex}.app-layout__main{flex-direction:column;flex:1;min-height:100vh;margin-left:250px;display:flex}.app-layout__content{color:var(--color-text-body);font-family:var(--font-body);flex:1;padding:32px 36px}.login{background:radial-gradient(circle at 50% 40%, #40916c14 0%, transparent 65%), var(--evergreen-dark);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login__card{background:var(--evergreen-surface);border:1px solid var(--evergreen-border);text-align:center;border-radius:14px;width:100%;max-width:400px;padding:44px 38px;box-shadow:0 16px 40px #00000059}.login__brand{justify-content:center;margin-bottom:14px;display:flex}.login__logo-img{width:auto;height:44px}.login__subtitle{font-family:var(--font-subtitle);color:var(--mint-leaf);letter-spacing:.3px;opacity:.9;margin:0 0 32px;font-size:13px}.login__form{flex-direction:column;gap:18px;display:flex}.login__field{text-align:left;flex-direction:column;gap:6px;display:flex}.login__field label{font-family:var(--font-subtitle);letter-spacing:.5px;color:var(--mint-leaf);text-transform:uppercase;font-size:12px;font-weight:600}.login__field input{border:1px solid var(--evergreen-border);color:var(--frosted-mint);font-family:var(--font-ui);background:#081c1599;border-radius:8px;outline:none;padding:12px 14px;font-size:14px;transition:border-color .2s,box-shadow .2s}.login__field input::placeholder{color:var(--color-text-muted);opacity:.6}.login__field input:focus{border-color:var(--sea-green);box-shadow:0 0 0 3px #40916c33}.login__btn{background:var(--sea-green);color:#fff;font-family:var(--font-subtitle);letter-spacing:.5px;text-align:center;border-radius:8px;margin-top:6px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .2s,transform .1s;display:block}.login__btn:hover{background:var(--sea-green-hover);transform:translateY(-1px)}.login__register_btn{color:var(--frosted-mint);border:1px solid var(--evergreen-border);font-family:var(--font-subtitle);text-align:center;background:0 0;border-radius:8px;padding:11px;font-size:14px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s;display:block}.login__register_btn:hover{background:var(--mint-leaf-subtle);border-color:var(--mint-leaf)}.login__version{font-family:var(--font-ui);color:var(--color-text-muted);opacity:.7;margin-top:28px;font-size:11px}.register{background:radial-gradient(circle at 50% 40%, #40916c14 0%, transparent 65%), var(--evergreen-dark);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.register__card{background:var(--evergreen-surface);border:1px solid var(--evergreen-border);text-align:center;border-radius:14px;width:100%;max-width:420px;padding:44px 38px;box-shadow:0 16px 40px #00000059}.register__brand{justify-content:center;margin-bottom:14px;display:flex}.register__logo-img{width:auto;height:44px}.register__subtitle{font-family:var(--font-subtitle);color:var(--mint-leaf);letter-spacing:.3px;opacity:.9;margin:0 0 28px;font-size:13px}.register__form{flex-direction:column;gap:16px;display:flex}.register__field{text-align:left;flex-direction:column;gap:6px;display:flex}.register__field label{font-family:var(--font-subtitle);letter-spacing:.5px;color:var(--mint-leaf);text-transform:uppercase;font-size:12px;font-weight:600}.register__field input{border:1px solid var(--evergreen-border);color:var(--frosted-mint);font-family:var(--font-ui);background:#081c1599;border-radius:8px;outline:none;padding:11px 14px;font-size:14px;transition:border-color .2s,box-shadow .2s}.register__field input::placeholder{color:var(--color-text-muted);opacity:.6}.register__field input:focus{border-color:var(--sea-green);box-shadow:0 0 0 3px #40916c33}.register__btn{background:var(--sea-green);color:#fff;font-family:var(--font-subtitle);letter-spacing:.5px;text-align:center;border-radius:8px;margin-top:6px;padding:12px;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .2s,transform .1s;display:block}.register__btn:hover{background:var(--sea-green-hover);transform:translateY(-1px)}.register__back_btn{color:var(--frosted-mint);border:1px solid var(--evergreen-border);font-family:var(--font-subtitle);text-align:center;background:0 0;border-radius:8px;padding:11px;font-size:14px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s;display:block}.register__back_btn:hover{background:var(--mint-leaf-subtle);border-color:var(--mint-leaf)}.register__version{font-family:var(--font-ui);color:var(--color-text-muted);opacity:.7;margin-top:28px;font-size:11px}.dashboard{flex-direction:column;gap:32px;max-width:1200px;margin:0 auto;display:flex}.dashboard__header{border-bottom:1px solid var(--evergreen-border);justify-content:space-between;align-items:flex-start;padding-bottom:16px;display:flex}.dashboard__title{font-family:var(--font-title);color:var(--evergreen);letter-spacing:1px;margin:0 0 6px;font-size:26px;font-weight:600}.dashboard__subtitle{font-family:var(--font-body);color:var(--color-text-muted);margin:0;font-size:14px}.dashboard__section{flex-direction:column;gap:16px;display:flex}.dashboard__section-title{font-family:var(--font-title);color:var(--mint-leaf);letter-spacing:.8px;text-transform:uppercase;margin:0;font-size:16px;font-weight:500}.circular-card{background:var(--evergreen-surface);border:1px solid var(--evergreen-border);border-radius:14px;justify-content:space-around;align-items:center;gap:48px;padding:32px 40px;display:flex;box-shadow:0 12px 32px #00000040}.circular-card__gauge-container{flex-shrink:0;justify-content:center;align-items:center;width:200px;height:200px;display:flex;position:relative}.circular-gauge__svg{width:100%;height:100%;transform:rotate(-90deg)}.circular-gauge__bg{fill:none;stroke:#74c69d1a;stroke-width:14px}.circular-gauge__fill{fill:none;stroke:var(--sea-green);stroke-width:14px;stroke-linecap:round;transition:stroke-dashoffset 1s ease-in-out}.circular-gauge__content{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.circular-gauge__value{font-family:var(--font-title);color:var(--frosted-mint);font-size:40px;font-weight:700;line-height:1}.circular-gauge__unit{font-family:var(--font-ui);color:var(--mint-leaf);text-transform:uppercase;margin-top:2px;font-size:13px;font-weight:600}.circular-gauge__percent{font-family:var(--font-ui);color:var(--color-text-muted);background:#74c69d1f;border-radius:999px;margin-top:6px;padding:2px 8px;font-size:12px}.circular-card__summary{flex:1;grid-template-columns:repeat(3,1fr);gap:24px;max-width:600px;display:grid}.summary-box{border:1px solid var(--evergreen-border);text-align:center;background:#081c1599;border-radius:12px;flex-direction:column;gap:6px;padding:18px 20px;display:flex}.summary-box__label{font-family:var(--font-ui);color:var(--mint-leaf);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.summary-box__value{font-family:var(--font-title);color:var(--frosted-mint);font-size:26px;line-height:1.1}.summary-box__value--remaining{color:var(--mint-leaf)}.summary-box__unit{font-family:var(--font-ui);color:var(--color-text-muted);font-size:13px;font-weight:400}.dashboard__grid-3{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.dashboard__grid-2{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}@media (width<=900px){.dashboard__grid-3,.dashboard__grid-2{grid-template-columns:1fr}.circular-card{text-align:center;flex-direction:column;gap:28px}.circular-card__summary{grid-template-columns:1fr;width:100%}}.macro-card{background:var(--evergreen-surface);border:1px solid var(--evergreen-border);border-radius:12px;flex-direction:column;gap:14px;padding:20px 22px;transition:border-color .2s,transform .15s;display:flex;box-shadow:0 8px 24px #0003}.macro-card:hover{border-color:var(--mint-leaf-border);transform:translateY(-2px)}.macro-card__header{justify-content:space-between;align-items:center;display:flex}.macro-card__title{font-family:var(--font-subtitle);color:var(--frosted-mint);font-size:14px;font-weight:600}.macro-card__percentage{font-family:var(--font-ui);color:var(--mint-leaf);background:var(--mint-leaf-subtle);border:1px solid var(--evergreen-border);border-radius:4px;padding:3px 8px;font-size:12px;font-weight:600}.macro-card__values{justify-content:space-between;align-items:baseline;margin-bottom:2px;display:flex}.macro-card__current{font-family:var(--font-subtitle);color:var(--frosted-mint);font-size:22px;font-weight:700}.macro-card__unit{color:var(--mint-leaf);font-size:14px;font-weight:500}.macro-card__target{font-family:var(--font-ui);color:var(--color-text-muted);font-size:12px}.macro-card__bar-track{background:#74c69d1a;border-radius:999px;width:100%;height:10px;position:relative;overflow:hidden}.macro-card__bar-fill{background:linear-gradient(90deg, var(--sea-green) 0%, var(--mint-leaf) 100%);border-radius:999px;height:100%;transition:width .8s ease-in-out}
