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

:root {
  --bg-primary: #0f0f23; --bg-secondary: #1a1a2e; --bg-card: #16213e; --bg-card-hover: #1a2744;
  --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b;
  --accent: #6366f1; --accent-light: #818cf8; --accent-glow: rgba(99,102,241,0.3);
  --success: #34d399; --warning: #fbbf24; --danger: #f87171;
  --border: rgba(99,102,241,0.15); --radius: 12px;
}

body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; }

/* Login */
#login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,0.15) 0%,transparent 60%),var(--bg-primary); }
.login-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:20px; padding:48px 40px; width:100%; max-width:420px; box-shadow:0 0 60px rgba(99,102,241,0.1); }
.login-logo { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:36px; }
.login-logo img { width:48px; height:48px; border-radius:12px; }
.login-logo h1 { font-size:28px; font-weight:700; background:linear-gradient(135deg,var(--accent-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.5px; }
.form-input { width:100%; padding:14px 16px; background:var(--bg-primary); border:1px solid var(--border); border-radius:10px; color:var(--text-primary); font-size:15px; transition:all 0.2s; outline:none; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.btn { width:100%; padding:14px; background:linear-gradient(135deg,var(--accent),#7c3aed); border:none; border-radius:10px; color:white; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.2s; margin-top:8px; }
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-glow); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.login-error { color:var(--danger); font-size:13px; margin-top:12px; text-align:center; display:none; }

/* App */
#app-screen { display:none; }
.app-header { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:12px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; backdrop-filter:blur(20px); }
.app-header-left { display:flex; align-items:center; gap:12px; }
.app-header img { width:32px; height:32px; border-radius:8px; }
.app-header h1 { font-size:20px; font-weight:700; background:linear-gradient(135deg,var(--accent-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.status-badge { font-size:11px; padding:3px 8px; border-radius:20px; font-weight:600; }
.status-connected { background:rgba(52,211,153,0.15); color:var(--success); }
.status-disconnected { background:rgba(248,113,113,0.15); color:var(--danger); }
.btn-icon { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; color:var(--text-secondary); padding:6px 10px; cursor:pointer; font-size:12px; transition:all 0.2s; }
.btn-icon:hover { color:var(--text-primary); border-color:var(--accent); }
.user-badge { font-size:12px; color:var(--accent-light); font-weight:600; }
.tenant-select { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); padding:6px 10px; font-size:12px; outline:none; cursor:pointer; }

/* Tabs */
.tab-bar { display:flex; background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:0 24px; gap:0; overflow-x:auto; }
.tab-btn { padding:12px 24px; font-size:13px; font-weight:600; color:var(--text-muted); background:none; border:none; border-bottom:3px solid transparent; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.tab-btn:hover { color:var(--text-secondary); }
.tab-btn.active { color:var(--accent-light); border-bottom-color:var(--accent); }
.tab-count { font-size:10px; background:var(--accent); color:white; border-radius:10px; padding:1px 6px; margin-left:6px; vertical-align:top; }
.tab-count-alert { background:var(--danger); animation:pulse 1.5s ease-in-out infinite; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Queue */
.queue-bar { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:10px 24px; display:none; align-items:center; gap:12px; font-size:13px; color:var(--text-secondary); }
.queue-bar.active { display:flex; }
.queue-spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

/* Cards / Lists */
.channel-list,.notif-container,.admin-container { max-width:900px; margin:0 auto; padding:20px; }
.empty-state { text-align:center; padding:80px 20px; color:var(--text-muted); }
.empty-state h3 { font-size:18px; color:var(--text-secondary); margin-bottom:8px; }
.channel-card,.notif-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; transition:all 0.3s; cursor:pointer; animation:slideIn 0.3s ease-out; }
@keyframes slideIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.channel-card:hover,.notif-card:hover { border-color:var(--accent); box-shadow:0 0 20px var(--accent-glow); transform:translateY(-1px); }
.channel-card-header { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.channel-info { flex:1; }
.channel-name { font-size:15px; font-weight:600; margin-bottom:3px; }
.channel-meta { font-size:12px; color:var(--text-muted); display:flex; gap:16px; }
.channel-actions { display:flex; gap:8px; }
.btn-small { padding:5px 10px; border-radius:6px; font-size:11px; font-weight:600; border:1px solid var(--border); background:transparent; color:var(--text-secondary); cursor:pointer; transition:all 0.2s; }
.btn-small:hover { border-color:var(--accent); color:var(--text-primary); }
.btn-small.danger:hover { border-color:var(--danger); color:var(--danger); }

/* Notifications */
.notif-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.notif-toolbar h3 { font-size:16px; color:var(--text-secondary); }
.notif-card { padding:16px 20px; display:flex; gap:14px; align-items:flex-start; }
.notif-card.unread { border-left:3px solid var(--accent); }
.notif-card.priority-high { border-left-color:var(--warning); }
.notif-card.priority-critical { border-left-color:var(--danger); }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:6px; }
.notif-card.unread .notif-dot { display:block; }
.notif-card:not(.unread) .notif-dot { display:none; }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:14px; font-weight:600; margin-bottom:3px; }
.notif-preview { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notif-meta { font-size:11px; color:var(--text-muted); margin-top:4px; display:flex; gap:12px; }
.notif-priority { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; }
.notif-priority.normal { background:rgba(99,102,241,0.15); color:var(--accent-light); }
.notif-priority.high { background:rgba(251,191,36,0.15); color:var(--warning); }
.notif-priority.critical { background:rgba(248,113,113,0.15); color:var(--danger); }
.notif-priority.low { background:rgba(100,116,139,0.15); color:var(--text-muted); }

.notif-detail-body { max-width:900px; margin:0 auto; padding:24px; line-height:1.7; font-size:14px; }
.notif-detail-meta { max-width:900px; margin:0 auto; padding:0 24px 24px; font-size:12px; color:var(--text-muted); display:flex; gap:16px; flex-wrap:wrap; }

/* Summary */
#summary-view { display:none; }
.summary-header { background:var(--bg-secondary); border-bottom:1px solid var(--border); padding:16px 24px; display:flex; align-items:center; gap:16px; }
.back-btn { background:none; border:none; color:var(--accent-light); font-size:24px; cursor:pointer; padding:4px 8px; border-radius:8px; transition:background 0.2s; }
.back-btn:hover { background:var(--bg-card); }
.summary-content { max-width:900px; margin:0 auto; padding:24px; }
.summary-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:20px; overflow:hidden; animation:slideIn 0.3s ease-out; }
.summary-item-header { padding:14px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.summary-type { font-size:11px; padding:2px 8px; border-radius:20px; font-weight:600; background:rgba(99,102,241,0.15); color:var(--accent-light); }
.summary-stats { font-size:11px; color:var(--text-muted); display:flex; gap:12px; }
.summary-body { padding:24px; line-height:1.7; font-size:14px; }

/* Markdown */
.summary-body h1,.summary-body h2,.summary-body h3,.summary-body h4 { color:var(--text-primary); margin:20px 0 10px; font-weight:600; }
.summary-body h1 { font-size:22px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.summary-body h2 { font-size:18px; border-bottom:1px solid var(--border); padding-bottom:6px; }
.summary-body h3 { font-size:16px; }
.summary-body p { margin:10px 0; }
.summary-body ul,.summary-body ol { margin:10px 0; padding-left:24px; }
.summary-body li { margin:4px 0; }
.summary-body code { background:rgba(99,102,241,0.1); color:var(--accent-light); padding:2px 6px; border-radius:4px; font-family:'Fira Code','Cascadia Code',monospace; font-size:13px; }
.summary-body pre { background:#0d1117; border:1px solid var(--border); border-radius:8px; padding:16px; overflow-x:auto; margin:16px 0; }
.summary-body pre code { background:none; color:var(--text-primary); padding:0; }
.summary-body blockquote { border-left:3px solid var(--accent); margin:12px 0; padding:8px 16px; background:rgba(99,102,241,0.05); border-radius:0 8px 8px 0; }
.summary-body table { width:100%; border-collapse:collapse; margin:16px 0; }
.summary-body th,.summary-body td { border:1px solid var(--border); padding:10px 14px; text-align:left; font-size:13px; }
.summary-body th { background:var(--bg-secondary); font-weight:600; color:var(--accent-light); }
.summary-body strong { color:var(--warning); }
.summary-body em { color:var(--text-secondary); }
.summary-body a { color:var(--accent-light); text-decoration:none; }
.copy-btn { padding:5px 12px; border-radius:6px; font-size:11px; font-weight:600; border:1px solid var(--success); background:rgba(52,211,153,0.1); color:var(--success); cursor:pointer; transition:all 0.2s; }
.copy-btn:hover { background:rgba(52,211,153,0.2); }
.copy-btn.copied { background:var(--success); color:var(--bg-primary); }

/* Analyze */
.analyze-layout { display:grid; grid-template-columns:1fr 1fr; max-width:1400px; margin:0 auto; min-height:calc(100vh - 120px); }
.analyze-input-panel { padding:24px; border-right:1px solid var(--border); overflow-y:auto; }
.analyze-output-panel { padding:24px; overflow-y:auto; }
.panel-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.panel-title::after { content:''; flex:1; height:1px; background:var(--border); }
.drop-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:40px 24px; text-align:center; cursor:pointer; transition:all 0.3s; margin-bottom:20px; position:relative; background:rgba(99,102,241,0.02); }
.drop-zone:hover,.drop-zone.dragover { border-color:var(--accent); background:rgba(99,102,241,0.06); }
.drop-zone.has-file { border-color:var(--success); border-style:solid; background:rgba(52,211,153,0.05); }
.drop-zone-icon { font-size:40px; margin-bottom:12px; opacity:0.5; }
.drop-zone-text { font-size:14px; color:var(--text-secondary); }
.drop-zone-text strong { color:var(--accent-light); }
.drop-zone-hint { font-size:11px; color:var(--text-muted); margin-top:8px; }
.drop-zone-file { display:none; margin-top:12px; font-size:13px; color:var(--success); font-weight:600; }
.drop-zone.has-file .drop-zone-file { display:block; }
.drop-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.or-divider { text-align:center; color:var(--text-muted); font-size:12px; font-weight:600; margin:16px 0; position:relative; }
.or-divider::before,.or-divider::after { content:''; position:absolute; top:50%; width:calc(50% - 20px); height:1px; background:var(--border); }
.or-divider::before { left:0; } .or-divider::after { right:0; }
.log-textarea { width:100%; min-height:200px; max-height:400px; padding:16px; background:var(--bg-primary); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-primary); font-family:'Fira Code',monospace; font-size:12px; line-height:1.6; resize:vertical; outline:none; }
.log-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.prompt-input { width:100%; padding:14px 16px; background:var(--bg-primary); border:1px solid var(--border); border-radius:10px; color:var(--text-primary); font-size:14px; outline:none; transition:all 0.2s; margin-top:16px; resize:vertical; }
.prompt-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.analyze-submit { margin-top:24px; width:100%; padding:16px; font-size:15px; font-weight:700; background:linear-gradient(135deg,var(--accent),#7c3aed); border:none; border-radius:var(--radius); color:white; cursor:pointer; transition:all 0.3s; position:relative; overflow:hidden; }
.analyze-submit:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
.analyze-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.analyze-submit .btn-glow { position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 60%); animation:btnGlow 3s ease-in-out infinite; }
@keyframes btnGlow { 0%,100% { transform:translate(-30%,-30%); } 50% { transform:translate(30%,30%); } }
.data-stats { margin-top:12px; padding:10px 16px; background:var(--bg-card); border-radius:8px; font-size:12px; color:var(--text-muted); display:none; gap:16px; }
.data-stats.visible { display:flex; }
.data-stats span strong { color:var(--text-secondary); }
.output-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; min-height:400px; color:var(--text-muted); text-align:center; }
.output-empty img { width:100px; opacity:0.15; margin-bottom:20px; }

/* Progress */
.progress-timeline { display:none; margin-bottom:24px; }
.progress-timeline.active { display:block; }
.progress-step { display:flex; align-items:flex-start; gap:14px; padding:8px 0; position:relative; }
.progress-step::before { content:''; position:absolute; left:13px; top:32px; bottom:-8px; width:2px; background:var(--border); }
.progress-step:last-child::before { display:none; }
.step-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; transition:all 0.3s; position:relative; z-index:1; }
.step-pending .step-icon { background:var(--bg-card); border:2px solid var(--border); color:var(--text-muted); }
.step-active .step-icon { background:var(--accent); border:2px solid var(--accent-light); color:white; box-shadow:0 0 20px var(--accent-glow); animation:stepPulse 1.5s ease-in-out infinite; }
.step-done .step-icon { background:var(--success); border:2px solid var(--success); color:white; }
.step-error .step-icon { background:var(--danger); border:2px solid var(--danger); color:white; }
@keyframes stepPulse { 0%,100% { box-shadow:0 0 10px var(--accent-glow); } 50% { box-shadow:0 0 25px var(--accent-glow); } }
.step-content { flex:1; padding-top:3px; }
.step-label { font-size:13px; font-weight:600; }
.step-detail { font-size:11px; color:var(--text-muted); margin-top:2px; }
.step-active .step-label { color:var(--accent-light); }
.step-done .step-label { color:var(--success); }
.step-timer { font-size:11px; color:var(--text-muted); padding-top:5px; font-variant-numeric:tabular-nums; }
.live-output { display:none; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; animation:slideIn 0.4s ease-out; }
.live-output.active { display:block; }
.live-output-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.live-output-header h3 { font-size:15px; font-weight:600; }
.live-output-body { padding:24px; min-height:200px; max-height:60vh; overflow-y:auto; }
.live-output-actions { padding:12px 20px; border-top:1px solid var(--border); display:flex; gap:8px; }
.typing-cursor::after { content:''; display:inline-block; width:2px; height:16px; background:var(--accent-light); margin-left:2px; vertical-align:text-bottom; animation:cursorBlink 0.8s step-end infinite; }
@keyframes cursorBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* Admin */
.admin-section { margin-bottom:32px; }
.admin-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.admin-section-header h3 { font-size:16px; color:var(--text-secondary); }
.admin-row { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:14px 18px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.admin-row-info { flex:1; min-width:200px; }
.admin-row-title { font-size:14px; font-weight:600; }
.admin-row-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.admin-row-actions { display:flex; gap:6px; }
.api-key-display { font-family:monospace; font-size:11px; background:var(--bg-primary); padding:4px 8px; border-radius:4px; color:var(--accent-light); word-break:break-all; }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:16px; padding:32px; width:100%; max-width:480px; box-shadow:0 0 40px rgba(0,0,0,0.4); }
.modal-card h3 { font-size:18px; margin-bottom:20px; color:var(--accent-light); }
.modal-actions { display:flex; gap:8px; margin-top:20px; justify-content:flex-end; }
.modal-actions .btn { width:auto; padding:10px 20px; font-size:13px; }
.modal-actions .btn-cancel { background:var(--bg-card); border:1px solid var(--border); }

/* Toast */
.toast-container { position:fixed; top:20px; right:20px; z-index:1000; }
.toast { background:var(--bg-card); border:1px solid var(--accent); border-radius:10px; padding:14px 20px; margin-bottom:8px; box-shadow:0 4px 20px rgba(0,0,0,0.4); animation:toastIn 0.3s ease-out; max-width:350px; }
.toast-title { font-weight:600; font-size:14px; margin-bottom:4px; }
.toast-body { font-size:12px; color:var(--text-secondary); }
@keyframes toastIn { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:translateX(0); } }

/* Responsive */
@media (max-width:900px) { .analyze-layout { grid-template-columns:1fr; } .analyze-input-panel { border-right:none; border-bottom:1px solid var(--border); } }
@media (max-width:600px) { .login-card { margin:20px; padding:32px 24px; } .channel-list,.notif-container,.admin-container { padding:12px; } .app-header { padding:10px 14px; } .field-row { grid-template-columns:1fr; } .tab-btn { padding:10px 14px; font-size:12px; } .header-actions { gap:6px; } }