/* Core reset */
*{box-sizing:border-box}

/* Header */
header{align-items:center;background-color:#cacaca;display:flex;justify-content:center;padding:1rem 20px;position:relative}
header>div{left:20px;position:absolute}
header nav{display:flex;flex:1;gap:16px;justify-content:center}
header nav a{white-space:nowrap}

/* Theme toggle (header button) */
.theme-toggle{--theme-toggle__expand--duration:500ms;appearance:none;background:transparent;border:none;color:#2c2e3b;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0;padding:0;transition:color .3s}
.theme-toggle:focus{outline:none}
.theme-toggle:hover{color:#57d0d6}
.theme-toggle svg{height:24px;width:24px}

/* Page layout */
body{background-color:#F7F5F5;color:#333;display:flex;flex-direction:column;font-family:Inter, sans-serif;font-optical-sizing:auto;font-style:normal;line-height:1.5;margin:0;min-height:100vh;padding:0}
main{align-items:center;background-color:#cfcfcf;display:flex;flex:1;justify-content:center;padding:2rem}
article{max-width:800px;text-align:center;width:100%}

/* Headings */
h1{color:#2c2e3b;font-size:2.5rem;margin-bottom:.5rem;text-align:center}
.subtitle{color:#4a4a4a;font-size:1.1rem;margin-bottom:3rem}

/* Upload area */
.upload-container{align-items:center;background-color:#E3E2E2;border:2px solid #9ca3cd;border-radius:50px;display:flex;flex-direction:column;justify-content:center;margin-bottom:1rem;padding:4rem 2rem;position:relative;z-index:1}
.upload-container.highlight{background-color:#e0e4ff;border-color:#57d0d6}

.file-input-wrapper{display:inline-block;margin-bottom:1rem;overflow:hidden;position:relative}
.file-input-wrapper input[type=file]{background:white;cursor:inherit;display:block;filter:alpha(opacity=0);font-size:100px;min-height:100%;min-width:100%;opacity:0;outline:none;position:absolute;right:0;text-align:right;top:0}

.btn-upload{align-items:center;background-color:#43DDCB;border-radius:50px;cursor:pointer;display:flex;gap:10px;justify-content:center;padding:12px 24px;position:relative;text-decoration:none!important;transition:background-color .3s;font-size:1.1rem;font-weight:600;color:black;z-index:10}
.btn-upload:hover{background:#57d0d6}
button.btn-upload:hover,label.btn-upload:hover{background:#57d0d6}

.info-text{color:#555;font-size:.9rem;margin-bottom:.5rem}
.terms-text{color:#777;font-size:.8rem;margin-top:1rem}

.description-container{align-items:center;background-color:#E3E2E2;border-radius:50px;display:flex;flex-direction:column;gap:1rem;justify-content:center;margin-bottom:1rem;padding:2rem}

a{color:#0d7377;text-decoration:none}
a:hover{text-decoration:underline}

footer{background-color:#0d7377;color:#fff;font-size:.8rem;padding:2rem;text-align:center}
footer a{color:#fff;margin:0 8px;text-decoration:none}
footer a:hover{text-decoration:underline}

#resultSection,#errorSection{text-align:center;margin-top:2rem}

/* Utilities */
.active{color:#0d7377;font-weight:700}

.template-select{border:2px solid #9ca3cd;border-radius:4px;font-size:1rem;margin-top:1rem,max-width:600px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;padding:.5rem}

.convert-btn{align-items:center;background-color:#43DDCB;border:none;border-radius:50px;display:flex;gap:10px;font-size:1.1rem;font-weight:600;justify-content:center;margin-top:1rem;padding:12px 24px;cursor:pointer;color:black}

/* Theme toggle transitions */
.theme-toggle__expand g circle,.theme-toggle__expand g path{transform-origin:center;transition:transform calc(var(--theme-toggle__expand--duration) * .65) cubic-bezier(0,0,0,1.25) calc(var(--theme-toggle__expand--duration) * .35)}
.theme-toggle__expand clipPath path{transform-origin:center;transition:transform calc(var(--theme-toggle__expand--duration) * .6) cubic-bezier(0,0,0.5,1)}
.theme-toggle--toggled .theme-toggle__expand g circle{transform:scale(1.6);transition-delay:0s}
.theme-toggle--toggled .theme-toggle__expand g path{transform:scale(0);transition-delay:0s}
.theme-toggle--toggled .theme-toggle__expand clipPath path{transition-delay:calc(var(--theme-toggle__expand--duration) * .4);transition-timing-function:cubic-bezier(0,0,0,1.25);transform:translateX(17px)}

/* Dark theme overrides */
[data-theme="dark"],
[data-theme="dark"] body{background-color:#1a1b26;color:#c0caf5}
[data-theme="dark"] main{background-color:#1a1b26;color:#c0caf5}
[data-theme="dark"] header{background-color:#16161e}
[data-theme="dark"] h1{color:#c0caf5}
[data-theme="dark"] .subtitle{color:#a9b1d6}
[data-theme="dark"] .upload-container{background-color:#24283b;border-color:#57d0d6}
[data-theme="dark"] .upload-container.highlight{background-color:#2a2e4a;border-color:#57d0d6}
[data-theme="dark"] .description-container{background-color:#24283b}
[data-theme="dark"] .btn-upload{background-color:#1abc9c;color:#1a1b26}
[data-theme="dark"] .btn-upload:hover{background-color:#16a085}
[data-theme="dark"] .convert-btn{background-color:#1abc9c;color:#1a1b26}
[data-theme="dark"] a{color:#ffffff}
[data-theme="dark"] nav a{color:#0d7377}
[data-theme="dark"] nav a.active{color:#0d7377}
[data-theme="dark"] nav a:hover{color:#0d7377}
[data-theme="dark"] footer{background-color:#0d7377}
[data-theme="dark"] .theme-toggle{color:#c0caf5}
[data-theme="dark"] .theme-toggle:hover{color:#0d7377}
[data-theme="dark"] .template-select{background-color:#24283b;border-color:#565f89;color:#c0caf5}
[data-theme="dark"] .info-text{color:#a9b1d6}
[data-theme="dark"] .terms-text{color:#787c99}

/* About page */
.about-container{max-width:900px;margin:0 auto}
.about-logo{max-width:200px;margin:2rem 0}
.content-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.05);margin-bottom:2rem;padding:2rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:0}
.feature-card{background:#ededed;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.05);padding:1.5rem;text-align:left;transition:transform .2s}
.feature-card:hover{transform:translateY(-5px)}
.feature-card h3{color:#0d7377;margin-top:0}
.contact-section{text-align:center}
[data-theme='dark'] .content-card,[data-theme='dark'] .feature-card{background:#1f2335;box-shadow:none}
.feature-header{align-items:center;display:inline-flex;gap:8px}
.feature-icon{display:block;flex-shrink:0;height:24px;width:24px}
h3{margin:0}

/* PDF Converter styles */
.operation-selector{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;justify-content:center}
.operation-option{align-items:center;border:2px solid #9ca3cd;border-radius:8px;cursor:pointer;display:flex;gap:.5rem;padding:.5rem 1rem;transition:all .2s;background-color:#E3E2E2}
.operation-option:hover{border-color:#57d0d6;background-color:#e0e4ff}
.operation-option input[type="radio"]{margin:0;accent-color:#57d0d6;outline:none;box-shadow:none}
.operation-option input[type="radio"]:focus,.operation-option input[type="radio"]:focus-visible{outline:none;box-shadow:none}
.operation-option input[type="radio"]:checked+span{font-weight:bold;color:#0d7377}
.operation-options{background:#E3E2E2;border:2px solid #9ca3cd;border-radius:8px;margin-top:1rem;padding:1rem}
.operation-options label{display:block;font-weight:500;margin-bottom:.5rem;color:#2c2e3b}
.operation-options input[type="text"]{border:2px solid #9ca3cd;border-radius:4px;font-size:1rem;padding:.5rem;width:100%;background-color:#fff}
.help-text{color:#555;display:block;font-size:.85rem;line-height:1.4;margin-top:.5rem}
.file-list{margin-top:1rem}
.file-selected{position:relative;z-index:50}
.file-item{margin-bottom:.5rem}
.download-link{background:#43DDCB;border-radius:50px;color:#000;display:inline-block;padding:12px 24px;text-decoration:none;transition:background .2s;font-weight:600}
.download-link:hover{background:#57d0d6}
.preview-btn{background:#43DDCB!important;color:#000!important;border-radius:50px!important;font-weight:600!important}
.preview-btn:hover{background:#57d0d6!important}

[data-theme="dark"] .operation-option{background-color:#24283b;border-color:#565f89;color:#c0caf5}
[data-theme="dark"] .operation-option:hover{border-color:#57d0d6;background-color:#2a2e4a}
[data-theme="dark"] .operation-option input[type="radio"]{accent-color:#ff0000}
[data-theme="dark"] .operation-option input[type="radio"]:checked+span{color:#57d0d6}
[data-theme="dark"] .operation-options{background-color:#24283b;border-color:#565f89}
[data-theme="dark"] .operation-options label{color:#c0caf5}
[data-theme="dark"] .operation-options input[type="text"]{background-color:#16161e;border-color:#565f89;color:#c0caf5}
[data-theme="dark"] .help-text{color:#a9b1d6}
[data-theme="dark"] .download-link{background-color:#1abc9c;color:#1a1b26}
[data-theme="dark"] .download-link:hover{background-color:#16a085}
[data-theme="dark"] .preview-btn{background-color:#1abc9c!important;color:#1a1b26!important}
[data-theme="dark"] .preview-btn:hover{background-color:#16a085!important}