/* ============================================================
   Windows 11 Web OS — Main Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --accent: #0078d4;
  --accent-hover: #1a86d9;
  --accent-light: rgba(0,120,212,.08);
  --surface: rgba(255,255,255,.82);
  --surface-solid: #fff;
  --surface-dark: rgba(32,32,32,.82);
  --text: #1a1a1a;
  --text-secondary: #616161;
  --border: rgba(0,0,0,.0578);
  --border-strong: rgba(0,0,0,.12);
  --shadow: 0 8px 32px rgba(0,0,0,.14);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.22);
  --radius: 8px;
  --radius-lg: 12px;
  --taskbar-h: 48px;
  --font: 'Noto Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
}
html, body { height:100%; overflow:hidden; font-family:var(--font); background:#000; user-select:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea { font-family:inherit; }

/* ───── CSS GRADIENT WALLPAPERS (no external images) ───── */
.wp-default    { background: linear-gradient(135deg, #0078d4 0%, #00bcf2 40%, #005a9e 70%, #00188f 100%); }
.wp-sunset     { background: linear-gradient(135deg, #ff6a00 0%, #ee0979 50%, #5f0a87 100%); }
.wp-forest     { background: linear-gradient(160deg, #0f3d0f 0%, #1a5c1a 30%, #228B22 60%, #90EE90 100%); }
.wp-ocean      { background: linear-gradient(180deg, #006994 0%, #00b4d8 50%, #90e0ef 100%); }
.wp-night      { background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 40%, #16213e 70%, #0f3460 100%); }
.wp-lavender   { background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); }
.wp-aurora     { background: linear-gradient(160deg, #000428 0%, #004e92 30%, #00c9a7 60%, #845ec2 100%); }
.wp-sand       { background: linear-gradient(135deg, #c2b280 0%, #f5deb3 40%, #deb887 70%, #d2691e 100%); }
.wp-mono       { background: linear-gradient(135deg, #232526 0%, #414345 40%, #636363 70%, #232526 100%); }

/* ═══════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════ */
#loadingScreen {
  position:fixed; inset:0; z-index:99998;
  background:#000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:40px;
  transition: opacity .6s ease;
}
#loadingScreen.hidden { opacity:0; pointer-events:none; }
.loading-logo svg { display:block; }
.loading-dots { display:flex; gap:8px; }
.loading-dots span {
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation: dotPulse 1.4s infinite both;
}
.loading-dots span:nth-child(2) { animation-delay:.2s; }
.loading-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes dotPulse {
  0%,80%,100% { opacity:.25; transform:scale(.7); }
  40% { opacity:1; transform:scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   LOCK SCREEN
   ═══════════════════════════════════════════════════════════ */
#lockScreen {
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 50%, #00188f 100%);
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s;
  cursor:pointer;
}
#lockScreen.dismissed { transform:translateY(-100%); opacity:0; pointer-events:none; }
#lockTime {
  color:#fff; font-size:min(96px, 14vw); font-weight:300;
  text-shadow:0 2px 24px rgba(0,0,0,.25); line-height:1.1;
}
#lockDate {
  color:rgba(255,255,255,.85); font-size:min(18px, 3vw); font-weight:400;
  margin-top:8px; text-shadow:0 1px 8px rgba(0,0,0,.2);
}
#lockHint {
  color:rgba(255,255,255,.55); font-size:14px; margin-top:60px;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }

/* ═══════════════════════════════════════════════════════════
   LOGIN / REGISTER SCREEN
   ═══════════════════════════════════════════════════════════ */
#loginScreen {
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0078d4 0%, #005a9e 50%, #00188f 100%);
}
#loginScreen::before {
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.15); backdrop-filter:blur(40px) saturate(1.5);
}
#loginScreen.hidden { display:none; }

#loginBox {
  position:relative; display:flex; flex-direction:column;
  align-items:center; gap:14px; padding:40px 48px;
  max-width:400px; width:100%;
}
.login-avatar {
  width:120px; height:120px; border-radius:50%;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
  font-size:52px; color:#fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.15);
}
.login-name {
  color:#fff; font-size:22px; font-weight:500;
  text-shadow:0 1px 6px rgba(0,0,0,.2);
}
.login-error {
  color:#ff8a80; font-size:13px; min-height:18px; text-align:center;
}
.login-input {
  width:100%; padding:11px 16px; border-radius:4px;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.2); color:#fff; font-size:14px;
  outline:none; transition:.2s;
  backdrop-filter: blur(8px);
}
.login-input::placeholder { color:rgba(255,255,255,.45); }
.login-input:focus { border-color:var(--accent); background:rgba(0,0,0,.35); }
.login-btn {
  width:100%; padding:11px; border-radius:4px;
  background:var(--accent); color:#fff; font-size:14px;
  font-weight:600; transition:.15s; border:none;
  cursor:pointer;
}
.login-btn:hover { background:var(--accent-hover); }
.login-btn:active { transform:scale(.98); }
.login-toggle {
  color:rgba(255,255,255,.6); font-size:13px;
  cursor:pointer; transition:.15s;
}
.login-toggle:hover { color:#fff; }
.login-form { display:flex; flex-direction:column; gap:10px; width:100%; }

/* ═══════════════════════════════════════════════════════════
   DESKTOP
   ═══════════════════════════════════════════════════════════ */
#desktop {
  position:fixed; inset:0; display:none;
  transition: background .4s;
}
#desktop.active { display:block; }
#desktopIcons {
  position:absolute; inset:0 0 var(--taskbar-h) 0; padding:12px;
}

/* Desktop icon */
.desktop-icon {
  position:absolute; width:78px;
  display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:6px 4px; border-radius:6px;
  cursor:pointer; transition: background .12s;
}
.desktop-icon:hover { background:rgba(255,255,255,.12); }
.desktop-icon.selected { background:rgba(0,120,212,.22); outline:1px solid rgba(0,120,212,.45); }
.desktop-icon.drag-over { background:rgba(0,120,212,.3); outline:2px solid var(--accent); }

.desktop-icon .icon {
  width:46px; height:46px; display:flex; align-items:center;
  justify-content:center; font-size:34px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.desktop-icon .label {
  color:#fff; font-size:11px; text-align:center;
  text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.4);
  word-break:break-word; max-width:76px; line-height:1.3;
  overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.desktop-icon .label.editing {
  background:var(--accent); color:#fff; padding:1px 4px;
  border-radius:2px; outline:none; user-select:text;
  -webkit-line-clamp:unset; overflow:visible;
}

/* ═══════════════════════════════════════════════════════════
   TASKBAR
   ═══════════════════════════════════════════════════════════ */
#taskbar {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--taskbar-h); display:none; z-index:5000;
  background:rgba(243,243,243,.78);
  backdrop-filter:blur(40px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.1);
  align-items:center; justify-content:center; gap:2px;
}
#desktop.active ~ #taskbar { display:flex; }

.taskbar-btn {
  position:relative; height:40px; min-width:44px;
  padding:0 10px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  gap:6px; font-size:13px; color:var(--text); transition:.12s;
}
.taskbar-btn:hover { background:rgba(0,0,0,.04); }
.taskbar-btn.active { background:rgba(0,0,0,.055); }
.taskbar-btn.active::after {
  content:''; position:absolute; bottom:3px;
  width:16px; height:3px; background:var(--accent);
  border-radius:3px;
}
#startBtn svg { display:block; }

#searchBar {
  height:34px; width:260px; padding:0 14px;
  border-radius:17px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.65); font-size:13px;
  color:var(--text); outline:none; margin:0 4px;
  transition: .2s;
}
#searchBar:focus { border-color:var(--accent); background:rgba(255,255,255,.95); width:320px; }

#taskbarRight {
  position:absolute; right:0; height:100%;
  display:flex; align-items:center; padding-right:12px; gap:1px;
}
#taskbarRight .taskbar-btn { min-width:34px; padding:0 6px; font-size:15px; }

#taskbarClock {
  padding:4px 12px; font-size:12px; text-align:right;
  line-height:1.35; color:var(--text); cursor:pointer;
  border-radius:6px; transition:.12s;
}
#taskbarClock:hover { background:rgba(0,0,0,.04); }

#taskbarCenter {
  display:flex; align-items:center; gap:1px; height:100%;
}

/* ═══════════════════════════════════════════════════════════
   START MENU
   ═══════════════════════════════════════════════════════════ */
#startMenu {
  position:fixed; bottom:calc(var(--taskbar-h) + 12px);
  left:50%; transform:translateX(-50%);
  width:600px; max-height:640px;
  background:var(--surface-solid); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); z-index:6000;
  display:none; flex-direction:column;
  overflow:hidden;
  animation: startSlideUp .18s ease-out;
}
#startMenu.visible { display:flex; }
@keyframes startSlideUp {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

#startSearch {
  margin:20px 24px 14px; padding:10px 16px;
  border-radius:20px; border:1px solid var(--border);
  background:rgba(0,0,0,.025); font-size:13px;
  outline:none; color:var(--text);
}
#startSearch:focus { border-color:var(--accent); }

.start-section { padding:0 24px 16px; }
.start-section-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:12px; }
.start-pinned { display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }

.start-pin-item {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:10px 4px; border-radius:6px;
  cursor:pointer; transition:.12s;
}
.start-pin-item:hover { background:rgba(0,0,0,.035); }
.start-pin-item .icon { font-size:28px; }
.start-pin-item .name { font-size:11px; color:var(--text); text-align:center; }

#startUserSection {
  margin-top:auto; padding:14px 24px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
#startUserName {
  font-size:13px; color:var(--text);
  display:flex; align-items:center; gap:10px;
}
#startPowerBtn {
  width:32px; height:32px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; transition:.12s;
}
#startPowerBtn:hover { background:rgba(0,0,0,.05); }

/* ═══════════════════════════════════════════════════════════
   POWER MENU
   ═══════════════════════════════════════════════════════════ */
#powerMenu {
  position:fixed; z-index:9500;
  background:var(--surface-solid); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:4px;
  min-width:200px; display:none;
}
#powerMenu.visible { display:block; }
.power-item {
  width:100%; padding:8px 14px; border-radius:4px;
  text-align:left; font-size:13px; color:var(--text);
  display:flex; align-items:center; gap:10px; transition:.1s;
}
.power-item:hover { background:rgba(0,0,0,.04); }

/* ═══════════════════════════════════════════════════════════
   WINDOW MANAGER
   ═══════════════════════════════════════════════════════════ */
.window {
  position:absolute; background:var(--surface-solid);
  border-radius:var(--radius); box-shadow:var(--shadow);
  min-width:400px; min-height:280px;
  display:flex; flex-direction:column;
  overflow:hidden; z-index:100;
  transition: box-shadow .15s;
}
.window.maximized {
  border-radius:0 !important;
  inset:0 0 var(--taskbar-h) 0 !important;
  width:auto !important; height:auto !important;
}
.window.focused { z-index:200; box-shadow:var(--shadow-lg); }

.window-header {
  height:34px; display:flex; align-items:center;
  padding:0 0 0 12px; background:#f3f3f3;
  flex-shrink:0; cursor:default;
  border-bottom:1px solid var(--border);
}
.window-title {
  flex:1; font-size:12px; color:var(--text);
  display:flex; align-items:center; gap:8px;
  overflow:hidden; white-space:nowrap;
}
.window-controls { display:flex; height:100%; }
.window-ctrl {
  width:46px; height:100%; display:flex;
  align-items:center; justify-content:center;
  font-size:10px; color:var(--text); transition:.1s;
}
.window-ctrl:hover { background:rgba(0,0,0,.05); }
.window-ctrl.close:hover { background:#c42b1c; color:#fff; }
.window-body { flex:1; overflow:auto; background:#fff; position:relative; }
.window .resize-handle {
  position:absolute; bottom:0; right:0;
  width:14px; height:14px; cursor:nwse-resize;
}

/* ═══════════════════════════════════════════════════════════
   CONTEXT MENU
   ═══════════════════════════════════════════════════════════ */
#contextMenu {
  position:fixed; z-index:8000;
  background:var(--surface-solid); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:4px; min-width:220px;
  display:none; border:1px solid var(--border);
}
#contextMenu.visible { display:block; }
.ctx-item {
  width:100%; padding:7px 16px; border-radius:4px;
  text-align:left; font-size:13px; color:var(--text);
  display:flex; align-items:center; gap:10px; transition:.1s;
}
.ctx-item:hover { background:rgba(0,0,0,.04); }
.ctx-sep { height:1px; background:var(--border); margin:4px 8px; }
.ctx-item .shortcut { margin-left:auto; font-size:11px; color:var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════
   FILE EXPLORER
   ═══════════════════════════════════════════════════════════ */
.explorer-sidebar {
  width:200px; background:rgba(243,243,243,.5);
  border-right:1px solid var(--border); padding:8px; flex-shrink:0;
}
.explorer-nav {
  font-size:12px; padding:6px 10px; border-radius:4px;
  cursor:pointer; color:var(--text);
  display:flex; align-items:center; gap:8px; transition:.1s;
  margin-bottom:1px;
}
.explorer-nav:hover { background:rgba(0,0,0,.035); }
.explorer-nav.active { background:var(--accent-light); color:var(--accent); }

.explorer-toolbar {
  height:40px; display:flex; align-items:center;
  gap:4px; padding:0 12px;
  border-bottom:1px solid var(--border);
  background:rgba(243,243,243,.3);
}
.explorer-toolbar button {
  padding:5px 10px; border-radius:4px;
  font-size:12px; color:var(--text); transition:.1s;
}
.explorer-toolbar button:hover { background:rgba(0,0,0,.05); }
.explorer-path {
  flex:1; height:28px; padding:0 10px;
  border-radius:4px; border:1px solid var(--border);
  font-size:12px; background:#fff; outline:none; color:var(--text);
}
.explorer-content {
  flex:1; padding:8px; display:flex; flex-wrap:wrap;
  align-content:flex-start; gap:4px; overflow:auto;
}
.explorer-item {
  width:82px; display:flex; flex-direction:column;
  align-items:center; gap:4px; padding:8px 4px;
  border-radius:6px; cursor:pointer;
}
.explorer-item:hover { background:rgba(0,0,0,.035); }
.explorer-item.selected { background:var(--accent-light); }
.explorer-item .icon { font-size:32px; }
.explorer-item .name {
  font-size:11px; text-align:center; color:var(--text);
  word-break:break-all; max-width:76px;
}

/* ═══════════════════════════════════════════════════════════
   NOTEPAD
   ═══════════════════════════════════════════════════════════ */
.notepad-body { display:flex; flex-direction:column; height:100%; }
.notepad-menu {
  height:30px; display:flex; align-items:center;
  padding:0 8px; gap:2px;
  background:rgba(243,243,243,.5); border-bottom:1px solid var(--border);
}
.notepad-menu button {
  padding:3px 10px; border-radius:4px;
  font-size:12px; color:var(--text); transition:.1s;
}
.notepad-menu button:hover { background:rgba(0,0,0,.05); }
.notepad-textarea {
  flex:1; padding:10px 12px; border:none; outline:none; resize:none;
  font-family:'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size:14px; line-height:1.6; color:var(--text);
  user-select:text;
}

/* ═══════════════════════════════════════════════════════════
   WORD
   ═══════════════════════════════════════════════════════════ */
.word-body { display:flex; flex-direction:column; height:100%; }
.word-ribbon {
  height:42px; display:flex; align-items:center;
  gap:3px; padding:0 12px;
  border-bottom:1px solid var(--border);
  background:rgba(243,243,243,.4);
}
.word-ribbon button {
  padding:4px 8px; border-radius:4px;
  font-size:13px; color:var(--text); transition:.1s;
}
.word-ribbon button:hover { background:rgba(0,0,0,.05); }
.word-ribbon .sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.word-page-area {
  flex:1; background:#e4e4e4; overflow:auto;
  display:flex; justify-content:center; padding:24px;
}
.word-page {
  width:794px; min-height:1123px; background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.1); padding:60px 56px;
}
.word-page [contenteditable] {
  outline:none; min-height:100%; font-size:14px;
  line-height:1.8; color:var(--text); user-select:text;
}

/* ═══════════════════════════════════════════════════════════
   EXCEL / SPREADSHEET
   ═══════════════════════════════════════════════════════════ */
.spreadsheet { width:100%; height:100%; display:flex; flex-direction:column; }
.spreadsheet-toolbar {
  height:36px; display:flex; align-items:center;
  gap:4px; padding:0 8px;
  border-bottom:1px solid var(--border);
  background:rgba(243,243,243,.4);
}
.spreadsheet-toolbar button {
  padding:3px 8px; border-radius:4px;
  font-size:12px; color:var(--text); transition:.1s;
}
.spreadsheet-toolbar button:hover { background:rgba(0,0,0,.05); }
.formula-bar {
  height:28px; display:flex; align-items:center;
  padding:0 8px; border-bottom:1px solid var(--border); gap:4px;
}
.formula-bar .cell-ref {
  width:50px; text-align:center; font-size:11px;
  border-right:1px solid var(--border); padding-right:8px;
  color:var(--text);
}
.formula-bar input {
  flex:1; border:none; outline:none;
  font-size:12px; padding:0 4px; color:var(--text);
}
.sheet-grid { flex:1; overflow:auto; }
.sheet-grid table { border-collapse:collapse; width:max-content; }
.sheet-grid th {
  background:#f5f5f5; border:1px solid #ddd; padding:2px 4px;
  font-size:11px; font-weight:500; min-width:80px; height:22px;
  text-align:center; color:var(--text-secondary);
  position:sticky; top:0; z-index:1;
}
.sheet-grid th.row-h { min-width:40px; position:sticky; left:0; z-index:2; }
.sheet-grid td {
  border:1px solid #e0e0e0; padding:2px 4px;
  font-size:12px; min-width:80px; height:22px;
  cursor:cell; user-select:text; color:var(--text);
}
.sheet-grid td:focus { outline:2px solid var(--accent); outline-offset:-1px; background:rgba(0,120,212,.02); }

/* ═══════════════════════════════════════════════════════════
   CALENDAR PANEL
   ═══════════════════════════════════════════════════════════ */
#calendarPanel {
  position:fixed; bottom:calc(var(--taskbar-h) + 8px); right:8px;
  width:320px; background:var(--surface-solid);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  z-index:6000; display:none; padding:20px;
}
#calendarPanel.visible { display:block; }
.cal-title { font-size:14px; font-weight:600; text-align:center; margin-bottom:14px; color:var(--text); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; font-size:12px; }
.cal-grid .dn { font-weight:600; padding:4px; color:var(--text-secondary); font-size:11px; }
.cal-grid .dy { padding:6px; border-radius:50%; cursor:pointer; transition:.1s; color:var(--text); }
.cal-grid .dy:hover { background:rgba(0,0,0,.04); }
.cal-grid .dy.today { background:var(--accent); color:#fff; font-weight:600; }
.cal-grid .dy.other { color:#bbb; }

/* ═══════════════════════════════════════════════════════════
   SYSTEM TRAY
   ═══════════════════════════════════════════════════════════ */
#trayPanel {
  position:fixed; bottom:calc(var(--taskbar-h) + 8px); right:50px;
  width:340px; background:var(--surface-solid);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  z-index:6000; display:none; padding:20px;
}
#trayPanel.visible { display:block; }
.tray-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tray-item {
  padding:12px 8px; border-radius:8px;
  background:rgba(0,0,0,.025);
  display:flex; flex-direction:column; align-items:center;
  gap:6px; font-size:11px; color:var(--text);
  cursor:pointer; transition:.15s;
}
.tray-item:hover { background:rgba(0,0,0,.05); }
.tray-item.on { background:var(--accent); color:#fff; }
.tray-item .ti-icon { font-size:18px; }
.tray-slider { margin-top:16px; }
.tray-slider label {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text);
}
.tray-slider input[type=range] { flex:1; accent-color:var(--accent); }

/* ═══════════════════════════════════════════════════════════
   WALLPAPER PICKER
   ═══════════════════════════════════════════════════════════ */
.wp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px; }
.wp-option {
  aspect-ratio:16/9; border-radius:8px; cursor:pointer;
  border:3px solid transparent; transition:.2s;
}
.wp-option:hover { border-color:rgba(0,120,212,.4); transform:scale(1.03); }
.wp-option.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }

/* ═══════════════════════════════════════════════════════════
   BSOD
   ═══════════════════════════════════════════════════════════ */
#bsod {
  position:fixed; inset:0; background:#0078d4;
  z-index:99999; display:none; flex-direction:column;
  align-items:flex-start; justify-content:center;
  color:#fff; padding:10%;
}
#bsod .sad { font-size:min(120px, 18vw); margin-bottom:20px; }
#bsod .msg { font-size:min(28px, 4vw); margin-bottom:10px; }
#bsod .detail { font-size:14px; opacity:.7; }

/* ═══════════════════════════════════════════════════════════
   FULLSCREEN BUTTON
   ═══════════════════════════════════════════════════════════ */
#fullscreenBtn {
  position:fixed; top:8px; right:8px; z-index:9999;
  width:30px; height:30px; border-radius:6px;
  background:rgba(0,0,0,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; opacity:.2;
  transition:.2s; backdrop-filter:blur(4px);
}
#fullscreenBtn:hover { opacity:.9; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,.22); }

/* ═══════════════════════════════════════════════════════════
   ENHANCED EXCEL (v2)
   ═══════════════════════════════════════════════════════════ */
.xl-wrap{display:flex;flex-direction:column;height:100%;overflow:hidden;background:#fff;}
.xl-toolbar{display:flex;align-items:center;gap:3px;padding:4px 8px;border-bottom:1px solid var(--border);
  background:rgba(243,243,243,.5);flex-wrap:wrap;min-height:38px;overflow-x:auto;}
.xl-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;
  font-size:11px;color:var(--text);cursor:pointer;transition:.1s;border:none;background:none;white-space:nowrap;}
.xl-btn:hover{background:rgba(0,0,0,.06);}
.xl-btn-green{color:#16a34a;font-weight:600;}
.xl-btn-red{color:#dc2626;}
.xl-fmt-on{background:rgba(0,120,212,.12) !important;color:var(--accent);}
.xl-tb-group{display:flex;align-items:center;gap:1px;}
.xl-tb-sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0;}
.xl-addr{width:55px;padding:3px 6px;border:1px solid var(--border);border-radius:3px;
  font-size:11px;text-align:center;background:#fff;outline:none;}
.xl-formula{flex:1;min-width:80px;padding:3px 6px;border:1px solid var(--border);border-radius:3px;
  font-size:11px;outline:none;background:#fff;}
.xl-formula:focus,.xl-addr:focus{border-color:var(--accent);}
.xl-sel-fmt{padding:2px 4px;border:1px solid var(--border);border-radius:3px;font-size:11px;
  outline:none;background:#fff;color:var(--text);}
.xl-main{flex:1;display:flex;overflow:hidden;}
.xl-center{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.xl-sheettabs{display:flex;align-items:center;border-top:1px solid var(--border);
  background:rgba(243,243,243,.4);padding:0 4px;height:30px;gap:2px;overflow-x:auto;}
.xl-stab{padding:4px 12px;font-size:11px;border-radius:4px 4px 0 0;cursor:pointer;
  color:var(--text-secondary);display:flex;align-items:center;gap:6px;transition:.1s;white-space:nowrap;}
.xl-stab:hover{background:rgba(0,0,0,.04);}
.xl-stab.ac{background:#fff;color:var(--text);font-weight:600;border:1px solid var(--border);border-bottom:1px solid #fff;margin-bottom:-1px;}
.xl-stab-del{font-size:9px;opacity:.4;cursor:pointer;padding:2px;}
.xl-stab-del:hover{opacity:1;color:#dc2626;}
.xl-stab-add{padding:4px 10px;cursor:pointer;font-size:14px;color:var(--text-secondary);border-radius:4px;}
.xl-stab-add:hover{background:rgba(0,0,0,.04);}
.xl-stab-expand{margin-left:auto;padding:4px 8px;cursor:pointer;font-size:11px;color:var(--text-secondary);}
.xl-grid-wrap{flex:1;overflow:auto;position:relative;}
.xl-table{border-collapse:collapse;width:max-content;table-layout:fixed;}
.xl-table th,.xl-table td{border:1px solid #d4d4d4;padding:0;font-size:12px;height:22px;}
.xl-corner{width:40px;min-width:40px;background:#f0f0f0;position:sticky;left:0;top:0;z-index:3;}
.xl-ch{background:#f5f5f5;font-weight:500;text-align:center;color:var(--text-secondary);
  position:sticky;top:0;z-index:2;padding:0 4px;cursor:default;overflow:hidden;}
.xl-rh{background:#f5f5f5;font-weight:400;text-align:center;color:var(--text-secondary);
  width:40px;min-width:40px;position:sticky;left:0;z-index:1;cursor:default;font-size:11px;}
.xl-cell{padding:1px 4px;cursor:cell;user-select:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--text);}
.xl-cell.xl-sel{outline:2px solid var(--accent);outline-offset:-1px;background:rgba(0,120,212,.04);}
.xl-cell.xl-range{background:rgba(0,120,212,.08);}
.xl-col-resize{position:absolute;right:-2px;top:0;bottom:0;width:5px;cursor:col-resize;z-index:4;}
.xl-row-resize{position:absolute;left:0;right:0;bottom:-2px;height:5px;cursor:row-resize;z-index:4;}
.xl-ch,.xl-rh{position:relative;}
.xl-frozen-col{border-right:2px solid #91c8f6 !important;}
.xl-frozen-row td,.xl-frozen-row th{border-bottom:2px solid #91c8f6 !important;}
.xl-no-grid td{border-color:transparent;}
.xl-cell-inp{width:100%;height:100%;border:none;outline:none;padding:1px 4px;font-size:12px;
  font-family:inherit;background:rgba(0,120,212,.04);}
.xl-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:12px;color:var(--text-secondary);font-size:14px;}
.xl-sidebar{width:0;overflow:hidden;border-left:1px solid var(--border);transition:width .2s;background:#fafafa;}
.xl-sidebar.open{width:260px;padding:12px;overflow-y:auto;}
.xl-sb-hd{display:flex;align-items:center;justify-content:space-between;font-size:13px;
  font-weight:600;color:var(--text);margin-bottom:12px;}
.xl-sb-sec{margin-bottom:14px;}
.xl-sb-sec-title{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
.xl-param-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;
  color:var(--text);padding:3px 0;gap:8px;}
.xl-param-inp{width:70px;padding:3px 6px;border:1px solid var(--border);border-radius:3px;
  font-size:11px;outline:none;text-align:center;background:#fff;color:var(--text);}
.xl-param-inp:focus{border-color:var(--accent);}
.xl-param-check{accent-color:var(--accent);}
.xl-ctx{position:fixed;z-index:9000;background:var(--surface-solid);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:4px;min-width:190px;border:1px solid var(--border);}
.xl-ctx-item{padding:6px 14px;font-size:12px;cursor:pointer;border-radius:3px;color:var(--text);transition:.1s;}
.xl-ctx-item:hover{background:rgba(0,0,0,.04);}
.xl-ctx-sep{height:1px;background:var(--border);margin:3px 8px;}
.xl-find-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-top:1px solid var(--border);
  background:rgba(243,243,243,.5);}
.xl-color-btn{position:relative;cursor:pointer;}
.xl-wrap--fs{position:fixed!important;inset:0!important;z-index:300!important;border-radius:0!important;height:auto!important;}

/* ═══════════════════════════════════════════════════════════
   MEDIA ITEMS
   ═══════════════════════════════════════════════════════════ */
.media-viewer{display:flex;flex-direction:column;height:100%;background:#1a1a1a;}
.media-viewer iframe,.media-viewer video,.media-viewer audio{width:100%;flex:1;border:none;}
.media-viewer img{max-width:100%;max-height:100%;object-fit:contain;margin:auto;}
.media-info{padding:8px 12px;font-size:12px;color:#aaa;border-top:1px solid #333;background:#111;}

/* ═══════════════════════════════════════════════════════════
   CONTROL PANEL (expanded)
   ═══════════════════════════════════════════════════════════ */
.cp-section{padding:16px 20px;border-bottom:1px solid var(--border);}
.cp-section h3{font-size:14px;font-weight:600;color:var(--text);margin-bottom:10px;}
.cp-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:13px;color:var(--text);}
.cp-row label{display:flex;align-items:center;gap:8px;}
.cp-input{padding:6px 10px;border:1px solid var(--border);border-radius:4px;font-size:13px;
  outline:none;width:100%;background:#fff;color:var(--text);}
.cp-input:focus{border-color:var(--accent);}
.cp-btn{padding:6px 14px;border-radius:4px;border:none;font-size:13px;cursor:pointer;transition:.15s;}
.cp-btn-primary{background:var(--accent);color:#fff;}
.cp-btn-primary:hover{background:var(--accent-hover);}
.cp-tabs{display:flex;border-bottom:1px solid var(--border);background:rgba(243,243,243,.5);}
.cp-tab{padding:10px 18px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent;
  color:var(--text-secondary);transition:.15s;}
.cp-tab:hover{background:rgba(0,0,0,.03);}
.cp-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}

/* Custom wallpaper input */
.wp-custom-input{width:100%;margin-top:12px;display:flex;gap:8px;}
.wp-custom-input input{flex:1;}

/* Explorer in-folder actions bar */
.explorer-actions{display:flex;gap:4px;align-items:center;padding:4px 8px;
  border-bottom:1px solid var(--border);background:rgba(243,243,243,.3);flex-wrap:wrap;}
.explorer-actions button{font-size:11px;padding:4px 8px;}

/* Media create dialog */
.media-dialog{padding:16px;display:flex;flex-direction:column;gap:12px;}
.media-dialog label{font-size:13px;color:var(--text);font-weight:500;}
.media-dialog input,.media-dialog select{width:100%;padding:8px 10px;border:1px solid var(--border);
  border-radius:4px;font-size:13px;outline:none;background:#fff;color:var(--text);}
.media-dialog input:focus,.media-dialog select:focus{border-color:var(--accent);}
.media-dialog .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;}

/* ═══════════════════════════════════════════════════════════
   PAINT APP
   ═══════════════════════════════════════════════════════════ */
.paint-tool{padding:4px 8px;border-radius:4px;font-size:14px;border:1px solid transparent;
  cursor:pointer;transition:.12s;background:none;color:var(--text);}
.paint-tool:hover{background:rgba(0,0,0,.06);}
.paint-tool.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);}
.paint-act{padding:4px 8px;border-radius:4px;font-size:12px;cursor:pointer;transition:.12s;
  border:none;background:none;color:var(--text);}
.paint-act:hover{background:rgba(0,0,0,.06);}

/* ═══════════════════════════════════════════════════════════
   ARCHIVE VIEWER
   ═══════════════════════════════════════════════════════════ */
.archive-entry{cursor:pointer;transition:.1s;}
.archive-entry:hover{background:rgba(0,0,0,.04);}