/* ═══════════════════════════════════════════════════════════════════
           PLC DATA TYPE CONVERTER — Tool-Specific Styles
           ═══════════════════════════════════════════════════════════════════ */

        /* ── Data-type badge colours ── */
        .badge-int16  { background: rgba(251,191,36,0.15);  color:#fbbf24; border-color: rgba(251,191,36,0.30); }
        .badge-uint16 { background: rgba(0,147,222,0.15);  color:#0093DE; border-color: rgba(0,147,222,0.30); }
        .badge-int32  { background: rgba(251,146,60,0.15);  color:#fb923c; border-color: rgba(251,146,60,0.30); }
        .badge-uint32 { background: rgba(0,147,222,0.15); color:#0093DE; border-color: rgba(0,147,222,0.30); }
        .badge-float  { background: rgba(0,190,76,0.15);  color:#00BE4C; border-color: rgba(0,190,76,0.30); }
        .badge-double { background: rgba(0,147,222,0.15);  color:#0093DE; border-color: rgba(0,147,222,0.30); }
        .badge-string { background: rgba(244,114,182,0.15); color:#f472b6; border-color: rgba(244,114,182,0.30); }

        .type-badge {
            display: inline-flex; align-items: center; justify-content: center;
            padding: 2px 10px; border-radius: 999px;
            font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
            border: 1px solid; white-space: nowrap;
        }

        /* ── PLC output table ── */
        .plc-output-table { width:100%; border-collapse:separate; border-spacing:0; }
        .plc-output-table thead th {
            padding: 10px 16px; text-align: left;
            font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
            text-transform: uppercase; color: rgba(255,255,255,0.45);
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .plc-output-table tbody tr {
            border-bottom: 1px solid rgba(255,255,255,0.05);
            transition: background 0.15s ease;
        }
        .plc-output-table tbody tr:last-child { border-bottom: none; }
        .plc-output-table tbody tr:hover { background: rgba(255,255,255,0.03); }
        .plc-output-table tbody td {
            padding: 10px 16px; font-size: 0.8125rem; vertical-align: middle;
        }
        .plc-mono { font-family: var(--font-mono); font-size: 0.8125rem; }
        .plc-hex  { color: #0093DE; }
        .plc-dec  { color: #00BE4C; }
        .plc-note { color: rgba(255,255,255,0.38); font-size: 0.75rem; }
        .plc-change { color: #fbbf24; font-size: 0.75rem; }
        .plc-row-dim { color: rgba(255,255,255,0.25); font-style: italic; }
        .plc-status-ok   { color: #00BE4C; }
        .plc-status-warn { color: #fbbf24; }
        .plc-status-err  { color: #B43A3A; }
        .plc-crc { font-size: 0.75rem; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,0.05); }

        /* ── Endian visual indicator ── */
        .endian-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 3px 10px; border-radius: 999px;
            font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em;
            background: rgba(0,147,222,0.10); border: 1px solid rgba(0,147,222,0.25);
            color: #0093DE;
        }
        .endian-badge::before {
            content: ''; display: block; width: 6px; height: 6px;
            border-radius: 50%; background: #0093DE;
            box-shadow: 0 0 6px rgba(0,147,222,0.5);
            animation: blink 2s ease-in-out infinite;
        }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

        /* ── Endian radio grid ── */
        .endian-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:6px; }
        .endian-radio { position:absolute; opacity:0; width:1px; height:1px; }
        .endian-radio:focus-visible + .endian-label { outline:3px solid #5bc6ff; outline-offset:3px; }
        .endian-label {
            display: flex; align-items: center; justify-content: center;
            padding: 7px 4px; border-radius: 10px; font-size: 0.75rem; font-weight: 600;
            letter-spacing: 0.06em; cursor: pointer; transition: all 0.2s ease;
            border: 1px solid rgba(255,255,255,0.10);
            background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
            font-family: var(--font-mono);
        }
        .endian-radio:checked + .endian-label {
            background: rgba(0,147,222,0.16); border-color: rgba(0,147,222,0.45);
            color: #0093DE; box-shadow: 0 0 12px rgba(0,147,222,0.12);
        }
        .endian-label:hover { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.8); }

        /* ── Two-column converter layout ── */
        @media (min-width: 900px) {
            .converter-two-col {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1.25rem;
                align-items: start;
            }
        }

        /* ── Config group ── */
        .config-group {
            padding: 1rem 1.25rem;
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.07);
        }
        .config-group-title {
            font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
            text-transform: uppercase; color: rgba(255,255,255,0.40);
            margin-bottom: 0.875rem; display: flex; align-items: center; gap: 6px;
        }
        .config-group-title::after {
            content:''; flex:1; height:1px; background: rgba(255,255,255,0.07);
        }

        /* ── Input format hint ── */
        .input-hint {
            font-size: 0.75rem; color: rgba(255,255,255,0.35);
            margin-top: 6px; display: flex; align-items: center; gap: 6px;
        }
        .input-hint kbd {
            display: inline-block; padding: 1px 6px; border-radius: 4px;
            background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
            font-family: var(--font-mono); font-size: 0.6875rem;
        }

        /* ── Action button row ── */
        .plc-actions { display:flex; flex-wrap:wrap; gap: 0.625rem; margin-top: 1rem; }

        /* ── Sample btn special style ── */
        .sample-btn {
            background: rgba(0,147,222,0.08);
            border: 1px solid rgba(0,147,222,0.22);
            color: #0093DE; padding: 8px 18px; border-radius: var(--radius-lg);
            font-size: 0.8125rem; font-weight: 500; cursor: pointer;
            transition: all 0.2s ease; display: inline-flex; align-items: center;
            justify-content: center; gap: 0.5rem; font-family: var(--font-body);
        }
        .sample-btn:hover { background:rgba(0,147,222,0.16); border-color:rgba(0,147,222,0.38); transform:translateY(-1px); }
        .sample-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

        /* ── Output table scroll ── */
        .output-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
        .output-table-wrap table { min-width:580px; }

        /* ── Toast ── */
        .plc-toast {
            background: rgba(255,255,255,0.08) !important;
            backdrop-filter: blur(20px) saturate(200%) !important;
            border: 1px solid rgba(255,255,255,0.15) !important;
            box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
            border-radius: 14px !important; padding: 10px 20px !important;
            font-size: 0.8125rem !important; color:#fff !important;
            font-family: var(--font-body) !important;
            animation: toast-in 0.3s cubic-bezier(0.23,1,0.32,1) forwards !important;
        }
        @keyframes toast-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

        /* ── Divider ── */
        .divider-subtle { border:none; border-top:1px solid rgba(255,255,255,0.07); margin: 1rem 0; }

        /* ── Empty state icon ── */
        .empty-state-icon {
            width: 40px; height: 40px; margin: 0 auto 12px;
            color: rgba(255,255,255,0.18);
        }

        /* ── Primary emerald button (accent variant) ── */
        .glass-btn-primary-emerald {
            background: rgba(0,190,76,0.14);
            border: 1px solid rgba(0,190,76,0.35);
            padding: 10px 24px;
            border-radius: var(--radius-lg);
            font-size: 0.875rem;
            font-weight: 500;
            color: #00BE4C;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.23, 1.0, 0.32, 1);
            position: relative;
            overflow: hidden;
            isolation: isolate;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-family: var(--font-body);
        }
        .glass-btn-primary-emerald:hover {
            background: rgba(0,190,76,0.22);
            border-color: rgba(0,190,76,0.55);
            transform: translateY(-1px);
            box-shadow: 0 12px 32px rgba(0,190,76,0.10);
        }
        .glass-btn-primary-emerald:active {
            transform: translateY(0);
            background: rgba(0,190,76,0.28);
        }
        .glass-btn-primary-emerald:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

        /* ── Kbd hint ── */
        .kbd-hint {
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 0.6875rem; color: rgba(255,255,255,0.28);
            margin-left: auto;
        }
        .kbd-hint kbd {
            display: inline-block; padding: 1px 5px; border-radius: 4px;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
            font-family: var(--font-mono); font-size: 0.625rem;
        }

        /* ── Responsive ── */
        @media (max-width:899px) {
            .converter-two-col { grid-template-columns:1fr; }
        }
        @media (max-width:640px) {
            .endian-grid { grid-template-columns:repeat(2,1fr); }
            .plc-actions { flex-direction:column; }
            .plc-actions > * { width:100%; }
            .kbd-hint { display:none; }
            .plc-output-table thead th,
            .plc-output-table tbody td { padding: 8px 10px; }
        }
        @media (max-width:480px) {
            .config-group { padding: 0.75rem 1rem; }
            .glass-panel { padding: 1rem !important; }
        }

        /* ── Focus-visible for all interactive elements ── */
        .glass-textarea:focus-visible,
        .glass-select:focus-visible,
        .glass-btn-secondary:focus-visible,
        .glass-btn-ghost:focus-visible {
            outline: var(--focus-ring);
            outline-offset: var(--focus-offset);
        }