/* ============================================================
   v6 OS module: DR/OS 95 (1995–2000) — desktop, start menu with
   submenus, real window chrome (min/max/resize), era apps
   ============================================================ */
#os-95 {
  position: absolute; inset: 0; display: none;
  background: var(--d-desk, #2a7a72);
  font-family: var(--mono);
  --d-win: #dedbd2; --d-ink: #171717;
}
#os-95.on { display: block; }
#os-95 .desk-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size: 8px 8px; }

/* boot splash */
#os95-boot {
  position: absolute; inset: 0; z-index: 50;
  background: #0d1218; color: #cfd6dd;
  display: grid; place-items: center; text-align: center;
  transition: opacity .4s ease;
}
#os95-boot.gone { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
#os95-boot .eb { display: grid; gap: 16px; justify-items: center; }
#os95-boot .logo { font-size: 26px; font-weight: 700; letter-spacing: .05em; }
#os95-boot .logo i { font-style: normal; color: #7fd4c4; }
#os95-boot .bar { width: 220px; height: 14px; border: 1px solid #cfd6dd; padding: 2px; }
#os95-boot .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #7fd4c4 0 12px, transparent 12px 16px); transition: width .3s ease; }
#os95-boot .ln { font-size: 13px; opacity: .75; min-height: 1.2em; }

/* taskbar */
#os95-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px; z-index: 40;
  background: var(--d-win); color: var(--d-ink);
  border-top: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 -2px 0 rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  font-size: 13px;
}
#os95-go {
  display: flex; align-items: center; gap: 6px; flex: none;
  background: var(--d-win); font-weight: 700; font-family: var(--mono);
  border: 2px solid; border-color: #fff #6f6d64 #6f6d64 #fff;
  padding: 5px 14px; min-height: 34px; font-size: 13px;
}
#os95-go:active, #os95-go.open { border-color: #6f6d64 #fff #fff #6f6d64; }
#os95-tabs { flex: 1; display: flex; gap: 5px; overflow: hidden; }
.wtab {
  display: flex; align-items: center; gap: 6px;
  border: 2px solid; border-color: #fff #6f6d64 #6f6d64 #fff;
  padding: 4px 9px; font-size: 12px; font-family: var(--mono);
  max-width: 150px; min-width: 0; white-space: nowrap; overflow: hidden;
  background: var(--d-win); min-height: 32px;
}
.wtab .wtab-t { overflow: hidden; text-overflow: ellipsis; }
.wtab.act { border-color: #6f6d64 #fff #fff #6f6d64; background: rgba(0,0,0,.06); font-weight: 700; }
.wtab.minned { color: #55534c; font-style: italic; }
#os95-tray { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.3); border-color: #6f6d64 #fff #fff #6f6d64; padding: 4px 10px; font-size: 12px; flex: none; }
#os95-net { cursor: pointer; }

/* start menu (nested) */
#os95-menu {
  position: absolute; left: 8px; bottom: 48px; z-index: 45; width: 250px;
  background: var(--d-win); color: var(--d-ink);
  border: 2px solid; border-color: #fff #55534c #55534c #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  display: none;
}
#os95-menu.on { display: flex; }
#os95-menu .side {
  width: 30px; flex: none; background: var(--d-tb, linear-gradient(180deg, #1e5f58, #35948a));
  color: #fff; writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: flex-start;
  font-weight: 700; font-size: 13px; letter-spacing: .12em; padding: 10px 0;
}
#os95-menu .items { flex: 1; padding: 4px; }
.m95-item { position: relative; }
.m95-item > button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 8px; font-size: 13px; font-family: var(--mono); text-align: left;
  min-height: 40px;
}
.m95-item > button .mi { width: 22px; text-align: center; font-size: 16px; flex: none; }
.m95-item > button .ml { flex: 1; }
.m95-item > button .arr { color: #55534c; font-size: 11px; }
.m95-item > button:hover, .m95-item.open > button { background: #1e5f58; color: #fff; }
.m95-item.open > button .arr, .m95-item > button:hover .arr { color: #fff; }
.m95-sub {
  display: none; position: absolute; left: calc(100% - 4px); top: -4px; width: 210px;
  background: var(--d-win); border: 2px solid; border-color: #fff #55534c #55534c #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35); padding: 4px; z-index: 5;
}
.m95-item.open > .m95-sub { display: block; }
.m95-empty { padding: 10px; font-size: 11.5px; color: #6e6b62; }
#os95-menu .sep { height: 1px; background: #a5a29a; margin: 4px 2px; }
/* narrow screens: submenus open inline instead of flying out */
@media (max-width: 620px) {
  #os95-menu { width: min(280px, calc(100% - 16px)); max-height: 70%; overflow-y: auto; }
  .m95-sub { position: static; width: auto; box-shadow: none; border-width: 0 0 0 2px; border-color: #a5a29a; margin-left: 14px; }
}
/* short screens (landscape phones): same inline treatment + height clamp */
@media (max-height: 560px) {
  #os95-menu { max-height: calc(100% - 58px); overflow-y: auto; }
  .m95-sub { position: static; width: auto; box-shadow: none; border-width: 0 0 0 2px; border-color: #a5a29a; margin-left: 14px; }
}

/* desktop icons */
#os95-icons { position: absolute; top: 14px; left: 14px; bottom: 56px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 10px; z-index: 5; }
.dicon { width: 92px; text-align: center; color: #fff; font-size: 11.5px; padding: 6px 2px; border: 1px dashed transparent; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-family: var(--mono); }
.dicon:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }
.dicon .g { display: block; font-size: 28px; margin-bottom: 4px; }
@media (max-width: 620px) { .dicon { width: 76px; font-size: 10.5px; } .dicon .g { font-size: 24px; } }

/* ============ windows (shared WM chrome, 95 skin) ============ */
#os-95 .win {
  position: absolute; z-index: 10;
  background: var(--d-win); color: var(--d-ink);
  border: 2px solid; border-color: #fff #55534c #55534c #fff;
  box-shadow: 4px 5px 0 rgba(0,0,0,.3);
  min-width: 230px; max-width: min(560px, calc(100% - 12px));
  max-height: calc(100% - 52px);
  display: flex; flex-direction: column;
}
#os-95 .win.pop { animation: win-pop .16s ease-out; }
@keyframes win-pop { from { transform: scale(.92); opacity: 0; } }
#os-95 .win.focus { z-index: 20; }
#os-95 .win.max { inset: 4px 4px 48px 4px !important; width: auto !important; height: auto !important; max-width: none; }
#os-95 .win-tb {
  display: flex; align-items: center; gap: 7px; flex: none;
  background: var(--d-tb, linear-gradient(90deg, #1e5f58, #35948a)); color: #fff;
  padding: 4px 4px 4px 9px; font-size: 12.5px; font-weight: 700; cursor: grab; user-select: none;
}
#os-95 .win:not(.focus) .win-tb { background: linear-gradient(90deg, #7a7a74, #9a9a92); }
#os-95 .win-ic { font-size: 13px; }
#os-95 .win-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#os-95 .win-btns { display: flex; gap: 3px; }
#os-95 .win-btn {
  width: 24px; height: 22px; display: grid; place-items: center;
  background: var(--d-win); color: var(--d-ink);
  border: 2px solid; border-color: #fff #55534c #55534c #fff;
  font-size: 11px; font-weight: 700; cursor: pointer; padding: 0;
  font-family: var(--mono); line-height: 1;
}
#os-95 .win-btn:active { border-color: #55534c #fff #fff #55534c; }
#os-95 .win-body { padding: 12px; font-size: 13px; line-height: 1.6; overflow: auto; flex: 1; min-height: 0; }
#os-95 .win-body p { margin-bottom: 8px; }
#os-95 .win-rz {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
  background: repeating-linear-gradient(135deg, transparent 0 3px, #8a877c 3px 5px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* era modal dialogs (validation errors, shutdown…) */
.wm-modal { position: absolute; inset: 0; z-index: 60; background: rgba(20,20,20,.25); display: grid; place-items: center; }
#os-95 .wm-dlg {
  width: min(360px, calc(100% - 30px));
  background: var(--d-win); color: var(--d-ink);
  border: 2px solid; border-color: #fff #55534c #55534c #fff;
  box-shadow: 5px 6px 0 rgba(0,0,0,.35);
}
#os-95 .wm-dlg .win-tb { cursor: default; }
.wm-dlg-body { display: flex; gap: 14px; padding: 16px 14px; align-items: flex-start; }
.wm-dlg-ic { font-size: 30px; line-height: 1; }
.wm-dlg-txt { font-size: 12.5px; line-height: 1.6; font-family: var(--mono); }
.wm-dlg-btns { display: flex; justify-content: center; gap: 8px; padding: 0 14px 14px; flex-wrap: wrap; }
#os-95 .wm-dlg-btn {
  border: 2px solid; border-color: #fff #55534c #55534c #fff;
  background: var(--d-win); padding: 7px 18px; font-family: var(--mono);
  font-size: 12.5px; min-height: 38px; min-width: 84px; font-weight: 700;
}
#os-95 .wm-dlg-btn:active { border-color: #55534c #fff #fff #55534c; }
#os-95 .wm-dlg-btn.primary { outline: 1.5px solid #171717; outline-offset: -5px; }

/* ---------- app bits ---------- */
.np-intro { color: #6e6b62; font-size: 12px; }
#story-lines .sline { padding: 3px 6px; margin-bottom: 2px; }
#story-lines .sline .yr { color: #6e6b62; margin-right: 8px; font-weight: 700; }
#story-lines .sline.cur-beat { background: #1e5f58; color: #fff; }
#story-lines .sline.cur-beat .yr { color: #a8d8cf; }

.bm { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed #b5b2a9; }
.bm:last-child { border-bottom: none; }
.bm .g { font-size: 18px; }
.bm a { color: #0a2fa1; font-family: var(--mono); font-size: 13.5px; }
.bm a:visited { color: #6b21a8; }

.cform-mini { display: grid; gap: 8px; }
.cform-mini label { font-size: 11px; color: #55534c; display: grid; gap: 3px; font-family: var(--mono); }
.cform-mini input, .cform-mini textarea, .in95 {
  border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64;
  background: #fff; color: #171717; padding: 8px 10px; font: inherit; font-size: 13px; outline: none;
  font-family: var(--mono); width: 100%;
}
.cform-mini textarea { min-height: 64px; resize: vertical; }
.c95-note { font-size: 11px; color: #1e5f58; font-weight: 700; }
.btn95 {
  border: 2px solid; border-color: #fff #55534c #55534c #fff;
  background: var(--d-win); color: var(--d-ink); padding: 7px 16px; font-family: var(--mono);
  font-size: 12.5px; min-height: 38px; font-weight: 700;
}
.btn95:active { border-color: #55534c #fff #fff #55534c; }
.btn95.shake { animation: shake95 .3s ease; }
@keyframes shake95 { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; align-items: center; flex-wrap: wrap; }

/* beat text typed inside year windows */
.beat-line { margin-top: 10px; font-size: 11px; color: #6e6b62; font-family: var(--mono); }
.beat-txt { margin-top: 6px; padding: 7px 9px; background: #fffbe1; border: 1.5px solid #b5a865; font-size: 12.5px; line-height: 1.55; font-family: var(--mono); }

/* Paint */
.pt-wrap { display: flex; gap: 8px; }
.pt-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: start; flex: none; }
.pt-tools span { width: 26px; height: 26px; display: grid; place-items: center; border: 2px solid; border-color: #fff #55534c #55534c #fff; font-size: 13px; background: var(--d-win); }
.pt-tools span.on { border-color: #55534c #fff #fff #55534c; background: #cfccc2; }
#pt-cv { border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64; background: #fff; width: 100%; height: auto; min-width: 0; }
.pt-pal { display: flex; gap: 3px; margin-top: 8px; }
.pt-pal span { width: 20px; height: 20px; border: 2px solid; border-color: #fff #55534c #55534c #fff; }
.pt-pal span.on { outline: 2px solid #171717; outline-offset: 1px; }

/* found dialog / generic dlg95 */
.dlg95 { display: flex; gap: 14px; align-items: flex-start; }
.dlg95 .dlg-ic { font-size: 30px; }
.dlg95 > div { flex: 1; min-width: 0; }
.dlg-txt { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; line-height: 1.6; margin: 2px 0 4px; }

/* hardware wizard */
.hw-steps { min-height: 96px; display: grid; gap: 6px; align-content: start; font-size: 12.5px; }
.hw-bar { height: 14px; border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64; background: #fff; padding: 2px; margin-top: 10px; }
.hw-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #1e5f58 0 10px, transparent 10px 13px); transition: width .4s ease; }

/* printer queue */
.pq { width: 100%; border-collapse: collapse; font-size: 12px; }
.pq th, .pq td { border: 1px solid #b5b2a9; padding: 6px 8px; text-align: left; font-family: var(--mono); }
.pq th { background: #cfccc2; font-size: 11px; }
.pq-st.stuck { color: #b03a2e; font-weight: 700; }
.pq-st.done { color: #146c14; font-weight: 700; }

/* photos */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.ph { background: #fff; padding: 7px 7px 8px; border: 1px solid #b5b2a9; box-shadow: 2px 3px 0 rgba(0,0,0,.2); }
.ph image-slot { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.ph figcaption { font-size: 10.5px; color: #55534c; margin-top: 6px; text-align: center; font-family: var(--mono); }
.ph-note { margin-top: 10px; font-size: 11px; color: #6e6b62; text-align: center; }

/* my computer */
.mc-row { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed #b5b2a9; }
.mc-row:last-child { border: none; }
.mc-row .mc-ic { font-size: 22px; }
.mc-row b { display: block; font-size: 13px; }
.mc-row small { color: #6e6b62; font-size: 11px; }

/* dial-up */
.du-anim { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 26px; margin-bottom: 10px; }
.du-dots { display: flex; gap: 5px; }
.du-dots i { width: 6px; height: 6px; border-radius: 50%; background: #55534c; animation: dud 1s ease-in-out infinite; }
.du-dots i:nth-child(2) { animation-delay: .18s; }
.du-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dud { 50% { opacity: .2; transform: translateY(-3px); } }
.du-lines { font-size: 12px; display: grid; gap: 5px; font-family: var(--mono); }
.du-done { color: #146c14; font-weight: 700; }

/* CD player */
.cd-row { display: flex; gap: 12px; align-items: center; }
.cd-disc { font-size: 30px; }
.cd-disc.spin { animation: cdspin 2.4s linear infinite; display: inline-block; }
@keyframes cdspin { to { transform: rotate(360deg); } }
.cd-info b { display: block; font-size: 12.5px; }
.cd-info small { color: #6e6b62; font-size: 11px; }

/* defrag */
.df-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; }
.df-grid i { aspect-ratio: 1; background: #b7c8e0; }
.df-grid i.f { background: #2a5aa0; animation: dfrag 6s steps(2) infinite; }
@keyframes dfrag { 50% { background: #b7c8e0; } }

/* run */
.run-row { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; margin-bottom: 10px; }
.run-row .run-ic { font-size: 22px; }

/* ---------- SOLITAIRE ---------- */
.sol-felt {
  background: linear-gradient(180deg, #1e7a4a, #145c36);
  border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64;
  padding: 10px; user-select: none;
}
.sol-cols { display: flex; gap: 6px; align-items: flex-start; }
.sol-col { flex: 1; min-height: 100px; position: relative; }
.sol-slot { width: 100%; aspect-ratio: 5/7; border-radius: 4px; border: 1.5px dashed rgba(255,255,255,.35); }
.sol-card {
  width: 100%; aspect-ratio: 5/7; border-radius: 4px;
  background: #fdfdf6; border: 1px solid #55534c;
  box-shadow: 0 1px 0 rgba(0,0,0,.4);
  font-family: var(--mono); font-weight: 700;
  padding: 2px 4px; font-size: clamp(10px, 2.1vw, 13px);
  line-height: 1.1; cursor: pointer; position: relative;
}
.sol-card.red { color: #c0392b; }
.sol-card.black { color: #1c1c1c; }
.sol-card.down { background: repeating-linear-gradient(45deg, #3a6ea5 0 4px, #2f5d8d 4px 8px); color: transparent; }
.sol-card .big { position: absolute; bottom: 4px; right: 5px; font-size: 1.5em; }
.sol-col .sol-card { position: absolute; left: 0; }
.sol-stock-row { display: flex; gap: 6px; margin-bottom: 10px; }
.sol-cell { width: 12.5%; }
.sol-status { font-family: var(--mono); font-size: 11.5px; color: #55534c; margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; }
.sol-status b { cursor: pointer; text-decoration: underline; }
.sol-card.win-pop { animation: solwin .6s ease-out; }
@keyframes solwin { 30% { transform: translateY(-16px) rotate(4deg); } }

/* ---------- SWEEPER ---------- */
.sw-status { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; margin-bottom: 8px; }
.sw-status b { cursor: pointer; text-decoration: underline; }
.sw-grid { display: grid; gap: 2px; width: max-content; background: #a5a29a; padding: 4px; border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64; margin: 0 auto; }
.sw-cell { width: 26px; height: 26px; display: grid; place-items: center; font: 700 13px var(--mono); border: 2px solid; border-color: #fff #6f6d64 #6f6d64 #fff; background: var(--d-win); cursor: pointer; user-select: none; touch-action: manipulation; padding: 0; }
.sw-cell.open { border: 1px solid #b5b2a9; background: #d6d3ca; cursor: default; }
.sw-cell.flag { color: #b03a2e; }
.sw-cell.mine { background: #8c8878; color: #201f1b; }
.sw-cell.mine.hit { background: #c0392b; color: #fff; }
.sw-cell.c1 { color: #0a2fa1; } .sw-cell.c2 { color: #146c14; } .sw-cell.c3 { color: #b03a2e; } .sw-cell.c4 { color: #1a1a6e; }
.sw-cell.c5 { color: #6e2f1a; } .sw-cell.c6 { color: #1a6e6e; } .sw-cell.c7 { color: #333; } .sw-cell.c8 { color: #666; }
.sw-hint { font-size: 11px; color: #6e6b62; margin-top: 8px; text-align: center; font-family: var(--mono); }
.yf-pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  #os-95 .win.pop, .cd-disc.spin, .du-dots i, .df-grid i.f { animation: none; }
}


/* ============================================================
   v7 additions — z-order law, Clip the assistant, My Computer
   explorer, real Find, mouse test
   ============================================================ */

/* the OS chrome always outranks windows (start menu above all, like real) */
#os95-bar { z-index: 8000; }
#os95-menu { z-index: 8100; }
.wm-modal { z-index: 9000; }
#os95-boot { z-index: 9500; }

/* ---------- Clip, the office assistant ---------- */
.clippy {
  position: absolute; right: 22px; bottom: 64px; z-index: 7500;
  width: 70px; user-select: none;
}
.clippy.gone { display: none; }
.clippy-body { cursor: grab; position: relative; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25)); }
.clippy-body:active { cursor: grabbing; }
.clippy.arrive .clippy-body { animation: clip-arrive .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes clip-arrive { from { transform: translateY(40px) scale(.4); opacity: 0; } }
.clippy.peek .clippy-body { animation: clip-peek 1.1s ease-in-out; }
@keyframes clip-peek { 20% { transform: rotate(-8deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
.clippy.talking .clippy-body { animation: clip-talk .8s ease-in-out infinite; }
@keyframes clip-talk { 50% { transform: translateY(-2px) rotate(1.5deg); } }
.clippy.flip .clippy-body { animation: clip-flip .55s cubic-bezier(.4,0,.4,1); }
@keyframes clip-flip { to { transform: rotate(360deg); } }
.clippy.shudder .clippy-body { animation: clip-shud .4s ease; }
@keyframes clip-shud { 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }
.clippy.dropped .clippy-body { animation: clip-drop .45s cubic-bezier(.2,2,.4,1); }
@keyframes clip-drop { from { transform: translateY(-8px); } }
.clip-brows path { transition: transform .2s; }
.clippy.talking .brow-l { transform: translateY(-1.5px); }
.clippy.talking .brow-r { transform: translateY(-1px); }

.clippy-bubble {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  width: 230px; background: #FFFFC8; color: #1c1c1c;
  border: 1.5px solid #1c1c1c; border-radius: 8px;
  padding: 10px 26px 10px 12px;
  font: 12.5px/1.5 var(--mono); text-align: left;
  box-shadow: 3px 3px 0 rgba(0,0,0,.28);
}
.clippy-bubble::after {
  content: ""; position: absolute; top: 100%; right: 26px;
  border: 9px solid transparent; border-top-color: #1c1c1c;
}
.clippy-bubble::before {
  content: ""; position: absolute; top: calc(100% - 2.5px); right: 27.5px; z-index: 1;
  border: 7.5px solid transparent; border-top-color: #FFFFC8;
}
.cb-x {
  position: absolute; top: 3px; right: 5px;
  font: 700 13px var(--mono); color: #55534c; padding: 2px 4px;
}
.clippy-menu {
  position: absolute; bottom: calc(100% + 6px); right: 74px; width: 168px;
  background: var(--d-win); border: 2px solid; border-color: #fff #55534c #55534c #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35); padding: 4px; display: grid;
}
.clippy-menu button {
  text-align: left; padding: 8px 10px; font: 12px var(--mono); color: var(--d-ink);
}
.clippy-menu button:hover { background: #1e5f58; color: #fff; }

/* ---------- My Computer explorer ---------- */
.ex-menubar { display: flex; gap: 2px; border-bottom: 1px solid #b5b2a9; margin: -6px -6px 8px; padding: 2px 4px; }
.ex-menu { position: relative; }
.ex-mbtn { font: 12px var(--mono); padding: 5px 9px; color: var(--d-ink); }
.ex-mbtn:hover { background: #1e5f58; color: #fff; }
.ex-mdrop {
  position: absolute; left: 0; top: 100%; z-index: 30; width: 220px;
  background: var(--d-win); border: 2px solid; border-color: #fff #55534c #55534c #fff;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35); padding: 4px; display: grid;
}
.ex-mdrop button { text-align: left; padding: 8px 10px; font: 12px var(--mono); color: var(--d-ink); }
.ex-mdrop button:hover { background: #1e5f58; color: #fff; }
.ex-addr { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.ex-nav { min-height: 30px; padding: 3px 10px; }
.ex-nav:disabled { color: #a5a29a; }
.ex-path {
  flex: 1; min-width: 0; background: #fff; border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64;
  font: 12px var(--mono); padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-pane {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px;
  background: #fff; border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64;
  padding: 8px; min-height: 150px; align-content: flex-start;
}
.ex-item { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; text-align: center; border: 1px dashed transparent; }
.ex-item:hover { border-color: #1e5f58; background: #e4efed; }
.ex-item .g { font-size: 26px; }
.ex-item b { font: 700 11.5px var(--mono); color: #1c1c1c; }
.ex-item small { font: 10px var(--mono); color: #6e6b62; }
.ex-status { margin-top: 8px; font: 11px var(--mono); color: #55534c; border-top: 1px solid #b5b2a9; padding-top: 6px; }

/* ---------- Find: All Files ---------- */
.find-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.find-label { font: 11px var(--mono); color: #55534c; }
.find-row .in95 { flex: 1; min-width: 120px; }
.find-results { background: #fff; border: 2px solid; border-color: #6f6d64 #fff #fff #6f6d64; min-height: 120px; max-height: 240px; overflow: auto; padding: 4px; display: grid; gap: 2px; align-content: flex-start; }
.find-head { font: 11px var(--mono); color: #55534c; padding: 4px 6px; }
.find-none { font: 12px var(--mono); color: #6e6b62; padding: 10px; white-space: pre-wrap; }
.find-hit { display: grid; grid-template-columns: 22px 44px 1fr; gap: 6px; align-items: center; text-align: left; padding: 6px; font-family: var(--mono); }
.find-hit .g { font-size: 15px; }
.find-hit b { font-size: 12px; }
.find-hit small { font-size: 11px; color: #55534c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.find-hit:hover { background: #e4efed; }
.find-hit.sel { background: #1e5f58; }
.find-hit.sel b, .find-hit.sel small { color: #fff; }

/* ---------- mouse test ---------- */
.mouse-test { text-align: center; font: 12px var(--mono); display: grid; gap: 10px; justify-items: center; }
.mouse-camel { font-size: 44px; padding: 12px 22px; border: 2px solid; border-color: #fff #55534c #55534c #fff; background: var(--d-win); }
.mouse-camel:active { border-color: #55534c #fff #fff #55534c; }
.mouse-camel.spin { animation: camelspin .5s ease; }
@keyframes camelspin { to { transform: rotate(360deg); } }

/* ============================================================
   v7.1 — Recycle Bin & Display Properties (real settings)
   ============================================================ */
.rb-note { font-size: 11.5px; color: #4a4a44; margin-bottom: 8px; }
.rb-list { display: grid; gap: 4px; margin-bottom: 8px; }
.rb-item {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid #b8b5aa; background: #fff; padding: 6px 8px;
}
.rb-item .g { font-size: 19px; flex: none; }
.rb-t { flex: 1; min-width: 0; }
.rb-t b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-t small { font-size: 10px; color: #77746a; }
.rb-btns { display: flex; gap: 5px; flex: none; }
.rb-empty { font-size: 11.5px; color: #77746a; padding: 12px 4px; }
@media (max-width: 430px) {
  .rb-item { flex-wrap: wrap; }
  .rb-btns { width: 100%; justify-content: flex-end; }
}

.dp-tabs { display: flex; gap: 2px; margin-bottom: -1px; position: relative; z-index: 1; }
.dp-tabs span {
  border: 1px solid #8a887e; border-bottom: none; background: #cfccc2;
  padding: 3px 10px 4px; font-size: 11px; border-radius: 3px 3px 0 0; color: #55534b;
}
.dp-tabs span.on { background: var(--d-win, #dedbd2); color: #222; font-weight: 700; padding-bottom: 5px; }
.dp-mon {
  border: 1px solid #8a887e; padding: 14px 0 6px; display: grid; place-items: center;
  background: var(--d-win, #dedbd2);
}
.dp-mon::after { content: ""; width: 54px; height: 8px; background: #b8b5aa; border: 1px solid #8a887e; border-top: none; }
.dp-scr {
  display: block; width: 150px; height: 96px; border: 6px solid #b8b5aa; outline: 1px solid #8a887e;
  background: #2a7a72; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.dp-list { display: grid; gap: 2px; margin: 8px 0 6px; max-height: 150px; overflow-y: auto; border: 1px solid #8a887e; background: #fff; padding: 3px; }
.dp-item {
  display: flex; align-items: center; gap: 8px; text-align: left;
  font-size: 12px; padding: 4px 6px; border: 1px solid transparent;
}
.dp-item:hover { background: #e8e6de; }
.dp-item.on { background: #2a5a8a; color: #fff; }
.dp-sw { width: 26px; height: 17px; border: 1px solid #66645c; flex: none; display: inline-block; }
.dp-note { font-size: 10.5px; color: #55534b; line-height: 1.5; min-height: 2.6em; }