/* ═══════════════════════════════════════════════════════════════
   Dead Island Epidemic: Reanimated — Component Library
   All dui-* components. Import after core.css.
═══════════════════════════════════════════════════════════════ */

/* ── Shared dark-panel surface ───────────────────────────────── */
.dui-card,
.dui-match-card,
.dui-tbl-wrap,
.dui-editor,
.dui-log {
  background: linear-gradient(170deg, rgba(6,20,18,.94) 0%, rgba(3,11,10,.97) 100%);
  border: 1px solid var(--border-hi);
  box-shadow: 0 2px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(78,152,130,.07);
}

/* ════════════════════ HEADER ════════════════════════════════ */
.dui-header {
  position:relative; z-index:10;
  background: linear-gradient(to bottom, rgba(2,8,8,.97) 0%, rgba(5,16,14,.88) 100%);
  border-bottom: 2px solid rgba(154,20,0,.65);
  box-shadow: 0 6px 32px rgba(0,0,0,.55);
  padding: 20px 32px 18px;
}
.dui-header-inner {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}

/* ── Brand ───────────────────────────────────────────────────── */
.dui-brand { line-height:1; }
.dui-brand-title {
  font-family:'GrimGhost',Impact,sans-serif; font-weight:700;
  font-size:48px; letter-spacing:.04em; text-transform:uppercase; line-height:.92;
  color:var(--red-hi);
  text-shadow: 0 3px 14px rgba(0,0,0,.9), 0 0 50px rgba(196,24,0,.28);
}
.dui-brand-prefix { color:var(--text-dim); text-shadow:0 2px 10px rgba(0,0,0,.8); }
.dui-brand-sub {
  display:flex; align-items:center; gap:10px; margin-top:2px;
  font-family:'GrimGhost',Impact,sans-serif; font-weight:700;
  font-size:32px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--teal-txt); text-shadow:0 0 40px rgba(78,152,130,.30);
}
.dui-brand-sub::before, .dui-brand-sub::after { content:''; flex:1; height:1px; background:var(--teal-lbl); }
.dui-brand-tagline {
  margin-top:5px; text-align:center;
  font-family:'MyriadProCond',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.dui-brand-fanmade {
  margin-top:4px; text-align:center;
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:400; letter-spacing:.06em;
  color:var(--muted); opacity:.8;
}

/* ── Header right slot ───────────────────────────────────────── */
.dui-header-right { text-align:right; flex-shrink:0; padding-bottom:3px; }
.dui-header-token-row {
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  font-size:11px; color:var(--muted); margin-bottom:9px;
}
.dui-header-token-row a { font-size:11px; }

/* ── Blood stripe ────────────────────────────────────────────── */
.dui-blood-stripe {
  position:relative; z-index:9; height:26px;
  background-image: url('../assets/img/header-stripe.png');
  background-size:auto 100%; background-repeat:no-repeat; background-position:left center;
  opacity:.55; margin-bottom:-4px;
}

/* ════════════════════ SHELL ══════════════════════════════════ */
.dui-shell { position:relative; z-index:1; padding:28px 32px 48px; }

/* ════════════════════ SECTION BLOCK ═════════════════════════ */
.dui-section {
  background: rgba(0,6,6,.38);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-hi);
  padding: 14px 16px 18px;
  margin-bottom: 18px;
}

/* ════════════════════ SECTION HEADING ══════════════════════ */
.dui-sec {
  display:flex; align-items:center; gap:0;
  font-family:'MyriadProCond',sans-serif;
  font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  color:var(--text); text-shadow:0 0 22px rgba(78,152,130,.30);
  margin-bottom:12px;
}
.dui-sec-bar {
  display:inline-block; width:3px; height:17px;
  background:var(--red); flex-shrink:0; margin-right:12px;
}
.dui-sec-line {
  flex:1; height:1px; margin-left:12px;
  background:linear-gradient(to right, var(--border-hi) 0%, transparent 100%);
}

/* ════════════════════ TAG / BADGE ═══════════════════════════ */
.dui-tag {
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:2px 10px; flex-shrink:0; margin-left:8px;
}
.dui-tag-red   { background:var(--red-dim);          border:1px solid var(--red);      color:var(--red-hi); }
.dui-tag-green { background:var(--up-dim);            border:1px solid var(--up);       color:var(--up); }
.dui-tag-teal  { background:rgba(41,78,68,.20);       border:1px solid var(--teal-lbl); color:var(--teal-txt); }

/* ════════════════════ STATUS ════════════════════════════════ */
.dui-status {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'MyriadProCond',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
}
.dui-status::before {
  content:''; display:inline-block;
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.dui-status-online  { color:var(--up); }
.dui-status-online::before  { background:var(--up);   box-shadow:0 0 6px var(--up); }
.dui-status-offline { color:var(--down); }
.dui-status-offline::before { background:var(--down); box-shadow:0 0 5px var(--down); }
.dui-status-warn    { color:var(--warn); }
.dui-status-warn::before    { background:var(--warn); box-shadow:0 0 5px var(--warn); }
.dui-status-note {
  font-weight:400; font-size:10px; letter-spacing:.05em;
  color:var(--muted); margin-left:8px;
}

/* ════════════════════ CARD ══════════════════════════════════ */
.dui-cards-row { display:flex; flex-wrap:wrap; gap:10px; }
.dui-card {
  min-width:168px; padding:16px 18px;
  position:relative; transition:border-color .15s;
}
.dui-card:hover { border-color:var(--teal-lbl); }
.dui-card-run  { border-top:2px solid var(--up); }
.dui-card-info { border-top:2px solid var(--teal-lbl); }
.dui-card-lbl {
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  color:var(--teal-txt); margin-bottom:7px;
}
.dui-card-val { font-size:20px; font-weight:600; line-height:1.15; }
.dui-card-sub { font-size:11px; color:var(--muted); margin-top:4px; }
.dui-card-link { display:block; margin-top:10px; font-size:11px; }

/* ════════════════════ MATCH CARD ════════════════════════════ */
.dui-match-card {
  border-left:3px solid var(--red);
  padding:14px 18px; margin-bottom:9px; width:100%;
  transition:border-left-color .15s;
}
.dui-match-card:hover { border-left-color:var(--red-hi); }
.dui-match-hd {
  display:flex; justify-content:space-between; align-items:flex-start;
  cursor:pointer;
}
.dui-match-port {
  font-family:'MyriadProCond',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red-hi); margin-bottom:3px;
}
.dui-match-meta { font-size:11px; color:var(--muted); }
.dui-match-body { margin-top:8px; }

/* ════════════════════ TABLE ═════════════════════════════════ */
.dui-tbl-wrap { overflow:hidden; width:100%; }
.dui-table { border-collapse:collapse; width:100%; }
.dui-table th {
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  color:var(--teal-txt); padding:8px 12px; text-align:left;
  border-bottom:1px solid var(--border-hi);
  background:rgba(0,0,0,.28);
}
.dui-table td { font-size:13px; padding:8px 12px; border-bottom:1px solid var(--border); }
.dui-table tr:last-child td { border-bottom:none; }
.dui-table tr:hover td { background:rgba(255,255,255,.018); }
.dui-table td a { font-size:12px; }

/* ════════════════════ TOGGLE / CHIP ════════════════════════ */
.dui-toggle {
  display:inline-flex; align-items:center;
  cursor:pointer; user-select:none;
  font-family:'MyriadProCond',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 14px;
  border:1px solid var(--border-hi);
  background:rgba(41,78,68,.20);
  color:var(--text-dim);
  transition:border-color .12s, color .12s, background .12s;
}
.dui-toggle input[type=checkbox] {
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.dui-toggle:hover { border-color:var(--teal-lbl); color:var(--text); background:rgba(41,78,68,.35); }
.dui-toggle:has(input:checked) { border-color:var(--red); color:var(--text); background:var(--red-dim); }
.dui-toggle:has(input:checked)::before { content:'✓\00a0'; color:var(--red-hi); font-size:10px; }

.dui-toggles {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}

/* ════════════════════ BUTTON ════════════════════════════════ */
.dui-btn {
  background:var(--red-dim); border:1px solid var(--red); color:var(--text);
  padding:8px 26px; cursor:pointer;
  font-family:'MyriadProCond',sans-serif;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  transition:background .14s, border-color .14s, box-shadow .14s;
}
.dui-btn:hover { background:rgba(154,20,0,.35); border-color:var(--red-hi); box-shadow:0 0 18px var(--red-glow); }
.dui-btn-ghost {
  background:rgba(41,78,68,.15); border:1px solid var(--border-hi); color:var(--teal-txt);
}
.dui-btn-ghost:hover { background:rgba(41,78,68,.30); border-color:var(--teal-lbl); color:var(--text); box-shadow:none; }

/* ════════════════════ INPUTS ════════════════════════════════ */
.dui-input {
  background:rgba(3,9,9,.90); border:1px solid var(--border);
  color:var(--text); padding:7px 10px;
  font-family:'MyriadPro',sans-serif; font-size:13px;
  transition:border-color .12s;
}
.dui-input::placeholder { color:var(--muted); }
.dui-input:focus { outline:none; border-color:var(--teal-lbl); }
select.dui-input option { background:#0b1e1c; }

/* ════════════════════ FORM FIELDS ══════════════════════════ */
.dui-field { display:flex; flex-direction:column; gap:4px; }
.dui-label {
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--teal-txt);
}
.dui-field-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }

/* ════════════════════ ACCOUNT EDITOR ═══════════════════════ */
.dui-editor {
  border-top:2px solid var(--teal-lbl);
  padding:18px 20px; width:100%; margin-top:10px;
}
.dui-editor-head {
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px;
}
.dui-editor-title { font-size:15px; font-weight:700; }
.dui-editor-id { color:var(--teal-txt); font-weight:400; }
.dui-chars-hd {
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--teal-txt); margin-bottom:8px;
}
.dui-chars-hd a { font-size:9px; font-weight:700; letter-spacing:.06em; }

/* ════════════════════ LOG VIEWER ════════════════════════════ */
.dui-log { width:100%; }
.dui-log-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 14px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.35);
}
.dui-log-title {
  font-family:'MyriadProCond',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-txt);
}
.dui-log-actions { display:flex; gap:12px; }
.dui-log-actions a {
  font-family:'MyriadProCond',sans-serif;
  font-size:9px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
}
.dui-log-body {
  padding:10px 14px; height:240px; overflow:auto;
  font-size:11px; font-family:'Segoe UI Mono','Courier New',monospace;
  color:var(--muted); white-space:pre; line-height:1.70;
}

/* ════════════════════ INLINE NOTICE ════════════════════════ */
.dui-notice     { font-size:11px; color:var(--muted); }
.dui-notice-err { color:var(--down); }

/* ════════════════════ MISC ══════════════════════════════════ */
.dui-muted { color:var(--muted); font-size:12px; }
.dui-teal  { color:var(--teal-txt); }

/* ════════════════════ FOOTER ════════════════════════════════ */
.dui-footer {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  background:rgba(2,8,8,.85);
  border-top:1px solid var(--border);
}
.dui-footer-copy {
  font-family:'MyriadProCond',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.dui-footer-disclaimer {
  display:block; margin-top:4px; max-width:640px;
  font-weight:400; font-size:9px; letter-spacing:.02em; text-transform:none;
  line-height:1.5; color:var(--muted); opacity:.72;
}
.dui-footer-links { display:flex; gap:20px; }
.dui-footer-links a {
  font-family:'MyriadProCond',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}