:root{ --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --primary:#3b82f6; --primary-600:#2563eb; --success:#10b981; --danger:#ef4444; --card:#0b1220; --border:#1f2937; }
*{box-sizing:border-box} body{ background:linear-gradient(120deg,#0b1220 0%,#0f172a 50%,#0b1220 100%); color:#e5e7eb; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; margin:0; }
a{ color:#93c5fd; text-decoration:none } a:hover{text-decoration:underline}
.navbar-modern{ background:rgba(17,24,39,.7); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.navbar-modern .brand{ font-weight:700; letter-spacing:.4px; color:#fff }
.btn{ border-radius:10px; padding:.55rem .9rem }
.btn-xs{padding:.2rem .45rem; font-size:12px; border-radius:8px}
.btn-primary{ background:var(--primary); border-color:var(--primary) } .btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600) }
.btn-outline{ background:transparent; border:1px solid var(--border); color:#e5e7eb } .btn-outline:hover{ border-color:#374151; background:#0f172a }
.layout{ display:grid; grid-template-columns:280px 1fr; gap:0; min-height:calc(100vh - 56px) } @media (max-width:768px){ .layout{ grid-template-columns:1fr } }
.sidebar{ background:rgba(17,24,39,.6); border-right:1px solid var(--border); padding:16px }
.section-title{ font-size:14px; color:var(--muted); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.6px }
.list{ display:flex; flex-direction:column; gap:6px }
.list a,.list .item{ background:rgba(11,18,32,.65); border:1px solid var(--border); border-radius:12px; padding:10px 12px; color:#e5e7eb; text-decoration:none }
.list a:hover{ border-color:#2b3342; background:#0f172a }
.main{ background: radial-gradient(1200px 600px at 70% -100px, rgba(59,130,246,.25), transparent 60%), transparent }
.frame{ width:100%; height:calc(100vh - 56px); border:0; display:block }
.card{ background:rgba(11,18,32,.75); border:1px solid var(--border); border-radius:14px; padding:14px }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px } .badge-muted{ background:#1f2937; color:#cbd5e1 }
.message{ margin-bottom:10px }
.message .bubble{ display:inline-block; max-width:84%; padding:10px 12px; border-radius:12px; background:#111827; border:1px solid var(--border); position:relative }
.message.self .bubble{ background:#0b3a2c; border-color:#0d4d3b }
.message .meta{ font-size:12px; color:#9aa5b1; margin:4px 0 6px }
.message .actions a,.message .actions button{ font-size:12px; margin-left:6px; color:#93c5fd; background:none; border:0; cursor:pointer }
.input-row{ display:flex; gap:8px; align-items:center; background:rgba(17,24,39,.7); border-top:1px solid var(--border); padding:10px }
.input-row input[type="text"]{ flex:1; border:1px solid var(--border); background:#0b1220; color:#e5e7eb; border-radius:10px; padding:10px }
.uploader{ max-width:220px }
.link{ color:#93c5fd; text-decoration:none } .link:hover{ text-decoration:underline }
.table{ width:100%; border-collapse:collapse } .table th,.table td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left } .table th{ color:#9ca3af; font-weight:600; text-transform:uppercase; font-size:12px }
.form-control{ width:100%; background:#0b1220; border:1px solid var(--border); padding:10px; border-radius:10px; color:#e5e7eb }
.form-group{ margin-bottom:12px } label{ font-size:14px; color:#cbd5e1; margin-bottom:6px; display:block }
.notice{ padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#0b1220; color:#cbd5e1 }
.alert{ padding:10px 12px; border-radius:10px } .alert-danger{ background:#3f1d20; color:#fecaca; border:1px solid #7f1d1d } .alert-success{ background:#113a2b; color:#bbf7d0; border:1px solid #14532d }
.nav-actions{ display:flex; gap:8px; align-items:center }
.copy-btn,.save-img{ margin-left:8px; border:1px solid var(--border); border-radius:8px; padding:3px 8px }
.small{ font-size:12px; color:#9aa5b1 }
.table-actions .btn{ padding:.35rem .55rem; font-size:12px; }
.toast{ position: fixed; right: 16px; bottom: 16px; background:#0b1220; border:1px solid var(--border); padding:10px 12px; border-radius:12px; display:none; }
.login-wrap{max-width:520px;margin:8vh auto}
.login-card{padding:18px}
.members{ padding:10px 12px; border-top:1px solid var(--border); background:rgba(17,24,39,.45); }
.members h6{ margin:0 0 6px 0; font-size:14px; color:#cbd5e1 }
.members .tag{ display:inline-block; margin:2px 6px 2px 0; padding:2px 8px; border-radius:999px; background:#0b1220; border:1px solid var(--border); font-size:12px; color:#cbd5e1 }