/* ============================================================
   IKRAM'S WORLD — Windows XP "Luna" desktop homepage
   Recreates the real XP shell: Bliss wallpaper, two-column
   Start menu, glossy taskbar + start button, system tray clock.
   Self-contained — used only by index.html.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  font-size: 12px; -webkit-font-smoothing: antialiased; user-select: none;
}

/* ---------- Desktop + real Bliss wallpaper ---------- */
.desktop {
  position: absolute; left: 0; right: 0; top: 0; bottom: 30px; overflow: hidden;
  background: #5a8fd6 url("../assets/bliss.jpg") center center / cover no-repeat;
}

/* ---------- Desktop icons ---------- */
.icons {
  position: relative; z-index: 1; height: 100%; width: 100%;
}
.icon {
  position: absolute; width: 80px; padding: 5px 3px 6px;
  border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: default; text-align: center;
}
.icon.dragging { opacity: .8; z-index: 5; }
.icon svg { width: 40px; height: 40px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.4)); }
.icon .lbl {
  color: #fff; font-size: 11px; line-height: 1.2; padding: 1px 3px; max-width: 74px;
  text-shadow: 0 1px 4px rgba(0,0,0,.95), 1px 1px 1px rgba(0,0,0,.8);
}
.icon.selected { background: rgba(57,110,196,.45); border: 1px dotted rgba(255,255,255,.8); }
.icon.selected .lbl { background: #3169c6; text-shadow: none; }
.icon:focus { outline: none; }
.icon:focus .lbl { outline: 1px dotted #fff; outline-offset: 1px; }

/* ---------- Taskbar ---------- */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 30;
  display: flex; align-items: stretch;
  background: linear-gradient(to bottom,
    #1c63d6 0%, #3b86f0 3%, #2e7bee 6%, #2470e3 10%,
    #2068dd 50%, #1a5ad2 88%, #1750c6 95%, #1a55cf 100%);
  box-shadow: inset 0 1px 0 #4aa0ff, inset 0 2px 2px rgba(255,255,255,.18),
              inset 0 -1px 2px rgba(0,0,0,.25);
}

/* Start button */
.start-btn {
  position: relative; display: flex; align-items: center; gap: 5px;
  height: 100%; padding: 0 22px 2px 8px; border: 0; cursor: pointer; color: #fff;
  font-style: italic; font-weight: bold; font-size: 15px; font-family: inherit;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  border-radius: 0 8px 9px 0 / 0 9px 16px 0;
  background: linear-gradient(to bottom,
    #5db85f 0%, #4ba84d 6%, #389b3b 18%, #2f8b32 46%,
    #2b842e 52%, #348f37 82%, #4aa94d 94%, #66c268 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5),
              inset -3px 0 6px rgba(0,0,0,.28),
              inset 2px 0 1px rgba(255,255,255,.25);
}
.start-btn::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px;
  border-radius: 0 8px 9px 0 / 0 9px 16px 0;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.18));
}
.start-btn:hover { filter: brightness(1.07); }
.start-btn.open { background: linear-gradient(to bottom,#2b842e,#389b3b,#4aa84d);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45); }
.start-btn .flag { width: 19px; height: 19px; flex: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

.task-items { flex: 1; }

/* System tray + clock */
.tray {
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: linear-gradient(to bottom, #15a0ec 0%, #1391ea 8%, #0e7fd6 55%, #0a6cc0 100%);
  box-shadow: inset 1px 0 0 #4ec6ff, inset 2px 0 4px rgba(255,255,255,.18),
              inset -1px 0 2px rgba(0,0,0,.2);
  color: #fff; font-size: 11px;
}
.clock { text-shadow: 1px 1px 1px rgba(0,0,0,.4); white-space: nowrap; }

/* system-tray speaker / volume control */
.tray-vol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 21px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 3px;
}
.tray-vol:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); }
.tray-vol svg { display: block; }
.vol-popup {
  position: fixed; z-index: 1000; width: 156px; padding: 11px 12px 10px;
  background: #ece9d8; color: #11254e; font: 11px Tahoma, "Segoe UI", sans-serif;
  border: 1px solid #2a4d8f; border-bottom: 0; border-radius: 5px 5px 0 0;
  box-shadow: 0 -3px 12px rgba(0,0,0,.45);
}
.vol-popup .vp-title { font-weight: bold; text-align: center; margin-bottom: 8px; }
.vol-popup .vp-slider { width: 100%; margin: 0; accent-color: #2a6fd6; }
.vol-popup .vp-mute { display: flex; align-items: center; gap: 6px; margin-top: 9px; cursor: pointer; }
.vol-popup .vp-mute input { margin: 0; }

/* ============================================================
   START MENU
   ============================================================ */
.startmenu {
  position: absolute; left: 0; bottom: 30px; width: 400px; z-index: 40;
  border: 1px solid #0a246a; border-bottom: 0; border-radius: 8px 8px 0 0;
  overflow: hidden; box-shadow: 4px 0 16px rgba(0,0,0,.5);
}
.startmenu[hidden] { display: none; }

/* Header banner */
.sm-header {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px;
  background: linear-gradient(to bottom,
    #5b9be8 0%, #3b7fe0 10%, #2569d3 45%, #1a5cc8 90%, #2468d2 100%);
  border-bottom: 2px solid #e98c1f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.sm-header .avatar {
  width: 38px; height: 38px; border-radius: 4px; flex: none; overflow: hidden;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.sm-header .avatar svg { width: 100%; height: 100%; display: block; }
.sm-header .name {
  color: #fff; font-weight: bold; font-size: 14px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.45);
}

/* Body: two columns */
.sm-body { display: flex; }
.sm-left  { width: 54%; background: #fff; display: flex; flex-direction: column; padding: 4px 0; }
.sm-right { width: 46%; padding: 6px 0;
  background: linear-gradient(to bottom, #d9e8fb 0%, #c2d8f6 55%, #b2cbf2 100%);
  border-left: 1px solid #aac3e9; box-shadow: inset 1px 0 0 #fff; }

.sm-pins { flex: 1; }

/* Generic menu row */
.sm-item {
  display: flex; align-items: center; gap: 9px; margin: 1px 5px;
  padding: 5px 7px; border-radius: 2px; cursor: pointer;
  color: #00146e; text-decoration: none;
}
.sm-item:hover { background: #2f71d8; color: #fff; }
.sm-item:hover .sub { color: #d6e4ff; }
.sm-item .si { flex: none; display: flex; align-items: center; justify-content: center; }
.sm-item .si svg { display: block; }

/* Left pinned program rows (icon + title + subtitle) */
.sm-left .sm-item .si { width: 30px; height: 30px; }
.sm-left .sm-item .si svg { width: 30px; height: 30px; }
.sm-left .sm-item .txt { display: flex; flex-direction: column; line-height: 1.25; }
.sm-left .sm-item .title { color: #1a1a1a; font-size: 11.5px; }
.sm-left .sm-item:hover .title { color: #fff; }
.sm-left .sm-item .sub { color: #808080; font-size: 10.5px; }

/* Right column rows */
.sm-right .sm-item .si { width: 24px; height: 24px; }
.sm-right .sm-item .si svg { width: 24px; height: 24px; }
.sm-right .sm-item { color: #0a347b; font-size: 11.5px; }
.sm-right .sm-item.bold { font-weight: bold; }
.sm-rsep { height: 0; border-top: 1px solid #a8c3ea; box-shadow: 0 1px 0 #fff; margin: 5px 12px; }

/* All Programs row */
.sm-allprograms {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin: 2px 5px 0; padding: 7px 9px; border-top: 1px solid #d2d2d2;
  font-weight: bold; font-size: 11.5px; color: #1a1a1a; cursor: default;
}
.sm-allprograms .ap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px; border-radius: 3px; color: #fff; font-weight: bold;
  background: linear-gradient(to bottom, #5cb85f, #2f8a33);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* Footer bar */
.sm-foot {
  display: flex; justify-content: flex-end; gap: 14px; padding: 7px 14px;
  background: linear-gradient(to bottom, #3b7fe0 0%, #2569d3 50%, #1a5cc8 100%);
  border-top: 2px solid #e98c1f; box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.sm-foot button {
  display: flex; align-items: center; gap: 7px; background: transparent; border: 0;
  color: #fff; cursor: pointer; font-family: inherit; font-size: 11.5px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4); padding: 2px 4px; border-radius: 3px;
}
.sm-foot button:hover { background: rgba(255,255,255,.18); }
.sm-foot .fi { width: 22px; height: 22px; flex: none; }
.sm-foot .fi svg { width: 22px; height: 22px; display: block; }

/* ============================================================
   XP message box (dialog)
   ============================================================ */
.modal {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.22);
}
.modal[hidden] { display: none; }
.win {
  width: 360px; background: #ece9d8; border-radius: 8px 8px 0 0;
  border: 1px solid #0831b9; box-shadow: 4px 4px 18px rgba(0,0,0,.5); overflow: hidden;
}
.win .titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 5px 4px 9px; color: #fff; font-weight: bold; font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  background: linear-gradient(to bottom, #0c5ae6 0%, #3182f2 8%, #1c66dd 45%, #0a45c3 100%);
}
.win .titlebar .x {
  width: 21px; height: 20px; border: 1px solid #fff; border-radius: 3px;
  background: linear-gradient(#f06a6a, #c62828); color: #fff; font-weight: bold;
  cursor: pointer; line-height: 1; font-size: 12px;
}
.win .content { display: flex; gap: 13px; padding: 18px 16px 6px; font-size: 12px; color: #000; }
.win .content .qico { font-size: 30px; flex: none; line-height: 1; }
.win .actions { padding: 12px 16px 16px; text-align: right; }
.win .actions button {
  min-width: 80px; padding: 4px 14px; cursor: pointer; font-size: 11.5px;
  font-family: inherit; color: #000; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#fdfdfd, #d6deea);
}
.win .actions button:hover { border-color: #e98c1f; }

/* ============================================================
   APP WINDOWS (Programs folder, Calculator, Minesweeper)
   Draggable desktop windows styled like the XP message box.
   ============================================================ */
.appwin {
  position: absolute; z-index: 50; background: #ece9d8;
  min-width: 160px; min-height: 110px;
  display: flex; flex-direction: column;
  border: 1px solid #0831b9; border-top: 0; border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 14px rgba(0,0,0,.5);
}
.appwin .tb { flex: none; }
.appwin .tb {
  display: flex; align-items: center; gap: 6px; cursor: default;
  padding: 3px 4px 3px 7px; color: #fff; font-weight: bold; font-size: 12px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4); border-radius: 7px 7px 0 0;
  background: linear-gradient(to bottom, #0c5ae6 0%, #3182f2 8%, #1c66dd 45%, #0a45c3 100%);
}
.appwin.blur .tb {
  background: linear-gradient(to bottom, #7fa6dd 0%, #6f97d4 50%, #5d83c2 100%);
}
.appwin .tb-ico { width: 16px; height: 16px; flex: none; display: flex; }
.appwin .tb-ico svg { width: 16px; height: 16px; display: block; }
.appwin .tb-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appwin .tb-btns { display: flex; gap: 2px; }
.appwin .tb-btns button {
  width: 18px; height: 18px; padding: 0; cursor: pointer; font-family: inherit;
  font-weight: bold; font-size: 11px; line-height: 1; color: #fff;
  border: 1px solid #fff; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
}
.appwin .tb-btns .min { background: linear-gradient(#5b9be8, #1c66dd); }
.appwin .tb-btns .cls { background: linear-gradient(#f06a6a, #c62828); }
.appwin .tb-btns button:hover { filter: brightness(1.12); }
.appwin .appbody { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; padding: 0; }
.appwin .appbody.fill { overflow: hidden; }
.appwin .appbody.fill > * { width: 100%; height: 100%; box-sizing: border-box; }  /* grow-to-fill apps */
.appwin.fixed .rsz, .appwin.fixed .tb-btns .max { display: none; }                /* non-resizable apps */
.appwin.minimized { display: none; }
.appwin .tb-btns .max { background: linear-gradient(#5b9be8, #1c66dd); }
.appwin.maximized { border-radius: 0; }
.appwin.maximized .tb { border-radius: 0; }
.appwin.maximized .rsz { display: none; }

/* Resize handles (8-way, like XP) */
.appwin .rsz { position: absolute; z-index: 6; }
.appwin .rsz.n  { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.appwin .rsz.s  { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.appwin .rsz.e  { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.appwin .rsz.w  { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.appwin .rsz.ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.appwin .rsz.nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.appwin .rsz.se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.appwin .rsz.sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }

/* ---------- Taskbar app buttons ---------- */
.task-items { display: flex; align-items: center; gap: 3px; padding: 2px 4px; overflow: hidden; }
.task-btn {
  display: flex; align-items: center; gap: 5px; height: 23px; max-width: 160px;
  padding: 0 9px; color: #fff; font-size: 11px; font-family: inherit; cursor: pointer;
  border: 1px solid #2459b8; border-radius: 3px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  text-shadow: 1px 1px 1px rgba(0,0,0,.35);
  background: linear-gradient(to bottom, #3d8bf2, #1a5fd0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.task-btn .ti { width: 14px; height: 14px; flex: none; display: flex; }
.task-btn .ti svg { width: 14px; height: 14px; }
.task-btn.active { background: linear-gradient(to bottom, #15489f, #1f63cf);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }

/* ---------- Programs folder window ---------- */
.folder {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px;
  width: 232px; min-height: 120px; padding: 8px; background: #fff;
  border: 1px solid #7f9db9;
}
.folder-item {
  width: 100px; padding: 8px 4px; cursor: default; color: #00146e;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; border: 1px solid transparent; border-radius: 3px;
}
.folder-item:hover { background: #eaf1ff; }
.folder-item.selected { background: rgba(57,110,196,.22); border: 1px dotted #3169c6; }
.folder-item svg { width: 36px; height: 36px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.25)); }
.folder-item .fl { font-size: 11px; line-height: 1.2; }

/* ---------- Calculator ---------- */
.calc { width: 196px; }
.calc .disp {
  margin-bottom: 6px; padding: 5px 8px; height: 32px; overflow: hidden;
  text-align: right; font-size: 18px; color: #000;
  font-family: "Lucida Console", Consolas, monospace;
  background: #fff; border: 2px inset #b9b9a8;
}
.calc .keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.calc button {
  height: 30px; cursor: pointer; font-family: inherit; font-size: 13px; color: #000;
  border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#fdfdfd, #dbe3ef);
}
.calc button:hover { border-color: #e98c1f; }
.calc button:active { background: linear-gradient(#cdd7e6, #fdfdfd); }
.calc button.op { font-weight: bold; color: #0a3a8b; }
.calc button.fn { color: #b00; }
.calc button.eq { font-weight: bold; background: linear-gradient(#ffd35a, #f0a830); }
.calc button.eq:hover { filter: brightness(1.05); }

/* ---------- Minesweeper ---------- */
.ms { background: #c0c0c0; border: 3px outset #fdfdfd; padding: 6px; }
.ms .ms-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px; margin-bottom: 6px; background: #c0c0c0; border: 2px inset #fdfdfd;
}
.ms .led {
  min-width: 50px; padding: 1px 5px; text-align: right; letter-spacing: 1px;
  font-family: "Lucida Console", Consolas, monospace; font-weight: bold; font-size: 20px;
  color: #ff1f1f; background: #000; border: 1px inset #555;
}
.ms .smiley {
  width: 32px; height: 32px; padding: 0; font-size: 17px; line-height: 1; cursor: pointer;
  background: #c0c0c0; border: 2px outset #fdfdfd;
}
.ms .smiley:active { border-style: inset; }
.ms .grid { border: 3px inset #fdfdfd; background: #c0c0c0; }
.ms .cell {
  width: 22px; height: 22px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 14px; font-family: Tahoma, sans-serif; cursor: pointer;
  background: #c0c0c0; border: 2px outset #fdfdfd; user-select: none;
}
.ms .cell.open { border: 1px solid #9a9a9a; background: #bdbdbd; cursor: default; }
.ms .cell.flag { color: #d40000; }
.ms .cell.boom { background: #ff2020; }
.ms .cell.mine { color: #000; }
.ms .n1 { color: #0000ff; } .ms .n2 { color: #008000; } .ms .n3 { color: #ff0000; }
.ms .n4 { color: #000080; } .ms .n5 { color: #800000; } .ms .n6 { color: #008080; }
.ms .n7 { color: #000000; } .ms .n8 { color: #808080; }

/* ---------- All Programs flyout ---------- */
.sm-allprograms { cursor: pointer; }
.sm-allprograms:hover, .sm-allprograms.open { background: #2f71d8; color: #fff; }
.allprograms-flyout {
  position: absolute; left: 6px; bottom: 46px; width: 216px; z-index: 6;
  background: #fff; border: 1px solid #7f97bd; border-radius: 2px;
  box-shadow: 3px 3px 12px rgba(0,0,0,.4); padding: 4px;
}
.allprograms-flyout[hidden] { display: none; }
.apf-head {
  font-size: 10px; font-weight: bold; color: #5d6f8c; text-transform: uppercase;
  letter-spacing: .04em; padding: 6px 8px 2px;
}
.apf-sep { height: 1px; background: #e2e8f2; margin: 4px 6px; }
.apf-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 2px; cursor: pointer; font-size: 11.5px; color: #1a1a1a;
}
.apf-item:hover { background: #2f71d8; color: #fff; }
.apf-item .si { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; }
.apf-item .si svg { width: 24px; height: 24px; }

/* ---------- Notepad ---------- */
.notepad { width: 100%; height: 100%; }
.notepad .np-area {
  display: block; width: 100%; height: 100%; box-sizing: border-box;
  padding: 4px 6px; font-family: "Lucida Console", Consolas, monospace; font-size: 12px;
  color: #000; background: #fff; border: 1px inset #b9b9a8;
}

/* ---------- Solitaire ---------- */
.sol { user-select: none; display: flex; flex-direction: column; }
.sol-bar { display: flex; gap: 6px; margin-bottom: 6px; flex: none; }
.sol-bar button {
  padding: 3px 12px; cursor: pointer; font-family: inherit; font-size: 11.5px;
  color: #000; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(#fdfdfd, #dbe3ef);
}
.sol-bar button:hover { border-color: #e98c1f; }
.sol-board {
  position: relative; padding: 10px; border: 2px inset #3fae63;
  background: linear-gradient(#1f8a43, #14692c);
  flex: 1 1 auto; min-height: 0; overflow: auto;
}
.sol-top { display: flex; gap: 10px; margin-bottom: 12px; }
.sol-top .pile { position: relative; }
.sol-gap { flex: 1; }
.sol-tableau { display: flex; gap: 10px; align-items: flex-start; }
.sol-col { width: 64px; min-height: 340px; position: relative; }
.pile { width: 64px; height: 88px; border-radius: 5px; box-sizing: border-box; }
.pile.slot { border: 1px dashed rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.sol-stock { cursor: pointer; }
.sol-stock.recycle {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75); font-size: 28px;
  border: 1px dashed rgba(255,255,255,.5); background: rgba(255,255,255,.08);
}
.card {
  position: absolute; left: 0; top: 0; width: 64px; height: 88px; box-sizing: border-box;
  border-radius: 5px; background: #fff; border: 1px solid #6b7785;
  box-shadow: 0 1px 2px rgba(0,0,0,.35); font-family: Arial, sans-serif;
}
.card.red { color: #c81414; }
.card.black { color: #111; }
.card .corner {
  position: absolute; top: 3px; left: 5px; display: flex; flex-direction: column;
  align-items: center; line-height: 1.05; font-weight: bold; font-size: 13px;
}
.card .big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.card.down {
  background: #2f6fd0; border: 1px solid #16357f;
  background-image: repeating-linear-gradient(45deg, #2f6fd0 0 6px, #2861bd 6px 12px);
}
.card.movable { cursor: grab; }
.card.sel { outline: 2px solid #ffd34e; outline-offset: -1px; box-shadow: 0 0 9px 1px rgba(255,211,78,.9); }

/* Drag and drop */
.card.lift { visibility: hidden; }            /* the cards being dragged (ignored by hit-testing) */
.sol-ghost {                                   /* floating copy that follows the cursor */
  position: fixed; z-index: 9999; width: 64px; pointer-events: none;
  filter: drop-shadow(2px 4px 5px rgba(0,0,0,.45));
}
body.sol-grabbing, body.sol-grabbing * { cursor: grabbing !important; }

/* ---------- Internet Explorer ---------- */
.ie { display: flex; flex-direction: column; height: 100%; background: #fff;
  font-family: Tahoma, sans-serif; font-size: 11px; color: #000; }
.ie-menu { flex: none; display: flex; gap: 14px; padding: 3px 10px;
  background: #ece9d8; border-bottom: 1px solid #d4d0c8; }
.ie-menu > span { cursor: default; padding: 0 2px; }
.ie-menu > span:hover { background: #2f71d8; color: #fff; }
.ie-tools { flex: none; display: flex; align-items: center; gap: 3px; padding: 4px 8px;
  background: linear-gradient(#f8f7f4, #e4e0d5); border-bottom: 1px solid #b5b0a3; }
.ie-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  font-family: inherit; font-size: 11px; color: #000; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 3px; }
.ie-btn:hover:not(:disabled) { border-color: #a7c1e8; background: #e8f0fc; }
.ie-btn:active:not(:disabled) { background: #d3e2f7; }
.ie-btn:disabled { color: #a6a6a6; cursor: default; }
.ie-btn.ie-icon { font-size: 13px; padding: 3px 8px; }
.ie-newtab { margin-left: 6px; color: #1c52b8; }
.ie-throb { width: 16px; height: 16px; margin-left: auto; flex: none; border-radius: 50%;
  border: 2px solid #e6d27a; border-top-color: #1c6fd6; opacity: 0; }
.ie.loading .ie-throb { opacity: 1; animation: ieSpin .7s linear infinite; }
@keyframes ieSpin { to { transform: rotate(360deg); } }
.ie-addr { flex: none; display: flex; align-items: center; gap: 7px; padding: 2px 8px 6px;
  background: linear-gradient(#f8f7f4, #e4e0d5); border-bottom: 1px solid #b5b0a3; }
.ie-addr label { color: #5a5a5a; }
.ie-url { flex: 1; min-width: 0; padding: 3px 7px; font-family: inherit; font-size: 12px;
  border: 1px solid #7f9db9; background: #fff; }
.ie-go { padding: 3px 14px; font-family: inherit; font-size: 11px; cursor: pointer; color: #000;
  border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fdfdfd, #dbe3ef); }
.ie-go:hover { border-color: #e98c1f; }
.ie-links { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px 4px;
  background: linear-gradient(#f8f7f4, #e4e0d5); border-bottom: 1px solid #b5b0a3; }
.ie-links-label { color: #5a5a5a; margin-right: 6px; }
.ie-links button { padding: 2px 9px; font-family: inherit; font-size: 11px; cursor: pointer;
  color: #1c52b8; background: transparent; border: 1px solid transparent; border-radius: 3px; }
.ie-links button:hover { border-color: #a7c1e8; background: #e8f0fc; }
.ie-view { flex: 1 1 auto; min-height: 0; background: #fff; }
.ie-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.ie-status { flex: none; padding: 3px 9px; background: #ece9d8; border-top: 1px solid #d4d0c8;
  color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- IE menu bar: real dropdowns --- */
.ie { position: relative; }
.ie-menu { position: relative; z-index: 60; }
.ie-m { position: relative; }
.ie-m.open { background: #2f71d8; color: #fff; }
.ie-menuveil { position: absolute; inset: 0; z-index: 40; background: transparent; }
.ie-dd { position: absolute; top: 100%; left: -2px; z-index: 70; min-width: 190px; padding: 2px;
  background: #fff; border: 1px solid #8f8f8f; box-shadow: 2px 2px 4px rgba(0,0,0,.35);
  color: #000; font-size: 11px; white-space: nowrap; text-align: left; }
.ie-dd-it { position: relative; display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 4px 14px 4px 4px; font-family: inherit; font-size: 11px; text-align: left;
  color: #000; background: transparent; border: 0; cursor: default; }
.ie-dd-it:hover { background: #316ac5; color: #fff; }
.ie-dd-it .chk { width: 14px; flex: none; text-align: center; }
.ie-dd-it .lbl { flex: 1 1 auto; }
.ie-dd-it .arr { flex: none; margin-left: 12px; }
.ie-dd-sep { height: 1px; margin: 3px 2px; background: #d7d7d7; }
.ie-dd-sub { top: -3px; left: 100%; }

/* --- IE dialogs (Find, Internet Options, About, Tips, Organize Favorites) --- */
.ie-dlg { padding: 12px; font-family: Tahoma, sans-serif; font-size: 11px; color: #000; background: #ece9d8; }
.ie-dlg input[type=text] { padding: 3px 6px; font-family: inherit; font-size: 12px; border: 1px solid #7f9db9; }
.ie-dlg button { padding: 3px 14px; font-family: inherit; font-size: 11px; cursor: pointer; color: #000;
  border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fdfdfd, #dbe3ef); }
.ie-dlg button:hover { border-color: #e98c1f; }
.ie-dlg-btnrow { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }
.ie-dlg fieldset { border: 1px solid #aca899; border-radius: 3px; }
.ie-dlg legend { padding: 0 4px; }
.ie-dlg .dlg-ico { width: 40px; height: 40px; flex: none; }
.ie-dlg .dlg-ico svg { width: 100%; height: 100%; }
.ie-org .row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; }
.ie-org .row .fl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.ie-src { margin: 0; padding: 10px; font: 11px/1.5 "Courier New", monospace; white-space: pre-wrap;
  word-break: break-all; background: #fff; color: #000; height: 100%; overflow: auto; box-sizing: border-box; }

/* While dragging/resizing a window, don't let iframes capture the mouse */
.win-dragging { user-select: none; }
.win-dragging iframe { pointer-events: none; }

@media (max-width: 520px) {
  .startmenu { width: 100%; }
}