@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

:root {
    --primary: #3b82f6; --primary-dark: #1d4ed8; --sidebar: #0f172a;
    --success: #10b981; --panic: #0ea5e9; --mobile: #8b5cf6; --laptop: #f59e0b;
    --bg: #f8fafc; --text: #1e293b;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; background: var(--bg); display: flex; height: 100vh; overflow: hidden; }

/* PC SIDEBAR */
.sidebar { width: 280px; background: var(--sidebar); color: white; display: flex; flex-direction: column; transition: 0.3s; z-index: 1000; }
.sidebar-head { padding: 40px 30px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sidebar-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.sidebar-head span { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 2px; }

.nav-link { display: flex; align-items: center; padding: 16px 25px; color: #94a3b8; text-decoration: none; font-weight: 600; transition: 0.2s; border-left: 4px solid transparent; }
.nav-link i { width: 35px; font-size: 20px; }
.nav-link:hover { color: white; background: rgba(255,255,255,0.05); }

/* Colorful Active States */
.nav-link.active.sol { border-color: var(--success); color: var(--success); }
.nav-link.active.pan { border-color: var(--panic); color: var(--panic); }
.nav-link.active.mob { border-color: var(--mobile); color: var(--mobile); }
.nav-link.active.lap { border-color: var(--laptop); color: var(--laptop); }

/* WORKSPACE */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.top-bar { padding: 15px 35px; background: white; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e2e8f0; }

/* HD ZOOM VIEWER */
.viewer-frame { flex: 1; margin: 25px; background: #000; border-radius: 24px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
#hd-img { transition: transform 0.1s ease-out; cursor: grab; max-width: 95%; max-height: 95%; }
.controls { position: absolute; bottom: 25px; right: 25px; display: flex; gap: 10px; background: rgba(0,0,0,0.6); padding: 12px; border-radius: 15px; backdrop-filter: blur(10px); }
.c-btn { background: white; border: none; width: 45px; height: 45px; border-radius: 12px; cursor: pointer; font-size: 18px; transition: 0.2s; }
.c-btn:hover { transform: scale(1.1); background: var(--primary); color: white; }

/* MOBILE RESPONSIVE ADAPTATION */
@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; height: 75px; position: fixed; bottom: 0; flex-direction: row; justify-content: space-around; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); }
    .sidebar-head, .nav-link span { display: none; }
    .nav-link { border-left: none; border-top: 4px solid transparent; padding: 15px; }
    .main { height: calc(100vh - 75px); }
}

/* CARDS & AUTH */
.auth-bg { background: #0f172a; display: flex; height: 100vh; justify-content: center; align-items: center; padding: 20px; }
.card { background: white; padding: 45px; border-radius: 30px; width: 100%; max-width: 480px; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
input, select { width: 100%; padding: 15px; border: 2px solid #f1f5f9; border-radius: 15px; margin-bottom: 15px; background: #f8fafc; font-size: 16px; box-sizing: border-box; }
.btn-submit { width: 100%; padding: 18px; background: var(--primary); color: white; border: none; border-radius: 15px; font-weight: 700; cursor: pointer; transition: 0.3s; }