:root,:root[data-theme=light]{--app-bg: #f4f7fb;--content-bg: #ffffff;--panel-bg: #ffffff;--header-bg: #1e88e5;--header-text: #ffffff;--sidebar-bg: #f8fafc;--sidebar-hover-bg: #e3f2fd;--border-color: #d8e1ec;--text-color: #1f2a37;--text-muted: #5f6f82;--link-color: #1f2a37}:root[data-theme=dark]{--app-bg: #111827;--content-bg: #0f172a;--panel-bg: #0b1220;--header-bg: #0b1220;--header-text: #e5edf8;--sidebar-bg: #0b1220;--sidebar-hover-bg: #1e293b;--border-color: #253247;--text-color: #dce6f5;--text-muted: #9fb1c8;--link-color: #dce6f5}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--app-bg);color:var(--text-color);transition:background-color .2s ease,color .2s ease}.app{display:flex;flex-direction:column;height:100vh;font-family:Arial,sans-serif;background:var(--app-bg);color:var(--text-color)}.header{background-color:var(--header-bg);color:var(--header-text);padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border-color)}.header-actions{display:flex;align-items:center;gap:.8rem}.welcome{font-size:.9rem;opacity:.95;color:var(--header-text)}.logout-btn{border:1px solid var(--header-text);background:transparent;color:var(--header-text);border-radius:8px;padding:.4rem .72rem;cursor:pointer}.main{display:flex;flex:1;overflow:hidden}.main-login{display:block}.sidebar{width:200px;background-color:var(--sidebar-bg);border-right:1px solid var(--border-color)}.sidebar nav ul{list-style:none}.sidebar nav ul li{padding:.8rem 1rem;border-bottom:1px solid var(--border-color)}.sidebar nav ul li a{text-decoration:none;color:var(--link-color)}.nav-link{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.nav-tag{flex-shrink:0;padding:.1rem .4rem;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.72rem;font-weight:700}.sidebar nav ul li:hover{background-color:var(--sidebar-hover-bg)}.sidebar nav ul li:has(a.router-link-active){background-color:var(--sidebar-hover-bg);border-left:3px solid #1e88e5;padding-left:calc(1rem - 3px)}.sidebar nav ul li a.router-link-active{font-weight:600;color:#1e88e5}.content{flex:1;padding:2rem;overflow-y:auto;background:var(--content-bg)}.content-login{padding:0}@media(max-width:768px){.main{flex-direction:column}.sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border-color);position:relative}.sidebar:before,.sidebar:after{content:"";position:absolute;top:0;bottom:0;width:18px;pointer-events:none;z-index:1}.sidebar:before{left:0;background:linear-gradient(to right,var(--sidebar-bg),transparent)}.sidebar:after{right:0;background:linear-gradient(to left,var(--sidebar-bg),transparent)}.sidebar nav ul{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:0 6px}.sidebar nav ul::-webkit-scrollbar{display:none}.sidebar nav ul li{border-bottom:none;border-right:none;white-space:nowrap;padding:.65rem .3rem;scroll-snap-align:center}.sidebar nav ul li a{display:inline-block;padding:.4rem .85rem;border-radius:999px;font-size:14px;transition:all .15s ease}.sidebar nav ul li:has(a.router-link-active){border-left:none;background-color:transparent;padding-left:.3rem}.sidebar nav ul li a.router-link-active{background:#1e88e5;color:#fff!important;box-shadow:0 2px 6px #1e88e540}.header{flex-direction:row;align-items:center;padding:.7rem 1rem}.header h1{font-size:1.1rem}}