:root{--primary:#C800DF;--secondary:#E60076;--success:#16A34A;--warning:#D97706;--danger:#DC2626;--surface:#fff;--surface-raised:#F9FAFB;--text:#111827;--text-muted:#6B7280;--border:#E5E7EB;--radius:14px;--radius-sm:8px;--shadow:0 1px 3px rgb(17 24 39 / 6%),0 8px 24px rgb(17 24 39 / 6%);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--surface:#0C0C0F;--surface-raised:#16161D;--text:#F3F4F6;--text-muted:#9CA3AF;--border:#2A2A33;--shadow:0 1px 3px rgb(0 0 0 / 30%),0 8px 24px rgb(0 0 0 / 25%)}}
:root[data-theme=dark]{--surface:#0C0C0F;--surface-raised:#16161D;--text:#F3F4F6;--text-muted:#9CA3AF;--border:#2A2A33;--shadow:0 1px 3px rgb(0 0 0 / 30%),0 8px 24px rgb(0 0 0 / 25%);color-scheme:dark}:root[data-theme=light]{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--surface);color:var(--text);-webkit-font-smoothing:antialiased}.page{max-width:1120px;margin:0 auto;padding:2rem 1rem}.header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}.header-side{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}.eyebrow,.tile-label,label,.section-title{margin:0 0 .5rem;font:600 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}h1{margin:0;font-size:clamp(1.75rem,4vw,2.25rem);letter-spacing:-.02em}.subtitle{margin:.5rem 0 0;color:var(--text-muted);font-size:.95rem}.nav,.controls,.actions{display:flex;flex-wrap:wrap;gap:.5rem}.nav a,.button,button,select,input,textarea{min-height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text);font:500 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}.nav a{display:inline-flex;align-items:center;padding:0 1rem;color:var(--text-muted);text-decoration:none}.nav a:hover,.nav a[aria-current=page],button:hover,select:hover,input:hover,textarea:hover{border-color:var(--primary)}button,.button{padding:0 .75rem;cursor:pointer}.button--primary{color:white;border-color:var(--primary);background:linear-gradient(90deg,var(--primary),var(--secondary))}.button--danger{color:var(--danger)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.bento{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}.tile,.panel{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}.panel{margin-bottom:1.5rem;overflow-x:auto}.panel h2{margin:0 0 1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.tile-stat{margin:.5rem 0 0;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.tile-head{display:flex;justify-content:space-between;gap:.75rem;align-items:center}.tile h2{margin:0;font-size:1.05rem}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;font:600 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.badge--success{color:var(--success);background:color-mix(in srgb,var(--success) 14%,transparent)}.badge--danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}.badge--primary{color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent)}.badge--muted{color:var(--text-muted);background:color-mix(in srgb,var(--text-muted) 12%,transparent)}.banner{padding:.75rem 1rem;margin-bottom:1.5rem;border:1px solid color-mix(in srgb,var(--danger) 35%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--danger) 10%,transparent);color:var(--danger)}.notice{color:var(--success);border-color:color-mix(in srgb,var(--success) 35%,transparent);background:color-mix(in srgb,var(--success) 10%,transparent)}table{width:100%;border-collapse:collapse;font-size:.875rem}th{padding:.75rem 1rem;text-align:left;font:500 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}td{padding:.75rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}tr:last-child td{border-bottom:0}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;color:var(--text-muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.form-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}.span-all{grid-column:1/-1}label{display:block;color:var(--text-muted)}input,select,textarea{display:block;width:100%;margin-top:.4rem;padding:.6rem .7rem;font:400 .875rem/1.3 system-ui,-apple-system,sans-serif}textarea{min-height:84px;resize:vertical}.check{display:flex;align-items:center;gap:.5rem;min-height:36px;font:500 .85rem/1.2 system-ui,-apple-system,sans-serif;text-transform:none;letter-spacing:normal}.check input{width:auto;margin:0;min-height:auto}.protocol-fields[hidden],.hidden{display:none}.row-actions{display:flex;gap:.4rem;white-space:nowrap}.empty{padding:1.5rem;color:var(--text-muted);text-align:center}.dialog{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow);max-width:460px;width:calc(100% - 2rem);padding:0}.dialog::backdrop{background:rgb(0 0 0 / 48%)}.dialog form{padding:1.25rem}.dialog h2{margin:0 0 .5rem}.dialog p{color:var(--text-muted)}.dialog .actions{justify-content:flex-end;margin-top:1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:680px){.page{padding:1.5rem 1rem}.header-side{align-items:flex-start}.form-grid,.form-grid--three{grid-template-columns:1fr}.span-all{grid-column:auto}th,td{padding:.6rem}.hide-small{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.badge--warning{color:var(--warning);background:color-mix(in srgb,var(--warning) 14%,transparent)}
.nav a[aria-current=page]{color:var(--text);border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.detail{margin-top:.5rem}
.detail summary{cursor:pointer;color:var(--text-muted);font-size:.78rem}
.detail pre{margin:.5rem 0 0;padding:.6rem;overflow-x:auto;border-radius:var(--radius-sm);background:var(--surface-raised);font-size:.72rem}

.tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border);padding-bottom:.5rem;overflow-x:auto}
.tab-btn{border:1px solid transparent;background:transparent;color:var(--text-muted);padding:.5rem 1rem;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;white-space:nowrap}
.tab-btn:hover{color:var(--text);background:var(--surface-raised)}
.tab-btn[aria-selected=true]{color:var(--text);border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.helper-text{font-size:.78rem;color:var(--text-muted);margin-top:.25rem}
.code-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.4;tab-size:2;min-height:120px;white-space:pre}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.pill-group{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.table-scroll table {
  min-width: 620px;
}

/* Drag-and-drop & Protocol Priority Styling */
.protocol-priority-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.protocol-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.protocol-item:hover {
  border-color: var(--primary);
}

.protocol-item.dragging {
  opacity: 0.5;
  background: var(--surface-raised);
  border-style: dashed;
  cursor: grabbing;
}

.protocol-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  cursor: grab;
  font-size: 1.1rem;
  line-height: 1;
}

.protocol-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text);
}

.protocol-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.order-btn {
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  min-height: 26px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.order-btn:hover {
  background: var(--surface-raised);
}

/* Feed interactive list styling */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  gap: 0.75rem;
}

.feed-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}

.feed-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile responsive media queries */
@media (max-width: 768px) {
  .page {
    padding: 1.25rem 0.75rem;
  }
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
  }
  .header-side {
    align-items: flex-start;
    width: 100%;
  }
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .card-header .actions, .card-header .controls {
    width: 100%;
    justify-content: flex-start;
  }
  .bento {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .form-grid, .form-grid--three {
    grid-template-columns: 1fr;
  }
  .tabs {
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .feed-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .feed-meta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .nav {
    width: 100%;
  }
  .nav a {
    flex: 1;
    justify-content: center;
    padding: 0 0.5rem;
  }
  .row-actions {
    flex-wrap: wrap;
  }
}

/* Checkbox and radio hardening */
input[type="checkbox"],
input[type="radio"] {
  width: auto !important;
  min-height: auto !important;
  display: inline-block !important;
  margin: 0;
  cursor: pointer;
}

.check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  min-height: auto !important;
  font: 500 0.85rem/1.35 system-ui, -apple-system, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text) !important;
  cursor: pointer !important;
  margin-bottom: 0.5rem;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  width: 1.05rem !important;
  height: 1.05rem !important;
  min-height: auto !important;
  margin: 0.15rem 0 0 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}