/* FTEX Tool - Minimal Black & Green Theme */
/* Override Pico CSS completely */
:root {
--bg: #0a0a0a;
--bg-light: #111111;
--bg-lighter: #1a1a1a;
--border: #2a2a2a;
--text: #e5e5e5;
--text-dim: #777777;
--accent: #00c853;
--accent-dark: #00a844;
--error: #ff4444;
--warning: #ffaa00;
--radius: 6px;
}

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

html {
font-size: 14px;
}

body {
min-height: 100vh;
background: var(--bg) !important;
color: var(--text) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.5;
}

/* Layout - CENTERED */
.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.container {
max-width: 560px;
margin: 0 auto;
padding: 0 16px;
width: 100%;
}

main.container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 32px;
padding-bottom: 32px;
}

/* Header */
.header {
position: relative;
text-align: center;
margin-bottom: 8px;
}

.header h1 {
font-size: 28px;
font-weight: 700;
margin: 0 0 4px 0;
color: var(--accent);
}

.header p {
margin: 0;
color: var(--text-dim);
font-size: 14px;
}

/* Support Button */
.support-btn {
position: absolute;
top: 0;
right: 0;
padding: 6px 12px;
font-size: 12px;
background: rgba(0, 200, 83, 0.1);
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s;
}

.support-btn:hover {
background: var(--accent);
color: #000;
}

/* Info */
.info {
text-align: center;
color: var(--text-dim);
font-size: 13px;
margin: 0 0 16px 0;
line-height: 1.5;
}

/* Features */
.features {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 24px;
flex-wrap: wrap;
}

.feature-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--accent);
font-weight: 500;
}

.feature-emoji {
font-size: 14px;
}

/* Loading */
.loading-state {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
color: var(--text-dim);
}

.spinner {
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.6s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}

}

/* Drop Zone */
.drop-zone {
border: 2px dashed var(--border);
border-radius: var(--radius);
padding: 32px 24px;
cursor: pointer;
transition: all 0.15s;
background: var(--bg-light);
}

.drop-zone:hover,
.drop-zone.active {
border-color: var(--accent);
background: rgba(0, 200, 83, 0.05);
}

/* Drop Icon - SVG */
.drop-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px auto;
display: block;
filter: invert(58%) sepia(89%) saturate(1066%) hue-rotate(107deg) brightness(97%) contrast(101%);
opacity: 0.9;
}

/* Drop Text */
.drop-text {
text-align: center;
}

.drop-text span {
display: block;
color: var(--text);
margin-bottom: 4px;
}

.drop-text small {
display: block;
color: var(--text-dim);
font-size: 12px;
}

/* Queue */
.queue {
margin-top: 24px;
}

/* Controls - ALIGNED */
.controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.controls-left {
display: flex;
align-items: center;
}

.file-count {
font-weight: 500;
color: var(--text);
}

.controls-right {
display: flex;
align-items: center;
gap: 8px;
}

/* Colorspace Group - INLINE */
.colorspace-group {
display: flex;
align-items: center;
gap: 6px;
}

.colorspace-group label {
font-size: 12px;
color: var(--text-dim);
margin: 0;
}

.colorspace-hint {
display: none;
}

/* Select - SAME HEIGHT AS BUTTONS */
.select-sm {
height: 32px;
padding: 0 10px;
font-size: 12px;
background: var(--bg-lighter);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
cursor: pointer;
margin: 0;
}

.select-sm:focus {
outline: none;
border-color: var(--accent);
}

/* Buttons - SAME HEIGHT */
.btn-convert {
height: 32px;
padding: 0 16px;
font-size: 13px;
font-weight: 500;
background: var(--accent);
color: #000;
border: none;
border-radius: var(--radius);
cursor: pointer;
transition: background 0.15s;
}

.btn-convert:hover:not(:disabled) {
background: var(--accent-dark);
}

.btn-convert:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.btn-clear {
height: 32px;
padding: 0 12px;
font-size: 13px;
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s;
}

.btn-clear:hover:not(:disabled) {
border-color: var(--error);
color: var(--error);
}

/* Progress */
.progress {
height: 3px;
background: var(--border);
border-radius: 2px;
margin-bottom: 12px;
overflow: hidden;
}

.progress-bar {
height: 100%;
background: var(--accent);
transition: width 0.2s;
}

/* File List */
.file-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 300px;
overflow-y: auto;
}

.file-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--bg-light);
border-radius: var(--radius);
border-left: 3px solid var(--border);
}

.file-item.file-pending {
border-left-color: var(--warning);
}

.file-item.file-processing {
border-left-color: var(--accent);
background: rgba(0, 200, 83, 0.05);
}

.file-item.file-done {
border-left-color: var(--accent);
}

.file-item.file-error {
border-left-color: var(--error);
}

.file-info {
flex: 1;
min-width: 0;
}

.file-name {
display: block;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.file-meta {
display: flex;
gap: 6px;
font-size: 12px;
color: var(--text-dim);
}

.arrow {
color: var(--accent);
}

.file-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}

.status-dot.pending {
background: var(--warning);
}

.status-dot.processing {
background: var(--accent);
animation: pulse 1s infinite;
}

.status-dot.done {
background: var(--accent);
}

.status-dot.error {
background: var(--error);
}

@keyframes pulse {
0%,
100% {
opacity: 1;
}

50% {
opacity: 0.4;
}

}

.btn-sm {
height: 28px;
padding: 0 10px;
font-size: 12px;
background: var(--bg-lighter);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.15s;
}

.btn-sm:hover {
border-color: var(--accent);
color: var(--accent);
}

.btn-remove:hover {
border-color: var(--error);
color: var(--error);
}

/* Results */
.results {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}

.results>span {
color: var(--accent);
font-weight: 500;
}

.results-actions {
display: flex;
gap: 8px;
}

.btn-primary {
height: 36px;
padding: 0 16px;
font-size: 13px;
font-weight: 500;
background: var(--accent);
color: #000;
border: none;
border-radius: var(--radius);
cursor: pointer;
}

.btn-primary:hover {
background: var(--accent-dark);
}

.btn-secondary {
height: 36px;
padding: 0 16px;
font-size: 13px;
background: transparent;
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}

.btn-secondary:hover {
border-color: var(--text-dim);
}

/* Error */
.error-msg {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding: 10px 12px;
background: rgba(255, 68, 68, 0.1);
border: 1px solid var(--error);
border-radius: var(--radius);
color: var(--error);
font-size: 13px;
}

/* Footer */
.footer {
padding: 16px 0;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-dim);
}

.footer .container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.footer strong {
color: var(--accent);
}

.love-icon {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
filter: invert(27%) sepia(98%) saturate(7426%) hue-rotate(356deg) brightness(91%) contrast(115%);
}

.footer a {
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s;
}

.footer a:hover {
color: var(--accent);
}

.sep {
opacity: 0.3;
}

/* Responsive */
@media (max-width: 480px) {
main.container {
padding-top: 32px;
}

.header h1 {
font-size: 24px;
}

.drop-zone {
padding: 24px 16px;
}

.drop-icon {
width: 40px;
height: 40px;
font-size: 24px;
}

.controls {
flex-direction: column;
align-items: stretch;
gap: 10px;
}

.controls-left {
justify-content: center;
}

.controls-right {
justify-content: center;
flex-wrap: wrap;
}

.colorspace-group label {
display: none;
}

.results {
flex-direction: column;
text-align: center;
}

.results-actions {
width: 100%;
}

.results-actions button {
flex: 1;
}

.support-btn {
position: static;
width: 100%;
margin-top: 8px;
}

}

/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 16px;
}

.modal {
background: var(--bg-lighter);
border: 1px solid var(--border);
border-radius: var(--radius);
max-width: 400px;
width: 100%;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}

.modal-header h2 {
font-size: 18px;
font-weight: 600;
margin: 0;
color: var(--accent);
}

.modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text-dim);
font-size: 24px;
cursor: pointer;
border-radius: var(--radius);
transition: all 0.15s;
}

.modal-close:hover {
background: var(--bg);
color: var(--text);
}

.modal-body {
padding: 20px;
}

.modal-body>p {
margin: 0 0 16px 0;
text-align: center;
color: var(--text-dim);
}

.donate-links {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}

.donate-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
transition: all 0.15s;
}

.donate-btn:hover {
border-color: var(--accent);
background: rgba(0, 200, 83, 0.05);
}

.donate-logo {
width: 32px;
height: 32px;
border-radius: 6px;
flex-shrink: 0;
object-fit: cover;
}

.donate-btn div {
display: flex;
flex-direction: column;
gap: 2px;
}

.donate-btn strong {
color: var(--text);
font-size: 14px;
}

.donate-btn small {
color: var(--text-dim);
font-size: 12px;
}

.modal-note {
display: block;
text-align: center;
color: var(--text-dim);
opacity: 0.7;
}

/* Success Modal */
.success-message {
text-align: center;
font-size: 15px;
color: var(--text);
margin: 0 0 24px 0;
}

.success-message strong {
color: var(--accent);
font-size: 18px;
}

.modal-actions {
display: flex;
gap: 10px;
margin-bottom: 20px;
}

.modal-actions button {
flex: 1;
}

.modal-divider {
height: 1px;
background: var(--border);
margin: 20px 0;
}

.donate-prompt {
text-align: center;
color: var(--text-dim);
font-size: 13px;
margin: 0 0 12px 0;
}

/* Alpine.js */
[x-cloak] {
display: none !important;
}