*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { min-height: 100%; background: #0d1117; color: #e6edf3; font-family: 'Segoe UI', system-ui, sans-serif; }
    body { padding: 32px 40px; display: flex; flex-direction: column; min-height: 100vh; }
    nav a { display: inline-flex; align-items: center; gap: 7px; color: #fbbf24; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; background: #1a1200; border: 1px solid #d9770644; border-radius: 8px; padding: 6px 14px; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
    nav a:hover { background: #2a1e00; border-color: #fbbf24; transform: translateX(-2px); }
    h2 { margin: 24px 0 20px; font-size: 1.4rem; color: #fbbf24; letter-spacing: 1px; }
    .workspace { display: flex; gap: 0; background: #161b22; border: 1px solid #d9770633; border-radius: 16px; overflow: hidden; }
    .panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #0d1117; border-bottom: 1px solid #21262d; }
    .panel-header span { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: #8b949e; font-weight: 600; }
    .panel-header button { background: none; border: 1px solid #30363d; color: #8b949e; border-radius: 6px; padding: 3px 12px; font-size: 0.75rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
    .panel-header button:hover { color: #e6edf3; border-color: #8b949e; }
    textarea { flex: 1; width: 100%; background: #0d1117; border: none; color: #e6edf3; font-family: 'Consolas', 'Courier New', monospace; font-size: 0.82rem; padding: 16px 18px; resize: none; outline: none; line-height: 1.6; min-height: 460px; }
    textarea::placeholder { color: #30363d; }
    .divider { width: 1px; background: #21262d; flex-shrink: 0; }
    .btn-bar { display: flex; gap: 12px; margin-top: 16px; }
    .convert-btn { padding: 10px 28px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: filter 0.15s, transform 0.1s; border: 2px solid; }
    .convert-btn:hover { filter: brightness(1.2); transform: translateY(-2px); }
    .convert-btn:active { transform: scale(0.97); }
    .btn-h2x { background: #2e1a00; color: #fbbf24; border-color: #d97706; }
    .btn-x2h { background: #161b22; color: #8b949e; border-color: #30363d; }
    .btn-x2h:hover { color: #e6edf3; border-color: #8b949e; }
    .error-bar { margin-top: 12px; padding: 10px 16px; background: #3d0f0f; border: 1px solid #ff444444; border-radius: 8px; color: #ff6b6b; font-size: 0.82rem; font-family: 'Consolas', monospace; white-space: pre-wrap; }

    /* Parsed section */
    #parsed-section { margin-top: 28px; display: none; }
    .parsed-title { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: #8b949e; font-weight: 600; margin-bottom: 14px; }
    .structure-block { background: #161b22; border: 1px solid #d9770622; border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
    .structure-hdr { padding: 8px 16px; background: #2e1a0088; font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: #d97706; border-bottom: 1px solid #d9770622; }
    table.parsed-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
    table.parsed-tbl th { padding: 6px 14px; text-align: left; color: #484f58; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.5px; border-bottom: 1px solid #21262d; }
    table.parsed-tbl td { padding: 7px 14px; border-bottom: 1px solid #21262d11; color: #c9d1d9; font-family: 'Consolas', monospace; }
    table.parsed-tbl tr:last-child td { border-bottom: none; }
    .tag-obis    { color: #fbbf24; }
    .tag-ascii   { color: #34d399; }
    .tag-dt      { color: #60a5fa; }
    .tag-int     { color: #a78bfa; }
    .tag-raw     { color: #8b949e; }