/* Erf Studio Kit desktop (homepage + archives). Faithful copy of the prototype shell styles. No em dashes anywhere. */

  :root {
    --black: #0a0a0a;
    --white: #f4f4f4;
    --soft: #c8c8c8;
    --gray: #6a6a6a;
    --dim: #3a3a3a;
    --line: rgba(255,255,255,0.08);
    --display: 'Kanit', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { background: var(--black); color: var(--white); font-family: var(--display); overflow-x: hidden; }
  body.locked { overflow: hidden; height: 100vh; }
  ::selection { background: var(--white); color: var(--black); }

  /* ---- Global CRT overlays ---- */
  .grain, .scan, .vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
  .grain {
    opacity: 0.015; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 0.4s steps(2) infinite;
  }
  @keyframes grainShift {
    0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
    50% { transform: translate(2%,-2%); } 75% { transform: translate(-2%,-3%); } 100% { transform: translate(3%,2%); }
  }
  .scan {
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
    opacity: 0.18;
  }
  .scan::after {
    content: ""; position: absolute; left: 0; right: 0; height: 28%;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.03), transparent);
    animation: scanSweep 7s linear infinite;
  }
  @keyframes scanSweep { 0% { top: -30%; } 100% { top: 100%; } }
  .vignette { background: radial-gradient(ellipse at center, transparent 65%, rgba(0,0,0,0.30) 100%); z-index: 8999; }

  /* slight barrel/CRT curvature feel on the whole stage */
  #stage { position: relative; z-index: 1; }

  /* ============ BOOT SCREEN ============ */
  #boot {
    position: fixed; inset: 0; z-index: 8000; background: var(--black);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s ease, filter 0.8s ease;
  }
  #boot.gone { opacity: 0; filter: blur(8px); pointer-events: none; }
  /* every boot block shares one column + one left edge (terminal feel) */
  #boot > * { width: min(90vw, 480px); margin-left: auto; margin-right: auto; }

  /* CRT logo centrepiece, image, left-aligned to the shared column */
  .crt-logo {
    position: relative; line-height: 0;
    animation: bloom 4.5s ease-in-out infinite;
  }
  .crt-logo img { width: clamp(120px, 16vw, 240px); height: auto; display: block; }
  @keyframes bloom {
    0%,100% { filter: drop-shadow(0 0 16px rgba(255,255,255,0.4)) drop-shadow(0 0 46px rgba(255,255,255,0.16)); }
    50%     { filter: drop-shadow(0 0 22px rgba(255,255,255,0.55)) drop-shadow(0 0 64px rgba(255,255,255,0.24)); }
  }
  /* glitch: duplicate the logo image as colour-split layers */
  .crt-logo .glitch-layer {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  .crt-logo.glitch .glitch-layer.a { animation: glitchA 0.32s steps(2) 1; }
  .crt-logo.glitch .glitch-layer.b { animation: glitchB 0.32s steps(2) 1; }
  @keyframes glitchA {
    0% { opacity: 0; transform: none; clip-path: inset(0 0 70% 0); }
    30% { opacity: 0.5; transform: translateX(-6px); clip-path: inset(10% 0 55% 0); }
    60% { opacity: 0.3; transform: translateX(4px); clip-path: inset(40% 0 20% 0); }
    100% { opacity: 0; transform: none; }
  }
  @keyframes glitchB {
    0% { opacity: 0; clip-path: inset(60% 0 10% 0); }
    40% { opacity: 0.4; transform: translateX(5px); clip-path: inset(70% 0 5% 0); }
    100% { opacity: 0; transform: none; }
  }

  .boot-log {
    margin-top: 46px; height: 130px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--soft);
    text-align: left;
  }
  .boot-log .line { opacity: 0; }
  .boot-log .line.show { opacity: 1; }
  .boot-log .ok { color: var(--gray); }

  .boot-manifesto {
    margin-top: 30px; text-align: left;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0;
    opacity: 0; transition: opacity 0.9s ease;
  }
  .boot-manifesto.show { opacity: 1; }
  .boot-manifesto .punch { font-family: var(--display); font-weight: 600; font-size: clamp(16px,2.6vw,21px); letter-spacing: 0.01em; margin-bottom: 14px; }
  .boot-manifesto .sub { font-family: var(--mono); font-size: 11px; line-height: 2; letter-spacing: 0.12em; color: var(--gray); }

  .boot-cta {
    margin-top: 30px; opacity: 0; transition: opacity 0.6s ease;
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.3em; color: var(--white);
    cursor: pointer; background: none; border: none; display: flex; align-items: center; gap: 10px;
    justify-content: flex-start; padding: 0;
  }
  .boot-cta.show { opacity: 1; }
  .boot-cta:hover { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,0.5); }
  .cursor { display: inline-block; width: 9px; height: 16px; background: var(--white); animation: blink 1s steps(1) infinite; }
  @keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

  /* ============ MAIN INTERFACE ============ */
  #app { position: relative; z-index: 1; min-height: 100vh; opacity: 0; transform: translateY(20px); transition: opacity 0.9s ease, transform 0.9s ease; }
  #app.show { opacity: 1; transform: none; }


  /* ===== OLD DESKTOP (mono Win95) ===== */
  #app { padding: 0; }
  .desktop {
    min-height: 100vh; display: flex; flex-direction: column;
    /* faint dithered desktop backdrop, mono */
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 2px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 2px),
      radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.05), transparent 60%);
  }
  .desk-area { flex: 1; position: relative; padding: 24px clamp(14px,3vw,40px) 70px; z-index: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
  .main-win { position: relative; z-index: 2; max-width: 1080px; width: 100%; margin: 0 auto; }
  .desk-area > .main-win { position: relative; z-index: 1; }

  /* desktop icons down the left (decorative, on brand: just our marks) */
  .desk-icons { position: absolute; top: 24px; left: clamp(10px,2vw,24px); display: flex; flex-direction: column; gap: 26px; z-index: 1; }
  .desk-icon { width: 76px; text-align: center; cursor: default; }
  .desk-icon .ico { width: 42px; height: 38px; margin: 0 auto 6px; border: 1.5px solid rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; box-shadow: inset -2px -2px 0 rgba(0,0,0,0.5), inset 2px 2px 0 rgba(255,255,255,0.12); }
  .desk-icon .ico img { height: 16px; width: auto; }
  .desk-icon .ico svg { stroke: rgba(255,255,255,0.7); }
  .desk-icon span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--soft); line-height: 1.3; }
  @media (max-width: 760px){ .desk-icons { display: none; } }

  /* ===== beveled window chrome ===== */
  .w95 {
    background: #0d0d0d;
    border: 1.5px solid #000;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.8), inset 1px 1px 0 rgba(255,255,255,0.22), inset -2px -2px 0 rgba(255,255,255,0.06), 3px 3px 0 rgba(0,0,0,0.55);
  }
  .w95-bar {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 9px;
    background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
    color: #000;
  }
  .w95-bar .wt { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
  .w95-bar .wt img { height: 14px; width: auto; }
  .w95-bar .sp { flex: 1; }
  .w95-btns { display: flex; gap: 3px; }
  .w95-btns i {
    width: 18px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 11px; line-height: 1; color: #000; background: #cfcfcf;
    border: 1px solid #000; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 #fff; cursor: default;
  }
  .x-close { display: inline-flex; text-decoration: none; background: none; border: none; padding: 0; }
  .x-close i { cursor: pointer; }
  .x-close:hover i { background: #000; color: #fff; }
  /* menu bar (File Edit View...) */
  .w95-menu { display: flex; gap: 16px; padding: 5px 11px; border-bottom: 1px solid rgba(255,255,255,0.14); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--soft); }
  .w95-menu span u { text-decoration: underline; }
  .w95-menu .menu-sp { flex: 1; }
  .theme-toggle { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--soft); background: none; border: none; cursor: pointer; padding: 0; }
  .theme-toggle:hover { color: var(--white); }
  .theme-toggle .tt-ico { font-size: 12px; }

  /* ===== MAIN window: Kit ===== */
  .mw-body { display: grid; grid-template-columns: 200px 1fr; }
  @media (max-width: 720px){ .mw-body { grid-template-columns: 1fr; } }

  /* sidebar dir */
  .mw-side { border-right: 1.5px solid #000; box-shadow: inset -1px 0 0 rgba(255,255,255,0.12); padding: 12px 0; }
  @media (max-width: 720px){ .mw-side { border-right: none; border-bottom: 1.5px solid #000; display: flex; overflow-x: auto; padding: 8px; } }
  .mw-side .s-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; color: var(--gray); text-transform: uppercase; padding: 0 14px 10px; }
  @media (max-width: 720px){ .mw-side .s-label { display: none; } }
  .cat-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--soft); cursor: pointer; transition: background 0.12s, color 0.12s; white-space: nowrap; }
  .cat-item:hover { background: rgba(255,255,255,0.06); color: var(--white); }
  .cat-item.active { background: rgba(255,255,255,0.85); color: #000; }
  .cat-item .cnt { font-size: 10px; opacity: 0.7; }
  @media (max-width: 720px){ .cat-item { padding: 7px 11px; } .cat-item .cnt { display: none; } }

  /* main panel */
  .mw-main { display: flex; flex-direction: column; min-width: 0; }
  .mw-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1.5px solid #000; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1); }
  .mw-search .pr { font-family: var(--mono); font-size: 13px; color: var(--white); }
  .mw-search input { flex: 1; background: #000; border: 1px solid #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.8), inset -1px -1px 0 rgba(255,255,255,0.15); outline: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--white); padding: 6px 9px; }
  #search-clear { display:none; background:none; border:none; color:var(--gray); font-size:18px; line-height:1; cursor:pointer; padding:0 4px; font-family:var(--mono); }
  #search-clear:hover { color:var(--white); }
  #search-clear.show { display:block; }
  body.light #search-clear:hover { color:#000; }
  .kit-orient { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1.5px solid #000; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); }
  .kit-orient.hide { display:none; }
  .kit-orient .ko-text { font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:0.02em; color:var(--soft); }
  .kit-orient .ko-text b { color:var(--white); font-weight:500; }
  body.light .kit-orient .ko-text { color:#444; }
  body.light .kit-orient .ko-text b { color:#000; }
  .kit-orient .ko-close { margin-left:auto; margin-right:24px; flex:none; background:none; border:none; color:var(--gray); font-size:16px; line-height:1; cursor:pointer; font-family:var(--mono); padding:0 2px; }
  .kit-orient .ko-close:hover { color:var(--white); }
  body.light .kit-orient .ko-close:hover { color:#000; }
  .mw-search input::placeholder { color: var(--gray); }

  .lst-head { display: grid; grid-template-columns: 1fr 120px 110px; gap: 12px; padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,0.18); font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); }
  .list { max-height: 56vh; overflow-y: scroll; }
  .row { display: grid; grid-template-columns: 1fr 120px 110px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); cursor: pointer; transition: background 0.12s; }
  .row:hover { background: rgba(255,255,255,0.06); }
  /* a little life: name nudges and underlines, status arrow slides in on hover */
  .row .r-name { transition: transform .14s ease; }
  .row.live:hover .r-name { transform: translateX(3px); }
  .row.live:hover .r-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .row.live .r-status { transition: color .14s ease; }
  .row.live:hover .r-status { color: var(--white); }
  .row.live:hover .r-status::after { content: " \2192"; }

  /* Tool of the day, the most-visited tool, featured at the top of the list */
  .row.totd { border-bottom: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.035); position: relative; }
  .row.totd::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--white); }
  .row.totd:hover { background: rgba(255,255,255,0.08); }
  .row.totd .totd-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
  .row.totd .totd-star { display: inline-block; animation: totdSpin 6s linear infinite; color: var(--white); }
  @keyframes totdSpin { to { transform: rotate(360deg); } }
  .row.totd .r-name { font-size: 17px; }
  .row .r-name { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--white); }
  .row .r-desc { font-family: var(--display); font-weight: 300; font-size: 12px; color: var(--soft); margin-top: 2px; line-height: 1.4; }
  .row .r-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); }
  .row .r-status { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
  .row .r-status::before { content: "■ "; font-size: 7px; color: var(--gray); }
  .empty { padding: 36px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--gray); }
  @media (max-width: 720px){ .lst-head, .row { grid-template-columns: 1fr 86px; } .lst-head .h-cat, .row .r-cat { display: none; } }

  /* small floating dialog windows (decorative, on-brand text only) */
  .dialog { position: absolute; z-index: 3; width: 250px; }
  .dialog .dlg-body { padding: 16px 14px 14px; display: flex; gap: 12px; align-items: flex-start; }
  .dialog .dlg-ico { width: 30px; height: 30px; flex: none; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 16px; color: var(--white); }
  .dialog .dlg-text { font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.03em; color: var(--soft); }
  .dialog .dlg-btns { display: flex; gap: 8px; justify-content: center; padding: 0 14px 14px; }
  .dialog .dlg-btns button { font-family: var(--mono); font-size: 11px; color: #000; background: #cfcfcf; border: 1px solid #000; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 #fff; padding: 5px 16px; cursor: pointer; }
  .dialog .dlg-btns button:active { box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5), inset -1px -1px 0 #fff; }
  .dialog.d-status { top: 5%; right: 4%; }
  .dialog .w95-bar { cursor: move; user-select: none; }
  .dialog.d-info { bottom: 16%; right: 7%; }
  @media (max-width: 900px){ .dialog { display: none; } }

  /* ===== live rows + tool windows ===== */
  .row.live { cursor: pointer; }
  .row.is-soon { cursor: default; opacity: 0.55; }
  .row.is-soon .r-status { color: var(--gray); }
  .row.live .r-status { color: var(--white); }
  body.light .row.live .r-status { color: #111; }

  .tool-win {
    position: fixed; z-index: 50; width: min(520px, 92vw); top: 12%; left: 50%; transform: translateX(-50%);
    background: #0d0d0d;
    border: 1.5px solid #000;
    box-shadow: inset -1px -1px 0 rgba(0,0,0,0.8), inset 1px 1px 0 rgba(255,255,255,0.22), inset -2px -2px 0 rgba(255,255,255,0.06), 4px 4px 0 rgba(0,0,0,0.6);
  }
  body.light .tool-win { background: #f0f0f0; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.35), inset 1px 1px 0 rgba(255,255,255,0.9), 4px 4px 0 rgba(0,0,0,0.3); }
  .tool-win .tw-bar { cursor: move; user-select: none; }
  .tool-win .tw-body { padding: 18px 18px 20px; }
  .tw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
  .tw-row label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--soft); flex: none; }
  body.light .tw-row label { color: #333; }
  .tw-row .ctl { flex: 1; max-width: 60%; }
  .tw-in, .tw-sel {
    width: 100%; box-sizing: border-box; background: #000; color: var(--white);
    border: 1px solid #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.8), inset -1px -1px 0 rgba(255,255,255,0.15);
    font-family: var(--mono); font-size: 12px; padding: 7px 9px; outline: none;
  }
  body.light .tw-in, body.light .tw-sel { background: #fff; color: #111; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.9); }
  .tw-sel { cursor: pointer; }
  .tw-out {
    margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 16px;
  }
  body.light .tw-out { border-top-color: rgba(0,0,0,0.14); }
  .tw-big { font-family: var(--display); font-weight: 700; font-size: 30px; color: var(--white); line-height: 1.1; }
  body.light .tw-big { color: #111; }
  .tw-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--soft); margin-top: 6px; }
  body.light .tw-sub { color: #444; }
  .tw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tw-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 11px 12px; }
  body.light .tw-stat { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
  .tw-stat .k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); }
  .tw-stat .v { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--white); margin-top: 3px; }
  body.light .tw-stat .v { color: #111; }
  .tw-note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--gray); margin-top: 14px; line-height: 1.5; }
  .tw-seg { display: flex; gap: 0; }
  .tw-seg button { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--soft); background: rgba(255,255,255,0.04); border: 1px solid #000; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.18); padding: 6px 4px; cursor: pointer; }
  .tw-seg button.on { background: rgba(255,255,255,0.85); color: #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5); }
  body.light .tw-seg button { color: #333; background: rgba(0,0,0,0.04); }
  body.light .tw-seg button.on { background: #2a2a2a; color: #fff; }

  /* mobile: tools take over the full screen instead of floating */
  @media (max-width: 700px) {
    .tool-win {
      position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important;
      width: 100% !important; height: 100% !important; max-width: none !important;
      transform: none !important; margin: 0 !important; z-index: 9999 !important;
      display: flex; flex-direction: column;
      animation: twUp 0.25s ease both;
    }
    .tool-win .tw-bar { cursor: default; }
    .tool-win .tw-body { flex: 1; overflow-y: auto; padding: 20px 18px 28px; }
    .tool-win .tw-row { flex-wrap: wrap; }
    .tool-win .tw-row .ctl { max-width: 100%; flex: 1 1 100%; }
    .tool-win .tw-close i { width: 30px; height: 26px; font-size: 16px; }
  }
  @keyframes twUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ===== list/form tools ===== */
  .tw-list { width:100%; border-collapse: collapse; margin: 4px 0 10px; }
  .tw-list th { text-align:left; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.18); }
  body.light .tw-list th { color:#555; border-bottom-color: rgba(0,0,0,0.2); }
  .tw-list td { padding: 3px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: middle; }
  body.light .tw-list td { border-bottom-color: rgba(0,0,0,0.08); }
  .tw-list input, .tw-list select, .tw-list textarea {
    width:100%; box-sizing:border-box; background:#000; color:var(--white);
    border:1px solid #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.8), inset -1px -1px 0 rgba(255,255,255,0.12);
    font-family: var(--mono); font-size: 11px; padding: 5px 6px; outline:none; resize:vertical;
  }
  body.light .tw-list input, body.light .tw-list select, body.light .tw-list textarea { background:#fff; color:#111; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.18); }
  .tw-list .num { width: 34px; text-align:center; font-family: var(--mono); font-size:11px; color: var(--gray); }
  .tw-del { width: 24px; height: 22px; cursor:pointer; font-family: var(--mono); font-size:13px; color: var(--gray); background:none; border:1px solid transparent; }
  .tw-del:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
  body.light .tw-del:hover { color:#000; border-color: rgba(0,0,0,0.3); }
  .tw-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }
  .tw-btn { font-family: var(--mono); font-size: 11px; letter-spacing:0.04em; color: var(--white); background: rgba(255,255,255,0.06); border:1px solid #000; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.2); padding: 7px 13px; cursor:pointer; }
  .tw-btn:hover { background: rgba(255,255,255,0.12); }
  .tw-btn:active { box-shadow: inset 1px 1px 0 rgba(0,0,0,0.6); }
  .tw-btn.pri { background: rgba(255,255,255,0.85); color:#000; }
  body.light .tw-btn { color:#111; background: rgba(0,0,0,0.05); box-shadow: inset -1px -1px 0 rgba(0,0,0,0.3), inset 1px 1px 0 rgba(255,255,255,0.9); }
  body.light .tw-btn.pri { background:#2a2a2a; color:#fff; }
  .tw-add { font-family: var(--mono); font-size:11px; color: var(--soft); background:none; border:1px dashed rgba(255,255,255,0.25); padding: 7px 0; width:100%; cursor:pointer; margin-bottom: 4px; }
  .tw-add:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }
  body.light .tw-add { color:#444; border-color: rgba(0,0,0,0.25); }
  .tw-field { display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
  .tw-field label { font-family: var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gray); }
  .tw-field input { box-sizing:border-box; background:#000; color:var(--white); border:1px solid #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.8), inset -1px -1px 0 rgba(255,255,255,0.12); font-family: var(--mono); font-size:12px; padding:7px 9px; outline:none; }
  body.light .tw-field input { background:#fff; color:#111; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.18); }
  .tw-field-2 { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .tw-chk { width:18px; height:18px; cursor:pointer; }
  .tool-win.wide { width: min(680px, 94vw); }
  .cs-preview { background:#fff; padding:14px; border:1px solid #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4); max-height:420px; overflow:auto; }
  .cs-preview .cs-doc { transform-origin: top left; }

  /* ===== design / file tools ===== */
  .tw-drop { border:1px dashed rgba(255,255,255,0.3); padding:22px 14px; text-align:center; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:var(--soft); transition:border-color 0.15s,background 0.15s; }
  .tw-drop:hover, .tw-drop.over { border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.04); color:var(--white); }
  body.light .tw-drop { border-color:rgba(0,0,0,0.3); color:#444; }
  body.light .tw-drop:hover, body.light .tw-drop.over { border-color:rgba(0,0,0,0.6); background:rgba(0,0,0,0.04); color:#000; }
  .sw-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; margin-top:14px; }
  .sw { cursor:pointer; border:1px solid rgba(255,255,255,0.15); }
  .sw .chip { height:48px; }
  .sw .hex { font-family:var(--mono); font-size:9px; letter-spacing:0.04em; padding:4px 3px; text-align:center; color:var(--soft); background:rgba(255,255,255,0.04); }
  body.light .sw .hex { color:#333; background:rgba(0,0,0,0.04); }
  .sw.copied .hex::after { content:" ✓"; }
  .tw-swatch-lg { height:54px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; }

  /* ===== TASKBAR ===== */
  .taskbar {
    height: 40px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px;
    border-top: 1.5px solid rgba(255,255,255,0.3);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  }
  .start-btn { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--white); text-decoration: none; padding: 5px 12px 5px 9px; background: rgba(255,255,255,0.06); border: 1px solid #000; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.3); cursor: pointer; }
  .start-btn img { height: 14px; width: auto; }
  .start-btn:active { box-shadow: inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.3); }
  .task-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.2); }
  .task-tab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--soft); padding: 5px 12px; border: 1px solid #000; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); white-space: nowrap; }
  .task-tab.active { box-shadow: inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.2); color: var(--white); }
  .task-sp { flex: 1; }
  .task-tray { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--soft); padding: 5px 12px; border: 1px solid #000; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.2); }
  .task-tray a { color: var(--soft); text-decoration: none; }
  .task-tray a.tray-sep { border-left: 1px solid rgba(255,255,255,0.2); padding-left: 12px; }
  .task-tray a:hover { color: var(--white); }
  @media (max-width: 600px){ .task-tab { display: none; } .start-btn span { display: inline; } }
  /* ===== LIGHT MODE ===== */
  body.light { background: #e8e8e8; }
  body.light .desktop {
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 2px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 2px),
      radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,0.06), transparent 60%);
  }
  body.light .w95 { background: #f0f0f0; box-shadow: inset -1px -1px 0 rgba(0,0,0,0.35), inset 1px 1px 0 rgba(255,255,255,0.9), 3px 3px 0 rgba(0,0,0,0.25); }
  body.light .w95-bar { background: linear-gradient(90deg, #2a2a2a, #555); color: #fff; }
  body.light .w95-menu { color: #333; border-bottom-color: rgba(0,0,0,0.12); }
  body.light .theme-toggle { color: #333; }
  body.light .theme-toggle:hover { color: #000; }
  body.light .mw-side { box-shadow: inset -1px 0 0 rgba(0,0,0,0.12); }
  body.light .cat-item { color: #222; }
  body.light .cat-item:hover { background: rgba(0,0,0,0.06); color: #000; }
  body.light .cat-item.active { background: #2a2a2a; color: #fff; }
  body.light .mw-search input { background: #fff; color: #111; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.9); }
  body.light .mw-search .pr, body.light .row .r-name { color: #111; }
  body.light .row .r-desc { color: #444; }
  body.light .row .r-cat, body.light .lst-head, body.light .row .r-status { color: #555; }
  body.light .row:hover { background: rgba(0,0,0,0.05); }
  body.light .row { border-bottom-color: rgba(0,0,0,0.1); }
  body.light .lst-head { border-bottom-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.04); }
  body.light .dlg-text { color: #222; }
  body.light .dlg-ico { border-color: rgba(0,0,0,0.5); color: #111; }
  body.light .taskbar { background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); border-top-color: rgba(0,0,0,0.2); }
  body.light .start-btn { color: #111; background: rgba(0,0,0,0.05); box-shadow: inset -1px -1px 0 rgba(0,0,0,0.3), inset 1px 1px 0 rgba(255,255,255,0.9); }
  body.light .task-tab, body.light .task-tray { color: #333; background: rgba(0,0,0,0.04); }
  body.light .task-tray a { color: #333; }
  body.light .task-tray a:hover { color: #000; }
  body.light .desk-icon span { color: #333; }
  body.light .desk-icon .ico { border-color: rgba(0,0,0,0.5); box-shadow: inset -2px -2px 0 rgba(255,255,255,0.7), inset 2px 2px 0 rgba(0,0,0,0.1); }
  
  body.light .desk-icon .ico svg { stroke: rgba(0,0,0,0.6); }

/* archive reconciliation: classes used by the WordPress desktop template */
/* main window keeps a dark title bar so the white Erf logo reads clean */
.main-win .w95-bar { background: linear-gradient(90deg, #1a1a1a, #3a3a3a); color: #fff; }
body.light .main-win .w95-bar { background: linear-gradient(90deg, #1a1a1a, #3a3a3a); color: #fff; }
.main-win .w95-bar .w95-logo { height: 15px; width: auto; display: block; image-rendering: auto; }
.main-win .w95-bar .w95-title { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; margin-left: 8px; color: #fff; }
.main-win .w95-bar .w95-btns i, .main-win .w95-bar .w95-btns a { color: #fff; }
.list .row { text-decoration: none; color: inherit; }
.list a.row { cursor: pointer; }
.r-status.soon { color: var(--gray); }
.start-btn img { height: 15px; width: auto; }
.task-tab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--soft); padding: 4px 12px; }

/* archive: no boot gate, desktop is visible immediately */
body.kit-desktop #app { opacity: 1; transform: none; }
body.kit-desktop.locked { overflow: auto; height: auto; }

/* ===== live fixes (taskbar, scroll, theme toggle, logo swap) ===== */

/* push the tray (tool count + coffee) to the far right */
.taskbar .task-tray { margin-left: auto; }
.task-tray a.tray-coffee { border-left: 1px solid rgba(255,255,255,0.2); padding-left: 12px; }
body.light .task-tray a.tray-coffee { border-left-color: rgba(0,0,0,0.2); }

/* fit the viewport so the landing page does not scroll */
body.kit-desktop, html { height: 100%; }
body.kit-desktop #app { min-height: 100vh; height: 100vh; overflow: hidden; }
body.kit-desktop .desktop { height: 100vh; display: flex; flex-direction: column; }
/* account for the WordPress admin bar when logged in, so it still fits */
body.kit-desktop.admin-bar #app,
body.kit-desktop.admin-bar .desktop { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
  body.kit-desktop.admin-bar #app,
  body.kit-desktop.admin-bar .desktop { height: calc(100vh - 46px); }
}
body.kit-desktop .desk-area { flex: 1 1 auto; min-height: 0; padding-bottom: 20px; overflow: hidden; }
body.kit-desktop .main-win { display: flex; flex-direction: column; max-height: 100%; }
body.kit-desktop .mw-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
body.kit-desktop .mw-main { display: flex; flex-direction: column; min-height: 0; }
body.kit-desktop .list { flex: 1 1 auto; min-height: 0; overflow-y: scroll; }
body.kit-desktop .mw-side { overflow-y: auto; }

/* desktop theme toggle button (sits in the window menu bar) */
.w95-menu .w95-theme { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--soft); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; }
.w95-menu .w95-theme:hover { color: var(--white); }
body.light .w95-menu .w95-theme { color: #444; }
body.light .w95-menu .w95-theme:hover { color: #000; }

/* logo swaps to the dark version in light mode (filter-invert the white png) */


/* suppress the theme's glitch preloader on Kit pages (avoid double logo) */
body.kit-desktop [id^="erf-pl-"] { display: none !important; }

/* ===== authentic Windows 95 scrollbar on the tool list ===== */
body.kit-desktop .list::-webkit-scrollbar { width: 17px; }
body.kit-desktop .list::-webkit-scrollbar-track {
  background: #c0c0c0;
  background-image: repeating-conic-gradient(#c0c0c0 0% 25%, #b8b8b8 0% 50%);
  background-size: 2px 2px;
}
body.kit-desktop .list::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #a0a0a0;
}
body.kit-desktop .list::-webkit-scrollbar-button:single-button {
  background: #c0c0c0; display: block; height: 17px; width: 17px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #a0a0a0;
  background-repeat: no-repeat; background-position: center;
}
body.kit-desktop .list::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='5'><path d='M3.5 0L7 5H0z' fill='%23000'/></svg>");
}
body.kit-desktop .list::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='5'><path d='M3.5 5L0 0h7z' fill='%23000'/></svg>");
}
/* Firefox fallback */
body.kit-desktop .list { scrollbar-width: auto; scrollbar-color: #c0c0c0 #b0b0b0; }
/* light mode keeps the same classic chrome (it is already grey) */

/* desk icons as links + hover; dialog above the window */
.desk-icon { text-decoration: none; display: block; }
.desk-icon:hover .ico { border-color: var(--white); box-shadow: inset -2px -2px 0 rgba(0,0,0,0.5), inset 2px 2px 0 rgba(255,255,255,0.25); }
.desk-icon:hover span { color: var(--white); }
.desk-icon .ico svg { stroke: rgba(255,255,255,0.7); }
body.light .desk-icon:hover span { color: #000; }

.dialog.d-status { z-index: 6; }
body.light .dialog .dlg-text { color: #222; }

/* real logo swap (white png in dark mode, dark png in light mode) */
.kit-logo-dark { display: none; }
body.light .kit-logo-white { display: none; }
body.light .kit-logo-dark { display: inline-block; }


/* ===== Custom Win95 scrollbar (real DOM, always visible, works on macOS) ===== */
body.kit-desktop .list { scrollbar-width: none; -ms-overflow-style: none; }
body.kit-desktop .list::-webkit-scrollbar { width: 0; height: 0; display: none; }

body.kit-desktop .mw-main { position: relative; }
.kit-sb {
  position: absolute; top: 0; right: 0; width: 17px; bottom: 0;
  background: #c0c0c0;
  background-image: repeating-linear-gradient(45deg, #c8c8c8 0 1px, #b8b8b8 1px 2px);
  border-left: 1px solid #808080;
  display: flex; flex-direction: column; z-index: 5; user-select: none;
}
.kit-sb-btn {
  height: 17px; flex: 0 0 17px; background: #c0c0c0;
  border: 1px solid #fff; border-right-color: #404040; border-bottom-color: #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 8px; color: #000; line-height: 1;
}
.kit-sb-btn:active { border-color: #404040; border-right-color: #fff; border-bottom-color: #fff; box-shadow: inset 1px 1px 0 #808080; }
.kit-sb-track { flex: 1 1 auto; position: relative; }
.kit-sb-thumb {
  position: absolute; left: 0; right: 0; min-height: 24px;
  background: #c0c0c0;
  border: 1px solid #fff; border-right-color: #404040; border-bottom-color: #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
  cursor: pointer;
}
/* light mode keeps the same chrome look (Win95 is grey in both) */
body.kit-desktop.light .kit-sb { background: #c0c0c0; }
/* shift the list content so it doesn't sit under the scrollbar */
body.kit-desktop .list { padding-right: 17px; }

/* visually-hidden h1 for SEO/accessibility on the desktop landing */
.kit-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}