* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: radial-gradient(circle at 50% 20%, #1a1d24 0%, #0a0b0e 70%);
    color: #e8e8ea;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

/* Ortada yüzen "ada" kart */
.wrap {
    width: 100%;
    max-width: 460px;
    background: #14161c;
    border: 1px solid #262a34;
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 2px 8px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.03);
}
h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.dot { color: #6c8cff; }
.sub { color: #9aa0aa; font-size: 0.9rem; margin-top: 0; margin-bottom: 24px; }

.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn {
    flex: 1; padding: 10px; border: none; border-radius: 8px;
    background: #1c1f26; color: #9aa0aa; cursor: pointer; font-size: 0.95rem;
}
.tab-btn.active { background: #6c8cff; color: #fff; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.file-drop {
    display: flex; align-items: center; justify-content: center;
    height: 120px; border: 2px dashed #333844; border-radius: 12px;
    cursor: pointer; margin-bottom: 16px; text-align: center; padding: 12px;
}
.file-drop input { display: none; }

.btn {
    display: inline-block; padding: 12px 20px; border-radius: 8px;
    border: none; background: #1c1f26; color: #e8e8ea; cursor: pointer;
    font-size: 0.95rem; text-decoration: none; text-align: center;
}
.btn.primary { background: #6c8cff; color: #fff; width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.code-box {
    font-family: 'SF Mono', monospace; font-size: 1.1rem; letter-spacing: 1px;
    background: #1c1f26; padding: 16px; border-radius: 8px; text-align: center;
    margin-bottom: 12px; word-break: break-all;
}
.code-input {
    width: 100%; padding: 14px; border-radius: 8px; border: 1px solid #333844;
    background: #1c1f26; color: #e8e8ea; font-family: monospace; margin-bottom: 12px;
}

.status { color: #9aa0aa; font-size: 0.9rem; }
.muted { color: #9aa0aa; font-size: 0.85rem; }
.warn { color: #ffb454; font-size: 0.82rem; }
.hidden { display: none !important; }

.progress { background: #1c1f26; border-radius: 8px; height: 10px; overflow: hidden; margin: 12px 0; }
.progress-bar { background: #6c8cff; height: 100%; width: 0%; transition: width 0.2s; }