/*! © PlanB SPC. All rights reserved.
 * رنّة · Ranna design system: PlanB green and teal on night, Dubai type, dark by default with a light theme that
 * follows the device. Venue pages override --c1/--c2 with the venue's own colours.
 */
:root{
  --bg:#07090a;--bg2:#0b0f0d;--card:#111714;--card2:#161d19;--line:rgba(118,185,79,.16);--line2:rgba(236,243,238,.08);
  --text:#ecf3ee;--muted:#93a198;--faint:#7f8b83;--c1:#76b94f;--c2:#2dd4a4;--ok:#76b94f;--ink1:#76b94f;--warn:#f2b84b;--bad:#ef5b5b;
  --on-c1:#06140b;--shadow:0 24px 60px -30px rgba(0,0,0,.75);--r:18px;--grid:rgba(118,185,79,.06);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#f3f6f4;--bg2:#ffffff;--card:#ffffff;--card2:#f6f9f7;--line:rgba(13,132,55,.16);--line2:rgba(16,21,19,.08);
  --text:#101513;--muted:#56625a;--faint:#6b766f;--ink1:#3f7a22;--ok:#3f7a22;--warn:#9a6700;--shadow:0 22px 50px -32px rgba(16,40,24,.35);--grid:rgba(13,132,55,.06);
  color-scheme:light;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--planb-font);-webkit-font-smoothing:antialiased}
a{color:var(--c2)}
button,input,select,textarea{font:inherit;color:inherit}
bdi,.ltr{unicode-bidi:isolate}
.ltr{direction:ltr}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--muted)}
.hide{display:none!important}
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 25%,transparent 80%)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:14px;border:1px solid var(--line);
  background:var(--card);color:var(--text);text-decoration:none;cursor:pointer;font-size:16px;line-height:1.2;transition:transform .12s,background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{border-color:color-mix(in srgb,var(--c1) 55%,var(--line))}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
.btn.primary{background:var(--c1);border-color:transparent;color:var(--on-c1)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.teal{background:var(--c2);border-color:transparent;color:#03211a}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:transparent}
.btn.big{min-height:58px;font-size:19px;padding:12px 24px;border-radius:16px}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:36px;padding:6px 12px;font-size:14px;border-radius:11px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:20px;height:20px;flex:none}

/* cards, chips, inputs */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:11px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font:400 14px/1.4 var(--planb-font);white-space:nowrap}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--c1) 16%,transparent);border-color:var(--c1);color:var(--text)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 3px;border-radius:99px;font-size:12.5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.badge.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
label.f{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.inp,select.inp,textarea.inp{width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--text);font-size:16px}
textarea.inp{min-height:84px;resize:vertical}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:grid;gap:12px}
.sep{height:1px;background:var(--line2);margin:14px 0}

/* dialog, toast */
dialog.sheet{border:1px solid var(--line);border-radius:22px;padding:0;width:min(460px,calc(100% - 28px));max-height:calc(100% - 28px);background:var(--card);color:var(--text);box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
dialog.sheet::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.sheet-in{padding:20px}
.sheet h3{margin:0 0 12px;font-size:20px;font-weight:400}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:99;
  max-width:calc(100% - 32px);padding:11px 18px;border-radius:14px;background:#0b0d0c;color:#ecf3ee;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:opacity .2s,transform .2s;pointer-events:none;font-size:15px;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:color-mix(in srgb,var(--bad) 60%,transparent)}
.toast.act{display:flex;align-items:center;gap:14px;pointer-events:auto}
.toast.act button{all:unset;cursor:pointer;padding:6px 14px;border-radius:10px;background:var(--c1);color:var(--on-c1);font-size:15px;white-space:nowrap}
.toast.act button:focus-visible{outline:2px solid #fff}

/* the Ranna mark */
.rn-mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.rn-mark img{width:34px;height:34px;border-radius:9px}
.rn-mark b{font-weight:400;font-size:21px;line-height:1}
.rn-mark small{display:block;font-size:11.5px;color:var(--muted);line-height:1.2;margin-top:2px}

/* PlanB chip and footer helpers */
.byplanb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);text-decoration:none}
.byplanb img{height:15px;width:auto}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}