/* WebOS Premium - Refined Design */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0f0f14;--surface:#1a1a22;--surface2:#24242e;--surface3:#2e2e3a;
  --border:rgba(255,255,255,0.06);--border-hover:rgba(255,255,255,0.12);
  --text:#e8e6e3;--text-secondary:#9a9590;--text-muted:#6b6560;
  --accent:#6c9fff;--accent-dim:rgba(108,159,255,0.12);
  --gold:#d4a853;--success:#4ade80;--warning:#fbbf24;--danger:#f87171;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --radius:12px;--radius-sm:8px;--radius-xs:4px;
  --shadow:0 8px 32px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.2);
}
html,body{height:100%;overflow:hidden;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
/* Desktop Background */
.desktop{position:fixed;inset:0;background:radial-gradient(ellipse at 30% 20%,#1a1a2e 0%,#0f0f14 50%,#0a0a10 100%);display:flex;flex-direction:column}
.desktop::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.desktop-icons{flex:1;display:grid;grid-template-columns:repeat(auto-fill,88px);grid-template-rows:repeat(auto-fill,96px);gap:4px;padding:16px;align-content:start;position:relative;z-index:1}
.desktop-icon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;user-select:none}
.desktop-icon:hover{background:rgba(255,255,255,0.04)}
.desktop-icon:active{background:rgba(255,255,255,0.06);transform:scale(0.96)}
.desktop-icon .icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--shadow-sm);transition:transform 0.15s}
.desktop-icon:hover .icon{transform:translateY(-2px)}
.desktop-icon .label{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.3;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Taskbar */
.taskbar{height:52px;background:rgba(26,26,34,0.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;z-index:1000;position:relative}
.taskbar-start{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;font-size:18px;color:var(--text-secondary)}
.taskbar-start:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.taskbar-apps{display:flex;gap:2px;flex:1;padding:0 8px;overflow-x:auto;align-items:center}
.taskbar-apps::-webkit-scrollbar{display:none}
.taskbar-app{height:36px;padding:0 14px;border-radius:var(--radius-xs);display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--text-secondary);transition:all 0.15s;white-space:nowrap;font-weight:500}
.taskbar-app:hover{background:rgba(255,255,255,0.04);color:var(--text)}
.taskbar-app.active{background:rgba(108,159,255,0.1);color:var(--accent);border-bottom:2px solid var(--accent)}
.taskbar-app .indicator{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.taskbar-tray{display:flex;align-items:center;gap:4px;padding:0 4px}
.tray-item{font-size:12px;color:var(--text-muted);cursor:pointer;padding:6px 10px;border-radius:var(--radius-xs);transition:all 0.15s}
.tray-item:hover{background:rgba(255,255,255,0.04);color:var(--text-secondary)}
/* Desktop Icons */
.desktop-icon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;user-select:none}
.desktop-icon:hover{background:rgba(255,255,255,0.04)}
.desktop-icon:active{background:rgba(255,255,255,0.06);transform:scale(0.96)}
.desktop-icon .icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:var(--shadow-sm);transition:transform 0.2s}
.desktop-icon:hover .icon{transform:translateY(-2px);box-shadow:var(--shadow)}
.desktop-icon .label{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.3;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Windows */
.window{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:400px;min-height:300px;overflow:hidden;transition:box-shadow 0.2s}
.window.maximized{inset:0;border-radius:0}
.window.minimized{display:none}
.window.focused{box-shadow:0 12px 48px rgba(0,0,0,0.4);z-index:100}
.window-header{height:42px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;cursor:default;user-select:none}
.window-title{flex:1;font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.window-controls{display:flex;gap:8px}
.window-btn{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:all 0.15s;opacity:0.8}
.window-btn:hover{opacity:1;transform:scale(1.1)}
.window-btn.close{background:var(--danger)}
.window-btn.minimize{background:var(--warning)}
.window-btn.maximize{background:var(--success)}
.window-body{flex:1;overflow:auto;background:var(--bg)}
/* Context Menu */
.context-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;min-width:200px;z-index:2000;box-shadow:var(--shadow)}
.context-menu .item{padding:8px 14px;font-size:13px;cursor:pointer;border-radius:var(--radius-xs);display:flex;align-items:center;gap:10px;color:var(--text-secondary);transition:all 0.1s}
.context-menu .item:hover{background:var(--accent-dim);color:var(--text)}
.context-menu .separator{height:1px;background:var(--border);margin:4px 8px}
/* Lock Screen */
.lock-screen{position:fixed;inset:0;background:linear-gradient(135deg,#0f0f14 0%,#1a1a2e 50%,#0f0f14 100%);z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white}
.lock-time{font-size:80px;font-weight:200;letter-spacing:-3px;font-family:var(--font)}
.lock-date{font-size:18px;color:var(--text-muted);margin-top:8px;font-weight:300}
.lock-input{margin-top:48px;display:flex;gap:12px;align-items:center}
.lock-input input{padding:14px 24px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);color:white;font-size:16px;width:220px;text-align:center;backdrop-filter:blur(10px)}
.lock-input input::placeholder{color:rgba(255,255,255,0.3)}
.lock-input button{padding:14px 28px;background:var(--accent);border:none;border-radius:var(--radius);color:white;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s}
.lock-input button:hover{background:#5a8de8;transform:translateY(-1px)}
/* Notification */
.notification{position:fixed;top:24px;right:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;max-width:320px;z-index:3000;box-shadow:var(--shadow);transform:translateX(120%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(20px)}
.notification.show{transform:translateX(0)}
.notification .title{font-weight:600;margin-bottom:4px;font-size:13px}
.notification .body{font-size:12px;color:var(--text-secondary);line-height:1.5}
/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}
/* App Components */
.app-toolbar{height:42px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:6px}
.app-toolbar button{padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius-xs);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all 0.15s;font-family:var(--font)}
.app-toolbar button:hover{background:rgba(255,255,255,0.04);color:var(--text);border-color:var(--border-hover)}
.app-toolbar button.active{background:var(--accent);color:white;border-color:var(--accent)}
/* Terminal */
.terminal{background:#0c0c10;color:#c9d1d9;font-family:'JetBrains Mono','Fira Code',monospace;font-size:13px;padding:16px;height:100%;overflow:auto;line-height:1.6}
.terminal .prompt{color:var(--accent)}
.terminal .output{white-space:pre-wrap}
.terminal input{background:transparent;border:none;color:#c9d1d9;font-family:inherit;font-size:inherit;width:100%;outline:none}
/* Calculator */
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:12px;height:100%;background:var(--bg)}
.calc button{padding:18px;border:none;border-radius:var(--radius-xs);font-size:18px;cursor:pointer;background:var(--surface2);color:var(--text);transition:all 0.1s;font-weight:300}
.calc button:hover{background:var(--surface3)}
.calc button.op{background:var(--accent);color:white;font-weight:500}
.calc button.op:hover{background:#5a8de8}
.calc .display{grid-column:span 4;padding:20px;text-align:right;font-size:36px;font-weight:200;background:var(--bg);border-radius:var(--radius-sm);margin-bottom:8px;letter-spacing:-1px}
/* File Manager */
.fm-sidebar{width:180px;background:var(--surface);border-right:1px solid var(--border);padding:8px}
.fm-sidebar .item{padding:8px 12px;border-radius:var(--radius-xs);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text-secondary);transition:all 0.15s}
.fm-sidebar .item:hover{background:rgba(255,255,255,0.03);color:var(--text)}
.fm-sidebar .item.active{background:var(--accent-dim);color:var(--accent)}
.fm-main{flex:1;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;align-content:start}
.fm-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s}
.fm-item:hover{background:rgba(255,255,255,0.03)}
.fm-item .icon{font-size:32px}
.fm-item .name{font-size:11px;text-align:center;color:var(--text-secondary);line-height:1.3}
/* Settings */
.settings-layout{display:flex;height:100%}
.settings-nav{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:8px}
.settings-nav .item{padding:10px 14px;border-radius:var(--radius-xs);font-size:13px;cursor:pointer;margin-bottom:2px;color:var(--text-secondary);transition:all 0.15s}
.settings-nav .item:hover{background:rgba(255,255,255,0.03)}
.settings-nav .item.active{background:var(--accent-dim);color:var(--accent)}
.settings-content{flex:1;padding:32px;overflow:auto}
.setting-group{margin-bottom:32px}
.setting-group h3{font-size:16px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:14px;font-weight:500}
.setting-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.setting-toggle{width:44px;height:24px;border-radius:12px;background:var(--surface3);cursor:pointer;position:relative;transition:background 0.2s}
.setting-toggle.on{background:var(--accent)}
.setting-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.setting-toggle.on::after{transform:translateX(20px)}
/* Notes */
.notes-layout{display:flex;height:100%}
.notes-sidebar{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:8px;overflow:auto}
.notes-sidebar .note-item{padding:10px 12px;border-radius:var(--radius-xs);cursor:pointer;margin-bottom:2px;font-size:13px;color:var(--text-secondary);transition:all 0.15s}
.notes-sidebar .note-item:hover{background:rgba(255,255,255,0.03)}
.notes-sidebar .note-item.active{background:var(--accent-dim);color:var(--accent)}
.notes-editor{flex:1;padding:20px}
.notes-editor textarea{width:100%;height:100%;background:transparent;border:none;color:var(--text);font-size:15px;resize:none;outline:none;line-height:1.8;font-family:var(--font)}
/* Weather */
.weather{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;text-align:center}
.weather .temp{font-size:72px;font-weight:200;letter-spacing:-2px}
.weather .desc{font-size:18px;color:var(--text-secondary);margin:8px 0;font-weight:300}
.weather .details{display:flex;gap:32px;margin-top:32px;font-size:13px;color:var(--text-muted)}
/* Calendar */
.calendar{padding:20px}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal-header .month{font-size:20px;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{padding:10px;text-align:center;font-size:13px;border-radius:var(--radius-xs);cursor:pointer;transition:all 0.15s}
.cal-day:hover{background:rgba(255,255,255,0.04)}
.cal-day.today{background:var(--accent);color:white;font-weight:600}
.cal-day.other{color:var(--text-muted)}
/* Code Editor */
.code-editor{height:100%;display:flex;flex-direction:column}
.code-editor .toolbar{display:flex;gap:4px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.code-editor textarea{flex:1;background:#0c0c10;border:none;color:#c9d1d9;font-family:'JetBrains Mono',monospace;font-size:13px;padding:16px;resize:none;outline:none;line-height:1.6}
/* Music Player */
.music-player{display:flex;flex-direction:column;height:100%;background:var(--bg)}
.music-art{flex:1;display:flex;align-items:center;justify-content:center}
.music-art .art{width:180px;height:180px;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent),var(--gold));display:flex;align-items:center;justify-content:center;font-size:56px;box-shadow:var(--shadow)}
.music-controls{padding:20px;background:var(--surface);text-align:center}
.music-controls .title{font-size:15px;font-weight:600;margin-bottom:4px}
.music-controls .artist{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.music-controls .progress{height:3px;background:var(--surface3);border-radius:2px;margin-bottom:12px}
.music-controls .progress-fill{height:100%;background:var(--accent);border-radius:2px;width:30%}
.music-controls .buttons{display:flex;justify-content:center;gap:20px}
.music-controls .btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--surface2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.15s}
.music-controls .btn:hover{background:var(--surface3)}
.music-controls .btn.play{background:var(--accent);color:white;width:52px;height:52px;font-size:22px}
/* Weather */
.weather{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;text-align:center}
.weather .temp{font-size:72px;font-weight:200;letter-spacing:-2px}
.weather .desc{font-size:18px;color:var(--text-secondary);margin:8px 0;font-weight:300}
.weather .details{display:flex;gap:32px;margin-top:32px;font-size:13px;color:var(--text-muted)}
/* Calendar */
.calendar{padding:20px}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal-header .month{font-size:20px;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{padding:10px;text-align:center;font-size:13px;border-radius:var(--radius-xs);cursor:pointer;transition:all 0.15s}
.cal-day:hover{background:rgba(255,255,255,0.04)}
.cal-day.today{background:var(--accent);color:white;font-weight:600}
.cal-day.other{color:var(--text-muted)}
/* Code Editor */
.code-editor{height:100%;display:flex;flex-direction:column}
.code-editor .toolbar{display:flex;gap:4px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.code-editor textarea{flex:1;background:#0c0c10;border:none;color:#c9d1d9;font-family:'JetBrains Mono',monospace;font-size:13px;padding:16px;resize:none;outline:none;line-height:1.6}
/* Settings Sections */
.settings-layout{display:flex;height:100%}
.settings-nav{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:8px}
.settings-nav .item{padding:10px 14px;border-radius:var(--radius-xs);font-size:13px;cursor:pointer;margin-bottom:2px;color:var(--text-secondary);transition:all 0.15s}
.settings-nav .item:hover{background:rgba(255,255,255,0.03)}
.settings-nav .item.active{background:var(--accent-dim);color:var(--accent)}
.settings-content{flex:1;padding:32px;overflow:auto}
.setting-group{margin-bottom:32px}
.setting-group h3{font-size:16px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:14px;font-weight:500}
.setting-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.setting-toggle{width:44px;height:24px;border-radius:12px;background:var(--surface3);cursor:pointer;position:relative;transition:background 0.2s}
.setting-toggle.on{background:var(--accent)}
.setting-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.setting-toggle.on::after{transform:translateX(20px)}
/* Notes */
.notes-layout{display:flex;height:100%}
.notes-sidebar{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:8px;overflow:auto}
.notes-sidebar .note-item{padding:10px 12px;border-radius:var(--radius-xs);cursor:pointer;margin-bottom:2px;font-size:13px;color:var(--text-secondary);transition:all 0.15s}
.notes-sidebar .note-item:hover{background:rgba(255,255,255,0.03)}
.notes-sidebar .note-item.active{background:var(--accent-dim);color:var(--accent)}
.notes-editor{flex:1;padding:20px}
.notes-editor textarea{width:100%;height:100%;background:transparent;border:none;color:var(--text);font-size:15px;resize:none;outline:none;line-height:1.8;font-family:var(--font)}
/* Weather */
.weather{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;text-align:center}
.weather .temp{font-size:72px;font-weight:200;letter-spacing:-2px}
.weather .desc{font-size:18px;color:var(--text-secondary);margin:8px 0;font-weight:300}
.weather .details{display:flex;gap:32px;margin-top:32px;font-size:13px;color:var(--text-muted)}
/* Calendar */
.calendar{padding:20px}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal-header .month{font-size:20px;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{padding:10px;text-align:center;font-size:13px;border-radius:var(--radius-xs);cursor:pointer;transition:all 0.15s}
.cal-day:hover{background:rgba(255,255,255,0.04)}
.cal-day.today{background:var(--accent);color:white;font-weight:600}
.cal-day.other{color:var(--text-muted)}
/* Terminal */
.terminal{background:#0c0c10;color:#c9d1d9;font-family:'JetBrains Mono','Fira Code',monospace;font-size:13px;padding:16px;height:100%;overflow:auto;line-height:1.6}
.terminal .prompt{color:var(--accent)}
.terminal .output{white-space:pre-wrap}
.terminal input{background:transparent;border:none;color:#c9d1d9;font-family:inherit;font-size:inherit;width:100%;outline:none}
/* Calculator */
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:12px;height:100%;background:var(--bg)}
.calc button{padding:18px;border:none;border-radius:var(--radius-xs);font-size:18px;cursor:pointer;background:var(--surface2);color:var(--text);transition:all 0.1s;font-weight:300}
.calc button:hover{background:var(--surface3)}
.calc button.op{background:var(--accent);color:white;font-weight:500}
.calc button.op:hover{background:#5a8de8}
.calc .display{grid-column:span 4;padding:20px;text-align:right;font-size:36px;font-weight:200;background:var(--bg);border-radius:var(--radius-sm);margin-bottom:8px;letter-spacing:-1px}
/* File Manager */
.fm-sidebar{width:180px;background:var(--surface);border-right:1px solid var(--border);padding:8px}
.fm-sidebar .item{padding:8px 12px;border-radius:var(--radius-xs);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text-secondary);transition:all 0.15s}
.fm-sidebar .item:hover{background:rgba(255,255,255,0.03);color:var(--text)}
.fm-sidebar .item.active{background:var(--accent-dim);color:var(--accent)}
.fm-main{flex:1;padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;align-content:start}
.fm-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s}
.fm-item:hover{background:rgba(255,255,255,0.03)}
.fm-item .icon{font-size:32px}
.fm-item .name{font-size:11px;text-align:center;color:var(--text-secondary);line-height:1.3}
/* Settings */
.settings-layout{display:flex;height:100%}
.settings-nav{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:8px}
.settings-nav .item{padding:10px 14px;border-radius:var(--radius-xs);font-size:13px;cursor:pointer;margin-bottom:2px;color:var(--text-secondary);transition:all 0.15s}
.settings-nav .item:hover{background:rgba(255,255,255,0.03)}
.settings-nav .item.active{background:var(--accent-dim);color:var(--accent)}
.settings-content{flex:1;padding:32px;overflow:auto}
.setting-group{margin-bottom:32px}
.setting-group h3{font-size:16px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:14px;font-weight:500}
.setting-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.setting-toggle{width:44px;height:24px;border-radius:12px;background:var(--surface3);cursor:pointer;position:relative;transition:background 0.2s}
.setting-toggle.on{background:var(--accent)}
.setting-toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.setting-toggle.on::after{transform:translateX(20px)}
/* Notes */
.notes-layout{display:flex;height:100%}
.notes-sidebar{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:8px;overflow:auto}
.notes-sidebar .note-item{padding:10px 12px;border-radius:var(--radius-xs);cursor:pointer;margin-bottom:2px;font-size:13px;color:var(--text-secondary);transition:all 0.15s}
.notes-sidebar .note-item:hover{background:rgba(255,255,255,0.03)}
.notes-sidebar .note-item.active{background:var(--accent-dim);color:var(--accent)}
.notes-editor{flex:1;padding:20px}
.notes-editor textarea{width:100%;height:100%;background:transparent;border:none;color:var(--text);font-size:15px;resize:none;outline:none;line-height:1.8;font-family:var(--font)}
/* Weather */
.weather{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px;text-align:center}
.weather .temp{font-size:72px;font-weight:200;letter-spacing:-2px}
.weather .desc{font-size:18px;color:var(--text-secondary);margin:8px 0;font-weight:300}
.weather .details{display:flex;gap:32px;margin-top:32px;font-size:13px;color:var(--text-muted)}
/* Calendar */
.calendar{padding:20px}
.cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal-header .month{font-size:20px;font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{padding:10px;text-align:center;font-size:13px;border-radius:var(--radius-xs);cursor:pointer;transition:all 0.15s}
.cal-day:hover{background:rgba(255,255,255,0.04)}
.cal-day.today{background:var(--accent);color:white;font-weight:600}
.cal-day.other{color:var(--text-muted)}
/* Code Editor */
.code-editor{height:100%;display:flex;flex-direction:column}
.code-editor .toolbar{display:flex;gap:4px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}
.code-editor textarea{flex:1;background:#0c0c10;border:none;color:#c9d1d9;font-family:'JetBrains Mono',monospace;font-size:13px;padding:16px;resize:none;outline:none;line-height:1.6}
/* Music Player */
.music-player{display:flex;flex-direction:column;height:100%;background:var(--bg)}
.music-art{flex:1;display:flex;align-items:center;justify-content:center}
.music-art .art{width:180px;height:180px;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent),var(--gold));display:flex;align-items:center;justify-content:center;font-size:56px;box-shadow:var(--shadow)}
.music-controls{padding:20px;background:var(--surface);text-align:center}
.music-controls .title{font-size:15px;font-weight:600;margin-bottom:4px}
.music-controls .artist{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.music-controls .progress{height:3px;background:var(--surface3);border-radius:2px;margin-bottom:12px}
.music-controls .progress-fill{height:100%;background:var(--accent);border-radius:2px;width:30%}
.music-controls .buttons{display:flex;justify-content:center;gap:20px}
.music-controls .btn{width:40px;height:40px;border-radius:50%;border:none;background:var(--surface2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all 0.15s}
.music-controls .btn:hover{background:var(--surface3)}
.music-controls .btn.play{background:var(--accent);color:white;width:52px;height:52px;font-size:22px}