:root {
  --accent: #34D399;
  --accent-blue: #3B82F6;
  --dark-bg: #0D1117;
  --card-bg: #151A1F;
  --card-border: rgba(255,255,255,0.06);
  --subtle: rgba(255,255,255,0.5);
  --radius: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'SF Pro','Segoe UI',sans-serif; background:var(--dark-bg); color:#fff; min-height:100vh; overflow:hidden; }
a { color:var(--accent); text-decoration:none; }
.subtle { color:var(--subtle); }
.small { font-size:0.75rem; }
.accent { color:var(--accent); }
.text-right { text-align:right; }
.chevron { color:var(--subtle); margin-left:auto; font-size:1.2rem; }

.screen { display:none; height:100vh; flex-direction:column; }
.screen.active { display:flex; }

/* AUTH */
.auth-container { max-width:400px; margin:0 auto; padding:40px 24px; overflow-y:auto; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.auth-logo { position:relative; width:110px; height:110px; display:flex; align-items:center; justify-content:center; }
.logo-glow { position:absolute; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle,rgba(52,211,153,0.3),rgba(59,130,246,0.15),transparent); }
.logo-icon { width:80px; height:80px; position:relative; z-index:1; }
.auth-title { font-size:1.8rem; font-weight:700; }
.auth-subtitle { color:var(--subtle); font-size:0.9rem; }

.input-group { width:100%; position:relative; display:flex; align-items:center; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:0 16px; }
.input-group input { flex:1; background:none; border:none; color:#fff; padding:16px 8px; font-size:1rem; outline:none; }
.input-icon { font-size:1rem; opacity:0.5; }
.toggle-pass { background:none; border:none; cursor:pointer; font-size:1rem; opacity:0.5; }

.error-text { color:#EF4444; font-size:0.8rem; text-align:center; }

.btn-primary { width:100%; padding:16px; background:var(--accent); color:#000; font-size:1rem; font-weight:600; border:none; border-radius:var(--radius); cursor:pointer; transition:opacity 0.2s; }
.btn-primary:hover { opacity:0.9; }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }

.btn-link { background:none; border:none; color:var(--accent-blue); font-size:0.85rem; cursor:pointer; }

.divider { display:flex; align-items:center; gap:12px; width:100%; color:var(--subtle); font-size:0.8rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--card-border); }

.btn-social { width:100%; padding:14px; border:none; border-radius:14px; font-size:0.9rem; font-weight:500; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:opacity 0.2s; }
.btn-social:hover { opacity:0.9; }
.btn-apple { background:#fff; color:#000; }
.btn-google { background:rgba(255,255,255,0.08); color:#fff; }

.auth-toggle { font-size:0.9rem; color:var(--subtle); }
.auth-toggle a { color:var(--accent); font-weight:500; }

/* APP LAYOUT */
#app-screen { height:100vh; display:flex; flex-direction:column; }
#tab-content { flex:1; overflow:hidden; position:relative; }
.tab-panel { display:none; height:100%; flex-direction:column; overflow:hidden; }
.tab-panel.active { display:flex; }
.tab-header { padding:16px 20px 12px; display:flex; align-items:center; justify-content:space-between; }
.tab-header h2 { font-size:1.3rem; }
.tab-body { flex:1; overflow-y:auto; padding:0 16px 24px; }

/* TAB BAR */
.tab-bar { display:flex; background:rgba(21,26,31,0.95); border-top:1px solid var(--card-border); padding:8px 0; padding-bottom:env(safe-area-inset-bottom,8px); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; color:var(--subtle); cursor:pointer; padding:6px 0; transition:color 0.2s; }
.tab-item span { font-size:1.2rem; }
.tab-item label { font-size:0.65rem; pointer-events:none; }
.tab-item.active { color:var(--accent); }

/* DASHBOARD */
.header-section { display:flex; align-items:center; justify-content:space-between; padding:8px 0 16px; }
.header-section h3 { font-size:1.2rem; }
.avatar { width:44px; height:44px; border-radius:50%; background:rgba(52,211,153,0.15); display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:600; }

.card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:20px; padding:20px; margin-bottom:12px; }
.card-title { font-weight:600; }

.agent-status-card { display:flex; gap:16px; align-items:center; }
.agent-icon { font-size:2rem; background:linear-gradient(135deg,rgba(52,211,153,0.2),rgba(59,130,246,0.15)); width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.agent-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.status-badge { display:inline-flex; align-items:center; gap:5px; font-size:0.75rem; font-weight:500; padding:3px 8px; border-radius:20px; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-dot.green { background:#22C55E; box-shadow:0 0 6px rgba(34,197,94,0.5); }
.status-dot.red { background:#EF4444; }
.status-dot.orange { background:#F59E0B; }

.credits-card { display:flex; justify-content:space-between; align-items:center; }
.credits-value { font-size:1.8rem; font-weight:700; }
.credits-value span { font-size:2.2rem; }
.credits-used { font-size:1.5rem; font-weight:700; color:var(--accent-blue); }

.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:16px 0; }
.quick-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; background:none; border:none; cursor:pointer; color:var(--subtle); font-size:0.7rem; transition:transform 0.2s; }
.quick-btn:active { transform:scale(0.95); }
.quick-btn span { font-size:1.4rem; background:rgba(255,255,255,0.06); width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; }

.section-title { font-size:0.95rem; margin:16px 0 10px; }
.tasks-list { }
.empty-state { text-align:center; padding:40px 20px; color:var(--subtle); }
.empty-state span { font-size:2rem; display:block; margin-bottom:8px; }

/* SCREEN */
.screen-controls { display:flex; align-items:center; gap:10px; }
.connection-status { display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:500; }
.btn-icon { background:rgba(239,68,68,0.15); border:none; color:#EF4444; padding:6px 12px; border-radius:20px; font-size:0.75rem; font-weight:500; cursor:pointer; }

.screen-container { flex:1; margin:0 16px 16px; background:#000; border-radius:12px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; }
.screen-placeholder { text-align:center; padding:40px; }
.screen-placeholder h3 { margin:16px 0 8px; }
.screen-placeholder .btn-primary { width:auto; padding:12px 24px; border-radius:30px; margin-top:16px; }
.pulse-circle { width:160px; height:160px; border-radius:50%; background:rgba(52,211,153,0.06); position:absolute; animation:pulse 2s ease-in-out infinite; }
.pulse-circle.inner { width:110px; height:110px; background:rgba(52,211,153,0.1); animation:none; }
.screen-icon { font-size:3rem; position:relative; z-index:1; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.15);opacity:0.3} }

.screen-image { width:100%; height:100%; object-fit:contain; display:block; }

/* CHAT */
.app-selector { display:flex; gap:8px; padding:10px 16px; overflow-x:auto; border-bottom:1px solid var(--card-border); }
.app-selector::-webkit-scrollbar { display:none; }
.app-chip { padding:8px 12px; border-radius:20px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--subtle); font-size:0.8rem; font-weight:500; cursor:pointer; white-space:nowrap; transition:all 0.2s; }
.app-chip.active { background:rgba(52,211,153,0.2); border-color:rgba(52,211,153,0.5); color:var(--accent); }

.chat-messages { flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:12px; }
.message { display:flex; flex-direction:column; max-width:80%; }
.message.user { align-self:flex-end; align-items:flex-end; }
.message.assistant { align-self:flex-start; align-items:flex-start; }
.bubble { padding:12px 16px; border-radius:20px; font-size:0.95rem; line-height:1.4; word-wrap:break-word; }
.message.user .bubble { background:var(--accent); color:#000; border-top-right-radius:6px; }
.message.assistant .bubble { background:var(--card-bg); color:#fff; border-top-left-radius:6px; }
.msg-time { font-size:0.65rem; color:var(--subtle); margin-top:4px; }
.typing-indicator { display:flex; gap:5px; padding:14px 16px; background:var(--card-bg); border-radius:20px; align-self:flex-start; }
.typing-dot { width:8px; height:8px; border-radius:50%; background:var(--subtle); animation:typingBounce 1s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay:0.15s; }
.typing-dot:nth-child(3) { animation-delay:0.3s; }
@keyframes typingBounce { 0%,100%{transform:scale(0.4)} 50%{transform:scale(1)} }

.chat-input-bar { display:flex; gap:12px; padding:10px 16px; background:rgba(21,26,31,0.9); backdrop-filter:blur(20px); border-top:1px solid var(--card-border); }
.chat-input-bar input { flex:1; background:var(--card-bg); border:1px solid var(--card-border); border-radius:22px; padding:10px 16px; color:#fff; font-size:0.95rem; outline:none; }
.chat-input-bar input::placeholder { color:var(--subtle); }
.send-btn { width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:#000; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:opacity 0.2s; }
.send-btn:disabled { opacity:0.3; }

/* APPS */
.category-filter { display:flex; gap:8px; padding:0 0 16px; overflow-x:auto; }
.category-filter::-webkit-scrollbar { display:none; }
.cat-chip { padding:8px 16px; border-radius:20px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--subtle); font-size:0.85rem; font-weight:500; cursor:pointer; white-space:nowrap; }
.cat-chip.active { background:rgba(52,211,153,0.2); border-color:rgba(52,211,153,0.5); color:var(--accent); }

.apps-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.app-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:20px; text-align:center; cursor:pointer; transition:all 0.2s; }
.app-card:hover { border-color:rgba(255,255,255,0.12); }
.app-card.selected { background:rgba(52,211,153,0.08); border-color:rgba(52,211,153,0.5); border-width:2px; }
.app-card-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 12px; }
.app-card-name { font-size:0.9rem; font-weight:500; margin-bottom:4px; }
.app-card-status { font-size:0.75rem; }

/* PROFILE */
.profile-header { text-align:center; padding:8px 0 24px; }
.profile-avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-blue)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700; margin:0 auto 14px; }
.profile-header h3 { font-size:1.2rem; margin-bottom:4px; }

.plan-card { display:flex; align-items:center; gap:14px; cursor:pointer; }
.plan-icon { font-size:1.4rem; width:44px; height:44px; background:rgba(52,211,153,0.12); border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.settings-row { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; margin-bottom:4px; font-size:0.95rem; cursor:pointer; }
.settings-row span:first-child { width:20px; text-align:center; }

.btn-logout { width:100%; padding:16px; background:rgba(239,68,68,0.08); border:none; color:#EF4444; font-size:1rem; font-weight:500; border-radius:14px; cursor:pointer; margin-top:16px; }

/* MODAL */
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:100; display:flex; align-items:flex-end; justify-content:center; }
.modal-content { background:var(--dark-bg); border-radius:20px 20px 0 0; width:100%; max-width:500px; max-height:85vh; overflow-y:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--card-border); }
.modal-header button { background:none; border:none; color:var(--subtle); font-size:1.2rem; cursor:pointer; }
.modal-body { padding:20px; }

.plan-option { display:flex; align-items:center; justify-content:space-between; padding:16px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px; margin-bottom:8px; cursor:pointer; transition:all 0.2s; }
.plan-option.selected { background:rgba(52,211,153,0.06); border-color:rgba(52,211,153,0.5); border-width:2px; }
.plan-price { font-weight:600; text-align:right; }
.plan-price small { font-weight:400; color:var(--subtle); }
.badge-popular { font-size:0.6rem; font-weight:700; color:#F59E0B; background:rgba(245,158,11,0.15); padding:2px 6px; border-radius:10px; }

.credits-packs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.credit-pack { text-align:center; padding:16px 8px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; cursor:pointer; }
.credit-pack strong { font-size:1.2rem; display:block; }
.credit-pack small { color:var(--subtle); display:block; margin:4px 0; }

/* RESPONSIVE */
@media(min-width:768px) {
  .tab-bar { max-width:500px; margin:0 auto; border-radius:16px 16px 0 0; }
  #tab-content { max-width:500px; margin:0 auto; }
  .auth-container { justify-content:center; }
  .modal-content { border-radius:20px; margin-bottom:20px; }
  .modal { align-items:center; }
}

/* FULLSCREEN */
body.fullscreen .tab-bar { display:none; }
body.fullscreen .tab-header { display:none; }
body.fullscreen #tab-content { max-width:100%; }
body.fullscreen .screen-container { margin:0; border-radius:0; }