/* ============================================================
   ERA: MODERN — KIST WORK AGENT  (PROTOTYPE)
   You zoom out of Win95 and discover it's now being operated by
   the real Kist Work Agent — a modern operator console driving
   the legacy system, automatically. Modeled on the live dashboard.
   ============================================================ */

.modern{
  position:fixed; inset:0; z-index:8800; display:none;
  font-family:"SF Pro Text","Segoe UI",system-ui,-apple-system,sans-serif;
  color:#1f2937; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 80% -20%, #6a5cff55, transparent 60%),
    radial-gradient(1000px 700px at 0% 120%, #ff6ac155, transparent 55%),
    linear-gradient(160deg,#141a33,#1b2140 40%,#0b0e1c);
}
.modern.open{ display:block; }
.modern.revealing .modern-desktop{ animation:modern-pullback 1.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes modern-pullback{
  0%{ transform:scale(1.7) translate(10%, 4%); filter:blur(3px); opacity:.4; }
  55%{ filter:blur(0); opacity:1; }
  100%{ transform:scale(1) translate(0,0); }
}

/* macOS menu bar */
.modern-menubar{
  position:fixed; top:0; left:0; right:0; height:26px; z-index:20000;
  display:flex; align-items:center; gap:2px; padding:0 8px;
  background:rgba(15,18,34,.6); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08); color:#eef2ff; font-size:13px;
  visibility:visible; opacity:1;
}
.modern-menubar .app-name{ font-weight:700; }
.modern-menubar .apple::before{ content:'\f8ff'; font-size:14px; }
.modern-menubar .apple{ margin-right:2px; }
.modern-menubar .mb-clock{ font-variant-numeric:tabular-nums; margin-left:6px; }
.modern-menubar .spacer{ flex:1; }
.modern-menubar .status{ opacity:.85; font-size:12px; }

.modern-desktop{
  position:absolute; inset:26px 0 0 0;
  /* Luke's COBOL robot monkey — keep the complete art visible while a second
     full-bleed copy naturally fills wider monitors behind it. */
  background:
    linear-gradient(rgba(4,12,16,.10),rgba(4,12,16,.16)),
    url('../assets/mac-cobol-monkey-wallpaper.jpg') center / contain no-repeat;
  background-color:#72999d;
}
.modern[data-wallpaper="cobol"] .modern-desktop{
  background:
    linear-gradient(rgba(4,12,16,.10),rgba(4,12,16,.16)),
    url('../assets/mac-cobol-monkey-wallpaper.jpg') center / contain no-repeat;
  background-color:#72999d;
}
.modern[data-wallpaper="aurora"] .modern-desktop{
  background:radial-gradient(80% 90% at 18% 100%,#1de9b655,transparent 58%),radial-gradient(90% 80% at 100% 0,#7c5cff88,transparent 62%),linear-gradient(145deg,#07131b,#122447 58%,#251942);
}
.modern[data-wallpaper="graphite"] .modern-desktop{
  background:radial-gradient(80% 100% at 70% 20%,#53627344,transparent 60%),linear-gradient(145deg,#090b0f,#1b2028 60%,#0c0f13);
}
.modern.mac-hide-icons .mac-file{ display:none; }
.modern.mac-reduce-motion *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }

/* ---- the real-Mac desktop behind the app window ---- */
.mac-desktop{ position:absolute; inset:0; }
.glass-card{
  position:absolute; border-radius:22px; color:#fff;
  background:rgba(28,30,38,.55);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  font-family:-apple-system,"SF Pro Text","Segoe UI",sans-serif;
}
.glass-weather{ left:5%; top:8%; width:200px; padding:16px 18px; }
.gw-city{ font-size:13px; font-weight:600; opacity:.95; }
.gw-temp{ font-size:44px; font-weight:300; line-height:1.15; }
.gw-cond{ font-size:12px; opacity:.9; margin-top:6px; }
.gw-hl{ font-size:12px; opacity:.75; margin-top:2px; }
.glass-photo{
  left:4%; top:44%; width:230px; height:168px; overflow:hidden;
  perspective:1200px; transform-style:preserve-3d; touch-action:auto!important;
  transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),
             left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),
             border-radius .45s ease,box-shadow .45s ease;
}
.glass-photo.flipped{
  left:24px; top:54px; width:min(470px,calc(100% - 48px)); height:min(570px,calc(100% - 106px));
  border-radius:24px; box-shadow:0 32px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.09);
}
.gp-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.72,.16,1)}
.glass-photo.flipped .gp-flipper{transform:rotateY(180deg)}
.gp-face{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gp-front{display:flex;flex-direction:column;background:transparent;color:#fff;text-align:left;font-family:inherit;cursor:pointer}
.gp-front:focus-visible{outline:2px solid #78b7ff;outline-offset:-3px}
.gp-img{
  display:block; flex:1; min-height:0; border-radius:22px 22px 0 0;
  background:#161923 url('../assets/memories-mom.webp') center 43% / cover no-repeat;
  filter:brightness(1.28) contrast(1.08) saturate(1.08);
}
.gp-label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px 10px;font-size:12px;opacity:.94}
.gp-label b{font-size:12px}.gp-label small{color:#bddbff;font-size:8px;white-space:nowrap}
.gp-back{
  transform:rotateY(180deg);overflow:auto;padding:34px 36px 30px;
  background:
    radial-gradient(circle at 85% 0,rgba(66,146,255,.19),transparent 32%),
    linear-gradient(150deg,rgba(20,29,44,.98),rgba(8,12,20,.99));
  color:#dce8f5;text-align:left;font-family:-apple-system,"SF Pro Text","Segoe UI",sans-serif;
  scrollbar-color:#5b82ad transparent;touch-action:pan-y;outline:none;
}
.gp-back:focus-visible{box-shadow:inset 0 0 0 2px rgba(120,183,255,.65)}
.gp-back .gp-close{position:sticky;z-index:2;float:right;top:0;margin:-18px -18px 4px 14px;padding:7px 9px;border:1px solid rgba(255,255,255,.17);border-radius:8px;background:rgba(8,13,21,.82);color:#a9c8e8;font:700 8px ui-monospace,Menlo,monospace;letter-spacing:.08em;cursor:pointer}
.gp-kicker{display:block;margin-bottom:13px;color:#67a8f8;font:700 9px ui-monospace,Menlo,monospace;letter-spacing:.15em}
.gp-back h2{margin:0 0 21px;color:#fff;font-size:28px;line-height:1.06;letter-spacing:-.035em}
.gp-back p{margin:0 0 15px;color:#bdcddd;font-size:12px;line-height:1.66}
.gp-back strong{color:#fff}
.gp-back blockquote{margin:23px 0 19px;padding:11px 0 11px 16px;border-left:2px solid #5fa7ff;color:#fff;font-size:20px;font-weight:700}
.gp-back>[data-memory-tinkyspeak]{display:inline-flex;padding:8px 11px;border:1px solid rgba(95,167,255,.55);border-radius:8px;background:transparent;color:#99c9ff;text-decoration:none;font:700 8px ui-monospace,Menlo,monospace;letter-spacing:.08em;cursor:pointer}
.gp-back>[data-memory-tinkyspeak]:hover{border-color:#7db8ff;color:#fff}
@media(max-width:620px){
  .glass-photo.flipped{left:12px;top:42px;width:calc(100% - 24px);height:calc(100% - 96px)}
  .gp-back{padding:30px 24px 26px}.gp-back h2{font-size:24px}.gp-back p{font-size:11px}
}
.mac-file{
  position:absolute; width:92px; text-align:center;
  font-family:-apple-system,"SF Pro Text","Segoe UI",sans-serif;
}
.mac-file i{
  display:block; width:44px; height:34px; margin:0 auto 4px; border-radius:5px;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.mac-file i{ transform:scale(var(--mac-icon-scale,1)); transform-origin:bottom center; }
.mac-file .th.orange{ background:linear-gradient(135deg,#f59e0b,#b45309); }
.mac-file .th.teal{ background:linear-gradient(135deg,#14b8a6,#0f766e); }
.mac-file .th.grid{ background:repeating-linear-gradient(90deg,#334155 0 6px,#1e293b 6px 12px); }
.mac-file .th.doc{ background:#f8fafc; }
.mac-file .th.dark{ background:#0f172a; }
.mac-file .th.folder{
  position:relative; width:50px; height:36px; margin-top:5px;
  border:0; border-radius:6px; background:linear-gradient(180deg,#68c8ff,#1688df);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px rgba(0,0,0,.4);
}
.mac-file .th.folder::before{
  content:''; position:absolute; left:3px; top:-5px; width:23px; height:9px;
  border-radius:5px 5px 0 0; background:#66c7ff;
}
.mac-file .th.folder::after{
  content:''; position:absolute; inset:5px 0 0; border-radius:5px;
  background:linear-gradient(180deg,#7fd5ff,#2496e8);
}
.mac-project-folder .app-folder{isolation:isolate;height:40px;overflow:visible;background:linear-gradient(180deg,#8bdcff,#2b9be9)}
.mac-project-folder .app-folder::after{z-index:0;inset:5px -1px -1px;background:linear-gradient(180deg,rgba(121,211,255,.96),rgba(31,139,220,.98));border:1px solid rgba(255,255,255,.28)}
.mac-project-folder .app-folder span{position:absolute;z-index:2;left:50%;top:8px;width:29px;height:27px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.62);border-radius:7px;transform:translateX(-50%);box-shadow:0 4px 8px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.34);color:#fff;font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.mac-project-folder .app-folder-tinkyspeak span{border-radius:11px 11px 11px 3px;background:linear-gradient(145deg,#ff9a46 0 52%,#7657ff 53%)}
.mac-project-folder .app-folder-tinkytown span{background:radial-gradient(circle at 50% 32%,#fff 0 9%,transparent 10%),linear-gradient(145deg,#ff7317 0 56%,#ffd95c 57%);color:#452100}
.mac-project-folder .app-folder-ghostbridge span{background:linear-gradient(135deg,#0e222c,#263451);box-shadow:0 4px 8px rgba(0,0,0,.34),inset 3px 0 #24dfcf,inset -3px 0 #8064ff;color:#65fff0}
.mac-project-folder .app-folder-perslis span{background:conic-gradient(from 90deg,#3b82f6 0 25%,#10263b 0 50%,#27d9cb 0 75%,#153e49 0);color:#fff}
.mac-project-folder .app-folder-kist span{border-color:#3affad;background:radial-gradient(circle at 35% 28%,#35ff9f,#0b9e68 35%,#06110d 70%);box-shadow:0 0 10px rgba(44,255,143,.72);color:#03120b}
.mac-project-folder .app-folder-list span{background:repeating-linear-gradient(180deg,#244b9a 0 5px,#6644bf 6px 7px);color:#fff}
.mac-project-folder .app-folder-financial span{background:linear-gradient(155deg,#137af9 0 54%,#a36ff5 55%);color:#fff}
.mac-file b{
  font-size:10px; font-weight:500; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9); word-break:break-word; line-height:1.25;
}
.modern-menubar .mb-set{ display:flex; gap:0; align-items:center; }
.modern-menubar .mb-set[hidden]{ display:none; }
.mb-menu{ position:relative; display:inline-flex; height:26px; align-items:center; }
.mb-menu-trigger{
  height:22px; padding:0 8px; border:0; border-radius:5px; background:transparent;
  color:inherit; font:inherit; cursor:default;
}
.mb-menu-trigger:hover,.mb-menu-trigger.open{ background:rgba(255,255,255,.18); }
.mb-menu-trigger.app-name{ font-weight:700; }
.mb-menu-trigger.apple-trigger{ width:28px; padding:0; font-family:-apple-system,"SF Pro Text",sans-serif; font-size:15px; }
.mb-dropdown{
  position:absolute; left:0; top:24px; width:238px; padding:5px;
  border:1px solid rgba(255,255,255,.19); border-radius:8px;
  background:rgba(29,30,38,.88); color:#f5f5f7;
  -webkit-backdrop-filter:blur(30px) saturate(1.4); backdrop-filter:blur(30px) saturate(1.4);
  box-shadow:0 18px 45px rgba(0,0,0,.48); font-size:13px;
}
.mb-dropdown[hidden]{ display:none; }
.mb-dropdown button{
  width:100%; min-height:27px; display:flex; align-items:center; gap:12px;
  padding:3px 9px; border:0; border-radius:5px; background:transparent;
  color:inherit; font:inherit; text-align:left; cursor:default;
}
.mb-dropdown button:hover,.mb-dropdown button:focus-visible{ background:#0a84ff; color:#fff; outline:0; }
.mb-dropdown button span{ flex:1; }
.mb-dropdown kbd{ color:rgba(255,255,255,.62); font:12px -apple-system,"SF Pro Text",sans-serif; }
.mb-menu-sep{ display:block; height:1px; margin:4px 7px; background:rgba(255,255,255,.13); }

/* GhostBridge's real menu-extra: controller entry, display presets, guests,
   remote computers, and the restore path all remain reachable from the clock. */
.mb-ghost-menu{ margin-left:4px; }
.mb-bridge{ max-width:360px; padding:0 7px 0 5px; gap:6px; display:inline-flex; align-items:center; }
.mb-bridge-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9; font-size:12px; }
.mb-bridge-glyph{
  position:relative; flex:0 0 29px; width:29px; height:18px; display:grid; place-items:center;
  border-radius:6px; background:linear-gradient(180deg,#8068ff,#6550e8);
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.3);
}
.mb-bridge-glyph::before{ content:''; width:13px; height:8px; border:1px solid #fff; border-radius:2px; }
.mb-bridge-glyph::after{ content:''; position:absolute; right:4px; bottom:4px; width:3px; height:3px; border-radius:50%; background:#fff; }
.mb-bridge-glyph i{ position:absolute; left:8px; bottom:3px; width:7px; height:1px; background:#fff; box-shadow:0 2px #fff; opacity:.9; }
.mb-bridge.open .mb-bridge-glyph{ filter:brightness(1.18); box-shadow:0 0 0 2px rgba(255,255,255,.28),0 2px 8px rgba(63,41,202,.55); }
.mb-ghost-dropdown{
  position:fixed; left:auto; right:52px; top:27px; width:min(300px,calc(100vw - 10px));
  max-height:calc(100vh - 34px); overflow:auto; padding:5px;
  border-radius:11px; background:rgba(22,22,25,.94); color:#f4f4f6;
  scrollbar-width:thin; overscroll-behavior:contain;
}
.mb-ghost-dropdown .mb-ghost-heading{ display:block; padding:5px 10px 1px; color:#77777e; font-size:13px; font-weight:700; }
.mb-ghost-dropdown button{ min-height:25px; padding:2px 9px; }
.mb-ghost-dropdown .mb-ghost-primary{ background:#397bea; color:#fff; }
.mb-ghost-dropdown .mb-menu-sep{ margin:5px 7px; }
@media(max-width:900px){
  .mb-bridge{ max-width:43px; padding-right:5px; }
  .mb-bridge-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mb-ghost-dropdown{ right:5px; }
}

/* ---- TinkyStream: menu-bar share control + Currently Sharing popover ---- */
.mb-share{
  margin-left:12px; padding:1px 9px; border-radius:6px; cursor:pointer;
  font-size:13px; background:transparent; transition:background .15s ease;
}
.mb-share.on{ background:#7c5cff; color:#fff; }
.mb-list-status{
  position:relative; flex:0 0 30px; width:30px; height:20px; margin-left:7px; padding:0;
  display:grid; place-items:center; border:0; border-radius:7px; appearance:none;
  background:linear-gradient(180deg,#597dff,#5247dc); color:#fff; cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 1px 3px rgba(0,0,0,.32);
}
.mb-list-status:hover,.mb-list-status:focus-visible{ filter:brightness(1.13); outline:2px solid rgba(174,211,255,.88); outline-offset:1px; }
.mb-list-book{ width:16px; height:11px; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:2px 3px; border:1px solid rgba(255,255,255,.95); border-radius:3px; }
.mb-list-book i{ display:block; width:9px; height:1px; border-radius:2px; background:#fff; box-shadow:none; }
.mb-list-dot{ position:absolute; right:-2px; top:-2px; width:6px; height:6px; border:1px solid rgba(12,17,38,.75); border-radius:50%; background:#b7c0d0; }
.mb-list-status.live .mb-list-dot{ background:#42f2a7; box-shadow:0 0 5px rgba(66,242,167,.8); }
.mb-list-status.snapshot .mb-list-dot{ background:#ffca62; }
.mb-list-status.error .mb-list-dot{ background:#ff6961; }
.mb-list-status.checking .mb-list-dot{ animation:mb-list-pulse 1.15s ease-in-out infinite alternate; }
@keyframes mb-list-pulse{ to{ opacity:.35; transform:scale(.75); } }
.ts-popover{
  position:absolute; top:30px; right:120px; z-index:60; width:300px;
  border-radius:14px; padding:12px 12px 14px; color:#fff;
  background:rgba(32,32,38,.78);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  font-family:-apple-system,"SF Pro Text","Segoe UI",sans-serif;
}
.ts-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:13px; }
.ts-appicon{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); border-radius:6px; font-size:12px;
}
.ts-pill{
  margin-left:auto; background:#7c5cff; border-radius:6px;
  padding:1px 8px; font-size:12px;
}
.ts-label{ font-size:12px; opacity:.7; margin:2px 0 6px; }
.ts-thumb{
  position:relative; height:168px; border-radius:8px; overflow:hidden;
  background:#0a0a12; border:1px solid rgba(255,255,255,.12);
}
.ts-thumb .ts-off{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; opacity:.6;
}
.ts-stop{
  width:100%; margin-top:10px; padding:7px 0; border:0; border-radius:8px;
  background:rgba(255,255,255,.12); color:#ff5f57; font-size:13px; font-weight:600;
  cursor:pointer;
}
.ts-stop:hover{ background:rgba(255,255,255,.2); }
.ts-stop.go{ color:#28c840; }
.kwa-vm-main.stream-off .vm-win95{ filter:grayscale(.9) brightness(.45); }
.kwa-vm-main.stream-off::after{
  content:'⏸ stream paused'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font:600 14px -apple-system,"SF Pro Text",sans-serif;
  text-shadow:0 2px 8px rgba(0,0,0,.8); pointer-events:none;
}

/* ---- the Kist Work Agent window (light app on the dark Mac) ---- */
.kwa-window{
  position:absolute; left:50%; top:calc(50% - 6px); transform:translate(-50%,-50%);
  z-index:40;
  width:min(1120px,94vw); height:min(760px,88vh);
  background:#ffffff; color:#1f2937; border-radius:12px; overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  font-size:13px;
}
.kwa-macbar{
  display:flex; align-items:center; gap:8px; padding:8px 12px; background:#eef1f5; border-bottom:1px solid #dfe3ea;
}
.kwa-macbar .mac-lights{ display:flex; gap:7px; }
.kwa-macbar .mac-lights i{ width:11px; height:11px; border-radius:50%; display:block; }
.kwa-macbar .mac-lights .r{ background:#ff5f57; } .kwa-macbar .mac-lights .y{ background:#febc2e; } .kwa-macbar .mac-lights .g{ background:#28c840; }
.kwa-macbar .u{ flex:1; text-align:center; color:#8a94a6; font-size:12px; }
.kwa-return-98{ min-width:104px; height:25px; padding:0 9px; border:1px solid #b9c2cf; border-radius:7px; background:#fff; color:#234265; box-shadow:0 1px 2px rgba(26,42,62,.08); font:800 9px ui-monospace,Menlo,monospace; cursor:pointer; touch-action:manipulation; white-space:nowrap; }
.kwa-return-98:hover,.kwa-return-98:focus-visible{ border-color:#3184dc; background:#edf6ff; outline:2px solid #79b9fb; outline-offset:1px; }

/* app top bar */
.kwa-topbar{
  display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid #e6e9ef; background:#fff;
}
.kwa-logo{ width:22px; height:22px; border-radius:50%;
  background:conic-gradient(from 0deg,#ef4444,#f59e0b,#10b981,#3b82f6,#8b5cf6,#ef4444); }
.kwa-brand{ font-weight:800; font-size:15px; color:#111827; margin-right:4px; }
.kwa-btn{ height:26px; padding:0 12px; border-radius:7px; border:1px solid #d7dbe3; background:#fff; color:#1f2937;
  font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.kwa-btn.green{ background:#16a34a; border-color:#16a34a; color:#fff; }
.kwa-btn.blue{ background:#1e3a8a; border-color:#1e3a8a; color:#fff; }
.kwa-topbar .lbl{ color:#8a94a6; font-size:12px; margin-left:6px; }
.kwa-select{ height:26px; padding:0 8px; border:1px solid #d7dbe3; border-radius:7px; background:#fff; font-size:12px; color:#1f2937; }
.kwa-os-switch,#kwaShowOs{ cursor:pointer; touch-action:manipulation; }
.kwa-topbar .spacer{ flex:1; }

/* body split: control column (light) + VM panels (dark) */
.kwa-body{ flex:1; display:flex; min-height:0; background:#f6f8fb; }
.kwa-left{ width:340px; flex:0 0 340px; padding:12px; overflow:auto; border-right:1px solid #e6e9ef; display:flex; flex-direction:column; gap:12px; }
.kwa-card{ background:#fff; border:1px solid #e6e9ef; border-radius:10px; padding:10px 12px; }
.kwa-card .head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.kwa-card .head b{ font-size:14px; color:#111827; flex:1; }
.pill{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#d1fae5; color:#047857; display:inline-flex; align-items:center; gap:5px; }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 6px #10b981; animation:kwa-pulse 1.3s ease-in-out infinite; }
@keyframes kwa-pulse{ 50%{opacity:.35} }
.kwa-clear{ color:#16a34a; font-weight:700; font-size:12px; cursor:pointer; }
.kwa-hintbox{ border:1px solid #e6e9ef; border-radius:8px; padding:9px 10px; color:#6b7280; font-size:12px; line-height:1.5; background:#fbfcfe; }
.kwa-transcript{ border:1px solid #e6e9ef; border-radius:8px; padding:9px 10px; height:150px; overflow:hidden; background:#fbfcfe;
  color:#374151; font-size:12px; line-height:1.5; }
.kwa-transcript .l{ opacity:0; transform:translateY(3px); }
.kwa-transcript .l.in{ opacity:1; transform:none; transition:all .3s ease; }
.kwa-transcript .l .k{ color:#047857; font-weight:700; }
.kwa-transcript .l .arrow{ color:#16a34a; }
.kwa-inputbox{ border:1px solid #e6e9ef; border-radius:8px; padding:9px 10px; color:#6b7280; font-size:12px; line-height:1.5; background:#fff; }
.kwa-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:#8a94a6; }
.kwa-row .kwa-btn{ flex:0 0 auto; }
.kwa-pc .pcline{ font-size:12px; color:#6b7280; margin-bottom:8px; }
.kwa-pc .pcline b{ color:#111827; }
.kwa-pc .pcbtns{ display:flex; gap:8px; }

/* right: dark VM panels */
.kwa-right{ flex:1; min-width:0; padding:12px; display:flex; flex-direction:column; gap:12px; overflow:hidden; }
.kwa-vm{ position:relative; background:#0a0e16; border:1px solid #1a2230; border-radius:10px; overflow:hidden;
  background-image:linear-gradient(rgba(46,220,140,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(46,220,140,.06) 1px, transparent 1px);
  background-size:34px 34px; }
.kwa-vm .vm-tag{ position:absolute; top:8px; left:10px; font-size:11px; font-weight:700; color:#34d399; z-index:3; }
.kwa-vm-main{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; }
.kwa-vm-row{ flex:0 0 190px; display:flex; gap:12px; }
.kwa-vm-row .kwa-vm{ flex:1; }
.vm-screen{ position:absolute; inset:26px 14px 34px; border-radius:6px; background:#02120a; overflow:hidden;
  color:#00e676; font-family:"Consolas","Courier New",monospace; font-size:12px; line-height:1.5; padding:10px 12px; white-space:pre-wrap; }
.vm-screen::after{ content:''; position:absolute; left:0; right:0; height:24px; top:0; background:linear-gradient(rgba(0,255,140,.13),transparent); animation:vm-scan 3s linear infinite; }
@keyframes vm-scan{ 0%{top:-24px} 100%{top:100%} }
.vm-status{ position:absolute; left:12px; right:12px; bottom:8px; display:flex; gap:14px; font-size:11px; color:#7c8aa0; z-index:3; }
.vm-status .ok{ color:#34d399; }
.vm-cells .rows{ position:absolute; left:8px; top:26px; bottom:26px; display:flex; flex-direction:column; justify-content:space-between; color:#2f7; font-size:10px; z-index:3; }
.vm-cells .rows span{ background:#0d3; color:#021; padding:0 3px; border-radius:2px; opacity:.85; }
.vm-noframe{ text-align:center; color:#cbd5e1; }
.vm-noframe b{ display:block; font-size:14px; color:#fff; margin-bottom:4px; }

.kwa-data{ flex:0 0 auto; background:#fff; border:1px solid #e6e9ef; border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:10px; }
.kwa-data b{ font-size:14px; color:#111827; }
.kwa-data .scrollhint{ flex:1; font-size:11px; color:#9ca3af; }
.kwa-data .src{ font-size:12px; color:#16a34a; font-weight:700; }

/* ---- Data Exchange: graphs, grid, export ---- */
.kwa-right{ overflow-y:auto; }
.kwa-vm-main{ flex:0 0 340px; min-height:340px; }
.kwa-vm-row, .kwa-vm-row .kwa-vm{ flex-shrink:0; }
.kwa-exchange{ display:flex; flex-direction:column; gap:10px; padding-bottom:6px; }
.kwa-charts{ display:flex; gap:10px; }
.kwa-chart{ flex:1; min-width:0; }
.kwa-chart .head{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.kwa-chart .head b{ font-size:13px; color:#111827; }
.kwa-chart .head .sub{ font-size:11px; color:#9ca3af; }
.kwa-bars{ display:flex; align-items:flex-end; gap:10px; height:110px; padding:4px 2px 0; }
.kwa-bars .bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; min-width:0; }
.kwa-bars .bar i{
  width:70%; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#34d399,#059669);
  box-shadow:0 0 8px rgba(16,185,129,.35);
}
.kwa-bars .bar b{ font-size:9px; color:#374151; font-weight:600; white-space:nowrap; }
.kwa-bars .bar span{ font-size:9px; color:#9ca3af; }
.kwa-stackrow{ display:flex; height:64px; border-radius:8px; overflow:hidden; margin-top:14px; }
.kwa-stackrow .seg{ display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; min-width:0; }
.kwa-stackrow .seg b{ font-size:10px; letter-spacing:.5px; }
.kwa-stackrow .seg span{ font-size:11px; font-weight:700; }
.kwa-stackrow .gross{ background:#3b82f6; }
.kwa-stackrow .tax{ background:#f59e0b; }
.kwa-stackrow .net{ background:#10b981; }
.kwa-exgrid table{ width:100%; border-collapse:collapse; font-size:12px; color:#111827; }
.kwa-exgrid th{ text-align:left; font-size:10px; letter-spacing:.6px; color:#6b7280; border-bottom:1px solid #e5e7eb; padding:4px 8px; }
.kwa-exgrid td{ padding:5px 8px; border-bottom:1px solid #f3f4f6; white-space:nowrap; }
.kwa-exgrid td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.kwa-exportrow{ display:flex; align-items:center; gap:10px; padding:2px 2px 8px; }
.kwa-btn.big{ font-size:13px; font-weight:700; padding:10px 16px; }
.kwa-exportstatus{ font-size:12px; color:#374151; }

/* dock + back hint */
.modern-dock{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:20;
  display:flex; align-items:flex-end; gap:12px; padding:6px 14px; border-radius:16px;
  background:rgba(28,34,58,.6); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.12);
}
.modern-dock .d{
  font-size:26px; cursor:pointer; transform-origin:bottom center;
  transition:transform .16s cubic-bezier(.3,.9,.4,1); position:relative;
}
.modern-dock .d.running::after{
  content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#fff; opacity:.9;
}
.kwa-window{
  transform:translate(calc(-50% + var(--kwa-x, 0px)), calc(-50% + var(--kwa-y, 0px)));
  transition:transform .5s cubic-bezier(.5,.05,.7,.4), opacity .45s ease;
}
.kwa-window.dragging{ transition:none; }
.kwa-window.minimized{
  transform:translate(calc(-50% + var(--kwa-x, 0px)), calc(-50% + var(--kwa-y, 0px) + 46vh)) scale(.06);
  opacity:0; pointer-events:none;
}

/* ---- Legacy VM: the ENTIRE Win95/98 desktop live in the panel ---------- */
.vm-win95{
  position:absolute; inset:26px 14px 34px; border-radius:6px; overflow:hidden;
  background:#008080;
  font-family:"Tahoma","MS Sans Serif","Segoe UI",sans-serif;
}
.vm-win95-live{
  display:flex; align-items:center; justify-content:center;
  background:#05080d; cursor:zoom-in;
}
.vm-win95-live:focus-visible{ outline:2px solid #34d399; outline-offset:2px; }
.vm-live-wait{
  color:#7c8aa0; padding:18px; text-align:center;
  font:11px/1.5 "Consolas","Courier New",monospace;
}
.vm-win95-live:not(.no-live-screen) .vm-live-wait{ display:none; }

/* The canonical Win95 root remains a body-level sibling. These rules only
   remove full-screen entrance/exit animation while its live pixels are fitted
   over the Kist panel by era-modern.js. */
.w95.modern-mirror{
  display:block;
  animation:none !important;
  transition:none !important;
  border-radius:4px;
}
.w95.modern-mirror::after{
  content:'CLICK TO ENTER WINDOWS 98';
  position:absolute; right:22px; top:22px; z-index:12000;
  padding:12px 18px; border:2px solid #fff; background:#000080;
  color:#fff; box-shadow:3px 3px 0 #000;
  font:700 26px/1 var(--w95-font); pointer-events:none;
}
.vm-win95 .w95m-boot{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:#000; color:#c8c8c8; font-family:"Consolas","Courier New",monospace; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.vm-win95.boot .w95m-boot{ opacity:1; }
.vm-win95 .w95m-desk{ position:absolute; inset:0; }

.w95m-icons{ position:absolute; left:10px; top:8px; display:flex; flex-direction:column; gap:11px; }
.w95m-icons span{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:#fff; font-size:9px; text-shadow:1px 1px 0 rgba(0,0,0,.6); width:64px; text-align:center;
}
.w95m-icons span i{ font-style:normal; font-size:17px; }

/* classic raised-bevel window; hidden until the app step opens it */
.vm-win95 .w95m-w{
  position:absolute; display:flex; flex-direction:column;
  background:#c0c0c0; border:2px solid; border-color:#dfdfdf #404040 #404040 #dfdfdf;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
  opacity:0; transform:translateY(6px);
}
.vm-win95.app .w95m-w{ opacity:1; transform:none; transition:opacity .28s ease, transform .28s ease; }
.w95m-console{ left:17%; right:11%; top:5%; height:52%; z-index:1; }
.w95m-conbody{
  flex:1; margin:3px; padding:4px 6px; overflow:hidden;
  background:#000; color:#2ee465;
  font-family:"Consolas","Courier New",monospace; font-size:9px; line-height:1.5;
}
.w95m-constatus{ display:flex; gap:8px; padding:1px 6px; font-size:9px; color:#000; border-top:1px solid #808080; }
.w95m-payrun{ left:2%; top:24%; width:31%; height:58%; z-index:2; }
.w95m-title.blue{ background:linear-gradient(90deg,#000080,#1084d0); }
.w95m-paybody{
  flex:1; margin:3px; padding:4px 6px; overflow:hidden;
  background:#0000aa; color:#fff;
  font-family:"Consolas","Courier New",monospace; font-size:8.5px; line-height:1.45;
}
.w95m-ledger{ right:2%; bottom:11%; width:47%; height:60%; z-index:3; }
.w95m-ledgerhint{ padding:2px 6px; font-size:9px; color:#000; background:#ffffe1; border-bottom:1px solid #808080; }
.w95m-ledger .w95m-grid tbody tr:nth-child(odd){ background:#fffbe6; }
.vm-win95 .w95m-win{
  position:absolute; left:96px; right:26px; top:16px; bottom:34px;
  background:#c0c0c0; display:flex; flex-direction:column;
  border:2px solid; border-color:#dfdfdf #404040 #404040 #dfdfdf;
  box-shadow:1px 1px 0 #000, inset 1px 1px 0 #fff;
  opacity:0; transform:scale(.96); pointer-events:none;
}
.vm-win95.app .w95m-win{ opacity:1; transform:none; transition:opacity .28s ease, transform .28s ease; }
.w95m-title{
  display:flex; align-items:center; gap:5px; padding:2px 3px 2px 5px;
  background:linear-gradient(90deg,#000080,#1084d0); color:#fff; font-size:10.5px; font-weight:700;
}
.w95m-title i{ font-style:normal; font-size:11px; }
.w95m-title b{ flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w95m-title .tb{
  width:15px; height:13px; display:flex; align-items:center; justify-content:center;
  background:#c0c0c0; color:#000; font-size:9px; font-weight:700;
  border:1px solid; border-color:#fff #404040 #404040 #fff;
}
.w95m-menu{ display:flex; gap:11px; padding:2px 7px; font-size:10px; color:#000; border-bottom:1px solid #808080; }
.w95m-gridwrap{ flex:1; min-height:0; margin:4px; background:#fff; border:1px solid; border-color:#404040 #dfdfdf #dfdfdf #404040; overflow:hidden; }
.w95m-grid{ width:100%; border-collapse:collapse; font-family:"Consolas","Courier New",monospace; font-size:10px; color:#000; }
.w95m-grid th{
  text-align:left; padding:2px 6px; background:#c0c0c0; font-weight:700;
  border-right:1px solid #808080; border-bottom:1px solid #808080;
}
.w95m-grid td{ padding:2px 6px; border-right:1px solid #e2e2e2; white-space:nowrap; }
.w95m-grid td.num{ text-align:right; }
.w95m-grid tbody tr{ opacity:0; }
.vm-win95.app .w95m-grid tbody tr{ opacity:1; transition:opacity .25s ease; }
.vm-win95.app .w95m-grid tbody tr:nth-child(1){ transition-delay:.05s; }
.vm-win95.app .w95m-grid tbody tr:nth-child(2){ transition-delay:.15s; }
.vm-win95.app .w95m-grid tbody tr:nth-child(3){ transition-delay:.25s; }
.vm-win95.app .w95m-grid tbody tr:nth-child(4){ transition-delay:.35s; }
.vm-win95.app .w95m-grid tbody tr:nth-child(5){ transition-delay:.45s; }
.vm-win95.app .w95m-grid tbody tr:nth-child(6){ transition-delay:.55s; }
.w95m-grid tr.hl td{ background:#000080; color:#fff; }
.w95m-status{
  margin:0 4px 4px; padding:1px 6px; font-size:9.5px; color:#000; background:#c0c0c0;
  border:1px solid; border-color:#808080 #fff #fff #808080;
}
.w95m-taskbar{
  position:absolute; left:0; right:0; bottom:0; height:22px; z-index:4;
  display:flex; align-items:center; gap:5px; padding:0 4px;
  background:#c0c0c0; border-top:1px solid #fff; font-size:10px; color:#000;
}
.w95m-taskbar .start{
  display:flex; align-items:center; gap:3px; padding:1px 6px; font-weight:700;
  background:#c0c0c0; border:1px solid; border-color:#fff #404040 #404040 #fff;
}
.w95m-taskbar .start b{ font-size:11px; }
.w95m-taskbar .task{
  flex:0 1 auto; padding:1px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:#b8b8b8; border:1px solid; border-color:#404040 #fff #fff #404040;
}
.w95m-taskbar .clock{ margin-left:auto; padding:1px 6px; border:1px solid; border-color:#808080 #fff #fff #808080; }

/* Data Cells: numbered chip + live value synced from the legacy app */
.vm-cells .rows span{ display:flex; align-items:center; gap:5px; background:transparent; color:#2f7; padding:0; opacity:1; }
.vm-cells .rows span b{ background:#0d3; color:#021; padding:0 3px; border-radius:2px; font-weight:700; }
.vm-cells .rows span i{
  font-style:normal; font-family:"Consolas","Courier New",monospace; font-size:10px; color:#7fe7b0;
  opacity:.3; transition:opacity .3s ease;
}
.vm-cells .rows span.filled i{ opacity:1; }
.vm-cells .rows span.flash b{ background:#fb0; animation:kwa-cell-flash .9s ease-in-out infinite; }
@keyframes kwa-cell-flash{ 50%{ filter:brightness(1.6); } }
.vm-cells .rows span.sync b{ background:#0d3; }