@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--bg4:#2d333b;
  --b:#30363d;--b2:#444c56;
  --t:#e6edf3;--t2:#8b949e;--t3:#6e7681;
  --blue:#378ADD;--blue2:#185FA5;
  --green:#1D9E75;--green2:#0F6E56;
  --pink:#D4537E;--purple:#7F77DD;--amber:#BA7517;
  --r:8px;--r2:12px;
  --topbar-h:50px;
  --nav-w:56px;
  --sidebar-w:280px;
  --right-w:240px;
}
html,body{height:100%;font-family:'Cairo',sans-serif;font-size:14px;background:var(--bg);color:var(--t);overflow:hidden;direction:rtl}

/* ══════════════════════════════════════
   TOPBAR
══════════════════════════════════════ */
.topbar{
  height:var(--topbar-h);background:var(--bg2);border-bottom:1px solid var(--b);
  display:flex;align-items:center;padding:0 10px;gap:8px;flex-shrink:0;z-index:200;
}
.brand{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t);white-space:nowrap}
.brand b{color:var(--blue)}
.brand-dot{width:7px;height:7px;background:var(--blue);border-radius:50%;flex-shrink:0}
.brand-by{font-size:10px;color:var(--blue);opacity:.7;margin-right:2px}

.topbar-mid{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;flex-wrap:nowrap}
.device-group{display:flex;gap:2px;background:var(--bg3);padding:3px;border-radius:var(--r)}
.dev-btn{width:28px;height:24px;border:none;border-radius:5px;background:transparent;color:var(--t2);cursor:pointer;font-size:12px;transition:all.15s}
.dev-btn.active{background:var(--blue);color:#fff}
.zoom-row{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t2)}
.icon-btn{width:22px;height:22px;border:1px solid var(--b);border-radius:4px;background:var(--bg3);color:var(--t2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.zoom-lbl{min-width:32px;text-align:center;font-family:monospace;font-size:11px}
.live-dot{font-size:10px;color:var(--green);white-space:nowrap}

.topbar-right{display:flex;gap:6px;flex-shrink:0}
.btn-ghost{padding:5px 10px;border:1px solid var(--b);border-radius:var(--r);background:transparent;color:var(--t2);font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;transition:all.15s;white-space:nowrap}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-green{padding:5px 12px;border:none;border-radius:var(--r);background:var(--green);color:#fff;font-family:'Cairo',sans-serif;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn-green:hover{background:var(--green2)}

/* ══════════════════════════════════════
   WORKSPACE — Desktop 4 columns
══════════════════════════════════════ */
.workspace{
  display:grid;
  grid-template-columns:var(--nav-w) var(--sidebar-w) 1fr var(--right-w);
  grid-template-rows:1fr;
  height:calc(100vh - var(--topbar-h));
  overflow:hidden;
}

/* ══════════════════════════════════════
   LEFT NAV
══════════════════════════════════════ */
.leftnav{
  background:var(--bg2);border-left:1px solid var(--b);
  display:flex;flex-direction:column;padding:6px 0;overflow-y:auto;overflow-x:hidden;
  grid-column:1;grid-row:1;
}
.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 3px;border:none;background:transparent;color:var(--t3);
  cursor:pointer;transition:all.15s;border-right:2px solid transparent;
  font-family:'Cairo',sans-serif;width:100%;
}
.nav-item:hover{color:var(--t);background:var(--bg3)}
.nav-item.active{color:var(--blue);border-right-color:var(--blue);background:var(--bg3)}
.nav-icon{font-size:16px;line-height:1}
.nav-lbl{font-size:8px;font-weight:500;white-space:nowrap;line-height:1}
.nav-sep{height:1px;background:var(--b);margin:4px 6px;flex-shrink:0}
.nav-badge{display:block;font-size:7px;font-weight:700;padding:1px 3px;border-radius:3px;margin-top:1px}
.nav-badge.off{background:rgba(186,117,23,.2);color:#BA7517}
.nav-badge.on{background:rgba(29,158,117,.2);color:#1D9E75}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.sidebar{
  background:var(--bg2);border-left:1px solid var(--b);
  display:flex;flex-direction:column;overflow:hidden;
  grid-column:2;grid-row:1;
}
.panel{display:flex;flex-direction:column;height:100%;overflow:hidden}
.panel-head{
  padding:10px 12px;font-size:13px;font-weight:700;color:var(--t);
  border-bottom:1px solid var(--b);flex-shrink:0;display:flex;align-items:center;gap:8px;
}
.panel-body{flex:1;overflow-y:auto;padding:10px 12px;-webkit-overflow-scrolling:touch}
.panel-body::-webkit-scrollbar{width:3px}
.panel-body::-webkit-scrollbar-thumb{background:var(--b);border-radius:2px}

/* ══════════════════════════════════════
   FORM CONTROLS
══════════════════════════════════════ */
.sec-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:12px 0 6px;font-weight:700}
.fg{margin-bottom:8px}
.fg label{display:block;font-size:11px;color:var(--t2);margin-bottom:3px}
.fg input,.fg textarea,.fg select{
  width:100%;padding:7px 9px;border-radius:var(--r);border:1px solid var(--b);
  background:var(--bg3);color:var(--t);font-family:'Cairo',sans-serif;font-size:12px;
  transition:border.15s;-webkit-appearance:none;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{outline:none;border-color:var(--blue)}
.fg textarea{resize:vertical}

.cp-wrap{display:flex;gap:5px;align-items:center}
.cp-wrap input[type=color]{width:32px;height:28px;border-radius:5px;border:1px solid var(--b);background:none;cursor:pointer;padding:2px;flex-shrink:0}
.cp-wrap input[type=text]{flex:1;font-family:monospace;font-size:11px;padding:5px 7px}

.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.color-box label{font-size:10px;color:var(--t3);display:block;margin-bottom:3px}

input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--b);font-size:12px;color:var(--t2)}
.toggle-row.sm{padding:5px 0;font-size:11px}
.tog{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0}
.ts{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--b);border-radius:10px;cursor:pointer;transition:.2s}
.ts::before{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--t3);left:2px;top:2px;transition:.2s}
.tog input:checked+.ts{background:var(--blue);border-color:var(--blue)}
.tog input:checked+.ts::before{background:#fff;transform:translateX(16px)}

.btn-primary{padding:8px 14px;background:var(--blue);color:#fff;border:none;border-radius:var(--r);font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer}
.btn-primary:hover{background:var(--blue2)}
.full{width:100%;text-align:center}
.mt6{margin-top:6px}
.xs-btn{padding:3px 7px;font-size:10px;background:none;border:1px solid var(--b);border-radius:4px;color:var(--t2);cursor:pointer}
.xs-btn:hover{border-color:var(--blue);color:var(--blue)}
.upload-label{display:block;padding:7px 10px;border:1px dashed var(--b);border-radius:var(--r);text-align:center;font-size:11px;color:var(--t2);cursor:pointer;margin-top:4px}
.upload-label:hover{border-color:var(--blue);color:var(--blue)}

/* ── Packages / Plans ── */
.pkg-item,.plan-item{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r);padding:10px;margin-bottom:8px}
.pkg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.pkg-name{background:none;border:none;border-bottom:1px solid var(--b);color:var(--t);font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;width:140px;padding-bottom:2px}
.pkg-name:focus{outline:none;border-bottom-color:var(--blue)}
.pkg-del{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px}
.pkg-del:hover{color:#E24B4A}
.pkg-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pf label{font-size:10px;color:var(--t3);display:block;margin-bottom:2px}
.pf input,.pf select{width:100%;padding:5px 7px;border-radius:5px;border:1px solid var(--b);background:var(--bg);color:var(--t);font-family:'Cairo',sans-serif;font-size:11px}
.pf input:focus,.pf select:focus{outline:none;border-color:var(--blue)}
.feat-row{margin-top:6px;display:flex;align-items:center;gap:6px;font-size:10px;color:var(--t2)}

/* ── Templates ── */
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tpl-card{border:1.5px solid var(--b);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all.15s}
.tpl-card:hover,.tpl-card.active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(55,138,221,.2)}
.tpl-thumb{height:50px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}
.tpl-name{font-size:10px;color:var(--t2);text-align:center;padding:5px;background:var(--bg3)}

/* ══════════════════════════════════════
   CANVAS
══════════════════════════════════════ */
.canvas{display:flex;flex-direction:column;overflow:hidden;background:#111418;grid-column:3;grid-row:1}
.page-tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--b);padding:0 10px;flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.page-tabs::-webkit-scrollbar{height:2px}
.ptab{padding:9px 10px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--t2);font-family:'Cairo',sans-serif;font-size:11px;cursor:pointer;white-space:nowrap;transition:all.15s}
.ptab:hover{color:var(--t)}
.ptab.active{color:var(--blue);border-bottom-color:var(--blue)}
.ptab.dimmed{opacity:.4}
.tab-off{font-size:8px;opacity:.5}
.canvas-scroll{flex:1;overflow:auto;padding:16px;display:flex;justify-content:center;align-items:flex-start;-webkit-overflow-scrolling:touch}
.frame-wrap{display:flex;justify-content:center}
.preview-shell{background:#fff;border-radius:6px;box-shadow:0 6px 30px rgba(0,0,0,.6);overflow:hidden;transition:width.3s;transform-origin:top center}
.preview-shell.desktop{width:860px;min-height:520px}
.preview-shell.tablet{width:540px;min-height:520px}
.preview-shell.mobile{width:375px;min-height:620px}
.preview-shell iframe{width:100%;min-height:520px;border:none;display:block}
.preview-shell.mobile iframe{min-height:620px}

/* ══════════════════════════════════════
   RIGHT PANEL
══════════════════════════════════════ */
.rightpanel{background:var(--bg2);border-right:1px solid var(--b);overflow-y:auto;padding:10px;grid-column:4;grid-row:1;-webkit-overflow-scrolling:touch}
.rp-block{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--b)}
.rp-block:last-child{border-bottom:none}
.rp-title{font-size:11px;font-weight:700;color:var(--t);margin-bottom:8px}
.stats-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sc{background:var(--bg3);border-radius:var(--r);padding:8px;text-align:center}
.sv{font-size:17px;font-weight:700;color:var(--t)}
.sv.blue{color:var(--blue)}.sv.green{color:var(--green)}.sv.pink{color:var(--pink)}
.sl{font-size:9px;color:var(--t3);margin-top:1px}

/* ══════════════════════════════════════
   MISC
══════════════════════════════════════ */
.cards-table{width:100%;border-collapse:collapse;font-size:10px;margin-top:6px}
.cards-table th{background:var(--bg4);padding:5px 7px;color:var(--t2);border:1px solid var(--b);text-align:right}
.cards-table td{padding:4px 7px;border:1px solid var(--b);font-family:monospace;color:var(--t);font-size:10px}
.cards-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}

.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;padding:9px 20px;border-radius:var(--r2);font-size:13px;font-weight:600;z-index:9999;display:none;box-shadow:0 4px 20px rgba(0,0,0,.4);white-space:nowrap}
.toast.show{display:block;animation:fadeIO 2.8s ease forwards}
@keyframes fadeIO{0%{opacity:0;transform:translateX(-50%) translateY(8px)}12%{opacity:1;transform:translateX(-50%)}85%{opacity:1}100%{opacity:0}}

.notice-box{padding:10px 12px;border-radius:var(--r);font-size:12px;line-height:1.6;margin-bottom:10px}
.warn-box{background:rgba(186,117,23,.12);border:1px solid rgba(186,117,23,.3);color:#EFC97A}
.info-box{background:rgba(55,138,221,.1);border:1px solid rgba(55,138,221,.25);color:#8BBDE8}

::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}

/* ══════════════════════════════════════
   MOBILE BOTTOM NAV OVERLAY
   (مخفي على الديسكتوب)
══════════════════════════════════════ */
.mobile-nav{display:none}
.mobile-overlay{display:none}
.sidebar-close-btn{display:none}

/* ══════════════════════════════════════
   RESPONSIVE — Tablet 768px
══════════════════════════════════════ */
@media (max-width:900px){
  :root{--right-w:0px;--sidebar-w:260px}
  .workspace{grid-template-columns:var(--nav-w) var(--sidebar-w) 1fr}
  .rightpanel{display:none}
}

/* ══════════════════════════════════════
   RESPONSIVE — Mobile 640px
   تبويب سفلي + sidebar كـ drawer
══════════════════════════════════════ */
@media (max-width:640px){
  :root{--topbar-h:46px;--nav-w:0px;--sidebar-w:100%}

  html,body{overflow:hidden}

  /* Topbar مبسّط */
  .topbar{padding:0 8px;gap:6px;height:var(--topbar-h)}
  .topbar-mid{gap:6px}
  .zoom-row{display:none}
  .live-dot{display:none}
  .brand-by{display:none}
  /* أزرار الجهاز نخفيها ونبقي فقط التصدير */
  .btn-ghost:not(.export-always){display:none}
  .topbar-right .btn-ghost{display:none}
  /* نُظهر زر القائمة بدلاً من الـ nav */
  .menu-toggle{display:flex !important}

  /* workspace: عمود واحد فقط للـ canvas + drawer للـ sidebar */
  .workspace{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    height:calc(100vh - var(--topbar-h) - 56px); /* 56px للـ bottom nav */
    position:relative;
  }

  /* leftnav مخفي — يُستبدل بـ bottom nav */
  .leftnav{display:none}

  /* sidebar كـ drawer يظهر من اليمين */
  .sidebar{
    position:fixed;
    top:var(--topbar-h);
    right:0;
    width:min(85vw, 300px);
    height:calc(100vh - var(--topbar-h));
    z-index:300;
    transform:translateX(100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:-4px 0 20px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0)}

  /* overlay خلف الـ drawer */
  .mobile-overlay{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);
    z-index:299;opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .mobile-overlay.show{opacity:1;pointer-events:auto}

  /* زر إغلاق الـ drawer */
  .sidebar-close-btn{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:10px;left:10px;
    width:28px;height:28px;border-radius:50%;
    background:var(--bg4);border:1px solid var(--b);
    color:var(--t2);cursor:pointer;font-size:16px;z-index:301;
  }

  /* canvas يأخذ كل المساحة */
  .canvas{grid-column:1;grid-row:1}
  .rightpanel{display:none}

  /* تصغير page-tabs */
  .ptab{padding:8px 8px;font-size:10px}

  /* canvas-scroll بدون padding كبير */
  .canvas-scroll{padding:8px}

  /* ── BOTTOM NAV ── */
  .mobile-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;height:56px;
    background:var(--bg2);border-top:1px solid var(--b);
    z-index:200;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mobile-nav::-webkit-scrollbar{display:none}
  .mobile-nav-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-width:52px;flex:1;
    padding:6px 4px;border:none;background:transparent;
    color:var(--t3);cursor:pointer;font-family:'Cairo',sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-nav-item.active{color:var(--blue)}
  .mobile-nav-item .nav-icon{font-size:18px;line-height:1}
  .mobile-nav-item .nav-lbl{font-size:8px;white-space:nowrap}

  /* زر تصدير ZIP في الـ topbar على الموبايل */
  .btn-green{font-size:11px;padding:5px 10px}

  /* panel-body تمرير سلس */
  .panel-body{-webkit-overflow-scrolling:touch;padding:10px}

  /* color-row عمودين بدل ثلاثة */
  .color-row{grid-template-columns:1fr 1fr}

  /* pkg-fields عمود واحد */
  .pkg-fields{grid-template-columns:1fr}
}

/* ══════════════════════════════════════
   RESPONSIVE — Small Mobile 380px
══════════════════════════════════════ */
@media (max-width:380px){
  .ptab{padding:7px 6px;font-size:9px}
  .mobile-nav-item{min-width:46px}
  .mobile-nav-item .nav-icon{font-size:16px}
}