* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  --shell-bg: #08090c;
  --panel: rgba(255,255,255,0.035);
  --panel-solid: #14161c;
  --panel-border: rgba(255,255,255,0.09);
  --panel-border-hover: rgba(255,255,255,0.16);
  --ink-primary: #f5f5f4;
  --ink-secondary: #c7c9d1;
  --ink-muted: #8b8d97;
  --gridline: rgba(255,255,255,0.09);
  --accent: #2979ff;
  --accent-soft: rgba(41,121,255,0.16);
  /* "This is the selected one" — house glass tone (steel-blue, sampled
     from bg.jpg), not a flat blue and not the per-project --accent
     either. Selection state reads the same everywhere. */
  --dn-active-soft: rgba(143,192,209,.22);
  --dn-active-border: rgba(143,192,209,.4);
  /* Meaningfully stronger than --panel/--gridline for hover states —
     those are near-invisible at .035/.09 opacity. */
  --dn-hover-bg: rgba(255,255,255,0.12);
  /* Sampled directly from the background image's own highlight pixels
     (the glowing network lines) — this is dashneb's house glass/glow
     tone, independent of whichever project's accent is active.
     Mirrors algenius.webflow.io's --accent/--accent-dark-1..4/--stroke
     variable set one-for-one, just re-stepped from steel-blue instead
     of purple. */
  --glass-glow: #8fc0d1;
  --glass-glow-dark-1: #5a8ca0;
  --glass-glow-dark-2: #2c4048;
  --glass-glow-dark-3: #1c2a30;
  --glass-glow-dark-4: #10181c;
  --glass-glow-opacity-0: rgba(143,192,209,0);
  --glass-glow-opacity-5: rgba(143,192,209,.05);
  --glass-glow-opacity-7: rgba(143,192,209,.07);
  --glass-glow-soft: rgba(143,192,209,0.18);
  --glass-glow-opacity-30: rgba(143,192,209,.3);
  --glass-glow-strong: rgba(143,192,209,0.4);
  --glass-stroke: rgba(143,192,209,.1);
  --ease-algenius: cubic-bezier(.455, .03, .515, .955);
  --status-good: #22c37b;
  --status-warning: #f5a524;
  --status-open: #f5a524;
  --status-in_progress: #f5a524;
  --status-closed: #22c37b;
  --font-display: "DM Sans", -apple-system, "SF Pro Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Roboto Mono", monospace;
}

/* ---------------- traveling line-glow border ----------------
   NOT a spinning shape behind the element — that made the whole fill
   look like it was moving. This is a static 1px border ring; only a
   brighter segment travels around that ring. Technique: a conic-
   gradient (dim baseline + one bright arc) on a pseudo-element, masked
   with padding-box/border-box XOR so only the 1px ring shows — the
   card/button's own background underneath is completely untouched.
   Requires @property to animate the conic-gradient's start angle. */
@property --dn-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes dn-line-spin { to { --dn-angle: 360deg; } }

.dn-line { position: relative; }
.dn-line::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--dn-angle),
    var(--glass-glow-dark-2) 0%, var(--glass-glow-dark-2) 45%,
    var(--glass-glow) 65%, #fff 75%, var(--glass-glow) 85%, var(--glass-glow-dark-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dn-line-spin 9s linear infinite;
  pointer-events: none; z-index: 1;
}
.dn-line-slow::before { animation-duration: 18s; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--shell-bg);
  color: var(--ink-primary);
  font-family: var(--font-body);
  line-height: 1.5;
  position: relative;
  isolation: isolate;
}

a { color: var(--glass-glow); }

/* ---------------- background ----------------
   No corner halo — just the image itself plus a flat readability
   scrim. Any accent tint here would fight the network-map colors. */
.dn-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--shell-bg); }
.dn-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('/assets/bg.jpg');
  background-size: cover; background-position: center; opacity: .5;
}
.dn-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,9,12,.35) 0%, var(--shell-bg) 75%);
  opacity: .9; filter: blur(0px); transition: background .3s ease;
}

/* ---------------- shell / sidebar ---------------- */
.dn-shell { display: flex; }

.dn-sidebar {
  width: 246px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 22px 14px 16px; overflow-y: auto;
}

.dn-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; text-decoration: none; color: inherit; }
.dn-brand-mark-wrap {
  position: relative; border-radius: 50%; background: #000;
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.dn-brand-mark { width: 22px; height: 22px; object-fit: contain; }
.dn-brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 15px; }
.dn-brand-sub { font-family: var(--font-mono); font-size: 9px; color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; margin-top: -1px; }

.dn-select-label, .dn-nav-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); padding: 0 8px; margin: 4px 0 7px;
}

.dn-proj-select { position: relative; margin-bottom: 20px; }
.dn-proj-select-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--panel-border); cursor: pointer; color: var(--ink-primary);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
}
.dn-proj-select-btn:hover { border-color: var(--panel-border-hover); }
.dn-proj-icon {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; overflow: hidden; background: var(--proj-color, var(--accent));
  font-family: var(--font-display); font-weight: 800; font-size: 11px; color: #fff;
}
.dn-proj-icon img, .dn-proj-icon svg { width: 100%; height: 100%; object-fit: contain; }
.dn-proj-select-chevron { margin-left: auto; color: var(--ink-muted); font-size: 11px; }

.dn-proj-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
  background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 5px; box-shadow: 0 16px 40px rgba(0,0,0,0.45); display: none; flex-direction: column; gap: 1px;
}
.dn-proj-select.open .dn-proj-panel { display: flex; }
.dn-proj-option {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--ink-secondary); text-decoration: none;
}
.dn-proj-option:hover { background: var(--dn-hover-bg); color: var(--ink-primary); }
.dn-proj-option.active {
  color: var(--ink-primary); background: var(--dn-active-soft);
  box-shadow: inset 0 0 0 1px var(--dn-active-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dn-proj-option .dn-proj-icon { width: 18px; height: 18px; border-radius: 5px; font-size: 9px; }

.dn-nav { display: flex; flex-direction: column; gap: 1px; }
.dn-nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  font-size: 13px; color: var(--ink-secondary); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.dn-nav a:hover { background: var(--dn-hover-bg); color: var(--ink-primary); }
.dn-nav a.active {
  color: var(--ink-primary); background: var(--dn-active-soft); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--dn-active-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.dn-nav a.disabled { color: var(--ink-muted); pointer-events: none; }
.dn-nav .pill { font-family: var(--font-mono); font-size: 8.5px; padding: 1px 6px; border-radius: 20px; background: var(--gridline); color: var(--ink-muted); margin-left: auto; }
.dn-nav-icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; }
.dn-nav-icon svg { width: 100%; height: 100%; }

.dn-sidebar-bottom { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
a.dn-nav-small {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 7px 10px; border-radius: 10px;
  color: var(--ink-muted); text-decoration: none; transition: background .15s ease, color .15s ease;
}
a.dn-nav-small:hover { color: var(--ink-secondary); background: var(--panel); }
a.dn-nav-small .dn-nav-icon { width: 15px; height: 15px; }

.dn-user-pill {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--panel-border);
}
.dn-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--panel-solid); flex-shrink: 0; }
.dn-user-name { font-size: 12.5px; font-weight: 600; }
.dn-user-pill-bell { position: relative; margin-left: auto; color: var(--ink-muted); display: flex; }
.dn-user-pill-bell svg { width: 16px; height: 16px; }
.dn-icon-btn-dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--status-warning); box-shadow: 0 0 0 2px var(--panel-solid); }

/* ---------------- main ---------------- */
.dn-main { flex: 1; padding: 30px 36px 60px; max-width: 1220px; display: flex; flex-direction: column; min-height: 100vh; }

.dn-topbar-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; flex-wrap: wrap; gap: 14px; }
.dn-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-secondary); margin: 0 0 5px; }
.dn-main h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: 26px; margin: 0; }

.dn-footer {
  margin-top: auto; padding-top: 30px; font-size: 11.5px; color: var(--ink-muted); text-align: center;
}

/* ---------------- stats ---------------- */
.dn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.dn-stat .dn-stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 24px; }
.dn-stat .dn-stat-label { color: var(--ink-secondary); font-size: 12px; margin-bottom: 6px; }

/* ---------------- cards (one identical treatment everywhere:
   stat tiles, project cards, table wrappers — same background,
   same border-line, same opacity; only padding/size differ) ---------------- */
.dn-card, .dn-stat {
  position: relative;
  background: var(--panel); border-radius: 16px; padding: 22px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform .3s var(--ease-algenius);
}
.dn-stat { padding: 18px; }
.dn-card::before, .dn-stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--dn-angle),
    var(--glass-glow-dark-2) 0%, var(--glass-glow-dark-2) 45%,
    var(--glass-glow) 65%, #fff 75%, var(--glass-glow) 85%, var(--glass-glow-dark-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dn-line-spin 18s linear infinite; pointer-events: none;
}
a.dn-card:hover { transform: translateY(-2px); }

.dn-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* ---------------- generic custom select (dn-select.js) ----------------
   Same visual pattern as the sidebar project switcher — native <select>
   popups can't be restyled consistently, so every dropdown in the app
   (state filter, per-row state/source, modal pickers) uses this instead. */
.dn-select { position: relative; display: inline-block; }
.dn-select-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--panel-border); color: var(--ink-primary);
  font-family: inherit; font-size: 0.85rem; cursor: pointer; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: border-color .2s var(--ease-algenius);
}
.dn-select-trigger:hover { border-color: var(--panel-border-hover); }
.dn-select-chevron { margin-left: auto; color: var(--ink-muted); font-size: 10px; flex-shrink: 0; }
.dn-select-panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 30;
  background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 5px; box-shadow: 0 16px 40px rgba(1,3,10,.5); display: none; flex-direction: column; gap: 1px;
}
.dn-select.open .dn-select-panel { display: flex; }
.dn-select-option {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--ink-secondary); background: none; border: none; font-family: inherit;
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.dn-select-option:hover { background: var(--dn-hover-bg); color: var(--ink-primary); }
.dn-select-option.active {
  color: var(--ink-primary); background: var(--dn-active-soft);
  box-shadow: inset 0 0 0 1px var(--dn-active-border);
}
/* compact variant for inline table-row selects */
.dn-select-sm .dn-select-trigger { padding: 5px 9px; font-size: 0.8rem; border-radius: 7px; }

/* ---------------- toolbar / search / buttons ---------------- */
.dn-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.dn-search {
  flex: 1; min-width: 200px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 100px;
  padding: 10px 16px; color: var(--ink-primary); font-family: inherit; font-size: 0.88rem;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: border-color .3s var(--ease-algenius), box-shadow .3s var(--ease-algenius);
}
.dn-search:focus { outline: none; border-color: var(--glass-glow); box-shadow: 0 0 24px var(--glass-glow-soft); }
.dn-search::placeholder { color: var(--ink-muted); }
/* A real 1px browser-rendered border, like .dn-table's own border —
   genuinely hairline-thin (anti-aliased against the background), unlike
   the masked conic-gradient ring which always rounds up to a solid
   device pixel and reads as "thick" no matter how low its opacity. */
.dn-btn {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 11px 20px;
  color: var(--ink-primary); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: transform .3s var(--ease-algenius), border-color .2s ease;
}
.dn-btn:hover { transform: translateY(-2px); border-color: var(--panel-border-hover); }
.dn-btn:active { transform: scale(.97); }

/* Save/primary vs. Cancel/secondary now read as distinct actions by
   background color, not just position. */
.dn-btn-primary { background: var(--glass-glow-soft); border-color: var(--glass-glow-strong); }
.dn-btn-primary:hover { border-color: var(--glass-glow); }

/* ---------------- modal popup ---------------- */
.dn-modal-backdrop {
  position: fixed; inset: 0; background: rgba(4,5,8,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.dn-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.dn-modal {
  position: relative; background: var(--panel-solid);
  width: 100%; max-width: 420px; border-radius: 20px; padding: 24px;
  box-shadow: 0 24px 60px rgba(1,3,10,.5), 0 0 60px var(--glass-glow-soft);
  transform: translateY(8px) scale(.98); opacity: 0; transition: transform .3s var(--ease-algenius), opacity .2s var(--ease-algenius);
}
.dn-modal::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--dn-angle),
    var(--glass-glow-dark-2) 0%, var(--glass-glow-dark-2) 45%,
    var(--glass-glow) 65%, #fff 75%, var(--glass-glow) 85%, var(--glass-glow-dark-2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dn-line-spin 16s linear infinite; pointer-events: none;
}
.dn-modal-backdrop.open .dn-modal { transform: translateY(0) scale(1); opacity: 1; }
.dn-modal h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 18px; }
.dn-modal-form { display: flex; flex-direction: column; gap: 12px; }
.dn-modal-form input, .dn-modal-form select, .dn-modal-form textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 10px 12px; color: var(--ink-primary); font-family: inherit; font-size: 0.88rem;
  transition: border-color .15s ease;
}
.dn-modal-form input:focus, .dn-modal-form select:focus, .dn-modal-form textarea:focus { outline: none; border-color: var(--glass-glow); box-shadow: 0 0 0 3px var(--glass-glow-soft); }
.dn-modal-form textarea { resize: vertical; min-height: 70px; }
.dn-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dn-form-error { color: #ef4444; font-size: 0.8rem; min-height: 1.1em; }

/* ---------------- inline edit / sortable headers ---------------- */
.dn-editable { cursor: text; border-bottom: 1px dashed transparent; transition: border-color .15s ease; }
.dn-editable-empty { color: var(--ink-muted); font-style: italic; }
.dn-editable:hover { border-bottom-color: var(--ink-muted); }
.dn-inline-input {
  width: 100%; background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 7px;
  padding: 5px 8px; color: var(--ink-primary); font-family: inherit; font-size: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dn-inline-input:focus { outline: none; border-color: var(--glass-glow); box-shadow: 0 0 0 3px var(--glass-glow-soft); }
.dn-icon-btn-sm {
  background: transparent; border: none; color: var(--ink-muted); cursor: pointer; padding: 6px;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.dn-icon-btn-sm svg { width: 15px; height: 15px; }
.dn-icon-btn-sm:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

.dn-table th[data-sort] { cursor: pointer; user-select: none; }
.dn-table th[data-sort]:hover { color: var(--ink-primary); }
.dn-table th.sorted-asc::after { content: " \2191"; color: var(--glass-glow); }
.dn-table th.sorted-desc::after { content: " \2193"; color: var(--glass-glow); }
.dn-table tbody tr:hover { background: var(--panel); }

/* Dot at every internal grid-line intersection — the "points" from the
   reference. One dot per cell, sat on its top-left corner, so it lands
   exactly where a horizontal and vertical border cross regardless of
   column widths. */
.dn-table th, .dn-table td { position: relative; }
.dn-table th::before, .dn-table td::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--glass-glow); opacity: .5; pointer-events: none;
}
.dn-table thead th::before { opacity: .8; }

table.dn-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dn-table th, .dn-table td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--gridline); vertical-align: top; }
.dn-table th { color: var(--ink-muted); font-weight: 600; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dn-table th a { color: inherit; text-decoration: none; }
.dn-table th a:hover { color: var(--ink-primary); }
.dn-table tr:last-child td { border-bottom: none; }
.dn-table td.num { font-family: var(--font-mono); text-align: right; }

.dn-desc { max-width: 320px; white-space: pre-wrap; color: var(--ink-secondary); }

.dn-country-cell { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.8rem; }
.dn-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--panel-border); }

.dn-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #06070a; margin-right: 9px; vertical-align: middle; }
.dn-row-user { display: inline-flex; align-items: center; }

.dn-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; font-family: var(--font-mono); }
.dn-badge-open { background: rgba(245,165,36,0.15); color: var(--status-warning); }
.dn-badge-in_progress { background: rgba(245,165,36,0.15); color: var(--status-warning); }
.dn-badge-closed { background: rgba(34,195,123,0.15); color: var(--status-good); }

.dn-proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 28px; }
.dn-proj-card { display: flex; flex-direction: column; padding: 26px; }
.dn-proj-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.dn-proj-card-icon { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }
.dn-proj-card-name {
  /* no truncation — full project name always shows, wraps if it must */
  font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3;
}
.dn-proj-card-metrics { display: flex; gap: 24px; margin-bottom: 4px; }
.dn-proj-card-ctas { display: flex; gap: 18px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.dn-proj-card-cta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-secondary); text-decoration: none;
  transition: color .2s var(--ease-algenius);
}
.dn-proj-card-cta:hover { color: var(--ink-primary); }
.dn-proj-card-cta svg { width: 14px; height: 14px; transition: transform .2s var(--ease-algenius); }
.dn-proj-card-cta:hover svg { transform: translateX(3px); }

/* Dot-style status pill (matches "• Paid" reference pattern), plus the
   same rotating rim as buttons/cards — the status dot moved to a real
   child <span class="dn-pill-dot"> since ::before/::after are now
   spoken for by the glow-ring gradient + mask. */
.dn-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0;
  transition: transform .2s var(--ease-algenius);
}
.dn-pill::before {
  /* currentColor — inherits whichever status color the pill variant
     sets (good/warning/muted), so the line always matches the pill
     it's on instead of a fixed house color. */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.5px;
  background: conic-gradient(from var(--dn-angle),
    color-mix(in srgb, currentColor 35%, transparent) 0%,
    color-mix(in srgb, currentColor 35%, transparent) 45%,
    currentColor 65%, #fff 75%, currentColor 85%,
    color-mix(in srgb, currentColor 35%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: dn-line-spin 13s linear infinite; pointer-events: none;
}
.dn-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dn-proj-card:hover .dn-pill, .dn-pill:hover { transform: scale(1.05); }
.dn-pill-good { color: var(--status-good); background: rgba(34,195,123,0.14); }
.dn-pill-warning { color: var(--status-warning); background: rgba(245,165,36,0.14); }
.dn-pill-muted { color: var(--ink-muted); background: var(--gridline); }

.dn-state-select { background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 7px; padding: 5px 8px; color: var(--ink-primary); font-family: inherit; font-size: 0.8rem; }

.dn-empty { color: var(--ink-muted); font-size: 0.9rem; padding: 20px 0; }

.dn-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 40px 20px; color: var(--ink-muted); gap: 8px; border: 1px dashed var(--gridline); border-radius: 14px;
}
.dn-placeholder b { color: var(--ink-secondary); font-family: var(--font-display); font-size: 14px; }
.dn-placeholder p { margin: 0; font-size: 12.5px; max-width: 360px; line-height: 1.5; }

/* ---------------- ranked bar list (channels, pages, countries) ---------------- */
.dn-bar-row { display: grid; grid-template-columns: 130px 1fr 56px; align-items: center; gap: 10px; padding: 6px 0; }
.dn-bar-row-label { font-size: 12px; color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-bar-track { position: relative; height: 12px; background: var(--gridline); border-radius: 6px; overflow: hidden; }
.dn-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--glass-glow); }
.dn-bar-value { font-family: var(--font-mono); font-size: 11.5px; text-align: right; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

/* ---------------- window toggle (7d / 30d) ---------------- */
.dn-window-toggle { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 100px; padding: 3px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dn-window-toggle a {
  padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--ink-muted); transition: background .2s var(--ease-algenius), color .2s var(--ease-algenius);
}
.dn-window-toggle a.active { background: var(--dn-active-soft); color: var(--ink-primary); box-shadow: inset 0 0 0 1px var(--dn-active-border); }
.dn-window-toggle a:not(.active):hover { color: var(--ink-secondary); }

/* ---------------- login ---------------- */
.dn-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dn-login-card { background: var(--panel-solid); border: 1px solid var(--panel-border); border-radius: 16px; padding: 32px; width: 100%; max-width: 340px; }
.dn-login-card h1 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 20px; text-align: center; }
.dn-login-card input {
  width: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 9px;
  padding: 10px 12px; color: var(--ink-primary); font-family: inherit; font-size: 0.9rem; margin-bottom: 14px;
}
.dn-login-card button { width: 100%; padding: 11px; border-radius: 9px; border: none; background: var(--glass-glow); color: #06070a; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.dn-login-card button:hover { opacity: 0.9; }
.dn-error { color: #ef4444; font-size: 0.85rem; margin: 0 0 14px; }

@media (max-width: 860px) {
  .dn-shell { flex-direction: column; }
  .dn-sidebar { width: 100%; height: auto; position: relative; }
}