:root {
    --bg: rgb(11, 18, 32);
    --card: rgb(15, 23, 36);
    --accent: rgb(6, 182, 212);
    --text: rgb(230, 238, 246);
    --muted: rgb(148, 163, 184);
    --surface: rgb(7, 18, 26);
    --panel: rgb(11, 23, 32);
    --border: rgba(255, 255, 255, 0.04);
    --error-bg: rgba(255,69,58,0.06);
    --error-text: rgb(255, 180, 180);
}

/* --- Global defaults --- */
* { box-sizing: border-box; font-family: Inter, ui-sans-serif, system-ui, Arial; }

body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
h1 { margin-top: 0; }
form { display: flex; gap: 0.5rem; align-items: center; }
input[type=file] { flex: 1; color: var(--text); }
button, .primary {
    background: var(--accent);
    color: #052026;
    border: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
}

/* --- Page container --- */
.container {
    width: 720px;
    background: var(--card);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(2,6,23,0.6);
}

/* --- Preview--- */
.preview { margin-top: 1rem; }
.preview img { max-width: 100%; height: auto; border-radius: 6px; }

/* --- Errors & Result --- */
#error {
    color: var(--error-text);
    background: var(--error-bg);
    padding: 0.5rem;
    border-radius: 6px;
}
#result {
    margin-top: 1rem;
    background: rgba(99,102,241,0.08);
    color: #dbeafe;
    padding: 0.6rem;
    border-radius: 6px;
}
#result img { max-width: 100%; height: auto; border-radius: 6px; }

/* --- Options panel --- */
.options-panel {
    margin-top: 1.25rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    display:flex; flex-direction:column;
}
.options-panel h3 { margin: 0 0 0.25rem; color: var(--text); }
.muted { color: var(--muted); font-size: 0.95rem; }

.option-item { display:flex; align-items:flex-start; gap:0.6rem; padding:0.5rem 0; border-bottom:1px dashed rgba(255,255,255,0.02); }
.option-item:last-child { border-bottom:0; }
.option-item label { font-weight:600; color:var(--text); }
.option-desc { font-size:0.9rem; color:var(--muted); }

.actions { margin-top:auto; width:100%; }

.panel-controls { margin-top:0.6rem; display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.panel-controls div { align-items:center; display:flex; flex-direction:row; gap:0.5rem; width: 100%; }
.panel-controls label { padding:0.35rem; font-size:0.9rem; color:var(--text); }
.panel-controls input { padding:0.35rem; border:1px solid rgba(255, 255, 255, 0.25); border-radius:6px; background:transparent; color:var(--text); flex: 1 0 auto }
.panel-controls input[type=radio] { flex-grow: 0; }
.panel-controls button { padding: 0.6rem 0.9rem; display:block; width:100%; }

.tabs { margin-top:0.8rem; display:flex; flex-direction:column; flex:1; width:100%; }
#tabs-headers { display:flex; gap:0.5rem; border-bottom:1px solid rgba(255,255,255,0.03); padding-bottom:0.5rem; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
.tab-btn { background:transparent; border:0; padding:0.45rem 0.8rem; border-radius:6px; cursor:pointer; color:var(--text); display:inline-block; flex:0 0 auto; }
.tab-btn.active { background: rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.12); }
.tabs-panels { margin-top:0.8rem; flex:1; display:flex; flex-direction:column; width:100%; }
.tab-panel { padding:0.6rem; border-radius:6px; background:var(--surface); flex:1; width:100%; box-sizing:border-box; }

/* --- Mobile responsiveness --- */
@media (max-width: 640px) {
    body { padding: 1rem; }
    .container { width: 100%; padding: 1rem; }
    form { flex-direction: column; align-items: stretch; }
    input[type=file] { width: 100%; }
}