/* ═══════════════════════════════════════════════════════════════════
   FAWASL  –  style.css   (Reddit-like, desktop-first)
   ═══════════════════════════════════════════════════════════════════ */


/* ── Design tokens ───────────────────────────────────────────────── */
:root {
  --topbar-h:  48px;
  --menu-w:    180px;
  --panel-w:   264px;
  --tb-size:   52px;

  --transition: .15s ease;

  /* Colors */
  --bg:          #dae0e6;
  --surface:     #f5f5f5;
  --surface-bg:     #f7f7f7;
  --border:      #e8e8e8;
  --hover-bg:    #f6f7f8;

  --text-1:      #000000;
  --text-2:      #000000;
  --text-3:      #9ca3af;

  --accent:      #fdb913;
  --accent2:      #c8910a;
  --accent-bg:   #fff4d6;
  --accent-cut:  #e30613;
  --accent-fold: #009640;
  --accent-perf: #00bcff;

  --preview-bg:  #ffffff;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════════ */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-login,
.btn-signup {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  line-height: 1.6;
}
.btn-login:hover,
.btn-signup:hover { background: var(--hover-bg); border-color: #c0c4cc; }

/* ══════════════════════════════════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════════════════════════════════ */
#app-body {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0; bottom: 0;
  display: flex;
}

/* ══════════════════════════════════════════════════════════════════
   LEFT SIDEBAR  (two-column: menu-col + params-panel)
   ══════════════════════════════════════════════════════════════════ */
#left-sidebar {
  /* Collapsed: only menu column visible */
  width: var(--menu-w);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 500;
  transition: width 0.22s ease;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

/* Expanded: menu + params panel */
#left-sidebar.panel-open {
  width: calc(var(--menu-w) + var(--panel-w));
}

/* ── Menu column ─────────────────────────────────────────────────── */
#menu-col {
  width: var(--menu-w);
  min-width: var(--menu-w);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.menu-col-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.menu-col-scroll::-webkit-scrollbar { width: 4px; }
.menu-col-scroll::-webkit-scrollbar-track { background: transparent; }
.menu-col-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Parameters toggle button at bottom of menu column */
.params-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.params-toggle-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.params-toggle-btn:hover { background: var(--hover-bg); color: var(--text-1); }
.params-toggle-btn.active { background: var(--accent-bg); color: var(--accent); }

/* ── Params panel column ─────────────────────────────────────────── */
#params-panel {
  width: var(--panel-w);
  min-width: var(--panel-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.params-panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.params-panel-scroll::-webkit-scrollbar { width: 4px; }
.params-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.params-panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── Menu group ──────────────────────────────────────────────────── */
.menu-group { width: 100%; }

.menu-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-1);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-group-header:hover { background: var(--hover-bg); }

.chevron {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--transition);
}
.menu-group:not(.open) .chevron { transform: rotate(-90deg); }

.group-label { flex: 1; text-align: left; }

.group-sub {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
  flex-shrink: 0;
}

/* Collapse animation */
.menu-group-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.menu-group.open .menu-group-items { max-height: 700px; }

/* ── Menu item ───────────────────────────────────────────────────── */
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 30px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  color: var(--text-1);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.menu-item:hover {
  background: rgb(251, 251, 251);
  border-left-color: var(--border);
}
.menu-item.active {
  background: var(--accent-bg);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.menu-item img {
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  /* filter: brightness(0); */
  opacity: 1;
  transition: opacity var(--transition);
}
.menu-item:hover img { opacity: 1; }
.menu-item.active img {
  opacity: 1;
  /* Recolor active icon → deep muted Fawasl gold (#c9962e) while keeping the
     box line detail visible (no flat silhouette) */
  filter: brightness(1) saturate(100%) invert(60%) sepia(66%) saturate(520%) hue-rotate(3deg) brightness(92%) contrast(90%);
}

/* ── Sidebar divider ─────────────────────────────────────────────── */
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* ── Sidebar section ─────────────────────────────────────────────── */
.sidebar-section {
  padding: 0 14px 14px;
}

.sidebar-section-label {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0px;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 10px 0 8px;
}

/* ── Sidebar footer ──────────────────────────────────────────────── */
.sidebar-footer {
  padding: 8px 14px 18px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.btn-download {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition);
}
.btn-download svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-download:hover  { opacity: 0.88; }
.btn-download:active { opacity: 0.78; }

/* ══════════════════════════════════════════════════════════════════
   PREVIEW COLUMN  (canvas + footer)
   ══════════════════════════════════════════════════════════════════ */
#preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Canvas ──────────────────────────────────────────────────────── */
#preview-area {
  flex: 1;
  background: var(--preview-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  min-height: 0;
  padding: 20px;
}

#svgImagePrev {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#svgImagePrev.panning { cursor: grabbing; }

/* ── Zoom controls ───────────────────────────────────────────────── */
#zoom-controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
}

.zoom-btn {
  width: 48px; height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.zoom-btn svg { width: 25px; height: 25px; stroke: var(--text-2); }
.zoom-btn:hover { background: var(--hover-bg); }
.zoom-btn:active { background: var(--border); }

/* ── Preview footer ──────────────────────────────────────────────── */
#preview-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 48px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Left: cutter stats inline */
.footer-stats {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  white-space: nowrap;
}

.footer-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.footer-stat b { color: var(--text-1); font-weight: 600; }
.footer-stat .dot { width: 7px; height: 7px; }

.footer-stat-sep {
  color: var(--border);
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

/* Right: action buttons */
.footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Shared pill style for all footer + topbar action buttons ───── */
.btn-footer-details,
.btn-footer-refresh,
.btn-footer-download {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-footer-details svg,
.btn-footer-refresh svg,
.btn-footer-download svg { width: 14px; height: 14px; flex-shrink: 0; }

.btn-footer-details,
.btn-footer-refresh { color: var(--text-2); }
.btn-footer-details:hover,
.btn-footer-refresh:hover { background: var(--hover-bg); border-color: #c0c4cc; color: var(--text-1); }
.btn-footer-details:active,
.btn-footer-refresh:active { background: var(--border); }

.btn-footer-details.active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}

/* Refresh icon: black */
.btn-footer-refresh svg { stroke: var(--text-1); }

/* Download: filled accent */
.btn-footer-download {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 300;
}
.btn-footer-download svg { stroke: #fff; }
.btn-footer-download:hover { opacity: 0.88; background: var(--accent); border-color: var(--accent); }
.btn-footer-download:active { opacity: 0.78; }

/* Footer details section (Cut/Fold/Perf) — hidden by default */
.footer-details {
  display: none;
  align-items: center;
  gap: 16px;
}
.footer-details.visible { display: contents; }

/* ══════════════════════════════════════════════════════════════════
   NO-BOX MESSAGE
   ══════════════════════════════════════════════════════════════════ */
.no-box-msg {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
  padding: 2px 0 8px;
}

/* ══════════════════════════════════════════════════════════════════
   PARAMS FORM  (generated by box JS files)
   ══════════════════════════════════════════════════════════════════ */
.params-section { margin-bottom: 4px; }

.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 14px 0 8px;
}
.section-title:first-child { margin-top: 18px; }

hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}

/* Switch row */
.switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--radius-md);
  background: var(--hover-bg);
  border: 1px solid var(--border);
  transition: border-color var(--transition);
}
.switch-row:hover { border-color: #c0c4cc; }
.switch-row input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.check-param-row { margin-bottom: 4px; }

.switch-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--text-2);
  cursor: pointer; user-select: none;
}
.switch-label input[type="checkbox"] {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}

/* Param row */
.param-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.param-row label {
  flex: 1;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.35;
}
.param-row label b { color: var(--text-1); font-weight: 600; }

.param-row input[type="number"],
.param-row input[type="text"] {
  width: 76px;
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-bg);
  font-size: 13px;
  font-family: inherit;
  text-align: right;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.param-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,121,211,.15);
}

.param-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.param-pair .param-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 0;
}
.param-pair .param-row input[type="number"] { width: 100%; text-align: left; }

.param-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.param-col label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.param-col input[type="number"] {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-bg);
  font-size: 13px;
  font-family: inherit;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.param-col input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,121,211,.15);
}

/* Select */
.material-select,
#params-form select {
  width: 100%;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-1);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  margin-bottom: 2px;
  transition: border-color var(--transition);
}
.material-select:focus,
#params-form select:focus { border-color: var(--accent); }

/* check-with-input */
.check-with-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.check-with-input input[type="checkbox"] {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.check-with-input label {
  flex: 1;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
.check-with-input input[type="number"] {
  width: 68px;
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
  font-family: inherit;
  text-align: right;
  outline: none;
  transition: border-color var(--transition);
  -webkit-appearance: none;
}
.check-with-input input[type="number"]:focus { border-color: var(--accent); }
.check-with-input input[type="number"]:disabled { opacity: .4; pointer-events: none; }

.check-label {
  display: flex; align-items: center; gap: 6px; flex: 1;
}
.check-label input[type="checkbox"] {
  width: 15px; height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.check-label label { font-size: 13px; color: var(--text-2); cursor: pointer; }

/* Type grid */
.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 4px 6px;
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.type-option:hover { border-color: #c0c4cc; background: var(--hover-bg); }
.type-option input[type="radio"] { display: none; }
.type-option img { width: 100%; max-width: 64px; height: auto; display: block; }
.type-option span {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  line-height: 1.2;
}
.type-option.type-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.type-option.type-selected span { color: var(--accent); font-weight: 700; }

.type-group-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  grid-column: 1 / -1;
  margin-top: 6px;
}

.ok-badge { font-size: 10px; color: #d97706; font-weight: 700; }

.refresh-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  background: var(--hover-bg);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.refresh-btn:hover { background: var(--border); color: var(--text-1); }
.refresh-btn:active { background: #d9dde1; }

/* ══════════════════════════════════════════════════════════════════
   INFO PANEL  (rendered into #info-panel by app.js)
   ══════════════════════════════════════════════════════════════════ */
.info-box-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}

.info-preview-img {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 8px;
  background: var(--hover-bg);
}

.info-description {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 12px;
}
.info-description p { margin: 0; }

.stats-card {
  background: var(--hover-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 4px;
}
.stats-card-header {
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.stats-card-body {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stats-card-body p { color: var(--text-2); }
.stats-card-body b { color: var(--text-1); font-weight: 600; }
.stats-card-body hr { background: var(--border); margin: 4px 0; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}
.stat-row b { color: var(--text-1); font-weight: 600; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-cut  { background: var(--accent-cut); }
.dot-fold { background: var(--accent-fold); }
.dot-perf { background: var(--accent-perf); }

/* Hide old export/refresh buttons rendered inside box JS forms */
.export-btn  { display: none !important; }
.refresh-btn { display: none !important; }

/* Sidebar no longer has a footer download button */
.sidebar-footer { display: none; }

/* ══════════════════════════════════════════════════════════════════
   VALIDATION
   ══════════════════════════════════════════════════════════════════ */
input.val-error   { border-color: #c62828 !important; box-shadow: 0 0 0 2px rgba(198,40,40,.15) !important; }
input.val-warning { border-color: #d97706 !important; box-shadow: 0 0 0 2px rgba(217,119,6,.15) !important; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE TOOLBAR
   ══════════════════════════════════════════════════════════════════ */
#toolbar {
  display: none;
  position: fixed;
  z-index: 900;
  background: var(--surface);
  border-top: 1px solid var(--border);
  left: 0; bottom: 0;
  width: 100%;
  height: var(--tb-size);
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.tb-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition);
}
.tb-btn svg  { width: 20px; height: 20px; flex-shrink: 0; }
.tb-btn span { font-size: 9px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; line-height: 1; }
.tb-btn:hover { color: var(--text-1); }
.tb-btn.active { color: var(--accent); }

/* ── Backdrop ────────────────────────────────────────────────────── */
#panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,.4);
}
#panel-backdrop.visible { display: block; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE – Mobile  (< 768 px)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #left-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: var(--tb-size);
    /* On mobile: show both columns stacked; slide in from left */
    flex-direction: column;
    width: min(calc(var(--menu-w) + var(--panel-w)), 88vw);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: none;
    z-index: 800;
    /* Override desktop width transitions on mobile */
    width: min(340px, 88vw) !important;
  }
  #left-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }

  /* On mobile: both columns always full-width, stacked */
  #menu-col {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 40%;
  }
  #params-panel {
    width: 100%;
    min-width: 0;
    flex: 1;
  }
  /* Params toggle button hidden on mobile (panel always visible) */
  .params-toggle-btn { display: none; }

  #app-body {
    top: var(--topbar-h);
    bottom: var(--tb-size);
  }

  #toolbar { display: flex; }

  /* On mobile footer stats wrap or collapse */
  #preview-footer { height: auto; min-height: 44px; flex-wrap: wrap; padding: 6px 12px; gap: 8px; }
  .footer-stats { gap: 10px; flex-wrap: wrap; }
  .footer-stat-sep { display: none; }
  .footer-details.visible { display: flex; flex-wrap: wrap; gap: 10px; }
  .btn-footer-download { display: none; }

  #zoom-controls { bottom: 60px; right: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   AUTH – Modal overlay & box
   ══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: background 0.18s ease;
}
.modal-overlay.open {
  background: rgba(0,0,0,.45);
}
.modal-overlay.open .modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-box {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 380px;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-3);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.modal-close svg { width: 16px; height: 16px; }
.modal-close:hover { background: var(--hover-bg); color: var(--text-1); }

.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 20px;
}

/* ── Modal tabs ──────────────────────────────────────────────────── */
.modal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
}
.modal-tab {
  flex: 1;
  padding: 8px 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.modal-tab:hover { color: var(--text-1); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Auth form ───────────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-form.hidden { display: none; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
}
.form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.2px;
}
.form-field input {
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-bg);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.form-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,122,255,.12);
}
.form-field input::placeholder { color: var(--text-3); }

.form-error {
  font-size: 12px;
  color: #c62828;
  min-height: 16px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.btn-modal-submit {
  width: 100%;
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition);
  margin-top: 2px;
}
.btn-modal-submit:hover { opacity: 0.88; }
.btn-modal-submit:active { opacity: 0.78; }

.form-section-sep {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 12px;
}
.form-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-section-optional {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.form-section-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.form-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.form-actions-row .btn-modal-submit { flex: 1; width: auto; }

.btn-modal-danger {
  flex-shrink: 0;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid #c62828;
  color: #c62828;
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn-modal-danger:hover { background: #c62828; color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   AUTH – User menu (topbar, logged-in state)
   ══════════════════════════════════════════════════════════════════ */
.user-menu-wrap {
  position: relative;
}

.btn-user {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  color: var(--text-1);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--transition), border-color var(--transition);
  max-width: 200px;
}
.btn-user:hover { background: var(--hover-bg); border-color: #c0c4cc; }

.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.user-avatar.lg {
  width: 38px; height: 38px;
  font-size: 14px;
  flex-shrink: 0;
}

.user-display-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-chevron {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--transition);
}
.user-dropdown.open ~ * .user-chevron,
#btn-user-menu:has(+ #user-dropdown.open) .user-chevron { transform: rotate(180deg); }

/* ── User dropdown ───────────────────────────────────────────────── */
.user-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 1500;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.user-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
}
.user-dropdown-info {
  min-width: 0;
}
.user-dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-email {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}

.user-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.user-dropdown-item:hover { background: var(--hover-bg); }
.user-dropdown-item.danger { color: #c62828; }
.user-dropdown-item.danger:hover { background: #fff1f1; }

/* ── Mobile: hide username label in topbar ───────────────────────── */
@media (max-width: 480px) {
  .user-display-name { display: none; }
  .btn-user { padding: 4px; border-radius: 50%; }
}

/* ── Admin badge & avatar variant ───────────────────────────────── */
.user-avatar.admin { background: #7c3aed; }

.admin-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: #7c3aed;
  color: #fff;
  padding: 1px 6px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1.6;
}

.admin-item {
  color: #7c3aed !important;
  font-weight: 600;
}
.admin-item:hover { background: #f3eeff !important; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN PANEL – wide modal + table
   ══════════════════════════════════════════════════════════════════ */
.modal-box-wide {
  max-width: 680px;
}

.modal-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.admin-panel-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
}

.admin-table-wrap {
  overflow-x: auto;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table thead tr {
  background: var(--hover-bg);
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
  white-space: nowrap;
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--hover-bg); }
.admin-table-self { background: #f9f7ff !important; }

.admin-col-nr    { width: 32px; color: var(--text-3); font-size: 12px; }
.admin-col-name  { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.admin-col-email { color: var(--text-2); word-break: break-all; }
.admin-col-role  { white-space: nowrap; }
.admin-col-date  { white-space: nowrap; color: var(--text-2); font-size: 12px; }
.admin-col-actions { width: 40px; text-align: center; }

.user-avatar.sm {
  width: 24px; height: 24px;
  font-size: 9px;
  flex-shrink: 0;
}

.admin-self-tag {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}

.role-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}
.role-admin { background: #ede9fe; color: #7c3aed; }
.role-user  { background: var(--accent-bg); color: var(--accent); }

.admin-btn-delete {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.admin-btn-delete svg { width: 14px; height: 14px; }
.admin-btn-delete:hover { background: #fff1f1; color: #c62828; }

/* ── Admin panel: downloads column ──────────────────────────────── */
.admin-col-dl {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.dl-total {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}
.dl-remaining {
  font-size: 11px;
  color: var(--text-3);
}

/* ══════════════════════════════════════════════════════════════════
   DOWNLOAD LIMIT – counter + disabled button + limit modal
   ══════════════════════════════════════════════════════════════════ */
.dl-counter {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 4px;
}
.dl-counter.dl-counter-limit {
  color: #c62828;
  font-weight: 600;
}

.btn-footer-download.download-disabled,
.btn-footer-download:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* Limit modal */
.modal-box-sm {
  max-width: 340px;
  text-align: center;
}
.limit-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.limit-icon svg {
  width: 44px; height: 44px;
  color: #d97706;
}
.limit-desc {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 8px;
}

/* ════════════════════════════════════════════════════════════
   هوية فواصل — إعادة تلوين المحرّك بألوان وهوية موقع فواصل
   (إعادة تعريف متغيّرات الجذر تكفي لإعادة تلوين كل الواجهة)
   ════════════════════════════════════════════════════════════ */
:root {
  --bg:          #faf8f4 !important;
  --surface:     #ffffff !important;
  --surface-bg:  #faf8f4 !important;
  --border:      #eae5dc !important;
  --hover-bg:    #f3efe7 !important;
  --text-1:      #202623 !important;
  --text-2:      #424c47 !important;
  --text-3:      #707b75 !important;
  --accent:      #0e7a6d !important;   /* أخضر فواصل */
  --accent2:     #0a5f55 !important;
  --accent-bg:   #e3f1ed !important;
  --radius-sm:   8px  !important;
  --radius-md:   12px !important;
  --radius-lg:   16px !important;
}
body { font-family: 'Tajawal','Segoe UI',Tahoma,'Helvetica Neue',sans-serif !important; }
#topbar { background:#ffffff !important; border-bottom:1px solid #eae5dc !important; }
.brand-logo { height:40px !important; width:auto !important; }
/* زر التنزيل الرئيسي بالأخضر الممتلئ */
.btn-footer-download { background:#0e7a6d !important; color:#fff !important; border-radius:14px !important; }
.btn-footer-download:hover { background:#0a5f55 !important; }
/* بطاقة نوع العلبة المختارة بإطار أخضر */
.menu-item.active, .type-option.type-selected { border-color:#0e7a6d !important; background:#e3f1ed !important; }
/* أزرار التحديث/الإجراءات */
.refresh-btn { background:#0e7a6d !important; color:#fff !important; border-radius:12px !important; }
.refresh-btn:hover { background:#0a5f55 !important; }

/* مُضمَّن داخل صفحة فواصل — نخفي توب-بار المحرّك (صفحة فواصل توفّر الهيدر) */
:root { --topbar-h: 0px !important; }
#topbar { display:none !important; }

/* نقل أيقونات الزوم (+/ملء/−) إلى يسار النافذة */
#zoom-controls { right: auto !important; left: 16px !important; }
@media (max-width: 768px) { #zoom-controls { right: auto !important; left: 12px !important; } }