.calc-app *, .calc-app *::before, .calc-app *::after{ box-sizing: border-box; }.calc-app{
      --bg: #0f1419;
      --surface: #1a2332;
      --surface2: #243044;
      --surface3: #2a3648;
      --border: #2d3f56;
      --text: #e8edf4;
      --muted: #8b9cb3;
      --accent: #3b82f6;
      --accent-hover: #2563eb;
      --success: #22c55e;
      --warning: #f59e0b;
      --error: #ef4444;
      --vin: #6366f1;
      --mirror: #8b5cf6;
      --radius: 10px;
      --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
      --mono: 'Cascadia Code', 'Consolas', monospace;
    }.calc-app .app{
      max-width: 1560px;
      margin: 0 auto;
      padding: 1.25rem 1.25rem 1.5rem;
    }.calc-app .header{
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.5rem 1.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid var(--border);
    }.calc-app .header h1{ margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }.calc-app .header-note{ margin: 0; font-size: 0.8125rem; color: var(--muted); }.calc-app .layout{
      display: grid;
      grid-template-columns: minmax(440px, 460px) minmax(0, 1fr);
      gap: 1rem;
      align-items: start;
    }@media (max-width: 960px) {.calc-app .layout{ grid-template-columns: 1fr; }}.calc-app .sidebar{ display: flex; flex-direction: column; gap: 0.85rem; }.calc-app .panel{
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
    }.calc-app .panel-title{
      margin: 0 0 0.75rem;
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }.calc-app .field{ margin-bottom: 0.85rem; }.calc-app .field:last-child{ margin-bottom: 0; }.calc-app .field label{
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--muted);
      margin-bottom: 0.35rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }.calc-app .field input[type='text'], .calc-app .field select, .calc-app .field textarea{
      width: 100%;
      padding: 0.6rem 0.7rem;
      font-size: 0.9375rem;
      font-family: var(--mono);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
    }.calc-app .field textarea{ resize: vertical; min-height: 2.75rem; font-size: 0.8125rem; }.calc-app .field input:focus, .calc-app .field select:focus, .calc-app .field textarea:focus{
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }.calc-app .hint{ margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--muted); }.calc-app .chk-row{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      margin-bottom: 0.75rem;
      cursor: pointer;
    }.calc-app .chk-row input{ width: 1rem; height: 1rem; accent-color: var(--accent); }.calc-app .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 0.85rem;
      font-size: 0.8125rem;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s;
    }.calc-app .btn:hover:not(:disabled){ border-color: var(--accent); }.calc-app .btn:disabled{ opacity: 0.4; cursor: not-allowed; }.calc-app .btn-primary{
      width: 100%;
      padding: 0.75rem;
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }.calc-app .btn-primary:hover:not(:disabled){ background: var(--accent-hover); border-color: var(--accent-hover); }.calc-app .btn-row{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }.calc-app .hex-bar{
      display: block;
      padding: 0.7rem 0.8rem;
      font-family: var(--mono);
      font-size: 0.8125rem;
      white-space: nowrap;
      overflow-x: auto;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
      line-height: 1.55;
      letter-spacing: 0.02em;
    }.calc-app .hex-meta{ margin: 0.35rem 0 0; font-size: 0.6875rem; color: var(--muted); }.calc-app .alert{ padding: 0.65rem 0.85rem; border-radius: 6px; font-size: 0.8125rem; margin-top: 0.65rem; }.calc-app .alert.hidden{ display: none; }.calc-app .alert-warning{ background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); color: #fcd34d; }.calc-app .alert-error{ background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); color: #fca5a5; }.calc-app .alert-info{ background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; }.calc-app .editor-panel{ padding: 1rem 1.1rem; min-width: 0; }.calc-app .editor-head{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      margin-bottom: 0.75rem;
    }.calc-app .editor-head h2{ margin: 0; font-size: 1rem; font-weight: 600; }.calc-app .legend{ display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; font-size: 0.6875rem; color: var(--muted); }.calc-app .legend span{ display: inline-flex; align-items: center; gap: 0.3rem; }.calc-app .dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }.calc-app .dot-vin{ background: var(--vin); }.calc-app .dot-mirror{ background: var(--mirror); }.calc-app .dot-edit{ background: var(--success); }.calc-app .editor-intro{ margin: 0 0 0.85rem; font-size: 0.8125rem; color: var(--muted); }.calc-app .auto-bytes{
      margin-bottom: 0.85rem;
      padding: 0.65rem 0.85rem;
      background: rgba(99, 102, 241, 0.07);
      border: 1px solid rgba(99, 102, 241, 0.22);
      border-radius: 8px;
    }.calc-app .auto-bytes.hidden{ display: none; }.calc-app .auto-bytes-head{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.65rem;
      margin-bottom: 0.5rem;
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--vin);
    }.calc-app .auto-bytes-note{ font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--muted); font-size: 0.75rem; }.calc-app .auto-chips{
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 0.5rem;
    }.calc-app .auto-chip{
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.2rem 0.45rem;
      font-size: 0.75rem;
      font-family: var(--mono);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 4px;
      line-height: 1.3;
    }.calc-app .auto-chip.mirror{ border-color: rgba(139, 92, 246, 0.45); }.calc-app .auto-chip-idx{ color: var(--muted); font-size: 0.625rem; font-family: var(--font); font-weight: 600; }.calc-app .auto-chip-val{ color: var(--text); font-weight: 700; }.calc-app .byte-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem;
    }@media (min-width: 1400px) {.calc-app .byte-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }}@media (max-width: 1100px) {.calc-app .byte-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}.calc-app .byte-card{
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.7rem 0.8rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      min-width: 0;
      position: relative;
      overflow: visible;
    }.calc-app .byte-card.vin{ border-left: 3px solid var(--vin); }.calc-app .byte-card.mirror{ border-left: 3px solid var(--mirror); }.calc-app .byte-card.editable{ border-left: 3px solid var(--success); }.calc-app .byte-card.span-2{ grid-column: span 2; }@media (max-width: 1100px) {.calc-app .byte-card.span-2{ grid-column: span 1; }}.calc-app .byte-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.5rem;
    }.calc-app .byte-label{
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }.calc-app .byte-name-row{
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
      margin-top: 0.1rem;
    }.calc-app .byte-name{ font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }.calc-app .byte-hex-input{
      width: 3rem;
      padding: 0.2rem 0.35rem;
      font-family: var(--mono);
      font-size: 0.875rem;
      font-weight: 700;
      text-align: center;
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--accent);
      flex-shrink: 0;
    }.calc-app .byte-hex-input:disabled{ color: var(--muted); opacity: 0.75; cursor: not-allowed; }.calc-app .bit-list{ display: flex; flex-direction: column; gap: 0.3rem; }.calc-app .bit-row{
      display: flex;
      align-items: flex-start;
      gap: 0.45rem;
      font-size: 0.75rem;
      line-height: 1.35;
      cursor: pointer;
    }.calc-app .bit-row input{ width: 0.875rem; height: 0.875rem; margin-top: 0.12rem; accent-color: var(--accent); flex-shrink: 0; }.calc-app .bit-row.disabled{ opacity: 0.55; cursor: default; }.calc-app .bit-text{ flex: 1; min-width: 0; }.calc-app .bit-mask{ font-family: var(--mono); font-size: 0.625rem; color: var(--muted); margin-left: 0.2rem; }.calc-app .wss-row{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.75rem;
    }.calc-app .enum-select{
      width: 100%;
      padding: 0.4rem 0.5rem;
      font-size: 0.75rem;
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text);
    }.calc-app .byte-decode{
      font-size: 0.6875rem;
      color: var(--muted);
      padding-top: 0.35rem;
      border-top: 1px solid var(--border);
      line-height: 1.4;
    }.calc-app .tip-wrap{ position: relative; display: inline-flex; vertical-align: middle; }.calc-app .tip-btn{
      width: 15px;
      height: 15px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--surface3);
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      cursor: help;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }.calc-app .tip-btn:hover, .calc-app .tip-btn:focus-visible{
      border-color: var(--accent);
      color: var(--accent);
      outline: none;
    }.calc-app .tip-popup{
      display: none;
      position: absolute;
      z-index: 200;
      left: 50%;
      top: calc(100% + 5px);
      transform: translateX(-50%);
      width: max-content;
      max-width: 260px;
      padding: 0.5rem 0.65rem;
      font-size: 0.75rem;
      font-weight: 400;
      line-height: 1.45;
      text-transform: none;
      letter-spacing: normal;
      color: var(--text);
      background: #1e2838;
      border: 1px solid var(--accent);
      border-radius: 6px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
      pointer-events: none;
      white-space: normal;
    }.calc-app .tip-wrap:hover .tip-popup, .calc-app .tip-wrap:focus-within .tip-popup{ display: block; }.calc-app details.help{
      padding: 0.75rem 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      font-size: 0.8125rem;
    }.calc-app details.help summary{ cursor: pointer; font-weight: 600; color: var(--muted); }.calc-app details.help ol{ margin: 0.65rem 0 0; padding-left: 1.25rem; line-height: 1.6; }.calc-app details.help code{ font-family: var(--mono); font-size: 0.75rem; color: var(--accent); }.calc-app .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }.calc-app .migrate-log{
      margin-top: 0.65rem;
      padding: 0.65rem;
      font-family: var(--mono);
      font-size: 0.6875rem;
      background: var(--surface2);
      border-radius: 6px;
      max-height: 160px;
      overflow: auto;
      white-space: pre-wrap;
      color: var(--muted);
    }.calc-app .badge-common{
      display: inline-block;
      margin-left: 0.35rem;
      padding: 0.1rem 0.35rem;
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--success);
      border: 1px solid rgba(34, 197, 94, 0.4);
      border-radius: 4px;
      vertical-align: middle;
    }.calc-app .glossary{ margin: 0.65rem 0 0; }.calc-app .glossary dt{ font-weight: 600; font-size: 0.75rem; margin-top: 0.45rem; color: var(--text); }.calc-app .glossary dd{ margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--muted); line-height: 1.45; }.calc-app .checklist{
      margin-top: 0.65rem;
      padding: 0.65rem 0.75rem;
      font-size: 0.75rem;
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.28);
      border-radius: 6px;
      line-height: 1.5;
    }.calc-app .checklist.hidden{ display: none; }.calc-app .checklist-title{ font-weight: 700; color: #fcd34d; margin-bottom: 0.35rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }.calc-app .checklist ul{ margin: 0; padding-left: 1.1rem; color: var(--muted); }.calc-app .checklist li{ margin-bottom: 0.2rem; }.calc-app .editor-empty{
      grid-column: 1 / -1;
      padding: 2rem 1.25rem;
      text-align: center;
      font-size: 0.875rem;
      color: var(--muted);
      background: var(--surface2);
      border: 1px dashed var(--border);
      border-radius: 8px;
      line-height: 1.55;
    }.calc-app .byte-section{
      grid-column: 1 / -1;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }.calc-app .byte-section summary{
      cursor: pointer;
      padding: 0.55rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }.calc-app .byte-section summary::-webkit-details-marker{ display: none; }.calc-app .byte-section summary::before{
      content: '▸';
      font-size: 0.6875rem;
      transition: transform 0.15s;
    }.calc-app .byte-section[open] summary::before{ transform: rotate(90deg); }.calc-app .byte-section-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem;
      padding: 0.65rem;
      border-top: 1px solid var(--border);
    }@media (min-width: 1400px) {.calc-app .byte-section-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }}@media (max-width: 1100px) {.calc-app .byte-section-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}.calc-app .byte-section-grid .byte-card.span-2{ grid-column: span 2; }@media (max-width: 1100px) {.calc-app .byte-section-grid .byte-card.span-2{ grid-column: span 1; }}.calc-app .byte-plain{
      font-size: 0.75rem;
      color: var(--muted);
      line-height: 1.4;
      margin: 0;
    }.calc-app .byte-note{
      font-size: 0.6875rem;
      color: var(--accent);
      line-height: 1.35;
      padding: 0.35rem 0.45rem;
      background: rgba(59, 130, 246, 0.08);
      border-radius: 4px;
      border: 1px solid rgba(59, 130, 246, 0.2);
    }.calc-app .byte-card.byte-diff{
      border-color: rgba(245, 158, 11, 0.55);
      box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.15);
    }.calc-app .byte-diff-badge{
      font-size: 0.625rem;
      font-family: var(--mono);
      color: #fcd34d;
      padding: 0.15rem 0.35rem;
      background: rgba(245, 158, 11, 0.12);
      border-radius: 3px;
      line-height: 1.3;
    }.calc-app .bit-advanced{
      margin-top: 0.25rem;
      padding-top: 0.35rem;
      border-top: 1px dashed var(--border);
    }.calc-app .bit-advanced summary{
      cursor: pointer;
      font-size: 0.6875rem;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 0.3rem;
    }.calc-app .mirror-pairs{
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }.calc-app .mirror-pair{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.5rem;
      font-size: 0.75rem;
    }.calc-app .mirror-pair-label{
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--mirror);
      min-width: 5.5rem;
    }.calc-app .hex-strip{
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      margin-bottom: 0.75rem;
      padding: 0.45rem;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 6px;
    }.calc-app .hex-strip.hidden{ display: none; }.calc-app .hex-strip-cell{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.1rem;
      padding: 0.2rem 0.25rem;
      min-width: 1.75rem;
      font-family: var(--mono);
      font-size: 0.6875rem;
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 4px;
      cursor: pointer;
      color: var(--text);
    }.calc-app .hex-strip-cell:hover{ border-color: var(--accent); }.calc-app .hex-strip-cell.diff{ border-color: rgba(245, 158, 11, 0.55); color: #fcd34d; }.calc-app .hex-strip-cell.auto{ opacity: 0.75; }.calc-app .hex-strip-idx{ font-size: 0.5625rem; color: var(--muted); font-family: var(--font); }.calc-app .footer-note{ margin-top: 1rem; font-size: 0.75rem; color: var(--muted); text-align: center; }
@keyframes calcFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes calcPulseOnce {
  0% { box-shadow: 0 0 0 0 rgba(74, 159, 212, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(74, 159, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 159, 212, 0); }
}
@keyframes hexReveal {
  from { opacity: 0.45; }
  to { opacity: 1; }
}
.calc-app {
  margin-top: 8px;
}
.calc-app.calc-enter .layout {
  animation: calcFadeUp 0.45s ease both;
}
.calc-app .panel {
  animation: calcFadeUp 0.4s ease both;
}
.calc-app .sidebar .panel:nth-of-type(1) { animation-delay: 0.04s; }
.calc-app .sidebar .panel:nth-of-type(2) { animation-delay: 0.08s; }
.calc-app .editor-panel { animation-delay: 0.1s; }
.calc-app .btn-primary {
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.calc-app .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 106, 159, 0.35);
}
.calc-app .btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.calc-app .btn:not(.btn-primary) {
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.calc-app .btn:not(.btn-primary):active:not(:disabled) {
  transform: scale(0.97);
}
.calc-app .btn-primary.calc-busy {
  animation: calcPulseOnce 0.6s ease;
}
.calc-app .hex-bar.hex-ready {
  animation: hexReveal 0.35s ease;
}
.calc-app .byte-card {
  transition: border-color 0.2s, transform 0.2s;
}
.calc-app .byte-card:hover {
  transform: translateY(-1px);
}
.calc-app .app {
  max-width: none;
  padding: 0;
}
.calc-app .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.calc-app details.help summary {
  transition: color 0.15s;
}
.calc-app details.help[open] summary {
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .calc-app.calc-enter .layout,
  .calc-app .panel,
  .calc-app .hex-bar.hex-ready,
  .calc-app .btn-primary.calc-busy {
    animation: none;
  }
  .calc-app .btn-primary,
  .calc-app .btn,
  .calc-app .byte-card {
    transition: none;
  }
}