/* Windows XP–style desktop portfolio. Values mirror the Claude Design prototype (Portfolio v3). */

:root {
  --ui-font: Tahoma, Verdana, 'Segoe UI', sans-serif;
  --mono: 'Lucida Console', 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Trebuchet MS', Tahoma, sans-serif;

  --ink: #141413;
  --ink-2: #3d3d3a;
  --ink-3: #55534e;
  --navy: #1c3f94;
  --navy-deep: #0b2a6f;
  --select: #316ac5;
  --coral: #cc785c;
  --coral-deep: #a9583e;
  --amber: #e8a55a;

  --face: #ece9e0;
  --face-2: #f4f2ea;
  --face-3: #fbfaf6;
  --rule: #d4d0c4;
  --inset: #7f9db9;

  --titlebar: linear-gradient(180deg, #4a86e4 0%, #2560cf 40%, #1a4cb5 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #1e4f8f; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.desktop button, .desktop a { cursor: var(--cursor-link); }
.desktop .titlebar { cursor: move; }
.desktop .note, .desktop .selectable, .desktop .browser, .desktop .role-detail { cursor: text; }
.desktop.is-busy, .desktop.is-busy * { cursor: var(--cursor-busy); }
a { color: #1f56c4; text-decoration: underline; }
a:hover { color: var(--coral); }
button { font-family: var(--ui-font); color: inherit; }
h2, p { margin: 0; }
:focus-visible { outline: 1px dotted var(--ink); outline-offset: 1px; }

.desktop {
  --cursor: url("assets/icons/cursor-arrow.png") 0 0, default;
  --cursor-link: url("assets/icons/cursor-hand.png") 5 0, pointer;
  --cursor-busy: url("assets/icons/cursor-hourglass.png") 6 11, wait;
  cursor: var(--cursor);
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: 12px;
  color: var(--ink);
  user-select: none;
}

/* ── Wallpaper ─────────────────────────────────────────── */
.wallpaper { position: absolute; inset: 0; }
[data-wallpaper="ocean"] .wallpaper {
  background:
    radial-gradient(120% 80% at 75% 10%, #5fa3e8 0%, transparent 60%),
    linear-gradient(170deg, #3f86d4 0%, #2b6cb0 45%, #1a467f 100%);
}
[data-wallpaper="dusk"] .wallpaper {
  background: linear-gradient(175deg, #f0b978 0%, #e8a55a 22%, #cc785c 48%, #5a3a52 82%, #2a2238 100%);
}
[data-wallpaper="classic"] .wallpaper { background: #3a7a8c; }
[data-wallpaper="mountain"] .wallpaper {
  background:
    linear-gradient(180deg, rgba(20,24,30,.28) 0%, rgba(20,24,30,0) 38%),
    #8a8576 url("assets/wallpaper.jpg") center 62% / cover no-repeat;
}
.narrow .wallpaper { position: fixed; }

/* ── Desk + icons ──────────────────────────────────────── */
.desk { position: absolute; inset: 0 0 40px 0; }
.icons {
  position: absolute; left: 10px; top: 10px; bottom: 10px;
  display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px;
}
.narrow .desk { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 56px; }
.narrow .icons { position: static; flex-direction: row; order: -1000; }
/* Once laid out, icons are pinned in place so they can be dragged around. */
.icons.is-free { display: block; inset: 0; pointer-events: none; }
.narrow .icons.is-free { position: relative; }
.icons.is-free .icon { position: absolute; pointer-events: auto; }
.icon { touch-action: none; -webkit-user-drag: none; }
.icon img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.icon.is-dragging { z-index: 1; opacity: .8; background: rgba(49, 106, 197, .35); }

.icon {
  width: 84px; padding: 6px 2px; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
}
.icon:hover { background: rgba(49, 106, 197, .35); }
.icon-art { height: 40px; display: flex; align-items: center; }
.icon-art img { display: block; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }
.icon-label { color: #fff; font-size: 12px; line-height: 1.25; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.6); }

.ico-txt {
  position: relative; display: block; width: 30px; height: 38px; background: #fff; border: 1px solid #6c6a64;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 5px, #b9c6dd 5px, #b9c6dd 6px);
}
.ico-txt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: #3d7be0; }

.ico-pdf { position: relative; display: block; width: 30px; height: 38px; background: #fff; border: 1px solid #6c6a64; box-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.ico-pdf .badge { position: absolute; left: -5px; bottom: 7px; padding: 1px 3px; background: #c64545; color: #fff; font-size: 8px; font-weight: 700; }

.ico-mail { position: relative; display: block; width: 40px; height: 28px; background: #fff; border: 1px solid #6c6a64; overflow: hidden; box-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.ico-mail .flap { position: absolute; left: 4px; top: -17px; width: 30px; height: 30px; border: 1px solid #6c6a64; transform: rotate(45deg); background: #f5f0e8; }

/* ── Window chrome ─────────────────────────────────────── */
.win { display: none; position: absolute; max-width: calc(100vw - 16px); }
.win.is-shown { display: block; }
.narrow .win { position: relative; width: 100%; max-width: none; left: auto !important; top: auto !important; z-index: auto !important; }

.window {
  width: var(--w); max-width: 100%;
  background: var(--face); border: 1px solid var(--navy-deep); border-radius: 7px 7px 2px 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden;
}
.window--raised { box-shadow: 0 16px 40px rgba(0,0,0,.4); }

.titlebar {
  height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px;
  background: var(--titlebar); color: #fff; cursor: move; touch-action: none;
}
.narrow .titlebar { cursor: default; }
.tb-title { flex: 1; font-weight: 700; font-size: 13px; text-shadow: 1px 1px 0 rgba(0,0,0,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btn {
  width: 21px; height: 21px; border: 1px solid rgba(255,255,255,.85); border-radius: 3px;
  color: #fff; font-weight: 700; cursor: pointer; display: flex; justify-content: center;
}
.tb-min { padding: 0 0 3px; background: linear-gradient(#5b8fef, #2f63d8); font-size: 12px; align-items: flex-end; }
.tb-close { padding: 0; background: linear-gradient(#ea8a68, #cf4e2b); font-size: 11px; align-items: center; }

.statusbar { padding: 3px 10px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-3); }
.statusbar--end { display: flex; justify-content: flex-end; }
.statusbar--split { display: flex; justify-content: space-between; gap: 8px; }
.statusbar--split a { font-size: 11px; }

.addressbar { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--rule); }
.addr-label { font-size: 11px; color: var(--ink-3); }
.addr-field { flex: 1; min-width: 0; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 6px; background: #fff; border: 1px solid var(--inset); font-size: 12px; white-space: nowrap; overflow: hidden; }
.mini-folder, .role-row .row-folder { flex: 0 0 auto; width: 16px; height: 11px; background: url("assets/icons/folder.png") center / contain no-repeat; }
.go-btn {
  height: 22px; padding: 0 10px; display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--navy); border-radius: 3px; background: linear-gradient(#fff, #e6e3d8);
  color: var(--ink); text-decoration: none; font-size: 12px;
}
.go-btn:hover { background: linear-gradient(#fff, #f3d9cf); color: var(--ink); }

.pane { margin: 4px; background: #fff; border: 1px solid var(--inset); }

.btn {
  height: 23px; min-width: 75px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--navy); border-radius: 3px; background: linear-gradient(#fff, #e6e3d8);
  color: var(--ink); text-decoration: none; font-size: 12px; cursor: pointer;
}
.btn--default { box-shadow: inset 0 0 0 2px #9db9eb; }
.btn:hover { box-shadow: inset 0 0 0 2px #f2b268; color: var(--ink); }

.muted-11 { font-size: 11px; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 11px; }
.selectable { user-select: text; }

/* ── about_me.txt ──────────────────────────────────────── */
.menubar { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid var(--rule); }
.menu { position: relative; }
.menu-title { padding: 2px 6px; border: none; background: none; font-size: 12px; cursor: pointer; }
.menu-title:hover, .menu-title.is-open { background: var(--select); color: #fff; }
.menu-list {
  display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 170px; padding: 2px;
  background: #fff; border: 1px solid #8e8b82; box-shadow: 2px 2px 4px rgba(0,0,0,.3); flex-direction: column;
}
.menu-list.is-open { display: flex; }
.menu-item { padding: 5px 18px; border: none; background: none; text-align: left; font-family: var(--ui-font); font-size: 12px; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.menu-item:hover { background: var(--select); color: #fff; }
.menu-sep { height: 1px; margin: 3px 2px; background: var(--rule); }

#note-size { font-size: 12.5px; }
.note {
  margin: 4px; background: #fff; border: 1px solid var(--inset);
  max-height: min(420px, 58vh); overflow: auto; padding: 12px 14px;
  font-family: var(--mono); line-height: 1.6; color: var(--ink); white-space: pre-wrap; user-select: text;
}

/* ── Experience (explorer) ─────────────────────────────── */
.explorer { display: flex; flex-wrap: wrap; min-height: 0; }
.taskpane { flex: 0 0 170px; padding: 10px; background: linear-gradient(180deg, #7ba2e7, #6680d8); display: flex; flex-direction: column; gap: 10px; }
.taskpane-box { background: #fff; border-radius: 4px 4px 0 0; overflow: hidden; }
.taskpane-head { padding: 5px 8px; background: linear-gradient(90deg, #fff, #c6d3f7); font-weight: 700; font-size: 11px; color: var(--navy); }
.taskpane-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #d6dff7; }
.task-link { padding: 0; border: none; background: none; text-align: left; font-size: 11px; color: var(--navy); cursor: pointer; }
.task-link:hover { text-decoration: underline; }

.filelist { flex: 1 1 360px; min-width: 0; background: #fff; display: flex; flex-direction: column; }
.filelist-head, .role-row { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1.2fr) minmax(0,.9fr); }
.filelist-head { border-bottom: 1px solid var(--rule); background: var(--face-2); font-size: 11px; }
.filelist-head > div { padding: 4px 8px; }
.filelist-head > div:not(:last-child) { border-right: 1px solid var(--rule); }

.role-row { width: 100%; align-items: center; padding: 0; border: none; background: #fff; color: var(--ink); text-align: left; font-size: 12px; cursor: pointer; }
.role-row:hover { background: #e8eefb; }
.role-row.is-selected { background: var(--select); color: #fff; }
.role-row > span { padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-row > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.role-row .row-name { padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-row > span:last-child { overflow: visible; }

.role-detail { margin-top: auto; border-top: 1px solid var(--rule); padding: 12px 14px; background: var(--face-3); display: flex; flex-direction: column; gap: 8px; user-select: text; }
.role-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.role-company { font-weight: 700; font-size: 14px; color: var(--navy); }
.role-meta { font-size: 11px; color: var(--ink-3); }

.bullets { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; line-height: 1.5; }
.bullets li { text-wrap: pretty; }

/* ── Projects folder ───────────────────────────────────── */
.folder-view { min-height: 180px; padding: 16px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; }
.file-icon { width: 96px; padding: 6px 2px; border: 1px solid transparent; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--ink); }
.file-icon:hover { background: #e8eefb; border-color: #9db9eb; }

/* ── CookNoBook browser ────────────────────────────────── */
.browser { max-height: min(460px, 62vh); overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; user-select: text; }
.shot { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; background: #efe9de; border: 1px solid var(--rule); overflow: hidden; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stack-6 { display: flex; flex-direction: column; gap: 6px; }
.cnb-title { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); }
.cnb-pitch { font-size: 13px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.chapter { padding: 10px; background: var(--face-2); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.chapter b { font-size: 12.5px; color: var(--ink); }
.chapter > span:last-child { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.chapter-no { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.chapter--accent { background: #fdf1ec; border-color: var(--coral); }
.chapter--accent .chapter-no { color: var(--coral-deep); }

.group { margin: 0; padding: 10px 12px 12px; border: 1px solid #c5c2b8; border-radius: 4px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.group legend { padding: 0 5px; font-size: 12px; font-weight: 700; color: var(--navy); }
.group .bullets { color: var(--ink-2); }
.group .bullets b { color: var(--ink); }
.group--accent { border-color: var(--coral); }
.group--accent legend { color: var(--coral-deep); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; }
.features > div { display: flex; flex-direction: column; gap: 2px; }
.features b { font-size: 12px; color: var(--ink); }
.features span { font-size: 11.5px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.stackline { font-size: 11px; color: var(--ink-3); }

/* ── Toolkit properties ────────────────────────────────── */
.tabs { padding: 10px 10px 0; display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; }
.tab {
  margin-top: 2px; padding: 4px 9px; border: 1px solid #919b9c; border-bottom: none; border-radius: 3px 3px 0 0;
  background: linear-gradient(#fff, #ecebe5); font-size: 11px; color: var(--ink); cursor: pointer;
}
.tab:hover { border-top-color: var(--amber); }
.tab.is-active {
  position: relative; z-index: 1; margin-top: 0; margin-bottom: -1px; padding: 5px 9px;
  border: 1px solid #919b9c; border-bottom-color: var(--face-3); border-top: 2px solid var(--amber);
  background: var(--face-3);
}
.tab-panel { margin: 0 10px; padding: 14px; background: var(--face-3); border: 1px solid #919b9c; min-height: 170px; display: flex; flex-direction: column; gap: 10px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.check::before { content: ''; width: 14px; height: 14px; flex: 0 0 auto; background: url("assets/icons/check.png") center / contain no-repeat; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 10px; }
.dialog-actions--center { justify-content: center; gap: 8px; padding: 6px 10px 14px; }
.dialog-actions--welcome { padding: 8px 12px 14px; }

/* ── impact.exe ────────────────────────────────────────── */
.stats { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.stat { display: flex; gap: 10px; align-items: stretch; }
.stat-num {
  flex: 0 0 108px; padding: 8px; background: #000; border: 1px solid var(--ink-3);
  font-family: var(--mono); font-size: 24px; color: #5db872;
  display: flex; align-items: center; justify-content: center;
}
.stat-text { flex: 1; font-size: 12px; line-height: 1.45; display: flex; flex-direction: column; justify-content: center; }
.stat-text span { color: var(--ink-2); }

/* ── Dialogs (contact, welcome) ────────────────────────── */
.dialog-body { padding: 18px 16px 12px; display: flex; gap: 14px; align-items: flex-start; }
.dialog-body--welcome { padding-bottom: 10px; }
.dialog-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fc0ff, #2560cf 60%, #173f9a); border: 1px solid #0f3a80;
  color: #fff; font-family: Georgia, serif; font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.dialog-icon--i { font-style: italic; }
.dialog-text { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.5; }
.email-mono { font-family: var(--mono); font-size: 11.5px; color: var(--navy); }
.contact-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 4px; font-size: 11px; }
.welcome-head { font-size: 13px; }
.body-muted { color: var(--ink-2); }

/* ── resume.pdf ────────────────────────────────────────── */
.viewer-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 8px; border-bottom: 1px solid var(--rule); font-size: 12px; }
.spacer { flex: 1; }
.dl-progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-3); }
.progress { width: 140px; height: 16px; padding: 2px; background: #fff; border: 1px solid var(--inset); }
.progress-bar { width: 0; height: 100%; background: repeating-linear-gradient(90deg, #3d7be0 0, #3d7be0 8px, transparent 8px, transparent 10px); transition: width .15s linear; }
.viewer { margin: 4px; background: #8e8b82; border: 1px solid var(--inset); padding: 10px; }
.viewer-scroll { max-height: min(560px, 62vh); overflow: auto; }
.page { position: relative; min-height: 240px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.page img { display: block; width: 100%; height: auto; }
.page-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--ink-3); }

/* ── Start menu ────────────────────────────────────────── */
.start-menu {
  position: fixed; left: 0; bottom: 40px; z-index: 9000; width: min(380px, 100vw);
  background: #fff; border: 1px solid var(--navy-deep); border-radius: 8px 8px 0 0;
  box-shadow: 4px -4px 20px rgba(0,0,0,.35); overflow: hidden;
}
.start-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(180deg, #4a86e4, #1a4cb5); color: #fff; }
.start-avatar { width: 44px; height: 44px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 4px; overflow: hidden; background: #efe9de; }
.start-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.start-who { display: flex; flex-direction: column; }
.start-who b { font-family: var(--display); font-size: 16px; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.start-who span { font-size: 11px; opacity: .9; }
.start-cols { display: flex; border-top: 2px solid var(--amber); }
.start-left { flex: 1; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px; }
.start-right { flex: 1; padding: 8px 4px; background: #d3e5fa; border-left: 1px solid #95bdee; display: flex; flex-direction: column; gap: 2px; }
.start-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: none; background: none; text-align: left; cursor: pointer; }
.start-item:hover, .start-place:hover { background: var(--select); color: #fff; }
.si-text { display: flex; flex-direction: column; }
.si-text b { font-size: 12px; }
.si-text span { font-size: 10.5px; opacity: .75; }
.si-globe { width: 22px; height: 22px; flex: 0 0 auto; }
.si-pdf { width: 16px; height: 20px; flex: 0 0 auto; margin: 0 2px; background: #fff; border: 1px solid #6c6a64; border-bottom: 5px solid #c64545; }
.si-mail { width: 20px; height: 14px; flex: 0 0 auto; background: #fff; border: 1px solid #6c6a64; }
.start-place { padding: 6px 10px; border: none; background: none; text-align: left; font-size: 12px; font-weight: 700; color: var(--navy-deep); cursor: pointer; }
.start-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 8px 12px; background: linear-gradient(180deg, #4a86e4, #1a4cb5); }
.start-foot a { color: #fff; font-size: 12px; text-decoration: none; }
.start-foot a:hover { color: #fff; text-decoration: underline; }

/* ── Wallpaper credit ──────────────────────────────────── */
.wp-credit {
  position: absolute; right: 10px; bottom: 46px; z-index: 0; margin: 0;
  font-size: 10.5px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.wp-credit a, .wp-credit a:hover { color: #fff; }
.narrow .wp-credit { position: relative; right: auto; bottom: auto; padding: 0 12px 56px; margin-top: -44px; }

/* ── Taskbar ───────────────────────────────────────────── */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9001;
  height: calc(40px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #3f6fd1 0%, #2a55b8 12%, #2049a8 88%, #183a8a 100%);
  border-top: 1px solid #6b95e8;
}
.start-btn {
  flex: 0 0 auto; padding: 0 22px 0 14px; border: none; border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #eea07f 0%, #cc785c 45%, #a9583e 100%);
  color: #fff; font-family: var(--display); font-style: italic; font-weight: 700; font-size: 17px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4); box-shadow: inset -2px 0 3px rgba(0,0,0,.25);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.start-btn:hover { filter: brightness(1.08); }
.start-logo { width: 14px; height: 14px; border-radius: 3px; background: #faf9f5; transform: rotate(45deg); box-shadow: inset 0 0 0 3px var(--amber); }

.tasks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 8px; overflow: hidden; }
.task {
  flex: 0 1 160px; min-width: 60px; height: 28px; padding: 0 10px;
  border: 1px solid #2a5fd0; border-radius: 3px; background: linear-gradient(180deg, #5b8fef, #3b6fdb);
  color: #fff; font-size: 11.5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.task:hover { background: linear-gradient(180deg, #6d9cf3, #4a7ce3); }
.task.is-active, .task.is-active:hover { border-color: #0f2d6e; background: #1a3f94; box-shadow: inset 1px 1px 3px rgba(0,0,0,.5); }

.tray {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: linear-gradient(180deg, #1590e6, #0f6fc8); border-left: 1px solid #0b4f9a; box-shadow: inset 1px 0 0 #38a6f0;
  color: #fff; font-size: 12px;
}
.tray-status { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.tray-dot { width: 9px; height: 9px; border-radius: 50%; background: #5db872; border: 1px solid #2d7a3e; }