/* ==========================================================================
   ThornOS — dark, sleek, sci-fi theme.
   Palette taken from the rose emblem: crimson petals + leaf green on near-black.
   Same RoseOS structure (bottom taskbar, framed windows) with the raised 90s
   bevels flattened into dark glass; crimson glow only on the active/focused thing.
   Legacy pastel token names are remapped to dark roles so every rule that still
   references them themes correctly without being rewritten.
   ========================================================================== */
:root {
  /* core palette */
  --void:        #08090d;
  --panel:       #12151d;   /* window / card / menu ground */
  --surface:     #0d1017;   /* inputs, insets, window body */
  --raised:      #1a1f2b;   /* buttons, chips, taskbar items */
  --raised-hi:   #242a38;
  --crimson:     #ff2d55;   /* the one accent */
  --crimson-deep:#b3123a;
  --thorn:       #7a0b26;
  --leaf:        #34d17d;   /* success / online */
  --text:        #eaecf4;
  --dim:         #8b93a7;
  --faint:       #5b6376;
  --hair:        rgba(233,236,247,.09);
  --hair-2:      rgba(233,236,247,.14);
  --glow:        rgba(255,45,85,.42);
  --glow-soft:   rgba(255,45,85,.15);

  /* legacy names → dark roles (kept so untouched rules still theme) */
  --pink:        var(--crimson);
  --pink-deep:   var(--crimson-deep);
  --lilac:       #141824;
  --peri:        #1a1f2b;
  --peri-deep:   #2a3145;
  --cream:       var(--panel);
  --ink:         var(--text);
  --ink-soft:    var(--dim);
  --white:       var(--surface);
  --line:        var(--hair);
  --bevel-light: rgba(255,255,255,.05);
  --bevel-dark:  var(--hair-2);

  --radius: 12px;
  --taskbar-h: 46px;

  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --disp: "Chakra Petch", "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--font); color: var(--ink); font-size: 13px; user-select: none; }

#screen { position: fixed; inset: 0; }

/* Free-mode drag bar (Start → Move / Resize Window). Frameless windows need a
   -webkit-app-region:drag surface to be moved on the real desktop. */
#os-dragbar {
  position: absolute; top: 0; left: 0; right: 0; height: 26px; z-index: 13000;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px;
  background: linear-gradient(var(--peri), var(--lilac)); border-bottom: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 8px rgba(120,80,120,.3); font-size: 11px; color: #43354a; -webkit-app-region: drag;
}
.os-dragbar-label { pointer-events: none; letter-spacing: .02em; }
.os-dragbar-btn { -webkit-app-region: no-drag; cursor: pointer; border: 1px solid rgba(120,80,120,.5);
  background: rgba(255,255,255,.65); border-radius: 6px; padding: 2px 14px; font-size: 11px; color: #5a325a; }
.os-dragbar-btn:hover { background: #fff; }
body.free-mode #desktop { top: 26px; }

/* ---- reusable button (flat dark glass) ---- */
.btn {
  font-family: var(--font); font-size: 13px; color: var(--text);
  background: var(--raised);
  border: 1px solid var(--hair-2);
  border-radius: 8px; padding: 6px 14px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--raised-hi); border-color: rgba(233,236,247,.2); }
.btn:active { background: #14171f; }
.btn.primary { background: linear-gradient(var(--crimson), var(--crimson-deep)); border-color: var(--crimson); color: #fff; font-weight: 600; box-shadow: 0 6px 18px -8px var(--glow); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: default; }

input[type=text], input[type=password], textarea, select {
  font-family: var(--font); font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--hair-2);
  border-radius: 8px; padding: 7px 9px; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px var(--glow-soft); }
label.field { display: block; margin: 10px 0; }
label.field > span { display: block; margin-bottom: 4px; color: var(--ink-soft); font-size: 12px; }

/* ==========================================================================
   Fullscreen panels (setup wizard + login) — a calm centered card.
   ========================================================================== */
.panel-bg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 700px at 72% -10%, rgba(255,45,85,.16), transparent 58%),
    radial-gradient(700px 600px at 10% 110%, rgba(52,209,125,.06), transparent 55%),
    var(--void);
}
.card {
  width: 460px; max-width: 92vw; background: var(--panel);
  border: 1px solid var(--hair-2); border-radius: 18px; padding: 26px 28px;
  box-shadow: 0 30px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.04);
}
.card h1 { margin: 0 0 4px; font-size: 24px; font-family: var(--disp); font-weight: 600; letter-spacing: .01em; }
.card h2 { margin: 0 0 14px; font-size: 18px; font-family: var(--disp); font-weight: 600; }
.card p.sub { margin: 0 0 18px; color: var(--dim); }
.card .rose-mark { width: 72px; height: 72px; display: block; margin: 0 auto 14px; filter: drop-shadow(0 0 20px var(--glow)); }
.row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.row.spread { justify-content: space-between; }
.hint { font-size: 12px; color: var(--dim); margin-top: 6px; }
.login-who { margin: 0 0 10px; font-size: 13px; color: var(--dim); text-align: center; }
.login-who b { color: var(--text); }
.login-switch { color: var(--crimson); cursor: pointer; text-decoration: none; }
.login-switch:hover { text-decoration: underline; }
.status-good { color: var(--leaf); } .status-bad { color: #ff5a6e; }
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hair-2); }
.steps .dot.on { background: var(--crimson); box-shadow: 0 0 8px var(--glow); }

/* ==========================================================================
   Desktop
   ========================================================================== */
#desktop {
  position: absolute; inset: 0 0 var(--taskbar-h) 0; overflow: hidden;
  background-size: cover; background-position: center;
}
#desktop.wp-default-bloom { background:
    radial-gradient(1000px 760px at 74% 8%, rgba(255,45,85,.20), transparent 56%),
    radial-gradient(760px 620px at 12% 104%, rgba(52,209,125,.06), transparent 55%),
    linear-gradient(#0a0c12, #070810); }
#desktop.wp-mint   { background: radial-gradient(900px 700px at 75% 20%, #0e2a22 0%, #0b1620 55%, #070810 100%); }
#desktop.wp-butter { background: radial-gradient(900px 700px at 30% 80%, #2a1e0e 0%, #1a1016 55%, #070810 100%); }
#desktop.wp-dusk   { background: linear-gradient(160deg, #1a0f1c 0%, #12131f 50%, #0a0c14 100%); }

.desk-icons { position: absolute; inset: 0; padding: 14px; }
.desk-icon {
  position: absolute; width: 84px; text-align: center; cursor: default;
  padding: 8px 4px; border-radius: 12px; color: #d6dae6;
}
.desk-icon img { width: 42px; height: 42px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); pointer-events: none; }
.desk-icon .lbl {
  display: block; margin-top: 4px; font-size: 12px; line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); word-break: break-word;
}
.desk-icon.sel { background: var(--glow-soft); outline: 1px solid rgba(255,45,85,.4); }
.desk-icon.dim img { opacity: .45; }

/* ---- taskbar ---- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h);
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: linear-gradient(180deg, rgba(18,21,29,.72), rgba(8,9,13,.94));
  border-top: 1px solid var(--hair-2); box-shadow: 0 -6px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(12px);
  z-index: 10000;   /* always above windows — nothing overlaps the taskbar from above */
}
#start-btn {
  display: flex; align-items: center; gap: 8px; font-weight: 600; font-family: var(--disp); letter-spacing: .02em; color: var(--text);
  padding: 5px 14px 5px 8px; border-radius: 10px; cursor: pointer;
}
#start-btn:hover { background: var(--glow-soft); }
#start-btn img { width: 26px; height: 26px; filter: drop-shadow(0 0 6px var(--glow)); }
.task-items { display: flex; gap: 5px; flex: 1; overflow: hidden; align-items: center; }
.task-item {
  display: flex; align-items: center; justify-content: center; padding: 5px; width: 36px; height: 36px;
  background: var(--raised); border: 1px solid var(--hair);
  border-radius: 9px; cursor: pointer; flex-shrink: 0; transition: background .12s, border-color .12s;
}
.task-item:hover { background: var(--raised-hi); }
.task-item img { width: 22px; height: 22px; }
.task-item.active { background: var(--glow-soft); border-color: rgba(255,45,85,.4); box-shadow: 0 0 12px -2px var(--glow) inset; }
.tray { display: flex; align-items: center; gap: 10px; padding-right: 4px; color: var(--dim); }
.tray .net { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.tray .net .led { width: 9px; height: 9px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 6px #ff5a6e; }
.tray .net.online .led { background: var(--leaf); box-shadow: 0 0 6px var(--leaf); }
.tray .clock { font-variant-numeric: tabular-nums; font-family: var(--mono); color: var(--text); }
.tray .sync { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); cursor: pointer; }
.tray .sync-bar { width: 46px; height: 6px; border-radius: 999px; background: var(--hair-2); overflow: hidden; }
.tray .sync-fill { height: 100%; background: linear-gradient(90deg, var(--leaf), var(--crimson)); border-radius: 999px; transition: width .3s ease; }
.tray .sync-n { font-variant-numeric: tabular-nums; opacity: .85; }

/* ---- start menu ---- */
#start-menu {
  position: absolute; left: 8px; bottom: calc(var(--taskbar-h) + 6px); width: 234px;
  background: rgba(18,21,29,.92); border: 1px solid var(--hair-2); border-radius: 14px; padding: 8px;
  box-shadow: 0 24px 50px -20px #000; backdrop-filter: blur(14px); z-index: 10001;
}
#start-menu .head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; font-family: var(--disp); }
#start-menu .head img { width: 30px; height: 30px; filter: drop-shadow(0 0 6px var(--glow)); }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--text); }
.menu-item:hover { background: var(--glow-soft); }
.menu-item img { width: 22px; height: 22px; }
.menu-item.sep { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 10px; }

/* ==========================================================================
   Windows
   ========================================================================== */
.window {
  position: absolute; min-width: 280px; min-height: 160px; background: var(--panel);
  border: 1px solid var(--hair-2); border-radius: var(--radius);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85); display: flex; flex-direction: column; overflow: hidden;
}
.window.active { box-shadow: 0 36px 72px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,45,85,.14); }
.titlebar {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px;
  background: linear-gradient(90deg, rgba(255,45,85,.14), rgba(255,45,85,.03)); color: var(--text); cursor: move;
  border-bottom: 1px solid var(--hair);
}
.window:not(.active) .titlebar { background: #12151d; color: var(--dim); }
.titlebar img { width: 18px; height: 18px; }
.titlebar .title { flex: 1; font-weight: 600; font-family: var(--disp); letter-spacing: .02em; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar .win-btn {
  width: 24px; height: 22px; border-radius: 6px; border: 1px solid var(--hair);
  background: var(--raised); color: var(--dim); display: grid; place-items: center; cursor: pointer; font-size: 13px; line-height: 1;
}
.titlebar .win-btn:hover { background: var(--raised-hi); color: var(--text); }
.titlebar .win-btn.close:hover { background: var(--crimson-deep); border-color: var(--crimson); color: #fff; }
.window-body { flex: 1; overflow: auto; background: var(--surface); }
.resize-handle { position: absolute; width: 16px; height: 16px; right: 0; bottom: 0; cursor: nwse-resize; }

/* ---- explorer ---- */
.explorer { display: flex; flex-direction: column; height: 100%; }
.exp-toolbar { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--hair); background: var(--panel); }
.exp-toolbar .addr { flex: 1; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 8px; padding: 5px 9px; font-size: 12px; color: var(--dim); font-family: var(--mono); }
.exp-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 10px; }
.exp-item { width: 92px; text-align: center; padding: 8px 4px; border-radius: 10px; cursor: default; color: var(--text); }
.exp-item:hover { background: var(--raised); }
.exp-item.sel { background: var(--glow-soft); outline: 1px solid rgba(255,45,85,.4); }
.exp-item img { width: 40px; height: 40px; }
.exp-item .n { display: block; margin-top: 4px; font-size: 12px; word-break: break-word; }
.exp-item.unavailable img { opacity: .4; }
.exp-item .badge { font-size: 10px; color: var(--dim); }
.exp-empty { color: var(--ink-soft); padding: 24px; text-align: center; width: 100%; }
.exp-status { padding: 5px 10px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-soft); display: flex; justify-content: space-between; }

/* ---- notepad ---- */
.notepad { display: flex; flex-direction: column; height: 100%; }
.np-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--hair); background: var(--panel); }
.np-content { flex: 1; position: relative; overflow: hidden; display: flex; }
.notepad textarea {
  flex: 1; border: 0; border-radius: 0; resize: none; padding: 12px 14px; font-family: var(--mono);
  font-size: 13px; line-height: 1.5; background: var(--surface); color: var(--text); user-select: text; caret-color: var(--crimson);
}
.notepad textarea:focus { outline: none; }
.md-preview {
  flex: 1; overflow: auto; padding: 14px 20px; background: var(--surface); user-select: text; color: var(--text); line-height: 1.6;
}
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { color: #ff89a0; margin: .7em 0 .35em; line-height: 1.25; }
.md-preview h1 { font-size: 22px; border-bottom: 2px solid var(--crimson); padding-bottom: .2em; }
.md-preview h2 { font-size: 18px; border-bottom: 1px solid var(--hair); padding-bottom: .2em; }
.md-preview h3 { font-size: 15px; }
.md-preview p { margin: .5em 0; }
.md-preview ul, .md-preview ol { margin: .4em 0 .4em 1.4em; }
.md-preview li { margin: .2em 0; }
.md-preview a { color: var(--crimson); }
.md-preview code { background: #0a0c12; border: 1px solid var(--hair-2); border-radius: 5px; padding: 1px 5px; font-family: var(--mono); font-size: 12px; }
.md-preview pre { background: #0a0c12; border: 1px solid var(--hair-2); border-radius: 8px; padding: 10px 12px; overflow: auto; }
.md-preview pre code { background: none; border: 0; padding: 0; }
.md-preview blockquote { margin: .5em 0; padding: .3em 12px; border-left: 4px solid var(--crimson); background: rgba(255,45,85,.06); color: var(--dim); }
.md-preview hr { border: 0; border-top: 1px solid var(--hair-2); margin: 1em 0; }

/* ---- settings ---- */
.settings { padding: 16px 18px; }
.settings h3 { margin: 18px 0 8px; font-size: 14px; }
.settings h3:first-child { margin-top: 0; }
.wp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-swatch { width: 82px; height: 52px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; box-shadow: 0 2px 6px rgba(90,50,90,.2); }
.wp-swatch.sel { border-color: var(--pink-deep); }
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.conn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; }
.kv span:first-child { color: var(--ink-soft); }
.pin-list { margin-top: 8px; }
.pin-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }

/* ---- media viewer ---- */
.media-viewer { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #2c2230; overflow: auto; }
.media-viewer img, .media-viewer video { max-width: 100%; max-height: 100%; }

/* ---- Colored Cloud ---- */
.cc { display: flex; height: 100%; }
.cc-connect { margin: auto; width: 420px; max-width: 90%; text-align: center; padding: 24px; }
.cc-connect h2 { margin: 10px 0 4px; } .cc-connect .sub { color: var(--ink-soft); margin-bottom: 14px; }
.cc-connect .field { text-align: left; }
.cc-side { width: 200px; flex-shrink: 0; background: var(--cream); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px; overflow-y: auto; }
.cc-side-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #7a3f60; padding: 6px 8px 10px; }
.cc-side-head img { width: 22px; height: 22px; }
.cc-side-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 12px 8px 4px; }
.cc-mini { border: 1px solid var(--bevel-dark); background: #fff; border-radius: 6px; width: 20px; height: 20px; cursor: pointer; line-height: 1; }
.cc-nav { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.cc-nav:hover { background: var(--pink); }
.cc-nav.sel { background: var(--pink-deep); color: #fff; }
.cc-nav.sub { padding-left: 16px; font-size: 12px; }
.cc-count { font-size: 11px; opacity: .7; }
.cc-serverstat { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); padding: 8px; }
.cc-serverstat .led { width: 8px; height: 8px; border-radius: 50%; background: #b4453f; }
.cc-serverstat.on .led { background: #3fae72; }
.cc-host { flex: 1; display: flex; overflow: hidden; }
.cc-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cc-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--cream); flex-wrap: wrap; }
.cc-search { flex: 1; max-width: 340px; }
.cc-iconbtn { display: inline-flex; align-items: center; gap: 6px; }
.cc-ic { width: 15px; height: 15px; }
.cc-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 150px; gap: 8px; padding: 12px; align-content: start; }
.cc-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px; border-top: 1px solid var(--line); background: var(--cream); }
.cc-page-label { font-size: 12px; color: var(--ink-soft); }
.cc-tag-input { border: 1px dashed var(--bevel-dark); border-radius: 12px; padding: 3px 9px; font-size: 12px; width: 120px; background: #fff; }
.cc-tag-inputwrap { position: relative; display: inline-block; }
.cc-tag-drop { position: absolute; top: calc(100% + 3px); left: 0; min-width: 150px; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(90,50,90,.25); z-index: 50; display: none; padding: 3px; }
.cc-tag-drop.open { display: block; }
.cc-tag-opt { padding: 5px 9px; border-radius: 6px; font-size: 12px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.cc-tag-opt b { color: #b0446e; }
.cc-tag-opt:hover, .cc-tag-opt.on { background: #fbeef5; }
.cc-tile { position: relative; height: 150px; border-radius: 10px; overflow: hidden; cursor: pointer; background: #f0e6ee; border: 1px solid var(--line); }
.cc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-tile:hover { outline: 2px solid var(--pink-deep); }
.cc-fav { position: absolute; top: 5px; right: 6px; color: #ff6fa5; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.cc-vid { position: absolute; bottom: 6px; left: 7px; color: #fff; background: rgba(0,0,0,.4); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 10px; }
.cc-cloud { position: absolute; top: 5px; left: 7px; color: #fff; background: rgba(90,120,200,.72); border-radius: 6px; padding: 1px 5px; font-size: 11px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.exp-item .badge.cloud { color: #5f78c8; font-weight: 700; }
.cc-empty { color: var(--ink-soft); padding: 40px; text-align: center; grid-column: 1/-1; }

.cc-lb-bg { position: absolute; inset: 0; background: rgba(60,40,60,.78); z-index: 11000; display: flex; align-items: center; justify-content: center; }
.cc-lightbox { position: relative; width: 92%; height: 90%; display: flex; align-items: stretch; }
.cc-lb-media { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cc-lb-media img, .cc-lb-media video { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.cc-lb-info { width: 280px; background: var(--cream); border-radius: 10px; margin-left: 12px; padding: 16px; overflow-y: auto; }
.cc-lb-name { font-weight: 700; margin-bottom: 10px; word-break: break-word; }
.cc-lb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-lb-close { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; background: #fff; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 2; }
.cc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; background: rgba(255,255,255,.85); border-radius: 8px; display: grid; place-items: center; cursor: pointer; font-size: 28px; color: #7a3f60; z-index: 2; }
.cc-lb-nav.prev { left: -6px; } .cc-lb-nav.next { right: 292px; }
.cc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0; }
.cc-tags-label { font-size: 12px; color: var(--ink-soft); }

/* Shuffle Settings dialog */
.cc-shuf-card { width: 640px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; background: var(--cream);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(90,50,90,.35); overflow: hidden; }
.cc-shuf-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cc-shuf-head b { font-size: 15px; } .cc-shuf-head .sub { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.cc-shuf-cols { display: flex; gap: 14px; padding: 14px 16px; overflow: hidden; flex: 1; min-height: 0; }
.cc-shuf-col { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cc-shuf-list { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; min-height: 140px; }
.cc-shuf-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.cc-shuf-item:hover { background: var(--cream); }
.cc-shuf-item input { accent-color: var(--peri); }
.cc-shuf-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* Upload dialog — drag or browse */
.cc-upload-card { width: 470px; max-width: 92vw; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(90,50,90,.35); overflow: hidden; }
.cc-upload-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cc-upload-head b { font-size: 15px; }
.cc-drop { margin: 16px; border: 2px dashed var(--line); border-radius: 12px; padding: 34px 18px; text-align: center; cursor: pointer; background: var(--white); transition: border-color .12s, background .12s; }
.cc-drop:hover { border-color: var(--peri); }
.cc-drop.over { border-color: var(--peri); background: #f5eefb; }
.cc-drop-ico img { width: 40px; height: 40px; opacity: .82; pointer-events: none; }
.cc-drop-t1 { font-weight: 700; margin-top: 8px; }
.cc-drop-t2 { color: var(--ink-soft); font-size: 12px; margin-top: 3px; }
.cc-drop-status { min-height: 18px; padding: 0 18px 16px; text-align: center; color: var(--ink-soft); font-size: 13px; }

/* Remote Access account manager */
.remote { padding: 16px 18px; overflow-y: auto; height: 100%; color: var(--ink); }
.ra-head { display: flex; gap: 14px; align-items: flex-start; }
.ra-head img { width: 46px; height: 46px; }
.ra-head h2 { margin: 0 0 2px; font-size: 18px; }
.ra-head .sub { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; max-width: 560px; }
.ra-section-label { font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); margin: 18px 0 8px; font-weight: 700; }
.ra-list { display: flex; flex-direction: column; gap: 8px; }
.ra-empty { color: var(--ink-soft); padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.ra-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.ra-who { flex: 1; min-width: 140px; } .ra-name { font-weight: 700; } .ra-user { color: var(--ink-soft); font-size: 12px; }
.ra-sel, .ra-in { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font: inherit; }
.ra-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.ra-in { flex: 1; min-width: 130px; }
.ra-msg { color: #b5455f; font-size: 12px; width: 100%; }
.ra-note { margin-top: 16px; padding: 12px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.ra-note code { background: var(--white); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-family: "Consolas", monospace; color: var(--ink); }
.ra-app-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); margin: 18px 0 8px; }
.ra-app-label img { width: 18px; height: 18px; }
/* Universe access editor */
.ra-acc-card { width: 520px; max-width: 94vw; max-height: 84vh; display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(90,50,90,.35); overflow: hidden; }
.ra-acc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ra-field { display: block; padding: 12px 16px 0; } .ra-flabel { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 5px; font-weight: 700; }
.ra-acc-hint { padding: 8px 16px 4px; font-size: 12px; color: var(--ink-soft); }
.ra-acc-collabel { padding: 8px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--peri); }
.ra-acc-list { margin: 0 16px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; flex: 1; min-height: 120px; }
.ra-acc-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.ra-acc-item:hover { background: var(--cream); } .ra-acc-item input { accent-color: var(--peri); }
.ra-acc-sub { color: var(--ink-soft); font-size: 12px; }
.ra-acc-group { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--peri); padding: 8px 8px 3px; border-top: 1px solid var(--line); margin-top: 4px; }
.ra-acc-group:first-child { border-top: none; margin-top: 0; }
.ra-acc-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }

/* ---- Randomizer ---- */
.rz { display: flex; flex-direction: column; height: 100%; color: var(--ink); }
.rz-tabs { display: flex; gap: 6px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); }
.rz-tab { background: var(--cream); border: 1px solid var(--line); border-bottom: none; border-radius: 9px 9px 0 0; padding: 8px 16px; cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.rz-tab.on { background: var(--white); color: var(--ink); border-color: var(--peri); }
.rz-panel { flex: 1; overflow: auto; padding: 16px 18px; }
/* wheel */
.rz-panel:first-of-type, .rz { }
.rz-panel .rz-wheelwrap { display: inline-block; vertical-align: top; text-align: center; width: 300px; }
.rz-panel .rz-controls { display: inline-block; vertical-align: top; width: calc(100% - 320px); min-width: 260px; padding-left: 18px; }
.rz-wheelhost .rz-wheel { width: 280px; height: 280px; }
.rz-wheel-g { transform-box: fill-box; transform-origin: center; }
.rz-spin { margin-top: 8px; width: 160px; font-size: 15px; letter-spacing: .06em; }
.rz-result { margin-top: 12px; font-size: 18px; font-weight: 700; min-height: 26px; color: var(--crimson); }
.rz-row { display: flex; gap: 8px; margin: 8px 0; align-items: center; flex-wrap: wrap; }
.rz-in, .rz-sel { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font: inherit; }
.rz-in { flex: 1; min-width: 120px; } .rz-sel { flex: 1; }
.rz-entries { max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 6px; margin: 6px 0; }
.rz-entry { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-radius: 7px; } .rz-entry:hover { background: var(--cream); }
.rz-entry-x { cursor: pointer; color: var(--dim); font-size: 16px; } .rz-entry-x:hover { color: #ff5a6e; }
.rz-empty { color: var(--ink-soft); padding: 10px; text-align: center; }
.rz-opt { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 13px; } .rz-opt input { accent-color: var(--peri); margin-top: 2px; } .rz-opt-sub { color: var(--ink-soft); }
.rz-section-label { font-size: 11px; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; margin: 14px 0 4px; }
.rz-pointer { filter: drop-shadow(0 1px 1px rgba(90,50,90,.4)); }
/* random number */
.rz-modes { display: flex; gap: 6px; margin-bottom: 14px; }
.rz-mode { background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.rz-mode.on { background: var(--glow-soft); color: var(--text); border-color: rgba(255,45,85,.4); }
.rz-numfields { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rz-field { display: block; } .rz-flabel { display: block; font-size: 11px; color: var(--ink-soft); margin-bottom: 5px; font-weight: 700; }
.rz-gen { width: 180px; font-size: 15px; letter-spacing: .06em; }
.rz-numresult-wrap { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.rz-numresult { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--crimson); letter-spacing: .04em; word-break: break-all; text-shadow: 0 0 18px var(--glow); }
.cc-tag { display: inline-flex; align-items: center; gap: 3px; background: var(--pink); border-radius: 12px; padding: 2px 8px; font-size: 12px; cursor: default; }
.cc-tag .x { cursor: pointer; opacity: .6; } .cc-tag .x:hover { opacity: 1; }
.cc-tag.auto { background: #e7dcf5; }
.cc-tag.auto .cc-conf { font-size: 10px; opacity: .6; margin-left: 1px; }
.cc-sugg { margin-top: 2px; }
.cc-tag.auto .ok, .cc-tag.auto .no { cursor: pointer; font-weight: 700; margin-left: 2px; }
.cc-tag.auto .ok { color: #2f7d54; } .cc-tag.auto .no { color: #b4453f; }
.cc-mvi-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cc-mvi-refs .cc-tag { background: #d9e4f7; cursor: pointer; } .cc-mvi-refs .cc-tag:hover { background: #c6d4ef; }
.cc-review { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cc-review-row { display: flex; gap: 12px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.cc-review-thumb, .cc-review-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cc-dup { display: flex; gap: 14px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.cc-dup-item { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.cc-dup-item img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; }

/* ==========================================================================
   Multiversal Index — dark police/DMV records theme (deliberately NOT pastel)
   ========================================================================== */
/* dark window chrome */
.window.win-dark { background: #0b1220; border-color: #24344d; }
.win-dark .titlebar { background: linear-gradient(#1c2c46, #101d34); color: #cfe3f5; border-bottom-color: #24344d; }
.win-dark:not(.active) .titlebar { background: linear-gradient(#161f30, #10192a); color: #6b7d96; }
.win-dark .win-btn { background: #1b2a42; border-color: #31496c; color: #cfe3f5; }
.win-dark .win-btn:hover { background: #26395a; }
.win-dark .win-btn.close:hover { background: #7a2a2a; }
.win-dark .window-body { background: #0b1220; }

.mvi {
  --d-bg: #0b1220; --d-panel: #121d30; --d-line: #24344d; --d-line2: #1a2740;
  --d-text: #cdd9e8; --d-dim: #6b7d96; --d-accent: #5fa8d3; --d-accent2: #7fd0ff;
  color: var(--d-text); background: var(--d-bg); height: 100%; display: flex; flex-direction: column;
  font-family: "Segoe UI", Tahoma, sans-serif; overflow: hidden;
}
.mvi .mono { font-family: "Consolas", "Courier New", monospace; letter-spacing: .04em; }
/* Force the dark theme onto form controls (out-specifies the pastel base rules). */
.mvi input[type=text], .mvi input[type=password], .mvi input[type=number], .mvi textarea, .mvi select {
  background: #0c1524; border: 1px solid var(--d-line); color: var(--d-text); border-radius: 6px;
}
.mvi input[type=text]:focus, .mvi input[type=password]:focus, .mvi textarea:focus, .mvi select:focus { outline: 2px solid var(--d-accent); outline-offset: -1px; }
.mvi input::placeholder, .mvi textarea::placeholder { color: #4f637f; }

/* internal browser-style tabs */
.mvi-tabs-wrap {
  --d-bg: #0b1220; --d-panel: #121d30; --d-line: #24344d; --d-line2: #1a2740;
  --d-text: #cdd9e8; --d-dim: #6b7d96; --d-accent: #5fa8d3; --d-accent2: #7fd0ff;
  display: flex; flex-direction: column; height: 100%; background: #0b1220;
}
.mvi-tabstrip { display: flex; align-items: stretch; gap: 2px; padding: 6px 8px 0; background: #0d1626; border-bottom: 1px solid var(--d-line); overflow-x: auto; }
.mvi-tab { display: flex; align-items: center; gap: 8px; max-width: 200px; padding: 8px 12px; background: #131d30; border: 1px solid var(--d-line); border-bottom: none;
  border-radius: 8px 8px 0 0; cursor: pointer; color: var(--d-dim); font-size: 12px; white-space: nowrap; }
.mvi-tab.active { background: #0b1220; color: #eaf3fb; border-color: var(--d-accent); }
.mvi-tablabel { overflow: hidden; text-overflow: ellipsis; }
.mvi-tabx { color: var(--d-dim); font-size: 14px; line-height: 1; } .mvi-tabx:hover { color: #f0a9a9; }
.mvi-tabadd { background: transparent; border: 1px solid var(--d-line); color: var(--d-accent); border-radius: 8px 8px 0 0; padding: 0 12px; cursor: pointer; font-size: 16px; }
.mvi-tabadd:hover { background: #16233a; }
.mvi-tabhost { flex: 1; position: relative; overflow: hidden; display: flex; }
.mvi-tabhost > .mvi { flex: 1; }
.mvi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px;
  background: linear-gradient(#14213a, #0d1626); border-bottom: 1px solid var(--d-line); }
.mvi-title { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.mvi-title img { width: 28px; height: 28px; flex-shrink: 0; }
.mvi-t1 { font-size: 15px; font-weight: 800; letter-spacing: .05em; color: #eaf3fb; white-space: nowrap; }
.mvi-t2 { font-size: 10px; letter-spacing: .16em; color: var(--d-accent); font-family: "Consolas", monospace; white-space: nowrap; }
/* Actions wrap instead of clipping when the window is small; the whole block drops
   below the title on very narrow widths. */
.mvi-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: 1 1 auto; }
.mvi-body { flex: 1; overflow-y: auto; padding: 16px; }

.mvi-btn { font-family: "Consolas", monospace; font-size: 12px; letter-spacing: .05em; color: #cfe3f5;
  background: #1a2942; border: 1px solid #31496c; border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.mvi-btn:hover { background: #24365a; }
/* Header nav buttons size to their label (no fixed width) so the bar stays tidy and never clips. */
.mvi-btn.nav { text-align: center; }
.mvi-btn.primary { background: linear-gradient(#2f6ea5, #245a86); border-color: #3f82bd; color: #fff; font-weight: 700; }
.mvi-btn.danger { border-color: #7a3a3a; color: #f0a9a9; } .mvi-btn.danger:hover { background: #5a2222; }

/* records table */
.mvi-table { border: 1px solid var(--d-line); border-radius: 8px; overflow: hidden; }
.mvi-tr { display: grid; grid-template-columns: 90px 1.6fr 1.1fr 130px 1fr 90px; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--d-line2); cursor: pointer; font-size: 13px; }
.mvi-tr:last-child { border-bottom: 0; }
.mvi-tr:not(.mvi-th):hover { background: #16233a; }
.mvi-th { background: #0f1a2c; color: var(--d-dim); font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .12em; cursor: default; }
.mvi-tr .c-desig { font-family: "Consolas", monospace; color: var(--d-accent2); }
.mvi-tr .c-name { font-weight: 700; color: #eaf3fb; }
.mvi-tr .c-branch, .mvi-tr .c-kind { color: var(--d-dim); }
.mvi-empty { padding: 40px; text-align: center; color: var(--d-dim); font-family: "Consolas", monospace; }

/* colored status pills */
.mvi-stat { font-family: "Consolas", monospace; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; border: 1px solid transparent; }
/* Universe-type badge: glassy, glowing — same look as the status badges. Colour,
   tinted background, edge and glow are all set inline per type (see typeBadge). */
.mvi-type { font-family: "Consolas", monospace; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; display: inline-block; border: 1px solid transparent; }
.st-green { color: #57d98a; background: rgba(63,174,114,.12); border-color: rgba(63,174,114,.4); }
.st-yellow { color: #e8c568; background: rgba(224,179,74,.12); border-color: rgba(224,179,74,.4); }
.st-red { color: #f07777; background: rgba(224,90,90,.12); border-color: rgba(224,90,90,.4); }
.st-orange { color: #f0a95a; background: rgba(240,169,90,.12); border-color: rgba(240,169,90,.45); }
.st-purple { color: #c79cf0; background: rgba(176,124,224,.14); border-color: rgba(176,124,224,.45); }
.st-pink { color: #ff9ec9; background: rgba(246,124,178,.16); border-color: rgba(246,124,178,.5); }
.st-dim { color: var(--d-dim); border-color: var(--d-line); }

/* record view */
.mvi-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 18px; }
.mvi-fact { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mvi-label { font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .12em; color: var(--d-dim); }
.mvi-section-label { font-family: "Consolas", monospace; font-size: 11px; letter-spacing: .14em; color: var(--d-accent); margin: 4px 0 8px; }
.mvi-notes { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 8px; padding: 14px 18px; line-height: 1.6; }
.mvi-notes h1, .mvi-notes h2, .mvi-notes h3 { color: #eaf3fb; margin: .6em 0 .3em; }
.mvi-notes h1 { font-size: 19px; border-bottom: 1px solid var(--d-line); padding-bottom: .2em; }
.mvi-notes a { color: var(--d-accent2); } .mvi-notes code { background: #0c1524; border: 1px solid var(--d-line); border-radius: 4px; padding: 1px 5px; font-family: "Consolas", monospace; }
.mvi-notes pre { background: #0c1524; border: 1px solid var(--d-line); border-radius: 6px; padding: 10px; overflow: auto; }
.mvi-notes blockquote { border-left: 3px solid var(--d-accent); margin: .5em 0; padding: .2em 12px; color: var(--d-dim); }
.mvi-notes .md-small { font-size: 11px; color: var(--d-dim); line-height: 1.4; }

/* form */
.mvi-form { max-width: 720px; }
.mvi-field { display: block; margin-bottom: 14px; }
.mvi-field > .mvi-label { display: block; margin-bottom: 6px; }
.mvi-input, .mvi-textarea { width: 100%; background: #0c1524; border: 1px solid var(--d-line); border-radius: 6px; color: var(--d-text);
  padding: 8px 10px; font-family: "Segoe UI", sans-serif; font-size: 13px; }
.mvi-input:focus, .mvi-textarea:focus { outline: 2px solid var(--d-accent); outline-offset: -1px; }
.mvi-textarea { min-height: 160px; resize: vertical; font-family: "Consolas", monospace; line-height: 1.5; }
.mvi-readonly { background: #0c1524; border: 1px dashed var(--d-line); border-radius: 6px; padding: 8px 10px; color: var(--d-accent2); }
.mvi-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.mvi-opt { font-family: "Consolas", monospace; font-size: 12px; color: var(--d-dim); background: #0c1524; border: 1px solid var(--d-line);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.mvi-opt:hover { border-color: var(--d-accent); color: var(--d-text); }
.mvi-opt.on { background: linear-gradient(#2f6ea5, #245a86); border-color: #3f82bd; color: #fff; font-weight: 700; }
.mvi-msg { color: #f07777; font-family: "Consolas", monospace; font-size: 12px; min-height: 16px; margin-top: 4px; }

.mvi-select { width: 100%; background: #0c1524; border: 1px solid var(--d-line); border-radius: 6px; color: var(--d-text);
  padding: 8px 10px; font-family: "Segoe UI", sans-serif; font-size: 13px; }
.mvi-select:focus { outline: 2px solid var(--d-accent); outline-offset: -1px; }
.mvi-select optgroup { color: var(--d-accent); background: #0c1524; } .mvi-select option { color: var(--d-text); background: #0f1a2c; }
.mvi-btn.small { padding: 4px 10px; font-size: 11px; }
.mvi-btn.active { background: linear-gradient(#2f6ea5, #245a86); border-color: #3f82bd; color: #fff; }

/* sub-entity sections inside a Universe / multiverse-level */
.mvi-subsection { margin-top: 18px; border-top: 1px solid var(--d-line2); padding-top: 12px; }
.mvi-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mvi-subhead .mvi-section-label { margin: 0; }
.mvi-sublist { border: 1px solid var(--d-line); border-radius: 8px; overflow: hidden; }
.mvi-subrow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--d-line2); cursor: pointer; font-size: 13px; }
.mvi-subrow:last-child { border-bottom: 0; } .mvi-subrow:hover { background: #16233a; }
.mvi-subname { font-weight: 700; color: #eaf3fb; }
.mvi-subtype { font-family: "Consolas", monospace; font-size: 11px; color: var(--d-dim); }
.mvi-subrow .mvi-stat { margin-left: auto; }
.mvi-subtype + .mvi-stat { margin-left: auto; }
/* Only the FIRST trailing badge floats right; the rest sit beside it as one group. */
.mvi-subrow .mvi-stat ~ .mvi-stat { margin-left: 6px; }
.mvi-subempty { padding: 12px 14px; color: var(--d-dim); font-family: "Consolas", monospace; font-size: 12px; }
.mvi-tree { color: var(--d-dim); font-family: "Consolas", monospace; }

/* search / refine */
.mvi-search-refine { background: #0f1a2c; border: 1px solid var(--d-line); border-radius: 10px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.mvi-search-selects { display: flex; gap: 12px; flex-wrap: wrap; }
.mvi-search-selects > .mvi-field { flex: 1; min-width: 220px; }
.mvi-search-input { width: 100%; }
.mvi-stable { border: 1px solid var(--d-line); border-radius: 8px; overflow: hidden; }
.mvi-str { display: grid; grid-template-columns: 1.7fr 130px 1fr 130px; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--d-line2); cursor: pointer; }
.mvi-str:last-child { border-bottom: 0; }
.mvi-str.mvi-th { background: #0f1a2c; color: var(--d-dim); font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .12em; cursor: default; }
.mvi-str:not(.mvi-th):hover { background: #16233a; }
.mvi-str .c-name { font-weight: 700; color: #eaf3fb; }
.mvi-str .c-kind, .mvi-str .c-branch { color: var(--d-dim); }

/* multiverse visualizer (tree) — drag to pan, wheel to zoom */
.mvi-map-body { position: relative; overflow: hidden; display: flex; }
.mvi-map-scroll { flex: 1; position: relative; overflow: hidden; }
.mvi-map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab;
  background: radial-gradient(1000px 700px at 50% 0%, rgba(95,168,211,.06), transparent 60%); }
.mvi-map.grabbing { cursor: grabbing; }
.mvi-map-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.mvi-map-zbtn { width: 30px; height: 30px; font-size: 15px; line-height: 1; background: rgba(15,26,44,.95); color: var(--d-text);
  border: 1px solid var(--d-line); border-radius: 8px; cursor: pointer; }
.mvi-map-zbtn:hover { border-color: var(--d-accent); color: #eaf3fb; }
.mvi-map-link { fill: none; stroke: #2c3f5c; stroke-width: 2; }
.mvi-map-node rect { fill: #131d30; stroke: #2c3f5c; stroke-width: 1.5; transition: filter .12s; }
.mvi-map-node.nexus rect { fill: #17284260; stroke: #7fd0ff; stroke-width: 2.5; }
.mvi-map-node.branch rect { fill: #16233a; stroke: #3f6ea5; }
/* Universe boxes: glassy dark fill faintly tinted by type, with a glowing type-coloured edge. */
.mvi-map-node.univ rect { fill: var(--tfill, #131d30); stroke: var(--tglow, #2c3f5c); stroke-width: 2; filter: drop-shadow(0 0 3px var(--tglow, transparent)); transition: filter .12s; }
.mvi-map-node.univ .mvi-map-desig { fill: var(--tglow, #7fd0ff); }
.mvi-map-node.univ:hover rect { filter: drop-shadow(0 0 9px var(--tglow, #7fd0ff)); }
.mvi-map-t1 { fill: #eaf3fb; font: 700 12px "Consolas", monospace; letter-spacing: .04em; }
.mvi-map-t2 { fill: #9db4d0; font: 11px "Segoe UI", sans-serif; }
.mvi-map-desig { fill: #7fd0ff; font: 700 12px "Consolas", monospace; letter-spacing: .06em; }
.mvi-map-node.nexus .mvi-map-t1 { fill: #bfe4ff; letter-spacing: .1em; }
.mvi-map-node.branch .mvi-map-t1 { fill: #cfe0f2; }
.mvi-map-pip { stroke: #0b1220; stroke-width: 1.5; }
.mvi-map-node.univ:hover .mvi-map-pip { stroke: #16233a; }
/* corner colour key */
.mvi-map-key { position: absolute; left: 14px; bottom: 14px; z-index: 5;
  background: rgba(15,26,44,.96); border: 1px solid var(--d-line); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.mvi-map-keyhead { font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .08em; color: var(--d-dim); margin-bottom: 8px; cursor: pointer; user-select: none; }
.mvi-map-keyhead:hover { color: var(--d-text); }
.mvi-map-key.collapsed { padding: 7px 11px; }
.mvi-map-key.collapsed .mvi-map-keyhead { margin-bottom: 0; }
.mvi-map-key.collapsed .mvi-map-keycols, .mvi-map-key.collapsed .mvi-map-keyfoot { display: none; }
.mvi-map-keycols { display: flex; gap: 18px; flex-wrap: wrap; }
.mvi-map-keyh { font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .06em; color: var(--d-accent); margin-bottom: 5px; }
.mvi-map-keyrow { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 11px; color: var(--d-text); }
.mvi-map-keysw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.4); }
.mvi-map-keyfoot { margin-top: 8px; font-size: 10px; color: var(--d-dim); }

/* images: main + gallery */
.mvi-images { margin-bottom: 18px; }
.mvi-img-row { display: flex; gap: 16px; flex-wrap: wrap; }
.mvi-main-col { width: 220px; flex-shrink: 0; }
.mvi-main-img { width: 220px; height: 160px; border: 1px solid var(--d-line); border-radius: 8px; overflow: hidden; background: #0c1524; display: grid; place-items: center; }
.mvi-main-img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.mvi-noimg { color: var(--d-dim); font-family: "Consolas", monospace; font-size: 11px; letter-spacing: .1em; }
.mvi-img-ctrls { display: flex; gap: 6px; margin-top: 8px; }
.mvi-gal-col { flex: 1; min-width: 240px; }
.mvi-glabel { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mvi-glabel span { font-family: "Consolas", monospace; font-size: 10px; letter-spacing: .12em; color: var(--d-dim); }
.mvi-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.mvi-gitem { position: relative; aspect-ratio: 1; border: 1px solid var(--d-line); border-radius: 6px; overflow: hidden; background: #0c1524; }
.mvi-gitem img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.mvi-gx { position: absolute; top: 2px; right: 3px; background: rgba(10,16,26,.8); color: #f0a9a9; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 13px; }

/* image picker (browse Colored Cloud) */
.mvi-picker-bg {
  --d-bg: #0b1220; --d-panel: #121d30; --d-line: #24344d; --d-text: #cdd9e8; --d-dim: #6b7d96; --d-accent: #5fa8d3;
  position: absolute; inset: 0; background: rgba(6,10,18,.8); z-index: 12500; display: grid; place-items: center;
}
.mvi-picker { width: 86%; height: 84%; background: #0d1626; border: 1px solid var(--d-line); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.6); }
.mvi-picker-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--d-line); background: #101d34; }
.mvi-picker-title { font-family: "Consolas", monospace; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #eaf3fb; white-space: nowrap; }
.mvi-pick-search { flex: 1; max-width: 420px; background: #0c1524; border: 1px solid var(--d-line); color: var(--d-text); border-radius: 6px; padding: 7px 10px; }
.mvi-pick-search:focus { outline: 2px solid var(--d-accent); outline-offset: -1px; }
.mvi-picker-head .mvi-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mvi-pick-selcount { color: var(--d-accent2, #7fd0ff); font-size: 12px; font-family: "Consolas", monospace; }
.mvi-pick-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 14px; align-content: start; }
.mvi-pick { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #0c1524; }
.mvi-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mvi-pick:hover { border-color: var(--d-accent); } .mvi-pick.sel { border-color: #57d98a; box-shadow: 0 0 0 2px rgba(87,217,138,.4) inset; }
.mvi-picker-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--d-line); background: #101d34; }
.mvi-pick-page { color: var(--d-dim); font-size: 12px; font-family: "Consolas", monospace; letter-spacing: .04em; }
.mvi-btn.small:disabled { opacity: .35; cursor: default; }

/* Dark themed scrollbars across the Multiversal Index + its picker. */
.mvi-tabs-wrap ::-webkit-scrollbar, .mvi-picker-bg ::-webkit-scrollbar { width: 12px; height: 12px; }
.mvi-tabs-wrap ::-webkit-scrollbar-track, .mvi-picker-bg ::-webkit-scrollbar-track { background: #0b1220; }
.mvi-tabs-wrap ::-webkit-scrollbar-thumb, .mvi-picker-bg ::-webkit-scrollbar-thumb { background: #24344d; border: 3px solid #0b1220; border-radius: 8px; }
.mvi-tabs-wrap ::-webkit-scrollbar-thumb:hover, .mvi-picker-bg ::-webkit-scrollbar-thumb:hover { background: #33507a; }
.mvi-tabs-wrap, .mvi-picker-bg { scrollbar-color: #24344d #0b1220; scrollbar-width: thin; }

/* image viewer with references */
.mvi-viewer-bg { position: absolute; inset: 0; background: rgba(6,10,18,.85); z-index: 12500; display: grid; place-items: center; }
.mvi-viewer { position: relative; width: 86%; height: 84%; display: flex; gap: 12px; overflow: hidden; }
.mvi-viewer-imgwrap { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0c1524; border-radius: 8px; }
.mvi-viewer-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* Start → Move Window: cue for the window following the cursor */
.window.moving { outline: 2px solid rgba(127, 208, 255, .7); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mvi-viewer-info { width: 260px; flex-shrink: 0; background: #0d1626; border: 1px solid var(--d-line); border-radius: 10px; padding: 14px; overflow-y: auto; }
.mvi-viewer-close { position: absolute; top: -8px; right: 268px; width: 30px; height: 30px; background: #1b2a42; border: 1px solid var(--d-line); border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #cfe3f5; z-index: 2; }
.mvi-ref-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--d-line); border-radius: 7px; margin-bottom: 6px; cursor: pointer; }
.mvi-ref-row:hover { background: #16233a; border-color: var(--d-accent); }

/* reference chips + autocomplete + relations */
.mvi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mvi-chip { display: inline-flex; align-items: center; gap: 6px; background: #16233a; border: 1px solid var(--d-line); border-radius: 14px; padding: 3px 10px; font-size: 12px; color: var(--d-text); }
.mvi-chip .mvi-chiptype { font-family: "Consolas", monospace; font-size: 9px; color: var(--d-dim); text-transform: uppercase; }
.mvi-chip .x { cursor: pointer; color: var(--d-dim); } .mvi-chip .x:hover { color: #f0a9a9; }
.mvi-chip.link { cursor: pointer; } .mvi-chip.link:hover { border-color: var(--d-accent); color: var(--d-accent2); }
.mvi-subname.link { cursor: pointer; } .mvi-subname.link:hover { color: var(--d-accent2); text-decoration: underline; }
.mvi-ref { display: flex; flex-direction: column; gap: 6px; }
.mvi-ref-inputwrap { position: relative; }
.mvi-ref-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: #0f1a2c; border: 1px solid var(--d-line); border-radius: 6px; margin-top: 2px; max-height: 220px; overflow-y: auto; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.mvi-ref-drop.open { display: block; }
.mvi-ref-opt { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--d-line2); }
.mvi-ref-opt:hover { background: #16233a; }
.mvi-rel-add { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.mvi-rel-add .mvi-ref { flex: 2; gap: 0; }
.mvi-rel-add .mvi-chips:empty { display: none; }          /* don't reserve a blank row above the input */
.mvi-rel-add .mvi-chips:not(:empty) { margin-bottom: 6px; }
.mvi-rel-label { flex: 1; max-width: 240px; }
.mvi-rel-add .mvi-btn { align-self: center; white-space: nowrap; }
.mvi-rel-tag { font-size: 11px; color: var(--d-accent2); background: rgba(95,168,211,.12); border: 1px solid rgba(95,168,211,.35); border-radius: 4px; padding: 1px 7px; }
.mvi-rel-x { margin-left: auto; cursor: pointer; color: var(--d-dim); font-family: "Consolas", monospace; font-size: 11px; }
.mvi-rel-x:hover { color: #f0a9a9; }

/* dark confirm dialog */
.mvi-dialog-bg { position: absolute; inset: 0; background: rgba(6,10,18,.7); z-index: 12000; display: grid; place-items: center; }
.mvi-dialog { background: #121d30; border: 1px solid var(--d-line); border-radius: 10px; padding: 20px; width: 340px; color: #cdd9e8; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
.mvi-dialog-msg { margin-bottom: 16px; }
.mvi-dialog-row { display: flex; justify-content: flex-end; gap: 8px; }
.mvi-dialog-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; max-height: 52vh; overflow-y: auto; }
.mvi-move-opt { text-align: left; }
.mvi-move-opt.cur { opacity: .5; }

/* ---- context menu ---- */
.ctx-menu {
  position: absolute; z-index: 9500; background: rgba(18,21,29,.95); border: 1px solid var(--hair-2);
  border-radius: 10px; padding: 5px; box-shadow: 0 20px 44px -16px #000; backdrop-filter: blur(14px); min-width: 168px; color: var(--text);
}
.ctx-menu .ci { padding: 7px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.ctx-menu .ci:hover { background: var(--glow-soft); }
.ctx-menu .ci.sep { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 8px; }
.ctx-menu .ci.disabled { color: var(--faint); cursor: default; }
.ctx-menu .ci.disabled:hover { background: transparent; }

/* ---- toast ---- */
#toasts { position: absolute; right: 14px; bottom: calc(var(--taskbar-h) + 12px); display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast { background: rgba(18,21,29,.96); color: var(--text); border: 1px solid var(--hair-2); border-left: 4px solid var(--crimson); border-radius: 9px; padding: 10px 14px; box-shadow: 0 12px 30px -12px #000; max-width: 300px; font-size: 12px; }

/* ============================ Eden (Library) ============================ */
.fi { display: flex; flex-direction: column; height: 100%; background: linear-gradient(160deg, #10131c, #0a0c12); color: var(--text); }
.fi-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.02); }
.fi-brand { display: flex; align-items: center; gap: 7px; font-size: 15px; font-family: var(--disp); font-weight: 600; color: var(--text); }
.fi-logo { font-size: 18px; }
.fi-search { flex: 1; min-width: 120px; padding: 7px 11px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; }
.fi-search:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px var(--glow-soft); }
.fi-select { padding: 6px 8px; border: 1px solid var(--hair-2); border-radius: 8px; background: var(--surface); color: var(--text); }

.fi-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.015); }
.fi-chip-label { font-size: 11px; color: var(--dim); margin: 0 2px 0 8px; letter-spacing: .04em; text-transform: uppercase; }
.fi-chip { border: 1px solid var(--hair-2); background: var(--raised); color: var(--dim); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.fi-chip:hover { border-color: rgba(255,45,85,.5); color: var(--text); }
.fi-chip.on { background: linear-gradient(var(--crimson), var(--crimson-deep)); border-color: var(--crimson); color: #fff; font-weight: 600; }

.fi-scroll { flex: 1; overflow: auto; padding: 16px; }
.fi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.fi-card { cursor: pointer; display: flex; flex-direction: column; gap: 7px; transition: transform .12s ease; }
.fi-card:hover { transform: translateY(-3px); }
.fi-cover-wrap { position: relative; }
.fi-cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 22px -10px #000; background: #14161f; display: block; }
.fi-cover-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; background: linear-gradient(150deg, #ff3b5f, #8f0f30); color: #fff; }
.fi-cover-ico { font-size: 34px; }
.fi-cover-title { font-size: 12px; font-weight: 700; line-height: 1.25; max-height: 4.8em; overflow: hidden; }
.fi-ext { position: absolute; top: 7px; right: 7px; background: rgba(8,9,13,.8); color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--hair); }
.fi-badges { position: absolute; top: 7px; left: 7px; display: flex; gap: 4px; }
.fi-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; background: rgba(8,9,13,.82); border: 1px solid var(--hair-2); box-shadow: 0 2px 6px -2px #000; }
.fi-badge.cloud { color: var(--dim); }
.fi-badge.pub { color: var(--leaf); border-color: rgba(52,209,125,.4); }
.btn.pub-on { border-color: rgba(52,209,125,.5); color: var(--leaf); background: rgba(52,209,125,.08); }
.fi-meta { padding: 0 2px; }
.fi-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fi-author { font-size: 11.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fi-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fi-empty-ico { font-size: 46px; }
.fi-empty-sub { font-size: 12px; }

/* add dialog */
.fi-upload-card { width: 460px; max-width: 92vw; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 18px 50px rgba(80,50,90,.4); }
.fi-upload-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--text); font-family: var(--disp); font-weight: 600; }
.fi-drop { border: 2px dashed var(--hair-2); border-radius: 12px; padding: 34px 18px; text-align: center; cursor: pointer; background: var(--surface); }
.fi-drop.over { background: var(--glow-soft); border-color: var(--crimson); }
.fi-drop-ico { font-size: 40px; }
.fi-drop-t1 { font-size: 15px; font-weight: 600; margin-top: 8px; color: var(--text); }
.fi-drop-t2 { font-size: 12px; color: var(--dim); margin-top: 4px; }
.fi-drop-status { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--dim); text-align: center; }

/* detail / edit */
.fi-d-head { padding: 10px 12px; border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.02); }
.fi-d-body { flex: 1; overflow: auto; display: flex; gap: 22px; padding: 20px; }
.fi-d-left { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 230px; flex-shrink: 0; }
.fi-d-cover { width: 230px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 26px rgba(110,80,120,.32); }
.fi-cover-btn { width: 100%; }
.fi-d-info { flex: 1; display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.fi-field { display: flex; flex-direction: column; gap: 4px; }
.fi-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.fi-input, .fi-textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font-size: 13px; font-family: var(--font); }
.fi-input:focus, .fi-textarea:focus { outline: none; border-color: var(--pink-deep); }
.fi-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.fi-d-facts { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-soft); }
.fi-d-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.fi-note { font-size: 12px; color: var(--ink-soft); }
.fi-msg { font-size: 12px; color: #ff5a6e; min-height: 16px; }

/* reader */
.fi-reader-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--hair); background: rgba(255,255,255,.02); }
.fi-reader-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.fi-reader-stage { flex: 1; position: relative; overflow: auto; background: var(--void); }
.fi-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.fi-loading { padding: 40px; text-align: center; color: var(--ink-soft); }
.fi-textreader { --fi-fs: 18px; max-width: 44em; margin: 0 auto; padding: 40px 28px 80px; background: #fbf7f0; min-height: 100%; color: #241f26; font-size: var(--fi-fs); line-height: 1.7; font-family: Georgia, "Times New Roman", serif; }
.fi-textreader p { margin: 0 0 1em; }
.fi-textreader h1, .fi-textreader h2, .fi-textreader h3 { line-height: 1.25; }
.fi-textreader.code { max-width: none; font-family: Consolas, "Courier New", monospace; }
.fi-textreader.code pre { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; }
.fi-docx { padding: 20px; display: flex; justify-content: center; }
.fi-docx .docx-wrapper { background: transparent; padding: 0; }

/* ---------------- Colored Cloud · Auto Tags review ---------------- */
.cc-autotags { padding: 0; }
.cc-at-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.5); flex-wrap: wrap; }
.cc-at-head > b { font-size: 15px; color: #5a3f66; }
.cc-at-sub { flex: 1; min-width: 180px; font-size: 12px; color: var(--ink-soft); }
.cc-at-learned { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.cc-at-hint { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.cc-at-learnpill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--white); color: #6a4f74; border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; }
.cc-at-learnpill.on { border-color: var(--pink-deep); background: #fbeef5; color: #5a2f47; font-weight: 700; }
.cc-at-forget { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 50%; }
.cc-at-forget:hover { color: #c0446e; background: rgba(200,80,110,.12); }
/* Tags section (search / rename / merge) */
.cc-at-tagsection { border-bottom: 1px solid var(--line); }
.cc-at-tagshead { display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px; }
.cc-at-tagshead > b { font-size: 14px; color: #5a3f66; }
.cc-at-taghint { font-size: 11px; color: var(--ink-soft); }
.cc-at-tagsearch { margin-left: auto; width: 220px; max-width: 45%; border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 6px 10px; font-size: 13px; color: #4a3550; }
.cc-at-tagsearch:focus { outline: 2px solid var(--pink-deep); outline-offset: -1px; }
.cc-at-taglist { max-height: 220px; overflow-y: auto; padding: 2px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.cc-at-tagrow { display: flex; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.cc-at-tagrow.on { border-color: var(--pink-deep); background: #fbeef5; }
.cc-at-tagname { font-weight: 700; color: #5a2f47; font-size: 13px; }
.cc-at-tagmeta { flex: 1; font-size: 11px; color: var(--ink-soft); }
.cc-at-tagactions { display: flex; gap: 2px; }
.cc-at-tbtn { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: 14px; line-height: 1; padding: 3px 6px; border-radius: 6px; }
.cc-at-tbtn:hover { background: rgba(140,90,150,.12); color: #5a3f66; }
.cc-at-tbtn.danger:hover { color: #c0446e; background: rgba(200,80,110,.12); }
.cc-at-list { padding: 12px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.cc-at-card { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.cc-at-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #efe7f4; }
.cc-at-cardbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-at-fname { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-at-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-at-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--cream); border-radius: 999px; padding: 3px 5px 3px 12px; }
.cc-at-tag { font-size: 13px; font-weight: 700; color: #5a3f66; }
.cc-at-conf { font-size: 11px; color: var(--ink-soft); }
.cc-at-yes, .cc-at-no { width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; cursor: pointer; font-size: 12px; line-height: 1; display: grid; place-items: center; }
.cc-at-yes { background: #d7f0dc; color: #2f8a4e; }
.cc-at-yes:hover { background: #bfe8c8; }
.cc-at-no { background: #f5d9df; color: #b0446e; }
.cc-at-no:hover { background: #efc6d0; }
.cc-at-yes:disabled, .cc-at-no:disabled { opacity: .5; cursor: default; }
.cc-at-more { padding: 0 16px 16px; display: flex; justify-content: center; }

/* Remote Access · remote-upload album routing */
.ra-routing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 16px; margin: 6px 0 10px; }
.ra-route-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ra-route-kind { font-size: 13px; color: #5a3f66; }
.ra-route-row .ra-sel { min-width: 130px; }

/* ============================ RoseNet (browser) ============================ */
.hv { display: flex; flex-direction: column; height: 100%; background: var(--panel); color: var(--text); }
.hv-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 6px 8px 0; background: linear-gradient(#0d0f16, var(--panel)); overflow-x: auto; }
.hv-tab { display: flex; align-items: center; gap: 6px; max-width: 200px; min-width: 96px; padding: 6px 8px; border: 1px solid var(--hair); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--raised); cursor: pointer; font-size: 12px; color: var(--dim); }
.hv-tab.active { background: var(--surface); font-weight: 600; color: var(--text); }
.hv-tabfav { width: 15px; height: 15px; flex-shrink: 0; border-radius: 3px; }
.hv-tabttl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-tabx { opacity: .5; font-size: 11px; padding: 0 2px; border-radius: 4px; }
.hv-tabx:hover { opacity: 1; background: rgba(255,45,85,.18); color: #ff5a6e; }
.hv-newtab { border: 0; background: transparent; font-size: 18px; line-height: 1; color: var(--dim); cursor: pointer; padding: 4px 10px; align-self: center; }
.hv-newtab:hover { color: var(--text); }

.hv-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--surface); border-bottom: 1px solid var(--hair); }
.hv-nav { border: 1px solid var(--hair-2); background: var(--raised); color: var(--dim); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; display: grid; place-items: center; }
.hv-nav:hover { background: var(--raised-hi); color: var(--text); } .hv-nav:disabled { opacity: .35; cursor: default; }
.hv-addrwrap { flex: 1; display: flex; }
.hv-addr { flex: 1; padding: 7px 14px; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; }
.hv-addr:focus { outline: none; border-color: var(--crimson); box-shadow: 0 0 0 3px var(--glow-soft); }
.hv-shield { border: 1px solid rgba(52,209,125,.3); background: rgba(52,209,125,.1); color: var(--leaf); height: 30px; min-width: 34px; padding: 0 9px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; }
.hv-shield.off { background: rgba(255,90,110,.1); color: #ff7a88; border-color: rgba(255,90,110,.3); }

.hv-stack { flex: 1; display: flex; position: relative; background: var(--surface); }
.hv-wvwrap { flex: 1; }
.hv-wv { flex: 1; width: 100%; height: 100%; border: 0; }

.hv-savehost:empty { display: none; }
.hv-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: var(--glow-soft); border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--text); }
.hv-save-actions { display: flex; gap: 6px; }

.hv-pw-card { width: 560px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(80,50,90,.4); }
.hv-pw-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hair); color: var(--text); font-family: var(--disp); font-weight: 600; }
.hv-pw-note { font-size: 11.5px; color: var(--ink-soft); padding: 8px 16px; }
.hv-pw-list { overflow-y: auto; padding: 6px 12px 14px; }
.hv-pw-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); margin-bottom: 6px; }
.hv-pw-site { min-width: 0; }
.hv-pw-origin { font-weight: 700; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-pw-user { font-size: 12px; color: var(--ink-soft); }
.hv-pw-val { width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--cream); font-family: Consolas, monospace; font-size: 12px; }
.hv-pw-empty { color: var(--ink-soft); text-align: center; padding: 30px 16px; font-size: 13px; }

/* Heaven — bookmarks bar + pinned tabs */
.hv-star.on { color: #f0b840; border-color: rgba(240,184,64,.4); background: rgba(240,184,64,.12); }
.hv-bm { display: flex; align-items: center; gap: 3px; padding: 5px 8px; background: var(--surface); border-bottom: 1px solid var(--hair); overflow-x: auto; }
.hv-bm-chip { display: flex; align-items: center; gap: 6px; max-width: 190px; padding: 4px 9px; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--dim); flex-shrink: 0; }
.hv-bm-chip:hover { background: var(--raised); color: var(--text); }
.hv-bm-fav { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; }
.hv-bm-ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-tab.pinned { min-width: 0; max-width: none; padding: 6px 11px; }
.hv-tab.pinned .hv-tabttl, .hv-tab.pinned .hv-tabx { display: none; }

/* RFChat — dedicated web-app window */
.rfc { display: flex; flex-direction: column; height: 100%; background: var(--cream); }
.rfc-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(#e6f7ef, var(--cream)); border-bottom: 1px solid var(--line); }
.rfc-logo { width: 22px; height: 22px; }
.rfc-name { font-weight: 700; color: #3f7d63; letter-spacing: .02em; }
.rfc-btn { border: 1px solid var(--line); background: var(--white); color: #4f8a70; width: 30px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.rfc-btn:hover { background: #e6f7ef; }
.rfc-wv { flex: 1; width: 100%; border: 0; }

/* Soulbox web-app window (lavender, matching the soul/ghost theme) */
.slb { display: flex; flex-direction: column; height: 100%; background: var(--cream); }
.slb-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(#efe9fb, var(--cream)); border-bottom: 1px solid var(--line); }
.slb-logo { width: 22px; height: 22px; }
.slb-name { font-weight: 700; color: #6b57a3; letter-spacing: .02em; }
.slb-btn { border: 1px solid var(--line); background: var(--white); color: #6b57a3; width: 30px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.slb-btn:hover { background: #efe9fb; }
.slb-wv { flex: 1; width: 100%; border: 0; }

/* ============================ Notification centre ============================ */
.notif-bell { position: relative; cursor: pointer; font-size: 15px; padding: 0 4px; }
.notif-badge { position: absolute; top: -4px; right: -3px; background: var(--crimson); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; box-shadow: 0 0 8px var(--glow); }
#notif-toasts { position: absolute; right: 14px; bottom: calc(var(--taskbar-h) + 12px); display: flex; flex-direction: column; gap: 8px; z-index: 10001; width: 320px; max-width: 90vw; }
.notif-toast { display: flex; align-items: flex-start; gap: 10px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--pink-deep); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(90,50,90,.3); cursor: pointer; animation: notifIn .25s ease; }
.notif-toast.leaving { opacity: 0; transform: translateX(20px); transition: opacity .35s, transform .35s; }
@keyframes notifIn { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: none } }
.notif-ic { width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.notif-tbody { flex: 1; min-width: 0; }
.notif-ttl { font-weight: 700; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-txt { font-size: 12px; color: var(--dim); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.notif-x { color: var(--dim); cursor: pointer; font-size: 12px; padding: 0 2px; }
.notif-x:hover { color: #ff5a6e; }
#notif-panel { position: absolute; right: 8px; bottom: calc(var(--taskbar-h) + 8px); width: 340px; max-width: 92vw; max-height: 60vh; overflow-y: auto; background: rgba(18,21,29,.95); border: 1px solid var(--hair-2); border-radius: 12px; box-shadow: 0 24px 50px -20px #000; backdrop-filter: blur(14px); z-index: 10001; padding: 8px; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 10px; color: var(--text); }
.notif-clear { border: 1px solid var(--hair-2); background: var(--raised); border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--dim); }
.notif-clear:hover { background: var(--raised-hi); color: var(--text); }
.notif-empty { color: var(--dim); text-align: center; padding: 24px; font-size: 13px; }
.notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px; border-radius: 9px; cursor: pointer; }
.notif-row:hover { background: var(--raised); }
.hv-notif.on { background: rgba(52,209,125,.1); color: var(--leaf); border-color: rgba(52,209,125,.3); }

/* Background app window: kept alive off-screen (webview keeps running) but hidden. */
.window.bg-window { transform: translateX(-200vw) !important; pointer-events: none; }

.rfc-btn.on { background: #e7f0e7; color: #2f7d54; border-color: #bce0c4; }

/* ==================== Windows-style resize + Aero-Snap ==================== */
.window .rz { position: absolute; z-index: 6; }
.rz-n { top: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.rz-e { top: 8px; bottom: 8px; right: 0; width: 6px; cursor: ew-resize; }
.rz-w { top: 8px; bottom: 8px; left: 0; width: 6px; cursor: ew-resize; }
.rz-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.rz-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.rz-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.rz-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
/* While dragging/resizing, embedded webviews mustn't swallow the mouse events. */
body.win-dragging webview { pointer-events: none; }
body.win-dragging { user-select: none; }
/* Snap preview overlay */
#snap-preview { position: absolute; z-index: 9998; background: rgba(127,170,255,.24); border: 2px solid rgba(120,150,240,.85); border-radius: 10px; box-shadow: 0 8px 30px rgba(90,110,200,.35); pointer-events: none; display: none; transition: left .1s ease, top .1s ease, width .1s ease, height .1s ease; }