@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;600;700;800&family=Tajawal:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#063c4d;--navy2:#07566b;--teal:#07889a;--green:#0b8a62;--gold:#c9a44c;
  --bg:#f5f8fa;--card:#fff;--text:#15313b;--muted:#6f8189;--line:#dce6e9;
  --danger:#c74242;--blue:#287ebc;--purple:#6e62c7;--shadow:0 12px 34px rgba(18,55,68,.10);
  --radius:16px;--radius-sm:11px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Cairo',Tahoma,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}button,input,textarea,select{font:inherit}button,a{ -webkit-tap-highlight-color:transparent }button{cursor:pointer}a{color:inherit}.container{width:min(1240px,94%);margin:auto}.section-kicker{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:800;font-size:12px;letter-spacing:.2px}.section-kicker.light{color:#d7f3f2}.full{width:100%}.wide{grid-column:1/-1}.wide-row{grid-column:1/-1}.muted{color:var(--muted)}[hidden]{display:none!important}

/* Buttons */
.primary-btn,.outline-btn,.success-btn,.blue-btn,.danger-btn,.small-action,.text-btn,.login-btn,.logout-btn,.notification-btn,.mobile-menu,.side-toggle,.password-toggle,.text-link{border:0;border-radius:10px;transition:.22s ease;font-weight:700}
.primary-btn{background:linear-gradient(135deg,var(--navy2),var(--teal));color:white;padding:11px 16px;box-shadow:0 7px 18px rgba(7,86,107,.18)}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(7,86,107,.25)}
.outline-btn{background:#fff;color:var(--navy);border:1px solid #cfdde2;padding:10px 14px}.outline-btn:hover{border-color:var(--teal);color:var(--teal);background:#f7fcfd}
.success-btn{background:#0a8b60;color:#fff;padding:10px 14px}.success-btn:hover{background:#087653;transform:translateY(-1px)}
.blue-btn{background:#277fbd;color:#fff;padding:10px 14px}.danger-btn{background:#c73f3f;color:#fff;padding:10px 14px}.text-btn,.text-link{background:transparent;color:var(--teal);padding:6px 8px}.text-btn:hover,.text-link:hover{background:#eaf6f7}.danger-link{border:0;background:#fff0f0;color:var(--danger);font-weight:700;padding:8px 10px;border-radius:9px}.icon-btn{min-width:42px}.large{padding:13px 19px;font-size:15px}

/* Form controls */
label{display:block;color:#435c64;font-size:13px;font-weight:700;margin:0 0 13px}input,textarea,select{width:100%;border:1px solid #cfdbdf;border-radius:10px;background:#fff;padding:10px 12px;color:var(--text);outline:none;transition:.2s ease}input:focus,textarea:focus,select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(7,136,154,.10)}textarea{resize:vertical}.form-status{font-size:13px;margin-top:10px;min-height:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.modal-actions{display:flex;justify-content:flex-start;gap:8px;margin-top:18px}.switch-row{display:flex!important;align-items:center;gap:9px;background:#f7fafb;border:1px solid #e3eaed;border-radius:9px;padding:10px 12px}.switch-row input{width:auto!important;margin:0!important}

/* Public header */
.public-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid #e1eaed;box-shadow:0 6px 20px rgba(20,58,72,.04)}.header-inner{min-height:78px;display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(180px,1fr);align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}.brand img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid #eef3f4}.brand strong{display:block;font-size:17px;white-space:nowrap}.brand small{display:block;color:var(--muted);font-size:11px;white-space:nowrap}.public-nav{display:flex;align-items:center;gap:8px}.public-nav a{text-decoration:none;padding:10px 13px;border-radius:10px;font-weight:700;font-size:14px;position:relative}.public-nav a:hover,.public-nav a.active{color:var(--teal);background:#f1f9fa}.public-nav a.active:after{content:"";position:absolute;bottom:-14px;right:18%;left:18%;height:3px;background:var(--teal);border-radius:3px}.login-btn{justify-self:end;text-decoration:none;background:var(--navy);color:#fff;padding:11px 16px}.login-btn:hover{background:var(--navy2);transform:translateY(-1px)}.mobile-menu{display:none;background:#edf5f6;color:var(--navy);width:42px;height:42px;font-size:21px}

/* Tree public */
.tree-hero{position:relative;padding:42px 0 70px;min-height:690px;overflow:hidden;background:radial-gradient(circle at 50% 18%,#fff 0,#fbfdfd 44%,#edf5f6 100%)}.leaf{position:absolute;width:360px;height:360px;opacity:.14;pointer-events:none;background:radial-gradient(ellipse at center,rgba(7,136,154,.2),transparent 68%);filter:blur(2px)}.leaf-a{top:20px;right:-100px}.leaf-b{bottom:0;left:-120px}.tree-page{position:relative;z-index:1}.tree-title{display:flex;align-items:center;justify-content:center;gap:20px;text-align:center;margin-bottom:24px}.hero-logo{width:116px;height:116px;border-radius:50%;object-fit:cover;box-shadow:0 10px 24px rgba(14,58,70,.12);border:4px solid #fff}.tree-title h1{font-size:38px;line-height:1.25;margin:4px 0;color:#102f39}.tree-title p{margin:0;color:#60757d;font-size:16px}.tree-toolbar{background:#fff;border:1px solid #dce6e9;border-radius:15px;padding:11px;display:flex;gap:12px;align-items:center;box-shadow:0 9px 28px rgba(20,59,72,.08);position:sticky;top:90px;z-index:25}.search-wrap{display:flex;align-items:center;gap:8px;border:1px solid #d4e0e3;border-radius:11px;background:#fff;padding:0 12px;flex:1;min-width:260px}.search-wrap input{border:0!important;box-shadow:none!important;padding:10px 0;background:transparent}.tree-view-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.zoom-value{min-width:50px;text-align:center;font-size:12px;color:#536c74;font-weight:800}.tree-context-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:14px 2px 10px;color:#667b83;font-size:12px}.tree-breadcrumb{background:#e8f5f6;color:var(--navy2);padding:7px 11px;border-radius:999px;font-weight:800;white-space:nowrap}.tree-viewport{min-height:400px;overflow:auto;background:rgba(255,255,255,.86);border:1px solid #dbe7ea;border-radius:18px;box-shadow:var(--shadow);padding:35px 28px;scrollbar-color:#a8c5cc transparent;outline:none}.tree-viewport:focus{box-shadow:0 0 0 3px rgba(7,136,154,.08),var(--shadow)}.tree-canvas{width:max-content;min-width:100%;display:flex;justify-content:center;align-items:flex-start;transform-origin:top center;padding:4px 24px 34px}.tree-node-wrap{display:flex;flex-direction:column;align-items:center;position:relative}.tree-node-card{position:relative;display:grid;grid-template-columns:44px minmax(115px,1fr) auto;align-items:center;gap:9px;min-width:190px;max-width:230px;padding:10px 11px;border:1px solid #ccdce1;background:#fff;border-radius:13px;box-shadow:0 6px 16px rgba(19,60,73,.08);transition:.22s ease;z-index:2}.tree-node-card:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 11px 23px rgba(19,60,73,.13)}.tree-node-card.open{border:2px solid var(--teal);background:#fbffff}.tree-node-card.match{box-shadow:0 0 0 4px rgba(201,164,76,.25),0 10px 23px rgba(19,60,73,.13);border-color:var(--gold)}.node-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d8eff1,#eef8f8);color:var(--navy);font-weight:900;border:1px solid #c7e1e5}.node-text{text-align:right;min-width:0}.node-text b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-text small{display:block;font-size:10px;color:#74878e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.node-actions{display:flex;flex-direction:column;gap:3px}.node-mini-btn{border:0;background:#edf6f7;color:var(--navy2);width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-size:12px;transition:.2s}.node-mini-btn:hover{background:var(--teal);color:#fff;transform:scale(1.08)}.children-count{position:absolute;top:-8px;left:-7px;background:var(--navy2);color:#fff;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:10px;font-weight:800;border:2px solid #fff}.expand-indicator{position:absolute;bottom:-17px;right:50%;transform:translateX(50%);width:26px;height:26px;border-radius:50%;border:1px solid #c8dbe0;background:#fff;color:var(--navy2);display:grid;place-items:center;font-size:12px;font-weight:900}.tree-children{display:flex;gap:25px;align-items:flex-start;justify-content:center;position:relative;padding-top:46px}.tree-children:before{content:"";position:absolute;top:22px;right:calc(var(--edge-start,0px));left:calc(var(--edge-end,0px));height:1px;background:#88acb5}.tree-children>.tree-node-wrap:before{content:"";position:absolute;top:-24px;right:50%;height:24px;border-right:1px solid #88acb5}.tree-node-wrap>.tree-children:after{content:"";position:absolute;top:0;right:50%;height:22px;border-right:1px solid #88acb5}.tree-generation{position:absolute;right:8px;top:8px;font-size:9px;color:#87a0a7;background:#f1f6f7;padding:3px 6px;border-radius:999px}.tree-hint{text-align:center;color:#6b7e85;font-size:12px;margin-top:10px}.tree-empty{padding:55px 30px;text-align:center;color:#7b8e95}.tree-fullscreen-open{overflow:hidden}.tree-fullscreen-open .public-header{display:none}.tree-fullscreen-open .tree-hero{padding:0}.tree-fullscreen-open .tree-page{width:100%;max-width:none}.tree-fullscreen-open .tree-title,.tree-fullscreen-open .tree-context-bar,.tree-fullscreen-open .tree-hint{display:none}.tree-fullscreen-open .tree-toolbar{position:fixed;top:10px;right:10px;left:10px;z-index:210}.tree-fullscreen-open .tree-viewport{position:fixed;inset:0;z-index:200;border-radius:0;padding-top:90px;background:#f9fcfc}

/* Public supporting sections */
.about-section,.contact-section{padding:68px 0}.about-box,.compact-contact{background:#fff;border:1px solid #dfe9ec;border-radius:20px;box-shadow:var(--shadow);padding:30px;display:flex;align-items:center;justify-content:space-between;gap:30px}.about-box h2,.compact-contact h2{margin:5px 0 8px;font-size:26px}.about-box p,.compact-contact p{margin:0;color:#667a82;max-width:760px}.about-box img{width:120px;height:120px;border-radius:50%;object-fit:cover}.contact-section{padding-top:0}.contact-actions{display:flex;gap:9px;flex-wrap:wrap}
.social-rail{position:fixed;left:18px;top:42%;z-index:70;display:grid;gap:9px}.social-btn{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;box-shadow:0 9px 22px rgba(0,0,0,.16);transition:.25s ease}.social-btn svg{width:23px;height:23px;fill:currentColor}.social-btn.facebook{background:#1877f2}.social-btn.instagram{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.social-btn:hover{transform:translateX(6px) rotate(-5deg) scale(1.08);box-shadow:0 13px 28px rgba(0,0,0,.22)}
.floating-stack{position:fixed;right:18px;bottom:22px;z-index:75;display:grid;gap:8px}.floating-message{border:0;background:var(--navy);color:#fff;border-radius:999px;padding:9px 13px 9px 16px;display:flex;align-items:center;gap:7px;box-shadow:0 10px 28px rgba(5,57,73,.25);transition:.23s}.floating-message.secondary{background:#fff;color:var(--navy);border:1px solid #d0e0e4}.floating-message:hover{transform:translateY(-3px) scale(1.02)}.floating-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14)}.secondary .floating-icon{background:#e8f5f6}.floating-message b{font-size:12px}.visitor-reply-badge{position:absolute;top:-6px;left:-4px;background:#d23e3e;color:white;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;border:2px solid white}
.drawer-overlay{position:fixed;inset:0;background:rgba(12,38,47,.35);z-index:89;opacity:0;pointer-events:none;transition:.25s}.drawer-overlay.show{opacity:1;pointer-events:auto}.contact-drawer{position:fixed;top:0;bottom:0;left:0;width:min(420px,94vw);background:#fff;z-index:90;padding:28px 24px;box-shadow:18px 0 55px rgba(17,45,55,.19);transform:translateX(-105%);transition:.28s ease;overflow:auto}.contact-drawer.show{transform:translateX(0)}.drawer-close{position:absolute;left:15px;top:13px;border:0;background:#eef4f5;color:var(--navy);width:34px;height:34px;border-radius:50%;font-size:22px;display:grid;place-items:center}.drawer-close:hover{background:#dfeff1;transform:rotate(6deg)}.contact-drawer h3{font-size:23px;margin:12px 0 8px}.contact-drawer>p{color:#6e8188;font-size:13px}.contact-icon{width:65px;height:65px;border-radius:50%;display:grid;place-items:center;background:#e5f4f5;color:var(--navy2);font-size:27px;margin:12px 0}.contact-icon.small{width:48px;height:48px;font-size:20px;margin:0}.ticket-success{background:#ebf8f2;border:1px solid #bfe8d5;color:#196e52;padding:12px;border-radius:10px;margin-top:10px}.ticket-success b{display:block;font-size:18px;letter-spacing:.5px;margin-top:3px}.ticket-success button{margin-top:8px}

/* Modals / chat */
.modal{position:fixed;inset:0;z-index:120;background:rgba(11,37,46,.43);display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(2px)}.modal.show{display:flex}.modal-card{position:relative;background:#fff;border-radius:18px;width:min(520px,96vw);max-height:92vh;overflow:auto;padding:28px;box-shadow:0 30px 80px rgba(12,39,48,.25);animation:modalIn .24s ease}.wide-modal{width:min(820px,96vw)}@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}.modal-heading{display:flex;gap:12px;align-items:center;margin-bottom:17px}.modal-heading h3{margin:0;font-size:20px}.modal-heading p{margin:3px 0 0;color:var(--muted);font-size:12px}.ticket-lookup{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end}.ticket-lookup label{margin:0}.ticket-lookup button{height:42px;margin-bottom:1px}.empty-state{min-height:180px;display:grid;place-items:center;text-align:center;color:#82939a;background:#f8fafb;border:1px dashed #d8e3e6;border-radius:12px;padding:18px}.empty-state.compact{min-height:95px;margin-top:18px}.visitor-conversation{margin-top:18px}.ticket-summary{display:flex;justify-content:space-between;gap:15px;background:#f5f9fa;border:1px solid #e0eaed;padding:11px 13px;border-radius:11px;margin-bottom:12px}.ticket-summary small,.ticket-summary b{display:block}.ticket-chip{display:inline-block;background:#edf6f7;color:var(--navy2);padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;margin-top:4px}.chat-thread{display:flex;flex-direction:column;gap:9px;max-height:420px;overflow:auto;padding:10px 4px}.bubble{max-width:83%;padding:11px 13px;border-radius:14px;white-space:pre-wrap;font-size:13px}.bubble.visitor{align-self:flex-start;background:#edf3f5;border-bottom-left-radius:4px}.bubble.admin{align-self:flex-end;background:#e2f4ee;color:#185f4a;border-bottom-right-radius:4px}.bubble small{display:block;margin-top:5px;font-size:9px;opacity:.68}.person-modal-card{text-align:center}.person-avatar{width:74px;height:74px;border-radius:50%;background:#e7f4f5;color:var(--navy);display:grid;place-items:center;font-size:29px;font-weight:900;margin:0 auto 10px}.person-modal-card h3{margin:5px 0}.person-modal-card>p{color:var(--muted);margin:0}.person-details{text-align:right;margin-top:18px;background:#f6f9fa;border-radius:11px;padding:14px;font-size:13px;line-height:2}.toast-stack{position:fixed;top:92px;left:18px;z-index:300;display:grid;gap:8px}.toast{background:#fff;border-right:4px solid var(--teal);box-shadow:0 12px 32px rgba(14,48,58,.16);border-radius:10px;padding:10px 12px;min-width:250px;max-width:360px;animation:toastIn .25s ease}.toast.success{border-color:#0a9a69}.toast.error{border-color:#cc4545}.toast b{display:block;font-size:13px}.toast span{font-size:11px;color:var(--muted)}@keyframes toastIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
footer{background:#062f3d;color:#dbe8eb;padding:20px 0}.footer-row{display:flex;justify-content:space-between;gap:20px;font-size:11px}

/* Login */
.login-page{min-height:100vh;background:linear-gradient(135deg,#edf5f6,#fff)}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,42%) 1fr}.login-brand-panel{position:relative;background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:70px clamp(30px,6vw,90px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;overflow:hidden}.login-brand-panel:before{content:"";position:absolute;width:460px;height:460px;border:80px solid rgba(255,255,255,.035);border-radius:50%;left:-200px;bottom:-180px}.back-site{position:absolute;top:25px;right:30px;text-decoration:none;color:#d8edf0;font-size:12px}.login-logo{width:125px;height:125px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,.85);box-shadow:0 15px 32px rgba(0,0,0,.18);margin-bottom:20px}.login-brand-panel h1{font-size:34px;line-height:1.35;margin:6px 0 10px}.login-brand-panel>p{font-size:17px;color:#cfe4e8;margin:0}.login-features{display:grid;gap:8px;margin-top:28px;color:#d7e9ec;font-size:13px}.login-form-panel{display:flex;align-items:center;justify-content:center;padding:35px}.login-card{width:min(460px,100%);background:#fff;border:1px solid #dce6e9;border-radius:20px;padding:30px;box-shadow:0 18px 50px rgba(12,48,60,.10)}.login-card-head{display:flex;gap:12px;align-items:center;margin-bottom:22px}.login-card-head h2{margin:0;font-size:24px}.login-card-head p{margin:3px 0 0;color:var(--muted);font-size:12px}.login-lock{width:50px;height:50px;border-radius:14px;background:#eaf5f6;display:grid;place-items:center;font-size:22px}.password-wrap{position:relative}.password-wrap input{padding-left:48px}.password-toggle{position:absolute;left:6px;top:5px;width:36px;height:34px;background:#edf4f5}.login-submit{padding:13px;margin-top:4px}.text-link{display:block;margin:10px auto 0}.recovery-result{margin-top:14px;padding-top:14px;border-top:1px solid #e4ebed}.account-found{background:#eef8f4;border:1px solid #d0ebde;border-radius:11px;padding:12px;margin-bottom:14px}.account-found span,.account-found small,.account-found b{display:block}.account-found span{font-size:11px;color:#4c7768}.account-found b{font-size:17px}.account-found small{color:#6f8580}.recovery-note{font-size:10px;color:#7e8e94;background:#f7fafb;padding:10px;border-radius:9px;margin-top:18px}

/* Admin shell */
.admin-page{background:#f2f6f8}.admin-layout{min-height:100vh;display:grid;grid-template-columns:245px minmax(0,1fr)}.admin-sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#043c4c,#063544);color:#e8f3f4;padding:18px 13px;display:flex;flex-direction:column;z-index:100;box-shadow:-7px 0 22px rgba(8,47,60,.08)}.admin-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;border-bottom:1px solid rgba(255,255,255,.1)}.admin-brand img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fff}.admin-brand strong,.admin-brand small{display:block}.admin-brand small{color:#a9c6ce;font-size:10px}.sidebar-profile{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);color:#fff;border-radius:13px;padding:10px;margin:14px 0;display:flex;gap:9px;align-items:center;text-align:right;width:100%}.sidebar-profile:hover{background:rgba(255,255,255,.09)}.sidebar-profile img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.35)}.sidebar-profile div{min-width:0}.sidebar-profile b,.sidebar-profile small,.sidebar-profile span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-profile b{font-size:12px}.sidebar-profile small{font-size:10px;color:#bed4da}.sidebar-profile span{font-size:8px;color:#90b4bd;margin-top:2px}.admin-nav{display:grid;gap:4px}.admin-nav button{border:0;background:transparent;color:#d6e8ec;padding:10px 12px;border-radius:9px;text-align:right;font-weight:700;font-size:12px;display:flex;align-items:center;gap:7px}.admin-nav button:hover,.admin-nav button.active{background:rgba(10,152,173,.25);color:#fff}.nav-badge{margin-right:auto;background:#df4b4b;color:#fff;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font-size:9px}.nav-badge.orange{background:#e89e28}.logout-btn{margin-top:auto;background:transparent;color:#ff9b9b;text-align:right;padding:10px 12px}.logout-btn:hover{background:rgba(255,80,80,.08)}.admin-main{min-width:0;padding:20px}.admin-top{min-height:70px;background:#fff;border:1px solid #dfe8eb;border-radius:15px;padding:11px 16px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;gap:14px;box-shadow:0 6px 20px rgba(18,57,69,.04)}.admin-top-start,.admin-top-actions{display:flex;align-items:center;gap:10px}.admin-top h1{margin:0;font-size:20px}.admin-top p{margin:2px 0 0;color:var(--muted);font-size:10px}.side-toggle{display:none;width:40px;height:40px;background:#edf5f6;color:var(--navy)}.notification-btn{position:relative;background:#f3f7f8;width:40px;height:40px}.notification-btn span{position:absolute;top:-4px;left:-4px;background:#d84242;color:#fff;border-radius:50%;min-width:18px;height:18px;display:grid;place-items:center;font-size:8px}.admin-view{display:none}.admin-view.active{display:block;animation:viewIn .22s ease}@keyframes viewIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.panel{background:#fff;border:1px solid #dce6e9;border-radius:15px;padding:17px;box-shadow:0 5px 18px rgba(18,57,69,.04)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.panel-head h3{margin:0;font-size:17px}.panel-head p{margin:2px 0 0;color:var(--muted);font-size:10px}.panel-actions{display:flex;gap:8px;flex-wrap:wrap}.welcome-strip{background:linear-gradient(135deg,#fff,#eef8f8);border:1px solid #d9e7e9;border-radius:18px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.welcome-strip h2{margin:4px 0;font-size:22px}.welcome-strip p{margin:0;color:var(--muted);font-size:12px}.welcome-strip img{width:78px;height:78px;border-radius:50%;object-fit:cover}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.summary-card{position:relative;overflow:hidden;background:#fff;border:1px solid #dce6e9;border-radius:14px;padding:16px;box-shadow:0 4px 14px rgba(18,57,69,.04)}.summary-card:after{content:"";position:absolute;left:-15px;bottom:-25px;width:80px;height:80px;border-radius:50%;background:rgba(7,136,154,.08)}.summary-card span,.summary-card small,.summary-card b{display:block}.summary-card span{font-size:11px;color:#527079}.summary-card b{font-size:28px;color:var(--navy);margin:3px 0}.summary-card small{font-size:9px;color:#89999e}.summary-card.blue b{color:#267ebc}.summary-card.green b{color:#0b8a62}.summary-card.purple b{color:#6d61c5}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #edf2f3;padding:10px 2px}.list-item:last-child{border-bottom:0}.list-item .main{min-width:0}.list-item b,.list-item small{display:block}.list-item b{font-size:12px}.list-item small{font-size:9px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:380px}.status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:800;white-space:nowrap}.status.read{background:#e8f6ef;color:#207054}.status.new{background:#ffeded;color:#b33f3f}.status.pending{background:#fff5dc;color:#9d6b08}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.permissions-list{display:flex;gap:6px;flex-wrap:wrap}.permission-pill{display:inline-flex;background:#edf5f6;color:#315f69;border:1px solid #d9e7e9;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:700}

/* Admin tree */
.tree-admin-panel{padding:20px}.admin-tree-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}.admin-tree-summary>div{background:#f5f9fa;border:1px solid #e1eaed;border-radius:11px;padding:10px 12px}.admin-tree-summary b,.admin-tree-summary span{display:block}.admin-tree-summary b{font-size:20px;color:var(--navy)}.admin-tree-summary span{font-size:9px;color:var(--muted)}.admin-tree-toolbar{display:grid;grid-template-columns:1.3fr .7fr .6fr;gap:9px;margin-bottom:12px}.admin-search{min-width:0}.admin-tree-list{display:grid;gap:8px}.tree-admin-row{display:grid;grid-template-columns:minmax(240px,1.3fr) minmax(180px,.8fr) auto;align-items:center;gap:12px;border:1px solid #dfe8eb;border-radius:12px;padding:12px;background:#fff;transition:.18s}.tree-admin-row:hover{border-color:#b8d6dc;box-shadow:0 6px 16px rgba(15,59,72,.06)}.tree-admin-main{display:flex;gap:10px;align-items:center;min-width:0}.tree-admin-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e8f5f6;color:var(--navy);font-weight:900;flex:0 0 auto}.tree-admin-main b,.tree-admin-main span{display:block}.tree-admin-main b{font-size:12px}.tree-admin-main span{font-size:9px;color:var(--muted)}.tree-relations{font-size:9px;color:#657a82;line-height:1.9}.children-preview{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.children-preview span{background:#eef6f7;border-radius:999px;padding:3px 7px;font-size:8px;color:#54727a}.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.small-action{padding:7px 9px;background:#f2f6f7;color:#355e68;border:1px solid #dce6e9;font-size:9px}.small-action:hover{background:#e6f2f4}.small-action.approve{color:#127252;background:#e8f6ef}.small-action.reject{color:#ad3f3f;background:#fff0f0}.generation-badge{display:inline-flex;background:#eef1fb;color:#5a61a8;border-radius:999px;padding:3px 7px;font-size:8px;margin-top:4px}

/* Messages */
.messages-layout{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(380px,1.2fr);gap:12px}.inbox{padding:0;overflow:hidden}.inbox .panel-head{padding:15px 15px 10px;margin:0;border-bottom:1px solid #e7edef}.inbox .panel-head input{width:170px}.message-row{display:grid;grid-template-columns:40px 1fr;gap:9px;padding:11px 14px;border-bottom:1px solid #edf2f3;cursor:pointer;transition:.18s}.message-row:hover,.message-row.active{background:#f0f8f9}.message-row.unread{border-right:4px solid var(--teal)}.msg-avatar{width:38px;height:38px;border-radius:50%;background:#e8f5f6;color:var(--navy);display:grid;place-items:center;font-weight:900}.msg-body{min-width:0}.msg-body b,.msg-body p,.msg-body time{display:block}.msg-body b{font-size:11px}.msg-body p{margin:2px 0;font-size:9px;color:#60767e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg-body time{font-size:8px;color:#95a2a7}.conversation{min-height:580px}.conversation-head{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e5edef;padding-bottom:12px;margin-bottom:10px}.conversation-head h3{margin:0}.conversation-head p{margin:2px 0 0;color:var(--muted);font-size:10px}.reply-box{border-top:1px solid #e4ecee;padding-top:12px}.reply-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}.reply-as{font-size:9px;color:#6d8289}.request-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid #e0e8eb;border-radius:11px;margin-bottom:8px}.request-card h4{margin:0 0 4px;font-size:12px}.request-card p{margin:0;color:#5e747b;font-size:10px}.request-card small{font-size:8px;color:#849398}.request-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Admins / roles */
.table-wrap{overflow:auto}.admins-table{width:100%;border-collapse:collapse;min-width:860px}.admins-table th,.admins-table td{padding:10px;border-bottom:1px solid #e8eef0;text-align:right;vertical-align:middle;font-size:10px}.admins-table th{background:#f7fafb;color:#60777e;position:sticky;top:0}.admin-person-cell{display:flex;align-items:center;gap:8px}.admin-person-cell img{width:38px;height:38px;border-radius:50%;object-fit:cover}.admin-person-cell b,.admin-person-cell small{display:block}.admin-person-cell small{color:var(--muted);font-size:8px}.admin-login-cell b,.admin-login-cell small{display:block}.admin-login-cell small{color:var(--muted)}.locked-note{font-size:8px;color:#9b6f1c;background:#fff4d8;padding:3px 6px;border-radius:999px}.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.role-card{border:1px solid #dce6e9;border-radius:13px;padding:14px;background:#fff;position:relative}.role-card.root{background:linear-gradient(135deg,#f8fbfb,#eef7f8);border-color:#c7dfe4}.role-level{position:absolute;top:12px;left:12px;background:#edf4f5;color:#587178;padding:3px 7px;border-radius:999px;font-size:8px;font-weight:800}.role-card h4{margin:0 0 3px}.role-card>p{font-size:9px;color:var(--muted);min-height:29px}.role-card .permissions-list{margin:10px 0}.role-actions{display:flex;gap:6px;border-top:1px solid #edf1f2;padding-top:9px;margin-top:8px}.role-hierarchy-note{background:#fff7df;border:1px solid #f0dda3;color:#7b6219;border-radius:10px;padding:10px 12px;font-size:10px;margin-bottom:12px}.permissions-fieldset{border:1px solid #dce6e9;border-radius:12px;padding:13px;margin-top:12px}.permissions-fieldset legend{padding:0 7px;font-weight:800;color:#3b626b}.permissions-fieldset>p{font-size:9px;color:var(--muted);margin:0 0 9px}.permission-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.permission-check{display:flex;align-items:center;gap:7px;background:#f7fafb;border:1px solid #e1e9ec;border-radius:9px;padding:8px;font-size:9px;font-weight:700}.permission-check input{width:auto;margin:0}.permission-check.disabled{opacity:.5;pointer-events:none}

/* Profile/settings */
.profile-layout{display:grid;grid-template-columns:300px 1fr;gap:12px}.profile-summary{text-align:center}.profile-photo{width:125px;height:125px;border-radius:50%;object-fit:cover;border:5px solid #eaf3f4;box-shadow:0 9px 24px rgba(18,57,69,.12)}.profile-summary h2{margin:10px 0 3px}.profile-role{display:inline-block;background:#e9f5f6;color:var(--navy2);border-radius:999px;padding:5px 10px;font-size:10px;font-weight:800}.profile-summary>small{display:block;color:var(--muted);margin:7px 0 12px}.profile-summary .permissions-list{justify-content:center}.profile-photo-button{display:inline-block;margin-top:18px;cursor:pointer}.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.settings-page{display:grid;gap:12px}.settings-hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.settings-hero h3{font-size:20px;margin:3px 0}.settings-hero p{margin:0;color:var(--muted);font-size:10px}.settings-actions{display:flex;gap:7px;flex-wrap:wrap}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.settings-grid .panel h3{margin:0 0 12px;font-size:15px}.logo-settings-preview{display:flex;align-items:center;gap:12px;background:#f7fafb;border:1px solid #e2e9ec;border-radius:11px;padding:10px}.logo-settings-preview img{width:72px;height:72px;border-radius:50%;object-fit:cover}.logo-settings-preview small{display:block;color:var(--muted);font-size:9px;margin-bottom:6px}.color-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-settings-grid input[type=color]{height:42px;padding:4px}.settings-divider{border-top:1px solid #e3eaed;margin:15px 0}.backup-actions{display:flex;gap:7px;flex-wrap:wrap}.file-button{cursor:pointer}.settings-note{background:#fff8dd;border:1px solid #f2e2a1;padding:9px;border-radius:9px;color:#7b6414!important;font-size:9px}.settings-note.neutral{background:#eef7f8;border-color:#d8e9ec;color:#537178!important}

/* Welcome modal */
.welcome-modal-card{text-align:center;width:min(470px,94vw);padding:34px}.welcome-icon{font-size:44px;margin-bottom:8px;animation:wave 1.2s ease-in-out 2}@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}}.welcome-modal-card h2{margin:4px 0;font-size:25px}.welcome-modal-card>p{margin:0 0 14px;color:var(--muted)}.welcome-perms{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:18px}

/* Responsive */
@media(max-width:1100px){.header-inner{grid-template-columns:1fr auto auto}.brand small{display:none}.tree-title h1{font-size:32px}.tree-toolbar{flex-direction:column;align-items:stretch}.tree-view-controls{justify-content:center}.tree-context-bar{flex-direction:column;align-items:flex-start}.summary-grid{grid-template-columns:repeat(2,1fr)}.roles-grid{grid-template-columns:repeat(2,1fr)}.admin-tree-toolbar{grid-template-columns:1fr 1fr}.admin-tree-toolbar .admin-search{grid-column:1/-1}}
@media(max-width:900px){.public-header{position:sticky}.header-inner{grid-template-columns:1fr auto auto;min-height:70px}.public-nav{position:absolute;top:70px;right:3%;left:3%;background:#fff;border:1px solid #dce6e9;border-radius:13px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;align-items:stretch}.public-nav.show{display:flex}.public-nav a.active:after{display:none}.mobile-menu{display:block}.brand strong{font-size:14px}.brand img{width:45px;height:45px}.login-btn{padding:9px 11px;font-size:11px}.tree-hero{padding-top:28px}.tree-title{flex-direction:column;gap:10px}.hero-logo{width:95px;height:95px}.tree-viewport{padding:26px 20px}.about-box,.compact-contact{align-items:flex-start}.about-box img{width:90px;height:90px}.admin-layout{grid-template-columns:1fr}.admin-sidebar{position:fixed;right:0;top:0;bottom:0;width:255px;transform:translateX(105%);transition:.25s;height:100vh}.admin-sidebar.show{transform:translateX(0)}.admin-main{padding:12px}.side-toggle{display:grid;place-items:center}.messages-layout{grid-template-columns:1fr}.conversation{min-height:auto}.profile-layout{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.tree-admin-row{grid-template-columns:1fr}.row-actions{justify-content:flex-start}.login-shell{grid-template-columns:1fr}.login-brand-panel{min-height:300px;padding:50px 30px;align-items:center;text-align:center}.login-logo{width:95px;height:95px}.login-brand-panel h1{font-size:26px}.login-features{grid-template-columns:repeat(3,1fr);font-size:10px}.back-site{right:18px;top:18px}.login-form-panel{padding:25px 16px}}
@media(max-width:700px){.container{width:min(96%,100%)}.header-inner{gap:7px}.brand div{display:none}.login-btn span{display:none}.login-btn{width:42px;height:42px;padding:0;display:grid;place-items:center}.tree-title h1{font-size:27px}.tree-title p{font-size:13px}.tree-toolbar{position:static}.search-wrap{min-width:0;width:100%}.tree-view-controls{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.tree-view-controls button{padding:8px 6px;font-size:10px}.zoom-value{display:none}.tree-context-bar>div:first-child{display:none}.tree-viewport{min-height:430px;padding:24px 12px}.tree-canvas{width:100%;min-width:0;padding:0 8px 25px;display:block}.tree-node-wrap{align-items:stretch;width:100%;padding-right:0}.tree-node-card{min-width:0;max-width:none;width:100%;grid-template-columns:42px 1fr auto}.tree-children{display:flex;flex-direction:column;gap:10px;padding-top:20px;padding-right:24px;align-items:stretch}.tree-children:before{display:none}.tree-children>.tree-node-wrap:before{top:-10px;right:-14px;height:calc(100% + 10px);border-right:1px solid #8fb0b8}.tree-node-wrap>.tree-children:after{top:0;right:11px;height:20px}.tree-children>.tree-node-wrap:after{content:"";position:absolute;right:-14px;top:20px;width:14px;border-top:1px solid #8fb0b8}.tree-fullscreen-open .tree-toolbar{top:5px;right:5px;left:5px;max-height:150px;overflow:auto}.tree-fullscreen-open .tree-viewport{padding-top:165px}.about-section,.contact-section{padding:38px 0}.about-box,.compact-contact{padding:20px;flex-direction:column}.about-box img{align-self:center}.contact-actions{width:100%}.contact-actions>*{flex:1}.social-rail{left:8px;top:auto;bottom:140px}.social-btn{width:42px;height:42px;border-radius:12px}.floating-stack{right:9px;bottom:10px}.floating-message{padding:7px}.floating-message b{display:none}.floating-icon{width:36px;height:36px}.footer-row{flex-direction:column;gap:4px;text-align:center}.ticket-lookup{grid-template-columns:1fr}.ticket-lookup button{margin:0}.modal-card{padding:23px 16px}.toast-stack{top:75px;left:8px;right:8px}.toast{min-width:0;max-width:none}.summary-grid{grid-template-columns:1fr 1fr}.admin-top{padding:9px}.admin-top p{display:none}.admin-top .outline-btn{font-size:9px;padding:8px}.welcome-strip img{width:60px;height:60px}.welcome-strip h2{font-size:18px}.panel{padding:13px}.admin-tree-summary{grid-template-columns:1fr 1fr 1fr}.admin-tree-toolbar{grid-template-columns:1fr}.admin-tree-toolbar .admin-search{grid-column:auto}.stack-mobile{align-items:stretch;flex-direction:column}.panel-actions{width:100%}.panel-actions>*{flex:1}.request-card{align-items:flex-start;flex-direction:column}.roles-grid{grid-template-columns:1fr}.permission-check-grid{grid-template-columns:1fr 1fr}.profile-form,.form-grid{grid-template-columns:1fr}.wide-row{grid-column:auto}.color-settings-grid{grid-template-columns:1fr}.login-features{grid-template-columns:1fr}.login-brand-panel{min-height:260px}.login-form-panel{align-items:flex-start}.login-card{padding:22px}.inbox .panel-head{align-items:stretch;flex-direction:column}.inbox .panel-head input{width:100%}.reply-actions{align-items:stretch;flex-direction:column}.reply-actions .primary-btn{width:100%}}
@media(max-width:430px){.tree-view-controls{grid-template-columns:repeat(2,1fr)}.summary-grid{grid-template-columns:1fr}.admin-tree-summary{grid-template-columns:1fr}.permission-check-grid{grid-template-columns:1fr}.welcome-strip{align-items:flex-start}.welcome-strip img{display:none}.social-rail{bottom:120px}}


/* =========================
   v0.7 UI refinement
   ========================= */

/* Public family tree: cleaner family cards, no generation labels */
.tree-hero{
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.98),rgba(250,253,253,.96) 42%,rgba(235,246,247,.98) 100%),
    linear-gradient(135deg,#f8fcfc,#edf6f7);
}
.tree-viewport{
  background:
    radial-gradient(circle at 50% 10%,rgba(7,136,154,.035),transparent 42%),
    linear-gradient(#ffffffeb,#fbfdfdec);
}
.tree-node-card.family-card{
  grid-template-columns:52px minmax(140px,1fr) auto;
  min-width:220px;
  max-width:270px;
  padding:13px 14px;
  border-radius:18px;
  border:1px solid #cfe0e4;
  box-shadow:0 8px 22px rgba(16,61,73,.08);
  overflow:visible;
}
.tree-node-card.family-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(7,136,154,.045),transparent 48%);
  pointer-events:none;
}
.tree-node-card.family-card.open{
  border-color:var(--teal);
  box-shadow:0 10px 28px rgba(7,136,154,.14);
}
.tree-node-card.family-card .node-avatar{
  width:48px;height:48px;
  background:linear-gradient(145deg,var(--navy2),var(--teal));
  color:#fff;border:3px solid #e7f5f6;
  box-shadow:0 4px 12px rgba(7,85,105,.18);
}
.tree-node-card.family-card .node-text b{font-size:14px;color:#17343d}
.node-relation{color:#4f727b!important;font-weight:700;margin-top:3px}
.node-text em{display:block;font-size:9px;color:#8a9aa0;font-style:normal;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.children-count{
  top:-11px;left:12px;
  width:auto;min-width:46px;height:auto;
  padding:4px 7px;border-radius:11px;
  display:flex;gap:3px;align-items:baseline;
  background:#0b7185;
}
.children-count b{font-size:10px}.children-count small{font-size:7px;opacity:.82}
.expand-indicator{
  bottom:-15px;width:30px;height:30px;
  border:2px solid #d6e7ea;
  box-shadow:0 3px 9px rgba(18,73,86,.1);
  font-size:17px;
}
.leaf-node-badge{
  position:absolute;
  bottom:-10px;right:50%;transform:translateX(50%);
  background:#f2f7f8;color:#799097;border:1px solid #dbe7e9;
  border-radius:999px;padding:3px 8px;font-size:7px;white-space:nowrap;
}
.tree-generation{display:none!important}
.tree-children{gap:30px;padding-top:52px}
.tree-children:before{background:linear-gradient(90deg,transparent,#83aeb7 10%,#83aeb7 90%,transparent)}
.tree-children>.tree-node-wrap:before,.tree-node-wrap>.tree-children:after{border-color:#83aeb7}

/* More elegant social rail interaction */
.social-rail{gap:12px}
.social-btn{
  position:relative;
  width:52px;height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  padding:0 15px;
  transition:width .32s cubic-bezier(.2,.8,.2,1),transform .25s ease,box-shadow .25s ease,border-radius .25s ease;
  isolation:isolate;
}
.social-btn .social-icon{width:23px;height:23px;display:grid;place-items:center;flex:0 0 23px;position:relative;z-index:2}
.social-btn .social-icon svg{width:23px;height:23px;fill:currentColor}
.social-label{
  opacity:0;transform:translateX(-8px);
  white-space:nowrap;margin-right:11px;
  font-size:12px;font-weight:800;
  transition:.25s ease;
  position:relative;z-index:2;
}
.social-glow{
  position:absolute;inset:-25%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.32),transparent 58%);
  opacity:0;transform:scale(.45);
  transition:.35s ease;z-index:1;
}
.social-btn:hover{
  width:126px;
  transform:translateY(-3px);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.23);
}
.social-btn:hover .social-label{opacity:1;transform:none}
.social-btn:hover .social-glow{opacity:1;transform:scale(1)}
.social-btn:active{transform:translateY(-1px) scale(.98)}

/* Top admin user menu */
.top-user-menu{position:relative}
.top-user-button{
  border:1px solid #d9e5e8;background:#fff;border-radius:13px;
  padding:5px 8px 5px 10px;display:flex;align-items:center;gap:8px;
  min-width:175px;text-align:right;transition:.2s ease;
}
.top-user-button:hover,.top-user-button[aria-expanded="true"]{border-color:#9fcbd2;box-shadow:0 6px 18px rgba(14,69,82,.08)}
.top-user-button img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #d9ecef}
.top-user-copy{min-width:0;flex:1}
.top-user-copy b,.top-user-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-user-copy b{font-size:11px;color:#163b45}
.top-user-copy small{font-size:8px;color:#71878e;margin-top:2px}
.top-user-chevron{font-size:14px;color:#698087;transition:.2s}
.top-user-button[aria-expanded="true"] .top-user-chevron{transform:rotate(180deg)}
.top-user-dropdown{
  display:none;position:absolute;top:calc(100% + 9px);left:0;
  width:230px;background:#fff;border:1px solid #dce6e9;border-radius:14px;
  box-shadow:0 18px 45px rgba(12,53,65,.16);padding:8px;z-index:240;
  animation:userMenuIn .18s ease;
}
.top-user-dropdown.show{display:block}
@keyframes userMenuIn{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.top-user-email{padding:8px 10px 10px;color:#84969c;font-size:9px;border-bottom:1px solid #edf2f3;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis}
.top-user-dropdown button,.top-user-dropdown a{
  width:100%;border:0;background:transparent;color:#244a54;text-decoration:none;
  padding:9px 10px;border-radius:9px;text-align:right;display:block;font-size:10px;font-weight:700;
}
.top-user-dropdown button:hover,.top-user-dropdown a:hover{background:#edf7f8;color:var(--navy)}
.top-user-dropdown .menu-logout{color:#bd4545}
.menu-divider{border-top:1px solid #edf2f3;margin:5px 0}

/* Welcome: name + animated success only */
.welcome-pop{backdrop-filter:blur(3px)}
.simple-welcome{max-width:360px;padding:30px 28px}
.simple-welcome h2{margin:13px 0 5px;font-size:22px}
.simple-welcome p{margin:0 0 18px;color:#72868d}
.welcome-spark{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;margin:auto;
  background:linear-gradient(135deg,#e6f8f1,#dff5f7);position:relative;
}
.welcome-spark:before,.welcome-spark:after{
  content:"";position:absolute;inset:-8px;border:2px solid rgba(10,145,115,.18);
  border-radius:50%;animation:welcomePulse 1.6s ease-out infinite;
}
.welcome-spark:after{animation-delay:.5s}
.welcome-spark span{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#109672;color:#fff;font-size:24px;font-weight:900;
  box-shadow:0 8px 20px rgba(16,150,114,.25);animation:welcomeCheck .45s ease both;
}
@keyframes welcomePulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes welcomeCheck{from{transform:scale(.4) rotate(-18deg);opacity:0}to{transform:none;opacity:1}}

/* Hide old level visual concepts */
.role-level{display:none!important}
.role-hierarchy-note{background:#f4f8f9;border-color:#dde8ea;color:#587078}
.profile-photo-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.profile-photo-actions>*{flex:1;min-width:130px}

/* Responsive refinements */
@media(max-width:900px){
  .top-user-button{min-width:0}
  .top-user-copy{display:none}
  .top-user-button{padding:4px;border-radius:50%}
  .top-user-button img{width:38px;height:38px}
  .top-user-chevron{display:none}
  .top-user-dropdown{left:0;width:220px}
  .desktop-site-link{display:none}
}
@media(max-width:650px){
  .tree-node-card.family-card{min-width:0;max-width:none;width:100%;grid-template-columns:48px 1fr auto;padding:12px}
  .tree-node-card.family-card .node-avatar{width:44px;height:44px}
  .children-count{left:8px}
  .leaf-node-badge{right:auto;left:8px;transform:none}
  .social-btn{width:46px;height:46px;border-radius:15px;padding:0 12px}
  .social-btn:hover{width:46px;transform:translateY(-3px) scale(1.05)}
  .social-label{display:none}
  .top-user-dropdown{position:fixed;top:70px;left:12px;right:12px;width:auto}
}


/* v0.8 */
.tree-title{max-width:760px;margin-inline:auto}.tree-title h1{letter-spacing:-.5px}.modern-context{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#f7fbfb,#eef7f8);border:1px solid #dcebed;border-radius:14px;padding:10px 13px}.tree-help{color:#5b747c;font-size:11px;line-height:1.7}.family-path{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-start}.family-path button{border:1px solid #d8e6e9;background:#fff;color:#315f69;border-radius:999px;padding:6px 10px;font:inherit;font-size:9px;font-weight:800;cursor:pointer;transition:.2s}.family-path button:hover,.family-path button.active{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px)}.family-path>span{color:#9ab0b5;font-weight:900}.tree-workspace{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 0;gap:0;transition:.3s ease}.tree-workspace:has(.person-side-panel.show){grid-template-columns:minmax(0,1fr) 310px;gap:14px}.person-side-panel{min-width:0;overflow:hidden;opacity:0;transform:translateX(-10px);background:#fff;border:1px solid #dce8ea;border-radius:20px;box-shadow:0 16px 38px rgba(8,56,68,.11);padding:0;height:0;transition:opacity .25s ease,transform .25s ease;position:sticky;top:95px;align-self:start}.person-side-panel.show{opacity:1;transform:none;height:auto;padding:24px 18px;min-width:310px}.person-panel-close{position:absolute;left:12px;top:10px;border:0;background:#f1f6f7;color:#5c767d;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer}.person-panel-avatar{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy2),var(--teal));color:#fff;font-size:28px;font-weight:900;margin:0 auto 14px;box-shadow:0 10px 24px rgba(4,91,109,.2)}.person-side-panel h3{text-align:center;font-size:20px;margin:8px 0 5px;color:#163e48}.person-side-panel>p{text-align:center;color:#799096;font-size:10px;margin:0 0 15px}.person-side-panel .section-kicker{display:block;text-align:center}.side-person-path{display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px 0;border-block:1px solid #edf3f4;margin-bottom:12px}.side-person-path span{font-size:8px;background:#eff7f8;color:#55747c;padding:4px 7px;border-radius:999px}.side-person-path span.active{background:var(--teal);color:#fff}.side-person-path b{color:#afbec1;font-size:9px}.side-person-details{display:grid;gap:8px}.side-person-details>div{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f7fafb;border:1px solid #e7eff1;border-radius:10px;padding:9px}.side-person-details span{font-size:9px;color:#70868c}.side-person-details b{font-size:10px;color:#1d4b55}.side-person-details .side-children-list{display:block}.side-children-list p{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0}.side-children-list button{border:1px solid #d8e8eb;background:#fff;color:#23606d;border-radius:8px;padding:5px 7px;font-size:8px;cursor:pointer}.side-children-list button:hover{background:#eaf6f7}.side-person-actions{display:grid;gap:7px;margin-top:14px}.tree-node-card.family-card.selected{border-color:#d49c25!important;box-shadow:0 0 0 3px rgba(212,156,37,.16),0 14px 32px rgba(10,72,85,.15)!important;transform:translateY(-3px)}.tree-node-card.family-card.muted-branch{opacity:.28;filter:saturate(.6);transform:scale(.98)}.tree-node-card.family-card{transition:opacity .22s ease,filter .22s ease,transform .22s ease,border .22s ease,box-shadow .22s ease}.find-person-btn{border-style:dashed}.search-attention{animation:searchAttention .95s ease}@keyframes searchAttention{0%,100%{box-shadow:none}35%{box-shadow:0 0 0 4px rgba(7,136,154,.19)}}.activity-filter-row{display:grid;grid-template-columns:1fr 190px;gap:10px;margin-bottom:14px}.activity-filter-row input,.activity-filter-row select{border:1px solid #dce6e9;border-radius:10px;padding:10px;background:#fff;font:inherit}.activity-list{display:grid;gap:9px}.activity-item{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid #e2eaec;border-radius:13px;padding:11px 12px}.activity-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#edf6f7;color:#197185;font-size:16px;font-weight:900}.activity-item.type-add .activity-icon{background:#e9f8ef;color:#238351}.activity-item.type-edit .activity-icon{background:#eaf3fb;color:#2a6f9d}.activity-item.type-delete .activity-icon{background:#fff0f0;color:#b84c4c}.activity-item.type-restore .activity-icon{background:#f1edff;color:#7157b6}.activity-copy>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.activity-copy b{font-size:11px;color:#224a54}.activity-copy span,.activity-copy small{font-size:8px;color:#87999e}.activity-copy p{font-size:9px;color:#617a81;margin:4px 0}.dashboard-activity-panel{margin-top:14px}.dashboard-activity-row{display:grid;grid-template-columns:10px 1fr auto;gap:9px;align-items:center;padding:8px 4px;border-bottom:1px solid #edf2f3}.dashboard-activity-row:last-child{border-bottom:0}.activity-dot{width:8px;height:8px;border-radius:50%;background:#5d8c96}.activity-dot.type-add{background:#2d9a62}.activity-dot.type-edit{background:#347ca7}.activity-dot.type-delete{background:#cc5858}.activity-dot.type-restore{background:#785ec2}.dashboard-activity-row b,.dashboard-activity-row small{display:block}.dashboard-activity-row b{font-size:9px}.dashboard-activity-row small,.dashboard-activity-row time{font-size:7px;color:#85979c}.trash-list{display:grid;gap:10px}.trash-item{display:grid;grid-template-columns:minmax(200px,1fr) minmax(180px,.8fr) auto;gap:14px;align-items:center;border:1px solid #e1e9eb;background:#fff;border-radius:14px;padding:12px}.trash-person{display:flex;align-items:center;gap:10px}.trash-person>span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eef5f6;color:#285c68;font-weight:900}.trash-person b,.trash-person small{display:block}.trash-person b{font-size:11px}.trash-person small{font-size:8px;color:#8a9ba0;margin-top:3px}.trash-relations{display:flex;gap:6px;flex-wrap:wrap}.trash-relations span{font-size:8px;background:#f4f8f9;border-radius:999px;padding:5px 8px;color:#607b82}@media(max-width:1000px){.tree-workspace:has(.person-side-panel.show){grid-template-columns:1fr}.person-side-panel,.person-side-panel.show{position:fixed;z-index:320;inset:auto 12px 12px 12px;min-width:0;max-height:75vh;overflow:auto}.person-side-panel.show{height:auto}.modern-context{align-items:flex-start;flex-direction:column}.family-path{justify-content:flex-start}}@media(max-width:750px){.activity-filter-row{grid-template-columns:1fr}.trash-item{grid-template-columns:1fr}.activity-copy>div{align-items:flex-start;flex-direction:column}.tree-view-controls{gap:5px}.tree-view-controls .find-person-btn{order:-1;width:100%}}

/* v0.8.1 interaction reliability */
.person-side-panel{isolation:isolate}
.person-panel-close{z-index:20;pointer-events:auto;display:grid;place-items:center;line-height:1;transition:transform .18s ease,background .18s ease,color .18s ease}
.person-panel-close:hover{transform:rotate(90deg) scale(1.08);background:#e3f1f3;color:var(--navy)}
.person-panel-close:active{transform:rotate(90deg) scale(.95)}
.person-side-panel:not(.show){pointer-events:none!important;visibility:hidden}
.person-side-panel.show{pointer-events:auto!important;visibility:visible}
button,a,[role=button]{touch-action:manipulation}


/* v0.8.2 - toolbar usability */
.search-wrap{padding-left:6px}
.tree-search-submit{
  border:0;background:var(--navy);color:#fff;border-radius:8px;
  padding:7px 13px;font:inherit;font-size:10px;font-weight:800;
  cursor:pointer;transition:.2s ease;white-space:nowrap
}
.tree-search-submit:hover{background:var(--teal);transform:translateY(-1px);box-shadow:0 5px 13px rgba(7,136,154,.18)}
.tree-search-submit:active{transform:scale(.97)}
#fitTree,#expandAll,#findPersonBtn{position:relative}
#fitTree:active,#expandAll:active,#findPersonBtn:active{transform:scale(.97)}
@media(max-width:700px){
  .search-wrap{display:grid;grid-template-columns:auto 1fr auto}
  .tree-search-submit{padding:7px 11px}
}


/* =========================================================
   v0.8.3 - Arabic typography system
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;600;700;800&family=Tajawal:wght@400;500;600;700;800&display=swap');

:root{
  --font-body:'Tajawal',Tahoma,Arial,sans-serif;
  --font-heading:'Cairo','Tajawal',Tahoma,Arial,sans-serif;
}
html{font-size:16px}
body{
  font-family:var(--font-body);
  font-weight:500;
  line-height:1.75;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
button,input,textarea,select{font-family:var(--font-body)}
h1,h2,h3,h4,h5,h6,
.brand strong,.tree-title h1,.section-kicker,
.primary-btn,.outline-btn,.success-btn,.blue-btn,.danger-btn,
.login-btn,.public-nav a,.admin-nav button,.panel-head h3,
.top-user-copy b,.tree-node-card b{
  font-family:var(--font-heading);
}
h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.025em}
p{letter-spacing:0}
.brand strong{font-weight:800}
.brand small{font-size:12px;line-height:1.5}
.public-nav a{font-weight:700}
.tree-title h1{font-size:clamp(29px,3.2vw,42px);line-height:1.35}
.tree-title p{font-size:clamp(14px,1.35vw,17px);line-height:1.9}
.tree-node-card.family-card .node-text b{font-size:14px;line-height:1.6}
.tree-node-card.family-card .node-text small{font-size:10.5px;line-height:1.55}
.primary-btn,.outline-btn,.success-btn,.blue-btn,.danger-btn{font-weight:700}
input,textarea,select{font-size:14px;line-height:1.6}
label{font-size:13.5px;line-height:1.6}
.admin-main h2{font-family:var(--font-heading);font-weight:800}
.panel h3{font-family:var(--font-heading);font-weight:800}
.admin-nav button{font-size:12px;font-weight:700;line-height:1.5}
table,th,td{font-family:var(--font-body)}
th{font-weight:700}
.toast b,.modal h2,.modal h3{font-family:var(--font-heading)}
@media(max-width:650px){
  body{font-size:15px}
  .brand strong{font-size:14px}
  .brand small{font-size:10px}
  .tree-node-card.family-card .node-text b{font-size:13px}
  .tree-title p{font-size:14px}
}


/* v0.9 Firebase sync */
.firebase-sync-panel{border:1px solid #b9dfe4;background:linear-gradient(135deg,#f8fdfd,#eef8f9)}
.firebase-sync-panel h3{margin-top:0}
.cloud-sync-status{display:flex;align-items:flex-start;gap:4px;flex-direction:column;border-radius:12px;padding:12px;margin:10px 0 12px}
.cloud-sync-status b{font-family:var(--font-heading);font-size:13px}
.cloud-sync-status span{font-size:11px;line-height:1.7}
.cloud-sync-status.waiting{background:#fff8df;border:1px solid #f1df9b;color:#765f12}
.cloud-sync-status.online{background:#eaf8ef;border:1px solid #b7e2c5;color:#1f7041}
.firebase-sync-panel .primary-btn{margin-top:4px}


/* =========================================================
   v1.1 - Firebase safety, tree styles, search, photos, backups
   ========================================================= */
.website-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.tree-request-fields{display:grid;gap:10px;padding:12px;border:1px solid #d9e6e9;border-radius:14px;background:#f8fbfc;margin:4px 0 10px}
.tree-request-fields[hidden]{display:none!important}

/* Public advanced search */
.search-wrap{position:relative}
.tree-search-suggestions{position:absolute;z-index:60;top:calc(100% + 8px);right:0;left:0;min-width:min(560px,92vw);max-height:390px;overflow:auto;background:#fff;border:1px solid #d8e3e6;border-radius:16px;box-shadow:0 18px 50px rgba(5,47,60,.18);padding:7px}
.tree-search-suggestions[hidden]{display:none}
.tree-search-suggestions button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:right;border:0;background:transparent;padding:10px 12px;border-radius:11px;cursor:pointer;color:var(--navy)}
.tree-search-suggestions button:hover,.tree-search-suggestions button:focus{background:#eef7f8;outline:none}
.tree-search-suggestions button span{display:grid;gap:3px;min-width:0}.tree-search-suggestions button b{font-size:14px}.tree-search-suggestions button small{font-size:10px;color:#64777e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-search-suggestions button em{font-style:normal;font-size:10px;color:var(--teal);white-space:nowrap}.search-no-result{padding:16px;text-align:center;color:#75878c;font-size:12px}

/* Optional person photos */
.node-avatar{overflow:hidden}.node-avatar img,.person-panel-avatar img,.person-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.person-panel-avatar:has(img){padding:0;overflow:hidden}
.tree-admin-avatar.has-photo{overflow:hidden;padding:0}.tree-admin-avatar img,.trash-person>span img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.tree-person-photo-editor{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid #dbe7ea;background:#f8fbfc;border-radius:14px;margin-bottom:12px}.tree-person-photo-editor img{width:82px;height:82px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 18px rgba(4,50,63,.12)}.tree-person-photo-editor>div{display:flex;align-items:flex-start;gap:7px;flex-wrap:wrap}.tree-person-photo-editor small{flex-basis:100%;color:#6b7d83;font-size:10px}.photo-file-btn{cursor:pointer;margin:0}
.request-prefill-note{padding:10px 12px;background:#eaf7ef;color:#246944;border:1px solid #bfe2cb;border-radius:12px;font-size:11px;margin:0 0 12px}.request-prefill-note[hidden]{display:none}
.last-tree-edit{display:block;color:#809095;margin-top:5px;font-size:9px}
.request-structured{display:inline-flex;gap:6px;flex-wrap:wrap;background:#eef8f9;border:1px solid #d3e9ec;padding:6px 9px;border-radius:9px;margin:6px 0;color:#365d66;font-size:11px}.request-note{display:block;padding:5px 0;color:#667b81}

/* Tree visual styles */
.tree-viewport[data-tree-style="modern"] .family-card{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,248,250,.88));border:1px solid rgba(15,137,154,.22);box-shadow:0 12px 30px rgba(5,64,78,.12);backdrop-filter:blur(8px);border-radius:20px}
.tree-viewport[data-tree-style="modern"] .node-avatar{box-shadow:0 0 0 4px rgba(7,136,154,.08)}
.tree-viewport[data-tree-style="modern"] .family-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(5,64,78,.18)}
.tree-viewport[data-tree-style="compact"] .family-card{min-width:150px;max-width:190px;padding:8px 9px;border-radius:10px}.tree-viewport[data-tree-style="compact"] .node-avatar{width:34px;height:34px;font-size:14px}.tree-viewport[data-tree-style="compact"] .node-text b{font-size:11px}.tree-viewport[data-tree-style="compact"] .node-text small,.tree-viewport[data-tree-style="compact"] .node-text em{font-size:8px}.tree-viewport[data-tree-style="compact"] .tree-children{gap:14px}.tree-viewport[data-tree-style="compact"] .children-count{transform:scale(.82);transform-origin:center}
.tree-viewport[data-tree-style="focus"] .family-card{transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease}.tree-viewport[data-tree-style="focus"] .family-card.selected{transform:scale(1.06);box-shadow:0 0 0 4px rgba(7,136,154,.13),0 18px 44px rgba(4,59,73,.16)}.tree-viewport[data-tree-style="focus"] .muted-branch{opacity:.27;filter:saturate(.35)}
.tree-viewport[data-tree-style="radial"] .tree-node-wrap>.tree-children{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:26px 34px;max-width:1100px}.tree-viewport[data-tree-style="radial"] .tree-node-wrap>.tree-children:before{display:none}.tree-viewport[data-tree-style="radial"] .tree-children>.tree-node-wrap:before{background:linear-gradient(var(--teal),rgba(7,136,154,.25));height:22px}.tree-viewport[data-tree-style="radial"] .family-card{border-radius:28px}.tree-viewport[data-tree-style="radial"] .tree-node-wrap:first-child>.family-card{box-shadow:0 0 0 5px rgba(7,136,154,.08),0 15px 34px rgba(4,58,72,.15)}

/* Tree motion choices */
@keyframes qfFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes qfZoomIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes qfCascade{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
.tree-viewport[data-tree-motion="calm"] .tree-node-wrap{animation:qfFadeUp .28s ease both}
.tree-viewport[data-tree-motion="smooth"] .tree-node-wrap{animation:qfFadeUp .42s cubic-bezier(.2,.75,.25,1) both}
.tree-viewport[data-tree-motion="zoom"] .tree-node-wrap{animation:qfZoomIn .35s ease both}
.tree-viewport[data-tree-motion="cascade"] .tree-node-wrap{animation:qfCascade .42s ease both}.tree-viewport[data-tree-motion="cascade"] .tree-children>.tree-node-wrap:nth-child(2){animation-delay:.05s}.tree-viewport[data-tree-motion="cascade"] .tree-children>.tree-node-wrap:nth-child(3){animation-delay:.1s}.tree-viewport[data-tree-motion="cascade"] .tree-children>.tree-node-wrap:nth-child(4){animation-delay:.15s}.tree-viewport[data-tree-motion="cascade"] .tree-children>.tree-node-wrap:nth-child(5){animation-delay:.2s}
.tree-viewport[data-tree-motion="none"] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){.tree-viewport *{animation:none!important;transition-duration:.01ms!important}}

/* Mini-map */
.tree-workspace{position:relative}.tree-mini-map{position:absolute;z-index:16;left:14px;bottom:14px;width:174px;background:rgba(255,255,255,.94);border:1px solid #d5e3e6;border-radius:14px;box-shadow:0 12px 30px rgba(5,52,65,.13);padding:9px;backdrop-filter:blur(8px)}.tree-mini-map[hidden]{display:none}.mini-map-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--navy)}.mini-map-head button{border:0;background:#eaf6f7;color:var(--teal);width:25px;height:25px;border-radius:8px;cursor:pointer}.mini-map-stage{min-height:72px;margin:7px 0;background:linear-gradient(#f8fbfc,#eff7f8);border:1px solid #e3edef;border-radius:9px;padding:6px;display:grid;gap:5px;cursor:pointer}.mini-level{display:flex;justify-content:center;gap:3px;align-items:center;min-height:8px}.mini-level i{display:block;width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:calc(.9 - var(--level)*.08)}.mini-level b{font-size:8px;color:#708287}.tree-mini-map>small{display:block;text-align:center;color:#7c8d91;font-size:8px}

/* Sync state */
.global-sync-state{display:flex;align-items:center;gap:7px;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:700;white-space:nowrap;border:1px solid transparent}.global-sync-state i{width:8px;height:8px;border-radius:50%;display:block}.global-sync-state.synced{background:#eaf8ef;color:#237245;border-color:#bee2cb}.global-sync-state.synced i{background:#39a667}.global-sync-state.pending{background:#fff6db;color:#806518;border-color:#eedc9e}.global-sync-state.pending i{background:#d7a928;animation:syncPulse 1.2s infinite}.global-sync-state.offline{background:#f4f4f4;color:#606b70;border-color:#ddd}.global-sync-state.offline i{background:#8c989c}.global-sync-state.conflict{background:#fff0ed;color:#a44232;border-color:#efc3bb}.global-sync-state.conflict i{background:#d85843;animation:syncPulse .8s infinite}@keyframes syncPulse{50%{opacity:.35;transform:scale(.75)}}
.cloud-sync-status.conflict{background:#fff0ed;border:1px solid #efc3bb;color:#9e3f30}

/* Activity details and undo */
.activity-item{align-items:flex-start}.activity-diff{display:grid;gap:5px;margin:8px 0;padding:8px;border-radius:10px;background:#f7fafb;border:1px solid #e3ecee}.activity-diff>div{display:grid;grid-template-columns:80px minmax(0,1fr) 20px minmax(0,1fr);gap:5px;align-items:center;font-size:9px}.activity-diff span{color:#6a7e84}.activity-diff del{color:#a1544c;text-decoration:none;background:#fff0ed;padding:3px 5px;border-radius:5px;overflow:hidden;text-overflow:ellipsis}.activity-diff ins{color:#276e48;text-decoration:none;background:#eaf8ef;padding:3px 5px;border-radius:5px;overflow:hidden;text-overflow:ellipsis}.activity-diff b{text-align:center;color:#94a2a6}.activity-undo{align-self:center;white-space:nowrap}

/* Cloud backups */
.backup-summary{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f5fafb;border:1px solid #e1ecee;border-radius:11px;margin:8px 0}.backup-summary span{font-size:10px;color:#6b7e83}.backup-summary b{font-size:11px;color:var(--navy)}.cloud-backups-list{display:grid;gap:7px;margin-top:10px;max-height:280px;overflow:auto}.backup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e2eaec;border-radius:10px;padding:8px 10px}.backup-row>div{display:grid;gap:2px}.backup-row b{font-size:10px}.backup-row small{font-size:8px;color:#73858a}

@media(max-width:900px){.global-sync-state span{display:none}.global-sync-state{width:31px;height:31px;padding:0;justify-content:center}.tree-mini-map{width:140px;left:8px;bottom:8px}.tree-person-photo-editor{align-items:flex-start}.activity-diff>div{grid-template-columns:1fr}.activity-diff b{display:none}}
@media(max-width:600px){.tree-mini-map{display:none!important}.tree-search-suggestions{position:fixed;top:auto;right:12px;left:12px;max-height:44vh}.tree-person-photo-editor{flex-direction:column}.tree-person-photo-editor img{width:72px;height:72px}.tree-viewport[data-tree-style="radial"] .tree-node-wrap>.tree-children{gap:18px}}


/* v1.1 usability + background sync */
.global-sync-state{min-width:190px}
.global-sync-state span{display:block;font-weight:700}
.global-sync-state small{display:block;font-size:9px;opacity:.75;margin-top:1px}
.advanced-sync-tools{padding:0!important;overflow:hidden}
.advanced-sync-tools>summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800}
.advanced-sync-tools>summary::-webkit-details-marker{display:none}
.advanced-sync-tools>summary:after{content:'⌄';font-size:18px;transition:.2s transform}
.advanced-sync-tools[open]>summary:after{transform:rotate(180deg)}
.advanced-sync-tools>summary small{font-weight:500;font-size:10px;opacity:.65;margin-inline-start:auto}
.advanced-sync-content{padding:0 18px 18px;border-top:1px solid rgba(0,0,0,.06)}
.copy-ticket-btn{border:0;border-radius:9px;padding:7px 11px;cursor:pointer;font-family:inherit;font-weight:800;background:rgba(255,255,255,.9);color:inherit;margin-top:7px}
.ticket-success .copy-ticket-btn:hover{transform:translateY(-1px)}
#profileUsername:not(:disabled){background:#fff;border-color:rgba(14,115,126,.32)}
@media(max-width:720px){.global-sync-state{min-width:0}.global-sync-state small{display:none}.advanced-sync-tools>summary small{display:none}}


/* =========================================================
   v1.2 — Admin typography
   ========================================================= */
.admin-page{
  font-family:'Tajawal','Cairo',Tahoma,Arial,sans-serif;
  font-size:14px;
  line-height:1.7;
  letter-spacing:0;
}
.admin-page h1,.admin-page h2,.admin-page h3,.admin-page h4,
.admin-page .admin-brand strong,.admin-page .summary-card b,
.admin-page .modal-card>h3{
  font-family:'Cairo','Tajawal',Tahoma,Arial,sans-serif;
  letter-spacing:0;
}
.admin-page .admin-top h1{font-size:21px;font-weight:800;line-height:1.35}
.admin-page .admin-top p{font-size:12px;line-height:1.5}
.admin-page .admin-nav button{font-size:13.5px;font-weight:700;line-height:1.55;padding:11px 12px}
.admin-page .sidebar-profile b{font-size:13px}
.admin-page .sidebar-profile small{font-size:11px}
.admin-page .panel-head h3{font-size:17px;font-weight:800}
.admin-page .panel-head p{font-size:12px;line-height:1.65}
.admin-page .summary-card span{font-size:12.5px;font-weight:600}
.admin-page .summary-card small{font-size:10.5px}
.admin-page .list-item b{font-size:13px}
.admin-page .list-item small{font-size:10.5px}
.admin-page label{font-size:13.5px;line-height:1.6}
.admin-page input,.admin-page textarea,.admin-page select{font-size:14px;line-height:1.55}
.admin-page button,.admin-page a{font-family:'Tajawal','Cairo',Tahoma,Arial,sans-serif}
.admin-page table{font-size:13px;line-height:1.65}
.admin-page th{font-weight:800}
.admin-page td{font-weight:500}
.admin-page .small-action{font-size:11.5px}
.admin-page .status,.admin-page .permission-pill{font-size:10.5px}

/* =========================================================
   v1.2 — Notification dropdown
   ========================================================= */
.notifications-wrap{position:relative;flex:0 0 auto}
.notification-btn{font-size:18px;display:grid;place-items:center}
.notifications-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:min(390px,calc(100vw - 34px));
  max-height:520px;
  background:#fff;
  border:1px solid #dce7ea;
  border-radius:16px;
  box-shadow:0 20px 50px rgba(14,50,62,.18);
  z-index:500;
  overflow:hidden;
  transform-origin:top left;
  animation:notificationDrop .16s ease;
}
@keyframes notificationDrop{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:none}}
.notifications-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 15px;border-bottom:1px solid #e8eff1;background:#fbfdfd
}
.notifications-head b{display:block;font-family:'Cairo','Tajawal',sans-serif;font-size:15px}
.notifications-head small{display:block;color:var(--muted);font-size:10.5px;margin-top:1px}
.notifications-list{max-height:370px;overflow:auto;padding:7px}
.notification-item{
  width:100%;border:0;background:#fff;border-radius:12px;padding:10px;
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;
  align-items:center;text-align:right;transition:.18s ease
}
.notification-item:hover{background:#f0f8f9}
.notification-item+.notification-item{border-top:1px solid #eef3f4;border-radius:0}
.notification-icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:#e8f6f7;color:var(--navy2);font-size:17px
}
.notification-icon.request{background:#fff5df;color:#97660b}
.notification-copy{min-width:0}
.notification-copy b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-copy span{display:block;color:#667d85;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.notification-item time{font-size:9.5px;color:#93a2a7;white-space:nowrap}
.notifications-empty{padding:34px 20px;text-align:center;color:#7b8d93}
.notifications-empty i{display:block;font-style:normal;font-size:28px;margin-bottom:7px}
.notifications-empty b{display:block;color:#506a73;font-size:13px}
.notifications-empty span{font-size:11px}
.notifications-footer{
  border-top:1px solid #e8eff1;background:#fbfdfd;padding:7px 10px;
  display:flex;justify-content:space-between;gap:8px
}

/* =========================================================
   v1.2 — Optional person status
   ========================================================= */
.person-optional-status{
  display:grid;grid-template-columns:1fr 1fr;gap:0 12px;
  background:#f7fafb;border:1px solid #e1eaed;border-radius:12px;
  padding:11px 12px;margin-bottom:13px
}
.person-optional-status label{margin-bottom:0}
.person-status-badges{
  display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:4px
}
.person-status-badge{
  display:inline-flex;align-items:center;gap:3px;border-radius:999px;
  padding:2px 7px;font-size:9px;font-style:normal;font-weight:800;
  border:1px solid #d7e6e9;background:#f1f7f8;color:#456b74
}
.person-status-badge.married{background:#eef5ff;border-color:#d8e5f5;color:#416485}
.person-status-badge.single{background:#f5f1ff;border-color:#e4dbf6;color:#66538d}
.person-status-badge.deceased{background:#f2f2f2;border-color:#dddddd;color:#5d6264}
.tree-admin-status{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0 1px}
.tree-node-card.is-deceased{border-color:#cdd2d4}
.tree-node-card.is-deceased .node-avatar{filter:grayscale(.55)}
.tree-node-card.is-deceased .node-text>b{color:#4f595d}
.side-status-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:9px 0 3px
}

@media(max-width:720px){
  .notifications-dropdown{position:fixed;top:78px;right:12px;left:12px;width:auto;max-height:70vh}
  .person-optional-status{grid-template-columns:1fr}
  .person-optional-status label+label{margin-top:9px}
}


/* =========================================================
   v1.3 — Tree health, notification center, branch strip,
   collaboration and large-tree rendering
   ========================================================= */
.field-hint{display:block;margin-top:5px;color:#7a8e95;font-size:10.5px;font-weight:500}

.tree-health-panel{margin:14px 0 15px;padding:14px;border:1px solid #dce8eb;border-radius:16px;background:linear-gradient(135deg,#fbfefe,#f4f9fa)}
.tree-health-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.tree-health-head>div{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tree-health-head b{font-family:'Cairo','Tajawal',sans-serif;font-size:14px;color:var(--navy)}
.tree-health-head span{font-size:10.5px;color:#758a91}
.tree-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.tree-health-grid>button{border:1px solid #dfe9eb;background:#fff;border-radius:12px;padding:10px;text-align:right;cursor:pointer;transition:.18s ease;min-height:83px}
.tree-health-grid>button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(20,67,80,.08);border-color:#bcd8de}
.tree-health-grid>button b{display:block;font-size:19px;color:var(--navy);line-height:1.15}
.tree-health-grid>button span{display:block;font-weight:800;font-size:11.5px;margin-top:5px}
.tree-health-grid>button small{display:block;color:#819198;font-size:9.5px;margin-top:2px}
.tree-health-grid>button.has-issues b{color:#c26a21}
.tree-health-grid>button.critical b{color:#b54040}
.tree-health-details{margin-top:10px;border-top:1px solid #e3ecee;padding-top:10px}
.tree-health-detail-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:10px;background:#fff;border:1px solid #edf2f3;margin-top:6px}
.tree-health-detail-row>div{min-width:0}.tree-health-detail-row b{display:block;font-size:11.5px}.tree-health-detail-row span{display:block;font-size:9.5px;color:#778b92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-health-ok{display:flex;align-items:center;gap:8px;color:#268056;font-weight:700;font-size:11px}

.notifications-dropdown{width:min(440px,calc(100vw - 34px))}
.notifications-head-actions{display:flex;align-items:center;gap:5px}
.notifications-head-actions .text-btn{font-size:10px;padding:5px 7px}
.notification-filters{display:flex;gap:5px;padding:8px 9px;border-bottom:1px solid #edf2f3;background:#fff;overflow:auto}
.notification-filters button{border:1px solid #dce7e9;background:#f8fbfb;border-radius:999px;padding:5px 10px;font-size:10.5px;white-space:nowrap;cursor:pointer;color:#58717a}
.notification-filters button.active{background:var(--navy);border-color:var(--navy);color:#fff}
.notification-item{position:relative}
.notification-item.unread{background:#f1fafb}
.notification-item.unread::before{content:'';position:absolute;right:5px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#e25353}
.notification-item.read{opacity:.76}
.notification-category{display:inline-flex!important;width:max-content;margin-top:3px!important;border-radius:999px;padding:1px 6px;font-size:8.5px!important;font-weight:800}
.notification-category.messages{background:#e8f5f8;color:#236579}.notification-category.requests{background:#fff3dc;color:#946315}.notification-category.changes{background:#f0ebfb;color:#6e5497}
.notification-read-toggle{width:25px;height:25px;border:0;border-radius:50%;background:#eef4f5;cursor:pointer;font-size:11px;color:#537078;display:grid;place-items:center}
.notification-item time{align-self:start;margin-top:4px}

.tree-edit-presence{margin:8px 0 12px;padding:9px 11px;border-radius:11px;font-size:11px;line-height:1.6;background:#eef8f9;border:1px solid #cce5e8;color:#365f69}
.tree-edit-presence.busy{background:#fff4df;border-color:#efd394;color:#815c15}
.tree-edit-presence.me{background:#eef8f2;border-color:#c7e3d0;color:#2d7048}

.family-branch-strip{display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:9px 10px;border:1px solid #dce8eb;border-radius:14px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px)}
.branch-strip-label{font-size:10.5px;font-weight:800;color:#678088;white-space:nowrap}
.family-branch-buttons{display:flex;gap:6px;overflow:auto;scrollbar-width:thin;padding:1px;min-width:0}
.family-branch-buttons button{border:1px solid #d6e5e8;background:#fff;color:#496b74;border-radius:999px;padding:7px 11px;font-size:10.5px;font-weight:800;white-space:nowrap;cursor:pointer;transition:.18s ease}
.family-branch-buttons button:nth-child(5n+2){--branch-accent:#1f7f91}.family-branch-buttons button:nth-child(5n+3){--branch-accent:#7c679b}.family-branch-buttons button:nth-child(5n+4){--branch-accent:#8a7440}.family-branch-buttons button:nth-child(5n+5){--branch-accent:#4d8660}.family-branch-buttons button:nth-child(5n+6){--branch-accent:#a45f67}
.family-branch-buttons button:hover,.family-branch-buttons button.active{background:var(--branch-accent,var(--navy));border-color:var(--branch-accent,var(--navy));color:#fff;transform:translateY(-1px)}

.tree-load-more{border:1px dashed #b8d4da;background:#f7fbfc;color:#49717a;border-radius:12px;padding:8px 15px;margin:8px auto 0;font-size:10.5px;font-weight:800;cursor:pointer;min-width:140px}
.large-tree-notice{display:flex;align-items:center;gap:8px;margin:7px 0 0;color:#6e8289;font-size:10px}
.large-tree-notice b{color:var(--navy)}

@media(max-width:900px){.tree-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
 .tree-health-grid{grid-template-columns:1fr 1fr}.tree-health-grid>button{min-height:76px;padding:9px}
 .tree-health-head{align-items:flex-start}.tree-health-head>div{display:block}.tree-health-head span{display:block;margin-top:2px}
 .family-branch-strip{align-items:flex-start;flex-direction:column;gap:5px}.family-branch-buttons{width:100%}
 .notifications-head{align-items:flex-start}.notifications-head-actions{flex-direction:column;align-items:flex-end}
}
.notification-item{grid-template-columns:38px minmax(0,1fr) auto 28px}
.tree-health-detail-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}.tree-health-detail-title b{font-size:11.5px}.tree-health-detail-title span{font-size:9.5px;color:#7d8e94}

/* =========================================================
   v1.4 — reliability/performance polish
   ========================================================= */
.tree-node-card.loading-branch{opacity:.72;pointer-events:none}
.tree-node-card.loading-branch .expand-indicator{animation:qSpin .8s linear infinite}
@keyframes qSpin{to{transform:rotate(360deg)}}
.login-identity-hint{display:block;margin:-7px 2px 11px;color:#71868d;font-size:11px;line-height:1.6}
.tree-empty{min-height:120px;display:grid;place-items:center;text-align:center;color:#668087;font-weight:700}


/* =========================================================
   v1.5 — safety, system status, Drive and mobile admin
   ========================================================= */
.session-expired-banner{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2000;
  width:min(760px,calc(100vw - 24px));background:#fff7e6;border:1px solid #ebcf8d;
  border-radius:14px;box-shadow:0 14px 38px rgba(44,54,57,.18);padding:11px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;color:#72581c
}
.session-expired-banner[hidden]{display:none!important}
.session-expired-banner b{display:block;font-size:13px}
.session-expired-banner span{display:block;font-size:11px;margin-top:2px}
.tree-draft-notice{
  margin-top:10px;padding:9px 11px;border:1px solid #c7e2d6;background:#eff9f4;
  color:#296b51;border-radius:10px;font-size:11px;font-weight:700
}
.system-status-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:14px
}
.system-status-card{
  padding:13px;border:1px solid #e0e9ec;border-radius:13px;background:#fbfdfd;
  min-height:88px;display:flex;flex-direction:column;justify-content:space-between;gap:7px
}
.system-status-card span{font-size:11px;color:#71858c;font-weight:700}
.system-value{font-size:13px;font-family:'Cairo','Tajawal',sans-serif;color:#274a55;overflow-wrap:anywhere}
.system-value.good{color:#16704b}.system-value.warn{color:#9a6a13}.system-value.bad{color:#b54040}
.drive-backup-panel{border-color:#d9e6fb;background:linear-gradient(135deg,#fff,#f7faff)}
.drive-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drive-actions .primary-btn{grid-column:1/-1}
.drive-backup-status{margin-top:10px;padding:9px 10px;border-radius:10px;font-size:11px}
.drive-backup-status.neutral{background:#f2f6f7;color:#61747a}
.drive-backup-status.working{background:#fff8df;color:#816717}
.drive-backup-status.success{background:#eaf8ef;color:#237046}
.drive-backup-status.error{background:#fff0f0;color:#a83b3b}

/* Better permanent sync visibility */
.global-sync-state{min-width:175px}
.global-sync-state .sync-main-text{font-weight:800}

/* Mobile admin reliability */
@media(max-width:760px){
  .admin-main{min-width:0}
  .admin-top{position:sticky;top:0;z-index:65;background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}
  .admin-top-actions{gap:6px}
  .global-sync-state{min-width:0;max-width:165px}
  .global-sync-state small{display:none}
  .admin-view{padding-bottom:84px}
  .modal-card.form-modal{width:100%;max-height:94dvh;border-radius:18px 18px 0 0;margin-top:auto;padding-bottom:0}
  .modal.show{align-items:flex-end;padding:0}
  .modal-actions{
    position:sticky;bottom:0;z-index:4;background:#fff;border-top:1px solid #e4ecef;
    margin:14px -18px 0;padding:11px 18px calc(11px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 20px rgba(20,55,65,.06)
  }
  .modal-actions button{min-height:44px;flex:1}
  .admin-page input,.admin-page select,.admin-page textarea{font-size:16px;min-height:44px}
  .admin-page textarea{min-height:96px}
  .small-action,.outline-btn,.primary-btn,.danger-btn,.success-btn{min-height:42px}
  .form-grid{grid-template-columns:1fr}
  .wide-row{grid-column:1}
  .system-status-grid{grid-template-columns:1fr 1fr}
  .drive-actions{grid-template-columns:1fr}
  .drive-actions .primary-btn{grid-column:1}
}
@media(max-width:480px){
  .system-status-grid{grid-template-columns:1fr}
  .session-expired-banner{align-items:stretch;flex-direction:column}
  .session-expired-banner button{width:100%}
}

/* v1.5.1 stability */
.system-value[data-integrity="warning"]{color:#9a6a13}

/* v1.5.2 unified source-of-truth gate */
.unified-tree-gate{
  margin-bottom:12px;padding:11px 13px;border-radius:12px;display:flex;flex-direction:column;gap:2px
}
.unified-tree-gate b{font-size:12.5px}
.unified-tree-gate span{font-size:10.5px;line-height:1.6}
.unified-tree-gate.waiting{background:#fff8e3;border:1px solid #eddc99;color:#7b6217}
.unified-tree-gate.ready{background:#eaf8ef;border:1px solid #b9dfc7;color:#226e46}

/* v1.5.3 final stability */
.unified-tree-gate{
  margin:0 0 12px;padding:11px 13px;border-radius:12px;
  display:flex;flex-direction:column;gap:2px
}
.unified-tree-gate b{font-size:12.5px}
.unified-tree-gate span{font-size:10.5px;line-height:1.65}
.unified-tree-gate.waiting{background:#fff8e3;border:1px solid #eddc99;color:#7b6217}
.unified-tree-gate.ready{background:#eaf8ef;border:1px solid #b9dfc7;color:#226e46}
.advanced-sync-tools button[hidden]{display:none!important}


/* =============================================================
   v1.5.4 — Constellation / Star Family Tree display mode
   Ported from the isolated developer frontend without touching
   Firebase, permissions, admin workflows, or tree data structure.
   ============================================================= */
@keyframes qfConstellationPulseRing{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.42}
  100%{transform:translate(-50%,-50%) scale(2.15);opacity:0}
}
@keyframes qfConstellationTwinkle{
  0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(255,255,255,.75))}
  50%{filter:brightness(1.32) drop-shadow(0 0 14px rgba(255,255,255,1))}
}
@keyframes qfConstellationGlow{
  0%,100%{box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 16px rgba(255,255,255,.72),0 0 32px rgba(52,211,153,.42),0 0 54px rgba(16,185,129,.20)}
  50%{box-shadow:0 0 0 7px rgba(255,255,255,.12),0 0 25px rgba(255,255,255,.9),0 0 46px rgba(52,211,153,.62),0 0 70px rgba(16,185,129,.28)}
}

.tree-viewport[data-tree-style="constellation"]{
  min-height:620px;
  background-color:#070e1e;
  background-image:
    radial-gradient(1px 1px at 8% 18%,rgba(255,255,255,.85) 0,transparent 100%),
    radial-gradient(1.2px 1.2px at 18% 68%,rgba(255,255,255,.58) 0,transparent 100%),
    radial-gradient(1px 1px at 28% 42%,rgba(255,255,255,.70) 0,transparent 100%),
    radial-gradient(1px 1px at 39% 84%,rgba(255,255,255,.42) 0,transparent 100%),
    radial-gradient(1px 1px at 45% 12%,rgba(255,255,255,.62) 0,transparent 100%),
    radial-gradient(1.4px 1.4px at 62% 28%,rgba(255,255,255,.82) 0,transparent 100%),
    radial-gradient(1px 1px at 71% 78%,rgba(255,255,255,.48) 0,transparent 100%),
    radial-gradient(1px 1px at 78% 55%,rgba(255,255,255,.52) 0,transparent 100%),
    radial-gradient(1px 1px at 88% 22%,rgba(255,255,255,.64) 0,transparent 100%),
    radial-gradient(1.2px 1.2px at 94% 88%,rgba(255,255,255,.50) 0,transparent 100%),
    radial-gradient(900px 600px at 50% -10%,rgba(16,185,129,.18) 0%,rgba(16,185,129,.06) 25%,transparent 65%),
    radial-gradient(700px 430px at 30% 60%,rgba(52,211,153,.10) 0%,transparent 60%),
    linear-gradient(180deg,#0a1228 0%,#0d1a33 42%,#08101f 100%);
  border-color:#1a2a44;
  box-shadow:0 18px 48px rgba(2,8,23,.28);
  scrollbar-color:#31556a transparent;
}
.tree-fullscreen-open .tree-viewport[data-tree-style="constellation"]{
  background-color:#070e1e;
  background-image:
    radial-gradient(1px 1px at 8% 18%,rgba(255,255,255,.85) 0,transparent 100%),
    radial-gradient(1.2px 1.2px at 18% 68%,rgba(255,255,255,.58) 0,transparent 100%),
    radial-gradient(1px 1px at 28% 42%,rgba(255,255,255,.70) 0,transparent 100%),
    radial-gradient(1px 1px at 45% 12%,rgba(255,255,255,.62) 0,transparent 100%),
    radial-gradient(1.4px 1.4px at 62% 28%,rgba(255,255,255,.82) 0,transparent 100%),
    radial-gradient(1px 1px at 78% 55%,rgba(255,255,255,.52) 0,transparent 100%),
    radial-gradient(1px 1px at 88% 22%,rgba(255,255,255,.64) 0,transparent 100%),
    radial-gradient(900px 600px at 50% -10%,rgba(16,185,129,.18) 0%,rgba(16,185,129,.06) 25%,transparent 65%),
    linear-gradient(180deg,#0a1228 0%,#0d1a33 42%,#08101f 100%);
}
.tree-viewport[data-tree-style="constellation"] .tree-canvas{padding:28px 54px 70px}
.tree-viewport[data-tree-style="constellation"] .tree-node-wrap{overflow:visible}
.tree-viewport[data-tree-style="constellation"] .tree-children{gap:48px;padding-top:68px;overflow:visible}
.tree-viewport[data-tree-style="constellation"] .tree-children:before{
  top:33px;height:0;background:none;border-top:2px dashed rgba(52,211,153,.48);
  filter:drop-shadow(0 0 5px rgba(52,211,153,.62));
}
.tree-viewport[data-tree-style="constellation"] .tree-children>.tree-node-wrap:before{
  top:-35px;height:35px;border-right:2px dashed rgba(52,211,153,.50);
  filter:drop-shadow(0 0 5px rgba(52,211,153,.65));
}
.tree-viewport[data-tree-style="constellation"] .tree-node-wrap>.tree-children:after{
  top:0;height:33px;border-right:2px dashed rgba(52,211,153,.50);
  filter:drop-shadow(0 0 5px rgba(52,211,153,.65));
}

.tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card{
  width:136px;min-width:136px;max-width:136px;height:92px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;
  padding:0;background:transparent;border:0!important;border-radius:0;box-shadow:none!important;
  overflow:visible;isolation:isolate;color:#e2e8f0;
  transition:transform .36s cubic-bezier(.34,1.56,.64,1),opacity .25s ease,filter .25s ease!important;
}
.tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card:hover{
  transform:translateY(-7px) scale(1.14)!important;z-index:30;box-shadow:none!important;border:0!important;
}
.tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card.selected{
  transform:translateY(-5px) scale(1.09)!important;z-index:28;border:0!important;box-shadow:none!important;
}
.tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card.muted-branch{opacity:.28;filter:saturate(.5)}
.tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card.match .node-avatar{
  box-shadow:0 0 0 8px rgba(253,224,71,.18),0 0 28px rgba(255,255,255,.95),0 0 62px rgba(253,224,71,.62)!important;
}

.tree-viewport[data-tree-style="constellation"] .node-avatar{
  width:40px;height:40px;flex:0 0 40px;margin:0 auto 10px;position:relative;overflow:visible;
  display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.92);
  background:radial-gradient(circle at 40% 35%,#fff 0%,#f0fdf4 18%,#bbf7d0 38%,#86efac 68%);
  color:#052e16;font-family:'Cairo',sans-serif;font-size:14px;font-weight:900;
  box-shadow:0 0 0 5px rgba(255,255,255,.10),0 0 16px rgba(255,255,255,.82),0 0 32px rgba(52,211,153,.50),0 0 56px rgba(16,185,129,.25);
  animation:qfConstellationTwinkle 2.8s ease-in-out infinite,qfConstellationGlow 3.2s ease-in-out infinite;
  transition:all .38s cubic-bezier(.34,1.56,.64,1);
}
.tree-viewport[data-tree-style="constellation"] .node-avatar:before,
.tree-viewport[data-tree-style="constellation"] .node-avatar:after{
  content:"";position:absolute;top:50%;left:50%;width:64px;height:64px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(1);animation:qfConstellationPulseRing 2.6s ease-out infinite;
}
.tree-viewport[data-tree-style="constellation"] .node-avatar:before{border:1.5px solid rgba(52,211,153,.34)}
.tree-viewport[data-tree-style="constellation"] .node-avatar:after{border:1px solid rgba(255,255,255,.18);animation-delay:.8s}
.tree-viewport[data-tree-style="constellation"] .node-avatar img{border-radius:50%;position:relative;z-index:1}
.tree-viewport[data-tree-style="constellation"] .family-card:has(.person-status-badge.married) .node-avatar{
  background:radial-gradient(circle at 40% 35%,#fff 0%,#dcfce7 18%,#86efac 38%,#22c55e 68%);
  box-shadow:0 0 0 5px rgba(34,197,94,.15),0 0 18px rgba(255,255,255,.82),0 0 36px rgba(34,197,94,.56),0 0 60px rgba(16,185,129,.30);
}
.tree-viewport[data-tree-style="constellation"] .family-card:has(.person-status-badge.single) .node-avatar{
  background:radial-gradient(circle at 40% 35%,#fff 0%,#f3e8ff 18%,#d8b4fe 38%,#a855f7 68%);
  box-shadow:0 0 0 5px rgba(168,85,247,.12),0 0 18px rgba(255,255,255,.8),0 0 36px rgba(168,85,247,.50),0 0 60px rgba(139,92,246,.25);
}
.tree-viewport[data-tree-style="constellation"] .family-card.is-deceased .node-avatar{
  filter:none;
  background:radial-gradient(circle at 40% 35%,#fff 0%,#fef9c3 18%,#fde047 38%,#eab308 68%);
  box-shadow:0 0 0 5px rgba(234,179,8,.15),0 0 18px rgba(255,255,255,.8),0 0 36px rgba(234,179,8,.50),0 0 60px rgba(202,138,4,.25);
}
.tree-viewport[data-tree-style="constellation"] .family-card:hover .node-avatar,
.tree-viewport[data-tree-style="constellation"] .family-card.selected .node-avatar{
  width:52px;height:52px;flex-basis:52px;font-size:17px;animation:none;
  box-shadow:0 0 0 7px rgba(255,255,255,.14),0 0 26px rgba(255,255,255,.95),0 0 52px rgba(52,211,153,.68),0 0 84px rgba(16,185,129,.40);
}

.tree-viewport[data-tree-style="constellation"] .node-text{
  width:146px;min-width:0;overflow:visible;text-align:center;position:relative;color:#e2e8f0;
}
.tree-viewport[data-tree-style="constellation"] .node-text>b{
  display:block;color:#e2e8f0!important;font-family:'Cairo',sans-serif;font-size:11.5px!important;font-weight:700;
  line-height:1.35!important;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;
  text-shadow:0 0 8px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.8);
}
.tree-viewport[data-tree-style="constellation"] .family-card:hover .node-text>b,
.tree-viewport[data-tree-style="constellation"] .family-card.selected .node-text>b{
  color:#fff!important;text-shadow:0 0 12px rgba(255,255,255,.72),0 0 24px rgba(52,211,153,.48);
}
.tree-viewport[data-tree-style="constellation"] .node-relation,
.tree-viewport[data-tree-style="constellation"] .node-text>em,
.tree-viewport[data-tree-style="constellation"] .person-status-badges{
  position:absolute;left:50%;transform:translateX(-50%) translateY(7px) scale(.94);opacity:0;pointer-events:none;
  transition:all .34s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;z-index:40;
}
.tree-viewport[data-tree-style="constellation"] .node-relation{
  top:25px!important;display:block!important;width:max-content;max-width:220px;padding:4px 9px;border-radius:999px;
  background:rgba(15,23,42,.90);backdrop-filter:blur(11px);border:1px solid rgba(255,255,255,.12);
  color:#cbd5e1!important;font-size:9px!important;box-shadow:0 8px 24px rgba(0,0,0,.34);
}
.tree-viewport[data-tree-style="constellation"] .person-status-badges{top:53px;display:flex;gap:4px;margin:0}
.tree-viewport[data-tree-style="constellation"] .person-status-badge{
  border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.86);backdrop-filter:blur(8px);
  color:#e2e8f0;font-size:8px;padding:2px 7px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.tree-viewport[data-tree-style="constellation"] .person-status-badge.married{background:rgba(16,185,129,.16);color:#6ee7b7;border-color:rgba(52,211,153,.25)}
.tree-viewport[data-tree-style="constellation"] .person-status-badge.single{background:rgba(168,85,247,.16);color:#d8b4fe;border-color:rgba(168,85,247,.25)}
.tree-viewport[data-tree-style="constellation"] .person-status-badge.deceased{background:rgba(234,179,8,.16);color:#fde68a;border-color:rgba(234,179,8,.25)}
.tree-viewport[data-tree-style="constellation"] .node-text>em{
  top:79px;width:max-content;max-width:210px;padding:3px 8px;border-radius:999px;background:rgba(15,23,42,.88);
  color:#94a3b8!important;font-size:8px!important;font-style:normal;border:1px solid rgba(255,255,255,.10);
}
.tree-viewport[data-tree-style="constellation"] .family-card:hover .node-relation,
.tree-viewport[data-tree-style="constellation"] .family-card:hover .node-text>em,
.tree-viewport[data-tree-style="constellation"] .family-card:hover .person-status-badges,
.tree-viewport[data-tree-style="constellation"] .family-card.selected .node-relation,
.tree-viewport[data-tree-style="constellation"] .family-card.selected .node-text>em,
.tree-viewport[data-tree-style="constellation"] .family-card.selected .person-status-badges{
  opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;
}

.tree-viewport[data-tree-style="constellation"] .children-count{
  top:-7px;left:-8px;min-width:25px;height:25px;border:1px solid rgba(255,255,255,.25);
  background:rgba(16,185,129,.92);box-shadow:0 6px 18px rgba(16,185,129,.35);color:#fff;
}
.tree-viewport[data-tree-style="constellation"] .children-count small{display:none}
.tree-viewport[data-tree-style="constellation"] .expand-indicator{
  bottom:-13px;right:50%;width:24px;height:24px;border:1px solid rgba(110,231,183,.45);
  background:rgba(15,23,42,.90);color:#6ee7b7;box-shadow:0 0 12px rgba(52,211,153,.24);
}
.tree-viewport[data-tree-style="constellation"] .leaf-node-badge{display:none}
.tree-viewport[data-tree-style="constellation"] .node-actions{
  position:absolute;top:46px;right:-15px;display:flex;flex-direction:row;gap:4px;opacity:0;transform:scale(.9);
  transition:.25s ease;z-index:45;
}
.tree-viewport[data-tree-style="constellation"] .family-card:hover .node-actions,
.tree-viewport[data-tree-style="constellation"] .family-card.selected .node-actions{opacity:1;transform:scale(1)}
.tree-viewport[data-tree-style="constellation"] .node-mini-btn{
  width:24px;height:24px;border:1px solid rgba(255,255,255,.14);background:rgba(15,23,42,.88);color:#d1fae5;
  box-shadow:0 5px 14px rgba(0,0,0,.28);
}
.tree-viewport[data-tree-style="constellation"] .node-mini-btn:hover{background:rgba(16,185,129,.92);color:#fff}
.tree-viewport[data-tree-style="constellation"] .tree-load-more{
  align-self:flex-start;margin-top:20px;background:rgba(15,23,42,.9);border:1px solid rgba(52,211,153,.35);color:#a7f3d0;
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.tree-viewport[data-tree-style="constellation"] .tree-empty{color:#94a3b8}
.tree-viewport[data-tree-style="constellation"] .tree-mini-map{background:rgba(15,23,42,.88);border-color:rgba(255,255,255,.12)}

@media(max-width:700px){
  .tree-viewport[data-tree-style="constellation"]{min-height:520px;padding:22px 12px}
  .tree-viewport[data-tree-style="constellation"] .tree-canvas{padding:8px 4px 34px}
  .tree-viewport[data-tree-style="constellation"] .tree-node-wrap{width:100%;align-items:stretch}
  .tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card{
    width:100%;min-width:0;max-width:none;height:auto;min-height:68px;display:grid;grid-template-columns:50px 1fr auto;
    gap:10px;align-items:center;padding:9px 11px;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px;
    background:rgba(15,23,42,.54);backdrop-filter:blur(9px);box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
  }
  .tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card:hover,
  .tree-viewport[data-tree-style="constellation"] .tree-node-card.family-card.selected{transform:none!important}
  .tree-viewport[data-tree-style="constellation"] .node-avatar,
  .tree-viewport[data-tree-style="constellation"] .family-card:hover .node-avatar,
  .tree-viewport[data-tree-style="constellation"] .family-card.selected .node-avatar{
    width:42px;height:42px;flex-basis:42px;margin:0;font-size:14px;animation:qfConstellationTwinkle 3.2s ease-in-out infinite;
  }
  .tree-viewport[data-tree-style="constellation"] .node-avatar:before,
  .tree-viewport[data-tree-style="constellation"] .node-avatar:after{width:56px;height:56px}
  .tree-viewport[data-tree-style="constellation"] .node-text{width:auto;text-align:right;overflow:hidden}
  .tree-viewport[data-tree-style="constellation"] .node-text>b{text-align:right!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tree-viewport[data-tree-style="constellation"] .node-relation,
  .tree-viewport[data-tree-style="constellation"] .node-text>em,
  .tree-viewport[data-tree-style="constellation"] .person-status-badges{
    position:static;transform:none!important;opacity:1;pointer-events:auto;margin-top:3px;max-width:100%;
  }
  .tree-viewport[data-tree-style="constellation"] .node-relation{display:block!important;width:auto;background:transparent;border:0;box-shadow:none;padding:0;color:#94a3b8!important}
  .tree-viewport[data-tree-style="constellation"] .person-status-badges{justify-content:flex-start;flex-wrap:wrap}
  .tree-viewport[data-tree-style="constellation"] .node-text>em{display:block;width:auto;background:transparent;border:0;padding:0;color:#64748b!important}
  .tree-viewport[data-tree-style="constellation"] .node-actions{position:static;opacity:1;transform:none;flex-direction:column}
  .tree-viewport[data-tree-style="constellation"] .children-count{top:-7px;left:4px}
  .tree-viewport[data-tree-style="constellation"] .expand-indicator{bottom:-10px}
  .tree-viewport[data-tree-style="constellation"] .tree-children{gap:12px;padding-top:24px;padding-right:24px}
  .tree-viewport[data-tree-style="constellation"] .tree-children:before{display:none}
  .tree-viewport[data-tree-style="constellation"] .tree-children>.tree-node-wrap:before{
    top:-12px;right:-14px;height:calc(100% + 12px);border-right:1px dashed rgba(52,211,153,.50);filter:drop-shadow(0 0 4px rgba(52,211,153,.42));
  }
  .tree-viewport[data-tree-style="constellation"] .tree-node-wrap>.tree-children:after{
    top:0;right:11px;height:24px;border-right:1px dashed rgba(52,211,153,.50);
  }
  .tree-viewport[data-tree-style="constellation"] .tree-children>.tree-node-wrap:after{
    border-top:1px dashed rgba(52,211,153,.50);filter:drop-shadow(0 0 4px rgba(52,211,153,.42));
  }
}

@media(prefers-reduced-motion:reduce){
  .tree-viewport[data-tree-style="constellation"] .node-avatar,
  .tree-viewport[data-tree-style="constellation"] .node-avatar:before,
  .tree-viewport[data-tree-style="constellation"] .node-avatar:after{animation:none!important}
}


/* =========================================================
   Qwaider Family v1.5.8 - UX workflow refinements
   ========================================================= */
.tree-mini-map{display:none!important}
.social-rail{top:auto!important;bottom:24px!important;left:18px!important;z-index:86!important;display:flex!important;flex-direction:column;gap:10px;align-items:flex-start}
.social-btn{position:relative;overflow:hidden}
.floating-stack{z-index:87}
.live-chat-auto-note{display:grid;grid-template-columns:10px 1fr;gap:1px 8px;align-items:center;background:#eef9f6;border:1px solid #d5eee6;border-radius:12px;padding:10px 12px;margin:10px 0 14px;color:#286c58}
.live-chat-auto-note>span{grid-row:1/3;color:#17a36e;font-size:12px}.live-chat-auto-note b{font-size:11px}.live-chat-auto-note small{font-size:9px;color:#69867d}
.live-chat-preview{margin-top:12px;border:1px solid #d8e7e9;border-radius:14px;background:#f9fcfc;padding:10px}.live-chat-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}.live-chat-preview-head small,.live-chat-preview-head b{display:block}.live-chat-preview-head small{font-size:9px;color:#71858c}.live-chat-preview-head b{font-size:11px;color:var(--navy)}.live-chat-online{font-size:9px;background:#e3f7ee;color:#167150;border-radius:999px;padding:4px 8px;font-weight:800}.compact-live-thread{max-height:210px;padding:6px 0}.bubble.system{align-self:center;max-width:94%;background:#fff8df;color:#715b15;border:1px solid #f0df9b;text-align:right}.bubble.system>b{display:block;font-size:9px;margin-bottom:3px}.visitor-chat-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;color:#75888e;font-size:9px}
.selection-count{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:7px 9px;border-radius:999px;background:#f2f7f8;color:#627980;font-size:9px;font-weight:800}.danger-soft{color:#a74747!important;border-color:#e6caca!important;background:#fffafa!important}.danger-soft:hover{background:#fff0f0!important}.row-select{width:26px;min-width:26px;display:grid;place-items:center;align-self:center}.row-select input{position:absolute;opacity:0;pointer-events:none}.row-select span{width:18px;height:18px;border-radius:5px;border:1.5px solid #b9ccd1;background:#fff;display:block;position:relative}.row-select input:checked+span{background:var(--teal);border-color:var(--teal)}.row-select input:checked+span:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:900}.activity-item.selected-row,.trash-item.selected-row{box-shadow:0 0 0 2px rgba(7,136,154,.15);background:#f7fcfc}.activity-bulk-actions,.trash-bulk-actions{flex-wrap:wrap}.activity-item{position:relative}.trash-item{position:relative;display:grid;grid-template-columns:26px minmax(230px,1fr) minmax(180px,.7fr) auto;align-items:center;gap:12px}
.request-system-panel{overflow:visible}.request-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 0 12px}.request-summary-grid>div{background:#f6fafb;border:1px solid #e0eaed;border-radius:12px;padding:11px;text-align:center}.request-summary-grid span,.request-summary-grid b{display:block}.request-summary-grid span{font-size:9px;color:#71858c}.request-summary-grid b{font-size:20px;color:var(--navy);margin-top:2px}.request-filter-row{display:grid;grid-template-columns:minmax(240px,1fr) 180px 170px;gap:8px;margin-bottom:12px}.request-workflow-card{align-items:stretch;padding:14px}.request-main{flex:1;min-width:0}.request-title-row,.request-ticket-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.request-title-row h4{font-size:13px}.request-ticket-row{font-size:8px;color:#84979d;margin:2px 0 8px}.request-match-warning{margin:8px 0;background:#fff8e6;border:1px solid #f0dda4;color:#80651c;padding:7px 9px;border-radius:9px;font-size:9px}.workflow-actions{min-width:160px;justify-content:flex-end;align-content:center}.request-card .request-note{display:block;margin-top:5px;color:#7b6b4d}.request-card .request-structured{margin:5px 0}
.tree-style-quick-panel{border:1px solid #dce8ea;border-radius:14px;background:#fbfdfd;padding:12px;margin:12px 0}.tree-style-quick-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.tree-style-quick-head b,.tree-style-quick-head span{display:block}.tree-style-quick-head b{font-size:12px}.tree-style-quick-head span{font-size:9px;color:#75888e;margin-top:2px}.tree-style-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:10px 0 14px}.tree-style-cards.compact{grid-template-columns:repeat(6,1fr);margin:0}.tree-style-cards>button{border:1px solid #dae6e8;background:#fff;border-radius:12px;padding:8px;cursor:pointer;text-align:center;transition:.18s;min-width:0}.tree-style-cards>button:hover,.tree-style-cards>button.active{border-color:var(--teal);box-shadow:0 0 0 3px rgba(7,136,154,.09);transform:translateY(-1px)}.tree-style-cards>button.active{background:#f3fbfb}.tree-style-cards b,.tree-style-cards small{display:block}.tree-style-cards b{font-size:10px;color:#27464f;margin-top:5px}.tree-style-cards small{font-size:8px;color:#829399;margin-top:1px}.style-preview{height:38px;border-radius:8px;display:block;position:relative;overflow:hidden;background:#eef5f6}.style-preview:before,.style-preview:after{content:'';position:absolute}.style-preview.classic:before{width:11px;height:11px;border-radius:50%;background:#16899c;top:6px;left:50%;transform:translateX(-50%);box-shadow:-18px 18px 0 #82b8c0,0 18px 0 #82b8c0,18px 18px 0 #82b8c0}.style-preview.classic:after{width:38px;height:1px;background:#83aeb6;top:22px;left:50%;transform:translateX(-50%)}.style-preview.modern{background:linear-gradient(135deg,#e5f7f7,#fff)}.style-preview.modern:before{inset:7px 12px;border:1px solid rgba(7,136,154,.35);border-radius:7px;background:rgba(255,255,255,.58);box-shadow:0 5px 12px rgba(7,70,83,.10)}.style-preview.constellation{background:radial-gradient(circle at 50% 35%,#223a61,#07111f 70%)}.style-preview.constellation:before{width:7px;height:7px;border-radius:50%;background:#a7f3d0;top:8px;left:48%;box-shadow:-20px 15px 0 #c4b5fd,20px 15px 0 #fde68a,0 24px 0 #86efac}.style-preview.focus:before{inset:8px 18px;border:2px solid #16899c;border-radius:8px;box-shadow:0 0 0 5px rgba(7,136,154,.08)}.style-preview.radial:before{width:8px;height:8px;border-radius:50%;background:#16899c;top:15px;left:50%;transform:translateX(-50%);box-shadow:20px 0 0 #9bc7ce,-20px 0 0 #9bc7ce,0 -10px 0 #9bc7ce,0 10px 0 #9bc7ce}.style-preview.compact:before{inset:6px 10px;background:repeating-linear-gradient(to bottom,#7caab3 0 3px,transparent 3px 8px);opacity:.75}
@media(max-width:1000px){.tree-style-cards.compact{grid-template-columns:repeat(3,1fr)}.trash-item{grid-template-columns:26px 1fr}.trash-relations,.trash-item .row-actions{grid-column:2}.request-filter-row{grid-template-columns:1fr 1fr}.request-filter-row input{grid-column:1/-1}.request-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.social-rail{left:10px!important;bottom:82px!important;flex-direction:row}.social-btn{width:42px!important;height:42px!important}.social-btn:hover{width:42px!important;transform:translateY(-2px)!important}.social-label{display:none!important}.tree-style-cards,.tree-style-cards.compact{grid-template-columns:repeat(2,1fr)}.tree-style-quick-head{align-items:flex-start;flex-direction:column}.request-filter-row{grid-template-columns:1fr}.request-filter-row input{grid-column:auto}.request-workflow-card{flex-direction:column}.workflow-actions{min-width:0;justify-content:flex-start}.activity-bulk-actions,.trash-bulk-actions{width:100%}.activity-bulk-actions>* ,.trash-bulk-actions>*{flex:1}.request-summary-grid{grid-template-columns:1fr 1fr}.trash-item{grid-template-columns:26px 1fr}}