:root {
  --dc-bg: #070b12;
  --dc-panel: #0e1621;
  --dc-panel2: #0a111b;
  --dc-line: #1d2c44;
  --dc-line-soft: #172232;
  --dc-accent: #4a9bff;
  --dc-teal: #3fe0c2;
  --dc-amber: #f5b74e;
  --dc-text: #e6eefb;
  --dc-mute: #93a6c4;
  --dc-hint: #5f7a9c;
  --dc-green: #22c55e;
  --dc-red: #f4485f;
  --dc-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --dc-shadow: 0 18px 48px rgba(0,0,0,.5);
}

body.home-page { background: var(--dc-bg); }

/* animated console backdrop */
.dc-bg-fx { position: fixed; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(1100px 640px at 12% -12%, rgba(74,155,255,.14), transparent 60%),
  radial-gradient(900px 620px at 92% -6%, rgba(63,224,194,.09), transparent 55%),
  radial-gradient(700px 700px at 60% 120%, rgba(74,155,255,.06), transparent 60%),
  var(--dc-bg); }
.dc-bg-fx::after { content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(120,160,220,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask: radial-gradient(circle at 50% 20%, #000, transparent 78%);
          mask: radial-gradient(circle at 50% 20%, #000, transparent 78%); }

.dc-wrap { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; position: relative; }

/* ---------- HERO / HEADER ---------- */
.dc-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--dc-line); border-radius: 20px;
  padding: 1.5rem 1.6rem; margin-bottom: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%),
    linear-gradient(135deg, rgba(74,155,255,.10), rgba(63,224,194,.05) 60%, transparent),
    var(--dc-panel);
  box-shadow: var(--dc-shadow);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.dc-hero::before { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74,155,255,.08), transparent);
  animation: dcSweep 7s linear infinite; pointer-events: none; }
@keyframes dcSweep { 0% { left: -40%; } 60%, 100% { left: 140%; } }

.dc-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .55rem;
  font-family: var(--dc-mono); font-size: .66rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dc-mute); }
.dc-eyebrow .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc-teal);
  box-shadow: 0 0 0 0 rgba(63,224,194,.6); animation: dcPulse 2.2s infinite; }
@keyframes dcPulse { 0% { box-shadow: 0 0 0 0 rgba(63,224,194,.55); } 70% { box-shadow: 0 0 0 8px rgba(63,224,194,0); } 100% { box-shadow: 0 0 0 0 rgba(63,224,194,0); } }

.dc-hero h1 { margin: 0; font-size: 2.1rem; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(100deg, #7ab8ff 0%, #4a9bff 40%, #3fe0c2 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dc-hero .tagline { margin: .55rem 0 0; color: var(--dc-mute); font-size: .9rem; max-width: 54ch; line-height: 1.5; }
.dc-hero .tagline b { color: #bcd0ee; font-weight: 600; }

.dc-summary { display: flex; gap: .6rem; flex-shrink: 0; }
.dc-stat { min-width: 74px; text-align: center; padding: .55rem .8rem; border-radius: 12px;
  background: var(--dc-panel2); border: 1px solid var(--dc-line-soft); }
.dc-stat .n { display: block; font-family: var(--dc-mono); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.dc-stat .l { display: block; margin-top: .3rem; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dc-hint); }
.dc-stat.online .n { color: var(--dc-green); }
.dc-stat.total .n { color: var(--dc-text); }

/* ---------- OWNER NOTE ---------- */
.dc-note { background: rgba(74,155,255,.06); border: 1px solid var(--dc-line);
  border-left: 3px solid var(--dc-accent); border-radius: 12px;
  padding: .7rem .95rem; font-size: .8rem; color: var(--dc-mute); line-height: 1.55; margin-bottom: 1.1rem; }
.dc-note strong { color: #a9c6ec; }
.dc-note em { color: var(--dc-text); font-style: normal; font-weight: 600; }

/* ---------- TOOLBAR ---------- */
.dc-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.dc-toolbar .spacer { flex: 1; }
.dc-refresh { font-family: var(--dc-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dc-hint); display: inline-flex; align-items: center; gap: .45rem; }
.dc-refresh .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--dc-teal);
  box-shadow: 0 0 8px var(--dc-teal); animation: dcPulse 2.4s infinite; }

/* ---------- BUTTONS ---------- */
.dc-btn { background: var(--dc-panel2); color: var(--dc-mute); border: 1px solid var(--dc-line);
  border-radius: 11px; padding: .6rem 1rem; cursor: pointer; font-size: .83rem; font-family: inherit;
  font-weight: 600; transition: transform .1s, border-color .15s, color .15s, background .15s; }
.dc-btn:hover { border-color: var(--dc-accent); color: var(--dc-text); background: rgba(74,155,255,.08); }
.dc-btn:active { transform: translateY(1px); }
.dc-btn:disabled { opacity: .5; cursor: default; }
.dc-btn.primary { background: linear-gradient(135deg, #4a9bff, #2ec9ae); color: #04121a; border: none;
  font-weight: 700; box-shadow: 0 4px 18px rgba(74,155,255,.32); }
.dc-btn.primary:hover { filter: brightness(1.06); }
.dc-btn.danger { color: #f6a5b0; }
.dc-btn.danger:hover { border-color: var(--dc-red); color: #fff; background: rgba(244,72,95,.16); }

/* ---------- GRID + CARDS ---------- */
/* PC: 3 columns across, unlimited rows. Tablet: 2. Phone: 1 (see media query below). */
.dc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; }
@media (max-width: 880px) { .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dc-card { position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%), var(--dc-panel);
  border: 1px solid var(--dc-line); border-radius: 16px; padding: 1.15rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .14s ease, border-color .18s, box-shadow .18s; }
.dc-card:hover { transform: translateY(-3px); border-color: rgba(74,155,255,.45); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.dc-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--dc-accent), var(--dc-teal)); opacity: .85; }
.dc-card.is-offline { opacity: .72; }
.dc-card.is-offline::before { background: linear-gradient(90deg, #33455f, #2a3a52); opacity: .6; }

/* ---------- DRAG TO REORDER ---------- */
.dc-card { cursor: grab; }
.dc-card.dc-dragging { opacity: .4; cursor: grabbing; transform: none !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.55); border-color: rgba(74,155,255,.6); }
.dc-card.dc-dragging:hover { transform: none; }
.dc-drag-handle { position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 16px;
  color: var(--dc-hint); opacity: .35; cursor: grab; z-index: 2;
  transition: opacity .15s, color .15s; }
.dc-card:hover .dc-drag-handle { opacity: .95; color: var(--dc-mute); }
.dc-drag-handle:hover { color: var(--dc-accent); }
.dc-drag-handle svg { width: 20px; height: 14px; }

.dc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.dc-ident { display: flex; gap: .7rem; align-items: center; min-width: 0; }
.dc-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(74,155,255,.18), rgba(63,224,194,.12));
  border: 1px solid rgba(74,155,255,.25); color: #9fd0ff; }
.dc-icon svg { width: 22px; height: 22px; }
.dc-icon.feeder { background: linear-gradient(135deg, rgba(245,183,78,.2), rgba(245,183,78,.08));
  border-color: rgba(245,183,78,.3); color: var(--dc-amber); }
.dc-ident-txt { min-width: 0; }
.dc-card-name { margin: 0; font-weight: 700; font-size: 1.06rem; color: var(--dc-text); word-break: break-word; line-height: 1.2; }
.dc-card-meta { display: flex; align-items: center; gap: .45rem; margin-top: .3rem; flex-wrap: wrap; }
.dc-card-type { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dc-hint); }
.dc-card-id { font-family: var(--dc-mono); font-size: .62rem; color: var(--dc-mute);
  background: var(--dc-panel2); border: 1px solid var(--dc-line-soft); border-radius: 6px; padding: .08rem .35rem; }

.dc-card-status { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex: none; }
.dc-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; padding: .22rem .5rem; border-radius: 999px; }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dc-status.online { color: var(--dc-green); background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.28); }
.dc-status.online .dc-dot { background: var(--dc-green); box-shadow: 0 0 8px var(--dc-green); animation: dcPulse 2.2s infinite; }
.dc-status.offline { color: var(--dc-hint); background: rgba(120,150,190,.06); border: 1px solid var(--dc-line-soft); }
.dc-status.offline .dc-dot { background: #47597a; }
.dc-seen { font-family: var(--dc-mono); font-size: .62rem; color: var(--dc-hint); }

.dc-state { display: flex; align-items: center; gap: .7rem;
  background: var(--dc-panel2); border: 1px solid var(--dc-line-soft); border-radius: 12px; padding: .7rem .85rem; }
.dc-state-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; color: var(--dc-hint); font-weight: 700; }
.dc-color-chip { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1rem; letter-spacing: .04em; margin-left: auto; }
.dc-color-chip .dc-dot { width: 13px; height: 13px; }
.dc-color-chip.GREEN { color: var(--dc-green); }
.dc-color-chip.GREEN .dc-dot { background: var(--dc-green); box-shadow: 0 0 10px var(--dc-green); }
.dc-color-chip.RED { color: var(--dc-red); }
.dc-color-chip.RED .dc-dot { background: var(--dc-red); box-shadow: 0 0 10px var(--dc-red); }

/* lcd-text: a little green-on-black LCD-style mirror of what's on the screen */
.dc-state-lcd { padding: .55rem; flex-direction: column; align-items: stretch; gap: .45rem; }
.dc-lcd-screen { width: 100%; min-height: 3.4rem; box-sizing: border-box;
  background: #0a1f0a; border: 1px solid #16401c; border-radius: 8px; padding: .5rem .6rem;
  font-family: var(--dc-mono); font-size: .82rem; line-height: 1.35; letter-spacing: .04em;
  color: #7dffa0; text-shadow: 0 0 6px rgba(125,255,160,.45);
  white-space: pre-wrap; word-break: break-word; overflow: hidden; }
.dc-lcd-empty { color: #3f7a4c; font-style: italic; text-shadow: none; }
.dc-lcd-screen.off { color: #2f5a3a; text-shadow: none; opacity: .6; filter: brightness(.55); }
.dc-text-count { text-align: right; font-family: var(--dc-mono); font-size: .68rem; color: var(--dc-hint); margin-top: .3rem; }
.dc-text-count.over { color: var(--dc-red); }
.dc-lcd-meta { margin-top: .45rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-family: var(--dc-mono); font-size: .64rem; color: var(--dc-hint); text-transform: uppercase; letter-spacing: .06em; }
.dc-lcd-meta strong { color: var(--dc-teal); font-weight: 700; }
.dc-lcd-glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35em; height: 1.35em;
  margin: 0 .08em; padding: 0 .18em; border-radius: 4px; border: 1px solid rgba(125,255,160,.36);
  background: rgba(125,255,160,.11); color: #c9ffd6; font-size: .66em; line-height: 1; vertical-align: .08em;
  text-shadow: none; text-transform: uppercase; letter-spacing: 0; }
.dc-glyph-palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.dc-glyph-btn { min-height: 2.25rem; padding: .42rem .45rem; font-family: var(--dc-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em; }

/* feeder metric */
.dc-state-feeder { align-items: center; }
.dc-metric { display: flex; flex-direction: column; }
.dc-metric-num { font-family: var(--dc-mono); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--dc-amber); }
.dc-metric-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dc-hint); margin-top: .25rem; }
.dc-feeder-status { margin-left: auto; font-family: var(--dc-mono); font-size: .72rem; color: var(--dc-mute);
  display: inline-flex; align-items: center; gap: .35rem; }

.dc-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: auto; }
.dc-card-actions .wide { grid-column: 1 / -1; }

.dc-empty { grid-column: 1 / -1; border: 1px dashed var(--dc-line); border-radius: 16px; padding: 3rem 1.5rem;
  text-align: center; color: var(--dc-mute); background: var(--dc-panel2); }
.dc-empty .emoji { font-size: 2rem; display: block; margin-bottom: .5rem; }
.dc-empty strong { color: var(--dc-text); display: block; margin-bottom: .35rem; font-size: 1.05rem; }
.dc-empty em { color: var(--dc-accent); font-style: normal; font-weight: 600; }

.dc-loading { color: var(--dc-mute); font-family: var(--dc-mono); font-size: .8rem; letter-spacing: .05em; padding: 2.5rem 0; text-align: center; }
#dcDenied, #dcApp, #dcOwnerNote, #dcAddBtn, #dcAccessBtn { display: none; }

/* ---------- MODALS ---------- */
.dc-modal-backdrop { position: fixed; inset: 0; background: rgba(4,7,12,.75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; z-index: 2000; padding: 1rem; }
.dc-modal-backdrop.open { display: flex; }
.dc-modal { position: relative; overflow: hidden; background: var(--dc-panel); border: 1px solid var(--dc-line);
  border-radius: 18px; width: 100%; max-width: 460px; padding: 1.5rem; box-shadow: var(--dc-shadow); max-height: 88vh; overflow-y: auto; }
.dc-modal::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--dc-accent), var(--dc-teal)); }
.dc-modal h2 { margin: 0 0 .3rem; font-size: 1.25rem; font-weight: 800; color: var(--dc-text); }
.dc-modal p.hint { margin: 0 0 1.1rem; color: var(--dc-mute); font-size: .82rem; line-height: 1.5; }
.dc-field { margin-bottom: .9rem; }
.dc-field label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dc-hint); margin-bottom: .4rem; font-weight: 700; }
.dc-input, .dc-select, .dc-textarea { width: 100%; background: var(--dc-panel2); color: var(--dc-text);
  border: 1px solid var(--dc-line); border-radius: 10px; padding: .6rem .75rem; font-size: .9rem; font-family: inherit; box-sizing: border-box; }
.dc-textarea { min-height: 130px; resize: vertical; font-family: var(--dc-mono); font-size: .82rem; line-height: 1.6; }
.dc-input:focus, .dc-select:focus, .dc-textarea:focus { outline: none; border-color: var(--dc-accent); box-shadow: 0 0 0 3px rgba(74,155,255,.15); }
.dc-modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
.dc-modal-error { color: #f6a5b0; font-size: .8rem; margin: .2rem 0 .6rem; display: none; }
.dc-modal-error.show { display: block; }
.dc-cred { background: var(--dc-panel2); border: 1px solid var(--dc-line-soft); border-radius: 10px; padding: .65rem .75rem; margin-bottom: .7rem; }
.dc-cred-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dc-hint); margin-bottom: .3rem; }
.dc-cred-value { font-family: var(--dc-mono); font-size: .82rem; color: var(--dc-text); word-break: break-all; }
.dc-warn { background: rgba(244,72,95,.08); border: 1px solid rgba(244,72,95,.35); border-left: 3px solid var(--dc-red);
  border-radius: 10px; padding: .65rem .8rem; font-size: .78rem; color: #f6c2c9; line-height: 1.5; margin-bottom: .9rem; }

.dc-denied { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; text-align: center; }
.dc-denied h2 { margin: 0 0 .4rem; font-size: 1.6rem; }
.dc-denied p { color: var(--dc-mute); }

/* ---------- MANAGE ROW / MINI BUTTONS ---------- */
.dc-card-manage { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; padding-top: .75rem; border-top: 1px solid var(--dc-line-soft); }
.dc-mini { background: transparent; color: var(--dc-mute); border: 1px solid var(--dc-line-soft); border-radius: 8px;
  padding: .32rem .55rem; font-size: .7rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .14s; }
.dc-mini:hover { border-color: var(--dc-accent); color: var(--dc-text); background: rgba(74,155,255,.08); }
.dc-mini.danger { color: #e79aa4; }
.dc-mini.danger:hover { border-color: var(--dc-red); color: #fff; background: rgba(244,72,95,.14); }
.dc-mini:disabled { opacity: .5; cursor: default; }

.dc-emoji { font-size: 22px; line-height: 1; }
.dc-card-note { margin-top: .3rem; font-size: .74rem; color: var(--dc-mute); font-style: italic; }

.dc-feeder-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .16rem; text-align: right; }
.dc-feeder-status { font-family: var(--dc-mono); font-size: .72rem; color: var(--dc-mute); }
.dc-feeder-last { font-size: .74rem; color: var(--dc-text); font-weight: 600; }
.dc-feeder-today { font-size: .62rem; color: var(--dc-hint); font-family: var(--dc-mono); }

/* ---------- SCHEDULE ROWS ---------- */
.dc-sched-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--dc-line-soft); }
.dc-sched-row:last-child { border-bottom: 0; }
.dc-sched-time { flex: 0 0 auto; width: 9rem; }
.dc-sched-size { flex: 1; min-width: 0; }
.dc-sched-en { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--dc-mute); white-space: nowrap; }
.dc-sched-add-wrap { margin-top: .7rem; }
.dc-sched-empty { color: var(--dc-hint); font-size: .82rem; padding: 1rem 0; text-align: center; }

/* ---------- HISTORY ROWS ---------- */
#dcLogList { max-height: 52vh; overflow-y: auto; }
.dc-log-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .1rem; border-bottom: 1px solid var(--dc-line-soft); font-size: .82rem; }
.dc-log-row:last-child { border-bottom: 0; }
.dc-log-when { font-family: var(--dc-mono); font-size: .68rem; color: var(--dc-hint); flex: 0 0 5.5rem; }
.dc-log-what { flex: 1; color: var(--dc-text); font-weight: 600; }
.dc-log-who { color: var(--dc-mute); font-size: .74rem; }
.dc-cfg-reset-wrap { margin-bottom: .7rem; }

/* ---------- TOAST ---------- */
.dc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--dc-panel); border: 1px solid var(--dc-line); border-left: 3px solid var(--dc-accent);
  color: var(--dc-text); padding: .7rem 1.1rem; border-radius: 12px; font-size: .85rem; font-weight: 600;
  box-shadow: var(--dc-shadow); opacity: 0; pointer-events: none; z-index: 2500; transition: opacity .2s, transform .2s; max-width: 90vw; }
.dc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dc-toast.ok   { border-left-color: var(--dc-green); }
.dc-toast.warn { border-left-color: var(--dc-amber); }
.dc-toast.err  { border-left-color: var(--dc-red); }

@media (max-width: 560px) {
  .dc-grid { grid-template-columns: 1fr; }
  .dc-hero h1 { font-size: 1.7rem; }
  .dc-hero { padding: 1.2rem 1.15rem; }
}