@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #1c3557;
  --primary2: #264f82;
  --accent: #d4940a;
  --accent2: #f0b429;
  --light: #f5f3ef;
  --white: #fffefb;
  --text: #1e1e1e;
  --muted: #7a7a7a;
  --border: #e2ddd5;
  --success: #2a6e48;
  --error: #b5312b;
  --warning: #7a5c00;
  --purple: #5a1f99;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 20px rgba(28,53,87,.08);
  --shadow-lg: 0 8px 40px rgba(28,53,87,.14);
  --transition: all .22s cubic-bezier(.4,0,.2,1);
  --header-h: 88px;
  --nav-h: 50px;
  --gold-shine: linear-gradient(105deg,#7a4e00 0%,#c8850a 28%,#f0b429 50%,#d4940a 68%,#7a4e00 100%);
}

*,::after,::before{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--light);color:var(--text);min-height:100vh;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8850a' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit}

/* HEADER */
.site-header{background:var(--gold-shine);border-bottom:2px solid rgba(90,55,0,.35);box-shadow:0 4px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,220,130,.3);position:relative;overflow:hidden}
.site-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 50%,rgba(255,230,120,.18) 0,transparent 55%),radial-gradient(ellipse at 85% 50%,rgba(255,200,60,.12) 0,transparent 55%);pointer-events:none}
.site-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,220,100,.5),transparent)}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;max-width:920px;margin:0 auto;gap:14px;position:relative;z-index:1;width:100%}
.header-logo{width:70px;height:70px;object-fit:contain;border-radius:50%;border:2.5px solid rgba(255,255,255,.6);flex-shrink:0;background:#000;box-shadow:0 3px 16px rgba(0,0,0,.45),0 0 0 4px rgba(212,148,10,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.header-poet{width:64px;height:64px;object-fit:cover;border-radius:50%;border:2.5px solid rgba(255,255,255,.55);flex-shrink:0;object-position:top;box-shadow:0 3px 16px rgba(0,0,0,.4)}
.header-center{text-align:center;flex:1;padding:0 12px}
.header-title{font-family:'Cormorant Garamond',serif;font-size:1.38rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.4);line-height:1.2;letter-spacing:.5px}
.header-sub{font-size:.78rem;color:rgba(255,255,255,.92);font-weight:600;margin-top:4px;text-shadow:0 1px 4px rgba(0,0,0,.5);letter-spacing:.6px;text-transform:uppercase}
.header-marquee{font-size:.68rem;color:rgba(255,255,255,.7);margin-top:5px;white-space:nowrap;overflow:hidden}
.header-marquee span{display:inline-block;animation:hmarquee 20s linear infinite}
@keyframes hmarquee{from{transform:translateX(60px)}to{transform:translateX(-100%)}}

/* NAV */
nav{background:var(--primary);padding:0 14px;display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h);box-shadow:0 3px 16px rgba(0,0,0,.2);position:sticky;top:0;z-index:200;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-logo{font-family:'Cormorant Garamond',serif;color:var(--accent2);font-size:.98rem;font-weight:700;white-space:nowrap;flex-shrink:0;letter-spacing:.3px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:var(--transition)}
.hamburger.open span:first-child{transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-menu{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;flex:1;align-items:center;padding:7px 0}
.nav-btn{background:none;border:1.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.88);padding:5px 10px;border-radius:8px;cursor:pointer;font-size:.72rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;transition:var(--transition);white-space:nowrap;line-height:1.4;position:relative;letter-spacing:.1px}
.nav-btn.active,.nav-btn:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:700;box-shadow:0 2px 10px rgba(212,148,10,.4)}
.nav-btn.nlg{background:rgba(181,49,43,.18);border-color:rgba(181,49,43,.35)}
.nav-btn.nlg:hover{background:var(--error);border-color:var(--error);color:#fff}
.nav-btn.nav-btn-auth{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;border-radius:24px;padding:5px 16px;box-shadow:0 2px 10px rgba(212,148,10,.35)}
.nav-btn.nav-btn-auth:hover{background:var(--accent2)!important;border-color:var(--accent2)!important;color:var(--primary)!important}
.notif-wrap{position:relative;display:inline-block}
.notif-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:#e74c3c;border-radius:50%;border:2px solid var(--primary);display:none;animation:pulse-dot 1.5s ease infinite}
.notif-dot.show{display:block}
@keyframes pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@media(max-width:600px){.hamburger{display:flex}.nav-menu{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--primary);flex-direction:column;align-items:stretch;padding:12px 16px 18px;gap:6px;border-top:2px solid rgba(255,255,255,.08);box-shadow:0 10px 24px rgba(0,0,0,.28);z-index:199}.nav-menu.open{display:flex}.nav-btn{text-align:center;font-size:.85rem;padding:10px}}

/* TICKER */
.ticker-wrap{position:fixed;bottom:0;left:0;right:0;background:var(--primary);overflow:hidden;height:34px;z-index:300;border-top:2px solid var(--accent);box-shadow:0 -2px 16px rgba(0,0,0,.25)}
.ticker-track{display:flex;width:max-content;animation:ticker 50s linear infinite}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-segment{display:flex;align-items:center;height:34px;white-space:nowrap;padding:0 55px}
.ticker-text{color:rgba(255,255,255,.82);font-size:.73rem;letter-spacing:.2px}
.ticker-wa{color:var(--accent2);font-weight:700;text-decoration:none}

/* LAYOUT */
.page-wrap{padding:20px 16px 88px;max-width:580px;margin:0 auto;animation:fadeIn .25s ease;width:100%;box-sizing:border-box;position:relative;display:block}
.page-wrap.wide{max-width:760px}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* CARDS */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px;margin-bottom:16px;border:1px solid rgba(226,221,213,.7)}
.card-title{font-family:'Cormorant Garamond',serif;font-size:1.32rem;color:var(--primary);margin-bottom:5px;font-weight:700;letter-spacing:.2px}
.card-sub{color:var(--muted);font-size:.84rem;margin-bottom:18px;line-height:1.6}

/* HERO */
.hero{background:linear-gradient(140deg,var(--primary) 0%,#0d2038 100%);color:#fff;border-radius:var(--radius);padding:28px 24px;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:0 6px 28px rgba(28,53,87,.25)}
.hero::before{content:'';position:absolute;top:-70px;right:-70px;width:200px;height:200px;background:rgba(212,148,10,.1);border-radius:50%}
.hero::after{content:'';position:absolute;bottom:-45px;left:-45px;width:130px;height:130px;background:rgba(212,148,10,.06);border-radius:50%}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:1.45rem;margin-bottom:8px;position:relative;z-index:1;letter-spacing:.3px}
.hero p{font-size:.87rem;opacity:.8;line-height:1.65;position:relative;z-index:1}
.hero-acc{color:var(--accent2);font-weight:700}

/* SECTION BANNERS */
.section-banner{border-radius:12px;padding:13px 18px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.section-banner.gold{background:linear-gradient(130deg,#6e4800,#b87c08,#d4940a)}
.section-banner.blue{background:linear-gradient(130deg,var(--primary),var(--primary2))}
.section-banner.purple{background:linear-gradient(130deg,#4a1790,#6d28d9)}
.section-banner.green{background:linear-gradient(130deg,#155235,#27735e)}
.section-banner .sb-title{color:#fff;font-weight:700;font-size:.96rem}
.section-banner .sb-sub{color:rgba(255,255,255,.78);font-size:.75rem;margin-top:2px}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.stat-card{background:var(--white);border-radius:12px;padding:14px 8px;text-align:center;border:1.5px solid var(--border);position:relative;overflow:hidden;transition:var(--transition)}
.stat-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:0 0 2px 2px}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-num{font-size:1.4rem;font-weight:800;font-family:'Cormorant Garamond',serif;color:var(--primary)}
.stat-label{font-size:.6rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
@media(max-width:480px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* FORMS */
.form-group{margin-bottom:15px}
.form-group label{display:block;font-size:.73rem;font-weight:700;color:var(--primary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.req{color:var(--error)}
input,select,textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.92rem;font-family:'Plus Jakarta Sans',sans-serif;background:#faf9f7;color:var(--text);transition:var(--transition);-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,148,10,.12);background:#fff}
input::placeholder{color:var(--muted);opacity:.65}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}

/* SECTION HEADER */
.section-hdr{font-size:.72rem;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.7px;margin:20px 0 11px;padding-bottom:8px;border-bottom:2px solid var(--accent);display:inline-block}

/* DATE INPUTS */
.dmy-wrap{display:flex;align-items:center;gap:6px}
.dmy-box{width:58px!important;text-align:center;padding:11px 6px!important;font-size:1rem!important;font-weight:600}
.dmy-sep{font-size:1.1rem;font-weight:700;color:var(--muted);flex-shrink:0}

/* AKNA */
.akna-wrap{position:relative}
.akna-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1.5px solid var(--accent);border-radius:0 0 10px 10px;max-height:200px;overflow-y:auto;z-index:500;box-shadow:0 8px 24px rgba(0,0,0,.14);display:none}
.akna-dropdown.open{display:block}
.akna-opt{padding:9px 13px;cursor:pointer;font-size:.88rem;border-bottom:1px solid var(--border)}
.akna-opt:last-child{border-bottom:none}
.akna-opt.active,.akna-opt:hover{background:var(--accent);color:#fff;font-weight:600}
.akna-opt mark{background:none;color:inherit;font-weight:800}

/* PROFILE PIC */
.profile-pic-wrap{position:relative;width:80px;height:80px;flex-shrink:0}
.profile-pic-img{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid var(--accent);display:block}
.profile-pic-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary2));display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;font-weight:700;font-family:'Cormorant Garamond',serif;border:3px solid var(--accent)}
.pic-edit-btn{position:absolute;bottom:0;right:0;background:var(--accent);border:2px solid #fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* RADIO */
.radio-group{display:flex;gap:8px;margin-top:4px}
.radio-opt{flex:1;position:relative}
.radio-opt input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;z-index:2}
.radio-opt label{position:relative;z-index:0;display:block;text-align:center;padding:10px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;font-size:.88rem;font-weight:500;transition:var(--transition);background:#faf9f7;user-select:none;pointer-events:none}
.radio-opt input:checked+label{background:var(--primary);color:#fff;border-color:var(--primary);font-weight:600;box-shadow:0 2px 10px rgba(28,53,87,.2)}

/* BUTTONS */
.btn{display:block;width:100%;padding:13px 18px;background:var(--primary);color:#fff;border:none;border-radius:11px;font-size:.94rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;transition:var(--transition);text-align:center;text-decoration:none;letter-spacing:.1px}
.btn:hover{background:#0f2440;box-shadow:0 5px 18px rgba(28,53,87,.25);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn-accent{background:linear-gradient(130deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 3px 14px rgba(212,148,10,.3)}
.btn-accent:hover{background:linear-gradient(130deg,#b57b08,#d4940a);box-shadow:0 5px 20px rgba(212,148,10,.4)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#1a5234}
.btn-danger{background:var(--error);color:#fff}
.btn-danger:hover{background:#8e2520}
.btn-outline{background:none;border:2px solid var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-sm{width:auto;display:inline-block;padding:7px 16px;font-size:.81rem;border-radius:8px;margin-top:0;min-height:36px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.btn-wa{background:#25d366;color:#fff;border:none;border-radius:9px;padding:8px 15px;font-size:.82rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none;transition:var(--transition)}
.btn-wa:hover{background:#1ebe5a;transform:translateY(-1px)}
.btn-call{background:#1a73e8;color:#fff;border:none;border-radius:9px;padding:8px 15px;font-size:.82rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none}

/* DIVIDER */
.divider{text-align:center;color:var(--muted);font-size:.82rem;margin:16px 0;position:relative}
.divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.divider span{background:var(--white);padding:0 14px;position:relative}
.link-btn{background:none;border:none;color:var(--primary);font-size:.88rem;cursor:pointer;text-decoration:underline;font-family:'Plus Jakarta Sans',sans-serif;padding:0}

/* ALERTS */
.alert{padding:12px 16px;border-radius:10px;font-size:.85rem;margin-bottom:13px;display:none;line-height:1.55}
.alert.show{display:block}
.alert-success{background:#e8f5ee;color:var(--success);border-left:4px solid var(--success)}
.alert-error{background:#fcecea;color:var(--error);border-left:4px solid var(--error)}
.alert-info{background:#e8f0fb;color:var(--primary);border-left:4px solid var(--primary)}
.alert-warn{background:#fff8e0;color:var(--warning);border-left:4px solid var(--accent)}

/* BADGES */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.71rem;font-weight:700;letter-spacing:.3px;vertical-align:middle}
.badge-pending{background:#fff3cd;color:var(--warning)}
.badge-approved{background:#d1f0e0;color:var(--success)}
.badge-rejected{background:#fcecea;color:var(--error)}
.badge-admin{background:#fff3cd;color:#7a5c00}
.badge-approver{background:#e0e8ff;color:var(--primary)}
.badge-new{background:#e8f5e9;color:var(--success)}

/* TABS */
.tabs{display:flex;gap:0;margin-bottom:18px;border-radius:12px;overflow:hidden;border:1.5px solid var(--border);background:var(--white)}
.tab-btn{flex:1;padding:12px 6px;background:var(--white);border:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:.8rem;font-weight:600;color:var(--muted);cursor:pointer;transition:var(--transition);border-right:1px solid var(--border);white-space:nowrap;text-align:center}
.tab-btn:last-child{border-right:none}
.tab-btn.active{background:var(--primary)!important;color:#fff!important;font-weight:700}
@media(max-width:600px){.tabs{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:12px}.tabs::-webkit-scrollbar{display:none}.tab-btn{flex:0 0 auto;min-width:84px;font-size:.74rem;padding:10px 8px}}

.adm-tab{padding:7px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:var(--transition);line-height:1.2}
.adm-tab:hover{border-color:var(--primary);color:var(--primary);background:var(--light)}
.adm-tab.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;font-weight:700}

/* MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,25,45,.6);z-index:500;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border-radius:var(--radius);padding:26px 22px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.28);max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(max-width:480px){.modal{padding:20px 16px;border-radius:14px}.modal-overlay{padding:10px}}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:1.18rem;color:var(--primary);margin-bottom:8px;font-weight:700;letter-spacing:.2px}
.modal-body{font-size:.87rem;color:var(--muted);margin-bottom:18px;line-height:1.6}

/* SPINNER */
.spinner{width:18px;height:18px;border:2.5px solid rgba(28,53,87,.15);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-box{text-align:center;padding:36px;color:var(--muted);font-size:.9rem}
.empty-state{text-align:center;padding:36px 20px;color:var(--muted)}
.empty-icon{font-size:2.6rem;margin-bottom:12px}
.empty-title{font-weight:700;font-size:.96rem;color:var(--text);margin-bottom:5px}
.empty-sub{font-size:.82rem;line-height:1.6}

/* EVENT CARDS */
.event-card{background:var(--white);border-radius:13px;border:1.5px solid var(--border);margin-bottom:10px;overflow:hidden;display:flex;align-items:stretch;transition:var(--transition)}
.event-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.event-card.today-card{border-color:var(--accent);box-shadow:0 0 0 2px rgba(212,148,10,.2)}
.ev-date{width:66px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 6px;color:#fff}
.ev-date.bday{background:linear-gradient(155deg,#d4940a,#f57c00)}
.ev-date.anni{background:linear-gradient(155deg,#c2185b,#e91e8c)}
.ev-date.comm{background:linear-gradient(155deg,#27735e,#155235)}
.ev-day{font-size:1.5rem;font-weight:700;font-family:'Cormorant Garamond',serif;line-height:1}
.ev-mon{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.9;margin-top:2px}
.ev-body{padding:12px 15px;flex:1}
.ev-name{font-weight:700;font-size:.92rem;color:var(--primary);margin-bottom:3px}
.ev-type{font-size:.74rem;color:var(--muted)}
.today-tag{display:inline-block;background:var(--accent);color:#fff;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px;vertical-align:middle}
.ev-section{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;padding-bottom:5px;border-bottom:1px dashed var(--border)}

/* HOME EVENT SCROLL */
.home-ev-scroll{overflow:hidden;position:relative;width:100%;padding:6px 0}
.home-ev-track{display:flex;gap:10px;width:max-content;animation:evScroll 30s linear infinite}
.home-ev-track:hover{animation-play-state:paused}
@keyframes evScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.home-ev-card{flex:0 0 auto;width:152px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:var(--transition);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.home-ev-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.14);transform:translateY(-3px)}
.home-ev-day{font-size:1.4rem;font-weight:800;color:var(--primary);line-height:1;font-family:'Cormorant Garamond',serif}
.home-ev-mon{font-size:.67rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.home-ev-name{font-size:.76rem;font-weight:700;color:var(--text);margin-top:7px;line-height:1.2}
.home-ev-sub{font-size:.64rem;color:var(--muted);margin-top:3px}
.home-ev-meta{font-size:.6rem;color:var(--muted);margin-top:2px;line-height:1.3;opacity:.85}
.home-ev-empty{color:var(--muted);font-size:.78rem;padding:6px;font-style:italic}
.home-ev-loading{color:var(--muted);font-size:.8rem;padding:8px}

/* WISH */
.wish-avatar{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;color:#fff;margin:0 auto 12px;font-family:'Cormorant Garamond',serif;border:3px solid var(--accent)}
.wish-name{font-size:1.08rem;font-weight:700;color:var(--primary);text-align:center}
.wish-meta{font-size:.76rem;color:var(--muted);text-align:center;margin:3px 0 14px}
.wish-badge{display:inline-block;padding:3px 13px;border-radius:20px;font-size:.7rem;font-weight:700;margin-bottom:12px}
.wish-badge.bday{background:#fff3e0;color:#c87800}
.wish-badge.anni{background:#fce4ec;color:#c2185b}
.wish-actions{display:flex;gap:8px;margin-top:4px}
.wish-btn{flex:1;padding:10px 6px;border-radius:10px;border:none;cursor:pointer;font-size:.82rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px;transition:var(--transition);text-decoration:none}
.wish-btn span{font-size:1.3rem}
.wish-btn.call{background:#e8f5e9;color:var(--success)}
.wish-btn.call:hover{background:var(--success);color:#fff}
.wish-btn.wa{background:#e8f8f0;color:#25d366}
.wish-btn.wa:hover{background:#25d366;color:#fff}
.wish-btn.no-mob{background:#f5f5f5;color:#aaa;cursor:default}

/* VISIT COUNTER */
.visit-counter-bar{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(130deg,var(--primary),#1e3d6e);padding:10px 20px;border-radius:13px;margin-bottom:16px;box-shadow:0 3px 14px rgba(28,53,87,.18)}
.visit-counter-icon{font-size:1.4rem}
.visit-counter-text{color:rgba(255,255,255,.75);font-size:.73rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.visit-counter-num{color:var(--accent2);font-size:1.3rem;font-weight:800;font-family:'Cormorant Garamond',serif;letter-spacing:1px}

/* MEMBER CARDS */
.member-card{background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:15px 16px;margin-bottom:10px;transition:var(--transition);display:flex;gap:14px;align-items:flex-start}
.member-card:hover{box-shadow:var(--shadow);border-color:#c0b8ac}
.member-photo{flex:0 0 96px;width:96px;height:96px;border-radius:12px;object-fit:cover;object-position:top;border:2px solid var(--border);background:var(--light)}
.member-photo-init{flex:0 0 96px;width:96px;height:96px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary2));display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#fff;font-family:'Cormorant Garamond',serif;border:2px solid var(--border)}
.member-body{flex:1;min-width:0}
.member-name{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--primary);font-weight:700;margin-bottom:5px}
.member-info{font-size:.83rem;color:var(--muted);line-height:1.8}
.member-info b{color:var(--text);font-weight:600}
.result-count{font-size:.82rem;color:var(--muted);margin-bottom:10px;padding:7px 13px;background:var(--white);border-radius:9px;border:1px solid var(--border)}
.contact-btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;flex-wrap:wrap}
.page-btn{padding:8px 15px;border:1.5px solid var(--border);border-radius:8px;background:var(--white);font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--primary);transition:var(--transition)}
.page-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* APPROVAL */
.approval-item{background:var(--light);border:1.5px solid var(--border);border-radius:12px;padding:15px 16px;margin-bottom:10px;transition:var(--transition)}
.approval-item:hover{border-color:#b8b0a6}
.approval-item .a-name{font-weight:700;font-size:.94rem;color:var(--primary);margin-bottom:3px}
.approval-item .a-meta{font-size:.81rem;color:var(--muted);line-height:1.7;margin-bottom:9px}
.approval-item .a-meta b{color:var(--text)}

/* NOTIFS */
.notif-item{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.notif-item:last-child{border:none}
.notif-item.unread{background:rgba(212,148,10,.05);margin:0 -18px;padding:12px 18px;border-radius:0}
.notif-icon{font-size:1.3rem;flex-shrink:0;margin-top:1px}
.notif-text{font-size:.86rem;color:var(--text);line-height:1.4}
.notif-text b{color:var(--primary)}
.notif-time{font-size:.74rem;color:var(--muted);margin-top:3px}

/* SPACE POSTS */
.space-post{background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:18px;margin-bottom:12px;transition:var(--transition)}
.space-post:hover{box-shadow:var(--shadow)}
.space-post-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--primary);margin-bottom:6px;font-weight:700}
.space-post-body{font-size:.87rem;color:var(--text);line-height:1.7;white-space:pre-wrap}
.space-post-meta{font-size:.74rem;color:var(--muted);margin-top:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.space-expiry{font-size:.72rem;color:var(--warning);font-weight:600}

/* MATRIMONY */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:12px}
.mat-card{background:var(--white);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transition:var(--transition);border:1.5px solid var(--border)}
.mat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.mat-card-header{background:linear-gradient(135deg,var(--primary) 0%,#c2185b 100%);padding:16px 15px 15px;display:flex;align-items:center;gap:13px;position:relative}
.mat-card-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),#c2185b,var(--primary))}
.mat-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;object-position:top;border:3px solid rgba(255,255,255,.5);box-shadow:0 2px 14px rgba(0,0,0,.22);flex-shrink:0;cursor:pointer}
.mat-photo-init{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#fff;border:3px solid rgba(255,255,255,.3);flex-shrink:0}
.mat-header-info{flex:1;min-width:0}
.mat-name{font-size:1.06rem;font-weight:800;color:#fff;line-height:1.2}
.mat-age-city{font-size:.78rem;color:rgba(255,255,255,.88);margin-top:3px}
.mat-pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.mat-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:12px;font-size:.65rem;font-weight:700}
.mat-badge.boy{background:#dbeafe;color:#1e40af}
.mat-badge.girl{background:#fce7f3;color:#9d174d}
.mat-badge.pending{background:#fef3c7;color:#92400e}
.mat-badge.manglik-yes{background:#fee2e2;color:#991b1b}
.mat-badge.manglik-no{background:#d1fae5;color:#065f46}
.mat-summary{padding:10px 15px;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);background:var(--light)}
.mat-chip{font-size:.71rem;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:2px 10px;color:var(--text);font-weight:600;white-space:nowrap}
.mat-chip.edu{border-color:#93c5fd;color:#1e40af;background:#eff6ff}
.mat-chip.occ{border-color:#86efac;color:#166534;background:#f0fdf4}
.mat-chip.ht{border-color:#d8b4fe;color:#6b21a8;background:#faf5ff}
.mat-expand-btn{width:100%;padding:9px 15px;background:var(--light);border:none;border-top:1px solid var(--border);cursor:pointer;font-size:.8rem;font-weight:700;color:var(--primary);display:flex;align-items:center;justify-content:center;gap:5px;transition:var(--transition)}
.mat-expand-btn:hover{background:#ebe6de}
.mat-detail{display:none;padding:0}
.mat-detail.open{display:block}
.mat-section{padding:10px 15px 2px}
.mat-section-title{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--primary);margin-bottom:6px;padding-bottom:4px;border-bottom:1.5px solid #e8f0fb}
.mat-row{font-size:.8rem;color:var(--text);margin-bottom:6px;display:flex;gap:8px;align-items:flex-start}
.mat-row b{color:var(--muted);min-width:94px;flex-shrink:0;font-weight:600;font-size:.74rem}
.mat-row span{flex:1;word-break:break-word;font-weight:700;color:var(--primary)}
.mat-pref-box{margin:8px 15px 10px;padding:11px 13px;background:linear-gradient(135deg,#fff8e1,#fffde7);border:1.5px solid #ffe082;border-radius:10px;font-size:.78rem}
.mat-pref-box .pref-title{font-weight:800;color:#7a5800;margin-bottom:5px;font-size:.76rem}
.mat-pref-box .pref-row{color:#7a5800;margin-bottom:2px}
.mat-about{margin:0 15px 10px;font-size:.8rem;color:var(--muted);font-style:italic;line-height:1.65;padding:9px 11px;background:var(--light);border-radius:9px}
.mat-actions{display:flex;gap:8px;padding:10px 15px;border-top:1px solid var(--border);background:var(--light);flex-wrap:wrap}
.mat-btn{flex:1;padding:9px 6px;border-radius:10px;border:none;cursor:pointer;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;transition:var(--transition)}
.mat-btn.wa{background:#e8f8f0;color:#25d366}
.mat-btn.wa:hover{background:#25d366;color:#fff}
.mat-btn.call{background:#e8f5e9;color:var(--success)}
.mat-btn.call:hover{background:var(--success);color:#fff}
.mat-btn.interest{background:#fff3e0;color:#c87800}
.mat-btn.interest:hover{background:#c87800;color:#fff}
.mat-btn.interested{background:#c87800;color:#fff}
.mat-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.mat-tab{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;font-size:.8rem;font-weight:600;color:var(--muted);transition:var(--transition)}
.mat-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.mat-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:flex-end}
.mat-filter-bar .form-group{margin-bottom:0;flex:1;min-width:120px}
.mat-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:500px){.mat-three-col{grid-template-columns:1fr}}
.mat-form-step{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:15px 17px;margin-bottom:14px}
.mat-step-hdr{font-size:.77rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--primary);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #e8f0fb;display:flex;align-items:center;gap:6px}
.mat-family-section-hdr{font-size:.76rem;font-weight:700;color:#c2185b;margin:14px 0 8px;padding:4px 0;border-bottom:1px dashed #f8bbd0}
.mat-relative-group{margin-bottom:10px}
.mat-rel-label{font-size:.8rem;font-weight:600;color:var(--text);margin-bottom:5px}
.mat-add-rel-btn{background:var(--light);border:1.5px dashed var(--border);border-radius:8px;padding:5px 12px;font-size:.78rem;cursor:pointer;color:var(--primary);font-weight:600;margin-top:4px}
.mat-add-rel-btn:hover{background:#ebe6de;border-color:var(--primary)}

/* DATE/TIME */
input[type=date],input[type=time]{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.92rem;font-family:'Plus Jakarta Sans',sans-serif;background:#faf9f7;color:var(--text);transition:var(--transition);cursor:pointer;-webkit-appearance:none;appearance:none}
input[type=date]:focus,input[type=time]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,148,10,.12);background:#fff}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;filter:invert(20%) sepia(60%) saturate(500%) hue-rotate(190deg)}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* MEMBER LIST GRID */
.member-list-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.ml-item{background:var(--light);border:1px solid var(--border);border-radius:9px;padding:9px 12px;font-size:.84rem;cursor:default;transition:background .15s}
.ml-item:hover{background:#ebe6de}

/* BIZ CARDS */
.biz-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:var(--transition);margin-bottom:12px}
.biz-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.biz-card-header{background:linear-gradient(135deg,var(--primary),#254f82);padding:15px 17px;display:flex;align-items:center;gap:13px}
.biz-photo{width:60px;height:60px;border-radius:11px;object-fit:cover;border:2px solid rgba(255,255,255,.3);flex-shrink:0}
.biz-photo-init{width:60px;height:60px;border-radius:11px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.biz-firm{font-size:1rem;font-weight:700;color:#fff}
.biz-person{font-size:.78rem;color:rgba(255,255,255,.78);margin-top:2px}
.biz-body{padding:13px 17px}
.biz-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.biz-tag{background:var(--light);color:var(--primary);font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid var(--border)}

/* JOB CARDS */
.job-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:17px;margin-bottom:12px;transition:var(--transition)}
.job-card:hover{box-shadow:var(--shadow);border-color:#c0b8ac}
.job-title{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--primary);font-weight:700;margin-bottom:4px}
.job-company{font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:6px}
.job-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.78rem;color:var(--muted)}
.job-pill{background:var(--light);padding:3px 11px;border-radius:20px;border:1px solid var(--border)}
.job-expiry{font-size:.72rem;font-weight:600}
.job-expiry.urgent{color:var(--error)}
.job-expiry.ok{color:var(--success)}

/* MISC */
.disclaimer{background:#fdf8ed;border:1px dashed var(--accent);border-radius:10px;padding:12px 15px;font-size:.76rem;color:var(--muted);line-height:1.6;margin-top:18px}
.disclaimer strong{color:var(--warning)}
#photo-modal img{max-width:100%;border-radius:12px}
.dharm-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:15px 17px;margin-bottom:10px;transition:var(--transition)}
.dharm-card:hover{box-shadow:var(--shadow)}
.dharm-name{font-family:'Cormorant Garamond',serif;font-size:.98rem;color:var(--primary);font-weight:700;margin-bottom:3px}
.dharm-meta{font-size:.82rem;color:var(--muted);line-height:1.7}
.dharm-map-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;background:var(--primary);color:#fff;border-radius:8px;font-size:.78rem;font-weight:600;text-decoration:none;margin-top:8px;transition:var(--transition)}
.dharm-map-btn:hover{background:#0f2440}

/* PROFILE */
.profile-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.profile-avatar{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary2));display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;font-weight:700;font-family:'Cormorant Garamond',serif;flex-shrink:0;border:3px solid var(--accent)}
.profile-info h2{font-family:'Cormorant Garamond',serif;font-size:1.12rem;color:var(--primary);margin-bottom:2px}
.profile-info p{font-size:.82rem;color:var(--muted)}

/* OTP */
.otp-box{display:flex;gap:8px;justify-content:center;margin:12px 0}
.otp-digit{width:44px;height:54px;text-align:center;font-size:1.4rem;font-weight:700;border:2px solid var(--border);border-radius:10px;background:#faf9f7;color:var(--primary);transition:var(--transition)}
.otp-digit:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(212,148,10,.12)}

/* BLOOD / ORNAMENT */
.blood-pill{display:inline-block;background:#fdecea;color:var(--error);font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:20px;vertical-align:middle}
.ornamental-divider{text-align:center;margin:20px 0;color:var(--accent);font-size:1.1rem;letter-spacing:8px;opacity:.55}

/* RESPONSIVE */
@media(max-width:600px){.stats-grid{grid-template-columns:repeat(2,1fr)}.mat-grid{grid-template-columns:1fr}.site-header-inner{padding:10px 14px;gap:10px}.header-logo{width:52px;height:52px}.header-poet{width:48px;height:48px}.header-title{font-size:1.02rem}.header-sub{font-size:.7rem}.page-wrap{padding:14px 12px 88px}.hero{padding:20px 16px}.hero h1{font-size:1.2rem}.form-row{grid-template-columns:1fr}.home-ev-card{width:134px}.modal{padding:20px 16px;border-radius:14px}.modal-overlay{padding:10px}.btn-group{flex-wrap:wrap}.btn-sm{font-size:.79rem}}
@media(max-width:380px){.site-header-inner{padding:8px 10px;gap:6px}.header-logo{width:42px;height:42px}.header-poet{width:38px;height:38px}.header-title{font-size:.92rem}.header-sub{font-size:.65rem}.page-wrap{padding:10px 10px 88px}.card{padding:14px 12px}.hero{padding:16px 13px}.btn{font-size:.88rem;padding:11px 14px}}

/* ACCESSIBILITY */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* LAZY IMAGES */
img{transition:opacity .3s ease}
img[loading=lazy]{opacity:0}
img[loading=lazy].loaded{opacity:1}

/* OVERFLOW FIX */
body,html{overflow-x:hidden;max-width:100%;width:100%}
.header-sub,.header-title{word-break:break-word;overflow-wrap:break-word;white-space:normal}
.header-center{min-width:0;overflow:hidden}
.header-marquee{overflow:hidden;width:100%}
.modal-overlay,.site-header,.site-header-inner,.ticker-wrap,nav{max-width:100%;box-sizing:border-box}
#app{width:100%;box-sizing:border-box}
.biz-card-header,.btn-group,.form-row,.mat-filter-bar,.stats-grid{max-width:100%}

/* NAV PROFILE */
.nav-btn-profile{display:inline-flex!important;align-items:center;gap:7px;padding:7px 12px!important}
.nav-profile-avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));font-size:.72rem;font-weight:700;color:#fff;border:2px solid var(--accent);flex-shrink:0;overflow:hidden;vertical-align:middle}
.nav-profile-label{font-size:.82rem;font-weight:600}

/* MESSAGES */
.nav-btn.nav-btn-messages{background:rgba(22,160,133,.16);border-color:rgba(22,160,133,.4);color:#a0ede0;position:relative}
.nav-btn.nav-btn-messages.active,.nav-btn.nav-btn-messages:hover{background:#16a085!important;border-color:#16a085!important;color:#fff!important;font-weight:700}
.msg-unread-badge{display:inline-flex;align-items:center;justify-content:center;background:#e74c3c;color:#fff;border-radius:10px;font-size:.62rem;font-weight:800;min-width:16px;height:16px;padding:0 4px;margin-left:4px;line-height:1;vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.25);animation:pulse-dot 1.5s ease infinite}
.btn-msg{background:linear-gradient(135deg,var(--primary),#254f82);color:#fff;border:none;border-radius:9px;padding:8px 15px;font-size:.82rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none;transition:var(--transition)}
.btn-msg:hover{background:linear-gradient(135deg,#0f2440,var(--primary))}
.msg-tab{background:var(--light);border:1.5px solid var(--border);border-radius:20px;padding:7px 18px;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--text);transition:var(--transition)}
.msg-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.msg-row{display:flex;align-items:flex-start;gap:12px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:var(--transition);position:relative}
.msg-row:hover{box-shadow:var(--shadow);border-color:#c0b8ac}
.msg-row.msg-unread{border-left:4px solid var(--accent);background:#fdf8ed}
.msg-row-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff;flex-shrink:0}
.msg-row-body{flex:1;min-width:0}
.msg-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.msg-row-who{font-weight:700;font-size:.9rem;color:var(--primary)}
.msg-row-date{font-size:.72rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
.msg-row-sub{font-weight:600;font-size:.85rem;color:var(--text);margin-top:2px}
.msg-row-preview{font-size:.78rem;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-unread-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:6px}

/* THREAD */
.thread-modal-box{max-width:540px;width:100%;height:82vh;max-height:82vh;display:flex;flex-direction:column;overflow:hidden!important;padding:0!important;border-radius:18px}
.thread-header{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1.5px solid var(--border);background:var(--primary);border-radius:18px 18px 0 0;flex-shrink:0}
.thread-header-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#f39c12);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--primary);flex-shrink:0}
.thread-header-name{font-weight:700;color:#fff;font-size:.96rem}
.thread-header-email{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:1px}
.thread-messages{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:6px;background:#eeeae3;background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231c3557' fill-opacity='0.03'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10S0 14.5 0 20s4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5 4.5-10 10-10s-10 4.5-10 10-4.5 10-10 10-10-4.5-10-10z'/%3E%3C/g%3E%3C/svg%3E")}
.thread-bubble-wrap{display:flex;flex-direction:column;max-width:78%}
.thread-bubble-wrap.sent{align-self:flex-end;align-items:flex-end}
.thread-bubble-wrap.recv{align-self:flex-start;align-items:flex-start}
.thread-bubble{padding:10px 15px;border-radius:18px;font-size:.88rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.thread-bubble.sent{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border-bottom-right-radius:4px}
.thread-bubble.recv{background:var(--white);color:var(--text);border-bottom-left-radius:4px;border:1px solid rgba(0,0,0,.06)}
.thread-bubble-subject{font-size:.7rem;opacity:.7;margin-bottom:4px;font-style:italic}
.thread-bubble-meta{font-size:.66rem;color:var(--muted);margin-top:3px;padding:0 4px}
.thread-date-sep{text-align:center;font-size:.7rem;color:var(--muted);margin:8px 0 4px;position:relative}
.thread-date-sep::before,.thread-date-sep::after{content:'';position:absolute;top:50%;width:28%;height:1px;background:var(--border)}
.thread-date-sep::before{left:0}
.thread-date-sep::after{right:0}
.thread-reply-bar{padding:10px 14px;border-top:1px solid rgba(0,0,0,.07);background:#f4f0e8;border-radius:0 0 18px 18px;display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
.thread-reply-input{flex:1;resize:none;border:1.5px solid #ddd7cc;border-radius:22px;padding:10px 16px;font-size:.88rem;font-family:inherit;color:var(--text);background:#fff;max-height:100px;overflow-y:auto;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.thread-reply-input:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(212,148,10,.12)}
.thread-send-fab{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;transition:var(--transition);box-shadow:0 3px 12px rgba(212,148,10,.45);color:#fff}
.thread-send-fab:hover{transform:scale(1.08);box-shadow:0 4px 18px rgba(212,148,10,.55)}
.conv-list-item{display:flex;align-items:center;gap:12px;background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:var(--transition);position:relative}
.conv-list-item:hover{box-shadow:var(--shadow);border-color:#c0b8ac}
.conv-list-item.has-unread{border-left:4px solid var(--accent);background:#fdf8ed}
.conv-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}
.conv-body{flex:1;min-width:0}
.conv-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conv-name{font-weight:700;font-size:.9rem;color:var(--primary)}
.conv-date{font-size:.72rem;color:var(--muted);white-space:nowrap;flex-shrink:0}
.conv-last{font-size:.8rem;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-unread-count{background:#e74c3c;color:#fff;border-radius:10px;font-size:.65rem;font-weight:800;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
.modal-box{background:var(--white);border-radius:18px;padding:24px 22px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 50px rgba(0,0,0,.22)}
@keyframes slideUp{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
#gp-visitor-popup{animation:fadeIn .25s ease}
.ql-grid{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:480px){.ql-grid{grid-template-columns:repeat(2,1fr)!important}}

/* ═══════════════════════════════════════════════════════════════
   PHASE 1 ENHANCEMENTS — Visual Polish & Quick Wins
   Added: Dark Mode, Back-to-top, Skeleton loaders, Blood pills,
   Enhanced card shadows & gold accent borders
═══════════════════════════════════════════════════════════════ */

/* ─── 1. ENHANCED CARD SHADOWS & GOLD ACCENT (v2 — fixed) ─── */

/* Force position:relative on cards so ::before can position correctly. !important to override later rules */
.card,
.member-card,
.biz-card,
.job-card,
.mat-card,
.event-card,
.gallery-card,
.dharm-card,
.magazine-card,
.space-post,
.home-ev-card,
.stat-card {
  position: relative !important;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

/* Gold top-border accent (default hidden, shown on hover) */
.card::before,
.member-card::before,
.biz-card::before,
.job-card::before,
.mat-card::before,
.dharm-card::before,
.magazine-card::before,
.event-card::before,
.home-ev-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c8850a 0%, #f0b429 50%, #c8850a 100%) !important;
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before,
.member-card:hover::before,
.biz-card:hover::before,
.job-card:hover::before,
.mat-card:hover::before,
.dharm-card:hover::before,
.magazine-card:hover::before,
.event-card:hover::before,
.home-ev-card:hover::before {
  opacity: 1;
}

/* Card hover lift + enhanced shadow */
.card:hover,
.member-card:hover,
.biz-card:hover,
.job-card:hover,
.mat-card:hover,
.dharm-card:hover,
.magazine-card:hover,
.event-card:hover,
.gallery-card:hover,
.home-ev-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(28,53,87,.14), 0 3px 10px rgba(212,148,10,.12) !important;
  border-color: rgba(212,148,10,.35) !important;
}

/* Subtle button hover lift (kept clean — don't override existing) */
.btn:not([disabled]):active {
  transform: translateY(0);
}


/* ─── 2. BACK-TO-TOP FLOATING BUTTON ─── */
#back-to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary, #1c3557), var(--primary2, #264f82));
  color: #fff;
  border: 2px solid rgba(255,255,255,.18);
  cursor: pointer;
  font-size: 1.2rem;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  box-shadow: 0 6px 20px rgba(28,53,87,.35), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .2s ease, opacity .2s ease, background .25s ease;
  opacity: 0;
}
#back-to-top.show {
  display: flex;
  animation: btt-fadein .3s ease forwards;
}
#back-to-top:hover {
  transform: translateY(-3px) scale(1.05);
  background: linear-gradient(135deg, var(--accent, #d4940a), #f0b429);
}
@keyframes btt-fadein {
  to { opacity: 1; }
}
@media(max-width:480px) {
  #back-to-top { bottom: 78px; right: 14px; width: 42px; height: 42px; }
}


/* ─── 3. SKELETON SHIMMER LOADERS ─── */
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.skeleton-text {
  display: block;
  height: 14px;
  margin: 6px 0;
  border-radius: 4px;
}
.skeleton-circle {
  display: inline-block;
  border-radius: 50%;
  width: 48px; height: 48px;
}
.skeleton-rect {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.skeleton-card {
  display: block;
  background: var(--white, #fffefb);
  border-radius: var(--radius, 16px);
  padding: 16px;
  border: 1px solid var(--border, #e2ddd5);
  margin-bottom: 12px;
}
.skeleton-card .skeleton-text:first-child { width: 60%; }
.skeleton-card .skeleton-text:nth-child(2) { width: 90%; }
.skeleton-card .skeleton-text:nth-child(3) { width: 75%; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* loading-box enhancement (existing class) - shimmer the spinner area background */
.loading-box {
  position: relative;
  overflow: hidden;
}
.loading-box::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,148,10,.08), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}


/* ─── 4. BLOOD GROUP COLORED PILLS ─── */
.bg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .3px;
  vertical-align: middle;
  white-space: nowrap;
  border: 1.5px solid;
  line-height: 1.3;
  min-width: 38px;
}
.bg-pill::before { content: '🩸'; margin-right: 3px; font-size: .65rem; opacity: .85; }
.bg-pill-Apos, .bg-pill-Aplus    { background:#ffe5e0; color:#c62828; border-color:#ef9a9a; }
.bg-pill-Aneg, .bg-pill-Aminus   { background:#fff2ee; color:#d84315; border-color:#ffab91; }
.bg-pill-Bpos, .bg-pill-Bplus    { background:#e3f2fd; color:#1565c0; border-color:#90caf9; }
.bg-pill-Bneg, .bg-pill-Bminus   { background:#e8eaf6; color:#3f51b5; border-color:#9fa8da; }
.bg-pill-ABpos, .bg-pill-ABplus  { background:#f3e5f5; color:#6a1b9a; border-color:#ce93d8; }
.bg-pill-ABneg, .bg-pill-ABminus { background:#ede7f6; color:#4527a0; border-color:#b39ddb; }
.bg-pill-Opos, .bg-pill-Oplus    { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }
.bg-pill-Oneg, .bg-pill-Ominus   { background:#e0f2f1; color:#00695c; border-color:#80cbc4; }
.bg-pill-unknown                 { background:#f5f5f5; color:#757575; border-color:#bdbdbd; }


/* ─── 5. DARK MODE OVERRIDES ─── */
[data-theme='dark'] {
  --primary: #7ba7d9;
  --primary2: #95bce4;
  --accent: #f0b429;
  --accent2: #f5c548;
  --light: #1a1d24;
  --white: #252932;
  --text: #e8e6e0;
  --muted: #a0a0a0;
  --border: #3a3f4a;
  --success: #4caf7a;
  --error: #e57373;
  --warning: #ffa726;
  --purple: #b39ddb;
  --shadow: 0 2px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.7);
}

/* Dark mode: ensure all text is readable */
[data-theme='dark'] body { color: #e8e6e0; }
[data-theme='dark'] .card { background: #252932; color: #e8e6e0; border-color: #3a3f4a; }
[data-theme='dark'] .card-title,
[data-theme='dark'] .member-name,
[data-theme='dark'] .biz-card-name,
[data-theme='dark'] .mat-card-name,
[data-theme='dark'] .sb-title,
[data-theme='dark'] .modal-title,
[data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3 {
  color: #f0b429 !important;
}
[data-theme='dark'] .member-info,
[data-theme='dark'] .biz-card-body,
[data-theme='dark'] .mat-card-body,
[data-theme='dark'] .sb-sub,
[data-theme='dark'] p,
[data-theme='dark'] label {
  color: #d8d6d0 !important;
}
[data-theme='dark'] input,
[data-theme='dark'] select,
[data-theme='dark'] textarea {
  background: #1a1d24 !important;
  color: #e8e6e0 !important;
  border-color: #3a3f4a !important;
}
[data-theme='dark'] .nav-btn { color: #e8e6e0; }
[data-theme='dark'] .nav-btn.active { color: #f0b429; }
[data-theme='dark'] .header-title { color: #f5c548; }
[data-theme='dark'] .form-label,
[data-theme='dark'] .field-label { color: #c5c3bd; }
[data-theme='dark'] .info-box,
[data-theme='dark'] .alert { background: #2a2f38; border-color: #3a3f4a; color: #e8e6e0; }
[data-theme='dark'] .biz-tag,
[data-theme='dark'] .keyword-pill { background: #2a2f38; color: #e8e6e0; border-color: #3a3f4a; }
[data-theme='dark'] .blood-pill { background: rgba(229,115,115,.2); color: #ff8a80; }
[data-theme='dark'] .disclaimer { background: #2a2f38; color: #c5c3bd; border-color: #3a3f4a; }
[data-theme='dark'] .member-photo-init,
[data-theme='dark'] .biz-card-init,
[data-theme='dark'] .mat-card-init { background: linear-gradient(135deg,#1a3a5c,#2a5a8c); color: #f0b429; }

[data-theme='dark'] body {
  background-image: none;
  background: var(--light);
}

[data-theme='dark'] input[type=date],
[data-theme='dark'] input[type=email],
[data-theme='dark'] input[type=number],
[data-theme='dark'] input[type=password],
[data-theme='dark'] input[type=tel],
[data-theme='dark'] input[type=text],
[data-theme='dark'] input[type=url],
[data-theme='dark'] select,
[data-theme='dark'] textarea {
  background: #2a2e38 !important;
  color: var(--text) !important;
  border-color: #3f4654 !important;
}
[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: #888 !important;
}
[data-theme='dark'] input:focus,
[data-theme='dark'] select:focus,
[data-theme='dark'] textarea:focus {
  background: #313742 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(240,180,41,.15) !important;
}

[data-theme='dark'] .alert-success { background: #1e3a2a; color: #6dcb91; }
[data-theme='dark'] .alert-error   { background: #3e1d1a; color: #f5a097; }
[data-theme='dark'] .alert-info    { background: #1e2a3e; color: #87aef0; }
[data-theme='dark'] .alert-warn    { background: #3a2c10; color: #f5c870; }

[data-theme='dark'] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 100%);
}

[data-theme='dark'] .empty-state,
[data-theme='dark'] .loading-box {
  background: var(--white);
  color: var(--muted);
}

/* dark theme headers — keep gold but slightly muted */
[data-theme='dark'] .site-header {
  filter: brightness(0.85);
}

/* dark mode toggle button styling */
#dark-mode-toggle {
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #d4940a), var(--accent2, #f0b429));
  color: #fff;
  border: 2px solid rgba(255,255,255,.2);
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .2s ease, background .25s ease;
}
#dark-mode-toggle:hover {
  transform: scale(1.1) rotate(15deg);
}
@media(max-width:480px) {
  #dark-mode-toggle { bottom: 78px; left: 14px; width: 42px; height: 42px; }
}

/* prefers-color-scheme auto-detect */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    /* Auto-apply dark only if user hasn't explicitly chosen light */
  }
}


/* ─── 6. SUBTLE TYPOGRAPHY POLISH ─── */
body { line-height: 1.6; }
h1, h2, h3, .header-title, .card-title { letter-spacing: .3px; }
p { line-height: 1.65; }


/* ─── 7. SMOOTH PAGE TRANSITIONS ─── */
.page {
  animation: page-fadein .35s ease;
}
@keyframes page-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 2 ENHANCEMENTS — Modern App Feel
═══════════════════════════════════════════════════════════════ */

/* ─── 1. ENHANCED SKELETON LOADERS (improved) ─── */
.sk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--white);
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border);
}
.sk-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.sk-lines { flex: 1; }
.sk-line {
  height: 12px;
  margin-bottom: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.sk-line.w70 { width: 70%; }
.sk-line.w50 { width: 50%; }
.sk-line.w90 { width: 90%; }


/* ─── 2. ANIMATED STATS COUNTER ─── */
.stat-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}


/* ─── 3. GLOBAL SEARCH BAR (collapsible v2) ─── */
#global-search-toggle {
  background: linear-gradient(135deg, var(--accent, #d4940a), var(--accent2, #f0b429));
  border: 1.5px solid rgba(255,255,255,.4);
  color: #1a3a5c;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  margin: 0 6px;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px rgba(212,148,10,.3);
  vertical-align: middle;
}
#global-search-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(212,148,10,.5);
}
#global-search-toggle:hover {
  background: rgba(255,255,255,.22);
  transform: scale(1.06);
}
#global-search-bar {
  display: none;
  position: sticky;
  top: var(--nav-h, 50px);
  left: 0;
  right: 0;
  z-index: 199;
  background: linear-gradient(180deg, rgba(28,53,87,.98), rgba(28,53,87,.94));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 16px;
  border-bottom: 1px solid rgba(212,148,10,.3);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  animation: gsb-slide-down .3s ease;
}
#global-search-bar.open {
  display: block;
}
@keyframes gsb-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.global-search-wrap {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.global-search-input {
  flex: 1;
  height: 40px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.96);
  color: var(--primary);
  border-radius: 22px;
  padding: 0 16px 0 40px;
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  transition: all .25s ease;
  -webkit-appearance: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.global-search-input::placeholder {
  color: var(--muted);
}
.global-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(212,148,10,.3);
}
.global-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .92rem;
  color: var(--accent);
  pointer-events: none;
  transition: opacity .2s ease;
}
.global-search-input:focus + .global-search-icon,
.global-search-input:not(:placeholder-shown) + .global-search-icon {
  opacity: 0;
}
.global-search-input:focus,
.global-search-input:not(:placeholder-shown) {
  padding-left: 16px !important;
}
#global-search-close {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: .85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease;
}
#global-search-close:hover {
  background: rgba(255,255,255,.22);
}
.global-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 44px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.1);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1100;
  display: none;
  border: 1px solid var(--border);
}
.global-search-results.show { display: block; animation: gsr-fadein .2s ease; }
@keyframes gsr-fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.gsr-section {
  padding: 6px 12px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(212,148,10,.06);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.gsr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(226,221,213,.5);
  transition: background .15s ease;
  text-decoration: none;
  color: var(--text);
}
.gsr-item:hover { background: var(--light); }
.gsr-item:last-child { border-bottom: none; }
.gsr-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  color: #fff;
}
.gsr-body { flex: 1; min-width: 0; }
.gsr-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsr-sub {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.gsr-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}

@media(max-width: 600px) {
  #global-search-bar.open { max-height: 100px; padding: 10px 12px; }
  .global-search-wrap { max-width: none; }
  .global-search-results { right: 44px; }
}


/* ─── 4. STICKY HEADER WITH BLUR ─── */
nav {
  transition: backdrop-filter .3s ease, background .3s ease, box-shadow .3s ease;
}
nav.scrolled {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  background: rgba(28,53,87,.92) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}


/* ─── 5. MOBILE BOTTOM TAB NAVIGATION ─── */
#mobile-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  z-index: 1000;
  padding: 4px 0 max(4px, env(safe-area-inset-bottom));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255,254,251,.96);
}
#mobile-tabs .mt-row {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  max-width: 540px;
  margin: 0 auto;
}
.mt-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .2s ease, transform .15s ease;
  position: relative;
  min-height: 50px;
}
.mt-tab:active {
  transform: scale(0.92);
}
.mt-tab .mt-icon {
  font-size: 1.35rem;
  margin-bottom: 2px;
  line-height: 1;
  transition: transform .25s ease;
}
.mt-tab.active {
  color: var(--accent);
}
.mt-tab.active .mt-icon {
  transform: translateY(-2px);
}
.mt-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 0 0 3px 3px;
}
.mt-tab .mt-badge {
  position: absolute;
  top: 4px;
  right: 22%;
  background: #e74c3c;
  color: #fff;
  font-size: .55rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
}

@media(max-width: 768px) {
  #mobile-tabs { display: block; }
  body { padding-bottom: 64px; }
  /* Hide back-to-top when mobile tabs visible (already pushed up in phase 1) */
  #back-to-top { bottom: 80px; }
  #dark-mode-toggle { bottom: 80px; }
}

/* Dark mode mobile tabs */
[data-theme='dark'] #mobile-tabs {
  background: rgba(37,41,50,.96);
  border-top-color: var(--border);
}


/* ─── 6. PAGE FADE-IN ENHANCEMENT ─── */
.page-content-wrap {
  animation: page-fadein-soft .35s ease both;
}
@keyframes page-fadein-soft {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ─── You Tab Photo / Initials (mobile bottom tab) ─── */
.mt-tab .mt-photo {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto 2px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--accent, #d4940a) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 2px 4px rgba(212,148,10,.3) !important;
  background: var(--white, #fff) !important;
  transition: transform .25s ease, box-shadow .2s ease;
}
.mt-tab .mt-initials {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--accent, #d4940a), var(--accent2, #f0b429)) !important;
  color: #1a3a5c !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 2px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  letter-spacing: .2px !important;
  border: 2px solid var(--accent, #d4940a) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 2px 4px rgba(212,148,10,.3) !important;
  transition: transform .25s ease, box-shadow .2s ease;
}
.mt-tab.active .mt-photo,
.mt-tab.active .mt-initials {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 0 0 2px var(--accent, #d4940a), 0 3px 8px rgba(212,148,10,.5) !important;
}


/* ─── Verification Badges ─── */
.vb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.vb {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  border: 1px solid;
  line-height: 1.4;
}
.vb-verified  { background:#e8f5ee; color:#1b5e20; border-color:#a5d6a7; }
.vb-admin     { background:linear-gradient(135deg,#fff8e1,#fff3c4); color:#7a5800; border-color:#ffe082; box-shadow:0 1px 3px rgba(212,148,10,.2); }
.vb-approver  { background:#e3f2fd; color:#1565c0; border-color:#90caf9; }
.vb-photo     { background:#f3e5f5; color:#6a1b9a; border-color:#ce93d8; padding:2px 6px; }

[data-theme='dark'] .vb-verified  { background:#1e3a2a; color:#6dcb91; border-color:#2d5a44; }
[data-theme='dark'] .vb-admin     { background:#3a2c10; color:#f5c870; border-color:#5a4520; }
[data-theme='dark'] .vb-approver  { background:#1e2a3e; color:#87aef0; border-color:#2d4060; }
[data-theme='dark'] .vb-photo     { background:#2d1f3e; color:#c39bd3; border-color:#553868; }


/* ═══════════════════════════════════════════════════════════════
   WHATSAPP-STYLE CHAT UI
═══════════════════════════════════════════════════════════════ */

.chat-page-wrap { max-width: 1200px; margin: 0 auto; padding: 12px 0 6px; }
@media(min-width: 769px) {
  .chat-page-wrap { padding-top: 18px; }
}

.chat-app {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: calc(100vh - 220px);
  min-height: 480px;
  max-height: 720px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(28,53,87,.08);
  border: 1px solid var(--border);
  margin-top: 6px;
  margin-bottom: 48px;
}

/* ────── SIDEBAR ────── */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--light);
  min-width: 0;
}

.chat-sidebar-header {
  padding: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-sidebar-title { font-size: 1.1rem; font-weight: 800; }
.chat-sidebar-sub { font-size: .72rem; opacity: .85; margin-top: 3px; }
.chat-new-btn {
  background: var(--accent);
  color: #1a3a5c;
  border: none;
  width: 56px;
  height: auto;
  min-height: 50px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 2px 8px rgba(212,148,10,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  font-family: inherit;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.1;
  gap: 1px;
}
.chat-new-btn .nb-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.chat-new-btn .nb-label {
  font-size: .58rem;
  white-space: nowrap;
  letter-spacing: .2px;
}
.chat-new-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,148,10,.5);
}

.chat-search-bar {
  padding: 10px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.chat-search-bar { position: relative; }
.chat-search-bar input {
  width: 100%;
  height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 0 14px 0 36px;
  font-size: .85rem;
  font-family: inherit;
  outline: none;
  background: var(--light);
  color: var(--text);
}
.chat-search-bar::before {
  content: '🔍';
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  pointer-events: none;
  opacity: .55;
  transition: opacity .2s ease;
  z-index: 1;
}
.chat-search-bar input:focus,
.chat-search-bar input:not(:placeholder-shown) {
  border-color: var(--accent);
  background: var(--white);
  padding-left: 14px;
}
.chat-search-bar:has(input:focus)::before,
.chat-search-bar:has(input:not(:placeholder-shown))::before {
  opacity: 0;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.chat-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.04);
  transition: background .15s ease;
}
.chat-list-item:hover { background: rgba(0,0,0,.03); }
.chat-list-item.active { background: rgba(212,148,10,.1); border-left: 3px solid var(--accent); padding-left: 9px; }

.chat-list-avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
}
.chat-list-avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.chat-list-avatar-init {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #1a3a5c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .82rem;
}

.chat-list-body { flex: 1; min-width: 0; }
.chat-list-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.chat-list-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list-time {
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: 6px;
}
.chat-list-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-list-preview {
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.chat-list-preview.unread { color: var(--text); font-weight: 600; }
.chat-list-unread {
  background: var(--accent);
  color: #1a3a5c;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  min-width: 18px;
  text-align: center;
}

/* ────── MAIN ────── */
.chat-main {
  display: flex;
  flex-direction: column;
  background: #ebe6db;
  background-image: 
    radial-gradient(circle, rgba(212,148,10,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  min-width: 0;
}

.chat-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: var(--muted);
}
.chat-welcome-icon { font-size: 4rem; margin-bottom: 14px; opacity: .5; }
.chat-welcome-title { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin-bottom: 6px; }
.chat-welcome-sub { font-size: .92rem; }

.chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-thread-header {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.chat-back-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: none; /* hidden on desktop */
}
@media(max-width: 768px) {
  .chat-back-btn { display: flex; align-items: center; justify-content: center; }
}
.chat-thread-avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.chat-thread-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.4);
}
.chat-thread-avatar-init {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--accent);
  color: #1a3a5c;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .78rem;
  border: 2px solid rgba(255,255,255,.4);
}
.chat-thread-info { flex: 1; min-width: 0; }
.chat-thread-name {
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-thread-status { font-size: .72rem; opacity: .85; }
.chat-thread-menu {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s ease;
}
.chat-thread-menu:hover { background: rgba(255,255,255,.28); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px;
  font-size: .88rem;
}

.chat-date-sep {
  align-self: center;
  background: rgba(255,255,255,.85);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 12px;
  margin: 10px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.chat-bubble {
  max-width: 70%;
  padding: 8px 12px 6px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.chat-bubble.me {
  align-self: flex-end;
  background: #dcf8c6;
  color: #1a1a1a;
  border-bottom-right-radius: 4px;
}
.chat-bubble.them {
  align-self: flex-start;
  background: #fff;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
}
.chat-bubble-body { white-space: pre-wrap; }
.chat-bubble-time {
  font-size: .65rem;
  color: rgba(0,0,0,.45);
  text-align: right;
  margin-top: 2px;
  user-select: none;
}

.chat-input-bar {
  padding: 10px;
  background: var(--light);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-bar textarea {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: .92rem;
  resize: none;
  max-height: 120px;
  min-height: 40px;
  outline: none;
  background: var(--white);
  color: var(--text);
}
.chat-input-bar textarea:focus { border-color: var(--accent); }
.chat-send-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #1a3a5c;
  border: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(212,148,10,.3);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.chat-send-btn:hover { transform: scale(1.08); }
.chat-send-btn:disabled { opacity: .5; cursor: wait; }

/* ────── DARK MODE ────── */
[data-theme='dark'] .chat-main {
  background: #0a0e14;
  background-image: radial-gradient(circle, rgba(212,148,10,.06) 1px, transparent 1px);
}
[data-theme='dark'] .chat-bubble.me { background: #2d4a2d; color: #e8e6e0; }
[data-theme='dark'] .chat-bubble.them { background: #2a2e38; color: #e8e6e0; }
[data-theme='dark'] .chat-date-sep { background: rgba(40,44,52,.9); color: #ccc; }

/* ────── MOBILE ────── */
@media(max-width: 768px) {
  .chat-app {
    grid-template-columns: 1fr;
    height: calc(100vh - 160px);
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 44px;
  }
  .chat-main { display: none; }
  .chat-app.thread-open .chat-sidebar { display: none; }
  .chat-app.thread-open .chat-main { display: flex; }
}


/* ─── Matrimony Buttons: Uniform 2-Line Layout ─── */
.mat-actions {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 6px !important;
  padding: 10px 12px !important;
}
.mat-btn {
  flex: unset !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 10px 4px !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  min-height: 56px !important;
  border-radius: 10px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
.mat-btn > svg,
.mat-btn .mat-btn-icon {
  font-size: 1.15rem;
  line-height: 1;
  margin: 0;
}

/* Mobile: 2 rows of buttons */
@media(max-width: 540px) {
  .mat-actions { grid-template-columns: repeat(3, 1fr) !important; }
  .mat-btn { min-height: 60px !important; }
}


/* ─── Festival Widget Scroll ─── */
.fest-scroll-wrap { overflow: hidden; }
.fest-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.3) transparent;
  -webkit-overflow-scrolling: touch;
}
.fest-scroll::-webkit-scrollbar { height: 6px; }
.fest-scroll::-webkit-scrollbar-track { background: transparent; }
.fest-scroll::-webkit-scrollbar-thumb {
  background: rgba(124,58,237,.3);
  border-radius: 3px;
}
.fest-tile {
  scroll-snap-align: start;
  transition: transform .2s ease;
}
.fest-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124,58,237,.15);
}
[data-theme='dark'] .fest-tile {
  background: linear-gradient(135deg,#2a2f38,#1a1d24) !important;
  border-color: #4a3f5a !important;
  color: #e8e6e0;
}
[data-theme='dark'] .fest-tile > div {
  color: #e8e6e0 !important;
}


/* ─── FIX: Chat thread header forced visible ─── */
.chat-thread-header {
  background: linear-gradient(135deg, #1c3557, #264f82) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  min-height: 64px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 5 !important;
}
.chat-thread-name {
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #fff !important;
}
.chat-sidebar-header {
  background: linear-gradient(135deg, #1c3557, #264f82) !important;
  color: #fff !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  min-height: 64px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.chat-sidebar-title { color: #fff !important; font-weight: 800 !important; }

[data-theme='dark'] .chat-thread-header,
[data-theme='dark'] .chat-sidebar-header {
  background: linear-gradient(135deg, #0a1f3c, #1a3a5c) !important;
}