/* ═══════════════════════════════════════════
   شجرة بني ميمون — تنسيق واجهة العرض
   ═══════════════════════════════════════════ */
:root{
  --dark:#1a1208; --dark2:#2a1c08; --gold:#c9a84c; --gold2:#e8c97a; --gold3:#f6e2ac;
  --bg:#f3ecda; --parch:#fffdf6;
  --ink:#3d2406; --ink2:#5c3d11; --muted:#8a7343;
  --rose:#b2266a; --rose-bg:#fdeef3; --rose-bdr:#e8a9c4;
  --shadow-sm:0 2px 6px rgba(61,36,6,.10);
  --shadow-md:0 8px 24px rgba(61,36,6,.18);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--ink)}

/* ═══ Header ═══ */
#hdr{position:fixed;top:0;right:0;left:0;z-index:50;background:linear-gradient(180deg,#3a2913,#2a1d0d);box-shadow:0 4px 18px rgba(0,0,0,.35)}
#hdr::after{content:'';position:absolute;bottom:-2px;right:0;left:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold2) 50%,var(--gold) 82%,transparent)}
#row1{display:flex;align-items:center;gap:12px;padding:11px 18px 5px}
#row1 h1{font-family:'Amiri',serif;font-size:23px;color:var(--gold2);white-space:nowrap;display:flex;align-items:center;gap:8px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
#row1 h1 .leaf{font-size:19px}
#adm{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--gold2);text-decoration:none;border:1.5px solid rgba(201,168,76,.45);border-radius:99px;padding:6px 16px;white-space:nowrap;transition:all .2s}
#adm:hover{background:rgba(201,168,76,.18);border-color:var(--gold);color:var(--gold3)}
#srch-wrap{position:relative;flex:1;max-width:420px;margin-inline-start:auto}
#srch-wrap svg{position:absolute;top:50%;right:13px;transform:translateY(-50%);width:15px;height:15px;stroke:rgba(92,61,17,.6);fill:none;stroke-width:2;pointer-events:none}
#srch{width:100%;padding:8px 38px 8px 14px;border:1.5px solid rgba(201,168,76,.4);border-radius:99px;background:var(--parch);font-family:inherit;font-size:13.5px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
#srch:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(201,168,76,.25)}
#srch::placeholder{color:rgba(92,61,17,.55)}
#row2{display:flex;align-items:center;gap:8px;padding:5px 18px 11px;flex-wrap:wrap}
.cb{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--gold2);background:rgba(201,168,76,.1);border:1.5px solid rgba(201,168,76,.35);border-radius:99px;padding:5.5px 14px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:5px}
.cb:hover{border-color:var(--gold);background:rgba(201,168,76,.22);box-shadow:0 0 12px rgba(201,168,76,.2)}
.cb.active{background:var(--gold);border-color:var(--gold2);color:var(--dark);font-weight:700}
.cb .ic{font-size:14px;line-height:1}
#btn-female.active{background:rgba(220,100,140,.28);border-color:rgba(232,169,196,.7);color:#f4b8d2}
#member-counter{display:flex;align-items:center;gap:10px;margin-inline-start:auto;background:rgba(0,0,0,.32);border:1.5px solid rgba(201,168,76,.3);border-radius:14px;padding:4px 14px}
.stat-item{display:flex;flex-direction:column;align-items:center;min-width:44px}
.stat-num{font-size:14.5px;font-weight:800;color:var(--gold2);line-height:1.2}
.stat-lbl{font-size:9.5px;color:rgba(201,168,76,.65);display:flex;align-items:center;gap:3px}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.stat-sep{width:1px;height:24px;background:rgba(201,168,76,.25)}

/* ═══ زر أضف شجرة عائلتك (عائم) + نافذته ═══ */
#add-family-fab{position:fixed;bottom:16px;right:16px;z-index:45;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#c9a84c,#a5842f);color:#241505;border:none;border-radius:99px;
  padding:12px 20px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 20px rgba(201,168,76,.45),0 2px 6px rgba(0,0,0,.3);transition:transform .18s,box-shadow .18s}
#add-family-fab:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(201,168,76,.6)}
#add-family-fab .afb-plus{font-size:20px;line-height:1;font-weight:400}
#sug-overlay{display:none;position:fixed;inset:0;z-index:120;background:rgba(20,12,4,.72);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:16px}
#sug-overlay.open{display:flex}
#sug-card{background:linear-gradient(180deg,#fffdf6,#f6efdd);border:1.5px solid var(--gold);border-radius:18px;
  width:100%;max-width:520px;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.5)}
#sug-top{background:linear-gradient(135deg,#3a2913,#241708);color:var(--gold2);padding:15px 20px;display:flex;align-items:center;justify-content:space-between}
#sug-top h2{font-family:'Amiri',serif;font-size:20px}
#sug-close{background:none;border:none;color:var(--gold2);font-size:20px;cursor:pointer;line-height:1}
#sug-body{padding:18px 20px;overflow-y:auto}
#sug-intro{font-size:13px;color:#6a5124;line-height:1.7;margin-bottom:16px;background:#fdf6e3;border-right:3px solid var(--gold);border-radius:8px;padding:10px 12px}
.sug-lbl{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:10px 2px 5px}
.sug-lbl .req{color:#c0392b}
.sug-lbl .opt{color:#999;font-weight:400;font-size:11.5px}
.sug-in{width:100%;padding:10px 13px;border:1.5px solid #ddd;border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;color:var(--ink);box-sizing:border-box;background:#fff;transition:border-color .2s,box-shadow .2s}
.sug-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.2)}
textarea.sug-in{resize:vertical;line-height:1.7;min-height:90px}
.sug-row{display:flex;gap:12px;flex-wrap:wrap}
#sug-msg{font-size:13px;margin:12px 0 0;padding:0;line-height:1.6}
#sug-msg.err{color:#a33}
#sug-msg.ok{color:#2d6a2d}
#sug-submit{width:100%;margin-top:16px;background:linear-gradient(135deg,#2d6a2d,#255725);color:#fff;border:none;
  border-radius:10px;padding:13px;font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:filter .18s}
#sug-submit:hover{filter:brightness(1.08)}
#sug-submit:disabled{opacity:.6;cursor:default}
/* اختيار الجد */
#sug-anc-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#sug-anc-btn{background:#fdf6e3;border:1.5px solid var(--gold);color:#8a6d1a;border-radius:10px;padding:10px 16px;font-family:'Cairo',sans-serif;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .18s}
#sug-anc-btn:hover{background:var(--gold);color:#fff}
#sug-anc-chosen{font-size:13px;color:#888}
#sug-anc-chosen.set{color:#2d6a2d;font-weight:700}
/* صفوف الأفراد */
#sug-people{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.sug-prow{display:flex;gap:8px;align-items:center}
.sug-prow input{flex:1;min-width:0;padding:9px 12px;border:1.5px solid #ddd;border-radius:9px;font-family:'Cairo',sans-serif;font-size:13.5px;background:#fff}
.sug-prow input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.18)}
.sug-prow select{padding:9px 8px;border:1.5px solid #ddd;border-radius:9px;font-family:'Cairo',sans-serif;font-size:13px;background:#fff}
.sug-prow .sp-rm{width:34px;height:34px;flex:none;border:none;background:#fdecee;color:#c0392b;border-radius:8px;cursor:pointer;font-size:16px}
#sug-add-row{background:#eef4ff;border:1.5px dashed #4a6fa5;color:#2c4a7a;border-radius:9px;padding:8px 16px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:4px}
/* كتلة الأخ/الفرد مع أبنائه */
.sug-sib{border:1.5px solid #e6d9b8;border-radius:11px;padding:9px;background:#fffdf6}
.sug-kids{margin-inline-start:14px;border-inline-start:2px solid #e6d9b8;padding-inline-start:9px;margin-top:7px;display:flex;flex-direction:column;gap:7px}
.sug-kids:empty{display:none}
.sug-addkid{background:none;border:1px dashed #c9a84c;color:#7a5c1e;border-radius:8px;padding:5px 11px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;margin-top:7px}
.sug-addkid:hover{background:#f7efd9}
.sug-krow input{font-size:13px}
/* نافذة اختيار الجد */
#sugpick-overlay{display:none;position:fixed;inset:0;z-index:130;background:rgba(20,12,4,.7);align-items:center;justify-content:center;padding:14px}
#sugpick-overlay.open{display:flex}
#sugpick-card{background:#fffdf6;border:1.5px solid var(--gold);border-radius:16px;width:100%;max-width:460px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5)}
#sugpick-top{background:linear-gradient(135deg,#3a2913,#241708);color:var(--gold2);padding:13px 18px;display:flex;align-items:center;justify-content:space-between}
#sugpick-top h3{font-family:'Amiri',serif;font-size:17px}
#sugpick-top button{background:none;border:none;color:var(--gold2);font-size:18px;cursor:pointer}
#sugpick-search{padding:10px 14px;border-bottom:1px solid #eee}
#sugpick-search input{width:100%;padding:9px 13px;border:1.5px solid #ddd;border-radius:9px;font-family:'Cairo',sans-serif;font-size:14px}
#sugpick-body{flex:1;overflow-y:auto;padding:8px 10px}
.sp-hint{color:#999;text-align:center;padding:20px;font-size:13px}
.sp-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;cursor:pointer;transition:background .12s}
.sp-item:hover{background:#f3ecd8}
.sp-item .sp-num{font-size:11px;color:#b09a67;direction:ltr;font-family:Tahoma,sans-serif}
.sp-item .sp-nm{font-size:14.5px;font-weight:700;color:#3a2508}
.sp-item .sp-lin{font-size:11px;color:#9a8a63;margin-inline-start:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
/* شجرة الاختيار القابلة للطي */
.sp-node{}
.sp-kids{display:none}
.sp-kids.open{display:block}
.sp-row{display:flex;align-items:center;gap:8px;padding:8px 8px;border-radius:9px;cursor:pointer;transition:background .12s;border:1px solid transparent}
.sp-row:hover{background:#f5efdd}
.sp-row.exp{background:#f7f1e0}
.sp-tog{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#8a6d2f;background:#efe6ce;border-radius:6px;transition:transform .12s}
.sp-tog.leaf{background:none;color:#c9b98e;font-size:9px}
.sp-row .sp-nm{font-size:14.5px;font-weight:700;color:#3a2508;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row .sp-num{font-size:11px;color:#b09a67;direction:ltr;font-family:Tahoma,sans-serif;flex:none}
.sp-pick{flex:none;background:#3f6b3a;color:#fff;border:none;border-radius:8px;padding:5px 10px;font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .12s}
.sp-pick:hover{background:#2f5a2c}
@media(max-width:600px){
  /* في الجوال: يرتفع الزر فوق شريط الكريدت حتى لا يغطّيه */
  #add-family-fab{bottom:86px;right:12px;padding:11px 16px;font-size:13px}
  #add-family-fab .afb-txt{font-size:13px}
}

/* ═══ Search nav ═══ */
#snav{display:none;position:fixed;top:50%;left:14px;transform:translate(0,-50%);z-index:60;background:rgba(26,18,8,.96);border:1.5px solid var(--gold);border-radius:14px;box-shadow:var(--shadow-md);padding:8px 6px;flex-direction:column;align-items:center;gap:5px;cursor:grab}
.snb{width:30px;height:30px;border:1px solid rgba(201,168,76,.4);background:rgba(201,168,76,.12);border-radius:9px;color:var(--gold2);font-size:12px;cursor:pointer;transition:all .15s}
.snb:hover{background:rgba(201,168,76,.35)}
#srch-count{font-size:11px;font-weight:700;color:var(--gold2);padding:2px 0;white-space:nowrap}

/* ═══ Canvas ═══ */
#vp{position:fixed;inset:0;overflow:hidden;cursor:grab;
  background:radial-gradient(ellipse at 50% 25%,rgba(201,168,76,.09),transparent 65%),var(--bg)}
#vp::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(154,114,40,.13) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
/* زخرفة أغصان شجرة باهتة أسفل الخلفية (خلف الشجرة، لا تعيق التفاعل) */
#vp::after{content:'';position:absolute;left:0;right:0;bottom:0;height:min(46vh,420px);
  background:url(branches.svg) bottom center / min(1600px,150%) auto no-repeat;
  opacity:.16;pointer-events:none;z-index:0}
#world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;z-index:1}
#svgl{position:absolute;top:0;left:0;width:30000px;height:30000px;pointer-events:none;overflow:visible}

/* ═══ Nodes ═══ */
.nd{position:absolute;border-radius:11px;display:flex;align-items:center;justify-content:center;text-align:center;padding:6px 8px;font-weight:600;transition:box-shadow .18s,filter .18s;overflow:visible;line-height:1.3;border:1.5px solid transparent}
.nd.d0{font-family:'Amiri',serif;font-size:17px;background:radial-gradient(circle at 50% 20%,#4d3519,#2e2010);color:var(--gold3);border:2px solid var(--gold);box-shadow:0 6px 26px rgba(0,0,0,.4),0 0 0 4px rgba(201,168,76,.12)}
.nd.d1{font-size:19px;font-weight:800;font-family:'Amiri',serif;background:linear-gradient(180deg,#6e4a26,#4d3216);color:#fdf3d8;border-color:var(--gold);box-shadow:0 4px 16px rgba(0,0,0,.28);border-radius:14px}
.nd.d2{font-size:12.5px;font-weight:700;background:linear-gradient(180deg,#875a20,#754a15);color:#fff;border-color:rgba(201,168,76,.6);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.nd.d3{font-size:11.5px;background:#f0e6c8;color:var(--ink);border-color:rgba(139,105,20,.45);box-shadow:var(--shadow-sm)}
.nd.d4,.nd.d5,.nd.d6{font-size:11px;background:var(--parch);color:var(--ink2);border-color:rgba(139,105,20,.28);box-shadow:0 1px 5px rgba(61,36,6,.1)}
.nd.hc{cursor:pointer}
.nd.hc:hover{filter:brightness(1.06);box-shadow:var(--shadow-md)}
.nd.hc:not(.clp)::before{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--gold);border:1.5px solid #fffdf6;border-radius:2px;z-index:5;pointer-events:none}
.nd.female{background:var(--rose-bg)!important;color:var(--rose)!important;border-color:var(--rose-bdr)!important}
.nd.clp::after{content:attr(data-ct);position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#d8b45e,#b8923a);color:#fff;font-size:9.5px;font-weight:700;padding:1.5px 10px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 6px rgba(61,36,6,.3);z-index:6}
.num-badge{position:absolute;top:-9px;left:-6px;background:var(--parch);border:1px solid rgba(139,105,20,.4);color:var(--ink2);font-size:9px;font-weight:700;padding:1px 7px;border-radius:99px;cursor:copy;transition:all .15s;direction:ltr;font-family:monospace}
.num-badge:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.nd.d0 .num-badge{display:none}
.nd.hl{background:#e8a020!important;color:#fff!important;border-color:#fff!important;box-shadow:0 0 0 3px rgba(232,160,32,.65)!important;z-index:10}
.nd.hl-cur{background:#c0392b!important;color:#fff!important;border-color:#fff!important;box-shadow:0 0 0 4px rgba(192,57,43,.75),var(--shadow-md)!important;z-index:11}

/* ═══ Zoom / tip / toast ═══ */
#zc{position:fixed;bottom:64px;left:16px;z-index:40;display:flex;flex-direction:column;background:var(--dark);border:1.5px solid var(--gold);border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden}
.zb{width:40px;height:40px;border:none;background:transparent;font-size:20px;color:var(--gold2);cursor:pointer;transition:background .15s}
.zb:hover{background:rgba(201,168,76,.2)}
.zb:first-child{border-bottom:1px solid rgba(201,168,76,.3)}
#tip{display:none;position:fixed;z-index:70;background:var(--dark);color:var(--gold2);border:1px solid var(--gold);font-size:12px;padding:6px 12px;border-radius:8px;max-width:200px;pointer-events:none;box-shadow:var(--shadow-md)}
#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,70px);z-index:80;background:var(--dark);color:var(--gold2);border:1px solid var(--gold);font-size:13px;font-weight:600;padding:9px 22px;border-radius:99px;transition:transform .3s ease;box-shadow:var(--shadow-md)}
#toast.show{transform:translate(-50%,0)}

/* ═══ Loader ═══ */
#loader{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .4s}
#loader .spin{width:38px;height:38px;border:3.5px solid rgba(201,168,76,.25);border-top-color:var(--gold);border-radius:50%;animation:sp 0.8s linear infinite}
#loader span{font-size:13px;color:var(--muted);font-weight:600}
@keyframes sp{to{transform:rotate(360deg)}}

/* ═══ List view ═══ */
#list-view{display:none;position:fixed;top:96px;bottom:0;right:0;left:0;overflow-y:auto;padding:12px 14px 90px;z-index:10}
#lv-toolbar{max-width:760px;margin:0 auto 10px;display:flex;gap:8px}
.lvb{font-family:inherit;font-size:12px;font-weight:700;color:var(--ink2);background:var(--parch);border:1.5px solid rgba(201,168,76,.5);border-radius:99px;padding:6px 16px;cursor:pointer;transition:all .18s;box-shadow:var(--shadow-sm)}
.lvb:hover{background:rgba(201,168,76,.15);border-color:var(--gold)}
#lv-inner{max-width:760px;margin:0 auto;background:var(--parch);border:1.5px solid rgba(201,168,76,.5);border-radius:16px;box-shadow:var(--shadow-sm);padding:14px 16px}
#lv-bottom{max-width:760px;margin:12px auto 0;display:flex;justify-content:center}
#list-view.hide-fem .lt-fem-row{display:none}
.lt-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;cursor:pointer;transition:background .12s}
.lt-item:hover{background:rgba(201,168,76,.12)}
.lt-toggle{width:18px;font-size:9px;color:var(--muted);flex-shrink:0;text-align:center}
.lt-toggle.leaf{opacity:0}
.lt-num{font-size:10px;font-weight:700;color:var(--ink2);background:rgba(201,168,76,.18);border-radius:99px;padding:1px 8px;direction:ltr;flex-shrink:0;font-family:monospace;margin-inline-start:auto}
.lt-name{font-size:13.5px;font-weight:600;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-fem{color:var(--rose);font-size:12px}
.lt-children-wrap{display:none;margin-right:17px;border-right:1.5px solid rgba(201,168,76,.35);padding-right:6px}
.lt-children-wrap.open{display:block}
.lt-item.lt-hl{background:#f6e3b3}
.lt-item.lt-hl-cur{background:#eecd7d}
[class^="lt-d"]{margin:1px 0}

/* ═══ Credits ═══ */
#credits-bar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;
  background:linear-gradient(180deg,rgba(40,26,9,.9),rgba(24,16,7,.94));backdrop-filter:blur(10px);
  border:1px solid rgba(201,168,76,.25);border-radius:14px;padding:8px 22px;
  font-family:'Amiri',serif;font-size:14px;color:rgba(230,205,140,.82);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:0 8px 26px rgba(0,0,0,.4);white-space:nowrap}
.cr-line{display:flex;gap:7px;align-items:center;letter-spacing:.2px}
.cr-line .cr-txt{color:rgba(201,168,76,.62);font-size:13px}
.cr-amp{color:rgba(201,168,76,.4);font-size:13px}
.cr-dev{display:flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(201,168,76,.5);
  font-family:'Amiri',serif;border-top:1px solid rgba(201,168,76,.14);padding-top:4px;margin-top:1px;width:100%;justify-content:center}
.cr-dev .cr-leaf{font-size:11px;opacity:.85}
.cr-dev a{font-size:11.5px;font-weight:600}
#credits-bar a{color:var(--gold2);font-weight:700;cursor:pointer;text-decoration:none;position:relative;transition:color .18s}
#credits-bar a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .2s}
#credits-bar a:hover{color:#ffd06e}
#credits-bar a:hover::after{transform:scaleX(1)}

/* ═══ Announcement ═══ */
#ann-overlay{position:fixed;inset:0;z-index:100;background:rgba(15,10,3,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px}
#ann-card{background:linear-gradient(165deg,#2a1c08,#1a1208);border:1.5px solid var(--gold);border-radius:20px;max-width:430px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;max-height:90vh;overflow-y:auto}
#ann-top{padding:20px 22px 12px;position:relative;border-bottom:1px solid rgba(201,168,76,.25)}
#ann-top h2{font-family:'Amiri',serif;font-size:20px;color:var(--gold2);display:flex;gap:8px;align-items:center}
#ann-close{position:absolute;top:16px;left:16px;width:28px;height:28px;border:1px solid rgba(201,168,76,.4);border-radius:50%;background:rgba(201,168,76,.12);color:var(--gold2);font-size:12px;cursor:pointer;transition:background .15s}
#ann-close:hover{background:rgba(201,168,76,.3)}
#ann-body{padding:18px 22px 22px}
#ann-text{font-size:13.5px;line-height:2;color:#e9dcbc;margin-bottom:16px}
#ann-wv-banner{display:none;background:rgba(200,120,0,.15);border:1.5px solid rgba(220,150,0,.4);border-radius:11px;padding:10px 13px;margin-bottom:13px;font-size:12px;color:#ffd88a;line-height:1.7}
#ann-wv-banner button{width:100%;margin-top:7px;padding:9px;background:linear-gradient(135deg,#7a4500,#a05800);border:1px solid rgba(220,150,0,.5);border-radius:8px;color:#ffd88a;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.ann-lbl{font-size:11.5px;color:rgba(201,168,76,.7);margin-bottom:7px}
#ann-email-chip{display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(201,168,76,.1);border:1.5px solid rgba(201,168,76,.45);border-radius:11px;padding:10px;cursor:pointer;transition:all .18s;direction:ltr;font-size:14px;font-weight:700;color:var(--gold2)}
#ann-email-chip:hover{border-color:var(--gold);background:rgba(201,168,76,.2)}
#ann-email-chip svg{width:14px;height:14px;stroke:var(--gold2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#ann-copied-msg{opacity:0;text-align:center;font-size:11.5px;color:#a9e07a;font-weight:700;margin-top:6px;transition:opacity .25s;height:16px}
#ann-howto{background:rgba(0,0,0,.25);border:1.5px solid rgba(201,168,76,.25);border-radius:11px;padding:11px 14px;font-size:12.5px;color:#e9dcbc;line-height:1.8;margin:14px 0}
#ann-howto strong{color:var(--gold2)}
#ann-bottom{display:flex;gap:10px;align-items:stretch}
#ann-example{flex:1;background:rgba(0,0,0,.2);border:1.5px dashed rgba(201,168,76,.4);border-radius:11px;padding:9px 13px;font-size:12px;color:#d9c89c;line-height:1.7}
#ann-example span{display:block;font-size:10px;font-weight:800;color:var(--gold2);margin-bottom:2px}
#ann-send-btn{background:linear-gradient(135deg,#d8b45e,#b8923a);border:none;border-radius:11px;color:var(--dark);font-family:inherit;font-size:13.5px;font-weight:800;padding:0 22px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:filter .18s}
#ann-send-btn:hover{filter:brightness(1.1)}
#ann-send-btn svg{width:15px;height:15px;stroke:var(--dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:600px){
  #row1{padding:8px 12px 4px;gap:8px}
  #row1 h1{font-size:18px}
  /* ══ الجوال: شريط أدوات أيقونات مدمج وأنيق ══ */
  #row2{padding:6px 12px 9px;gap:7px;flex-wrap:wrap;justify-content:flex-start}
  /* الأزرار تصبح أيقونات دائرية نظيفة بدون نصوص */
  .cb{padding:0;width:38px;height:38px;justify-content:center;border-radius:12px;font-size:16px;background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.28)}
  .cb .ic{font-size:17px}
  .cb .lbl{display:none}
  .cb.active{box-shadow:0 2px 10px rgba(201,168,76,.35)}
  /* عدّاد إحصائيات عصري مدمج */
  #member-counter{margin-inline-start:auto;gap:0;padding:4px 4px;border-radius:12px;background:rgba(0,0,0,.34);border-color:rgba(201,168,76,.28)}
  .stat-item{min-width:0;padding:0 9px}
  .stat-num{font-size:14px}
  .stat-lbl{font-size:9px}
  .stat-sep{height:20px}
  /* زر الدخول أيقونة متناسقة مع البقية */
  #adm{font-size:0;width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border-color:rgba(201,168,76,.28)}
  #adm::before{content:'🔑';font-size:16px}
  #list-view{top:110px;padding:10px 8px 90px}
  #lv-inner{padding:10px 8px;border-radius:12px}
  .lt-children-wrap{margin-right:8px;padding-right:3px}
  .lt-item{padding:5px 4px;gap:5px}
  .lt-num{font-size:9px;padding:1px 5px}
  .lt-name{font-size:12.5px}
  .lt-toggle{width:14px}
  #credits-bar{font-size:12px;padding:5px 16px;bottom:10px}
}