:root {
  --blue: #0b4ea2;
  --blue-dark: #07356f;
  --blue-light: #3b78c6;
  --cyan: #5fc6ce;
  --desktop: #d9dedf;
  --panel: #c6c7c9;
  --panel-light: #e9e9e9;
  --panel-dark: #77797d;
  --black: #111214;
  --white: #fff;
  --danger: #a80000;
  --shadow: rgba(0,0,0,.35);
  --font: 'Cairo', Tahoma, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); background: #111; color: var(--black); overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.boot-screen { position: fixed; inset: 0; z-index: 9999; display:grid; place-items:center; background:#05080c; color:#f4f4f4; font-family:var(--mono); }
.boot-inner { width:min(620px,90vw); }
.boot-logo { font-size: clamp(20px,4vw,34px); letter-spacing:1px; margin-bottom:22px; }
.boot-copy { color:#aeb8c0; min-height:24px; margin-bottom:10px; }
.progress-track { height:20px; border:2px solid #9aa2a8; background:#111; padding:2px; box-shadow: inset 1px 1px 0 #000; }
.progress-fill { height:100%; width:0; background:#cdd3d8; transition:width .12s linear; }
.boot-ready { margin-top:18px; font-weight:600; opacity:0; }
.boot-enter { margin-top:18px; opacity:0; pointer-events:none; }
.boot-skip { display:block; margin:16px auto 0; background:none; border:0; color:#87949d; text-decoration:underline; font-family:var(--mono); }
.desktop { position:relative; height:100vh; width:100vw; overflow:hidden; background:var(--desktop); background-image:linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px); background-size:24px 24px; }
.desktop::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 15%, rgba(95,198,206,.18), transparent 35%), radial-gradient(circle at 15% 80%, rgba(11,78,162,.08), transparent 30%); pointer-events:none; }
.crt-overlay { position:absolute; inset:0; pointer-events:none; opacity:.11; background:repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0, rgba(0,0,0,.2) 1px, transparent 1px, transparent 4px); mix-blend-mode:multiply; z-index:5000; }
.desktop-brand { position:absolute; top:14px; right:18px; display:flex; gap:10px; align-items:center; z-index:2; user-select:none; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; background:var(--blue); color:#fff; border:2px outset #dce4ed; font-family:var(--mono); font-weight:700; }
.brand-ar { font-weight:800; font-size:13px; }
.brand-en { font:600 9px var(--mono); color:#4d555b; }
.desktop-icons { position:absolute; top:20px; left:20px; bottom:50px; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; gap:12px 18px; z-index:3; }
.desktop-icon { width:90px; min-height:86px; padding:5px; border:1px solid transparent; color:#101010; text-align:center; background:transparent; }
.desktop-icon:hover, .desktop-icon:focus-visible { background:rgba(255,255,255,.25); border-color:#8c969d; outline:none; }
.icon-art { width:40px; height:40px; margin:0 auto 5px; display:grid; place-items:center; font-size:28px; filter:saturate(.8); }
.icon-label { display:block; font-size:13px; font-weight:700; line-height:1.25; text-shadow:0 1px #fff; }
.window-layer { position:absolute; inset:0; z-index:10; pointer-events:none; }
.os-window { position:absolute; width:min(720px, calc(100vw - 40px)); min-height:220px; max-height:calc(100vh - 76px); background:var(--panel); border:2px outset #eee; box-shadow:7px 7px 0 rgba(0,0,0,.18); pointer-events:auto; overflow:hidden; }
.os-window.maximized { inset:0 0 42px 0 !important; width:auto !important; height:auto !important; max-height:none; }
.os-window.minimized { display:none; }
.titlebar { height:31px; background:linear-gradient(90deg, var(--blue), var(--blue-light)); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:2px 3px 2px 4px; user-select:none; }
.titlebar-caption { display:flex; align-items:center; gap:6px; min-width:0; font-weight:800; font-size:13px; }
.title-icon { width:18px; height:18px; display:inline-grid; place-items:center; background:#d9e2ec; color:#153b68; border:1px outset #fff; font-size:11px; flex:none; }
.title-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.window-controls { display:flex; gap:2px; direction:ltr; }
.win-btn { width:24px; height:22px; line-height:16px; padding:0; background:var(--panel); color:#111; border:2px outset #eee; font-family:Arial,sans-serif; font-weight:700; }
.win-btn:active { border-style:inset; }
.window-body { overflow:auto; max-height:calc(100vh - 110px); padding:12px; }
.os-window.maximized .window-body { max-height:calc(100vh - 76px); }
.app-shell { direction:rtl; }
.app-toolbar { border:2px inset #eee; background:#dfe0e1; padding:6px; display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.classic-button { background:var(--panel); color:#111; border:2px outset #fff; padding:7px 13px; min-height:36px; font-weight:700; font-size:13px; box-shadow:inset 0 0 0 1px #b1b1b1; }
.classic-button:hover { background:#d3d4d5; }
.classic-button:active { border-style:inset; }
.classic-button.primary { background:#d8e4f3; border-color:#fff; }
.classic-button.danger { color:var(--danger); }
.app-heading { font-size:20px; margin:0 0 3px; font-weight:800; }
.app-subheading { margin:0 0 12px; color:#444; font-size:13px; }
.explorer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:10px; }
.explorer-item { min-height:100px; background:#ededed; border:2px outset #fff; padding:10px; text-align:center; }
.explorer-item:hover { background:#dbe7f3; }
.explorer-icon { font-size:32px; display:block; margin-bottom:5px; }
.explorer-item strong { font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field.full { grid-column:1/-1; }
.field label { font-size:13px; font-weight:800; }
.field input, .field select, .field textarea { width:100%; background:#fff; border:2px inset #eee; padding:7px 8px; min-height:36px; color:#111; }
.field textarea { min-height:100px; resize:vertical; }
.choice-row { display:flex; flex-wrap:wrap; gap:7px; }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; width:1px; height:1px; }
.choice label { display:flex; align-items:center; gap:6px; padding:8px 11px; background:#e8e8e8; border:2px outset #fff; cursor:pointer; font-size:13px; }
.choice label:has(input:checked) { border-style:inset; background:#cfe0f3; }
.actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.notice { border:2px inset #eee; background:#f7f7f7; padding:10px; font-size:13px; margin:10px 0; }
.preview { background:#fff; border:2px inset #eee; padding:12px; white-space:pre-wrap; line-height:1.7; min-height:130px; font-size:13px; }
.history-list { display:flex; flex-direction:column; gap:7px; }
.history-item { display:flex; justify-content:space-between; align-items:center; gap:8px; border:2px outset #fff; background:#e8e8e8; padding:8px; }
.history-main { min-width:0; }
.history-main strong { display:block; font-size:12px; }
.history-main span { font-size:11px; color:#555; }
.status-box { display:flex; gap:12px; flex-wrap:wrap; border:2px inset #eee; background:#f7f7f7; padding:9px; }
.status-dot { font-weight:800; }
.status-open { color:#13731b; }
.status-closed { color:#a00000; }
.start-menu { position:absolute; right:5px; bottom:41px; width:min(420px, calc(100vw - 10px)); display:flex; z-index:6000; background:#d1d2d4; border:2px outset #fff; box-shadow:5px 5px 0 rgba(0,0,0,.28); }
.start-sidebar { width:58px; background:linear-gradient(#1b4f95,#092e5c); color:#fff; writing-mode:vertical-rl; transform:rotate(180deg); padding:10px 13px; font:700 12px var(--mono); letter-spacing:.6px; }
.start-main { flex:1; padding:8px; max-height:70vh; overflow:auto; }
.start-heading { font-size:11px; color:#555; font-weight:800; margin:4px 3px; }
.start-divider { height:2px; border-top:1px solid #888; border-bottom:1px solid #fff; margin:7px 0; }
.start-item { width:100%; display:flex; align-items:center; gap:8px; border:0; background:transparent; padding:7px; text-align:right; font-size:12px; }
.start-item:hover, .start-item:focus-visible { background:#0b4ea2; color:#fff; outline:none; }
.taskbar { position:absolute; bottom:0; left:0; right:0; height:42px; background:var(--panel); border-top:2px solid #fff; box-shadow:0 -1px 0 #777; display:flex; align-items:center; gap:5px; padding:3px; z-index:7000; }
.start-button { min-width:82px; height:34px; background:var(--panel); border:2px outset #fff; font-weight:800; }
.start-button:active { border-style:inset; }
.start-flag { display:inline-grid; place-items:center; width:18px; height:18px; background:var(--blue); color:#fff; font:700 8px var(--mono); margin-left:5px; }
.task-buttons { flex:1; display:flex; gap:4px; min-width:0; overflow:hidden; }
.task-button { max-width:190px; min-width:110px; height:32px; background:#d0d1d3; border:2px inset #eee; text-align:right; padding:4px 7px; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task-button.active { border-style:outset; background:#e3e4e5; }
.task-status { font-size:10px; white-space:nowrap; padding:0 6px; }
.clock { min-width:68px; direction:ltr; text-align:center; border:2px inset #eee; padding:4px 5px; font:600 11px var(--mono); background:#d7d8d9; }
.simple-mode .desktop-icons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; position:absolute; inset:95px 15px 55px; gap:8px; overflow:auto; }
.simple-mode .desktop-icon { width:auto; min-height:92px; }
.simple-mode .os-window { position:absolute !important; inset:auto 10px 50px 10px !important; width:auto !important; height:auto !important; max-height:calc(100vh - 100px); }
body.theme-gray { --blue:#4c5664; --blue-dark:#343c47; --blue-light:#697584; --desktop:#d7d7d5; --cyan:#9ba9b3; }
body.theme-luna { --blue:#1e66b1; --blue-dark:#104a85; --blue-light:#4f91d1; --desktop:#cddce9; --cyan:#67bfd0; }
body.grain-off .desktop::after, body.grain-off .crt-overlay { display:none; }
body.anim-off *, body.anim-off *::before, body.anim-off *::after { transition:none !important; animation:none !important; }
body.retro-cursor { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 2l6 18 4-7 7 4L2 2z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 2 2, default; }
body.retro-cursor button, body.retro-cursor a, body.retro-cursor label { cursor: pointer; }
@media (max-width: 700px) {
  body { overflow:hidden; }
  .desktop-brand { top:8px; right:10px; }
  .desktop-icons { top:62px; left:10px; right:10px; bottom:104px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; overflow:auto; }
  .desktop-icon { width:auto; min-height:78px; }
  .icon-art { font-size:24px; width:34px; height:34px; }
  .icon-label { font-size:10px; }
  .window-layer { inset:50px 0 52px; overflow:auto; }
  .os-window { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-height:none; border-left:0; border-right:0; box-shadow:none; }
  .window-body, .os-window.maximized .window-body { max-height:calc(100vh - 130px); }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .taskbar { height:52px; padding:3px; }
  .task-buttons { display:none; }
  .task-status { display:none; }
  .start-button { min-width:76px; }
  .clock { margin-right:auto; }
  .start-menu { bottom:51px; right:3px; width:calc(100vw - 6px); max-height:70vh; }
}
@media (max-width: 420px) {
  .desktop-icons { grid-template-columns:repeat(3,1fr); }
  .explorer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}