:root{--primary-color: #2563eb;--primary-color-light: #e5ebfb;--primary-hover: #1d4ed8;--secondary-color: #334155;--secondary-bg: #e2e8f0;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #ef4444;--light-bg: #f8fafc;--surface-color: #ffffff;--border-color: #e2e8f0;--text-primary: #0f172a;--text-secondary: #64748b;--primary-shadow: rgb(29 78 216 / 25%);--shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);--shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);--shadow-lg: 0 12px 24px rgb(15 23 42 / 0.12);--radius-sm: 0.375rem;--radius-md: 0.75rem;--radius-lg: 1.5rem;--max-width-reading: 720px;--faq-bg: var(--surface-color);--faq-border: var(--border-color);--faq-question-text: var(--text-primary);--faq-answer-text: var(--text-secondary);--faq-hover-bg: var(--light-bg);--faq-open-accent: var(--primary-color);--faq-card-shadow: var(--shadow-lg);--faq-section-margin-top: 0;--related-tools-bg: var(--surface-color);--related-tools-border: var(--border-color);--related-tools-text: var(--text-primary);--related-tools-muted: var(--text-secondary);--related-tools-link: var(--primary-color);--related-tools-link-hover: var(--primary-hover);--related-tools-shadow: var(--shadow-lg);--related-tools-margin-top: 2rem;--related-tools-margin-bottom: 2rem;}
.converter-page{padding: 2rem 0 4rem;}
.converter-meta{list-style: none;display: flex;flex-wrap: wrap;gap: 0.75rem;justify-content: flex-start;padding: 0;margin: 0;}
.converter-meta.att-meta-after-hero{margin-bottom: 1.5rem;}
@media (max-width: 575px){.converter-meta.att-meta-after-hero{justify-content: center;}}
.att-tool-section{margin: 0;padding: 0;border: 0;}
.meta-chip{background: var(--surface-color);color: var(--text-secondary);border: 1px solid var(--border-color);border-radius: 9999px;padding: 0.45rem 0.95rem;font-size: 0.95rem;font-weight: 600;box-shadow: var(--shadow-sm);}
.converter-main{background: var(--surface-color);border-radius: var(--radius-lg);box-shadow: var(--shadow-lg);padding: clamp(1.5rem, 3vw, 2.5rem);border: 1px solid rgba(148, 163, 184, 0.25);}
.converter-form{display: flex;flex-direction: column;gap: 1.5rem;}
.input-group{display: flex;flex-direction: column;gap: 0.75rem;}
.input-label{display: flex;align-items: center;justify-content: space-between;font-weight: 700;color: var(--text-primary);font-size: 1rem;}
.label-title{display: inline-flex;align-items: center;gap: 0.5rem;}
.label-helper{font-size: 0.85rem;color: var(--text-secondary);}
.form-textarea{width: 100%;min-height: 120px;padding: 1rem 1.15rem;border: 2px solid var(--border-color);border-radius: 0.9rem;font-size: 1rem;color: var(--text-primary);transition: all 0.2s ease;background: var(--surface-color);box-shadow: inset 0 1px 2px rgb(15 23 42 / 0.04);resize: vertical;}
.form-textarea:focus{outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 4px rgb(37 99 235 / 0.15);}
.form-textarea:hover{border-color: var(--primary-color);}
.form-actions{display: flex;flex-wrap: wrap;gap: 0.75rem;align-items: center;}
.convert-btn{flex: 1 1 200px;background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);color: #ffffff;border: none;padding: 1rem 2rem;border-radius: 0.9rem;font-size: 1.1rem;font-weight: 700;cursor: pointer;transition: transform 0.18s ease, box-shadow 0.18s ease;position: relative;overflow: hidden;}
.convert-btn:hover{transform: translateY(-2px);box-shadow: 0 12px 20px rgb(37 99 235 / 0.25);}
.convert-btn:active{transform: translateY(0);}
.convert-btn.loading,.convert-btn:disabled{cursor: wait;opacity: 0.9;}
.ghost-btn{background: transparent;border: 2px solid var(--border-color);color: var(--text-secondary);border-radius: 0.9rem;padding: 0.9rem 1.5rem;font-size: 1rem;font-weight: 600;transition: all 0.2s ease;display: inline-flex;align-items: center;gap: 0.5rem;}
.ghost-btn:hover{border-color: var(--primary-color);color: var(--primary-color);box-shadow: var(--shadow-sm);}
.status-bar{border-radius: var(--radius-sm);padding: 0.85rem 1rem;font-size: 0.95rem;line-height: 1.4;display: flex;gap: 0.5rem;align-items: flex-start;}
.status-bar svg{flex-shrink: 0;}
.status-info{background: var(--primary-color-light);color: var(--primary-color);border-left: 4px solid var(--primary-color);}
.status-warning{background: #fff7ed;color: #9a3412;border-left: 4px solid #ea580c;}
.results-container{border-radius: var(--radius-md);padding: 2rem;border: 1px solid var(--border-color);position: relative;background: var(--light-bg);}
.results-header{display: flex;align-items: center;justify-content: space-between;gap: 1rem;margin-bottom: 1.5rem;}
.results-title{font-size: 1.5rem;font-weight: 700;color: var(--text-primary);margin: 0;}
.results-beta{font-size: 0.85rem;font-weight: 600;color: var(--primary-color);background: rgb(37 99 235 / 0.1);padding: 0.35rem 0.7rem;border-radius: 9999px;}
.output-display{background: var(--surface-color);border: 2px solid var(--border-color);border-radius: 0.9rem;padding: 1rem;font-size: 0.95rem;line-height: 1.5;word-break: break-all;min-height: 80px;color: var(--text-primary);}
.output-display.has-content{border-color: var(--success-color);background: #f0fdf4;}
.output-display pre{margin: 0;white-space: pre-wrap;word-break: break-all;}
.output-display .output-error{color: var(--danger-color);font-weight: 600;}
.conversion-stats{display: grid;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: 1rem;margin-top: 1rem;}
.stat-card{background: var(--surface-color);border-radius: 0.75rem;padding: 1rem;text-align: center;border: 1px solid var(--border-color);box-shadow: var(--shadow-sm);}
.stat-value{font-size: 1.5rem;font-weight: 700;color: var(--primary-color);margin-bottom: 0.25rem;}
.stat-label{font-size: 0.85rem;color: var(--text-secondary);font-weight: 600;}
.action-buttons{display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;margin-top: 2rem;}
.action-btn{padding: 0.85rem 1.6rem;border-radius: 0.9rem;font-weight: 600;cursor: pointer;transition: all 0.2s ease;border: 2px solid transparent;display: inline-flex;align-items: center;gap: 0.5rem;}
.copy-btn{background: #fff;color: var(--primary-color);border: 1px solid var(--primary-color);}
.copy-btn:hover{transform: translateY(-2px);box-shadow: 0 8px 16px var(--primary-shadow);}
.clear-btn{background: #fff;color: var(--primary-color);border: 1px solid var(--primary-color);}
.clear-btn:hover{transform: translateY(-2px);box-shadow: 0 8px 16px var(--primary-shadow);}
.download-btn{background: linear-gradient(135deg, #10b981 0%, #059669 100%);color: #ffffff;border: none;}
.download-btn:hover{transform: translateY(-2px);box-shadow: 0 8px 16px rgb(16 185 129 / 0.25);}
.sr-only{position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
.convert-btn:focus,.ghost-btn:focus,.action-btn:focus,.form-textarea:focus{outline-offset: 3px;}
.loading::after{content: '';position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;margin: -10px 0 0 -10px;border: 3px solid rgba(255, 255, 255, 0.6);border-top: 3px solid #ffffff;border-radius: 9999px;animation: spin 1s linear infinite;}
@keyframes spin{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}
.success-animation{animation: successPulse 0.6s ease-in-out;}
@keyframes successPulse{0%{transform: scale(1);}50%{transform: scale(1.02);}100%{transform: scale(1);}}
@keyframes slideIn{from{transform: translateX(100%);opacity: 0;}to{transform: translateX(0);opacity: 1;}}
@keyframes slideOut{from{transform: translateX(0);opacity: 1;}to{transform: translateX(100%);opacity: 0;}}
.notification{position: fixed;top: 20px;right: 20px;padding: 1rem 1.5rem;border-radius: 0.5rem;color: #ffffff;font-weight: 600;z-index: 1000;animation: slideIn 0.3s ease-out;max-width: 300px;}
.notification.notification-out{animation: slideOut 0.3s ease-in forwards;}
.notification-success{background: #10b981;}
.notification-warning{background: #f59e0b;}
.notification-error{background: #ef4444;}
.notification-info{background: #2563eb;}
.feature-item,.faq-item,.use-case{padding: 1.25rem;background: #ffffff;border-radius: 1rem;border: 1px solid #e2e8f0;transition: transform 0.2s ease, box-shadow 0.2s ease;box-shadow: var(--shadow-sm);}
.faq-item{box-shadow: none;}
.feature-item h4,.faq-item h4,.use-case h4{color: var(--primary-color);font-weight: 700;}
.faq-container,.use-cases{background: #f8fafc;border-radius: 1rem;padding: 1.75rem;border: 1px solid #e2e8f0;}
.seo-section{background: #ebf3ff;padding: 2rem 0;}
.bmc-ascii .faq-section{margin-top: var(--faq-section-margin-top);}
.bmc-ascii .faq-card{background: var(--faq-bg);border: 1px solid var(--faq-border);box-shadow: var(--faq-card-shadow);border-radius: var(--radius-lg);}
.bmc-ascii .faq-header .h4{color: var(--faq-question-text);}
.bmc-ascii .faq-header .text-muted{color: var(--faq-answer-text);}
.bmc-ascii .faq-grid details{border: 1px solid var(--faq-border);background: var(--faq-hover-bg);border-radius: var(--radius-md);}
.bmc-ascii .faq-grid summary{color: var(--faq-question-text);}
.bmc-ascii .faq-grid details[open] summary{color: var(--faq-open-accent);}
.bmc-ascii .faq-grid p{color: var(--faq-answer-text);}
.bmc-ascii .related-tools-section{margin-top: var(--related-tools-margin-top);margin-bottom: var(--related-tools-margin-bottom);}
.bmc-ascii .related-links{background: var(--related-tools-bg);border: 1px solid var(--related-tools-border);box-shadow: var(--related-tools-shadow);border-radius: var(--radius-lg);}
.bmc-ascii .related-links .h4{color: var(--related-tools-text);}
.bmc-ascii .related-links a{color: var(--related-tools-link);}
.bmc-ascii .related-links a:hover{color: var(--related-tools-link-hover);}
.bmc-ascii .related-links span{color: var(--related-tools-muted);}
.step-list{counter-reset: steps;list-style: none;padding: 0;margin: 0 0 1.5rem;display: grid;gap: 1rem;}
.step-list li{counter-increment: steps;position: relative;padding-left: 2.5rem;color: var(--text-secondary);font-size: 1rem;}
.step-list li::before{content: counter(steps);position: absolute;left: 0;top: 0;width: 2rem;height: 2rem;border-radius: 9999px;background: var(--primary-color);color: #ffffff;display: flex;align-items: center;justify-content: center;font-weight: 700;}
@media (max-width: 991px){.converter-main{padding: 1.5rem;}}
@media (max-width: 768px){.converter-page{padding: 2.5rem 0 3rem;}.converter-meta{gap: 0.5rem;}.converter-main{border-radius: 1.25rem;}.results-header{flex-direction: column;align-items: flex-start;}.form-actions{flex-direction: column;align-items: stretch;}.ghost-btn{width: 100%;justify-content: center;}.conversion-stats{grid-template-columns: 1fr;}}
@media (max-width: 576px){.action-btn{width: 100%;justify-content: center;}}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}}