:root {
    --primary: #f59e0b;
    --primary-dark: #d97706;
    --primary-light: #fbbf24;
    --accent: #6366f1;
    --bg: #0f0f23;
    --bg-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    --glass: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.1);
    --glass-hover: rgba(255,255,255,0.1);
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --text-bright: #f8fafc;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 16px;
    --radius-sm: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Inter','Noto Sans KR',-apple-system,sans-serif;
    background: var(--bg); background-image: var(--bg-gradient);
    color: var(--text); min-height: 100vh; overflow-x: hidden;
}
body::before, body::after {
    content:''; position:fixed; border-radius:50%; filter:blur(80px); opacity:0.12; z-index:0; pointer-events:none;
}
body::before { width:500px;height:500px;background:var(--primary);top:-100px;right:-100px;animation:float 20s ease-in-out infinite; }
body::after { width:400px;height:400px;background:#ec4899;bottom:-50px;left:-50px;animation:float 25s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translate(0,0)} 33%{transform:translate(30px,-30px)} 66%{transform:translate(-20px,20px)} }

.glass-card { background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius); position:relative; z-index:1; }
.screen { position:relative; z-index:1; }
#auth-screen { display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; }
.auth-container { padding:48px 40px; text-align:center; max-width:420px; width:100%; }
.auth-logo { width:80px;height:80px;margin:0 auto 24px;background:linear-gradient(135deg,var(--primary),#ef4444);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:36px;color:white; }
.auth-container h1 { font-size:28px;font-weight:700;color:var(--text-bright);margin-bottom:8px; }
.auth-desc { color:var(--text-dim);margin-bottom:32px;font-size:14px; }

.btn { display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#000; }
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 8px 25px rgba(245,158,11,0.3); }
.btn-primary:disabled { opacity:0.5;cursor:not-allowed;transform:none; }
.btn-outline { background:transparent;border:1px solid var(--glass-border);color:var(--text); }
.btn-outline:hover { background:var(--glass-hover); }
.btn-ghost { background:transparent;color:var(--text-dim); }
.btn-ghost:hover { color:var(--text-bright);background:var(--glass); }
.btn-lg { padding:14px 28px;font-size:16px; }
.btn-sm { padding:6px 12px;font-size:13px; }
.btn-full { width:100%;justify-content:center; }
.auth-container .btn { width:100%;justify-content:center;margin-bottom:12px; }

.app-header { display:flex;justify-content:space-between;align-items:center;padding:12px 24px;margin:16px 16px 0;border-radius:var(--radius-sm); }
.header-left { display:flex;align-items:center;gap:12px; }
.header-icon { font-size:24px;color:var(--primary-light); }
.header-title { font-size:18px;font-weight:600;color:var(--text-bright); }
.header-right { display:flex;align-items:center;gap:12px; }
.user-badge { font-size:13px;color:var(--text-dim);padding:4px 12px;background:var(--glass);border-radius:20px; }

.bento-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;max-width:1400px;margin:0 auto; }
.bento-card { padding:24px;transition:all .3s; }
.bento-card:hover { border-color:rgba(255,255,255,0.15); }
.bento-card h2 { font-size:16px;font-weight:600;color:var(--text-bright);margin-bottom:16px;display:flex;align-items:center;gap:8px; }
.bento-card h2 i { color:var(--primary-light); }
.bento-input { grid-column:1;grid-row:1/3; }
.bento-status { grid-column:2;grid-row:1; }
.bento-output { grid-column:1/3;grid-row:3; }
.bento-history { grid-column:2;grid-row:2; }

.input-tabs { display:flex;gap:4px;margin-bottom:16px;background:rgba(0,0,0,0.2);border-radius:var(--radius-sm);padding:4px; }
.tab { flex:1;padding:8px 16px;border:none;background:transparent;color:var(--text-dim);font-family:inherit;font-size:13px;border-radius:8px;cursor:pointer;transition:all .2s; }
.tab.active { background:var(--glass-hover);color:var(--text-bright); }
.tab-content { display:none; }
.tab-content.active { display:block; }
textarea { width:100%;padding:16px;background:rgba(0,0,0,0.3);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text);font-family:'Inter',monospace;font-size:13px;line-height:1.6;resize:vertical;outline:none;transition:border-color .2s; }
textarea:focus { border-color:var(--primary); }
textarea::placeholder { color:var(--text-dim);opacity:0.6; }

.drop-zone { border:2px dashed var(--glass-border);border-radius:var(--radius-sm);padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s; }
.drop-zone:hover,.drop-zone.dragover { border-color:var(--primary);background:rgba(245,158,11,0.05); }
.drop-zone i { font-size:48px;color:var(--text-dim);margin-bottom:12px;display:block; }
.drop-zone p { color:var(--text-dim);font-size:14px; }
.drop-hint { font-size:12px;color:var(--text-dim);opacity:0.6; }

.gen-buttons { margin-top:16px; }
.gen-singles { display:flex;flex-wrap:wrap;gap:6px;margin-top:10px; }
.gen-btn { flex:1;min-width:80px;justify-content:center; }

.status-idle,.history-empty { text-align:center;padding:32px 16px;color:var(--text-dim); }
.status-idle i,.history-empty i { font-size:48px;margin-bottom:12px;display:block;opacity:0.4; }
.status-steps { display:flex;flex-direction:column;gap:8px; }
.status-step { display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(0,0,0,0.2);border-radius:var(--radius-sm);font-size:13px; }
.status-step i { font-size:18px;width:24px;text-align:center; }
.status-step.pending i { color:var(--text-dim); }
.status-step.running i { color:var(--warning);animation:pulse 1s infinite; }
.status-step.done i { color:var(--success); }
.status-step.error i { color:var(--danger); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.output-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.output-header h2 { margin-bottom:0; }
.output-actions { display:flex;gap:4px; }
.output-tabs { display:flex;gap:4px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px; }
.otab { padding:8px 16px;border:1px solid var(--glass-border);background:transparent;color:var(--text-dim);font-family:inherit;font-size:13px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;transition:all .2s; }
.otab:hover { background:var(--glass-hover);color:var(--text); }
.otab.active { background:var(--primary);color:#000;border-color:var(--primary); }
.output-content { background:rgba(0,0,0,0.3);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:24px;max-height:600px;overflow-y:auto;font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word; }
.output-content h1,.output-content h2,.output-content h3 { color:var(--text-bright);margin:20px 0 8px; }
.output-placeholder { text-align:center;color:var(--text-dim);padding:48px; }

.history-item { padding:12px 14px;background:rgba(0,0,0,0.2);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center;font-size:13px; }
.history-item:hover { background:var(--glass-hover); }
.history-item .date { color:var(--text-dim);font-size:12px; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--glass-border);border-radius:3px; }

.toast { position:fixed;bottom:24px;right:24px;padding:12px 20px;background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:13px;color:var(--text);z-index:1000;animation:slideIn .3s ease; }
.toast.success { border-color:var(--success); }
.toast.error { border-color:var(--danger); }
@keyframes slideIn { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

.spinner { display:inline-block;width:16px;height:16px;border:2px solid var(--glass-border);border-top-color:var(--primary-light);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

@media (max-width:900px) {
    .bento-grid { grid-template-columns:1fr; }
    .bento-input,.bento-status,.bento-history,.bento-output { grid-column:1; }
    .bento-input{grid-row:1} .bento-status{grid-row:2} .bento-history{grid-row:3} .bento-output{grid-row:4}
    .app-header{margin:8px 8px 0;padding:10px 16px} .bento-grid{padding:8px;gap:8px} .bento-card{padding:16px}
}