/* Reset and base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: monospace, 'Courier New', Courier;
    background: #ffffff;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.7;
    user-select: none;
}

.site-wrap { min-height: 100vh; display: flex; flex-direction: column; }

.container { max-width: 700px; margin: 0 auto; padding: 20px; }

/* Hero area */
.hero { padding: 60px 0 40px; text-align: center; }
.site-header { text-align: center; }
.site-title { 
    font-family: 'Caveat', cursive, 'Comic Sans MS'; 
    font-size: 3.5rem; 
    color: #000; 
    margin-bottom: 12px; 
    font-weight: 700; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.title-icon { width: 48px; height: 48px; stroke-width: 1.5; }
.subtitle { font-family: monospace; font-size: 1.1rem; color: #555; margin-bottom: 0; }

/* Main content layout */
.main-content { padding-bottom: 80px; }
.upload-section { 
    background: #fff; 
    padding: 40px; 
    border-radius: 0; 
    box-shadow: none; 
    margin-bottom: 30px; 
    border: 1px solid #ddd; 
}

.file-input-wrapper { position: relative; margin-bottom: 20px; }
input[type="file"] { display: none; }
.file-label { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    padding: 24px; 
    border: 2px dashed #ccc; 
    border-radius: 0; 
    cursor: pointer; 
    background: #fafafa; 
    transition: all 0.2s ease; 
}
.file-label:hover { border-color: #000; background: #fff; }
.file-icon { width: 24px; height: 24px; stroke-width: 2; }
.file-text { font-family: monospace; font-weight: 500; color: #000; font-size: 1rem; }
.file-name { 
    margin-top: 12px; 
    padding: 10px; 
    background: #f5f5f5; 
    border-radius: 0; 
    color: #555; 
    text-align: center; 
    display: none; 
    font-family: monospace; 
    font-size: 0.9rem;
    border: 1px solid #e0e0e0;
}

.upload-btn { 
    width: 100%; 
    padding: 14px 24px; 
    background: #000; 
    color: #fff; 
    border: 2px solid #000; 
    border-radius: 0; 
    font-family: monospace; 
    font-weight: 600; 
    font-size: 1.05rem; 
    cursor: pointer; 
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.upload-btn:hover:not(:disabled) { background: #fff; color: #000; }
.upload-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { width: 20px; height: 20px; stroke-width: 2; }

.loading, .results { 
    background: #fff; 
    padding: 40px; 
    border-radius: 0; 
    box-shadow: none; 
    margin-bottom: 30px; 
    border: 1px solid #ddd; 
    opacity: 0; 
    animation: fadeIn 0.4s forwards; 
}
@keyframes fadeIn { to { opacity: 1; } }
.spinner-icon { 
    width: 48px; 
    height: 48px; 
    stroke-width: 2; 
    margin: 0 auto 20px; 
    display: block;
    animation: spin 1s linear infinite; 
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading { text-align: center; }
.loading p { font-family: monospace; font-weight: 500; color: #000; font-size: 1.05rem; }

.error { 
    background: #fff; 
    color: #c00; 
    padding: 20px; 
    border-radius: 0; 
    margin-bottom: 30px; 
    border: 2px solid #c00; 
    font-family: monospace; 
    font-size: 1rem;
}

.results h2 { 
    font-family: 'Caveat', cursive; 
    font-size: 2.5rem; 
    color: #000; 
    margin-bottom: 30px; 
    text-align: center; 
}
.result-card { 
    background: #fafafa; 
    padding: 30px; 
    border-radius: 0; 
    margin-bottom: 20px; 
    border: 1px solid #e0e0e0; 
    transition: all 0.2s ease; 
}
.result-card:hover { 
    background: #fff;
    border-color: #ccc; 
}
.result-card h3 { 
    font-family: 'Caveat', cursive; 
    color: #000; 
    margin-bottom: 16px; 
    font-size: 1.8rem; 
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-icon { width: 28px; height: 28px; stroke-width: 1.5; }
.text-content { 
    font-family: monospace; 
    color: #222; 
    font-size: 0.95rem; 
    line-height: 1.8; 
    white-space: pre-wrap; 
    user-select: text; 
}

.site-footer { 
    position: fixed; 
    bottom: 24px; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
    color: #666; 
    font-size: 1.1rem; 
    font-family: 'Caveat', cursive; 
    z-index: 999; 
}
.footer-inner { padding: 0; }

@media (max-width: 700px) {
    .container { padding: 16px; }
    .site-title { font-size: 2.5rem; flex-direction: column; gap: 8px; }
    .title-icon { width: 40px; height: 40px; }
    .upload-section, .loading, .results { padding: 24px; }
    .site-footer { font-size: 0.95rem; bottom: 16px; }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body { background-color: #000; color: #fff; }
    .site-title, .subtitle, .file-text, .loading p { color: #fff; }
    .subtitle { color: #aaa; }
    .upload-section, .loading, .results { background: #000; border-color: #333; }
    .file-label { background: #0a0a0a; border-color: #444; }
    .file-label:hover { border-color: #fff; background: #111; }
    .file-name { background: #111; color: #bbb; border-color: #333; }
    .upload-btn { background: #fff; color: #000; border-color: #fff; }
    .upload-btn:hover:not(:disabled) { background: #000; color: #fff; border-color: #fff; }
    .error { background: #000; border-color: #c00; color: #ff6b6b; }
    .result-card { background: #0a0a0a; border-color: #222; }
    .result-card:hover { background: #111; border-color: #333; }
    .results h2, .result-card h3 { color: #fff; }
    .text-content { color: #ccc; }
    .site-footer { color: #888; }
}