:root{
  --bg:#05070f;
  --panel-a:rgba(16,22,40,0.94);
  --panel-b:rgba(10,14,26,0.965);
  --line:rgba(255,255,255,0.09);
  --line-soft:rgba(255,255,255,0.06);
  --text:#e6ecfb;
  --muted:#8892b5;
  --dim:#5b6488;
  --cyan:#8ff3ff;
  --field:rgba(255,255,255,0.04);
  --field-line:rgba(255,255,255,0.10);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--text);
  user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0}
#stage[hidden]{display:none}
#gl,#overlay{position:absolute;inset:0;width:100%;height:100%;display:block}
#gl{touch-action:none}
:where(button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.title-input:focus-visible,.notes:focus-visible,#prompt-input:focus-visible,.fld input:focus-visible,.tag-input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#overlay{pointer-events:none}
#ui{position:absolute;inset:0;pointer-events:none}
#ui .menu, #ui .menu *, #done-chip, #vault-chip, #board-chip{pointer-events:auto}

/* hints */
/* Hints sit over the board, so they must be bounded on BOTH sides: with only
   `left` set they wrapped upward across the lowest bubbles on a narrow window. */
#hints{position:absolute;left:24px;right:24px;bottom:20px;color:var(--dim);
  font-size:13px;font-weight:500;letter-spacing:.2px;pointer-events:none;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  display:flex;flex-wrap:wrap;gap:4px 18px}
/* Touch wording is hidden until the pointer is actually coarse. */
#hints .coarse{display:none}
@media (pointer:coarse){
  #hints .fine{display:none}
  #hints .coarse{display:inline}
}

/* shared menu chrome */
.menu{position:absolute;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--line);box-shadow:-30px 0 60px rgba(0,0,0,.5),0 20px 50px rgba(0,0,0,.45);
  will-change:transform;transition:transform .42s cubic-bezier(.22,1,.36,1);z-index:10}
#panel.off,#completed.off{transform:translateX(106%)}
#vault.off{transform:translateX(-106%)}
#boards.off{transform:translateX(-106%)}
#prompt.off{transform:translate(-50%,calc(-50% - 70vh))}

/* new-task prompt */
#prompt{left:50%;top:var(--viewport-mid,50%);width:360px;transform:translate(-50%,-50%);
  border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(var(--usable-height,100vh) - 16px);overflow-y:auto}
.prompt-label{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase}
#prompt-input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(140,240,255,.45);
  border-radius:11px;outline:none;color:#fff;font-size:17px;font-weight:600;padding:13px 15px;
  box-shadow:0 0 0 3px rgba(140,240,255,.10)}
.prompt-row{display:flex;align-items:center;gap:10px}
.prompt-hint{flex:1;color:var(--dim);font-size:12px}

/* buttons */
.btn{border-radius:10px;font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer;border:1px solid transparent}
.btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#9aa4c4}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-primary{background:linear-gradient(135deg,#6ff0ff,#6a8cff);color:#04121f;font-weight:750;
  box-shadow:0 6px 18px rgba(110,200,255,.35)}
.btn-pop{background:linear-gradient(135deg,#ff7ad0,#ff5a8a);color:#fff;font-weight:700;
  display:flex;align-items:center;gap:7px;box-shadow:0 6px 18px rgba(255,90,138,.35)}
.btn:active{transform:translateY(1px)}

/* detail panel */
#panel{top:var(--viewport-top,0px);right:0;width:412px;height:var(--usable-height,100%);border-left:1px solid var(--line);
  padding:24px 26px;display:flex;flex-direction:column;gap:16px;overflow-y:auto}
.panel-head{display:flex;align-items:center;justify-content:space-between}
.panel-head-l{display:flex;align-items:center;gap:9px}
.dot{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#9af5ff,#6a7cff 60%,#b06cff)}
.panel-kicker{color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}
.panel-close{color:#6b7290;font-size:17px;cursor:pointer;line-height:1;background:none;border:0;padding:5px}
.panel-close:hover{color:#cdd6f0}
.field-label{color:var(--dim);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px}
.title-input{width:100%;background:transparent;border:none;outline:none;color:#fff;font-size:24px;
  font-weight:700;border-bottom:1px solid rgba(255,255,255,.12);padding:4px 0 8px}
.prio-head{display:flex;align-items:center;justify-content:space-between}
.prio-tag{color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.5px}
.prio-meter{display:flex;align-items:center;gap:9px}
.prio-dot{border-radius:50%;background:rgba(255,255,255,.12);transition:all .18s;border:0;padding:0;flex:none;cursor:pointer}
.prio-dot[data-i="0"]{width:12px;height:12px}
.prio-dot[data-i="1"]{width:16px;height:16px}
.prio-dot[data-i="2"]{width:21px;height:21px}
.prio-dot[data-i="3"]{width:26px;height:26px}
.prio-dot[data-i="4"]{width:31px;height:31px}
.prio-dot.on{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),rgba(120,150,255,.4));
  border:1.5px solid var(--cyan);box-shadow:0 0 12px rgba(140,240,255,.4)}
.prio-hint{margin-left:auto;color:#6b7290;font-size:11px}
.status-row{display:flex;gap:8px}
.chip{border-radius:999px;font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;
  background:rgba(255,255,255,.05);color:#7f89ad;border:1px solid rgba(255,255,255,.08)}
.chip:disabled,.prio-dot:disabled{cursor:default}
.chip.on{background:rgba(140,240,255,.14);color:var(--cyan);border-color:rgba(140,240,255,.4)}
.two-col{display:flex;gap:14px}
.two-col>div{flex:1;display:flex;flex-direction:column;gap:8px}
.fld{background:var(--field);border:1px solid var(--field-line);border-radius:10px;
  display:flex;align-items:center;gap:9px;padding:9px 13px;color:var(--muted)}
.fld input{background:transparent;border:none;outline:none;color:var(--text);font-size:14px;
  font-weight:500;width:100%;color-scheme:dark}
.avatar{width:22px;height:22px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#6a7cff,#b06cff);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:11px;font-weight:700}
.notes{min-height:84px;resize:none;background:var(--field);border:1px solid var(--field-line);
  border-radius:10px;padding:12px 14px;color:#c9d3ef;font-size:14px;line-height:1.55;
  font-family:inherit;outline:none}
.tags-row{display:flex;flex-wrap:wrap;gap:8px}
.tag{border-radius:999px;font-size:12px;font-weight:600;padding:6px 12px;
  background:rgba(181,108,255,.14);color:#cfaaff;border:1px solid rgba(181,108,255,.35);
  display:flex;align-items:center;gap:6px}
.tag .x{cursor:pointer;opacity:.6}
.tag .x{background:none;border:0;color:inherit;padding:0;font:inherit}
.tag .x:hover{opacity:1}
.tag-add{border-radius:999px;font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;
  background:rgba(255,255,255,.04);color:#6b7290;border:1px dashed rgba(255,255,255,.14)}
.tag-input{border-radius:999px;font-size:12px;padding:6px 12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(140,240,255,.4);color:#fff;outline:none;width:90px}
.panel-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.created{color:var(--dim);font-size:12px;flex:1}

/* The Vault */
.vault-chip{position:absolute;top:66px;left:20px;display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,rgba(181,108,255,.18),rgba(106,140,255,.18));
  border:1px solid rgba(181,140,255,.4);color:#cbb6ff;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.vault-chip:hover{background:linear-gradient(135deg,rgba(181,108,255,.28),rgba(106,140,255,.28))}
#vault{top:var(--viewport-top,0px);left:0;width:420px;height:var(--usable-height,100%);border-right:1px solid var(--line);
  padding:24px 22px;display:flex;flex-direction:column;gap:14px;
  box-shadow:30px 0 60px rgba(0,0,0,.5)}
.vault-sub{color:var(--dim);font-size:12px;font-weight:500}
.vault-sec{color:var(--dim);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;margin-top:2px}
.vault-tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);
  border-radius:12px;padding:4px}
.vault-tab{flex:1;border:none;background:transparent;color:#8a94b8;font-size:13px;font-weight:650;
  padding:9px 8px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.vault-tab:hover{color:#cdd6f0}
.vault-tab.active{background:linear-gradient(135deg,rgba(143,243,255,.18),rgba(106,140,255,.18));
  color:#eaf0ff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.vault-pane[hidden]{display:none}
.vault-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;overflow-y:auto;
  padding-right:4px;margin-right:-4px;align-content:start;flex:1}
.vault-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 10px 11px;
  background:var(--field);border:1px solid var(--field-line);border-radius:13px;cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s}
.vault-card-custom{padding:0;cursor:default}
.vault-card-main{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:12px 10px 11px;
  background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.vault-card-main:focus-visible,.vault-remove:focus-visible,.vault-swap:focus-visible,
#vault-close:focus-visible,#vault-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.vault-card:hover{background:rgba(255,255,255,.07)}
.vault-card:active{transform:translateY(1px)}
.vault-preview{width:130px;height:73px}
.vault-swatch{width:130px;height:73px;border-radius:9px;border:1px solid rgba(255,255,255,.10)}
.vault-swatch-round{width:74px;height:74px;border-radius:50%;box-shadow:inset 0 0 10px rgba(255,255,255,.15)}
.vault-card.locked .vault-swatch{opacity:.30;filter:grayscale(.5)}
.vault-card.locked{cursor:not-allowed}
.vault-card.locked .vault-preview{opacity:.28;filter:grayscale(.5)}
.vault-card.equipped{border-color:rgba(143,243,255,.6);background:rgba(143,243,255,.10);
  box-shadow:0 0 0 1px rgba(143,243,255,.3), 0 6px 18px rgba(140,240,255,.12)}
.vault-name{color:#dbe3f7;font-size:13px;font-weight:650}
.vault-card.locked .vault-name{color:#7f89ad}
.vault-state{font-size:11px;font-weight:600}
.vault-lock{color:#7f89ad}
.vault-eq{color:var(--cyan)}
.vault-tap{color:#8a94b8}
#vault .vault-grid::-webkit-scrollbar{width:8px}
#vault .vault-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}

/* dev tuning panel */
#devpanel[hidden]{display:none}
#devpanel{position:absolute;top:16px;left:16px;width:290px;pointer-events:auto;
  background:rgba(10,14,26,0.94);border:1px solid rgba(143,243,255,.28);border-radius:14px;
  padding:14px 15px;display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(8px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:12px}
.dev-head{display:flex;align-items:center;justify-content:space-between;color:var(--cyan);
  font-weight:700;letter-spacing:.4px}
.dev-close{color:#8794b8;font-size:14px;cursor:pointer;line-height:1;padding:2px 4px;border-radius:6px}
.dev-close:hover{color:#fff;background:rgba(255,255,255,.1)}
.dev-row{display:flex;flex-direction:column;gap:5px}
.dev-row-top{display:flex;align-items:center;justify-content:space-between}
.dev-label{color:#cdd6f0;font-weight:600}
.dev-val{color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums}
.dev-fieldhint{color:var(--dim);font-size:10.5px;line-height:1.35}
#devpanel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  border-radius:3px;background:rgba(255,255,255,.14);outline:none}
#devpanel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:radial-gradient(circle at 34% 30%,#bfefff,#6a8cff);cursor:pointer;
  box-shadow:0 0 8px rgba(140,240,255,.5)}
.dev-toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border-top:1px solid rgba(255,255,255,.07);padding-top:11px}
.dev-toggle input{margin:2px 0 0;width:16px;height:16px;accent-color:#6a8cff;cursor:pointer;flex:none}
.dev-toggle-text{display:flex;flex-direction:column;gap:3px}
.dev-foot{display:flex;justify-content:flex-end;padding-top:2px}
.dev-foot .btn{padding:7px 12px;font-size:12px}
.dev-cur-btns{display:flex;gap:6px;margin-top:2px}
.dev-cur-btns .btn{flex:1;padding:6px 0;font-size:12px;font-variant-numeric:tabular-nums}

/* subtasks in the detail panel */
.parent-crumb{display:flex;align-items:center;gap:6px;color:var(--cyan);font-size:12px;
  font-weight:600;cursor:pointer;background:rgba(143,243,255,.10);border:1px solid rgba(143,243,255,.25);
  border-radius:8px;padding:6px 10px;align-self:flex-start}
.parent-crumb:hover{background:rgba(143,243,255,.18)}
.sub-head{display:flex;align-items:center;justify-content:space-between}
.sub-count{color:var(--dim);font-size:11px;font-weight:700}
.sub-list{display:flex;flex-direction:column;gap:6px}
.sub-row{display:flex;align-items:center;gap:9px;background:var(--field);border:1px solid var(--field-line);
  border-radius:9px;padding:8px 10px;cursor:pointer}
.sub-row:hover{background:rgba(255,255,255,.07)}
.sub-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 7px currentColor}
.sub-name{flex:1;color:#dbe3f7;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-badge{color:var(--dim);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.sub-pop{width:24px;height:24px;flex:none;border-radius:7px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#9aa4c4;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center}
.sub-pop:hover{color:#ff8ab0;border-color:rgba(255,138,176,.4)}

/* completed chip */
.done-chip{position:absolute;top:18px;right:66px;display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,rgba(143,243,255,.16),rgba(106,140,255,.16));
  border:1px solid rgba(143,243,255,.35);color:var(--cyan);font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.done-chip:hover{background:linear-gradient(135deg,rgba(143,243,255,.24),rgba(106,140,255,.24))}
.done-chip svg{opacity:.95}

/* options menu */
#ui .opts-btn{pointer-events:auto}
.opts-btn{position:absolute;top:18px;right:20px;width:38px;height:38px;display:flex;z-index:1;
  align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(143,243,255,.28);
  color:#9aa4c4;cursor:pointer;backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.3);
  background:linear-gradient(135deg,rgba(143,243,255,.12),rgba(106,140,255,.12))}
.opts-btn:hover{color:#dfe9ff;background:linear-gradient(135deg,rgba(143,243,255,.22),rgba(106,140,255,.22))}
.opts-btn.active{color:#eaf6ff;border-color:rgba(143,243,255,.55)}
.opts-btn svg{display:block}
.opts-panel{top:66px;right:20px;width:308px;border-radius:16px;padding:16px 16px 8px;
  display:flex;flex-direction:column;gap:6px;z-index:30}
#options[hidden]{display:none}   /* the display:flex above otherwise defeats [hidden] */
.opts-panel .panel-head{margin-bottom:6px}
.opts-volume{border-top:1px solid rgba(255,255,255,.07);padding-top:11px}
.opts-volume .dev-toggle-text{width:100%}
.opts-volume input[type=range]{width:100%;accent-color:#6a8cff;cursor:pointer}

/* completed panel */
#completed{top:var(--viewport-top,0px);right:0;width:392px;height:var(--usable-height,100%);border-left:1px solid var(--line);
  padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.done-total{background:rgba(143,243,255,.14);color:var(--cyan);border:1px solid rgba(143,243,255,.3);
  border-radius:999px;font-size:11px;font-weight:700;padding:2px 9px;margin-left:2px}
.done-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:0 -4px;padding:0 4px}
.done-empty{color:var(--dim);font-size:14px;text-align:center;margin-top:40px;line-height:1.6}
.done-row{display:flex;align-items:center;gap:11px;background:var(--field);
  border:1px solid var(--field-line);border-radius:12px;padding:11px 12px}
.done-dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor}
.done-main{flex:1;min-width:0}
.done-name{color:#eaf0ff;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-meta{color:var(--dim);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-act{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#9aa4c4;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:14px}
.done-act:hover{background:rgba(255,255,255,.1);color:#eaf0ff}
.done-act.restore:hover{color:var(--cyan);border-color:rgba(143,243,255,.4)}
.done-act.del:hover{color:#ff8ab0;border-color:rgba(255,138,176,.4)}

/* scrollbar */
#panel::-webkit-scrollbar,.done-list::-webkit-scrollbar{width:8px}
#panel::-webkit-scrollbar-thumb,.done-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}

/* ---------- boot / loading screen ---------- */
/* Styled as the first bubble unlock ("Soap"): an iridescent film with a white
   gloss, with the name set INSIDE the bubble exactly like a task label. */
#loading{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#0b1226 0%,#05070f 62%);
  opacity:1;transition:opacity .5s ease}
#loading.done{opacity:0;pointer-events:none}
#loading[hidden]{display:none}   /* display:flex above otherwise defeats [hidden] */
#graphics-error{min-height:100vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  max-width:520px;margin:auto;padding:32px;font:16px/1.5 system-ui;color:var(--text)}
#graphics-error[hidden]{display:none}
#graphics-error h1{font-size:24px;margin:0 0 12px}
#graphics-error p{margin:0 0 20px;color:var(--muted)}
#graphics-error button{padding:10px 16px;border-radius:9px;background:var(--cyan);color:var(--bg);border:0;font-weight:700;cursor:pointer}

.load-bubble{position:relative;width:200px;height:200px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* top layer: gloss -> darkened glass core (keeps the label legible)
     -> the Soap colourway's iridescent film at the rim */
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.50), rgba(255,255,255,.05) 38%, transparent 56%),
    radial-gradient(circle at 50% 50%, rgba(7,11,22,.86) 40%, rgba(7,11,22,.30) 72%, transparent 88%),
    conic-gradient(from 0deg, #7ff6ff, #b98cff, #ff8cf0, #ffe08a, #7ff6ff);
  border:1.5px solid rgba(205,240,255,.85);
  box-shadow:0 0 48px rgba(143,243,255,.28), inset 0 0 38px rgba(255,255,255,.10);
  animation:load-float 2.6s ease-in-out infinite}

/* soft specular highlight, as on the bubbles in the sim */
.load-gloss{position:absolute;top:15%;left:19%;width:32%;height:19%;border-radius:50%;
  background:rgba(255,255,255,.8);filter:blur(7px);pointer-events:none}

/* matches the in-bubble task label: 650 30px, white, soft drop shadow */
.load-name{position:relative;color:#fff;font-weight:650;font-size:30px;letter-spacing:.3px;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  text-shadow:0 1px 8px rgba(0,0,0,.55)}

.load-sub{margin-top:24px;color:var(--dim);font-size:12px;letter-spacing:1.4px;
  animation:load-pulse 1.5s ease-in-out infinite}
@keyframes load-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.04)}}
@keyframes load-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- bubble boards ---------- */
.board-chip{position:absolute;top:18px;left:20px;display:flex;align-items:center;gap:7px;
  max-width:260px;background:linear-gradient(135deg,rgba(143,243,255,.16),rgba(106,140,255,.16));
  border:1px solid rgba(143,243,255,.35);color:var(--cyan);font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.board-chip:hover{background:linear-gradient(135deg,rgba(143,243,255,.24),rgba(106,140,255,.24))}
.board-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#boards[hidden]{display:none}   /* display:flex below otherwise defeats [hidden] */
#boards{top:var(--viewport-top,0px);left:0;width:min(344px,100vw);height:var(--usable-height,100%);border-right:1px solid var(--line);
  padding:24px 22px;display:flex;flex-direction:column;gap:14px;
  box-shadow:30px 0 60px rgba(0,0,0,.5)}
#boards.has-integrations{width:min(430px,100vw)}
.board-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:0}
.board-row{display:flex;align-items:center;gap:6px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-soft)}
.board-row.active{background:rgba(143,243,255,.10);border-color:rgba(143,243,255,.42)}
.board-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:transparent;border:none;cursor:pointer;padding:10px 12px;text-align:left;font-family:inherit}
.board-name{color:var(--text);font-size:14px;font-weight:650;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row.active .board-name{color:#eaf6ff}
.board-count{color:var(--dim);font-size:12px;font-weight:500}
.board-row.active .board-count{color:#8fb6cc}
.board-meta{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}
.board-meta .board-count{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.board-integration{flex:none;border-radius:999px;padding:2px 5px;font-size:10px;font-weight:650;
  line-height:1.2;background:rgba(143,243,255,.10);color:#9ce5e9;border:1px solid rgba(143,243,255,.28)}
.board-integration-refreshing{color:#bdd0ff;background:rgba(106,140,255,.15);border-color:rgba(106,140,255,.35)}
.board-integration-disconnected{color:#b9bed3;background:rgba(185,190,211,.10);border-color:rgba(185,190,211,.28)}
.board-integration-error{color:#ffbf91;background:rgba(255,170,100,.12);border-color:rgba(255,170,100,.35)}
.board-acts{display:flex;align-items:center;gap:4px;padding-right:8px}
.board-act{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  color:#8a94b8;border-radius:8px;cursor:pointer;font-size:12px;line-height:1;padding:6px 8px}
.board-act:hover{background:rgba(255,255,255,.11);color:#dfe9ff}
.board-act.del.confirm{background:rgba(255,90,138,.18);border-color:rgba(255,90,138,.5);
  color:#ff9ab8;font-weight:700;padding:6px 10px}
.board-rename{flex:1;margin:6px 8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(140,240,255,.45);border-radius:10px;outline:none;color:#fff;
  font-size:14px;font-weight:600;padding:9px 11px;font-family:inherit}
.board-new{padding-top:2px}
.board-add{width:100%;justify-content:center}

/* "Your image" background card */
.vault-swatch-custom{position:relative;display:flex;align-items:center;justify-content:center}
.vault-swap{position:absolute;top:8px;right:8px;z-index:2;background:rgba(6,10,20,.78);
  border:1px solid rgba(143,243,255,.4);color:var(--cyan);font-size:10px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;padding:4px 7px;border-radius:7px;cursor:pointer}
.vault-swap:hover{background:rgba(143,243,255,.22);color:#eaf6ff}
.vault-remove{position:absolute;top:8px;right:64px;z-index:2;background:rgba(6,10,20,.78);
  border:1px solid rgba(255,138,140,.4);color:#ff8a8c;font-size:10px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;padding:4px 7px;border-radius:7px;cursor:pointer}
.vault-remove:hover{background:rgba(255,138,140,.22);color:#ffe9ea}

/* Provider connections and the native-project preview. */
.opts-panel{max-height:calc(100vh - 84px);overflow-y:auto;max-width:calc(100vw - 40px)}
.integrations-settings{border-top:1px solid var(--line);padding:12px 0 8px;margin-top:6px}
.integrations-settings h3{margin:0 0 10px}
.integration-status,.integration-hint{font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.integration-status{color:#cdd6f0}
.integration-connections{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.integration-connection{padding:12px 0;border-top:1px solid var(--line);font-size:13px}
.integration-connection strong{overflow-wrap:anywhere}
.integration-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.integration-actions .btn{font-size:12px;padding:7px 10px}
.integration-name{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px;margin:10px 0}
.board-source{width:100%;padding:9px;border-radius:8px;background:#141c30;color:#e0e7fa;border:1px solid var(--line)}
.integration-dialog{pointer-events:auto;color:#e0e7fa;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--line);border-radius:16px;padding:24px;width:440px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box}
.integration-dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.integration-dialog h2{font-size:19px;margin:0 0 12px}
.integration-dialog .integration-sample{padding-left:20px;color:#cdd6f0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.integration-dialog input{box-sizing:border-box;width:100%}
.integration-preview[hidden]{display:none}
.integrations-settings button:disabled,.integration-dialog button:disabled{opacity:.45;cursor:default}
.integration-dialog button:focus-visible,.integrations-settings button:focus-visible,.board-source:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* "Your image" failures (decode/size/save) — the previous image is kept */
.vault-err{max-width:100%;color:#ff9aa8;font-size:11px;font-weight:600;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.vault-err[hidden]{display:none}
.vault-card.busy{cursor:progress}
.vault-card.busy .vault-swatch{opacity:.55}

/* ---------- persistence status (save/load failures, recovery notices) ---------- */
#save-status{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1000;
  display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));
  padding:8px 8px 8px 14px;border-radius:12px;font-size:13px;line-height:1.35;color:var(--text);
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid rgba(255,170,120,.45);
  box-shadow:0 12px 32px rgba(0,0,0,.45);pointer-events:auto;user-select:text;-webkit-user-select:text}
#save-status[hidden]{display:none}
#save-status[data-tone="notice"]{border-color:rgba(143,243,255,.35)}
#save-status .save-status-text{overflow-wrap:anywhere}
#save-status .save-status-btn{flex:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:650;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--text)}
#save-status .save-status-btn:hover{background:rgba(255,255,255,.12)}
#save-status .save-status-btn[hidden]{display:none}
#save-status .save-status-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* board reordering (drag handle + drop indicators) */
.board-grip{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 2px 0 8px;
  color:#5b6488;font-size:13px;line-height:1;cursor:grab;user-select:none}
.board-grip:hover{color:#cdd6f0}
.board-grip:active{cursor:grabbing}
.board-row.dragging{opacity:.45}
.board-row.drop-before{box-shadow:inset 0 2px 0 var(--cyan)}
.board-row.drop-after{box-shadow:inset 0 -2px 0 var(--cyan)}
.board-act.move{padding:6px 7px;font-size:11px;line-height:1}
.board-act.move:disabled{opacity:.3;cursor:default;background:rgba(255,255,255,.04)}

/* desktop update ready (bubbles-9tq.2) */
#update-status{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:1000;
  display:flex;align-items:center;gap:10px;max-width:min(620px,calc(100vw - 32px));
  padding:8px 8px 8px 14px;border-radius:12px;font-size:13px;line-height:1.35;color:var(--text);
  background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid rgba(143,243,255,.4);
  box-shadow:0 12px 32px rgba(0,0,0,.45);pointer-events:auto}
#update-status[hidden]{display:none}
#update-status .update-status-text{flex:1;overflow-wrap:anywhere}
#update-status .update-status-btn{flex:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:650;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--text)}
#update-status .update-status-btn:first-of-type{background:linear-gradient(135deg,rgba(143,243,255,.22),rgba(106,140,255,.22))}
#update-status .update-status-btn:disabled{opacity:.6;cursor:default}

/* Options → Updates (bubbles-9tq.3) */
.opts-updates{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.opts-updates-status{color:var(--muted)}
.opts-updates-check{align-self:flex-start;padding:7px 12px;font-size:12px}
.opts-updates-check:disabled{opacity:.5;cursor:default}

/* ---------------------------------------------------------------------------
   Phones and narrow windows (bubbles-5sf.2).

   Every panel was a fixed pixel width — 412, 420, 392, 360, 344 — and there
   were no media rules at all, so on a 375px phone each one ran off the screen
   and the Vault lost 45px of itself past the right edge.

   Side panels go full-bleed instead of being clipped: on a phone a task detail
   or the Vault IS the screen while it is open. The prompt stays centred but
   inside the viewport. Width caps use min() so the change is continuous rather
   than snapping at one breakpoint.
   --------------------------------------------------------------------------- */
#prompt{width:min(360px,calc(100vw - 32px))}
#panel{width:min(412px,100vw)}
#vault{width:min(420px,100vw)}
#completed{width:min(392px,100vw)}
#boards{width:min(344px,100vw)}

@media (max-width:480px){
  /* Full-bleed panels have no board visible beside them, so the inner border
     is just a line down the edge of the screen. */
  #panel,#completed{border-left:none}
  #vault,#boards{border-right:none}
  /* Reclaim horizontal room: the side padding was tuned for a 412px panel. */
  #panel,#vault,#completed,#boards{padding-left:18px;padding-right:18px}
  .status-row{flex-wrap:wrap}
  .status-row .chip{flex:1;min-width:max-content}
  .two-col{flex-wrap:wrap}
  .two-col>div{min-width:120px}
  .prompt-row{flex-wrap:wrap}
  .prompt-hint{flex-basis:100%}
  /* The full hint list cannot fit; keep the ones a new user cannot guess. */
  #hints{left:16px;right:16px;bottom:14px;font-size:12px;gap:2px 12px}
  #hints .roomy{display:none}
}

@media (max-height:420px){
  #panel,#vault,#completed,#boards{padding-top:10px;padding-bottom:10px;gap:8px}
  #prompt{padding:12px;gap:8px}
  #hints{display:none}
}

@media (max-width:360px){
  /* Three hints still wrapped to two lines at 320px, which put them back over
     the lowest bubbles. Tightening the type was not enough, so the one a user
     works out on their own — that tapping a bubble opens it — is dropped, and
     the two that are genuinely not discoverable are kept. */
  #hints{font-size:11px;gap:2px 10px}
  #hints .guessable{display:none}
}