:root{--bg:#f7f9fc;--card:#fff;--muted:#6b7280;--accent:#2563eb;--text:#111;--border:#e5e7eb}
body.dark{--bg:#121212;--card:#1e1e1e;--muted:#aaa;--accent:#4f46e5;--text:#f3f4f6;--border:#374151}
*{box-sizing:border-box;font-family:Segoe UI, Roboto, Arial, sans-serif}
body{margin:0;background:var(--bg);color:var(--text);display:flex;flex-direction:column;min-height:100vh}
header, .app-header{background:linear-gradient(90deg,#111827,#0f172a);color:#fff;padding:18px 24px;}
.app-header .app-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.app-header .brand{display:flex;flex-direction:column;flex:0 1 auto;min-width:180px;}.app-header .brand a{font-size:24px;color:#fff;text-decoration:none;font-weight:bold;}
.app-header .brand-title{margin-top:6px;font-size:18px;font-weight:600;color:#e2e8f0;line-height:1.2;}
.app-header .brand-sub{font-size:12px;opacity:.9;color:#cbdbff;max-width:100%;word-break:break-word;}
.app-nav{flex:1 1 auto;min-width:0;}
.app-nav ul{display:flex;gap:10px;margin:0;padding:0;list-style:none;flex-wrap:wrap;justify-content:flex-start;}
.app-nav li{margin:0;}
.app-nav a{color:#e2e8f0;text-decoration:none;padding:8px 12px;border-radius:8px;border:1px solid transparent;transition:.2s;display:flex;align-items:center;gap:4px;font-size:14px;}
.app-nav a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);}
.header-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0;}
.theme-toggle{background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;}
.avatar-link{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,0.35);padding:6px 10px;border-radius:999px;font-size:13px;}
.page-card, .form-card, .admin-container, .settings-container { background: var(--card); border-radius: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); }
.page-card { max-width: 720px; margin: 32px auto; padding: 32px; }
.form-card { padding: 24px; border-radius: 18px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-heading h1 { margin:0; font-size: 32px; }
.page-heading p { margin: 8px 0 0; color: var(--muted); max-width: 600px; }
.auth-meta { font-size: 14px; color: var(--muted); align-self: center; }
.auth-meta a { color: var(--accent); text-decoration: none; }
.alert { padding: 16px 18px; border-radius: 14px; margin-bottom: 20px; font-weight: 500; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.form-group label { font-weight: 600; color: var(--text); }
.form-group small { color: var(--muted); }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.button-primary { background: var(--accent); color: white; border: none; border-radius: 12px; padding: 14px 20px; cursor: pointer; font-size: 16px; font-weight: 600; }
.button-primary:hover { opacity: .95; }
.button-secondary { background: rgba(37,99,235,0.08); color: var(--accent); border: 1px solid rgba(37,99,235,0.16); }
.button-secondary:hover { background: rgba(37,99,235,0.12); }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; }
.divider::before, .divider::after { content: ''; flex:1; height:1px; background: var(--border); }
.divider span { color: var(--muted); font-size: 13px; }
.provider-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.provider-button { display: inline-flex; align-items: center; gap: 10px; justify-content: center; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; transition: transform .2s, border-color .2s, box-shadow .2s; }
.provider-button:hover { transform: translateY(-1px); border-color: rgba(37,99,235,.4); box-shadow: 0 12px 30px rgba(15,23,42,.08); }
.provider-button.github { color: #24292f; }
.provider-button.hackclub { color: #fc5d99; }
.provider-button.hackatime { color: #1f2937; }
.provider-button.slack { color: #611f69; }
.provider-button.microsoft { color: #0067b8; }
.page-card p:not(.muted) { color: var(--muted); }
footer, .app-footer{padding:16px 0;background:#f8fafc;text-align:center;font-size:13px;color:#6b7280;margin-top:auto;}
.app-footer a{color:#2563eb;text-decoration:none;margin:0 4px;}
body.dark .app-footer{background:#0f172a;color:#cbd5e1;}
body.dark .app-footer a{color:#93c5fd;}
body.dark header, body.dark .app-header{background:#090b13;}
body.dark .app-nav a{color:#d1d5db;}
body.dark .app-nav a:hover{background:rgba(255,255,255,.08);}
body.dark .notif-dropdown{background:#171b28;border-color:#2e3a55;color:#e2e8f0;}
body.dark .notif-item{border-color:rgba(255,255,255,0.08);}
body.dark .notif-item.unread{background:rgba(79,70,229,0.08);}
body.dark .person-card, body.dark .idea, body.dark .dash-card, body.dark .table-container{background:#161b28;box-shadow:0 1px 5px rgba(0,0,0,0.18);}
body.dark form input, body.dark form textarea, body.dark select{background:#111827;border-color:#374151;color:#e2e8f0;}
body.dark .btn-secondary{background:rgba(255,255,255,0.08);color:#fff; border-color:rgba(255,255,255,0.15);}
header h1{margin:0;font-size:28px}
main{max-width:900px;margin:24px auto;padding:0 16px;flex:1}
#post-idea{margin-bottom:18px}
form input, form textarea, select { width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; margin:8px 0; background: var(--card); color: var(--text); }
form input:focus, form textarea:focus, select:focus { outline: 2px solid rgba(37,99,235,.5); outline-offset: 2px; }
body.dark form input, body.dark form textarea, body.dark select { background: #1f1f1f; border-color: #444; color: #eee; }
body.dark form input::placeholder, body.dark form textarea::placeholder { color: #aaa; }
form button{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:6px;cursor:pointer}
.idea{background:var(--card);padding:14px;border-radius:8px;box-shadow:0 1px 3px rgba(2,6,23,0.06);margin-bottom:10px}
.idea h3{margin:0 0 6px 0}
.meta{color:var(--muted);font-size:13px;margin:0 0 8px}
.actions{margin-top:8px}
.actions button{margin-right:8px;padding:6px 10px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
footer{text-align:center;position:relative;width:100%;padding:12px 0;margin-top:12px;background:transparent}
.container{max-width:1200px;margin: 0 auto;}
.content{min-height:auto;padding-bottom:60px;box-sizing:border-box}
html, body{height:100%;margin:0}
.small-img{width:200px;height:auto}
#stat-msgs{margin-left:4px;}
.share-main-btn{padding:8px 14px;cursor:pointer;}
.share-panel{margin-top:8px;}
.share-btn {margin-right:8px;display:inline-block;}

/* Notifications */
.notifications {position:relative;font-family:inherit}
.notif-bell {background:transparent;border:0;color:#fff;cursor:pointer;position:relative;padding:8px;border-radius:999px}
.notif-bell .count {position:absolute;right:4px;top:4px;background:#ef4444;color:#fff;border-radius:999px;padding:2px 6px;font-size:12px;font-weight:600}
.notif-dropdown {position:absolute;right:0;top:42px;width:320px;background:var(--card);color:#111;border-radius:8px;box-shadow:0 6px 20px rgba(2,6,23,0.2);overflow:hidden;z-index:40}
.notif-dropdown .head {display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #eef2ff}
.notif-dropdown .list {max-height:360px;overflow:auto}
.notif-item {position: relative; padding:10px 12px;border-bottom:1px solid #f3f4f6;display:flex;gap:8px;align-items:flex-start}
.notif-item.unread {background:linear-gradient(90deg, rgba(37,99,235,0.04), transparent)}
.notif-item .msg {flex:1}
.notif-item .time {color:var(--muted);font-size:12px}
.notif-empty {padding:18px;text-align:center;color:var(--muted)}
.notif-action {background:transparent;border:0;color:var(--accent);cursor:pointer}

.mention {color:var(--accent);text-decoration:none;font-weight:600}
.mention:hover {text-decoration:underline}
.share-btn {display:inline-block;margin-right:8px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none;font-size:13px}
.share-btn:hover {background:rgba(99,102,241,0.12)}

@media (max-width: 900px) {
    .app-header .app-header-inner {padding: 12px 8px;}
    .app-nav ul {justify-content: center;}
    .app-nav a {font-size: 13px; padding: 8px 10px;}
    .content, main {padding: 16px 12px;}
    .dashboard-grid, .stats-bar, .people-grid {grid-template-columns: 1fr !important;}
    .profile-header-content {flex-direction: column; align-items: center; text-align: center;}
    .profile-avatar {margin-bottom: 12px;}
    .profile-info {width: 100%;}
    .hero h1 {font-size: 32px;}
    .hero p {font-size: 16px;}
    .hero-buttons {gap: 8px;}
}

@media (max-width: 480px) {
    header, .app-header {padding: 12px 10px;}
    .app-header .brand a {font-size: 20px;}
    main {margin: 12px auto;}
    .hero h1 {font-size: 24px;}
    .features-grid {gap: 8px;}
}