.hex-input-row{display:flex;gap:12px;align-items:flex-end}.hex-input-row .field{flex:1}.hex-input-row .field-base{flex:0 0 180px}.hex-input-row .input,.hex-input-row .select{height:48px}.hex-input-row .select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23f59e0b' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.hex-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.hex-result-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px;transition:border-color .2s,transform .2s}.hex-result-card:hover{border-color:var(--accent);transform:translateY(-2px)}.hex-result-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.hex-result-card-label{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase}.hex-result-card-copy{background:none;border:1px solid var(--line-strong);color:var(--text-dim);font-family:var(--font-mono);font-size:11px;padding:3px 8px;border-radius:var(--radius-s);cursor:pointer;transition:color .2s,border-color .2s,background .2s;line-height:1}.hex-result-card-copy:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.hex-result-card-value{font-family:var(--font-mono);font-size:14px;color:var(--text);word-break:break-all;line-height:1.6;min-height:22px;max-height:120px;overflow-y:auto}.hex-result-card-value::-webkit-scrollbar{width:4px}.hex-result-card-value::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px}.hex-result-card-value.empty{color:var(--text-faint);font-style:italic}.hex-info-section{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.hex-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:12px}.hex-info-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius-m);padding:14px 12px;text-align:center}.hex-info-card-num{display:block;font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--accent);line-height:1.2;word-break:break-all}.hex-info-card-label{display:block;font-size:11px;color:var(--text-faint);margin-top:4px;letter-spacing:.04em}.hex-ascii-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.hex-ascii-title{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.hex-ascii-display{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px;font-family:var(--font-mono);font-size:14px;color:var(--text);line-height:1.8;min-height:40px}.hex-ascii-char{display:inline-block;background:var(--accent-soft);border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-s);padding:2px 6px;margin:2px;color:var(--accent);font-weight:600}.hex-ascii-non-printable{display:inline-block;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius-s);padding:2px 6px;margin:2px;color:var(--text-faint);font-size:11px}.hex-twos-complement{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.hex-twos-complement-title{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.hex-twos-complement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}.hex-twos-complement-item{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);padding:8px 12px;font-family:var(--font-mono);font-size:12px}.hex-twos-complement-item-label{color:var(--text-faint);white-space:nowrap;min-width:60px}.hex-twos-complement-item-value{color:var(--text);word-break:break-all}@media(max-width:900px){.hex-input-row{flex-direction:column;align-items:stretch}.hex-input-row .field-base{flex:none}.hex-results-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.hex-results-grid{grid-template-columns:1fr}}