/* ===== adopt — design tokens & global styles ===== */
:root{
  /* warm neutrals */
  --cream:        #FBF7F0;
  --cream-2:      #F5EEE2;
  --surface:      #FFFFFF;
  --surface-2:    #FFFDF9;
  --ink:          #2E2A24;
  --ink-soft:     #6E665A;
  --ink-faint:    #9A9082;
  --line:         #ECE3D5;
  --line-strong:  #DED2BF;

  /* warm accents (chosen palette) */
  --terra:        #E07A4F;
  --terra-dark:   #C9603A;
  --terra-soft:   #FBEEE5;
  --gold:         #C9A66B;
  --gold-soft:    #F6EEDD;
  --olive:        #5B6B4E;
  --olive-soft:   #ECF0E6;

  /* status */
  --st-available: #5B6B4E;
  --st-available-bg:#ECF0E6;
  --st-process:   #B98A2E;
  --st-process-bg:#F8EFD7;
  --st-adopted:   #8A8073;
  --st-adopted-bg:#F0ECE3;

  /* shape */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* shadow (warm, soft) */
  --sh-1: 0 1px 2px rgba(60,48,30,.05), 0 2px 8px rgba(60,48,30,.04);
  --sh-2: 0 4px 14px rgba(60,48,30,.07), 0 10px 28px rgba(60,48,30,.06);
  --sh-3: 0 12px 40px rgba(60,48,30,.12);

  --maxw: 1180px;
  --header-h: 72px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Assistant', system-ui, sans-serif;
  background:var(--cream);
  color:var(--ink);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.01em; font-weight:800; }
p{ margin:0; }
img{ display:block; max-width:100%; }
::selection{ background:var(--terra-soft); }

/* layout */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.app-root{ min-height:100vh; display:flex; flex-direction:column; }
.app-main{ flex:1; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--r-pill);
  font-weight:700; font-size:16px; line-height:1;
  padding:14px 24px; transition:.16s ease; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--terra); color:#fff; box-shadow:0 4px 14px rgba(224,122,79,.32); }
.btn-primary:hover{ background:var(--terra-dark); }
.btn-ghost{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-olive{ background:var(--olive); color:#fff; }
.btn-olive:hover{ filter:brightness(1.06); }
.btn-soft{ background:var(--terra-soft); color:var(--terra-dark); }
.btn-soft:hover{ background:#f7e3d6; }
.btn-line{ background:transparent; border:1.5px solid var(--line-strong); color:var(--ink); }
.btn-line:hover{ border-color:var(--ink-soft); }
.btn-sm{ padding:10px 16px; font-size:14px; }
.btn-lg{ padding:17px 30px; font-size:18px; }
.btn-block{ width:100%; }
.btn-wa{ background:#1FAE54; color:#fff; }
.btn-wa:hover{ filter:brightness(1.05); }

/* ---- tags / chips ---- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; padding:6px 12px;
  border-radius:var(--r-pill); background:var(--cream-2); color:var(--ink-soft);
}
.tag-olive{ background:var(--olive-soft); color:var(--olive); }
.tag-gold{ background:var(--gold-soft); color:#9a7c34; }
.tag-terra{ background:var(--terra-soft); color:var(--terra-dark); }

.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:800; padding:7px 14px; border-radius:var(--r-pill);
}
.status-pill .dot{ width:8px; height:8px; border-radius:50%; }
.st-available{ background:var(--st-available-bg); color:var(--st-available); }
.st-available .dot{ background:var(--st-available); }
.st-process{ background:var(--st-process-bg); color:var(--st-process); }
.st-process .dot{ background:var(--st-process); }
.st-adopted{ background:var(--st-adopted-bg); color:var(--st-adopted); }
.st-adopted .dot{ background:var(--st-adopted); }

/* ---- form controls ---- */
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:14px; font-weight:700; color:var(--ink); }
.field .hint{ font-size:12.5px; color:var(--ink-faint); font-weight:500; }
.input, .select, .textarea{
  width:100%; border:1.5px solid var(--line-strong); background:var(--surface);
  border-radius:var(--r-sm); padding:12px 14px; font-size:15.5px; color:var(--ink);
  transition:.15s; outline:none;
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--terra); box-shadow:0 0 0 4px var(--terra-soft); }
.textarea{ resize:vertical; min-height:110px; line-height:1.55; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E665A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 14px center; padding-left:36px; }

/* ---- image placeholder (striped) ---- */
.ph{
  position:relative; overflow:hidden; background:var(--cream-2);
  background-image:repeating-linear-gradient(135deg, transparent, transparent 11px, rgba(201,166,107,.16) 11px, rgba(201,166,107,.16) 22px);
  display:flex; align-items:center; justify-content:center;
}
.ph .ph-label{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:.04em; color:var(--ink-faint);
  background:rgba(255,253,249,.78); padding:4px 9px; border-radius:6px; font-weight:500;
}

/* ---- card ---- */
.card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1); border:1px solid var(--line); }

/* utility */
.muted{ color:var(--ink-soft); }
.faint{ color:var(--ink-faint); }
.center{ text-align:center; }
.row{ display:flex; align-items:center; }
.eyebrow{ font-size:13px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--terra); }

/* scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid var(--cream); }

/* small helpers for animations */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.fade-up{ }