/* ============================================================
   SOULFREE ERP — Interactive System Map
   Design system: modern enterprise software (rounded cards,
   soft gradients, generous whitespace)
   ============================================================ */

:root {
  /* Neutrals — cool, soft */
  --bg:        #EEF1F6;
  --canvas:    #F3F5F9;
  --surface:   #FFFFFF;
  --surface-2: #FAFBFD;
  --surface-3: #F3F5F9;
  --ink:       #161A22;
  --ink-2:     #4B5366;
  --ink-3:     #828B9E;
  --ink-4:     #AAB2C2;
  --line:      #E4E8EF;
  --line-2:    #EDF0F5;

  /* Brand master */
  --brand:     #4C5BD4;

  /* System hues (harmonized, medium chroma) */
  --gw:    #1AA06A;  --gw-d:  #0E7C50;  --gw-tint:  #E8F6EF;  --gw-soft: #F3FBF7;
  --cg:    #7A5BE8;  --cg-d:  #5E3FD0;  --cg-tint:  #EFEBFD;  --cg-soft: #F7F4FE;
  --cw:    #E08A2B;  --cw-d:  #C26E14;  --cw-tint:  #FBF0DF;  --cw-soft: #FEF9F0;
  --cs:    #3E72E0;  --cs-d:  #2A57C0;  --cs-tint:  #E7EFFC;  --cs-soft: #F4F8FE;
  --db:    #E25A52;  --db-d:  #C53F38;  --db-tint:  #FBEAE8;  --db-soft: #FEF5F4;
  --dm:    #0D9488;  --dm-d:  #0B7A70;  --dm-tint:  #E0F5F3;  --dm-soft: #F0FAFA;
  --cm:    #C026D3;  --cm-d:  #9B1EAA;  --cm-tint:  #F8E8FB;  --cm-soft: #FCF4FD;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Shadows — soft, layered */
  --sh-xs: 0 1px 2px rgba(22,26,34,.05);
  --sh-sm: 0 1px 2px rgba(22,26,34,.04), 0 3px 8px rgba(22,26,34,.05);
  --sh-md: 0 2px 4px rgba(22,26,34,.04), 0 8px 20px rgba(22,26,34,.07);
  --sh-lg: 0 6px 14px rgba(22,26,34,.06), 0 20px 48px rgba(22,26,34,.12);
  --sh-xl: 0 12px 28px rgba(22,26,34,.10), 0 36px 80px rgba(22,26,34,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", "Noto Sans TC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* number / latin accents */
.mono { font-family: "Manrope", "Noto Sans TC", sans-serif; font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #CDD3DE; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #B6BECC; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- App shell ---- */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.topbar {
  flex: 0 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  z-index: 30;
}

.brand-mark {
  display: flex; align-items: center; gap: 11px;
}
.brand-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #5A6BE6, #3E4DBD);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 4px 12px rgba(76,91,212,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; }
.brand-text span { font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .3px; white-space: nowrap; }

.topbar-spacer { flex: 1; }

/* segmented layout switcher */
.seg {
  display: inline-flex;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-3);
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.seg button .ic { width: 15px; height: 15px; opacity: .7; }
.seg button:hover { color: var(--ink-2); }
.seg button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.seg button.on .ic { opacity: 1; }

.tb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: all .16s var(--ease);
}
.tb-btn:hover { border-color: #D3D9E3; box-shadow: var(--sh-xs); }
.tb-btn svg { width: 15px; height: 15px; }

/* ---- Body split ---- */
.body {
  flex: 1; min-height: 0;
  display: flex;
}

.stage {
  flex: 1 1 0; min-width: 360px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #FBFCFE 0%, rgba(251,252,254,0) 55%),
    var(--canvas);
}
.stage-grid {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(120,130,150,.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 35%, #000 45%, transparent 92%);
          mask-image: radial-gradient(130% 100% at 50% 35%, #000 45%, transparent 92%);
  pointer-events: none;
}

.canvas-wrap {
  position: absolute; inset: 0;
}

/* ---- Connector SVG ---- */
.edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.edge-path {
  fill: none;
  stroke-linecap: round;
  transition: opacity .25s var(--ease), stroke-width .25s var(--ease);
}
.edge-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: pointer; }
.edge-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  box-shadow: var(--sh-sm);
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  white-space: nowrap;
  transition: all .25s var(--ease);
  pointer-events: auto; cursor: pointer;
  z-index: 9;
}
.edge-label:hover { box-shadow: var(--sh-md); transform: translate(-50%,-50%) scale(1.04); }
.edge-num {
  width: 19px; height: 19px; border-radius: 99px;
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 800;
  flex: 0 0 auto;
}
.edge-label.dim { opacity: .26; }
.edge-path.dim { opacity: .12; }

/* ---- Node cards ---- */
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--nw, 178px);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), opacity .25s var(--ease);
  z-index: 6;
  overflow: hidden;
  --c: var(--ink);
}
.node:hover { box-shadow: var(--sh-lg); transform: translate(-50%,-50%) translateY(-3px); }
.node.dim { opacity: .42; filter: saturate(.6); }
.node.active { box-shadow: 0 0 0 2.5px var(--c), var(--sh-lg); }
.node.future { border-style: dashed; border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }

.node-bar {
  height: 6px; width: 100%;
  background: var(--c);
}
.node-body { padding: 13px 14px 14px; }
.node-head { display: flex; align-items: center; gap: 10px; }
.node-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--tint); color: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
.node-icon svg { width: 21px; height: 21px; }
.node-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.node-title b { font-size: 14px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-title span { font-size: 10.5px; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-roles {
  margin-top: 11px;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.node-role {
  font-size: 10px; font-weight: 700; color: var(--c);
  background: var(--soft);
  border: 1px solid color-mix(in srgb, var(--c) 16%, transparent);
  padding: 2.5px 7px; border-radius: 7px;
}
.node-cta {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
}
.node-cta .open { color: var(--c); display: flex; align-items: center; gap: 4px; }
.node.active .node-cta .open span:last-child { opacity: 1; }

/* hub node (待辦) */
.node.hub {
  --nw: 180px;
  text-align: center;
}
.node.hub .node-body { padding: 16px 14px 15px; }
.node.hub .node-head { flex-direction: column; gap: 9px; }
.node.hub .node-icon { width: 46px; height: 46px; border-radius: 14px; }
.node.hub .node-icon svg { width: 25px; height: 25px; }
.node.hub .node-title { align-items: center; }
.node.hub .node-title span { white-space: nowrap; }
.node.hub .pulse {
  margin-top: 9px; font-size: 10px; font-weight: 700; color: var(--c);
  display: inline-flex; align-items: center; gap: 5px;
}
.node.hub .pulse i {
  width: 7px; height: 7px; border-radius: 99px; background: var(--c);
  box-shadow: 0 0 0 0 var(--c);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* center brand node (for hub layout the center is 待辦; for others a brand chip) */
.brand-node {
  position: absolute; transform: translate(-50%,-50%);
  z-index: 5;
  width: 150px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #FFFFFF, #F4F6FC);
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
  text-align: center;
}

/* legend */
.legend {
  position: absolute; left: 18px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--sh-sm);
  z-index: 8;
  max-width: 230px;
}
.legend h4 { margin: 0 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; }
.legend-row { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.legend-row .sw { width: 22px; height: 0; border-top: 3px solid; border-radius: 2px; }

.hint {
  position: absolute; right: 18px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  box-shadow: var(--sh-sm); z-index: 8;
}

.layout-caption {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 15px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  box-shadow: var(--sh-sm); z-index: 8;
}
.layout-caption .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--brand); }
.layout-caption b { color: var(--ink); }

/* ============================================================
   DOCK (right comparison panels)
   ============================================================ */
.dock {
  flex: 0 0 auto;
  width: clamp(480px, 52%, 720px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--line);
  border-left: 1px solid var(--line);
  overflow: hidden;
  transition: width .3s var(--ease);
}
.dock.empty { width: 0; border-left: none; }

.panel {
  width: auto;
  height: auto;
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  opacity: 1;
  animation: panelIn .22s var(--ease);
}
@keyframes panelIn {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

.panel-chrome {
  flex: 0 0 auto;
  height: 46px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  color: #fff;
  --c: #333;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c));
}
.panel-chrome .pc-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.panel-chrome .pc-icon svg { width: 15px; height: 15px; }
.panel-chrome .pc-title { display: flex; flex-direction: column; line-height: 1.18; }
.panel-chrome .pc-title b { font-size: 13px; font-weight: 800; }
.panel-chrome .pc-title span { font-size: 10px; opacity: .8; font-weight: 600; }
.panel-chrome .sp { flex: 1; }
.panel-chrome .pc-btn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; transition: background .15s; }
.panel-chrome .pc-btn:hover { background: rgba(255,255,255,.18); }
.panel-chrome .pc-btn svg { width: 16px; height: 16px; }

.panel-screen {
  flex: 1; min-height: 0;
  overflow-y: auto;
  background: var(--surface-2);
  position: relative;
}

/* ===== generic mini-app primitives (used inside panels) ===== */
.appwrap { --c: #333; height: 100%; display: flex; flex-direction: column; }

/* login */
.login {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--c) 8%, #fff), transparent 70%),
    var(--surface-2);
}
.login-card {
  width: 100%; max-width: 290px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: 26px 24px 24px;
  text-align: center;
}
.login-logo {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, color-mix(in srgb,var(--c) 85%,#fff), var(--c));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 24px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 35%, transparent);
}
.login-card h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; }
.login-card p.sub { margin: 0 0 20px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.tabs2 { display: flex; gap: 6px; background: var(--surface-3); border-radius: 11px; padding: 4px; margin-bottom: 18px; }
.tabs2 button { flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--ink-3); transition: all .15s; }
.tabs2 button.on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); }
.field { text-align: left; margin-bottom: 13px; }
.field label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field input {
  width: 100%; height: 40px; padding: 0 13px;
  border: 1.5px solid var(--line); border-radius: 11px;
  font-size: 13px; color: var(--ink); background: var(--surface-2);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb,var(--c) 16%, transparent); background: #fff; }
.btn-primary {
  width: 100%; height: 42px; border-radius: 12px; margin-top: 6px;
  background: var(--c); color: #fff; font-size: 13.5px; font-weight: 800;
  box-shadow: 0 6px 16px color-mix(in srgb,var(--c) 32%, transparent);
  transition: transform .12s, filter .15s;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: scale(.985); }

/* app header inside panel */
.app-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.app-ava { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-3); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--c); }
.app-top .who { display: flex; flex-direction: column; line-height: 1.2; }
.app-top .who b { font-size: 13px; font-weight: 800; }
.app-top .who span { font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
.app-top .sp { flex: 1; }
.chip-btn { font-size: 11px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; background: var(--surface); transition: all .14s; }
.chip-btn:hover { border-color: #D3D9E3; }

.app-tabs { flex: 0 0 auto; display: flex; gap: 3px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.app-tabs button { position: relative; padding: 9px 12px 12px; font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; transition: color .15s; }
.app-tabs button.on { color: var(--c); }
.app-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--c); }
.app-tabs button .cnt { margin-left: 5px; font-size: 10px; background: var(--surface-3); color: var(--ink-3); padding: 1px 6px; border-radius: 99px; }
.app-tabs button.on .cnt { background: color-mix(in srgb,var(--c) 14%, transparent); color: var(--c); }

.app-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

/* search bar */
.searchbar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 11px; color: var(--ink-3); font-size: 12.5px; }
.searchbar svg { width: 15px; height: 15px; }

/* list cards */
.lc {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 12px 13px;
  box-shadow: var(--sh-xs);
  transition: border-color .16s, box-shadow .16s, transform .16s;
  cursor: pointer;
}
.lc:hover { border-color: color-mix(in srgb,var(--c) 35%, var(--line)); box-shadow: var(--sh-sm); transform: translateY(-1px); }
.lc.sel { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb,var(--c) 18%, transparent); }
.lc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.lc-code { font-size: 10.5px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.lc-top .sp { flex: 1; }
.lc h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800; letter-spacing: -.2px; }
.lc .meta { font-size: 11.5px; color: var(--ink-3); font-weight: 600; line-height: 1.5; }
.lc .meta b { color: var(--ink-2); font-weight: 700; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 7px; letter-spacing: .2px; }
.badge.solid { color: #fff; }
.badge.soft { background: var(--surface-3); color: var(--ink-2); }
.tag-tone-g { background: var(--gw-tint); color: var(--gw-d); }
.tag-tone-p { background: var(--cg-tint); color: var(--cg-d); }
.tag-tone-o { background: var(--cw-tint); color: var(--cw-d); }
.tag-tone-b { background: var(--cs-tint); color: var(--cs-d); }
.tag-tone-r { background: var(--db-tint); color: var(--db-d); }
.tag-tone-n { background: var(--surface-3); color: var(--ink-2); }

/* status note line */
.note { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 600; line-height: 1.45; margin-top: 8px; }
.note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.note.g { background: var(--gw-soft); color: var(--gw-d); }
.note.o { background: var(--cw-soft); color: var(--cw-d); }
.note.b { background: var(--cs-soft); color: var(--cs-d); }
.note.r { background: var(--db-soft); color: var(--db-d); }
.note.p { background: var(--cg-soft); color: var(--cg-d); }

.lc-actions { display: flex; gap: 8px; margin-top: 11px; }
.lc-act { flex: 1; height: 34px; border-radius: 9px; font-size: 12px; font-weight: 700; display: grid; place-items: center; transition: all .14s; }
.lc-act.ghost { border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); }
.lc-act.ghost:hover { border-color: #D3D9E3; }
.lc-act.fill { background: var(--c); color: #fff; }
.lc-act.fill:hover { filter: brightness(1.05); }

/* section label */
.sec-label { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--ink-3); text-transform: uppercase; margin: 4px 2px -2px; }

/* dashboard stat tiles */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.stat { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; background: var(--surface); }
.stat .v { font-size: 22px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; font-weight: 700; color: var(--ink-3); margin-top: 1px; }
.stat .v small { font-size: 12px; font-weight: 700; color: var(--ink-3); }

/* pipeline steps (finance) */
.pipe { display: flex; flex-direction: column; gap: 0; }
.pipe-step { display: flex; gap: 11px; }
.pipe-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.pipe-dot { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: 0 0 auto; z-index: 2; }
.pipe-dot.done { background: var(--gw); color: #fff; }
.pipe-dot.now { background: var(--c); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb,var(--c) 18%, transparent); }
.pipe-dot.todo { background: var(--surface-3); color: var(--ink-4); border: 1.5px solid var(--line); }
.pipe-line { width: 2px; flex: 1; background: var(--line); min-height: 16px; }
.pipe-line.done { background: var(--gw); }
.pipe-info { padding-bottom: 16px; padding-top: 1px; }
.pipe-info b { font-size: 13px; font-weight: 800; }
.pipe-info p { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-3); font-weight: 600; }

/* generic row item (todo / notifications) */
.row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
  cursor: pointer;
}
.row:hover { border-color: #D7DCE5; box-shadow: var(--sh-sm); }
.row-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; }
.row-ic svg { width: 17px; height: 17px; }
.row-main { flex: 1; min-width: 0; }
.row-main .t { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -.1px; }
.row-main .d { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; line-height: 1.5; }
.row-main .foot { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.row .time { font-size: 10.5px; color: var(--ink-4); font-weight: 700; flex: 0 0 auto; }

/* empty / toast */
.toast {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
  padding: 10px 16px; border-radius: 99px; box-shadow: var(--sh-lg);
  display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none;
  transition: all .3s var(--ease); z-index: 20; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 15px; height: 15px; color: #5BE3A7; }

/* dock empty hint */
.dock-empty-tip {
  width: 300px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 30px; color: var(--ink-3);
}
.dock-empty-tip .ico { width: 60px; height: 60px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.dock-empty-tip .ico svg { width: 28px; height: 28px; color: var(--ink-4); }
.dock-empty-tip b { font-size: 14px; font-weight: 800; color: var(--ink-2); }
.dock-empty-tip p { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.6; }

/* ===== Scope Modal ===== */
.scope-overlay {
  position: absolute; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 20px 0 20px 20px;
  background: rgba(22,26,34,.22);
  backdrop-filter: blur(3px);
  animation: soFadeIn .18s var(--ease);
}
@keyframes soFadeIn { from { opacity:0 } to { opacity:1 } }

.scope-card {
  width: 300px; max-height: calc(100% - 0px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  animation: soSlideIn .22s var(--ease);
}
@keyframes soSlideIn { from { transform:translateX(-14px); opacity:0 } to { transform:none; opacity:1 } }

.sc-header {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sc-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--c, #333), color-mix(in srgb, var(--c,#333) 78%, #000));
}
.sc-icon svg { width: 18px; height: 18px; }
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-size: 14px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.sc-desc { font-size: 10.5px; color: var(--ink-3); font-weight: 600; margin-top: 3px; line-height: 1.4; }
.sc-close {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: var(--ink-3); transition: background .15s, color .15s;
}
.sc-close:hover { background: var(--line); color: var(--ink); }
.sc-close svg { width: 15px; height: 15px; }

.sc-body { flex: 1; overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }

.sc-group-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .9px;
  color: var(--ink-4); text-transform: uppercase; margin-bottom: 6px;
}
.sc-items { display: flex; flex-direction: column; gap: 4px; }
.sc-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.sc-item::before {
  content: ''; flex: 0 0 5px; height: 5px; border-radius: 50%;
  background: var(--c, var(--brand));
}

.sc-footer {
  flex: 0 0 auto; padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.sc-open-btn {
  width: 100%; padding: 10px; border-radius: var(--r-sm);
  background: var(--c, var(--brand)); color: #fff;
  font-weight: 700; font-size: 13px; transition: opacity .15s;
}
.sc-open-btn:hover { opacity: .88; }
.sc-open-btn.soon {
  background: var(--line); color: var(--ink-3); cursor: default;
}
.sc-open-btn.already {
  background: var(--gw-tint); color: var(--gw); border: 1.5px solid var(--gw);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .05s !important; }
}