/* noteOS 2.0 — canvas shell; CSS only for boot/install + app body overlays */
:root {
  --bg: #1a2744;
  --text: #0b1020;
  --accent: #0a84ff;
  --window: rgba(246,248,252,0.92);
  --font: system-ui, sans-serif;
}
* { box-sizing: border-box; }
html,body{
  width:100%;height:100%;overflow:hidden;
  margin:0;padding:0;
  background:#05070c;
  font-family:"Courier New",Courier,monospace;
}
.hidden { display: none !important; }
code { font-family: ui-monospace, monospace; font-size: .9em; }
.muted { opacity: .7; font-size: 12px; }

/* Boot / install */
.boot-screen{
  position:fixed;inset:0;
  background:#0a1628;color:#8fd4a8;
  font-family:"Courier New",monospace;padding:24px;z-index:9990;
  user-select:none;-webkit-user-select:none;
}
.boot-log { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.35; max-height: calc(100% - 40px); overflow: auto; text-shadow: 0 0 6px #33ff66; user-select: none; -webkit-user-select: none; }
.boot-bar-wrap { position: absolute; left: 24px; right: 24px; bottom: 24px; height: 10px; border: 1px solid #33ff66; }
.boot-bar { height: 100%; width: 0; background: #22cc55; transition: width .15s; }

.install-screen { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 30% 20%, #1a2744, #0b1220 70%); z-index: 9980; color: #e8eef8; }
.install-card { width: min(440px, 92vw); background: rgba(20,28,48,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.install-card h1 { margin: 0 0 .75rem; font-size: 1.6rem; }
.install-list { max-height: 180px; overflow: auto; font-size: 13px; padding-left: 1.2rem; }
.install-progress { height: 8px; background: #0005; border-radius: 99px; overflow: hidden; margin: .75rem 0; }
#install-bar { height: 100%; width: 0; background: linear-gradient(90deg, #0a84ff, #5ac8fa); }
.btn-primary, .btn-discord, .btn-ghost { border: 0; border-radius: 10px; padding: .65rem 1rem; cursor: pointer; font-weight: 600; margin: .25rem .25rem .25rem 0; }
.btn-primary { background: var(--accent, #0a84ff); color: #fff; }
.btn-discord { background: #5865F2; color: #fff; }
.btn-ghost { background: transparent; color: #c8d0e0; border: 1px solid #ffffff33; }
.app-settings select, .app-settings input[type=text], .app-settings input[type=password] {
  width: 100%; margin: .35rem 0; padding: .55rem .7rem; border-radius: 8px; border: 1px solid #ffffff33; background: #0006; color: inherit;
}

/* Canvas shell — login + desktop + power overlay all on #os-canvas */
.os-root { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; }
#os-canvas {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  outline: none; cursor: default; touch-action: none;
  z-index: 1;
}
/* app-layer RETIRÉ — apps 100% canvas (plus de HTML overlay / trails) */
.screen-dim { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 9000; }

/* Theme text colors for app bodies */
html[data-theme="macos"] { --text: #0b1020; --accent: #0a84ff; --window: rgba(246,248,252,0.92); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
html[data-theme="win95"] { --text: #000; --accent: #000080; --window: #c0c0c0; --font: Tahoma, "MS Sans Serif", sans-serif; }
html[data-theme="matrix"] { --text: #33ff66; --accent: #00ff41; --window: #031a08; --font: "Courier New", Consolas, monospace; }
html[data-theme="winxp"] { --text: #000; --accent: #245edb; --window: #ece9d8; --font: Tahoma, Frutiger, sans-serif; }
html[data-theme="win7"] { --text: #1a1a1a; --accent: #2e6cb5; --window: rgba(240,244,250,0.88); --font: "Segoe UI", Tahoma, sans-serif; }
html[data-theme="kde"] { --text: #eff0f1; --accent: #3daee9; --window: rgba(42,46,50,0.94); --font: "Noto Sans", "Segoe UI", system-ui, sans-serif; }
body.theme-matrix .win-body-host { color: #33ff66; text-shadow: 0 0 4px #33ff66; }

/* Apps (content inside canvas window bodies) */
.app-calc { padding: 10px; height: 100%; display: flex; flex-direction: column; gap: 8px; background: #111; color: #fff; }
.calc-display { font-size: 2rem; text-align: right; padding: 12px; background: #000; border-radius: 8px; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
.calc-grid button { border: 0; border-radius: 8px; font-size: 1.1rem; cursor: pointer; background: #333; color: #fff; }
.calc-grid button.op { background: #ff9f0a; color: #000; }
.calc-grid button.eq { background: #0a84ff; }
.calc-grid button.fn { background: #555; }

.app-notes { display: flex; flex-direction: column; height: 100%; }
.notes-toolbar { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #0002; }
.notes-toolbar button { cursor: pointer; }
.app-notes textarea { flex: 1; border: 0; padding: 12px; resize: none; font: inherit; background: transparent; color: inherit; }
.notes-status { font-size: 11px; padding: 4px 8px; opacity: .65; }

.app-browser { display: flex; flex-direction: column; height: 100%; }
.browser-bar { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid #0002; background: #0001; }
.browser-bar button { cursor: pointer; }
.browser-bar button.on { background: #0a84ff; color: #fff; }
.browser-url { flex: 1; padding: 4px 8px; border-radius: 6px; border: 1px solid #0003; }
.browser-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.browser-status { font-size: 11px; padding: 3px 8px; opacity: .7; border-top: 1px solid #0001; }

.app-files { display: grid; grid-template-columns: 160px 1fr; height: 100%; }
.files-side { border-right: 1px solid #0002; padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.files-place, .files-item { text-align: left; border: 0; background: transparent; padding: 6px 8px; cursor: pointer; border-radius: 6px; color: inherit; }
.files-place:hover, .files-item:hover { background: #0001; }
.files-main { display: grid; grid-template-rows: auto 1fr 140px; min-height: 0; }
.files-path { padding: 8px; font-size: 12px; border-bottom: 1px solid #0001; opacity: .8; }
.files-list { overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.files-preview { border-top: 1px solid #0002; padding: 8px; overflow: auto; background: #0001; }
.files-gallery-img { max-width: 100%; max-height: 120px; display: block; margin: 0 auto; border-radius: 6px; }
.files-gallery-strip { display: flex; gap: 6px; overflow: auto; padding: 6px; }
.files-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.files-text { font-size: 11px; white-space: pre-wrap; max-height: 100%; overflow: auto; }

.app-reversi { padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.reversi-grid { display: grid; grid-template-columns: repeat(8, 40px); gap: 2px; background: #0a5; padding: 6px; border-radius: 8px; }
.rev-cell { width: 40px; height: 40px; border: 0; background: #063; border-radius: 4px; cursor: pointer; position: relative; }
.rev-cell.hint::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff3; }
.rev-cell.black::after, .rev-cell.white::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; }
.rev-cell.black::after { background: #111; }
.rev-cell.white::after { background: #f5f5f5; }

.app-settings, .app-bobstore, .app-bobcloud, .app-weather, .app-about, .app-creator { padding: 12px; }
.theme-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.theme-toggle button { text-align: left; padding: 10px; border-radius: 10px; border: 1px solid #0002; background: #fff3; cursor: pointer; color: inherit; }
.theme-toggle button.active { outline: 2px solid var(--accent); }
.settings-user-row { padding: 4px 0; font-size: 13px; }
.bobstore-list { display: flex; flex-direction: column; gap: 8px; }
.bobstore-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; border: 1px solid #0002; border-radius: 10px; }
.bobstore-btn-install { cursor: pointer; border: 0; border-radius: 8px; padding: 6px 12px; background: var(--accent); color: #fff; }
.bobstore-btn-install.installed { background: #28c840; }

.app-creator { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 8px; height: 100%; }
.creator-palette, .creator-canvas, .creator-out { border: 1px solid #0002; border-radius: 8px; padding: 8px; overflow: auto; }
.creator-out { font-family: ui-monospace, monospace; font-size: 11px; white-space: pre-wrap; background: #111; color: #9f9; }
.creator-block, .creator-row { display: block; width: 100%; margin: 4px 0; padding: 8px; border-radius: 6px; border: 0; background: #4a6; color: #fff; cursor: pointer; text-align: left; }
.creator-row { background: #345; cursor: default; font-size: 12px; }

#boot{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  touch-action:none;
  cursor:default;
  background:#0a1628;
  outline:none;
}

/* noteOS green-screen fix — hideable boot layers */
.boot-screen.hidden,#boot-screen.hidden,.boot-screen[hidden],#boot-screen[hidden],#boot.hidden,#boot[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important;opacity:0!important;z-index:-1!important;}
html,body{background-color:#1a2744;}
html.no-glass[data-theme=macos] body{background-color:#1a2744!important;background-image:linear-gradient(160deg,#1a2744 0%,#2d4a7a 40%,#5b8fd9 70%,#a8c8f0 100%)!important;}