/* =========================================================
   منصة الابتكار التقني
   Concept: the lab timetable. A graph-paper schedule board is
   the one bold element; everything else is quiet paper + ink.
   Green comes from the Kufic inscription on the Iraqi flag,
   red is used only for "taken" and destructive actions.
========================================================= */

:root{
  --paper:   #F2F4F1;
  --surface: #FFFFFF;
  --ink:     #13241D;
  --ink-2:   #4D5F56;
  --rule:    #D3DCD6;
  --rule-2:  #E5EBE7;

  --green:      #00703A;
  --green-ink:  #00592E;
  --green-wash: #E2F0E7;
  --red:        #B5122B;
  --red-wash:   #F8E5E8;

  --r-sm: 6px;
  --r-md: 10px;

  --font-ui: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
  --font-display: "Alexandria", "IBM Plex Sans Arabic", "Geeza Pro", sans-serif;

  /* type scale (base 16) */
  --t-xs: .8125rem;   /* 13 */
  --t-sm: .9375rem;   /* 15 */
  --t-md: 1rem;       /* 16 */
  --t-lg: 1.1875rem;  /* 19 */
  --t-xl: 1.5rem;     /* 24 */
  --t-2xl: 2rem;      /* 32 */
  --t-3xl: clamp(2.125rem, 5vw, 3.25rem);

  --gutter: 16px;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--t-md);
  line-height:1.7;
}
h1,h2,h3{ margin:0; line-height:1.3; font-weight:600; }
p{ margin:0; }
a{ color:var(--green-ink); }
button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{
  outline:3px solid var(--green);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.wrap{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
@media (min-width:720px){ :root{ --gutter:28px; } }

.skip{
  position:absolute; inset-inline-start:12px; top:-60px;
  background:var(--ink); color:#fff; padding:8px 14px; border-radius:var(--r-sm);
  z-index:100; text-decoration:none;
}
.skip:focus{ top:12px; }

.muted{ color:var(--ink-2); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--rule);
}
.topbar__row{
  display:flex; align-items:center; gap:24px;
  min-height:68px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  flex-shrink:0;
}
.brand__mark{ width:34px; height:34px; color:var(--ink); }
.brand__cell{ fill:var(--green); }
.brand__text{ display:flex; flex-direction:column; line-height:1.25; }
.brand__title{ font-family:var(--font-display); font-size:var(--t-lg); font-weight:600; }
.brand__subtitle{ font-size:var(--t-xs); color:var(--ink-2); }

.nav{ display:flex; gap:4px; margin-inline-start:auto; }
.nav__link{
  position:relative;
  padding:8px 12px;
  color:var(--ink-2);
  text-decoration:none;
  font-size:var(--t-sm);
  border-radius:var(--r-sm);
  white-space:nowrap;
}
.nav__link:hover{ color:var(--ink); background:var(--rule-2); }
.nav__link.is-active{ color:var(--ink); font-weight:600; }
.nav__link.is-active::after{
  content:""; position:absolute; inset-inline:12px; bottom:-15px; height:3px;
  background:var(--green); border-radius:3px 3px 0 0;
}

.authbar{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.who{ font-size:var(--t-sm); color:var(--ink-2); white-space:nowrap; }
.who b{ color:var(--ink); font-weight:600; }

@media (max-width:900px){
  .topbar__row{ flex-wrap:wrap; gap:8px 16px; padding-top:10px; }
  .authbar{ margin-inline-start:auto; }
  .nav{
    order:3; width:100%; margin:0 calc(var(--gutter) * -1);
    width:calc(100% + var(--gutter) * 2);
    padding-inline:var(--gutter);
    overflow-x:auto; scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav__link.is-active::after{ bottom:0; }
  .who{ display:none; }
}
@media (max-width:420px){
  .brand__subtitle{ display:none; }
}

/* ---------- Layout ---------- */
.view{ flex:1; padding-block:40px 72px; outline:none; }
.footer{
  border-top:1px solid var(--rule);
  padding-block:20px;
  font-size:var(--t-xs);
  color:var(--ink-2);
}

.pagehead{ max-width:62ch; margin-bottom:28px; }
.pagehead h1{
  font-family:var(--font-display);
  font-size:var(--t-2xl);
  font-weight:600;
  outline:none;
}
.pagehead p{ margin-top:8px; color:var(--ink-2); font-size:var(--t-lg); line-height:1.6; }

.section{ margin-top:56px; }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:2px solid var(--ink);
  padding-bottom:8px; margin-bottom:4px;
}
.section__head h2{ font-family:var(--font-display); font-size:var(--t-xl); font-weight:600; }
.section__head p{ font-size:var(--t-sm); color:var(--ink-2); }

/* ---------- Buttons & inputs ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px;
  padding:8px 18px;
  border:1px solid var(--green);
  border-radius:var(--r-sm);
  background:var(--green);
  color:#fff;
  font-weight:600;
  font-size:var(--t-sm);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ background:var(--green-ink); border-color:var(--green-ink); }
.btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--rule); }
.btn--ghost:hover{ background:var(--rule-2); border-color:var(--rule); }
.btn--danger{ background:var(--surface); color:var(--red); border-color:color-mix(in srgb, var(--red) 40%, white); }
.btn--danger:hover{ background:var(--red-wash); border-color:var(--red); }
.btn--solid-danger{ background:var(--red); border-color:var(--red); color:#fff; }
.btn--solid-danger:hover{ background:#94101F; border-color:#94101F; }
.btn--sm{ min-height:36px; padding:4px 12px; font-size:var(--t-xs); }
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--rule-2); border-color:var(--rule); color:var(--ink-2);
  cursor:not-allowed;
}

.linkbtn{
  background:none; border:0; padding:0 2px; cursor:pointer;
  color:var(--green-ink); text-decoration:underline; text-underline-offset:3px;
}

.iconbtn{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:none; cursor:pointer; color:var(--ink-2);
}
.iconbtn:hover{ background:var(--rule-2); color:var(--ink); }
.iconbtn svg{ width:16px; height:16px; }

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.label{ font-size:var(--t-xs); color:var(--ink-2); font-weight:500; }
.input,.select,.textarea{
  width:100%;
  min-height:44px;
  padding:9px 12px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  font-size:var(--t-sm);
}
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-wash); }
.input::placeholder,.textarea::placeholder{ color:#8A9891; }
.textarea{ min-height:96px; resize:vertical; line-height:1.6; }
.select{
  appearance:none;
  padding-inline-end:12px; padding-inline-start:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234D5F56' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:11px; background-position:left 12px center;
}
.input[dir="ltr"]{ text-align:left; }

.filters{
  display:grid;
  grid-template-columns:minmax(0,2fr) repeat(2, minmax(0,1fr));
  gap:12px;
  margin-bottom:20px;
}
.filters--2{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
@media (max-width:640px){
  .filters,.filters--2{ grid-template-columns:1fr 1fr; }
  .filters .field:first-child{ grid-column:1 / -1; }
}

/* ---------- Slot states (shared by board + labs page) ---------- */
.slot{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:48px; padding:4px 6px;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--surface);
  font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;
  line-height:1.2;
  cursor:pointer;
}
.slot small{ font-size:11px; color:var(--ink-2); }
.slot--free{ border-color:color-mix(in srgb, var(--green) 45%, white); color:var(--green-ink); font-weight:600; }
.slot--free small{ color:var(--green); font-weight:400; }
.slot--free:hover{ background:var(--green-wash); border-color:var(--green); }
.slot--taken{
  cursor:not-allowed;
  color:var(--red);
  border-color:color-mix(in srgb, var(--red) 30%, white);
  background:
    repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--red) 16%, transparent) 6px 7px),
    var(--surface);
}
.slot--taken small{ color:var(--red); }
.slot--mine{ cursor:default; background:var(--green); border-color:var(--green); color:#fff; font-weight:600; }
.slot--mine small{ color:#DDF0E4; }
.slot--past{
  cursor:not-allowed; color:#9AA69F;
  background:transparent; border-style:dashed; border-color:var(--rule);
}
.slot--past small{ color:#9AA69F; }

.legend{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-size:var(--t-xs); color:var(--ink-2);
}
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:14px; height:14px; border-radius:3px; border:1px solid var(--rule); display:inline-block; }
.legend .l-free{ border-color:var(--green); background:var(--surface); }
.legend .l-taken{ border-color:var(--red); background:repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--red) 35%, transparent) 3px 4px); }
.legend .l-mine{ background:var(--green); border-color:var(--green); }
.legend .l-past{ border-style:dashed; }

/* ---------- Home: hero + board ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:40px;
  align-items:start;
}
.hero__intro{ padding-top:12px; }
.display{
  font-family:var(--font-display);
  font-size:var(--t-3xl);
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
  outline:none;
}
.lede{ margin-top:18px; font-size:var(--t-lg); color:var(--ink-2); max-width:34ch; line-height:1.65; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

.board{
  border:1px solid var(--ink);
  border-radius:var(--r-md);
  background-color:var(--surface);
  background-image:
    linear-gradient(var(--rule-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size:12px 12px;
  background-position:-1px -1px;
  overflow:hidden;
}
.board__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 18px;
  background:var(--ink); color:#fff;
}
.board__head h2{ font-family:var(--font-display); font-size:var(--t-lg); font-weight:600; }
.board__head p{ font-size:var(--t-sm); color:#C2D1C8; }
.board__scroll{ overflow-x:auto; padding:14px 18px 6px; }
.board__grid{
  display:grid;
  grid-template-columns:minmax(120px,1.5fr) repeat(var(--cols,6), minmax(46px,1fr));
  gap:6px;
  min-width:450px;
}
.board__time{
  text-align:center; font-size:var(--t-xs); color:var(--ink-2);
  font-variant-numeric:tabular-nums; padding-bottom:2px;
}
.board__lab{
  display:flex; flex-direction:column; justify-content:center;
  padding-inline-end:8px; min-height:48px; line-height:1.35;
}
.board__lab b{ font-weight:600; font-size:var(--t-sm); }
.board__lab span{ font-size:var(--t-xs); color:var(--ink-2); }
.board__foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:10px 18px 14px;
}
.board__foot a{ font-size:var(--t-sm); font-weight:600; }
.board .slot{ min-height:48px; }

@media (max-width:960px){
  .hero{ grid-template-columns:1fr; gap:32px; }
  .lede{ max-width:46ch; }
}

/* services index */
.services{ margin-top:72px; border-top:2px solid var(--ink); }
.service{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;
  gap:8px 32px; align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--rule);
  color:inherit; text-decoration:none;
}
.service h2{ font-family:var(--font-display); font-size:var(--t-xl); font-weight:600; }
.service p{ color:var(--ink-2); max-width:56ch; }
.service__count{ font-size:var(--t-sm); color:var(--green-ink); font-weight:600; white-space:nowrap; }
.service:hover h2{ color:var(--green-ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
@media (max-width:760px){
  .service{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- Labs page ---------- */
.days{
  display:flex; gap:6px;
  overflow-x:auto; padding-bottom:6px; margin-bottom:8px;
  scrollbar-width:thin;
}
.day{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center;
  min-width:62px; padding:8px 6px;
  border:1px solid var(--rule); border-radius:var(--r-sm);
  background:var(--surface); cursor:pointer; line-height:1.25;
}
.day small{ font-size:11px; color:var(--ink-2); }
.day b{ font-size:var(--t-lg); font-weight:600; font-variant-numeric:tabular-nums; }
.day:hover{ border-color:var(--ink-2); }
.day[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.day[aria-pressed="true"] small{ color:#C2D1C8; }

.listhead{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 20px;
  margin:20px 0 8px;
}
.listhead h2{ font-size:var(--t-lg); font-weight:600; }

.labs{ border-top:2px solid var(--ink); }
.lab{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:16px 32px;
  padding:22px 0;
  border-bottom:1px solid var(--rule);
}
.lab h3{ font-size:var(--t-lg); font-weight:600; }
.meta{ font-size:var(--t-sm); color:var(--ink-2); margin-top:2px; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:10px 0 0; padding:0; }
.tags li{
  font-size:var(--t-xs); padding:2px 8px;
  background:var(--rule-2); border-radius:4px; color:var(--ink);
}
.slots{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px;
  align-self:center;
}
@media (max-width:860px){
  .lab{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .slots{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---------- Records (my bookings / my applications) ---------- */
.records{ list-style:none; margin:0; padding:0; }
.record{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) auto auto;
  gap:6px 20px; align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.record__title{ font-weight:600; }
.record__when{ font-size:var(--t-sm); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.record.is-inactive .record__title{ color:var(--ink-2); font-weight:400; }
@media (max-width:640px){
  .record{ grid-template-columns:1fr auto; }
  .record__when{ grid-column:1; }
  .record .status{ grid-column:2; grid-row:1; }
  .record .record__action{ grid-column:2; grid-row:2; }
}

.status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:500; white-space:nowrap;
}
.status::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.status--ok{ color:var(--green-ink); }
.status--off{ color:var(--ink-2); }
.status--off::before{ background:transparent; border:1.5px solid currentColor; }
.status--done{ color:var(--ink-2); }
.status--full{ color:var(--red); }

.empty{
  padding:28px 0;
  color:var(--ink-2);
  border-bottom:1px solid var(--rule);
}
.empty .btn{ margin-top:12px; }

/* ---------- Volunteer page ---------- */
.projects{ border-top:2px solid var(--ink); }
.project{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);
  gap:16px 40px;
  padding:24px 0;
  border-bottom:1px solid var(--rule);
}
.project h3{ font-size:var(--t-lg); font-weight:600; }
.project__desc{ margin-top:8px; max-width:60ch; }
.project__side{ display:flex; flex-direction:column; gap:12px; align-self:center; }
.meter{ display:flex; flex-direction:column; gap:6px; }
.meter__text{ display:flex; justify-content:space-between; gap:12px; font-size:var(--t-sm); }
.meter__text b{ font-weight:600; font-variant-numeric:tabular-nums; }
.meter__bar{
  height:10px; border-radius:2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--surface) calc(10% - 1px) 10%),
    var(--rule-2);
  overflow:hidden;
}
.meter__fill{ height:100%; background:var(--green); }
.meter--full .meter__fill{ background:var(--red); }
.project__side .btn{ align-self:flex-start; }
@media (max-width:760px){
  .project{ grid-template-columns:1fr; }
}

/* ---------- Open data ---------- */
.data{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:32px;
  align-items:start;
}
.datasets{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.dataset{
  display:block; width:100%;
  text-align:start;
  padding:16px 14px;
  border:0; border-bottom:1px solid var(--rule);
  background:none; cursor:pointer;
}
.dataset:hover{ background:var(--surface); }
.dataset[aria-current="true"]{
  background:var(--surface);
  box-shadow:inset -4px 0 0 var(--green);
}
.dataset b{ display:block; font-weight:600; font-size:var(--t-md); }
.dataset span{ display:block; font-size:var(--t-sm); color:var(--ink-2); }

.preview{
  position:sticky; top:96px;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  padding:22px;
}
.preview h2{ font-family:var(--font-display); font-size:var(--t-xl); font-weight:600; }
.preview__meta{
  display:grid; grid-template-columns:auto 1fr; gap:2px 16px;
  margin:14px 0 20px; font-size:var(--t-sm);
}
.preview__meta dt{ color:var(--ink-2); }
.preview__meta dd{ margin:0; }
.preview__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--rule); }

.bars{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.bars li{
  display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:12px; align-items:center;
  font-size:var(--t-sm);
}
.bars__track{ height:22px; background:var(--rule-2); border-radius:2px; overflow:hidden; }
.bars__fill{ height:100%; background:var(--green); border-radius:2px; }
.bars li:first-child .bars__fill{ background:var(--ink); }
.bars__val{ font-variant-numeric:tabular-nums; color:var(--ink-2); min-width:7ch; text-align:end; }

details.raw{ margin-top:16px; font-size:var(--t-sm); }
details.raw summary{ cursor:pointer; color:var(--green-ink); }
.table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:var(--t-sm); }
.table th,.table td{ text-align:start; padding:8px 10px; border-bottom:1px solid var(--rule); vertical-align:middle; }
.table th{ font-size:var(--t-xs); color:var(--ink-2); font-weight:500; }
.table td.num, .table th.num{ text-align:end; }

@media (max-width:860px){
  .data{ grid-template-columns:1fr; }
  .preview{ position:static; }
}

/* ---------- Admin ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--rule); margin-bottom:28px; overflow-x:auto; }
.tab{
  position:relative;
  padding:10px 16px; background:none; border:0; cursor:pointer;
  color:var(--ink-2); font-size:var(--t-sm); white-space:nowrap;
}
.tab[aria-selected="true"]{ color:var(--ink); font-weight:600; }
.tab[aria-selected="true"]::after{
  content:""; position:absolute; inset-inline:12px; bottom:-1px; height:3px; background:var(--green);
}
.admin{
  display:grid; grid-template-columns:minmax(280px, 1fr) minmax(0, 1.6fr); gap:40px; align-items:start;
}
.panel{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md); padding:22px; }
.panel h2{ font-size:var(--t-lg); font-weight:600; margin-bottom:4px; }
.tablewrap{ overflow-x:auto; }
.admin__foot{ margin-top:40px; padding-top:20px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.admin__foot p{ font-size:var(--t-sm); color:var(--ink-2); max-width:60ch; }
@media (max-width:900px){ .admin{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.form{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.form__row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form__actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.form__hint{ font-size:var(--t-xs); color:var(--ink-2); }
.form__error{
  font-size:var(--t-sm); color:var(--red);
  background:var(--red-wash); border-radius:var(--r-sm);
  padding:8px 12px;
}
.demo{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:var(--t-sm); color:var(--ink-2); }

/* ---------- Dialogs ---------- */
.dialog{
  width:min(460px, calc(100% - 32px));
  padding:0;
  border:1px solid var(--ink);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--ink);
}
.dialog::backdrop{ background:rgba(19,36,29,.45); }
.dialog__inner{ padding:22px; }
.dialog__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dialog__head h2{ font-family:var(--font-display); font-size:var(--t-xl); font-weight:600; }
.dialog__reason{ margin-top:6px; color:var(--ink-2); font-size:var(--t-sm); }
.dialog__body{ margin:14px 0 22px; color:var(--ink-2); }
.dialog__body strong{ color:var(--ink); font-weight:600; }
.ticket{
  margin-top:12px; padding:14px 16px;
  border:1px dashed var(--ink-2); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink);
}
.ticket b{ display:block; font-weight:600; }
.ticket span{ font-size:var(--t-sm); color:var(--ink-2); }

/* ---------- Toast + stamp ---------- */
.toast{
  position:fixed; z-index:60;
  bottom:20px; inset-inline-start:20px;
  max-width:min(420px, calc(100% - 40px));
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  background:var(--ink); color:#fff;
  border-radius:var(--r-md);
  font-size:var(--t-sm);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-show{ opacity:1; transform:none; pointer-events:auto; }
.stamp{
  flex-shrink:0;
  display:grid; place-items:center;
  width:46px; height:46px;
  border:2.5px solid #FF6B7F; border-radius:50%;
  outline:1px solid #FF6B7F; outline-offset:-6px;
  color:#FF8C9C;
  font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  transform:rotate(-14deg);
}
.toast.is-show .stamp{ animation:stamp .42s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp{
  0%{ transform:rotate(-14deg) scale(2.2); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:rotate(-14deg) scale(1); opacity:1; }
}

/* ---------- Misc ---------- */
.notice{
  max-width:56ch;
  padding:28px 0;
}
.notice h1{ font-family:var(--font-display); font-size:var(--t-2xl); font-weight:600; outline:none; }
.notice p{ margin-top:10px; color:var(--ink-2); }
.notice .btn{ margin-top:20px; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}