/* ═══════════════════════════════════════════
   TextPost — CSS
   ═══════════════════════════════════════════ */

:root {
    --primary: #1565C0;
    --primary-light: #D1E4FF;
    --primary-dark: #003258;
    --secondary: #00897B;
    --secondary-light: #B2DFDB;
    --accent: #7C5800;
    --accent-light: #FFDEA1;
    --error: #BA1A1A;
    --error-light: #FFE9E9;
    --bg: #F8F9FA;
    --surface: #FFFFFF;
    --surface-variant: #E7E0EC;
    --on-bg: #1A1C1E;
    --on-surface: #1A1C1E;
    --on-surface-variant: #49454F;
    --outline: #79747E;
    --outline-light: #C4C0C9;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
    --transition: .2s ease;
    --max-width: 640px;
    --top-bar-h: 60px;
    --bottom-nav-h: 60px;
}

/* ── Reset ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--on-bg);line-height:1.5;overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}

/* ── Buttons ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:.875rem;transition:var(--transition);white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:#1256A8}
.btn-primary:disabled{background:var(--outline-light);color:var(--on-surface-variant);cursor:not-allowed}
.btn-secondary{background:var(--surface);color:var(--primary);border:1.5px solid var(--primary)}
.btn-secondary:hover{background:var(--primary-light)}
.btn-danger{background:var(--error);color:#fff}
.btn-danger:hover{background:#9B1515}
.btn-ghost{color:var(--on-surface-variant);padding:8px 12px}
.btn-ghost:hover{background:var(--surface-variant)}
.btn-sm{padding:8px 14px;font-size:.8125rem}
.btn-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);transition:var(--transition);color:var(--on-surface-variant)}
.btn-icon:hover{background:var(--surface-variant)}

/* ── Top Bar ─────────────────────────────── */
#top-bar{position:fixed;top:0;left:0;right:0;height:var(--top-bar-h);background:var(--surface);border-bottom:1px solid var(--outline-light);z-index:100;display:flex;align-items:center;justify-content:center}
.top-bar-inner{display:flex;align-items:center;gap:16px;width:100%;max-width:960px;padding:0 20px}
.logo{font-size:1.375rem;font-weight:800;color:var(--primary);flex-shrink:0}
.search-bar-wrap{position:relative;flex:1;max-width:400px}
.search-bar-wrap input{width:100%;padding:8px 12px 8px 36px;border:1.5px solid var(--outline-light);border-radius:var(--radius-full);font-size:.875rem;outline:none;transition:var(--transition);background:var(--bg)}
.search-bar-wrap input:focus{border-color:var(--primary);background:var(--surface)}
.search-icon-input{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--on-surface-variant)}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* ── Notification Bell ───────────────────── */
.notif-bell{position:relative}
.notif-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;background:var(--error);color:#fff;font-size:.625rem;font-weight:700;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;border:2px solid var(--surface);pointer-events:none}

/* ── Notification Items ──────────────────── */
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);margin-bottom:4px;background:var(--surface);border:1px solid transparent}
.notif-item:hover{background:var(--bg);border-color:var(--outline-light)}
.notif-item.unread{background:var(--primary-light);border-color:rgba(21,101,192,.12)}
.notif-avatar{position:relative;flex-shrink:0}
.notif-type-icon{position:absolute;bottom:-2px;right:-4px;width:20px;height:20px;background:var(--surface);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.notif-content{flex:1;min-width:0}
.notif-text{font-size:.875rem;line-height:1.4;color:var(--on-surface);margin:0}
.notif-text strong{font-weight:600}
.notif-time{font-size:.75rem;color:var(--on-surface-variant);margin-top:2px;display:inline-block}
.notif-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--primary);flex-shrink:0;margin-top:6px}

/* ── Followers/Following List ────────────── */
.follow-tabs{display:flex;border-bottom:2px solid var(--outline-light);margin-bottom:12px}
.follow-tab{flex:1;text-align:center;padding:12px 0;font-size:.875rem;font-weight:600;color:var(--on-surface-variant);cursor:pointer;transition:var(--transition);border-bottom:2px solid transparent;margin-bottom:-2px}
.follow-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.follow-tab:hover{background:var(--bg)}
.follow-user-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:var(--surface);margin-bottom:4px}
.follow-user-item:hover{background:var(--bg)}
.follow-user-info{flex:1;min-width:0}
.follow-user-name{font-weight:600;font-size:.9375rem}
.follow-user-handle{font-size:.8125rem;color:var(--on-surface-variant)}

/* ── Avatar ──────────────────────────────── */
.avatar-circle{width:36px;height:36px;border-radius:var(--radius-full);background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;cursor:pointer;text-transform:uppercase;flex-shrink:0}
.avatar-circle.lg{width:80px;height:80px;font-size:1.75rem}
.avatar-circle.md{width:44px;height:44px;font-size:1rem}
.avatar-circle.sm{width:32px;height:32px;font-size:.75rem;background:var(--secondary-light);color:#003735}

/* ── Dropdown ────────────────────────────── */
.avatar-menu{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:200px;padding:8px 0;z-index:200;border:1px solid var(--outline-light)}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.875rem;color:var(--on-surface);transition:var(--transition)}
.dropdown-menu a:hover{background:var(--bg)}
.dropdown-menu hr{border:none;border-top:1px solid var(--outline-light);margin:4px 0}

/* ── Bottom Nav ──────────────────────────── */
#bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--surface);border-top:1px solid var(--outline-light);display:none;justify-content:space-around;align-items:center;z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.6875rem;color:var(--on-surface-variant);transition:var(--transition);padding:6px 0;flex:1}
.nav-item.active{color:var(--primary)}
.nav-item .material-icons-outlined{font-size:22px}
.nav-label{font-weight:500}

/* ── Page Content ────────────────────────── */
#page-content{max-width:var(--max-width);margin:calc(var(--top-bar-h) + 16px) auto 0;padding:0 16px 32px}
.page{animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Auth Container ──────────────────────── */
#auth-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;background:var(--bg)}
.auth-card{background:var(--surface);border-radius:var(--radius-lg);padding:40px 36px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.auth-card h1{font-size:1.75rem;font-weight:800;color:var(--primary);text-align:center;margin-bottom:4px}
.auth-card .subtitle{text-align:center;color:var(--on-surface-variant);font-size:.875rem;margin-bottom:32px}

/* ── Form Fields ─────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.8125rem;font-weight:600;color:var(--on-surface);margin-bottom:6px}
.form-group .input-wrap{position:relative}
.form-group input{width:100%;padding:10px 14px 10px 40px;border:1.5px solid var(--outline-light);border-radius:var(--radius-sm);font-size:.9375rem;outline:none;transition:var(--transition);background:var(--bg)}
.form-group input:focus{border-color:var(--primary);background:var(--surface)}
.form-group .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--on-surface-variant)}
.form-group .toggle-pw{position:absolute;right:8px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--on-surface-variant);font-size:20px;background:none;border:none}
.form-group .helper{font-size:.75rem;color:var(--on-surface-variant);margin-top:4px}
.form-group .error-text{font-size:.75rem;color:var(--error);margin-top:4px}
.auth-link{text-align:center;font-size:.875rem;color:var(--on-surface-variant);margin-top:20px}
.auth-link a{color:var(--primary);font-weight:600}
.auth-link a:hover{text-decoration:underline}
.forgot-link{text-align:right;font-size:.8125rem;margin-top:-8px;margin-bottom:16px}
.forgot-link a{color:var(--primary)}
.forgot-link a:hover{text-decoration:underline}

/* ── Cards (posts) ───────────────────────── */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px;margin-bottom:12px;transition:var(--transition);border:1px solid transparent}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--outline-light)}
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.card-header .author-info{flex:1;cursor:pointer}
.card-header .author-name{font-weight:600;font-size:.9375rem;color:var(--on-surface)}
.card-header .author-meta{font-size:.75rem;color:var(--on-surface-variant)}
.card-body{font-size:.9375rem;line-height:1.6;color:var(--on-surface);margin-bottom:12px;white-space:pre-wrap;word-break:break-word;cursor:pointer}
.card-actions{display:flex;align-items:center;gap:4px;border-top:1px solid var(--outline-light);padding-top:10px}
.card-action{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--radius-sm);font-size:.8125rem;color:var(--on-surface-variant);transition:var(--transition);cursor:pointer;background:none;border:none;font-family:inherit}
.card-action:hover{background:var(--bg)}
.card-action.liked{color:var(--error)}
.card-action.liked .material-icons-outlined{font-family:'Material Icons'}
.card-action.bookmarked{color:var(--primary)}
.card-action.bookmarked .material-icons-outlined{font-family:'Material Icons'}
.card-action .material-icons-outlined{font-size:20px}
.card-actions-spacer{flex:1}
.card-menu-wrap{position:relative}

/* ── Profile Card ────────────────────────── */
.profile-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:32px 24px;text-align:center;margin-bottom:20px}
.profile-card .display-name{font-size:1.375rem;font-weight:700;margin-top:12px}
.profile-card .username{color:var(--on-surface-variant);font-size:.875rem}
.profile-card .status-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:4px 14px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;margin-top:8px}
.profile-card .bio{color:var(--on-surface-variant);font-size:.875rem;margin-top:10px;line-height:1.5}
.stats-row{display:flex;justify-content:space-around;margin-top:20px;padding-top:16px;border-top:1px solid var(--outline-light)}
.stat-item{text-align:center}
.stat-item .stat-num{font-size:1.25rem;font-weight:700;color:var(--primary)}
.stat-item .stat-label{font-size:.75rem;color:var(--on-surface-variant)}
.profile-actions{margin-top:16px;display:flex;gap:8px;justify-content:center}

/* ── Section Header ──────────────────────── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-header h2{font-size:1.125rem;font-weight:700}

/* ── Tabs ─────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--outline-light);margin-bottom:16px}
.tab{flex:1;text-align:center;padding:12px 0;font-size:.875rem;font-weight:600;color:var(--on-surface-variant);cursor:pointer;transition:var(--transition);border-bottom:2px solid transparent;margin-bottom:-2px}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab:hover{background:var(--bg)}

/* ── Filter Chips ────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:var(--radius-full);font-size:.8125rem;font-weight:600;border:1.5px solid var(--outline-light);color:var(--on-surface-variant);cursor:pointer;transition:var(--transition)}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.active{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.chip .material-icons-outlined{font-size:16px}

/* ── Comment ─────────────────────────────── */
.comment-card{background:var(--bg);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px}
.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.comment-header .comment-author{font-weight:600;font-size:.8125rem;cursor:pointer}
.comment-header .comment-time{font-size:.6875rem;color:var(--on-surface-variant)}
.comment-header .comment-delete{margin-left:auto}
.comment-body{font-size:.875rem;line-height:1.5;white-space:pre-wrap}
.comment-input-wrap{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--outline-light)}
.comment-input-wrap input{flex:1;padding:10px 14px;border:1.5px solid var(--outline-light);border-radius:var(--radius-full);font-size:.875rem;outline:none;transition:var(--transition)}
.comment-input-wrap input:focus{border-color:var(--primary)}

/* ── User Result Card ────────────────────── */
.user-card{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:8px;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.user-card:hover{box-shadow:var(--shadow-md)}
.user-card .user-info{flex:1}
.user-card .user-name{font-weight:600;font-size:.9375rem}
.user-card .user-handle{font-size:.8125rem;color:var(--on-surface-variant)}
.user-card .user-bio{font-size:.8125rem;color:var(--on-surface-variant);margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ── Edit Profile Form ───────────────────── */
.edit-form{background:var(--surface);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.edit-form .form-group input,
.edit-form .form-group textarea{padding-left:14px}
.edit-form textarea{width:100%;padding:10px 14px;border:1.5px solid var(--outline-light);border-radius:var(--radius-sm);font-size:.9375rem;outline:none;transition:var(--transition);resize:vertical;min-height:100px;font-family:inherit;background:var(--bg)}
.edit-form textarea:focus{border-color:var(--primary);background:var(--surface)}
.tip-card{background:var(--secondary-light);border-radius:var(--radius-sm);padding:16px;margin-top:16px;font-size:.8125rem;color:#003735}
.tip-card h4{margin-bottom:6px;font-size:.875rem}

/* ── Modal ───────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:500;padding:16px;animation:fadeIn .15s ease}
.modal-content{background:var(--surface);border-radius:var(--radius-lg);width:100%;max-width:520px;overflow:hidden;box-shadow:var(--shadow-lg)}
.modal-sm{max-width:400px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--outline-light)}
.modal-header h3{font-size:1.125rem;font-weight:700}
.modal-body{padding:20px}
.modal-body textarea{width:100%;min-height:140px;border:1.5px solid var(--outline-light);border-radius:var(--radius-sm);padding:12px;font-size:.9375rem;outline:none;resize:vertical;font-family:inherit;line-height:1.5;transition:var(--transition)}
.modal-body textarea:focus{border-color:var(--primary)}
.post-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.char-count{font-size:.8125rem;color:var(--on-surface-variant)}
.char-count.warn{color:var(--accent)}
.char-count.danger{color:var(--error)}

/* ── Custom Dialog ───────────────────────── */
.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:600;padding:20px;animation:fadeIn .15s ease;backdrop-filter:blur(2px)}
.dialog-card{background:var(--surface);border-radius:var(--radius-lg);padding:32px 28px 24px;width:100%;max-width:380px;box-shadow:var(--shadow-lg);text-align:center;animation:dialogSlideIn .2s ease}
@keyframes dialogSlideIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.dialog-icon{margin:0 auto 12px;width:56px;height:56px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:28px}
.dialog-icon.danger{background:var(--error-light);color:var(--error)}
.dialog-icon.info{background:var(--primary-light);color:var(--primary)}
.dialog-icon.warning{background:var(--accent-light);color:var(--accent)}
.dialog-icon .material-icons-outlined{font-size:28px}
.dialog-title{font-size:1.125rem;font-weight:700;color:var(--on-surface);margin-bottom:8px}
.dialog-message{font-size:.875rem;color:var(--on-surface-variant);line-height:1.5;margin-bottom:20px}
.dialog-input-wrap{margin-bottom:20px}
.dialog-input{width:100%;padding:12px 14px;border:1.5px solid var(--outline-light);border-radius:var(--radius-sm);font-size:.9375rem;outline:none;transition:var(--transition);background:var(--bg);text-align:center}
.dialog-input:focus{border-color:var(--primary);background:var(--surface)}
.dialog-actions{display:flex;gap:10px;justify-content:center}
.dialog-actions .btn{flex:1;justify-content:center;padding:12px 20px}
.btn-danger-fill{background:var(--error);color:#fff}
.btn-danger-fill:hover{background:#9B1515}
.btn-cancel{background:var(--bg);color:var(--on-surface-variant);border:1.5px solid var(--outline-light)}
.btn-cancel:hover{background:var(--surface-variant)}

/* ── Toast ───────────────────────────────── */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--on-surface);color:#fff;padding:12px 24px;border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;z-index:1000;box-shadow:var(--shadow-lg);animation:slideUp .3s ease}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── Empty State ─────────────────────────── */
.empty-state{text-align:center;padding:48px 24px;color:var(--on-surface-variant)}
.empty-state .material-icons-outlined{font-size:56px;opacity:.4;margin-bottom:12px}
.empty-state h3{font-size:1.125rem;font-weight:600;margin-bottom:4px;color:var(--on-surface)}
.empty-state p{font-size:.875rem}

/* ── Spinner / Loading ───────────────────── */
.spinner{width:36px;height:36px;border:3px solid var(--outline-light);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}
.loading-center{display:flex;justify-content:center;padding:40px 0}

/* ── Back Button ─────────────────────────── */
.back-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.back-row a{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:600;color:var(--on-surface-variant)}
.back-row a:hover{color:var(--primary)}

/* ── Profile Page Layout ─────────────────── */
.profile-top{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.profile-names{text-align:left}
.profile-names h2{font-size:1.375rem;font-weight:700;margin:0}
.profile-names .handle{color:var(--on-surface-variant);font-size:.875rem}
.profile-names .status-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:2px 10px;border-radius:var(--radius-full);font-size:.75rem;font-weight:600;margin-top:4px}
.profile-bio{font-size:.875rem;color:var(--on-surface-variant);line-height:1.5;margin-bottom:8px;text-align:left}
.profile-stats{display:flex;justify-content:space-around;padding:16px 0;border-top:1px solid var(--outline-light);border-bottom:1px solid var(--outline-light);margin:12px 0}
.profile-stats .stat{text-align:center}
.profile-stats .stat strong{display:block;font-size:1.125rem;color:var(--primary)}
.profile-stats .stat span{font-size:.75rem;color:var(--on-surface-variant)}
.stat-clickable{cursor:pointer;border-radius:var(--radius-sm);padding:8px 4px;transition:var(--transition)}
.stat-clickable:hover{background:var(--bg)}

/* ── Edit Profile Card ───────────────────── */
.edit-form-card{background:var(--surface);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm)}
.edit-form-card h2{font-size:1.25rem;font-weight:700;margin-bottom:20px}
.form-field{margin-bottom:16px}
.form-field label{display:block;font-size:.8125rem;font-weight:600;color:var(--on-surface);margin-bottom:6px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:10px 14px;border:1.5px solid var(--outline-light);border-radius:var(--radius-sm);font-size:.9375rem;outline:none;transition:var(--transition);background:var(--bg);font-family:inherit}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--primary);background:var(--surface)}
.form-field textarea{resize:vertical;min-height:80px;line-height:1.5}
.form-field select{cursor:pointer}

/* ── FAB ─────────────────────────────────── */
.fab{display:none;position:fixed;bottom:calc(var(--bottom-nav-h) + 16px);right:16px;width:56px;height:56px;border-radius:var(--radius-full);background:var(--primary);color:#fff;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);z-index:90;transition:var(--transition);border:none;cursor:pointer}
.fab:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(21,101,192,.35)}
.fab .material-icons{font-size:24px}

/* ── User Name Label (header) ────────────── */
.user-name-label{display:none}

/* ── Search bar within page ──────────────── */
.search-bar-wrap.full{max-width:100%}

/* ── Responsive ──────────────────────────── */
@media(max-width:768px){
    #bottom-nav{display:flex}
    .fab{display:flex}
    #page-content{padding-bottom:calc(var(--bottom-nav-h) + 24px)}
    .search-bar-wrap{max-width:240px}
    #btn-new-post{display:none}
    .top-actions .btn span:last-child{display:none}
    .profile-top{flex-direction:column;text-align:center}
    .profile-names{text-align:center}
}
@media(max-width:480px){
    .search-bar-wrap{display:none}
    .auth-card{padding:28px 20px}
    .top-bar-inner{padding:0 12px}
    .profile-card{padding:24px 16px}
}