/* The ELSETRON 486: room, monitor, keyboard, ElseOS desktop and its apps. */


/* ---------- the room and the machine ---------- */
#pc { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(60,40,70,.55), rgba(10,6,16,.94) 75%);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
#pc.on { opacity: 1; }
.pc-rig { display: flex; flex-direction: column; align-items: center; margin-top: 10px; transform: translateY(14px); transition: transform .35s cubic-bezier(.2,.8,.3,1); }
#pc.on .pc-rig { transform: none; }
.pc-stand { position: fixed; top: 12px; right: 12px; z-index: 2; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow); padding: 4px 10px; font-family: var(--pix); font-size: 12px; color: var(--ink); }
.pc-stand:hover { background: #fff8e8; }

.pc-monitor { position: relative; z-index: 1; padding: 20px 30px 0; border-radius: 22px 22px 12px 12px;
  background: linear-gradient(180deg, #ebe3cf 0%, #d9cfb6 55%, #c9bea3 100%);
  box-shadow: inset 0 2px 0 #f8f2e2, inset 0 -3px 0 #a99e84, inset 3px 0 0 #efe8d6, inset -3px 0 0 #b8ad92, 0 18px 40px rgba(0,0,0,.55), 0 4px 0 #8f856d; }
.pc-bezel { padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #cfc5ac, #ddd4bd); box-shadow: inset 0 3px 8px rgba(0,0,0,.35), inset 0 -1px 0 #f2ebda; }
.pc-screen { position: relative; overflow: hidden; border-radius: 18px / 15px; background: #050405; box-shadow: 0 0 0 3px #2a2630, 0 0 0 5px #8f8670; }
.pc-display { position: absolute; left: 0; top: 0; width: 1024px; height: 720px; transform-origin: 0 0; overflow: hidden; font-family: var(--font); font-size: 19px; color: var(--ink); }
.pc-display[data-tint="amber"] { filter: grayscale(1) sepia(1) saturate(4.5) hue-rotate(-14deg) brightness(.92); }
.pc-display[data-tint="green"] { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(68deg) brightness(.9); }
.pc-glass { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; }
.pc-screen.scan .pc-glass::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px); }
.pc-screen.glow .pc-glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 120% 110% at 50% 50%, transparent 62%, rgba(0,0,0,.42) 100%), linear-gradient(128deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 28%, transparent 40%);
  box-shadow: inset 0 0 40px rgba(120,200,255,.08); }
.pc-screen.flicker .pc-glass { animation: crt-flicker 3.2s infinite steps(1); }
@keyframes crt-flicker { 0%, 100% { background: transparent; } 41% { background: rgba(255,255,255,.025); } 42% { background: transparent; } 77% { background: rgba(0,0,0,.04); } 78% { background: transparent; } }
.pc-screen.wake .pc-display { animation: crt-wake .35s ease-out; }
@keyframes crt-wake { 0% { filter: brightness(2.2) blur(1px); } 100% { filter: none; } }

.pc-chin { height: 62px; display: flex; align-items: center; gap: 18px; padding: 0 8px; }
.pc-brand { display: flex; flex-direction: column; line-height: 1; color: #6a604c; }
.pc-brand b { font-family: var(--pix); font-size: 13px; letter-spacing: 3px; color: #4a4232; }
.pc-brand span { font-size: 15px; }
.pc-vents { flex: 1; display: flex; gap: 5px; justify-content: center; }
.pc-vents i { width: 4px; height: 18px; border-radius: 2px; background: #b5aa8f; box-shadow: inset 0 1px 1px rgba(0,0,0,.4); }
.pc-leds { display: flex; gap: 8px; }
.pc-led { width: 9px; height: 6px; border-radius: 2px; background: #5ae070; box-shadow: 0 0 6px #5ae070; }
.pc-led.hdd { background: #4a3a20; box-shadow: none; }
.pc-led.hdd.on { background: #ffb030; box-shadow: 0 0 6px #ffb030; }
.pc-power { width: 34px; height: 24px; border-radius: 4px; border: none; background: linear-gradient(#e6decb, #c2b79c); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #8f856d, 0 0 0 2px #a99e84; }
.pc-power:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 0 0 2px #a99e84; }

.pc-desk { position: relative; width: 140%; max-width: 100vw; height: 120px; margin-top: -6px;
  background: linear-gradient(180deg, #6a4a32, #4a3222 60%, #3a2618); box-shadow: inset 0 3px 0 #7d5a3e; display: flex; justify-content: center; }
.pc-kbd { margin-top: 14px; width: min(760px, 70vw); height: 130px; padding: 10px 14px; border-radius: 8px; transform: perspective(500px) rotateX(38deg); transform-origin: top;
  background: linear-gradient(#e2d9c3, #c6bb9f); box-shadow: 0 6px 0 #8f856d, 0 14px 22px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 5px; }
.pc-krow { display: flex; gap: 5px; }
.pc-krow i { flex: 1; height: 18px; border-radius: 3px; background: linear-gradient(#f4eedf, #d6ccb3); box-shadow: 0 2px 0 #a99e84; }
.pc-krow.r1 { padding-left: 14px; } .pc-krow.r2 { padding-left: 22px; } .pc-krow.r3 { padding-left: 34px; padding-right: 30px; }
.pc-krow.sp { padding: 0 22%; } .pc-krow i.space { flex: 6; }
.pc-mouse { position: absolute; right: 12%; top: 26px; width: 42px; height: 60px; border-radius: 20px 20px 18px 18px; background: linear-gradient(#e2d9c3, #c2b79c); box-shadow: 0 4px 0 #8f856d, 0 10px 16px rgba(0,0,0,.4); }
.pc-mug { position: absolute; left: 9%; top: 20px; width: 46px; height: 54px; border-radius: 4px 4px 10px 10px; background: linear-gradient(90deg, #c04a3a, #e06a50 40%, #a03a2a); box-shadow: 0 8px 14px rgba(0,0,0,.4); }
.pc-mug::after { content: ''; position: absolute; right: -14px; top: 12px; width: 14px; height: 22px; border: 5px solid #b0402f; border-left: none; border-radius: 0 12px 12px 0; }

/* ---------- boot ---------- */
.pc-boot { position: absolute; inset: 0; z-index: 20; background: #000; color: #b8b8b8; padding: 28px 36px; font-family: 'VT323', monospace; font-size: 22px; line-height: 1.1; cursor: default; }
.pc-boot.crt-on { animation: crt-on .5s ease-out; }
@keyframes crt-on { 0% { transform: scale(1, .004); filter: brightness(4); } 45% { transform: scale(1, .004); filter: brightness(4); } 70% { transform: scale(1, 1); filter: brightness(2); } 100% { filter: none; } }
.bios { margin: 0; font: inherit; white-space: pre-wrap; }
.bios-star { position: absolute; right: 36px; top: 26px; border: 2px solid #4a8ad0; padding: 4px 10px; display: flex; flex-direction: column; align-items: center; color: #4a8ad0; line-height: 1; }
.bios-star b { font-family: var(--pix); font-size: 14px; letter-spacing: 2px; }
.bios-foot { position: absolute; left: 36px; bottom: 22px; }
.pc-boot.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(circle at 50% 40%, #3a2a5a, #140c1c 70%); color: #fff4e0; }
.splash-logo { display: flex; align-items: center; gap: 16px; }
.splash-logo img { width: 72px; height: 72px; image-rendering: pixelated; }
.splash-logo b { font-family: var(--pix); font-size: 46px; font-weight: normal; }
.splash-logo span { font-size: 30px; margin-left: 6px; opacity: .7; }
.splash-bar { width: 300px; height: 16px; border: 2px solid #fff4e0; padding: 2px; }
.splash-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #ffd860 0 10px, transparent 10px 13px); transition: width 1.2s steps(22); }
.splash-sub { opacity: .6; }
.pc-safe { position: absolute; inset: 0; background: #000; color: #f0a030; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 34px; }
.pc-safe p { margin: 0; line-height: 1.1; }
.pc-safe small { margin-top: 24px; font-size: 18px; color: #6a6050; }

/* ---------- desktop ---------- */
.pc-desktop { position: absolute; left: 0; top: 0; right: 0; bottom: 34px; overflow: hidden; }
.pc-watermark { position: absolute; right: 18px; bottom: 10px; font-family: var(--pix); font-size: 22px; color: rgba(255,255,255,.12); pointer-events: none; }
.pc-icons { position: absolute; left: 8px; top: 8px; bottom: 8px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 76px); gap: 3px 6px; align-content: start; }
.dicon { position: relative; width: 82px; height: 74px; background: none; border: 1px dashed transparent; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; color: #fff; }
.dicon img { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.45)); }
.dicon span { font-size: 17px; line-height: 1; text-shadow: 1px 1px 0 #000, -1px 0 0 rgba(0,0,0,.5); padding: 0 3px; }
.dicon.on span, .dicon:focus span { background: #2a3a8a; text-shadow: none; }
.dicon:focus { outline: none; border-color: rgba(255,255,255,.5); }
.dicon em { position: absolute; top: 0; right: 16px; font-style: normal; background: #d04a4a; color: #fff; font-family: var(--pix); font-size: 9px; padding: 1px 4px; border-radius: 6px; }
.pc-layer { position: absolute; inset: 0; pointer-events: none; }
.pc-layer > .win { position: absolute; pointer-events: auto; max-width: calc(100% - 8px); max-height: calc(100% - 8px); box-shadow: 4px 4px 0 rgba(10,6,16,.55); }
.pc-layer > .win.min { display: none; }
.pc-layer > .win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100%; max-width: 100%; max-height: 100%; box-shadow: none; }
.pc-layer > .win.max > .win-body { flex: 1; height: auto !important; }
.win-icon.img { width: 16px; height: 16px; image-rendering: pixelated; }
.win-min, .win-max { background: var(--paper); border: 2px solid var(--ink); width: 22px; height: 20px; line-height: 10px; padding: 0; font-size: 15px; }

/* wallpapers (desktop, settings swatches, PixelMart thumbnails) */
.wp-teal { background: #2a8080; }
.wp-plum { background: #4a2a5a radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px) 0 0 / 14px 14px; }
.wp-tiles { background: repeating-conic-gradient(#3a6a8a 0 25%, #345e7a 0 50%) 0 0 / 48px 48px; }
.wp-sunset { background: linear-gradient(180deg, #2a1a4a 0 18%, #6a2a6a 18% 34%, #c04a6a 34% 50%, #f08a50 50% 62%, #ffd070 62% 66%, #3a3a7a 66% 72%, #2a2a6a 72% 80%, #1a1a4a 80%); }
.wp-sunset::before { content: none; }
.wp-stars { background: #070514 radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 61px 53px, #070514; background-image: radial-gradient(#fff 1px, transparent 1.5px), radial-gradient(rgba(180,200,255,.8) 1px, transparent 1.5px), radial-gradient(rgba(255,220,180,.6) 1.5px, transparent 2px); background-size: 61px 53px, 97px 83px, 149px 131px; background-position: 0 0, 30px 40px, 70px 10px; }
.wp-vapor { background: linear-gradient(180deg, #1a0a3a 0%, #4a1a6a 45%, #f070c0 52%, transparent 52.5%),
  repeating-linear-gradient(90deg, rgba(64,240,255,.55) 0 2px, transparent 2px 64px), repeating-linear-gradient(180deg, rgba(64,240,255,.55) 0 2px, transparent 2px 36px), #1a0a3a; }
.wp-clouds { background: radial-gradient(ellipse 120px 40px at 20% 30%, #fff 60%, transparent 62%), radial-gradient(ellipse 160px 50px at 70% 20%, #fff 60%, transparent 62%), radial-gradient(ellipse 140px 44px at 45% 65%, #fff 60%, transparent 62%), radial-gradient(ellipse 100px 34px at 85% 75%, #fff 60%, transparent 62%), linear-gradient(#5aa0e0, #a0d0f8); }

/* ---------- taskbar and Start menu ---------- */
.pc-taskbar, .pc-startmenu, .pc-task, .pc-start, .ide-tb, .nav-btn, .mail-tb { --bev-hi: #fff8ea; --bev-lo: #7a705c; }
.pc-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 10; display: flex; align-items: center; gap: 4px; padding: 3px 4px; background: #d6cdb6; box-shadow: inset 0 2px 0 var(--bev-hi), inset 0 -1px 0 var(--bev-lo); }
.pc-start, .pc-task { height: 27px; display: flex; align-items: center; gap: 5px; padding: 0 8px; background: #d6cdb6; border: none; color: var(--ink); box-shadow: inset 1px 1px 0 var(--bev-hi), inset -1px -1px 0 var(--bev-lo), 1px 1px 0 #3a3428; }
.pc-start { font-family: var(--pix); font-size: 12px; }
.pc-start img, .pc-task img { width: 16px; height: 16px; image-rendering: pixelated; }
.pc-tasks { flex: 1; display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.pc-task { flex: 0 1 170px; min-width: 40px; font-size: 16px; }
.pc-task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pc-task.on, .pc-start:active { background: #e8e0cc repeating-conic-gradient(#e8e0cc 0 25%, #f2ecdc 0 50%) 0 0 / 2px 2px; box-shadow: inset 1px 1px 0 var(--bev-lo), inset -1px -1px 0 var(--bev-hi); }
.pc-tray { display: flex; align-items: center; gap: 10px; height: 27px; padding: 0 10px; box-shadow: inset 1px 1px 0 var(--bev-lo), inset -1px -1px 0 var(--bev-hi); font-size: 18px; }
.tray-mail { background: none; border: none; padding: 0; display: flex; align-items: center; gap: 2px; font-family: var(--pix); font-size: 10px; color: #d04a4a; }
.tray-mail img { width: 18px; height: 18px; image-rendering: pixelated; opacity: .45; }
.tray-mail.new img { opacity: 1; animation: mailbob 1s steps(2) infinite; }
@keyframes mailbob { 50% { transform: translateY(-2px); } }
.tray-coins { color: #6a4a10; }
.pc-startmenu { position: absolute; left: 2px; bottom: 32px; z-index: 11; width: 240px; display: flex; background: #d6cdb6; box-shadow: inset 1px 1px 0 var(--bev-hi), inset -1px -1px 0 var(--bev-lo), 2px 2px 0 #3a3428; padding: 3px; }
.sm-band { writing-mode: vertical-rl; transform: rotate(180deg); background: linear-gradient(0deg, var(--title), #2a2a6a); color: #fff4e0; font-family: var(--pix); font-size: 15px; padding: 8px 4px; }
.sm-band b { color: #ffd860; font-weight: normal; }
.sm-items { flex: 1; display: flex; flex-direction: column; }
.sm-item { display: flex; align-items: center; gap: 10px; background: none; border: none; text-align: left; padding: 4px 10px; font-size: 19px; color: var(--ink); }
.sm-item img { width: 24px; height: 24px; image-rendering: pixelated; }
.sm-item:hover { background: #2a3a8a; color: #fff; }
.sm-sep { height: 2px; margin: 3px 4px; box-shadow: inset 0 1px 0 var(--bev-lo), inset 0 -1px 0 var(--bev-hi); }

/* shared bevel buttons for apps */
.ide-tb, .nav-btn, .mail-tb { background: #d6cdb6; border: none; padding: 2px 9px; color: var(--ink); font-size: 17px; box-shadow: inset 1px 1px 0 var(--bev-hi), inset -1px -1px 0 var(--bev-lo), 1px 1px 0 #3a3428; }
.ide-tb:active, .nav-btn:active, .mail-tb:active { box-shadow: inset 1px 1px 0 var(--bev-lo), inset -1px -1px 0 var(--bev-hi); }
.ide-tb:disabled, .nav-btn:disabled { color: #8a8070; text-shadow: 1px 1px 0 #fff; cursor: default; }

/* ---------- Settings, viewer ---------- */
.set-body h4:first-child { margin-top: 0; }
.set-wps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.set-wp { background: #fffaf0; border: 2px solid #c8b898; padding: 4px; display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.set-wp i { display: block; height: 56px; border: 2px solid var(--ink); }
.set-wp.on { border-color: var(--ink); background: #ffd860; }
.set-wp.locked i { filter: grayscale(.8) brightness(.7); }
.notepad { margin: 0; max-height: 440px; overflow: auto; background: #fff; border: 2px inset #ccc; padding: 8px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; white-space: pre-wrap; }
.viewer-obj { display: flex; gap: 14px; align-items: flex-start; }
.viewer-stage { background: repeating-conic-gradient(#e8dcc4 0 25%, #f4ecdc 0 50%) 0 0 / 16px 16px; border: 3px solid var(--ink); padding: 8px 14px; }
.viewer-stage img { width: 102px; height: 147px; image-rendering: pixelated; display: block; }

/* ---------- Navigator ---------- */
.win.app-browser .win-body.nav-body { padding: 0; height: 600px; display: flex; flex-direction: column; background: #d6cdb6; overflow: hidden; }
.nav-tool { display: flex; align-items: center; gap: 4px; padding: 5px 6px; box-shadow: inset 0 -1px 0 #7a705c; }
.nav-btn { min-width: 32px; }
.nav-lbl { font-size: 16px; margin-left: 6px; }
.nav-addr { flex: 1; min-width: 100px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 3px 6px; border: none; background: #fff; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; outline: none; }
.nav-throb { width: 34px; height: 30px; display: grid; place-items: center; background: #1a1a5a; color: #fff; font-family: 'Times New Roman', serif; font-weight: bold; font-size: 24px; box-shadow: inset 1px 1px 0 #7a705c; overflow: hidden; position: relative; }
.nav-throb.on::after { content: ''; position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px 2px #9ad0f0; animation: meteor .6s linear infinite; }
@keyframes meteor { 0% { transform: translate(-16px, -14px); } 100% { transform: translate(16px, 14px); } }
.nav-marks { display: flex; gap: 2px; padding: 3px 6px; flex-wrap: wrap; box-shadow: inset 0 -1px 0 #7a705c; }
.nav-marks button { background: none; border: 1px solid transparent; font-size: 15px; padding: 0 6px; color: var(--ink); }
.nav-marks button:hover { border-color: #fff8ea #7a705c #7a705c #fff8ea; }
.nav-page { flex: 1; overflow: auto; background: #fff; margin: 0 4px; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; position: relative; }
.nav-page.loading > * { opacity: .25; }
.nav-page.loading { cursor: wait; }
.nav-status { position: relative; height: 24px; display: flex; align-items: center; padding: 0 8px; font-size: 15px; margin: 3px 4px 4px; box-shadow: inset 1px 1px 0 #7a705c, inset -1px -1px 0 #fff8ea; overflow: hidden; }
.nav-prog { position: absolute; right: 6px; top: 6px; height: 11px; width: 0; max-width: 140px; background: repeating-linear-gradient(90deg, #2a3a8a 0 8px, transparent 8px 10px); }

/* web pages */
.site { min-height: 100%; padding: 12px 18px 20px; font-family: 'Times New Roman', Times, serif; font-size: 17px; color: #000; line-height: 1.25; }
.site h1, .site h2, .site h3 { font-family: inherit; font-weight: bold; }
.site h1 { font-size: 30px; margin: 4px 0 8px; } .site h2 { font-size: 22px; } .site h3 { font-size: 18px; }
.site p { margin: 6px 0; line-height: 1.25; }
.lnk { color: #0000ee; text-decoration: underline; cursor: pointer; }
.lnk:hover { color: #ee0000; }
.lnk.small { font-size: 14px; }
.site .good { color: #1a7a3a; } .site .bad { color: #b02020; }
.site table { border-collapse: collapse; }
.hitc { font-family: ui-monospace, monospace; background: #000; color: #4f4; padding: 0 4px; letter-spacing: 2px; }
.stars { color: #e0a000; letter-spacing: 1px; }
.pthumb { width: 34px; height: 49px; image-rendering: pixelated; }
.pthumb.big { width: 102px; height: 147px; }
.pthumb.icon { width: 32px; height: 32px; margin: 8px 1px; }
.pthumb.icon.big { width: 96px; height: 96px; margin: 24px 3px; }
.pswatch { width: 48px; height: 34px; border: 2px solid #000; margin: 8px 0; }
.pswatch.big { width: 180px; height: 120px; }

.site-portal { background: #fff; }
.portal-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 4px; }
.portal-logo img { width: 48px; height: 48px; image-rendering: pixelated; }
.portal-logo b { font-size: 40px; font-style: italic; color: #1a1a8a; letter-spacing: -1px; }
.portal-logo span { font-size: 22px; color: #e04a20; align-self: flex-end; margin-bottom: 8px; }
.portal-search { display: flex; gap: 6px; justify-content: center; margin: 6px auto 14px; max-width: 520px; }
.portal-search .field { font-size: 17px; }
.portal-cols { display: grid; grid-template-columns: 1fr 260px; gap: 18px; }
.portal-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-content: start; }
.portal-dir h4 { font-family: inherit; font-size: 19px; font-weight: bold; margin: 4px 0 0; color: #000; }
.pbox { border: 1px solid #99c; background: #eef; padding: 4px 10px; margin-bottom: 8px; }
.pbox h4 { font-family: Arial, sans-serif; font-size: 13px; font-weight: bold; margin: 2px 0; background: #335; color: #fff; padding: 1px 6px; margin: 0 -10px 4px; }
.pbox .wx b { font-size: 22px; color: #e0a000; }
.pbox.cool { background: #ffe; border-color: #cc9; }
.portal-foot { text-align: center; font-size: 14px; color: #666; margin-top: 12px; border-top: 1px solid #ccc; padding-top: 6px; }
.seekr-logo { text-align: center; font-family: Georgia, serif; font-size: 52px; font-weight: bold; color: #2a6ad0; letter-spacing: -2px; }
.seekr-logo i { color: #e04a20; font-style: normal; } .seekr-logo i + i { color: #2a9a4a; }
.sres { margin: 10px 0; max-width: 640px; }
.sres .lnk { font-size: 19px; }
.surl { color: #1a7a3a; font-size: 14px; font-family: Arial, sans-serif; }

.site-pm { background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 0; }
.site-pm .lnk { color: #0645ad; }
.pm-head { display: flex; justify-content: space-between; align-items: center; background: #13285a; color: #fff; padding: 8px 14px; }
.pm-head .lnk { color: #ffd860; }
.pm-logo { cursor: pointer; font-size: 28px; font-style: italic; font-weight: bold; color: #ff9a1a; letter-spacing: -1px; line-height: 1; }
.pm-logo b { color: #fff; }
.pm-logo small { display: block; font-size: 11px; font-style: normal; font-weight: normal; color: #9ab; letter-spacing: 1px; }
.pm-cartlnk { font-weight: bold; }
.pm-nav { display: flex; gap: 2px; background: #2a4a8a; padding: 0 10px; }
.pm-nav .lnk { color: #fff; text-decoration: none; padding: 5px 12px; font-weight: bold; }
.pm-nav .lnk.on, .pm-nav .lnk:hover { background: #ff9a1a; color: #13285a; }
.pm-body { padding: 10px 14px; }
.pm-foot { text-align: center; font-size: 11px; color: #888; border-top: 1px solid #ddd; padding: 8px; }
.pm-banner { background: linear-gradient(90deg, #ff9a1a, #ffd860); padding: 8px 14px; display: flex; gap: 14px; align-items: baseline; border: 2px solid #13285a; }
.pm-banner b { font-size: 20px; color: #13285a; } .pm-banner span { color: #13285a; }
.pm-h { font-family: Arial, sans-serif; font-size: 16px; border-bottom: 2px solid #ff9a1a; padding-bottom: 2px; margin: 14px 0 8px; }
.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.pm-card { border: 1px solid #ccd; padding: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pm-card:hover { border-color: #ff9a1a; }
.pm-img { position: relative; align-self: stretch; display: flex; justify-content: center; background: #f4f6fa; cursor: pointer; padding: 4px; min-height: 60px; align-items: center; }
.pm-img .pthumb { width: 41px; height: 59px; }
.pm-deal { position: absolute; right: 2px; top: 2px; background: #d02020; color: #fff; font-style: normal; font-weight: bold; font-size: 12px; padding: 1px 4px; }
.pm-price { font-size: 16px; font-weight: bold; color: #b02020; }
.pm-price s { color: #888; font-weight: normal; font-size: 13px; }
.pm-price.big { font-size: 24px; margin: 6px 0; }
.pm-price.big .pm-deal { position: static; margin-left: 8px; font-size: 13px; vertical-align: middle; }
.pm-owned { color: #1a7a3a; font-weight: bold; }
.pm-prod { display: flex; gap: 18px; }
.pm-bigimg { background: #f4f6fa; border: 1px solid #ccd; padding: 10px 24px; display: flex; align-items: center; justify-content: center; min-width: 180px; }
.pm-info { flex: 1; }
.pm-info h2 { font-family: Arial, sans-serif; margin: 0 0 4px; font-size: 22px; }
.pm-rev { border-bottom: 1px solid #eee; padding: 4px 0; }
.pm-rev p { margin: 2px 0; }
.pm-tbl { width: 100%; }
.pm-tbl th { text-align: left; background: #eef; padding: 4px; font-size: 13px; }
.pm-tbl td { padding: 4px; border-bottom: 1px solid #eee; vertical-align: middle; }
.pm-tbl .pthumb.icon { margin: 0; }
.pm-tbl .pswatch { margin: 0; }
.pm-sum { text-align: right; font-size: 16px; margin: 10px 0; }
.pm-co { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pm-co fieldset { border: 1px solid #99a; }
.pm-co legend { font-weight: bold; color: #13285a; }
.pm-done { text-align: center; padding: 20px; border: 2px solid #1a7a3a; background: #f0fff4; }
.pm-order { border: 1px solid #ccd; padding: 8px 10px; margin-bottom: 8px; }
.pm-track { height: 10px; background: #eee; border: 1px solid #99a; margin: 5px 0; }
.pm-track i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ff9a1a 0 8px, #ffb84a 8px 16px); transition: width .9s linear; }
.pm-status { font-weight: bold; } .s-delivered { color: #1a7a3a; } .s-shipped { color: #2a4a8a; } .s-processing { color: #a07010; }

.site-thrift { background: #fffde8 repeating-linear-gradient(0deg, transparent 0 23px, #eee8c8 23px 24px); }
.site-thrift h1 { text-align: center; color: #2a7a3a; font-family: 'Comic Sans MS', 'Comic Sans', cursive; }
.thr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.thr-item { background: #fff; border: 2px dashed #6a9a5a; padding: 8px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; position: relative; }
.thr-item .pthumb { align-self: center; width: 41px; height: 59px; }
.thr-item.sold { opacity: .55; }
.thr-price { font-size: 20px; color: #2a7a3a; font-weight: bold; } .thr-price s { color: #999; font-size: 14px; font-weight: normal; }
.thr-sold { position: absolute; right: 8px; top: 30px; transform: rotate(-14deg); border: 3px solid #c02020; color: #c02020; font-weight: bold; font-size: 22px; padding: 0 6px; }

.site-bnb { background: #f4e2c0 repeating-linear-gradient(90deg, transparent 0 60px, rgba(120,70,30,.08) 60px 62px); }
.site-bnb h1 { text-align: center; color: #7a3a10; letter-spacing: 3px; }
.bnb-tbl { margin: 10px auto; background: #fff8e8; border: 3px double #7a3a10; }
.bnb-tbl th, .bnb-tbl td { padding: 3px 12px; border-bottom: 1px dotted #c8a070; text-align: left; }
.bnb-tbl th { background: #7a3a10; color: #fff; }

.site-gaz { background: #f8f4ea; font-family: Georgia, 'Times New Roman', serif; }
.gaz-mast { text-align: center; font-size: 40px; font-weight: bold; border-bottom: 4px double #000; cursor: pointer; letter-spacing: -1px; font-family: 'Old English Text MT', 'UnifrakturMaguntia', Georgia, serif; }
.gaz-date { text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid #000; padding: 3px 0; margin-bottom: 10px; }
.gaz-item { border-bottom: 1px solid #ccc; padding: 4px 0 8px; }
.gaz-item.lead h3 { font-size: 26px; }
.gaz-item h3 { margin: 4px 0; } .gaz-item h3 .lnk { color: #000; text-decoration: none; } .gaz-item h3 .lnk:hover { text-decoration: underline; }
.gaz-body { white-space: pre-wrap; font-family: Georgia, serif; font-size: 17px; line-height: 1.4; }

.site-bank { background: #f4f6fb; font-family: Arial, sans-serif; font-size: 14px; }
.bank-head { display: flex; justify-content: space-between; align-items: center; background: #0a2a5a; color: #fff; padding: 8px 14px; margin: -12px -18px 12px; border-bottom: 4px solid #c8a030; }
.bank-head b { font-size: 22px; font-family: Georgia, serif; } .bank-head span { font-size: 12px; color: #c8a030; }
.bank-acct { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #c8d0e0; padding: 10px 14px; margin-bottom: 10px; }
.bank-bal { font-size: 30px; font-weight: bold; color: #0a2a5a; text-align: right; }
.bank-bal small { display: block; font-size: 11px; color: #888; font-weight: normal; }
.bank-tbl { width: 100%; background: #fff; }
.bank-tbl th { text-align: left; background: #0a2a5a; color: #fff; padding: 4px 8px; font-size: 12px; }
.bank-tbl td { padding: 3px 8px; border-bottom: 1px solid #e4e8f0; }
.bank-tbl td:last-child { text-align: right; font-family: ui-monospace, monospace; }
.site-bank .small { font-size: 11px; }

.site-gigs { background: #0e1620; color: #cfe8f0; font-family: ui-monospace, Consolas, monospace; font-size: 14px; }
.site-gigs .lnk { color: #5ac8e0; }
.gig-head { display: flex; gap: 14px; align-items: baseline; border-bottom: 2px solid #2a4a5a; padding-bottom: 6px; margin-bottom: 8px; }
.gig-head b { color: #5ac860; font-size: 22px; } .gig-head span { color: #7a9aaa; }
.site-gigs h2 { color: #fff; font-family: inherit; }
.site-gigs code, .gig-ex { background: #1a2836; color: #ffd860; padding: 1px 5px; }
.gig-ex { padding: 8px 10px; border-left: 3px solid #5ac860; }
.gig { display: flex; gap: 10px; align-items: center; border: 1px solid #2a4a5a; padding: 6px 10px; margin: 6px 0; }
.gig.done { opacity: .55; }
.gig .job-r { color: var(--ink); }
.site-gigs .dim { color: #7a9aaa; opacity: 1; }
.site-gigs .good { color: #5ac860; }

.site-home { background: var(--hp, #f0f) repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 8px, transparent 8px 16px); color: #000; font-family: 'Comic Sans MS', 'Comic Sans', 'Times New Roman', cursive; }
.hp-top { display: flex; gap: 14px; align-items: center; background: #fff; border: 4px ridge var(--hp2, #ff0); padding: 8px; }
.hp-top h1 { font-size: 24px; margin: 0; color: #c00080; }
.hp-face { width: 64px; height: 120px; image-rendering: pixelated; }
.hp-box { background: rgba(255,255,255,.92); border: 3px outset #ccc; padding: 6px 12px; margin: 10px 0; }
.hp-box h3 { margin: 2px 0 6px; color: #0000a0; }
.hp-made { display: inline-flex; flex-direction: column; align-items: center; font-size: 13px; margin-right: 10px; }
.uc { background: repeating-linear-gradient(45deg, #ffd000 0 10px, #000 10px 20px); color: #fff; font-weight: bold; padding: 2px 10px; text-shadow: 1px 1px 0 #000; }
.gb { border-bottom: 1px dashed #aaa; padding: 3px 0; }
.gb p { margin: 2px 0 2px 10px; }
.site-home .prose.short { width: 100%; font-size: 17px; }

.site-win { background: #ff0; text-align: center; color: #d00000; font-family: 'Comic Sans MS', 'Impact', sans-serif; animation: winbg .5s steps(2) infinite; }
@keyframes winbg { 50% { background: #0ff; } }
.blink { animation: blink 1s steps(2) infinite; }
.win-lesson { background: #fff; color: #000; border: 3px solid #000; padding: 10px; margin: 14px auto; max-width: 520px; font-family: 'Times New Roman', serif; animation: none; }

.site-404 { font-family: 'Times New Roman', serif; }
.site-404 address { font-style: italic; font-size: 15px; }
.nav-page .net-view { border: none; min-height: 100%; }

/* ---------- ElseMail ---------- */
.win.app-mail .win-body.mail-body { padding: 0; height: 600px; display: flex; flex-direction: column; background: #d6cdb6; overflow: hidden; }
.mail-tool { display: flex; gap: 4px; padding: 5px 6px; box-shadow: inset 0 -1px 0 #7a705c; }
.mail-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 1fr; gap: 4px; padding: 4px; }
.mail-folders { background: #fff; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; padding: 6px 4px; display: flex; flex-direction: column; gap: 2px; }
.mf { display: flex; align-items: center; gap: 6px; background: none; border: none; text-align: left; padding: 2px 6px; font-size: 18px; color: var(--ink); }
.mf img { width: 16px; height: 16px; image-rendering: pixelated; }
.mf.on { background: #2a3a8a; color: #fff; }
.mf-addr { margin-top: auto; font-size: 13px; word-break: break-all; padding: 4px; border-top: 1px solid #ccc; }
.mail-main { min-height: 0; display: grid; grid-template-rows: 210px 1fr; gap: 4px; }
.mail-list, .mail-read { background: #fff; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; overflow: auto; }
.ml-row { display: grid; grid-template-columns: 24px 130px 1fr 112px; gap: 6px; padding: 1px 6px; font-size: 17px; cursor: default; white-space: nowrap; }
.ml-row > span { overflow: hidden; text-overflow: ellipsis; }
.ml-row.unread { font-weight: bold; }
.ml-row.unread > span:first-child { color: #2a6ad0; }
.ml-row.on { background: #2a3a8a; color: #fff; }
.ml-row:not(.ml-head):hover:not(.on) { background: #eef; }
.ml-head { position: sticky; top: 0; background: #d6cdb6; font-size: 15px; box-shadow: inset 0 -1px 0 #7a705c; }
.ml-empty, .mr-empty { padding: 20px; text-align: center; color: #888; }
.mr-empty img { width: 48px; height: 48px; image-rendering: pixelated; opacity: .4; }
.mr-head { padding: 6px 10px; background: #f4f0e6; border-bottom: 1px solid #ccc; font-size: 16px; line-height: 1.15; }
.mr-subj { font-family: var(--pix); font-size: 13px; margin-top: 4px; }
.mr-body { margin: 0; padding: 8px 12px; white-space: pre-wrap; font-family: var(--font); font-size: 19px; line-height: 1.1; }
.mr-atts { padding: 4px 10px 10px; border-top: 1px dashed #ccc; display: flex; flex-direction: column; gap: 4px; }
.att { display: flex; align-items: center; gap: 8px; background: #fffaf0; border: 2px solid #c8b898; padding: 3px 6px; }
.att > img { width: 24px; height: 24px; image-rendering: pixelated; }
.att > img.att-thumb { width: 23px; height: 33px; }
.att-n { flex: 1; display: flex; flex-direction: column; line-height: 1; }
.att-n span { font-size: 14px; }
.att-act { display: flex; gap: 4px; flex-wrap: wrap; }
.win.app-compose .win-body { background: #efe6d2; }
.compose-grid { display: grid; grid-template-columns: 70px 1fr; gap: 4px 8px; align-items: center; margin-bottom: 6px; }
.compose-grid label { text-align: right; font-family: var(--pix); font-size: 11px; }
.compose-txt { height: 230px; }
.compose-atts { display: flex; gap: 4px; flex-wrap: wrap; }
.chip { background: #fff4c8; border: 1px solid #c8a838; padding: 0 2px 0 6px; font-size: 16px; display: inline-flex; align-items: center; gap: 4px; }
.chip button { border: none; background: none; padding: 0 3px; font-size: 16px; }

/* ---------- ElseCode ---------- */
.win.app-code .win-body.ide-body { padding: 0; height: 620px; display: flex; flex-direction: column; background: #1e1a26; color: #ddd; overflow: hidden; }
.ide-tool { display: flex; align-items: center; gap: 4px; padding: 5px 6px; background: #d6cdb6; box-shadow: inset 0 -1px 0 #7a705c; color: var(--ink); }
.ide-new { font-family: var(--font); font-size: 17px; background: #fffdf6; border: 2px solid var(--ink); }
.ide-sep { width: 2px; height: 22px; margin: 0 4px; box-shadow: inset 1px 0 0 #7a705c, inset -1px 0 0 #fff8ea; }
.ide-grow { flex: 1; }
.ide-file { font-family: ui-monospace, monospace; font-size: 13px; }
.ide-saved { font-size: 15px; color: #6a5a20; min-width: 74px; }
.ide-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 168px 1fr 236px; }
.ide-files { background: #262030; border-right: 2px solid #110d16; display: flex; flex-direction: column; min-height: 0; padding: 6px 0 0; }
.ide-files .side-h, .ide-side .side-h { color: #a898c0; padding: 0 8px 4px; }
.ide-list { flex: 1; overflow: auto; }
.ide-f { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: none; color: #d8d0e8; text-align: left; padding: 1px 8px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.ide-f img { width: 16px; height: 16px; image-rendering: pixelated; }
.ide-f span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-f em { font-style: normal; color: #5ac860; }
.ide-f:hover { background: #2e2840; }
.ide-f.on { background: #3a3060; color: #fff; }
.ide-fact { display: flex; gap: 4px; padding: 6px; border-top: 1px solid #110d16; }
.ide-fact .b { font-size: 15px; padding: 0 6px; }
.ed { display: grid; grid-template-columns: 44px 1fr; min-height: 0; background: #15111c; }
.ed-gut { overflow: hidden; padding: 8px 8px 8px 0; text-align: right; color: #4f4660; background: #1a1622; border-right: 1px solid #2a2436; white-space: pre; font: 13px/18px ui-monospace, 'Cascadia Mono', Consolas, monospace; user-select: none; }
.ed-area { position: relative; min-width: 0; }
.ed-hl, .ed-ta { position: absolute; inset: 0; margin: 0; padding: 8px 10px; border: none; font: 13px/18px ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre; tab-size: 2; letter-spacing: 0; }
.ed-hl { overflow: hidden; color: #d8e4f0; pointer-events: none; }
.ed-ta { width: 100%; height: 100%; resize: none; outline: none; background: transparent; color: transparent; caret-color: #ffd860; overflow: auto; }
.ed-ta::selection { background: rgba(255,216,96,.28); }
.tc { color: #6a7a8e; font-style: italic; } .ts { color: #f0b070; } .tn { color: #f590b8; } .tk { color: #c792ea; } .tf { color: #5ac8e0; }
.ide-side { background: #221d2c; border-left: 2px solid #110d16; padding: 6px 8px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.ide-side .b { text-align: left; }
.ide-side .bezel { align-self: center; padding: 8px; }
.ide-screen { width: 192px; height: 192px; }
.ide-ref { margin: 0; font: 11.5px/1.45 ui-monospace, monospace; color: #b8c8d8; white-space: pre-wrap; background: #1a1622; padding: 6px; border: 1px solid #2a2436; }
.ide-side .api summary { color: #a898c0; }
.ide-side .err { font-size: 14px; }
.con { height: 150px; display: flex; flex-direction: column; background: #0c0a10; border-top: 2px solid #110d16; font: 13px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #c8f0d8; }
.con-out { flex: 1; overflow: auto; padding: 4px 10px; white-space: pre-wrap; word-break: break-word; }
.con .sys { color: #8a7aa8; } .con .err { color: #ff7a7a; font-size: inherit; min-height: 0; } .con .okk { color: #5ac860; } .con .q { color: #ffd860; } .con .echo { color: #9ad0f0; }
.con-row { display: flex; align-items: center; gap: 6px; padding: 2px 10px 6px; color: #ffd860; }
.con-in { flex: 1; background: #1a1622; border: 1px solid #3a3050; color: #fff; font: inherit; padding: 2px 6px; outline: none; }
.con-in:focus { border-color: #ffd860; }
.win.pc-term .win-body { padding: 0; }
.con.term { height: 380px; border-top: none; }

/* while seated, the feed shows under the screen: see body.pc-open #feed in style.css */

/* ---------- ElseSprite ---------- */
.win.app-sprite .win-body.es-body { padding: 0; height: 640px; overflow: hidden; background: #3a3344; color: #e8e0f0; }
.es-root { position: relative; display: flex; flex-direction: column; height: 100%; font-size: 17px; user-select: none; }
.es-root .b { color: var(--ink); }
.es-root .dim { color: #b0a6c0; opacity: 1; }
.es-menubar { display: flex; align-items: center; gap: 2px; background: #262030; padding: 2px 6px; border-bottom: 1px solid #14101a; }
.es-menubar button { background: none; border: none; color: #e8e0f0; font-family: var(--font); font-size: 18px; padding: 0 10px; }
.es-menubar button:hover { background: #4a3f5a; }
.es-brand { margin-left: auto; font-family: var(--pix); font-size: 10px; color: #7ad07a; letter-spacing: 1px; }
.es-menu { position: absolute; top: 26px; z-index: 10; min-width: 250px; background: #f4ecdc; border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.5); padding: 3px 0; display: flex; flex-direction: column; }
.es-menu button { display: flex; justify-content: space-between; gap: 20px; background: none; border: none; text-align: left; padding: 1px 14px; font-family: var(--font); font-size: 18px; color: var(--ink); }
.es-menu button:hover { background: var(--title); color: #fff4e0; }
.es-menu kbd { background: none; color: inherit; opacity: .6; }
.es-menu hr { border: none; border-top: 1px solid #c8bca8; margin: 3px 6px; }
.es-opts { display: flex; align-items: center; gap: 5px; padding: 3px 8px; background: #302a3a; border-bottom: 1px solid #14101a; min-height: 30px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.es-tname { font-family: var(--pix); font-size: 10px; color: #ffd860; font-weight: normal; margin-right: 6px; }
.es-gap { flex: 1; }
.es-main { display: flex; flex: 1; min-height: 0; }
.es-tools { width: 40px; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: #2a2433; border-right: 1px solid #14101a; }
.es-tool { width: 32px; height: 30px; padding: 0; border: 1px solid transparent; background: none; display: grid; place-items: center; }
.es-tool:hover { background: #4a3f5a; }
.es-tool.on { background: #5a4a72; border-color: #ffd860; }
.et { display: block; width: 20px; height: 20px; image-rendering: pixelated; background: #e8e0f0; -webkit-mask: var(--m) center / 20px 20px no-repeat; mask: var(--m) center / 20px 20px no-repeat; }
.et-pencil { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h1v1h1v1h1v1H9v1H8v1H7v1H6v1H5v1H4v1H3v1H0V7h1V6h1V5h1V4h1V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
.et-eraser { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h1v1h1v1h1v1h1v1H9v1H8v1H7v1H6v1H2V8H1V7H0V6h1V5h1V4h1V3h1V2h1V1z'/%3E%3C/svg%3E"); }
.et-bucket { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h1v1h1v1h1v1h1v1h1v1H8v1H7v1H6v1H5V8H4V7H3V6H2V5H1V4h1V3h1V2h1zM9 6h1v3H9z'/%3E%3C/svg%3E"); }
.et-picker { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h2v1h1v2H9v1H8v1H7v1H6v1H5v1H4v1H3v1H1v1H0V8h1V6h1V5h1V4h1V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
.et-line { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M8 1h1v1H8zM7 2h1v1H7zM6 3h1v1H6zM5 4h1v1H5zM4 5h1v1H4zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z'/%3E%3C/svg%3E"); }
.et-rect { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h8v6H1zm1 1v4h6V3z'/%3E%3C/svg%3E"); }
.et-ellipse { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h4v1h1v1h1v4H8v1H7v1H3V8H2V7H1V3h1V2h1zm0 2v1H2v2h1v1h4V6h1V4H7V3z'/%3E%3C/svg%3E"); }
.et-shade { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v2H0zM2 2h2v2H2zM0 4h2v2H0zM4 0h2v2H4zM4 4h2v2H4zM6 2h2v2H6zM2 6h2v2H2zM8 0h2v2H8zM6 6h2v2H6zM8 4h2v2H8zM0 8h2v2H0zM4 8h2v2H4zM8 8h2v2H8z'/%3E%3C/svg%3E"); }
.et-marquee { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h2v1H1zM4 1h2v1H4zM7 1h2v1H7zM1 3h1v2H1zM8 3h1v2H8zM1 6h1v2H1zM8 6h1v2H8zM1 8h2v1H1zM4 8h2v1H4zM7 8h2v1H7z'/%3E%3C/svg%3E"); }
.et-move { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h1v1H6v2h2V3h1v1h1v2H9v1H8V6H6v2h1v1H6v1H4V9H3V8h1V6H2v1H1V6H0V4h1V3h1v1h2V2H3V1h1z'/%3E%3C/svg%3E"); }
.et-hand { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v4h1V1h1v3h1V2h1v3h1V3h1v5H9v1H8v1H3V9H2V8H1V7H0V5h1v1h1V1h1z'/%3E%3C/svg%3E"); }
.es-stage { flex: 1; display: grid; place-items: center; background: #2a2433; min-width: 0; }
.es-view { display: block; width: 712px; height: 404px; cursor: crosshair; outline: none; }
.es-side { width: 236px; padding: 4px 8px; background: #302a3a; border-left: 1px solid #14101a; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.es-side .side-h { font-family: var(--pix); font-size: 10px; color: #b0a6c0; margin: 2px 0 0; }
.es-prevbox { height: 112px; display: grid; place-items: center; background: repeating-conic-gradient(#8a8494 0 25%, #a8a2b2 0 50%) 0 0 / 12px 12px; border: 1px solid #14101a; }
.es-prev { image-rendering: pixelated; }
.es-fgbg { display: flex; align-items: center; gap: 8px; }
.es-swap { position: relative; width: 38px; height: 34px; }
.es-fg, .es-bg { position: absolute; width: 24px; height: 22px; border: 2px solid #fff; box-shadow: 0 0 0 1px #000; }
.es-fg { left: 0; top: 0; z-index: 1; }
.es-bg { right: 0; bottom: 0; }
.es-fg.clear, .es-bg.clear, .es-sw.clear { background: repeating-conic-gradient(#8a8494 0 25%, #c8c2d2 0 50%) 0 0 / 8px 8px !important; }
.es-pal { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; max-height: 150px; overflow-y: auto; background: #14101a; padding: 1px; }
.es-sw { height: 19px; padding: 0; border: none; position: relative; }
.es-sw.fg { outline: 2px solid #fff; outline-offset: -2px; z-index: 1; }
.es-sw.bg::after { content: ''; position: absolute; inset: 3px; border: 1px dashed #fff; }
.es-side input[type=color] { width: 34px; height: 24px; padding: 0; border: 1px solid #14101a; }
.es-world { margin-top: auto; display: flex; gap: 6px; padding-bottom: 4px; }
.es-world .b { flex: 1; }
.es-tbar { display: flex; align-items: center; gap: 4px; padding: 3px 8px; background: #302a3a; border-top: 1px solid #14101a; }
.es-time { height: 104px; overflow: auto; background: #241e2c; }
.es-time table { border-collapse: collapse; font-size: 16px; }
.es-time th, .es-time td { border: 1px solid #3a3344; padding: 0; text-align: center; }
.es-lh { width: 170px; min-width: 170px; text-align: left !important; padding-left: 6px !important; font-family: var(--pix); font-size: 9px; font-weight: normal; color: #b0a6c0; position: sticky; left: 0; background: #241e2c; z-index: 1; }
.es-fh { width: 30px; min-width: 30px; cursor: pointer; font-weight: normal; line-height: .9; color: #b0a6c0; }
.es-fh b { display: block; font-weight: normal; color: #e8e0f0; }
.es-fh small { font-size: 12px; }
.es-fh.on { background: #5a4a72; }
.es-ln { text-align: left !important; white-space: nowrap; position: sticky; left: 0; background: #2a2433; z-index: 1; cursor: pointer; }
.es-ln span { padding: 0 6px; }
tr.on .es-ln { background: #4a3f5a; color: #ffd860; }
.es-eye { background: none; border: none; color: #e8e0f0; width: 22px; padding: 0; font-size: 14px; }
.es-eye.off { color: #6a6078; }
.es-cel { cursor: pointer; color: #b0a6c0; font-size: 12px; }
.es-cel.cf { background: #322a3e; }
.es-cel.on { background: #6a5a88; color: #fff; }
.es-status { font-size: 15px; color: #b0a6c0; padding: 1px 10px; background: #1e1a26; border-top: 1px solid #14101a; white-space: nowrap; overflow: hidden; }
.es-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.es-open { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.es-file { position: relative; }
.es-file > .b { position: absolute; top: 2px; right: 2px; }
.es-fbtn { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 2px solid var(--ink); background: #fffaf0; }
.es-fbtn img { width: 96px; height: 72px; object-fit: contain; image-rendering: pixelated; background: repeating-conic-gradient(#d8d2e0 0 25%, #f0ecf4 0 50%) 0 0 / 12px 12px; }
.es-fbtn b { font-weight: normal; font-size: 16px; }
.es-new { display: flex; flex-direction: column; gap: 8px; }
.es-new .row { gap: 6px; flex-wrap: wrap; align-items: center; }
.es-root .b.on { background: #ffd860; color: var(--ink); }
.es-hint { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.es-opts > .b, .es-opts > .es-tname { flex-shrink: 0; }

/* ---------- ElseCAD ---------- */
.win.app-cad .win-body.ec-body { padding: 0; height: 624px; overflow: hidden; background: #2a3344; color: #e0e8f4; }
.ec-root { font-size: 17px; }
.ec-root .es-menubar { background: #1c2434; }
.ec-root .es-menubar button:hover { background: #34507a; }
.ec-brand { color: #7ad0ff; }
.ec-root .es-opts, .ec-root .es-tools { background: #263046; }
.ec-root .es-tool:hover { background: #34507a; }
.ec-root .es-tool.on { background: #3a5a8a; border-color: #ffd860; }
.ec-root .es-status { background: #182030; color: #9ab0cc; }
.ec-stage { background: #10203a; }
.ec-view { display: block; width: 600px; height: 500px; cursor: crosshair; outline: none; image-rendering: pixelated; }
.ec-side { width: 344px; padding: 4px 8px; background: #263046; border-left: 1px solid #0c1424; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.ec-side .side-h { font-family: var(--pix); font-size: 10px; color: #9ab0cc; margin: 2px 0 0; }
.ec-prevtabs { display: flex; align-items: center; gap: 2px; }
.ec-prev { height: 170px; flex: none; display: grid; place-items: center; background: #0e1a2e; border: 1px solid #0c1424; position: relative; overflow: hidden; }
.ec-prev canvas.site { border: none; image-rendering: pixelated; }
.ec-prev.busy::after { content: 'drafting...'; position: absolute; right: 6px; bottom: 2px; font-family: var(--pix); font-size: 9px; color: #7ad0ff; }
.ec-prevnote { position: absolute; left: 8px; right: 8px; bottom: 6px; text-align: center; font-size: 15px; color: #9ab0cc; }
.ec-storeys { display: flex; flex-direction: column; gap: 1px; max-height: 82px; overflow-y: auto; flex: none; }
.ec-storey { display: flex; align-items: center; gap: 6px; padding: 1px 4px; background: #1e2638; border: 1px solid transparent; cursor: pointer; font-size: 15px; line-height: 1; }
.ec-storey:hover { background: #2c3a56; }
.ec-storey.on { background: #34507a; border-color: #ffd860; }
.ec-storey b { font-family: var(--pix); font-size: 10px; font-weight: normal; min-width: 18px; text-align: center; background: #0e1a2e; color: #7ad0ff; padding: 2px 0; }
.ec-storey span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-storey small { color: #7a90ac; font-size: 13px; }
.ec-storey select { width: 92px; }
.ec-srow { display: flex; gap: 3px; margin-top: 2px; }
.ec-srow .b:first-child { flex: 1; }
.ec-props { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ec-tabs { display: flex; gap: 1px; margin-top: 3px; }
.ec-tab { font-family: var(--pix); font-size: 9px; padding: 3px 6px 2px; background: #1e2638; color: #9ab0cc; border: 1px solid #0c1424; border-bottom: none; }
.ec-tab.on { background: #34507a; color: #fff; }
.ec-page { flex: 1; min-height: 0; overflow-y: auto; background: #1e2638; border: 1px solid #0c1424; padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; }
.ec-f { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.ec-f > span:first-child { width: 78px; flex: none; color: #9ab0cc; }
.ec-f select, .ec-f input.field { min-width: 0; flex: 1; max-width: 150px; }
.ec-f input[type=color], .ec-c input[type=color] { width: 30px; height: 20px; padding: 0; border: 1px solid #0c1424; flex: none; }
.ec-c { display: inline-flex; align-items: center; gap: 2px; }
.ec-chk { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; margin-right: 6px; }
.ec-row { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ec-sub { font-family: var(--pix); font-size: 9px; color: #7ad0ff; margin-top: 5px; border-bottom: 1px solid #34507a; }
.ec-note { margin: 0; font-size: 15px; line-height: 1.05; }
.ec-kinds { display: flex; flex-wrap: wrap; gap: 2px; }
.ec-revs { display: flex; flex-direction: column; gap: 2px; }
.ec-rev { display: flex; align-items: center; gap: 4px; font-size: 15px; justify-content: space-between; }
.ec-foot { flex: none; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.ec-stats { font-size: 14px; color: #9ab0cc; }
.ec-warn { font-size: 14px; line-height: 1; color: #ffd8a0; background: #3a2a1a; border-left: 3px solid #ffb040; padding: 2px 4px; }
.ec-build { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ec-build b { font-family: var(--pix); font-size: 12px; font-weight: normal; color: #ffd860; }
.ec-root .field.tiny, .ec-root select.field.tiny { font-size: 15px; padding: 0 2px; height: 22px; background: #f4f0e8; }
.ec-root .b.tiny { font-size: 14px; padding: 0 5px; }
.ec-root .ec-page .dim, .ec-root .ec-foot .dim { color: #7a90ac; }
.ec-plots { display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow-y: auto; }
.ec-plot { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 3px 8px; border: 2px solid var(--ink); background: #fffaf0; font-size: 17px; }
.ec-plot.mine { background: #e8f4ff; }
.ec-plot b { font-weight: normal; }
.ec-plot span { color: #6a6078; }
.ec-open .es-fbtn img { background: #163a6c; }
.ec-select { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v1h1v1h1v1h1v1h1v1h1v1H6v1h1v2H6V8H5V7H4v1H3v1H2z'/%3E%3C/svg%3E"); }
.ec-draw { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 4h6v6H0zM1 5v4h4V5zM7 0h1v1h1v1h1v1H9v1H8V3H7V2H6V1h1z'/%3E%3C/svg%3E"); }
.ec-walls { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h10v1H0zM0 1h1v9H0zM9 1h1v9H9zM4 1h1v3H4zM4 6h1v4H4zM1 5h2v1H1zM6 5h3v1H6z'/%3E%3C/svg%3E"); }
.ec-label { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h8v2H6v6H4V3H1z'/%3E%3C/svg%3E"); }
.ec-stairs { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h3v2H9v1H7zM4 4h3v2H6v1H4zM1 7h3v2H0V8h1zM8 0h1v1H8z'/%3E%3C/svg%3E"); }
.ec-shaft { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h8v1H1zM1 8h8v1H1zM1 2h1v6H1zM8 2h1v6H8zM2 2h1v1H2zM3 3h1v1H3zM4 4h2v2H4zM6 3h1v1H6zM7 2h1v1H7zM3 6h1v1H3zM2 7h1v1H2zM6 6h1v1H6zM7 7h1v1H7z'/%3E%3C/svg%3E"); }
.ec-cut { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v1h1v1h1v1h2V2h1V1h1V0h1v1H8v1H7v1H6v1h1v1h1v1h1v3H6V7H5V6H4v1H3v2H0V6h1V5h1V4h1V3H2V2H1zM1 7v1h1V7zM7 7v1h1V7z'/%3E%3C/svg%3E"); }
.ec-extrude { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h1v1h1v1H6v2H4V3H2V2h1V1h1zM1 6h8v4H1zM2 7v2h6V7z'/%3E%3C/svg%3E"); }
.ec-facade { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h10v10H0zM1 1v3h3V1zM6 1v3h3V1zM1 6v3h3V6zM6 6v4h2V6z'/%3E%3C/svg%3E"); }
.ec-door { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h6v10H2zM3 1v8h4V1zM5 5h1v1H5zM0 9h10v1H0z'/%3E%3C/svg%3E"); }
.ec-paint { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h8v3H0zM8 1h2v3H5v2h1v4H4V6h1V4H5z'/%3E%3C/svg%3E"); }
.ec-move { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h2v1h1v1H6v2h2V3h1v1h1v2H9v1H8V6H6v2h1v1H6v1H4V9H3V8h1V6H2v1H1V6H0V4h1V3h1v1h2V2H3V1h1z'/%3E%3C/svg%3E"); }
.ec-hand { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v4h1V1h1v3h1V2h1v3h1V3h1v5H9v1H8v1H3V9H2V8H1V7H0V5h1v1h1V1h1z'/%3E%3C/svg%3E"); }

/* ArchiNet (js/pc-net.js) */
.archinet .an-com { border: 1px solid #c8c0b0; padding: 6px 8px; margin: 4px 0; background: #fffdf6; }
.archinet .an-com.mine { border-color: #3a6cb4; background: #eef4ff; }
.archinet .an-com .row { margin-top: 4px; gap: 6px; }
.archinet .an-reg { border-collapse: collapse; width: 100%; }
.archinet .an-reg td, .archinet .an-reg th { border-bottom: 1px solid #ddd; padding: 3px 6px; text-align: left; vertical-align: top; }
.ec-prevtag { position: absolute; left: 6px; top: 4px; font: 10px Silkscreen, monospace; color: #ffd860; background: rgba(10,20,40,.6); padding: 1px 4px; }

/* ---------- ElseProject (js/pc-project.js) ---------- */
.win.app-project .win-body.prj-body { padding: 4px; height: 560px; display: grid; grid-template-columns: 190px 1fr; gap: 4px; background: #d6cdb6; overflow: hidden; }
.prj-side, .prj-main { background: #fffdf6; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; min-height: 0; }
.prj-side { padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: auto; }
.prj-main { display: flex; flex-direction: column; overflow: hidden; }
.prj-gl { font-family: var(--pix); font-size: 10px; text-transform: uppercase; opacity: .6; margin-top: 6px; }
.prj-item { display: flex; flex-direction: column; text-align: left; background: none; border: none; padding: 2px 6px; color: var(--ink); line-height: 1; }
.prj-item b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 166px; }
.prj-item span { font-size: 14px; opacity: .65; }
.prj-item.on { background: #2a3a8a; color: #fff; }
.prj-none { font-size: 15px; line-height: 1.05; }
.prj-jobs { margin-top: auto; }
.prj-empty { margin: auto; text-align: center; padding: 24px 60px; }
.prj-empty img { width: 48px; height: 48px; image-rendering: pixelated; }
.prj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 2px; }
.prj-title { font-size: 24px; }
.prj-chip { font-family: var(--pix); font-size: 10px; padding: 2px 6px; border: 2px solid var(--ink); background: #c8f0c0; white-space: nowrap; }
.prj-chip.done, .prj-chip.completed { background: #d8d0c0; }
.prj-chip.sent { background: #ffe9a0; }
.prj-chip.declined, .prj-chip.withdrawn, .prj-chip.ended, .prj-chip.resigned { background: #f0c8c0; }
.prj-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 2px solid var(--ink); }
.prj-tab { background: #e8dcc4; border: 2px solid var(--ink); border-bottom: none; padding: 1px 12px; color: var(--ink); font-size: 18px; margin-bottom: -2px; }
.prj-tab.on { background: #fffdf6; padding-bottom: 3px; }
.prj-pane { flex: 1; min-height: 0; overflow: auto; padding: 4px 10px 8px; }
.prj-pane h4 { margin: 8px 0 2px; font-family: var(--pix); font-size: 11px; text-transform: uppercase; }
.prj-pane p { margin: 2px 0; }
.prj-brief { white-space: pre-wrap; }
.prj-credits { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.prj-k { border: 2px solid #c8b898; background: #fffaf0; padding: 3px 6px; margin: 4px 0; }
.prj-krow { display: flex; align-items: center; gap: 8px; }
.prj-kwho { flex: 1; min-width: 0; }
.prj-kpay { font-size: 16px; white-space: nowrap; }
.prj-kact { display: flex; gap: 4px; }
.prj-desc { font-size: 16px; line-height: 1.05; }
.prj-hours { border-top: 1px dashed #c8b898; margin-top: 3px; padding-top: 2px; font-size: 17px; }
.prj-hour { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; line-height: 1.1; }
.prj-hour.add { grid-template-columns: auto auto 1fr auto; margin-top: 2px; }
.prj-past summary { cursor: pointer; opacity: .7; }
.prj-grow { flex: 1; min-width: 80px; }
.prj-add { margin: 4px 0; flex-wrap: nowrap; }
.prj-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.prj-col { background: #efe6d2; border: 2px solid #c8b898; min-height: 300px; padding: 2px; }
.prj-colh { font-family: var(--pix); font-size: 10px; text-transform: uppercase; padding: 2px 4px; }
.prj-task { background: #fffdf6; border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,.25); padding: 2px 5px; margin: 3px 2px 5px; display: flex; flex-direction: column; line-height: 1.05; font-size: 17px; }
.prj-task.mine { background: #fff4c8; }
.prj-task span { font-size: 14px; }
.prj-tact { display: flex; gap: 3px; justify-content: flex-end; }
.prj-file { margin: 4px 0; }
.prj-fmeta { display: flex; gap: 6px; align-items: center; font-size: 16px; padding: 0 6px; }
.prj-fmeta .b { margin-left: auto; }
.prj-pane.talk { display: flex; flex-direction: column; overflow: hidden; }
.prj-log { flex: 1; min-height: 0; overflow: auto; font-size: 18px; line-height: 1.15; }
.prj-log .did { opacity: .6; font-size: 16px; }
.prj-win .win-body { max-height: 600px; overflow: auto; }
.prj-form { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: start; }
.prj-form label { padding-top: 3px; }
.prj-area { height: 96px; resize: none; font-size: 18px; line-height: 1.1; }
.prj-pay { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.prj-paper { background: #fffef8; border: 2px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.2); margin: 0; padding: 12px 16px; white-space: pre-wrap; font-family: var(--font); font-size: 17px; line-height: 1.1; max-height: 470px; overflow: auto; }
.prj-signrow { margin-top: 8px; flex-wrap: nowrap; }
.prj-sig { flex: 1; font-style: italic; }
.prj-hiring { margin-bottom: 10px; }

/* ---------- this computer: the log-on screen, and its own settings (js/pc.js) ---------- */
.pc-logon { position: absolute; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: #0a3a4a repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px); }
.pc-logon.hidden { display: none; }
.lg-box { width: 430px; background: #d6cdb6; border: 3px solid var(--ink); box-shadow: 6px 6px 0 rgba(0,0,0,.45); padding: 0 14px 12px; }
.lg-head { display: flex; align-items: center; gap: 8px; margin: 0 -14px 10px; padding: 5px 10px; background: #2a3a8a; color: #fff; }
.lg-head img { width: 24px; height: 24px; image-rendering: pixelated; }
.lg-head b { font-family: var(--pix); font-size: 15px; font-weight: normal; }
.lg-head span { opacity: .75; }
.lg-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; padding: 2px 0; }
.lg-row span { opacity: .7; }
.lg-row b { font-weight: normal; background: #fffdf6; box-shadow: inset 1px 1px 0 #7a705c; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-note { margin: 8px 0 10px; font-size: 17px; line-height: 1.05; opacity: .85; }
.set-namerow { display: flex; align-items: center; gap: 8px; }
.set-namerow .field { width: 220px; flex: none; text-transform: uppercase; }
.set-who { margin: 4px 0 2px; line-height: 1.1; }
.set-users { display: flex; flex-wrap: wrap; gap: 2px 14px; max-height: 64px; overflow: auto; }
.win.app-settings .win-body { max-height: 500px; }

/* ---------- ElseCorp, the Network drives and the Companies Registry (js/pc-company.js, js/pc-network.js) ---------- */
.win.app-corp .win-body.prj-body, .win.app-network .win-body.prj-body { padding: 4px; height: 540px; display: grid; grid-template-columns: 190px 1fr; gap: 4px; background: #d6cdb6; overflow: hidden; }
.win.app-network .win-body.prj-body { height: 480px; }
.co-facts { display: grid; gap: 2px; margin: 6px 0; }
.co-fact { display: grid; grid-template-columns: 130px 1fr; gap: 8px; line-height: 1.1; }
.co-fact b { font-family: var(--pix); font-size: 10px; font-weight: normal; text-transform: uppercase; opacity: .65; padding-top: 4px; }
.co-bal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
.co-bal > div { border: 2px solid #c8b898; background: #fffaf0; padding: 2px 8px 4px; display: flex; flex-direction: column; line-height: 1; }
.co-bal small { font-family: var(--pix); font-size: 9px; text-transform: uppercase; opacity: .6; }
.co-bal b { font-size: 24px; font-weight: normal; }
.co-ledger td, .co-ledger th { font-size: 16px; line-height: 1; }
.co-soft { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.co-sw { display: flex; align-items: center; justify-content: space-between; gap: 6px; border: 2px solid #c8b898; background: #fffaf0; padding: 1px 6px; line-height: 1.1; }
.co-sw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-sw.on { background: #e4f4dc; }
.co-sw em { font-style: normal; font-size: 15px; opacity: .7; white-space: nowrap; }
.co-credits { display: grid; gap: 3px; margin-bottom: 3px; }
.co-credits .row { margin: 0; }
.co-credits .field { width: 46%; }
.co-win .prj-form .field.num { width: 90px; }
.nw-file { display: flex; align-items: center; gap: 8px; border: 2px solid #c8b898; background: #fffaf0; padding: 3px 6px; margin: 4px 0; }
.nw-file img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.nw-n { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1; }
.nw-n b { font-weight: normal; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-n span { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-act { display: flex; gap: 4px; flex: none; align-items: center; }
.nw-pick { max-height: 380px; overflow: auto; }
.nw-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 2px 6px; color: var(--ink); font-size: 18px; }
.nw-opt:hover { background: #2a3a8a; color: #fff; }
.nw-opt img { width: 16px; height: 16px; image-rendering: pixelated; }
.prj-item:disabled { opacity: .45; }
.site-registry { background: #f6f1e4; padding: 0 22px 18px; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; color: #1c2430; }
.reg-head { margin: 0 -22px 12px; padding: 10px 22px; background: #1c3a2c; color: #f4ecd0; display: flex; align-items: baseline; gap: 12px; border-bottom: 4px double #c8b060; }
.reg-head b { font-size: 24px; font-weight: normal; letter-spacing: .5px; }
.reg-head span { font-style: italic; opacity: .8; }
.reg-cta { font-weight: bold; }
.reg-tbl th { background: #1c3a2c; }
.reg-tbl td { font-size: 14px; }
.reg-gone td { opacity: .5; text-decoration: line-through; }
.reg-form { border: 1px solid #b8ac8c; background: #fffdf4; }
.reg-row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 5px 10px; border-bottom: 1px dotted #c8bc9c; align-items: start; }
.reg-row:last-child { border-bottom: none; }
.reg-row label { font-weight: bold; padding-top: 3px; }
.reg-row .dim { font-size: 13px; font-style: italic; }
.reg-row .field { font-family: var(--font); }
.reg-row textarea.field { width: 100%; height: 52px; }
.reg-founders { display: grid; gap: 3px; margin-bottom: 3px; }
.reg-founders .row { margin: 0; display: grid; grid-template-columns: 1fr 58px auto 1fr; gap: 6px; align-items: center; }
.site-registry button, .site-registry select { font-family: var(--font); font-size: 18px; }
.site-registry .err { color: #a02020; font-weight: bold; margin: 6px 0; min-height: 18px; }
.reg-cert { border: 4px double #1c3a2c; background: #fffdf4; padding: 8px 18px 12px; margin: 4px 0 10px; }
.reg-cert h2 { margin: 4px 0 0; font-weight: normal; font-size: 26px; }
.reg-cert .co-fact b { font-family: inherit; font-size: 13px; text-transform: none; opacity: 1; font-weight: bold; padding: 0; }
.reg-work { border-left: 3px solid #c8b060; padding: 1px 8px; margin: 4px 0; }
/* the Registry Office: the terminal on the counter (js/pc-company.js E.co.desk), form R1, the certificate */
.win.reg-win .win-body { padding: 0 14px 10px; background: #f4ecd8; max-height: none; overflow: visible; }
.reg-desk { margin: 0 -14px 8px; padding: 7px 14px; background: #1c3a2c; color: #f4ecd0; display: flex; align-items: baseline; gap: 12px; border-bottom: 4px double #c8b060; }
.reg-desk b { font-size: 22px; font-weight: normal; letter-spacing: .5px; }
.reg-desk span { font-style: italic; opacity: .8; }
.reg-pane { max-height: 440px; overflow: auto; padding: 8px 2px 2px; }
.reg-win .err { color: #a02a2a; min-height: 20px; margin-top: 4px; }
.reg-paper { background: #fffdf4; border: 1px solid #8a7c5c; box-shadow: 3px 3px 0 rgba(0,0,0,.18); padding: 0 0 2px; }
.rp-head { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 3px double #1c3a2c; }
.rp-head > div { padding: 6px 10px; display: flex; flex-direction: column; line-height: 1.05; }
.rp-head b { font-weight: normal; font-family: var(--pix); font-size: 11px; letter-spacing: .5px; }
.rp-head span { font-size: 21px; }
.rp-no { border-left: 1px solid #8a7c5c; text-align: right; background: #f0e8d0; }
.rp-no span { font-size: 15px; opacity: .7; }
.rp-part { background: #1c3a2c; color: #f4ecd0; padding: 1px 10px; font-family: var(--pix); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.rp-sum { padding: 5px 10px; border-bottom: 1px dotted #c8bc9c; background: #f8f2de; }
.rp-hint { flex: 1; font-style: italic; }
.reg-paper .reg-row label { font-weight: normal; }
.reg-paper .reg-row label i { display: inline-block; width: 20px; height: 20px; line-height: 18px; margin-right: 6px; border: 1px solid #1c3a2c; text-align: center; font-style: normal; font-size: 15px; }
.reg-paper .reg-row .field { background: #fff; }
.reg-paper .reg-row input.field:not(.small):not(.num), .reg-paper .reg-row select.field { width: 100%; box-sizing: border-box; }
.reg-paper .prj-sig { font-size: 22px; }
.reg-me { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 3px; }
.reg-paper .reg-founders .row { grid-template-columns: 1fr 58px 1fr auto; }
.reg-done { background: #e4f4dc; border: 2px solid #2a6a4a; padding: 3px 8px; margin: 0 0 8px; }
.reg-certificate { position: relative; background: #fffdf4; border: 2px solid #1c3a2c; outline: 1px solid #c8b060; outline-offset: -6px; padding: 10px 20px 8px; text-align: center; line-height: 1.1; }
.reg-certificate.gone { opacity: .7; }
.rc-top { display: flex; flex-direction: column; }
.rc-top b { font-family: var(--pix); font-size: 11px; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
.rc-top span { font-size: 15px; opacity: .7; }
.rc-title { font-size: 28px; margin: 0; color: #1c3a2c; letter-spacing: 1px; }
.rc-say { font-style: italic; }
.rc-name { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0; }
.rc-name span { font-size: 28px; border-bottom: 1px solid #c8b060; padding: 0 12px; }
.rc-name canvas { image-rendering: pixelated; }
.rc-no { font-family: var(--pix); font-size: 12px; font-weight: normal; letter-spacing: 1px; white-space: nowrap; }
.rc-body { display: flex; gap: 12px; align-items: flex-end; margin-top: 6px; border-top: 1px dotted #c8bc9c; padding-top: 4px; }
.rc-facts { flex: 1; text-align: left; display: grid; gap: 1px; align-self: start; }
.rc-facts .co-fact { grid-template-columns: 124px 1fr; }
.rc-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rc-seal { width: 66px; height: 66px; border-radius: 50%; border: 2px solid #a02a2a; outline: 1px solid #a02a2a; outline-offset: 2px; color: #a02a2a; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-11deg); font-family: var(--pix); font-size: 7px; line-height: 1.5; margin: 2px 4px 4px; }
.rc-seal i { font-style: normal; font-size: 20px; line-height: 1; font-family: var(--font); }
.rc-sig { display: flex; flex-direction: column; align-items: center; min-width: 130px; }
.rc-sig em { font-size: 24px; border-bottom: 1px solid #2b2033; padding: 0 10px; transform: rotate(-3deg); white-space: nowrap; }
.rc-sig span { font-size: 15px; opacity: .7; }
.reg-need { border: 1px solid #b8ac8c; background: #fffdf4; padding: 6px 10px; margin: 6px 0; }
.reg-need ul { margin: 2px 0 4px; padding-left: 20px; line-height: 1.1; }
.reg-steps { display: grid; gap: 3px; }
.reg-step { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; border: 2px solid #c8b898; background: #fffaf0; padding: 3px 6px; line-height: 1.05; }
.reg-step > i { width: 22px; height: 22px; line-height: 20px; text-align: center; font-style: normal; border: 2px solid #c8b898; background: #fff; margin-top: 1px; }
.reg-step.done { background: #eef6e4; }
.reg-step.done > i { background: #2a6a4a; border-color: #2a6a4a; color: #fff; }
.reg-step > div > b { display: block; }
.reg-step > div > span { font-size: 16px; opacity: .8; }
.reg-acts { display: flex; flex-direction: column; gap: 3px; align-items: stretch; min-width: 96px; }
.reg-acts .b { white-space: nowrap; }
/* ElseBank: the business accounts of the companies you work for */
.bank-biz { border: 2px solid #c8b898; background: #fffaf0; padding: 4px 8px; margin: 4px 0; display: flex; align-items: center; gap: 10px; }
.bank-biz > div { flex: 1; line-height: 1.1; }
.bank-biz > b { font-size: 22px; font-weight: normal; }
.card-credits { font-size: 14px; line-height: 1; }

/* ElseGuide: chapter list on the left, the page on the right; the window keeps a fixed height and scrolls inside */
.win.app-guide .win-body.gd-body { padding: 4px; height: 460px; display: grid; grid-template-columns: 200px 1fr; gap: 4px; background: #d6cdb6; overflow: hidden; }
.gd-side { background: #fffdf6; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; min-height: 0; padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.gd-search { width: 100%; box-sizing: border-box; }
.gd-nav { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.gd-part { font: bold 10px/1 monospace; text-transform: uppercase; letter-spacing: .08em; color: #7a705c; margin: 8px 2px 2px; }
.gd-item { text-align: left; background: none; border: 0; padding: 3px 6px; font: inherit; color: #2b2033; cursor: pointer; }
.gd-item:hover { background: #ece3c8; }
.gd-item.on { background: #2b2033; color: #fffdf6; }
.gd-page { background: #fffdf6; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; min-height: 0; overflow: auto; padding: 10px 16px 14px; color: #2b2033; line-height: 1.45; }
.gd-page h3 { margin: 0 0 2px; font-size: 18px; }
.gd-page h4 { margin: 14px 0 4px; font-size: 13px; border-bottom: 1px solid #d6cdb6; padding-bottom: 2px; }
.gd-page h5 { margin: 8px 0 2px; font-size: 12px; }
.gd-page p { margin: 4px 0; }
.gd-page ul { margin: 4px 0; padding-left: 20px; }
.gd-page li { margin: 2px 0; }
.gd-page code { background: #ece3c8; padding: 0 3px; font-family: monospace; font-size: .92em; }
.gd-page mark { background: #f8e070; }
.gd-blurb { color: #7a705c; font-style: italic; margin-bottom: 6px; }
.gd-tip { background: #ece3c8; border-left: 3px solid #c8a030; padding: 5px 8px; }
.gd-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; padding-top: 8px; border-top: 1px solid #d6cdb6; }
.gd-hit { margin: 8px 0; padding-bottom: 6px; border-bottom: 1px dotted #d6cdb6; }
.gd-hitlink { background: none; border: 0; padding: 0; font: bold 12px/1.3 inherit; color: #3a5ab0; text-decoration: underline; cursor: pointer; text-align: left; }

/* ---------- company websites (js/pc-web.js) ---------- */
.web-site { display: flex; flex-direction: column; min-height: 100%; }
.web-host { display: block; flex: 1; contain: content; overflow: hidden; }
.web-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 3px 10px; background: #d8d0c0; border-top: 2px solid var(--ink); font-size: 13px; color: #4a4038; }
.web-foot .web-pg { margin-left: 6px; }
.co-web { align-items: center; gap: 8px; }
.co-logo { display: inline-flex; padding: 3px 5px; background: #2b2033; border: 2px solid var(--ink); }
.co-logo.big { min-height: 40px; align-items: center; }
.co-logo canvas { image-rendering: pixelated; display: block; }
.co-logo .dim { color: #d8d0c0; }
.co-picks { display: flex; flex-direction: column; gap: 2px; max-height: 130px; overflow-y: auto; border: 2px solid var(--ink); background: #fff; padding: 4px 6px; }
.co-pick { display: block; cursor: pointer; }

/* ---------- ElseReel (js/pc-reel.js): the film studio ---------- */
.win.app-reel .win-body.er-body { padding: 0; height: 640px; overflow: hidden; background: #2c2836; color: #ece4f2; }
.er-root { position: relative; display: flex; flex-direction: column; height: 100%; font-size: 17px; user-select: none; }
.er-root .b { color: var(--ink); }
.er-root .dim, .er-root .hint { color: #b4aac4; opacity: 1; }
.er-root .hint { font-size: 15px; line-height: 1.05; margin: 2px 0; }
.er-name { margin-left: 14px; color: #b4aac4; font-size: 16px; }
.er-main { display: flex; height: 432px; flex: none; }
.er-stagecol { width: 644px; flex: none; display: flex; flex-direction: column; background: #1c1824; border-right: 1px solid #14101a; }
.er-tabs { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px; background: #262030; border-bottom: 1px solid #14101a; white-space: nowrap; overflow: hidden; }
.er-tip { color: #9a90ac; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.er-sep { width: 10px; flex: none; }
.er-screen { flex: 1; display: grid; place-items: center; }
.er-view { display: block; width: 640px; height: 400px; image-rendering: pixelated; cursor: default; outline: 1px solid #0c0812; }
.er-side { flex: 1; min-width: 0; padding: 4px 10px 6px; background: #322c3e; overflow-y: auto; overflow-x: hidden; }
.er-side .side-h { font-family: var(--pix); font-size: 10px; color: #ffd860; margin: 8px 0 3px; letter-spacing: .5px; }
.er-side .side-h:first-child { margin-top: 4px; }
.er-side .row { margin: 3px 0; gap: 5px; }
.er-side .field { min-width: 0; }
.er-side .field.small:not(.num) { flex: 1; width: 100%; }
.er-side input[type=range] { flex: 1; min-width: 0; accent-color: #ffd860; }
.er-side input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid #14101a; background: none; }
.er-f { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.er-f > span { color: #b4aac4; flex: none; }
.er-side .row .er-f { margin: 0; }
.er-look label { display: inline-flex; }
.er-how { margin: 2px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.08; color: #d8cfe4; }
.er-how li { margin-bottom: 4px; }
.er-how b { color: #fff4e0; font-weight: normal; }
.er-recbox { margin-top: 10px; padding-top: 8px; border-top: 1px solid #4a4258; }
.er-recbtn { width: 100%; background: #ffe9e4; }
.er-root .er-recbtn.on, .er-root .er-rec.on { background: #d04a4a !important; color: #fff !important; }
.er-rec { color: #b02a2a !important; }
.er-pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.er-pi { height: 50px; padding: 0; background: #262030; border: 1px solid #14101a; display: grid; place-items: center; overflow: hidden; }
.er-pi:hover { background: #4a3f5a; }
.er-pi.on { border-color: #ffd860; background: #5a4a72; }
.er-pi img { max-width: 46px; max-height: 46px; image-rendering: pixelated; }
.er-bar-row { display: flex; align-items: center; gap: 4px; height: 32px; flex: none; padding: 0 8px; background: #262030; border-top: 1px solid #14101a; border-bottom: 1px solid #14101a; }
.er-time { font-family: var(--pix); font-size: 11px; color: #7ad07a; margin-left: 10px; white-space: nowrap; }
.er-play { min-width: 92px; }
/* the timeline: a row for the camera, one for the cards, one for each actor */
.er-tl { flex: 1; min-height: 0; overflow: auto; background: #211c2a; position: relative; }
.er-tlin { position: relative; min-height: 100%; }
.er-row { display: flex; height: 30px; border-bottom: 1px solid #2e2838; }
.er-row.er-cam, .er-row.er-cards { height: 22px; }
.er-row.on .er-rh { background: #4a3f5a; color: #fff4e0; }
.er-row.on .er-track { background: #2a2434; }
.er-row.rec .er-rh { background: #7a2a34; color: #fff; }
.er-rh { position: sticky; left: 0; z-index: 5; width: 128px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 6px; background: #2c2636; color: #c8bed6; border-right: 1px solid #14101a; cursor: pointer; white-space: nowrap; overflow: hidden; font-size: 16px; }
.er-rh span { overflow: hidden; text-overflow: ellipsis; }
.er-chip { width: 9px; height: 9px; flex: none; border: 1px solid #0c0812; }
.er-chip.c-cam { background: #ffd860; }
.er-chip.c-card { background: #7ac0d8; }
.er-track { position: relative; flex: none; height: 100%; margin-left: 8px; cursor: pointer; }
.er-ruler { position: sticky; top: 0; z-index: 4; height: 18px; background: #2c2636; border-bottom: 1px solid #14101a; }
.er-ruler .er-rh { z-index: 6; font-family: var(--pix); font-size: 9px; color: #8a80a0; cursor: default; }
.er-ticks { cursor: ew-resize; }
.er-ticks i { position: absolute; top: 0; height: 100%; padding-left: 3px; border-left: 1px solid #5a5068; font-style: normal; font-size: 13px; line-height: 17px; color: #a89cbc; pointer-events: none; }
.er-mk { position: absolute; top: 4px; width: 9px; height: 9px; margin-left: -5px; background: #7af0ff; border: 1px solid #0c0812; transform: rotate(45deg); cursor: ew-resize; z-index: 2; }
.er-cam .er-mk { top: 5px; background: #ffd860; }
.er-mk.cut { transform: none; width: 6px; margin-left: -3px; }
.er-mk.sit { background: #b890f0; }
.er-mk.hid { background: #2c2636; border-color: #7af0ff; }
.er-mk.er-on { background: #fff; box-shadow: 0 0 0 2px #ffd860; z-index: 3; }
.er-walk { position: absolute; top: 8px; height: 2px; background: #3a7a86; pointer-events: none; }
.er-bar { position: absolute; top: 3px; height: 15px; padding: 0 3px; overflow: hidden; white-space: nowrap; font-style: normal; font-size: 13px; line-height: 14px; color: #14101a; border: 1px solid #0c0812; cursor: ew-resize; z-index: 1; }
.er-bar.title { background: #ffd860; }
.er-bar.caption { background: #7ac0d8; }
.er-bar.line { top: 16px; height: 12px; line-height: 11px; font-size: 12px; background: #fffaf0; }
.er-bar.er-on { box-shadow: 0 0 0 2px #ffd860; z-index: 3; }
.er-empty .er-track span { position: sticky; left: 140px; color: #8a80a0; line-height: 28px; padding-left: 10px; }
.er-head { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #ff5a5a; z-index: 4; pointer-events: none; }
.er-head::before { content: ''; position: absolute; left: -6px; top: 0; border: 5px solid transparent; border-top: 7px solid #ff5a5a; }
.er-open { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.er-file { display: flex; gap: 6px; }
.er-file .b:first-child { flex: 1; text-align: left; }
.er-rel { display: flex; gap: 14px; align-items: flex-start; }
.er-burn { height: 10px; background: #0c0812; box-shadow: inset 0 0 0 2px #2b2033; margin: 6px 0; }
.er-burn i { display: block; height: 100%; width: 0; background: #7ad07a; }
.er-poster { width: 240px; height: 150px; image-rendering: pixelated; border: 2px solid var(--ink); flex: none; }
.er-root .b.on { background: #ffd860; color: var(--ink); }

/* My Files: the file manager (js/pc-files.js) */
.win.app-files .win-body.fm-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; background: #d8d0c0; }
.fm-bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-bottom: 1px solid #8a8070; }
.fm-tb { background: #d8d0c0; border: none; box-shadow: inset -1px -1px 0 #3a3428, inset 1px 1px 0 #fff, inset -2px -2px 0 #8a8070; padding: 2px 9px; font-family: var(--font); font-size: 17px; color: var(--ink); white-space: nowrap; }
.fm-tb.on, .fm-tb:active:not(:disabled) { box-shadow: inset 1px 1px 0 #3a3428, inset -1px -1px 0 #fff; background: #c4bcac; }
.fm-tb:disabled { color: #8a8070; }
.fm-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: #fff; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; padding: 2px 8px; font-size: 18px; white-space: pre; overflow: hidden; }
.fm-path img, .fm-node img { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.fm-path a { cursor: pointer; }
.fm-path a:hover { text-decoration: underline; }
.fm-main { display: grid; grid-template-columns: 172px 1fr; gap: 4px; padding: 4px; height: 380px; min-height: 0; }
.fm-tree, .fm-view { background: #fff; box-shadow: inset 1px 1px 0 #7a705c, inset 2px 2px 0 #3a3428; overflow: auto; min-height: 0; }
.fm-tree { display: flex; flex-direction: column; gap: 1px; padding: 6px 4px; }
.fm-node { display: flex; align-items: center; gap: 6px; background: none; border: none; text-align: left; padding: 2px 6px; font-family: var(--font); font-size: 18px; color: var(--ink); white-space: nowrap; }
.fm-node.sub { margin-left: 14px; }
.fm-node.on { background: #2a3a8a; color: #fff; }
.fm-node.on .dim { color: #c8d0ff; }
.fm-view { padding: 8px; user-select: none; }
.fm-view.icons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px 2px; }
.fm-view.icons .fm-item { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px 3px; border: 1px dotted transparent; }
.fm-view.icons .fm-item img { height: 49px; image-rendering: pixelated; pointer-events: none; }
.fm-view.icons .fm-item img.thumb { width: 34px; }
.fm-view.icons .fm-item img.ico { width: 32px; height: 32px; margin: 12px 0 5px; }
.fm-view.icons .fm-name { font-size: 16px; line-height: 15px; text-align: center; padding: 0 3px; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-view.icons .fm-item.on { border-color: #2a3a8a; }
.fm-view.icons .fm-item.on .fm-name { background: #2a3a8a; color: #fff; }
.fm-view.list { padding: 0; }
.fm-view.list .fm-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 6fr); gap: 8px; align-items: center; padding: 1px 8px; font-size: 17px; }
.fm-view.list .fm-item > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fm-view.list .fm-name { display: flex; align-items: center; gap: 6px; }
.fm-view.list .fm-item img { width: 16px; height: 22px; object-fit: contain; image-rendering: pixelated; flex: none; pointer-events: none; }
.fm-view.list .fm-item.on { background: #2a3a8a; color: #fff; }
.fm-view.list .fm-item.on .dim { color: #c8d0ff; }
.fm-view.list .fm-head { position: sticky; top: 0; background: #d8d0c0; box-shadow: inset -1px -1px 0 #8a8070, inset 1px 1px 0 #fff; font-size: 16px; padding: 2px 8px; }
.fm-empty { margin: 14px; color: #6a6258; font-size: 18px; max-width: 420px; }
.fm-status { display: flex; align-items: center; gap: 6px; padding: 2px 8px 3px; font-size: 16px; white-space: pre; overflow: hidden; border-top: 1px solid #fff; min-height: 24px; }
/* a menu at the mouse (PC.menuAt) */
.pc-ctx { position: absolute; pointer-events: auto; min-width: 190px; background: #d8d0c0; box-shadow: inset -1px -1px 0 #3a3428, inset 1px 1px 0 #fff, inset -2px -2px 0 #8a8070, 3px 3px 0 rgba(0,0,0,.45); padding: 3px; display: flex; flex-direction: column; }
.pc-ctx button { background: none; border: none; text-align: left; padding: 1px 18px; font-family: var(--font); font-size: 18px; color: var(--ink); white-space: nowrap; }
.pc-ctx button.bold { font-weight: bold; }
.pc-ctx button.danger { color: #a02828; }
.pc-ctx button:hover:not(:disabled) { background: #2a3a8a; color: #fff; }
.pc-ctx button:disabled { color: #8a8070; text-shadow: 1px 1px 0 #fff; }
.pc-ctx hr { border: none; border-top: 1px solid #8a8070; border-bottom: 1px solid #fff; margin: 3px 2px; width: auto; align-self: stretch; }