:root {
    --primary: #1478ff;
    --primary-2: #00b7ff;
    --primary-soft: #e8f4ff;
    --mint: #19c6a5;
    --bg: #f5f9ff;
    --surface: #ffffff;
    --surface-2: #f7fbff;
    --text: #122033;
    --muted: #6d7a8f;
    --line: #dce8f7;
    --success: #059669;
    --warning: #b45309;
    --danger: #e11d48;
    --shadow: 0 24px 70px rgba(29, 98, 189, .13);
    --shadow-soft: 0 12px 30px rgba(29, 98, 189, .08);
    --radius: 26px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 8% 4%, rgba(0,183,255,.22), transparent 24%),
        radial-gradient(circle at 92% 6%, rgba(25,198,165,.14), transparent 22%),
        linear-gradient(135deg, #fbfdff 0%, #eff7ff 55%, #f7fbff 100%);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { border: none; }
small { color: var(--muted); }

.app-shell {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    min-height: 100vh;
    padding: 18px;
    gap: 18px;
}
.sidebar {
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(220,232,247,.95);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    position: sticky;
    top: 18px;
    height: calc(100vh - 36px);
    overflow-y: auto;
}
.main-content {
    min-width: 0;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(220,232,247,.92);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-mark {
    width: 52px; height: 52px; display: grid; place-items: center;
    border-radius: 20px;
    color: white; font-weight: 950; letter-spacing: -.04em;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 16px 34px rgba(20,120,255,.27);
}
.brand strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.brand small, .me-info small { display: block; color: var(--muted); margin-top: 2px; }
.me-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #eef7ff, #fff);
    border: 1px solid var(--line);
    border-radius: 22px;
    margin-bottom: 16px;
}
.me-info { min-width: 0; }
.me-info strong, .me-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.mini-role { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #fff; background: var(--primary); border-radius: 99px; padding: 3px 7px; }
.sidebar-hero { padding: 16px; margin-bottom: 14px; border-radius: 22px; background: linear-gradient(135deg, #e8f4ff, #fff); border: 1px solid var(--line); }
.sidebar-hero h3 { margin: 0 0 8px; }
.sidebar-hero p { margin: 0; color: var(--muted); line-height: 1.5; }
.nav-menu { display: grid; gap: 8px; }
.nav-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    border-radius: 16px;
    color: #263a58;
    font-weight: 800;
    transition: .18s ease;
}
.nav-menu a:hover, .nav-menu a.active { background: #eaf4ff; color: var(--primary); transform: translateX(2px); }
.nav-menu .admin-link { background: linear-gradient(135deg, #f4f9ff, #ffffff); border: 1px dashed #bddbff; }
.nav-menu .logout-link { color: var(--danger); }

.page { padding: 26px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-title h1 { margin: 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.045em; }
.page-title p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.eyebrow { display: inline-block; margin-bottom: 9px; color: var(--primary); font-size: 12px; font-weight: 950; letter-spacing: .12em; }
.soft-hero { padding: 22px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(135deg, rgba(232,244,255,.95), rgba(255,255,255,.75)); }
.grid-2 { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; min-height: calc(100vh - 88px); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.panel-pad { padding: 18px; }
.list { display: grid; gap: 10px; }
.user-row, .group-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 18px;
    transition: .18s ease;
}
.user-row:hover, .group-row:hover, .user-row.active, .group-row.active { background: #f0f7ff; border-color: #d7eaff; }
.user-row.no-hover:hover { background: transparent; border-color: transparent; transform: none; }
.row-main { min-width: 0; flex: 1; }
.row-main strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main small { color: var(--muted); display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { color: var(--muted); font-size: 12px; text-align: right; }

.avatar { flex: none; border-radius: 50%; display: grid; place-items: center; color: white; background: linear-gradient(135deg, #1f7cff, #38bdf8); font-weight: 950; object-fit: cover; border: 3px solid white; box-shadow: 0 8px 18px rgba(22,104,255,.22); }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.avatar-md { width: 48px; height: 48px; font-size: 15px; }
.avatar-lg { width: 76px; height: 76px; font-size: 26px; }
.group-avatar { width: 50px; height: 50px; flex: none; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #2dd4bf, #2563eb); color: #fff; font-weight: 950; border: 3px solid #fff; box-shadow: 0 8px 18px rgba(37,99,235,.16); }

.auth-layout { min-height: calc(100vh - 36px); display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 26px; padding: 28px; align-items: center; }
.auth-copy { padding: 36px; border-radius: 32px; background: linear-gradient(135deg, rgba(232,244,255,.95), rgba(255,255,255,.76)); border: 1px solid var(--line); min-height: 430px; display: flex; flex-direction: column; justify-content: center; }
.auth-copy h1 { font-size: clamp(32px, 5vw, 56px); line-height: .98; letter-spacing: -.06em; margin: 0 0 18px; }
.auth-copy p { color: var(--muted); font-size: 18px; line-height: 1.65; max-width: 640px; }
.feature-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.feature-strip span, .badge, .pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #edf6ff; color: var(--primary); font-size: 12px; font-weight: 900; }
.pill { background: #f1f5f9; color: #334155; }
.pill.success { background: #ecfdf5; color: #047857; }
.pill.danger { background: #fff1f2; color: #be123c; }
.form-card { max-width: 480px; margin: 8vh auto; padding: 30px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.auth-card { margin: 0; }
.form-card h1 { margin: 0 0 8px; font-size: 30px; letter-spacing: -.03em; }
.form-card p { color: var(--muted); margin-top: 0; }
.form-grid { display: grid; gap: 13px; }
.field label { display: block; margin-bottom: 7px; font-weight: 850; font-size: 14px; }
.input, .textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px;
    background: #fbfdff; color: var(--text); outline: none; transition: .18s ease;
}
.textarea { min-height: 104px; resize: vertical; }
.input:focus, .textarea:focus { border-color: #7db7ff; box-shadow: 0 0 0 4px rgba(22,104,255,.10); }
.input.mini { width: 120px; padding: 9px 10px; border-radius: 12px; }
.btn { border: 0; border-radius: 16px; padding: 13px 17px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; font-weight: 950; cursor: pointer; box-shadow: 0 14px 28px rgba(22,104,255,.22); transition: .18s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.01); }
.btn.secondary { background: #eaf4ff; color: var(--primary); box-shadow: none; }
.btn.danger { background: var(--danger); }
.btn.tiny { padding: 8px 10px; border-radius: 11px; font-size: 12px; }
.btn.full { width: 100%; }
.alert { padding: 12px 14px; border-radius: 16px; border: 1px solid; margin-bottom: 14px; }
.alert.error { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.alert.success { background: #ecfdf5; border-color: #bbf7d0; color: #047857; }
.alert.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.chat-wrap { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: calc(100vh - 36px); }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); }
.chat-top .title { min-width: 0; flex: 1; }
.chat-top .title strong { display: block; font-size: 18px; }
.chat-top .title small { color: var(--muted); }
.messages { padding: 20px; overflow-y: auto; background: radial-gradient(circle at top right, rgba(0,163,255,.10), transparent 28%), linear-gradient(180deg, #f7fbff, #eef7ff); }
.empty-state { text-align: center; color: var(--muted); padding: 60px 20px; }
.empty-state.small { padding: 24px 12px; }
.msg { display: flex; gap: 9px; margin-bottom: 12px; align-items: flex-end; }
.msg.me { justify-content: flex-end; }
.bubble { max-width: min(680px, 76%); padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(25, 90, 180, .08); line-height: 1.52; word-break: break-word; }
.msg.me .bubble { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-color: transparent; border-radius: 18px 18px 6px 18px; }
.bubble small { display: block; margin-top: 7px; font-size: 11px; opacity: .75; color: inherit; }
.sender-name { display: block; color: var(--primary); font-size: 12px; font-weight: 900; margin-bottom: 4px; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: #fff; }
.chat-form textarea { min-height: 48px; max-height: 160px; resize: vertical; }
.searchbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.searchbar.wide { margin-bottom: 0; }
.select-short { max-width: 170px; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profile-head h1, .profile-head h2 { margin: 0 0 4px; }
.muted { color: var(--muted); }
.mt { margin-top: 14px; }
.mt-large { margin-top: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; }
.person-card { border: 1px solid var(--line); border-radius: 22px; padding: 16px; background: linear-gradient(135deg, #fff, #f8fbff); box-shadow: var(--shadow-soft); }
.person-card .top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.person-card p { color: var(--muted); line-height: 1.55; }

.admin-tabs { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.82); }
.admin-tabs a { padding: 10px 13px; border-radius: 14px; color: #334155; font-weight: 900; }
.admin-tabs a.active, .admin-tabs a:hover { background: var(--primary-soft); color: var(--primary); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat-grid.compact { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat-card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg, #fff, #f4f9ff); box-shadow: var(--shadow-soft); }
.stat-card span { display: block; color: var(--muted); font-weight: 850; }
.stat-card strong { display: block; font-size: 34px; letter-spacing: -.05em; margin: 6px 0 2px; }
.stat-card.danger-soft { background: linear-gradient(135deg, #fff, #fff1f2); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-title h2, .section-title h3 { margin: 0; }
.section-title a { color: var(--primary); font-weight: 900; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
.table { width: 100%; border-collapse: collapse; min-width: 760px; background: #fff; }
.table th, .table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.table th { background: #f4f9ff; color: #42526b; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.table tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.table-actions form { margin: 0; }
.message-cell { max-width: 440px; line-height: 1.5; }
.activity-list { display: grid; gap: 10px; }
.activity-item { padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: #fbfdff; }
.activity-item strong { display: block; }
.activity-item small { display: block; margin-top: 2px; }
.activity-item p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-form { display: flex; align-items: center; gap: 7px; }
.action-stack { display: grid; gap: 10px; }
.settings-panel { max-width: 860px; }
.switch-row { display: flex; align-items: center; gap: 10px; font-weight: 850; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.report-box { border: 1px dashed #fda4af; background: #fff7f8; border-radius: 18px; padding: 14px; }
.report-box summary { cursor: pointer; font-weight: 900; color: var(--danger); }
.report-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 1050px) {
    .app-shell { grid-template-columns: 1fr; padding: 12px; }
    .sidebar { position: static; height: auto; }
    .nav-menu { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .main-content { min-height: 70vh; }
    .grid-2, .auth-layout { grid-template-columns: 1fr; min-height: auto; }
    .chat-wrap { height: 72vh; }
    .auth-copy { min-height: auto; padding: 24px; }
}
@media (max-width: 640px) {
    .page { padding: 16px; }
    .page-header, .section-title { align-items: flex-start; flex-direction: column; }
    .chat-form, .searchbar, .split-2 { grid-template-columns: 1fr; display: grid; }
    .chat-form .btn, .searchbar .btn { width: 100%; }
    .bubble { max-width: 88%; }
    .auth-layout { padding: 16px; }
    .form-card { padding: 22px; }
    .table { min-width: 680px; }
}

/* ===== LightChat Pro 1.2: attachments + polished admin ===== */
.chat-form-attach {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.composer-main { display: grid; gap: 8px; min-width: 0; }
.composer-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attach-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #eef7ff;
    color: var(--primary);
    border: 1px solid #cfe7ff;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}
.attach-btn:hover { transform: translateY(-1px); background: #e4f2ff; }
.attach-btn input { display: none; }
.file-selected { color: var(--muted); font-size: 12px; font-weight: 750; max-width: 420px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-selected.has-file { color: var(--primary); }
.file-selected.disabled { color: var(--danger); }
.send-btn { min-height: 48px; }
.message-text { line-height: 1.48; }
.chat-image-link { display: block; margin-top: 8px; }
.chat-image {
    display: block;
    max-width: min(330px, 72vw);
    max-height: 320px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 10px 24px rgba(15,23,42,.12);
    background: #fff;
}
.msg.me .chat-image { border-color: rgba(255,255,255,.55); }
.file-card {
    display: flex; align-items: center; gap: 11px;
    margin-top: 8px;
    padding: 11px 12px;
    min-width: min(310px, 70vw);
    border-radius: 16px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(207,231,255,.95);
    color: #183153;
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
}
.file-card .file-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #e8f4ff; }
.file-card strong { display: block; max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.file-card small { display: block; margin-top: 2px; }
.msg.me .file-card { background: rgba(255,255,255,.95); }

.admin-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(207,231,255,.95);
    border-radius: 30px;
    background:
        radial-gradient(circle at 8% 0%, rgba(20,120,255,.16), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,244,255,.88));
    box-shadow: var(--shadow-soft);
}
.admin-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.055em; }
.admin-hero p { margin: 9px 0 0; color: var(--muted); max-width: 820px; line-height: 1.6; }
.admin-hero-card {
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0f75ff, #38bdf8);
    color: #fff;
    box-shadow: 0 18px 42px rgba(20,120,255,.23);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
}
.admin-hero-card span { opacity: .86; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.admin-hero-card strong { display: block; margin: 8px 0 4px; font-size: 30px; line-height: 1.05; letter-spacing: -.045em; }
.admin-hero-card small { color: rgba(255,255,255,.86); }
.admin-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.site-card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.site-card-meta span { padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; text-transform: none; letter-spacing: 0; font-size: 12px; }
.compact-admin-hero { grid-template-columns: 1fr; }
.admin-stat-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat-card { position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; right: -34px; top: -34px; width: 92px; height: 92px; border-radius: 50%; background: rgba(20,120,255,.09); }
.stat-blue { background: linear-gradient(135deg, #fff, #eef7ff); }
.stat-green { background: linear-gradient(135deg, #fff, #ecfdf5); }
.stat-red { background: linear-gradient(135deg, #fff, #fff1f2); }
.stat-purple { background: linear-gradient(135deg, #fff, #f5f3ff); }
.stat-orange { background: linear-gradient(135deg, #fff, #fff7ed); }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr); gap: 18px; }
.admin-side-stack { display: grid; gap: 18px; align-content: start; }
.config-list { display: grid; gap: 10px; }
.config-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.config-list span { color: var(--muted); font-weight: 800; }
.config-list strong { color: #183153; text-align: right; }
.admin-clean-table { min-width: 650px; }

.settings-layout { display: grid; gap: 16px; }
.settings-card { position: relative; overflow: hidden; }
.settings-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-2), var(--mint)); }
.featured-setting { background: linear-gradient(135deg, #fff, #f3f9ff); }
.settings-card-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; }
.settings-card-head h2 { margin: 0 0 4px; }
.settings-card-head p { margin: 0; color: var(--muted); line-height: 1.5; }
.settings-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 16px; background: #edf6ff; font-size: 20px; }
.input-lg { font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.hint-box { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #f8fbff; color: var(--muted); border: 1px dashed #cfe7ff; line-height: 1.5; }
.settings-sticky-actions { position: sticky; bottom: 12px; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid rgba(207,231,255,.9); border-radius: 20px; background: rgba(255,255,255,.86); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); }

@media (max-width: 1050px) {
    .admin-hero, .admin-dashboard-grid { grid-template-columns: 1fr; }
    .chat-form-attach { grid-template-columns: 1fr; }
    .send-btn { width: 100%; }
}
@media (max-width: 640px) {
    .admin-hero { padding: 18px; border-radius: 24px; }
    .admin-hero-card strong { font-size: 25px; }
    .settings-sticky-actions { position: static; }
    .file-selected { max-width: 250px; }
    .chat-image { max-width: 76vw; }
}

/* Admin v3 refinements */
.site-announcements { display: grid; gap: 10px; padding: 16px 20px 0; }
.site-announcement { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 18px; border: 1px solid var(--line); background: #f4f9ff; box-shadow: var(--shadow-soft); }
.site-announcement strong { min-width: 150px; color: var(--primary); }
.site-announcement span { color: #334155; line-height: 1.55; }
.site-announcement.level-success { background: #ecfdf5; border-color: #bbf7d0; }
.site-announcement.level-warning { background: #fffbeb; border-color: #fde68a; }
.site-announcement.level-danger { background: #fff1f2; border-color: #fecdd3; }

.admin-page { background: linear-gradient(180deg, rgba(248,251,255,.92), rgba(255,255,255,.72)); min-height: 100%; }
.admin-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: stretch; gap: 18px; margin-bottom: 18px; padding: 24px; border: 1px solid rgba(190,219,255,.9); border-radius: 30px; background: radial-gradient(circle at 92% 0%, rgba(20,120,255,.22), transparent 28%), linear-gradient(135deg, #ffffff 0%, #eef7ff 100%); box-shadow: var(--shadow-soft); }
.admin-hero::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(0,183,255,.12); right: -70px; bottom: -90px; }
.admin-hero > * { position: relative; z-index: 1; }
.admin-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 46px); line-height: 1; letter-spacing: -.06em; }
.admin-hero p { margin: 0; color: #50617a; line-height: 1.6; max-width: 780px; }
.compact-hero, .compact-admin-hero { align-items: center; }
.admin-hero-card { min-width: 260px; padding: 18px; border-radius: 24px; background: rgba(255,255,255,.9); border: 1px solid #dbeafe; box-shadow: 0 16px 35px rgba(37,99,235,.10); display: flex; flex-direction: column; justify-content: center; }
.admin-hero-card span { color: var(--muted); font-weight: 850; }
.admin-hero-card strong { display: block; margin: 6px 0 3px; font-size: 28px; letter-spacing: -.04em; }
.site-card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.site-card-meta span { padding: 7px 9px; border-radius: 999px; background: #eef7ff; color: #1d4ed8; font-size: 12px; font-weight: 900; }
.admin-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.admin-tabs { position: sticky; top: 0; z-index: 5; box-shadow: 0 10px 24px rgba(37,99,235,.07); }
.admin-tabs a { display: inline-flex; align-items: center; gap: 7px; }
.admin-stat-grid .stat-card { position: relative; overflow: hidden; }
.admin-stat-grid .stat-card::after { content: ""; position: absolute; width: 76px; height: 76px; right: -22px; bottom: -24px; border-radius: 30px; background: rgba(20,120,255,.10); transform: rotate(18deg); }
.stat-blue { background: linear-gradient(135deg, #fff, #eaf4ff); }
.stat-red { background: linear-gradient(135deg, #fff, #fff1f2); }
.stat-green { background: linear-gradient(135deg, #fff, #ecfdf5); }
.stat-purple { background: linear-gradient(135deg, #fff, #f5f3ff); }
.stat-orange { background: linear-gradient(135deg, #fff, #fff7ed); }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; }
.admin-side-stack { display: grid; gap: 18px; align-content: start; }
.config-list { display: grid; gap: 10px; }
.config-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdff; }
.config-list span { color: var(--muted); }
.config-list strong { text-align: right; }
.settings-layout { display: grid; gap: 16px; }
.settings-card { border-radius: 26px; }
.settings-card.featured-setting { background: linear-gradient(135deg, #fff, #f0f7ff); }
.settings-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.settings-card-head h2 { margin: 0 0 4px; }
.settings-card-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.settings-icon { width: 46px; height: 46px; border-radius: 17px; display: grid; place-items: center; background: #eaf4ff; font-size: 22px; }
.input-lg { font-size: 20px; font-weight: 900; }
.hint-box { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #f8fafc; color: #475569; border: 1px dashed #cbd5e1; line-height: 1.5; }
.settings-sticky-actions { position: sticky; bottom: 14px; display: flex; gap: 10px; justify-content: flex-end; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.86); border: 1px solid var(--line); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); }
.admin-clean-table td, .admin-clean-table th { vertical-align: middle; }
.admin-thumb { width: 92px; height: 64px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); display: block; margin-bottom: 8px; background: #f8fafc; }
.announcement-item { border-left: 5px solid #93c5fd; }
.announcement-item.level-success { border-left-color: #34d399; }
.announcement-item.level-warning { border-left-color: #f59e0b; }
.announcement-item.level-danger { border-left-color: #fb7185; }
.composer-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.attach-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; padding: 9px 11px; border-radius: 14px; background: #eaf4ff; color: var(--primary); font-weight: 900; border: 1px solid #cfe6ff; }
.attach-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-selected { color: var(--muted); font-size: 13px; font-weight: 800; }
.file-selected.has-file { color: #0f766e; }
.file-selected.disabled { color: var(--danger); }
.chat-image { max-width: min(340px, 100%); max-height: 260px; object-fit: cover; border-radius: 14px; display: block; margin-top: 8px; border: 1px solid rgba(255,255,255,.5); }
.file-card { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.88); border: 1px solid rgba(203,213,225,.8); color: #1e293b; }
.msg.me .file-card { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.3); }
.file-card strong, .file-card small { display: block; }
.file-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: #eaf4ff; }

@media (max-width: 1050px) {
    .admin-hero, .admin-dashboard-grid { grid-template-columns: 1fr; flex-direction: column; }
    .admin-hero-card { min-width: 0; }
    .settings-sticky-actions { position: static; justify-content: stretch; flex-direction: column; }
    .site-announcement { flex-direction: column; }
    .site-announcement strong { min-width: 0; }
}

/* ===== LightChat Pro v4: separated admin login + upload-before-send preview ===== */
.auth-only-body {
    min-height: 100vh;
}
.auth-only-main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
}
.auth-only-main .auth-layout {
    width: min(1180px, 100%);
    min-height: auto;
    padding: 0;
}
.admin-login-body .auth-copy {
    background:
        radial-gradient(circle at 85% 15%, rgba(20,120,255,.20), transparent 28%),
        linear-gradient(135deg, #eef7ff, #fff);
}
.attachment-preview {
    width: 100%;
    margin-top: 8px;
}
.attachment-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(520px, 100%);
    padding: 10px 12px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #cfe7ff;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.attachment-preview-card img {
    width: 74px;
    height: 56px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
}
.attachment-preview-card div {
    min-width: 0;
    flex: 1;
}
.attachment-preview-card strong,
.attachment-preview-card small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.attachment-preview-card strong { font-size: 13px; }
.attachment-preview-card small { margin-top: 2px; color: var(--success); font-weight: 800; }
.preview-remove {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff1f2;
    color: var(--danger);
    font-size: 20px;
    font-weight: 950;
    cursor: pointer;
}
.file-selected.uploading { color: var(--warning); }
.file-selected.error { color: var(--danger); white-space: normal; }
@media (max-width: 780px) {
    .auth-only-main { padding: 12px; place-items: stretch; }
    .auth-only-main .auth-layout { grid-template-columns: 1fr; }
    .attachment-preview-card { width: 100%; }
}

/* ===== LightChat Pro v5: fixed upload-before-send preview + cleaner admin ===== */
.lc-file-input,
.attach-btn input[type="file"],
.js-attachment-input {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.chat-form-attach {
    padding: 18px;
    gap: 14px;
    align-items: stretch;
    border-top: 1px solid #dce8f7;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.chat-form-attach .composer-main {
    padding: 10px;
    border: 1px solid #d9e9fb;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px rgba(37,99,235,.06);
}
.chat-form-attach textarea.input {
    min-height: 56px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 10px 12px;
}
.chat-form-attach textarea.input:focus {
    box-shadow: none;
}
.composer-tools {
    padding: 0 4px 2px;
}
.attach-btn {
    border-radius: 16px;
    padding: 10px 13px;
    background: linear-gradient(135deg, #eaf4ff, #f7fbff);
    border: 1px solid #bfdbfe;
    box-shadow: 0 8px 18px rgba(37,99,235,.08);
}
.attach-btn span { pointer-events: none; }
.file-selected {
    max-width: min(460px, 70vw);
    line-height: 1.35;
}
.attachment-preview[hidden] { display: none !important; }
.attachment-preview-card {
    width: min(560px, 100%);
    background: linear-gradient(135deg, #f8fbff, #ffffff);
    border: 1px solid #b9dcff;
}
.image-preview-card img,
.attachment-preview-card img {
    width: 86px;
    height: 64px;
}
.send-btn {
    min-width: 104px;
    min-height: 68px;
    border-radius: 22px;
    font-size: 17px;
}

.admin-page {
    background:
        radial-gradient(circle at 0% 0%, rgba(20,120,255,.08), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.admin-hero {
    border-radius: 34px;
    border: 1px solid rgba(191,219,254,.95);
    background:
        radial-gradient(circle at 92% 8%, rgba(20,120,255,.20), transparent 30%),
        radial-gradient(circle at 16% 0%, rgba(25,198,165,.12), transparent 28%),
        linear-gradient(135deg, #ffffff, #eef7ff 70%, #ffffff);
    box-shadow: 0 24px 60px rgba(37,99,235,.11);
}
.admin-tabs {
    margin-bottom: 20px;
    padding: 12px;
    gap: 10px;
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
}
.admin-tabs a {
    min-height: 44px;
    padding: 11px 15px;
    border: 1px solid transparent;
}
.admin-tabs a.active,
.admin-tabs a:hover {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #eaf4ff, #ffffff);
}
.admin-stat-grid { gap: 16px; }
.admin-stat-grid .stat-card {
    border-radius: 26px;
    border-color: #dbeafe;
    box-shadow: 0 14px 34px rgba(37,99,235,.08);
}
.admin-stat-grid .stat-card strong {
    font-size: 38px;
}
.admin-dashboard-grid .panel,
.admin-side-stack .panel,
.settings-card {
    border-radius: 28px;
    border-color: #dbeafe;
    box-shadow: 0 16px 36px rgba(37,99,235,.07);
}
.table-wrap {
    border-radius: 22px;
    border-color: #dbeafe;
}
.table th {
    background: linear-gradient(180deg, #f0f7ff, #f8fbff);
}
.settings-card-head {
    padding-bottom: 12px;
    border-bottom: 1px solid #e5eefb;
}
.settings-icon {
    background: linear-gradient(135deg, #eaf4ff, #ffffff);
    border: 1px solid #cfe7ff;
}
@media (max-width: 640px) {
    .chat-form-attach { padding: 12px; }
    .send-btn { min-height: 52px; width: 100%; }
    .file-selected { max-width: 100%; }
}
.admin-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.admin-module-card {
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(135deg, #ffffff, #f2f8ff);
    border: 1px solid #dbeafe;
    box-shadow: 0 14px 34px rgba(37,99,235,.075);
    transition: .18s ease;
}
.admin-module-card:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 18px 42px rgba(37,99,235,.12);
}
.admin-module-card span {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eaf4ff;
    font-size: 22px;
}
.admin-module-card strong {
    font-size: 18px;
    letter-spacing: -.02em;
}
.admin-module-card small {
    line-height: 1.45;
}

/* v6 QR login + QR group invite */
.auth-tabs-mini{display:flex;gap:8px;margin-bottom:14px}.auth-tabs-mini span{padding:7px 12px;border-radius:999px;background:#eef4ff;color:#5270a8;font-weight:700;font-size:13px}.auth-tabs-mini span.active{background:#0b74ff;color:#fff}.qr-login-box{margin-top:18px;padding:16px;border:1px solid #dbe8ff;border-radius:20px;background:linear-gradient(180deg,#f8fbff,#fff);box-shadow:0 14px 40px rgba(33,104,207,.08)}.qr-login-head{display:grid;gap:4px;margin-bottom:12px}.qr-login-head strong{font-size:16px;color:#18233d}.qr-login-head small{color:#718096}.qr-login-preview{margin-top:14px;text-align:center}.qr-login-preview img{width:220px;height:220px;max-width:100%;border:1px solid #e6eefb;border-radius:20px;padding:12px;background:#fff;box-shadow:0 18px 50px rgba(29,78,216,.12)}.compact-auth{max-width:980px;margin:0 auto}.qr-confirm-card .qr-confirm-info{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:#f8fbff;border:1px solid #e5efff;margin-bottom:14px}.group-qr-card{padding:16px;border-radius:22px;background:linear-gradient(135deg,#f7fbff,#ffffff);border:1px solid #dce9ff;box-shadow:0 18px 50px rgba(20,88,200,.08)}.qr-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.qr-card-head h3{margin:0}.qr-invite-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:center}.qr-code-img{width:160px;height:160px;border-radius:20px;padding:10px;background:#fff;border:1px solid #e7eefb;box-shadow:0 14px 34px rgba(22,72,150,.12)}.qr-invite-actions{display:grid;gap:10px}.qr-action-row{display:flex;gap:10px;flex-wrap:wrap}.qr-action-row form{margin:0}.login-copy-setting textarea{min-height:92px}@media(max-width:720px){.qr-invite-layout{grid-template-columns:1fr}.qr-code-img{width:220px;height:220px;margin:auto}.qr-card-head{flex-direction:column}}

/* =========================
   V7 responsive chat interface
   ========================= */
.nav-menu a { position: relative; }
.nav-count, .mobile-bottom-nav em {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #ff3b4f;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    line-height: 1;
}
.nav-count:empty, .mobile-bottom-nav em:empty { display: none; }
.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.desktop-only-flex { display: flex; }
.desktop-only { display: inline-flex; }
.mobile-back, .zalo-like-mobile-head, .mobile-bottom-nav, .mobile-tabs { display: none; }
.messenger-layout {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 18px;
    min-height: calc(100vh - 88px);
}
.chat-list-page .messenger-layout,
.group-list-page .messenger-layout { min-height: auto; }
.conversation-panel { overflow: hidden; }
.conversation-list { gap: 0; }
.conversation-row {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid rgba(220,232,247,.8);
    padding: 14px 10px;
}
.conversation-row:first-child { border-top-left-radius: 18px; border-top-right-radius: 18px; }
.conversation-row:last-child { border-bottom: 0; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.conversation-row.has-unread .row-main strong,
.conversation-row.has-unread .row-main small { font-weight: 900; color: #101828; }
.avatar-wrap { position: relative; flex: none; display: inline-flex; }
.red-dot {
    position: absolute;
    right: -1px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff3045;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(255,48,69,.12);
}
.unread-badge {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: #ff3045;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
}
.active-chat-panel { height: calc(100vh - 36px); min-height: 620px; }
.chat-room-layout, .group-room-layout { padding: 18px; }
.chat-side-list, .group-info-panel { max-height: calc(100vh - 36px); overflow: auto; }
.group-room-layout { grid-template-columns: minmax(310px, 420px) minmax(0, 1fr); }
.group-avatar.xl { width: 76px; height: 76px; border-radius: 26px; font-size: 24px; }
.group-profile-head { align-items: center; }
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-mini-tools {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    background: #fbfdff;
}
.admin-mini-tools summary { cursor: pointer; font-weight: 900; color: var(--primary); }
.admin-mini-tools .form-grid { margin-top: 12px; }
.typing-indicator.active { color: #0ea5e9; font-weight: 850; }
.sender-name {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 900;
    color: #2874d0;
}
.msg.me .sender-name { color: rgba(255,255,255,.9); }
.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.attach-btn.icon-only {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.attach-btn.icon-only b { font-size: 13px; }
.file-selected.error { color: var(--danger); font-weight: 800; }
.file-selected.has-file { color: var(--success); font-weight: 800; }
.file-selected.uploading { color: var(--primary); }
.image-preview-card img,
.attachment-preview-card img {
    object-fit: cover;
    border-radius: 12px;
}
.attachment-preview-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    position: relative;
}
.attachment-preview-card div { min-width: 0; }
.attachment-preview-card strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-preview-card small { display: block; margin-top: 3px; }
.preview-remove {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: #ef4444;
    font-weight: 950;
}
.chat-image {
    max-width: min(360px, 72vw);
    max-height: 320px;
    border-radius: 16px;
    display: block;
    margin-top: 8px;
    object-fit: cover;
}
.file-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(125,183,255,.45);
    background: rgba(255,255,255,.68);
}
.msg.me .file-card { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); }
.file-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #eaf4ff; }
.msg.me .file-icon { background: rgba(255,255,255,.22); }
.qr-scan-panel { min-height: 560px; }
.qr-scan-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 24px; align-items: stretch; }
.qr-camera-card {
    min-height: 420px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #101828, #1d4ed8);
    position: relative;
    display: grid;
    place-items: center;
    box-shadow: 0 24px 60px rgba(15,23,42,.2);
}
.qr-camera-card video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame {
    position: absolute;
    inset: 15%;
    border: 2px dashed rgba(255,255,255,.62);
    border-radius: 28px;
    pointer-events: none;
}
.scan-frame span { position: absolute; width: 36px; height: 36px; border-color: #38bdf8; border-style: solid; }
.scan-frame span:nth-child(1) { top: -2px; left: -2px; border-width: 5px 0 0 5px; border-top-left-radius: 18px; }
.scan-frame span:nth-child(2) { top: -2px; right: -2px; border-width: 5px 5px 0 0; border-top-right-radius: 18px; }
.scan-frame span:nth-child(3) { bottom: -2px; left: -2px; border-width: 0 0 5px 5px; border-bottom-left-radius: 18px; }
.scan-frame span:nth-child(4) { bottom: -2px; right: -2px; border-width: 0 5px 5px 0; border-bottom-right-radius: 18px; }
.qr-scan-side { padding: 20px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(135deg, #f8fbff, #fff); }
.qr-scan-side h2 { margin-top: 0; }
.qr-action-row.vertical { display: grid; gap: 10px; }
.qr-scan-status { padding: 12px; border-radius: 16px; background: #eef7ff; color: #155caa; font-weight: 800; }
.manual-join-box { margin-top: 20px; display: grid; gap: 8px; }
.manual-join-row { display: flex; gap: 10px; }
.qr-invite-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: center; }
.qr-code-img { width: 240px; max-width: 100%; border-radius: 22px; padding: 12px; background: #fff; border: 1px solid var(--line); }
.qr-action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qr-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mobile-search { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.mobile-search input { width: 100%; border: 0; background: transparent; color: #fff; outline: 0; font-size: 17px; }
.mobile-search input::placeholder { color: rgba(255,255,255,.86); }
.mobile-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 28px;
    line-height: 1;
}
.mobile-tabs { background: #fff; padding: 0 18px; gap: 28px; border-bottom: 1px solid #e6edf7; }
.mobile-tabs span { padding: 14px 0 12px; color: #7b8492; font-weight: 900; font-size: 17px; }
.mobile-tabs .active { color: #111827; border-bottom: 3px solid #111827; }
.mobile-bottom-nav {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(68px + env(safe-area-inset-bottom));
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    border-top: 1px solid #dce8f7;
    backdrop-filter: blur(18px);
    box-shadow: 0 -12px 30px rgba(15,23,42,.08);
}
.mobile-bottom-nav a {
    position: relative;
    display: grid;
    place-items: center;
    gap: 2px;
    color: #7b8492;
    font-weight: 750;
    font-size: 12px;
}
.mobile-bottom-nav a span { font-size: 24px; line-height: 1; }
.mobile-bottom-nav a.active { color: #1387ff; }
.mobile-bottom-nav em {
    position: absolute;
    top: -1px;
    right: 15%;
    margin: 0;
}

@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 88px minmax(0, 1fr); }
    .sidebar { padding: 12px; }
    .brand span:last-child, .me-info, .nav-menu a { font-size: 0; }
    .nav-menu a span { font-size: 20px; }
    .nav-menu a { justify-content: center; }
    .nav-count { position: absolute; top: 4px; right: 5px; }
    .messenger-layout { grid-template-columns: 330px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    body {
        background: #f4f8ff;
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }
    .app-shell {
        display: block;
        min-height: 100vh;
        padding: 0;
    }
    .sidebar { display: none; }
    .main-content {
        min-height: 100vh;
        border-radius: 0;
        border: 0;
        box-shadow: none;
        background: #fff;
        overflow: visible;
    }
    .page { padding: 0; }
    .desktop-only, .desktop-only-flex, .desktop-search, .desktop-chat-placeholder, .chat-side-list { display: none !important; }
    .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); }
    .zalo-like-mobile-head {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 88px;
        padding: calc(18px + env(safe-area-inset-top)) 14px 14px;
        color: #fff;
        background: linear-gradient(135deg, #0794ff, #0b7cff);
        position: sticky;
        top: 0;
        z-index: 30;
    }
    .mobile-tabs { display: flex; position: sticky; top: calc(88px + env(safe-area-inset-top)); z-index: 25; }
    .chat-list-page .messenger-layout,
    .group-list-page .messenger-layout,
    .messenger-layout,
    .chat-room-layout,
    .group-room-layout {
        display: block;
        min-height: auto;
        padding: 0;
    }
    .conversation-panel,
    .create-group-card,
    .group-info-panel,
    .panel {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
    .panel-pad { padding: 14px; }
    .conversation-row {
        padding: 14px 16px;
        min-height: 82px;
        background: #fff;
    }
    .conversation-row:hover { transform: none; }
    .avatar-md { width: 56px; height: 56px; }
    .group-avatar { width: 56px; height: 56px; border-radius: 18px; }
    .row-main strong { font-size: 18px; letter-spacing: .01em; }
    .row-main small { font-size: 15px; margin-top: 6px; }
    .row-meta { font-size: 14px; min-width: 58px; }
    .active-chat-panel {
        height: 100svh;
        min-height: 0;
        border-radius: 0;
        border: 0;
    }
    .chat-top {
        min-height: 70px;
        padding: calc(12px + env(safe-area-inset-top)) 12px 12px;
        position: sticky;
        top: 0;
        z-index: 30;
        background: #fff;
    }
    .mobile-back {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #eef7ff;
        color: #0b7cff;
        font-size: 34px;
        line-height: 1;
    }
    .messages {
        padding: 14px 12px 12px;
        min-height: 0;
    }
    .bubble { max-width: 86%; }
    .chat-form-attach {
        position: sticky;
        bottom: calc(68px + env(safe-area-inset-bottom));
        padding: 10px;
        gap: 8px;
        background: #fff;
    }
    .chat-form-attach .composer-main { border-radius: 20px; padding: 7px; }
    .chat-form-attach textarea.input { min-height: 44px; max-height: 120px; padding: 8px 10px; }
    .send-btn { min-width: 66px; min-height: 54px; border-radius: 18px; font-size: 15px; }
    .attach-btn.icon-only { padding: 8px 10px; }
    .attach-btn.icon-only b { display: none; }
    .file-selected { max-width: 180px; font-size: 12px; }
    .attachment-preview-card { width: 100%; }
    .image-preview-card img, .attachment-preview-card img { width: 68px; height: 52px; }
    .group-info-panel { max-height: none; }
    .group-room-layout .group-info-panel { display: none; }
    .qr-scan-grid, .qr-invite-layout { grid-template-columns: 1fr; }
    .qr-camera-card { min-height: 360px; border-radius: 0; }
    .qr-scan-panel { border-radius: 0; min-height: auto; }
    .manual-join-row { flex-direction: column; }
    .page-qr-scan .page-header { padding: 18px; }
    .auth-layout { grid-template-columns: 1fr; padding: 14px; }
    .auth-copy { display: none; }
    .form-card { margin: 24px auto; }
}

/* v7.1 QR scanner popup: mobile friendly, Safari/Chrome/Firefox fallback */
body.qr-modal-open { overflow: hidden; }
.qr-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 18px; }
.qr-modal.show { display: flex; }
.qr-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); backdrop-filter: blur(10px); }
.qr-modal-card { position: relative; width: min(560px, 100%); max-height: min(92vh, 860px); overflow: auto; background: #fff; border-radius: 30px; box-shadow: 0 30px 80px rgba(15, 23, 42, .30); border: 1px solid rgba(226, 232, 240, .92); padding: 18px; }
.qr-modal-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.qr-modal-head strong { display: block; font-size: 22px; color: #0f172a; }
.qr-modal-head p { margin: 4px 0 0; color: #64748b; line-height: 1.45; }
.qr-modal-close { width: 42px; height: 42px; border: 0; border-radius: 999px; background: #eef5ff; color: #0f172a; font-size: 28px; line-height: 1; cursor: pointer; }
.qr-reader-wrap { position: relative; min-height: 330px; border-radius: 26px; overflow: hidden; background: linear-gradient(135deg, #0f172a, #075985); display: grid; place-items: center; }
.qr-reader-box { width: 100%; min-height: 330px; display: grid; place-items: center; }
.qr-reader-box video, .qr-native-video { width: 100% !important; height: 330px !important; object-fit: cover; border-radius: 26px; display: block; }
.qr-native-video { display: none; }
.qr-reader-box #qr-shaded-region { border-width: 60px !important; }
.qr-reader-box img { max-width: 100%; }
.modal-frame { pointer-events: none; width: min(260px, 70vw); height: min(260px, 70vw); }
.qr-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.qr-modal-actions .btn { flex: 1; min-width: 130px; }
.qr-file-fallback { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border: 1px dashed #93c5fd; border-radius: 16px; background: #f8fbff; color: #155caa; font-weight: 800; cursor: pointer; }
.qr-file-fallback input { width: 100%; font-weight: 600; color: #334155; }
.qr-scan-status[data-type="error"] { background: #fff1f2; color: #be123c; }
.qr-promo-card { min-height: 360px; padding: 26px; text-align: center; color: #fff; justify-content: center; gap: 12px; }
.qr-promo-card p { color: rgba(255,255,255,.86); max-width: 460px; margin: 0 auto 10px; }
.qr-big-icon { width: 92px; height: 92px; border-radius: 30px; display: grid; place-items: center; margin: 0 auto; font-size: 44px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.v8-qr-panel .btn.big { font-size: 17px; padding: 15px 20px; border-radius: 18px; }
@media (max-width: 720px) {
    .qr-modal { align-items: flex-end; padding: 0; }
    .qr-modal-card { width: 100%; max-height: 94vh; border-radius: 28px 28px 0 0; padding: 16px; }
    .qr-modal-head strong { font-size: 20px; }
    .qr-reader-wrap, .qr-reader-box { min-height: 300px; }
    .qr-reader-box video, .qr-native-video { height: 300px !important; }
    .qr-modal-actions { position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,.86), #fff 35%); padding-top: 10px; }
    .manual-join-row { grid-template-columns: 1fr; }
    .qr-promo-card { min-height: 270px; border-radius: 0; }
}

/* v7.2: QR popup hiển thị đủ tùy chọn trên mobile */
.qr-modal-card-v72 { display: flex; flex-direction: column; gap: 12px; }
.qr-modal-head-v72 { margin-bottom: 2px; }
.qr-quick-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qr-option { min-width: 0; border: 1px solid #dbeafe; border-radius: 18px; background: linear-gradient(180deg, #f8fbff, #fff); padding: 11px 9px; display: grid; gap: 3px; text-align: center; cursor: pointer; color: #0f172a; box-shadow: 0 10px 26px rgba(59,130,246,.08); font-family: inherit; }
.qr-option.active { background: linear-gradient(135deg, #0b7cff, #17a8ff); color: #fff; border-color: transparent; }
.qr-option span { font-size: 23px; line-height: 1; }
.qr-option b { font-size: 13px; line-height: 1.2; }
.qr-option small { font-size: 11px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-option-file input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.modal-manual-top { margin: 0; padding: 12px; border-radius: 18px; background: #f8fbff; border: 1px solid #dbeafe; }
.modal-manual-top label { font-weight: 800; color: #0f172a; display: block; margin-bottom: 8px; }
.qr-reader-wrap-v72 { min-height: 260px; }
.qr-help-note { padding: 11px 12px; border-radius: 16px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; line-height: 1.45; }
.qr-modal-actions-v72 { margin: 0; }

@media (max-width: 720px) {
    .qr-modal-card-v72 { max-height: 96vh; padding: 14px; gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
    .qr-modal-head-v72 p { font-size: 13px; }
    .qr-modal-head-v72 strong { font-size: 18px; }
    .qr-modal-close { width: 38px; height: 38px; font-size: 25px; flex: 0 0 auto; }
    .qr-quick-options { gap: 7px; }
    .qr-option { border-radius: 15px; padding: 9px 5px; }
    .qr-option span { font-size: 20px; }
    .qr-option b { font-size: 12px; }
    .qr-option small { font-size: 10px; }
    .modal-manual-top { display: block; padding: 10px; }
    .modal-manual-top .manual-join-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .modal-manual-top input.input { min-height: 42px; }
    .qr-reader-wrap-v72, .qr-reader-wrap-v72 .qr-reader-box { min-height: 210px !important; }
    .qr-reader-wrap-v72 .qr-reader-box video, .qr-reader-wrap-v72 .qr-native-video { height: 210px !important; }
    .qr-reader-wrap-v72 .modal-frame { width: 172px; height: 172px; }
    .qr-reader-box #qr-shaded-region { border-width: 32px !important; }
    .qr-scan-status { margin: 0; padding: 10px 12px; font-size: 13px; }
    .qr-modal-actions-v72 { position: static !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 !important; background: transparent !important; }
    .qr-modal-actions-v72 .btn { min-width: 0; padding: 11px 10px; }
    .qr-help-note { font-size: 12px; padding: 9px 10px; }
}

@media (max-width: 380px) {
    .qr-reader-wrap-v72, .qr-reader-wrap-v72 .qr-reader-box { min-height: 190px !important; }
    .qr-reader-wrap-v72 .qr-reader-box video, .qr-reader-wrap-v72 .qr-native-video { height: 190px !important; }
    .qr-reader-wrap-v72 .modal-frame { width: 150px; height: 150px; }
    .qr-option small { display: none; }
}

/* ===== LightChat Pro v8: admin mobile-style, no left sidebar + camera-only QR ===== */
.admin-body-v8 {
    background: #f4f8ff;
}
.admin-shell-v8 {
    min-height: 100vh;
    display: block;
    padding: 0;
}
.admin-main-v8 {
    max-width: 1360px;
    margin: 0 auto;
    padding: 18px 18px 92px;
}
.admin-topbar-v8 {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 86px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0794ff, #0b7cff 58%, #0067e8);
    box-shadow: 0 14px 34px rgba(0, 116, 255, .23);
}
.admin-brand-v8 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.admin-brand-mark-v8 {
    width: 52px;
    height: 52px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    font-weight: 950;
    letter-spacing: -.04em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.admin-brand-v8 strong,
.admin-brand-v8 small { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-brand-v8 strong { font-size: 19px; letter-spacing: -.025em; }
.admin-brand-v8 small { opacity: .86; margin-top: 2px; }
.admin-search-v8 {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.admin-search-v8 span { font-size: 22px; }
.admin-search-v8 input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-weight: 800;
}
.admin-search-v8 input::placeholder { color: rgba(255,255,255,.82); }
.admin-actions-v8 { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.admin-actions-v8 a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,.23);
    font-weight: 950;
}
.admin-actions-v8 .logout-v8 { background: rgba(255,255,255,.94); color: #075bbd; }
.admin-main-v8 .admin-page {
    padding: 0;
}
.admin-main-v8 .page-header,
.admin-main-v8 .admin-hero {
    margin: 0 0 16px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
    border: 1px solid #dbeafe;
    box-shadow: 0 18px 45px rgba(37,99,235,.09);
}
.admin-main-v8 .page-header { padding: 22px; }
.admin-main-v8 .admin-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px;
}
.admin-main-v8 .admin-hero::before,
.admin-main-v8 .admin-hero::after { display: none; }
.admin-main-v8 .admin-hero h1,
.admin-main-v8 .page-title h1 {
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -.055em;
}
.admin-main-v8 .admin-quick-actions { gap: 8px; }
.admin-tabs-v8 {
    position: static;
    display: grid;
    grid-template-columns: repeat(9, minmax(96px, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0 0 18px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.admin-tabs-v8 a {
    min-height: 94px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 13px 10px;
    text-align: center;
    background: #fff;
    border: 1px solid #dbeafe;
    color: #334155;
    box-shadow: 0 14px 30px rgba(37,99,235,.08);
    font-weight: 850;
}
.admin-tabs-v8 a span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    font-size: 20px;
    background: #eef7ff;
}
.admin-tabs-v8 a strong { font-size: 13px; line-height: 1.1; }
.admin-tabs-v8 a small { font-size: 11px; line-height: 1.1; }
.admin-tabs-v8 a.active,
.admin-tabs-v8 a:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0b7cff, #17a8ff);
    box-shadow: 0 18px 38px rgba(11,124,255,.24);
}
.admin-tabs-v8 a.active span,
.admin-tabs-v8 a:hover span { background: rgba(255,255,255,.18); }
.admin-tabs-v8 a.active small,
.admin-tabs-v8 a:hover small { color: rgba(255,255,255,.88); }
.admin-main-v8 .admin-stat-grid,
.admin-main-v8 .stat-grid { gap: 14px; }
.admin-main-v8 .stat-card {
    border: 1px solid #dbeafe;
    border-radius: 26px;
    box-shadow: 0 15px 36px rgba(37,99,235,.08);
}
.admin-main-v8 .admin-module-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}
.admin-main-v8 .admin-module-card {
    min-height: 150px;
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 16px 38px rgba(37,99,235,.09);
}
.admin-main-v8 .admin-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.admin-main-v8 .admin-side-stack {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.admin-main-v8 .panel {
    border-radius: 28px;
    border-color: #dbeafe;
    box-shadow: 0 15px 36px rgba(37,99,235,.08);
}
.admin-main-v8 .table-wrap {
    border-radius: 22px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-main-v8 .table th {
    background: #f1f7ff;
    color: #334155;
    white-space: nowrap;
}
.admin-main-v8 .table td { vertical-align: middle; }
.admin-bottom-nav-v8 { display: none; }
.mobile-bottom-nav .logout-mobile { color: var(--danger); }

/* Camera-only QR popup */
.qr-modal-card-v8-camera-only {
    width: min(540px, 100%);
    padding: 16px;
    display: grid;
    gap: 12px;
}
.qr-modal-head-v8 { margin-bottom: 0; }
.qr-reader-wrap-v8,
.qr-reader-wrap-v8 .qr-reader-box {
    min-height: 360px;
}
.qr-reader-wrap-v8 .qr-reader-box video,
.qr-reader-wrap-v8 .qr-native-video {
    height: 360px !important;
}
.qr-modal-actions-v8 {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.v8-camera-only-page {
    min-height: 520px;
    display: grid;
    place-items: center;
}
.v8-camera-only-page .qr-camera-card {
    width: min(620px, 100%);
    min-height: 390px;
    border-radius: 32px;
}

@media (max-width: 1180px) {
    .admin-tabs-v8 { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
    .admin-topbar-v8 { grid-template-columns: minmax(190px, .8fr) minmax(220px, 1fr) auto; }
}
@media (max-width: 760px) {
    body.admin-body-v8 { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .admin-main-v8 { padding: 0 0 calc(86px + env(safe-area-inset-bottom)); max-width: none; }
    .admin-topbar-v8 {
        min-height: 124px;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand actions"
            "search search";
        padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
        border-radius: 0 0 26px 26px;
        align-items: center;
    }
    .admin-brand-v8 { grid-area: brand; }
    .admin-search-v8 { grid-area: search; min-height: 46px; }
    .admin-actions-v8 { grid-area: actions; }
    .admin-actions-v8 a:not(.logout-v8) { display: none; }
    .admin-actions-v8 .logout-v8 { min-height: 42px; padding: 0 12px; font-size: 13px; }
    .admin-brand-mark-v8 { width: 44px; height: 44px; border-radius: 16px; }
    .admin-brand-v8 strong { font-size: 17px; }
    .admin-brand-v8 small { font-size: 12px; }
    .admin-main-v8 .admin-page { padding: 14px; }
    .admin-main-v8 .page-header,
    .admin-main-v8 .admin-hero {
        border-radius: 26px;
        padding: 18px;
        grid-template-columns: 1fr;
    }
    .admin-main-v8 .admin-hero-card { min-width: 0; width: 100%; }
    .admin-tabs-v8 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 14px;
    }
    .admin-tabs-v8 a { min-height: 88px; border-radius: 22px; padding: 11px 6px; }
    .admin-tabs-v8 a span { width: 34px; height: 34px; border-radius: 13px; font-size: 18px; }
    .admin-tabs-v8 a strong { font-size: 12px; }
    .admin-tabs-v8 a small { display: none; }
    .admin-main-v8 .stat-grid,
    .admin-main-v8 .admin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-main-v8 .admin-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-main-v8 .admin-module-card { min-height: 132px; padding: 15px; border-radius: 24px; }
    .admin-main-v8 .admin-module-card span { width: 42px; height: 42px; font-size: 22px; }
    .admin-main-v8 .admin-module-card strong { font-size: 15px; }
    .admin-main-v8 .admin-module-card small { font-size: 12px; }
    .admin-main-v8 .panel { border-radius: 24px; }
    .admin-main-v8 .panel-pad { padding: 14px; }
    .admin-bottom-nav-v8 {
        position: fixed;
        z-index: 80;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(72px + env(safe-area-inset-bottom));
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background: rgba(255,255,255,.96);
        border-top: 1px solid #dce8f7;
        backdrop-filter: blur(18px);
        box-shadow: 0 -12px 30px rgba(15,23,42,.08);
    }
    .admin-bottom-nav-v8 a {
        display: grid;
        place-items: center;
        gap: 2px;
        color: #7b8492;
        font-weight: 800;
        font-size: 12px;
    }
    .admin-bottom-nav-v8 span { font-size: 23px; line-height: 1; }
    .qr-modal { align-items: center; padding: 12px; }
    .qr-modal-card-v8-camera-only { max-height: 94vh; border-radius: 28px; }
    .qr-modal-head-v8 strong { font-size: 19px; }
    .qr-modal-head-v8 p { font-size: 13px; }
    .qr-reader-wrap-v8,
    .qr-reader-wrap-v8 .qr-reader-box { min-height: 62vh !important; }
    .qr-reader-wrap-v8 .qr-reader-box video,
    .qr-reader-wrap-v8 .qr-native-video { height: 62vh !important; }
    .qr-reader-wrap-v8 .modal-frame { width: min(250px, 70vw); height: min(250px, 70vw); }
    .qr-modal-actions-v8 { grid-template-columns: 1fr 1fr; }
    .v8-camera-only-page { min-height: calc(100vh - 220px); padding: 14px; }
    .v8-camera-only-page .qr-camera-card { min-height: 320px; border-radius: 28px; }
}
@media (max-width: 420px) {
    .admin-tabs-v8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-main-v8 .stat-grid,
    .admin-main-v8 .admin-stat-grid,
    .admin-main-v8 .admin-module-grid { grid-template-columns: 1fr 1fr; }
    .admin-main-v8 .stat-card strong { font-size: 26px; }
    .admin-main-v8 .table { font-size: 13px; }
}

/* ===== LightChat Pro v8.1: admin gọn, tìm người dùng, âm thanh tin nhắn ===== */
.admin-topbar-v8 {
    grid-template-columns: minmax(220px, 1fr) auto;
}
.admin-module-card small,
.admin-tabs-v8 a small {
    display: none !important;
}
.admin-module-card {
    justify-items: center;
    text-align: center;
    gap: 10px;
}
.admin-module-card strong,
.admin-tabs-v8 a strong {
    line-height: 1.25;
}
.search-users-page .user-search-panel {
    overflow: hidden;
}
.search-hint {
    margin-bottom: 14px;
}
.search-user-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}
.search-user-row:last-child { border-bottom: 0; }
.compact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.btn.small {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: 13px;
}
.qr-modal-card-v8-camera-only .qr-modal-actions-v8 {
    display: none !important;
}
.qr-modal-card-v8-camera-only {
    gap: 10px;
}
.message-sound-ready::after {
    content: '';
    display: none;
}
@media (max-width: 760px) {
    .admin-topbar-v8 {
        min-height: 76px;
        grid-template-columns: 1fr auto;
        grid-template-areas: "brand actions";
        padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
    }
    .admin-search-v8 { display: none !important; }
    .admin-tabs-v8 a { min-height: 74px; }
    .admin-main-v8 .admin-module-card { min-height: 104px; padding: 13px 10px; }
    .mobile-bottom-nav { grid-template-columns: repeat(6, 1fr) !important; }
    .mobile-bottom-nav a { font-size: 10px; gap: 2px; }
    .mobile-bottom-nav a span { font-size: 21px; }
    .search-users-page .page-mobile-head { display: flex; }
    .search-user-row {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 13px 10px;
    }
    .search-user-row .row-actions {
        grid-column: 2;
        justify-content: flex-start;
        margin-top: 6px;
    }
    .qr-modal-card-v8-camera-only { padding-bottom: 16px; }
    .qr-reader-wrap-v8,
    .qr-reader-wrap-v8 .qr-reader-box { min-height: 70vh !important; }
    .qr-reader-wrap-v8 .qr-reader-box video,
    .qr-reader-wrap-v8 .qr-native-video { height: 70vh !important; }
}
@media (max-width: 420px) {
    .mobile-bottom-nav small { font-size: 10px; }
    .mobile-bottom-nav a span { font-size: 20px; }
    .admin-main-v8 .admin-module-card strong { font-size: 13px; }
}

/* ===== LightChat Pro v8.2: mobile clean pages + live search ===== */
.compact-list-page,
.compact-form-page {
    padding-top: 18px;
}
.list-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.list-page-toolbar h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: -.055em;
    line-height: 1;
}
.list-page-toolbar p {
    margin: 7px 0 0;
    color: var(--muted);
    font-weight: 700;
}
.toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.clean-searchbar {
    margin-bottom: 12px;
}
.clean-list-panel {
    overflow: hidden;
}
.clean-form-panel {
    max-width: 820px;
    margin-inline: auto;
}
.user-search-list.is-loading {
    opacity: .65;
    pointer-events: none;
}
.live-filter-empty {
    margin: 12px;
}
.mobile-icon-btn.as-button {
    border: 0;
    background: transparent;
    cursor: pointer;
}
.mobile-search-fake {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 16px;
    background: rgba(255,255,255,.16);
    color: #fff;
    min-width: 0;
}
@media (max-width: 760px) {
    body:not(.admin-body-v8) .mobile-bottom-nav {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    body:not(.admin-body-v8) .mobile-bottom-nav a { font-size: 10px; }
    .compact-list-page,
    .compact-form-page {
        padding-top: 0;
    }
    .desktop-list-toolbar {
        display: none !important;
    }
    .clean-mobile-head {
        display: flex;
    }
    .clean-list-panel,
    .clean-form-panel {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
    .clean-searchbar {
        display: none !important;
    }
    .group-list-page .conversation-panel,
    .search-users-page .user-search-panel {
        padding-top: 0;
    }
    .group-list-page .conversation-list,
    .search-users-page .user-search-list {
        background: #fff;
    }
    .create-group-page .settings-panel,
    .profile-page .settings-panel {
        margin: 0;
    }
    .profile-page .profile-head {
        padding-top: 4px;
    }
    .search-user-row {
        border-radius: 0;
        background: #fff;
    }
}
.list-page-toolbar h1 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.035em; }

/* v8.3 clean admin, logo upload, QR download, compact auth */
.site-logo-img{width:44px;height:44px;border-radius:14px;object-fit:cover;background:#fff;border:1px solid rgba(148,163,184,.25);box-shadow:0 8px 22px rgba(15,23,42,.08)}
.admin-brand-v8 .site-logo-img,.brand .site-logo-img{flex:0 0 auto}.login-brand-clean .site-logo-img{width:64px;height:64px;border-radius:20px}.login-brand-clean .brand-mark{width:64px;height:64px;border-radius:20px;font-size:20px}
.auth-simple-v83{min-height:100%;display:grid;place-items:center;grid-template-columns:minmax(0,460px);padding:26px}.auth-card-clean{width:min(460px,100%);border-radius:32px;padding:30px;box-shadow:0 24px 80px rgba(30,64,175,.14);border:1px solid #dceaff;background:rgba(255,255,255,.96);backdrop-filter:blur(12px)}.login-brand-clean{display:grid;place-items:center;text-align:center;gap:12px;margin-bottom:16px}.login-brand-clean strong{font-size:22px;color:#0f172a}.auth-card-clean h1{text-align:center;margin:6px 0 18px;font-size:34px;letter-spacing:-.04em}.auth-card-clean .auth-tabs-mini{justify-content:center}.auth-link-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.qr-login-box-clean{padding:0;margin-top:14px;border:0;background:transparent;box-shadow:none}.qr-login-box-clean .qr-login-preview{padding:14px;border-radius:20px;border:1px solid #dbeafe;background:#f8fbff}.admin-home-clean{padding-top:8px}.admin-home-clean .admin-tabs-v8{margin-top:0}.admin-module-grid-clean .admin-module-card{min-height:118px;justify-content:center;text-align:center}.admin-module-grid-clean .admin-module-card small{display:none!important}.compact-admin-stats{margin-top:18px}.admin-compact-page{padding-top:8px}.settings-layout-clean{margin-top:18px}.settings-card-head-clean{display:flex;align-items:center;gap:12px}.settings-card-head-clean h2{margin:0}.settings-card-head-clean p{display:none}.brand-setting-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}.logo-upload-box{display:grid;gap:12px;justify-items:center;padding:18px;border:1px dashed #bfdbfe;border-radius:24px;background:#f8fbff}.logo-preview-box{width:112px;height:112px;border-radius:30px;background:linear-gradient(135deg,#0b74ff,#06b6d4);display:grid;place-items:center;color:#fff;font-size:34px;font-weight:900;overflow:hidden;box-shadow:0 20px 44px rgba(37,99,235,.18)}.logo-preview-box img{width:100%;height:100%;object-fit:cover}.file-logo-btn{cursor:pointer}.switch-row.compact{font-size:13px;padding:8px 10px}.group-created-alert{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.group-created-alert .btn.tiny{padding:8px 12px;border-radius:12px;font-size:13px}.highlight-qr-card{animation:qrPulse 1.2s ease-out 1;outline:3px solid rgba(37,99,235,.16)}@keyframes qrPulse{0%{transform:scale(.985);box-shadow:0 0 0 0 rgba(37,99,235,.28)}100%{transform:scale(1);box-shadow:0 0 0 18px rgba(37,99,235,0)}}
@media(max-width:720px){.auth-only-main{padding:0;background:linear-gradient(180deg,#eaf4ff,#fff)}.auth-simple-v83{min-height:100svh;padding:18px;align-content:center}.auth-card-clean{border-radius:30px;padding:24px 18px;box-shadow:0 20px 60px rgba(15,23,42,.12)}.auth-card-clean h1{font-size:30px;margin-bottom:16px}.login-brand-clean .site-logo-img,.login-brand-clean .brand-mark{width:58px;height:58px;border-radius:18px}.brand-setting-grid{grid-template-columns:1fr}.settings-sticky-actions{position:sticky;bottom:82px;z-index:5}.admin-home-clean .admin-tabs-v8{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.admin-module-grid-clean{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.admin-module-grid-clean .admin-module-card{min-height:104px;border-radius:24px}.admin-module-grid-clean .admin-module-card span{font-size:26px}.compact-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.group-created-alert{display:grid}.group-created-alert .btn{width:100%;text-align:center}.qr-action-row .btn,.qr-action-row button{flex:1 1 130px}}

/* v8.4: clean admin hero, fixed desktop user rows, group members, priority/other folders */
.admin-main-v8 .admin-hero,
.admin-main-v8 .legacy-admin-hero { display:none!important; }
.admin-home-clean{padding-top:0!important}.admin-home-clean .admin-tabs-v8{margin-top:0!important}.admin-main-v8 .admin-page{padding-top:0!important}
.messenger-layout-v84{grid-template-columns:minmax(430px,500px) minmax(0,1fr)}
.conversation-panel-v84{min-width:0;overflow:hidden}.desktop-conversation-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.desktop-conversation-head strong{display:block;font-size:20px;color:#0f172a}.desktop-conversation-head small{display:block;color:#64748b;margin-top:3px;font-weight:700}.conversation-folder-tabs{display:flex;gap:8px;align-items:center;margin:0 0 12px}.conversation-folder-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:999px;background:#eef6ff;color:#1d72e8;font-weight:950}.conversation-folder-tabs a.active{background:linear-gradient(135deg,#0b74ff,#08b8ff);color:#fff;box-shadow:0 12px 30px rgba(11,116,255,.18)}.conversation-folder-tabs em{font-style:normal;font-size:12px;opacity:.85}.conversation-row-wrap{position:relative;border-bottom:1px solid rgba(220,232,247,.9);background:#fff}.conversation-row-wrap:last-child{border-bottom:0}.conversation-row-wrap .conversation-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;width:100%;gap:12px;border-bottom:0!important;padding-right:70px}.conversation-row-wrap .row-meta{white-space:nowrap;min-width:62px;max-width:82px;overflow:hidden;text-overflow:clip;text-align:right;display:grid;justify-items:end;gap:3px}.folder-move-form{position:absolute;right:10px;top:50%;transform:translateY(-50%);margin:0}.folder-move-form button{border:0;border-radius:999px;background:#eef6ff;color:#1478ff;font-weight:950;font-size:11px;padding:7px 9px;cursor:pointer}.folder-move-form button:hover{background:#dcefff}.search-user-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center;width:100%;gap:14px;overflow:hidden}.search-user-row .row-actions,.search-user-row .member-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:max-content}.user-search-panel,.conversation-panel{max-width:100%;overflow:hidden}.group-members-btn{margin-top:10px}.mobile-group-summary{display:none}.group-members-list-all .group-member-row{border-bottom:1px solid #e7eefb;border-radius:0}.group-members-list-all .group-member-row:last-child{border-bottom:0}.auth-card-clean{max-width:460px}.auth-card-clean label{font-size:13px;color:#334155}.auth-card-clean .input{min-height:52px;border-radius:18px}.auth-card-clean .btn.full{min-height:52px;border-radius:18px}.login-brand-clean{margin-bottom:10px}.login-brand-clean strong{font-size:24px}.auth-card-clean h1{font-size:30px;margin:4px 0 16px}.auth-tabs-mini{display:none!important}
@media(max-width:900px){.messenger-layout-v84{grid-template-columns:minmax(370px,440px) minmax(0,1fr)}.conversation-row-wrap .conversation-row{padding-right:66px}.folder-move-form button{font-size:10px;padding:6px 8px}}
@media(max-width:720px){.messenger-layout-v84{display:block}.desktop-conversation-head,.desktop-folder-tabs{display:none}.conversation-folder-tabs.mobile-tabs{display:flex!important;position:sticky;top:calc(86px + env(safe-area-inset-top));z-index:25;background:#fff;margin:0;padding:8px 16px;border-bottom:1px solid #e7eefb}.conversation-folder-tabs.mobile-tabs a{flex:1;padding:12px 10px}.conversation-row-wrap .conversation-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;padding:14px 58px 14px 16px;min-height:82px}.folder-move-form{right:10px}.folder-move-form button{width:38px;height:30px;padding:0;font-size:10px}.conversation-row-wrap .row-meta{min-width:48px;max-width:58px;font-size:12px}.search-user-row{grid-template-columns:auto minmax(0,1fr)!important;padding:14px 16px}.search-user-row .row-actions,.search-user-row .member-actions{grid-column:2;justify-content:flex-start;margin-top:6px}.mobile-group-summary{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #e7eefb}.mobile-group-summary strong{display:block}.mobile-group-summary small{display:block;color:#64748b;margin-top:2px}.group-info-panel .member-list{max-height:280px;overflow:auto}.auth-simple-v83{padding:16px}.auth-card-clean{border-radius:28px;padding:24px 18px}.auth-card-clean h1{font-size:28px}.login-brand-clean strong{font-size:22px}.qr-login-box-clean .qr-login-preview img{width:190px;height:190px}.admin-main-v8 .admin-hero{display:none!important}}
.mobile-tabs.conversation-folder-tabs{display:none!important}
@media(max-width:720px){.mobile-tabs.conversation-folder-tabs{display:flex!important}}

/* ===== LightChat Pro v8.5: phone login/search, fixed mobile group rows, centered QR frame ===== */
.auth-simple-v85{min-height:100%;display:grid;place-items:center;grid-template-columns:minmax(0,430px);padding:24px}.auth-card-phone{border-radius:34px;padding:28px}.auth-card-phone .login-brand-clean{margin-bottom:8px}.auth-card-phone h1{font-size:30px;margin:4px 0 18px;text-align:center}.auth-card-phone .field label{font-size:13px;font-weight:900;color:#334155}.auth-card-phone .input{min-height:54px;border-radius:20px;font-size:16px}.auth-card-phone .btn.full{min-height:54px;border-radius:20px}.auth-card-phone .auth-link-row{margin-top:14px}
.row-main{min-width:0}.row-main strong,.row-main small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-list,.user-search-list{width:100%;min-width:0}.conversation-row,.user-row{min-width:0;box-sizing:border-box}.conversation-row .row-meta{flex-shrink:0}.conversation-panel-v84 .conversation-list{overflow-x:hidden}.conversation-row-wrap .conversation-row{box-sizing:border-box;min-width:0}.desktop-conversation-head,.clean-searchbar{box-sizing:border-box}
.group-list-page .clean-list-panel{overflow:hidden}.group-conversation-list{padding:0;margin:0}.group-conversation-list .group-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:16px 18px;border-bottom:1px solid #e7eefb}.group-conversation-list .group-row .row-meta{min-width:56px;max-width:68px;text-align:right;white-space:normal;color:#64748b;font-weight:800;line-height:1.25}.group-conversation-list .group-row .avatar-wrap{margin:0}.group-conversation-list .group-avatar{width:56px;height:56px;border-radius:18px}.group-list-page .page-mobile-head{box-sizing:border-box}.group-list-page .conversation-panel{width:100%}
.qr-reader-wrap-v8{position:relative!important;overflow:hidden!important;display:grid!important;place-items:center!important;border-radius:28px;background:#0f172a;isolation:isolate}.qr-reader-wrap-v8 .qr-reader-box,#qrReader{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;border:0!important}.qr-reader-wrap-v8 .qr-reader-box>div,#qrReader>div{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important}.qr-reader-wrap-v8 video,.qr-reader-wrap-v8 .qr-native-video,#qrReader video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border:0!important}.qr-reader-wrap-v8 .modal-frame{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:5;width:min(250px,62vw)!important;height:min(250px,62vw)!important;pointer-events:none}#qr-shaded-region,#qrReader__scan_region img,#qrReader__dashboard,#qrReader__dashboard_section,#qrReader__header_message{display:none!important}.qr-modal-card-v8-camera-only{width:min(540px,calc(100vw - 24px));box-sizing:border-box}.qr-scan-status{position:relative;z-index:6}.qr-modal-head-v8 p{display:none}
@media(max-width:720px){.auth-only-main{background:linear-gradient(180deg,#eaf4ff 0%,#fff 58%)}.auth-simple-v85{min-height:100svh;padding:16px;align-content:center}.auth-card-phone{width:100%;border-radius:32px;padding:24px 18px;box-shadow:0 20px 60px rgba(15,23,42,.12)}.auth-card-phone h1{font-size:28px}.auth-card-phone .login-brand-clean .site-logo-img,.auth-card-phone .login-brand-clean .brand-mark{width:60px;height:60px;border-radius:20px}.group-list-page .clean-list-panel{border:0!important;border-radius:0!important;box-shadow:none!important}.group-conversation-list .group-row{padding:16px 14px!important;gap:12px!important;grid-template-columns:64px minmax(0,1fr) 58px!important;min-height:86px}.group-conversation-list .group-avatar{width:56px;height:56px;border-radius:18px}.group-conversation-list .group-row .row-main strong{font-size:18px}.group-conversation-list .group-row .row-main small{font-size:15px}.group-conversation-list .group-row .row-meta{min-width:54px;max-width:58px;font-size:14px;justify-self:end}.qr-modal{padding:12px!important;align-items:center!important}.qr-modal-card-v8-camera-only{max-height:92svh;border-radius:28px;padding:14px;gap:12px}.qr-reader-wrap-v8,.qr-reader-wrap-v8 .qr-reader-box{height:58svh!important;min-height:360px!important}.qr-reader-wrap-v8 .qr-reader-box video,.qr-reader-wrap-v8 .qr-native-video{height:100%!important}.qr-reader-wrap-v8 .modal-frame{width:min(230px,66vw)!important;height:min(230px,66vw)!important}.qr-modal-head-v8 strong{font-size:20px}.qr-scan-status{font-size:13px;padding:11px 12px;margin:0}}
@media(max-width:420px){.group-conversation-list .group-row{grid-template-columns:58px minmax(0,1fr) 54px!important;padding-left:12px!important;padding-right:12px!important}.group-conversation-list .group-avatar{width:52px;height:52px}.qr-reader-wrap-v8,.qr-reader-wrap-v8 .qr-reader-box{height:54svh!important;min-height:320px!important}.qr-reader-wrap-v8 .modal-frame{width:min(205px,64vw)!important;height:min(205px,64vw)!important}}

/* ===== LightChat Pro v8.6: friends, live phone search, centered auth and QR ===== */
body.auth-only-body .auth-only-main{min-height:100svh;display:grid;place-items:center;padding:18px;background:linear-gradient(180deg,#eaf4ff 0%,#fff 62%)}
.auth-simple-v85{width:100%;min-height:auto!important;display:grid!important;place-items:center!important;grid-template-columns:minmax(0,440px)!important;margin:auto;text-align:center}
.auth-card-phone{width:min(440px,100%);margin:auto;text-align:left}.auth-card-phone .login-brand-clean,.auth-card-phone h1{text-align:center;justify-items:center}.auth-card-phone .form-grid{width:100%}.auth-card-phone .auth-link-row{justify-content:center}.auth-card-phone .qr-login-box-clean{text-align:center}
.head-actions-inline{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.chat-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}.chat-top-actions .inline-friend-form{margin:0}.inline-friend-form{display:inline-flex;margin:0}.friend-pill{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:950;background:#eef6ff;color:#1478ff;white-space:nowrap}.friend-pill.accepted{background:#ecfdf5;color:#059669}.friend-pill.pending{background:#fff7ed;color:#ea580c}.friend-pill.blocked{background:#fef2f2;color:#dc2626}.compact-actions .inline-friend-form,.row-actions .inline-friend-form{display:inline-flex}.compact-actions{align-items:center}.conversation-inline-actions{position:absolute;right:58px;bottom:8px;display:flex;gap:6px;z-index:3}.conversation-inline-actions:empty{display:none}.conversation-inline-actions .btn,.conversation-inline-actions .friend-pill{min-height:24px;padding:4px 8px;font-size:10px}.conversation-row-wrap .conversation-row{padding-bottom:18px}.friends-panel .section-title-mini,.section-title-mini{margin:18px 0 10px;font-size:15px;color:#1d72e8;text-transform:uppercase;letter-spacing:.12em}.friend-list{border:1px solid #e7eefb;border-radius:22px;overflow:hidden;background:#fff}.friend-row{border-bottom:1px solid #e7eefb}.friend-row:last-child{border-bottom:0}.user-search-list.is-loading,.conversation-list.is-loading{opacity:.62;pointer-events:none}.group-conversation-list .group-row{margin:0!important;border-radius:0!important}.group-list-page .clean-list-panel{padding-left:0!important;padding-right:0!important}.group-list-page .desktop-list-toolbar,.group-list-page .desktop-search{margin-left:18px;margin-right:18px}.qr-reader-wrap-v8{display:grid!important;place-items:center!important}.qr-reader-wrap-v8 .modal-frame{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;margin:0!important}.qr-reader-wrap-v8 .scan-frame span{position:absolute!important}.qr-reader-wrap-v8 .scan-frame span:nth-child(1){left:0!important;top:0!important}.qr-reader-wrap-v8 .scan-frame span:nth-child(2){right:0!important;top:0!important}.qr-reader-wrap-v8 .scan-frame span:nth-child(3){left:0!important;bottom:0!important}.qr-reader-wrap-v8 .scan-frame span:nth-child(4){right:0!important;bottom:0!important}
@media(max-width:760px){.auth-card-phone{padding:26px 18px!important;border-radius:30px!important}.auth-card-phone .field{text-align:left}.auth-card-phone h1{font-size:28px!important}.zalo-like-mobile-head .mobile-search{min-width:0}.chat-top-actions{margin-left:0}.chat-top-actions .friend-pill,.chat-top-actions .inline-friend-form .btn{font-size:10px;padding:5px 7px;min-height:26px}.conversation-inline-actions{right:50px;bottom:6px}.conversation-inline-actions .friend-pill{display:none}.conversation-row-wrap .conversation-row{padding-right:58px!important;padding-bottom:20px!important}.search-user-row .row-actions,.search-user-row .member-actions{min-width:0}.search-user-row .row-actions .btn,.search-user-row .member-actions .btn,.search-user-row .inline-friend-form .btn{font-size:12px;padding:8px 10px}.group-list-page .desktop-list-toolbar,.group-list-page .desktop-search{margin-left:14px;margin-right:14px}.group-conversation-list .group-row{width:100%!important;max-width:100%!important}.qr-reader-wrap-v8{width:100%!important}.qr-reader-wrap-v8 .modal-frame{width:min(220px,62vw)!important;height:min(220px,62vw)!important}}


/* ===== LightChat Pro v8.8: safe image fit + group QR visibility ===== */
.bubble {
    box-sizing: border-box;
    overflow: hidden;
}
.chat-image-link {
    display: block;
    max-width: 100%;
    overflow: hidden;
    border-radius: 18px;
}
.chat-image,
.msg.me .chat-image,
.bubble .chat-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(420px, 58vh) !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 16px;
    background: rgba(255,255,255,.96);
}
.file-card,
.bubble .file-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.file-card span:last-child,
.file-card strong,
.file-card small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-qr-page .qr-code-img {
    width: min(320px, 72vw);
    height: min(320px, 72vw);
}
.group-qr-page .group-qr-card {
    max-width: 760px;
    margin: 0 auto;
}
.mobile-qr-chip {
    display: none;
}
.group-created-mobile-qr {
    display: none;
}
@media (max-width: 720px) {
    .bubble { max-width: 84%; }
    .chat-image,
    .msg.me .chat-image,
    .bubble .chat-image {
        max-height: min(360px, 46vh) !important;
    }
    .mobile-qr-chip {
        display: inline-flex;
        min-width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        border-radius: 999px;
        background: #eef7ff;
        color: #0b7cff;
        font-weight: 950;
        text-decoration: none;
    }
    .group-created-mobile-qr {
        display: block;
        padding: 12px;
        background: #f0f8ff;
        border-bottom: 1px solid #dbeafe;
    }
    .group-created-mobile-qr .qr-action-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}


/* ===== LightChat Pro v8.9: group member access + cleaner admin dashboard ===== */
.admin-home-clean .admin-module-grid,
.admin-home-clean .admin-module-grid-clean {
    display: none !important;
}
.admin-home-clean .admin-dashboard-grid {
    margin-top: 18px;
}
.group-list-item {
    border-bottom: 1px solid rgba(220,232,247,.95);
    background: #fff;
}
.group-list-item:last-child { border-bottom: 0; }
.group-list-item .conversation-row {
    border-bottom: 0 !important;
}
.group-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 12px 84px;
    margin-top: -4px;
}
.group-list-actions a,
.tiny-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef6ff;
    color: #1677f2;
    font-weight: 900;
    font-size: 12px;
    text-decoration: none;
}
.group-list-actions a:hover, .tiny-link:hover { background: #ddecff; }
.group-members-clean .list-page-toolbar h1 { margin-bottom: 4px; }
@media (max-width: 720px) {
    .group-list-actions {
        padding-left: 78px;
        padding-right: 10px;
        padding-bottom: 10px;
        gap: 7px;
    }
    .group-list-actions a {
        min-height: 28px;
        padding: 5px 9px;
        font-size: 11px;
    }
}

/* v9.0 clean admin headers + centered auth */
.admin-main-v8 .page-header,
.admin-main-v8 .admin-hero,
.admin-main-v8 .compact-admin-hero,
.admin-main-v8 .compact-hero {
    display: none !important;
}
.admin-compact-back {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
body.auth-only-body {
    min-height: 100svh !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(180deg, #eaf4ff 0%, #ffffff 62%) !important;
}
body.auth-only-body .auth-only-main {
    width: 100% !important;
    min-height: 100svh !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}
body.auth-only-body .auth-layout,
body.auth-only-body .auth-simple-v85,
body.auth-only-body .admin-auth-clean {
    width: min(460px, 100%) !important;
    max-width: 460px !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
body.auth-only-body .auth-card,
body.auth-only-body .auth-card-phone {
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}
.auth-link-row .badge[href$="admin/"],
.auth-link-row .badge[href$="../login.php"] {
    display: none !important;
}
.admin-page { padding-top: 8px; }
.admin-page > .admin-tabs-v8:first-child { margin-top: 0; }
@media (max-width: 720px) {
    body.auth-only-body .auth-only-main { padding: 16px !important; }
    body.auth-only-body .auth-layout,
    body.auth-only-body .auth-simple-v85,
    body.auth-only-body .admin-auth-clean { width: 100% !important; }
}


/* v9.1.0 overrides */
body.auth-only-body .auth-only-main{min-height:100vh;display:grid;place-items:center;padding:24px;}
body.auth-only-body .auth-layout{min-height:auto!important;display:grid!important;place-items:center!important;grid-template-columns:minmax(0,460px)!important;justify-content:center!important;align-content:center!important;margin:0 auto;}
body.auth-only-body .auth-card-clean{margin:0 auto;text-align:center;}
body.auth-only-body .auth-card-clean .form-grid,
body.auth-only-body .auth-card-clean .field{text-align:left;}
.admin-page .admin-hero,.admin-page .compact-admin-hero,.admin-page .legacy-admin-hero{display:none!important;}
.admin-page .hero-copy p,.admin-page .admin-hero p,.admin-page .section-head p{display:none!important;}
.group-qr-page .qr-invite-layout{grid-template-columns:minmax(260px,320px) minmax(0,1fr)!important;align-items:center!important;}
.group-qr-page .qr-code-box{width:min(320px,72vw);aspect-ratio:1/1;border-radius:24px;padding:14px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(22,72,150,.12);display:grid;place-items:center;overflow:hidden;}
.group-qr-page .qr-code-img{display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:1/1;object-fit:contain;border-radius:12px;padding:0!important;background:transparent!important;border:0!important;image-rendering:auto;}
.group-members-list-all .group-member-row .member-actions{max-width:44%;} 
.search-user-row .row-main small.muted,.group-member-row .row-main small.muted{color:#64748b;}
.user-row .private-contact,.user-row .phone-hint{display:none!important;}
@media (max-width: 720px){
  body.auth-only-body .auth-only-main{padding:16px;}
  body.auth-only-body .auth-layout{grid-template-columns:1fr!important;width:100%;}
  .group-qr-page .qr-invite-layout{grid-template-columns:1fr!important;}
  .group-qr-page .qr-code-box{width:min(260px,74vw);margin:0 auto;}
}


/* v9.2.0 mobile navy redesign + compact group members */
:root{
    --primary:#0057b8;
    --primary-2:#003f8f;
    --primary-soft:#e5f0ff;
    --bg:#eef6ff;
    --text:#0b1f36;
    --muted:#607089;
    --line:#d8e7fb;
    --shadow:0 22px 65px rgba(0,63,143,.14);
    --shadow-soft:0 12px 28px rgba(0,63,143,.09);
}
.brand-mark,.avatar,.group-avatar,.btn,.conversation-folder-tabs a.active{background:linear-gradient(135deg,#0057b8,#003f8f)!important;}
.zalo-like-mobile-head{background:linear-gradient(135deg,#0057b8 0%,#006bd6 52%,#003f8f 100%)!important;box-shadow:0 12px 32px rgba(0,63,143,.18);}
.mobile-search,.mobile-search-fake{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important;box-shadow:none!important;}
.mobile-search input,.mobile-search input::placeholder,.mobile-search-fake strong{color:#fff!important;}
.mobile-back.light{background:rgba(255,255,255,.92)!important;color:#0057b8!important;}
.mobile-bottom-nav{border-top:1px solid #d8e7fb!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px);box-shadow:0 -16px 44px rgba(0,63,143,.1);}
.mobile-bottom-nav a{color:#74839a!important;font-weight:900;}
.mobile-bottom-nav a.active{color:#0057b8!important;}
.mobile-bottom-nav .nav-svg{width:28px;height:28px;display:grid;place-items:center;margin:0 auto 3px;color:currentColor;}
.mobile-bottom-nav .nav-svg svg{width:25px;height:25px;display:block;}
.mobile-bottom-nav small{font-size:11px;color:inherit!important;}
.group-members-clean{border-radius:0!important;border:0!important;box-shadow:none!important;background:#fff!important;padding:0!important;}
.group-members-clean .desktop-list-toolbar{padding:16px 18px;margin:0;border-bottom:1px solid #e5eefc;}
.mobile-group-summary{min-height:70px!important;padding:10px 16px!important;background:#fff;border-bottom:1px solid #e6effb;}
.group-members-list-all{background:#fff;}
.group-members-list-all .group-member-row{min-height:72px!important;padding:10px 16px!important;border-bottom:1px solid #e6effb!important;background:#fff!important;border-radius:0!important;box-shadow:none!important;}
.group-member-row .avatar{width:48px!important;height:48px!important;border-radius:17px!important;font-size:15px!important;}
.group-member-row .row-main{gap:1px!important;min-width:0;}
.group-member-row .row-main strong{font-size:16px!important;line-height:1.16;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.group-member-row .row-main small{font-size:13px!important;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.group-member-row .row-main small.muted{display:none!important;}
.group-member-row .member-actions-compact{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:nowrap!important;min-width:0!important;max-width:none!important;}
.group-member-row .role-badge{font-size:10px!important;padding:6px 8px!important;border-radius:999px!important;text-transform:capitalize;}
.group-member-row .member-chat-btn,.group-member-row .compact-friend-form .btn,.group-member-row .compact-pill{font-size:11px!important;padding:7px 9px!important;border-radius:12px!important;min-height:30px!important;white-space:nowrap!important;}
.group-member-row .compact-friend-form{margin:0!important;display:inline-flex!important;}
.group-member-row .compact-pill{display:inline-flex;align-items:center;background:#eaf3ff;color:#0057b8;font-weight:950;}
.group-member-row .compact-pill.accepted{background:#ecfdf5;color:#047857;}
.group-member-row .compact-pill.pending{background:#fff7ed;color:#c2410c;}
@media(max-width:720px){
    body{background:#fff!important;}
    .main-content{border-radius:0!important;border:0!important;box-shadow:none!important;background:#fff!important;}
    .page{padding:0!important;}
    .group-members-page{padding-bottom:82px!important;}
    .group-members-list-all .group-member-row{display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;}
    .group-members-list-all .group-member-row .member-actions{grid-column:auto!important;margin-top:0!important;}
    .group-member-row .role-badge{display:none!important;}
    .group-member-row .compact-pill.accepted{display:none!important;}
    .group-member-row .member-actions-compact{max-width:142px!important;overflow:hidden;}
    .group-member-row .member-chat-btn,.group-member-row .compact-friend-form .btn,.group-member-row .compact-pill{font-size:10.5px!important;padding:7px 8px!important;}
    .zalo-like-mobile-head{min-height:84px!important;padding:calc(10px + env(safe-area-inset-top)) 16px 14px!important;border-radius:0!important;}
}


/* v9.2.0 mobile + icon + theme refresh */
:root {
    --primary: #0b3d91;
    --primary-2: #1d4ed8;
    --primary-soft: #e8efff;
    --bg: #eff4fb;
    --text: #0f172a;
    --muted: #64748b;
    --line: #d7e3f4;
    --shadow: 0 24px 60px rgba(7, 44, 117, .14);
    --shadow-soft: 0 12px 28px rgba(7, 44, 117, .08);
}
body {
    background: linear-gradient(180deg, #f6f9ff 0%, #eef4fb 100%);
}
.nav-svg{display:inline-block;vertical-align:middle;flex:none}
.nav-menu a span,.mobile-bottom-nav a span,.admin-bottom-nav-v8 a span,.admin-tabs-v8 a span,.admin-actions-v8 a svg{display:inline-flex;align-items:center;justify-content:center}
.admin-actions-v8 a{gap:8px}
.mobile-bottom-nav a span,.admin-bottom-nav-v8 a span{width:22px;height:22px;color:#34517d}
.mobile-bottom-nav a.active span,.admin-bottom-nav-v8 a.active span{color:var(--primary)}
.admin-tabs-v8 a span{background:rgba(11,61,145,.08)!important;color:var(--primary);width:42px;height:42px;border-radius:14px}
.group-members-page .group-members-list-all{display:grid;gap:10px}
.group-member-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;padding:12px 14px!important;border:1px solid #e2ebf7!important;border-radius:22px!important;background:#fff!important;box-shadow:0 8px 18px rgba(15,23,42,.04);min-height:auto!important}
.group-member-row .avatar-wrap{align-self:start}
.group-member-row .row-main{display:grid;gap:3px;min-width:0}
.group-member-row .row-main strong{font-size:17px;line-height:1.2}
.group-member-row .row-main small{line-height:1.25;margin:0}
.group-member-row .member-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:290px}
.group-member-row .badge,.friend-pill,.group-member-row .btn.small,.group-member-row .inline-friend-form .btn{min-height:32px;padding:7px 11px!important;border-radius:999px!important;font-size:12px!important;font-weight:800}
.friend-pill{display:inline-flex;align-items:center;justify-content:center;background:#eef4ff;color:#0b3d91}
.friend-pill.accepted{background:#e7f8ef;color:#0f8a55}.friend-pill.pending{background:#fff5e6;color:#d97706}.friend-pill.blocked{background:#ffe7ef;color:#e11d48}
.group-members-clean .mobile-group-summary{padding:10px 14px;border-radius:18px;background:linear-gradient(135deg,#f4f8ff,#fff);margin-bottom:10px}
.clean-mobile-head{padding:14px 16px 12px!important;background:linear-gradient(135deg,#06398b,#1d4ed8)!important;box-shadow:0 10px 28px rgba(11,61,145,.18)}
.clean-mobile-head .mobile-back{width:44px;height:44px;border-radius:50%;background:#fff;color:#0b3d91;display:grid;place-items:center;font-size:26px;font-weight:900;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.clean-mobile-head .mobile-search-fake{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.18);color:#fff!important;backdrop-filter:blur(6px);min-height:52px;padding:0 18px;border-radius:999px}
.clean-mobile-head .mobile-search-fake strong{color:#fff;font-size:18px;letter-spacing:-.02em}
.mobile-bottom-nav{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(18px);border-top:1px solid #d9e6f7;box-shadow:0 -10px 26px rgba(15,23,42,.06)}
.mobile-bottom-nav a{color:#6b7b93!important;padding:10px 4px 12px!important}
.mobile-bottom-nav a.active{color:var(--primary)!important}
.mobile-bottom-nav a.active span{background:#e8efff;border-radius:14px;width:34px;height:34px}
.mobile-bottom-nav small{font-weight:700;letter-spacing:-.01em}
.mobile-bottom-nav em{top:6px;right:18px}
.admin-topbar-v8{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;box-shadow:0 16px 40px rgba(11,61,145,.18)}
.admin-brand-v8 span small,.admin-actions-v8 a{color:rgba(255,255,255,.88)!important}
.admin-actions-v8 a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px}
.admin-actions-v8 a:hover{background:rgba(255,255,255,.18)}
.admin-tabs-v8 a.active,.admin-tabs-v8 a:hover{background:linear-gradient(135deg,var(--primary),var(--primary-2))!important}
.admin-tabs-v8 a.active span,.admin-tabs-v8 a:hover span{background:rgba(255,255,255,.16)!important;color:#fff}
@media (max-width:720px){
  .page{padding:16px}
  .panel{border-radius:22px}
  .group-member-row{grid-template-columns:auto minmax(0,1fr)!important;padding:12px!important}
  .group-member-row .member-actions{grid-column:2;justify-content:flex-start;max-width:100%;gap:6px}
  .group-member-row .row-main strong{font-size:16px}
  .group-member-row .row-main small{font-size:13px}
  .group-member-row .badge,.friend-pill,.group-member-row .btn.small,.group-member-row .inline-friend-form .btn{min-height:30px;padding:6px 10px!important;font-size:11px!important}
  .mobile-bottom-nav a span{width:20px;height:20px}
  .mobile-bottom-nav a.active span{width:32px;height:32px}
  .app-shell{padding:0;gap:0}.main-content{border-radius:0;border-left:0;border-right:0;min-height:100vh}
}


/* v9.3.0 display fixes + global theme */
:root{--primary:var(--admin-primary,#0b3d91);--primary-2:var(--admin-secondary,#1d4ed8);--primary-soft:#e8efff;}
.zalo-like-mobile-head{background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;}
.mobile-search{height:52px!important;min-height:52px!important;border-radius:999px!important;padding:0 14px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.24)!important;background:rgba(255,255,255,.16)!important;box-shadow:none!important;}
.mobile-search input{height:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:#fff!important;font-size:16px!important;padding:0!important;}
.mobile-search input::placeholder{color:rgba(255,255,255,.86)!important;}
.mobile-search .search-svg,.mobile-icon-btn .nav-svg{color:#fff!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.mobile-icon-btn{width:48px!important;height:48px!important;border-radius:50%!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;font-size:0!important;display:grid!important;place-items:center!important;}
.mobile-icon-btn:hover{background:rgba(255,255,255,.18)!important;}
.admin-actions-v8 .logout-v8{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important;box-shadow:none!important;}
.admin-actions-v8 .logout-v8 span{color:#fff!important;}
.admin-actions-v8 .logout-v8 .nav-svg{color:#fff!important;}
.btn .nav-svg,.toolbar-actions .nav-svg{vertical-align:-4px;margin-right:4px;}
.theme-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px;}
.color-picker-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"swatch title" "swatch code";align-items:center;gap:4px 12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#f8fbff,#fff);cursor:pointer;}
.color-picker-card input{grid-area:swatch;width:54px;height:54px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:16px;overflow:hidden;}
.color-picker-card input::-webkit-color-swatch-wrapper{padding:0}.color-picker-card input::-webkit-color-swatch{border:0;border-radius:16px}.color-picker-card input::-moz-color-swatch{border:0;border-radius:16px}
.color-picker-card span{grid-area:title;font-weight:900;color:#0f172a}.color-picker-card b{grid-area:code;font-size:13px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;}
.color-picker-card:focus-within{outline:3px solid color-mix(in srgb,var(--primary) 18%,transparent);border-color:var(--primary);}
.mobile-bottom-nav a.active span{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 12%,white)!important;}
.mobile-bottom-nav a.active{color:var(--primary)!important;}
@media(max-width:720px){.zalo-like-mobile-head{gap:10px!important}.mobile-search{flex:1 1 auto!important;min-width:0!important}.theme-color-grid{grid-template-columns:1fr}.admin-actions-v8 .logout-v8{min-width:0!important}.admin-actions-v8 .logout-v8 span{display:inline!important}}


/* v9.4.0 system notifications + clean settings */
.login-copy-setting{display:none!important;}
.profile-logout-btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;width:max-content;}
.system-announcement-popup{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px;}
.system-announcement-popup[hidden]{display:none!important;}
.system-announcement-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(8px);opacity:0;transition:.18s ease;}
.system-announcement-card{position:relative;z-index:1;width:min(520px,100%);border-radius:30px;background:#fff;border:1px solid #dbe7f8;box-shadow:0 36px 90px rgba(2,8,23,.28);padding:28px;transform:translateY(12px) scale(.98);opacity:0;transition:.2s ease;}
.system-announcement-popup.open .system-announcement-backdrop{opacity:1;}
.system-announcement-popup.open .system-announcement-card{opacity:1;transform:translateY(0) scale(1);}
.system-announcement-close{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;background:#eef4ff;color:#0b3d91;font-size:30px;line-height:1;cursor:pointer;display:grid;place-items:center;}
.system-announcement-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 16px 36px rgba(11,61,145,.18);margin-bottom:14px;}
.system-announcement-card h2{margin:0 46px 10px 0;font-size:clamp(24px,4vw,34px);letter-spacing:-.04em;color:#0f172a;}
.system-announcement-card p{margin:0 0 20px;color:#475569;line-height:1.65;font-weight:650;}
.system-announcement-card.level-danger .system-announcement-icon{background:linear-gradient(135deg,#dc2626,#fb7185)}
.system-announcement-card.level-warning .system-announcement-icon{background:linear-gradient(135deg,#d97706,#f59e0b)}
.system-announcement-card.level-success .system-announcement-icon{background:linear-gradient(135deg,#059669,#10b981)}
.notifications-list{display:grid;gap:12px;}
.notification-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:16px;border:1px solid #dbe7f8;border-radius:24px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.05);}
.notification-icon{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:#e8efff;color:var(--primary);}
.notification-card h2{margin:0 0 6px;font-size:20px;letter-spacing:-.02em;}
.notification-card p{margin:0 0 8px;color:#475569;line-height:1.55;}
.notification-card small{font-weight:800;color:#64748b;}
@media(max-width:720px){
  .profile-head{align-items:center;}
  .profile-logout-btn{width:100%;justify-content:center;margin-top:12px;}
  .system-announcement-card{border-radius:26px;padding:24px 18px;}
  .system-announcement-close{right:12px;top:12px;}
  .notifications-page .desktop-list-toolbar{display:none;}
  .notifications-panel{border:0;border-radius:0;box-shadow:none;padding:14px;background:transparent;}
}


/* v9.5.0 system notifications fix */
.system-announcement-actions{display:flex;gap:10px;align-items:center;justify-content:stretch;margin-top:14px}.system-announcement-actions .btn{flex:1}.mobile-bottom-nav a em{position:absolute;top:7px;right:16px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:900;line-height:18px;text-align:center}.notifications-list{display:grid;gap:12px}.notification-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:22px;border:1px solid #dbe7f6;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.05)}.notification-card h2{margin:0 0 6px;font-size:18px}.notification-card p{margin:0 0 8px;color:#334155;line-height:1.5}.notification-icon{width:42px;height:42px;border-radius:16px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}


/* v9.6.0 QR icon + theme text + notification badge fix */
.zalo-like-mobile-head,
.zalo-like-mobile-head a,
.zalo-like-mobile-head button,
.zalo-like-mobile-head .mobile-icon-btn,
.zalo-like-mobile-head .mobile-search,
.zalo-like-mobile-head .mobile-search input,
.zalo-like-mobile-head .mobile-search input::placeholder,
.zalo-like-mobile-head .mobile-search span,
.zalo-like-mobile-head .mobile-search-fake,
.zalo-like-mobile-head .mobile-search-fake * {
    color: #fff !important;
}
.zalo-like-mobile-head .nav-svg,
.mobile-icon-btn .nav-svg,
.mobile-search-fake .nav-svg,
.qr-big-icon .nav-svg {
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none;
}
.zalo-like-mobile-head .mobile-icon-btn {
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(10px);
}
.zalo-like-mobile-head .mobile-search {
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 16px !important;
}
.zalo-like-mobile-head .mobile-search input {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.btn:not(.secondary):not(.danger),
.admin-topbar-v8,
.admin-topbar-v8 *,
.admin-tabs-v8 a.active,
.admin-tabs-v8 a.active *,
.mobile-bottom-nav a.active span,
.mobile-bottom-nav a.active span * {
    color: #fff !important;
}
.btn:not(.secondary):not(.danger) .nav-svg,
.admin-tabs-v8 a.active .nav-svg,
.admin-topbar-v8 .nav-svg {
    color: #fff !important;
}
.mobile-bottom-nav a em,
.mobile-bottom-nav a.active em,
.mobile-bottom-nav .system-count {
    display: inline-grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
    background: #ef4444 !important;
    z-index: 5;
}
.mobile-bottom-nav a em:empty { display: none !important; }
.mobile-bottom-nav a.active .system-count:not(:empty) { display: inline-grid !important; }
.theme-color-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.color-picker-card {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(135deg,#f8fbff,#fff);
}
.color-picker-card input[type="color"] {
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
}
.color-picker-card input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-card input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 18px; }
.color-picker-card input[type="color"]::-moz-color-swatch { border: 0; border-radius: 18px; }
.color-picker-card span {
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}
.color-picker-card b {
    color: #0f172a;
    font-size: 15px;
    letter-spacing: .04em;
}
@media (max-width: 720px) {
    .theme-color-grid { grid-template-columns: 1fr; }
    .zalo-like-mobile-head .mobile-icon-btn .nav-svg { width: 24px; height: 24px; }
}


/* v9.7.0 notification/read/theme fixes */
.zalo-like-mobile-head,
.zalo-like-mobile-head *,
.zalo-like-mobile-head input,
.zalo-like-mobile-head input::placeholder,
.admin-topbar-v8,
.admin-topbar-v8 *,
.btn:not(.secondary):not(.danger),
.btn:not(.secondary):not(.danger) * {
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}
.mobile-search{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.14)!important;box-shadow:none!important}
.mobile-icon-btn{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.20)!important;color:#fff!important}
.mobile-icon-btn .nav-svg{opacity:1!important;color:#fff!important;filter:none!important}
.logout-v8,.logout-v8 *{color:#fff!important}.logout-v8{opacity:1!important;background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.2)!important}
.notifications-list{display:grid;gap:12px}.notification-card{cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px;border:1px solid #dbe6f5;border-radius:22px;background:#fff;box-shadow:0 12px 26px rgba(15,23,42,.05);transition:.16s ease}.notification-card:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(15,23,42,.08)}.notification-card.is-unread{border-color:#b9d5ff;background:linear-gradient(135deg,#f8fbff,#fff)}.notification-card.is-read{opacity:.82}.notification-card h2{margin:0 0 6px;font-size:18px;line-height:1.25}.notification-summary{margin:0 0 8px!important;color:#334155;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.announcement-date-line{display:block;color:#64748b;font-weight:800}.notification-icon{width:46px;height:46px;border-radius:16px;background:#eaf1ff;color:var(--primary);display:grid;place-items:center}.notification-icon.large{width:58px;height:58px;border-radius:20px}.notification-new-dot{align-self:start;padding:5px 9px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:900;font-style:normal}.notification-detail-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px}.notification-detail-modal[hidden]{display:none}.notification-detail-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(8px)}.notification-detail-card{position:relative;width:min(560px,100%);max-height:min(78vh,720px);overflow:auto;background:#fff;border:1px solid #dbe6f5;border-radius:28px;box-shadow:0 30px 90px rgba(15,23,42,.28);padding:24px;display:grid;gap:12px}.notification-detail-card h2{margin:0;font-size:26px;line-height:1.15}.notification-detail-body{font-size:16px;line-height:1.65;color:#1e293b}.notification-detail-close{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:50%;background:#eef4ff;color:#0f172a;font-size:26px;font-weight:900}.folder-choice{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.inline-folder-form{display:inline-flex;margin:0}.system-announcement-card .announcement-date-line{margin-top:8px}
@media(max-width:720px){.notification-card{grid-template-columns:auto minmax(0,1fr);padding:14px;border-radius:20px}.notification-new-dot{grid-column:2;width:max-content}.notification-detail-card{border-radius:26px;padding:22px 18px}.notification-detail-card h2{font-size:22px}.notification-summary{-webkit-line-clamp:2}.folder-choice{width:100%;margin-top:4px}}


/* v9.8.0 profile and member layout polish */
.btn, .btn:visited, .btn:hover,
.btn.secondary, .btn.secondary:visited, .btn.secondary:hover,
.btn.danger, .btn.warning,
.action-chip,
.folder-choice .btn,
.inline-folder-form .btn,
.inline-friend-form .btn,
.member-chat-btn,
.profile-chat-btn {
    color: #fff !important;
}
.btn.secondary,
.folder-choice .btn,
.inline-folder-form .btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
    border-color: transparent !important;
}
.btn.danger, .inline-friend-form .btn.danger { background: linear-gradient(135deg,#ef4444,#dc2626)!important; }
.btn.warning, .inline-friend-form .btn.warning { background: linear-gradient(135deg,#f59e0b,#ea580c)!important; }
.friend-pill.action-chip,
.friend-pill.accepted,
.friend-pill.pending,
.friend-pill.blocked,
.role-badge {
    color: #fff !important;
    border: 0 !important;
}
.friend-pill.accepted { background: linear-gradient(135deg,#16a34a,#059669)!important; }
.friend-pill.pending { background: linear-gradient(135deg,#f97316,#ea580c)!important; }
.friend-pill.blocked { background: linear-gradient(135deg,#ef4444,#dc2626)!important; }
.role-badge { background: linear-gradient(135deg,#0b3d91,#1d4ed8)!important; }
.relationship-actions,
.folder-choice {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.inline-friend-form,
.inline-folder-form { margin: 0 !important; display: inline-flex !important; }
.action-chip {
    min-height: 34px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(11,61,145,.16);
}
.profile-view-page-v98 { display: grid; place-items: start center; }
.profile-card-v98 { width: min(760px, 100%); padding: 22px !important; }
.profile-head-v98 {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 18px !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}
.profile-avatar-v98 .avatar-lg { width: 104px !important; height: 104px !important; border-radius: 30px !important; font-size: 34px !important; }
.profile-main-v98 { min-width: 0; display: grid; gap: 8px; }
.profile-main-v98 h1 {
    margin: 0 !important;
    font-size: clamp(28px, 4.2vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
.profile-phone-v98 {
    font-size: 21px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: .02em;
    white-space: nowrap;
}
.profile-meta-v98 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.profile-meta-v98 .badge,
.profile-meta-v98 .pill,
.muted-badge {
    border-radius: 999px !important;
    padding: 7px 12px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}
.muted-badge { background:#eef4ff!important;color:#475569!important; }
.profile-bio-v98 { margin: 0 !important; max-width: 560px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.profile-actions-v98 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    min-width: 220px;
    max-width: 310px;
}
.profile-actions-v98 .relationship-actions { justify-content: flex-end !important; }
.profile-joined-v98 { color:#64748b; font-weight:800; margin-top:10px; padding-top:12px; border-top:1px solid #e2ebf7; }
.group-members-list-all { gap: 8px !important; }
.group-members-list-all .group-member-row {
    min-height: 66px !important;
    padding: 10px 12px !important;
    grid-template-columns: 52px minmax(0,1fr) auto !important;
    border-radius: 18px !important;
    border: 1px solid #e2ebf7 !important;
    box-shadow: 0 7px 18px rgba(15,23,42,.035) !important;
}
.group-member-row .avatar,
.group-member-row .avatar-md { width: 48px !important; height: 48px !important; border-radius: 16px !important; font-size: 15px !important; }
.member-main-v98 { min-width: 0 !important; display: grid !important; gap: 2px !important; }
.member-main-v98 strong {
    font-size: 16px !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
.member-main-v98 small {
    font-size: 13px !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
.member-meta-line { display:flex; align-items:center; gap:6px; min-width:0; }
.member-meta-line em { font-style:normal; font-size:11px; font-weight:800; color:#64748b; white-space:nowrap; }
.member-meta-line .role-badge { padding:5px 8px!important; border-radius:999px!important; line-height:1!important; text-transform:capitalize; }
.member-actions-compact { display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:6px!important; flex-wrap:nowrap!important; min-width:0!important; max-width:260px!important; }
.member-actions-compact .action-chip { min-height:30px!important; padding:7px 10px!important; font-size:11px!important; }
@media (max-width: 720px){
    .profile-card-v98{padding:18px!important;border-radius:24px!important;}
    .profile-head-v98{grid-template-columns:76px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;}
    .profile-avatar-v98 .avatar-lg{width:76px!important;height:76px!important;border-radius:24px!important;font-size:26px!important;}
    .profile-main-v98 h1{font-size:25px!important;white-space:nowrap!important;}
    .profile-phone-v98{font-size:18px;}
    .profile-actions-v98{grid-column:1 / -1;min-width:0;max-width:none;width:100%;justify-content:flex-start!important;gap:8px!important;}
    .profile-actions-v98 .relationship-actions{justify-content:flex-start!important;}
    .profile-actions-v98 .action-chip,.profile-actions-v98 .btn{flex:0 0 auto;}
    .group-members-list-all .group-member-row{grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;padding:10px 12px!important;}
    .member-actions-compact{grid-column:2!important;justify-content:flex-start!important;flex-wrap:wrap!important;max-width:100%!important;margin-top:4px!important;}
    .member-meta-line em:not(.role-badge){display:none!important;}
    .member-actions-compact .action-chip{font-size:10.5px!important;padding:7px 9px!important;}
}


/* v9.9.0 mobile layout polish */
.btn,.btn:visited,.btn:hover,.btn:focus,.action-chip,.action-chip:visited,.action-chip:hover,.action-chip:focus,
.profile-logout-btn,.profile-logout-btn:visited,.profile-logout-btn:hover,.profile-logout-btn:focus,
.folder-priority,.folder-other,.member-chat-btn,.profile-chat-btn,.relationship-actions .btn,
.inline-friend-form .btn,.inline-folder-form .btn{color:#fff!important;}
.btn.secondary.action-chip,.btn.tiny.action-chip,.btn.danger.action-chip,.btn.warning.action-chip{color:#fff!important;}
.profile-bottom-actions{margin-top:16px;display:flex;justify-content:flex-start;}
.profile-bottom-actions .profile-logout-btn{min-width:220px;justify-content:center;}
.nearby-page .clean-mobile-head .mobile-search-fake strong,
.notifications-page .clean-mobile-head .mobile-search-fake strong{font-weight:600!important;}
@media (max-width:720px){
  .profile-view-page-v98 .profile-card-v98{padding:16px!important;}
  .profile-view-page-v98 .profile-head-v98{grid-template-columns:72px minmax(0,1fr)!important;column-gap:12px!important;row-gap:8px!important;align-items:start!important;}
  .profile-view-page-v98 .profile-avatar-v98{grid-column:1;grid-row:1 / span 2;}
  .profile-view-page-v98 .profile-avatar-v98 .avatar-lg{width:72px!important;height:72px!important;border-radius:22px!important;font-size:25px!important;}
  .profile-view-page-v98 .profile-main-v98{grid-column:2;grid-row:1;gap:6px!important;align-self:start;}
  .profile-view-page-v98 .profile-main-v98 h1{font-size:20px!important;line-height:1.15!important;white-space:normal!important;overflow:visible!important;text-overflow:initial!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .profile-view-page-v98 .profile-phone-v98{font-size:16px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .profile-view-page-v98 .profile-meta-v98{display:none!important;}
  .profile-view-page-v98 .profile-bio-v98{display:none!important;}
  .profile-view-page-v98 .profile-actions-v98{grid-column:2!important;grid-row:2!important;width:100%!important;min-width:0!important;max-width:none!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:6px!important;overflow-x:auto!important;padding-bottom:2px!important;margin-top:0!important;}
  .profile-view-page-v98 .profile-actions-v98::-webkit-scrollbar{display:none;}
  .profile-view-page-v98 .profile-actions-v98 .action-chip,
  .profile-view-page-v98 .profile-actions-v98 .btn{min-height:30px!important;padding:6px 10px!important;font-size:10.5px!important;font-weight:800!important;border-radius:999px!important;white-space:nowrap!important;}
  .profile-view-page-v98 .profile-actions-v98 .relationship-actions,
  .profile-view-page-v98 .profile-actions-v98 .folder-choice{display:inline-flex!important;flex-wrap:nowrap!important;gap:6px!important;}
  .profile-view-page-v98 .profile-joined-v98{margin-top:10px!important;padding-top:10px!important;font-size:13px!important;}
  .profile-page .profile-head{display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;}
  .profile-page .profile-head .avatar-lg{width:72px!important;height:72px!important;font-size:25px!important;border-radius:22px!important;}
  .profile-page .profile-head h2{font-size:20px!important;line-height:1.18!important;white-space:normal!important;}
  .profile-page .profile-head p.muted{font-size:15px!important;margin:0!important;}
  .profile-page .profile-head .badge,.profile-page .profile-head .pill{font-size:11px!important;padding:6px 10px!important;}
  .profile-page .profile-bottom-actions{margin-top:14px!important;}
  .profile-page .profile-bottom-actions .profile-logout-btn{width:100%!important;min-width:0!important;justify-content:center!important;order:2;}
}


/* v10.0.0 compact profile mobile: name above buttons, small one-line actions */
@media (max-width: 720px){
  .profile-view-page-v98 .profile-card-v98{
    padding: 12px 14px !important;
    border-radius: 22px !important;
  }
  .profile-view-page-v98 .profile-head-v98{
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas:
      "avatar main"
      "avatar actions" !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    align-items: start !important;
    margin-bottom: 6px !important;
  }
  .profile-view-page-v98 .profile-avatar-v98{
    grid-area: avatar !important;
    align-self: start !important;
  }
  .profile-view-page-v98 .profile-avatar-v98 .avatar-lg{
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 18px !important;
    font-size: 19px !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
  }
  .profile-view-page-v98 .profile-main-v98{
    grid-area: main !important;
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }
  .profile-view-page-v98 .profile-main-v98 h1{
    font-size: 17px !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }
  .profile-view-page-v98 .profile-phone-v98{
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    color: #64748b !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .profile-view-page-v98 .profile-main-v98 .profile-meta-v98,
  .profile-view-page-v98 .profile-main-v98 .profile-bio-v98{
    display: none !important;
  }
  .profile-view-page-v98 .profile-actions-v98{
    grid-area: actions !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 0 4px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .profile-view-page-v98 .profile-actions-v98::-webkit-scrollbar{ display:none !important; }
  .profile-view-page-v98 .profile-actions-v98 .relationship-actions,
  .profile-view-page-v98 .profile-actions-v98 .folder-choice{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-width: max-content !important;
    width: auto !important;
    margin: 0 !important;
  }
  .profile-view-page-v98 .profile-actions-v98 .inline-friend-form,
  .profile-view-page-v98 .profile-actions-v98 .inline-folder-form{
    display: inline-flex !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .profile-view-page-v98 .profile-actions-v98 .action-chip,
  .profile-view-page-v98 .profile-actions-v98 .btn,
  .profile-view-page-v98 .profile-actions-v98 .friend-pill{
    min-height: 24px !important;
    height: 24px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 9.8px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    color: #fff !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
  }
  .profile-view-page-v98 .profile-actions-v98 .friend-pill.accepted{
    background: #059669 !important;
  }
  .profile-view-page-v98 .profile-actions-v98 .folder-priority,
  .profile-view-page-v98 .profile-actions-v98 .folder-other,
  .profile-view-page-v98 .profile-actions-v98 .profile-chat-btn{
    background: linear-gradient(135deg, #0b4fb3, #1d4ed8) !important;
  }
  .profile-view-page-v98 .profile-actions-v98 .btn.danger,
  .profile-view-page-v98 .profile-actions-v98 .danger{
    background: #ef4444 !important;
  }
  .profile-view-page-v98 .profile-joined-v98{
    display: none !important;
  }
}


/* v10.1.0 mobile typography refinement */
@media (max-width: 720px){
  /* Tiêu đề mobile không quá đậm */
  .nearby-page .clean-mobile-head .mobile-search-fake strong,
  .notifications-page .clean-mobile-head .mobile-search-fake strong{
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  /* Các nút thao tác trên mobile dùng nét vừa, vẫn giữ chữ trắng */
  .nearby-page .btn,
  .profile-page .btn,
  .profile-view-page-v98 .btn,
  .profile-bottom-actions .btn,
  .profile-logout-btn,
  .nearby-page button.btn,
  .profile-page button.btn{
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: 0 !important;
  }

  /* Riêng nút phụ vẫn không quá đậm */
  .nearby-page .btn.secondary,
  .profile-page .btn.secondary,
  .profile-view-page-v98 .btn.secondary,
  .profile-logout-btn.btn.secondary{
    font-weight: 600 !important;
  }

  /* Badge khoảng cách không in đậm */
  .nearby-page .badge,
  .nearby-page .person-card .badge,
  .nearby-page .person-card span.badge{
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  /* Chữ trong card nearby nhẹ hơn */
  .nearby-page .person-card strong{
    font-weight: 600 !important;
  }
  .nearby-page .person-card p,
  .nearby-page .muted{
    font-weight: 400 !important;
  }

  /* Thông báo hệ thống: tiêu đề và nội dung ở mobile nhẹ hơn */
  .notifications-page .notification-card h2{
    font-weight: 600 !important;
  }
  .notifications-page .notification-card p,
  .notifications-page .notification-summary,
  .notifications-page .announcement-date-line,
  .notifications-page .notification-card small{
    font-weight: 400 !important;
  }

  /* Form cá nhân: label và nút lưu không quá đậm */
  .profile-page .field label{
    font-weight: 600 !important;
  }
  .profile-page button[type="submit"].btn{
    font-weight: 600 !important;
  }
}


/* v10.2.0 STRONG mobile font-weight override: placed last to beat older CSS */
@media screen and (max-width: 720px){
  html body .nearby-page .clean-mobile-head .mobile-search-fake strong,
  html body .notifications-page .clean-mobile-head .mobile-search-fake strong,
  html body .nearby-page .desktop-list-toolbar h1,
  html body .notifications-page .desktop-list-toolbar h1,
  html body .nearby-page h1,
  html body .notifications-page h1{
    font-weight: 500 !important;
  }

  html body .nearby-page .btn,
  html body .nearby-page button.btn,
  html body .nearby-page a.btn,
  html body .profile-page .btn,
  html body .profile-page button.btn,
  html body .profile-page a.btn,
  html body .profile-view-page-v98 .btn,
  html body .profile-view-page-v98 button.btn,
  html body .profile-view-page-v98 a.btn,
  html body .notifications-page .btn,
  html body .notifications-page button.btn,
  html body .notifications-page a.btn{
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  html body .nearby-page .person-card .badge,
  html body .nearby-page .badge,
  html body .nearby-page .pill,
  html body .nearby-page .person-card strong,
  html body .nearby-page .person-card p,
  html body .nearby-page .person-card .actions .btn{
    font-weight: 500 !important;
  }

  html body .notifications-page .notification-card h2,
  html body .notifications-page .notification-summary,
  html body .notifications-page .announcement-date-line,
  html body .notifications-page .notification-new-dot{
    font-weight: 500 !important;
  }

  html body .profile-page label,
  html body .profile-page .field label,
  html body .profile-page .profile-head h2,
  html body .profile-page .profile-head p,
  html body .profile-page .profile-bottom-actions .profile-logout-btn,
  html body .profile-page form .btn[type="submit"]{
    font-weight: 500 !important;
  }

  html body .mobile-search input,
  html body .mobile-search input::placeholder,
  html body .zalo-like-mobile-head .mobile-search input,
  html body .zalo-like-mobile-head .mobile-search input::placeholder{
    font-weight: 500 !important;
  }

  /* Only keep key navigation labels moderately bold, not heavy */
  html body .mobile-bottom-nav small{
    font-weight: 500 !important;
  }
}


/* v10.3.0: merge Bạn bè / Ưu tiên / Khác / Hủy into one settings button */
.profile-actions-settings-v103{
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
}
.profile-settings-menu-v103{
    position:relative!important;
    display:inline-flex!important;
    margin:0!important;
}
.profile-settings-menu-v103 summary{
    list-style:none!important;
}
.profile-settings-menu-v103 summary::-webkit-details-marker{
    display:none!important;
}
.profile-settings-trigger-v103{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-height:38px!important;
    border-radius:999px!important;
    padding:9px 14px!important;
    background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
    color:#fff!important;
    font-weight:700!important;
    cursor:pointer!important;
    white-space:nowrap!important;
}
.profile-settings-trigger-v103 .nav-svg,
.profile-settings-trigger-v103 span{
    color:#fff!important;
}
.profile-settings-dropdown-v103{
    position:absolute!important;
    z-index:90!important;
    top:calc(100% + 8px)!important;
    right:0!important;
    width:max-content!important;
    min-width:190px!important;
    max-width:min(280px,86vw)!important;
    padding:10px!important;
    border:1px solid #d8e6f7!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 18px 45px rgba(15,23,42,.16)!important;
}
.profile-settings-dropdown-v103 .relationship-actions,
.profile-settings-dropdown-v103 .folder-choice{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
}
.profile-settings-dropdown-v103 .inline-friend-form,
.profile-settings-dropdown-v103 .inline-folder-form{
    width:100%!important;
    display:block!important;
}
.profile-settings-dropdown-v103 .action-chip,
.profile-settings-dropdown-v103 .btn,
.profile-settings-dropdown-v103 .friend-pill{
    width:100%!important;
    min-height:34px!important;
    height:auto!important;
    justify-content:center!important;
    text-align:center!important;
    padding:8px 12px!important;
    border-radius:14px!important;
    font-size:12px!important;
    font-weight:700!important;
    color:#fff!important;
}
.profile-settings-dropdown-v103 .friend-pill.accepted{
    background:#059669!important;
}
.profile-settings-dropdown-v103 .friend-pill.pending{
    background:#f59e0b!important;
}
.profile-settings-dropdown-v103 .folder-priority,
.profile-settings-dropdown-v103 .folder-other{
    background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
}
.profile-settings-dropdown-v103 .btn.danger,
.profile-settings-dropdown-v103 .danger{
    background:#ef4444!important;
}
@media (max-width:720px){
    .profile-view-page-v98 .profile-head-v98{
        grid-template-columns:56px minmax(0,1fr) auto!important;
        grid-template-areas:
          "avatar main settings"
          "avatar main settings"!important;
        column-gap:10px!important;
        align-items:center!important;
    }
    .profile-view-page-v98 .profile-actions-settings-v103{
        grid-area:settings!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:flex-end!important;
        justify-content:center!important;
        overflow:visible!important;
        padding:0!important;
        margin:0!important;
        gap:6px!important;
    }
    .profile-view-page-v98 .profile-actions-settings-v103 .profile-chat-btn{
        display:none!important;
    }
    .profile-view-page-v98 .profile-settings-trigger-v103{
        width:36px!important;
        height:36px!important;
        min-height:36px!important;
        padding:0!important;
        border-radius:50%!important;
    }
    .profile-view-page-v98 .profile-settings-trigger-v103 span{
        display:none!important;
    }
    .profile-view-page-v98 .profile-settings-trigger-v103 .nav-svg{
        width:18px!important;
        height:18px!important;
    }
    .profile-view-page-v98 .profile-settings-dropdown-v103{
        top:44px!important;
        right:0!important;
        min-width:170px!important;
        max-width:78vw!important;
    }
    .profile-view-page-v98 .profile-settings-dropdown-v103 .action-chip,
    .profile-view-page-v98 .profile-settings-dropdown-v103 .btn,
    .profile-view-page-v98 .profile-settings-dropdown-v103 .friend-pill{
        font-size:11px!important;
        min-height:32px!important;
        padding:8px 10px!important;
    }
}


/* v10.4.0 adjustable font size controls */
.font-size-grid-v104{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px}.font-size-card-v104{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:12px;border:1px solid #d8e6f7;border-radius:18px;background:#f8fbff}.font-size-card-v104 span{font-weight:800;color:#334155}.font-size-card-v104 input{width:78px;text-align:center;font-weight:900}.font-size-card-v104 b{color:#64748b}.font-preview-v104{margin-top:14px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#f4f8ff,#fff);border:1px dashed #c7dbf6}.font-preview-v104 strong{display:block;font-size:var(--ui-font-title);line-height:1.1}.font-preview-v104 p{font-size:var(--ui-font-base)}.font-preview-v104 .btn{font-size:var(--ui-font-button)}
body{font-size:var(--ui-font-base,16px)!important}.btn,button,.action-chip{font-size:var(--ui-font-button,15px)!important}.nav-menu a,.admin-tabs-v8 a strong,.mobile-bottom-nav small,.admin-bottom-nav-v8 small{font-size:var(--ui-font-menu,14px)!important}@media(max-width:900px){.font-size-grid-v104{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){body{font-size:var(--ui-font-mobile,16px)!important}.font-size-grid-v104{grid-template-columns:1fr}.font-size-card-v104{grid-template-columns:1fr auto auto}}


/* v10.5.0 global font size coverage */
:root{
  --ui-font-small: var(--ui-font-small, 13px);
  --ui-font-input: var(--ui-font-input, 15px);
  --ui-font-chat: var(--ui-font-chat, 15px);
  --ui-font-badge: var(--ui-font-badge, 12px);
  --ui-font-table: var(--ui-font-table, 14px);
}
html body, html body .app-shell, html body .admin-shell-v8{font-size:var(--ui-font-base,16px)!important;}
html body p,html body small,html body .muted,html body .row-main small,html body .site-announcement span,html body .notification-summary,html body .announcement-date-line{font-size:var(--ui-font-small,13px)!important;}
html body label,html body .field label{font-size:var(--ui-font-small,13px)!important;}
html body input,html body textarea,html body select,html body .input,html body .textarea,html body .mobile-search input,html body .searchbar input{font-size:var(--ui-font-input,15px)!important;}
html body .message,html body .bubble,html body .message-bubble,html body .chat-bubble,html body .chat-text,html body .file-card{font-size:var(--ui-font-chat,15px)!important;}
html body .badge,html body .pill,html body .friend-pill,html body .role-badge,html body .member-meta-line em,html body .notification-new-dot,html body .nav-count{font-size:var(--ui-font-badge,12px)!important;}
html body .table,html body table,html body th,html body td,html body .message-cell{font-size:var(--ui-font-table,14px)!important;}
.font-size-grid-v104{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.font-size-grid-v104{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
  html body,html body .app-shell,html body .admin-shell-v8{font-size:var(--ui-font-mobile,16px)!important;}
  .font-size-grid-v104{grid-template-columns:1fr!important;}
}