/* smart menu: tokens from docs/direction.md (muted-tint canvas, one accent, one dark band) */
@font-face{font-family:'Thmanyah Sans';src:url(../fonts/thmanyahsans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url(../fonts/thmanyahsans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url(../fonts/thmanyahsans-Bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --canvas:#EFEEEA;--surface:#FFFFFF;--sunk:#E6E4DF;
  --ink:#14161B;--ink-2:#3B3F48;--muted:#5C606A;--line:#D9D6CF;--line-2:#C9C5BC;
  --accent:#B5471B;--accent-ink:#8F3713;--accent-soft:#F4E4DA;
  --dark:#14161B;--dark-2:#1E2129;--on-dark:#C9CCD4;--on-dark-2:#8C919C;--on-dark-accent:#FFB86B;
  --ok:#1F7A4D;--ok-2:#17633E;--ok-soft:#E1F0E8;
  --warn:#9A6A0B;--warn-soft:#F7EDD6;--hot:#B83232;--hot-soft:#F6E1DF;
  --brand:var(--accent);
  --r:12px;--r-sm:9px;
  --fd:'Thmanyah Sans',system-ui,sans-serif;
  --fs:var(--fd);
  --f:'Thmanyah Sans',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--canvas);line-height:1.75;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-underline-offset:3px}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.3;margin:0 0 .5em;letter-spacing:0}
h1{font-size:1.75rem}h2{font-size:1.35rem}h3{font-size:1.08rem}
p{margin:0 0 1em}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:480px}
.narrow-md{max-width:680px}
.muted{color:var(--muted)}.small{font-size:.875rem}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
code,.mono{font-family:Consolas,'Courier New',monospace;direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;inset-inline-start:8px;top:-80px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{top:8px}

/* ── header ── */
.top{background:var(--canvas);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.top .logo img{height:28px;display:block}
.top nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin-inline-start:auto}
.top nav a{padding:7px 11px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:.94rem}
.top nav a.on{color:var(--ink);background:var(--sunk)}
.top nav a:hover{color:var(--ink)}
.top nav .btn{margin-inline-start:6px}.top nav .btn:not(.ghost){color:var(--on-accent,#fff)}
main{padding:26px 0 64px}
.bare main{padding:0}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem/1.2 var(--f);border:1px solid transparent;border-radius:10px;
  padding:12px 20px;background:var(--accent);color:var(--on-accent,#fff);text-decoration:none;cursor:pointer;min-height:46px;
  transition:background-color .2s var(--ease),transform .12s var(--ease)}
.btn:hover{background:var(--accent-ink)}
.btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface)}
.btn.ink{background:var(--ink)}.btn.ink:hover{background:#000}
.btn.ok{background:var(--ok)}.btn.ok:hover{background:var(--ok-2)}
.btn.hot{background:var(--hot)}
.btn.sm{padding:6px 12px;min-height:36px;font-size:.88rem;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline{display:inline}

/* ── app surfaces ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stat b{display:block;font-family:var(--fd);font-size:1.9rem;font-weight:700;line-height:1.2;margin:2px 0}
.stat span{color:var(--muted);font-size:.85rem}
.page-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.page-h h1{margin:0}

/* ── forms ── */
label{display:block;font-weight:600;font-size:.92rem;margin:14px 0 5px}
input[type=text],input[type=password],input[type=number],input[type=tel],input[type=email],input[type=url],input[type=time],input[type=date],input[type=search],input[type=file],select,textarea,input:not([type]){
  width:100%;font:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink)}
input[type=file]{padding:8px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);vertical-align:-3px;margin-inline-end:6px}
input[type=color]{width:64px;height:42px;border:1px solid var(--line-2);border-radius:10px;padding:3px;background:var(--surface)}
.helptext,.help{display:block;color:var(--muted);font-size:.82rem;margin:4px 0 0}
input[type=time]{max-width:200px;font-variant-numeric:tabular-nums}
input[dir=ltr]{text-align:left}
input[dir=ltr]::placeholder{text-align:left}
/* page title row shared by owner pages */
.pg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.pg-head h1{margin:0}
.pg-head p{margin:4px 0 0}
.errorlist{list-style:none;padding:0;margin:5px 0;color:var(--hot);font-size:.88rem}

/* ── notices ── */
.msg{padding:12px 15px;border-radius:10px;margin-bottom:14px;background:var(--ok-soft);color:var(--ok-2);font-weight:600}
.msg.error{background:var(--hot-soft);color:var(--hot)}
.msg.info,.msg.warning{background:var(--warn-soft);color:var(--warn)}
.banner{padding:12px 15px;border-radius:10px;margin-bottom:18px;font-weight:600;border:1px solid}
.banner.trial{background:var(--accent-soft);color:var(--accent-ink);border-color:#E9CDBD}
.banner.off{background:var(--hot-soft);color:var(--hot);border-color:#EBC4C0}
.pill{display:inline-block;padding:1px 10px;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok-2)}.pill.hot{background:var(--hot-soft);color:var(--hot)}.pill.warn{background:var(--warn-soft);color:var(--warn)}

.empty{color:var(--muted);text-align:center;padding:24px;border:1px dashed var(--line-2);border-radius:var(--r)}

/* ── print ── */
.print-sheet{display:grid;gap:24px;grid-template-columns:1fr 1fr}
.qr-card{border:2px solid var(--ink);border-radius:18px;padding:24px;text-align:center;background:#fff}
.qr-card svg{width:100%;max-width:240px;height:auto}
.qr-card h2{font-size:1.45rem}
@media (max-width:640px){.print-sheet{grid-template-columns:1fr}}
@media print{.top,.no-print,.foot{display:none!important}body{background:#fff}main{padding:0}}

/* ── tables & billing ── */
table.t{width:100%;border-collapse:collapse;font-size:.92rem}
.t th,.t td{text-align:start;padding:9px 6px;border-bottom:1px solid var(--line)}
.t th{color:var(--muted);font-weight:600;font-size:.82rem}
.pay-box{background:var(--dark);color:#fff;border-radius:var(--r);padding:22px}
.pay-box .big{font-family:var(--fd);font-size:1.8rem;font-weight:700;direction:ltr;display:inline-block;letter-spacing:.5px}
.pay-box .k{color:var(--on-dark-2);font-size:.86rem}
.pay-box .ref{color:var(--on-dark-accent)}

/* ── auth pages ── */
.auth{max-width:440px;margin:24px auto 0}
.auth h1{font-size:1.9rem}

/* phone field: +967 prefix box, number typed left-to-right */
.phone-wrap{display:flex;direction:ltr;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);overflow:hidden}
.phone-wrap:focus-within{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.phone-cc{display:flex;align-items:center;padding:0 12px;background:var(--canvas);color:var(--muted);font-weight:600;border-right:1px solid var(--line)}
.phone-wrap input.phone-input{border:0;border-radius:0;outline:none;direction:ltr;text-align:left;font-size:1.1rem;letter-spacing:.5px}

@media (max-width:640px){
  .top .wrap{gap:8px;padding-block:8px}
  .top nav{width:100%;margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .top nav a{flex:none}
  .top nav form{margin-inline-start:auto}
}

/* invoice */
.invoice header{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:12px}
.invoice header div{text-align:end;display:grid}
.invoice dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 16px}
.invoice dt{color:var(--muted)}
.invoice dd{margin:0;font-weight:600}