@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --ink:#1B2430;
  --ink-soft:#5B6472;
  --primary:#1F6F5C;
  --primary-dark:#154F41;
  --primary-tint:#E4F1EE;
  --accent:#D98E3C;
  --accent-tint:#FBF0E1;
  --slate:#4C5B77;
  --slate-tint:#E9EDF5;
  --danger:#C4483A;
  --danger-tint:#FBEBE9;
  --line:#E4E7EB;
  --radius:14px;
  --shadow: 0 1px 2px rgba(16,24,32,.04), 0 8px 24px -14px rgba(16,24,32,.18);
}

*{box-sizing:border-box}
body{margin:0;font-family:'Inter',Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Sora',sans-serif;letter-spacing:-0.01em;margin:0 0 4px}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- LOGIN ---------- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#12332B 0%,#1F6F5C 55%,#2C8C74 100%);padding:20px}
.login-card{background:var(--surface);padding:36px 32px;border-radius:20px;width:340px;max-width:100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
.login-badge{width:48px;height:48px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;margin-bottom:16px}
.login-card h2{font-size:22px}
.login-card .muted{color:var(--ink-soft);margin:0 0 20px;font-size:14px}
.login-card input{width:100%;padding:12px 14px;margin:6px 0;border:1.5px solid var(--line);border-radius:10px;box-sizing:border-box;font-size:15px;font-family:inherit}
.login-card input:focus{border-color:var(--primary)}
.login-card button{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:10px;cursor:pointer;margin-top:10px;font-weight:600;font-size:15px}
.login-card button:hover{background:var(--primary-dark)}
.login-card .hint{font-size:12px;color:var(--ink-soft);margin-top:16px;background:var(--bg);padding:10px;border-radius:8px}
.error{color:var(--danger);font-size:13px;min-height:16px;margin:4px 0 0}

/* ---------- APP SHELL ---------- */
.app{min-height:100vh}
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.topbar-left{display:flex;align-items:center;gap:10px}
.brand-badge{width:36px;height:36px;border-radius:10px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:14px}
.brand-name{font-family:'Sora',sans-serif;font-weight:700;font-size:16px}
.page-title{font-size:13px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace}
.topbar-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.icon-btn:hover{background:var(--bg)}
.user-chip{display:none;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);padding:6px 10px;border-radius:20px;background:var(--bg)}
@media(min-width:640px){.user-chip{display:flex}}

/* ---------- MENU OVERLAY (launcher) ---------- */
.menu-overlay{position:fixed;inset:0;background:rgba(17,24,32,.55);backdrop-filter:blur(2px);z-index:40;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:720px){.menu-overlay{align-items:center}}
.menu-sheet{background:var(--surface);width:100%;max-width:640px;border-radius:20px 20px 0 0;padding:20px;max-height:85vh;overflow-y:auto}
@media(min-width:720px){.menu-sheet{border-radius:20px}}
.menu-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:480px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.menu-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font-family:inherit}
.menu-tile:hover{border-color:var(--primary);background:var(--primary-tint)}
.menu-tile.active{border-color:var(--primary);background:var(--primary-tint)}
.menu-tile-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.menu-tile-label{font-weight:600;font-size:14px;color:var(--ink)}
.tile-teal{background:var(--primary-tint);color:var(--primary-dark)}
.tile-amber{background:var(--accent-tint);color:#8A5A1E}
.tile-slate{background:var(--slate-tint);color:var(--slate)}
.tile-danger{background:var(--danger-tint);color:var(--danger)}
.menu-logout{margin-top:16px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--danger);font-weight:600;cursor:pointer}

/* ---------- MAIN ---------- */
.main{padding:20px;max-width:1100px;margin:0 auto}
.page{display:none}
.page.active{display:block}
.card{background:var(--surface);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow);border:1px solid var(--line)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--surface);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line)}
.kpi b{display:block;font-size:12px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.kpi span{font-family:'Sora',sans-serif;font-size:24px;font-weight:700}

.chart{height:180px;background:var(--primary-tint);border-radius:10px;display:flex;align-items:flex-end;gap:4px;padding:8px;box-sizing:border-box}
.chart .bar{background:var(--primary);border-radius:4px 4px 0 0;flex:1;min-width:4px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:'Sora',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);text-align:left;padding:10px;border-bottom:1.5px solid var(--line)}
td{padding:12px 10px;border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:13px}
tr:last-child td{border-bottom:none}

input,select{padding:10px 12px;width:100%;margin:6px 0;box-sizing:border-box;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;background:var(--surface)}
input:focus,select:focus{border-color:var(--primary)}

button{padding:10px 16px;background:var(--primary);color:#fff;border:none;border-radius:10px;cursor:pointer;margin-right:6px;font-weight:600;font-size:14px;font-family:inherit}
button:hover{background:var(--primary-dark)}
button.danger{background:var(--danger)}
button.danger:hover{background:#a63a2f}
button.secondary{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
button.secondary:hover{background:var(--bg)}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;font-family:'Inter',sans-serif}
.badge-active{background:var(--primary-tint);color:var(--primary-dark)}
.badge-inactive{background:var(--slate-tint);color:var(--slate)}