:root{
  --bg:#0b0b0b;
  --panel:#0f0f0f;
  --panel2:#141414;
  --border:rgba(255,255,255,.10);
  --text:#f2f2f2;
  --muted:rgba(255,255,255,.65);
  --accent:#e4ff00;
  --danger:#ff5a5a;
}
.tobe-ui{direction:rtl; color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
.tobe-box{background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:18px; padding:16px; backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0,0,0,.35);}
.tobe-header{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px}
.tobe-title{font-weight:900; font-size:18px}
.tobe-sub{font-size:12px; color:var(--muted)}
.tobe-empty{padding:16px; border:1px dashed var(--border); border-radius:14px; color:var(--muted); text-align:center;}
.tobe-muted{color:var(--muted); font-size:12px}
.tobe-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
.tobe-btn{border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); padding:10px 12px; border-radius:14px; cursor:pointer; font-weight:800; transition:.15s transform,.15s background,.15s border-color}
.tobe-btn:hover{transform:translateY(-1px); border-color:rgba(228,255,0,.25)}
.tobe-btn.primary{background:rgba(228,255,0,.12); border-color:rgba(228,255,0,.35); color:var(--accent)}
.tobe-btn.danger{background:rgba(255,90,90,.10); border-color:rgba(255,90,90,.35); color:var(--danger)}
.tobe-btn.ghost{background:transparent}
.tobe-btn.icon{width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center}
.tobe-card{border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:16px; padding:14px}
.tobe-card-title{font-weight:900; margin-bottom:4px}
.tobe-card-sub{font-size:12px; color:var(--muted); margin-bottom:8px}
.tobe-pill{display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid rgba(228,255,0,.25); color:var(--accent); background:rgba(228,255,0,.05); font-size:12px; font-weight:900}
.tobe-grid{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:820px){.tobe-grid{grid-template-columns:1fr 1fr}}
.tobe-mini-grid{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:900px){.tobe-mini-grid{grid-template-columns:1fr 1fr}}
.tobe-mini-card{border:1px solid var(--border); background:rgba(255,255,255,.02); border-radius:16px; padding:12px}
.tobe-mini-title{font-weight:900; margin-bottom:10px}
.tobe-mini-body{display:flex; flex-direction:column; gap:6px}
.tobe-kv{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted)}
.tobe-kv b{color:var(--text)}
.tobe-table-wrap{overflow:auto; border-radius:16px; border:1px solid var(--border)}
.tobe-table{width:100%; border-collapse:collapse; min-width:760px; background:rgba(0,0,0,.2)}
.tobe-table th,.tobe-table td{padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.06); text-align:right; font-size:13px}
.tobe-table th{color:var(--muted); font-weight:900; background:rgba(255,255,255,.02)}
.tobe-filters{margin:10px 0 18px; padding:14px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02);}
.tobe-field label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:900}
.tobe-field input,.tobe-field select,.tobe-input{width:100%; padding:12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text); outline:none}
.tobe-field input:focus,.tobe-field select:focus,.tobe-input:focus{border-color:rgba(228,255,0,.35)}
.tobe-badges{display:flex; flex-wrap:wrap; gap:8px}
.tobe-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.25); cursor:pointer}
.tobe-chip input{accent-color: var(--accent);}
.tobe-modal{position:fixed; inset:0; z-index:99999}
.tobe-modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.65)}
.tobe-modal-panel{position:relative; margin:6vh auto; width:min(920px,92vw); background:rgba(10,10,10,.95); border:1px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:0 20px 80px rgba(0,0,0,.6)}
.tobe-modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06)}
.tobe-modal-title{font-weight:900}
.tobe-modal-body{padding:14px 16px}
.tobe-modal-foot{display:flex; gap:10px; flex-wrap:wrap; padding:14px 16px; border-top:1px solid rgba(255,255,255,.06)}
.tobe-textarea{width:100%; min-height:110px; padding:12px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,.25); color:var(--text); outline:none}