/* ============================================================
   SocMed Admin — standalone module styles.
   Only loaded on /socmed/* pages (see index.php). Reuses app.css
   tokens (--bg, --text, --accent, etc.) and app.css's .entry-shell /
   .entry-card / .entry-form classes for the login screen — this file
   adds only what app.css does not already define.
   ============================================================ */

:root{
  --sm-panel-tint: #f8f1f3;
  --sm-ok: #3f8f6a;
  --sm-ok-soft: #e3f2ea;
  --sm-warn: #c98a2e;
  --sm-warn-soft: #faf0dd;
  --sm-danger-soft: #f8e6e6;
}

body.socmed-landing-screen,
body.socmed-login-screen,
body.socmed-app-screen {
  background: var(--bg);
}

/* ---------- Landing ----------
   The Admin Portal's front door. It used to carry the clinic's team photo
   on a white wash, which made it read as the Clinic Portal's landing with
   different words — and the photo is the clinic's own marketing image, not
   this team's. It stands on the same Ember backdrop the sign-in screen does,
   so the two are one world: the door and the room behind it.

   Every colour comes from the shared token block above, so a change there
   reaches both screens.
   ---------------------------------------------------- */
.socmed-landing-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ember-ground);
}

.socmed-landing-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The same four drifting layers as the sign-in screen, on the same uneven
   cycles so they never line up into a visible beat. */
.socmed-landing-shell .socmed-entry-layer {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.socmed-landing-shell .socmed-entry-layer-1 {
  inset: -20% -20% auto -20%;
  height: 88%;
  background: radial-gradient(62% 66% at var(--ember-white-at),
    rgba(var(--ember-white), var(--ember-white-alpha)) 0%,
    rgba(var(--ember-white), calc(var(--ember-white-alpha) * 0.34)) 42%,
    rgba(var(--ember-white), 0) var(--ember-white-reach));
  animation: socmed-drift-d var(--ember-speed-1) linear infinite;
}
.socmed-landing-shell .socmed-entry-layer-2 {
  inset: auto -22% -24% -22%;
  height: 78%;
  background: radial-gradient(58% 60% at var(--ember-pink-at),
    rgba(var(--ember-pink), var(--ember-pink-alpha)) 0%,
    rgba(var(--ember-pink), calc(var(--ember-pink-alpha) * 0.32)) 44%,
    rgba(var(--ember-pink), 0) var(--ember-pink-reach));
  animation: socmed-drift-a var(--ember-speed-2) linear infinite;
}
.socmed-landing-shell .socmed-entry-layer-3 {
  inset: -10% -16% auto auto;
  width: 70%;
  height: 60%;
  background: radial-gradient(50% 50% at var(--ember-gold-at),
    rgba(var(--ember-gold), var(--ember-gold-alpha)) 0%,
    rgba(var(--ember-gold), 0) var(--ember-gold-reach));
  mix-blend-mode: screen;
  animation: socmed-drift-b var(--ember-speed-3) linear infinite;
}
.socmed-landing-shell .socmed-entry-layer-4 {
  inset: auto -10% -8% -10%;
  height: 66%;
  background: linear-gradient(to top,
    rgba(var(--ember-brown), var(--ember-brown-alpha)) 0%,
    rgba(var(--ember-brown), calc(var(--ember-brown-alpha) * 0.65)) 30%,
    rgba(var(--ember-brown), calc(var(--ember-brown-alpha) * 0.19)) 62%,
    rgba(var(--ember-brown), 0) 100%);
  animation: socmed-drift-c var(--ember-speed-4) linear infinite;
}

.socmed-landing-shell .socmed-entry-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--ember-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.socmed-landing-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 24px;
}

.socmed-landing-logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ember-logo-bg);
  border: 0;
  box-shadow: 0 10px 34px rgba(var(--ember-brown), 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.socmed-landing-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The portal's name, above the company's: a person arriving here chose this
   door from the hub, and the first thing to confirm is that they opened the
   right one. */
.socmed-landing-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--ember-gold));
}

.socmed-landing-wordmark {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.2;
  color: var(--ember-ink-on-dark);
  text-wrap: balance;
}

.socmed-landing-rule {
  width: 42px;
  height: 1px;
  background: rgba(var(--ember-gold), 0.65);
  margin: 2px 0;
}

.socmed-landing-tagline {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember-ink-on-dark-muted);
}

.socmed-landing-login-button {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border: 0;
  border-radius: var(--ember-card-radius);
  background: var(--ember-button);
  color: var(--ember-button-ink);
  font-family: "Jost", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 30px;
  margin-top: 12px;
  box-shadow: 0 10px 30px rgba(var(--ember-brown), 0.4);
  transition: background 0.2s ease;
}

.socmed-landing-login-button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.socmed-landing-login-button:hover,
.socmed-landing-login-button:focus-visible {
  background: rgba(var(--ember-gold), 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .socmed-landing-shell .socmed-entry-layer { animation: none; }
}

/* ---------- Login (adopts .entry-shell etc. from app.css) ---------- */
/* ============================================================
   Admin Portal — login backdrop ("Ember")
   ============================================================
   The Clinic Portal's entry screen is white with pink petals. This module
   borrowed it wholesale, so the two portals were indistinguishable at the
   one moment it matters most which of them you are signing in to.

   So the Admin Portal keeps the same card, the same form and the same IDs,
   and changes only what it stands on: gold as the ground, lifted by white
   above and pink below, closed by brown at the foot. Four gradient layers,
   each with its own origin, angle and reach, so the screen reads as depth
   rather than as one flat wash; each drifts on its own cycle, which is what
   makes the movement read as liquid rather than as a loop.

   EVERYTHING IS A TOKEN. To change the look, edit the block below and
   nothing else — the rules underneath only ever refer to these names, so a
   new colour, a slower drift or a different corner is a one-line change
   rather than a hunt through the file.
   ============================================================ */

.socmed-entry-shell,
.socmed-landing-shell {
  /* ---- the four colours ----
     Gold is the logo's own: read from the lettering in apple-touch-icon.png
     rather than picked by eye. */
  --ember-white: 255, 253, 251;
  --ember-pink: 240, 205, 212;
  --ember-gold: 201, 160, 90;
  --ember-brown: 26, 20, 17;
  --ember-ground: #6b4f23;

  /* ---- how strong each layer is ----
     Raise to deepen a colour, lower to let the ground through. */
  --ember-white-alpha: 0.82;
  --ember-pink-alpha: 0.68;
  --ember-gold-alpha: 0.9;
  --ember-brown-alpha: 0.96;

  /* ---- where each layer comes from ----
     The origin of its radial gradient, as x/y across the layer's own box. */
  --ember-white-at: 36% 24%;
  --ember-pink-at: 66% 84%;
  --ember-gold-at: 74% 28%;

  /* ---- how far each reaches before it is gone ---- */
  --ember-white-reach: 76%;
  --ember-pink-reach: 78%;
  --ember-gold-reach: 72%;

  /* ---- how slowly each drifts ----
     Deliberately uneven: equal speeds would let the four line up, and the
     motion would resolve into a visible beat. Kept the same ~14:19:16:22
     ratio when speeding these up, so they still never sync into a beat. */
  --ember-speed-1: 7s;
  --ember-speed-2: 9.5s;
  --ember-speed-3: 8s;
  --ember-speed-4: 11s;

  /* ---- the card on top ----
     A light panel with black text, standing on the dark drifting ground.
     The card has to be its own surface rather than a tint of whatever is
     passing behind it: at 0.42 opacity it followed the gradient, and over
     the white layer the quieter lines fell to around 1:1 against it and
     disappeared. So it is near-opaque and holds its own ground whatever
     drifts beneath. */
  --ember-card-bg: rgba(252, 250, 247, 0.95);
  --ember-card-blur: 20px;
  --ember-card-radius: 3px;
  /* On the light card. */
  --ember-ink: #16110e;
  --ember-ink-muted: #3d342e;
  /* On the dark ground, where the landing's text sits with no panel under
     it. Keeping one pair for both surfaces would make one of them unreadable
     whichever way it was set. */
  --ember-ink-on-dark: #f6f1ea;
  --ember-ink-on-dark-muted: #cfc3b6;
  /* The card's own edge, where gold reads as a frame against the dark
     ground behind it. */
  --ember-line: rgba(var(--ember-gold), 0.5);
  /* The field's edge, which is INSIDE the light card. Gold at 0.55 came out
     at about 2.3:1 there — the box a person types into needs a line they
     can actually see, so this one is drawn in the text's own colour. */
  --ember-line-soft: rgba(22, 17, 14, 0.28);
  /* A shade below the panel, so the box a person types into reads as a
     well rather than as part of the panel. */
  --ember-field-bg: rgba(22, 17, 14, 0.055);
  --ember-button: rgb(var(--ember-gold));
  --ember-button-ink: #140f0b;
  /* The logo is a dark circle: on a light panel it needs no ground of its
     own, so this is transparent and the artwork carries itself. */
  --ember-logo-bg: transparent;

  /* ---- the grain ----
     Four smooth gradients band visibly on a phone; the stepping is what
     makes a gradient look cheap. Set to 0 to remove it. */
  --ember-grain: 0.055;

  /* Layout comes from app.css's .entry-shell; only the ground changes. */
  background: var(--ember-ground);
}

/* The four layers. Transform is the only thing that animates — the gradients
   themselves never change, so the phone composites rather than repainting,
   and a login screen left open all afternoon costs nothing. */
.socmed-entry-shell .socmed-entry-layer {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

/* 1 — white, high and left: the light this screen is lit by. */
.socmed-entry-shell .socmed-entry-layer-1 {
  inset: -20% -20% auto -20%;
  height: 88%;
  background: radial-gradient(62% 66% at var(--ember-white-at),
    rgba(var(--ember-white), var(--ember-white-alpha)) 0%,
    rgba(var(--ember-white), calc(var(--ember-white-alpha) * 0.34)) 42%,
    rgba(var(--ember-white), 0) var(--ember-white-reach));
  animation: socmed-drift-d var(--ember-speed-1) linear infinite;
}

/* 2 — pink, low and right: the one place the clinic's colour surfaces here. */
.socmed-entry-shell .socmed-entry-layer-2 {
  inset: auto -22% -24% -22%;
  height: 78%;
  background: radial-gradient(58% 60% at var(--ember-pink-at),
    rgba(var(--ember-pink), var(--ember-pink-alpha)) 0%,
    rgba(var(--ember-pink), calc(var(--ember-pink-alpha) * 0.32)) 44%,
    rgba(var(--ember-pink), 0) var(--ember-pink-reach));
  animation: socmed-drift-a var(--ember-speed-2) linear infinite;
}

/* 3 — gold, upper right, on screen blend so it reads as light rather than
   paint. This is the layer the backdrop is named for. */
.socmed-entry-shell .socmed-entry-layer-3 {
  inset: -10% -16% auto auto;
  width: 70%;
  height: 60%;
  background: radial-gradient(50% 50% at var(--ember-gold-at),
    rgba(var(--ember-gold), var(--ember-gold-alpha)) 0%,
    rgba(var(--ember-gold), 0) var(--ember-gold-reach));
  mix-blend-mode: screen;
  animation: socmed-drift-b var(--ember-speed-3) linear infinite;
}

/* 4 — brown at the foot, so the card sits on weight instead of floating. */
.socmed-entry-shell .socmed-entry-layer-4 {
  inset: auto -10% -8% -10%;
  height: 66%;
  background: linear-gradient(to top,
    rgba(var(--ember-brown), var(--ember-brown-alpha)) 0%,
    rgba(var(--ember-brown), calc(var(--ember-brown-alpha) * 0.65)) 30%,
    rgba(var(--ember-brown), calc(var(--ember-brown-alpha) * 0.19)) 62%,
    rgba(var(--ember-brown), 0) 100%);
  animation: socmed-drift-c var(--ember-speed-4) linear infinite;
}

.socmed-entry-shell .socmed-entry-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--ember-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Each layer travels a closed loop rather than sliding between two points
   and reversing. Two points with `alternate` is a pendulum: it stops dead at
   both ends, and at 25 seconds for six percent of travel the stop is most of
   what there is to see — which is why this read as not moving at all. A loop
   never stops, and the four loops are different shapes, so where they overlap
   keeps changing and the colour appears to flow rather than slide. */
@keyframes socmed-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(14%, -6%, 0) scale(1.14); }
  50%  { transform: translate3d(6%, 10%, 0) scale(1.06); }
  75%  { transform: translate3d(-10%, 4%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes socmed-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  25%  { transform: translate3d(-12%, 8%, 0) scale(1); }
  50%  { transform: translate3d(4%, 14%, 0) scale(1.16); }
  75%  { transform: translate3d(11%, -5%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1.08); }
}
@keyframes socmed-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  25%  { transform: translate3d(9%, -9%, 0) scale(1.15); }
  50%  { transform: translate3d(-7%, -3%, 0) scale(1.02); }
  75%  { transform: translate3d(-4%, 9%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1.05); }
}
@keyframes socmed-drift-d {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(-9%, 7%, 0) scale(1.12); }
  50%  { transform: translate3d(8%, 11%, 0) scale(1.2); }
  75%  { transform: translate3d(12%, -4%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* The card, on a dark ground now. The clinic's white glass would disappear
   into the gold, so this one is dark and the border carries the gold. */
.socmed-entry-shell .entry-card {
  background: var(--ember-card-bg);
  border: 1px solid var(--ember-line);
  border-radius: var(--ember-card-radius);
  -webkit-backdrop-filter: blur(var(--ember-card-blur)) saturate(1.1);
  backdrop-filter: blur(var(--ember-card-blur)) saturate(1.1);
  box-shadow: 0 20px 60px rgba(var(--ember-brown), 0.34);
  color: var(--ember-ink);
}
/* app.css sweeps a highlight across the clinic's glass card; on this ground
   it reads as a smear. */
.socmed-entry-shell .entry-card::before { display: none; }

.socmed-entry-shell .entry-greeting { color: var(--ember-ink); }
.socmed-entry-shell .entry-tagline { color: var(--ember-ink-muted); }
.socmed-entry-shell .entry-divider { background: rgba(var(--ember-gold), 0.28); }

/* Black, like the rest of the card's text. Gold at this size on a light
   panel came out at about 2.3:1 — a decorative colour where a person needs
   to read which box is which. */
.socmed-entry-shell .entry-field label {
  color: var(--ember-ink-muted);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.socmed-entry-shell .entry-field input {
  background: var(--ember-field-bg);
  border: 1px solid var(--ember-line-soft);
  border-radius: var(--ember-card-radius);
  color: var(--ember-ink);
}
/* Clearly a prompt, not a value: at full strength an empty field reads as
   one that has already been filled in. */
.socmed-entry-shell .entry-field input::placeholder {
  color: var(--ember-ink-muted);
  opacity: 0.45;
}
.socmed-entry-shell .entry-field input:focus {
  border-color: rgba(var(--ember-gold), 0.7);
  outline: none;
}

.socmed-entry-shell .entry-submit {
  background: var(--ember-button);
  color: var(--ember-button-ink);
  border: 0;
  border-radius: var(--ember-card-radius);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.socmed-entry-shell .entry-submit:hover {
  background: rgba(var(--ember-gold), 0.85);
}

.socmed-entry-shell .entry-helper-row,
.socmed-entry-shell .entry-message { color: var(--ember-ink-muted); }
/* Outside the card, on the moving ground — so it takes the dark-ground ink. */
.socmed-entry-shell .entry-backlink { color: var(--ember-ink-on-dark-muted); }
.socmed-entry-shell .entry-backlink:hover,
.socmed-entry-shell .entry-backlink:focus-visible { color: var(--ember-ink-on-dark); }

/* The logo is a dark circle; on this ground it needs its own edge. */
/* No ring and no ground: the wrapper is a square box, so a border drawn on
   it came out as a square around a round mark — which is what made the logo
   look boxed in. app.css already rounds the image itself, and the artwork's
   own corners are transparent, so the circle carries itself. */
.socmed-entry-shell .entry-logo-wrap {
  background: var(--ember-logo-bg);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* The colour stays; only the drifting stops. Each layer rests where its
     own styles put it, so nothing disappears. */
  .socmed-entry-shell .socmed-entry-layer { animation: none; }
}


/* ============================================================
   Workspace — lifted from the approved mockup (artifact v15) so the
   production screens look and behave exactly as signed off.
   ============================================================ */

  /* Palette, shadows and safe-area insets come from app.css — only the two
     tokens app.css does not define are declared here. */
  :root{
    --nav-h: 64px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --panel-tint:#f8f1f3;
    --ok:#3f8f6a; --ok-soft:#e3f2ea;
    --warn:#c98a2e; --warn-soft:#faf0dd;
    --danger-soft:#f8e6e6;
    --line-strong:#d8c7cc;
    --accent-soft-strong:#efd8de;
  }
  .socmed-app-shell *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  /* the [hidden] attribute must always win, regardless of any other
     display:flex/grid/block rule elsewhere in this file with equal or
     higher specificity (a recurring CSS gotcha: same-specificity rules
     are decided by source order, so a later .foo{display:flex} can
     silently defeat [hidden] on the same element) */
  [hidden]{display:none !important;}
  /* The workspace owns the viewport only on its own screen; the landing and
     login screens keep the portal's normal page flow from app.css. */
  body.socmed-app-screen{
    overflow:hidden;
    height:100vh;height:100dvh;
  }
  body.socmed-app-screen .page-shell,
  body.socmed-app-screen .app-main{
    height:100%;min-height:0;padding:0;margin:0;max-width:none;
  }

  @media (prefers-reduced-motion: reduce){
    /* Shortening a fade to 0.001ms is not the same as removing it: an animation
       with fill-mode:both can settle on its first frame instead of its last, and
       app.css's entryScreenIn starts at opacity 0 — which left the login screen
       blank for anyone with Reduce Motion on. Cancel the animation outright and
       let the element keep its own styles. */
    *{animation:none !important;transition-duration:0.001ms !important;}
  }

  /* ---- global tap feedback: every interactive element presses down
     slightly and springs back — subtle, fast, no overshoot ---- */
  button, a, .chip-filter, .card, .note, .inq-row, .booking-card, .dp-card,
  .landing-login-button, .entry-submit, .bottom-nav button, .fab, .topbar-icon{
    transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  button:active, a:active, .chip-filter:active, .landing-login-button:active,
  .entry-submit:active, .fab:active, .topbar-icon:active{
    transform:scale(0.94);
  }
  .card:active, .note:active{ transform:scale(0.985); }
  .btn:active{ transform:scale(0.97); filter:brightness(0.96); }
  .bottom-nav button:active .nav-circle-inner,
  .bottom-nav button:active svg{ transform:scale(0.88); }

  /* ---- ripple: a small expanding circle from the tap point ---- */
  .ripple-el{position:relative;overflow:hidden;}
  .ripple{
    position:absolute;border-radius:50%;
    background:rgba(180,90,112,0.28);
    transform:scale(0);
    animation:ripple-expand .5s ease-out forwards;
    pointer-events:none;
  }
  @keyframes ripple-expand{
    to{ transform:scale(1); opacity:0; }
  }

  
  /* ---- workspace shell: fills whatever the page gives it ---- */
  .socmed-app-shell{
    display:flex;flex-direction:column;
    height:100%;
    position:relative;
    background:var(--bg);
  }
/* ============= APP WORKSPACE (fluid, full viewport, responsive content) ============= */

  /* top bar */
  .topbar{
    padding:max(14px, var(--safe-t)) 18px 12px;
    display:flex;align-items:center;gap:10px;
    border-bottom:1px solid var(--line);
    flex-shrink:0;
  }

  /* app.css loads first, and its .topbar is a different component that happens
     to share the name: a sticky glass bar on a 560px-minimum grid. Worse, it
     pins that bar with position:fixed !important and z-index:1800 on touch
     screens under 1180px — phones and tablets, which is most of this
     workspace's traffic and none of a desktop test. There the clinic's topbar
     floated above this module's own, landing on top of the open side menu:
     two titles printed over each other, a stray hamburger beside the avatar.
     It never showed on a desktop browser because the query needs a coarse
     pointer.

     So the workspace states its own layout for the bar, strongly enough to
     win, and only inside body.socmed-app-screen so the Clinic Portal keeps
     the behaviour this was written for. */
  body.socmed-app-screen .socmed-app-shell .topbar{
    position:static !important;
    top:auto !important;left:auto !important;right:auto !important;
    z-index:auto !important;
    width:auto !important;max-width:none !important;
    min-height:0 !important;margin:0 !important;
    grid-template-columns:none !important;grid-template-rows:none !important;
    border:0 !important;border-bottom:1px solid var(--line) !important;
    border-radius:0 !important;
    background:none !important;box-shadow:none !important;
    backdrop-filter:none !important;
    transform:none !important;will-change:auto !important;
    overflow:visible !important;
    display:flex !important;
  }
  /* The same query reserves room for that fixed bar by padding .app-main; the
     workspace fills the viewport itself, so the reserved space would show up
     as a gap above the topbar. */
  body.socmed-app-screen .app-main{
    padding-top:0 !important;
  }
  .topbar-title{font-size:clamp(15px,1.6vw,18px);font-weight:700;flex:1;}
  .topbar-icon{width:36px;height:36px;border-radius:9px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0;background:none;cursor:pointer;padding:0;}
  .topbar-icon svg{width:17px;height:17px;}

  .menu-btn{
    width:36px;height:36px;border-radius:10px;border:none;background:none;
    display:flex;align-items:center;justify-content:center;color:var(--text);
    flex-shrink:0;cursor:pointer;padding:0;appearance:none;
  }
  .menu-btn svg{width:21px;height:21px;stroke-width:2;}

  /* ---- drawer menu ---- */
  .drawer-backdrop{
    position:fixed;inset:0;background:rgba(43,30,33,0.42);z-index:90;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
    display:none;
  }
  .drawer-backdrop.show{display:block;opacity:1;pointer-events:auto;}
  /* Every other panel here opens with display:none -> display:*, so it is
     either fully present or not present at all. The drawer instead stayed in
     the layout permanently and slid in on a transform, which cost it twice:
     closed, it sat off-screen still taking taps; open, its close button was
     only where the finger expects once the 0.3s slide had finished — and if
     that slide does not run, the X never arrives at all.

     So the drawer now opens the same way its siblings do. display carries the
     open/closed state, and the slide is a keyframe played on an element that
     is already in the right place, so the X is tappable from the first frame
     whether or not the animation runs. */
  .drawer{
    position:fixed;top:0;bottom:0;left:0;z-index:91;
    width:min(84vw, 320px);
    background:#fff;box-shadow:0 0 40px rgba(43,30,33,0.22);
    padding:max(20px, var(--safe-t)) 18px calc(20px + var(--safe-b));
    overflow-y:auto;flex-direction:column;
    display:none;
  }
  .drawer.show{
    display:flex;
    /* A short fade, not a slide. The slide had to move the panel to animate
       it, which meant that for its first frames the X sat off the left edge:
       an early tap hit nothing, and a run that was skipped or stalled left
       the X off-screen for good. A fade leaves every control exactly where
       the finger expects from the first frame, and still reads as the menu
       arriving. entryScreenIn taught the same lesson from the other side — a
       login card settled on its first frame at opacity 0 and the page looked
       blank — so this one also carries no fill-mode. */
    animation:drawerIn .16s ease-out;
  }
  @keyframes drawerIn{from{opacity:0;}to{opacity:1;}}
  .drawer-header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  .drawer-avatar{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),var(--accent-strong));
    color:#fff;font-size:17px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .drawer-name{font-size:14.5px;font-weight:700;}
  .drawer-role{font-size:11.5px;color:var(--muted);margin-top:1px;}
  .drawer-close{margin-left:auto;}

  .drawer-section-label{
    font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:16px 4px 6px;
  }
  .drawer-section-label:first-of-type{margin-top:4px;}
  .drawer-nav{display:flex;flex-direction:column;}
  .drawer-item{
    display:flex;align-items:center;gap:13px;width:100%;
    background:none;border:none;cursor:pointer;font-family:inherit;
    padding:11px 8px;border-radius:12px;text-align:left;min-height:46px;
    color:var(--text);font-size:13.5px;font-weight:600;
  }
  .drawer-item svg{width:19px;height:19px;stroke-width:1.8;stroke:var(--muted);fill:none;flex-shrink:0;}
  .drawer-item.drawer-item-danger{color:var(--danger);}
  .drawer-item.drawer-item-danger svg{stroke:var(--danger);}
  .drawer-item-active{background:var(--accent-soft);}
  .drawer-item-active svg{stroke:var(--accent-strong);}

  /* main scroll area — the width the content wraps to is capped so it reads
     well on a tablet, but always fills small phone screens completely */
  .content{
    flex:1;min-height:0;overflow-y:auto;
    padding:16px 16px calc(20px + var(--safe-b));
  }
  /* A screen rests visible, and the animation only plays it in. It used to
     rest at opacity:0 and rely on `animation: ... forwards` to bring it up,
     which meant an animation that never ran left the whole screen blank —
     the same fault that once blanked the login card, where entryScreenIn
     started at opacity 0 and Reduce Motion cancelled it. Reduce Motion is
     handled here by `animation:none`, so the resting state has to be the
     finished state, not the first frame. */
  .screen{
    display:none;max-width:920px;margin:0 auto;
  }
  .screen.active{
    display:block;
    animation:screen-in .22s ease;
  }
  /* declared last so [hidden] (used by the skeleton-loading swap) always
     wins over .screen.active{display:block} above, same-specificity rule */
  .screen[hidden]{display:none;}
  @keyframes screen-in{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
  }

  .chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip-filter{
    flex-shrink:0;font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;
    border:1px solid var(--line-strong);background:#fff;color:var(--muted);white-space:nowrap;cursor:pointer;
    min-height:36px;
  }
  .chip-filter{transition:transform .15s ease, background-color .18s ease, color .18s ease, border-color .18s ease;}
  .chip-filter.active{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;border-color:transparent;animation:chip-pop .22s ease;}
  @keyframes chip-pop{
    0%{transform:scale(0.92);}
    60%{transform:scale(1.04);}
    100%{transform:scale(1);}
  }

  .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:12px;}

  /* Rows that open a detail sheet are <button>s so they are keyboard-reachable,
     which means they need the browser's button chrome cleared: without this each
     card shrink-wraps its text instead of filling the card, and they overlap.
     Declared before the component rules below so those still win. */
  .booking-card, .cal-cell, .dp-shot, .dash-urgent-row, .dash-card-tappable{
    display:block;width:100%;
    font:inherit;color:inherit;text-align:left;
    background:none;border:none;margin:0;
    -webkit-appearance:none;appearance:none;
    cursor:pointer;
  }

  /* ============= DASHBOARD ============= */
  .dash-greeting{margin-bottom:16px;}
  .dash-greeting-text{font-size:clamp(17px,2vw,20px);font-weight:700;}
  .dash-greeting-date{font-size:12px;color:var(--muted);margin-top:2px;}

  .dash-urgent-card{
    background:var(--panel-tint);border:1px solid var(--line);border-radius:14px;
    padding:6px 4px;margin-bottom:18px;overflow:hidden;
  }
  .dash-urgent-title{
    display:flex;align-items:center;gap:7px;
    font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--accent-strong);padding:8px 12px 6px;
  }
  .dash-urgent-title svg{width:14px;height:14px;stroke-width:2;}
  .dash-urgent-row{
    width:100%;display:flex;align-items:center;gap:10px;
    background:none;border:none;border-top:1px solid var(--line);cursor:pointer;
    padding:11px 12px;text-align:left;font-family:inherit;min-height:44px;
  }
  .dash-urgent-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .dash-urgent-dot.new{background:var(--danger);}
  .dash-urgent-dot.warn{background:var(--warn);}
  .dash-urgent-dot.danger{background:var(--danger);}
  .dash-urgent-label{flex:1;font-size:13px;font-weight:600;color:var(--text);}
  .dash-urgent-chevron{color:var(--muted);font-size:16px;flex-shrink:0;}

  .dash-period-row{
    display:flex;gap:6px;background:var(--panel-tint);border-radius:12px;padding:4px;margin-bottom:18px;
  }
  .dash-period{
    flex:1;border:none;background:none;cursor:pointer;
    font-size:12.5px;font-weight:600;color:var(--muted);
    padding:9px 6px;border-radius:9px;min-height:38px;
  }
  .dash-period.active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(43,30,33,0.1);}

  .dash-section-label{
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:0 2px 8px;
  }
  .dash-section-label:not(:first-of-type){margin-top:22px;}

  .dash-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;margin-bottom:4px;
  }
  .dash-grid-4{grid-template-columns:repeat(2, 1fr);}
  @media (min-width: 480px){
    .dash-grid-4{grid-template-columns:repeat(3, 1fr);}
  }
  @media (min-width: 720px){
    .dash-grid{grid-template-columns:repeat(4, 1fr);}
    .dash-grid-4{grid-template-columns:repeat(5, 1fr);}
  }
  .dash-card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:14px 12px;text-align:center;
    font-family:inherit;position:relative;width:100%;appearance:none;
  }
  .dash-card-tappable{cursor:pointer;}
  .dash-card-tappable:hover{border-color:var(--line-strong);}
  .dash-card-wide{grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:10px;}
  .dash-num{font-size:clamp(20px,3vw,26px);font-weight:700;color:var(--text);line-height:1.1;transition:opacity .15s ease;}
  .dash-label{font-size:10.5px;color:var(--muted);margin-top:4px;font-weight:600;}
  .dash-card-ok .dash-num{color:var(--ok);}
  .dash-card-warn .dash-num{color:var(--warn);}
  .dash-card-danger .dash-num{color:var(--danger);}

  .dash-trend{
    font-size:10px;font-weight:700;margin-top:5px;
    display:inline-flex;align-items:center;gap:2px;
  }
  .dash-trend.up{color:var(--ok);}
  .dash-trend.down{color:var(--danger);}
  .dash-trend.flat{color:var(--muted);}
  .dash-trend.up::before{content:"▲";font-size:7px;}
  .dash-trend.down::before{content:"▼";font-size:7px;}
  .dash-trend.flat::before{content:"—";font-size:8px;}
  .dash-card-wide .dash-trend{margin-top:0;margin-left:auto;}

  /* on wider screens (tablet+), let list-style rows flow as a 2-column grid
     inside their card, so a tablet doesn't show one long single column */
  @media (min-width: 720px){
    #logList,
    [data-screen-panel="bookings"] .card,
    [data-screen-panel="downpayments"] .card{
      display:grid;grid-template-columns:1fr 1fr;align-items:start;
    }
    #logList[hidden],
    [data-screen-panel="bookings"] .card[hidden],
    [data-screen-panel="downpayments"] .card[hidden]{
      display:none;
    }
    .inq-row, .booking-card, .dp-card{border-bottom:1px solid var(--line);}
  }

  .btn{font-size:14px;font-weight:600;padding:12px 16px;border-radius:11px;border:1px solid transparent;
    background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff;width:100%;text-align:center;cursor:pointer;
    min-height:44px;display:flex;align-items:center;justify-content:center;}
  .btn.ghost{background:#fff;border-color:var(--line-strong);color:var(--text);}
  .btn:disabled{opacity:.7;cursor:default;}
  .btn.ghost:disabled .btn-spinner{border-color:rgba(43,30,33,0.25);border-top-color:var(--text);}
  /* Equal halves, and a label like "Confirm transfer" stays on one line rather
     than wrapping and making one button taller than its neighbour. */
  .btn-row{display:flex;gap:8px;}
  .btn-row > .btn{flex:1 1 0;min-width:0;white-space:nowrap;}
  .btn-row .btn{flex:1;}

  .fab{
    position:fixed;right:max(18px, calc(50vw - 460px + 18px));
    bottom:calc(var(--nav-h) + 40px + var(--safe-b));
    z-index:40;
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-strong));
    color:#fff;font-size:26px;font-weight:400;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 26px -6px rgba(180,90,112,0.55);
    border:none;cursor:pointer;
    transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
  }
  .fab:active{transform:scale(0.9) rotate(45deg);}
  [data-screen="composer"] .fab,
  [data-screen="composer"] .bottom-nav-wrap{display:none;}

  .toast{
    position:fixed;left:50%;bottom:calc(28px + var(--safe-b));transform:translateX(-50%) translateY(8px) scale(0.94);
    background:#2b1e21;color:#fff;font-size:13px;font-weight:600;
    padding:11px 20px;border-radius:999px;z-index:70;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
    white-space:nowrap;
    display:flex;align-items:center;gap:7px;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;}
  .toast-check{
    width:16px;height:16px;border-radius:50%;background:var(--ok);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .toast-check svg{width:10px;height:10px;stroke:#fff;stroke-width:3;fill:none;}

  .toast.toast-error{background:var(--danger);white-space:normal;max-width:calc(100vw - 48px);}
  .toast-error-icon{width:16px;height:16px;flex-shrink:0;}
  .toast-error-icon svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;}
  .toast-retry{
    appearance:none;border:1px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.15);
    color:#fff;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;
    cursor:pointer;flex-shrink:0;margin-left:2px;
  }

  .btn-spinner{
    display:inline-block;width:15px;height:15px;
    border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;
    animation:btn-spin .6s linear infinite;
  }
  @keyframes btn-spin{ to{ transform:rotate(360deg); } }

  .composer{padding:16px;max-width:640px;margin:0 auto;}
  .composer-title{font-size:14px;font-weight:700;margin-bottom:2px;}
  .composer-hint{font-size:12px;color:var(--muted);margin-bottom:12px;}
  .field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
  .field span{font-size:11px;font-weight:600;color:var(--muted);}
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:14px;color:var(--text);
    padding:11px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;resize:vertical;
    min-height:44px;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
  }
  .field textarea{min-height:90px;}

  .inq-row{padding:14px 16px;border-bottom:1px solid var(--line);background-color:transparent;transition:background-color .6s ease;}
  .inq-row:last-child{border-bottom:none;}
  .inq-row.row-enter{opacity:0;transform:translateY(-8px);transition:opacity .3s ease, transform .3s ease;}
  .inq-row.row-enter.row-enter-active{opacity:1;transform:translateY(0);background-color:var(--accent-soft);}
  .inq-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:5px;}
  .inq-name{font-size:14px;font-weight:700;}
  .inq-time{font-size:10.5px;color:var(--muted);white-space:nowrap;}
  .inq-msg{font-size:13px;color:var(--muted);margin:0 0 8px;line-height:1.5;}
  .inq-tags{display:flex;gap:6px;flex-wrap:wrap;}
  .tag{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px;}
  .tag.new{background:var(--danger-soft);color:var(--danger);}
  .tag.replied{background:var(--ok-soft);color:var(--ok);}
  .tag.followup{background:var(--warn-soft);color:var(--warn);}
  .tag.channel{background:var(--accent-soft);color:var(--accent-strong);}

  .sync-bar{
    display:flex;align-items:center;gap:7px;
    padding:10px 13px;margin-bottom:12px;border-radius:10px;
    background:var(--ok-soft);border:1px solid rgba(63,143,106,0.22);
    font-size:11px;color:var(--ok);flex-wrap:wrap;
  }
  .sync-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;}
  .sync-text{flex:1;font-weight:600;min-width:180px;}
  .sync-link{color:var(--ok);font-weight:700;text-decoration:none;flex-shrink:0;white-space:nowrap;}

  .synced-tag{font-size:10px;font-weight:700;color:var(--ok);display:flex;align-items:center;gap:4px;}
  .synced-tag.pending{color:var(--warn);}

  .booking-card{padding:14px 16px;border-bottom:1px solid var(--line);}
  .booking-card:last-child{border-bottom:none;}
  .booking-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
  .booking-name{font-size:14px;font-weight:700;}
  .booking-txn-code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:0.02em;color:var(--muted);margin:2px 0 0;}
  .booking-service{font-size:12.5px;color:var(--muted);margin:2px 0 8px;}
  .booking-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-bottom:8px;}
  .booking-meta b{color:var(--text);font-weight:600;}
  .status-pill{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;display:inline-block;flex-shrink:0;}
  .status-pill.confirmed{background:var(--ok-soft);color:var(--ok);}
  .status-pill.pending{background:var(--warn-soft);color:var(--warn);}
  .status-pill.dp-needed{background:var(--danger-soft);color:var(--danger);}
  .status-pill.cancelled{background:var(--danger-soft);color:var(--danger);}
  .status-pill{text-transform:capitalize;}
  .status-pill.pop-in{animation:pill-pop .32s cubic-bezier(.34,1.56,.64,1);}
  @keyframes pill-pop{
    0%{transform:scale(0.5);opacity:0;}
    100%{transform:scale(1);opacity:1;}
  }

  .dp-card{padding:14px 16px;border-bottom:1px solid var(--line);transition:background-color .4s ease;}
  .dp-card:last-child{border-bottom:none;}
  .dp-top{display:flex;gap:10px;}
  .dp-shot{width:56px;height:56px;border-radius:9px;background:var(--panel-tint);border:1px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:8px;text-align:center;transition:opacity .3s ease;}
  .dp-info{flex:1;min-width:0;}
  .dp-name{font-size:14px;font-weight:700;}
  .dp-amount{font-size:15px;font-weight:700;color:var(--accent-strong);margin-top:1px;}
  .dp-meta{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.5;}
  .dp-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
  .dp-actions .btn{width:auto;padding:9px 14px;font-size:12.5px;cursor:pointer;min-height:40px;}
  .dp-card.is-verified{background:var(--ok-soft);animation:card-flash .5s ease;}
  .dp-card.is-verified .dp-shot{opacity:.55;}
  .dp-card.is-verified .dp-name,
  .dp-card.is-verified .dp-amount{opacity:.8;transition:opacity .3s ease;}
  @keyframes card-flash{
    0%{background:rgba(63,143,106,0.22);}
    100%{background:var(--ok-soft);}
  }
  .dp-shot{appearance:none;border:1px solid var(--line);}
  .btn.is-danger{color:var(--danger);}
  .dp-card.is-flagged{background:var(--danger-soft);}
  .dp-card.is-flagged .dp-name,
  .dp-card.is-flagged .dp-amount{color:var(--danger);}

  /* ---- empty states: shown when a filter/list has no matching results ---- */
  .empty-state{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:44px 20px;color:var(--muted);
  }
  /* [hidden] must be declared AFTER the flex display above: both are
     same-specificity author rules, and source order decides the winner —
     without this, .empty-state{display:flex} would show the block even
     while the [hidden] attribute is set. */
  .empty-state[hidden]{display:none;}
  .empty-state svg{width:38px;height:38px;stroke-width:1.4;opacity:.5;margin-bottom:12px;}
  .empty-title{font-size:14px;font-weight:700;color:var(--text);margin:0 0 4px;}
  .empty-hint{font-size:12.5px;color:var(--muted);margin:0;max-width:260px;}

  /* ---- skeleton loading placeholders: shimmer bars shown the first time
     a tab is opened, standing in for "content still loading" ---- */
  .skel-line{
    height:12px;border-radius:6px;margin-bottom:8px;
    background:linear-gradient(90deg, var(--panel-tint) 25%, var(--line) 37%, var(--panel-tint) 63%);
    background-size:400% 100%;
    animation:skel-shimmer 1.4s ease infinite;
  }
  @keyframes skel-shimmer{
    0%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
  }
  .skel-line-title{width:55%;height:14px;}
  .skel-line-short{width:35%;margin-bottom:0;}
  .skel-line-num{width:40%;height:22px;margin:0 auto 8px;}
  .skel-line-label{width:65%;height:9px;margin:0 auto;}

  .skel-row{
    padding:14px 16px;border-bottom:1px solid var(--line);
  }
  .skel-row:last-child{border-bottom:none;}

  .skel-note{
    background:#fffdf6;border:1px solid var(--line);border-radius:12px;
    padding:14px;margin-bottom:10px;
  }

  .skel-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:10px;
  }
  .skel-card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:14px 12px;text-align:center;
  }

  .skel-cal-grid{
    display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-top:26px;
  }
  .skel-cal-cell{
    min-height:64px;border-radius:10px;background:var(--panel-tint);border:1px solid var(--line);
    animation:skel-shimmer 1.4s ease infinite;
    background-image:linear-gradient(90deg, var(--panel-tint) 25%, var(--line) 37%, var(--panel-tint) 63%);
    background-size:400% 100%;
  }
  @media (min-width: 480px){
    .skel-cal-cell{min-height:78px;}
  }
  @media (min-width: 720px){
    .skel-cal-cell{min-height:96px;}
  }

  /* ---- notes toolbar + per-note actions ---- */
  .notes-toolbar{margin-bottom:14px;}
  .notes-toolbar .btn{width:auto;padding:10px 16px;}
  .note-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
  /* The row pulls back the padding the buttons add below, so three 40px
     targets still read as a tight cluster of icons. */
  .note-actions{display:flex;gap:0;flex-shrink:0;margin:-6px -6px -6px 0;}
  /* Pin, urgent and delete sit together in a note's corner. At 28px they were
     below what a finger reliably hits — awkward for pin, and risky for
     delete, where a near miss either does nothing or removes the wrong note.
     The icon keeps its size; the button grows around it to a 40px target.
     The targets must not overlap, or a tap meant for pin could delete. */
  .note-icon-btn{
    width:40px;height:40px;
    border-radius:10px;border:none;background:none;
    display:flex;align-items:center;justify-content:center;color:var(--muted);
    cursor:pointer;padding:0;appearance:none;
  }
  .note-icon-btn svg{width:15px;height:15px;stroke-width:1.8;fill:none;stroke:currentColor;}
  .note-icon-btn[data-note-pin]{color:var(--warn);}
  .note-icon-btn[data-note-pin] svg{fill:none;}
  .note.pin .note-icon-btn[data-note-pin] svg{fill:currentColor;}
  .note-removing{opacity:0;transform:scale(0.96);transition:opacity .2s ease, transform .2s ease;}

  /* ---- booking detail modal body ---- */
  .booking-detail-rows{display:flex;flex-direction:column;gap:0;}
  .booking-detail-row{
    display:flex;justify-content:space-between;gap:12px;
    padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;
  }
  .booking-detail-row:last-child{border-bottom:none;}
  .booking-detail-row span:first-child{color:var(--muted);font-weight:600;}
  .booking-detail-row span:last-child{font-weight:600;text-align:right;}

  /* ---- the four branch actions ---- */
  .booking-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  }
  .booking-actions .btn{width:100%;}
  @media (min-width:480px){
    .booking-actions{grid-template-columns:repeat(4, 1fr);}
  }

  .sheet-lead{font-size:13px;color:var(--muted);margin:0 0 14px;}
  .sheet-lead strong{color:var(--text);font-weight:600;}

  /* ---- travel / slot warning ----
     Three levels, because the decision they support has three answers: fine,
     tell the client, and the client probably cannot make it. Only the last one
     has to be dismissed on purpose — none of them blocks the transfer. */
  .travel-note{
    border-radius:10px;padding:11px 13px;margin:2px 0 12px;
    font-size:12.5px;line-height:1.5;border:1px solid transparent;
  }
  .travel-note p{margin:0;}
  .travel-note p + p{margin-top:6px;}
  .travel-note.travel-warn{
    background:var(--warn-soft);border-color:var(--warn);color:var(--warn);
  }
  .travel-note.travel-danger{
    background:var(--danger-soft);border-color:var(--danger);color:var(--danger);
    font-weight:600;
  }
  .travel-note.travel-ok{display:none;}
  /* The booking went through; this sits under the warning so the two are not
     mistaken for one another. */
  .travel-note .travel-note-done{font-weight:600;opacity:.85;}

  /* ---- DP screenshot viewer placeholder ---- */
  /* The empty state: a dashed box saying there is nothing to show. */
  .dp-viewer-image{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--panel-tint);border:1px dashed var(--line-strong);border-radius:14px;
    padding:50px 20px;color:var(--muted);gap:10px;
  }
  .dp-viewer-image svg{width:36px;height:36px;stroke-width:1.4;}
  .dp-viewer-image span{font-size:12px;font-weight:600;}

  /* An actual proof. Separate from the empty state above, which is a dashed
     placeholder box — an <img> wearing that class came out framed in dashes
     with 50px of padding around it. Whatever the client sent, it fits the
     sheet and keeps its own proportions. */
  img.dp-viewer-proof{
    display:block;width:100%;height:auto;
    max-height:min(70vh, 560px);object-fit:contain;
    background:var(--panel-tint);
    border:1px solid var(--line);border-radius:12px;
    padding:0;
  }
  /* A PDF receipt: shown in place rather than handed to the browser. */
  .dp-viewer-pdf{
    display:block;width:100%;height:min(70vh, 560px);
    border:1px solid var(--line);border-radius:12px;background:var(--panel-tint);
  }
  /* If the file will not render — an unknown format, a broken upload — say so
     and offer the file, instead of leaving a blank sheet. */
  .dp-viewer-fallback{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:36px 20px;text-align:center;
    background:var(--panel-tint);border:1px dashed var(--line-strong);border-radius:14px;
    color:var(--muted);font-size:12.5px;
  }
  .dp-viewer-fallback a{
    color:var(--accent-strong);font-weight:700;text-decoration:none;
  }

  .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .cal-nav .btn{width:auto;padding:9px 14px;font-size:13px;cursor:pointer;min-height:40px;}

  .cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
  .cal-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:600;}
  .cal-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .cal-dot.confirmed{background:var(--ok);}
  .cal-dot.pending{background:var(--warn);}
  .cal-dot.cancelled{background:var(--danger);}

  .cal-grid-weekdays{
    display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-bottom:6px;
  }
  .cal-grid-weekdays span{
    text-align:center;font-size:10px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);
  }
  .cal-grid{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;}
  .cal-cell{
    min-height:64px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
    padding:4px;display:flex;flex-direction:column;gap:2px;
    cursor:default;font-family:inherit;text-align:left;appearance:none;
  }
  .cal-cell.is-empty{background:none;border:none;}
  .cal-cell.is-today{border-color:var(--accent);border-width:1.5px;}
  .cal-cell-num{font-size:10.5px;font-weight:700;color:var(--muted);padding:1px 3px;}
  .cal-cell.is-today .cal-cell-num{color:var(--accent-strong);}
  .cal-cell.has-clients{cursor:pointer;}
  .cal-cell-client{
    font-size:8.5px;font-weight:700;border-radius:5px;padding:2px 4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;
  }
  .cal-cell-client.confirmed{background:var(--ok-soft);color:var(--ok);}
  .cal-cell-client.pending{background:var(--warn-soft);color:var(--warn);}
  .cal-cell-client.cancelled{background:var(--danger-soft);color:var(--danger);text-decoration:line-through;}
  .cal-cell-branch{font-size:6.5px;font-weight:700;opacity:.7;margin-left:2px;}
  .cal-cell-more{font-size:8px;color:var(--muted);font-weight:700;padding:1px 4px;}

  @media (min-width: 480px){
    .cal-cell{min-height:78px;padding:6px;}
    .cal-cell-client{font-size:10px;padding:3px 5px;}
    .cal-cell-more{font-size:9px;}
  }
  @media (min-width: 720px){
    .cal-cell{min-height:96px;padding:8px;}
  }

  /* ---- date detail modal: a centered card, not a bottom sheet ---- */
  .sheet-backdrop{
    position:fixed;inset:0;background:rgba(43,30,33,0.42);z-index:80;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
    display:none;align-items:center;justify-content:center;
    padding:24px;
  }
  .sheet-backdrop.show{display:flex;opacity:1;pointer-events:auto;}
  .date-sheet{
    position:relative;z-index:81;
    width:100%;max-width:440px;
    background:#fff;border-radius:22px;
    box-shadow:0 24px 60px -12px rgba(43,30,33,0.35);
    padding:22px 22px calc(22px + var(--safe-b));
    transform:scale(0.94);opacity:0;
    transition:transform .22s cubic-bezier(.32,.72,0,1), opacity .18s ease;
    max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
    overflow-y:auto;
  }
  .sheet-backdrop.show .date-sheet{transform:scale(1);opacity:1;}
  .date-sheet-handle{display:none;}
  /* .sheet-header/.sheet-title are what the production markup uses; the
     .date-sheet-* names come from the mockup. Both style the same thing. */
  .date-sheet-header, .sheet-header{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    margin-bottom:12px;
  }
  .date-sheet-title, .sheet-title{font-size:17px;font-weight:700;flex:1;min-width:0;}
  /* The sheet is a flex column, so its body needs a width of its own — min-width:0
     alone lets it shrink to nothing and text ends up one letter per line. */
  .sheet-body{width:100%;min-width:0;}
  .date-sheet-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
  .date-sheet-list{}
  /* A button now, not a row of text: picking a client here opens the same
     sheet the Bookings screen opens, so the day's bookings can be answered
     from the calendar itself. The properties a button does not inherit are
     set explicitly, and the row keeps a 48px target for a finger. */
  .date-sheet-client{
    display:flex;align-items:center;gap:12px;
    width:100%;min-height:48px;padding:11px 4px;
    border:0;border-bottom:1px solid var(--line);border-radius:10px;
    background:none;font-family:inherit;color:inherit;
    text-align:left;cursor:pointer;
  }
  .date-sheet-client:last-child{border-bottom:none;}
  .date-sheet-client:hover{background:var(--panel-tint);}
  .date-sheet-client:focus-visible{
    outline:2px solid var(--accent-strong);outline-offset:2px;
  }
  .date-sheet-chevron{
    width:16px;height:16px;stroke-width:2;color:var(--muted);flex-shrink:0;
  }
  .date-sheet-time{
    font-size:12px;font-weight:700;color:var(--accent-strong);
    background:var(--accent-soft);border-radius:9px;padding:6px 9px;flex-shrink:0;
    min-width:74px;text-align:center;
  }
  .date-sheet-info{flex:1;min-width:0;}
  .date-sheet-name{font-size:13.5px;font-weight:700;}
  .date-sheet-service{font-size:11.5px;color:var(--muted);margin-top:1px;}

  .note{background:#fffdf6;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px;}

  /* An urgent note carries a red edge and a tag, so it reads as urgent at a
     glance rather than only after the text is read. */
  .note.urgent{
    border-color:var(--danger);
    box-shadow:0 0 0 1px var(--danger) inset;
  }
  .note-urgent-tag{
    display:inline-block;vertical-align:middle;
    font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    background:var(--danger-soft);color:var(--danger);
    padding:2px 6px;border-radius:3px;margin-right:6px;
  }
  .note.urgent .note-icon-btn[data-note-urgent-toggle]{color:var(--danger);}

  .note-attachment{
    display:flex;align-items:center;gap:8px;
    margin-top:10px;padding:9px 11px;
    border:1px solid var(--line);border-radius:9px;
    background:var(--panel);
    text-decoration:none;color:var(--text);font-size:12.5px;
  }
  .note-attachment:hover{border-color:var(--accent);}
  .note-attachment svg{width:15px;height:15px;stroke-width:1.8;flex-shrink:0;color:var(--muted);}
  .note-attachment span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
  .note-attachment em{font-style:normal;color:var(--muted);font-size:11px;flex-shrink:0;}

  .note-urgent-field{
    /* width:100% matters: a <label> is inline by default, so as a flex container
       it would still size to its content and push the text past the sheet edge. */
    display:flex;width:100%;box-sizing:border-box;
    align-items:flex-start;gap:9px;
    margin:0 0 12px;font-size:12.5px;color:var(--muted);line-height:1.45;
    cursor:pointer;
  }
  .note-urgent-field input{width:15px;height:15px;margin:2px 0 0;flex:0 0 auto;}
  /* Give the text an explicit share of the row rather than relying on flex-grow:
     with a checkbox beside it, the auto basis resolves to zero and every letter
     ends up on its own line. */
  .note-urgent-field > span{
    flex:1 1 calc(100% - 24px);
    min-width:0;white-space:normal;
  }

  .field-hint{
    display:block;margin-top:4px;
    font-style:normal;font-size:11.5px;color:var(--muted);
  }
  .note.pin::before{content:"📌 ";font-size:10px;}
  .note h4{margin:0 0 5px;font-size:13px;display:inline;}
  .note p{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.5;}
  .note .when{margin-top:7px;font-size:10px;color:var(--muted);opacity:.7;}
  @media (min-width: 720px){
    [data-screen-panel="notes"]{columns:2;column-gap:14px;}
    [data-screen-panel="notes"] .note{break-inside:avoid;}
  }

  /* ---- bottom nav: flat/flush circle, embedded in the bar, slides only
     sideways (no lift, no jump). Positions are percentage-based so the
     circle always lands on the right tab regardless of viewport width. ---- */
  .bottom-nav-wrap{
    position:fixed;
    left:max(16px, calc(50vw - 460px));
    right:max(16px, calc(50vw - 460px));
    bottom:calc(14px + var(--safe-b));
    z-index:60;height:var(--nav-h);
    max-width:920px;margin:0 auto;
  }
  .bottom-nav{
    position:absolute;inset:0;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:24px;
    display:flex;
    box-shadow:0 16px 34px -12px rgba(43,30,33,0.22);
    overflow:hidden;
  }
  .bottom-nav button{
    flex:1;height:100%;display:flex;align-items:center;justify-content:center;
    background:none;border:none;padding:0;cursor:pointer;position:relative;z-index:3;
  }
  .bottom-nav button svg{width:20px;height:20px;stroke-width:1.8;stroke:var(--muted);fill:none;transition:opacity .2s ease;}
  .bottom-nav button.covered svg{opacity:0;}
  .nav-dot{
    position:absolute;width:6px;height:6px;border-radius:50%;background:var(--danger);
    top:9px;right:29%;z-index:5;
  }
  .nav-circle{
    position:absolute;top:0;
    width:calc(100% / 5);height:var(--nav-h);
    z-index:4;
    transition:left .42s cubic-bezier(.5,.02,.2,1);
    display:flex;align-items:center;justify-content:center;
  }
  .nav-circle-inner{
    width:var(--nav-h);height:var(--nav-h);border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-strong));
    box-shadow:0 8px 18px -4px rgba(180,90,112,0.4);
    display:flex;align-items:center;justify-content:center;
  }
  .nav-circle-inner svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;}
  /* five evenly-spaced tab slots, percentage-based across the bar width */
  .bottom-nav-wrap[data-active="0"] .nav-circle{left:calc(100% / 5 * 0);}
  .bottom-nav-wrap[data-active="1"] .nav-circle{left:calc(100% / 5 * 1);}
  .bottom-nav-wrap[data-active="2"] .nav-circle{left:calc(100% / 5 * 2);}
  .bottom-nav-wrap[data-active="3"] .nav-circle{left:calc(100% / 5 * 3);}
  .bottom-nav-wrap[data-active="4"] .nav-circle{left:calc(100% / 5 * 4);}

  /* small-phone tightening */
  @media (max-width: 380px){
    .content{padding-left:12px;padding-right:12px;}
    .fab{width:50px;height:50px;font-size:22px;}
  }

  /* ============================================================
     Settings, Reports, Account and Help.
     ============================================================ */

  .settings-lead, .settings-hint{
    font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 14px;
  }

  /* A collapsed list of sections, so the screen stays short and a new section
     can be added without turning it into a wall of fields. */
  .settings-group{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    margin-bottom:8px;overflow:hidden;
  }
  .settings-group > summary{
    display:flex;flex-direction:column;gap:2px;
    padding:13px 38px 13px 14px;position:relative;
    cursor:pointer;list-style:none;
  }
  .settings-group > summary::-webkit-details-marker{display:none;}
  .settings-group > summary::after{
    content:"";position:absolute;right:16px;top:19px;
    width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .settings-group[open] > summary::after{transform:rotate(-135deg);top:22px;}
  .settings-group-name{font-size:13.5px;font-weight:700;}
  .settings-group-sub{font-size:11.5px;color:var(--muted);line-height:1.4;}
  .settings-group-body{padding:0 14px 14px;}

  /* A section that is not built yet: visible so the shape of Settings is clear,
     but it does not open. */
  .settings-group.is-locked > summary{cursor:default;opacity:.55;}
  .settings-group.is-locked > summary::after{display:none;}

  /* ---- one branch's hours ---- */
  .settings-row{
    border-top:1px solid var(--line);padding:11px 0;
  }
  .settings-row:first-child{border-top:none;}
  .settings-row-head{display:flex;flex-direction:column;gap:1px;margin-bottom:9px;}
  .settings-row-name{font-size:12.5px;font-weight:700;}
  .settings-row-summary{font-size:11px;color:var(--muted);}
  /* Services & pricing: no fields below, so no reason to leave the gap. */
  .settings-row-readonly .settings-row-head{margin-bottom:0;}
  .settings-empty{font-size:12px;color:var(--muted);padding:11px 0;}
  .settings-row-fields{
    display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;
  }
  @media (min-width:520px){
    .settings-row-fields{grid-template-columns:repeat(4, minmax(0, 1fr)) auto;align-items:end;}
  }
  .settings-field{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .settings-field span{font-size:10px;font-weight:600;color:var(--muted);}
  .settings-field input{
    width:100%;box-sizing:border-box;
    padding:8px 9px;border:1px solid var(--line-strong);border-radius:7px;
    font-family:inherit;font-size:12.5px;background:#fff;color:var(--text);
  }
  .settings-save{
    grid-column:1 / -1;padding:9px 14px;font-size:12.5px;min-height:38px;
  }
  @media (min-width:520px){
    .settings-save{grid-column:auto;width:auto;}
  }

  /* ---- travel between two branches ---- */
  .settings-travel-row{
    display:flex;align-items:center;gap:8px;
    padding:9px 0;border-top:1px solid var(--line);
  }
  .settings-travel-row:first-child{border-top:none;}
  /* The pair name wraps as a unit — the two branch names must never sit on top
     of one another, which is what a fixed-height row would cause. */
  .settings-travel-pair{
    flex:1 1 auto;min-width:0;
    font-size:12px;font-weight:600;line-height:1.35;
  }
  .settings-travel-pair i{
    font-style:normal;color:var(--muted);margin:0 5px;
  }
  .settings-travel-row input{
    width:58px;flex:0 0 auto;box-sizing:border-box;
    padding:7px 8px;border:1px solid var(--line-strong);border-radius:7px;
    font-family:inherit;font-size:12.5px;text-align:right;
  }
  .settings-travel-unit{font-size:10.5px;color:var(--muted);flex:0 0 auto;}
  /* .btn sets width:100%, which in a flex row would squeeze the branch names to
     nothing — hence the explicit width here. */
  .settings-travel-row .settings-save{
    flex:0 0 auto;grid-column:auto;
    width:auto;min-width:0;padding:7px 13px;
    font-size:12px;min-height:34px;
  }

  /* ---- reports ---- */
  .report-range{
    display:flex;align-items:flex-end;gap:9px;margin-bottom:6px;flex-wrap:wrap;
  }
  .report-range .field{flex:1 1 120px;margin-bottom:0;min-width:0;}
  .report-range .btn{flex:0 0 auto;}
  .report-hint{font-size:12.5px;color:var(--muted);text-align:center;padding:26px 0;margin:0;}

  .report-breakdown{padding:6px 14px;}
  .report-row{
    display:flex;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;
  }
  .report-row:last-child{border-bottom:none;}
  .report-row-label{flex:0 0 96px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* The bar carries the comparison; the number beside it carries the exact value. */
  .report-bar{
    flex:1 1 auto;min-width:0;height:7px;border-radius:99px;
    background:var(--accent-soft);overflow:hidden;
  }
  .report-bar > span{display:block;height:100%;background:var(--accent);border-radius:99px;}
  .report-row-count{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;}

  /* ---- account ---- */
  .account-card{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:22px 16px;margin-bottom:14px;
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
  }
  .account-avatar{
    width:58px;height:58px;border-radius:50%;margin-bottom:6px;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent-strong);
    font-size:22px;font-weight:700;
  }
  .account-name{font-size:16px;font-weight:700;}
  .account-role{font-size:11.5px;color:var(--muted);}
  .account-rows{padding:2px 14px;margin-bottom:14px;}
  [data-screen-panel="account"] > .btn{width:100%;}

  /* ---- help ---- */
  .help-list{padding:2px 14px;margin-bottom:14px;}
  .help-item{border-bottom:1px solid var(--line);}
  .help-item:last-child{border-bottom:none;}
  .help-item summary{
    padding:13px 0;font-size:13px;font-weight:600;cursor:pointer;
    list-style:none;display:flex;align-items:center;gap:8px;
  }
  .help-item summary::-webkit-details-marker{display:none;}
  .help-item summary::before{
    content:"+";color:var(--accent-strong);font-weight:700;flex:0 0 auto;
  }
  .help-item[open] summary::before{content:"\2013";}
  .help-item p{
    margin:0 0 13px 18px;font-size:12.5px;color:var(--muted);line-height:1.6;
  }

  /* ============================================================
     Taking a booking, and the link the client fills in themselves.
     ============================================================ */

  .bookings-toolbar{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;
  }
  .bookings-toolbar .btn{width:100%;}
  .bookings-toolbar .btn.ghost{
    display:flex;align-items:center;justify-content:center;
  }

  /* ---- what clients have sent in ---- */
  .requests-block{
    background:var(--accent-soft);
    border:1px solid var(--accent);
    border-radius:14px;
    padding:12px 13px;margin-bottom:14px;
  }
  .requests-head{
    display:flex;align-items:center;gap:8px;margin-bottom:10px;
  }
  .requests-title{
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--accent-strong);flex:1;
  }
  .requests-count{
    background:var(--accent-strong);color:#fff;
    font-size:11px;font-weight:700;
    min-width:20px;height:20px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;padding:0 6px;
  }

  .request-card{
    background:#fff;border:1px solid var(--line);border-radius:11px;
    padding:12px 13px;margin-bottom:8px;
  }
  .request-card:last-child{margin-bottom:0;}
  .request-top{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  }
  .request-name{font-size:13.5px;font-weight:700;}
  .request-when{font-size:11px;color:var(--muted);white-space:nowrap;}
  .request-service{font-size:12.5px;margin:2px 0 4px;}
  .request-meta{font-size:11.5px;color:var(--muted);}
  .request-noproof{margin-top:6px;font-style:italic;}

  /* A button now, not a link — it opens the proof in the workspace viewer
     rather than handing the file to the browser. The extra properties are the
     ones a button does not inherit the way an anchor did. */
  .request-proof{
    display:flex;align-items:center;gap:7px;
    width:100%;margin-top:9px;padding:8px 10px;
    border:1px solid var(--line);border-radius:9px;
    background:var(--panel-tint);
    font-family:inherit;font-size:12px;font-weight:600;
    color:var(--accent-strong);
    text-align:left;text-decoration:none;cursor:pointer;
  }
  .request-proof:hover{border-color:var(--accent);}
  .request-proof svg{width:14px;height:14px;stroke-width:1.8;flex-shrink:0;}

  .request-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px;
  }
  .request-actions .btn{width:100%;padding:9px 12px;font-size:12.5px;min-height:38px;}

  /* ---- the link itself ---- */
  .link-box{display:flex;gap:7px;margin:12px 0 8px;}
  .link-box input{
    flex:1 1 auto;min-width:0;
    padding:11px 12px;
    border:1px solid var(--line-strong);border-radius:9px;
    font-family:inherit;font-size:12.5px;color:var(--text);
    background:var(--panel-tint);
  }
  /* .btn is width:100%, which would squeeze the link out of sight. */
  .link-box .btn{flex:0 0 auto;width:auto;padding:11px 16px;font-size:13px;}
  .link-expiry{
    font-size:11.5px;color:var(--muted);margin:0 0 14px;
  }

  /* ---------- Back to the hub ----------
     Left of the menu button, sized to match it so the topbar keeps one rhythm. */
  .hub-back{
    width:36px;height:36px;border-radius:10px;border:none;background:none;
    display:flex;align-items:center;justify-content:center;color:var(--muted);
    flex-shrink:0;text-decoration:none;margin-right:2px;
    transition:color 160ms ease;
  }
  .hub-back svg{width:20px;height:20px;stroke-width:2;}
  .hub-back:hover,
  .hub-back:focus-visible{color:var(--accent);}
  .hub-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}