@charset "UTF-8";
/* ================================================================
   NoLumi - brand stylesheet
   Extracted from the coming-soon page and extended for the app.
   ================================================================ */

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

:root {
  --coral:  #D85A30;
  --peach:  #F0997B;
  --gold:   #FAC775;
  --gold-d: #C89240;
  --teal:   #5DCAA5;
  --lav:    #AFA9EC;
  --pink:   #ED93B1;
  --dark:   #1a0a20;
  --muted:  #8B5E4A;
  --cream:  #FEF9F2;
  --cream-2:#F9F1E5;

  --danger: #D8302F;
  --success:#3DA37A;

  --ease: cubic-bezier(.22,1,.36,1);
}

html { scroll-behavior:smooth; }
body {
  background: var(--cream);
  color: var(--dark);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--gold); color: var(--dark); }
a { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }

/* -- Ambient drifting petals ------------------------ */
.bg { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.petal { position:absolute; border-radius:50%; opacity:0.06; animation:drift linear infinite; }
@keyframes drift {
  0%   { transform:translateY(110vh) rotate(0deg) scale(1); opacity:0; }
  10%  { opacity:0.08; }
  90%  { opacity:0.04; }
  100% { transform:translateY(-20vh) rotate(360deg) scale(0.6); opacity:0; }
}

/* -- Layout ----------------------------------------- */
.wrap { max-width:1240px; margin:0 auto; padding:0 clamp(1.2rem, 4vw, 2.4rem); position:relative; z-index:2; }
.wrap-narrow { max-width: 720px; margin:0 auto; padding:0 clamp(1.2rem, 4vw, 2.4rem); position:relative; z-index:2; }

/* -- Nav -------------------------------------------- */
.nav {
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(254, 249, 242, 0.82);
  border-bottom: 1px solid rgba(216,90,48,0.08);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 1rem 0; gap: 1.2rem; }
.brand { display:flex; align-items:center; gap:0.7rem; }
.brand-mark { width:38px; height:38px; }
.brand-mark svg { width:100%; height:100%; animation:spinMark 30s linear infinite; transform-origin:50% 50%; }
@keyframes spinMark { from { transform:rotate(0); } to { transform:rotate(360deg); } }

.brand-name { display:flex; align-items:baseline; gap:0; line-height:1; font-size:1.5rem; }
.brand-name .wm-n   { color: var(--pink); }
.brand-name .wm-o   { color: var(--coral); }
.brand-name .wm-L   { color: var(--teal); font-size:1rem; font-weight:400; }
.brand-name .wm-umi { color: var(--coral); }

.nav-links { display:flex; align-items:center; gap: clamp(0.9rem, 1.8vw, 1.8rem); list-style:none; }
.nav-links a {
  font-size:0.88rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--muted); font-weight:400;
  transition: color .3s var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--coral); }
.nav-links a:not(.nav-cta)::after {
  content:''; position:absolute; inset-inline-start:0; bottom:-6px;
  height:1.5px; width:0; background: var(--coral);
  transition: width .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after { width:100%; }

.nav-cta {
  padding: 0.58rem 1.1rem;
  background: var(--coral); color: white !important;
  border-radius: 999px;
  font-size: 0.76rem; letter-spacing: 1.4px; text-transform:uppercase;
  font-weight:400;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 4px 20px rgba(216,90,48,0.25);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(216,90,48,0.35); }

.burger { display:none; background:none; border:none; cursor:pointer; padding:0.4rem; }
.burger span { display:block; width:24px; height:1.5px; background: var(--coral); margin:5px 0; transition: transform .3s var(--ease); }

@media (max-width: 820px) {
  .nav-links {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--cream); padding:1rem 1.4rem 1.4rem;
    border-bottom:1px solid rgba(216,90,48,0.08);
  }
  .nav-links.open { display:flex; }
  .nav-links li { padding:0.8rem 0; border-bottom:1px solid rgba(216,90,48,0.06); }
  .nav-links li:last-child { border-bottom:none; padding-top:1rem; }
  .burger { display:block; }
}

/* -- Flash messages --------------------------------- */
.flash-stack { display:flex; flex-direction:column; gap:0.6rem; margin: 1.4rem 0 0; }
.flash {
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.94rem;
  border: 1px solid transparent;
}
.flash--success { background: rgba(93,202,165,0.14); border-color: rgba(93,202,165,0.4); color: #1f6d55; }
.flash--error   { background: rgba(216,48,47,0.09);  border-color: rgba(216,48,47,0.3);  color: #8a2020; }
.flash--info    { background: rgba(175,169,236,0.15);border-color: rgba(175,169,236,0.5);color: #5548a1; }
.flash--warn    { background: rgba(250,199,117,0.2); border-color: rgba(250,199,117,0.6);color: #7a5510; }

/* -- Section head (reused) -------------------------- */
.section-head { text-align:center; margin-bottom: 3rem; }
.eyebrow {
  font-size: 0.72rem; letter-spacing: 5px; text-transform:uppercase;
  color: var(--coral); margin-bottom: 0.9rem;
  display:inline-flex; align-items:center; gap:0.8rem;
}
.eyebrow::before, .eyebrow::after { content:''; width:28px; height:1px; background: var(--coral); opacity:0.4; }
.section-title { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 300; line-height: 1.15; color: var(--dark); margin-bottom: 0.5rem; }
.section-title .highlight { color: var(--coral); font-style:italic; }
.section-title-ar { font-family:'Noto Sans Arabic', sans-serif; font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight:300; color: var(--muted); opacity:0.8; }

/* -- Buttons ---------------------------------------- */
.btn {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  font-size: 0.85rem; letter-spacing:2px; text-transform:uppercase;
  font-weight:400; font-family:inherit;
  cursor:pointer; border:none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-primary { background: var(--coral); color: white; box-shadow: 0 6px 24px rgba(216,90,48,0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(216,90,48,0.35); }
.btn-ghost { background: transparent; color: var(--coral); border: 1.5px solid rgba(216,90,48,0.35); }
.btn-ghost:hover { background: rgba(216,90,48,0.06); border-color: var(--coral); }
.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1.5px solid rgba(216, 48, 47, 0.35);
}
.btn-danger:hover { background: rgba(216, 48, 47, 0.08); border-color: var(--danger); }
.btn-full { width: 100%; justify-content:center; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.72rem; letter-spacing:1.5px; }

/* -- Hero (homepage) -------------------------------- */
.hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem); text-align:center; position:relative; }
.hero-mark { width: clamp(110px, 16vw, 160px); margin: 0 auto 1.4rem; animation: fadeUp 1s var(--ease) both; }
.hero-mark svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 10px 40px rgba(216,90,48,0.18)); animation: spinMark 22s linear infinite; transform-origin:50% 50%; }

.hero-wordmark { display:flex; align-items:baseline; justify-content:center; gap:0; line-height:1; margin-bottom: 0.4rem; animation: fadeUp 1s .15s var(--ease) both; }
.hero-wordmark .wm-n   { font-size: clamp(3rem, 9vw, 6rem); color: var(--pink); font-weight:300; }
.hero-wordmark .wm-o   { font-size: clamp(3rem, 9vw, 6rem); color: var(--coral); font-weight:300; }
.hero-wordmark .wm-L   { font-size: clamp(2rem, 6vw, 4rem); color: var(--teal); font-weight:400; }
.hero-wordmark .wm-umi { font-size: clamp(3rem, 9vw, 6rem); color: var(--coral); font-weight:300; }

.hero-ar { font-family:'Noto Sans Arabic', sans-serif; font-size: clamp(1.2rem, 3.2vw, 1.8rem); color: var(--coral); font-weight:300; margin-bottom: 1.4rem; animation: fadeUp 1s .25s var(--ease) both; }

.hero-divider { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom: 1.6rem; animation: fadeUp 1s .35s var(--ease) both; }
.hero-divider .line { width:60px; height:1px; background:linear-gradient(90deg, transparent, var(--lav)); }
.hero-divider .line.r { background:linear-gradient(90deg, var(--lav), transparent); }
.hero-divider .dot { width:6px; height:6px; border-radius:50%; background: var(--coral); }

.hero-tagline { font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight:300; font-style:italic; color: var(--dark); opacity:0.75; margin-bottom: 0.4rem; animation: fadeUp 1s .45s var(--ease) both; }
.hero-tagline-ar { font-family:'Noto Sans Arabic', sans-serif; font-size: clamp(1rem, 2.2vw, 1.3rem); font-weight:300; color: var(--dark); opacity:0.55; margin-bottom: 2.2rem; animation: fadeUp 1s .55s var(--ease) both; }

.hero-lead { max-width: 620px; margin: 0 auto 2.4rem; font-size: clamp(0.98rem, 1.6vw, 1.1rem); color: var(--muted); line-height: 1.7; animation: fadeUp 1s .65s var(--ease) both; }
.hero-lead .accent { color: var(--coral); font-weight:400; }

.hero-ctas { display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; animation: fadeUp 1s .75s var(--ease) both; }

.hero-dots { display:flex; justify-content:center; gap:0.5rem; margin-top: 2.6rem; animation: fadeUp 1s .95s var(--ease) both; }
.hero-dots .dot { width:7px; height:7px; border-radius:50%; animation:pulse 3s ease-in-out infinite; }
.hero-dots .dot:nth-child(1){ background:var(--coral);  animation-delay:0s; }
.hero-dots .dot:nth-child(2){ background:var(--teal);   animation-delay:.25s; }
.hero-dots .dot:nth-child(3){ background:var(--lav);    animation-delay:.5s; }
.hero-dots .dot:nth-child(4){ background:var(--gold);   animation-delay:.75s; }
.hero-dots .dot:nth-child(5){ background:var(--pink);   animation-delay:1s; }
.hero-dots .dot:nth-child(6){ background:var(--peach);  animation-delay:1.25s; }
@keyframes pulse { 0%,100% { transform:scale(1);   opacity:0.6; } 50%{ transform:scale(1.5); opacity:1; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to   { opacity:1; transform:translateY(0); } }

/* -- Category cards --------------------------------- */
.categories { padding: clamp(3rem, 7vw, 6rem) 0; position:relative; z-index:2; }
.cat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
  position:relative; overflow:hidden;
  padding: 2.4rem 2rem 2rem;
  border-radius: 24px;
  background: white;
  border: 1px solid rgba(216,90,48,0.08);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display:flex; flex-direction:column; min-height: 380px;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(26,10,32,0.08); }
.cat-icon { width: 76px; height: 76px; border-radius: 50%; display:flex; align-items:center; justify-content:center; margin-bottom: 1.4rem; position:relative; }
.cat-icon svg { width: 38px; height: 38px; }
.cat-card.cricut   .cat-icon { background: rgba(237,147,177,0.15); } .cat-card.cricut   .cat-icon svg { color: var(--pink); } .cat-card.cricut   .cat-num  { color: var(--pink); }
.cat-card.printing .cat-icon { background: rgba(93,202,165,0.18); } .cat-card.printing .cat-icon svg { color: var(--teal); } .cat-card.printing .cat-num  { color: var(--teal); }
.cat-card.threedee .cat-icon { background: rgba(250,199,117,0.25); }.cat-card.threedee .cat-icon svg { color: var(--gold-d); }.cat-card.threedee .cat-num  { color: var(--gold-d); }
.cat-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.cat-num { font-size: 0.72rem; letter-spacing:2px; font-weight:400; }
.cat-title { font-size: 1.6rem; font-weight:400; color: var(--dark); margin-bottom: 0.15rem; }
.cat-title-ar { font-family:'Noto Sans Arabic', sans-serif; font-size: 1rem; color: var(--muted); font-weight:300; margin-bottom: 0.9rem; }
.cat-desc { color: var(--muted); font-size: 0.98rem; line-height:1.7; margin-bottom: 1.4rem; }
.cat-list { list-style:none; margin-bottom: 1.6rem; display:flex; flex-wrap:wrap; gap:0.4rem; }
.cat-list li { font-size: 0.78rem; letter-spacing:0.5px; padding: 0.35rem 0.8rem; background: var(--cream-2); border-radius: 999px; color: var(--muted); }
.cat-link { margin-top: auto; display:inline-flex; align-items:center; gap:0.5rem; font-size: 0.82rem; letter-spacing:2px; text-transform:uppercase; font-weight:400; color: var(--coral); transition: gap .3s var(--ease); }
.cat-link:hover { gap: 0.9rem; }
.cat-link svg { width:14px; height:14px; }

/* -- Custom order strip ----------------------------- */
.custom { padding: clamp(3.5rem, 7vw, 5.5rem) 0; text-align:center; position:relative; }
.custom-inner {
  background: linear-gradient(135deg, var(--coral), var(--peach));
  border-radius: 28px; padding: clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 5vw, 3rem);
  color: white; position: relative; overflow: hidden;
}
.custom-inner::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(250,199,117,0.25), transparent 45%);
  pointer-events:none;
}
.custom h3 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); font-weight:300; margin-bottom: 0.4rem; position:relative; }
.custom h3 em { font-style:italic; color: var(--gold); }
.custom .custom-ar { font-family:'Noto Sans Arabic', sans-serif; font-size: clamp(1rem, 2vw, 1.2rem); font-weight:300; opacity:0.9; margin-bottom: 1.4rem; position:relative; }
.custom p { max-width: 560px; margin: 0 auto 1.8rem; font-size: 1rem; opacity: 0.92; line-height:1.7; position:relative; }
.custom .btn { background: white; color: var(--coral); box-shadow: 0 8px 30px rgba(0,0,0,0.15); position:relative; }
.custom .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,0.22); }

/* -- Story ------------------------------------------ */
.story { padding: clamp(3rem, 7vw, 6rem) 0; position:relative; z-index:2; }
.story-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
@media (max-width: 820px) { .story-grid { grid-template-columns: 1fr; } }
.story-text .eyebrow { justify-content:flex-start; }
.story-text h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight:300; line-height:1.2; margin-bottom: 0.4rem; color: var(--dark); }
.story-text h2 em { font-style:italic; color: var(--coral); }
.story-text .story-ar { font-family:'Noto Sans Arabic', sans-serif; font-size: 1.1rem; color: var(--muted); margin-bottom: 1.4rem; }
.story-text p { color: var(--muted); font-size: 1rem; line-height:1.8; margin-bottom: 1rem; }
.story-stats { display:flex; gap: 2rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(216,90,48,0.15); }
.story-stat .n { font-size: 2rem; font-weight:400; color: var(--coral); line-height:1; }
.story-stat .l { font-size: 0.75rem; letter-spacing: 2px; text-transform:uppercase; color: var(--muted); margin-top: 0.4rem; }
.story-visual { position:relative; aspect-ratio: 1/1; display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.8rem; }
.story-tile { border-radius: 20px; display:flex; align-items:center; justify-content:center; padding: 1.2rem; }
.story-tile svg { width: 60%; height:60%; }
.story-tile.a { background: rgba(237,147,177,0.25); grid-row: span 2; }
.story-tile.b { background: rgba(93,202,165,0.22); }
.story-tile.c { background: rgba(250,199,117,0.32); }
.story-tile.a svg { color: var(--pink); }
.story-tile.b svg { color: var(--teal); }
.story-tile.c svg { color: var(--gold-d); }

/* -- Footer ----------------------------------------- */
.footer { background: var(--dark); color: rgba(254,249,242,0.85); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; position:relative; z-index: 2; margin-top: auto; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 2.2rem; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }
.foot-brand .brand-name { color: white; font-size: 1.8rem; margin-top:0.6rem; }
.foot-brand .brand-name .wm-L { color: var(--teal); }
.foot-tag { color: rgba(254,249,242,0.6); font-size:0.95rem; font-style:italic; margin-top: 1rem; }
.foot-tag-ar { font-family:'Noto Sans Arabic', sans-serif; color: rgba(254,249,242,0.45); font-size:0.9rem; margin-top: 0.2rem; }
.foot-col h4 { font-size: 0.75rem; letter-spacing:3px; text-transform:uppercase; color: var(--gold); font-weight:400; margin-bottom: 1.1rem; }
.foot-col ul { list-style:none; }
.foot-col li { margin-bottom: 0.7rem; }
.foot-col a { color: rgba(254,249,242,0.72); font-size:0.92rem; transition: color .3s var(--ease); }
.foot-col a:hover { color: var(--peach); }
.foot-social { display:flex; gap: 0.7rem; margin-top: 1rem; }
.foot-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(254,249,242,0.06); border: 1px solid rgba(254,249,242,0.12); display:flex; align-items:center; justify-content:center; transition: background .3s var(--ease), transform .3s var(--ease); }
.foot-social a:hover { background: var(--coral); transform: translateY(-2px); }
.foot-social svg { width: 18px; height: 18px; color: rgba(254,249,242,0.85); }
.foot-bottom { border-top: 1px solid rgba(254,249,242,0.08); padding-top: 1.6rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap: wrap; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color: rgba(254,249,242,0.5); }
.foot-bottom .domain-tag { color: var(--teal); }

/* -- Reveal on scroll ------------------------------- */
.reveal { opacity:0; transform:translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }

/* ================================================================
   Auth pages (login, register, forgot, reset, verify)
   ================================================================ */
.auth-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.auth-card {
  max-width: 460px; margin: 0 auto;
  background: white;
  border: 1px solid rgba(216,90,48,0.1);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 2.8rem);
  box-shadow: 0 30px 80px rgba(26,10,32,0.06);
}
.auth-mark { width: 76px; height: 76px; margin: 0 auto 1rem; }
.auth-mark svg { width:100%; height:100%; animation: spinMark 26s linear infinite; transform-origin:50% 50%; }
.auth-title { font-size: 1.75rem; font-weight: 300; text-align:center; color: var(--dark); margin-bottom: 0.2rem; }
.auth-title em { color: var(--coral); font-style: italic; }
.auth-sub { text-align:center; color: var(--muted); font-size: 0.94rem; margin-bottom: 1.8rem; }
.auth-sub-ar { font-family: 'Noto Sans Arabic', sans-serif; }

.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display:block;
  font-size: 0.78rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--muted); margin-bottom: 0.4rem;
  font-weight: 400;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--dark);
  background: var(--cream);
  border: 1.5px solid rgba(216,90,48,0.15);
  border-radius: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--coral);
  background: white;
  box-shadow: 0 0 0 4px rgba(216,90,48,0.08);
}
.form-help { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; opacity: 0.85; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }

.auth-actions { margin-top: 1.4rem; }
.auth-links {
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(216,90,48,0.1);
  text-align: center;
  font-size: 0.92rem; color: var(--muted);
}
.auth-links a { color: var(--coral); font-weight: 400; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .sep { margin: 0 0.6rem; opacity: 0.4; }

/* ================================================================
   Dashboards (client, staff, admin)
   ================================================================ */
.dash { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); flex: 1; }

.dash-header { margin-bottom: 2rem; display:flex; align-items:flex-end; justify-content:space-between; gap: 1rem; flex-wrap: wrap; }
.dash-title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 300; color: var(--dark); line-height:1.15; }
.dash-title em { color: var(--coral); font-style: italic; }
.dash-sub { color: var(--muted); font-size: 0.98rem; margin-top: 0.3rem; }

.role-pill {
  display: inline-flex; align-items:center; gap:0.5rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 400;
}
.role-pill--client { background: rgba(93,202,165,0.15); color: #1f6d55; }
.role-pill--staff  { background: rgba(175,169,236,0.2); color: #5548a1; }
.role-pill--admin  { background: rgba(216,90,48,0.15); color: var(--coral); }
.role-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

.dash-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem; margin-bottom: 2rem;
}
.dash-card {
  background: white;
  border: 1px solid rgba(216,90,48,0.08);
  border-radius: 20px;
  padding: 1.6rem 1.5rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dash-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(26,10,32,0.06); }
.dash-card .label { font-size: 0.72rem; letter-spacing: 2px; text-transform:uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.dash-card .value { font-size: 2rem; font-weight: 400; color: var(--coral); line-height: 1; margin-bottom: 0.5rem; }
.dash-card .desc  { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

/* Data table */
.dash-panel {
  background: white;
  border: 1px solid rgba(216,90,48,0.08);
  border-radius: 20px;
  overflow: hidden;
}
.dash-panel-head {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(216,90,48,0.1);
  display:flex; justify-content:space-between; align-items:center; gap: 1rem; flex-wrap: wrap;
}
.dash-panel-head h3 { font-size: 1.15rem; font-weight: 400; color: var(--dark); }

.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: collapse; font-size: 0.94rem;
}
table.data th, table.data td { padding: 0.9rem 1.5rem; text-align: start; }
table.data th {
  font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 400;
  background: var(--cream-2);
  border-bottom: 1px solid rgba(216,90,48,0.1);
}
table.data tbody tr { border-bottom: 1px solid rgba(216,90,48,0.06); }
table.data tbody tr:last-child { border-bottom: none; }
table.data tbody tr:hover { background: rgba(254,249,242,0.6); }
table.data td .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end: 6px; vertical-align: middle; }
.status-dot.on  { background: var(--success); }
.status-dot.off { background: var(--danger); }

/* Callout row inside dashboards */
.callout {
  background: linear-gradient(135deg, rgba(216,90,48,0.05), rgba(93,202,165,0.05));
  border: 1px dashed rgba(216,90,48,0.25);
  border-radius: 16px; padding: 1.2rem 1.5rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
  font-size: 0.94rem;
}

/* -- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .brand-mark svg, .hero-mark svg, .auth-mark svg { animation: none !important; }
}

/* ================================================================
   RTL / Arabic language
   ================================================================ */

/* Font stack: Arabic first when in Arabic mode, keep brand-latin
   text (wordmark) using Outfit via inline styles. */
html[lang="ar"] body {
  font-family: 'Noto Sans Arabic', 'Outfit', sans-serif;
}

/* The wordmark "NoLumi" is always Latin - keep Outfit. */
html[lang="ar"] .brand-name,
html[lang="ar"] .hero-wordmark,
html[lang="ar"] .foot-brand .brand-name {
  font-family: 'Outfit', sans-serif;
}

/* Text alignment: use logical props everywhere it matters. */
html[dir="rtl"] table.data th,
html[dir="rtl"] table.data td {
  text-align: end;
}
html[dir="rtl"] .foot-col ul,
html[dir="rtl"] .dash-card .label,
html[dir="rtl"] .dash-card .desc {
  text-align: end;
}
html[dir="rtl"] .form-group label {
  text-align: end;
}
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group textarea,
html[dir="rtl"] .form-group select {
  text-align: end;
}

/* Eyebrow lines - center it in RTL as well (naturally symmetric,
   but story-text version was flex-start). */
html[dir="rtl"] .story-text .eyebrow {
  justify-content: flex-end;
}

/* Flip directional arrows on cat-link */
html[dir="rtl"] .cat-link svg {
  transform: scaleX(-1);
}

/* Nav CTAs and login/register - the nav uses flex row which naturally
   flips in RTL. That's what we want. */

/* Auth-links separator spacing works for both LTR and RTL. */

/* -- Language switcher in nav ----------------------- */
.nav-lang { }
.nav-lang a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: rgba(216, 90, 48, 0.06);
  border: 1px solid rgba(216, 90, 48, 0.15);
  font-size: 0.78rem !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  color: var(--coral) !important;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav-lang a:hover {
  background: rgba(216, 90, 48, 0.12);
  border-color: var(--coral);
}
.nav-lang a::after { display: none !important; }
.nav-lang .lang-globe {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
}
.nav-lang .lang-globe svg { width: 100%; height: 100%; }

@media (max-width: 820px) {
  .nav-lang a {
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.2rem 0;
  }
}

/* Reduce excessive italics for Arabic (looks awkward). Non-Arabic
   pages keep their italic accents. */
html[lang="ar"] .section-title .highlight,
html[lang="ar"] .dash-title em,
html[lang="ar"] .auth-title em,
html[lang="ar"] .story-text h2 em,
html[lang="ar"] .custom h3 em,
html[lang="ar"] .hero-tagline {
  font-style: normal;
  color: var(--coral);
}
html[lang="ar"] .hero-tagline { opacity: 0.85; }

/* Arabic body line-height a touch more open. */
html[lang="ar"] body { line-height: 1.7; }

/* Dashboard title in Arabic - keep title order natural. */
html[dir="rtl"] .dash-header { flex-direction: row-reverse; }
html[dir="rtl"] .dash-panel-head form { flex-direction: row-reverse; }

/* Table action alignment. */
html[dir="rtl"] table.data td .actions { justify-content: flex-start !important; }

/* Auth-links sep character - cosmetic, works either way. */

/* Arabic numerals: keep dashboard values in Latin digits by default
   since that's clearer for reading counts. If Arabic-Indic is desired,
   toggle here with font-feature-settings. */

/* -- 404 page --------------------------------------- */
.e404-code {
  font-size: clamp(4rem, 12vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  margin: 0.6rem 0 1rem;
  font-family: 'Outfit', sans-serif;
}
.page-404 .auth-card { max-width: 520px; }

/* ================================================================
   3D quote estimator
   ================================================================ */
.quote-lede { max-width: 640px; margin: 0.8rem auto 0; color: var(--muted); line-height: 1.7; }

.quote-layout { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start; }
@media (max-width: 980px) { .quote-layout { grid-template-columns: 1fr; } }

.quote-side { position: sticky; top: 90px; }
@media (max-width: 980px) { .quote-side { position: static; } }

/* Material picker */
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.7rem; }
.mat-card {
  position: relative; display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.9rem 1rem; border-radius: 14px; cursor: pointer;
  background: var(--cream); border: 1.5px solid rgba(216,90,48,0.14);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.mat-card:hover { border-color: rgba(216,90,48,0.4); transform: translateY(-2px); }
.mat-card.is-on { border-color: var(--coral); background: white; box-shadow: 0 0 0 3px rgba(216,90,48,0.08); }
.mat-card input { position: absolute; opacity: 0; pointer-events: none; }
.mat-name  { font-size: 0.98rem; font-weight: 400; color: var(--dark); }
.mat-rate  { font-size: 0.78rem; color: var(--coral); letter-spacing: 0.5px; }
.mat-blurb { font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin-top: 0.3rem; }

/* Volume helper */
.vol-helper {
  margin-top: 0.6rem; padding: 0.9rem 1rem; border-radius: 12px;
  background: var(--cream-2); border: 1px dashed rgba(216,90,48,0.25);
}
.vol-helper summary { cursor: pointer; font-size: 0.88rem; color: var(--coral); }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--coral); font-family: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Finishing */
.fin-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fin-row {
  display: flex; align-items: flex-start; gap: 0.8rem;
  padding: 0.85rem 1rem; border-radius: 12px; cursor: pointer;
  background: var(--cream); border: 1.5px solid rgba(216,90,48,0.12);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.fin-row:hover { border-color: rgba(216,90,48,0.35); }
.fin-row:has(input:checked) { border-color: var(--coral); background: white; }
.fin-row input { margin-top: 0.25rem; width: auto; flex-shrink: 0; }
.fin-cost { font-size: 0.9rem; color: var(--coral); white-space: nowrap; flex-shrink: 0; }
.fin-rush { border-style: dashed; }
.fin-rush:has(input:checked) { border-color: var(--gold-d); background: rgba(250,199,117,0.12); }
.fin-rush .fin-cost { color: var(--gold-d); }

/* Breakdown card */
.quote-card {
  background: white; border: 1px solid rgba(216,90,48,0.1);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(26,10,32,0.06);
}
.quote-card-head {
  padding: 1.1rem 1.3rem; border-bottom: 1px solid rgba(216,90,48,0.1);
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
}
.quote-card-head h3 { font-size: 1.1rem; font-weight: 400; color: var(--dark); }
.quote-live {
  font-size: 0.66rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--teal); display: inline-flex; align-items: center; gap: 0.35rem;
}
.quote-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); animation: pulse 2s ease-in-out infinite;
}

.bd { padding: 1.1rem 1.3rem; }
.bd-group { margin-bottom: 1.1rem; }
.bd-group-title {
  font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--coral); margin-bottom: 0.5rem;
}
.bd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.22rem 0; }
.bd-sub  { font-size: 0.84rem; color: var(--muted); }
.bd-main { font-size: 0.95rem; color: var(--dark); font-weight: 400; }
.bd-main span:last-child { color: var(--dark); }
.bd-good span:last-child { color: var(--success); }
.bd-warn span:last-child { color: var(--gold-d); }
.bd-note {
  font-size: 0.75rem; color: var(--muted); line-height: 1.5;
  margin-top: 0.35rem; opacity: 0.85;
}
.bd-rule { border: none; border-top: 1px solid rgba(216,90,48,0.12); margin: 1rem 0; }

.bd-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 2px solid var(--coral);
  font-size: 1.05rem; color: var(--dark);
}
.bd-total strong { font-size: 1.5rem; font-weight: 400; color: var(--coral); }
.bd-perunit {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 0.4rem; font-size: 0.82rem; color: var(--muted);
}

.quote-actions { padding: 0 1.3rem 1.3rem; }
  margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted);
  line-height: 1.6; opacity: 0.85; text-align: center;
}

/* Admin rate editor */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.rate-unit {
  font-size: 0.68rem; color: var(--coral); margin-inline-start: 0.4rem;
  letter-spacing: 0.5px; text-transform: none;
}
.cell-input {
  width: 100%; max-width: 130px; padding: 0.45rem 0.6rem;
  border-radius: 8px; border: 1.5px solid rgba(216,90,48,0.15);
  background: var(--cream); font-family: inherit; font-size: 0.88rem;
}
.cell-input:focus { outline: none; border-color: var(--coral); background: white; }
.switch input { width: auto; }

/* -- Colour picker ---------------------------------- */
.col-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.col-sw {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.75rem 0.45rem 0.5rem;
  border-radius: 999px; cursor: pointer;
  background: var(--cream); border: 1.5px solid rgba(216,90,48,0.14);
  font-family: inherit; font-size: 0.84rem; color: var(--dark);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
html[dir="rtl"] .col-sw { padding: 0.45rem 0.5rem 0.45rem 0.75rem; }
.col-sw:hover:not(:disabled) { border-color: rgba(216,90,48,0.45); transform: translateY(-1px); }
.col-sw.is-on {
  border-color: var(--coral); background: white;
  box-shadow: 0 0 0 3px rgba(216,90,48,0.10);
}
.col-sw.is-oos { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.col-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(26,10,32,0.15);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.10);
}
.col-sw.is-on .col-dot { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.10), 0 0 0 2px white, 0 0 0 3.5px var(--coral); }
.col-name { white-space: nowrap; }
.col-sur { font-size: 0.7rem; color: var(--coral); white-space: nowrap; }
.col-count { font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

/* Admin colour rows */
.col-chip {
  display: inline-block; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid rgba(26,10,32,0.15);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,0.10);
}
.avail-list { display: flex; flex-wrap: wrap; gap: 0.3rem; max-width: 340px; }
.avail-tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: var(--cream-2); border: 1px solid rgba(216,90,48,0.12);
  font-size: 0.72rem; color: var(--muted); cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.avail-tag:has(input:checked) { background: rgba(216,90,48,0.10); border-color: var(--coral); color: var(--coral); }
.avail-tag input { width: auto; margin: 0; }

/* Out-of-stock material cards */
.mat-card.is-oos { opacity: 0.45; cursor: not-allowed; }
.mat-card.is-oos:hover { transform: none; border-color: rgba(216,90,48,0.14); }
.mat-oos {
  display: inline-block; margin-inline-start: 0.4rem;
  padding: 0.08rem 0.4rem; border-radius: 999px;
  background: rgba(216,48,47,0.12); color: var(--danger);
  font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase;
  vertical-align: middle;
}

/* ---- Quote request queue (staff) ---- */
.q-list { display: flex; flex-direction: column; }
.q-item { border-bottom: 1px solid rgba(216,90,48,0.08); }
.q-item:last-child { border-bottom: none; }
.q-item[open] { background: rgba(254,249,242,0.7); }
.q-summary {
  display: grid;
  grid-template-columns: 100px 1.4fr 1.4fr 110px 130px 110px;
  align-items: center; gap: 0.8rem;
  padding: 0.95rem 1.5rem; cursor: pointer;
  font-size: 0.88rem;
}
/* Grid children default to min-width:auto and refuse to shrink - the
   root cause of every wrapped pill and mid-token line break on the
   board. Let them shrink; let text truncate. */
.q-summary > * { min-width: 0; }
.q-summary::-webkit-details-marker { display: none; }
.q-summary:hover { background: rgba(216,90,48,0.03); }
@media (max-width: 900px) {
  .q-summary { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
}
.q-ref { font-size: 0.8rem; letter-spacing: 0.5px; color: var(--coral); }
.q-who { display: flex; flex-direction: column; gap: 0.1rem; color: var(--dark); }
.q-email { font-size: 0.74rem; color: var(--muted); }
.q-spec { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-rush {
  display: inline-block; margin-inline-start: 0.35rem;
  padding: 0.05rem 0.4rem; border-radius: 999px;
  background: rgba(250,199,117,0.3); color: var(--gold-d);
  font-size: 0.62rem; letter-spacing: 0.5px; text-transform: uppercase;
}
.q-total { color: var(--dark); font-weight: 400; }
.q-when { font-size: 0.76rem; color: var(--muted); }

.q-status {
  display: inline-block; padding: 0.25rem 0.6rem; border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap;
}
.q-status--submitted { background: rgba(250,199,117,0.28); color: var(--gold-d); }
.q-status--reviewed  { background: rgba(175,169,236,0.22); color: #5548a1; }
.q-status--accepted  { background: rgba(93,202,165,0.20);  color: #1f6d55; }
.q-status--declined  { background: rgba(216,48,47,0.10);   color: #8a2020; }

.q-body {
  display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem;
  padding: 0.4rem 1.5rem 1.5rem;
}
@media (max-width: 820px) { .q-body { grid-template-columns: 1fr; } }
.q-internal, .q-side {
  background: white; border: 1px solid rgba(216,90,48,0.1);
  border-radius: 14px; padding: 1.1rem 1.2rem;
}
/* The margin line - staff only. Marked so it's obvious it's internal. */
.q-margin {
  background: rgba(216,90,48,0.06);
  margin: 0.3rem -0.5rem; padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border-inline-start: 3px solid var(--coral);
}
.q-margin span:last-child { color: var(--coral); }
.q-margin-note {
  margin-top: 0.8rem; padding-top: 0.7rem;
  border-top: 1px dashed rgba(216,90,48,0.2);
}
.q-spec-list { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; font-size: 0.84rem; }
.q-spec-list dt { color: var(--muted); }
.q-spec-list dd { color: var(--dark); text-align: end; }
.q-notes {
  font-size: 0.85rem; color: var(--muted); line-height: 1.6;
  background: var(--cream); border-radius: 10px; padding: 0.7rem 0.9rem;
}

/* ---- Orders: customer cards ---- */
.ord-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }
.ord-card {
  display: block; background: white;
  border: 1px solid rgba(216,90,48,0.1); border-radius: 18px;
  padding: 1.2rem 1.3rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.ord-card:hover { transform: translateY(-4px); box-shadow: 0 18px 45px rgba(26,10,32,0.08); border-color: rgba(216,90,48,0.28); }
.ord-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.ord-ref { font-size: 0.82rem; letter-spacing: 0.5px; color: var(--coral); }
.ord-spec { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.9rem; }
.ord-bar { height: 5px; border-radius: 999px; background: var(--cream-2); overflow: hidden; margin-bottom: 0.9rem; }
.ord-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), var(--peach)); transition: width .6s var(--ease); }
.ord-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.ord-price { color: var(--dark); font-size: 1rem; }
.ord-est {
  font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-inline-start: 0.3rem; opacity: 0.8;
}
.ord-when { font-size: 0.76rem; color: var(--muted); }
.ord-nudge {
  margin-top: 0.9rem; padding: 0.55rem 0.8rem; border-radius: 10px;
  background: rgba(250,199,117,0.2); color: var(--gold-d);
  font-size: 0.8rem; line-height: 1.4;
}

/* ---- Progress rail ---- */
.ord-rail { display: flex; list-style: none; gap: 0; position: relative; }
.ord-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; position: relative; }
.ord-step::before {
  content: ''; position: absolute; top: 7px; height: 2px;
  background: rgba(216,90,48,0.14);
  inset-inline-start: 50%; width: 100%;
}
.ord-step:last-child::before { display: none; }
.ord-step.is-done::before { background: var(--coral); }
.ord-dot {
  width: 16px; height: 16px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--cream-2); border: 2px solid rgba(216,90,48,0.2);
}
.ord-step.is-done .ord-dot { background: var(--coral); border-color: var(--coral); }
.ord-step.is-now .ord-dot {
  background: white; border-color: var(--coral); border-width: 4px;
  box-shadow: 0 0 0 4px rgba(216,90,48,0.14);
}
.ord-step-label { font-size: 0.72rem; color: var(--muted); text-align: center; line-height: 1.3; }
.ord-step.is-now .ord-step-label { color: var(--coral); }
@media (max-width: 700px) { .ord-step-label { font-size: 0.62rem; } }

/* ---- Order detail ---- */
.ord-detail { display: grid; grid-template-columns: 1fr 340px; gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .ord-detail { grid-template-columns: 1fr; } }

/* ---- Timeline ---- */
.tl { list-style: none; position: relative; }
.tl::before {
  content: ''; position: absolute; top: 6px; bottom: 6px;
  inset-inline-start: 6px; width: 2px; background: rgba(216,90,48,0.12);
}
.tl-item { display: flex; gap: 0.9rem; padding-bottom: 1.2rem; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: white; border: 2px solid var(--coral); position: relative; z-index: 1; margin-top: 2px;
}
.tl-item:first-child .tl-dot { background: var(--coral); box-shadow: 0 0 0 3px rgba(216,90,48,0.14); }
.tl-body { flex: 1; }
.tl-head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.tl-head strong { font-weight: 400; color: var(--dark); font-size: 0.94rem; }
.tl-when { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.tl-note { font-size: 0.86rem; color: var(--muted); line-height: 1.6; margin-top: 0.25rem; }

/* ---- Staff filters ---- */
.ord-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.2rem; }
.ord-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: white; border: 1.5px solid rgba(216,90,48,0.14);
  font-size: 0.82rem; color: var(--muted);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.ord-chip:hover { border-color: var(--coral); color: var(--coral); }
.ord-chip.is-on { background: var(--coral); border-color: var(--coral); color: white; }
.ord-chip-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(216,90,48,0.12); color: var(--coral);
  font-size: 0.68rem; display: inline-flex; align-items: center; justify-content: center;
}
.ord-chip.is-on .ord-chip-n { background: rgba(255,255,255,0.25); color: white; }
.ord-summary { grid-template-columns: 96px minmax(150px, 1.2fr) minmax(110px, 1fr) 90px 118px 72px; }
.q-when { white-space: nowrap; }

/* Order status colours */
.q-status--requested     { background: rgba(250,199,117,0.28); color: var(--gold-d); }
.q-status--quoted        { background: rgba(175,169,236,0.22); color: #5548a1; }
.q-status--approved      { background: rgba(93,202,165,0.20);  color: #1f6d55; }
.q-status--in_production { background: rgba(216,90,48,0.14);   color: var(--coral); }
.q-status--ready         { background: rgba(93,202,165,0.28);  color: #1f6d55; }
.q-status--completed     { background: rgba(26,10,32,0.08);    color: var(--dark); }
.q-status--cancelled     { background: rgba(139,94,74,0.12);   color: var(--muted); }

/* ---- Staff spec correction ---- */
/* superseded by the 'Staff: review and confirm' block below */
.spec-guess { color: var(--gold-d) !important; font-size: 0.7rem !important; }
.spec-confirmed { color: var(--success); margin-inline-start: 0.25rem; font-weight: 700; }
.ord-time { color: var(--muted); font-size: 0.82rem; }
.ord-time.is-real { color: var(--success); }

/* ---- Ready-by banner ---- */
.ord-eta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.3rem; margin-bottom: 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(93,202,165,0.14), rgba(175,169,236,0.12));
  border: 1px solid rgba(93,202,165,0.35);
}
.ord-eta-label {
  font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.ord-eta strong { font-size: 1.1rem; font-weight: 400; color: var(--dark); }

/* ---- Landing card badges ---- */
.cat-card { position: relative; }
.cat-soon, .cat-live {
    
  padding: 0.2rem 0.65rem; border-radius: 999px;
  font-size: 0.62rem; letter-spacing: 1.5px; text-transform: uppercase;
}
.cat-soon { background: rgba(26,10,32,0.06); color: var(--muted); }
.cat-live {
  background: rgba(93,202,165,0.18); color: #1f6d55;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  margin-bottom: 1.1rem;   /* clear space before the icon below */
}
.cat-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); animation: pulse 2s ease-in-out infinite;
}
.cat-card.is-live { border-color: rgba(93,202,165,0.35); }

/* ---- Coming soon pages ---- */
.soon { padding: clamp(2.5rem, 6vw, 4.5rem) 0; flex: 1; }
.soon-card {
  background: white; border: 1px solid rgba(216,90,48,0.1);
  border-radius: 26px; padding: clamp(2rem, 5vw, 3rem);
  box-shadow: 0 30px 80px rgba(26,10,32,0.06);
  text-align: center;
}
.soon-badge {
  display: inline-block; margin-bottom: 1.4rem;
  padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--cream-2); color: var(--muted);
  font-size: 0.68rem; letter-spacing: 3px; text-transform: uppercase;
}
.soon-icon {
  width: 84px; height: 84px; margin: 0 auto 1.3rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.soon-icon svg { width: 42px; height: 42px; }
.soon-cricut .soon-icon { background: rgba(237,147,177,0.16); color: var(--pink); }
.soon-photo  .soon-icon { background: rgba(93,202,165,0.18);  color: var(--teal); }

.soon-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 300; color: var(--dark); line-height: 1.15; }
.soon-title-ar { font-family: 'Noto Sans Arabic', sans-serif; font-size: 1.05rem; color: var(--muted); margin-top: 0.2rem; }
.soon-lede {
  max-width: 520px; margin: 1.2rem auto 0;
  color: var(--muted); line-height: 1.75; font-size: 1rem;
}
.soon-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 1.5rem; }
.soon-chip {
  padding: 0.35rem 0.85rem; border-radius: 999px;
  background: var(--cream-2); color: var(--muted); font-size: 0.8rem;
}
.soon-rule { border: none; border-top: 1px solid rgba(216,90,48,0.12); margin: 2rem 0 1.8rem; }

.soon-ask { font-size: 1.3rem; font-weight: 400; color: var(--dark); }
.soon-ask-sub { color: var(--muted); font-size: 0.94rem; margin: 0.4rem 0 1.4rem; }
.soon-form { max-width: 400px; margin: 0 auto; text-align: start; }
.soon-count { margin-top: 1rem; font-size: 0.84rem; color: var(--muted); }

.soon-done { padding: 0.5rem 0; }
.soon-check {
  width: 54px; height: 54px; margin: 0 auto 1rem;
  border-radius: 50%; background: rgba(93,202,165,0.18); color: #1f6d55;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.soon-done h2 { font-size: 1.4rem; font-weight: 400; color: var(--dark); }
.soon-done p { color: var(--muted); margin: 0.4rem 0 1.4rem; }

/* Live-service strip on the coming-soon pages */
.soon-live {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: 1.5rem 1.8rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(216,90,48,0.06), rgba(250,199,117,0.10));
  border: 1px solid rgba(216,90,48,0.16);
}
.soon-live-eyebrow {
  font-size: 0.64rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal); display: inline-flex; align-items: center; gap: 0.4rem;
}
.soon-live-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); animation: pulse 2s ease-in-out infinite;
}
.soon-live h3 { font-size: 1.25rem; font-weight: 400; color: var(--dark); margin-top: 0.35rem; }
.soon-live p { font-size: 0.9rem; color: var(--muted); margin-top: 0.2rem; }

/* ================================================================
   Nav fixes - stop labels wrapping, collapse to burger sooner
   ================================================================ */

/* Nothing in the nav should ever break mid-label. */
.nav-links a,
.nav-cta,
.nav-lang a { white-space: nowrap; }


/* Slightly tighter type so seven items fit without shouting. */
.nav-links a { font-size: 0.82rem; letter-spacing: 1.2px; }

/* The globe pill: drop the word on narrower desktops, keep the icon. */
@media (max-width: 1180px) {
  .nav-lang .lang-label { display: none; }
  .nav-lang a { padding: 0.45rem 0.55rem; }
}

/* Collapse to the burger earlier - the old 820px was far too late once
   the signed-in links appear. */
@media (max-width: 1040px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); padding: 1rem 1.4rem 1.4rem;
    border-bottom: 1px solid rgba(216,90,48,0.08);
    box-shadow: 0 20px 40px rgba(26,10,32,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 0.85rem 0; border-bottom: 1px solid rgba(216,90,48,0.06); }
  .nav-links li:last-child { border-bottom: none; padding-top: 1rem; }
  .nav-links a { font-size: 0.9rem; }
  .burger { display: block; }

  /* In the drawer the label is useful again. */
  .nav-lang .lang-label { display: inline; }
  .nav-lang a {
    justify-content: flex-start; gap: 0.5rem;
    background: transparent; border: none; padding: 0.2rem 0;
  }
  .nav-cta { display: inline-flex; }
}

/* ---- Promo codes ---- */
/* One input, two states. There is no second element that can appear by
   accident - the field itself is the confirmation. */
.promo-box { padding: 0 1.3rem 0.9rem; }
.promo-row { display: flex; gap: 0.5rem; align-items: stretch; }

.promo-row input {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.8rem; border-radius: 10px;
  border: 1.5px dashed rgba(216,90,48,0.3);
  background: var(--cream); font-family: inherit; font-size: 0.88rem;
  letter-spacing: 1px; text-transform: uppercase; text-align: start;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.promo-row input::placeholder { letter-spacing: 0; text-transform: none; }
.promo-row input:focus { outline: none; border-style: solid; border-color: var(--coral); background: white; }

/* Accepted */
.promo-row input.is-on {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(93,202,165,0.12);
  color: #1f6d55;
  cursor: default;
}
/* Rejected */
.promo-row input.is-bad {
  border-style: solid;
  border-color: var(--danger);
  background: rgba(216,48,47,0.05);
}

.promo-row .btn { flex-shrink: 0; white-space: nowrap; }
.promo-row .btn.is-remove {
  border-color: rgba(216,48,47,0.35);
  color: var(--danger);
}
.promo-row .btn:disabled { opacity: 0.5; cursor: wait; }

.promo-msg { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.5; }
.promo-msg.is-good { color: #1f6d55; }
.promo-msg.is-bad  { color: var(--danger); }

/* Admin state pills */
.promo-st { margin-inline-start: 0.4rem; }
.promo-st--live      { background: rgba(93,202,165,0.20);  color: #1f6d55; }
.promo-st--off       { background: rgba(26,10,32,0.08);    color: var(--muted); }
.promo-st--expired   { background: rgba(216,48,47,0.10);   color: #8a2020; }
.promo-st--scheduled { background: rgba(175,169,236,0.22); color: #5548a1; }
.promo-st--used_up   { background: rgba(250,199,117,0.28); color: var(--gold-d); }

/* ================================================================
   [hidden] must actually hide.
   The attribute only carries `display:none` from the UA stylesheet, which
   loses to any class that sets a display value (.bd-row, .promo-applied,
   .bd-perunit all set display:flex). Without this, hiding via JS silently
   does nothing.
   ================================================================ */
[hidden] { display: none !important; }

/* Promo: rejected code marks the field, not just a line of text below it */
.promo-row input.is-bad {
  border-style: solid;
  border-color: var(--danger);
  background: rgba(216,48,47,0.04);
}

/* Guest note under the sign-up CTA - one line, not a paragraph */
.quote-signin-note {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.quote-signin-note a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* The CTA can wrap to two lines on narrow columns without looking broken */
.btn-full {
  text-align: center;
  line-height: 1.35;
  white-space: normal;
}


/* ================================================================
   Wordmark: always left-to-right, in every language.
   "NoLumi" is a fixed Latin logotype, not translatable text. The nav and
   footer versions are flex containers, and flex items REVERSE under
   direction:rtl - which rendered the mark as "umiLoN" in Arabic.
   Forcing direction here (plus dir="ltr" in the markup) pins the letter
   order regardless of page direction.
   ================================================================ */
.wordmark {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Outfit', sans-serif;   /* never the Arabic face */
}

/* The lockup itself is left to mirror naturally: under direction:rtl the flower
   sits on the right, so it still leads when read right-to-left. That is correct
   and deliberate - only the letters inside the wordmark are pinned. */

/* Promo field: codes are Latin, so type LTR even on an RTL page. */
.promo-row input { text-align: start; }
html[dir="rtl"] .promo-row input::placeholder { text-align: end; }

/* ---- Staff: who is the order for ---- */
.who-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.who-tab {
  flex: 1; min-width: 130px; cursor: pointer;
  padding: 0.65rem 0.9rem; border-radius: 12px; text-align: center;
  background: var(--cream); border: 1.5px solid rgba(216,90,48,0.14);
  font-size: 0.86rem; color: var(--muted);
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.who-tab:hover { border-color: rgba(216,90,48,0.4); }
.who-tab.is-on { border-color: var(--coral); background: white; color: var(--coral); }
.who-tab input { position: absolute; opacity: 0; pointer-events: none; }

#user_id { width: 100%; padding: 0.4rem; border-radius: 10px;
           border: 1.5px solid rgba(216,90,48,0.15); background: var(--cream);
           font-family: inherit; font-size: 0.88rem; }
#user_id option { padding: 0.4rem 0.5rem; border-radius: 6px; }

/* Order-queue badges for orders without a linked account */
.q-unclaimed {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: rgba(250,199,117,0.3); color: var(--gold-d);
  font-size: 0.7rem; letter-spacing: 0.5px;
  white-space: nowrap;
}
.q-noacct {
  display: inline-block; margin-inline-start: 0.35rem;
  padding: 0.05rem 0.4rem; border-radius: 999px;
  background: rgba(26,10,32,0.07); color: var(--muted);
  font-size: 0.6rem; letter-spacing: 0.5px; text-transform: uppercase;
}
.q-bystaff {
  display: inline-block; margin-top: 0.15rem;
  font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--lav);
  white-space: nowrap;
}

/* ---- Notes: the whole note must be visible while it is being typed ---- */
.note-box {
  width: 100%;
  min-height: 2.6rem;
  max-height: 220px;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1.5px solid rgba(216,90,48,0.15);
  background: var(--cream);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;          /* scroll only once it hits max-height */
  word-break: break-word;    /* a long unbroken string wraps instead of overflowing */
  overflow-wrap: anywhere;
}
.note-box:focus {
  outline: none;
  border-color: var(--coral);
  background: white;
}

/* ---- Implausible print-time warning ---- */
.rate-warn {
  margin-top: 0.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(250,199,117,0.22);
  border-inline-start: 3px solid var(--gold-d);
  color: #8a6420;
  font-size: 0.78rem;
  line-height: 1.5;
}
.tput-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  margin-inline-start: 0.3rem;
  background: var(--gold-d); color: white;
  font-size: 0.62rem; font-weight: 700;
  cursor: help; vertical-align: middle;
}

/* Marks the internal breakdown as the repriced one, not the original estimate */
.bd-revised {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(93,202,165,0.20);
  color: #1f6d55;
  font-size: 0.58rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---- Security self-audit ---- */
.sec-row { display: flex; gap: 0.9rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(216,90,48,0.07); }
.sec-row:last-child { border-bottom: none; }
.sec-dot {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; margin-top: 0.1rem;
}
.sec-dot.is-ok  { background: rgba(93,202,165,0.22); color: #1f6d55; }
.sec-dot.is-bad { background: rgba(216,48,47,0.14);  color: var(--danger); }
.sec-body { flex: 1; min-width: 0; }
.sec-name { font-size: 0.92rem; color: var(--dark); }
.sec-desc { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.55; }
.sec-fix {
  margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 8px;
  background: rgba(250,199,117,0.2); border-inline-start: 3px solid var(--gold-d);
  font-size: 0.78rem; color: #8a6420; line-height: 1.5;
}
.sec-note {
  margin-top: 0.35rem; font-family: ui-monospace, monospace;
  font-size: 0.7rem; color: var(--muted); word-break: break-all; opacity: 0.75;
}
.sec-pill {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.64rem; letter-spacing: 1px; text-transform: uppercase;
}
.sec-pill--ok   { background: rgba(93,202,165,0.2);  color: #1f6d55; }
.sec-pill--bad  { background: var(--danger);         color: white; }
.sec-pill--warn { background: rgba(250,199,117,0.3); color: var(--gold-d); }

/* ---- Mail diagnosis ---- */
.diag {
  margin-bottom: 1.3rem; padding: 1.1rem 1.2rem;
  border-radius: 14px; background: var(--cream);
  border: 1px solid rgba(216,90,48,0.14);
}
.diag-head {
  font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--coral); margin-bottom: 0.9rem;
}
.diag-block { margin-bottom: 1.1rem; }
.diag-block:last-child { margin-bottom: 0; }
.diag-label { font-size: 0.84rem; color: var(--dark); margin-bottom: 0.55rem; }
.diag-row {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.3rem 0; font-size: 0.84rem; color: var(--muted);
}
.diag-row .sec-dot { width: 18px; height: 18px; font-size: 0.6rem; margin: 0; }
.diag-err {
  font-size: 0.74rem; color: var(--danger);
  font-family: ui-monospace, monospace; word-break: break-word;
}
.diag-good {
  margin-top: 0.6rem; padding: 0.7rem 0.85rem; border-radius: 10px;
  background: rgba(93,202,165,0.15); border-inline-start: 3px solid var(--teal);
  font-size: 0.82rem; color: #1f6d55; line-height: 1.55;
}
.diag-bad {
  margin-top: 0.6rem; padding: 0.7rem 0.85rem; border-radius: 10px;
  background: rgba(250,199,117,0.22); border-inline-start: 3px solid var(--gold-d);
  font-size: 0.82rem; color: #8a6420; line-height: 1.55;
}
.diag-env {
  margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 8px;
  background: rgba(255,255,255,0.7);
  font-family: ui-monospace, monospace; font-size: 0.76rem; color: var(--dark);
  line-height: 1.7;
}
.diag-list { margin: 0; padding-inline-start: 1.2rem; }
.diag-list li {
  font-size: 0.82rem; color: var(--muted); line-height: 1.6;
  margin-bottom: 0.55rem;
}
.diag-list li:last-child { margin-bottom: 0; }

/* ---- One-time temporary password reveal ---- */
.temp-pw {
  margin-bottom: 1.6rem; padding: 1.3rem 1.5rem;
  border-radius: 16px; background: white;
  border: 2px solid var(--gold-d);
  box-shadow: 0 10px 30px rgba(200,146,64,0.12);
}
.temp-pw-head {
  font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-d);
}
.temp-pw-sub { margin-top: 0.4rem; font-size: 0.86rem; color: var(--muted); }
.temp-pw-box {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0.9rem 0 0.8rem; padding: 0.8rem 1rem;
  border-radius: 12px; background: var(--cream-2);
}
.temp-pw-box code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, monospace; font-size: 1.05rem;
  letter-spacing: 1px; color: var(--dark); word-break: break-all;
}
.temp-pw-warn {
  font-size: 0.8rem; line-height: 1.6; color: #8a6420;
  padding: 0.6rem 0.8rem; border-radius: 8px;
  background: rgba(250,199,117,0.2);
  border-inline-start: 3px solid var(--gold-d);
}

/* ================================================================
   Brand assets (staff + admin)
   ================================================================ */
.brand-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; padding: 1.4rem 1.5rem;
}
.brand-asset {
  border: 1px solid rgba(216,90,48,0.12); border-radius: 14px; overflow: hidden;
  background: white;
}
.brand-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 130px; padding: 1.4rem;
}
.brand-preview img { max-width: 100%; max-height: 90px; }
.brand-preview svg { max-width: 100%; max-height: 90px; width: auto; height: 90px; }
.brand-preview--light { background: var(--cream); }
.brand-preview--dark  { background: var(--dark); color: var(--cream); }
.brand-asset-body { padding: 0.9rem 1rem 1.1rem; border-top: 1px solid rgba(216,90,48,0.08); }
.brand-asset-name { font-size: 0.92rem; color: var(--dark); }
.brand-asset-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin-top: 0.25rem; }

/* Do / Don't */
.brand-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; padding: 1.4rem 1.5rem 0;
}
.brand-rule { padding: 1.1rem 1.2rem; border-radius: 14px; }
.brand-rule--do   { background: rgba(93,202,165,0.10); border: 1px solid rgba(93,202,165,0.3); }
.brand-rule--dont { background: rgba(216,48,47,0.05);  border: 1px solid rgba(216,48,47,0.22); }
.brand-rule-tag {
  display: inline-block; margin-bottom: 0.7rem;
  padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.64rem; letter-spacing: 1.5px; text-transform: uppercase;
}
.brand-rule--do   .brand-rule-tag { background: var(--teal);   color: white; }
.brand-rule--dont .brand-rule-tag { background: var(--danger); color: white; }
.brand-rule ul { margin: 0; padding-inline-start: 1.1rem; }
.brand-rule li { font-size: 0.83rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.5rem; }
.brand-rule li:last-child { margin-bottom: 0; }

/* The RTL demonstration */
.brand-rtl { margin: 1.4rem 1.5rem; padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--cream-2); }
.brand-rtl-title { font-size: 0.9rem; color: var(--dark); }
.brand-rtl-sub { font-size: 0.8rem; color: var(--muted); line-height: 1.6; margin: 0.35rem 0 1rem; }
.brand-rtl-pair { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.brand-rtl-cell {
  flex: 1; min-width: 170px;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1rem; border-radius: 12px; background: white;
}
.brand-rtl-cell.is-right { border: 1.5px solid var(--teal); }
.brand-rtl-cell.is-wrong { border: 1.5px solid var(--danger); opacity: 0.85; }
.brand-rtl-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: white;
}
.is-right .brand-rtl-mark { background: var(--teal); }
.is-wrong .brand-rtl-mark { background: var(--danger); }

/* Colour swatches */
.swatch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.7rem; padding: 1.4rem 1.5rem;
}
.swatch {
  display: flex; align-items: flex-start; gap: 0.8rem; text-align: start;
  padding: 0.7rem; border-radius: 12px; cursor: pointer;
  background: var(--cream); border: 1.5px solid transparent;
  font-family: inherit; transition: border-color .16s var(--ease), background .16s var(--ease);
  position: relative;
}
.swatch:hover { border-color: rgba(216,90,48,0.3); background: white; }
.swatch.is-copied { border-color: var(--teal); background: rgba(93,202,165,0.1); }
.swatch.is-copied::after {
  content: 'Copied'; position: absolute; top: 0.5rem; inset-inline-end: 0.6rem;
  font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase; color: #1f6d55;
}
.swatch-chip {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid rgba(26,10,32,0.08);
}
.swatch-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.swatch-name { font-size: 0.86rem; color: var(--dark); }
.swatch-hex  { font-family: ui-monospace, monospace; font-size: 0.74rem; color: var(--muted); }
.swatch-use  { font-size: 0.7rem; color: var(--muted); line-height: 1.45; opacity: 0.85; margin-top: 0.15rem; }

/* Type */
.type-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; padding: 1.4rem 1.5rem;
}
.type-card { padding: 1.2rem 1.3rem; border-radius: 14px; background: var(--cream); }
.type-label {
  font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.type-name { font-size: 2rem; font-weight: 300; color: var(--dark); margin: 0.3rem 0 0.9rem; }
.type-spec div { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
.type-link { display: inline-block; margin-top: 0.7rem; font-size: 0.78rem; color: var(--coral); }

/* Voice */
.brand-tagline {
  padding: 1.4rem; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, rgba(216,90,48,0.06), rgba(250,199,117,0.12));
  margin-bottom: 1.2rem;
}
.brand-tagline-en { font-size: 1.4rem; font-weight: 300; color: var(--coral); font-style: italic; }
.brand-tagline-ar { font-size: 1.1rem; color: var(--muted); margin-top: 0.3rem; }
.brand-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.7rem; }
.brand-fact {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--cream);
}
.brand-fact-k { font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.brand-fact-v { font-size: 0.95rem; color: var(--dark); }
.brand-voice-note {
  margin-top: 1.2rem; padding: 0.9rem 1.1rem; border-radius: 12px;
  background: var(--cream-2); border-inline-start: 3px solid var(--coral);
  font-size: 0.84rem; color: var(--muted); line-height: 1.7;
}

/* ================================================================
   Staff reprice grid - keep the inputs on one line
   The labels are not all the same length: "Print time (hours)" wraps to two
   lines in a narrow column while "Weight (g)" does not, which drops one input
   below the other. Give every label the same height so the fields line up
   whatever the label does.
   ================================================================ */
/* ================================================================
   Staff: review and confirm
   Equal columns, equal field heights, and labels that never wrap - the units
   sit in their own span so "Print time" cannot break onto a second line and
   drop its input out of alignment with the one beside it.
   ================================================================ */
.spec-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.8rem;
  align-items: start;
}
.spec-edit .form-group { margin: 0; min-width: 0; }

.spec-edit label {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  white-space: nowrap;
  margin-bottom: 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--coral);
}
.spec-edit label .unit {
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--muted);
  opacity: 0.8;
}
.spec-edit input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  border-radius: 10px;
  border: 1.5px solid rgba(216,90,48,0.15);
  background: var(--cream);
  font-family: inherit;
}
.spec-edit input:focus {
  outline: none;
  border-color: var(--coral);
  background: white;
}
/* The date field's native picker otherwise makes it taller than the rest. */
.spec-edit input[type="date"] { -webkit-appearance: none; appearance: none; }

.spec-guess { margin-top: 0.5rem; }

/* ---- Promo row ---- */
.spec-promo { margin: 0.9rem 0 0.6rem; }
.spec-promo > label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--coral);
}
.spec-promo-row { display: flex; gap: 0.5rem; align-items: stretch; }
.promo-staff {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 42px;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1.5px dashed rgba(216,90,48,0.3);
  background: var(--cream);
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.promo-staff::placeholder { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.promo-staff:focus { outline: none; border-style: solid; border-color: var(--coral); background: white; }
.promo-staff.is-on {
  border-style: solid;
  border-color: var(--teal);
  background: rgba(93,202,165,0.12);
  color: #1f6d55;
}
.promo-staff.is-ok  { border-style: solid; border-color: var(--teal); }
.promo-staff.is-bad { border-style: solid; border-color: var(--danger); background: rgba(216,48,47,0.05); }

.promo-btn { flex-shrink: 0; white-space: nowrap; min-width: 74px; }
.promo-btn.is-clear { border-color: rgba(216,48,47,0.35); color: var(--danger); }
.promo-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.promo-note {
  display: none;
  margin-top: 0.45rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
}
.promo-note.is-good { background: rgba(93,202,165,0.12); color: #1f6d55; }
.promo-note.is-bad  { background: rgba(216,48,47,0.07);  color: var(--danger); }
.promo-note.is-warn { background: rgba(250,199,117,0.22); color: #8a6420; }

/* Database check: missing column chips */
.db-cols { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.db-col {
  padding: 0.18rem 0.5rem; border-radius: 6px;
  background: rgba(216,48,47,0.1); color: var(--danger);
  font-family: ui-monospace, monospace; font-size: 0.72rem;
}

/* ---- Debug mode banner ----
   Impossible to miss on purpose. Debug mode prints table names, file paths and
   line numbers to the screen; the danger is not turning it on, it is leaving
   it on without noticing. */
.debug-bar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: #1a0a20; color: #FAC775;
  font-size: 0.78rem; letter-spacing: 0.3px;
}
.debug-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #FAC775; animation: pulse 1.6s ease-in-out infinite;
}
.debug-bar code {
  padding: 0.1rem 0.4rem; border-radius: 5px;
  background: rgba(250,199,117,0.15);
  font-family: ui-monospace, monospace; font-size: 0.72rem;
}
.debug-warn { color: rgba(254,249,242,0.65); font-size: 0.74rem; }

/* ==========================================================================
   High quality printing
   ASCII ONLY. A non-ASCII byte here has broken the whole stylesheet before.
   ========================================================================== */

.q-block-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: -0.2rem 0 0.7rem;
  line-height: 1.5;
}

/* --- Paper --- */
.paper-list { display: grid; gap: 0.5rem; }

.paper-opt {
  display: block;
  position: relative;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.paper-opt:hover { border-color: var(--peach); }
.paper-opt input { position: absolute; opacity: 0; pointer-events: none; }
.paper-opt.is-on {
  border-color: var(--coral);
  background: rgba(216, 90, 48, 0.05);
  box-shadow: inset 0 0 0 1px var(--coral);
}
.paper-body { display: block; }
.paper-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.paper-name { font-weight: 600; font-size: 0.94rem; color: var(--dark); }
.paper-gsm {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-d);
  background: rgba(250, 199, 117, 0.22);
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  white-space: nowrap;
}
.paper-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.79rem;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Size --- */
.size-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}
.size-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.size-opt:hover { border-color: var(--peach); }
.size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.size-opt.is-on {
  border-color: var(--teal);
  background: rgba(93, 202, 165, 0.08);
  box-shadow: inset 0 0 0 1px var(--teal);
}
.size-name { font-weight: 600; font-size: 0.88rem; color: var(--dark); }
.size-mm { font-size: 0.72rem; color: var(--muted); }

/* --- Segmented (colour / sides) --- */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
}
.seg-opt {
  position: relative;
  text-align: center;
  padding: 0.62rem 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt:hover { background: rgba(240, 153, 123, 0.1); }
.seg-opt.is-on { background: var(--coral); color: #fff; }

/* --- Ink density --- */
.dens-list { display: grid; gap: 0.5rem; }
.dens-opt {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.75rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dens-opt:hover { border-color: var(--peach); }
.dens-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dens-opt.is-on {
  border-color: var(--lav);
  background: rgba(175, 169, 236, 0.08);
  box-shadow: inset 0 0 0 1px var(--lav);
}
.dens-bar {
  grid-row: 1 / 3;
  height: 8px;
  border-radius: 999px;
  background: rgba(139, 94, 74, 0.14);
  overflow: hidden;
}
.dens-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--coral));
}
.dens-name { font-weight: 600; font-size: 0.9rem; color: var(--dark); }
.dens-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }

/* --- Finishing --- */
.fin-list { display: grid; gap: 0.45rem; }
.fin-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.fin-opt:hover { border-color: var(--peach); }
.fin-opt input { position: absolute; opacity: 0; pointer-events: none; }
.fin-opt.is-on {
  border-color: var(--pink);
  background: rgba(237, 147, 177, 0.07);
  box-shadow: inset 0 0 0 1px var(--pink);
}
.fin-body { display: flex; flex-direction: column; gap: 0.1rem; }
.fin-name { font-weight: 600; font-size: 0.88rem; color: var(--dark); }
.fin-desc { font-size: 0.76rem; color: var(--muted); line-height: 1.45; }
.fin-unit {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(139, 94, 74, 0.09);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* --- Quantity --- */
.qty-input {
  width: 100%;
  max-width: 160px;
  height: 44px;
  padding: 0 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid rgba(139, 94, 74, 0.2);
  border-radius: 10px;
}
.qty-input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.12);
}

.q-per {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

/* --- Staff / admin controls --- */
.sel-full {
  width: 100%;
  height: 42px;
  padding: 0 0.7rem;
  font-size: 0.88rem;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid rgba(139, 94, 74, 0.2);
  border-radius: 8px;
}
.spec-guess {
  color: var(--gold-d);
  font-weight: 500;
}
.cell-in {
  width: 88px;
  height: 34px;
  padding: 0 0.5rem;
  font-size: 0.84rem;
  text-align: end;
  color: var(--dark);
  background: var(--cream);
  border: 1px solid rgba(139, 94, 74, 0.2);
  border-radius: 7px;
}
.cell-in:focus {
  outline: none;
  border-color: var(--coral);
}
.unit-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(139, 94, 74, 0.09);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chk { display: inline-flex; align-items: center; }
.chk input { width: 17px; height: 17px; accent-color: var(--coral); cursor: pointer; }

/* --- Service landing page --- */
.svc { padding: 3rem 0 5rem; }

.svc-hero { max-width: 640px; margin: 0 auto 3.5rem; text-align: center; }
.svc-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-d);
  margin-bottom: 0.9rem;
}
.svc-title {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dark);
  margin: 0 0 0.9rem;
}
.svc-title em { font-style: normal; color: var(--coral); }
.svc-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1.7rem;
}

.svc-sec { margin-bottom: 3.5rem; }
.svc-h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 0.6rem;
}
.svc-p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1.4rem;
  max-width: 60ch;
}

.svc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.8rem;
}
.svc-card {
  padding: 1rem 1.1rem;
  background: var(--cream);
  border: 1px solid rgba(139, 94, 74, 0.14);
  border-radius: 14px;
  border-top: 3px solid var(--peach);
}
.svc-card--glossy   { border-top-color: var(--teal); }
.svc-card--matte    { border-top-color: var(--muted); }
.svc-card--satin    { border-top-color: var(--lav); }
.svc-card--fine_art { border-top-color: var(--gold-d); }
.svc-card--canvas   { border-top-color: var(--pink); }
.svc-card--plain    { border-top-color: rgba(139, 94, 74, 0.3); }

.svc-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.svc-card-name { font-weight: 700; font-size: 0.95rem; color: var(--dark); }
.svc-card-gsm {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold-d);
  white-space: nowrap;
}
.svc-card-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.size-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.85rem;
  background: var(--cream-2);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}
.size-chip strong { color: var(--dark); font-size: 0.86rem; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}
.how-item strong {
  display: block;
  font-size: 0.98rem;
  color: var(--dark);
  margin: 0.4rem 0 0.3rem;
}
.how-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}
.how-n {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--coral);
}

.svc-cta { text-align: center; padding-top: 1rem; }
.svc-cta-note {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 640px) {
  .dens-opt { grid-template-columns: 44px 1fr; }
  .size-list { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
}

/* --- Printing: media groups, capabilities, derived rates. ASCII ONLY. --- */

.media-head {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-d);
}

.machine-card {
  margin-bottom: 1.2rem;
  padding: 1.1rem 1.3rem;
  background: var(--cream-2);
  border: 1px solid rgba(139, 94, 74, 0.16);
  border-radius: 14px;
  border-inline-start: 3px solid var(--teal);
}
.machine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.machine-name {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--dark);
  letter-spacing: 0.01em;
}
.machine-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(93, 202, 165, 0.14);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}
.machine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.machine-item { display: flex; flex-direction: column; gap: 0.15rem; }
.machine-label {
  font-size: 0.75rem;
  color: var(--muted);
}
.machine-item strong {
  font-size: 1.15rem;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.machine-calc {
  font-size: 0.72rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.85;
}
.machine-note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
}

.can-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.3rem;
  margin-bottom: 1.5rem;
}
.can-item strong {
  display: block;
  font-size: 0.98rem;
  color: var(--dark);
  margin-bottom: 0.3rem;
}
.can-item strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 0.5rem;
  border-radius: 999px;
  background: var(--teal);
  vertical-align: middle;
}
.can-item p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

.svc-honest {
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted);
  background: rgba(250, 199, 117, 0.12);
  border-inline-start: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
}

.callout--good {
  background: rgba(93, 202, 165, 0.10);
  border-inline-start: 3px solid var(--teal);
  color: var(--muted);
}

/* --- Photo quote: three questions, everything else folded. ASCII ONLY. --- */

.q-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
}
.q-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--coral);
  border-radius: 999px;
}

/* 1. The job */
.job-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}
.job-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.job-opt:hover { border-color: var(--peach); }
.job-opt input { position: absolute; opacity: 0; pointer-events: none; }
.job-opt.is-on {
  border-color: var(--coral);
  background: rgba(216, 90, 48, 0.06);
  box-shadow: inset 0 0 0 1px var(--coral);
}
.job-name { font-weight: 600; font-size: 0.92rem; color: var(--dark); }
.job-desc { font-size: 0.76rem; line-height: 1.45; color: var(--muted); }

/* 3. Size sits beside quantity */
.size-qty {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}
.qty-wrap { display: flex; flex-direction: column; gap: 0.35rem; }
.qty-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.qty-wrap .qty-input { width: 110px; max-width: 110px; }

/* Everything else */
.q-more {
  margin-top: 0.4rem;
  border: 1px solid rgba(139, 94, 74, 0.16);
  border-radius: 12px;
  background: var(--cream-2);
  overflow: hidden;
}
.q-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark);
  list-style: none;
  user-select: none;
}
.q-more-head::-webkit-details-marker { display: none; }
.q-more-head::after {
  content: "+";
  margin-inline-start: auto;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--coral);
  line-height: 1;
}
.q-more[open] .q-more-head::after { content: "-"; }
.q-more-head:hover { background: rgba(240, 153, 123, 0.08); }
.q-more-hint {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--muted);
}
.q-more-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.4rem 1rem 1.1rem;
  border-top: 1px solid rgba(139, 94, 74, 0.12);
}

@media (max-width: 640px) {
  .size-qty { grid-template-columns: 1fr; }
  .qty-wrap .qty-input { width: 100%; max-width: 160px; }
  .job-list { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* --- Admin: paper stock editor. ASCII ONLY. --- */

.stock-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1.5rem; }

.stock-item {
  border: 1px solid rgba(139, 94, 74, 0.16);
  border-radius: 12px;
  background: var(--cream);
  overflow: hidden;
}
.stock-item.is-off { opacity: 0.62; }

.stock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.stock-head::-webkit-details-marker { display: none; }
.stock-head:hover { background: rgba(240, 153, 123, 0.07); }
.stock-name { font-weight: 600; font-size: 0.92rem; color: var(--dark); }
.stock-gsm {
  margin-inline-start: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-d);
}
.stock-meta { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.unit-pill--off  { background: rgba(216, 48, 47, 0.12);  color: var(--danger); }
.unit-pill--used { background: rgba(93, 202, 165, 0.16); color: #2E7D63; }

.stock-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.9rem 1rem 1rem;
  border-top: 1px solid rgba(139, 94, 74, 0.12);
}
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem;
}
.stock-form .form-group { margin: 0; }
.stock-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
.stock-form input[type="text"],
.stock-form input[type="number"],
.stock-form select {
  width: 100%;
  height: 38px;
  padding: 0 0.6rem;
  font-size: 0.86rem;
  color: var(--dark);
  background: #fff;
  border: 1px solid rgba(139, 94, 74, 0.2);
  border-radius: 8px;
}
.stock-form input:focus, .stock-form select:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.1);
}

.size-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.size-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.32rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  background: var(--cream-2);
  border: 1px solid rgba(139, 94, 74, 0.16);
  border-radius: 999px;
  cursor: pointer;
}
.size-pick:hover { border-color: var(--peach); }
.size-pick input { width: 14px; height: 14px; accent-color: var(--coral); cursor: pointer; }
.size-pick span { white-space: nowrap; }

.stock-foot {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(139, 94, 74, 0.1);
}
.chk-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.chk-inline input { width: 16px; height: 16px; accent-color: var(--coral); }
.chk-inline span { margin: 0; }
.stock-actions { margin-inline-start: auto; }

.stock-del {
  padding: 0 1rem 0.9rem;
  text-align: end;
}
.stock-del .form-help { margin: 0; text-align: end; }

.stock-add {
  margin: 0.9rem 1.5rem 1.5rem;
  border: 1px dashed rgba(139, 94, 74, 0.3);
  border-radius: 12px;
  background: var(--cream-2);
  overflow: hidden;
}
.stock-add-head {
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--coral);
  list-style: none;
  user-select: none;
}
.stock-add-head::-webkit-details-marker { display: none; }
.stock-add-head:hover { background: rgba(216, 90, 48, 0.05); }

/* --- Admin tabs. ASCII ONLY. --- */

.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 1.4rem 0 1.6rem;
  padding: 0.3rem;
  background: var(--cream-2);
  border: 1px solid rgba(139, 94, 74, 0.14);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 1 auto;
  padding: 0.6rem 1rem;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { background: rgba(240, 153, 123, 0.12); color: var(--dark); }
.tab.is-on {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 1px 3px rgba(216, 90, 48, 0.28);
}
.tab.is-on:hover { background: var(--coral); color: #fff; }

.tab-pane[hidden] { display: none; }
.tab-pane { animation: tabIn 0.16s ease-out; }

@keyframes tabIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-pane { animation: none; }
}

/* --- Handmade: size inputs, detail picker, weeding row. ASCII ONLY. --- */

.dim-row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.dim-field { display: flex; flex-direction: column; gap: 0.3rem; }
.dim-field label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
.dim-field input {
  width: 108px;
  height: 42px;
  padding: 0 0.7rem;
  font-size: 0.95rem;
  color: var(--dark);
  background: #fff;
  border: 1px solid rgba(139, 94, 74, 0.2);
  border-radius: 9px;
}
.dim-field input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.1);
}
.dim-x {
  padding-bottom: 0.7rem;
  font-size: 1rem;
  color: var(--muted);
}

.q-why {
  margin: -0.3rem 0 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}
.detail-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.detail-opt:hover { border-color: var(--peach); }
.detail-opt input { position: absolute; opacity: 0; pointer-events: none; }
.detail-opt.is-on {
  border-color: var(--coral);
  background: rgba(216, 90, 48, 0.06);
  box-shadow: inset 0 0 0 1px var(--coral);
}
.detail-name { font-weight: 600; font-size: 0.9rem; color: var(--dark); }
.detail-desc { font-size: 0.76rem; line-height: 1.45; color: var(--muted); }

/* The weeding row is the point. Make staff see it. */
.bd-row.bd-weed {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-weight: 600;
  color: var(--dark);
  background: rgba(175, 169, 236, 0.10);
  border-radius: 6px;
}
.bd-row.bd-weed em {
  font-style: normal;
  font-weight: 500;
  color: var(--lav);
}

@media (max-width: 640px) {
  .dim-field input { width: 90px; }
}

/* ================================================================
   Classes that were used in templates but never styled.

   The photo and handmade estimators were each built with their own
   invented class vocabulary instead of reusing the 3D one, so their
   price panels rendered as naked text. Both now speak the same
   vocabulary (quote-card / bd / promo-box / quote-actions). What is
   left below is the layout and admin scaffolding that was also
   never given styles. ASCII ONLY.
   ================================================================ */

/* --- Estimator page shell (photo + handmade) --- */
.quote-head { margin-bottom: 2rem; }
.quote-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--dark);
}
.quote-title em {
  font-style: italic;
  color: var(--coral);
}
.quote-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}
.quote-form { min-width: 0; }

.q-block { margin-bottom: 1.6rem; }
.q-block-title {
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}
.q-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}

/* --- Rush toggle --- */
.rush-opt {
  position: relative;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 12px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rush-opt:hover { border-color: var(--gold-d); }
.rush-opt.is-on {
  border-color: var(--gold-d);
  background: rgba(250, 199, 117, 0.14);
}
.rush-opt strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark);
}
.rush-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

/* --- Staff internal breakdown --- */
.bd-rows {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.bd-row.bd-cost {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(139, 94, 74, 0.18);
  font-weight: 600;
  color: var(--dark);
}
.bd-row.bd-margin {
  font-weight: 600;
  color: var(--success);
}
.bd-row.bd-promo { color: var(--teal); }

/* --- Admin rate grids --- */
.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  padding: 1.2rem 1.5rem;
}
.rate-field { display: flex; flex-direction: column; gap: 0.3rem; }
.rate-field > label,
.rate-item > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark);
}
.rate-item { display: flex; flex-direction: column; gap: 0.3rem; }
.rate-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}
.rate-input {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rate-in,
.rate-input input {
  width: 100%;
  height: 38px;
  padding: 0 0.6rem;
  font-size: 0.9rem;
  color: var(--dark);
  background: #fff;
  border: 1px solid rgba(139, 94, 74, 0.2);
  border-radius: 8px;
}
.rate-in:focus,
.rate-input input:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.1);
}
.panel-foot {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(139, 94, 74, 0.1);
}

/* --- Derived machine rates card --- */
.machine-rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 1rem 1.5rem 1.3rem;
}
.mrate {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  background: rgba(93, 202, 165, 0.08);
}
.mrate-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
}
.mrate-val {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark);
}
.mrate-calc {
  font-size: 0.72rem;
  color: var(--muted);
}

/* --- Misc --- */
.btn-lg {
  height: 52px;
  padding: 0 1.8rem;
  font-size: 1rem;
}
.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.quote-inputs { min-width: 0; }
.who-pane { min-width: 0; }
.tput-weight,
.tput-hours { color: var(--muted); }
.tput-warn { color: var(--danger); font-weight: 600; }

@media (max-width: 900px) {
  .rates-grid,
  .machine-rates { padding: 1rem; }
}

/* --- Estimate caveat. Quiet, but actually readable. --- */
.quote-caveat {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: start;
  background: rgba(250, 199, 117, 0.10);
  border: 1px solid rgba(200, 146, 64, 0.22);
  border-radius: 9px;
}

/* --- "You cannot delete this" explanation, in place of the delete button --- */
.del-blocked {
  display: inline-block;
  max-width: 210px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ================= 3D model upload + viewer ================= */

.model-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2.2rem 1.2rem;
  text-align: center;
  border: 2px dashed rgba(139, 94, 74, 0.28);
  border-radius: 14px;
  background: var(--cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.model-drop:hover,
.model-drop.is-over {
  border-color: var(--coral);
  background: rgba(216, 90, 48, 0.05);
}
.model-drop-icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--coral);
}
.model-drop-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dark);
}
.model-drop-sub {
  font-size: 0.78rem;
  color: var(--muted);
}

.model-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.model-panel--staff {
  margin-bottom: 1.2rem;
}

.model-view {
  position: relative;
  min-height: 260px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(139, 94, 74, 0.15);
  cursor: grab;
}
.model-view:active { cursor: grabbing; }
.model-view canvas { display: block; }
.model-spin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.model-view.is-ready .model-spin { display: none; }
.model-view.is-error .model-spin::after {
  content: ' !';
  color: var(--danger);
}

.model-facts {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: var(--cream-2);
  border: 1px solid rgba(139, 94, 74, 0.12);
}
.model-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  word-break: break-all;
}
.model-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.8rem;
  margin: 0;
  font-size: 0.8rem;
}
.model-dl dt { color: var(--muted); }
.model-dl dd {
  margin: 0;
  font-weight: 600;
  color: var(--dark);
  text-align: end;
}
.model-warn {
  margin: 0;
  padding: 0.55rem 0.7rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--dark);
  background: rgba(216, 48, 47, 0.08);
  border: 1px solid rgba(216, 48, 47, 0.25);
  border-radius: 8px;
}
.model-acts {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  flex-wrap: wrap;
}
.model-measured {
  color: var(--success) !important;
  font-weight: 600;
}

@media (max-width: 760px) {
  .model-panel { grid-template-columns: 1fr; }
  .model-view  { min-height: 220px; }
}

.callout--warn {
  background: rgba(250, 199, 117, 0.14);
  border-color: rgba(200, 146, 64, 0.35);
}

/* --- Admin user row actions.
   Five controls (role, activate, reset, temp password, delete) were wrapping
   into two ragged rows. Keep them on one line where there is room, and wrap
   tidily where there is not. --- */
.actions {
  display: flex;
  flex-wrap: wrap;                /* wraps only between select and icon group */
  align-items: center;
  justify-content: flex-end;      /* logical: right in LTR, left in RTL */
  gap: 0.4rem;
  row-gap: 0.45rem;
}
.actions-icons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;              /* the five icons never split mid-group */
}
.actions .btn-sm {
  padding: 0.45rem 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ================= Icon buttons with hover labels =================
   Five text buttons wrapped into three ragged rows in a table cell - and in
   Arabic the words are longer, so it was worse. Icons fit on one line.

   But an unlabelled icon is a guess, and one of these deletes an account. So
   every one carries three things: a title (native tooltip, works everywhere), an
   aria-label (screen readers), and data-tip (the styled tooltip below). The
   delete confirmation names the person, because with an icon you cannot be sure
   which row you clicked. */

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1.5px solid rgba(216, 90, 48, 0.28);
  background: transparent;
  color: var(--coral);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover {
  background: rgba(216, 90, 48, 0.08);
  border-color: var(--coral);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.icon-btn--danger {
  color: var(--danger);
  border-color: rgba(216, 48, 47, 0.3);
}
.icon-btn--danger:hover {
  background: rgba(216, 48, 47, 0.09);
  border-color: var(--danger);
}

/* The hover label. left:50% + translateX(-50%) is a CENTRING trick, not a
   start/end decision - it behaves identically in RTL. */
.icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
  background: var(--dark);
  color: var(--cream);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s var(--ease);
  z-index: 30;
}
.icon-btn:hover::after,
.icon-btn:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Icons only, at every size. The label appears on hover.

   The title attribute is still on every button, so the browser's own tooltip
   works even where this CSS does not, and aria-label still names each one for a
   screen reader. On a touch screen there is no hover and therefore no label -
   the icons stand alone. */

/* A capability deliberately withheld. Explain it where it is missing. */
.ord-locked {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(250, 199, 117, 0.12);
  border: 1px solid rgba(200, 146, 64, 0.25);
  border-radius: 8px;
}

/* ================= Online store ================= */

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
  margin-top: 1.5rem;
}
.store-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(139, 94, 74, 0.12);
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.store-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(26,10,32,0.10); }
.store-card.is-soldout { opacity: 0.6; }

.store-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-thumb img { width: 100%; height: 100%; object-fit: cover; }
.store-thumb-blank { color: rgba(139, 94, 74, 0.35); }

.store-badge {
  position: absolute;
  top: 0.6rem;
  inset-inline-start: 0.6rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--teal);
  color: white;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.store-badge--out { background: var(--muted); inset-inline-start: auto; inset-inline-end: 0.6rem; }

.store-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.store-card-body h3 { margin: 0; font-size: 1rem; color: var(--dark); }
.store-blurb { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }

.store-price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.3rem; }
.store-price-from { font-size: 0.72rem; color: var(--muted); }
.store-price-val  { font-size: 1.35rem; font-weight: 700; color: var(--coral); }
.store-price-unit { font-size: 0.72rem; color: var(--muted); }
.store-tier-hint  { margin: 0; font-size: 0.74rem; color: var(--teal); font-weight: 600; }

/* Product detail */
.back-link { display: inline-block; margin: 1rem 0; font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--coral); }
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.product-media {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-2);
  display: flex; align-items: center; justify-content: center;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.2;
}
.product-desc { color: var(--muted); line-height: 1.6; margin-bottom: 1.2rem; }
.product-price { font-size: 1.6rem; font-weight: 700; color: var(--coral); margin-bottom: 1.2rem; }

.tier-table { border: 1px solid rgba(139,94,74,0.15); border-radius: 12px; overflow: hidden; margin-bottom: 1.4rem; }
.tier-head { padding: 0.55rem 0.9rem; background: var(--cream-2); font-size: 0.78rem; font-weight: 600; color: var(--dark); }
.tier-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; padding: 0.5rem 0.9rem; border-top: 1px solid rgba(139,94,74,0.1); font-size: 0.85rem; align-items: center; }
.tier-qty { font-weight: 600; color: var(--dark); }
.tier-unit { color: var(--dark); }
.tier-save { font-size: 0.72rem; color: var(--teal); font-weight: 600; text-align: end; }

.add-cart-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 340px; }
.qty-row { display: flex; align-items: center; gap: 0.8rem; }
.qty-row input { width: 90px; }
.stock-note { margin: 0; font-size: 0.78rem; color: var(--coral); font-weight: 600; }
.store-oos { color: var(--muted); }

/* Cart */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1.6rem; align-items: start; margin-top: 1rem; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: 0.9rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid rgba(139,94,74,0.12); }
.cart-line-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--cream-2); }
.cart-line-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-name { font-weight: 600; color: var(--dark); font-size: 0.9rem; }
.cart-line-var { display: inline-block; margin-inline-start: 0.4rem; font-size: 0.74rem; color: var(--muted); font-weight: 400; }
.cart-line-unit { font-size: 0.76rem; color: var(--muted); }
.cart-line-qty input { width: 68px; }
.cart-line-total { font-weight: 700; color: var(--dark); }

.cart-summary { padding: 1.3rem; border-radius: 14px; background: var(--cream); border: 1px solid rgba(139,94,74,0.14); position: sticky; top: 90px; }
.cart-summary h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.cart-promo .promo-row { display: flex; gap: 0.5rem; }
.cart-promo input { flex: 1; }
.promo-msg--bad { color: var(--danger); }
.promo-msg--good { color: var(--success); font-weight: 600; }

.cart-totals { margin: 1.1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cart-totals > div { display: flex; justify-content: space-between; font-size: 0.9rem; }
.cart-totals dt, .cart-totals dd { margin: 0; }
.cart-totals dt { color: var(--muted); }
.cart-totals dd { font-weight: 600; color: var(--dark); }
.cart-totals .is-discount dd { color: var(--success); }
.cart-grand { padding-top: 0.6rem; border-top: 1px solid rgba(139,94,74,0.15); font-size: 1.05rem !important; }
.cart-grand dt, .cart-grand dd { font-weight: 700 !important; color: var(--dark) !important; }
.btn-block { width: 100%; }

/* Cart badge in the nav */
.nav-cart { position: relative; display: inline-flex; align-items: center; }
.nav-cart-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--coral);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 820px) {
  .product-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-line { grid-template-columns: 48px 1fr auto; grid-template-areas: "thumb main del" "thumb qty total"; }
  .cart-line-thumb { grid-area: thumb; width: 48px; height: 48px; }
  .cart-line-main { grid-area: main; }
  .cart-line-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; text-align: end; }
  .cart-line-del { grid-area: del; text-align: end; }
}

.cart-lines { display: flex; flex-direction: column; }
.page-h1 { margin: 1.2rem 0; font-size: 1.6rem; color: var(--dark); }

.chip { display: inline-block; padding: 0.2rem 0.6rem; margin: 0 0.2rem; border-radius: 999px; background: var(--cream-2); font-size: 0.74rem; color: var(--dark); }
.admin-product-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: 0.9rem 1.2rem; }
.admin-product-meta { font-size: 0.82rem; color: var(--muted); display: flex; gap: 0.6rem; align-items: center; }

.order-store-lines { margin: 1rem 0; border: 1px solid rgba(139,94,74,0.12); border-radius: 12px; overflow: hidden; }
.osl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; padding: 0.6rem 0.9rem; border-top: 1px solid rgba(139,94,74,0.1); font-size: 0.88rem; align-items: center; }
.osl-row:first-child { border-top: none; }
.osl-name { color: var(--dark); font-weight: 600; }
.osl-qty { color: var(--muted); }
.osl-total { font-weight: 700; color: var(--dark); }
.admin-product { margin-bottom: 1rem; }

/* ---- Store category tabs ---- */
.store-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 1.6rem;
  border-bottom: 1px solid rgba(139, 94, 74, 0.14);
  padding-bottom: 0.9rem;
}
.store-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(139, 94, 74, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.store-tab:hover { border-color: var(--coral); color: var(--coral); }
.store-tab.is-active {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}
.store-tab-n {
  font-size: 0.7rem;
  opacity: 0.8;
  font-weight: 700;
}
.store-tab.is-active .store-tab-n { opacity: 0.9; }
.store-cell { display: contents; }

.cat-edit-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.cat-edit-row input[type="text"] { flex: 1; min-width: 140px; }

/* Nav group divider: separates Services|Shop from the account cluster. */
.nav-divider {
  width: 1px;
  height: 20px;
  margin: 0 0.4rem;
  background: rgba(139, 94, 74, 0.22);
  align-self: center;
}
@media (max-width: 820px) {
  /* Matches the nav's own collapse point. Once the nav stacks vertically, a
     horizontal rule reads better than a vertical bar. */
  .nav-divider { width: 100%; height: 1px; margin: 0.4rem 0; }
}

/* ---- "What the name means" block, inside the story section ---- */
.name-meaning {
  margin: 1.8rem 0;
  padding: 1.5rem 1.6rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(250,199,117,0.14), rgba(237,147,177,0.10));
  border: 1px solid rgba(200,146,64,0.20);
}
.name-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-d);
  margin-bottom: 0.4rem;
}
.name-h {
  margin: 0 0 1.1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--dark);
}
.name-roots {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.name-root {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.name-root-word {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral);
  line-height: 1.1;
}
.name-root-d {
  font-size: 0.76rem;
  color: var(--muted);
}
.name-plus {
  font-size: 1.3rem;
  color: var(--gold-d);
  font-weight: 300;
}
.name-p {
  margin: 0;
  line-height: 1.7;
  color: var(--dark);
}

/* ---- Global keyboard focus ring ----
   Inputs had focus styles, but links and buttons did not - and several set
   outline:none, removing it. A keyboard or screen-reader user could not see
   where they were on the page, which is an accessibility failure and, in a
   checkout, a usability one. :focus-visible only shows for keyboard nav, so it
   never appears on a mouse click. */
a:focus-visible,
button:focus-visible,
[role="tab"]:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.store-tab:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Per-item lock (staff-change approval) ---- */
.lock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1.5px solid rgba(139,94,74,0.22);
  border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer;
  transition: all .15s var(--ease);
}
.lock-btn:hover { border-color: var(--coral); color: var(--coral); }
.lock-btn.is-locked { background: rgba(216,90,48,0.1); border-color: var(--coral); color: var(--coral); }
.lock-tag { color: var(--coral); display: inline-flex; align-items: center; }
.pending-tag {
  display: inline-block; margin-inline-start: 0.3rem;
  color: var(--gold-d); font-weight: 700; letter-spacing: 1px;
}

/* Approval queue */
.appr-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.2rem; }
.appr-card {
  display: grid; grid-template-columns: 1fr auto; gap: 0.8rem 1rem;
  padding: 1.1rem 1.3rem; border-radius: 14px;
  background: var(--cream); border: 1px solid rgba(139,94,74,0.14);
}
.appr-kind {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  background: rgba(175,169,236,0.2); color: #5b52b8;
}
.appr-kind--remove { background: rgba(216,48,47,0.14); color: var(--danger); }
.appr-kind--add    { background: rgba(93,202,165,0.18); color: #1f6d55; }
.appr-label { margin: 0.4rem 0 0.2rem; font-weight: 600; color: var(--dark); }
.appr-meta { font-size: 0.76rem; color: var(--muted); }
.appr-card-actions { display: flex; align-items: center; gap: 0.5rem; }
.appr-reject { grid-column: 1 / -1; display: none; }
.appr-reject.open { display: block; }
.appr-reject form { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.appr-reject input { flex: 1; }

/* Admin nav: pending badge */
.nav-pending-badge {
  display: inline-block; min-width: 16px; height: 16px; padding: 0 4px;
  margin-inline-start: 0.3rem; border-radius: 999px;
  background: var(--gold-d); color: white;
  font-size: 0.62rem; font-weight: 700; line-height: 16px; text-align: center;
}
.appr-card-main { min-width: 0; }

/* ---- 2FA challenge + setup ---- */
.auth-lead { color: var(--muted); line-height: 1.6; margin-bottom: 1.4rem; }
.auth-alt { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); text-align: center; }
.auth-alt a { color: var(--coral); }
.auth-hint { color: var(--muted); }
.form-error-box {
  background: rgba(216,48,47,0.08); border: 1px solid rgba(216,48,47,0.25);
  color: var(--danger); padding: 0.7rem 0.9rem; border-radius: 8px;
  font-size: 0.85rem; margin-bottom: 1rem;
}
.tfa-input {
  font-size: 1.5rem; letter-spacing: 0.4em; text-align: center;
  font-family: 'Outfit', monospace; padding: 0.7rem;
}
.tfa-methods { display: grid; gap: 1rem; margin: 1.4rem 0; }
.tfa-method {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.1rem 1.2rem; border: 1.5px solid rgba(139,94,74,0.18);
  border-radius: 14px; cursor: pointer; text-align: start;
  background: transparent; transition: border-color .15s var(--ease);
}
.tfa-method:hover { border-color: var(--coral); }
.tfa-method strong { color: var(--dark); }
.tfa-method span { font-size: 0.82rem; color: var(--muted); }
.tfa-secret {
  font-family: monospace; font-size: 1rem; letter-spacing: 2px;
  background: var(--cream-2); padding: 0.7rem 1rem; border-radius: 8px;
  text-align: center; word-break: break-all; margin: 0.8rem 0; dir: ltr;
}
.backup-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;
  margin: 1rem 0; font-family: monospace;
}
.backup-codes li {
  list-style: none; padding: 0.5rem 0.8rem; background: var(--cream-2);
  border-radius: 6px; text-align: center; letter-spacing: 1px;
}
.auth-form { display:flex; flex-direction:column; gap:1rem; }

.callout--ok { background: rgba(93,202,165,0.12); border-color: rgba(93,202,165,0.35); color: #1f6d55; }
.tfa-qr { display: flex; justify-content: center; margin: 1.2rem 0; }
.tfa-qr img, .tfa-qr canvas { border-radius: 10px; border: 8px solid #fff; box-shadow: 0 4px 16px rgba(26,10,32,0.08); }

/* Skip link: invisible until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -60px;
  z-index: 100;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 10px 10px;
  background: var(--coral);
  color: white;
  text-decoration: none;
  font-size: 0.85rem;
  transition: top .15s var(--ease);
}
.skip-link:focus-visible { top: 0; }

/* ---- Payments ---- */
.pay-panel {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(139,94,74,0.14);
  border-radius: 12px;
  background: var(--cream-2);
}
.pay-line { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.35rem; }
.pay-line span { color: var(--muted); }
.pay-line strong { color: var(--dark); }
.pay-line.is-settled strong { color: var(--success); }
.pay-settled { margin: 0.4rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--success); }
.pay-form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.6rem; }
.pay-row { display: flex; gap: 0.55rem; }
.pay-row input { flex: 1.6; min-width: 0; }
.pay-row select { flex: 1; min-width: 0; }
/* These fields sit outside .form-group, so they inherit nothing - give them
   the site's field language explicitly instead of browser defaults. */
.attach-row { display: flex; gap: 0.55rem; margin-top: 0.5rem; }
.attach-row select { flex: 1; min-width: 0; }
/* Short labels (Arabic "ربط") must stay pills, never collapse to circles. */
.attach-row .btn { flex: 0 0 auto; min-width: 5.2rem; }

.pay-form input,
.pay-form select,
.attach-row select {
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--dark);
  background: var(--cream);
  border: 1.5px solid rgba(216, 90, 48, 0.15);
  border-radius: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.pay-form input:focus,
.pay-form select:focus,
.attach-row select:focus {
  outline: none;
  border-color: var(--coral);
  background: white;
  box-shadow: 0 0 0 4px rgba(216, 90, 48, 0.08);
}
.pay-form input::placeholder { color: rgba(139, 94, 74, 0.55); }
.pay-status {
  margin: 0.8rem 0; padding: 0.6rem 0.9rem; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600;
  background: rgba(250,199,117,0.16); border: 1px solid rgba(200,146,64,0.25); color: var(--gold-d);
}
.pay-status.is-settled {
  background: rgba(93,202,165,0.12); border-color: rgba(93,202,165,0.35); color: var(--success);
}

/* Locks manager on the approvals page */
.locks-manage { margin-top: 2.5rem; }
.locks-h { font-size: 1.25rem; font-weight: 600; color: var(--dark); margin: 0 0 0.3rem; }
.locks-group {
  margin-top: 0.8rem; border: 1px solid rgba(139,94,74,0.14);
  border-radius: 12px; background: var(--cream);
}
.locks-group summary {
  padding: 0.8rem 1.1rem; cursor: pointer; font-weight: 600; color: var(--dark);
  display: flex; align-items: center; justify-content: space-between;
}
.locks-count { font-size: 0.75rem; color: var(--muted); font-weight: 400; }
.locks-rows { padding: 0.2rem 1.1rem 0.9rem; }
.locks-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.35rem 0; border-top: 1px solid rgba(139,94,74,0.08);
}
.locks-name { flex: 1; font-size: 0.88rem; color: var(--dark); }
.locks-price { font-size: 0.8rem; color: var(--muted); }
.pay-refund { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed rgba(139,94,74,0.2); }

/* Legal pages */
.legal-body h2 { font-size: 1.05rem; font-weight: 600; color: var(--dark); margin: 1.6rem 0 0.4rem; }
.legal-body p { color: var(--muted); line-height: 1.75; margin: 0; }
.wa-btn { display:inline-flex; align-items:center; gap:0.4rem; margin: 0.8rem 0; }

/* ---- Admin dashboard: attention / money / grouped destinations ---- */
.attn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.4rem; }
.attn-card {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.85rem 1.2rem; border-radius: 14px; text-decoration: none;
  background: rgba(216,90,48,0.09); border: 1.5px solid rgba(216,90,48,0.3);
  transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.attn-card:hover { transform: translateY(-1px); border-color: var(--coral); }
.attn-card--appr { background: rgba(250,199,117,0.14); border-color: rgba(200,146,64,0.4); }
.attn-n { font-size: 1.6rem; font-weight: 700; color: var(--coral); line-height: 1; }
.attn-card--appr .attn-n { color: var(--gold-d); }
.attn-l { font-size: 0.85rem; color: var(--dark); }
.dash-grid--money { margin-bottom: 0.6rem; }
.admin-group { margin-top: 1.6rem; }
.admin-group-h {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.6rem;
}
.nav-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; }
.nav-card {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1rem; border-radius: 14px; text-decoration: none;
  background: white; border: 1px solid rgba(139,94,74,0.14);
  transition: border-color .12s var(--ease), transform .12s var(--ease);
}
.nav-card:hover { border-color: var(--coral); transform: translateY(-1px); }
.nc-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--coral); margin-top: 0.1rem; }
.nc-icon svg { width: 22px; height: 22px; }
.nc-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.nc-name { font-weight: 600; color: var(--dark); font-size: 0.92rem; display: flex; align-items: center; gap: 0.45rem; }
.nc-badge {
  font-size: 0.7rem; font-weight: 700; color: white; background: var(--coral);
  border-radius: 999px; padding: 0.05rem 0.5rem; line-height: 1.3;
}
.nc-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.admin-foot-note { margin-top: 1.6rem; font-size: 0.82rem; color: var(--muted); }
.admin-foot-note a { color: var(--coral); }

/* Staff dashboard additions (shares attn/nav-card system) */
.attn-card--late { background: rgba(216,48,47,0.08); border-color: rgba(216,48,47,0.4); }
.attn-card--late .attn-n { color: var(--danger); }
.attn-card--mine { background: rgba(93,202,165,0.1); border-color: rgba(93,202,165,0.4); }
.attn-card--mine .attn-n { color: var(--success); }
.stf-clear { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.4rem; }
.dash-card--link { text-decoration: none; display: block; transition: border-color .12s var(--ease), transform .12s var(--ease); }
.dash-card--link:hover { border-color: var(--coral); transform: translateY(-1px); }

/* Account settings line */
.acct-settings { margin: 1.2rem 0 0; font-size: 0.85rem; color: var(--muted); display: flex; gap: 0.6rem; align-items: center; }
.acct-settings a { color: var(--coral); text-decoration: none; }
.acct-settings a:hover { text-decoration: underline; }
.staff-pdf-row { display:flex; gap:0.5rem; margin-top:0.6rem; }

/* Mail settings panel */
.mail-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem 1rem; padding: 1rem 1.3rem 0; }
.mail-cfg-actions { padding: 0.8rem 1.3rem 1.2rem; }
.mail-src-badge { font-size: 0.72rem; font-weight: 600; color: var(--success); background: rgba(93,202,165,0.12); border-radius: 999px; padding: 0.2rem 0.7rem; }
.mail-src-badge--env { color: var(--muted); background: rgba(139,94,74,0.1); }

/* Staff billing editor */
.bill-edit { margin-top: 0.8rem; }
.bill-edit summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--coral); }
.bill-edit form { margin-top: 0.6rem; }

/* PDF preview modal */
.pdf-modal { position: fixed; inset: 0; z-index: 400; }
.pdf-modal[hidden] { display: none; }
.pdf-modal-backdrop { position: absolute; inset: 0; background: rgba(26,10,32,0.55); }
.pdf-modal-panel { position: relative; margin: 3vh auto; width: min(920px, 94vw); height: 92vh; background: var(--cream); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(26,10,32,0.35); }
.pdf-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.2rem; border-bottom: 1.5px solid rgba(216,90,48,0.15); color: var(--dark); }
.pdf-modal-x { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 0.2rem; }
.pdf-modal-x:hover { color: var(--coral); }
.pdf-modal-frame { flex: 1; width: 100%; border: 0; background: white; }
.pdf-modal-foot { display: flex; gap: 0.6rem; padding: 0.8rem 1.2rem; border-top: 1.5px solid rgba(216,90,48,0.15); }
.pdf-preview { cursor: pointer; }

/* Sampling log */
.smp-pill { display: inline-block; padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.smp-pill--pass { background: rgba(93,202,165,0.16); color: #2c7a5d; }
.smp-pill--tune { background: rgba(250,199,117,0.25); color: var(--gold-d); }
.smp-pill--fail { background: rgba(216,48,47,0.1); color: var(--danger); }
.smp-notes { max-width: 26rem; font-size: 0.84rem; color: var(--muted); }
.smp-totals { padding: 0.9rem 1.3rem; margin: 0; font-size: 0.85rem; color: var(--muted); border-top: 1.5px solid rgba(216,90,48,0.12); display: flex; gap: 0.6rem; }
.smp-unit { color: var(--coral); font-weight: 600; }
.smp-waste { border-top: 1.5px solid rgba(216,90,48,0.12); }

/* Inventory ledger */
.inv-in { color: #2c7a5d; font-weight: 600; }
.inv-out { color: var(--danger); font-weight: 600; }