/* ===========================================================
   Jason Mackey: "Windows 12" speculative theme
   Glass / Fluent / Futuristic. Vanilla CSS.
   =========================================================== */

:root{
  --accent:#3b82f6;
  --accent-2:#1d4ed8;
  --accent-soft:rgba(59,130,246,.13);
  --accent-soft-2:rgba(59,130,246,.22);
  --accent-stroke:rgba(59,130,246,.38);

  --ink:#0f172a;
  --ink-2:#1e293b;
  --ink-3:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;

  --glass-light:rgba(247,249,253,.82);
  --glass-light-2:rgba(255,255,255,.62);
  --glass-stroke:rgba(255,255,255,.42);
  --glass-stroke-2:rgba(15,23,42,.08);

  --glass-dark:rgba(20,22,32,.66);
  --glass-dark-stroke:rgba(255,255,255,.10);

  --line:rgba(15,23,42,.07);
  --line-2:rgba(15,23,42,.12);

  --radius-lg:14px;
  --radius-md:10px;
  --radius-sm:8px;
  --radius-xs:6px;

  --shadow-window: 0 28px 60px -20px rgba(0,0,0,.55), 0 12px 30px -15px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.07);
  --shadow-floating: 0 18px 40px -16px rgba(0,0,0,.55), 0 6px 16px -8px rgba(0,0,0,.4);
  --shadow-popover: 0 14px 36px -16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);

  --taskbar-h:72px;       /* total reserved space below desktop */
  --dock-h:72px;          /* the actual floating dock height (1.2x) */
  --dock-gap:14px;        /* gap between dock and bottom edge */
}

*{ box-sizing:border-box; }

html,body{
  margin:0; height:100%; overflow:hidden;
  font-family:"Inter","Segoe UI Variable","Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size:13px; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:#0a0e1a;
}
button{ font-family:inherit; }

/* icon injection */
[data-icon]{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
[data-icon] svg{ width:100%; height:100%; display:block; }
[data-icon] img{ width:100%; height:100%; display:block; object-fit:contain; }
.side-ico, .tile-ico, .crow-ico, .detail-ico, .np-ico{ display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.side-ico>svg,.side-ico>img,.tile-ico>svg,.tile-ico>img,.crow-ico>svg,.crow-ico>img,.detail-ico>svg,.detail-ico>img,.np-ico>svg{ width:100%; height:100%; display:block; }
.side-ico>img,.tile-ico>img,.crow-ico>img,.detail-ico>img{ object-fit:cover; }

/* Smooth hover/press transitions across interactive chrome */
.desk-icon, .task-win, .ql-btn, .tile, .side-row, .crow, .sm-app, .sm-link, .menu-item, .nav-pill, .nav-round, .nav-up, .tool-round, .wc, .start-btn{
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

/* ===========================================================
   DESKTOP + WALLPAPER (mesh-gradient default)
   =========================================================== */
#desktop{ position:absolute; inset:0; overflow:hidden; }
.sky{
  position:absolute; inset:0; z-index:0;
  /* Default wallpaper = Defender 3, matching WP_DEFAULT in script.js.
     Set in CSS (not just JS) so the very first paint shows the default
     -- no flash before script.js applies the stored/default wallpaper. */
  background:#0d2645 url("assets/defender-3.jpg") center center / cover no-repeat;
}
.clouds{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,0) 50%),
    radial-gradient(80% 60% at 50% 100%, rgba(0,0,0,.18), rgba(0,0,0,0) 50%);
}

.desktop-icons{ position:absolute; inset:0; z-index:5; }
.desk-icon{
  position:absolute; width:90px;
  background:transparent; border:1px solid transparent; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 4px; cursor:default; color:#f8fafc; user-select:none;
}
.desk-icon img{ -webkit-user-drag:none; user-drag:none; }
.desk-icon:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); }
.desk-icon:focus-visible{ outline:2px solid rgba(96,165,250,.7); outline-offset:1px; }
.desk-icon .dico{ width:44px; height:44px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.desk-icon .dico img{ border-radius:10px; }
.desk-icon .dlabel{ font-size:12.5px; text-align:center; line-height:1.25; font-weight:500; text-shadow:0 1px 3px rgba(0,0,0,.75); }

/* ===========================================================
   WINDOW (glass)
   =========================================================== */
.window{
  position:absolute; z-index:40;
  left:50%; top:50%; transform:translate(-50%, calc(-50% - 30px));
  width:min(940px, calc(100% - 40px));
  height:min(580px, calc(100% - 96px));
  display:flex; flex-direction:column;
  background:var(--glass-light);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
          backdrop-filter: blur(32px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-window);
  overflow:hidden;
  color:var(--ink);
  transition: opacity .18s ease, scale .18s ease;
}
.window.maximized{ left:0; top:0; transform:none; width:100%; height:100%; border-radius:0; }
.window.hidden{
  opacity:0; scale:.97; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, scale .18s ease, visibility 0s linear .18s;
}
.window.win-inactive{ box-shadow: 0 16px 36px -16px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.05); }
.window.win-inactive .titlebar{ color:var(--muted); }

/* Title bar (integrated, slim) */
.titlebar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:42px; padding:0 6px 0 14px;
  background:transparent;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.tabstrip{ display:flex; align-items:center; gap:10px; min-width:0; }
.tab{
  display:flex; align-items:center; gap:9px;
  background:transparent; box-shadow:none; border-radius:0;
  height:auto; padding:0; color:var(--ink);
  font-weight:600; font-size:13px; text-shadow:none;
}
.tab-ico{ width:18px; height:18px; flex:0 0 auto; }
.tab-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab-close, .tab-new{ display:none; }

/* Window controls (Windows 11 style) */
.winctrls{ display:flex; align-items:center; gap:0; }
.wc{
  width:42px; height:30px; padding:0; border:0; cursor:pointer; border-radius:8px;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-2);
  margin:0 1px;
  box-shadow:none;
}
.wc:hover{ background:rgba(15,23,42,.07); }
.wc:active{ background:rgba(15,23,42,.12); }
.wc-close:hover{ background:#e81123; color:#fff; }
.wc-close:active{ background:#c81017; color:#fff; }

.wc-min-glyph, .wc-max-glyph, .wc-restore-glyph, .wc-close-glyph{
  display:block; width:11px; height:11px; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.wc-min-glyph{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='5.5' width='9' height='1' fill='black'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='5.5' width='9' height='1' fill='black'/%3E%3C/svg%3E");
}
.wc-max-glyph{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='1.5' width='9' height='9' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
}
.wc-restore-glyph{
  display:none;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='3' y='1.5' width='7.5' height='7.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='1.5' y='3' width='7.5' height='7.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='3' y='1.5' width='7.5' height='7.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='1.5' y='3' width='7.5' height='7.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
}
.wc-close-glyph{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10 M10 2 2 10' stroke='black' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2 10 10 M10 2 2 10' stroke='black' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.wc-max.is-max .wc-max-glyph{ display:none; }
.wc-max.is-max .wc-restore-glyph{ display:block; }

/* Menu bar: fully decorative in the old design, hidden in Win12 */
.menubar{ display:none; }
.menu-item{ display:none; }

/* Toolbar (slim, modern: icon-only nav + inline breadcrumb) */
.toolbar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:12px 18px 14px; background:transparent;
  border-top:0; border-bottom:1px solid var(--line);
}
.nav-pill, .nav-round, .nav-up, .tool-round{
  background:transparent; color:var(--ink-2); cursor:pointer;
  border:0; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
}
/* Back button: icon-only (Win11 style) */
.nav-pill{ gap:0; height:34px; width:34px; padding:0; font-weight:600; font-size:0; }
.nav-pill .np-ico{ width:16px; height:16px; }
.nav-pill .np-label{ display:none; }
.nav-round{ width:34px; height:34px; gap:3px; }
.nav-round .np-ico{ width:14px; height:14px; }
.nav-round .np-caret{ display:none; }
.nav-up{ width:34px; height:34px; }
.nav-up .np-ico{ width:16px; height:16px; }
.tool-round{ width:34px; height:34px; }
.tool-round [data-icon]{ width:16px; height:16px; }
.nav-pill:hover, .nav-round:hover, .nav-up:hover, .tool-round:hover{ background:rgba(15,23,42,.06); }
.nav-pill:active, .nav-round:active, .nav-up:active, .tool-round:active{ background:rgba(15,23,42,.1); }
.nav-pill.disabled, .nav-round.disabled, .nav-up.disabled{ opacity:.35; pointer-events:none; }

/* Address bar -> clean inline breadcrumb (no sunken input look, no Go button) */
.address{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:6px;
  height:34px; padding:0 4px;
  background:transparent; color:var(--ink); border:0; box-shadow:none;
}
.addr-home{ display:none; }
.crumbs{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:2px; overflow:hidden; white-space:nowrap; }
.crumb-seg{ padding:5px 10px; border-radius:var(--radius-xs); color:var(--muted); cursor:pointer; font-size:13px; font-weight:500; }
.crumb-seg:hover{ background:rgba(15,23,42,.05); color:var(--ink); }
.crumb-seg.current{ color:var(--ink); font-weight:700; cursor:default; }
.crumb-sep{ color:var(--muted-2); font-size:11px; }
.addr-go{ display:none; }

/* ===========================================================
   BODY: sidebar + content
   =========================================================== */
.ex-body{ flex:1 1 auto; display:flex; min-height:0; }

.sidebar{
  flex:0 0 220px; min-width:0; overflow:auto; padding:14px 10px;
  background:transparent;
  border-right:1px solid var(--line);
  box-shadow:none;
}
.side-row{
  display:flex; align-items:center; gap:11px;
  padding:8px 12px; border-radius:var(--radius-sm); cursor:pointer;
  color:var(--ink-3); font-size:13px; font-weight:500; white-space:nowrap;
  position:relative;
}
.side-row:hover{ background:rgba(15,23,42,.05); color:var(--ink); }
.side-row.active{ background:var(--accent-soft); color:var(--ink); font-weight:600; box-shadow:none; }
.side-row.active::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; background:var(--accent); border-radius:0 3px 3px 0; }
.side-row .side-ico{ width:18px; height:18px; flex:0 0 auto; opacity:.75; }
.side-row.active .side-ico{ opacity:1; }
.side-row .side-chev{ width:12px; height:12px; margin-left:auto; color:var(--muted-2); transition:transform .15s ease; }
.side-row.active .side-chev{ color:var(--muted); }
.side-row.open .side-chev{ transform:rotate(90deg); }
.side-children .side-row{ padding-left:34px; }
.side-children .side-children .side-row{ padding-left:50px; }
.side-divider{ height:1px; background:var(--line); margin:8px 6px; }

.content{
  flex:1 1 auto; min-width:0; overflow:auto; padding:28px 32px 36px;
  background:transparent; margin:0;
  box-shadow:none;
}
.section-head{ display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; margin:0 0 14px; }
.section-head .sh-chev{ display:none; }
.section-head .sh-rule{ flex:1 1 auto; height:1px; background:var(--line); margin-left:6px; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.tiles + .tiles{ margin-top:14px; }
.tile{
  display:flex; align-items:center; gap:14px; padding:16px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:rgba(255,255,255,.55);
  cursor:pointer; text-align:left;
}
.tile:hover{ background:rgba(255,255,255,.92); border-color:var(--accent-stroke); transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(15,23,42,.22); }
.tile:active{ transform:translateY(0); }
.tile.selected{ background:var(--accent-soft-2); border-color:var(--accent-stroke); }
.tile.selected .tile-name{ color:var(--ink); }
.tile-ico{ width:44px; height:44px; flex:0 0 auto; border-radius:var(--radius-sm); color:#94a3b8; transition:color .15s ease; }
.tile:hover .tile-ico{ color:#1e3a8a; }
.side-ico{ color:#94a3b8; transition:color .15s ease; }
.side-row:hover .side-ico, .side-row.active .side-ico{ color:#1e3a8a; }
.detail-ico{ color:#475569; }
.tile-text{ min-width:0; display:flex; flex-direction:column; }
.tile-name{ display:block; font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:3px; letter-spacing:-.1px; }
.tile-sub{ display:block; font-size:12.5px; color:var(--muted); line-height:1.4; }

/* Detail view */
.detail{ max-width:680px; }
.detail-head{ display:flex; align-items:center; gap:16px; margin-bottom:16px; margin-top:2px; }
.detail-ico{ width:54px; height:54px; flex:0 0 auto; border-radius:var(--radius-md); }
.detail h1{ font-size:24px; margin:0; color:var(--ink); font-weight:700; letter-spacing:-.4px; }
.detail-ico.about-photo{ width:96px; height:96px; border-radius:50%; box-shadow:0 0 0 1px var(--line-2), 0 8px 22px -10px rgba(15,23,42,.35); }
.detail.about .detail-head{ margin-bottom:20px; }
.detail .detail-kicker{ font-size:13px; color:var(--muted); margin-top:4px; font-weight:500; }
.detail p.body{ font-size:15px; line-height:1.65; color:var(--ink-3); margin:0 0 18px; }
.detail .positioning{
  margin:0 0 22px; padding:14px 18px;
  border-left:3px solid var(--accent);
  background:rgba(59,130,246,.06);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:15.5px; line-height:1.55; font-style:italic; font-weight:500; color:var(--ink-2);
}
.detail-section{ margin:0 0 22px; }
.detail-section h2{
  font-size:11.5px; font-weight:700; color:var(--muted);
  letter-spacing:.6px; text-transform:uppercase;
  margin:0 0 10px;
}
.detail-section .body{ margin:0; }
.detail-section .section-bullets{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.detail-section .section-bullets li{
  position:relative; padding-left:18px;
  font-size:14.5px; line-height:1.55; color:var(--ink-3);
}
.detail-section .section-bullets li::before{
  content:''; position:absolute; left:2px; top:9px;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.detail-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
a.link-btn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; text-decoration:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-weight:600; font-size:13px; border-radius:var(--radius-sm);
  box-shadow:0 4px 12px rgba(59,130,246,.35);
  border:0;
}
a.link-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 16px rgba(59,130,246,.45); }
a.link-btn:active{ transform:translateY(0); box-shadow:0 3px 8px rgba(59,130,246,.35); }

/* Contact rows */
.clist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; max-width:720px; }
.crow{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.5);
  text-decoration:none; color:var(--ink); cursor:pointer;
}
.crow:hover{ background:rgba(255,255,255,.85); border-color:var(--accent-stroke); transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(15,23,42,.18); }
.crow-ico{ width:34px; height:34px; flex:0 0 auto; border-radius:var(--radius-sm); }
.crow-text{ min-width:0; display:flex; flex-direction:column; }
.crow-name{ display:block; font-weight:700; font-size:13.5px; margin-bottom:2px; }
.crow-sub{ display:block; font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===========================================================
   MEDIA PLAYER
   =========================================================== */
.mp-window{ width:400px; height:520px; }
.mp-display{ flex:1 1 auto; background:#000; padding:0; min-height:0; }
.mp-spotify{ display:block; width:100%; height:100%; border:0; }


/* ===========================================================
   COMPOSE MESSAGE
   =========================================================== */
.cm-window{ width:540px; height:472px; }
.cm-form{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; margin:0; }
.cm-send-row{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:10px 12px; border-bottom:1px solid var(--line); box-shadow:none;
}
.cm-send{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:13px; font-weight:600; color:#fff;
  padding:8px 18px; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  border:0; border-radius:var(--radius-sm);
  box-shadow:0 4px 12px rgba(59,130,246,.35);
}
.cm-send:hover:not([disabled]){ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 14px rgba(59,130,246,.45); }
.cm-send:active:not([disabled]){ transform:translateY(0); box-shadow:0 3px 8px rgba(59,130,246,.35); }
.cm-send[disabled]{ background:#cbd5e1; color:#fff; box-shadow:none; cursor:default; }
.cm-send-ico{ width:16px; height:16px; flex:0 0 auto; color:#fff; }
.cm-headers{ flex:0 0 auto; display:flex; flex-direction:column; gap:8px; padding:12px 14px 6px; }
.cm-hrow{ display:flex; align-items:center; gap:10px; }
.cm-hlabel{ flex:0 0 60px; text-align:right; font-size:12.5px; color:var(--muted); font-weight:500; }
.cm-to{ font-size:13px; font-weight:600; padding:4px 0; color:var(--ink); }
.cm-input{
  flex:1 1 auto; min-width:0; font:inherit; font-size:13px; color:var(--ink);
  height:32px; padding:0 10px;
  background:rgba(255,255,255,.65); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  outline:none; box-shadow:none;
}
.cm-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15); background:rgba(255,255,255,.85); }
.cm-body{
  flex:1 1 auto; min-height:0; margin:6px 14px 14px; resize:none; outline:none;
  font:inherit; font-size:13.5px; line-height:1.5; color:var(--ink);
  padding:11px 13px;
  background:rgba(255,255,255,.65); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  box-shadow:none;
}
.cm-body:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15); background:rgba(255,255,255,.85); }
.cm-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cm-status{
  flex:0 0 auto; min-height:18px; margin:0 14px 12px; padding:0 2px;
  font-size:12.5px; color:var(--muted);
}
.cm-status.cm-pending{ color:var(--ink-3); }
.cm-status.cm-ok{ color:#16a34a; font-weight:600; }
.cm-status.cm-error{ color:#dc2626; font-weight:600; }

button.crow{ width:100%; font:inherit; text-align:left; }

/* ===========================================================
   START PANEL (glass; centered above dock)
   =========================================================== */
.start-menu{
  position:absolute; left:50%; bottom:calc(var(--dock-h) + var(--dock-gap) + 8px);
  transform:translateX(-50%) translateY(10px);
  width:400px; max-width:calc(100vw - 24px);
  z-index:120;
  background:var(--glass-light);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
          backdrop-filter: blur(40px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-lg);
  padding:0;
  box-shadow: var(--shadow-window);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.start-menu.open{ opacity:1; transform:translateX(-50%); visibility:visible; pointer-events:auto; transition: opacity .18s ease, transform .18s ease; }
.sm-header{
  display:flex; align-items:center; gap:14px; padding:18px 20px 14px;
  color:var(--ink); background:transparent;
  border-bottom:1px solid var(--line);
}
.sm-avatar{ width:48px; height:48px; border-radius:50%; overflow:hidden; flex:0 0 auto; object-fit:cover; display:block; box-shadow:0 0 0 1px var(--line-2), 0 4px 12px -4px rgba(15,23,42,.25); }
.sm-name{ font-size:15px; font-weight:700; color:var(--ink); text-shadow:none; }
.sm-body{ display:flex; background:transparent; padding:8px; gap:4px; }
.sm-col{ flex:1 1 0; padding:0; display:flex; flex-direction:column; gap:1px; }
.sm-left, .sm-right{ background:transparent; }
.sm-app, .sm-link{ display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; color:var(--ink-3); font-weight:500; }
.sm-app:hover, .sm-link:hover{ background:rgba(15,23,42,.06); color:var(--ink); }
.sm-app-ico, .sm-link-ico{ width:20px; height:20px; flex:0 0 auto; }
.sm-link.inert, .sm-power.inert{ cursor:default; }
.sm-link.inert:hover, .sm-power.inert:hover{ background:transparent; color:var(--muted); }
.sm-link.inert{ color:var(--muted); }
.sm-sep{ height:1px; background:var(--line); margin:6px 4px; }
.sm-sep.light{ background:var(--line); }
.sm-footer{
  display:flex; justify-content:flex-end; gap:6px; padding:10px 14px;
  background:transparent; border-top:1px solid var(--line);
}
.sm-power{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; padding:6px 10px; border-radius:var(--radius-xs); transition:background-color .12s ease, color .12s ease; }
.sm-power:not(.inert){ cursor:pointer; color:var(--ink-3); }
.sm-power:not(.inert):hover{ background:rgba(15,23,42,.07); color:var(--ink); }
.sm-power:not(.inert):active{ background:rgba(15,23,42,.12); }
.sm-power:not(.inert):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sm-power-ico{ width:18px; height:18px; border-radius:var(--radius-xs); }

/* ===========================================================
   TASKBAR (floating dock)
   =========================================================== */
#taskbar{
  position:absolute; left:50%; bottom:var(--dock-gap); transform:translateX(-50%);
  height:var(--dock-h); z-index:100;
  display:flex; align-items:center; gap:7px; padding:10px 14px;
  background:var(--glass-dark);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border:1px solid var(--glass-dark-stroke);
  border-radius:22px;
  box-shadow: var(--shadow-floating);
  color:#e2e8f0;
  max-width:calc(100vw - 28px);
}
.start-btn{
  width:58px; height:53px; padding:0; margin:0;
  border:0; cursor:pointer; background:transparent; color:#fff;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; box-shadow:none;
  font-weight:600; font-size:0;  /* hide the "Start" text */
  flex:0 0 auto;
}
.start-btn:active, .start-btn.pressed{ background:rgba(96,165,250,.22); }
.start-flag{ width:36px; height:36px; flex:0 0 auto; position:relative; }
.start-flag img{
  width:100%; height:100%; object-fit:contain; display:block;
  position:absolute; inset:0;
  transition: opacity .15s ease;
}
.start-flag .eye-closed{ opacity:0; }
/* Keyboard focus shows the closed eye (accessibility); does not trigger on touch */
.start-btn:focus-visible .start-flag .eye-open{ opacity:0; }
.start-btn:focus-visible .start-flag .eye-closed{ opacity:1; }
/* Hover wink + background tint only on real-pointer (mouse) devices.
   Gating behind hover:hover fixes the mobile "sticky hover" two-tap:
   on touch the first tap used to just flip to the closed-eye hover
   state and swallow the click, so the Start menu needed a second tap.
   Now a single tap opens it. */
@media (hover: hover) {
  .start-btn:hover{ background:rgba(255,255,255,.1); }
  .start-btn:hover .start-flag .eye-open{ opacity:0; }
  .start-btn:hover .start-flag .eye-closed{ opacity:1; }
}
.start-label{ display:none; }

.quick-launch{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.ql-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; border-radius:var(--radius-md); background:transparent; cursor:pointer;
  color:inherit; text-decoration:none;
}
.ql-btn:hover{ background:rgba(255,255,255,.1); }
.ql-btn:active{ background:rgba(255,255,255,.18); }
.ql-ico{ width:22px; height:22px; display:block; }
.ql-sep{ width:1px; height:44px; background:rgba(255,255,255,.14); margin:0 8px; flex:0 0 auto; }
/* Hide the Quick Launch / task-wins divider when no app is open or minimized */
#taskbar:not(:has(.task-wins > button:not([style*="display: none"]))) .ql-sep{ display:none; }

.task-wins{ display:flex; align-items:center; gap:3.6px; flex:0 1 auto; min-width:0; overflow:hidden; }
.task-win{
  display:flex; align-items:center; gap:12px; min-width:0; max-width:240px;
  height:53px; padding:0 17px; border:0; cursor:pointer;
  color:#e2e8f0; font-size:15.6px; font-weight:500; background:transparent;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  border-radius:12px; box-shadow:none; position:relative;
}
.task-win span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.task-win:hover{ background:rgba(255,255,255,.1); }
.task-win.active{ background:rgba(255,255,255,.16); }
.task-win.active::after{ content:''; position:absolute; left:50%; bottom:5px; width:26px; height:2px; transform:translateX(-50%); background:#60a5fa; border-radius:2px; }
.task-win .tw-ico{ width:24px; height:24px; flex:0 0 auto; }

.tray{
  display:flex; align-items:center; gap:14px; height:53px;
  padding:0 14px 0 17px; margin-left:5px;
  color:#cbd5e1;
  border-left:1px solid rgba(255,255,255,.14);
  box-shadow:none;
}
.tray-ico{ width:22px; height:22px; cursor:default; }
.tray-ico svg{ filter:brightness(0) invert(1) opacity(.85); }
.clock{ font-size:15.6px; font-weight:600; cursor:pointer; line-height:1.2; color:#f1f5f9; }

/* clock calendar flyout */
.cal-popup{
  position:fixed; right:14px; bottom:calc(var(--dock-h) + var(--dock-gap) + 10px); z-index:130; width:240px;
  background:var(--glass-light);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
          backdrop-filter: blur(40px) saturate(180%);
  border:1px solid var(--glass-stroke); border-radius:var(--radius-lg); padding:14px;
  box-shadow: var(--shadow-popover);
  color:var(--ink);
  opacity:0; transform:translateY(8px); visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.cal-popup.open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition: opacity .15s ease, transform .15s ease; }
.cal-head{ font-weight:700; text-align:center; margin-bottom:8px; font-size:13.5px; color:var(--ink); }
.cal-grid{ width:100%; border-collapse:collapse; font-size:12px; }
.cal-grid th{ color:var(--muted-2); font-weight:500; padding:4px 0; font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
.cal-grid td{ text-align:center; padding:5px 0; color:var(--ink-3); }
.cal-grid td.today{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:700; border-radius:6px; }
.cal-foot{ margin-top:10px; padding-top:8px; border-top:1px solid var(--line); font-size:11px; text-align:center; color:var(--muted); }

/* ===========================================================
   DISPLAY PROPERTIES
   =========================================================== */
.dlg{ width:460px; height:auto; z-index:60; }
.dp-help{ font-weight:700; font-size:12px; color:var(--muted); width:30px; }
.dp-title{ color:var(--ink); font-weight:700; text-shadow:none; }
.titlebar .tabstrip .tab-ico{ width:16px; height:16px; }

.dp-tabs{ flex:0 0 auto; display:flex; gap:4px; padding:10px 14px 0; background:transparent; border-bottom:1px solid var(--line); }
.dp-tab{
  padding:7px 13px; font-size:12.5px; color:var(--muted); cursor:default; position:relative; top:1px;
  background:transparent; border:0; border-radius:var(--radius-xs) var(--radius-xs) 0 0; font-weight:500;
}
.dp-tab.active{ background:rgba(15,23,42,.04); color:var(--ink); font-weight:600; }
.dp-tab.active::after{ content:''; position:absolute; left:8px; right:8px; bottom:0; height:2px; background:var(--accent); border-radius:2px 2px 0 0; }

.dp-body{ flex:1 1 auto; display:flex; flex-direction:column; padding:18px 20px 12px; background:transparent; }
.dp-monitor{ width:230px; margin:0 auto 14px; }
.dp-screen{
  width:230px; height:135px; background:#3a6ea5 center/cover no-repeat;
  border:6px solid #15161c; border-radius:11px;
  box-shadow:inset 0 0 0 1px #000, 0 6px 18px -6px rgba(0,0,0,.4);
}
.dp-stand{ width:36px; height:14px; margin:-1px auto 0; background:linear-gradient(#3f4452,#23262e); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); }
.dp-base{ width:96px; height:7px; margin:0 auto; background:linear-gradient(#444853,#2a2d36); border-radius:0 0 6px 6px; }

.dp-label{ font-size:12.5px; color:var(--ink-3); margin:4px 0 6px; font-weight:500; }
.dp-row{ display:flex; gap:14px; }
.dp-list{
  flex:1 1 auto; height:148px; overflow:auto; margin:0; padding:4px; list-style:none;
  background:rgba(255,255,255,.65); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  box-shadow:none;
}
.dp-item{ display:flex; align-items:center; gap:10px; padding:5px 8px; cursor:pointer; font-size:13px; white-space:nowrap; border-radius:var(--radius-xs); color:var(--ink-3); }
.dp-item:hover{ background:rgba(15,23,42,.05); color:var(--ink); }
.dp-item.selected{ background:var(--accent); color:#fff; }
.dp-thumb{ width:30px; height:18px; flex:0 0 auto; display:block; border:1px solid var(--line-2); object-fit:cover; background:#3a6ea5; border-radius:3px; }
.dp-controls{ flex:0 0 144px; display:flex; flex-direction:column; gap:10px; }
.dp-field{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
.dp-field-label{ color:var(--ink-3); font-weight:500; }
.dp-select{ font:inherit; font-size:13px; padding:6px 8px; background:rgba(255,255,255,.65); border:1px solid var(--line-2); border-radius:var(--radius-xs); color:var(--ink); outline:none; }
.dp-select:focus{ border-color:var(--accent); }
.dp-btn{
  min-width:84px; padding:7px 14px; background:rgba(15,23,42,.05); color:var(--ink); border:1px solid var(--line-2); cursor:pointer; font-size:12.5px; font-weight:500;
  border-radius:var(--radius-sm); box-shadow:none;
}
.dp-btn:hover:not([disabled]){ background:rgba(15,23,42,.09); }
.dp-btn:active:not([disabled]){ background:rgba(15,23,42,.13); }
.dp-btn[disabled]{ color:var(--muted-2); cursor:default; opacity:.7; }
.dp-customize{ align-self:flex-start; margin-top:14px; }
.dp-footer{ flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px; padding:12px 16px 14px; background:transparent; border-top:1px solid var(--line); }
.dp-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border:0; box-shadow:0 3px 8px rgba(59,130,246,.35); }
.dp-primary:hover:not([disabled]){ filter:brightness(1.08); }

/* desktop context menu */
.ctx-menu{
  position:absolute; z-index:200; min-width:190px;
  background:var(--glass-light);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border:1px solid var(--glass-stroke); border-radius:var(--radius-md); padding:6px;
  box-shadow: var(--shadow-popover);
}
.ctx-item{ padding:7px 14px 7px 12px; font-size:13px; cursor:pointer; white-space:nowrap; border-radius:var(--radius-xs); color:var(--ink-3); }
.ctx-item:hover{ background:rgba(15,23,42,.06); color:var(--ink); }
.ctx-item.disabled{ color:var(--muted-2); }
.ctx-item.disabled:hover{ background:transparent; color:var(--muted-2); }
.ctx-sep{ height:1px; margin:5px 6px; background:var(--line); }

/* ===========================================================
   RESIZE HANDLES (subtle)
   =========================================================== */
.rsz{ position:absolute; width:14px; height:14px; z-index:6; }
.rsz-nw{ left:-3px; top:-3px; cursor:nwse-resize; }
.rsz-ne{ right:-3px; top:-3px; cursor:nesw-resize; }
.rsz-sw{ left:-3px; bottom:-3px; cursor:nesw-resize; }
.rsz-se{ right:0; bottom:0; cursor:nwse-resize; }

.dragging iframe{ pointer-events:none; }
.dragging{ cursor:default; user-select:none; }

/* ===========================================================
   TOAST + BALLOON
   =========================================================== */
.toast-stack{
  position:fixed; right:14px; bottom:calc(var(--dock-h) + var(--dock-gap) + 14px); z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end; pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:11px; width:300px; max-width:calc(100vw - 28px);
  background:var(--glass-light);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  border:1px solid var(--glass-stroke); border-radius:var(--radius-md);
  padding:12px 14px; pointer-events:auto;
  box-shadow: var(--shadow-popover);
  color:var(--ink);
  animation: toast-in .26s cubic-bezier(.18,1,.4,1);
}
.toast.out{ animation: toast-out .25s ease-in forwards; }
.toast-ico{ width:26px; height:26px; flex:0 0 auto; border-radius:var(--radius-xs); }
.toast-body{ min-width:0; flex:1 1 auto; }
.toast-title{ font-weight:700; font-size:13px; color:var(--ink); margin-bottom:2px; }
.toast-msg{ font-size:12.5px; color:var(--muted); line-height:1.4; }
.toast-close{ flex:0 0 auto; width:18px; height:18px; border:0; background:transparent; cursor:pointer; color:var(--muted-2); font-size:14px; line-height:1; border-radius:var(--radius-xs); }
.toast-close:hover{ background:rgba(15,23,42,.06); color:var(--ink); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes toast-out{ to{ opacity:0; transform:translateY(10px); } }

/* ===========================================================
   BLOG POST ALERT (Windows-style modal alert)
   =========================================================== */
.blog-alert{
  position:fixed; inset:0; z-index:9990;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(8,12,22,.34);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:opacity .2s ease;
}
.blog-alert.hidden{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility 0s linear .2s; }
.blog-alert-card{
  width:min(420px, 100%);
  display:flex; flex-direction:column;
  background:var(--glass-light);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
          backdrop-filter: blur(32px) saturate(180%);
  border:1px solid var(--glass-stroke);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-window);
  overflow:hidden; color:var(--ink);
  animation: blogalert-in .24s cubic-bezier(.18,1,.4,1);
}
@keyframes blogalert-in{ from{ opacity:0; transform:translateY(12px) scale(.97); } to{ opacity:1; transform:none; } }
.blog-alert-bar{ cursor:default; }
.blog-alert-body{
  display:flex; align-items:flex-start; gap:14px;
  padding:20px 20px 6px;
}
.blog-alert-ico{ width:34px; height:34px; flex:0 0 auto; margin-top:1px; }
.blog-alert-msg{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
.blog-alert-footer{
  flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px;
  padding:14px 20px 18px;
}
.blog-alert-read{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* Inline "email it to me" form (revealed when the button is clicked) */
.blog-alert-emailform{
  display:flex; align-items:center; gap:8px;
  padding:6px 20px 18px;
}
.blog-alert-emailform.hidden{ display:none; }
.blog-alert-input{
  flex:1 1 auto; min-width:0;
  height:36px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6); color:var(--ink);
  font:inherit; font-size:13.5px;
}
.blog-alert-input:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
.blog-alert-emailform .dp-primary{ flex:0 0 auto; }
/* honeypot: present for bots, invisible + non-interactive for people */
.blog-alert-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }
.blog-alert-status{
  margin:0; padding:0 20px 16px;
  font-size:12.5px; line-height:1.45; color:var(--muted);
}
.blog-alert-status.hidden{ display:none; }
.blog-alert-status.ok{ color:#15803d; }
.blog-alert-status.err{ color:#b91c1c; }

@media (max-width:640px){
  .blog-alert-card{ width:100%; }
  .blog-alert-body{ padding:18px 16px 6px; }
  .blog-alert-footer{ padding:12px 16px 16px; }
  .blog-alert-emailform{ padding:6px 16px 16px; }
  .blog-alert-status{ padding:0 16px 14px; }
}

.balloon{
  position:fixed; z-index:9998; max-width:240px; pointer-events:none;
  background:rgba(28,30,40,.92); color:#f1f5f9; border:0; border-radius:var(--radius-xs);
  padding:6px 10px; font-size:12px; line-height:1.4; font-weight:500;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow:0 8px 18px rgba(0,0,0,.4);
  opacity:0; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease;
}
.balloon.show{ opacity:1; transform:none; }

/* ===========================================================
   RESPONSIVE (≤640px)
   =========================================================== */
@media (max-width:640px){
  .window{ left:0; top:0; transform:none; width:100%; height:100%; border-radius:0; border:0; }
  .window.maximized{ width:100%; height:100%; }
  .menubar{ display:none; }
  .toolbar{ flex-wrap:wrap; gap:6px; padding:8px 10px; }
  .address{ order:3; flex-basis:100%; }
  .tool-round{ display:none; }
  .ex-body{ flex-direction:column; }
  .sidebar{ display:none; }
  .content{ margin:0; padding:16px; }
  .tiles{ grid-template-columns:1fr; }
  .clist{ grid-template-columns:1fr; }
  .mp-window{ left:6px; right:6px; width:auto; }
  .cm-window{ left:8px; right:8px; top:8px; width:auto; height:78vh; }
  .cm-hlabel{ flex-basis:52px; }
  .rsz{ display:none; }
  .task-win{ min-width:0; max-width:110px; padding:0 8px; }
  .quick-launch, .ql-sep{ display:none; }
  /* No quick-launch on mobile means the flex row left-packs the tray
     right next to the Start button. Push it to the right edge so the
     network/volume/clock cluster sits where users expect. */
  .tray{ margin-left:auto; }
  .start-menu{ width:calc(100% - 24px); }
  .desktop-icons{ gap:12px; }
  .dlg{ left:8px; right:8px; width:auto; top:8px; transform:none; }
  .dp-row{ flex-direction:column; }
  .dp-controls{ flex-basis:auto; }
  #taskbar{ left:6px; right:6px; transform:none; max-width:none; width:auto; }
}

/* ===========================================================
   RESOURCES FOLDER (small window with app tiles)
   =========================================================== */
.res-window{ width:380px; height:auto; }
.res-body{ flex:1 1 auto; padding:18px 18px 22px; background:rgba(255,255,255,.4); }
.res-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.res-tile{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:rgba(255,255,255,.55); cursor:pointer;
  font:inherit; color:var(--ink);
  transition:background-color .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.res-tile:hover{ background:rgba(255,255,255,.95); border-color:var(--accent-stroke); transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(15,23,42,.22); }
.res-tile:active{ transform:translateY(0); }
.res-ico{ width:48px; height:48px; display:block; }
.res-ico img{ width:100%; height:100%; object-fit:contain; display:block; }
.res-label{ font-size:13px; font-weight:600; color:var(--ink); text-align:center; line-height:1.25; }
.res-sub{ font-size:11.5px; color:var(--muted); text-align:center; line-height:1.35; }

@media (max-width:640px){
  .res-window{ left:8px; right:8px; top:24px; width:auto; transform:none; }
}

/* ===========================================================
   OWNER DEPENDENCY SCORE (window + form + results)
   =========================================================== */
.odc-window{ width:min(820px, calc(100% - 40px)); height:min(640px, calc(100% - 90px)); }
.odc-body{ flex:1 1 auto; min-height:0; overflow:auto; background:rgba(255,255,255,.4); }
.odc-view.hidden{ display:none !important; }

/* Intro + Form view */
.odc-intro{ padding:28px 36px 0; max-width:680px; }
.odc-intro h1{ font-size:24px; margin:0 0 10px; color:var(--ink); font-weight:700; letter-spacing:-.3px; }
.odc-intro p{ font-size:14.5px; line-height:1.6; color:var(--ink-3); margin:0 0 8px; }
.odc-intro .odc-time{ font-size:13px; color:var(--muted); margin:8px 0 0; }

.odc-form{ padding:18px 36px 36px; }
.odc-fieldset{ border:0; padding:0; margin:24px 0 0; }
.odc-fieldset legend{
  font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.6px; text-transform:uppercase;
  padding:0; margin:0 0 14px; border-bottom:1px solid var(--line); padding-bottom:8px; width:100%; display:block;
}
.odc-lead-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.odc-field{ display:flex; flex-direction:column; gap:6px; }
.odc-flabel{ font-size:12.5px; color:var(--ink-3); font-weight:500; }
.odc-input{
  height:36px; padding:0 12px;
  background:rgba(255,255,255,.85); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  font:inherit; font-size:13.5px; color:var(--ink); outline:none;
}
.odc-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.15); background:#fff; }
select.odc-input{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; }

.odc-q{ margin:0 0 18px; }
.odc-qtext{ font-size:14.5px; font-weight:600; color:var(--ink); margin:0 0 10px; line-height:1.45; }
.odc-choices{ display:flex; flex-direction:column; gap:6px; }
.odc-choice{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6); cursor:pointer; transition:all .12s ease;
}
.odc-choice:hover{ border-color:var(--accent-stroke); background:rgba(255,255,255,.9); }
.odc-choice input[type=radio]{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:0 0 auto; margin:0;
  border:1.5px solid var(--muted-2); border-radius:50%; background:#fff; cursor:pointer; position:relative;
}
.odc-choice input[type=radio]:checked{ border-color:var(--accent); }
.odc-choice input[type=radio]:checked::after{
  content:''; position:absolute; top:3px; left:3px; width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.odc-choice:has(input:checked){ background:var(--accent-soft); border-color:var(--accent-stroke); }
.odc-choice span{ font-size:13.5px; color:var(--ink-3); line-height:1.4; }
.odc-choice:has(input:checked) span{ color:var(--ink); font-weight:500; }

.odc-submit-row{ display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.odc-submit{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font:inherit; font-size:14px; font-weight:600; border:0; border-radius:var(--radius-sm); cursor:pointer;
  box-shadow:0 4px 12px rgba(59,130,246,.35);
}
.odc-submit:hover:not([disabled]){ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 16px rgba(59,130,246,.45); }
.odc-submit:active:not([disabled]){ transform:translateY(0); }
.odc-submit[disabled]{ background:#cbd5e1; cursor:default; box-shadow:none; }
.odc-status{ font-size:13px; color:var(--muted); flex:1 1 auto; }
.odc-status.odc-err{ color:#dc2626; font-weight:600; }

/* Loading view */
.odc-loading-view{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; gap:20px; min-height:300px; }
.odc-spinner{
  width:42px; height:42px; border-radius:50%;
  border:3px solid rgba(59,130,246,.18); border-top-color:var(--accent);
  animation:odc-spin .8s linear infinite;
}
@keyframes odc-spin{ to{ transform:rotate(360deg); } }
.odc-loading-text{ font-size:14.5px; color:var(--ink-3); font-weight:500; }

/* Results view */
.odc-results-view{ padding:28px 36px 36px; }
.odc-r-eyebrow{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; margin:0 0 6px; }
.odc-r-title{ font-size:24px; font-weight:700; color:var(--ink); margin:0 0 4px; letter-spacing:-.3px; }
.odc-r-sub{ font-size:14px; color:var(--ink-3); margin:0 0 24px; }

.odc-hero{ display:flex; align-items:center; gap:24px; margin:0 0 22px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.85); }
.odc-hero-score{ display:flex; align-items:baseline; gap:4px; }
.odc-hero-num{ font-size:56px; font-weight:300; line-height:1; color:var(--ink); letter-spacing:-1px; }
.odc-hero-out{ font-size:14px; color:var(--muted); }
.odc-hero-band{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; font-size:12.5px; font-weight:600; }
.odc-band-low{ background:rgba(22,163,74,.13); color:#166534; }
.odc-band-mod{ background:rgba(245,158,11,.18); color:#92400e; }
.odc-band-high{ background:rgba(220,38,38,.13); color:#991b1b; }
.odc-band-dot{ width:8px; height:8px; border-radius:50%; }
.odc-band-low .odc-band-dot{ background:#16a34a; }
.odc-band-mod .odc-band-dot{ background:#f59e0b; }
.odc-band-high .odc-band-dot{ background:#dc2626; }

.odc-bar{ position:relative; height:10px; background:rgba(15,23,42,.07); border-radius:99px; margin:0 0 8px; overflow:hidden; }
.odc-bar-fill{ position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, #16a34a 0%, #f59e0b 50%, #dc2626 100%); border-radius:99px; }
.odc-bar-mark{ position:absolute; top:-3px; bottom:-3px; width:3px; background:#fff; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.odc-bar-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin:0 0 22px; }

.odc-summary{ font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0 0 26px; padding:16px 18px; border-left:3px solid var(--accent); background:rgba(59,130,246,.06); border-radius:0 var(--radius-md) var(--radius-md) 0; }

.odc-cats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 28px; }
.odc-cat{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.6); }
.odc-cat-label{ font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; margin:0 0 6px; }
.odc-cat-score{ font-size:22px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.odc-cat-score small{ font-size:12px; color:var(--muted); font-weight:400; }
.odc-cat-note{ font-size:13px; line-height:1.55; color:var(--ink-3); margin:0; }

.odc-plan-eyebrow{ font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; margin:0 0 12px; }
.odc-actions{ display:flex; flex-direction:column; gap:12px; margin:0 0 28px; }
.odc-action{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.6); }
.odc-action-head{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.odc-action-num{ font-size:13px; font-weight:700; color:var(--muted-2); }
.odc-action-title{ font-size:14.5px; font-weight:600; color:var(--ink); flex:1 1 auto; }
.odc-pri{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.odc-pri-high{ background:rgba(220,38,38,.13); color:#991b1b; }
.odc-pri-medium{ background:rgba(245,158,11,.18); color:#92400e; }
.odc-pri-low{ background:rgba(22,163,74,.13); color:#166534; }
.odc-action-desc{ font-size:13.5px; line-height:1.55; color:var(--ink-3); margin:0 0 8px; }
.odc-action-time{ font-size:12px; color:var(--muted); margin:0; }
.odc-action-time strong{ color:var(--ink-2); font-weight:600; }

.odc-r-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.odc-r-cta{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font:inherit; font-size:13.5px; font-weight:600; border:0; border-radius:var(--radius-sm); cursor:pointer;
  text-decoration:none; box-shadow:0 4px 12px rgba(59,130,246,.35);
}
.odc-r-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.odc-r-reset{
  display:inline-flex; align-items:center; padding:10px 18px;
  background:rgba(15,23,42,.05); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:600;
  border:1px solid var(--line-2); border-radius:var(--radius-sm); cursor:pointer;
}
.odc-r-reset:hover{ background:rgba(15,23,42,.08); }

/* AI Scanner additions: checkboxes, textarea counter, stats, recs */
.ais-checks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px; }
.ais-check{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6); cursor:pointer; transition:all .12s ease;
}
.ais-check:hover{ border-color:var(--accent-stroke); background:rgba(255,255,255,.9); }
.ais-check input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:15px; height:15px; flex:0 0 auto; margin:0;
  border:1.5px solid var(--muted-2); border-radius:4px; background:#fff; cursor:pointer; position:relative;
}
.ais-check input[type=checkbox]:checked{ background:var(--accent); border-color:var(--accent); }
.ais-check input[type=checkbox]:checked::after{
  content:''; position:absolute; left:3px; top:0px; width:6px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg);
}
.ais-check:has(input:checked){ background:var(--accent-soft); border-color:var(--accent-stroke); }
.ais-check span{ font-size:13px; color:var(--ink-3); line-height:1.35; }
.ais-check:has(input:checked) span{ color:var(--ink); font-weight:500; }

.ais-textarea{ min-height:88px; padding:10px 12px; line-height:1.5; resize:vertical; font-family:inherit; }
.ais-counter{ display:block; font-size:11.5px; color:var(--muted); text-align:right; margin-top:4px; }

.ais-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 22px; }
.ais-stat{ padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.85); }
.ais-stat-label{ font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.6px; text-transform:uppercase; margin:0 0 8px; }
.ais-stat-val{ font-size:30px; font-weight:300; color:var(--ink); line-height:1; letter-spacing:-.8px; }
.ais-stat-val small{ font-size:13px; color:var(--muted); font-weight:400; margin-left:2px; }
.ais-stat-cap{ font-size:12px; color:var(--muted); margin:8px 0 0; }

.ais-rec{ padding:16px 18px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.6); margin:0 0 12px; }
.ais-rec-head{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.ais-rec-num{ font-size:13px; font-weight:700; color:var(--muted-2); }
.ais-rec-title{ font-size:15px; font-weight:600; color:var(--ink); flex:1 1 auto; line-height:1.35; }
.ais-diff{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.ais-diff-easy{ background:rgba(22,163,74,.13); color:#166534; }
.ais-diff-medium{ background:rgba(245,158,11,.18); color:#92400e; }
.ais-diff-complex{ background:rgba(220,38,38,.13); color:#991b1b; }
.ais-rec-desc{ font-size:13.5px; line-height:1.55; color:var(--ink-3); margin:0 0 10px; }
.ais-rec-meta{ display:flex; flex-wrap:wrap; gap:14px 18px; font-size:12.5px; color:var(--muted); }
.ais-rec-meta strong{ color:var(--ink-2); font-weight:600; }

@media (max-width:640px){
  .odc-window{ left:0; top:0; width:100%; height:100%; transform:none; border-radius:0; }
  .odc-intro, .odc-form, .odc-results-view{ padding-left:18px; padding-right:18px; }
  .odc-lead-grid{ grid-template-columns:1fr; }
  .odc-cats{ grid-template-columns:1fr; }
  .ais-stats{ grid-template-columns:1fr; }
  .ais-checks{ grid-template-columns:1fr; }
}

/* ===========================================================
   SCROLLBARS (subtle, no arrows)
   =========================================================== */
.sidebar, .content, .dp-list, .odc-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,.22) transparent;
}
.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar,
.dp-list::-webkit-scrollbar,
.odc-body::-webkit-scrollbar{ width:10px; height:10px; }
.sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track,
.dp-list::-webkit-scrollbar-track,
.odc-body::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb,
.dp-list::-webkit-scrollbar-thumb,
.odc-body::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.22); border-radius:6px;
  border:2px solid transparent; background-clip:padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover,
.dp-list::-webkit-scrollbar-thumb:hover,
.odc-body::-webkit-scrollbar-thumb:hover{
  background:rgba(15,23,42,.4); background-clip:padding-box;
}
.sidebar::-webkit-scrollbar-button,
.content::-webkit-scrollbar-button,
.dp-list::-webkit-scrollbar-button,
.odc-body::-webkit-scrollbar-button{ display:none; }
.sidebar::-webkit-scrollbar-corner,
.content::-webkit-scrollbar-corner,
.dp-list::-webkit-scrollbar-corner,
.odc-body::-webkit-scrollbar-corner{ background:transparent; }

/* ===========================================================
   TRANSITION MESSAGE (GOODBYE / WELCOME)
   Sits above the lock screen with a blurred-desktop backdrop so the
   visual continues seamlessly into the lock card.
   =========================================================== */
.screen-msg{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  /* The lock screen underneath provides the persistent blur; this
     overlay is just a translucent darkening so the text reads. */
  background: rgba(0,0,0,.22);
  pointer-events:none;
  animation: smsg-bg-in .4s ease forwards;
}
.screen-msg.out{ animation: smsg-bg-out .55s ease forwards; }
.screen-msg.hidden{ display:none; }
.screen-msg-text{
  font-family: "Archivo Black", "Inter", "Segoe UI", system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(18px, 3.5vw, 50px);
  color: #f8fafc;
  letter-spacing: -.5px;
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
  animation: smsg-text-in .85s cubic-bezier(.18,1,.4,1) forwards;
  will-change: transform, opacity;
}
.screen-msg.out .screen-msg-text{
  animation: smsg-text-out .55s ease forwards;
}
@keyframes smsg-bg-in{
  from{ opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); }
  to{ opacity:1; }
}
@keyframes smsg-bg-out{
  from{ opacity:1; }
  to{ opacity:0; }
}
@keyframes smsg-text-in{
  from{ opacity:0; transform: translateY(20px) scale(.94); letter-spacing:2px; }
  to{ opacity:1; transform: none; letter-spacing:-.5px; }
}
@keyframes smsg-text-out{
  from{ opacity:1; transform: none; }
  to{ opacity:0; transform: translateY(-14px) scale(1.03); }
}

/* ===========================================================
   LOCK SCREEN (speculative Windows 12)
   Sits above everything, glassy/futuristic, ignores the XP theme.
   =========================================================== */
.lock{
  position:fixed; inset:0; z-index:9999;
  color:#f8fafc;
  font-family:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  overflow:hidden;
  animation: lock-in 1.5s cubic-bezier(.18,1,.4,1);
}
.lock.dismissing{ animation: lock-out 1.5s ease forwards; }
.lock.hidden{ display:none; }
@keyframes lock-in{
  from{ opacity:0; -webkit-backdrop-filter:blur(0) saturate(100%); backdrop-filter:blur(0) saturate(100%); }
  to{ opacity:1; -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); }
}
@keyframes lock-out{
  from{ opacity:1; -webkit-backdrop-filter:blur(28px) saturate(140%); backdrop-filter:blur(28px) saturate(140%); }
  to{ opacity:0; -webkit-backdrop-filter:blur(0) saturate(100%); backdrop-filter:blur(0) saturate(100%); }
}

/* The lock screen blurs the live desktop behind it (so the splash and
   lock card share a continuous visual). A subtle dark veil improves
   foreground legibility. */
.lock{
  background: rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
          backdrop-filter: blur(28px) saturate(140%);
}
.lock-bg{ display:none; }
.lock-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.10) 65%, rgba(0,0,0,.30) 100%);
}

/* Clock anchors its BOTTOM a fixed distance above the card so the date
   never collides with the card edge. Card-half (~115px) + 36px gap. */
.lock-time{
  position:absolute; z-index:2;
  bottom:calc(50% + 200px); left:50%; transform:translateX(-50%);
  text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.lock-hours{
  font-size:clamp(48px, 7.5vw, 88px);
  font-weight:200; line-height:1;
  letter-spacing:-2px;
  color:#fff;
}
.lock-date{
  margin-top:8px;
  font-size:clamp(13px, 1.4vw, 16px);
  font-weight:400; letter-spacing:.2px;
  color:rgba(255,255,255,.85);
}

/* User card sits in the exact viewport center */
.lock-card{
  position:absolute; z-index:2;
  top:50%; left:50%; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:32px 36px 28px;
  background:rgba(20,22,32,.42);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
          backdrop-filter: blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.6),
    0 12px 40px -10px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.12);
  min-width:280px; max-width:90vw;
  animation: lock-card-in .7s cubic-bezier(.18,1,.4,1);
}
@keyframes lock-card-in{ from{ opacity:0; transform:translate(-50%, calc(-50% + 20px)); } to{ opacity:1; transform:translate(-50%, -50%); } }
.lock-avatar{
  width:88px; height:88px; border-radius:50%;
  object-fit:cover;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.4),
    0 0 0 6px rgba(255,255,255,.08),
    0 12px 30px -8px rgba(0,0,0,.5);
}
.lock-name{
  font-size:22px; font-weight:500; letter-spacing:-.2px;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.lock-form{
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
}
.lock-pwd{
  width:220px; height:42px;
  padding:0 16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  color:#fff; font:inherit; font-size:14.5px; letter-spacing:2px;
  outline:none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.lock-pwd::placeholder{ color:rgba(255,255,255,.55); letter-spacing:.5px; }
.lock-pwd:focus{
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
.lock-signin{
  width:42px; height:42px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  color:#fff; border-radius:50%;
  cursor:pointer;
  transition: background .15s ease, transform .12s ease, border-color .15s ease;
}
.lock-signin:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); }
.lock-signin:active{ transform:scale(.95); }
.lock-signin svg{ width:18px; height:18px; }
.lock-hint{
  margin-top:4px;
  font-size:12.5px; color:rgba(255,255,255,.55);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* Footer with status pill */
.lock-footer{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:2;
}
.lock-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  background:rgba(20,22,32,.42);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:99px;
  color:rgba(255,255,255,.8);
  font-size:12px; letter-spacing:.4px;
}
.lock-status-dot{
  width:6px; height:6px; border-radius:50%;
  background:#34d399;
  box-shadow:0 0 8px #34d399;
  animation: lock-dot-pulse 2s ease-in-out infinite;
}
@keyframes lock-dot-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}

@media (max-width:640px){
  .lock-time{ bottom:calc(50% + 170px); }
  .lock-card{ padding:24px 22px 22px; }
  .lock-avatar{ width:72px; height:72px; }
  .lock-name{ font-size:19px; }
  .lock-pwd{ width:180px; }
}

/* ===========================================================
   SHUTDOWN SEQUENCE
   Three phases over a fullscreen overlay:
     phase-blue   classic Win 9x navy with white "shutting down..."
     phase-black  brief power-down flash
     phase-final  black with amber centered "It's now safe to turn
                  off your computer." -- VT323, persists indefinitely
   =========================================================== */
/* NOTE: class is .shutdown-seq -- the start menu's Turn Off PC icon span
   also uses class="...shutdown" as a modifier, so a bare .shutdown rule
   here would collide with it and project the icon as a fullscreen overlay. */
.shutdown-seq{
  position:fixed; inset:0; z-index:10001;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  transition: background-color .25s ease;
  -webkit-font-smoothing:auto; font-smoothing:auto;
}
.shutdown-seq.hidden{ display:none; }
.shutdown-content{
  text-align:center;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  font-size:22px; font-weight:400; letter-spacing:.3px; line-height:1.5;
  padding:0 24px;
  transition: color .2s ease;
}
.shutdown-seq.phase-blue{ background:#000080; }
.shutdown-seq.phase-blue .shutdown-content{ color:#ffffff; }
.shutdown-seq.phase-black{ background:#000000; }
.shutdown-seq.phase-black .shutdown-content{ color:transparent; }
.shutdown-seq.phase-final{ background:#000000; }
.shutdown-seq.phase-final .shutdown-content{
  color:#ff7733;
  font-family:"VT323","Courier New",monospace;
  font-size:46px; line-height:1.5; letter-spacing:1.5px; font-weight:400;
  text-shadow:0 0 8px rgba(255,119,51,.35);
}
@media (max-width:640px){
  .shutdown-content{ font-size:18px; }
  .shutdown-seq.phase-final .shutdown-content{ font-size:30px; letter-spacing:1px; }
}

/* ===========================================================
   CLAWD (decorative mascot, fixed lower-right, just above the
   legal links; non-interactive and behind windows so it never
   gets in the way)
   =========================================================== */
.clawd{
  position:fixed; right:14px; bottom:40px; z-index:4;
  width:180px; height:auto;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));
}
@media (max-width:600px){
  .clawd{ display:none; }   /* the centered dock widens on small screens */
}

/* ===========================================================
   LEGAL CORNER LINKS (Privacy / Terms, fixed bottom-right)
   =========================================================== */
.legal-links{
  position:fixed; right:18px; bottom:14px; z-index:5;
  display:flex; align-items:center; gap:6px;
  font-size:11px; letter-spacing:.02em;
  pointer-events:auto;
}
.legal-links a{
  color:rgba(255,255,255,.7);
  text-decoration:none;
  padding:5px 10px;
  border-radius:8px;
  background:rgba(15,23,42,.22);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
          backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.legal-links a:hover{
  color:#fff;
  background:rgba(15,23,42,.42);
  border-color:rgba(255,255,255,.22);
}
.legal-links .legal-sep{
  color:rgba(255,255,255,.45);
  font-size:11px;
  user-select:none;
}

/* ===========================================================
   LEGAL DOCUMENT WINDOW (Privacy / Terms reader)
   =========================================================== */
.legal-window{ width:min(720px, calc(100% - 60px)); height:min(640px, calc(100% - 120px)); }
.legal-body{
  flex:1 1 auto; min-height:0; overflow:auto;
  padding:30px 44px 36px;
  background:rgba(255,255,255,.55);
  color:#1e293b;
  font-size:14.5px; line-height:1.65;
}
.legal-body h1{
  font-size:22px; font-weight:700;
  margin:0 0 4px; color:#0f172a;
  letter-spacing:-.01em;
}
.legal-body h2{
  font-size:15px; font-weight:600;
  margin:26px 0 8px; color:#0f172a;
  letter-spacing:.01em;
}
.legal-body p{ margin:0 0 12px; }
.legal-body ul{ margin:0 0 14px; padding-left:22px; }
.legal-body li{ margin:0 0 6px; }
.legal-body strong{ color:#0f172a; font-weight:600; }
.legal-body a{ color:#2563eb; text-decoration:none; }
.legal-body a:hover{ text-decoration:underline; }
.legal-body code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:rgba(15,23,42,.07);
  padding:1px 6px; border-radius:4px;
  font-size:12.5px; color:#0f172a;
}
.legal-body .legal-eff{
  color:#64748b; font-size:13px;
  margin:0 0 18px; font-weight:400;
}
.legal-body .legal-eff strong{ color:#475569; font-weight:600; }
.legal-body .legal-sig{
  margin-top:6px; padding-top:14px;
  border-top:1px solid rgba(15,23,42,.10);
  color:#334155;
}

/* Custom scrollbar for legal-body (subtle, no arrows) */
.legal-body{ scrollbar-width:thin; scrollbar-color:rgba(15,23,42,.22) transparent; }
.legal-body::-webkit-scrollbar{ width:10px; }
.legal-body::-webkit-scrollbar-track{ background:transparent; }
.legal-body::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.22); border-radius:6px;
  border:2px solid transparent; background-clip:padding-box;
}
.legal-body::-webkit-scrollbar-thumb:hover{
  background:rgba(15,23,42,.4); background-clip:padding-box;
}

@media (max-width:640px){
  .legal-window{ width:100%; height:100%; }
  .legal-body{ padding:20px 18px 28px; font-size:14px; }
  .legal-links{ right:10px; bottom:8px; font-size:10.5px; }
  .legal-links a{ padding:4px 8px; }
}

/* ===========================================================
   TERMINAL (Run...) -- Jurassic Park "access denied" homage
   Fullscreen vibrant-blue takeover. No window chrome, no taskbar
   feel. VT323 bitmap font, white text, blinking block cursor that
   follows typed input. Esc (or the [ Esc ] hint) exits.
   =========================================================== */
.ps-window{
  position:fixed !important;
  inset:0 !important;
  left:0 !important; top:0 !important;
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  transform:none !important;
  z-index:9000 !important;
  background:#1738d8 !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  display:flex !important; flex-direction:column !important;
}
.ps-screen{
  flex:1 1 auto; min-height:0;
  background:#1738d8;
  color:#ffffff;
  font-family:"VT323","Lucida Console","Courier New",monospace;
  font-weight:400;
  font-size:26px;
  line-height:.95;
  padding:14px 18px;
  overflow-y:auto;
  overflow-x:hidden;
  cursor:text;
  -webkit-font-smoothing:none;
          font-smoothing:none;
  text-rendering:geometricPrecision;
  letter-spacing:0;
}
.ps-screen *{ font-family:inherit; font-weight:inherit; }
.ps-output{ white-space:pre-wrap; word-break:break-word; margin:0; }
.ps-output .ps-line{ display:block; }
.ps-input-line{ display:flex; align-items:baseline; gap:0; margin:0; }
/* Visible mirror of whatever the user has typed so far */
.jp-mirror{ color:#fff; white-space:pre; }
/* Real input captures keystrokes. Kept in the viewport (not -9999px)
   so iOS Safari is willing to open the on-screen keyboard on focus;
   size:0 + opacity:0 keep it invisible and out of the layout. The
   16px font-size prevents iOS from zooming when the field gains focus. */
.ps-input{
  position:absolute;
  width:1px; height:1px; opacity:0;
  border:0; outline:0; padding:0; margin:0;
  font-size:16px;
}
/* Blinking block cursor sits immediately after the mirror, so it
   advances naturally with each typed character. step-end gives a
   clean square-wave: solid on, solid off, no half-frame ghost. */
.jp-cursor{
  display:inline-block;
  width:.55em; height:.9em;
  background:#ffffff;
  vertical-align:-1px;
  margin-left:0;
  animation: jp-blink 1.06s step-end infinite;
}
@keyframes jp-blink{
  0%   { opacity:1; }
  50%  { opacity:0; }
}

/* Esc hint in the top-right corner for users who can't find the keyboard */
.jp-exit{
  position:absolute; top:14px; right:18px;
  background:transparent; border:0; padding:4px 8px; cursor:pointer;
  color:rgba(255,255,255,.55);
  font-family:"VT323","Lucida Console","Courier New",monospace;
  font-size:20px; letter-spacing:.02em;
  transition:color .15s ease;
}
.jp-exit:hover{ color:#fff; }
.jp-exit:focus-visible{ outline:1px dashed rgba(255,255,255,.6); outline-offset:2px; }

/* Subtle scrollbar */
.ps-screen{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.32) transparent; }
.ps-screen::-webkit-scrollbar{ width:10px; }
.ps-screen::-webkit-scrollbar-track{ background:transparent; }
.ps-screen::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.32); border-radius:6px;
  border:2px solid transparent; background-clip:padding-box;
}
.ps-screen::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.55); background-clip:padding-box; }

@media (max-width:640px){
  .ps-screen{ font-size:22px; padding:12px 14px; }
  .jp-exit{ top:10px; right:12px; font-size:18px; }
}

/* ===========================================================
   REDUCED MOTION
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}