* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }

.main-container { min-height: 100vh; height: 100%; display: flex; flex-direction: column; }
.content-wrapper { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.panels-container { flex: 1; display: flex; gap: 1rem; min-height: 0; }
.panel { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.editor-area { flex: 1; min-height: 200px; max-height: 100%; resize: none; }

.output-content { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.8; }
.output-content h1 { font-size: 1.75em; font-weight: bold; margin: 0.5em 0; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.3em; }
.output-content h2 { font-size: 1.4em; font-weight: bold; margin: 0.5em 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3em; }
.output-content h3 { font-size: 1.2em; font-weight: bold; margin: 0.5em 0; }
.output-content h4 { font-size: 1em; font-weight: bold; margin: 0.5em 0; }
.output-content p { margin: 0.75em 0; }
.output-content ul, .output-content ol { margin: 0.75em 0; padding-left: 1.5em; }
.output-content li { margin: 0.3em 0; }
.output-content ul { list-style-type: disc; }
.output-content ol { list-style-type: decimal; }
.output-content code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 0.9em; }
.output-content pre { background: #1f2937; color: #f9fafb; padding: 1em; border-radius: 8px; overflow-x: auto; margin: 0.75em 0; }
.output-content pre code { background: transparent; color: inherit; padding: 0; }
.output-content blockquote { border-left: 4px solid #3b82f6; padding-left: 1em; margin: 0.75em 0; color: #6b7280; background: #f9fafb; padding: 0.5em 1em; }
.output-content table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
.output-content th, .output-content td { border: 1px solid #d1d5db; padding: 0.5em 1em; text-align: left; }
.output-content th { background: #f3f4f6; font-weight: bold; }
.output-content a { color: #3b82f6; text-decoration: underline; }
.output-content hr { border: none; border-top: 2px solid #e5e7eb; margin: 1.5em 0; }
.output-content img { max-width: 100%; height: auto; }

.arrow-btn { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }

textarea::-webkit-scrollbar, .output-panel::-webkit-scrollbar { width: 6px; }
textarea::-webkit-scrollbar-track, .output-panel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
textarea::-webkit-scrollbar-thumb, .output-panel::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
textarea::-webkit-scrollbar-thumb:hover, .output-panel::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

@media screen and (max-width: 639px) {
    .header-title { font-size: 1.25rem !important; }
    .header-subtitle { font-size: 0.75rem !important; }
    .panels-container { flex-direction: column !important; }
    .panel { min-height: 35vh; }
    .convert-btn-wrapper { padding: 0.5rem 0; }
    .arrow-btn { width: 80px !important; height: 40px !important; }
    .download-btn { padding: 0.375rem 0.75rem !important; font-size: 0.75rem !important; }
    .panel-title { font-size: 0.875rem !important; }
    .char-count { font-size: 0.625rem !important; }
    .editor-area { font-size: 0.8rem !important; padding: 0.5rem !important; }
    .panel-card { padding: 0.75rem !important; border-radius: 0.75rem !important; }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .header-title { font-size: 1.5rem !important; }
    .panels-container { flex-direction: column !important; }
    .panel { min-height: 40vh; }
    .arrow-btn { width: 90px !important; height: 45px !important; }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .panels-container { flex-direction: row !important; }
    .panel { min-height: 60vh; }
    .arrow-btn { width: 70px !important; height: 50px !important; }
    .panel-card { padding: 1rem !important; }
}

@media screen and (min-width: 1280px) and (max-width: 1535px) {
    .panels-container { flex-direction: row !important; }
    .panel { min-height: 65vh; }
}

@media screen and (min-width: 1536px) {
    .main-container { max-width: 1600px; margin: 0 auto; }
    .panel { min-height: 70vh; }
    .header-title { font-size: 2.25rem !important; }
}

@media screen and (max-height: 600px) {
    .header-section { margin-bottom: 0.5rem !important; padding-top: 0.5rem !important; }
    .header-title { font-size: 1.25rem !important; margin-bottom: 0.25rem !important; }
    .header-subtitle { display: none; }
    .footer-section { margin-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .panel-card { padding: 0.5rem !important; }
    .panel { min-height: 50vh; }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .header-section { display: none; }
    .footer-section { display: none; }
    .panel { min-height: 85vh; }
}