:root{
  --cream:#FBF6F1; --paper:#FFFDFB; --blush:#F4E1DF; --rose:#C1798A; --rose-deep:#7D4356;
  --gold:#B98B4E; --plum:#3E2A32; --line:#E6D2CC; --danger:#A8495A; --muted:#a3838a;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--plum);font-family:'Jost',sans-serif;font-weight:400;}
a{color:inherit;} button{font-family:inherit;cursor:pointer;}
input, textarea, select{font-family:inherit;}
:focus-visible{outline:2px solid var(--rose-deep); outline-offset:2px;}
.eyebrow{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-deep); font-weight:500;}
hr.divider-line{border:none; border-top:1px solid var(--line); margin:20px 0;}

.site-header{background:var(--paper); border-bottom:1px solid var(--line); padding:16px 24px; position:sticky; top:0; z-index:20;}
.header-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:38px; height:38px; color:var(--rose); flex-shrink:0;}
.brand-text h1{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.3rem; margin:0; color:var(--rose-deep); line-height:1.1;}
.brand-text .sub{font-size:.76rem; color:var(--muted);}
.header-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.who{font-size:.82rem; color:var(--muted);}
.who strong{color:var(--rose-deep); font-weight:500;}

.btn{border:1px solid var(--rose); background:transparent; color:var(--rose-deep); padding:8px 16px; border-radius:20px; font-size:.82rem; transition:background .15s;}
.btn:hover{background:var(--blush);}
.btn-solid{background:var(--rose); color:#fff; border-color:var(--rose);}
.btn-solid:hover{background:var(--rose-deep); border-color:var(--rose-deep);}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#fff;}
.btn-gold:hover{background:#9c7440; border-color:#9c7440;}
.btn-text{border:none; background:none; color:var(--rose-deep); text-decoration:underline; padding:4px 2px; font-size:.82rem;}
.btn-danger{border-color:var(--danger); color:var(--danger);}
.btn-danger:hover{background:#fbeaec;}
.btn-sm{padding:6px 13px; font-size:.76rem;}
.btn[disabled]{opacity:.4; cursor:not-allowed;}

.nav-row{display:flex; gap:6px; margin-top:12px; overflow-x:auto; padding-bottom:2px;}
.nav-btn{background:none; border:none; padding:8px 14px; font-size:.82rem; color:var(--muted); border-radius:16px; white-space:nowrap; position:relative;}
.nav-btn.active{background:var(--rose-deep); color:#fff;}
.nav-btn .badge{position:absolute; top:2px; right:2px; background:var(--gold); color:#fff; font-size:.62rem; border-radius:8px; padding:1px 5px;}

main{max-width:1040px; margin:0 auto; padding:22px 20px 100px;}
.view-title{font-family:'Cormorant Garamond', serif; font-weight:600; color:var(--rose-deep); font-size:1.5rem; margin:0 0 4px;}
.view-sub{font-size:.82rem; color:var(--muted); margin-bottom:20px;}

.controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px;}
.search-wrap{flex:1; min-width:200px; background:var(--paper); border:1px solid var(--line); border-radius:22px; display:flex; align-items:center; padding:9px 16px; gap:8px;}
.search-wrap svg{width:15px; height:15px; color:var(--rose-deep); flex-shrink:0;}
.search-wrap input{border:none; outline:none; background:none; width:100%; font-size:.88rem; color:var(--plum);}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;}
.card{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:14px; cursor:pointer; transition:box-shadow .15s, transform .15s; display:flex; gap:12px; align-items:center;}
.card:hover{box-shadow:0 6px 16px rgba(125,67,86,.1); transform:translateY(-1px);}
.avatar{width:44px; height:44px; border-radius:50%; background:var(--blush); color:var(--rose-deep); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.1rem; flex-shrink:0; overflow:hidden;}
.avatar img{width:100%; height:100%; object-fit:cover;}
.card-name{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.08rem; margin:0;}
.card-meta{font-size:.74rem; color:var(--muted); margin-top:2px;}

.ribbon-tag{display:inline-flex; align-items:center; font-size:.66rem; color:#fff; padding:3px 10px 3px 12px; clip-path:polygon(9px 0,100% 0,100% 100%,9px 100%,0 50%); background:var(--rose); line-height:1.4;}
.ribbon-tag.gold{background:var(--gold);}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}

.empty-state{text-align:center; padding:50px 20px; color:var(--muted);}
.empty-state h3{font-family:'Cormorant Garamond', serif; color:var(--rose-deep); font-size:1.3rem; margin:0 0 6px;}

.loading-screen, .gate-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.loading-screen{flex-direction:column; gap:14px; color:var(--muted);}
.gate-card{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:36px 32px; max-width:420px; width:100%; box-shadow:0 10px 30px rgba(125,67,86,.08);}
.gate-card .brand-mark{display:block; margin:0 auto 12px; width:48px; height:48px;}
.gate-card h2{font-family:'Cormorant Garamond', serif; font-weight:600; text-align:center; color:var(--rose-deep); font-size:1.4rem; margin:0 0 6px;}
.gate-card p.desc{text-align:center; font-size:.84rem; color:var(--muted); margin:0 0 22px;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--rose-deep); font-weight:500; margin-bottom:5px;}
.field input, .field textarea, .field select{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:6px; background:var(--cream); font-size:.88rem; color:var(--plum);}
.field textarea{resize:vertical; min-height:64px;}
.field .hint{font-size:.7rem; color:var(--muted); margin-top:3px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.field-row{grid-template-columns:1fr;}}
.form-error{color:var(--danger); font-size:.8rem; margin-bottom:12px; min-height:1em;}
.form-note{font-size:.78rem; color:var(--muted); margin-bottom:14px;}
.form-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px; flex-wrap:wrap;}
.notes-box{background:var(--blush); border:1px dashed var(--rose); border-radius:6px; padding:11px 13px; margin-top:4px;}

.modal-backdrop{position:fixed; inset:0; background:rgba(62,42,50,.35); display:flex; align-items:flex-start; justify-content:center; padding:32px 14px; overflow-y:auto; z-index:100;}
.modal{background:var(--paper); border-radius:10px; max-width:560px; width:100%; padding:28px 26px 24px; position:relative; box-shadow:0 20px 50px rgba(62,42,50,.25);}
.modal.wide{max-width:700px;}
.modal-close{position:absolute; top:14px; right:14px; background:none; border:none; color:var(--muted); width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.modal-close:hover{background:var(--blush); color:var(--rose-deep);}
.modal h2{font-family:'Cormorant Garamond', serif; font-weight:600; color:var(--rose-deep); font-size:1.4rem; margin:0 0 4px;}
.modal .modal-sub{font-size:.8rem; color:var(--muted); margin-bottom:18px;}

.detail-name{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.6rem; margin:0 0 2px;}
.detail-section{margin-bottom:16px;}
.detail-section .eyebrow{margin-bottom:5px;}
.detail-value{font-size:.9rem; line-height:1.5;}

.family-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);}
.family-row .avatar{width:36px; height:36px; font-size:.9rem;}
.family-row .fr-fields{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.photo-btn{font-size:.72rem; color:var(--rose-deep); text-decoration:underline; background:none; border:none;}
.photo-upload-row{display:flex; align-items:center; gap:12px; margin-bottom:14px;}

.leader-row, .code-row, .district-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.leader-row:last-child, .code-row:last-child, .district-row:last-child{border-bottom:none;}
.you-tag{font-size:.68rem; color:var(--gold); margin-left:6px;}
.code-chip{font-family:monospace; background:var(--blush); padding:4px 10px; border-radius:6px; font-size:.85rem; letter-spacing:.03em;}
.used-tag{font-size:.68rem; color:var(--muted);}

.subtab-row{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap;}
.subtab-btn{background:var(--blush); border:none; padding:7px 14px; border-radius:14px; font-size:.78rem; color:var(--rose-deep);}
.subtab-btn.active{background:var(--rose-deep); color:#fff;}

.comp-card{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:12px;}
.comp-card .arrow{color:var(--gold); margin:0 6px;}
.report-card{background:var(--blush); border-radius:6px; padding:10px 12px; margin-bottom:8px; font-size:.85rem;}
.report-card .rdate{font-size:.7rem; color:var(--muted); margin-bottom:3px;}

.conv-row{cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.conv-row:hover{background:var(--blush);}
.conv-name{font-size:.9rem; font-weight:500;}
.conv-preview{font-size:.78rem; color:var(--muted); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.unread-dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;}

.thread{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; padding:6px 2px; margin-bottom:14px;}
.msg-bubble{max-width:78%; padding:9px 13px; border-radius:14px; font-size:.86rem; line-height:1.4;}
.msg-mine{align-self:flex-end; background:var(--rose); color:#fff; border-bottom-right-radius:3px;}
.msg-theirs{align-self:flex-start; background:var(--blush); color:var(--plum); border-bottom-left-radius:3px;}
.msg-time{font-size:.65rem; opacity:.75; margin-top:3px;}

.fab{position:fixed; bottom:26px; right:26px; width:54px; height:54px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 8px 22px rgba(185,139,78,.4); z-index:30;}
.fab:hover{background:#9c7440;}
.fab svg{width:22px; height:22px;}

.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--rose-deep); color:#fff; padding:11px 20px; border-radius:22px; font-size:.84rem; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}