:root{
  --ink:#12181F;
  --blueprint:#1B3A5C;
  --blueprint-deep:#0F2438;
  --blueprint-line:rgba(255,255,255,0.09);
  --paper:#F0ECDF;
  --paper-2:#E7E1D0;
  --aluminum:#AEB6BD;
  --aluminum-dark:#7C848B;
  --oak:#A06A3B;
  --safety:#E8A100;
  --safety-deep:#B87C00;
  --line:rgba(27,58,92,0.16);
  --danger:#B4432E;
  --ok:#3E7A4C;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-arabic:'Tajawal', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  --radius:10px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-arabic);
  min-height:100vh;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:28px 28px;
}
body.lang-en{ font-family:var(--font-body); }

.ltr-num{ direction:ltr; font-family:var(--font-mono); unicode-bidi:isolate; }

/* ===== Header ===== */
header.top{
  color:#F4F6F8;
  background-image:
    linear-gradient(180deg, var(--blueprint) 0%, var(--blueprint-deep) 100%),
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size:auto, 24px 24px, 24px 24px;
  padding:26px 20px 30px;
  border-bottom:3px solid var(--safety);
}
.top-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand{ display:flex; flex-direction:column; gap:6px; }
.brand .mark{
  font-family:var(--font-display); font-weight:700; font-size:26px;
  letter-spacing:0.06em; display:flex; align-items:center; gap:10px;
}
body.lang-ar .brand .mark{ font-family:var(--font-arabic); font-weight:900; letter-spacing:0; }
.mark .chip{
  background:var(--safety); color:var(--blueprint-deep);
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  padding:3px 7px; border-radius:4px; letter-spacing:0.04em;
}
.brand .tagline{ font-size:14px; color:var(--aluminum); max-width:520px; line-height:1.6; }
.top-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lang-toggle{
  display:flex; border:1px solid rgba(255,255,255,0.25); border-radius:999px;
  overflow:hidden; background:rgba(255,255,255,0.06);
}
.lang-toggle button{
  border:none; background:transparent; color:#DCE3E9; padding:8px 16px;
  font-family:var(--font-mono); font-size:13px; font-weight:600; cursor:pointer; letter-spacing:0.03em;
}
.lang-toggle button.active{ background:var(--safety); color:var(--blueprint-deep); }
.currency-badge{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--blueprint-deep);
  background:var(--aluminum); padding:9px 14px; border-radius:999px; letter-spacing:0.05em;
}
.admin-link{
  font-family:var(--font-mono); font-size:12px; color:var(--aluminum);
  text-decoration:none; border:1px solid rgba(255,255,255,0.25); padding:9px 14px; border-radius:999px;
}
.admin-link:hover{ color:#fff; border-color:#fff; }

/* ===== Layout ===== */
main{
  max-width:1180px; margin:0 auto; padding:26px 20px 60px;
  display:grid; grid-template-columns:380px 1fr; gap:22px; align-items:start;
}
@media (max-width:880px){ main{ grid-template-columns:1fr; } }

.card{
  background:#FBF9F3; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(27,58,92,0.05), 0 8px 24px -18px rgba(18,24,31,0.35);
  overflow:hidden;
}
.card-head{
  padding:16px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-head h2{
  margin:0; font-family:var(--font-display); font-size:15px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--blueprint);
}
body.lang-ar .card-head h2{ font-family:var(--font-arabic); font-weight:700; text-transform:none; letter-spacing:0; }
.card-head .idx{
  font-family:var(--font-mono); font-size:11px; color:var(--aluminum-dark);
  border:1px solid var(--line); padding:2px 8px; border-radius:999px;
}

/* ===== Category tabs ===== */
.tabs{ display:flex; flex-direction:column; }
.tab{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-inline-start:3px solid transparent; border-bottom:1px solid var(--line);
  cursor:pointer; background:transparent; text-align:start; font-family:inherit;
  color:var(--ink); font-size:14.5px; font-weight:500;
  transition:background 0.15s ease, border-color 0.15s ease; width:100%;
}
.tab:last-child{ border-bottom:none; }
.tab:hover{ background:rgba(160,106,59,0.06); }
.tab.active{
  background:rgba(232,161,0,0.10); border-inline-start-color:var(--safety);
  font-weight:700; color:var(--blueprint);
}
.tab svg{ flex:none; width:22px; height:22px; stroke:var(--blueprint); }
.tab.active svg{ stroke:var(--safety-deep); }

/* ===== Form ===== */
.form-wrap{ padding:18px; }
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:12.5px; font-weight:600; color:var(--aluminum-dark);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;
}
body.lang-ar .field label{ text-transform:none; letter-spacing:0; }
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px;
  background:#fff; font-family:inherit; font-size:14.5px; color:var(--ink);
}
.field textarea{ resize:vertical; min-height:56px; }
.group-select{ margin-bottom:14px; }
.group-select label{
  display:block; font-size:12.5px; font-weight:600; color:var(--aluminum-dark); margin-bottom:6px;
}
body.lang-ar .group-select label{ text-transform:none; letter-spacing:0; }
.group-select select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:14.5px;
}
.field input.ltr-num{ font-family:var(--font-mono); direction:ltr; text-align:start; }
.field select{ direction:inherit; font-family:inherit; }
.field input:focus, .field select:focus{
  outline:2px solid var(--safety); outline-offset:1px; border-color:var(--safety);
}
.field input[readonly]{ background:var(--paper-2); color:var(--blueprint); font-weight:700; }

.dim-pair{ display:flex; align-items:flex-end; gap:8px; margin-bottom:14px; }
.dim-pair .field{ flex:1; margin-bottom:0; }
.dim-arrow{
  flex:none; width:34px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--aluminum-dark); font-family:var(--font-mono); font-size:13px; padding-bottom:2px;
}

.tier-price-row{ display:flex; gap:8px; }
.tier-price-row .field:first-child{ flex:1.4; }
.tier-price-row .field:last-child{ flex:1; }

.qty-add-row{ display:flex; gap:10px; align-items:flex-end; margin-top:4px; }
.qty-add-row .field{ flex:none; width:90px; margin-bottom:0; }

.preview{
  margin-top:2px; margin-bottom:14px; padding:10px 12px; background:var(--paper-2);
  border-radius:7px; font-size:13px; color:var(--blueprint);
  display:flex; justify-content:space-between; align-items:center; border:1px dashed var(--aluminum);
}
.preview .val{ font-family:var(--font-mono); font-weight:700; }

.btn{
  border:none; border-radius:8px; padding:11px 18px; font-family:inherit;
  font-weight:700; font-size:14px; cursor:pointer; transition:filter 0.15s ease, transform 0.05s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--safety); color:var(--blueprint-deep); width:100%; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; border:1px solid var(--aluminum); color:var(--blueprint); }
.btn-ghost:hover{ background:rgba(27,58,92,0.06); }
.btn-danger{ background:transparent; border:1px solid var(--danger); color:var(--danger); }

.hint{ font-size:11.5px; color:var(--aluminum-dark); line-height:1.6; padding:0 18px 16px; }

/* ===== Order ticket ===== */
.ticket-actions{ display:flex; gap:8px; }
.ticket-actions button, .ticket-actions a{ padding:7px 12px; font-size:12.5px; text-decoration:none; display:inline-flex; align-items:center; }

table.order{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.order thead th{
  text-align:start; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--aluminum-dark); padding:10px 16px; border-bottom:1px solid var(--line);
}
table.order tbody td{ padding:12px 16px; border-bottom:1px dashed var(--line); vertical-align:top; }
table.order tbody tr:hover{ background:rgba(232,161,0,0.05); }
.item-title{ font-weight:700; color:var(--blueprint); }
.item-sub{ font-size:12px; color:var(--aluminum-dark); margin-top:2px; }
.num-cell{ font-family:var(--font-mono); direction:ltr; text-align:end; white-space:nowrap; }
.remove-btn{
  background:none; border:none; color:var(--danger); cursor:pointer; font-size:12.5px;
  font-family:var(--font-mono); text-decoration:underline; padding:0;
}

.empty-state{ padding:44px 20px; text-align:center; color:var(--aluminum-dark); font-size:14px; line-height:1.8; }
.empty-state svg{ width:40px; height:40px; stroke:var(--aluminum); margin-bottom:10px; }

.total-bar{
  display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  background-image:linear-gradient(180deg, var(--blueprint), var(--blueprint-deep));
  color:#fff; gap:12px; flex-wrap:wrap;
}
.total-bar .label{ font-size:13px; color:var(--aluminum); text-transform:uppercase; letter-spacing:0.05em; }
body.lang-ar .total-bar .label{ text-transform:none; letter-spacing:0; }
.total-bar .amount{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--safety); direction:ltr; }

footer{ max-width:1180px; margin:0 auto; padding:0 20px 40px; color:var(--aluminum-dark); font-size:12px; line-height:1.8; }

/* ===== Admin: login ===== */
.login-wrap{
  max-width:400px; margin:70px auto; padding:0 20px;
}
.login-card{ padding:26px; }
.login-card h1{
  font-family:var(--font-display); font-size:18px; color:var(--blueprint); margin:0 0 6px;
}
body.lang-ar .login-card h1{ font-family:var(--font-arabic); }
.login-card p.sub{ font-size:13px; color:var(--aluminum-dark); margin:0 0 20px; }
.alert{
  padding:10px 14px; border-radius:7px; font-size:13px; margin-bottom:16px;
}
.alert-error{ background:rgba(180,67,46,0.10); color:var(--danger); border:1px solid rgba(180,67,46,0.3); }
.alert-ok{ background:rgba(62,122,76,0.10); color:var(--ok); border:1px solid rgba(62,122,76,0.3); }

/* ===== Admin: price editor ===== */
.admin-wrap{ max-width:900px; margin:0 auto; padding:26px 20px 60px; }
.admin-cat{ margin-bottom:20px; }
.admin-cat-head{
  display:flex; align-items:center; gap:10px; padding:14px 18px; background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.admin-cat-head svg{ width:20px; height:20px; stroke:var(--blueprint); flex:none; }
.admin-cat-head h3{ margin:0; font-size:14.5px; font-weight:700; color:var(--blueprint); }
.admin-group-label{
  padding:10px 18px 6px; font-size:12.5px; font-weight:700; color:var(--oak);
  text-transform:none; border-bottom:1px solid var(--line); background:rgba(160,106,59,0.05);
}
.admin-cat-head-edit{ flex-wrap:wrap; gap:10px; }
.cat-edit-fields{ display:flex; flex-wrap:wrap; gap:8px; flex:1; align-items:center; }
.cat-name-input{
  padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-size:13.5px; font-family:inherit;
  min-width:140px; flex:1;
}
.cat-edit-fields select{ padding:7px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.sort-input{ width:56px; padding:7px 8px; border:1px solid var(--line); border-radius:6px; font-family:var(--font-mono); direction:ltr; font-size:12.5px; }
.admin-group-label-edit{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.grp-name-input{
  padding:6px 9px; border:1px solid var(--line); border-radius:6px; font-size:13px; font-family:inherit; min-width:160px; flex:1;
}
.opt-name-input{
  padding:7px 9px; border:1px solid var(--line); border-radius:6px; font-size:13.5px; font-family:inherit; flex:1; min-width:120px;
}
.icon-del{
  background:none; border:1px solid transparent; color:var(--danger); cursor:pointer; font-size:14px;
  padding:5px 8px; border-radius:6px; flex:none;
}
.icon-del:hover{ background:rgba(180,67,46,0.08); border-color:rgba(180,67,46,0.3); }
.add-row{ background:rgba(232,161,0,0.04); align-items:center; flex-wrap:wrap; }
.add-row input{
  padding:7px 9px; border:1px dashed var(--aluminum); border-radius:6px; font-size:13px; font-family:inherit; flex:1; min-width:100px; background:#fff;
}
.add-price-input{ max-width:100px; font-family:var(--font-mono); direction:ltr; }
.add-btn{ flex:none; font-size:12.5px; padding:8px 14px; white-space:nowrap; }
.add-row-group{ background:rgba(27,58,92,0.04); }
.new-cat-form{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 16px; padding:16px 18px 4px; }
@media (max-width:600px){ .new-cat-form{ grid-template-columns:1fr; } }
.admin-row{
  display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px dashed var(--line);
}
.admin-row:last-child{ border-bottom:none; }
.admin-row .row-label{ flex:1; font-size:14px; }
.admin-row .row-label .en-sub{ display:block; font-size:11.5px; color:var(--aluminum-dark); margin-top:2px; }
.admin-row .row-input{ width:130px; flex:none; }
.admin-row .row-input input{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px;
  font-family:var(--font-mono); direction:ltr; font-size:14px;
}
.admin-row .row-unit{ width:60px; flex:none; font-family:var(--font-mono); font-size:12px; color:var(--aluminum-dark); }
.save-bar{
  position:sticky; bottom:0; background:var(--paper); border-top:1px solid var(--line);
  padding:14px 0; margin-top:10px; display:flex; justify-content:flex-end; gap:10px;
}
.save-bar .btn{ width:auto; padding:12px 28px; }

@media print{
  header.top, .form-wrap, .tabs, .card-head .idx, .ticket-actions, .hint{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:none; }
  main{ grid-template-columns:1fr; padding:0; }
}