/* ============================================================
   Windows XP replica — application styles
   ============================================================ */

/* generic toolbar buttons */
.tbb{ display:flex; align-items:center; gap:4px; padding:2px 6px; border:1px solid transparent; border-radius:3px; color:#000; white-space:nowrap; }
.tbb:hover:not(.dis){ border-color:#a8c0e8; background:linear-gradient(#f4f8ff,#dce8fc); }
.tbb:active:not(.dis),.tbb.down{ border-color:#8aa8d8; background:#c8dcf8; }
.tbb.dis{ opacity:.45; }
.tbb svg{ width:20px; height:20px; }
.tb-sep{ width:1px; height:22px; background:#c8c4b8; margin:0 4px; }
.addrbar{ flex:none; display:flex; align-items:center; gap:5px; padding:3px 6px; background:var(--face2); border-bottom:1px solid #d4d0c8; }
.addrbar select,.addrbar input{ flex:1; }
.addrbar .ab-label{ color:#5a5a5a; }

/* ---------------- Notepad ---------------- */
.np-text{ position:absolute; inset:0; width:100%; height:100%; border:none; resize:none; padding:2px 4px; font:13px 'Lucida Console',monospace; -webkit-user-select:text; user-select:text; outline:none; background:#fff; color:#000; }
.np-text.wrap{ white-space:pre-wrap; word-wrap:break-word; }
.np-text.nowrap{ white-space:pre; overflow:auto; }

/* ---------------- Paint ---------------- */
.paint-wrap{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--face); }
.paint-main{ flex:1; display:flex; min-height:0; }
.paint-tools{ width:56px; flex:none; display:flex; flex-wrap:wrap; align-content:flex-start; padding:3px; gap:2px; background:var(--face); }
.ptool{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; }
.ptool:hover{ background:#e0e8f8; border-color:#a8c0e8; }
.ptool.sel{ background:#fff; border:1px solid #7f9db9; box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
.ptool svg{ width:18px; height:18px; }
.paint-toolopts{ width:56px; flex:none; padding:4px; }
.paint-canvaswrap{ flex:1; overflow:auto; background:#7f7f7f; position:relative; }
.paint-canvaspad{ position:absolute; padding:24px; }
.paint-canvas{ background:#fff; box-shadow:1px 1px 4px rgba(0,0,0,.5); image-rendering:pixelated; }
.paint-colors{ flex:none; display:flex; align-items:center; gap:6px; padding:4px 6px; background:var(--face); border-top:1px solid #d4d0c8; }
.pc-fgbg{ width:24px; height:24px; position:relative; flex:none; }
.pc-fg{ position:absolute; left:0; top:0; width:15px; height:15px; border:1px solid #000; z-index:2; }
.pc-bg{ position:absolute; right:0; bottom:0; width:15px; height:15px; border:1px solid #666; }
.pc-grid{ display:grid; grid-template-columns:repeat(14,14px); gap:2px; }
.pc-sw{ width:14px; height:14px; border:1px solid #a0a0a0; }
.pc-sw:hover{ outline:1px solid #fff; }
.paint-status{ display:flex; gap:4px; }

/* ---------------- Minesweeper ---------------- */
.ms-wrap{ position:absolute; inset:0; background:#c0c0c0; padding:6px; display:flex; flex-direction:column; }
.ms-top{ display:flex; justify-content:space-between; align-items:center; background:#c0c0c0; border:2px solid; border-color:#7b7b7b #fff #fff #7b7b7b; padding:4px 5px; margin-bottom:6px; }
.ms-led{ font-family:'Courier New',monospace; font-weight:bold; font-size:22px; color:#f00; background:#000; padding:0 3px; border:1px solid #7b7b7b; line-height:1.1; letter-spacing:1px; min-width:52px; text-align:center; }
.ms-face{ width:30px; height:30px; border:2px solid; border-color:#fff #7b7b7b #7b7b7b #fff; background:#c0c0c0; font-size:16px; display:flex; align-items:center; justify-content:center; }
.ms-face:active{ border-color:#7b7b7b #fff #fff #7b7b7b; }
.ms-grid{ display:grid; gap:0; border:3px solid; border-color:#7b7b7b #fff #fff #7b7b7b; align-self:flex-start; }
.ms-cell{ width:16px; height:16px; font:bold 12px/16px 'Courier New',monospace; text-align:center; border:2px solid; border-color:#fff #7b7b7b #7b7b7b #fff; background:#c0c0c0; cursor:default; }
.ms-cell.open{ border:1px solid #7b7b7b; }
.ms-cell.c1{color:#0000ff}.ms-cell.c2{color:#007b00}.ms-cell.c3{color:#ff0000}.ms-cell.c4{color:#00007b}
.ms-cell.c5{color:#7b0000}.ms-cell.c6{color:#007b7b}.ms-cell.c7{color:#000}.ms-cell.c8{color:#7b7b7b}
.ms-cell.boom{ background:#f00; }
.ms-cell.cursor{ outline:2px solid #ff0; outline-offset:-2px; }

/* ---------------- Explorer ---------------- */
.ex-wrap{ position:absolute; inset:0; display:flex; min-height:0; }
.ex-taskpane{ width:190px; flex:none; background:linear-gradient(to bottom,#7ba2e7 0%,#7ba2e7 60px,#9cb8ec 100%); overflow-y:auto; padding:10px 8px; }
.ex-tpgroup{ background:#fff; border-radius:5px; margin-bottom:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,60,.25); }
.ex-tphead{ background:linear-gradient(to right,#fff,#c8d8f8); color:#214aa3; font-weight:bold; padding:6px 10px; display:flex; justify-content:space-between; align-items:center; }
.ex-tphead .tph-arr{ font-size:9px; }
.ex-tpitems{ padding:5px 8px 8px; }
.ex-tpitem{ display:flex; align-items:center; gap:6px; padding:3px 2px; color:#2a4faa; }
.ex-tpitem:hover{ text-decoration:underline; color:#d05a10; }
.ex-tpitem svg{ width:15px; height:15px; flex:none; }
.ex-tpitem.dis{ color:#9099a8; text-decoration:none; }
.ex-tpdetail{ padding:3px 10px; font-size:10.5px; color:#444; line-height:1.5; }
.ex-files{ flex:1; background:#fff; overflow:auto; position:relative; min-width:0; }
.ex-pane{ display:none; position:absolute; inset:0; overflow:auto; }
.ex-pane.on{ display:block; }
.ex-icons{ display:flex; flex-wrap:wrap; align-content:flex-start; padding:8px; gap:2px; }
.ex-fi{ width:74px; padding:6px 2px 4px; text-align:center; }
.ex-fi .fi-img{ height:34px; display:flex; align-items:center; justify-content:center; }
.ex-fi .fi-img svg{ width:32px; height:32px; }
.ex-fi .fi-name{ font-size:11px; max-height:26px; overflow:hidden; word-wrap:break-word; padding:1px 2px; }
.ex-fi.sel{ background:rgba(49,106,197,.12); }
.ex-fi.sel .fi-name{ background:var(--sel); color:#fff; }
.ex-tiles .ex-fi{ width:auto; min-width:230px; display:flex; align-items:center; gap:8px; text-align:left; padding:5px 8px; }
.ex-tiles .ex-fi .fi-img svg{ width:40px; height:40px; }
.ex-tiles .ex-fi .fi-sub{ color:#808080; font-size:10.5px; }
.ex-list .ex-fi{ width:100%; display:flex; align-items:center; gap:5px; text-align:left; padding:1px 6px 1px 2px; }
.ex-list .ex-fi .fi-img{ height:auto; }
.ex-list .ex-fi .fi-img svg{ width:16px; height:16px; }
.ex-list .ex-fi .fi-name{ max-height:none; }
.ex-details{ display:table; width:100%; }
.ex-dhead{ display:flex; position:sticky; top:0; background:linear-gradient(#fff,#ecebe4); border-bottom:1px solid #d4d0c8; z-index:1; }
.ex-dhead div{ padding:3px 8px; border-right:1px solid #e0dcd0; font-size:11px; color:#333; }
.ex-drow{ display:flex; padding:0; }
.ex-drow:hover{ background:#e8f0fc; }
.ex-drow.sel{ background:var(--sel); }
.ex-drow.sel div{ color:#fff; }
.ex-drow div{ padding:2px 8px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.ex-drow .dc-ico svg{ width:15px; height:15px; }
.ex-tree{ width:190px; flex:none; background:#fff; border-right:1px solid #d4d0c8; overflow:auto; padding:4px; }
.tnode{ white-space:nowrap; }
.tnode .tn-row{ display:flex; align-items:center; gap:3px; padding:1px 2px; }
.tnode .tn-row:hover{ background:#e8f0fc; }
.tnode.sel > .tn-row{ background:var(--sel); color:#fff; }
.tnode .tn-tog{ width:10px; text-align:center; font-size:9px; color:#555; flex:none; }
.tnode .tn-ico svg{ width:15px; height:15px; }
.tnode .tn-kids{ margin-left:14px; }
.ex-searchpane{ width:220px; flex:none; background:linear-gradient(to bottom,#7ba2e7,#9cb8ec); padding:10px; overflow-y:auto; }
.ex-status{ flex:none; }

/* ---------------- IE ---------------- */
.ie-page{ position:absolute; inset:0; overflow:auto; background:#fff; }
.ie-statusbar .xprogress{ width:110px; height:11px; display:inline-block; vertical-align:middle; }
.ie-zone{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.fav-bar{ display:flex; align-items:center; gap:4px; padding:2px 6px; background:var(--face2); border-bottom:1px solid #d4d0c8; font-size:11px; }
.fav-bar .fv{ padding:1px 6px; }
.fav-bar .fv:hover{ background:#dce8fc; }

/* ---------------- WMP ---------------- */
.wmp-wrap{ position:absolute; inset:0; background:#1a1a2e; color:#cfd8ff; display:flex; font-size:11px; }
.wmp-nav{ width:150px; flex:none; background:linear-gradient(#262640,#1c1c30); border-right:1px solid #000; padding:6px 0; display:flex; flex-direction:column; }
.wmp-nav .wn-item{ padding:7px 12px; display:flex; gap:7px; align-items:center; color:#aab4e8; }
.wmp-nav .wn-item.sel{ background:linear-gradient(90deg,#3a3a6e,#26264a); color:#fff; border-left:3px solid #f7941d; padding-left:9px; }
.wmp-nav .wn-item:hover:not(.sel){ color:#fff; }
.wmp-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.wmp-stage{ flex:1; position:relative; background:#000; overflow:hidden; }
.wmp-viz{ position:absolute; inset:0; }
.wmp-album{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.wmp-album .wa-art{ width:120px; height:120px; border:1px solid #444; box-shadow:0 0 24px rgba(90,120,255,.4); }
.wmp-info{ padding:5px 12px; display:flex; justify-content:space-between; align-items:center; background:#14142a; border-top:1px solid #000; font-size:11px; }
.wmp-info .wi-title{ color:#fff; font-weight:bold; }
.wmp-info .wi-time{ color:#f7941d; font-family:'Lucida Console',monospace; }
.wmp-controls{ height:52px; flex:none; background:linear-gradient(#3a3a5e,#24243e); display:flex; align-items:center; justify-content:center; gap:8px; border-top:1px solid #10101e; }
.wmp-btn{ width:30px; height:30px; border-radius:50%; border:1px solid #56568a; background:linear-gradient(#4a4a72,#30305a); color:#cfd8ff; display:flex; align-items:center; justify-content:center; }
.wmp-btn:hover{ background:linear-gradient(#5c5c92,#40406e); color:#fff; }
.wmp-btn:active{ background:#20203e; }
.wmp-btn.big{ width:40px; height:40px; }
.wmp-btn svg{ width:14px; height:14px; }
.wmp-btn.big svg{ width:17px; height:17px; }
.wmp-btn.down{ background:#f7941d; color:#fff; border-color:#e07f10; }
.wmp-seek{ -webkit-appearance:none; width:150px; height:6px; background:#10101e; border-radius:3px; outline:none; }
.wmp-seek::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:14px; border-radius:3px; background:linear-gradient(#f7941d,#c06010); border:1px solid #804000; }
.wmp-vol{ -webkit-appearance:none; width:64px; height:5px; background:#10101e; border-radius:3px; }
.wmp-vol::-webkit-slider-thumb{ -webkit-appearance:none; width:8px; height:12px; border-radius:2px; background:#cfd8ff; }
.wmp-list{ flex:1; overflow:auto; background:#0e0e20; padding:6px; }
.wmp-track{ display:flex; gap:8px; padding:4px 8px; color:#aab4e8; }
.wmp-track:hover{ background:#20204a; }
.wmp-track.sel,.wmp-track.playing{ background:#34346a; color:#fff; }
.wmp-track .wt-n{ color:#667; width:16px; text-align:right; }

/* ---------------- Calculator ---------------- */
.calc-wrap{ position:absolute; inset:0; background:var(--face); padding:8px; display:flex; flex-direction:column; gap:7px; }
.calc-disp{ height:30px; text-align:right; font:18px 'Lucida Console',monospace; padding:3px 6px; }
.calc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
.calc-grid .btn{ min-width:0; padding:4px 0; font-size:12px; }
.calc-grid .btn.mem{ color:#0030c0; }
.calc-grid .btn.op{ color:#c03030; }
.calc-mem{ height:16px; border:1px solid #b0aca0; background:var(--face2); padding:0 5px; font-size:10px; color:#333; }

/* ---------------- CMD ---------------- */
.cmd-wrap{ position:absolute; inset:0; background:#000; color:#c0c0c0; font:13px 'Lucida Console',monospace; padding:3px 6px; overflow-y:auto; -webkit-user-select:text; user-select:text; }
.cmd-wrap .cmd-line{ white-space:pre-wrap; word-break:break-all; }
.cmd-input{ display:flex; }
.cmd-input input{ flex:1; background:transparent; border:none; color:#c0c0c0; font:inherit; outline:none; padding:0; }
.cmd-wrap .c-err{ color:#f08080; }
.cmd-wrap .c-dir{ color:#ffff80; }

/* ---------------- Task Manager ---------------- */
.tm-tabs{ padding:6px 8px 0; }
.tm-pane{ position:absolute; inset:30px 0 24px; padding:8px; background:var(--face); overflow:auto; }
.tm-list{ width:100%; border-collapse:collapse; background:#fff; }
.tm-list th{ text-align:left; font-weight:normal; border:1px solid #d4d0c8; background:linear-gradient(#fff,#ecebe4); padding:2px 6px; }
.tm-list td{ border-bottom:1px solid #eee; padding:2px 6px; }
.tm-list tr.sel td{ background:var(--sel); color:#fff; }
.tm-foot{ position:absolute; bottom:0; left:0; right:0; height:24px; display:flex; align-items:center; padding:0 8px; gap:14px; background:var(--face); border-top:1px solid #d4d0c8; }
.tm-canvas{ background:#08240a; border:1px solid #386838; width:100%; height:120px; }

/* ---------------- Common dialogs ---------------- */
.cd-places{ width:46px; flex:none; background:var(--face); border-right:1px solid #d4d0c8; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:10px; }
.cd-place{ text-align:center; font-size:9.5px; color:#333; width:42px; }
.cd-place svg{ width:26px; height:26px; }
.cd-place:hover{ color:var(--sel); }
.cd-file{ display:flex; align-items:center; gap:5px; padding:2px 4px; }
.cd-file svg{ width:15px; height:15px; }
.cd-file.sel{ background:var(--sel); color:#fff; }
.dlg-row{ display:flex; align-items:center; gap:6px; }
.dlg-row label{ flex:none; }
.msgbox{ display:flex; gap:12px; padding:14px 14px 6px; align-items:flex-start; }
.msgbox .mb-ico{ width:34px; height:34px; flex:none; }
.msgbox .mb-ico svg{ width:34px; height:34px; }
.msgbox .mb-text{ padding-top:4px; line-height:1.4; max-width:340px; -webkit-user-select:text; user-select:text; }
.dlg-btns{ display:flex; justify-content:center; gap:8px; padding:10px 0 12px; }
.dlg-btns.right{ justify-content:flex-end; padding-right:12px; }

/* Display properties */
.dp-monitor{ width:100%; display:flex; justify-content:center; padding:6px 0 10px; }
.dp-screen{ width:220px; height:160px; background:linear-gradient(#e8e8e8,#c8c8c8); border-radius:8px 8px 4px 4px; padding:14px; box-shadow:inset 0 0 0 1px #999; position:relative; }
.dp-screen .dp-disp{ width:100%; height:100%; background:#3a6ea5; border:1px solid #666; position:relative; overflow:hidden; }
.dp-stand{ position:absolute; left:50%; bottom:-16px; transform:translateX(-50%); width:60px; height:16px; background:linear-gradient(#d0d0d0,#a8a8a8); clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); }
.dp-wp-list{ height:110px; }
.dp-scheme-preview{ height:88px; border:1px solid #7f9db9; background:#fff; overflow:hidden; position:relative; }
.appearance-mini{ position:absolute; left:10px; top:8px; width:150px; border-radius:5px 5px 0 0; overflow:hidden; box-shadow:1px 1px 4px rgba(0,0,0,.4); }
.appearance-mini .am-title{ height:16px; display:flex; align-items:center; padding:0 4px; color:#fff; font-size:9px; font-weight:bold; }
.appearance-mini .am-body{ height:34px; font-size:9px; padding:3px 5px; }

/* misc */
.aboutx{ display:flex; gap:10px; padding:12px; align-items:center; }
kbd.xkey{ font:inherit; }
.hidden{ display:none !important; }
.linklike{ color:#2a4faa; }
.linklike:hover{ text-decoration:underline; color:#d05a10; }