:root{
  --c-id:#2d6cdf;
  --c-id-cmd:#6f42c1;
  --c-id-node:#0aa04f;
  --c-dlc:#f59e0b;
  --c-data:#ff4d4f;
  --bg:#0f172a;
  --fg:#e5e7eb;
  --muted:#94a3b8;
}
html,body{background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:0}
.container{max-width:900px;margin:32px auto;padding:0 16px}
h1{margin:0 0 8px 0;font-size:28px}
.sub{margin-top:0;color:var(--muted)}
form .row{display:flex;gap:12px;align-items:stretch;margin:10px 0;flex-wrap:wrap}
label{min-width:230px;flex-shrink:0}
input[type="text"],input[type="number"],select,button{padding:12px 16px;border-radius:8px;border:1px solid #334155;background:#0b1220;color:var(--fg);flex:1;min-width:0;font-size:16px;-webkit-appearance:none;appearance:none}
input[type="checkbox"]{width:auto;flex:none;margin-right:8px;transform:scale(1.2)}
select{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button{background:#1f6feb;border-color:#1f6feb;cursor:pointer;min-height:44px;touch-action:manipulation}
button:hover{filter:brightness(1.1)}
button:active{filter:brightness(0.9)}
.legend{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.box{display:inline-block;padding:8px 12px;border-radius:6px;font-size:12px;white-space:nowrap;margin:2px}
.box.id{background:var(--c-id)}
.box.id-cmd{background:var(--c-id-cmd)}
.box.id-node{background:var(--c-id-node)}
.box.dlc{background:var(--c-dlc)}
.box.data{background:var(--c-data)}
.frame{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.cell{padding:6px 8px;border-radius:6px;font-family:ui-monospace, Menlo, Consolas, monospace}
.cell.id{background:var(--c-id)}
.cell.dlc{background:var(--c-dlc)}
.cell.data{background:var(--c-data)}
.id-split{display:flex;gap:4px}
.cell .subpart{padding:2px 4px;border-radius:4px}
.id-cmd{background:var(--c-id-cmd)}
.id-node{background:var(--c-id-node)}
.hex{background:#0b1220;border:1px solid #334155;padding:12px;border-radius:8px;overflow:auto}
.notes{color:var(--muted);margin-top:20px;background:#0b1220;padding:16px;border-radius:8px;border:1px solid #334155}
.notes h3{margin-top:0;color:var(--fg)}
.notes ol{margin:8px 0;padding-left:20px}
.notes p{margin:8px 0}

/* Multi-frame sequence styles */
.multi-frame-header {
  background: #1e293b;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #334155;
}

.multi-frame-header h3 {
  margin: 0 0 8px 0;
  color: #60a5fa;
}

.frame-sequence {
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.frame-sequence h4 {
  background: #1e293b;
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
  color: #60a5fa;
}

.frame-annotation {
  padding: 12px 16px;
}

.visual-frame {
  margin-top: 8px;
}

.hex-output {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #020617;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #1e293b;
}

.visual {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  align-items: flex-start;
}

/* UART command builder styles */
.uart-info {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.uart-info h4 {
  margin-top: 0;
  color: #60a5fa;
}

.uart-info p {
  margin: 8px 0;
  color: var(--muted);
}

/* Data part coloring for multi-frame */
.data-offset { background: #7c3aed !important; }
.data-data { background: var(--c-data) !important; }
.data-lastid { background: #059669 !important; }
.data-responsemode { background: #dc2626 !important; }
.data-cmdsend { background: #dc2626 !important; }
.data-buflen { background: #ea580c !important; }
.data-crc { background: #be123c !important; }
.data-uart { background: #0891b2 !important; }
.data-command { background: #0891b2 !important; }

/* UART parameter info styling */
.uart-param-info {
  background: #1e293b;
  border-left: 3px solid #60a5fa;
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: 4px;
}

.uart-param-info p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.uart-param-info em {
  color: #cbd5e1;
}

/* Improved frame breakdown styles */
.id-header {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
}

.id-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.id-part {
  display: flex;
  justify-content: space-between;
}

.id-label {
  color: var(--muted);
  min-width: 100px;
}

.id-value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--fg);
}

.dlc-header {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 14px;
}

.dlc-value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

.frame-breakdown {
  background: #1e293b;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #334155;
}

.breakdown-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.breakdown-section:last-child {
  margin-bottom: 0;
}

.breakdown-label {
  color: var(--muted);
  font-size: 12px;
  min-width: 90px;
}

.breakdown-value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--fg);
  font-size: 12px;
  font-weight: bold;
}

.breakdown-details {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
  .container {
    margin: 16px auto;
    padding: 0 12px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  /* Stack form elements vertically on mobile */
  form .row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  label {
    min-width: auto;
    font-weight: 600;
    margin-bottom: 4px;
  }
  
  input[type="text"], input[type="number"], select, button {
    width: 100%;
    box-sizing: border-box;
  }
  
  input[type="checkbox"] {
    width: auto;
  }
  
  /* Ensure select dropdowns fit on mobile */
  select {
    font-size: 14px;
  }
  
  select option {
    padding: 8px;
    font-size: 14px;
  }
  
  /* Better box layout on mobile */
  .box {
    padding: 10px 12px;
    font-size: 13px;
    text-align: center;
    margin: 3px;
  }
  
  /* Improve frame visualization for mobile */
  .frame {
    flex-direction: column;
  }
  
  .cell {
    margin-bottom: 8px;
  }
  
  /* Better spacing for mobile visual frames */
  .visual {
    flex-direction: column;
    gap: 8px;
  }
  
  .visual .box {
    text-align: center;
    padding: 12px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Mobile-friendly hex output */
  .hex {
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
  }
  
  /* Improve multi-frame headers on mobile */
  .multi-frame-header {
    padding: 12px;
  }
  
  .frame-sequence h4 {
    font-size: 13px;
    padding: 8px 12px;
  }
  
  /* Better breakdown sections for mobile */
  .breakdown-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .breakdown-label {
    min-width: auto;
    font-weight: 600;
  }
  
  /* Improved ID breakdown for mobile */
  .id-breakdown {
    gap: 6px;
  }
  
  .id-part {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  /* Notes section mobile optimization */
  .notes {
    padding: 12px;
  }
  
  .notes h3 {
    font-size: 16px;
  }
  
  .notes p, .notes li {
    font-size: 14px;
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 8px;
    margin: 8px auto;
  }
  
  h1 {
    font-size: 20px;
    text-align: center;
  }
  
  .sub {
    text-align: center;
    font-size: 14px;
  }
  
  /* Extra small screens - even more compact */
  .multi-frame-header {
    padding: 8px;
  }
  
  .frame-annotation {
    padding: 8px 12px;
  }
  
  .notes {
    padding: 8px;
  }
  
  /* Stack visual elements more compactly */
  .visual .box {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .hex {
    font-size: 11px;
    padding: 8px;
  }
}