/* ==========================================================================
   MayesOS — Aero glass design system
   Everything here is hand-authored. No frameworks, no external assets.
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:root {
  color-scheme: dark;

  /* Segoe UI on Windows, where it is the real thing; Source Sans 3 everywhere
     else, because it is the nearest humanist sans to it that loads anywhere. */
  --font: "Segoe UI", "Selawik", "Source Sans 3", "Frutiger", "Tahoma",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Consolas", "Lucida Console", "DejaVu Sans Mono", ui-monospace, monospace;

  /* accent — Control Panel rewrites these three */
  --accent:       #6fb7e8;
  --accent-deep:  #1b4f7d;
  --accent-glow:  rgba(111,183,232,.55);

  --glass:        rgba(22, 46, 72, .62);
  --glass-edge-2: rgba(255,255,255,.16);

  --taskbar-h: 42px;
  --sidebar-w: 142px;

  --ink:        #10222f;
  --link:       #0a5aa8;

  --shadow-win: 0 26px 60px rgba(0,0,0,.50), 0 6px 18px rgba(0,0,0,.38);
}

body { font-family: var(--font); font-size: 13px; color: #fff; }

/* ==========================================================================
   Screen
   ========================================================================== */
#screen {
  position: fixed; inset: 0;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

/* ==========================================================================
   Boot layers
   ========================================================================== */
.boot-layer {
  position: absolute; inset: 0;
  z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  transition: opacity .55s ease;
  user-select: none;
}
.boot-layer.fade-out { opacity: 0; pointer-events: none; }
/* outgoing layer always paints above the incoming one */
#post       { z-index: 940; }
#bootsplash { z-index: 930; }
#login      { z-index: 920; }
#welcome    { z-index: 910; }

/* --- BIOS POST --- */
#post {
  align-items: flex-start; justify-content: flex-start;
  padding: clamp(14px, 4vw, 48px);
  cursor: pointer;
}
#post pre {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(11px, 1.35vw, 15px);
  line-height: 1.5;
  color: #d8d8d8;
  white-space: pre-wrap;
  text-shadow: 0 0 6px rgba(200,255,200,.14);
}
#post .amber { color: #ffd479; }
#post .dim   { color: #8a8a8a; }
#post .caret {
  display: inline-block; width: .6em; height: 1em;
  background: #d8d8d8; vertical-align: -.15em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- boot splash --- */
#bootsplash { flex-direction: column; gap: 34px; cursor: pointer; }
.boot-brand {
  text-align: center;
  animation: bootFade 1.1s ease both;
}
.boot-brand .mark {
  width: 76px; height: 76px; margin: 0 auto 18px;
  display: grid; place-items: center;
}
.boot-brand h1 {
  margin: 0; font-size: clamp(30px, 5vw, 46px); font-weight: 300;
  letter-spacing: .5px; color: #fff;
  text-shadow: 0 0 34px rgba(120,190,255,.55);
}
.boot-brand .ed {
  margin-top: 6px; font-size: 12px; letter-spacing: 3.5px;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
@keyframes bootFade { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none;} }

.boot-bar {
  position: relative;
  width: min(280px, 60vw); height: 12px;
  border-radius: 8px;
  background: linear-gradient(#0a0a0a, #161616);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.10);
  overflow: hidden;
}
.boot-bar::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 74px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(120,200,255,0), #9fd8ff 45%, #e8f7ff 60%, rgba(120,200,255,0));
  box-shadow: 0 0 16px rgba(140,210,255,.9);
  animation: cylon 1.9s cubic-bezier(.62,.02,.38,.98) infinite;
}
@keyframes cylon {
  0%   { transform: translateX(-80px); }
  100% { transform: translateX(min(280px, 60vw)); }
}
.boot-note {
  font-size: 12px; color: rgba(255,255,255,.38); letter-spacing: .4px;
}
.boot-foot {
  position: absolute; left: 0; right: 0; bottom: 26px;
  text-align: center; font-size: 11px; color: rgba(255,255,255,.28);
}

/* --- login --- */
#login {
  flex-direction: column;
  background: #0a1a2a;
}
#login .lg-bg {
  position: absolute; inset: 0;
  background-color: #0a1a2a;
  background-image: var(--wall, url("../assets/wall-meadow.svg"));
  background-position: center;
  background-size: var(--wall-size, cover);
  background-repeat: var(--wall-repeat, no-repeat);
  filter: blur(26px) saturate(.75) brightness(.48);
  transform: scale(1.1);
}
#login .lg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(90,150,210,.25), transparent 70%),
    linear-gradient(180deg, rgba(4,18,34,.72), rgba(2,10,20,.92));
}
.lg-body {
  position: relative; text-align: center;
  animation: bootFade .7s ease both;
}
.user-tile {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
  background: none; border: 0; padding: 18px 26px; border-radius: 12px;
  transition: background .18s ease;
}
.user-tile:hover, .user-tile:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.user-pic {
  width: 132px; height: 132px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #6fa8d8, #2b5f92 60%, #163a5c);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.92),
    0 0 0 5px rgba(120,180,230,.45),
    0 14px 34px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.55);
  font-size: 46px; font-weight: 300; letter-spacing: 2px; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.user-tile:hover .user-pic {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #fff, 0 0 0 6px var(--accent-glow),
    0 18px 40px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.6);
}
.user-name { font-size: 22px; font-weight: 300; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.lg-hint {
  margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.55);
}
.lg-foot {
  position: absolute; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: space-between; padding: 0 26px;
  font-size: 11px; color: rgba(255,255,255,.4);
}

/* --- welcome spinner --- */
#welcome { flex-direction: column; gap: 22px; background: #0d2338; }
#welcome .w-bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 45%, #1d4a72, #061423 70%); }
.w-body { position: relative; text-align: center; }
.spinner {
  width: 46px; height: 46px; margin: 0 auto 20px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: #cfe9ff;
  animation: spin .85s linear infinite;
  box-shadow: 0 0 20px rgba(150,210,255,.35);
}
@keyframes spin { to { transform: rotate(360deg); } }
.w-body .w-text { font-size: 26px; font-weight: 300; text-shadow: 0 0 22px rgba(140,200,255,.5); }

/* ==========================================================================
   Desktop
   ========================================================================== */
#desktop {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
#desktop.on { opacity: 1; }

#wallpaper {
  position: absolute; inset: 0;
  background-color: #17456e;
  background-image: var(--wall, url("../assets/wall-meadow.svg"));
  background-position: center;
  background-size: var(--wall-size, cover);
  background-repeat: var(--wall-repeat, no-repeat);
  z-index: 0;
}

#desktop-area {
  position: absolute; left: 0; right: 0; top: 0; bottom: var(--taskbar-h);
  z-index: 1;
}

/* --- desktop icons --- */
/* Two named columns rather than one wrapping list, so "Documents" and
   "My PC" always land where the eye expects them. Each column still wraps
   on its own if the screen is too short to hold it. */
#icons {
  position: absolute; left: 10px; top: 10px; bottom: 10px;
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 4px;
  z-index: 2;
}
.icol {
  height: 100%;
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
}
/* fixed height and no wrapping, so both columns' first icon sits on the
   same line however long the heading is */
.icol-head {
  width: 88px; height: 18px; padding: 2px 4px 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  white-space: nowrap;
  color: rgba(226,242,255,.7);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  user-select: none; pointer-events: none;
}
/* On a short screen a column wraps into two, and a heading sitting above a
   wrapped-over neighbour labels the wrong icons. Drop the headings there and
   let the grouping read from position alone. */
@media (max-height: 720px) {
  .icol-head { display: none; }
}
.dicon {
  width: 88px; padding: 7px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: #fff; text-align: center; line-height: 1.25;
  font-size: 12px;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.55);
  transition: background .12s ease, border-color .12s ease;
  user-select: none;
}
.dicon .glyph { width: 42px; height: 42px; display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.dicon .glyph svg { width: 42px; height: 42px; }
.dicon:hover { background: rgba(120,180,240,.22); border-color: rgba(160,205,245,.45); }
.dicon.sel {
  background: rgba(80,150,220,.40);
  border-color: rgba(190,225,255,.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* ==========================================================================
   Gadget sidebar
   ========================================================================== */
#sidebar {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  z-index: 3;
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(8,22,38,.34), rgba(8,22,38,.20));
  border-left: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.10);
  transition: transform .3s ease, opacity .3s ease;
}
#sidebar.off { transform: translateX(100%); opacity: 0; pointer-events: none; }
.gadget {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  padding: 9px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gadget h4 {
  margin: 0 0 7px; font-size: 10px; font-weight: 600;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.g-clock { display: grid; place-items: center; }
.g-clock svg { width: 104px; height: 104px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.g-digital { margin-top: 5px; text-align: center; font-size: 12px; color: rgba(255,255,255,.85); letter-spacing: .5px; }

.g-cal-head { text-align: center; font-size: 11px; font-weight: 600; margin-bottom: 5px; color: #fff; }
.g-cal { width: 100%; border-collapse: collapse; }
.g-cal th { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.55); padding-bottom: 2px; }
.g-cal td { font-size: 10px; text-align: center; padding: 1px 0; color: rgba(255,255,255,.85); }
.g-cal td.off { color: rgba(255,255,255,.25); }
.g-cal td.today {
  background: var(--accent); color: #062036; border-radius: 3px; font-weight: 700;
  box-shadow: 0 0 8px var(--accent-glow);
}

.g-feat { cursor: pointer; }
.g-feat .fname { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.g-feat .ftag  { font-size: 10px; line-height: 1.35; color: rgba(255,255,255,.7); }
.g-feat .fdots { display: flex; gap: 4px; margin-top: 7px; }
.g-feat .fdots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.3);
}
.g-feat .fdots i.on { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); }

/* ==========================================================================
   Windows
   ========================================================================== */
#windows { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#windows > * { pointer-events: auto; }

.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 300px; min-height: 180px;
  border-radius: 9px 9px 4px 4px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: var(--shadow-win), inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  animation: winIn .17s cubic-bezier(.2,.9,.3,1) both;
  contain: layout;
}
@keyframes winIn {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}
.win.closing { animation: winOut .14s ease both; }
@keyframes winOut { to { opacity: 0; transform: scale(.97); } }
.win.min { animation: winMin .16s ease both; pointer-events: none; }
@keyframes winMin { to { opacity: 0; transform: scale(.7) translateY(28vh); } }

.win.inactive {
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  background: rgba(26, 44, 62, .56);
}
.win.inactive .win-title span.t { opacity: .62; }

.win.max {
  border-radius: 0; border-width: 0 0 1px 0;
}

/* --- title bar --- */
.win-title {
  position: relative;
  flex: 0 0 auto; height: 31px;
  display: flex; align-items: center; gap: 7px;
  padding: 0 4px 0 9px;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.64) 0%,
      rgba(255,255,255,.36) 48%,
      rgba(255,255,255,.16) 50%,
      rgba(255,255,255,.32) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), inset 0 -1px 0 rgba(255,255,255,.22);
  cursor: default;
  user-select: none;
  touch-action: none;
}
.win.max .win-title { border-radius: 0; }
.win-title .ic { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; }
.win-title .ic svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.win-title span.t {
  flex: 1 1 auto; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: #0d2436;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow:
    0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,.95),
    0 0 16px rgba(255,255,255,.7), 0 1px 0 rgba(255,255,255,.9);
}

/* --- caption buttons --- */
.cap { display: flex; gap: 2px; flex: 0 0 auto; }
.cap button {
  width: 27px; height: 19px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.28) 48%,
                            rgba(160,200,230,.30) 50%, rgba(200,228,248,.55));
  box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9);
  display: grid; place-items: center;
  transition: filter .12s ease, box-shadow .12s ease;
}
.cap button svg { width: 10px; height: 10px; }
.cap button svg * { stroke: #10344f; stroke-width: 1.6; fill: none; }
.cap button:hover { filter: brightness(1.18); }
.cap button:active { filter: brightness(.9); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.cap .close {
  width: 45px;
  background:
    linear-gradient(180deg, rgba(255,180,170,.95), rgba(228,84,64,.95) 48%,
                            rgba(198,44,30,.95) 50%, rgba(240,130,110,.95));
  border-color: rgba(255,200,190,.8);
}
.cap .close svg * { stroke: #fff; stroke-width: 1.9; }
.cap .close:hover { filter: brightness(1.15) saturate(1.1); }

/* --- window body --- */
.win-body {
  color-scheme: light;
  flex: 1 1 auto; min-height: 0;
  margin: 0 3px 3px;
  border-radius: 0 0 3px 3px;
  background: #f4f7fa;
  border: 1px solid rgba(0,0,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--ink);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.win.max .win-body { margin: 0; border-radius: 0; border-width: 1px 0 0; }

/* --- resize handles --- */
.rz { position: absolute; z-index: 5; touch-action: none; }
.rz.n  { top: -3px;  left: 10px; right: 10px; height: 7px;  cursor: ns-resize; }
.rz.s  { bottom: -3px; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.rz.w  { left: -3px;  top: 10px; bottom: 10px; width: 7px;  cursor: ew-resize; }
.rz.e  { right: -3px; top: 10px; bottom: 10px; width: 7px;  cursor: ew-resize; }
.rz.nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.rz.ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.rz.sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
.rz.se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
.win.max .rz { display: none; }

/* ==========================================================================
   In-window chrome: menus, toolbars, explorer
   ========================================================================== */
.menubar {
  flex: 0 0 auto;
  display: flex; gap: 2px; padding: 2px 4px;
  background: linear-gradient(180deg, #fbfdff, #e9eff6);
  border-bottom: 1px solid #c3d2df;
  font-size: 12px;
}
.menubar button {
  border: 1px solid transparent; background: none; border-radius: 3px;
  padding: 3px 9px; color: #17384f;
}
.menubar button:hover { background: #cfe4f7; border-color: #9cc4e6; }

.toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px;
  background: linear-gradient(180deg, #f7fbff, #e4ecf4);
  border-bottom: 1px solid #c3d2df;
  font-size: 12px;
}
.toolbar .sep { width: 1px; align-self: stretch; background: #cbd8e4; margin: 2px 2px; }
.toolbar .spacer { flex: 1 1 auto; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 4px;
  border: 1px solid #8fa9c0;
  background: linear-gradient(180deg, #ffffff, #f0f5fa 48%, #e2eaf3 50%, #f2f7fc);
  color: #16384f; font-size: 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.10), inset 0 1px 0 #fff;
  white-space: nowrap;
}
.btn:hover { border-color: #5f92c2; background: linear-gradient(180deg,#fdfeff,#e6f1fb 48%,#d4e7f8 50%,#eaf5ff); }
.btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.18); }
.btn.primary {
  border-color: #2f6ea8;
  background: linear-gradient(180deg, #b9ddf7, #79bbec 48%, #4d9fdd 50%, #8fcbf3);
  color: #06283f; font-weight: 600;
}
.btn svg { width: 14px; height: 14px; }

.addressbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #eef4fa, #dfe9f2);
  border-bottom: 1px solid #c3d2df;
}
.nav-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid #7f9dba; display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff, #dbe7f3);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.14);
}
.nav-btn:disabled { opacity: .4; cursor: default; }
.nav-btn svg { width: 12px; height: 12px; }
.crumbs {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  height: 25px; padding: 0 8px;
  background: #fff; border: 1px solid #7f9dba; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
  font-size: 12px; color: #17384f; overflow: hidden; white-space: nowrap;
}
.crumbs .cb { padding: 2px 5px; border-radius: 3px; }
.crumbs .cb.link { cursor: pointer; }
.crumbs .cb.link:hover { background: #dbeafb; }
.crumbs .sepr { color: #7d94a8; }
.searchbox {
  flex: 0 0 150px; height: 25px; padding: 0 9px;
  background: #fff; border: 1px solid #7f9dba; border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
  font-size: 12px; color: var(--ink);
}
.searchbox::placeholder { color: #93a8b9; }

.split { flex: 1 1 auto; min-height: 0; display: flex; }
.navpane {
  flex: 0 0 170px; min-width: 0;
  background: linear-gradient(180deg, #e9f0f7, #dee8f1);
  border-right: 1px solid #c3d2df;
  padding: 8px 0; overflow: auto;
}
.navpane h5 {
  margin: 10px 12px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: #5d7a92;
}
.navpane a {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 12px; font-size: 12px; color: #16384f;
  text-decoration: none; cursor: pointer;
}
.navpane a svg { width: 16px; height: 16px; flex: 0 0 16px; }
.navpane a:hover { background: #d3e6f8; }
.navpane a.on { background: #bcdcf6; font-weight: 600; }

.content {
  flex: 1 1 auto; min-width: 0;
  background: #fff; overflow: auto;
}
.detailsbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; min-height: 52px;
  background: linear-gradient(180deg, #eaf1f8, #dbe6f0);
  border-top: 1px solid #c3d2df;
  font-size: 11.5px; color: #35546c;
}
.detailsbar .dtitle { font-weight: 700; color: #16384f; }

/* --- icon grid (explorer tiles) --- */
.tiles { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px; align-content: flex-start; }
.tile {
  width: 118px; min-height: 150px; padding: 9px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 4px;
  background: none; text-align: center; font-size: 12px; color: var(--ink);
  line-height: 1.3; overflow-wrap: anywhere;
}
.tile .nm { flex: 1 1 auto; }
.tile .glyph svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.tile .sub { font-size: 10.5px; color: #6e869b; }
.tile:hover { background: #e4f1fc; border-color: #b6d8f2; }
.tile.sel  { background: #cfe6fa; border-color: #7db4e2; }

/* --- list rows --- */
.rows { width: 100%; border-collapse: collapse; font-size: 12px; }
.rows th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 600; color: #3d5a72;
  padding: 6px 10px;
  background: linear-gradient(180deg,#fbfdff,#e8eff7);
  border-bottom: 1px solid #c3d2df;
}
.rows td { padding: 5px 10px; border-bottom: 1px solid #eef3f8; color: var(--ink); }
.rows th:not(:first-child), .rows td:not(:first-child) { white-space: nowrap; }
.rows td:first-child { overflow-wrap: anywhere; }
.rows tr:hover td { background: #eef7ff; }
.rows tr.sel td { background: #cfe6fa; }
.rows td .withic { display: flex; align-items: center; gap: 8px; }
.rows td .withic svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* --- drives (Computer) --- */
.drive {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid #eef3f8;
}
.drive:hover { background: #f2f9ff; }
.drive .glyph svg { width: 46px; height: 46px; }
.drive .meta { flex: 1 1 auto; min-width: 0; }
.drive .dn { font-size: 13px; font-weight: 600; color: var(--ink); }
.drive .dnote { font-size: 11px; color: #6e869b; margin-top: 1px; }
.meter {
  margin-top: 6px; height: 13px; border-radius: 3px;
  background: linear-gradient(180deg,#e6ecf2,#f6f9fc);
  border: 1px solid #b9c9d7; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.10);
}
.meter i {
  display: block; height: 100%;
  background: linear-gradient(180deg, #7fd3ff, #2f9fe0 45%, #1f7fbd 50%, #57bdf0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.meter.hot i { background: linear-gradient(180deg,#ffcf8a,#f09030 45%,#d9741a 50%,#f7ad5e); }
.drive .pct { flex: 0 0 auto; font-size: 11px; color: #5c768c; }

/* ==========================================================================
   Document / prose surfaces
   ========================================================================== */
.docsurface { background: linear-gradient(180deg, #dde5ed, #cfd9e3); }
.paper {
  background: #fff; color: #1a1a1a;
  max-width: 780px; margin: 18px auto; padding: 42px 48px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  border: 1px solid #d6dee6;
  font-size: 13px; line-height: 1.6;
}
.paper h1 { margin: 0 0 2px; font-size: 26px; font-weight: 600; letter-spacing: -.2px; }
.paper .sub { color: #4a6072; font-size: 13px; margin-bottom: 4px; }
.paper .meta { color: #6b7f90; font-size: 12px; }
.paper hr { border: 0; border-top: 1px solid #d8e0e8; margin: 18px 0; }
.paper h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent-deep); margin: 22px 0 10px; padding-bottom: 5px;
  border-bottom: 1px solid #dde5ed;
}
.paper h3 { font-size: 14px; margin: 14px 0 2px; }
.paper .role-line { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.paper .where { color: #4a6072; font-size: 12.5px; }
.paper .when  { color: #7b8fa0; font-size: 12px; white-space: nowrap; }
.paper ul { margin: 7px 0 0; padding-left: 20px; }
.paper li { margin-bottom: 4px; }
.paper .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

/* --- certificates --- */
.badge-pdf {
  font-size: 9px; font-weight: 700; letter-spacing: .6px;
  padding: 1px 6px; border-radius: 8px;
  background: #e8f2fb; border: 1px solid #bfd9f0; color: #1d4e75;
}
.cert-sheet {
  background: #fff; max-width: 720px; margin: 18px auto; padding: 26px 30px 30px;
  border: 1px solid #d6dee6; box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.cert-head h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #16384f; letter-spacing: -.2px; }
.cert-meta { font-size: 12.5px; color: #5d7a92; }
.cert-detail { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #35546c; }
.cert-img {
  display: block; width: 100%; height: auto; margin-top: 18px;
  border: 1px solid #d6dee6; border-radius: 3px;
  box-shadow: 0 1px 6px rgba(20,50,80,.12);
}
.cert-none {
  margin-top: 18px; padding: 34px 20px; text-align: center;
  border: 1px dashed #c3d2df; border-radius: 6px; background: #f6f9fc;
  color: #5d7a92; font-size: 13px;
}
.cert-none svg { width: 44px; height: 44px; opacity: .5; margin-bottom: 10px; }
.cert-none-sub { margin-top: 6px; font-size: 11.5px; color: #7b8fa0; }
.cert-none code, .cert-verify code {
  background: #eaf1f8; border: 1px solid #d3e0ec; border-radius: 3px;
  padding: 0 4px; font-family: var(--mono); font-size: 11px;
}
.cert-verify { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e7eef5; }
.cert-verify .cv-label {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: #6b8299;
}
.cert-verify .cv-url {
  margin-top: 4px; font-family: var(--mono); font-size: 11.5px; color: #1d4e75;
  overflow-wrap: anywhere; user-select: all;
}

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  background: #e8f2fb; border: 1px solid #bfd9f0;
  font-size: 11px; color: #1d4e75;
}
.chip.dark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #eaf5ff; }

.hero {
  padding: 24px 26px;
  background: linear-gradient(135deg, var(--accent-deep), #0d2c47 70%);
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,.25);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 12% -20%, rgba(255,255,255,.28), transparent 55%);
  pointer-events: none;
}
.hero h1 { margin: 0; font-size: 27px; font-weight: 300; letter-spacing: -.2px; }
.hero .role { margin-top: 3px; font-size: 14px; color: rgba(255,255,255,.82); }
.hero .tag  { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.72); max-width: 62ch; }
.pip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 11.5px; color: #cdf5dc;
}
.pip i { width: 8px; height: 8px; border-radius: 50%; background: #5ce08a; box-shadow: 0 0 8px #5ce08a; }

.prose { padding: 18px 26px 26px; font-size: 13px; line-height: 1.65; color: #24384a; }
.prose p { margin: 0 0 12px; }
.prose a { color: var(--link); }

.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 0 26px 22px; }
.fact {
  border: 1px solid #d8e3ee; border-radius: 6px; padding: 10px 12px;
  background: linear-gradient(180deg,#fbfdff,#eff5fb);
}
.fact .k { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: #6b8299; }
.fact .v { font-size: 12.5px; color: #1d3a52; margin-top: 3px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 12px; padding: 16px 20px; }
.card {
  border: 1px solid #d3e0ec; border-radius: 7px; overflow: hidden;
  background: #fff; text-align: left; padding: 0;
  box-shadow: 0 1px 3px rgba(20,50,80,.08);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,50,80,.16); border-color: var(--accent); }
.card .ctop { padding: 12px 14px 0; display: flex; gap: 10px; align-items: flex-start; }
.card .ctop svg { width: 32px; height: 32px; flex: 0 0 32px; }
.card .cname { font-size: 14px; font-weight: 600; color: #16384f; }
.card .ckind { font-size: 11px; color: #6e869b; }
.card .cbody { padding: 8px 14px 14px; font-size: 12px; color: #3d566c; line-height: 1.5; }

.linkrow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid #d8e3ee; border-radius: 6px;
  background: linear-gradient(180deg,#fdfeff,#f0f6fc);
  color: #16384f; text-decoration: none; font-size: 13px;
  margin-bottom: 9px;
}
.linkrow:hover { border-color: var(--accent); background: #eaf5ff; }
.linkrow svg { width: 20px; height: 20px; flex: 0 0 20px; }
.linkrow .lr-v { color: #5d7a92; font-size: 12px; }
.linkrow .lr-go { margin-left: auto; color: #7c94a8; }

.field {
  width: 100%; padding: 7px 10px;
  border: 1px solid #8fa9c0; border-radius: 3px; background: #fff;
  color: var(--ink); font-size: 13px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.09);
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
label.lab { display: block; font-size: 11.5px; font-weight: 600; color: #47617a; margin: 12px 0 4px; }

textarea.notepad {
  flex: 1 1 auto; width: 100%; resize: none; border: 0; outline: none;
  padding: 10px 12px; background: #fff; color: #111;
  font-family: var(--mono); font-size: 13px; line-height: 1.5;
}

.emptystate { padding: 40px 20px; text-align: center; color: #7b8fa0; font-size: 12.5px; }
.emptystate svg { width: 54px; height: 54px; opacity: .55; margin-bottom: 10px; }

/* settings rows */
.setrow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid #e7eef5;
}
.setrow .sk { flex: 0 0 148px; font-size: 12.5px; font-weight: 600; color: #2b475f; }
.setrow .sv { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatchrow { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 58px; height: 38px; border-radius: 5px; border: 2px solid #b9cbdb;
  background-size: cover; background-position: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.swatch.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.wallgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px; width: 100%;
}
.wallpick {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  background: none; border: 0; padding: 0; text-align: center;
}
.wallpick .wp-img {
  display: block; height: 52px; border-radius: 4px;
  border: 2px solid #b9cbdb;
  background-position: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.wallpick .wp-lbl { font-size: 10.5px; color: #5d7a92; }
.wallpick:hover .wp-img { border-color: #7fb0d8; }
.wallpick.on .wp-img { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.wallpick.on .wp-lbl { color: #1d3a52; font-weight: 600; }

select.field { padding: 6px 8px; }
.dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.dot.on { outline: 2px solid #2b475f; outline-offset: 2px; }

/* ==========================================================================
   Taskbar
   ========================================================================== */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--taskbar-h);
  z-index: 60;
  display: flex; align-items: center; gap: 5px;
  padding: 0 0 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background:
    linear-gradient(180deg,
      rgba(70,110,150,.52) 0%,
      rgba(16,34,54,.80) 12%,
      rgba(6,16,28,.88) 52%,
      rgba(12,28,46,.92) 100%);
  border-top: 1px solid rgba(180,220,255,.55);
  box-shadow: 0 -2px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

#orb {
  position: relative; flex: 0 0 auto;
  width: 50px; height: 50px; margin: -12px 4px 0 0;
  border: 0; background: none; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
}
#orb .ball {
  width: 46px; height: 46px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.95), rgba(255,255,255,.12) 38%, transparent 55%),
    radial-gradient(circle at 50% 118%, rgba(150,225,255,.9), transparent 58%),
    linear-gradient(170deg, #4aa3e0 0%, #1f6bab 46%, #0d3f6e 78%, #082a4c 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 0 0 3px rgba(10,30,50,.55),
    0 4px 14px rgba(0,0,0,.55),
    inset 0 -6px 14px rgba(0,0,0,.45);
  display: grid; place-items: center;
  transition: filter .15s ease, box-shadow .15s ease;
}
#orb .ball svg { width: 24px; height: 24px; }
#orb:hover .ball { filter: brightness(1.22); box-shadow: 0 0 0 1px #fff, 0 0 0 4px var(--accent-glow), 0 6px 18px rgba(0,0,0,.6), inset 0 -6px 14px rgba(0,0,0,.4); }
#orb.on .ball  { filter: brightness(1.32); box-shadow: 0 0 0 1px #fff, 0 0 0 5px var(--accent-glow), 0 6px 20px rgba(0,0,0,.6), inset 0 6px 14px rgba(0,0,0,.45); }

#quicklaunch { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; padding-right: 5px; }
#quicklaunch button {
  width: 26px; height: 26px; border: 1px solid transparent; border-radius: 4px;
  background: none; display: grid; place-items: center;
}
#quicklaunch button svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
#quicklaunch button:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }
.tb-div { width: 1px; height: 24px; background: rgba(255,255,255,.22); box-shadow: 1px 0 0 rgba(0,0,0,.35); flex: 0 0 1px; }

#tasks {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px; overflow: hidden;
}
.tbtn {
  flex: 0 1 165px; min-width: 42px; height: 28px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 9px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 48%, rgba(0,0,0,.10) 50%, rgba(255,255,255,.10));
  color: #eaf4ff; font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  white-space: nowrap; overflow: hidden;
}
.tbtn svg { width: 15px; height: 15px; flex: 0 0 15px; }
.tbtn span { overflow: hidden; text-overflow: ellipsis; }
.tbtn:hover { background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 48%, rgba(0,0,0,.06) 50%, rgba(255,255,255,.18)); }
.tbtn.on {
  border-color: rgba(190,225,255,.6);
  background: linear-gradient(180deg, rgba(150,210,255,.45), rgba(90,160,220,.22) 48%, rgba(30,80,130,.30) 50%, rgba(120,190,245,.30));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 12px rgba(120,200,255,.28);
}

#tray {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 0 8px 0 10px;
  height: 100%;
  border-left: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.4);
}
#tray .tray-ic { width: 16px; height: 16px; opacity: .85; background: none; border: 0; padding: 0; display: grid; place-items: center; }
#tray .tray-ic svg { width: 15px; height: 15px; }
#tray .tray-ic:hover { opacity: 1; }
#clock {
  text-align: center; line-height: 1.15; padding: 2px 6px; border-radius: 3px;
  background: none; border: 1px solid transparent; color: #eef6ff;
}
#clock:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
#clock .t { display: block; font-size: 12.5px; }
#clock .d { display: block; font-size: 10.5px; color: rgba(255,255,255,.72); }

#showdesktop {
  flex: 0 0 auto; width: 12px; height: 100%;
  border: 0; border-left: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
  box-shadow: inset 1px 0 0 rgba(0,0,0,.35);
}
#showdesktop:hover { background: rgba(255,255,255,.26); }

/* ==========================================================================
   Start menu
   ========================================================================== */
#startmenu {
  position: absolute; left: 4px; bottom: calc(var(--taskbar-h) + 4px);
  z-index: 70;
  width: 508px; max-width: calc(100vw - 8px);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(12,30,50,.88), rgba(6,18,32,.94));
  border: 1px solid rgba(180,220,255,.45);
  box-shadow: 0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  overflow: hidden;
  transform-origin: 40px 100%;
  animation: smIn .14s ease both;
}
@keyframes smIn { from { opacity: 0; transform: scale(.96) translateY(6px);} to { opacity:1; transform:none;} }
.sm-head {
  display: flex; justify-content: flex-end; padding: 10px 12px 6px;
}
.sm-head .who { display: flex; align-items: center; gap: 10px; }
.sm-head .who .nm { font-size: 13px; color: #dff0ff; }
.sm-head .pic {
  width: 44px; height: 44px; border-radius: 7px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #6fa8d8, #2b5f92 60%, #163a5c);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 3px 10px rgba(0,0,0,.5);
  font-size: 17px; font-weight: 300; color: #fff;
}
.sm-cols { display: flex; gap: 0; padding: 0 12px 12px; }
.sm-left {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 6px;
  display: flex; flex-direction: column;
}
.sm-list { max-height: min(56vh, 400px); overflow: auto; }
.sm-group {
  padding: 8px 8px 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.sm-none { padding: 14px; color: rgba(255,255,255,.5); font-size: 12px; }
.sm-arrow { margin-left: auto; color: rgba(255,255,255,.5); font-size: 15px; }
.sm-item.sm-all .sm-t { font-weight: 600; }
.sm-list::-webkit-scrollbar { width: 9px; }
.sm-list::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border: 0; }
.sm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border: 0; border-radius: 5px; box-shadow: none; }
.sm-right {
  flex: 0 0 172px; padding: 6px 4px 6px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.sm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 8px; border-radius: 4px;
  background: none; border: 1px solid transparent;
  color: #e6f2ff; font-size: 12.5px; text-align: left;
}
.sm-item svg { width: 22px; height: 22px; flex: 0 0 22px; }
.sm-item .sm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-item .sm-d { display: block; font-size: 10.5px; color: rgba(255,255,255,.5); }
.sm-item:hover, .sm-item:focus-visible {
  background: linear-gradient(180deg, rgba(140,200,255,.30), rgba(60,130,200,.22));
  border-color: rgba(180,220,255,.45);
  outline: none;
}
.sm-right .sm-item { font-size: 12.5px; padding: 5px 8px; }
.sm-right .sm-item svg { width: 16px; height: 16px; flex: 0 0 16px; }
.sm-divider { height: 1px; background: rgba(255,255,255,.14); margin: 6px 4px; }
.sm-search { padding: 6px 4px 2px; }
.sm-search input {
  width: 100%; height: 28px; padding: 0 10px;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.35); color: #fff; font-size: 12.5px;
}
.sm-search input::placeholder { color: rgba(255,255,255,.45); }
.sm-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.sm-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sm-foot .grow { flex: 1 1 auto; }
.pwr {
  width: 30px; height: 30px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
  display: grid; place-items: center; color: #dff0ff;
}
.pwr svg { width: 15px; height: 15px; }
.pwr:hover { background: linear-gradient(180deg, rgba(160,215,255,.4), rgba(60,130,200,.2)); border-color: var(--accent); }

/* ==========================================================================
   Context menu / balloon / overlays
   ========================================================================== */
#ctxmenu {
  position: absolute; z-index: 80; min-width: 186px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(244,248,252,.97);
  border: 1px solid #9fb6c9;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#ctxmenu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 10px; border: 0; border-radius: 3px;
  background: none; color: #16384f; font-size: 12.5px; text-align: left;
}
#ctxmenu button svg { width: 15px; height: 15px; flex: 0 0 15px; }
#ctxmenu button:hover { background: linear-gradient(180deg,#bcdcf6,#8fc4ec); }
#ctxmenu hr { border: 0; border-top: 1px solid #ccd9e4; margin: 4px 2px; }

#balloon {
  position: absolute; right: 12px; bottom: calc(var(--taskbar-h) + 12px);
  z-index: 75; width: 280px;
  padding: 12px 14px 13px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fefefe, #eef4fa);
  border: 1px solid #9fb6c9;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  color: #16384f;
  animation: balloonIn .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes balloonIn { from { opacity: 0; transform: translateY(12px) scale(.96);} to {opacity:1; transform:none;} }
#balloon::after {
  content: ""; position: absolute; right: 24px; bottom: -9px;
  border: 9px solid transparent; border-top-color: #eef4fa;
  filter: drop-shadow(0 1px 0 #9fb6c9);
}
#balloon h5 { margin: 0 0 4px; font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
#balloon h5 svg { width: 16px; height: 16px; }
#balloon.clickable { cursor: pointer; border-color: var(--accent); }
#balloon.clickable:hover { background: linear-gradient(180deg, #ffffff, #e8f3fd); }
#balloon p { margin: 0; font-size: 12px; line-height: 1.45; color: #3c5870; }
#balloon .x {
  position: absolute; top: 6px; right: 7px; width: 18px; height: 18px;
  border: 0; background: none; color: #6f8699; font-size: 14px; line-height: 1;
  border-radius: 3px;
}
#balloon .x:hover { background: #d9e6f2; }

#shutdown {
  position: absolute; inset: 0; z-index: 950;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: #000; color: #dfefff;
  animation: sdIn .5s ease both;
}
@keyframes sdIn { from { opacity: 0; } to { opacity: 1; } }
#shutdown .sd-text { font-size: 22px; font-weight: 300; letter-spacing: .3px; }
#shutdown .sd-sub  { font-size: 12.5px; color: rgba(255,255,255,.45); }

/* ==========================================================================
   Scrollbars — chunky, period-appropriate
   ========================================================================== */
.content, .navpane, .win-body, .prose, .scroll { scrollbar-width: thin; scrollbar-color: #9cc0dd #e8eef4; }
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: linear-gradient(90deg,#eef3f8,#e2eaf2); border-left: 1px solid #ccd8e3; }
::-webkit-scrollbar-thumb {
  border: 1px solid #8fadc6; border-radius: 3px;
  background: linear-gradient(90deg, #ffffff, #dfeaf5 45%, #c9dcec 50%, #eef5fb);
  box-shadow: inset 0 1px 0 #fff;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg,#ffffff,#d3e8fa 45%,#b4d8f4 50%,#e6f4ff); }
::-webkit-scrollbar-corner { background: #e2eaf2; }

/* ==========================================================================
   App hosting + odds and ends
   ========================================================================== */
.apphost, .appshell {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.win-body, .win-body * { user-select: text; }
#taskbar, #startmenu, #sidebar, #icons, #ctxmenu, .win-title, .toolbar, .addressbar,
.detailsbar, .menubar, .navpane { user-select: none; }

#calflyout {
  position: absolute; right: 8px; bottom: calc(var(--taskbar-h) + 6px);
  z-index: 78; width: 210px; padding: 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(14,34,56,.92), rgba(6,18,32,.95));
  border: 1px solid rgba(180,220,255,.40);
  box-shadow: 0 20px 48px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  animation: smIn .14s ease both;
}
#calflyout .clockhost { display: grid; place-items: center; margin-bottom: 10px; }
#calflyout .clockhost svg { width: 96px; height: 96px; }
#calflyout .g-cal td { font-size: 11px; padding: 2px 0; }

#toast {
  position: absolute; left: 50%; bottom: calc(var(--taskbar-h) + 18px);
  transform: translate(-50%, 14px);
  z-index: 90; max-width: min(460px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 20px;
  background: rgba(10,26,44,.92);
  border: 1px solid rgba(180,220,255,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #eaf5ff; font-size: 12.5px; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

a { color: var(--link); }
.win-body a.btn, .win-body a.linkrow { text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  #sidebar { display: none; }
}
@media (max-width: 680px) {
  :root { --taskbar-h: 48px; }
  #icons { gap: 0; }
  .dicon { width: 76px; font-size: 11.5px; }
  .dicon .glyph, .dicon .glyph svg { width: 36px; height: 36px; }
  #quicklaunch, .tb-div { display: none; }
  #tray .tray-ic { display: none; }
  .tbtn { flex: 1 1 0; }
  .tbtn span { display: none; }
  #startmenu { width: calc(100vw - 8px); }
  .sm-cols { flex-direction: column; }
  .sm-right { flex: 0 0 auto; padding: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .navpane { display: none; }
  .paper { margin: 0; padding: 22px 18px; border: 0; box-shadow: none; }
  .searchbox { flex: 1 1 90px; }
  .hero h1 { font-size: 22px; }
}

/* ==========================================================================
   Reduced motion — keep the sequence, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .boot-bar::after { animation: none !important; left: 1px; right: 1px; width: auto; }
  .spinner { animation: none !important; border-top-color: rgba(255,255,255,.5); }
  .boot-layer { transition: none !important; }
  .card:hover { transform: none; }
}

/* ==========================================================================
   Print — the resume, cleanly
   ========================================================================== */
@media print {
  #taskbar, #sidebar, #icons, #startmenu, #ctxmenu, #balloon,
  .boot-layer, .win-title, .toolbar, .menubar, .addressbar, .detailsbar, .navpane { display: none !important; }
  html, body, #screen, #desktop { overflow: visible !important; height: auto !important; background: #fff !important; }
  #wallpaper { display: none !important; }
  .win {
    position: static !important; inset: auto !important;
    width: auto !important; height: auto !important;
    box-shadow: none !important; border: 0 !important; background: #fff !important;
    backdrop-filter: none !important; animation: none !important;
  }
  .win:not(.printing) { display: none !important; }
  .win-body { margin: 0 !important; border: 0 !important; overflow: visible !important; }
  .content { overflow: visible !important; }
  .paper { box-shadow: none; border: 0; margin: 0; padding: 0; max-width: none; }
}

/* ==========================================================================
   Personal windows — Photos, Games, Media Center, System, Guestbook

   Everything below is prefixed `pv-`. The short names in this file (.tile,
   .chip, .card) are already spoken for, and an unprefixed class here would
   inherit them by accident. Keep the prefix.
   ========================================================================== */

/* ---------- shared bits ---------- */
.pv-sect {
  padding: 12px 14px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: #5d7a92;
}
.pv-note {
  padding: 10px 16px 18px;
  font-size: 12px; color: #6e869b; line-height: 1.5; max-width: 62ch;
}
.pv-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 14px 0;
}
.pv-back {
  color: var(--link); font-size: 12px; text-decoration: none; cursor: pointer;
}
.pv-back:hover { text-decoration: underline; }
.pv-count { font-size: 11.5px; color: #6e869b; }

/* the drawn stand-in for a photograph that has not arrived yet */
.pv-ph { position: relative; display: block; width: 100%; height: 100%; }
.pv-ph svg { display: block; width: 100%; height: 100%; }
.pv-phtag {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 10px;
  background: rgba(6, 14, 22, .68);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 10px; letter-spacing: .4px; color: #dceaf5; white-space: nowrap;
}

/* ---------- Photos ---------- */
.pv-albums { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 14px 6px; }
.pv-album {
  width: 220px; padding: 0 0 10px;
  display: flex; flex-direction: column; align-items: stretch;
  border: 1px solid #cfdce7; border-radius: 6px; overflow: hidden;
  background: #fff; text-align: left; color: var(--ink);
  box-shadow: 0 2px 5px rgba(20,50,80,.10);
  position: relative;
}
.pv-album:hover { border-color: #7db4e2; box-shadow: 0 5px 14px rgba(20,60,100,.20); }
.pv-albart { display: block; height: 124px; overflow: hidden; background: #22303c; }
.pv-albart svg { display: block; width: 100%; height: 100%; }
.pv-albicon {
  position: absolute; top: 96px; left: 12px;
  width: 40px; height: 40px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.pv-albicon svg { width: 100%; height: 100%; }
.pv-albname { padding: 14px 12px 0; font-size: 14px; font-weight: 600; }
.pv-albcount { padding: 1px 12px 0; font-size: 11px; color: #6e869b; }

.pv-thumbs { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 14px 8px; }
.pv-thumb {
  width: 236px; padding: 0 0 8px;
  border: 1px solid #cfdce7; border-radius: 6px; overflow: hidden;
  background: #fff; text-align: left; color: var(--ink);
  box-shadow: 0 2px 5px rgba(20,50,80,.10);
  display: flex; flex-direction: column;
}
.pv-thumb:hover { border-color: #7db4e2; box-shadow: 0 5px 14px rgba(20,60,100,.20); }
.pv-thumbart { display: block; height: 148px; overflow: hidden; background: #22303c; }
.pv-thumbart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-cap { padding: 9px 11px 0; font-size: 12.5px; }

.pv-viewer {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 10px 14px 0;
}
.pv-arrow {
  flex: 0 0 auto;
  width: 30px; height: 46px; border-radius: 5px;
  border: 1px solid #a8bccd; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff, #dfeaf4);
}
.pv-arrow:hover:not(:disabled) { border-color: #5f92c2; background: linear-gradient(180deg,#fdfeff,#d4e7f8); }
.pv-arrow:disabled { opacity: .4; cursor: default; }
.pv-arrow svg { width: 16px; height: 16px; }
/* height first, width derived — so a short window shrinks the picture
   rather than pushing the caption off the bottom of the pane */
.pv-frame {
  flex: 0 1 auto; min-width: 0;
  height: min(44vh, 300px); aspect-ratio: 4 / 3; max-width: 100%;
  border: 1px solid #b8c8d6; border-radius: 4px; overflow: hidden;
  background: #16222c;
  box-shadow: inset 0 0 0 4px #fff, 0 3px 10px rgba(20,50,80,.22);
}
.pv-frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: #16222c; }
.pv-shotmeta { padding: 12px 16px 20px; }
.pv-shotcap  { font-size: 15px; font-weight: 600; color: var(--ink); }
.pv-shotnote { font-size: 12.5px; color: #6e869b; margin-top: 3px; }

/* ---------- Games ---------- */
.pv-tot { color: #5d7a92; }
.pv-tot b { color: #15507d; font-size: 13px; font-variant-numeric: tabular-nums; }
.pv-sortwrap { display: inline-flex; align-items: center; gap: 6px; color: #5d7a92; }
.pv-sort {
  height: 23px; padding: 0 6px; border-radius: 3px;
  border: 1px solid #8fa9c0; background: #fff; color: var(--ink); font-size: 12px;
}

/* the favourites shelf */
.pv-shelf {
  display: grid; gap: 16px; padding: 4px 16px 8px;
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
}
.pv-game {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  padding: 0 0 4px; border: 0; background: none; text-align: left; color: var(--ink);
}
.pv-plate {
  display: block; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden;
  box-shadow: 0 5px 12px rgba(16,40,64,.34);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pv-plate svg, .pv-plate .pv-cvimg { display: block; width: 100%; height: 100%; }
.pv-game:hover .pv-plate { transform: translateY(-4px); box-shadow: 0 11px 22px rgba(16,40,64,.42); }
.pv-game.on .pv-plate { box-shadow: 0 0 0 3px var(--accent), 0 11px 22px rgba(16,40,64,.42); }
.pv-gmeta { display: flex; align-items: baseline; gap: 7px; padding-top: 8px; }
.pv-gmeta b { font-size: 14px; color: #15507d; font-variant-numeric: tabular-nums; }
.pv-gmeta b.pv-nohrs { font-size: 12px; font-weight: 400; color: #8ba0b2; }
.pv-star {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 8px;
  background: linear-gradient(180deg, #ffe9a8, #f0c45a);
  border: 1px solid #d9a63a; color: #5a3f06;
}
.pv-gtag { font-size: 11.5px; color: #6e869b; line-height: 1.35; }

/* the full library */
/* the rows below respond to this box, not the viewport — the window
   they sit in gets resized far more often than the browser does */
.pv-lib { padding: 0 16px 6px; container-type: inline-size; }
.pv-libhead, .pv-row {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 42px minmax(150px, 2.1fr) 96px 92px minmax(120px, 1fr) 140px;
}
.pv-libhead {
  padding: 4px 8px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: #8ba0b2; border-bottom: 1px solid #dde7ef;
}
.pv-row {
  width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px;
  background: none; text-align: left; color: var(--ink);
  border-bottom: 1px solid #eef3f7;
}
.pv-row:hover { background: #eaf4fc; border-color: #b6d8f2; }
.pv-row.on { background: #cfe6fa; border-color: #7db4e2; }
.pv-th {
  width: 42px; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden;
  box-shadow: 0 2px 5px rgba(16,40,64,.3);
}
.pv-th svg, .pv-th .pv-cvimg { display: block; width: 100%; height: 100%; }
.pv-rt { min-width: 0; }
.pv-rn { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.pv-rtag { display: block; font-size: 11px; color: #6e869b; line-height: 1.3; }
.pv-rp { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-chip {
  font-size: 10px; padding: 1px 6px; border-radius: 9px;
  background: #e7eff6; border: 1px solid #cfdce7; color: #4a6a80;
  white-space: nowrap;
}
.pv-rl { font-size: 11.5px; color: #6e869b; white-space: nowrap; }
.pv-rh { display: flex; align-items: center; gap: 8px; }
.pv-hbar {
  flex: 1 1 auto; min-width: 30px; height: 8px; border-radius: 4px;
  background: #e7eef4; border: 1px solid #d3dfe9; overflow: hidden;
}
.pv-hbar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}
.pv-hn {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: #15507d;
}
.pv-hn sup { font-size: 9px; color: #6e869b; }
.pv-ra { min-width: 0; }
.pv-ach { display: flex; align-items: center; gap: 7px; }
.pv-achbar {
  flex: 1 1 auto; min-width: 26px; height: 6px; border-radius: 3px;
  background: #e7eef4; border: 1px solid #d3dfe9; overflow: hidden;
}
.pv-achbar i { display: block; height: 100%; background: linear-gradient(90deg, #6aa84f, #9bd07a); }
.pv-ach.done .pv-achbar i { background: linear-gradient(90deg, #d9a63a, #ffe08a); }
.pv-achn { flex: 0 0 auto; font-size: 11px; color: #5d7a92; font-variant-numeric: tabular-nums; }
.pv-ach.done .pv-achn { color: #8a6410; font-weight: 700; }
.pv-achnone { font-size: 11px; color: #a8bccd; }

/* narrow window: drop the columns that are nice rather than necessary */
@container (max-width: 780px) {
  .pv-libhead, .pv-row { grid-template-columns: 42px minmax(120px, 2fr) 84px minmax(100px, 1fr); }
  .pv-libhead span:nth-child(4), .pv-row .pv-rl { display: none; }
  .pv-libhead span:nth-child(6), .pv-row .pv-ra { display: none; }
}

/* ---------- Media Center ---------- */
.pv-mc {
  height: 100%; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 18% -10%, rgba(120,200,235,.22), transparent 60%),
    linear-gradient(160deg, #0d3446, #0a1f2c 55%, #071722);
  color: #dfeef6;
}
.pv-mchead { padding: 22px 26px 6px; flex: 0 0 auto; }
.pv-mctitle {
  font-size: 30px; font-weight: 300; letter-spacing: .5px;
  color: #eaf7ff; text-shadow: 0 0 22px rgba(140,215,255,.55);
}
.pv-mcsub { font-size: 13px; color: #9dc0d2; margin-top: 2px; }
.pv-mcbody { flex: 1 1 auto; overflow: auto; padding: 8px 0 6px; }
.pv-mcshelf { padding: 10px 0 4px; }
.pv-mcshelfname {
  padding: 0 26px 8px;
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #7fb3cc;
}
.pv-mcrow {
  display: flex; gap: 16px; padding: 4px 26px 12px;
  overflow-x: auto; scrollbar-width: thin;
}
.pv-mccard {
  flex: 0 0 auto; width: 118px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  background: none; border: 0; padding: 0; text-align: left; color: inherit;
}
.pv-mcart {
  display: block; height: 152px; border-radius: 5px; overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.45);
  transition: transform .14s ease, box-shadow .14s ease;
}
.pv-mcart svg { display: block; width: 100%; height: 100%; }
.pv-mccard:hover .pv-mcart,
.pv-mccard:focus-visible .pv-mcart { transform: scale(1.06); }
.pv-mccard.on .pv-mcart {
  box-shadow: 0 0 0 2px #9ad9f5, 0 0 22px rgba(120,205,245,.6), 0 5px 14px rgba(0,0,0,.45);
}
.pv-mcname { display: block; padding-top: 8px; font-size: 12px; line-height: 1.3; color: #cfe6f2; }
.pv-mcfoot {
  flex: 0 0 auto; padding: 12px 26px 18px;
  border-top: 1px solid rgba(160,215,240,.18);
  background: rgba(4, 18, 26, .45);
}
.pv-mcnote  { font-size: 11.5px; color: #7fa5b8; }
.pv-mcblurb { font-size: 13px; color: #d7edf7; margin-top: 4px; min-height: 2.6em; line-height: 1.35; }

/* ---------- System Properties ---------- */
.pv-sys { padding: 0 0 20px; color: var(--ink); }
.pv-syshead {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px 14px;
  background: linear-gradient(180deg, #f4f9fd, #e6f0f8);
  border-bottom: 1px solid #cfdce7;
}
.pv-sysglyph { flex: 0 0 auto; width: 52px; height: 52px; }
.pv-sysglyph svg { width: 100%; height: 100%; }
.pv-syshead h2 { margin: 0; font-size: 17px; font-weight: 600; color: #15507d; }
.pv-sysname { font-size: 12px; color: #5d7a92; margin-top: 2px; }
.pv-sysblurb {
  padding: 14px 24px 4px; max-width: 74ch;
  font-size: 13px; line-height: 1.55; color: #33536c;
}

.pv-syssum { padding: 12px 24px 4px; display: grid; gap: 4px; }
.pv-sumrow {
  display: grid; grid-template-columns: 116px 1fr; gap: 10px;
  padding: 5px 0; border-bottom: 1px dotted #d7e2eb;
}
.pv-sumlabel { font-size: 12px; color: #5d7a92; }
.pv-sumvalue { font-size: 13px; font-weight: 600; }

.pv-wei {
  margin: 18px 24px 6px; padding: 14px 16px;
  border: 1px solid #cfdce7; border-radius: 6px;
  background: linear-gradient(180deg, #fbfdff, #eff6fb);
}
.pv-weihead { display: flex; align-items: center; gap: 14px; }
.pv-weiscore {
  flex: 0 0 auto; width: 74px; padding: 6px 0;
  text-align: center; border-radius: 5px;
  border: 1px solid #9dc4e2;
  background: linear-gradient(180deg, #ffffff, #dcecf8);
}
.pv-weiscore b { display: block; font-size: 26px; line-height: 1; color: #15507d; }
.pv-weiscore span { display: block; font-size: 9.5px; letter-spacing: .4px; color: #5d7a92; margin-top: 3px; }
.pv-weititle { font-size: 14px; font-weight: 600; color: #15507d; }
.pv-weisub { font-size: 11.5px; color: #6e869b; }
.pv-weitable { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; }
.pv-weitable th {
  text-align: left; padding: 5px 8px; color: #5d7a92; font-weight: 600;
  border-bottom: 1px solid #cfdce7; font-size: 11px;
  letter-spacing: .5px; text-transform: uppercase;
}
.pv-weitable td { padding: 5px 8px; border-bottom: 1px solid #e7eef4; color: #2b475d; }
.pv-weitable td.n, .pv-weitable th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pv-weitable tr.low td { font-weight: 700; color: #15507d; background: #eaf4fc; }
.pv-weinote { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: #6e869b; }

.pv-specgroup { margin: 16px 24px 0; }
.pv-spechead {
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: #5d7a92; padding-bottom: 5px;
  border-bottom: 1px solid #cfdce7;
}
.pv-spec { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pv-spec th {
  width: 116px; text-align: left; font-weight: 400; color: #6e869b;
  padding: 5px 10px 5px 0; vertical-align: top;
}
.pv-spec td { padding: 5px 0; color: #22404f; }
.pv-spec tr + tr th, .pv-spec tr + tr td { border-top: 1px solid #eef3f7; }

.pv-sysfoot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 22px 24px 0; padding-top: 14px; border-top: 1px solid #cfdce7;
}
.pv-sysfootnote { font-size: 11.5px; color: #6e869b; }
.pv-sysfootnote code {
  font-family: var(--mono); font-size: 11px;
  background: #eef4f9; padding: 1px 5px; border-radius: 3px; border: 1px solid #d7e2eb;
}

/* ---------- Guestbook ---------- */
.pv-gb { padding: 0 0 18px; color: var(--ink); }
.pv-gbhead {
  padding: 18px 22px 14px;
  background: linear-gradient(180deg, #f4f9fd, #e6f0f8);
  border-bottom: 1px solid #cfdce7;
}
.pv-gbhead h2 { margin: 0; font-size: 17px; font-weight: 600; color: #15507d; }
.pv-gbsub { font-size: 12.5px; color: #5d7a92; margin-top: 2px; }

.pv-gbform { display: grid; gap: 9px; padding: 16px 22px 6px; }
.pv-gbform label { display: grid; gap: 4px; font-size: 12px; color: #5d7a92; }
.pv-gbform .field { width: 100%; }
.pv-gbform textarea { resize: vertical; min-height: 62px; font-family: inherit; }
.pv-gbactions { display: flex; align-items: center; gap: 10px; }
.pv-gbcount { font-size: 11.5px; color: #8ba0b2; font-variant-numeric: tabular-nums; }

.pv-gbentries { padding: 4px 22px 0; }
.pv-gbentry {
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid #dde7ef; border-left: 3px solid var(--accent);
  border-radius: 4px; background: #f8fbfd;
}
.pv-gbmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #6e869b; }
.pv-gbmeta b { color: #15507d; font-size: 12.5px; }
.pv-gbtext { font-size: 13px; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }

.pv-gbfoot {
  margin: 14px 22px 0; padding-top: 14px;
  border-top: 1px solid #cfdce7; text-align: center;
}
.pv-hits { display: inline-flex; align-items: center; gap: 9px; }
.pv-hitlabel { font-size: 11.5px; color: #6e869b; }
.pv-odo { display: inline-flex; gap: 2px; }
.pv-digit {
  display: grid; place-items: center;
  width: 17px; height: 24px; border-radius: 2px;
  background: linear-gradient(180deg, #2b3a46, #111a22 48%, #1c2933 52%, #0b1118);
  border: 1px solid #000;
  color: #8fe6a8; font-family: var(--mono); font-size: 14px;
  text-shadow: 0 0 6px rgba(120,235,160,.7);
}
.pv-gbtruth { font-size: 11px; color: #8ba0b2; margin-top: 9px; line-height: 1.5; }

/* ---------- bowling gadget (sidebar) ---------- */
.pv-bwrow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: #cfe3f2; padding: 1px 0;
}
.pv-bwrow b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
/* a real rack, pointing away from you: 1 pin, then 2, 3, 4 */
.pv-pins {
  display: flex; flex-direction: column-reverse; align-items: center;
  gap: 3px; padding: 8px 6px 4px;
}
.pv-pinrow { display: flex; gap: 4px; justify-content: center; }
.pv-pins i {
  width: 7px; height: 13px; border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #fff, #cbd9e6);
  box-shadow: inset 0 -3px 0 rgba(200,60,60,.55);
}
.pv-bwnote { font-size: 10px; color: #9dbdd4; text-align: center; padding-top: 4px; }