.converter-section{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);margin:var(--spacing-lg) 0}@media (max-width: 768px){.converter-section{flex-direction:column;gap:var(--spacing-md)}}.input-group,.output-group{flex:1}@media (max-width: 768px){.input-group,.output-group{width:100%;max-width:none}}.conversion-arrow{color:var(--color-primary);flex-shrink:0}@media (max-width: 768px){.conversion-arrow{transform:rotate(90deg)}}.input-prefix{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);color:var(--text-secondary);font-family:var(--font-mono);font-weight:600;pointer-events:none}.input-number{padding-left:2rem!important;font-family:var(--font-mono);font-size:var(--font-size-lg);text-align:center}.input-mask{font-family:var(--font-mono);font-size:var(--font-size-lg);padding-right:2.5rem}.input-mask.valid{border-color:var(--color-success)}.input-mask.invalid{border-color:var(--color-error)}.input-result{font-family:var(--font-mono);font-size:var(--font-size-lg);background-color:var(--bg-tertiary);border-color:var(--border-secondary);color:var(--color-success);font-weight:600;text-align:center}.input-result[type=text]{padding-right:4rem}.presets-section{margin:var(--spacing-lg) 0}.presets-section h3{margin-bottom:var(--spacing-sm)}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.reference-section{display:flex;flex-direction:column;gap:var(--spacing-md);margin:var(--spacing-lg) 0}.card-header-inline{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-sm)}@media (max-width: 768px){.card-header-inline{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}}.class-info{display:flex;align-items:center;gap:var(--spacing-sm)}.class-badge{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--bg-primary)}.class-badge.a{background-color:var(--color-info)}.class-badge.b{background-color:var(--color-success)}.class-badge.c{background-color:var(--color-warning)}.class-details h3{font-weight:600;color:var(--text-primary);margin:0}.mask-info{font-size:var(--font-size-sm);color:var(--text-secondary);font-family:var(--font-mono)}.range-badge{font-size:var(--font-size-xs);color:var(--text-secondary);background-color:var(--bg-tertiary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.range-info h3{font-family:var(--font-mono);font-weight:600;color:var(--text-primary);margin:0}.range-description{font-size:var(--font-size-sm);color:var(--text-secondary)}.rfc-badge{font-size:var(--font-size-xs);color:var(--color-info-light);background-color:#0969da1a;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm)}.private-notice{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background-color:#2386361a;border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-success-light)}.tips-section{margin-top:var(--spacing-xl);padding:var(--spacing-md);background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-secondary));border-radius:var(--radius-lg);border:1px solid var(--border-secondary)}.tips-section .tips-header{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:600;color:var(--text-primary)}.tips-section .tips-content p{color:var(--text-primary);margin:0}.tips-section .tips-list{list-style:none;font-size:var(--font-size-sm);color:var(--text-primary);display:flex;flex-direction:column}.class-description{font-size:var(--font-size-sm);color:var(--text-primary);margin-bottom:var(--spacing-sm)}.usage-info{font-size:var(--font-size-xs);color:var(--text-secondary)}