/* ═══════════════════════════════════════════════════════════════
   RESET & VARIABLES
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --p:#4F46E5; --ph:#4338CA; --pl:#EEF2FF; --ac:#7C3AED;
  --ok:#059669; --warn:#D97706; --err:#DC2626;
  --bg:#F8FAFC; --sur:#FFFFFF; --bdr:#E2E8F0;
  --t1:#0F172A; --t2:#475569; --t3:#94A3B8;
  --sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shm:0 4px 6px -1px rgba(0,0,0,.1);
  --shl:0 10px 15px -3px rgba(0,0,0,.1);
  --r:8px; --rl:12px; --rx:16px; --rf:9999px;
  --font:'Inter',-apple-system,sans-serif;
  --dur:150ms ease;
  --sw:260px; --hh:62px;
}
[data-theme=dark]{
  --bg:#0F172A;--sur:#1E293B;--bdr:#334155;
  --t1:#F1F5F9;--t2:#94A3B8;--t3:#64748B;--pl:#1E1B4B;
}
html,body{height:100%;}
body{font-family:var(--font);font-size:14px;color:var(--t1);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background var(--dur),color var(--dur);}
a{color:var(--p);text-decoration:none;}
button{cursor:pointer;font-family:var(--font);}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════ */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.body{display:flex;flex:1;overflow:hidden;position:relative;}

/* ── Header ── */
.hdr{height:var(--hh);background:var(--sur);border-bottom:1px solid var(--bdr);
  display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;
  z-index:100;box-shadow:var(--sh);}
.hdr__logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;
  color:var(--p);text-decoration:none;flex-shrink:0;}
.hdr__sp{flex:1;}
.hdr__act{display:flex;align-items:center;gap:6px;}
.hdr__user{display:none;} /* hidden on mobile, shown on larger screens */
.hdr__user-mobile{display:flex;align-items:center;gap:6px;}
.hdr__user-mobile .av{width:28px;height:28px;font-size:11px;}
.hdr__menu-btn{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
  padding:6px 8px;font-size:20px;line-height:1;cursor:pointer;margin-right:4px;}
.hdr__menu-btn:hover{background:var(--bg);}

/* ── Sidebar (mobile overlay) ── */
.sb{position:fixed;top:0;left:0;height:100%;width:var(--sw);background:var(--sur);
  z-index:200;transform:translateX(-100%);transition:transform var(--dur);
  box-shadow:var(--shl);display:flex;flex-direction:column;overflow-y:auto;}
.sb.open{transform:translateX(0);}
.sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;
  opacity:0;pointer-events:none;transition:opacity var(--dur);}
.sb-overlay.active{opacity:1;pointer-events:auto;}
.sb__close{position:absolute;top:12px;right:12px;background:var(--bg);border:none;
  border-radius:50%;width:32px;height:32px;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--t3);}
.sb__close:hover{background:var(--bdr);}
.sb__sec{padding:0 12px;margin-bottom:18px;margin-top:50px;}

/* desktop sidebar */
@media(min-width:901px){
  .hdr__menu-btn,.sb-overlay,.sb__close{display:none;}
  .sb{position:relative;transform:none;width:var(--sw);border-right:1px solid var(--bdr);
    background:var(--sur);box-shadow:none;z-index:auto;}
  .sb__sec{margin-top:12px;}
  .hdr__user{display:flex;}
  .hdr__user-mobile{display:none;}
}
/* ── Sidebar ── */
.sb{width:var(--sw);background:var(--sur);border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;padding:12px 0;}
.sb__sec{padding:0 12px;margin-bottom:18px;}
.sb__lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--t3);padding:0 8px;margin-bottom:4px;}
.ni{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;
  transition:all var(--dur);background:none;border:none;width:100%;text-align:left;}
.ni:hover{background:var(--bg);color:var(--t1);}
.ni.active{background:var(--pl);color:var(--p);font-weight:600;}
.ni__ico{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.ni__bdg{margin-left:auto;background:var(--bdr);color:var(--t3);
  padding:1px 6px;border-radius:var(--rf);font-size:10px;font-weight:700;}
.sb__div{height:1px;background:var(--bdr);margin:8px 12px;}
.sb__foot{padding:0 12px;margin-top:auto;}
.sb__ucard{display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:var(--r);background:var(--bg);}
.sb__un{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb__up{font-size:11px;color:var(--t3);}

/* ── Avatar ── */
.av{width:32px;height:32px;border-radius:50%;background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex-shrink:0;}
/* ── Main ── */
.main{flex:1;overflow-y:auto;padding:16px;min-width:0;}
@media(min-width:600px){.main{padding:24px;}}
@media(min-width:901px){.main{padding:28px;}}

/* ── Panels ── */
.panel{display:none;animation:fi .2s ease;}
.panel.active{display:block;}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}


/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════════════════════════════ */

/* Page header */
.ph{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:24px;gap:16px;flex-wrap:wrap;}
.ph h1{font-size:21px;font-weight:700;}
.ph__sub{font-size:13px;color:var(--t3);margin-top:2px;}
.ph__act{display:flex;gap:8px;flex-wrap:wrap;}

/* Card */
.card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);
  padding:20px;box-shadow:var(--sh);}
.card__hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card__ttl{font-size:15px;font-weight:600;}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;margin-bottom:24px;}
.stat{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);
  padding:18px;box-shadow:var(--sh);}
.stat__lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--t3);margin-bottom:8px;}
.stat__val{font-size:26px;font-weight:800;color:var(--t1);letter-spacing:-.02em;line-height:1;}
.stat__meta{font-size:11px;color:var(--t3);margin-top:4px;}
.stat__bar{height:3px;background:var(--bdr);border-radius:99px;margin-top:10px;overflow:hidden;}
.stat__fill{height:100%;background:var(--p);border-radius:99px;transition:width .5s ease;}
.stat__fill.warn{background:var(--warn);}
.stat__fill.danger{background:var(--err);}

/* Upgrade banner */
.ubn{background:linear-gradient(135deg,var(--p),var(--ac));border-radius:var(--rx);
  padding:20px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.ubn__ttl{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px;}
.ubn__sub{font-size:13px;color:rgba(255,255,255,.85);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
  border-radius:var(--r);font-size:13px;font-weight:600;border:1.5px solid transparent;
  cursor:pointer;transition:all var(--dur);text-decoration:none;
  white-space:nowrap;font-family:var(--font);line-height:1.4;}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none;}
.bp{background:var(--p);color:#fff;border-color:var(--p);}
.bp:hover{background:var(--ph);}
.bs{background:var(--sur);color:var(--t1);border-color:var(--bdr);}
.bs:hover{background:var(--bg);}
.bg{background:transparent;color:var(--t2);border-color:transparent;}
.bg:hover{background:var(--bg);color:var(--t1);}
.bd{background:var(--err);color:#fff;border-color:var(--err);}
.bw{background:#fff;color:var(--p);font-weight:700;}
.bw:hover{background:#F0F0FF;}
.bsm{padding:5px 10px;font-size:12px;}
.bfull{width:100%;justify-content:center;}
.bl{position:relative;color:transparent!important;pointer-events:none;}
.bl::after{content:'';position:absolute;width:14px;height:14px;
  border:2px solid var(--p);border-top-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Forms */
.fg{margin-bottom:14px;}
.fl{display:block;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:5px;}
.fl .req{color:var(--err);}
.fc{display:block;width:100%;padding:9px 12px;font-size:13px;font-family:var(--font);
  color:var(--t1);background:var(--sur);border:1.5px solid var(--bdr);
  border-radius:var(--r);transition:border-color var(--dur),box-shadow var(--dur);
  outline:none;-webkit-appearance:none;}
.fc::placeholder{color:var(--t3);}
.fc:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(79,70,229,.12);}
textarea.fc{resize:vertical;min-height:88px;}
select.fc{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position:right 10px center;background-repeat:no-repeat;
  background-size:16px;padding-right:36px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fgrid .full{grid-column:1/-1;}
.ferr{padding:10px 14px;background:#FFF1F2;border:1px solid #FECDD3;
  border-radius:var(--r);color:#991B1B;font-size:13px;margin-bottom:14px;}

/* Relations builder */
.rel-row{display:flex;gap:8px;align-items:center;background:var(--bg);
  padding:8px;border-radius:var(--r);border:1px solid var(--bdr);}
.rel-row select{font-size:13px;}

/* Member list */
.mlist{display:flex;flex-direction:column;gap:8px;}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);
  cursor:pointer;transition:all var(--dur);}
.mrow:hover{border-color:var(--p);box-shadow:0 0 0 3px rgba(79,70,229,.07);}
.mph{width:38px;height:38px;border-radius:50%;background:var(--pl);color:var(--p);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex-shrink:0;overflow:hidden;}
.mph img{width:100%;height:100%;object-fit:cover;}
.minf{flex:1;min-width:0;}
.mname{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mmeta{font-size:11px;color:var(--t3);margin-top:1px;}
.mact{display:flex;gap:4px;opacity:0;transition:opacity var(--dur);}
.mrow:hover .mact{opacity:1;}

/* Tree */
.tbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.twrap{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rx);
  overflow:hidden;position:relative;min-height:540px;}
.tctrl{position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;
  gap:6px;z-index:10;}
.tbtn{width:34px;height:34px;background:var(--sur);border:1px solid var(--bdr);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;transition:all var(--dur);box-shadow:var(--sh);}
.tbtn:hover{border-color:var(--p);color:var(--p);}
#tsvg{width:100%;min-height:540px;cursor:grab;display:block;}
#tsvg:active{cursor:grabbing;}
.tempty{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:32px;}
.tempty__ico{font-size:52px;opacity:.35;}
.tempty__ttl{font-size:17px;font-weight:600;color:var(--t2);}
.tempty__sub{font-size:13px;color:var(--t3);max-width:280px;}

/* Tree legend */
.tlegend{position:absolute;top:12px;left:12px;background:var(--sur);
  border:1px solid var(--bdr);border-radius:var(--r);padding:8px 12px;
  font-size:11px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh);}
.tlegend__item{display:flex;align-items:center;gap:8px;color:var(--t3);}
.tl-line{width:22px;height:2px;flex-shrink:0;}

/* Logs */
.litem{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--bdr);}
.litem:last-child{border-bottom:none;}
.ldot{width:8px;height:8px;border-radius:50%;background:var(--p);margin-top:5px;flex-shrink:0;}
.lact{font-size:13px;font-weight:500;}
.ltime{font-size:11px;color:var(--t3);margin-top:2px;}

/* Settings */
.ssec{font-size:14px;font-weight:700;margin:18px 0 10px;
  padding-bottom:10px;border-bottom:1px solid var(--bdr);}
.ssec.danger{color:var(--err);}
.srow{display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid var(--bdr);gap:14px;}
.srow:last-child{border-bottom:none;}
.srow__lbl{font-size:13px;font-weight:600;}
.srow__sub{font-size:12px;color:var(--t3);margin-top:2px;}

/* Modal */
.mov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity var(--dur);}
.mov.open{opacity:1;pointer-events:auto;}
.modal{background:var(--sur);border-radius:var(--rx);padding:26px;
  width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  transform:translateY(8px);transition:transform var(--dur);box-shadow:var(--shl);}
.mov.open .modal{transform:translateY(0);}
.mhdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.mttl{font-size:16px;font-weight:700;}
.mclose{background:none;border:none;font-size:20px;color:var(--t3);
  cursor:pointer;padding:4px;border-radius:var(--r);}
.mclose:hover{background:var(--bg);color:var(--t1);}

/* Toasts */
.toasts{position:fixed;bottom:20px;right:20px;z-index:300;
  display:flex;flex-direction:column;gap:8px;}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);
  box-shadow:var(--shl);font-size:13px;min-width:250px;max-width:380px;
  animation:si .25s ease;}
@keyframes si{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast.ok{border-left:4px solid var(--ok);}
.toast.err{border-left:4px solid var(--err);}
.toast.warn{border-left:4px solid var(--warn);}
.toast__x{margin-left:auto;background:none;border:none;color:var(--t3);
  cursor:pointer;font-size:16px;flex-shrink:0;}

/* Pro gate */
.progate{text-align:center;padding:40px 20px;}
.progate__ico{font-size:44px;margin-bottom:14px;}
.progate__ttl{font-size:17px;font-weight:700;margin-bottom:8px;}
.progate__sub{color:var(--t3);font-size:13px;margin-bottom:20px;
  max-width:300px;margin-inline:auto;}

/* Loading screen */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  gap:14px;z-index:500;transition:opacity .3s ease;}
#loading.gone{opacity:0;pointer-events:none;}
.spin{width:34px;height:34px;border:3px solid var(--bdr);
  border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite;}

/* ── Media Gallery ── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.media-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);
  overflow:hidden;cursor:pointer;transition:all var(--dur);position:relative;}
.media-card:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:var(--shm);}
.media-card__thumb{height:120px;background:var(--bg);display:flex;align-items:center;
  justify-content:center;font-size:36px;overflow:hidden;}
.media-card__thumb img{width:100%;height:100%;object-fit:cover;}
.media-card__info{padding:8px 10px;}
.media-card__name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.media-card__meta{font-size:11px;color:var(--t3);margin-top:2px;}
.media-card__del{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);
  color:#fff;border:none;border-radius:50%;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  opacity:0;transition:opacity var(--dur);cursor:pointer;}
.media-card:hover .media-card__del{opacity:1;}
.upload-zone{border:2px dashed var(--bdr);border-radius:var(--rl);padding:32px;
  text-align:center;cursor:pointer;transition:all var(--dur);}
.upload-zone:hover,.upload-zone.drag{border-color:var(--p);background:var(--pl);}
.upload-zone__ico{font-size:36px;margin-bottom:10px;}
.upload-zone__txt{font-size:14px;font-weight:600;color:var(--t2);}
.upload-zone__sub{font-size:12px;color:var(--t3);margin-top:4px;}

/* ── Sharing ── */
.share-tree-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);
  padding:20px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;}
.share-tree-card__name{font-weight:600;font-size:14px;}
.share-tree-card__meta{font-size:12px;color:var(--t3);margin-top:2px;}
.privacy-toggle{display:flex;gap:6px;}
.ptog{padding:5px 12px;border-radius:var(--rf);font-size:12px;font-weight:600;
  border:1.5px solid var(--bdr);background:var(--sur);color:var(--t2);cursor:pointer;
  transition:all var(--dur);}
.ptog.active{background:var(--p);color:#fff;border-color:var(--p);}
.share-link-box{display:flex;gap:8px;align-items:center;background:var(--bg);
  border:1px solid var(--bdr);border-radius:var(--r);padding:8px 12px;
  font-size:12px;font-family:monospace;color:var(--t2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.invite-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;}
.invite-form input{flex:1;min-width:200px;}

/* ── Analytics ── */
.ana-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px;}
.ana-stat{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:18px;text-align:center;}
.ana-stat__val{font-size:32px;font-weight:800;color:var(--p);line-height:1;}
.ana-stat__lbl{font-size:12px;color:var(--t3);margin-top:6px;}
.ana-stat__ico{font-size:24px;margin-bottom:8px;}
.timeline{display:flex;flex-direction:column;gap:0;}
.tl-item{display:flex;gap:16px;padding:10px 0;position:relative;}
.tl-item::before{content:'';position:absolute;left:19px;top:32px;
  width:2px;height:calc(100% - 10px);background:var(--bdr);}
.tl-item:last-child::before{display:none;}
.tl-dot{width:40px;height:40px;border-radius:50%;background:var(--pl);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  flex-shrink:0;z-index:1;border:2px solid var(--bdr);}
.tl-content{flex:1;padding-top:8px;}
.tl-year{font-size:11px;font-weight:700;color:var(--p);margin-bottom:2px;}
.tl-name{font-size:13px;font-weight:600;}
.tl-detail{font-size:12px;color:var(--t3);}
.chart-bar-wrap{display:flex;flex-direction:column;gap:8px;}
.chart-bar-row{display:flex;align-items:center;gap:10px;}
.chart-bar-lbl{font-size:12px;color:var(--t2);min-width:80px;flex-shrink:0;text-align:right;}
.chart-bar-track{flex:1;height:18px;background:var(--bg);border-radius:99px;overflow:hidden;}
.chart-bar-fill{height:100%;border-radius:99px;transition:width .6s ease;}
.chart-bar-val{font-size:11px;font-weight:700;min-width:24px;color:var(--t3);}


/* ── Responsive overrides (appended) ── */
@media(max-width:900px){
  .stats{grid-template-columns:1fr 1fr;}
  .fgrid{grid-template-columns:1fr;}
  .ph{flex-direction:column;align-items:stretch;}
  .ph__act{justify-content:flex-start;}
  .btn{white-space:normal;text-align:center;}
  .twrap{min-height:400px;}
  .tlegend{font-size:9px;padding:6px 8px;}
  .tlegend__item{gap:4px;}
  .tl-line{width:18px;}
  .tbtn{width:38px;height:38px;}
  .modal{max-width:calc(100% - 32px);padding:18px;}
  .share-tree-card{flex-direction:column;align-items:flex-start;}
  .invite-form{flex-direction:column;align-items:stretch;}
  .invite-form .fg{margin-bottom:12px;}
  .ana-grid{grid-template-columns:repeat(2,1fr);}
  .ana-stat{padding:12px;}
  .ana-stat__val{font-size:24px;}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  .rel-row{flex-wrap:wrap;}
  .rel-row select{width:100%;}
  .rel-row .btn{width:auto;margin-top:6px;}
  .hdr__act .btn.bp{display:none;} /* hide upgrade in mobile header, still in sidebar */
}

@media(max-width:480px){
  .stats{grid-template-columns:1fr;}
  .hdr{padding:0 12px;}
  .hdr__logo{font-size:15px;}
  .hdr__act .btn.bg{display:none;} /* hide dark mode button on very small screens */
  .main{padding:12px;}
  .card{padding:14px;}
  .stat{padding:12px;}
  .stat__val{font-size:22px;}
  .ubn{padding:16px;flex-direction:column;text-align:center;}
  .mlist .mrow{gap:8px;padding:10px;}
  .mph{width:32px;height:32px;font-size:11px;}
  .mname{font-size:12px;}
  .mmeta{font-size:10px;}
  .twrap{min-height:320px;}
  .tlegend{display:none;} /* hide legend on very small screens to save space */
  .tctrl{bottom:8px;right:8px;}
  .tbtn{width:34px;height:34px;}
  .ana-grid{grid-template-columns:1fr;}
  .chart-bar-lbl{min-width:60px;font-size:10px;}
}
.ged{
    display:grid;grid-template-columns:1fr 1fr; gap:40px
  }
@media (max-width: 768px) {
	
	[data-theme=dark] .hdr__menu-btn{
		color: #3706e9 !important;
    border: 1px solid #3706e9 !important;
	}
	.ged{
    display:grid;grid-template-columns:1fr;gap:40px
  }
  .photo-media-upload {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .relations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
}

.photo-media-upload {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.relations {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}