:root {
  --sb:#0d4a56; --sb2:#07303a; --sbtext:#7dd3e0; --sbactive:#a8eef5;
  --primary:#1a8a9e; --pdark:#0f6b7d;
  --yes:#3db06a; --no:#c0392b; --maybe:#c49a72; --unknown:#94a3b8;
  --bg:#ffffff; --card:#fff; --text:#1e293b; --muted:#64748b;
  --border:#c8e9ef;
  --sh:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh2:0 4px 12px rgba(0,0,0,.08);
  --sh3:0 20px 40px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Heebo',sans-serif;background:var(--bg);color:var(--text);direction:rtl;min-height:100vh}

/* LAYOUT */
.layout{display:flex;min-height:100vh}

/* SIDEBAR */
.sb{width:240px;background:var(--sb);position:fixed;right:0;top:0;bottom:0;display:flex;flex-direction:column;z-index:100;border-left:1px solid rgba(255,255,255,.05)}
.sb-logo{padding:20px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-logo-main{font-size:20px;font-weight:900;color:#fff;letter-spacing:-.3px}
.sb-logo-sub{font-size:11px;color:var(--sbtext);margin-top:2px}
.sb-nav{flex:1;padding:12px 0}
.ni{display:flex;align-items:center;gap:10px;padding:11px 20px;cursor:pointer;color:var(--sbtext);font-size:14px;font-weight:500;transition:all .15s;user-select:none;border-right:3px solid transparent}
.ni:hover{background:rgba(255,255,255,.05);color:#fff}
.ni.active{background:rgba(224,231,255,.12);color:var(--sbactive);border-right-color:var(--sbactive)}
.ni-icon{width:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.7}
.ni:hover .ni-icon,.ni.active .ni-icon{opacity:1}
.sb-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px}
.av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a8a9e,#0d4a56);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0}

/* SIDEBAR TREE */
.st-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;color:var(--sbtext);font-size:13px;font-weight:500;transition:all .12s;user-select:none;border-right:2px solid transparent}
.st-item:hover{background:rgba(255,255,255,.05);color:#fff}
.st-item.st-active{background:rgba(224,231,255,.1);color:var(--sbactive);border-right-color:var(--sbactive)}
.st-city{padding-right:18px}
.st-hood{padding-right:30px;font-size:12px}
.st-proj{padding-right:42px;font-size:12px;border-right:none}
.st-arr{font-size:9px;opacity:.6;flex-shrink:0}
.st-tab{padding-right:54px;font-size:11px;opacity:.8}

/* MAIN */
.main{margin-right:240px;flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 28px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.bc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.bc-a{color:var(--text);font-weight:600}
.bc-sep{opacity:.4}
.page{padding:28px;flex:1}
.page-title{font-size:22px;font-weight:800;color:var(--text);margin-bottom:4px}
.page-sub{font-size:13px;color:var(--muted);margin-bottom:24px}

/* OVERLAY */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:150;opacity:0;pointer-events:none;transition:opacity .3s}
.ov.on{opacity:1;pointer-events:all}

/* BACK BTN */
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--primary);cursor:pointer;margin-bottom:18px;padding:5px 10px;border-radius:7px;transition:background .12s;user-select:none;font-weight:600}
.back:hover{background:#e0f4f7}

/* EMPTY STATE */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .ei{font-size:44px;margin-bottom:14px}
.empty .et{font-size:15px;font-weight:600;margin-bottom:6px}

/* DEMO BANNER */
.demo-banner{background:linear-gradient(90deg,#0d4a56,#1a8a9e);color:#fff;text-align:center;padding:8px;font-size:13px;font-weight:600;letter-spacing:.3px}

/* TOAST */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1e293b;color:#fff;padding:10px 22px;border-radius:100px;font-size:13px;font-weight:600;z-index:999;transition:transform .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;pointer-events:none}

/* MOBILE */
.mob-bar{display:none}
.mob-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:290}
.mob-ov.on{display:block}

@media(max-width:768px){
  .sb{transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:300;box-shadow:var(--sh3)}
  .sb.mob-open{transform:translateX(0)}
  .main{margin-right:0}
  .mob-bar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:54px;background:var(--sb);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.07)}
  .mob-bar-logo{font-size:16px;font-weight:900;color:#fff;letter-spacing:-.3px}
  .mob-hamburger{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:rgba(255,255,255,.12);border-radius:8px;cursor:pointer;color:#fff;font-size:18px;line-height:1}
  .sp{width:100%;left:0}
  .page{padding:14px}
  .topbar{padding:0 14px}
  .back{margin-bottom:12px}
}