:root{--color-white:white;--color-gray-100:#f4f4f4;--color-gray-200:#ecf0f1;--color-gray-300:#e0e0e0;--color-gray-400:#ddd;--color-gray-500:#aaa;--color-gray-600:#555;--color-gray-650:#4a4a4a;--color-gray-700:#444;--color-gray-750:#3a3a3a;--color-gray-800:#333;--color-gray-820:#2d2c2c;--color-gray-850:#2a2a2a;--color-gray-870:#252525;--color-gray-900:#222;--color-gray-920:#1e1e1e;--color-gray-950:#1a1a1a;--color-black:black;--bg-dark-purple:#372f37;--bg-dark-blue:#11181f;--bg-blue-gray:#34495e;--color-blue-light:#4dbbff;--color-blue-300:#3498db;--color-blue-500:#007bff;--color-blue-700:#0056b3;--color-blue-muted:#5771b1;--color-blue-dark:#465f9e;--color-green-light:#7fff00;--color-green-500:#28a745;--color-green-basic:green;--color-red-light:tomato;--color-red-500:#dc143c;--color-red-muted:#b8615b;--color-red-basic:red;--color-purple-accent:#691e5a;--color-yellow:gold;--color-orange:orange;--color-orange-dark:#cc8400;--shadow-dark-light:#0003;--shadow-dark-heavy:#0000004d;--shadow-blue:#007bff80;--shadow-yellow:#ffd70080;--text-s300:.75rem;--text-s400:.875rem;--text-s500:.95rem;--text-base:1rem;--text-L100:1.1rem;--text-L110:1.125rem;--text-L120:1.15rem;--text-L200:1.2rem;--text-L300:1.25rem;--text-L400:1.5rem;--text-L500:2rem;--text-L600:3rem}*{box-sizing:border-box;margin:0;padding:0}body{height:100vh;font-family:sans-serif;display:flex;overflow:hidden}.sidebar{color:#fff;white-space:nowrap;background:linear-gradient(90deg,#465f9e,#5771b1);flex-direction:column;width:250px;padding:20px;transition:width .3s,padding .3s;display:flex;overflow:hidden}.sidebar.closed{width:0;padding:0}.sidebar h2{text-align:center;margin-bottom:30px}.close-btn{color:#fff;cursor:pointer;background:0 0;border:none;align-self:flex-end;width:auto;margin-bottom:20px;font-size:20px}.ham-btn{z-index:100;cursor:pointer;color:#11181f;background:0 0;border:none;font-size:24px;transition:opacity .3s;position:absolute;top:15px;left:15px}.ham-btn.hidden{opacity:0;pointer-events:none}.nav-btn{color:#ecf0f1;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:4px;margin-bottom:10px;padding:15px;font-size:16px;text-decoration:none;transition:background .3s}.nav-btn:hover{background-color:#34495e}.nav-btn.active{background-color:#3498db;font-weight:700}.content-area{background-color:var(--bg-dark-purple);color:var(--color-gray-300);flex-grow:1;position:relative}#app-container{background-color:#0000;width:100%;height:100%;padding:20px;overflow-y:auto}