:root{
    --ink:#241a14; --paper:#faf3e7; --paper-2:#f1e4cc; --linen:#e9dcc3;
    --wine:#6e2439; --wine-2:#8a2f47; --gold:#b4884b; --gold-light:#d9bd86;
    --text-on-ink:#f1e4cc; --text-dark:#2a211c;
    --font-display:'Aref Ruqaa', serif;
    --shadow: 0 10px 30px rgba(36,26,20,0.25);
  }
  /* Softer than they were: a tester whose phone is always dark found the
     bright blue and green loud next to the wine and black of the rest. */
  body[data-theme="company"]{
    --ink:#141c28; --paper:#f5f6f8; --paper-2:#e9ecf1; --linen:#dfe3ea;
    --wine:#3d5a80; --wine-2:#2f4866; --gold:#7b8697; --gold-light:#a3acba;
    --text-on-ink:#e7ebf1; --text-dark:#16202e;
    --font-display:'Cairo', sans-serif;
  }
  body[data-theme="other"]{
    --ink:#1b1d1c; --paper:#fbfaf8; --paper-2:#efeeea; --linen:#e6e4df;
    --wine:#4f6f64; --wine-2:#3e5a51; --gold:#9aa39c; --gold-light:#bcc3bd;
    --text-on-ink:#f2f2f2; --text-dark:#1a1a1a;
    --font-display:'Cairo', sans-serif;
  }
  body[data-theme="neutral"]{
    --ink:#f5f4f2; --paper:#ffffff; --paper-2:#f0efec; --linen:#e8e6e1;
    --wine:#3a3532; --wine-2:#221f1d; --gold:#a89f94; --gold-light:#c9c1b6;
    --text-on-ink:#221f1d; --text-dark:#221f1d;
    --font-display:'Cairo', sans-serif;
  }
  body[data-theme="neutral"]{
    background: var(--ink);
    background-image: none;
  }
  body[data-theme="neutral"] .wordmark .ar,
  body[data-theme="neutral"] .wordmark .en,
  body[data-theme="neutral"] .lang-btn{ color:#221f1d; }
  body[data-theme="neutral"] .lang-btn{ border-color:rgba(34,31,29,0.25); background:rgba(34,31,29,0.05); }
  .tagline{ text-align:center; font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--gold-light); margin:4px 0 26px; letter-spacing:0.2px; }
  .type-hint{ display:block; font-size:10.5px; opacity:0.6; font-weight:400; margin-top:2px; }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: var(--ink);
    background-image: radial-gradient(ellipse at top, rgba(180,136,75,0.08), transparent 60%);
    color: var(--text-on-ink); font-family:'Cairo', sans-serif; min-height:100vh; padding-bottom:60px;
    transition: background-color .3s ease;
  }
  .topbar{ display:flex; align-items:center; justify-content:space-between; max-width:960px; margin:0 auto; padding:22px 20px 10px; flex-wrap:wrap; gap:10px; }
  .wordmark{ display:flex; align-items:center; gap:10px; }
  .wordmark .wm-mark{ width:30px; height:30px; display:block; color:var(--gold-light); flex:0 0 auto; }
  .wordmark .wm-mark svg{ width:100%; height:100%; display:block; }
  body[data-theme="neutral"] .wordmark .wm-mark{ color:#B7745A; }
  .wordmark .en{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:22px; color: var(--gold-light); }
  .wordmark .ar{ font-family: var(--font-display); font-size:20px; opacity:0.8; }
  .lang-btn{ border:1.5px solid rgba(212,189,134,0.45); background:rgba(0,0,0,0.2); color:var(--text-on-ink); font-family:'Cairo'; font-weight:700; font-size:15px; padding:10px 20px; border-radius:999px; cursor:pointer; }
  .lang-btn:hover{ background:rgba(0,0,0,0.35); }

  .hero{ max-width:720px; margin:10px auto 30px; text-align:center; padding:0 20px; }
  .hero h1{ font-family: var(--font-display); font-weight:700; font-size:clamp(26px,5vw,38px); margin:6px 0; background:linear-gradient(180deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.sub{ font-size:14.5px; opacity:0.75; line-height:1.9; }

  .section{ max-width:960px; margin:0 auto; padding:10px 20px; }
  .panel{ background:var(--paper); color:var(--text-dark); border-radius:18px; box-shadow:var(--shadow); padding:26px 22px; margin-bottom:18px; }
  .panel h2{ font-family: var(--font-display); font-size:20px; margin:0 0 4px; color:var(--wine); }
  .panel .desc{ font-size:13px; opacity:0.7; margin:0 0 18px; }

  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:12.5px; opacity:0.85; margin-bottom:5px; }
  .field input, .field textarea{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid #d8c9a8; font-family:'Cairo'; font-size:14px; outline:none; }
  .field textarea{ min-height:90px; resize:vertical; }

  .type-row{ display:flex; gap:8px; margin:0 auto 16px; flex-wrap:wrap; justify-content:center; max-width:420px; }
  /* Unpicked cards used to be faded to 45% and greyed, which on a phone that
     darkens every page made them look switched off. They are now full
     strength; the picked one is told apart by its border, colour and tick. */
  .type-btn{ position:relative; width:120px; padding:14px 10px; border-radius:12px; border:2px solid #cdbb98; background:var(--paper); color:var(--text-dark); font-family:'Cairo'; font-weight:600; font-size:13px; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; transition: all .2s ease; }
  .type-btn:hover{ border-color:var(--gold); }
  .type-btn.active{ transform:scale(1.04); box-shadow:0 0 0 2px var(--wine) inset; }
  .type-btn.active::after{ content:'✓'; position:absolute; top:6px; inset-inline-end:8px; width:18px; height:18px; line-height:18px; border-radius:50%; background:var(--wine); color:#fff; font-size:11px; font-weight:700; }
  .type-btn svg{ color:var(--gold); }
  .type-btn.active svg{ color:var(--wine); }
  .type-btn.active{ border-color:var(--wine); background:#fff; color:var(--wine); }

  .dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed var(--gold); border-radius:14px; padding:26px 16px; text-align:center; background:var(--paper-2); cursor:pointer; }
  .dropzone strong{ display:block; font-size:15px; margin-bottom:4px; }
  .dropzone span{ font-size:12.5px; opacity:0.6; }
  input[type=file]{ display:none; }

  .status-msg{ margin-top:10px; font-size:13px; padding:10px 14px; border-radius:10px; display:none; }
  .status-msg.show{ display:block; }
  .status-msg.ok{ background:#e4efe0; color:#33562c; }
  .status-msg.err{ background:#f4e0df; color:#7a2c28; }

  .stats-bar{ display:flex; gap:14px; margin:14px 0; flex-wrap:wrap; }
  .stat{ background:var(--paper-2); border-radius:12px; padding:10px 16px; text-align:center; min-width:90px; }
  .stat b{ display:block; font-size:20px; color:var(--wine); font-family: var(--font-display); }
  .stat span{ font-size:11.5px; opacity:0.65; }

  .board{ background:var(--linen); border-radius:14px; padding:22px 16px; min-height:120px; }
  .board-scroll{ max-height:440px; overflow-y:auto; }
  .messages-scroll{ max-height:340px; overflow-y:auto; padding-inline-end:4px; }

  /* --- Album (PDF) editor --- */
  .album-editor{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
  /* NOTE: the panel background is light (--paper) but body sets the text
     colour to --text-on-ink (light, for the dark page background). Without an
     explicit colour here, every plain-text bit inside these overlays (section
     titles, music track names, the duration value) rendered light-on-light and
     was effectively invisible. */
  .album-editor-panel{ background:var(--paper); color:var(--text-dark); border-radius:16px; max-width:760px; width:100%; max-height:85vh; display:flex; flex-direction:column; padding:0 22px 22px; overflow-y:auto; }
  /* The head rides along: these panels are long, and a close button you have to
     scroll back up to find is a close button that is not there. The top padding
     moved out of the panel and into this bar so it can sit flush when stuck. */
  .album-editor-head{ position:sticky; top:0; z-index:6; background:var(--paper);
                      display:flex; align-items:center; justify-content:space-between; gap:10px;
                      margin:0 -22px 2px; padding:16px 22px 10px; border-radius:16px 16px 0 0;
                      box-shadow:0 6px 10px -10px rgba(0,0,0,0.5); }
  .album-editor-head h2{ margin:0; font-size:17px; }
  .album-editor-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:12px; margin:14px 0; padding:4px; }
  .album-thumb, .tile-card{ position:relative; background:var(--paper-2); border-radius:10px; padding:6px; text-align:center; }
  .album-thumb img{ width:100%; height:80px; object-fit:cover; border-radius:6px; display:block; }
  .album-thumb-name{ font-size:10px; margin-top:4px; opacity:0.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tile-actions .btn.active{ background:var(--wine); color:var(--text-on-ink); border-color:var(--wine); }
  .album-editor-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--linen); padding-top:14px; flex-wrap:wrap; }
  .album-editor-foot .status-msg{ margin-top:0; padding:0; background:none !important; }

  /* --- Highlight video editor (reuses the .album-editor overlay/panel shell) --- */
  /* Video tile: the stored still, with a play badge. When no still exists
     (clips from before posters were saved) .gone hides the broken image and
     the striped background below shows through instead of a black box. */
  .vid-tile{ position:relative; width:100%; min-height:120px; border-radius:6px; cursor:pointer;
    background:repeating-linear-gradient(135deg,#3a312b,#3a312b 10px,#332b26 10px,#332b26 20px);
    display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .vid-tile .vid-poster{ width:100%; display:block; border-radius:6px; }
  .vid-tile .vid-poster.gone{ display:none; }
  .vid-tile .vid-play{ position:absolute; width:44px; height:44px; border-radius:50%;
    background:rgba(20,15,12,0.62); border:2px solid rgba(255,255,255,0.85); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:17px; padding-inline-start:3px; }
  .vid-tile[data-live] .vid-play{ display:none; }

  .hl-thumb{ position:relative; cursor:pointer; }
  /* Two small buttons sit ON the tile. They must not toggle the selection,
     so each stops the click from reaching the tile underneath. */
  /* The other three corners are taken: the tick sits top inline-end, the order
     number top inline-start, the "still" badge bottom inline-start. These two
     stack in the one free corner. A trimmed clip is never a still, so the trim
     badge can safely reuse the still badge's corner. */
  .hl-tile-btn{ position:absolute; z-index:3; width:22px; height:22px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.55); background:rgba(20,15,12,0.72); color:#fff;
    font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0; inset-inline-end:4px; }
  .hl-tile-btn:active{ transform:scale(0.92); }
  .hl-zoom-btn{ bottom:4px; }
  .hl-cut-btn{ bottom:30px; }
  .hl-cut-btn.on{ background:var(--wine); border-color:#fff; }
  .hl-trim-badge{ position:absolute; z-index:2; bottom:4px; inset-inline-start:4px;
    background:var(--wine); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; }

  /* ---- trim sheet ---- */
  /* Above the editor (z-index 200) it is opened from — at 130 it rendered
     behind it and only its bottom edge showed. */
  .trim-sheet{ position:fixed; inset:0; z-index:1300; background:rgba(15,11,9,0.72);
    display:flex; align-items:flex-end; justify-content:center; }
  /* --paper and --text-dark, like every other sheet here: body sets a light
     text colour for the dark page, so a panel without both renders
     light-on-light and looks transparent. */
  .trim-box{ width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
    background:var(--paper); color:var(--text-dark); box-shadow:0 18px 40px rgba(0,0,0,0.4);
    border-radius:18px 18px 0 0; padding:0 16px 16px; text-align:right; }
  @media (min-width:640px){ .trim-sheet{ align-items:center; } .trim-box{ border-radius:18px; } }
  .trim-box video{ width:100%; max-height:44vh; background:#000; border-radius:12px; display:block; }
  .trim-range{ width:100%; margin:2px 0 10px; accent-color:var(--wine); height:28px;
    direction:ltr; }
  /* The clip's own frame, so the sheet never opens on a black rectangle while
     the phone decides whether to decode anything. */
  #hlTrimVideo{ background:#1b1310; }
  .trim-row-label{ display:flex; justify-content:space-between; font-size:12.5px; opacity:0.85; margin-top:6px; }
  .trim-readout{ text-align:center; font-size:15px; font-weight:700; color:var(--wine);
    background:#fff; border:1px solid var(--linen); border-radius:10px; padding:8px; margin:10px 0; }
  .trim-hint{ font-size:12px; opacity:0.75; margin:0 0 10px; line-height:1.7; }
  .hl-thumb img{ display:block; }
  .hl-thumb .hl-check{ position:absolute; top:4px; inset-inline-end:4px; width:20px; height:20px; border-radius:50%; background:rgba(20,15,12,0.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; }
  .hl-thumb.selected .hl-check{ background:var(--wine); }
  .hl-thumb.selected img{ outline:3px solid var(--wine); outline-offset:-3px; border-radius:6px; }
  .hl-thumb .hl-video-badge{ position:absolute; bottom:10px; inset-inline-start:4px; background:rgba(20,15,12,0.6); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; }
  /* An empty circle in the corner was the only difference between chosen and
     not chosen — invisible on a phone. Unchosen items are now plainly faded. */
  .hl-thumb .hl-media{ transition:opacity .12s ease, filter .12s ease; }
  .hl-thumb:not(.selected) .hl-media{ opacity:0.32; filter:grayscale(1); }
  .hl-thumb .hl-still-badge{ position:absolute; bottom:4px; inset-inline-start:4px; right:auto; background:rgba(20,15,12,0.72); color:#fff; font-size:9px; padding:1px 5px; border-radius:4px; z-index:2; }
  .hl-thumb .hl-order{ position:absolute; top:4px; inset-inline-start:4px; background:var(--wine); color:#fff; font-size:10px; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
  /* One row of controls, shared by the album editor and the video picker.
     A grid (not flex) so the buttons always line up in even columns instead
     of drifting into a ragged pile on narrow screens. */
  /* One collapsible/entry control used by every host section, so the page
     reads as a list of things rather than a wall of cards. */
  .sec-toggle{ width:100%; display:flex; align-items:center; gap:8px; background:var(--paper-2); border:1px solid rgba(0,0,0,0.06); color:inherit;
               font-family:'Cairo',sans-serif; font-weight:700; font-size:14px; padding:12px 14px; border-radius:12px; cursor:pointer; margin-top:10px; text-align:start; }
  .sec-toggle.solo{ margin-top:0; }
  .sec-toggle.primary{ background:var(--wine); color:#fff; border-color:var(--wine); justify-content:center; font-size:15px; padding:15px 14px; }
  .sec-toggle > span:first-child{ flex:1; }
  .sec-chev{ opacity:0.55; font-size:12px; transition:transform .18s ease; }
  .sec-toggle.open .sec-chev{ transform:rotate(180deg); }
  .sec-count{ background:var(--wine); color:#fff; font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; min-width:22px; text-align:center; }
  .sec-body{ padding-top:10px; }
  .pill-row{ display:flex; gap:8px; }
  .pill{ flex:1; border:1.5px solid #d8c9a8; background:var(--paper-2); color:var(--text-dark); font-family:'Cairo',sans-serif; font-weight:700; font-size:13.5px;
         padding:11px 8px; border-radius:999px; cursor:pointer; opacity:0.55; transition:all .18s ease; }
  .pill.active{ opacity:1; border-color:var(--wine); background:var(--wine); color:#fff; }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
  /* Only the trim sheet scrolls far enough for this to matter, and it is the
     one whose own padding we know, so the full-bleed bar is scoped to it. */
  .trim-box > .sheet-head{ position:sticky; top:0; z-index:6; background:var(--paper);
               margin:0 -16px 8px; padding:14px 16px 10px; border-radius:18px 18px 0 0;
               box-shadow:0 6px 10px -10px rgba(0,0,0,0.5); }
  .sheet-choice{ display:flex; align-items:center; gap:12px; width:100%; border:1.5px dashed #cbb996; background:var(--paper-2); border-radius:14px; padding:13px 14px; margin-bottom:9px; cursor:pointer; }
  .sheet-choice .sheet-ic{ font-size:24px; line-height:1; }
  .sheet-choice b{ display:block; font-size:14px; }
  .sheet-choice small{ display:block; font-size:11.5px; opacity:0.65; margin-top:2px; }
  /* contact / enquiry sheet */
  .cf-field{ margin-bottom:12px; text-align:start; }
  .cf-field label{ display:block; font-family:'Cairo',sans-serif; font-size:12.5px; font-weight:700;
                   margin-bottom:5px; opacity:0.8; }
  .cf-field input, .cf-field select, .cf-field textarea{ width:100%; box-sizing:border-box; padding:11px 13px;
    border-radius:10px; border:1px solid #d8c9a8; font-family:'Cairo',sans-serif; font-size:14px;
    background:#fff; color:var(--text-dark); outline:none; }
  .cf-field textarea{ min-height:88px; resize:vertical; }
  /* The type picker and the date were left to the phone's own styling, so a
     browser that darkens websites painted them a pale grey beside dark text
     fields. Drawn by us like every other field, they darken — or don't —
     together. The arrow is ours too, because appearance:none removes it. */
  .cf-field select, .cf-field input[type="date"]{
    -webkit-appearance:none; appearance:none; min-height:44px; line-height:1.4; }
  .cf-field select{
    padding-inline-end:36px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a6a5a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center; background-size:12px 8px; }
  [dir="rtl"] .cf-field select{ background-position:left 13px center; }
  .cf-row{ display:flex; gap:10px; }
  .cf-row .cf-field{ flex:1; min-width:0; }
  /* Two fields side by side on a phone left each about 170px — "Wedding or
     engagement" was cut to "Wedding or enga". One per line below 480px. */
  @media (max-width:480px){ .cf-row{ flex-direction:column; gap:0; } }
  .cf-direct{ display:flex; flex-direction:column; gap:10px; margin:4px 0 6px; }
  .cf-direct .btn{ width:100%; box-sizing:border-box; text-align:center; text-decoration:none;
                   display:flex; align-items:center; justify-content:center; gap:8px; }
  .cf-direct .cf-wa{ background:#25744a; border-color:#25744a; color:#fff; }
  .cf-or{ display:flex; align-items:center; gap:12px; margin:8px 0 4px; font-size:12px; opacity:0.6; }
  .cf-or::before, .cf-or::after{ content:''; flex:1; height:1px; background:currentColor; opacity:0.35; }
  .cf-note{ font-size:11.5px; opacity:0.62; margin:2px 0 14px; text-align:start; }
  .ka-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(15,10,8,0.62); display:flex; align-items:center; justify-content:center; padding:22px; }
  .ka-box{ background:var(--paper); color:var(--text-dark); border-radius:18px; padding:22px 20px; max-width:380px; width:100%; text-align:center; box-shadow:0 18px 40px rgba(0,0,0,0.35); }
  .ka-icon{ font-size:34px; line-height:1; margin-bottom:6px; }
  .ka-title{ font-family:'Cairo',sans-serif; font-size:17px; margin:0 0 8px; color:var(--wine); }
  .ka-text{ font-size:14px; line-height:1.75; margin:0 0 18px; opacity:0.85; }
  .ka-actions{ display:flex; flex-direction:column; gap:9px; }
  .tile-actions{ display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; margin-top:6px; width:100%; }
  .tile-actions button{ font-size:12px; padding:5px 0; line-height:1.4; min-width:0; width:100%; border-radius:7px; overflow:hidden; }
  .tile-actions button:disabled{ opacity:0.3; }
  .tile-legend{ font-size:11px; opacity:0.72; text-align:center; margin:10px 0 2px; line-height:1.7; }
  .hl-section-title{ font-size:13px; font-weight:700; margin:16px 0 6px; opacity:0.85; }
  /* Client-demo mode: blur anything that identifies a real customer or guest,
     so the admin dashboard can be shown to someone without exposing data. */
  .demo-mode .adm-private{ filter:blur(5px); user-select:none; }
  .adm-filter-btn.active{ background:var(--wine); color:var(--text-on-ink); border-color:var(--wine); }

  .hl-music-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
  .hl-music-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--linen); border-radius:8px; cursor:pointer; font-size:13px; }
  .hl-music-item.selected{ border-color:var(--wine); background:var(--paper-2); }
  .hl-duration-row{ display:flex; gap:8px; margin:4px 0 6px; }
  .hl-dur-btn{ flex:1; border:1.5px solid var(--line); background:var(--paper); border-radius:12px; padding:10px 4px; text-align:center; cursor:pointer; font-family:inherit; color:inherit; }
  .hl-dur-btn b{ display:block; font-size:14px; }
  .hl-dur-btn span{ display:block; font-size:11.5px; opacity:0.65; margin-top:2px; }
  .hl-dur-btn.selected{ border-color:var(--wine); background:var(--paper-2); }
  .hl-dur-note{ font-size:11.5px; opacity:0.7; margin:0 0 14px; }
  .hl-progress-wrap{ background:var(--linen); border-radius:6px; height:8px; overflow:hidden; margin:10px 0; }
  .hl-progress-bar{ height:100%; background:var(--wine); width:0%; transition:width .15s linear; }
  .hl-preview video{ width:100%; border-radius:10px; margin-top:10px; background:#000; }

  /* --- Printed album pages: rendered as real HTML and turned into a PDF
         via the browser's native print dialog ("Save as PDF") instead of a
         canvas-rasterizing library, so Arabic text shaping, fonts and
         object-fit all use the browser's own (correct) rendering. --- */
  /* A button mid-render must not look pressable. Greying it out is not enough
     on a phone — the moving stripe is what tells a person it is alive. */
  .btn.is-working{
    background:linear-gradient(110deg, #6b6257 25%, #8a8074 37%, #6b6257 63%) !important;
    background-size:220% 100% !important;
    animation: workingSweep 1.4s linear infinite;
    color:#fff !important; cursor:progress !important; opacity:1 !important;
    border-color:transparent !important; pointer-events:none;
  }
  @keyframes workingSweep{ 0%{ background-position:220% 0; } 100%{ background-position:-20% 0; } }
  @media (prefers-reduced-motion: reduce){ .btn.is-working{ animation:none; } }
  .work-warning{ display:block; font-size:13.5px; font-weight:700; opacity:1; margin-top:10px; color:var(--wine);
    background:rgba(122,44,40,0.08); border:1px solid rgba(122,44,40,0.25); border-radius:9px; padding:8px 10px; line-height:1.6; }

  .guest-invite{ margin-top:26px; padding:14px 16px; border-radius:12px; background:var(--paper-2);
                 font-size:13px; line-height:1.8; text-align:center; opacity:0.9; }
  .guest-invite a{ color:var(--wine); font-weight:700; text-decoration:underline; margin-inline-start:6px; }
  .grid{ display:flex; flex-wrap:wrap; gap:20px; }
  /* The collapsed host preview is a tidy 2x2, not a loose row that wraps
     differently on every screen width. */
  .grid.preview-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; justify-items:center; }
  .grid.preview-2 .photo-card{ width:100%; max-width:150px; }
  .grid.preview-2 .polaroid{ width:100%; }
  .polaroid{ background:#fff; padding:9px 9px 24px; border-radius:3px; box-shadow:0 6px 14px rgba(0,0,0,0.25); width:140px; position:relative; }
  .polaroid img{ width:100%; height:120px; object-fit:cover; display:block; }
  .polaroid video{ width:100%; height:120px; object-fit:cover; display:block; background:#000; }
  .video-expand-btn{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:2px solid #fff; font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; z-index:2; }
  .polaroid .cap{ position:absolute; bottom:5px; left:0; right:0; text-align:center; font-size:10px; color:#8a8074; }
  .photo-card{ display:flex; flex-direction:column; align-items:center; width:140px; }
  .photo-card:nth-child(3n+1) .polaroid{ transform:rotate(-3deg); }
  .photo-card:nth-child(3n+2) .polaroid{ transform:rotate(2deg); }
  .photo-card:nth-child(3n) .polaroid{ transform:rotate(-1deg); }
  .msg-note{ font-size:11.5px; font-style:italic; color:var(--text-dark); opacity:0.75; text-align:center; max-width:138px; margin:8px 0 0; line-height:1.5; }
  .msg-note:before{ content:'\201C'; } .msg-note:after{ content:'\201D'; }
  .empty-note{ text-align:center; padding:26px 10px; opacity:0.55; font-size:13.5px; }

  .btn{ background:var(--wine); color:#fff; border:none; padding:11px 20px; border-radius:999px; font-family:'Cairo'; font-weight:700; font-size:13.5px; cursor:pointer; }
  .btn:hover{ filter:brightness(1.12); }
  .btn.ghost{ background:transparent; color:var(--wine); border:1.5px solid var(--wine); }
  .btn.small{ padding:7px 14px; font-size:12px; }
  .actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }

  .guest-link-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--paper-2); padding:9px 12px; border-radius:10px; margin-bottom:8px; font-size:13px; }
  .message-item{ background:var(--paper-2); padding:12px 14px; border-radius:10px; margin-bottom:8px; }
  .message-item .m-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .message-item .m-name{ font-weight:700; font-size:12.5px; color:var(--wine); }
  .message-item .m-time{ font-size:10.5px; opacity:0.55; }
  .message-item .m-text{ font-size:13px; line-height:1.6; }
  .guest-link-row .name{ font-weight:700; }
  .guest-link-row code{ direction:ltr; unicode-bidi:plaintext; font-size:11px; opacity:0.7; display:block; }

  .hidden{ display:none !important; }
  .note{ font-size:12px; opacity:0.55; text-align:center; margin-top:24px; line-height:1.8; }
  @media (max-width:480px){ .polaroid{ width:120px; } .photo-card{ width:120px; } }

  /* --- Marketing homepage + pricing page --- */
  .home-hero{ max-width:640px; margin:26px auto 8px; text-align:center; padding:0 20px; }
  .home-hero h1{ font-family: var(--font-display); font-weight:700; font-size:clamp(30px,6vw,46px); margin:10px 0 14px; line-height:1.3; background:linear-gradient(180deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .home-hero p.sub{ font-size:15px; line-height:1.9; opacity:0.8; max-width:480px; margin:0 auto 26px; }
  .home-hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; }
  .home-section-title{ text-align:center; font-family: var(--font-display); font-size:24px; color:var(--gold-light); margin:44px 0 4px; }
  .home-section-sub{ text-align:center; font-size:13px; opacity:0.65; max-width:440px; margin:0 auto 24px; }
  .steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:0 auto; padding:0 20px; }
  .step-card{ background:var(--paper); color:var(--text-dark); border-radius:16px; padding:22px 18px; text-align:center; box-shadow:var(--shadow); }
  .step-card .step-num{ width:32px; height:32px; border-radius:50%; background:var(--wine); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px; font-family:'Cairo'; }
  .step-card h3{ font-family: var(--font-display); color:var(--wine); font-size:16px; margin:0 0 6px; }
  .step-card p{ font-size:12.5px; opacity:0.75; line-height:1.7; margin:0; }
  .feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; max-width:900px; margin:0 auto; padding:0 20px; }
  .feature-card{ background:rgba(255,255,255,0.04); border:1px solid rgba(212,189,134,0.2); border-radius:14px; padding:18px 16px; }
  .feature-card .feature-icon{ font-size:24px; margin-bottom:8px; display:block; }
  .feature-card h3{ font-family: var(--font-display); font-size:15px; margin:0 0 5px; color:var(--gold-light); }
  .feature-card p{ font-size:12.5px; opacity:0.7; line-height:1.7; margin:0; }
  .home-contact{ max-width:520px; margin:0 auto; padding:0 20px; text-align:center; }
  .home-footer{ text-align:center; font-size:11.5px; opacity:0.5; margin:50px 0 10px; }
  .home-footer a{ color:inherit; }
  .pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; max-width:760px; margin:0 auto; padding:0 20px; }
  .price-card{ background:var(--paper); color:var(--text-dark); border-radius:18px; padding:26px 22px; text-align:center; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .price-card.featured{ border:2px solid var(--gold); transform:translateY(-6px); }
  .price-card h3{ font-family: var(--font-display); color:var(--wine); font-size:18px; margin:0 0 6px; }
  .price-card .price{ font-family: var(--font-display); font-size:22px; color:var(--wine); margin:6px 0 14px; }
  .price-card ul{ list-style:none; padding:0; margin:0 0 20px; text-align:start; flex:1; }
  .price-card li{ font-size:12.5px; padding:5px 0; opacity:0.8; }
  .price-card li:before{ content:'✓ '; color:var(--wine); font-weight:700; }
  /* The featured card is lifted by 6px, which only works when something sits
     above it. On the pricing page it is the first card, so the lift just eats
     into the panel padding — keep the border, drop the nudge. */
  .plan-card.featured{ transform:none; }
  .plan-card .plan-list{ list-style:none; padding:0; margin:0 0 18px; text-align:start; }
  .plan-card .plan-list li{ font-size:13px; padding:5px 0; opacity:0.85; }
  .plan-card .plan-list li:before{ content:'✓ '; color:var(--wine); font-weight:700; }
  /* The trial badge on the host panel: a statement of what he has, not a warning. */
  .trial-badge{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
                margin-top:8px; padding:6px 12px; border-radius:999px;
                background:var(--paper-2); border:1px solid var(--gold);
                font-family:'Cairo',sans-serif; font-size:11.5px; color:var(--text-dark); }
  .trial-badge b{ color:var(--wine); }
  .retain-note{ display:block; margin-top:8px; padding:7px 12px; border-radius:10px;
                background:var(--paper-2); border:1px solid rgba(0,0,0,0.08);
                font-family:'Cairo',sans-serif; font-size:11.5px; color:var(--text-dark); }
  /* Only the last stretch turns warm; a permanent red banner stops being read. */
  .retain-note.soon{ border-color:var(--gold); }
  .retain-note.urgent{ border-color:#a33; color:#a33; font-weight:700; }
  .window-note{ display:block; margin:12px 0 4px; padding:10px 14px; border-radius:12px;
                background:var(--paper-2); border:1px solid rgba(0,0,0,0.08);
                font-family:'Cairo',sans-serif; font-size:12.5px; line-height:1.7; }
  .window-note.soon{ border-color:var(--gold); }
  .window-note.shut{ border-color:#a33; color:#a33; font-weight:700; }
  .start-btn{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; text-align:start; }
  .start-btn .type-hint{ font-weight:400; }
  @media (max-width:700px){ .steps-grid{ grid-template-columns:1fr; } }

  /* --- Modern host dashboard cards --- */
  .dash-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
  .dash-head-titles h2{ margin:0 0 6px; }
  .dash-badges{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
  .dash-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-bottom:22px; }
  .dash-stats .stat{ margin:0; background:var(--paper-2); border-radius:14px; }
  /* Only lights up when something actually arrived since the last visit —
     the tile itself never disappears, so the row keeps its shape. */
  .stat.has-new{ background:var(--wine); }
  .stat.has-new b, .stat.has-new span{ color:#fff; }
  .dash-card{ background:var(--paper-2); border-radius:16px; padding:18px 18px 20px; margin-bottom:16px; }
  .dash-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .dash-card-head h3{ font-family: var(--font-display); color:var(--wine); font-size:15.5px; margin:0; display:flex; align-items:center; gap:7px; }
  .dash-card-count{ font-family:'Cairo'; font-weight:700; font-size:11.5px; color:var(--wine); background:#fff; padding:2px 10px; border-radius:999px; }
  .dash-card .desc{ margin:2px 0 14px; }
  .guest-chip-list{ display:flex; flex-direction:column; gap:6px; }
  .guest-chip{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; padding:9px 13px; border-radius:10px; cursor:pointer; transition:transform .12s ease; font-size:13px; }
  .guest-chip:hover{ transform:translateX(-2px); }
  body[dir="rtl"] .guest-chip:hover{ transform:translateX(2px); }
  .guest-chip .name{ font-weight:700; }
  .guest-chip .count-badge{ font-family:'Cairo'; font-size:11px; font-weight:700; color:var(--wine); background:var(--paper-2); padding:2px 9px; border-radius:999px; flex-shrink:0; }
  .dash-quick-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  /* A started-but-unfinished album or video, announced where the button that
     continues it already is. Without this the saved work was invisible and the
     host had no reason to believe anything had been kept. */
  .draft-note{ display:flex; align-items:center; gap:8px; margin:-6px 0 10px; padding:8px 10px;
    border:1px solid var(--gold-light); border-radius:10px; background:var(--paper-2);
    font-size:12.5px; line-height:1.6; color:var(--text-dark); }
  .draft-note b{ color:var(--wine); font-weight:700; }
  .stat .stat-sub{ display:block; font-size:10.5px; opacity:0.6; margin-top:2px; }
  /* The job lives on the dashboard, not inside the editor, so the editor can
     get out of the way the moment the work moves to the server. */
  .job-card{ margin:10px 0 0; padding:10px 12px; border-radius:12px;
             background:rgba(122,30,45,0.06); border:1px solid rgba(122,30,45,0.18); }
  .job-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
  .job-pct{ font-weight:700; color:var(--wine); font-variant-numeric:tabular-nums; }
  .job-note{ font-size:12px; opacity:0.85; margin-top:6px; white-space:pre-line; }
  .job-card.is-done{ background:rgba(34,110,70,0.08); border-color:rgba(34,110,70,0.28); }
  .job-card.is-failed{ background:rgba(168,42,42,0.08); border-color:rgba(168,42,42,0.3); }
  .draft-note .draft-when{ opacity:0.6; }
  .save-state{ font-size:11.5px; opacity:0.75; white-space:nowrap; }
  .save-state.saved{ color:var(--wine); opacity:0.9; }

  /* --- Universal press/click feedback: every clickable control gives a
       visible "pressed" cue the instant it's tapped, before any async
       response comes back. --- */

  /* ============ HOME PAGE — editorial layout ============
     One rule for every section: eyebrow, headline, one sentence, one picture.
     Nothing here is used by the app screens, so it can never break them. */
  #homeRoot{ --hm-ink:#241A14; --hm-clay:#B7745A; --hm-clay-d:#8F5540; --hm-cream:#F3E6DC; --hm-gold:#D4BD86;
             background:#FFFCF9; }
  /* The app screens sit on the dark page ground; the home page is a light
     document, so it takes over the full width below the header. */
  body.home-mode{ background:#FFFCF9; }
  body.home-mode .tagline{ display:none; }
  body.home-mode .topbar{ background:#241A14; max-width:none; padding:15px 22px; border-radius:0;
                          display:flex; justify-content:space-between; align-items:center; }
  body.home-mode .wordmark .en{ color:#D4BD86; }
  body.home-mode .wordmark .ar{ color:#F3E6DC; opacity:0.9; }
  body.home-mode .wordmark .wm-mark{ color:#D4BD86; }
  body.home-mode .lang-btn{ color:#F3E6DC; border-color:rgba(243,230,220,0.4); background:rgba(255,255,255,0.06); }
  /* The top-right corner is where everyone looks for a way back into their own
     account. Without it the only door was a button that reads as "create
     something new", so a returning host had nowhere obvious to press. */
  .topbar-actions{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
  .home-login-btn{ display:none; }
  /* Literal colours, not the --hm-* tokens: those are scoped to #homeRoot and
     this button lives in the page header, outside it — using them here left the
     button with no background at all. */
  body.home-mode .home-login-btn{
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    background:#B7745A; color:#fff; border:none;
    font-family:'Cairo',sans-serif; font-weight:700; font-size:15px;
    padding:10px 20px; border-radius:999px; cursor:pointer; }
  body.home-mode .home-login-btn:active{ background:#8F5540; }
  /* On a phone the wordmark plus two pills overflow and the header doubles in
     height, so the pills get smaller rather than wrapping under the logo. */
  @media (max-width:520px){
    body.home-mode .topbar{ flex-wrap:nowrap; padding:12px 14px; }
    body.home-mode .home-login-btn{ font-size:13px; padding:9px 14px; }
    body.home-mode .lang-btn{ font-size:13px; padding:9px 13px; }
    body.home-mode .topbar-actions{ gap:7px; }
    /* The mark plus one wordmark is enough on a phone; showing both names as
       well as two pills squeezed the logo onto two lines. */
    body.home-mode .wordmark{ gap:7px; min-width:0; }
    body.home-mode .wordmark .en,
    body.home-mode .wordmark .ar{ white-space:nowrap; font-size:17px; }
    html[lang="ar"] body.home-mode .wordmark .en{ display:none; }
    html[lang="en"] body.home-mode .wordmark .ar{ display:none; }
  }
  /* A quiet second door under the hero buttons, for whoever scrolls past the header. */
  .hm-signin-note{ margin:14px 0 0; font-size:13.5px; color:rgba(255,255,255,0.72); }
  .hm-signin-note button{ background:none; border:none; padding:0; cursor:pointer;
    font-family:'Cairo',sans-serif; font-size:13.5px; font-weight:700; color:var(--hm-gold);
    text-decoration:underline; text-underline-offset:4px; }
  .hm{ max-width:1080px; margin:0 auto; padding:0 20px; color:var(--hm-ink); }
  .hm-serif{ font-family:'Amiri', serif; font-weight:700; }
  html[lang="en"] .hm-serif, body[data-lang="en"] .hm-serif{ font-family:'Cormorant Garamond', serif; }
  .hm-eyebrow{ font-family:'Cairo',sans-serif; font-size:11.5px; font-weight:700; color:var(--hm-clay);
               opacity:0.9; margin:0 0 12px; }
  .hm-h2{ font-size:clamp(27px,6.6vw,44px); line-height:1.45; margin:0 0 14px; color:var(--hm-ink); }
  .hm-lead{ font-size:15.5px; line-height:1.95; opacity:0.72; margin:0 auto 26px; max-width:52ch; }
  .hm-sec{ padding:56px 0; }
  .hm-sec.alt{ background:var(--hm-cream); }
  .hm-center{ text-align:center; }

  /* full-bleed hero */
  .hm-hero{ position:relative; min-height:72vh; display:flex; align-items:flex-end;
            overflow:hidden; border-radius:0 0 28px 28px; }
  .hm-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 42%;
               transform:scale(1.06); animation:hmDrift 26s ease-in-out infinite alternate; }
  @keyframes hmDrift{ from{ transform:scale(1.06) translate3d(0,0,0);} to{ transform:scale(1.14) translate3d(0,-1.6%,0);} }
  @media (prefers-reduced-motion:reduce){ .hm-hero-bg{ animation:none; } }
  .hm-hero-scrim{ position:absolute; inset:0;
    background:linear-gradient(to top, rgba(20,13,10,0.94) 0%, rgba(20,13,10,0.62) 34%, rgba(20,13,10,0.20) 78%, rgba(20,13,10,0.32) 100%); }
  .hm-hero-inner{ position:relative; z-index:2; width:100%; padding:0 22px 46px; color:#fff; }
  .hm-hero .hm-eyebrow{ color:var(--hm-gold); }
  .hm-hero h1{ font-size:clamp(30px,8.4vw,58px); line-height:1.42; margin:0 0 16px; color:#fff; }
  .hm-hero p{ font-size:16px; line-height:1.9; color:rgba(255,255,255,0.86); max-width:44ch; margin:0 0 26px; }

  .hm-cta{ display:inline-flex; align-items:center; gap:9px; background:var(--hm-ink); color:#fff;
           border:none; font-family:'Cairo',sans-serif; font-weight:700; font-size:15px;
           padding:15px 30px; border-radius:999px; cursor:pointer; text-decoration:none; }
  .hm-cta.clay{ background:var(--hm-clay); }
  .hm-cta.ghost{ background:transparent; color:var(--hm-ink); border:1.5px solid rgba(36,26,20,0.28); }
  .hm-hero .hm-cta.ghost{ color:#fff; border-color:rgba(255,255,255,0.5); }
  .hm-actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .hm-center .hm-actions{ justify-content:center; }

  /* a section that pairs one picture with one idea */
  .hm-split{ display:grid; gap:30px; align-items:center; }
  @media(min-width:860px){ .hm-split{ grid-template-columns:1fr 1fr; gap:56px; } .hm-split.flip .hm-split-media{ order:2; } }
  .hm-shot{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:20px; display:block;
            box-shadow:0 18px 40px rgba(36,26,20,0.16); }
  .hm-shot.wide{ aspect-ratio:16/10; }

  /* numbered steps */
  .hm-steps{ display:grid; gap:22px; }
  @media(min-width:860px){ .hm-steps{ grid-template-columns:repeat(3,1fr); gap:26px; } }
  .hm-step{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 28px rgba(36,26,20,0.09); }
  .hm-step img{ width:100%; height:180px; object-fit:cover; display:block; }
  .hm-step-body{ padding:20px 20px 24px; }
  .hm-step-n{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
              border-radius:50%; background:var(--hm-clay); color:#fff; font-family:'Cairo',sans-serif;
              font-weight:700; font-size:14px; margin-bottom:10px; }
  .hm-step h3{ font-family:'Cairo',sans-serif; font-size:17px; margin:0 0 7px; }
  .hm-step p{ font-size:14px; line-height:1.85; opacity:0.7; margin:0; }

  /* every kind of occasion */
  .hm-occasions{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  @media(min-width:760px){ .hm-occasions{ grid-template-columns:repeat(3,1fr); gap:16px; } }
  .hm-occ{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; }
  .hm-occ img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .hm-occ:hover img{ transform:scale(1.06); }
  .hm-occ span{ position:absolute; inset-inline-start:0; bottom:0; width:100%; padding:26px 14px 12px;
                color:#fff; font-family:'Cairo',sans-serif; font-weight:700; font-size:14px;
                background:linear-gradient(to top, rgba(20,13,10,0.82), rgba(20,13,10,0)); }

  /* what you walk away with */
  .hm-gets{ display:grid; gap:18px; }
  @media(min-width:760px){ .hm-gets{ grid-template-columns:1fr 1fr; gap:24px; } }
  .hm-get{ background:#fff; border:1px solid rgba(183,116,90,0.18); border-radius:20px; padding:26px 22px; }
  .hm-get .ic{ font-size:26px; line-height:1; display:block; margin-bottom:12px; }
  .hm-get h3{ font-family:'Cairo',sans-serif; font-size:17px; margin:0 0 8px; }
  .hm-get p{ font-size:14px; line-height:1.9; opacity:0.72; margin:0; }

  .hm-quiet{ display:grid; gap:14px; }
  @media(min-width:760px){ .hm-quiet{ grid-template-columns:repeat(3,1fr); } }
  .hm-quiet div{ font-size:14px; line-height:1.85; opacity:0.75; padding:16px 0; border-top:1px solid rgba(36,26,20,0.12); }
  .hm-quiet b{ display:block; font-family:'Cairo',sans-serif; font-size:15px; opacity:1; margin-bottom:5px; color:var(--hm-clay-d); }

  .hm-closing{ background:var(--hm-ink); color:#fff; border-radius:28px; padding:56px 24px; text-align:center; }
  .hm-closing .hm-h2{ color:#fff; }
  .hm-closing .hm-lead{ color:rgba(255,255,255,0.75); }
  .hm-closing .hm-cta{ background:var(--hm-clay); }
  .hm-closing .hm-cta.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }

  .hm-foot{ text-align:center; padding:34px 20px 46px; font-size:12.5px; color:var(--hm-ink); opacity:0.62; }
  .hm-foot a{ color:var(--hm-ink); }
  .hm-mark{ width:52px; height:52px; margin:0 auto 12px; color:var(--hm-clay); opacity:0.75; }
  .hm-mark svg{ width:100%; height:100%; display:block; }

  /* everything arrives as you reach it */
  .hm-rise{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .hm-rise.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .hm-rise{ opacity:1; transform:none; transition:none; } }

  .btn, .lang-btn, .type-btn, .guest-chip, .dropzone, a.btn{ transition: transform .1s ease, filter .1s ease, box-shadow .1s ease; }
  .btn:active, .lang-btn:active, .type-btn:active, .guest-chip:active, .dropzone:active, a.btn:active{ transform:scale(0.95); filter:brightness(0.94); }
  button:active{ transform:scale(0.95); }


  /* While any sheet or full-screen editor is open, the page behind it holds
     still. Without this, a finger dragging inside the contact form on a phone
     scrolled the home page underneath instead of the form — and the same was
     true of every editor and sheet on the site. overscroll-behavior stops a
     scroll that reaches the end of a sheet from carrying on into the page. */
  html:has(.album-editor:not(.hidden)),
  html:has(.ka-overlay:not(.hidden)),
  html:has(.trim-sheet:not(.hidden)),
  html:has(#lightbox.is-open){ overflow:hidden; }
  body:has(.album-editor:not(.hidden)),
  body:has(.ka-overlay:not(.hidden)),
  body:has(.trim-sheet:not(.hidden)),
  body:has(#lightbox.is-open){ overflow:hidden; }
  .album-editor, .album-editor-panel, .ka-overlay, .ka-box, .trim-sheet, #lightbox{
    overscroll-behavior:contain; }

  /* ---------- guest join (name + email) ---------- */
  .guest-join .field label{ display:block; }
  .join-why{ font-size:12.5px; line-height:1.7; opacity:0.75; margin:2px 0 14px; }
  .guest-link-note{ max-width:420px; margin:12px auto 0; background:var(--paper-2); color:var(--text-dark); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.7; text-align:center; }
  .guest-link-note input{ color:var(--text-dark); }
  .guest-link-email{ font-weight:700; margin:4px 0 10px; unicode-bidi:plaintext; overflow-wrap:anywhere; }
  .guest-link-note input{ width:100%; }
  .link-btn{ background:none; border:0; padding:4px 6px; margin-top:6px; font:inherit; font-size:12.5px; text-decoration:underline; opacity:0.7; cursor:pointer; color:inherit; }

  /* ---------- new-event form ---------- */
  .form-label{ display:block; font-size:12.5px; opacity:0.85; margin:4px 0 6px; }
  .req{ display:inline-block; font-size:10.5px; font-weight:700; color:var(--wine); background:var(--paper-2); border:1px solid var(--wine); border-radius:999px; padding:0 7px; margin-inline-start:4px; opacity:1; vertical-align:1px; }
  .field-error, input.field-error{ outline:2px solid #b3261e; outline-offset:2px; border-radius:10px; }
  .type-row.field-error{ outline-offset:6px; border-radius:14px; }
  #createStatus{ margin-top:10px; }