/* QC Event Manager - Quick Clean brand kit, mobile first */
:root {
  /* Brand kit palette */
  --blue-deep: #2F7FB0;
  --blue: #49A0D2;
  --blue-soft: #8BC3E4;
  --blue-mist: #D6ECF7;
  --green-deep: #168468;
  --green: #22A785;
  --green-mist: #D8F1EA;
  --ink: #1E1E1E;
  --slate: #5F6368;
  --grey: #A0A4A8;
  --line: #DCE4EA;
  --navy: #276C96;                 /* QC Deep Blue, pressed shade: app frame and strong text */
  --navy-ink: #1E5A80;             /* QC Deep Blue, darkest step */

  /* Roles */
  --bg: #F2F6F9;                   /* pale linen-blue canvas so white panels lift off it */
  --surface: #FFFFFF;
  --surface-2: #F4F7F9;           /* a lighter step of the kit's light shade, for quiet fills */
  --shadow-1: 0 1px 2px rgba(30, 90, 128, .06), 0 1px 1px rgba(30, 90, 128, .03);
  --shadow-2: 0 14px 32px -14px rgba(30, 90, 128, .28);
  --text: var(--ink);
  --muted: var(--slate);
  --action: var(--blue-deep);
  --action-press: #276C96;
  --ok: var(--green-deep);
  --danger: #B3261E;               /* errors only; not part of the brand palette */
  --danger-mist: #FBEAE9;
  --warn: #8A5A00;
  --warn-mist: #FFF4DB;

  --radius: 14px;
  --radius-sm: 10px;
  --nav-h: 64px;
  --top-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* hidden always wins over a component's own display */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
html, body { margin: 0; padding: 0; }
/* clip, not hidden: nothing can make the page slide sideways, and sticky headers keep working */
html, body { overflow-x: clip; max-width: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* Installed app: behave like an app, not a web page. Slim scrollbars that stay out of the way,
   no text selection or long-press menus on buttons and navigation, no rubber-band scrolling. */
@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: fullscreen) {
  html { scrollbar-width: thin; scrollbar-color: rgba(30, 90, 128, .28) transparent; }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(30, 90, 128, .25); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(30, 90, 128, .45); }
  ::-webkit-scrollbar-corner { background: transparent; }
  body { overscroll-behavior: none; }
  button, nav, header, .tabs, .seg, .chip, .hub-app, label, summary, [role="tab"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  img { -webkit-user-drag: none; -webkit-touch-callout: none; }
}
/* Phones and tablets: no double-tap zoom, and no auto-zoom when a field is tapped
   (iOS zooms into any input whose text is under 16px). */
html { touch-action: manipulation; }
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}
/* Home-screen app on a phone or iPad: no visible scroll bars anywhere */
@media (pointer: coarse) and (display-mode: standalone), (pointer: coarse) and (display-mode: fullscreen) {
  *, html { scrollbar-width: none; }
  ::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
html.app-mode, html.app-mode body { overscroll-behavior: none; }
@media (pointer: coarse) {
  html.app-mode *, html.app-mode { scrollbar-width: none; }
  html.app-mode ::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
a { color: var(--action); text-decoration: none; }
img { max-width: 100%; display: block; }
svg { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 17px; }
p { margin: 0 0 10px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
small, .muted { color: var(--muted); }
small { font-size: 14px; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.tagline { font-family: var(--serif); font-style: italic; color: var(--ink); }
button, a, [role="button"], label.btn, .list-item, .chip-btn { touch-action: manipulation; }
button, [role="button"], .btn, .chip, .tabs a, .seg button, .bottomnav a { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

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

/* ---------- boot / spinner ---------- */
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot img { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--blue-mist); border-top-color: var(--blue-deep); animation: spin .8s linear infinite; }
.spinner.sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- app shell ---------- */
.shell { min-height: 100dvh; }
.maincol { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 8px 0 16px; display: flex; align-items: center; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .title { flex: 1; min-width: 0; font-weight: 700; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .back { margin-left: -8px; }
.topbar .logo { height: 30px; width: auto; }
.brandmark { display: flex; align-items: center; }
main.content { padding: 16px 16px calc(var(--nav-h) + var(--safe-b) + 24px); max-width: 1440px; margin: 0 auto; }

.bottomnav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--muted); font-weight: 700; }
.bottomnav a.active { color: var(--blue-deep); }
.bottomnav a svg { width: 24px; height: 24px; }
.bottomnav .fab span.btn-fab { width: 60px; height: 60px; margin-top: -24px; border-radius: 50%; background: var(--blue-deep); color: #fff; display: grid; place-items: center; border: 4px solid var(--bg); box-shadow: 0 4px 14px rgba(47, 127, 176, .35); transition: transform 120ms var(--ease-out); }
.bottomnav .fab:active span.btn-fab { transform: scale(.94); }
.bottomnav .fab svg { width: 28px; height: 28px; }

.sidebar { display: none; }

@media (min-width: 960px) {
  .shell { display: grid; grid-template-columns: 248px 1fr; }
  .sidebar { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100dvh; padding: 22px 14px; background: var(--surface); border-right: 1px solid var(--line); }
  .sidebar .brandmark { padding: 0 8px 22px; }
  .sidebar .brandmark img { width: 190px; height: auto; }
  .sidebar a.nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 700; }
  .sidebar a.nav svg { width: 20px; height: 20px; color: var(--slate); }
  .sidebar a.nav.active { background: var(--blue-mist); color: var(--blue-deep); }
  .sidebar a.nav.active svg { color: var(--blue-deep); }
  .sidebar .scan-cta { margin: 0 0 16px; }
  .sidebar .spacer { flex: 1; }
  .sidebar .me { padding: 12px; font-size: 14px; color: var(--slate); border-top: 1px solid var(--line); }
  .sidebar .me .tagline { display: block; margin-top: 10px; font-size: 14px; }
  .bottomnav { display: none; }
  main.content { padding: 28px 32px 56px; }
  .topbar { padding: 0 32px; }
  .hide-desktop { display: none !important; }
}
@media (max-width: 959px) { .hide-mobile { display: none !important; } }
@media (hover: hover) and (pointer: fine) {
  .sidebar a.nav:hover { background: var(--surface-2); }
  .sidebar a.nav.active:hover { background: var(--blue-mist); }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform 120ms var(--ease-out), background-color 120ms; }
.btn:active { transform: scale(.97); background: var(--surface-2); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn svg { width: 19px; height: 19px; }
.btn.primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn.primary:active { background: var(--action-press); }
.btn.green { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn.danger { color: var(--danger); border-color: #EBC4C1; }
.btn.danger.solid { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--action); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.lg { min-height: 56px; font-size: 17px; padding: 0 22px; }
.btn.block { width: 100%; }
.icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; flex: none; transition: background-color 120ms; }
.icon-btn:active { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-row.end { justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--surface-2); }
  .btn.primary:hover { background: var(--action-press); }
  .btn.green:hover { background: #12705A; }
  .btn.ghost:hover { background: var(--blue-mist); }
  .icon-btn:hover { background: var(--surface-2); }
}

/* ---------- layout ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card.pad { padding: 16px; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.card-h h3 { display: flex; align-items: center; gap: 8px; }
.card-b { padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.sm { gap: 8px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.grid > *, .stack > * { min-width: 0; }
.grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .grid.main-side { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.section-title { font-size: 15px; font-weight: 700; color: var(--slate); margin: 4px 0 8px; }

.stat { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.stat b { display: block; font-size: 28px; line-height: 1.1; color: var(--blue-deep); }
.stat span { font-size: 14px; color: var(--slate); }
.stat.link:active { background: var(--surface-2); }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; min-height: 56px; }
.list-item:last-child { border-bottom: 0; }
.list-item:active { background: var(--surface-2); }
.list-item .meta { flex: 1; min-width: 0; }
.list-item .meta b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .meta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item input[type=checkbox] { width: 22px; height: 22px; flex: none; }
@media (hover: hover) and (pointer: fine) { .list-item:hover { background: var(--surface-2); } }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.empty svg { width: 40px; height: 40px; margin: 0 auto 8px; color: var(--grey); display: block; }

/* ---------- avatar ---------- */
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--blue-deep); overflow: hidden; font-size: 15px; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 96px; height: 96px; font-size: 32px; }
.avatar.sm { width: 36px; height: 36px; font-size: 13px; }
.avatar .badge-li { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; background: var(--green-deep); border: 2px solid #fff; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--slate); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok, .chip.brand { background: var(--green-mist); color: var(--green-deep); border-color: #B5E2D4; }
.chip.info, .chip.li { background: var(--blue-mist); color: var(--blue-deep); border-color: #B6DAEE; }
.chip.warn { background: var(--warn-mist); color: var(--warn); border-color: #F0D9A6; }
.chip.danger { background: var(--danger-mist); color: var(--danger); border-color: #EBC4C1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- forms ---------- */
label.f { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--slate); }
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); outline: none; transition: border-color 120ms, box-shadow 120ms; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue-deep); box-shadow: 0 0 0 3px var(--blue-mist); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--blue-deep); }
input[type=color] { padding: 4px; width: 64px; }
input.code-input { font-size: 28px; letter-spacing: 10px; text-align: center; font-weight: 700; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; min-height: 44px; }
.check input { width: 22px; height: 22px; }
.form-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span2 { grid-column: span 2; } }
.hint { font-size: 13px; color: var(--muted); font-weight: 400; }
.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slate); }
.search input { padding-left: 40px; }

/* switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 700; }
.switch input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; min-height: 0; padding: 0; border-radius: 999px; background: var(--line); border: 0; position: relative; flex: none; transition: background-color 160ms; cursor: pointer; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 160ms var(--ease-out); }
.switch input:checked { background: var(--blue-deep); }
.switch input:checked::after { transform: translateX(20px); }
.switch input:focus { box-shadow: 0 0 0 3px var(--blue-mist); }

/* ---------- tabs / segmented ---------- */
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 -16px; padding: 0 16px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 12px; font-weight: 700; color: var(--slate); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--blue-deep); border-color: var(--blue-deep); }
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; gap: 2px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.seg button { border: 0; background: transparent; min-height: 36px; padding: 0 12px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; color: var(--slate); cursor: pointer; white-space: nowrap; }
.seg button.active { background: var(--surface); color: var(--blue-deep); box-shadow: 0 1px 2px rgba(30, 30, 30, .12); }
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters select { width: auto; min-height: 40px; font-size: 16px; padding: 6px 30px 6px 12px; border-radius: 999px; }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
table.t th, table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.t th { font-size: 14px; color: var(--slate); background: var(--surface-2); }

/* ---------- sheet / modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(30, 30, 30, .5); display: flex; align-items: flex-end; justify-content: center; animation: fade 160ms var(--ease-out); }
.sheet { background: var(--surface); width: 100%; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; border-radius: 18px 18px 0 0; padding: 8px 16px calc(16px + var(--safe-b)); animation: up 220ms var(--ease-out); }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 4px auto 12px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
@media (min-width: 700px) {
  .overlay { align-items: center; }
  .sheet { width: min(640px, 94vw); border-radius: 16px; padding: 20px 22px; }
  .sheet.wide { width: min(980px, 96vw); }
  .sheet .grab { display: none; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: .5; } }

/* ---------- toast ---------- */
#toasts { position: fixed; z-index: 200; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 14px); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 15px; animation: up 200ms var(--ease-out); pointer-events: auto; box-shadow: 0 8px 24px rgba(30, 30, 30, .2); }
.toast.error { background: var(--danger); }
.toast.ok { background: var(--green-deep); }
@media (min-width: 960px) { #toasts { bottom: 24px; } }

/* ---------- scan ---------- */
.scan-wrap { max-width: 560px; margin: 0 auto; }
.event-pill { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 52px; border-radius: var(--radius); background: var(--blue-mist); color: var(--blue-deep); font-weight: 700; }
.event-pill select { flex: 1; background: transparent; border: 0; min-height: 48px; padding: 0; font-weight: 700; color: var(--blue-deep); box-shadow: none; }
.cam-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 46dvh; padding: 24px; border-radius: 18px; background: var(--blue-deep); color: #fff; cursor: pointer; text-align: center; transition: transform 140ms var(--ease-out), background-color 140ms; }
.cam-btn:active { transform: scale(.985); background: var(--action-press); }
.cam-btn svg { width: 64px; height: 64px; }
.cam-btn b { font-size: 24px; }
.cam-btn span { font-size: 15px; opacity: .9; }
.cam-btn input, .gallery-btn input { display: none; }
.gallery-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--blue-deep); font-weight: 700; font-size: 17px; cursor: pointer; transition: transform 120ms var(--ease-out); }
.gallery-btn:active { transform: scale(.98); background: var(--surface-2); }
.gallery-btn svg { width: 22px; height: 22px; }

/* Live in-app camera */
body.no-scroll { overflow: hidden; }
.camera { position: fixed; inset: 0; z-index: 120; background: #000; color: #fff; display: flex; flex-direction: column; animation: fade 160ms var(--ease-out); }
.camera-top, .camera-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + var(--safe-t)) 16px 10px; }
.camera-title { flex: 1; min-width: 0; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camera-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.camera-icon.on { background: #fff; color: var(--navy-ink); }
.camera-icon b { font-size: 14px; }
.camera-pill { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.camera-view video.mirror { transform: scaleX(-1); }
.camera.photo-mode .camera-top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.camera.photo-mode .camera-bottom { background: #000; }
.camera-view.grid::before, .camera-view.grid::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.camera-view.grid::before { background: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.camera-view.grid::after { background: linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .45) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.camera-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 700; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); pointer-events: none; }
.camera-count.tick { animation: tick 1s var(--ease-out); }
@keyframes tick { from { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } }
.camera-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camera-flash.go { animation: shutter 260ms ease-out; }
@keyframes shutter { from { opacity: .85; } to { opacity: 0; } }
.camera-zoom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .4); }
.camera-zoom button { min-width: 40px; height: 34px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.camera-zoom button.on { background: rgba(255, 255, 255, .92); color: var(--navy-ink); }
.camera.busy .camera-shutter { opacity: .5; }
.camera-bottom { padding: 18px 28px calc(22px + var(--safe-b)); }
.camera-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.camera-view video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.camera-frame { position: absolute; left: 50%; top: 50%; width: min(86%, 560px); aspect-ratio: 1.75; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, .9); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.camera-icon { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; }
.camera-icon svg { width: 24px; height: 24px; }
.camera-shutter { width: 76px; height: 76px; border-radius: 50%; border: 5px solid #fff; background: rgba(255, 255, 255, .25); cursor: pointer; transition: transform 120ms var(--ease-out); }
.camera-shutter:active { transform: scale(.92); background: #fff; }
.camera-msg { margin: auto; width: min(100%, 420px); padding: 24px 16px calc(24px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.camera-msg p { color: rgba(255, 255, 255, .85); }
.camera-msg .stack { width: 100%; }
.camera-msg-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--blue-deep); display: grid; place-items: center; }
.camera-msg-icon svg { width: 36px; height: 36px; }
.camera-msg .btn.ghost { color: #fff; }
.shot { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); aspect-ratio: 1.6; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .tag { position: absolute; left: 10px; top: 10px; }
.shot .remove { position: absolute; right: 8px; top: 8px; background: rgba(255, 255, 255, .92); }
.shots { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.shots.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.add-back { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1px dashed var(--blue-soft); border-radius: var(--radius); color: var(--blue-deep); font-weight: 700; cursor: pointer; background: var(--surface); }
.add-back input { display: none; }
button.cam-btn, button.add-back { width: 100%; border: 0; font: inherit; }
button.add-back { border: 1px dashed var(--blue-soft); }
.temp-opts { display: flex; gap: 8px; }
.temp-opts button { flex: 1; min-height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; transition: transform 120ms var(--ease-out); }
.temp-opts button:active { transform: scale(.97); }
.temp-opts button.on[data-v=hot] { background: var(--danger-mist); border-color: #E0A8A3; color: var(--danger); }
.temp-opts button.on[data-v=warm] { background: var(--warn-mist); border-color: #E8C98A; color: var(--warn); }
.temp-opts button.on[data-v=cold] { background: var(--blue-mist); border-color: var(--blue-soft); color: var(--blue-deep); }
.queue-item .thumb-sm { width: 56px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--grey); }
.status-dot.processing, .status-dot.queued { background: var(--blue); animation: pulse 1.2s ease-in-out infinite; }
.status-dot.done { background: var(--green); }
.status-dot.needs_review, .status-dot.failed { background: #D98A00; }
.reading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.match-box { border: 1px solid var(--blue-soft); background: var(--blue-mist); border-radius: var(--radius); padding: 12px; }
.match-opt { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); margin-top: 8px; cursor: pointer; }
.match-opt.sel { border-color: var(--blue-deep); box-shadow: 0 0 0 2px var(--blue-mist); }
.sticky-actions { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b)); background: linear-gradient(to top, var(--bg) 75%, rgba(255, 255, 255, 0)); padding: 14px 0 8px; margin-top: 8px; z-index: 5; }
@media (min-width: 960px) { .sticky-actions { bottom: 0; } }

/* ---------- profile ---------- */
.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 16px 16px; }
.profile-head h1 { font-size: 24px; }
.profile-head .role { color: var(--slate); }
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 16px; }
.quick-actions a, .quick-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; background: var(--blue-mist); border: 0; color: var(--blue-deep); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 120ms var(--ease-out); }
.quick-actions a:active { transform: scale(.96); }
.quick-actions svg { width: 22px; height: 22px; }
.quick-actions .disabled { opacity: .4; pointer-events: none; background: var(--surface-2); color: var(--slate); }
.kv { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px 12px; font-size: 15px; margin: 0; }
.kv dt { color: var(--slate); font-weight: 700; }
.kv dd { margin: 0; word-break: break-word; }
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.tl-item:last-child { border: 0; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex: none; }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font-size: 12px; color: #fff; background: rgba(30, 30, 30, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.card-img { aspect-ratio: 1.6; }
.check-list { list-style: none; padding: 0; margin: 6px 0 0; font-size: 14px; }
.check-list li { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.check-list .y { color: var(--green-deep); font-weight: 700; } .check-list .n { color: var(--danger); font-weight: 700; }
.meter { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.meter > i { display: block; height: 100%; background: var(--green); }

/* ---------- events ---------- */
.event-card { display: flex; gap: 12px; padding: 14px; cursor: pointer; color: var(--ink); }
.event-card:active { background: var(--surface-2); }
.date-tile { width: 56px; flex: none; text-align: center; border-radius: 10px; background: var(--blue-mist); color: var(--blue-deep); padding: 6px 0; }
.date-tile b { display: block; font-size: 24px; line-height: 1; }
.date-tile span { font-size: 13px; font-weight: 700; }

/* ---------- campaign ---------- */
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.step.off { opacity: .55; }
.step .num { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--blue-deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.step.off .num { background: var(--grey); }
.campaign-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); flex-wrap: wrap; }
.campaign-banner.running { background: var(--green-mist); }
.campaign-banner.draft, .campaign-banner.paused { background: var(--blue-mist); }
.campaign-banner.completed { background: var(--surface-2); }

/* ---------- studio ---------- */
.studio { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .studio { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .studio .preview-pane { position: sticky; top: 76px; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-2); }
.toolbar button { min-width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); padding: 0 8px; }
.toolbar button:active { background: var(--surface); }
.editor { min-height: 320px; padding: 14px; border: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--surface); outline: none; overflow: auto; font-size: 16px; }
.editor:focus { border-color: var(--blue-deep); }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: 14px; min-height: 320px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.preview-frame { width: 100%; height: 680px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pick button { border: 1px solid var(--blue-soft); background: var(--blue-mist); color: var(--blue-deep); border-radius: 8px; min-height: 34px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ---------- import ---------- */
.dropzone { display: grid; place-items: center; gap: 8px; padding: 36px 16px; border: 2px dashed var(--blue-soft); border-radius: 16px; background: var(--surface); text-align: center; cursor: pointer; color: var(--blue-deep); }
.dropzone.over { background: var(--blue-mist); }
.dropzone svg { width: 42px; height: 42px; }
.dropzone input { display: none; }
.file-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--green-mist); color: var(--green-deep); font-weight: 700; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .map-row { grid-template-columns: 1fr 1fr 1.4fr; align-items: center; gap: 12px; } }
.map-row .sample { font-size: 14px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- sign in ---------- */
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); background: var(--bg); }
.auth .panel { width: min(420px, 100%); }
.auth .logo { width: 230px; height: auto; margin: 0 auto 6px; }
.auth .tagline { text-align: center; font-size: 17px; margin-bottom: 18px; }
.auth .foot { font-size: 14px; color: var(--slate); text-align: center; }

.integration { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.integration:last-child { border: 0; }
.callout { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--blue-mist); font-size: 15px; color: var(--ink); }
.callout.warn { background: var(--warn-mist); color: #5C3D00; }
.callout.ok { background: var(--green-mist); color: #0E5543; }
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(30, 30, 30, .92); display: grid; place-items: center; padding: 16px; }
.lightbox img { max-height: 90dvh; max-width: 100%; border-radius: 8px; }
.count-badge { background: var(--blue-deep); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; }

/* =====================================================================
   Premium finish in QC colours: Deep Blue frame, pale blue canvas, lifted panels.
   The one bold element is the capture panel on Scan / Photo.
   ===================================================================== */
h1 { font-size: 28px; letter-spacing: -0.015em; }
h2 { font-size: 21px; letter-spacing: -0.01em; }
.page-head h1 { color: var(--navy-ink); }

/* frame */
.topbar { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: rgba(30, 90, 128, .08); }
.topbar .title { font-size: 19px; color: var(--navy-ink); }
.bottomnav { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-top-color: rgba(30, 90, 128, .08); box-shadow: 0 -8px 24px -18px rgba(30, 90, 128, .35); }
.bottomnav a.active { color: var(--navy); }
.bottomnav .fab span.btn-fab { background: var(--navy); border-color: var(--bg); box-shadow: 0 10px 22px -8px rgba(30, 90, 128, .6); }
@media (min-width: 960px) {
  .sidebar { background: var(--navy); border-right: 0; color: #fff; }
  .sidebar .brandmark { justify-content: center; margin-bottom: 18px; padding: 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .35); }
  .sidebar .brandmark img { width: 176px; }
  .sidebar a.nav { color: rgba(255, 255, 255, .78); position: relative; }
  .sidebar a.nav svg { color: rgba(255, 255, 255, .6); }
  .sidebar a.nav.active { background: rgba(255, 255, 255, .1); color: #fff; }
  .sidebar a.nav.active svg { color: var(--green); }
  .sidebar a.nav.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
  .sidebar .scan-cta.btn { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 10px 22px -10px rgba(34, 167, 133, .8); }
  .sidebar .me { color: rgba(255, 255, 255, .66); border-top-color: rgba(255, 255, 255, .12); }
  .sidebar .me b { color: #fff; }
  .sidebar .me a { color: #9FD3EE; }
  .sidebar .me .tagline { color: rgba(255, 255, 255, .82); }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .sidebar a.nav:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .sidebar a.nav.active:hover { background: rgba(255, 255, 255, .1); }
  .sidebar .scan-cta.btn:hover { background: var(--green-deep); }
}

/* panels and controls */
.card, .stat, .step, .match-opt { box-shadow: var(--shadow-1); }
.card { border-color: rgba(30, 90, 128, .09); }
.stat b { font-size: 32px; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.btn.primary { background: var(--action); box-shadow: 0 8px 18px -10px rgba(47, 127, 176, .9); }
.btn.lg { border-radius: 12px; }
input, select, textarea { border-color: #D3DDE5; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--blue-mist); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--navy); box-shadow: 0 1px 3px rgba(30, 90, 128, .14); }
.date-tile { background: var(--navy); color: #fff; }
.date-tile span { opacity: .8; }
.toast { background: var(--navy-ink); border-radius: 12px; }
.overlay { background: rgba(30, 90, 128, .46); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet { border-radius: 22px 22px 0 0; }
@media (min-width: 700px) { .sheet { border-radius: 20px; box-shadow: var(--shadow-2); } }
.sticky-actions { background: linear-gradient(to top, var(--bg) 75%, rgba(242, 246, 249, 0)); }
.event-pill { background: var(--surface); border: 1px solid rgba(30, 90, 128, .09); box-shadow: var(--shadow-1); color: var(--navy); }
.event-pill select { color: var(--navy); }
.auth { background: radial-gradient(120% 60% at 50% 0%, #E3EFF7 0%, var(--bg) 60%); }
.auth .card { box-shadow: var(--shadow-2); border: 0; }
.sso-btn { gap: 12px; border-color: #C9D2D9; background: #fff; color: #2F2F2F; font-weight: 700; }
.zoho-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; background: #E42527; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
a.forgot { font-weight: 700; font-size: 14px; }

/* QuickClean home: app tiles. Event Manager's menu is hidden here. */
body.on-hub .sidebar, body.on-hub .bottomnav { display: none; }
body.on-hub .shell { display: block; }
body.on-hub main.content { padding-bottom: calc(32px + var(--safe-b)); }
body.on-hub .install-pop { bottom: calc(var(--safe-b) + 12px); }
.hub { max-width: 980px; margin: 0 auto; }
.hub-live, .hub-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-app { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(30, 90, 128, .09); box-shadow: var(--shadow-1); color: var(--ink); }
.hub-icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--blue-mist); color: var(--navy); }
.hub-icon svg { width: 26px; height: 26px; }
.hub-text { flex: 1; min-width: 0; }
.hub-text b, .hub-text small { display: block; }
.hub-text b { font-size: 17px; }
.hub-app.live { padding: 22px 20px; color: #fff; background: linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 55%, var(--action-press) 100%); border: 0; box-shadow: 0 22px 44px -22px rgba(47, 127, 176, .75); transition: transform 140ms var(--ease-out); }
.hub-app.live:active { transform: scale(.985); }
.hub-app.live .hub-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .18); color: #fff; }
.hub-app.live .hub-icon svg { width: 32px; height: 32px; }
.hub-app.live .hub-text b { font-size: 22px; }
.hub-app.live small { color: rgba(255, 255, 255, .88); }
.hub-open { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; }
.hub-open svg.flip-x { transform: scaleX(-1); }
.hub-app.soon { opacity: .78; align-items: flex-start; }
.hub-app.soon .chip { margin-top: 8px; }
body.on-hub .topbar .brandmark.hide-desktop { display: flex !important; }
.hub-user { font-weight: 700; color: var(--slate); margin-right: 4px; }
.hub-app.soon .hub-icon { background: var(--surface-2); color: var(--slate); }
.sidebar .app-label { margin: 14px 12px 8px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .6); }
@media (max-width: 520px) { .hub-app.live { flex-wrap: wrap; } .hub-app.live .hub-text { flex: 1 1 calc(100% - 82px); } .hub-open { margin-left: 78px; } }

/* installed app on a computer with "window controls overlay": the page draws its own title bar */
@media (display-mode: window-controls-overlay) {
  body::before { content: "QC Event Manager"; position: fixed; z-index: 300; left: env(titlebar-area-x, 0); top: env(titlebar-area-y, 0); width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 33px); display: flex; align-items: center; padding-left: 12px; font-size: 13px; font-weight: 700; color: #fff; background: var(--navy); -webkit-app-region: drag; app-region: drag; }
  body { padding-top: env(titlebar-area-height, 33px); }
  .topbar { top: env(titlebar-area-height, 33px); }
  .sidebar { top: env(titlebar-area-height, 33px); height: calc(100dvh - env(titlebar-area-height, 33px)); }
}

/* install the app */
.install-pop { position: fixed; z-index: 110; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 18px 40px -12px rgba(30, 90, 128, .45); border: 1px solid rgba(30, 90, 128, .1); animation: up 240ms var(--ease-out); }
.install-pop img { border-radius: 10px; flex: none; }
.install-pop b { display: block; }
.install-pop small { display: block; line-height: 1.3; }
body:not(:has(.bottomnav)) .install-pop { bottom: calc(var(--safe-b) + 12px); } /* sign-in page has no bottom bar */
@media (min-width: 960px) { .install-pop { left: auto; right: 24px; bottom: 24px; width: 440px; } }
.install-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.install-head img { border-radius: 12px; box-shadow: var(--shadow-1); }
.install-head b, .install-head small { display: block; }
.install-steps { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.install-steps li { padding-left: 4px; }

/* capture panel: clean QC Blue (cards) / QC Green (photos), with the QC mark faintly in the corner */
.cam-btn {
  min-height: 44dvh; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 55%, var(--action-press) 100%);
  box-shadow: 0 22px 44px -22px rgba(47, 127, 176, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cam-btn.photo {
  background: linear-gradient(150deg, #3DBB99 0%, var(--green) 50%, var(--green-deep) 100%);
  box-shadow: 0 22px 44px -22px rgba(22, 132, 104, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cam-btn::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -48px; width: min(62%, 240px); aspect-ratio: 56 / 58; background: url('/brand/qc-mark.png') center / contain no-repeat; opacity: .12; filter: brightness(0) invert(1); pointer-events: none; }
.cam-btn svg { width: 104px; height: 104px; padding: 22px; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 10px rgba(255, 255, 255, .07); }
.cam-btn b { font-size: 25px; letter-spacing: -0.01em; }
.cam-btn span { max-width: 34ch; line-height: 1.4; }
.cam-btn:active { filter: brightness(.94); }
.gallery-btn { border-color: rgba(30, 90, 128, .1); box-shadow: var(--shadow-1); color: var(--navy); }
button.gallery-btn { width: 100%; font: inherit; font-size: 17px; font-weight: 700; }

/* card / photo switch */
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(30, 90, 128, .09); box-shadow: var(--shadow-1); }
.mode-switch a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 10px; font-weight: 700; color: var(--slate); transition: background-color 160ms var(--ease-out), color 160ms; }
.mode-switch a[aria-selected="true"] { background: var(--navy); color: #fff; }

/* photo with guest */
.avatar.xs { width: 28px; height: 28px; font-size: 11px; }
.avatar.xs .badge-li { display: none; }
.photo-hero { position: relative; border-radius: 20px; overflow: hidden; background: var(--navy-ink); box-shadow: var(--shadow-2); }
.photo-hero img { width: 100%; max-height: 52dvh; object-fit: contain; margin: 0 auto; }
.photo-hero .retake { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.photo-edit { position: relative; display: flex; flex-direction: column; gap: 12px; }
.photo-edit .retake { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1); }
.photo-stage { display: grid; place-items: center; padding: 12px; border-radius: 20px; background: #E6EEF4; }
.photo-stage canvas { display: block; max-width: 100%; max-height: 56dvh; width: auto; height: auto; border-radius: 6px; box-shadow: var(--shadow-2); }
.edit-tools { display: flex; flex-direction: column; gap: 12px; }
.edit-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 8px; }
.edit-row > span { font-size: 14px; font-weight: 700; color: var(--slate); }
.edit-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.edit-chips::-webkit-scrollbar { display: none; }
.edit-chips button { flex: none; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #D3DDE5; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 120ms, color 120ms, border-color 120ms; }
.edit-chips button[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.picker { display: flex; flex-direction: column; gap: 12px; }
.picker .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
@media (min-width: 560px) { .picker .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.guest-results { max-height: 320px; overflow-y: auto; }
.picker .seg button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; }
.picker .seg button svg { width: 16px; height: 16px; flex: none; }
.picker .seg button span { overflow: hidden; text-overflow: ellipsis; }
.picked { display: flex; flex-wrap: wrap; gap: 8px; }
.picked-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; width: 100%; border-radius: var(--radius-sm); border: 1px dashed #C6D3DD; color: var(--slate); font-size: 15px; }
.person-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px; border-radius: 999px; background: var(--blue-mist); color: var(--navy); }
.person-chip > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.person-chip b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-chip small { font-size: 12px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-chip .x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--navy); cursor: pointer; }
.person-chip .x svg { width: 15px; height: 15px; }
.tagnew, .tagzoho, .tagin { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.tagnew { background: var(--green-mist); color: var(--green-deep); }
.tagzoho { background: #FDECDC; color: #A04B0B; }
.tagin { background: var(--blue-mist); color: var(--blue-deep); }
.searchbox { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #D3DDE5; border-radius: var(--radius-sm); background: var(--surface); transition: border-color 120ms, box-shadow 120ms; }
.searchbox:focus-within { border-color: var(--blue-deep); box-shadow: 0 0 0 4px var(--blue-mist); }
.searchbox svg { color: var(--slate); }
.searchbox input, .searchbox input:focus { border: 0; box-shadow: none; padding-left: 0; }
.results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.results-hint { display: flex; justify-content: center; margin: 0; padding: 14px 8px; color: var(--muted); font-size: 15px; text-align: center; }
.results-hint.error { color: var(--danger); }
.result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid rgba(30, 90, 128, .08); border-radius: 12px; background: var(--surface); font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: transform 120ms var(--ease-out), border-color 120ms; }
.result:active { transform: scale(.985); }
.result .meta { flex: 1; min-width: 0; }
.result .meta b, .result .meta small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .add { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; }
.result .add svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .result:hover { border-color: var(--blue-soft); } }
.newlead .btn { border-style: dashed; color: var(--navy); }

/* event photos */
.photo-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .photo-actions { grid-template-columns: 1.4fr 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-item { position: relative; display: block; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--surface-2); cursor: pointer; box-shadow: var(--shadow-1); font: inherit; transition: transform 140ms var(--ease-out); }
.gallery-item:active { transform: scale(.98); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 28px 10px 10px; color: #fff; font-size: 14px; font-weight: 700; text-align: left; background: linear-gradient(to top, rgba(30, 90, 128, .86), rgba(30, 90, 128, 0)); }
.gallery-cap .faces { display: flex; flex: none; }
.gallery-cap .faces .avatar { box-shadow: 0 0 0 2px #fff; }
.gallery-cap .faces .avatar + .avatar { margin-left: -8px; }
.gallery-cap .names { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-item.untagged { outline: 2px dashed rgba(34, 167, 133, .9); outline-offset: -2px; }
.gallery-item.untagged .gallery-cap { background: linear-gradient(to top, rgba(22, 132, 104, .9), rgba(22, 132, 104, 0)); }
.sheet-photo { width: 100%; max-height: 34dvh; object-fit: contain; border-radius: 14px; background: var(--navy-ink); margin-bottom: 14px; cursor: zoom-in; }

/* =====================================================================
   QC Moments: event photo booth, live gallery and the big screens
   ===================================================================== */
.hub-app.live.app-moments { background: linear-gradient(150deg, #3DBB99 0%, var(--green) 50%, var(--green-deep) 100%); box-shadow: 0 22px 44px -22px rgba(22, 132, 104, .75); }
.hub-app.live.app-moments .hub-open { color: var(--green-deep); }
@media (min-width: 900px) { .hub-live { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.moment-events { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .moment-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.moment-event { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 18px; border-radius: 18px; color: #fff; box-shadow: var(--shadow-2); }
.moment-event.theme-diwali { background: linear-gradient(135deg, #5B1338 0%, #8C1C3F 45%, #C2410C 100%); }
.moment-event.theme-quickclean { background: linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 60%, var(--navy-ink) 100%); }
.moment-event.theme-plain { background: linear-gradient(150deg, #475569, #1E293B); }
.moment-event .me-glow { position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 110, .55), rgba(255, 210, 110, 0) 70%); }
.moment-event .me-body { flex: 1; min-width: 0; position: relative; }
.moment-event b { display: block; font-size: 19px; }
.moment-event small { color: rgba(255, 255, 255, .85); }
.moment-event .chip { position: relative; }

.moment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.moment-head h1 { font-size: 24px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.2s ease-in-out infinite; }
.m-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(30, 90, 128, .09); box-shadow: var(--shadow-1); }
.m-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--slate); cursor: pointer; }
.m-tabs button svg { width: 20px; height: 20px; }
.m-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.moment.theme-diwali .m-tabs button[aria-selected="true"] { background: linear-gradient(135deg, #8C1C3F, #C2410C); }
@media (min-width: 640px) { .m-tabs button { flex-direction: row; justify-content: center; gap: 8px; font-size: 15px; min-height: 46px; } }

.m-capture { max-width: 620px; margin: 0 auto; }
.moment.theme-diwali .cam-btn.m-shoot { background: linear-gradient(150deg, #E2742B 0%, #B3203F 55%, #5B1338 100%); box-shadow: 0 22px 44px -22px rgba(140, 28, 63, .8); }
.m-stage { display: grid; place-items: center; padding: 12px; border-radius: 20px; background: #E6EEF4; }
.moment.theme-diwali .m-stage { background: linear-gradient(135deg, #2A0B1E, #4A1430); }
.m-stage canvas { display: block; max-width: 100%; max-height: 58dvh; width: auto; height: auto; border-radius: 8px; box-shadow: var(--shadow-2); }
.frame-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.frame-strip::-webkit-scrollbar { display: none; }
.frame-opt { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 82px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: var(--surface-2); font: inherit; cursor: pointer; }
.frame-opt canvas { width: 66px; height: 66px; object-fit: contain; border-radius: 6px; background: #fff; }
.frame-opt small { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.frame-opt[aria-checked="true"] { border-color: var(--navy); background: var(--blue-mist); }
.moment.theme-diwali .frame-opt[aria-checked="true"] { border-color: #C2410C; background: #FFF1E6; }
.m-posted { max-width: 520px; margin: 0 auto; }
.m-posted-card { position: relative; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-2); background: #000; }
.m-posted-card img { width: 100%; max-height: 60dvh; object-fit: contain; }
.m-posted-card .live-dot { position: absolute; left: 12px; top: 12px; }

.m-count { margin: 0 0 8px; font-size: 14px; }
.m-grid { display: grid; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
@media (min-width: 1000px) { .m-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.m-tile { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--surface-2); cursor: pointer; }
.m-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease-out); }
.m-tile:active img { transform: scale(.97); }
.m-tile.is-hidden img { opacity: .35; }
.m-tile .chip { position: absolute; left: 6px; top: 6px; }
.m-tile.is-new { animation: m-new 700ms var(--ease-out); box-shadow: 0 0 0 3px var(--green); }
@keyframes m-new { from { opacity: 0; transform: scale(.85); } }
.m-view { width: 100%; max-height: 70dvh; object-fit: contain; border-radius: 12px; background: #000; }
.m-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.m-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.m-selfie { max-width: 520px; }
.m-finding { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.m-qr-card { align-items: flex-start; }
.m-qr { width: 200px; height: 200px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.m-qr svg { width: 100%; height: 100%; }
.m-screen { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
.m-screen > span { display: flex; align-items: center; gap: 8px; }
.check-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; cursor: pointer; }
.check-chip input { width: 18px; height: 18px; }
.chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chip-x svg { width: 12px; height: 12px; }

/* ----- live screens (TV, OBS) ----- */
body.on-live { overflow: hidden; background: #0B0710; }
.live-screen { position: fixed; inset: 0; overflow: hidden; color: #fff; display: flex; flex-direction: column; font-family: var(--font); }
.live-screen.hide-cursor { cursor: none; }
.live-bg { position: absolute; inset: 0; z-index: 0; }
@keyframes twinkle { to { opacity: .9; } }
.live-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 2vmin; padding: 2.2vmin 3vmin 1.4vmin; }
.live-logo { height: 4.6vmin; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.live-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4vmin; }
.live-title b { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 4.4vmin; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-screen.theme-diwali .live-title b { background: linear-gradient(90deg, #F8DE8A, #E9B44C, #F8DE8A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live-badge { display: inline-flex; align-items: center; gap: .8vmin; font-size: 1.9vmin; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .85); }
.live-badge i { width: 1.2vmin; height: 1.2vmin; border-radius: 50%; background: #EF4444; box-shadow: 0 0 0 .5vmin rgba(239, 68, 68, .3); animation: pulse 1.2s ease-in-out infinite; }
.live-join { display: flex; align-items: center; gap: 1.2vmin; padding: 1vmin 1.4vmin 1vmin 1vmin; border-radius: 1.8vmin; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 1.8vmin; font-weight: 700; line-height: 1.2; }
.live-join small { font-weight: 400; opacity: .8; }
.live-qr { width: 9vmin; height: 9vmin; padding: .6vmin; border-radius: 1vmin; background: #fff; }
.live-qr svg { width: 100%; height: 100%; display: block; }
/* ----- live photo wall (wall.js): marquee rows, rising columns, polaroids, cinema, grid, spotlight ----- */
.live-bg::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(38% 32% at 28% 30%, rgba(255, 196, 110, .16), transparent 70%), radial-gradient(34% 30% at 76% 72%, rgba(90, 170, 230, .14), transparent 70%); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(6%, -4%, 0) rotate(8deg); } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
.live-stage-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; padding-bottom: 3vmin; }
.wall { --gap: 1.8vmin; --r: 2.4vmin; position: relative; width: 100%; height: 100%; }
.wc { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); background: rgba(255, 255, 255, .06); box-shadow: 0 2vmin 5vmin -2vmin rgba(0, 0, 0, .65); }
.wc-img { height: 100%; }
.wc img { display: block; }
.wc figcaption { position: absolute; left: 1.2vmin; bottom: 1.2vmin; max-width: calc(100% - 2.4vmin); padding: .5vmin 1.3vmin; border-radius: 999px; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 1.6vmin; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-clean .wc, .style-clean .tile { border-radius: .4vmin; }
.style-polaroid .wc { padding: 1.1vmin 1.1vmin 4.6vmin; border-radius: .5vmin; background: #FBF8F1; box-shadow: 0 2vmin 4vmin -1.5vmin rgba(0, 0, 0, .7); }
.style-polaroid .wc-img { overflow: hidden; border-radius: .2vmin; }
.style-polaroid .wc figcaption { left: 0; right: 0; bottom: 0; max-width: none; height: 4.6vmin; display: flex; align-items: center; justify-content: center; padding: 0 1vmin; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #3A2A20; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 2.3vmin; }
/* marquee rows (as on Life at QC) and rising columns: each track holds its photos twice and slides by half */
.fx-marquee, .fx-rise { display: flex; gap: var(--gap); overflow: hidden; }
.fx-marquee { flex-direction: column; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fx-rise { padding: 0 3vmin; -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.lane { flex: 1; min-width: 0; min-height: 0; }
.lane-track { display: flex; gap: var(--gap); will-change: transform; animation: wall-x 60s linear infinite; }
.lane-track.rev { animation-direction: reverse; }
.fx-marquee .lane-track { width: max-content; height: 100%; padding-right: var(--gap); }
.fx-marquee .wc { flex: none; height: 100%; }
.fx-marquee .wc img { height: 100%; width: auto; }
.fx-rise .lane-track { flex-direction: column; height: max-content; padding-bottom: var(--gap); animation-name: wall-y; }
.fx-rise .wc img { width: 100%; height: auto; }
@keyframes wall-x { to { transform: translate3d(-50%, 0, 0); } }
@keyframes wall-y { to { transform: translate3d(0, -50%, 0); } }
/* grid, spotlight, cinema: tiles that crossfade one at a time */
.fx-grid, .fx-spotlight, .fx-cinema { display: grid; gap: var(--gap); padding: 0 3vmin; }
.fx-spotlight { grid-template-columns: 2fr 1fr; }
.fx-spotlight .tile.is-main { grid-row: 1 / -1; }
.tile { position: relative; overflow: hidden; border-radius: var(--r); background: rgba(255, 255, 255, .05); box-shadow: 0 2vmin 5vmin -2vmin rgba(0, 0, 0, .65); }
.tile-layer { position: absolute; inset: 0; transition: opacity 1200ms ease, transform 1200ms cubic-bezier(.16, 1, .3, 1); }
.tile-layer.entering { opacity: 0; transform: scale(1.06); }
.tile-blur { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) brightness(.5) saturate(1.3); }
.tile .wc { position: absolute; inset: 0; border-radius: 0; background: none; box-shadow: none; }
.tile .wc img { width: 100%; height: 100%; object-fit: contain; animation: kenburns 16s ease-out forwards; }
.fx-cinema .tile .wc img { animation: cine-zoom 10s ease-out forwards; }
@keyframes cine-zoom { from { transform: scale(1.12) translate3d(1.5%, 1%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
.style-polaroid .tile { border-radius: .5vmin; background: #FBF8F1; }
.style-polaroid .tile-layer { padding: 1.4vmin 1.4vmin 5.4vmin; background: #FBF8F1; }
.style-polaroid .tile-blur { display: none; }
.style-polaroid .tile .wc { position: relative; inset: auto; height: 100%; padding: 0; overflow: visible; background: #1A1418; }
.style-polaroid .tile .wc-img { overflow: hidden; }
.style-polaroid .tile .wc figcaption { top: 100%; bottom: auto; height: 5.4vmin; }
/* polaroid wall: cards pinned on a table; new ones drop in */
.fx-polaroid { overflow: hidden; }
.pslot { position: absolute; width: calc(var(--w) * 1%); aspect-ratio: 1 / 1.17; transform: translate(-50%, -50%); }
.pol-card { position: absolute; inset: 0; padding: 4.5% 4.5% 0; background: #FBF8F1; box-shadow: 0 2.4vmin 4.4vmin -1.4vmin rgba(0, 0, 0, .7); transform: rotate(var(--rot)); transition: transform 1100ms cubic-bezier(.2, .9, .25, 1.12), opacity 600ms ease; }
.pol-card.dropping { opacity: 0; transform: rotate(calc(var(--rot) * -2.5)) scale(1.45) translateY(-8%); }
.pol-card::before { content: ""; position: absolute; z-index: 1; top: -2.2%; left: 50%; width: 34%; height: 7%; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 246, 220, .55); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.pol-card .wc { border-radius: 0; background: #1A1418; box-shadow: none; aspect-ratio: 1; height: auto; padding: 0; }
.pol-card .wc img { width: 100%; height: 100%; object-fit: cover; }
.pol-name { position: absolute; left: 4%; right: 4%; bottom: 0; height: 13%; display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 2.4vmin; color: #3A2A20; white-space: nowrap; overflow: hidden; }
.wall:not(.with-names) .pol-name { display: none; }
/* "New moment": the newest photo, big, for a few seconds */
.new-moment { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(5, 3, 8, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity 600ms ease; }
.new-moment.show { opacity: 1; }
.nm-card { display: flex; flex-direction: column; align-items: center; gap: 2vmin; transform: scale(.82) translateY(5vmin) rotate(-3deg); transition: transform 1000ms cubic-bezier(.16, 1, .3, 1); }
.new-moment.show .nm-card { transform: none; }
.nm-img { padding: 1.3vmin; border-radius: .8vmin; background: #FBF8F1; box-shadow: 0 5vmin 12vmin -3vmin rgba(0, 0, 0, .85); }
.nm-img img { display: block; max-width: 62vw; max-height: 62vh; border-radius: .3vmin; }
.nm-cap { display: flex; flex-direction: column; align-items: center; gap: .4vmin; text-align: center; color: #fff; }
.nm-cap span { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3vmin; color: #E8C77A; }
.nm-cap b { font-size: 4vmin; }
.live-story .nm-img img { max-width: calc(min(100vw, 100vh * 9 / 16) * .78); max-height: 56vh; }
/* background choice */
/* 9:16 story screen for OBS → Instagram Live: stays 9:16 and centred in any window */
.live-screen.live-story { width: min(100vw, calc(100vh * 9 / 16)); height: min(100vh, calc(100vw * 16 / 9)); inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.live-story .live-head { flex-wrap: wrap; justify-content: center; text-align: center; padding: 4vmin 4vmin 2vmin; }
.live-story .live-logo { height: 5vmin; }
.live-story .live-title { flex-basis: 100%; align-items: center; }
.live-story .live-title b { font-size: 6vmin; white-space: normal; }
.live-story .live-badge { font-size: 2.6vmin; }
.live-story .live-join { position: absolute; right: 3vmin; bottom: 3vmin; z-index: 3; font-size: 2.2vmin; }
.live-story .live-qr { width: 12vmin; height: 12vmin; }
.live-story .live-stage-wrap { padding-bottom: 18vmin; }
.live-story .style-polaroid .wc figcaption { font-size: 1.7vmin; }
@media (prefers-reduced-motion: reduce) { .lane-track, .tile .wc img, .live-bg::before, .live-screen.theme-diwali .live-bg::after { animation: none; } .pol-card, .tile-layer, .nm-card { transition-duration: 1ms; } }
.live-empty { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; text-align: center; }
.live-empty b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 5vmin; }
.live-empty span { font-size: 2.4vmin; opacity: .8; }
.live-empty[hidden] { display: none; }
/* live chat on the big screens */
.live-body { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; }
.live-chat { width: 26vw; max-width: 420px; margin: 0 3vmin 3vmin 0; padding: 2vmin; border-radius: 2.2vmin; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; overflow: hidden; }
.live-chat-title { font-size: 1.6vmin; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 1.4vmin; }
.live-chat-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.2vmin; overflow: hidden; }
.live-msg { display: flex; flex-direction: column; gap: .3vmin; padding: 1.2vmin 1.5vmin; border-radius: 1.6vmin; background: rgba(0, 0, 0, .28); animation: up 400ms var(--ease-out); }
.live-msg b { font-size: 1.6vmin; color: #E8C77A; }
.live-msg span { font-size: 2.1vmin; line-height: 1.3; overflow-wrap: anywhere; }
.live-screen.live-story .live-body { flex-direction: column; }
.live-screen.live-story .live-chat { position: absolute; left: 4vmin; right: 4vmin; bottom: 19vmin; width: auto; max-width: none; margin: 0; background: rgba(0, 0, 0, .35); z-index: 2; }
.live-screen.live-story .live-chat-title { display: none; }
.live-screen.live-story .live-msg span { font-size: 2.6vmin; }

/* ----- Print studio: polaroids on A4 ----- */
.print-root { display: none; }
@media print {
  body > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; }
  .print-root .ps-sheet { page-break-after: always; break-after: page; box-shadow: none; zoom: 1; }
  .print-root .ps-sheet:last-child { page-break-after: auto; break-after: auto; }
  html, body { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.m-print-link { color: inherit; }

/* chat tab (phones) */
.m-chat { display: flex; flex-direction: column; gap: 12px; max-width: 680px; margin: 0 auto; }
.m-chat-list { display: flex; flex-direction: column; gap: 8px; min-height: 40vh; max-height: 60dvh; overflow-y: auto; padding: 4px; }
.m-msg { display: flex; align-items: flex-start; gap: 4px; }
.m-msg.is-me { flex-direction: row-reverse; }
.m-msg-bubble { max-width: 80%; display: flex; flex-direction: column; gap: 2px; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .08); }
.m-msg.is-me .m-msg-bubble { border-radius: 16px 16px 4px 16px; background: var(--cine-accent, var(--blue-deep)); color: #1A1208; }
.m-msg-bubble b { font-size: 12px; opacity: .75; }
.m-msg-bubble span { font-size: 15px; overflow-wrap: anywhere; }
.m-msg-x { width: 32px; height: 32px; color: var(--cine-mute, var(--muted)); }
.m-chat-form { position: sticky; bottom: 8px; display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--cine-line, var(--line)); }
.m-chat-form input { flex: 1; border: 0; background: transparent; color: inherit; box-shadow: none; }
.m-chat-form input:focus { box-shadow: none; }
.m-switches { display: flex; flex-direction: column; gap: 4px; }

/* ----- Team & access ----- */
.hub-app.live.app-access { background: linear-gradient(150deg, #475569 0%, #334155 55%, #1E293B 100%); box-shadow: 0 22px 44px -22px rgba(30, 41, 59, .7); }
.hub-app.live.app-access .hub-open { color: #1E293B; }
.access { max-width: 1100px; margin: 0 auto; }
.access-legend { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.access-legend span { display: flex; flex-direction: column; }
.access-legend b { color: var(--navy-ink); }
.access-add-sum { cursor: pointer; font-weight: 700; color: var(--action); display: flex; align-items: center; gap: 8px; }
.access-head { flex-wrap: wrap; }
.access-search { flex: 1; max-width: 320px; min-width: 200px; }
.access-table { display: flex; flex-direction: column; }
.access-row { display: grid; align-items: center; gap: 10px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); }
.access-row:last-child { border-bottom: 0; }
.access-row.is-off { opacity: .6; }
.access-cols { display: none; }
.access-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.access-person .meta { min-width: 0; }
.access-person b, .access-person small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-person .chips { margin-top: 4px; }
.access-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; color: var(--slate); }
.access-cell select { width: auto; min-width: 140px; min-height: 40px; padding: 6px 10px; font-size: 15px; }
.access-cell.switch { min-height: 40px; }
@media (min-width: 900px) {
  .access-row { grid-template-columns: minmax(220px, 1.6fr) repeat(var(--tools, 2), minmax(150px, 1fr)) 110px 100px; }
  .access-cols { display: grid; font-size: 13px; font-weight: 700; color: var(--slate); background: var(--surface-2); padding-top: 10px; padding-bottom: 10px; }
  .access-cell-label { display: none; }
  .access-cell { justify-content: flex-start; }
  .access-cell select { width: 100%; min-width: 0; }
}

/* Team & access grid: people × tools */
.access-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.access-bulk.is-on { background: var(--blue-mist); }
.access-bulk b { margin-right: 4px; font-size: 14px; }
.access-bulk select { width: auto; min-height: 36px; padding: 4px 10px; font-size: 14px; }
.access-matrix { overflow-x: auto; }
.am-row { display: grid; grid-template-columns: 36px minmax(220px, 1.4fr) 132px repeat(var(--tools, 2), minmax(150px, 1fr)) 250px; align-items: center; gap: 10px; min-width: calc(36px + 220px + 132px + var(--tools, 2) * 150px + 250px + 70px); padding: 10px 16px; border-bottom: 1px solid var(--line); }
.am-row:last-child { border-bottom: 0; }
.am-head { position: sticky; top: 0; z-index: 1; padding-top: 10px; padding-bottom: 10px; background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--slate); }
.am-row.is-off { opacity: .55; }
.am-check { display: grid; place-items: center; }
.am-check input { width: 20px; height: 20px; }
.am-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.am-person .meta { min-width: 0; }
.am-person b, .am-person small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-person .chips { margin-top: 4px; }
.am-cell select { width: 100%; min-height: 38px; padding: 4px 8px; font-size: 14px; }
.am-cell.switch { justify-content: flex-start; min-height: 38px; }
.am-label { display: none; }
.am-full { font-size: 14px; font-weight: 700; color: var(--green-deep); }
.am-hidden { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--warn-mist); color: var(--warn); }
.am-tool { flex-wrap: wrap; gap: 12px 20px; cursor: default; }
.am-tool .meta { flex: 1 1 260px; }
.am-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--slate); }
.am-inline select { width: auto; min-height: 36px; padding: 4px 10px; font-size: 14px; }
.am-inline.switch { justify-content: flex-start; min-height: 36px; }

/* Home (all apps) in the top bar */
.topbar .home-btn { margin-left: 2px; color: var(--navy); }

/* =====================================================================
   QC Moments, cinematic: dark canvas, gold or QC light, quiet type
   ===================================================================== */
body.cine { --cine-bg: #0D0A0C; --cine-ink: #F5EFE6; --cine-mute: rgba(245, 239, 230, .62); --cine-line: rgba(245, 239, 230, .1); --cine-accent: #E8C77A; --cine-glow: rgba(140, 40, 70, .55); background: var(--cine-bg); color: var(--cine-ink); }
body.cine[data-cine="quickclean"], body.cine[data-cine="plain"] { --cine-bg: #081521; --cine-accent: #7CC6EA; --cine-glow: rgba(47, 127, 176, .45); }
body.cine[data-cine="moments"] { --cine-bg: #0C0C10; --cine-accent: #E8C77A; --cine-glow: rgba(90, 60, 140, .4); }
body.cine .maincol { background: radial-gradient(120% 60% at 50% -10%, var(--cine-glow), transparent 60%), var(--cine-bg); min-height: 100dvh; }
body.cine .topbar { background: rgba(13, 10, 12, .72); border-bottom-color: var(--cine-line); }
body.cine[data-cine="quickclean"] .topbar, body.cine[data-cine="plain"] .topbar { background: rgba(8, 21, 33, .72); }
body.cine .topbar .title, body.cine .topbar .icon-btn, body.cine .topbar .home-btn { color: var(--cine-ink); }
body.cine .muted, body.cine small { color: var(--cine-mute); }
body.cine .page-head h1, body.cine h1, body.cine h2, body.cine h3 { color: var(--cine-ink); }
body.cine .page-head .sub { color: var(--cine-mute); }
body.cine .card { background: rgba(255, 255, 255, .04); border-color: var(--cine-line); box-shadow: none; color: var(--cine-ink); }
body.cine .btn:not(.primary):not(.danger) { background: rgba(255, 255, 255, .06); border-color: var(--cine-line); color: var(--cine-ink); }
body.cine .btn.primary { background: var(--cine-accent); border-color: var(--cine-accent); color: #1A1208; box-shadow: 0 10px 28px -12px var(--cine-accent); }
body.cine .gallery-btn { background: rgba(255, 255, 255, .05); border-color: var(--cine-line); color: var(--cine-ink); box-shadow: none; }
body.cine .sticky-actions { background: linear-gradient(to top, var(--cine-bg) 70%, transparent); }
body.cine .seg { background: rgba(255, 255, 255, .05); border-color: var(--cine-line); }
body.cine .seg button { color: var(--cine-mute); }
body.cine .seg button[aria-selected="true"] { background: rgba(255, 255, 255, .12); color: var(--cine-ink); box-shadow: none; }
body.cine .edit-row > span { color: var(--cine-mute); }
body.cine .edit-chips button { background: transparent; border-color: var(--cine-line); color: var(--cine-ink); }
body.cine .edit-chips button[aria-checked="true"] { background: var(--cine-ink); border-color: var(--cine-ink); color: #111; }
body.cine .spinner { border-color: rgba(255, 255, 255, .12); border-top-color: var(--cine-accent); }

.m-header { text-align: center; padding: 18px 0 6px; }
.m-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--cine-accent, var(--blue-deep)); }
.m-header h1 { margin: 8px 0 6px; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: clamp(32px, 6vw, 52px); line-height: 1.05; letter-spacing: -.01em; }
body.cine[data-cine="diwali"] .m-header h1 { background: linear-gradient(90deg, #F6DFA0, #D9A84E 50%, #F6DFA0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cine-mute, var(--muted)); }
.m-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FF6B6B; }
.m-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4D4D; box-shadow: 0 0 0 4px rgba(255, 77, 77, .18); animation: pulse 1.4s ease-in-out infinite; }
.moment .m-tabs { display: flex; justify-content: center; gap: 28px; padding: 0; margin: 18px 0 22px; background: transparent; border: 0; border-bottom: 1px solid var(--cine-line, var(--line)); border-radius: 0; box-shadow: none; }
.moment .m-tabs button { flex: none; flex-direction: row; gap: 8px; min-height: 46px; padding: 0 2px; border-radius: 0; background: transparent; color: var(--cine-mute, var(--slate)); font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.moment .m-tabs button svg { width: 18px; height: 18px; }
.moment .m-tabs button[aria-selected="true"] { background: transparent; color: var(--cine-ink, var(--ink)); border-bottom-color: var(--cine-accent, var(--blue-deep)); }
.moment.theme-diwali .m-tabs button[aria-selected="true"] { background: transparent; }
@media (max-width: 640px) { .moment .m-tabs { gap: 18px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 2px; } .moment .m-tabs::-webkit-scrollbar { display: none; } .moment .m-tabs button { flex: none; } .moment .m-tabs button span { font-size: 14px; } }

body.cine .cam-btn.m-shoot { min-height: 52dvh; background: radial-gradient(90% 70% at 50% 0%, rgba(232, 199, 122, .22), transparent 70%), rgba(255, 255, 255, .03); border: 1px solid rgba(232, 199, 122, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 30px 60px -30px rgba(0, 0, 0, .8); }
body.cine[data-cine="quickclean"] .cam-btn.m-shoot { background: radial-gradient(90% 70% at 50% 0%, rgba(124, 198, 234, .22), transparent 70%), rgba(255, 255, 255, .03); border-color: rgba(124, 198, 234, .35); }
body.cine .cam-btn.m-shoot::after { display: none; }
body.cine .cam-btn.m-shoot svg { color: var(--cine-accent); background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px rgba(232, 199, 122, .4), 0 0 60px rgba(232, 199, 122, .18); }
body.cine .cam-btn.m-shoot b { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 34px; font-weight: 600; }
body.cine .m-stage { background: transparent; padding: 0; }
body.cine .m-stage canvas { border-radius: 14px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
body.cine .frame-opt { background: rgba(255, 255, 255, .04); }
body.cine .frame-opt small { color: var(--cine-mute); }
body.cine .frame-opt[aria-checked="true"] { border-color: var(--cine-accent); background: rgba(255, 255, 255, .08); }
body.cine .frame-opt[aria-checked="true"] small { color: var(--cine-ink); }
body.cine .frame-opt canvas { background: #2A2428; }
body.cine .m-posted-card { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }

.m-wall { height: clamp(220px, 40dvh, 420px); margin: 0 -16px 22px; }
.m-wall .wall { --gap: 10px; --r: 16px; }
.m-wall .wc { cursor: pointer; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .8); }
.m-wall .live-stage-wrap, .m-wall .wall { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .m-wall .lane-track { animation: none; } }
.m-hero { position: relative; display: block; width: 100%; height: min(62dvh, 640px); margin-bottom: 18px; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .9); }
.m-hero-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(30px) brightness(.5) saturate(1.25); }
.m-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kenburns 16s ease-out forwards; }
.m-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px; padding: 46px 22px 18px; background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent); color: #fff; text-align: left; }
.m-hero-cap b { font-size: 18px; }
.m-hero-cap small { color: rgba(255, 255, 255, .7); }
.m-just { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cine-accent, #E8C77A); }
.m-grid-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 10px; font-size: 14px; font-weight: 700; color: var(--cine-mute, var(--muted)); }
body.cine .m-grid { gap: 8px; }
body.cine .m-tile { border-radius: 12px; background: rgba(255, 255, 255, .04); }
.m-tile-by { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 12px; font-weight: 700; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); opacity: 0; transition: opacity 200ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-tile:hover .m-tile-by, .m-tile:focus-visible .m-tile-by { opacity: 1; }
@media (hover: none) { .m-tile-by { opacity: 1; } }
@media (hover: hover) { body.cine .m-tile:hover img { transform: scale(1.04); } }
.m-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 16px; text-align: center; color: var(--cine-mute, var(--muted)); }
.m-empty svg { width: 40px; height: 40px; color: var(--cine-accent, var(--grey)); }
.m-empty b { font-size: 20px; color: var(--cine-ink, var(--ink)); }
body.cine .moment-event { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); border: 1px solid rgba(255, 255, 255, .06); }

/* ----- booth camera (Snapchat-style) ----- */
.booth { position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; background: #050505; color: #fff; animation: fade 180ms ease; }
.booth-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--safe-t)) 14px 8px; }
.booth-top-right { display: flex; align-items: center; gap: 8px; }
.booth-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.booth-icon svg { width: 22px; height: 22px; }
.booth-icon.on { background: #fff; color: #111; }
.booth-icon b { font-size: 13px; }
.booth-pill { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.booth-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 4px 12px; }
.booth-view { position: relative; overflow: hidden; border-radius: 16px; background: #111; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); transition: width 260ms cubic-bezier(.16, 1, .3, 1), height 260ms cubic-bezier(.16, 1, .3, 1); }
.booth-photo { position: absolute; overflow: hidden; }
.booth-photo video { width: 100%; height: 100%; object-fit: cover; }
.booth-photo video.mirror { transform: scaleX(-1); }
.booth-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.booth-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 700; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); pointer-events: none; }
.booth-count.tick { animation: tick 1s var(--ease-out); }
.booth-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.booth-flash.go { animation: shutter 300ms ease-out; }
.booth-bottom { display: flex; flex-direction: column; gap: 12px; padding: 10px 0 calc(16px + var(--safe-b)); }
.booth-formats { display: flex; justify-content: center; gap: 4px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
.booth-formats::-webkit-scrollbar { display: none; }
.booth-formats button { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .62); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.booth-formats button[aria-checked="true"] { background: rgba(255, 255, 255, .16); color: #FFD98A; }
.booth-frames { display: flex; gap: 12px; padding: 4px calc(50% - 34px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.booth-frames::-webkit-scrollbar { display: none; }
.booth-frame { flex: none; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .7); font: inherit; cursor: pointer; }
.booth-frame-thumb { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 30%, #3A3438, #151215); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); transition: transform 180ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms; }
.booth-frame-thumb canvas { max-width: 100%; max-height: 100%; }
.booth-frame small { font-size: 11px; font-weight: 700; color: inherit; white-space: nowrap; max-width: 68px; overflow: hidden; text-overflow: ellipsis; }
.booth-frame[aria-checked="true"] { color: #FFD98A; }
.booth-frame[aria-checked="true"] .booth-frame-thumb { transform: scale(1.12); box-shadow: 0 0 0 3px #FFD98A; }
.booth-controls { display: flex; align-items: center; justify-content: space-around; padding: 0 24px; }
.booth-shutter { width: 78px; height: 78px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.booth-shutter span { width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: transform 140ms ease; }
.booth-shutter:active span { transform: scale(.88); }
.booth.busy .booth-shutter { opacity: .5; }
.booth-stage { position: relative; }
.booth-problem { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 5, .86); }
.booth-problem-card { width: min(100%, 380px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.booth-problem-card > svg { width: 48px; height: 48px; color: #FFD98A; }
.booth-problem-card b { font-size: 20px; }
.booth-problem-card p { margin: 0; color: rgba(255, 255, 255, .8); }
.booth-problem-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.booth-problem .btn:not(.primary) { background: rgba(255, 255, 255, .1); border-color: transparent; color: #fff; }
.live-story .live-head { position: static; }
body.on-live .install-pop { display: none; }
/* QC Moments has its own screens: Event Manager's menu is hidden there, as on the home screen */
body.no-em-nav .sidebar, body.no-em-nav .bottomnav { display: none; }
body.no-em-nav .shell { display: block; }
body.no-em-nav main.content { padding-bottom: calc(32px + var(--safe-b)); }
body.no-em-nav .install-pop { bottom: calc(var(--safe-b) + 12px); }
body.no-em-nav .topbar .brandmark.hide-desktop { display: flex !important; }

/* ----- "Update available" bar (all platforms, including the installed apps) ----- */
.update-bar { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-b) + 12px); max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(30, 90, 128, .14); box-shadow: 0 18px 40px -16px rgba(30, 90, 128, .45); transform: translateY(16px); opacity: 0; transition: transform 300ms var(--ease-out), opacity 300ms; }
.update-bar.show { transform: none; opacity: 1; }
.update-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px rgba(47, 127, 176, .18); }
.update-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.update-text b { font-size: 15px; }
.update-text span { font-size: 13px; color: var(--muted, #5b6b78); }
@media (min-width: 900px) { .update-bar { bottom: 20px; left: auto; right: 20px; } }

/* ----- QC Moments: draft events (admins only until Go live) ----- */
.m-draft { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E9B44C; }
.m-draft::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E9B44C; }
.m-golive { display: flex; align-items: center; gap: 16px; border: 1px solid rgba(233, 180, 76, .55); background: linear-gradient(135deg, rgba(233, 180, 76, .16), rgba(233, 180, 76, .05)); }
.m-golive > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-golive small { color: var(--muted); }
@media (max-width: 640px) { .m-golive { flex-direction: column; align-items: stretch; } .m-golive .btn { width: 100%; } }

/* QC Moments on phones: all tabs fit on screen (icon above label), so Manage is never hidden,
   and the dashboard's Save button is full width */
@media (max-width: 640px) {
  .moment .m-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; overflow: visible; padding: 0; justify-content: stretch; }
  .moment .m-tabs button { flex-direction: column; gap: 3px; min-width: 0; padding: 8px 2px 10px; font-size: 11.5px; line-height: 1.15; text-align: center; }
  .moment .m-tabs button span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .moment .m-tabs button svg { width: 20px; height: 20px; }
  .m-manage #evf .btn-row.end .btn { width: 100%; min-height: 48px; }
}

/* =====================================================================================
   QC Moments live wall v2: themes, Diwali decorations, card frames, layouts, arrivals,
   ticker, presenter sidebar. Themes are on .live-screen[data-theme].
   ===================================================================================== */
.live-screen { --wall-gold: #E8C77A; --wall-ink: #fff; --wall-glass: rgba(255, 255, 255, .1); }
.live-screen .live-bg { overflow: hidden; }
.live-screen[data-theme="diwali-night"] .live-bg { background: radial-gradient(90% 70% at 50% 110%, #7A2A12 0%, rgba(122, 42, 18, 0) 60%), radial-gradient(120% 90% at 15% 0%, #4A1238 0%, #220A20 45%, #0C0610 100%); }
.live-screen[data-theme="marigold"] .live-bg { background: radial-gradient(80% 60% at 50% 0%, #9A3A0C 0%, rgba(154, 58, 12, 0) 70%), linear-gradient(180deg, #3A1406 0%, #1E0A04 60%, #120604 100%); }
.live-screen[data-theme="rangoli"] .live-bg { background: radial-gradient(70% 60% at 50% 50%, #2A1446 0%, #160A2A 55%, #0A0614 100%); }
.live-screen[data-theme="fireworks"] .live-bg { background: linear-gradient(180deg, #050816 0%, #0B1230 55%, #1A1030 100%); }
.live-screen[data-theme="royal"] .live-bg { background: radial-gradient(110% 80% at 50% 0%, #6B1024 0%, #3A0814 50%, #1C0408 100%); }
.live-screen[data-theme="royal"] .live-bg::after { content: ""; position: absolute; inset: 1.4vmin; border: 2px solid rgba(232, 199, 122, .55); box-shadow: inset 0 0 0 .6vmin rgba(28, 4, 8, .6), inset 0 0 0 calc(.6vmin + 1px) rgba(232, 199, 122, .3); border-radius: 1vmin; pointer-events: none; }
.live-screen[data-theme="qc"] .live-bg { background: radial-gradient(120% 90% at 20% 0%, #2F7FB0 0%, #1E5A80 40%, #0A1E2C 100%); }
.live-screen[data-theme="qc"] { --wall-gold: #7FE0C6; }
.live-screen[data-theme="midnight"] .live-bg { background: radial-gradient(120% 90% at 50% 0%, #1C212C 0%, #0A0C12 60%, #040507 100%); }
.live-screen[data-theme="daylight"] .live-bg { background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #EEF3F7 55%, #DAE5ED 100%); }
.live-screen[data-theme="gptw"] .live-bg { background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F8 100%); }
.live-screen[data-theme="gptw"] .live-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1vmin; background: linear-gradient(90deg, #D7262E, #2F7FB0, #22A785); }
.live-screen[data-theme="gptw"] { --wall-gold: #D7262E; }
.live-screen.light-theme { color: #1E2A33; --wall-ink: #1E2A33; --wall-glass: rgba(30, 90, 128, .08); }
.live-screen.light-theme .live-title b { background: none; color: #1E5A80; -webkit-text-fill-color: currentColor; }
.live-screen.light-theme .live-badge { color: rgba(30, 42, 51, .75); }
.live-screen.light-theme .live-join { background: rgba(30, 90, 128, .08); }
.live-screen.light-theme .live-chat { background: rgba(30, 90, 128, .07); }
.live-screen.light-theme .live-msg { background: rgba(255, 255, 255, .85); }
.live-screen.light-theme .live-msg b { color: #1E5A80; }
.live-screen.light-theme .wc, .live-screen.light-theme .tile { box-shadow: 0 1.6vmin 4vmin -2vmin rgba(20, 50, 80, .45); }
.live-screen .live-title b { background: linear-gradient(90deg, #F8DE8A, var(--wall-gold), #F8DE8A); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: goldShine 6s linear infinite; }
@keyframes goldShine { to { background-position: -200% 0; } }
.live-award { height: 11vmin; width: auto; filter: drop-shadow(0 .6vmin 1.4vmin rgba(0, 0, 0, .35)); }

/* ---------- decorations ---------- */
.wall-fx { position: absolute; inset: 0; pointer-events: none; }
.wall-fx > * { position: absolute; opacity: 0; transition: opacity 900ms ease; }
.fx-canvas { inset: 0; width: 100%; height: 100%; opacity: 1; z-index: 2; }
.wall-fx.show-lights .fx-lights, .wall-fx.show-toran .fx-toran, .wall-fx.show-diyas .fx-diyas, .wall-fx.show-rangoli .fx-rangoli,
.wall-fx.show-candles .fx-candles, .wall-fx.show-lanterns .fx-lanterns, .wall-fx.show-anar .fx-anars { opacity: 1; }
.fx-lights { left: 0; right: 0; top: 0; height: 7vmin; z-index: 3; }
.fx-lights svg { position: absolute; inset: 0; width: 100%; height: 60px; }
.fx-lights b { position: absolute; width: .9vmin; height: 1.3vmin; margin-left: -.45vmin; border-radius: 50% 50% 45% 45%; background: var(--c); box-shadow: 0 0 1.2vmin .3vmin var(--c); animation: bulb 2.4s ease-in-out infinite; }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; box-shadow: 0 0 .4vmin 0 var(--c); } }
.fx-toran { left: 0; right: 0; top: 0; height: 18vmin; z-index: 3; }
.fx-toran .mg { position: absolute; top: .4vmin; width: 3.6vmin; height: 3.6vmin; margin-left: -1.8vmin; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #B5480F 0 14%, #F9B233 15% 40%, #F28C1E 41% 68%, #E2621B 69%); box-shadow: 0 .3vmin .6vmin rgba(0, 0, 0, .35); }
.fx-toran .mg.y { background: radial-gradient(circle at 50% 50%, #B5480F 0 14%, #FAD04A 15% 40%, #F3B52A 41% 68%, #E89A1C 69%); }
.fx-toran .lf { position: absolute; top: 2.6vmin; width: 1.6vmin; height: 4.2vmin; margin-left: -.8vmin; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: linear-gradient(#3E7D2C, #25561C); transform-origin: top center; animation: sway 4s ease-in-out infinite; }
.fx-toran .strand { position: absolute; top: 3.4vmin; display: flex; flex-direction: column; margin-left: -1.6vmin; transform-origin: top center; animation: sway 5s ease-in-out infinite; }
.fx-toran .strand .mg { position: static; margin: -.4vmin 0 0; width: 3.2vmin; height: 3.2vmin; }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.fx-lanterns { left: 0; right: 0; top: 0; height: 30vmin; z-index: 3; }
.fx-lanterns .lantern { position: absolute; top: 0; width: calc(6vmin * var(--s)); margin-left: calc(-3vmin * var(--s)); transform-origin: top center; animation: sway 5s ease-in-out infinite; filter: drop-shadow(0 0 2.4vmin rgba(255, 150, 70, .55)); }
.fx-lanterns .lantern svg { width: 100%; height: auto; display: block; }
.fx-diyas, .fx-candles, .fx-anars { left: 0; right: 0; bottom: .6vmin; height: 8vmin; z-index: 3; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 4vmin; }
.fx-diyas .diya { width: 5.4vmin; filter: drop-shadow(0 0 1.8vmin rgba(255, 170, 70, .8)); }
.fx-diyas svg, .fx-candles svg, .fx-anars svg { width: 100%; height: auto; display: block; }
.fx-diyas .flame, .fx-candles .flame { transform-origin: 50% 90%; animation: flicker 1.3s ease-in-out infinite alternate; animation-delay: inherit; }
@keyframes flicker { 0% { transform: scale(1, 1); opacity: 1; } 40% { transform: scale(.92, 1.08) skewX(2deg); } 70% { transform: scale(1.05, .94) skewX(-2deg); opacity: .9; } 100% { transform: scale(.97, 1.04); } }
.fx-candles { justify-content: space-between; padding: 0 2vmin; }
.fx-candles .candle { width: calc(3vmin * var(--h)); filter: drop-shadow(0 0 1.6vmin rgba(255, 180, 80, .7)); }
.fx-anars { display: block; }
.fx-anars .anar { position: absolute; bottom: 0; width: 4.2vmin; margin-left: -2.1vmin; }
.has-floor .live-stage-wrap { padding-bottom: 9vmin; }
.fx-rangoli { inset: 0; z-index: 1; }
.fx-rangoli i { position: absolute; width: 60vmin; height: 60vmin; opacity: .22; animation: spin 90s linear infinite; }
.fx-rangoli i svg { width: 100%; height: 100%; }
.fx-rangoli .r1 { right: -18vmin; top: -18vmin; }
.fx-rangoli .r2 { left: -20vmin; bottom: -22vmin; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.live-screen.has-toran .live-head { padding-top: 7.5vmin; }
.live-screen.has-lights:not(.has-toran) .live-head { padding-top: 5vmin; }
.live-head, .live-body, .live-ticker, .live-tools, .live-side, .new-moment, .live-empty { z-index: 4; }
.live-body { position: relative; }

/* ---------- card frames on the wall ---------- */
.style-gold .wc { padding: .7vmin; border-radius: 1.2vmin; background: linear-gradient(135deg, #F8DE8A, #B98A3A 45%, #F3D9A0 70%, #9C6F2A); box-shadow: 0 2vmin 5vmin -2vmin rgba(0, 0, 0, .7), 0 0 2vmin -.6vmin rgba(232, 199, 122, .6); }
.style-gold .wc-img { overflow: hidden; border-radius: .7vmin; }
.style-gold .tile { border: .6vmin solid transparent; background: linear-gradient(#0000, #0000) padding-box, linear-gradient(135deg, #F8DE8A, #B98A3A, #F3D9A0) border-box; }
.style-film .wc { padding: 2vmin .6vmin; border-radius: .4vmin; background: #141414 repeating-linear-gradient(90deg, transparent 0 1vmin, rgba(255, 255, 255, .85) 1vmin 2.2vmin, transparent 2.2vmin 3.4vmin) top / 100% 1vmin no-repeat, #141414; }
.style-film .wc::after { content: ""; position: absolute; left: 0; right: 0; bottom: .5vmin; height: 1vmin; background: repeating-linear-gradient(90deg, transparent 0 1vmin, rgba(255, 255, 255, .85) 1vmin 2.2vmin, transparent 2.2vmin 3.4vmin); }
.style-film .wc { background-color: #141414; }
.style-film .wc::before { content: ""; position: absolute; left: 0; right: 0; top: .5vmin; height: 1vmin; background: repeating-linear-gradient(90deg, transparent 0 1vmin, rgba(255, 255, 255, .85) 1vmin 2.2vmin, transparent 2.2vmin 3.4vmin); }
.wc.is-video .wc-img::after { content: "▶"; position: absolute; right: 1vmin; top: 1vmin; width: 3.4vmin; height: 3.4vmin; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 1.5vmin; }
.wc-img { position: relative; }
.wc video { display: block; }
.fx-marquee .wc video { height: 100%; width: auto; }
.fx-rise .wc video { width: 100%; height: auto; }
.tile .wc video, .pol-card .wc video, .ring-item .wc video { width: 100%; height: 100%; object-fit: cover; }
.tile .wc video { object-fit: contain; }

/* ---------- new layouts ---------- */
/* film strips: tilted lanes */
.fx-filmstrip { display: flex; flex-direction: column; justify-content: center; gap: 4vmin; overflow: hidden; transform: rotate(-6deg) scale(1.12); }
.fx-filmstrip .lane { flex: 0 0 calc((100% - 8vmin) / var(--lanes)); min-height: 0; padding: 1.6vmin 0; background: #111 repeating-linear-gradient(90deg, transparent 0 1.2vmin, rgba(255, 255, 255, .8) 1.2vmin 2.4vmin, transparent 2.4vmin 3.6vmin) 0 .4vmin / 100% .8vmin no-repeat; box-shadow: 0 2vmin 4vmin -2vmin rgba(0, 0, 0, .8); position: relative; }
.fx-filmstrip .lane::after { content: ""; position: absolute; left: 0; right: 0; bottom: .4vmin; height: .8vmin; background: repeating-linear-gradient(90deg, transparent 0 1.2vmin, rgba(255, 255, 255, .8) 1.2vmin 2.4vmin, transparent 2.4vmin 3.6vmin); }
.fx-filmstrip .lane-track { width: max-content; height: 100%; padding-right: 1.2vmin; gap: 1.2vmin; display: flex; animation: wall-x 60s linear infinite; }
.fx-filmstrip .lane-track.rev { animation-direction: reverse; }
.fx-filmstrip .wc { flex: none; height: 100%; border-radius: .3vmin; box-shadow: none; }
.fx-filmstrip .wc img, .fx-filmstrip .wc video { height: 100%; width: auto; }
/* mosaic: a dense grid, photos flip to the next */
.fx-mosaic { display: grid; gap: .8vmin; padding: 0 3vmin; }
.fx-mosaic .tile { border-radius: .8vmin; perspective: 1000px; }
/* photo pile */
.fx-pile { overflow: hidden; }
.fx-pile .pslot { transition: none; }
/* 3D carousel */
.fx-carousel { perspective: 180vmin; display: grid; place-items: center; overflow: hidden; }
.fx-carousel .ring { position: relative; width: 26vmin; height: 34vmin; transform-style: preserve-3d; animation: ringSpin 60s linear infinite; }
.fx-carousel .ring-item { position: absolute; inset: 0; transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(calc(26vmin * var(--n) / 6.1)); backface-visibility: hidden; }
.fx-carousel .ring-item .wc { width: 100%; height: 100%; }
.fx-carousel .ring-item .wc-img { height: 100%; }
.fx-carousel .ring-item img { width: 100%; height: 100%; object-fit: cover; }
.fx-carousel .ring-item figcaption { font-size: 1.6vmin; }
@keyframes ringSpin { from { transform: rotateX(-6deg) rotateY(0); } to { transform: rotateX(-6deg) rotateY(-360deg); } }
.live-story .fx-carousel .ring { width: 34vmin; height: 46vmin; }

/* ---------- how new photos arrive (tile layouts) ---------- */
.wall[data-enter="fade"] .tile-layer.entering { opacity: 0; transform: none; }
.wall[data-enter="zoom"] .tile-layer.entering { opacity: 0; transform: scale(1.18); }
.wall[data-enter="flip"] .tile-layer { transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2, .8, .2, 1); backface-visibility: hidden; }
.wall[data-enter="flip"] .tile-layer.entering { opacity: 0; transform: perspective(800px) rotateY(-100deg); }
.wall[data-enter="drop"] .tile-layer { transition: opacity 500ms ease, transform 900ms cubic-bezier(.2, 1.4, .4, 1); }
.wall[data-enter="drop"] .tile-layer.entering { opacity: 0; transform: translateY(-60%) rotate(-6deg); }
.wall[data-enter="slide"] .tile-layer.entering { opacity: 0; transform: translateX(40%); }
.wall[data-enter="burst"] .tile-layer { transition: opacity 600ms ease, transform 900ms cubic-bezier(.2, 1.5, .4, 1); }
.wall[data-enter="burst"] .tile-layer.entering { opacity: 0; transform: scale(.3) rotate(8deg); filter: brightness(2.2); }
.new-moment[data-enter="flip"] .nm-card { transform: perspective(900px) rotateY(-90deg); }
.new-moment[data-enter="drop"] .nm-card { transform: translateY(-60vh) rotate(-8deg); }
.new-moment[data-enter="slide"] .nm-card { transform: translateX(70vw); }
.new-moment[data-enter="burst"] .nm-card { transform: scale(.2); filter: brightness(2); }
.new-moment.show .nm-card { transform: none !important; filter: none; }
.nm-img video { display: block; max-width: 62vw; max-height: 62vh; border-radius: .3vmin; }

/* ---------- ticker ---------- */
.live-ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 5.2vmin; display: flex; align-items: center; overflow: hidden; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35)); border-top: 1px solid rgba(232, 199, 122, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.live-ticker-track { display: flex; white-space: nowrap; animation: wall-x 40s linear infinite; }
.live-ticker-track span { padding-right: 12vmin; font-size: 2.4vmin; font-weight: 700; letter-spacing: .02em; color: var(--wall-gold); }
.light-theme .live-ticker { background: rgba(255, 255, 255, .85); }
.live-screen.with-ticker .live-stage-wrap { padding-bottom: 7vmin; }
.live-screen.with-ticker.has-floor .live-stage-wrap { padding-bottom: 14vmin; }
.live-screen.with-ticker .fx-diyas, .live-screen.with-ticker .fx-candles, .live-screen.with-ticker .fx-anars { bottom: 5.8vmin; }

/* ---------- tools and the presenter sidebar ---------- */
.live-tools { position: absolute; right: 2vmin; bottom: 2vmin; display: flex; gap: 8px; opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.with-ticker .live-tools { bottom: 7vmin; }
.live-tools.show { opacity: 1; pointer-events: auto; }
.live-tools button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: rgba(12, 14, 20, .82); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.live-tools button:hover { background: rgba(40, 44, 54, .92); }
.live-side { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); display: flex; flex-direction: column; background: #12141B; color: #E8EAF0; box-shadow: -20px 0 50px rgba(0, 0, 0, .5); z-index: 6; font-size: 14px; }
.live-side-head { position: relative; padding: 18px 48px 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 2px; }
.live-side-head b { font-size: 17px; }
.live-side-head small { color: #9AA1AE; }
.live-side-x { position: absolute; right: 10px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.live-side-x:hover { background: rgba(255, 255, 255, .08); }
.live-side #controls { flex: 1; overflow-y: auto; padding: 4px 18px 18px; }
.live-side-foot { padding: 10px 18px; border-top: 1px solid rgba(255, 255, 255, .08); color: #9AA1AE; font-size: 13px; }
.live-screen.side-open .live-head, .live-screen.side-open .live-body, .live-screen.side-open .live-ticker { margin-right: min(380px, 92vw); }
.live-screen.side-open .live-ticker { right: min(380px, 92vw); margin-right: 0; }
.live-screen.side-open .live-tools { right: calc(min(380px, 92vw) + 2vmin); }
.live-screen.embedded .live-tools { display: none; }

/* the control panel (sidebar and Wall studio) */
.wc-panel section { padding: 14px 0; border-bottom: 1px solid rgba(127, 127, 127, .18); display: flex; flex-direction: column; gap: 10px; }
.wc-panel section:last-child { border-bottom: 0; }
.wc-panel h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.wc-field { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.wc-field select, .wc-field input, .wc-field textarea { width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .35); background: #fff; color: #1E1E1E; font: inherit; font-weight: 500; }
.wc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.wc-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.wc-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #E8C77A; }

/* ---------- booth: photo / video ---------- */
.booth-modes { display: flex; justify-content: center; gap: 4px; margin: 2px 0 10px; }
.booth-modes button { min-height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .7); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.booth-modes button[aria-checked="true"] { background: rgba(255, 255, 255, .16); color: #FFD27A; }
.booth-shutter { position: relative; }
.booth-shutter.is-video span { background: #FF3B3B; }
.booth.recording .booth-shutter span { width: 30px; height: 30px; border-radius: 8px; }
.booth.recording .booth-shutter::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(#FF3B3B calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: radial-gradient(circle, transparent 41px, #000 42px); mask: radial-gradient(circle, transparent 41px, #000 42px); }
.booth.recording .booth-formats, .booth.recording .booth-frames, .booth.recording .booth-modes, .booth.recording [data-act="gallery"], .booth.recording [data-act="flip"] { opacity: .3; pointer-events: none; }
.booth-rec { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; z-index: 3; }
.booth-rec i { width: 10px; height: 10px; border-radius: 50%; background: #FF3B3B; animation: pulse 1s ease-in-out infinite; }
.m-clip video { width: 100%; max-height: 66dvh; display: block; border-radius: 14px; background: #000; }
.m-posted-card video { width: 100%; display: block; }
.m-tile-play { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.m-view { max-width: 100%; max-height: 70dvh; display: block; margin: 0 auto; border-radius: 12px; }
.m-hero video { position: relative; width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .fx-lights b, .fx-toran .lf, .fx-toran .strand, .fx-lanterns .lantern, .fx-diyas .flame, .fx-candles .flame, .fx-rangoli i, .fx-carousel .ring, .live-ticker-track, .live-screen .live-title b { animation: none; }
}
.live-stage-wrap { overflow: hidden; }

/* LinkedIn: a match waiting for approval */
.li-suggest { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px dashed rgba(47, 127, 176, .5); border-radius: 12px; background: rgba(47, 127, 176, .06); }
.li-suggest .mono { word-break: break-all; }
.li-suggest .btn-row { margin-top: 6px; }

/* QC Moments: live wall studio in the Manage tab */
.m-ws-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; padding: 0 16px 16px; }
.m-ws-preview { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.m-ws-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0B0710; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
.m-ws-frame iframe { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .4)); }
.m-ws-controls { max-height: 640px; overflow-y: auto; padding-right: 4px; }
@media (max-width: 900px) { .m-ws-body { grid-template-columns: 1fr; } .m-ws-controls { max-height: none; } }

/* QC Moments: after posting, one bar under the photo (Save · Take again · Share) */
.m-posted-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; padding: 14px 18px; border-radius: 20px; background: rgba(20, 16, 24, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7); }
.m-pb { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; border: 0; background: transparent; color: #F4EEE6; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.m-pb span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.m-pb span svg { width: 22px; height: 22px; }
.m-pb:active span { transform: scale(.92); }
.m-pb-main span { width: 68px; height: 68px; background: linear-gradient(150deg, #F3D08A, #D9A54A); color: #2A1A0A; box-shadow: 0 10px 24px -10px rgba(217, 165, 74, .9); }
.m-pb-main span svg { width: 28px; height: 28px; }

/* live wall: birthday party theme */
.live-screen[data-theme="birthday"] .live-bg { background: radial-gradient(90% 70% at 20% 0%, #8E2A6B 0%, rgba(142, 42, 107, 0) 60%), radial-gradient(80% 70% at 90% 100%, #2A3D8F 0%, rgba(42, 61, 143, 0) 60%), linear-gradient(160deg, #2A0F33 0%, #1A0B26 60%, #0E0818 100%); }
.live-screen[data-theme="birthday"] { --wall-gold: #FFD27A; }
.moment-event.theme-birthday { background: linear-gradient(135deg, #8E2A6B 0%, #C2185B 45%, #F06292 100%); }

/* ---------- more premium wall themes ---------- */
.live-screen[data-theme="gold-luxe"] .live-bg { background: radial-gradient(70% 55% at 50% 0%, rgba(201, 161, 92, .35) 0%, rgba(201, 161, 92, 0) 70%), linear-gradient(180deg, #0B0A08 0%, #14110B 60%, #070604 100%); }
.live-screen[data-theme="gold-luxe"] .live-bg::after { content: ""; position: absolute; inset: 1.6vmin; border: 1px solid rgba(232, 199, 122, .5); outline: 1px solid rgba(232, 199, 122, .18); outline-offset: .7vmin; border-radius: .6vmin; pointer-events: none; }
.live-screen[data-theme="champagne"] .live-bg { background: radial-gradient(90% 70% at 50% 0%, #FFFFFF 0%, #F7EEDD 45%, #EAD9B8 100%); }
.live-screen[data-theme="champagne"] { --wall-gold: #9C7A3C; }
.live-screen[data-theme="champagne"] .live-title b, .live-screen[data-theme="pastel"] .live-title b { color: #7A5A2A; }
.live-screen[data-theme="rose-gold"] .live-bg { background: radial-gradient(80% 60% at 20% 0%, #B76E79 0%, rgba(183, 110, 121, 0) 65%), radial-gradient(70% 60% at 100% 100%, #6B3A4A 0%, rgba(107, 58, 74, 0) 60%), linear-gradient(160deg, #2E1A20 0%, #1C1014 100%); }
.live-screen[data-theme="rose-gold"] { --wall-gold: #F2C3B3; }
.live-screen[data-theme="emerald"] .live-bg { background: radial-gradient(80% 60% at 50% 0%, #1F6B52 0%, rgba(31, 107, 82, 0) 65%), linear-gradient(180deg, #0A2A20 0%, #061A14 60%, #030E0B 100%); }
.live-screen[data-theme="sapphire"] .live-bg { background: radial-gradient(80% 60% at 30% 0%, #2B4FA8 0%, rgba(43, 79, 168, 0) 65%), linear-gradient(180deg, #0A1230 0%, #060B20 60%, #03050F 100%); }
.live-screen[data-theme="sapphire"] { --wall-gold: #CFE0FF; }
.live-screen[data-theme="aurora"] .live-bg { background: #050A14; }
.live-screen[data-theme="aurora"] .live-bg::before { background: radial-gradient(40% 30% at 25% 30%, rgba(80, 230, 180, .35), transparent 70%), radial-gradient(40% 35% at 70% 25%, rgba(140, 110, 255, .35), transparent 70%), radial-gradient(35% 30% at 55% 70%, rgba(60, 170, 255, .25), transparent 70%); animation-duration: 14s; }
.live-screen[data-theme="aurora"] { --wall-gold: #A8F0DA; }
.live-screen[data-theme="sunset"] .live-bg { background: linear-gradient(180deg, #2A0F2E 0%, #6B1F3A 40%, #C2410C 85%, #E8892C 100%); }
.live-screen[data-theme="pastel"] .live-bg { background: radial-gradient(60% 50% at 15% 10%, #FBD3E0 0%, transparent 70%), radial-gradient(60% 50% at 85% 20%, #D6E4FF 0%, transparent 70%), radial-gradient(60% 50% at 50% 100%, #E3F5E8 0%, transparent 70%), #FFFBF6; }
.live-screen[data-theme="pastel"] { --wall-gold: #B5838D; }
.live-screen[data-theme="noir"] .live-bg { background: radial-gradient(80% 70% at 50% 0%, #2A2A2A 0%, #0B0B0B 70%); }
.live-screen[data-theme="noir"] .wc img, .live-screen[data-theme="noir"] .tile img { filter: grayscale(1) contrast(1.08); }
.live-screen[data-theme="noir"] { --wall-gold: #F2F2F2; }
.live-screen[data-theme="festive-red"] .live-bg { background: radial-gradient(90% 70% at 50% 0%, #B3122E 0%, #6E0A1C 50%, #2E040C 100%); }
.live-screen[data-theme="celebration"] .live-bg { background: radial-gradient(70% 60% at 20% 10%, #2F7FB0 0%, transparent 65%), radial-gradient(70% 60% at 85% 90%, #22A785 0%, transparent 60%), linear-gradient(160deg, #0B1E30 0%, #081420 100%); }
.live-screen[data-theme="celebration"] { --wall-gold: #8FE3C8; }

/* ---------- full-screen stack ---------- */
.fx-stack { overflow: hidden; }
.fx-stack .pol-card { padding: 0; background: #000; border-radius: 1.4vmin; overflow: hidden; box-shadow: 0 4vmin 9vmin -2vmin rgba(0, 0, 0, .8); }
.fx-stack .pol-card::before, .fx-stack .pol-name { display: none; }
.fx-stack .pslot { aspect-ratio: auto; height: 82%; }
.fx-stack .pol-card .wc { height: 100%; aspect-ratio: auto; }
.fx-stack .pol-card .wc-img { height: 100%; }
.fx-stack .pol-card img, .fx-stack .pol-card video { object-fit: contain; background: #000; }
.fx-stack .pol-card.dropping { transform: translateX(60%) rotate(calc(var(--rot) + 8deg)) scale(1.1); }
.live-story .fx-stack .pslot { height: 70%; }

/* ---------- more ways new photos arrive ---------- */
.wall[data-enter="spin"] .tile-layer { transition: opacity 700ms ease, transform 1100ms cubic-bezier(.2, .9, .2, 1); }
.wall[data-enter="spin"] .tile-layer.entering { opacity: 0; transform: rotate(-200deg) scale(.2); }
.wall[data-enter="blur"] .tile-layer { transition: opacity 1200ms ease, filter 1400ms ease, transform 1400ms ease; }
.wall[data-enter="blur"] .tile-layer.entering { opacity: 0; filter: blur(30px) brightness(1.4); transform: scale(1.08); }
.wall[data-enter="swing"] .tile-layer { transform-origin: top center; transition: opacity 600ms ease, transform 1300ms cubic-bezier(.2, 1.6, .4, 1); }
.wall[data-enter="swing"] .tile-layer.entering { opacity: 0; transform: perspective(900px) rotateX(-80deg); }
.wall[data-enter="rise"] .tile-layer.entering { opacity: 0; transform: translateY(40%); }
.wall[data-enter="curtain"] .tile-layer { transition: clip-path 1300ms cubic-bezier(.7, 0, .2, 1), opacity 300ms; clip-path: inset(0 0 0 0); }
.wall[data-enter="curtain"] .tile-layer.entering { clip-path: inset(0 50% 0 50%); }
.new-moment[data-enter="spin"] .nm-card { transform: rotate(-180deg) scale(.2); }
.new-moment[data-enter="blur"] .nm-card { transform: scale(1.1); filter: blur(30px); }
.new-moment[data-enter="swing"] .nm-card { transform: perspective(900px) rotateX(-80deg); transform-origin: top center; }
.new-moment[data-enter="rise"] .nm-card { transform: translateY(60vh); }
.new-moment[data-enter="curtain"] .nm-card { clip-path: inset(0 50% 0 50%); transition: transform 1s, clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.new-moment.show .nm-card { clip-path: inset(0 0 0 0); }
.moment-event.theme-gptw { background: linear-gradient(135deg, #8A1219 0%, #D7262E 55%, #F06449 100%); } .moment-event.theme-celebration { background: linear-gradient(135deg, #1E5A80 0%, #2F7FB0 50%, #22A785 100%); }

/* QC Moments: reviewing or just posted a photo: everything on one screen, no scrolling */
.moment:has(.m-stage, .m-posted) .m-header { display: none; }
.moment:has(.m-stage, .m-posted) .m-tabs { margin: 6px 0 10px; }
.m-capture:has(.m-stage) { gap: 10px; }
.m-capture:has(.m-stage) > .card { padding: 10px 12px; gap: 8px; }
.m-capture .m-stage { padding: 8px; }
.m-capture .m-stage canvas, .m-capture .m-clip video { max-height: calc(100dvh - 495px); min-height: 160px; }
.m-capture .frame-opt { padding: 4px; gap: 2px; }
.m-capture:has(.m-stage) .sticky-actions { position: static; background: none; }
.m-capture .frame-opt canvas { width: 46px; height: 46px; }
.m-capture .frame-opt small { font-size: 11px; }
.m-capture .edit-chips button { min-height: 32px; padding: 0 10px; font-size: 13px; }
.m-capture .sticky-actions { padding: 8px 0 4px; margin-top: 0; }
.m-posted { gap: 12px; }
.m-posted-card img, .m-posted-card video { max-height: calc(100dvh - 300px); }
@media (min-width: 960px) { .m-capture .m-stage canvas, .m-capture .m-clip video { max-height: calc(100dvh - 360px); } }

/* QC Moments: photo viewer always shows its buttons; face chooser; three-way tabs */
.sheet .m-view { max-height: calc(100dvh - 250px); width: auto; max-width: 100%; object-fit: contain; }
.m-view-bar { position: sticky; bottom: 0; margin-top: 12px; padding: 10px 0 4px; background: var(--surface); flex-wrap: wrap; }
.m-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.m-face { padding: 0; border: 2px solid transparent; border-radius: 50%; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: #000; }
.m-face:hover, .m-face:focus-visible { border-color: var(--action); }
.m-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-seg3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 420px) { .m-seg3 button { font-size: 12.5px; padding: 0 4px; } .m-seg3 button svg { display: none; } }

/* wall: balloons, light leak, film grain */
.wall-fx.show-balloons .fx-balloons, .wall-fx.show-leak .fx-leak { opacity: 1; }
.fx-balloons { inset: 0; z-index: 3; }
.balloon2 { position: absolute; bottom: -22vmin; width: calc(7vmin * var(--s)); height: calc(8.6vmin * var(--s)); border-radius: 50% 50% 47% 47%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 6%, rgba(255, 255, 255, .25) 14%, var(--c) 42%, color-mix(in srgb, var(--c) 70%, #000) 100%); box-shadow: inset -.6vmin -.8vmin 1.6vmin rgba(0, 0, 0, .18); animation: floatUp linear infinite; opacity: .92; }
.balloon2::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(9vmin * var(--s)); background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
@keyframes floatUp { 0% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(3vmin, -60vh) rotate(5deg); } 100% { transform: translate(-2vmin, -130vh) rotate(-3deg); } }
.fx-leak { inset: 0; z-index: 2; mix-blend-mode: screen; background: radial-gradient(40% 60% at 0% 20%, rgba(255, 150, 80, .35), transparent 70%), radial-gradient(35% 50% at 100% 80%, rgba(255, 90, 140, .25), transparent 70%); animation: leak 12s ease-in-out infinite alternate; }
@keyframes leak { to { transform: translateX(4%) scale(1.1); filter: hue-rotate(25deg); } }
.fx-grain { inset: -50%; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
.wall-fx.show-grain .fx-grain { opacity: .09; }
@keyframes grain { 0% { transform: translate(0, 0); } 30% { transform: translate(-3%, 2%); } 60% { transform: translate(2%, -3%); } 100% { transform: translate(-1%, 1%); } }
@media (prefers-reduced-motion: reduce) { .balloon2, .fx-leak, .fx-grain { animation: none; } }

/* ----- QC Moments: Video studio ----- */
.vs { display: flex; flex-direction: column; gap: 18px; max-width: 1280px; margin: 0 auto; }
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vs-head h1 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 34px; }
.vs-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .vs-grid { grid-template-columns: 1fr; } .vs-stage { order: -1; } }
.vs-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vs-preview { position: relative; display: grid; place-items: center; background: #050407; border-radius: 18px; overflow: hidden; height: min(68vh, 760px); }
.vs-preview canvas { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); }
.vs-preview.landscape canvas { width: 100%; height: auto; }
.vs-preview.landscape { height: auto; aspect-ratio: 16 / 9; }
.vs-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(5, 4, 7, .78); color: #fff; text-align: center; padding: 20px; }
.vs-busy[hidden] { display: none; }
.vs-busy .meter { width: min(360px, 70vw); }
.vs-controls { display: flex; align-items: center; gap: 12px; }
.vs-controls input[type=range] { flex: 1; accent-color: #E8C77A; }
.vs-progress { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(232, 199, 122, .1); }
.vs-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.vs-tile { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; }
.vs-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vs-tile.out img { opacity: .55; filter: grayscale(.5); }
.vs-tile.pinned { border-color: #E8C77A; }
.vs-score { position: absolute; right: 4px; top: 4px; min-width: 26px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #111; }
.vs-score.hi { background: #7BE0A8; } .vs-score.mid { background: #F3D08A; } .vs-score.lo { background: #F29A8A; }
.vs-vid { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10px; }
.vs-why { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }
.vs-music canvas { width: 100%; height: 56px; border-radius: 8px; background: rgba(255, 255, 255, .05); cursor: ew-resize; touch-action: none; }
.vs-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vs-reel { display: flex; flex-direction: column; gap: 8px; }
.vs-reel video { width: 100%; max-height: 360px; border-radius: 12px; background: #000; }
.vs-reel-meta { display: flex; flex-direction: column; gap: 4px; }
.vs-beats { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; font-weight: 800; }
.vs-beats.set { background: #2F7FB0; }
.vs-beats.hero { background: #E8C77A; color: #111; }
.vs-beatinfo { color: #E8C77A; font-weight: 700; }
.vs-preview canvas { position: absolute; inset: 0; margin: auto; height: auto; width: auto; max-width: 100%; max-height: 100%; }

/* ===== Event Manager: the event you're in (bar under the top bar), Enter buttons, Live tab ===== */
.evbar { position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 29; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; background: linear-gradient(90deg, var(--blue-mist), var(--surface) 70%); border-bottom: 1px solid var(--line); }
.evbar[hidden] { display: none; }
.evbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); }
.evbar-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.evbar-text small { font-size: 11px; font-weight: 700; color: var(--blue-deep); }
.evbar-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evbar-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.evbar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; display: inline-block; }
.evbar-dot.live { background: var(--danger); box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); animation: evPulse 1.8s ease-out infinite; }
@keyframes evPulse { to { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } }
@media (prefers-reduced-motion: reduce) { .evbar-dot.live { animation: none; } }
.icon-btn.sm { width: 32px; height: 32px; }
.event-card { position: relative; }
.event-card .enter-btn { align-self: center; flex: none; }
.ev-pick { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-radius: 12px; }
.ev-pick:hover { background: var(--surface-2); }
.ev-pick.on { background: var(--green-mist); }
.enter-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; border: 1.5px dashed var(--blue); background: var(--blue-mist); }
.enter-cta svg { width: 28px; height: 28px; color: var(--blue-deep); flex: none; }
.enter-cta span { display: block; color: var(--muted); font-size: 14px; }
.ev-home { border-left: 4px solid var(--blue); }
@media (max-width: 720px) { .evbar { padding-left: 12px; } .evbar .btn.sm { padding-inline: 10px; } }

/* ===== Email Studio: Gemini panel, code editor, attachments ===== */
.ai-card { border: 1.5px solid var(--blue-soft); background: linear-gradient(160deg, var(--blue-mist), var(--surface) 55%); }
.ai-title { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-deep); }
.ai-title svg { width: 20px; height: 20px; }
.ai-card textarea { min-height: 76px; resize: vertical; }
.ai-card .chip { cursor: pointer; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; }
.ai-card .ai-chip { border-color: var(--blue-soft); color: var(--blue-deep); font-weight: 700; }
.ai-card.busy { position: relative; overflow: hidden; }
.ai-card.busy::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, transparent, var(--blue), var(--green), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: aiSweep 1.2s linear infinite; }
@keyframes aiSweep { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-card.busy::after { animation: none; background: var(--blue); } }
.ai-status { font-size: 13px; align-self: center; }
.code-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.code-wrap .CodeMirror { height: auto; min-height: 420px; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; }
.code-wrap .CodeMirror-scroll { min-height: 420px; max-height: 70vh; }
.code-wrap textarea.code { border: 0; border-radius: 0; }

/* ===== Campaign analytics ===== */
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.an-tile { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-tile b { font-size: 26px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.an-tile span { font-size: 13px; font-weight: 700; color: var(--slate); }
.an-tile small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.an-tile.ok { background: var(--green-mist); }
.an-tile.ok b { color: var(--green-deep); }
.an-tile.warn { background: var(--warn-mist); }
.table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.an-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.an-table td { padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.an-table td:first-child { white-space: normal; font-weight: 700; min-width: 140px; }

/* ===== Email Studio hub ===== */
.es-status { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.es-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.es-card.link:hover { border-color: var(--blue-soft); }
.es-card b { display: block; }
.es-card small { color: var(--muted); }
.es-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-mist); color: var(--blue-deep); flex: none; }
.es-ic.zoho { background: var(--warn-mist); color: var(--ink); }
.es-ic.ok { background: var(--green-mist); color: var(--green-deep); }
.es-ic svg { width: 20px; height: 20px; }
.es-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.es-tpl { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.es-tpl:hover { border-color: var(--blue-soft); box-shadow: var(--shadow-1); }
.es-thumb { height: 200px; overflow: hidden; background: #F4F6F8; position: relative; border-bottom: 1px solid var(--line); }
.es-thumb iframe { width: 640px; height: 800px; border: 0; transform: scale(.42); transform-origin: 0 0; pointer-events: none; background: #fff; position: absolute; left: 50%; margin-left: -134px; }
.es-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.es-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.es-card .grow { min-width: 160px; flex: 1 1 160px; }
.sso-btn.primary-sso { background: #2F2F2F; border-color: #2F2F2F; color: #fff; }
.sso-btn.primary-sso:hover { background: #1F1F1F; }

/* =====================================================================================
   QuickClean glass theme (matches the News portal): pale sky-to-mint backdrop, frosted
   glass panels with a lit edge, a deep navy hero band with wave lines, teal figures, and
   spring-eased motion. QC Moments' dark screens (body.cine) and the TV wall keep their own look.
   ===================================================================================== */
:root {
  --glass: rgba(255, 255, 255, .62);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 rgba(18, 59, 115, .04) inset, 0 10px 30px -16px rgba(18, 59, 115, .28), 0 2px 6px -2px rgba(18, 59, 115, .08);
  --glass-shadow-lift: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 22px 44px -20px rgba(18, 59, 115, .36), 0 4px 10px -4px rgba(18, 59, 115, .12);
  --night: #0E2A57;           /* hero navy */
  --night-2: #13407A;
  --teal: #157A8C;            /* figures, as on the News portal */
  --spring: cubic-bezier(.22, 1.25, .36, 1);
  --radius: 18px;
  --radius-sm: 12px;
}

/* backdrop: soft colour for the glass to frost */
body:not(.cine):not(.on-live) {
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(126, 186, 226, .38), transparent 60%),
    radial-gradient(820px 520px at 102% 108%, rgba(120, 214, 182, .34), transparent 62%),
    radial-gradient(600px 400px at 70% 30%, rgba(214, 236, 247, .55), transparent 70%),
    linear-gradient(160deg, #E6F0F7 0%, #EDF5F6 45%, #E5F4EE 100%);
  background-attachment: fixed;
  color: #10233A;
}

/* glass surfaces (one layer deep: never glass on glass, so phones stay smooth) */
body:not(.cine) .card, body:not(.cine) .stat, body:not(.cine) .es-card, body:not(.cine) .es-tpl, body:not(.cine) .hub-app:not(.live),
body:not(.cine) .an-tile, body:not(.cine) .step {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
body:not(.cine) .card .card, body:not(.cine) .card .stat, body:not(.cine) .card .an-tile, body:not(.cine) .card .es-card {
  /* inside a glass card: a quiet tint instead of more blur */
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
  border-color: rgba(255, 255, 255, .7);
}
body:not(.cine) .an-tile.ok { background: rgba(216, 241, 234, .75); }
body:not(.cine) .an-tile.warn { background: rgba(255, 244, 219, .8); }

/* figures and headings */
.stat b, .an-tile b { color: var(--teal); letter-spacing: -.02em; }
.stat span { color: #4A5B6E; }
h1, h2, h3 { letter-spacing: -.015em; }
.page-head h1 { color: #0F2440; font-weight: 800; }
.page-head .sub { color: #4A5B6E; }

/* sidebar: light frosted glass with a lit active pill, like the News portal */
@media (min-width: 900px) {
  body:not(.cine) .sidebar {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 1px 0 0 rgba(18, 59, 115, .05), 12px 0 40px -30px rgba(18, 59, 115, .4);
    color: #10233A;
  }
  body:not(.cine) .sidebar .brandmark { background: transparent; box-shadow: none; padding: 6px 8px 18px; }
  body:not(.cine) .sidebar a.nav { color: #2A3D52; border-radius: 12px; transition: background .25s var(--ease-out), color .2s, transform .3s var(--spring); }
  body:not(.cine) .sidebar a.nav svg { color: #5B7088; }
  body:not(.cine) .sidebar a.nav:hover { background: rgba(255, 255, 255, .6); }
  body:not(.cine) .sidebar a.nav:active { transform: scale(.97); }
  body:not(.cine) .sidebar a.nav.active { background: rgba(255, 255, 255, .85); color: #0F2440; box-shadow: 0 6px 16px -10px rgba(18, 59, 115, .35), 0 1px 0 #fff inset; }
  body:not(.cine) .sidebar a.nav.active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--teal); }
  body:not(.cine) .sidebar a.nav.active svg { color: var(--teal); }
  body:not(.cine) .sidebar .app-label { color: #6A7C90; }
  body:not(.cine) .sidebar .me { color: #4A5B6E; border-top-color: rgba(18, 59, 115, .08); }
  body:not(.cine) .sidebar .me b { color: #10233A; }
  body:not(.cine) .sidebar .me a { color: var(--blue-deep); }
  body:not(.cine) .sidebar .tagline { color: var(--green-deep); font-family: var(--serif); font-style: italic; }
}

/* top bar and bottom bar: frosted chrome */
body:not(.cine) .topbar {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(18, 59, 115, .05);
}
body:not(.cine) .topbar .title { color: #0F2440; }
body:not(.cine) .evbar { background: linear-gradient(90deg, rgba(214, 236, 247, .75), rgba(255, 255, 255, .5)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom-color: rgba(255, 255, 255, .7); }
body:not(.cine) .bottomnav { background: rgba(255, 255, 255, .66); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, .75); }

/* controls */
body:not(.cine) .btn { border-radius: 12px; border-color: rgba(18, 59, 115, .1); background: rgba(255, 255, 255, .72); box-shadow: 0 1px 0 #fff inset, 0 4px 12px -8px rgba(18, 59, 115, .3); transition: transform .35s var(--spring), box-shadow .25s var(--ease-out), background .2s; }
body:not(.cine) .btn:hover { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 #fff inset, 0 10px 22px -12px rgba(18, 59, 115, .4); }
body:not(.cine) .btn:active { transform: scale(.96); }
body:not(.cine) .btn.primary { background: linear-gradient(180deg, #3A8CC0 0%, #2A73A4 100%); border-color: rgba(18, 59, 115, .25); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 22px -10px rgba(42, 115, 164, .8); }
body:not(.cine) .btn.primary:hover { background: linear-gradient(180deg, #4196CB 0%, #2C79AD 100%); }
body:not(.cine) .btn.danger { color: var(--danger); }
body:not(.cine) .btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }
body:not(.cine) .btn.ghost:hover { background: rgba(255, 255, 255, .6); }
body:not(.cine) .sidebar .scan-cta { background: linear-gradient(180deg, #2DB892 0%, #1E9677 100%); border-color: rgba(22, 132, 104, .4); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 12px 26px -12px rgba(22, 132, 104, .85); }
body:not(.cine) .sso-btn.primary-sso { background: #1F2A37; border-color: #1F2A37; color: #fff; }
body:not(.cine) input, body:not(.cine) select, body:not(.cine) textarea { background: rgba(255, 255, 255, .78); border-color: rgba(18, 59, 115, .12); border-radius: 12px; }
body:not(.cine) input:focus, body:not(.cine) select:focus, body:not(.cine) textarea:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(73, 160, 210, .18); }
body:not(.cine) .chip { background: rgba(255, 255, 255, .7); border-color: rgba(18, 59, 115, .1); }
body:not(.cine) .search { background: rgba(255, 255, 255, .72); border-radius: 12px; }

/* tabs: a frosted segmented strip */
body:not(.cine) .tabs { border-bottom: 0; margin: 0; padding: 4px; gap: 2px; background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .75); border-radius: 14px; box-shadow: var(--glass-shadow); width: fit-content; max-width: 100%; }
body:not(.cine) .tabs a { border-bottom: 0; border-radius: 10px; padding: 9px 16px; color: #4A5B6E; transition: background .25s var(--ease-out), color .2s; }
body:not(.cine) .tabs a.active { background: #fff; color: #0F2440; box-shadow: 0 6px 14px -8px rgba(18, 59, 115, .35); }

/* sheets and dialogs: heavy frost over a dimmed page */
body:not(.cine) .overlay { background: rgba(14, 42, 87, .32); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); }
body:not(.cine) .sheet { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 -20px 60px -20px rgba(14, 42, 87, .45); animation: sheetIn .5s var(--spring); }
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the deep navy hero band with wave lines */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; padding: 24px 22px; color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%237CC6EA' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 210 C200 150 380 260 600 200 S1000 120 1200 190'/%3E%3Cpath d='M0 236 C220 180 420 280 640 222 S1020 150 1200 214'/%3E%3Cpath d='M0 262 C240 214 460 300 680 246 S1040 184 1200 240'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 70% no-repeat,
    radial-gradient(600px 300px at 85% -20%, rgba(73, 160, 210, .35), transparent 70%),
    linear-gradient(135deg, var(--night) 0%, var(--night-2) 60%, #0F3366 100%);
  box-shadow: 0 30px 60px -30px rgba(14, 42, 87, .7), 0 1px 0 rgba(255, 255, 255, .12) inset;
}
.hero::after { content: ""; position: absolute; inset: 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero .hero-tag { font-family: var(--serif); font-style: italic; color: #BFE3F5; font-size: 17px; margin: 0 0 6px; }
.hero h1 { color: #fff; font-size: clamp(28px, 4vw, 40px); margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.hero p, .hero .muted, .hero small { color: rgba(255, 255, 255, .78); }
.hero .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hero .hero-stat { display: block; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: background .25s, transform .35s var(--spring); }
.hero .hero-stat:hover { background: rgba(255, 255, 255, .12); }
.hero .hero-stat:active { transform: scale(.97); }
.hero .hero-stat b { display: block; font-size: 28px; line-height: 1.1; color: #7DE0C2; letter-spacing: -.02em; }
.hero .hero-stat span { font-size: 13px; color: rgba(255, 255, 255, .8); }
body:not(.cine) .hero .btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; box-shadow: none; }
body:not(.cine) .hero .btn:hover { background: rgba(255, 255, 255, .2); }
body:not(.cine) .hero .btn.primary { background: linear-gradient(180deg, #2DB892, #1E9677); border-color: transparent; box-shadow: 0 10px 22px -10px rgba(45, 184, 146, .8); }
.hero .btn-row { margin-top: 16px; margin-bottom: 4px; }
@media (min-width: 900px) {
  .hero { padding: 30px 32px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: center; }
}

/* motion: pages rise in, clickable glass lifts and presses like iOS */
@keyframes qcEnter { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
body:not(.cine) #main > *, body:not(.cine) #main > .stack > * { animation: qcEnter .6s var(--spring) both; }
body:not(.cine) #main > .stack > *:nth-child(2) { animation-delay: .04s; }
body:not(.cine) #main > .stack > *:nth-child(3) { animation-delay: .08s; }
body:not(.cine) #main > .stack > *:nth-child(4) { animation-delay: .12s; }
body:not(.cine) #main > .stack > *:nth-child(n+5) { animation-delay: .16s; }
body:not(.cine) a.card, body:not(.cine) a.stat, body:not(.cine) .es-tpl, body:not(.cine) .hub-app, body:not(.cine) .es-card.link {
  transition: transform .45s var(--spring), box-shadow .3s var(--ease-out), background .25s;
}
@media (hover: hover) {
  body:not(.cine) a.card:hover, body:not(.cine) a.stat:hover, body:not(.cine) .es-tpl:hover, body:not(.cine) .hub-app:not(.live):hover, body:not(.cine) .es-card.link:hover {
    transform: translateY(-3px); box-shadow: var(--glass-shadow-lift); background: rgba(255, 255, 255, .76);
  }
  body:not(.cine) .hub-app.live:hover { transform: translateY(-3px); }
}
body:not(.cine) a.card:active, body:not(.cine) a.stat:active, body:not(.cine) .es-tpl:active, body:not(.cine) .hub-app:active { transform: scale(.985); }
body:not(.cine) .list-item { transition: background .2s; }
body:not(.cine) .list-item:hover { background: rgba(255, 255, 255, .55); }

/* login: glass panel over the backdrop */
body:not(.cine) .auth { background: transparent; }
body:not(.cine) .auth .card { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }

/* accessibility: solid surfaces and no motion when asked */
@media (prefers-reduced-transparency: reduce) {
  body:not(.cine) .card, body:not(.cine) .stat, body:not(.cine) .sidebar, body:not(.cine) .topbar, body:not(.cine) .bottomnav, body:not(.cine) .sheet,
  body:not(.cine) .tabs, body:not(.cine) .es-card, body:not(.cine) .es-tpl, body:not(.cine) .step, body:not(.cine) .an-tile {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body:not(.cine) .card, body:not(.cine) .stat, body:not(.cine) .sheet, body:not(.cine) .topbar, body:not(.cine) .sidebar { background: rgba(255, 255, 255, .94); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.cine) #main > *, body:not(.cine) #main > .stack > *, body:not(.cine) .sheet { animation: none; }
  body:not(.cine) a.card, body:not(.cine) a.stat, body:not(.cine) .es-tpl, body:not(.cine) .hub-app, body:not(.cine) .btn { transition: none; }
}

/* ===== Brand-kit glass (replaces the navy hero and the white buttons) =====
   Quick Clean brand: Deep Blue #2F7FB0, Blue #49A0D2, Green #22A785, Deep Green #168468.
   Light frosted glass everywhere, brand blue→green as the accent and the glow behind it. */
:root {
  --brand-grad: linear-gradient(120deg, #2F7FB0 0%, #49A0D2 45%, #22A785 100%);
  --brand-grad-soft: linear-gradient(120deg, rgba(47, 127, 176, .9) 0%, rgba(73, 160, 210, .85) 48%, rgba(34, 167, 133, .9) 100%);
  --teal: #1F8F8A;
}
body:not(.cine):not(.on-live) {
  background:
    radial-gradient(900px 560px at 6% -10%, rgba(73, 160, 210, .30), transparent 62%),
    radial-gradient(820px 560px at 104% 110%, rgba(34, 167, 133, .26), transparent 62%),
    radial-gradient(700px 420px at 72% 18%, rgba(139, 195, 228, .28), transparent 70%),
    linear-gradient(160deg, #EAF4FA 0%, #F2F8FA 48%, #EAF6F1 100%);
  background-attachment: fixed;
}

/* figures in the brand gradient */
.stat b, .an-tile b, .hero .hero-stat b {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- hero: white frosted glass over a brand blue→green glow ---- */
.hero {
  color: #10324A;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232F7FB0' stroke-opacity='.14' stroke-width='1.2'%3E%3Cpath d='M0 210 C200 150 380 260 600 200 S1000 120 1200 190'/%3E%3Cpath d='M0 236 C220 180 420 280 640 222 S1020 150 1200 214'/%3E%3Cpath d='M0 262 C240 214 460 300 680 246 S1040 184 1200 240'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 70% no-repeat,
    radial-gradient(520px 260px at 0% 0%, rgba(73, 160, 210, .34), transparent 70%),
    radial-gradient(560px 300px at 100% 100%, rgba(34, 167, 133, .30), transparent 70%),
    rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 60px -32px rgba(47, 127, 176, .45), 0 8px 20px -12px rgba(34, 167, 133, .25);
}
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--brand-grad); opacity: .9; }
.hero::after { border-color: rgba(255, 255, 255, .7); }
.hero .hero-tag { color: #168468; }
.hero h1 { color: #0F2D44; }
.hero p, .hero .muted, .hero small { color: #4A6276; }
.hero .hero-stat { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85); color: #10324A; box-shadow: 0 1px 0 #fff inset, 0 10px 24px -16px rgba(47, 127, 176, .45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .hero-stat:hover { background: rgba(255, 255, 255, .8); }
.hero .hero-stat span { color: #4A6276; }

/* ---- buttons: translucent frosted glass (Apple-style), brand-tinted ---- */
body:not(.cine) .btn {
  color: #1E5A80;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(214, 236, 247, .32) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(47, 127, 176, .08) inset, 0 6px 16px -10px rgba(47, 127, 176, .45);
}
body:not(.cine) .btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(214, 236, 247, .5) 100%); box-shadow: 0 1px 0 #fff inset, 0 12px 24px -14px rgba(47, 127, 176, .55); }
body:not(.cine) .btn.primary, body:not(.cine) .hero .btn.primary {
  color: #fff;
  background: var(--brand-grad-soft);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 -1px 0 rgba(0, 0, 0, .06) inset, 0 12px 26px -12px rgba(34, 140, 150, .7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
body:not(.cine) .btn.primary:hover, body:not(.cine) .hero .btn.primary:hover { background: var(--brand-grad); filter: saturate(110%); }
body:not(.cine) .hero .btn { color: #1E5A80; background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(214, 236, 247, .45) 100%); border-color: rgba(255, 255, 255, .85); box-shadow: 0 1px 0 #fff inset, 0 6px 16px -10px rgba(47, 127, 176, .45); }
body:not(.cine) .hero .btn:hover { background: rgba(255, 255, 255, .85); }
body:not(.cine) .btn.danger { color: #B3261E; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(251, 234, 233, .45)); }
body:not(.cine) .btn.ghost { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; }
body:not(.cine) .btn.ghost:hover { background: rgba(255, 255, 255, .5); }
body:not(.cine) .btn:disabled { opacity: .55; }
/* a soft light that follows the press: the glass "catches" light at the top edge */
body:not(.cine) .btn { position: relative; overflow: hidden; }
body:not(.cine) .btn::after { content: ""; position: absolute; inset: 0 0 52% 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none; opacity: .7; }
body:not(.cine) .btn.ghost::after { display: none; }

/* scan button, sidebar and selected states in the brand gradient */
body:not(.cine) .sidebar .scan-cta { background: linear-gradient(120deg, #22A785 0%, #1E9C8E 50%, #2F7FB0 130%); border-color: rgba(255, 255, 255, .4); color: #fff; }
@media (min-width: 900px) { body:not(.cine) .sidebar a.nav.active::before { background: var(--brand-grad); } body:not(.cine) .sidebar a.nav.active svg { color: #2F7FB0; } }
body:not(.cine) .tabs a.active { color: #1E5A80; }
body:not(.cine) .bottomnav .btn-fab { background: var(--brand-grad); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 12px 26px -10px rgba(34, 140, 150, .75); }
body:not(.cine) .chip.ok { background: rgba(216, 241, 234, .8); }

/* hero buttons and icons sit on light glass now */
body:not(.cine) .es-ic { background: linear-gradient(140deg, rgba(214, 236, 247, .9), rgba(216, 241, 234, .9)); color: #1E5A80; }
@media (prefers-reduced-transparency: reduce) {
  .hero, body:not(.cine) .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero { background: #fff; }
  body:not(.cine) .btn { background: #fff; }
}
body:not(.cine) .gallery-btn, body:not(.cine) .enter-cta { background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(214, 236, 247, .34) 100%); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -14px rgba(47, 127, 176, .45); color: #1E5A80; transition: transform .45s var(--spring), box-shadow .3s, background .25s; }
body:not(.cine) .gallery-btn:hover, body:not(.cine) .enter-cta:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(216, 241, 234, .5) 100%); transform: translateY(-2px); }
body:not(.cine) .gallery-btn:active, body:not(.cine) .enter-cta:active { transform: scale(.98); }

/* CTA button editor */
.cta-prev { padding: 8px 18px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: #fff; }
.editor table[data-cta] { cursor: pointer; outline: 2px dashed transparent; outline-offset: 4px; border-radius: 8px; }
.editor table[data-cta]:hover { outline-color: rgba(47, 127, 176, .45); }

#ef label.changed input { border-color: #22A785; background: #EAF7F2; }
#ef label.changed { color: #168468; }
.ftb { border-radius: var(--radius-sm); border-bottom: 1px solid var(--line); }

.psubj { display: grid; gap: 6px; }
.psubj input { font-weight: 700; }
.psubj label + label input { font-weight: 400; }

/* ===== Template editor: one header row, Gemini + subject side by side, then editor and preview ===== */
.te { display: grid; gap: 16px; }
.te-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 14px 16px; }
.te-head .f { flex: 1 1 140px; min-width: 120px; margin: 0; font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.te-head .f .hint { font-weight: 400; }
.te-evrow { display: flex; gap: 6px; align-items: center; }
.te-evrow select { flex: 1; min-width: 0; }
.te-evrow .icon-btn { flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; }
.te-actions .icon-btn { width: 40px; height: 40px; }
.te-head .f.te-name { flex: 2 1 220px; }
.te-head .f.te-ev { flex: 2 1 200px; }
.te-head .f input, .te-head .f select { min-height: 40px; }
.te-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.te-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.te-pair { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .te-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .te-pair > .card { height: 100%; } }
.psubj .f { margin: 0; }
.inbox-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-top: auto; }
.ib-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, #1D5F8A, #11705A); }
.ib-txt { min-width: 0; font-size: 14px; line-height: 1.35; }
.ib-txt > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-txt #ibSub { font-weight: 700; }
@media (max-width: 720px) { .te-actions { margin-left: 0; width: 100%; } .te-actions .btn.primary { margin-left: auto; } }

/* ===== Template editor: one email card ===== */
.te-mail { padding: 0; overflow: hidden; }
.te-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.te-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.te-bar-tools select { width: auto; min-height: 36px; font-size: 14px; }
#attBtn.active { box-shadow: inset 0 0 0 2px rgba(29, 95, 138, .35); }
.te-att { display: grid; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: rgba(214, 236, 247, .25); }
.te-mail .ftb { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.te-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.te-body.split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) { .te-body.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.te-body .code-wrap { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.te-body .code-wrap .CodeMirror, .te-body .code-wrap .CodeMirror-scroll { min-height: 760px; max-height: 760px; }
.te-frame { display: flex; justify-content: center; padding: 16px; background: rgba(234, 244, 250, .45); }
.te-frame .preview-frame { height: 600px; transition: height .2s ease; }
.te-hint { display: block; padding: 8px 14px 12px; }

/* subject and Gemini in a slim column on the left, the email large on the right */
.te-main { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.te-side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 1100px) {
  .te-main { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .te-side { position: sticky; top: 76px; }
}
.te-side .ai-card .btn-row { flex-wrap: wrap; }
.te-side .ai-card .btn-row .btn { flex: 1 1 auto; }
.te-zoom button { min-width: 34px; font-weight: 700; }
.te-zoom #zLabel { min-width: 74px; font-weight: 600; }
.te-frame { padding: 20px 16px 24px; }

.te-bar { flex-wrap: nowrap; padding: 10px 12px; }
.te-bar .seg button { padding-inline: 10px; }
.te-bar-tools { flex-wrap: nowrap; gap: 6px; }
@media (max-width: 1250px) { .te-bar, .te-bar-tools { flex-wrap: wrap; } }
.te-mail .ftb { align-items: center; gap: 2px; padding: 6px 10px; }
.te-mail .ftb select { width: auto; max-width: 150px; min-height: 34px; font-size: 13px; padding-block: 0; }
.te-mail .ftb .btn.sm { min-height: 34px; }
.te-mail .ftb button[data-cmd], .te-mail .ftb button[data-act] { min-width: 32px; height: 34px; padding: 0 6px; }
.te-frame { padding: 12px 12px 16px; }
.te-hint { padding-top: 0; }

/* ===== Guests portal: the list as an editable sheet ===== */
.gp-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; }
.gp-head .f { margin: 0; font-size: 13px; }
.gp-ev { flex: 1 1 240px; }
.gp-q { flex: 2 1 260px; margin: 0; }
.gp-st { width: auto; min-height: 40px; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.gp-sum { font-size: 13px; padding: 0 4px; }
.gp-wrap { padding: 0; overflow: auto; max-height: calc(100vh - 230px); }
.gp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 1100px; }
.gp-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 12px; font-weight: 700; color: var(--muted, #5F6368); background: rgba(246, 250, 252, .97); padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.gp-table td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid rgba(217, 222, 226, .6); }
.gp-table td input, .gp-table td select { width: 100%; min-height: 40px; border: 0; border-radius: 0; background: transparent; padding: 0 10px; font: inherit; font-size: 14px; box-shadow: none; }
.gp-table td input:focus, .gp-table td select:focus { outline: 2px solid #49A0D2; outline-offset: -2px; background: #fff; }
.gp-table td.chg { background: #FFF6DE; }
.gp-table tr.new td { background: #EAF7F2; }
.gp-table tbody tr:hover td { background-color: rgba(214, 236, 247, .35); }
.gp-table tbody tr:hover td.chg { background: #FFF0C2; }
.gp-n { width: 52px; text-align: center; color: var(--muted, #5F6368); font-size: 12px; padding: 0 6px !important; }
.gp-x { width: 92px; white-space: nowrap; text-align: right; padding: 0 4px !important; }
.gp-x .icon-btn { width: 36px; height: 36px; }
.gp-table select.st-met { color: #11705A; font-weight: 700; }
.gp-table select.st-attended { color: #1D5F8A; font-weight: 700; }
.gp-table select.st-confirmed { color: #276C96; }
.gp-table select.st-no_show { color: #B3261E; }
.gp-evc { min-width: 180px; }
.gp-evc a { display: block; padding: 0 10px; line-height: 40px; color: #1D5F8A; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; text-decoration: none; }
.gp-evc select { font-weight: 600; color: #1D5F8A; }
.gp-table { min-width: 1280px; }
.gp-table td:has([data-k="full_name"]) { min-width: 170px; }
.gp-table td:has([data-k="designation"]) { min-width: 160px; }
.gp-table td:has([data-k="company"]) { min-width: 180px; }
.gp-table td:has([data-k="email"]) { min-width: 210px; }
.gp-table td:has([data-k="phone"]) { min-width: 130px; }
.gp-table td:has([data-k="city"]) { min-width: 120px; }
.gp-table td:has([data-k="status"]) { min-width: 120px; }
.gp-table td:has([data-k="guest_notes"]) { min-width: 200px; }

/* ===== Plain labels: status words read as text, not as little boxes (buttons keep their look) ===== */
span.chip:not(:has(.chip-x)) { background: none !important; border: 0 !important; border-radius: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--slate); box-shadow: none !important; }
span.chip.ok:not(:has(.chip-x)), span.chip.brand:not(:has(.chip-x)) { color: #11705A; }
span.chip.info:not(:has(.chip-x)), span.chip.li:not(:has(.chip-x)) { color: #1D5F8A; }
span.chip.warn:not(:has(.chip-x)) { color: #9A6400; }
span.chip.danger:not(:has(.chip-x)) { color: #B3261E; }
.chips:has(> span.chip) { gap: 2px 14px; }
.ev-line { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.ev-now { font-size: 13px; font-weight: 600; color: #11705A; white-space: nowrap; }

/* Guests sheet fills the screen like Excel: fixed height to the window bottom, sticky header and first columns */
.gp { gap: 10px; }
.gp-wrap { max-height: none; height: 60vh; overflow: auto; overscroll-behavior: contain; }
.gp-table { min-width: 1280px; }
.gp-table tr.gp-fill td { height: 41px; cursor: cell; background: rgba(255, 255, 255, .35); }
.gp-table tr.gp-fill:hover td { background: rgba(214, 236, 247, .35); }
.gp-table th.gp-n, .gp-table td.gp-n { position: sticky; left: 0; z-index: 2; background: #F6FAFC; }
.gp-table th.gp-n { z-index: 3; }
.gp-table td:has([data-k="full_name"]), .gp-table th:nth-child(2) { position: sticky; left: 52px; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--line); }
.gp-table th:nth-child(2) { z-index: 3; background: rgba(246, 250, 252, .99); }
.gp-table.all th:nth-child(2) { position: static; box-shadow: none; }
@media (max-width: 720px) {
  .gp-head { padding: 12px; gap: 10px; }
  .gp-ev, .gp-q { flex: 1 1 100%; }
  .gp-st { flex: 1; }
  .gp-actions { width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .gp-actions .btn { flex: none; }
  .gp-table { min-width: 1100px; font-size: 13px; }
  .gp-table td:has([data-k="full_name"]) { min-width: 140px; }
}
.gp-table.all td:has([data-k="full_name"]) { position: static; box-shadow: none; }
@media (min-width: 1100px) {
  .gp-head { flex-wrap: nowrap; align-items: flex-end; }
  .gp-ev { flex: 0 1 280px; }
  .gp-q { flex: 1 1 200px; min-width: 160px; }
  .gp-actions { flex-wrap: nowrap; }
}

/* ===== Guests sheet v2: full width, fixed columns, cleaner rows ===== */
main.content:has(.gp) { max-width: none; }
.gp-wrap { border-radius: 14px; }
.gp-table { table-layout: fixed; min-width: 0 !important; border-collapse: separate; }
.gp-table td, .gp-table th { min-width: 0 !important; }
.gp-table th { background: #EEF5F9; color: #34495A; font-size: 12.5px; font-weight: 700; letter-spacing: 0; padding: 11px 12px; border-bottom: 1px solid #D5E3EC; border-right: 1px solid rgba(213, 227, 236, .7); }
.gp-table td { border-color: #E6EDF2; background: #fff; }
.gp-table tbody tr:nth-child(even):not(.gp-fill) td { background: #FBFDFE; }
.gp-table tbody tr:not(.gp-fill):hover td { background: #F0F7FC; }
.gp-table td input, .gp-table td select { min-height: 44px; padding: 0 12px; color: #1E2B35; }
.gp-table td input::placeholder { color: #A0AAB2; }
.gp-table th.gp-n, .gp-table td.gp-n { position: sticky; left: 0; z-index: 2; background: #F4F8FB; color: #7A8994; text-align: center; }
.gp-table th.gp-n { z-index: 4; background: #EEF5F9; }
.gp-table th:nth-child(2), .gp-table td.gp-name, .gp-table tr.gp-fill td:nth-child(2) { position: sticky; left: 52px; z-index: 2; box-shadow: 1px 0 0 #D5E3EC, 6px 0 10px -8px rgba(30, 60, 80, .25); }
.gp-table th:nth-child(2) { z-index: 4; background: #EEF5F9; }
.gp-table.all th:nth-child(2), .gp-table.all td.gp-name { position: sticky; }
.gp-table td.gp-name { display: table-cell; }
.gp-name { position: relative; }
.gp-name .gp-av { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1D5F8A, #11705A); pointer-events: none; }
.gp-name .gp-av svg { width: 14px; height: 14px; }
.gp-name input { padding-left: 46px !important; font-weight: 600; }
.gp-stc { position: relative; }
.gp-stc .gp-dot { position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #A0AAB2; pointer-events: none; }
.gp-stc select { padding-left: 28px !important; }
.gp-dot.st-confirmed { background: #49A0D2; }
.gp-dot.st-attended { background: #1D5F8A; }
.gp-dot.st-met { background: #22A785; }
.gp-dot.st-no_show { background: #D9534F; }
.gp-table tr.gp-fill td { background: #fff; }
.gp-table tr.gp-fill td.gp-n, .gp-table tr.gp-fill td:nth-child(2) { background: #FAFCFD; }
.gp-table tr.new td { background: #EFF9F6 !important; }
.gp-table td.chg, .gp-table td.chg input { background: #FFF7E0 !important; }
.gp-evc a { line-height: 44px; }
.gp-x { text-align: center !important; }
/* Guests sheet: more breathing room */
@media (min-width: 900px) { main.content:has(.gp) { padding-left: 44px; padding-right: 44px; } }
.gp { gap: 14px; }
.gp-head { padding: 18px 22px; gap: 14px 16px; }
.gp-sum { padding: 2px 6px; font-size: 13.5px; }
.gp-table th { padding: 14px 16px; font-size: 13px; }
.gp-table td input, .gp-table td select { min-height: 50px; padding: 0 16px; font-size: 14.5px; }
.gp-table tr.gp-fill td { height: 50px; }
.gp-name .gp-av { left: 14px; width: 30px; height: 30px; }
.gp-name input { padding-left: 54px !important; }
.gp-stc .gp-dot { left: 16px; }
.gp-stc select { padding-left: 32px !important; }
.gp-evc a { line-height: 50px; padding: 0 16px; }
/* Guest photo frames: small previews to tap */
.frames-row { align-items: start; }
.frame-picks { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 6px; }
.frame-picks button { flex: none; width: 96px; display: grid; gap: 5px; justify-items: center; padding: 6px; border: 1px solid #D3DDE5; border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.frame-picks button canvas { width: 84px; height: 84px; object-fit: contain; background: #EEF3F7; border-radius: 6px; }
.frame-picks button[aria-checked="true"] { border-color: #1D5F8A; box-shadow: 0 0 0 2px rgba(29, 95, 138, .35); color: #1D5F8A; }
body.cine .frame-picks button { background: transparent; border-color: var(--cine-line); color: var(--cine-ink); }

/* ===== Live wall: polaroid collage around a centre panel ===== */
.wall.fx-collage { position: relative; height: 100%; overflow: hidden; }
.cl-panel { position: absolute; left: 50%; top: 50%; width: 52%; height: 64%; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 0; box-shadow: 0 2vmin 6vmin rgba(0, 0, 0, .25); }
.cl-red { background: #F11F2C; }
.cl-qc { background: linear-gradient(135deg, #1D5F8A, #2F7FB0); }
.cl-green { background: linear-gradient(135deg, #11705A, #22A785); }
.cl-gold { background: radial-gradient(120% 120% at 30% 20%, #F3D27A, #C9952F 60%, #8A5A12); }
.cl-navy { background: #1F2C5C; }
.cl-words { display: flex; flex-direction: column; color: #fff; font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 700; line-height: .98; letter-spacing: -.01em; font-size: calc(min(46vmin, 30vw) / (var(--lines, 4) + 1.2)); }
.cl-words sup { font-size: .22em; vertical-align: top; position: relative; top: .3em; margin-left: .05em; font-weight: 600; }
.wall.fx-collage .pol-card { background: #fff; }
.live-story .cl-panel { width: 78%; height: 40%; }
/* fireworks: in front of the photos (below the settings panel), or behind them */
.fw-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.fw-layer.behind { z-index: 1; }
.wc-btn { width: 100%; margin-top: 8px; min-height: 36px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(232, 199, 122, .18); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

/* ============================================================
   QC Projects: boards, backlog, sprints, issues
   Plain and dense, like a work tool: white panels, hairlines,
   brand blue for actions, colour only where it carries meaning.
   ============================================================ */
main.content:has(.pj) { max-width: none; padding: 0; }
.pj { --namew: 260px; display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100dvh - var(--top-h)); background: var(--surface); }
.pj-side { display: none; }
.pj-main { min-width: 0; padding: 12px 14px 40px; }
@media (min-width: 960px) {
  .pj { grid-template-columns: 236px minmax(0, 1fr); }
  .pj-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; background: #F7F9FB; border-right: 1px solid var(--line); position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); overflow: auto; }
  .pj-main { padding: 18px 28px 48px; }
}
.pj-brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 14px; }
.pj-brand b { display: block; font-size: 15px; line-height: 1.2; }
.pj-brand small { color: var(--slate); font-size: 12px; }
.pj-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.pj-logo svg { width: 18px; height: 18px; }
.pj-nav { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--ink); border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; width: 100%; }
.pj-nav:hover { background: #EAF1F6; }
.pj-nav.active { background: var(--blue-mist); color: var(--navy-ink); }
.pj-nav > svg { width: 18px; height: 18px; color: var(--slate); flex: none; }
.pj-nav > span:not(.pj-pbadge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-nav em { font-style: normal; font-size: 12px; color: var(--slate); background: #E3EAF0; border-radius: 10px; padding: 0 7px; }
.pj-nav .pj-lock { width: 14px; height: 14px; color: var(--grey); }
.pj-nav.add { color: var(--action); margin-top: 6px; }
.pj-nav.add svg { color: var(--action); }
.pj-side-label { font-size: 12px; font-weight: 700; color: var(--slate); padding: 14px 8px 4px; }

.pj-pbadge { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex: none; }
.pj-pbadge svg { width: 15px; height: 15px; }
.pj-pbadge.sm { width: 22px; height: 22px; border-radius: 5px; }
.pj-pbadge.sm svg { width: 13px; height: 13px; }
.pj-pbadge.lg { width: 36px; height: 36px; border-radius: 8px; }
.pj-pbadge.lg svg { width: 20px; height: 20px; }

.pj-head { margin-bottom: 12px; }
.pj-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate); margin-bottom: 4px; }
.pj-crumb a { color: var(--slate); }
.pj-crumb .chip { font-size: 12px; padding: 0 8px; }
.pj-crumb .chip svg { width: 13px; height: 13px; }
.pj-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pj-title h1 { font-size: 22px; margin: 0; line-height: 1.2; }
.pj-key { font-size: 13px; color: var(--slate); font-weight: 700; }
.pj-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-top: 10px; }
.pj-tabs::-webkit-scrollbar { display: none; }
.pj-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 10px; color: var(--slate); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.pj-tabs a svg { width: 16px; height: 16px; }
.pj-tabs a:hover { color: var(--ink); }
.pj-tabs a.active { color: var(--navy-ink); border-color: var(--action); }

/* shared bits */
.pj-type { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.pj-type svg { width: 14px; height: 14px; }
.pj-prio { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; vertical-align: middle; }
.pj-prio svg { width: 16px; height: 16px; }
.pj-av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; vertical-align: middle; letter-spacing: .02em; }
.pj-av.xs { width: 24px; height: 24px; font-size: 10px; }
.pj-av.sm { width: 30px; height: 30px; font-size: 12px; }
.pj-av.none { background: #E6ECF1; color: var(--slate); }
.pj-av.none svg { width: 14px; height: 14px; }
.pj-st { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; background: #E8EDF1; color: #44505A; text-transform: uppercase; }
.pj-st-prog { background: #DCEBF6; color: #1E5A80; }
.pj-st-done { background: #DDF1E8; color: #11705A; }
.pj-st-late { background: var(--danger-mist); color: var(--danger); }
.pj-strike { text-decoration: line-through; color: var(--slate); }
.pj-late, .pj-overdue { color: var(--danger) !important; }
.pj-sp { flex: 1; }
.pj-link { border: 0; background: none; padding: 0; color: var(--action); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pj-pad { padding: 12px 16px; }
.pj-note { background: #F4F7F9; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 14px; color: var(--slate); }
.pj-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pj-epic { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 3px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); text-transform: uppercase; letter-spacing: .02em; vertical-align: middle; }
.pj-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-labels.inline { display: inline-flex; }
.pj-labels span { font-size: 11px; padding: 0 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--slate); background: #fff; }
.pj-pts { min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E8EDF1; color: #44505A; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
.pj-pts.none { background: transparent; color: var(--grey); }
.pj-due { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--slate); white-space: nowrap; }
.pj-due svg { width: 13px; height: 13px; }
.pj-due.late { color: var(--danger); font-weight: 700; }
.pj-prog { display: flex; height: 6px; border-radius: 3px; background: #E3E9EE; overflow: hidden; margin: 4px 0; min-width: 40px; }
.pj-prog i { display: block; height: 100%; }
.pj-prog .d { background: var(--green-deep); }
.pj-prog .p { background: var(--blue); }
.pj-grid2 { display: grid; gap: 10px 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pj-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pj-form input, .pj-form select, .pj-form textarea { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.pj-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.pj-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--action); }
.rot-90 { transform: rotate(90deg); }
.rot-180 { transform: rotate(180deg); }
.rot-270 { transform: rotate(270deg); }
.pj-empty { border: 1px dashed var(--line); border-radius: 8px; margin-top: 8px; }
.pj-empty .btn { margin-top: 10px; }
.pj-hint { padding: 16px 4px; }

/* filters */
.pj-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.pj-search { position: relative; display: flex; align-items: center; }
.pj-search svg { position: absolute; left: 9px; width: 16px; height: 16px; color: var(--slate); pointer-events: none; }
.pj-search input { min-height: 34px; height: 34px; width: 200px; padding: 4px 10px 4px 32px; font-size: 14px; border-radius: 6px; }
.pj-avs { display: flex; padding-left: 4px; }
.pj-avbtn { border: 2px solid #fff; border-radius: 50%; padding: 0; margin-left: -6px; background: none; cursor: pointer; line-height: 0; }
.pj-avbtn.on { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); z-index: 1; }
.pj-qf { min-height: 32px; padding: 0 10px; border: 1px solid var(--line); background: #fff; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pj-qf:hover { background: #F4F7F9; }
.pj-qf.on { background: var(--blue-mist); border-color: #B6DAEE; color: var(--navy-ink); }
.pj-fsel, .pj-groupby select, .pj-blh select, .pj-bulk select, .pj .card-h select { min-height: 32px; height: 32px; width: auto; padding: 2px 28px 2px 8px; font-size: 13px; border-radius: 6px; }
.pj-groupby { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--slate); font-weight: 600; }

/* board */
.pj-sprintbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 0 10px; }
.pj-sprintbar > div { flex: 1 1 260px; min-width: 0; }
.pj-goal { display: block; color: var(--slate); font-size: 13px; }
.pj-board { overflow-x: auto; padding-bottom: 8px; }
.pj-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(250px, 1fr)); gap: 10px; min-width: calc(var(--cols) * 260px); }
.pj-colh { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #F1F4F7; border-radius: 6px 6px 0 0; font-size: 12px; font-weight: 700; color: #4A5560; text-transform: uppercase; letter-spacing: .02em; }
.pj-colh em { font-style: normal; color: var(--slate); font-weight: 600; }
.pj-colh.over { background: var(--danger-mist); color: var(--danger); }
.pj-colh .pj-done-ic { width: 14px; height: 14px; color: var(--green-deep); margin-left: auto; }
.pj-col { background: #F1F4F7; border-radius: 0 0 6px 6px; min-width: 0; }
.pj-lane + .pj-cols .pj-col { border-radius: 6px; }
.pj-cards { display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 80px; }
.pj-lane { display: flex; align-items: center; gap: 10px; padding: 14px 2px 6px; font-weight: 700; font-size: 14px; }
.pj-lane span { display: inline-flex; align-items: center; gap: 8px; }
.pj-lane em { font-style: normal; color: var(--slate); font-weight: 400; font-size: 13px; }
.pj-card { background: #fff; border-radius: 6px; padding: 9px 10px 8px; box-shadow: 0 1px 1px rgba(23, 43, 77, .14), 0 0 1px rgba(23, 43, 77, .2); cursor: pointer; display: flex; flex-direction: column; gap: 6px; touch-action: manipulation; }
.pj-card:hover { background: #F7FAFC; }
.pj-card:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.pj-card.done .pj-ct { color: var(--slate); }
.pj-ct { margin: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.pj-parent { font-size: 11px; color: var(--slate); }
.pj-cf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-ck { font-size: 12px; font-weight: 600; color: var(--slate); }
.pj-subc { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--slate); }
.pj-subc svg { width: 13px; height: 13px; }
.pj-addcard, .pj-addrow { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--slate); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.pj-addcard:hover, .pj-addrow:hover { background: #E3E9EE; color: var(--ink); }
.pj-addcard svg, .pj-addrow svg { width: 16px; height: 16px; }
.pj-quickform { background: #fff; border-radius: 6px; padding: 8px; box-shadow: 0 0 0 2px var(--action); display: flex; flex-direction: column; gap: 6px; }
.pj-quickform textarea { min-height: 56px; border: 0; padding: 2px; font-size: 14px; resize: none; }
.pj-quickform textarea:focus { box-shadow: none; }
.pj-quickform select { min-height: 30px; height: 30px; width: auto; font-size: 13px; padding: 2px 24px 2px 6px; }

/* drag and drop */
.pj-ghost { position: fixed; z-index: 300; pointer-events: none; box-shadow: 0 12px 28px rgba(23, 43, 77, .28) !important; opacity: .96; margin: 0; }
.pj-ph { border-radius: 6px; background: #DCE6EE; border: 1px dashed #A9BCCB; flex: none; }
body.pj-dragging, body.pj-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* backlog */
.pj-blwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .pj-blwrap.with-epics { grid-template-columns: 230px minmax(0, 1fr); } }
.pj-epics { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 4px; align-self: start; }
.pj-epicf { position: relative; display: block; text-align: left; width: 100%; border: 1px solid transparent; background: none; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; cursor: pointer; }
.pj-epicf:hover { background: #F4F7F9; }
.pj-epicf.on { background: var(--blue-mist); border-color: #B6DAEE; }
.pj-epn { display: flex; align-items: center; gap: 6px; font-weight: 700; padding-right: 48px; }
.pj-epn i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.pj-epicf small { color: var(--slate); font-size: 12px; }
.pj-epo { position: absolute; right: 8px; top: 6px; font-size: 12px; color: var(--action); font-weight: 600; opacity: 0; }
.pj-epicf:hover .pj-epo, .pj-epicf:focus-visible .pj-epo { opacity: 1; }
.pj-blmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pj-bl { background: #F4F6F8; border-radius: 8px; padding: 6px 8px 8px; }
.pj-bl.active { background: #EEF5FA; }
.pj-blh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 2px 6px; }
.pj-blt { flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pj-blt small { color: var(--slate); font-size: 13px; }
.pj-blt .pj-goal { flex-basis: 100%; }
.pj-tog { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; border-radius: 4px; cursor: pointer; color: var(--slate); padding: 0; flex: none; }
.pj-tog:hover { background: #E3E9EE; }
.pj-tog:disabled { opacity: .3; cursor: default; }
.pj-tog svg { width: 16px; height: 16px; transition: transform 150ms var(--ease-out); }
.pj-ptsum { display: inline-flex; gap: 3px; }
.pj-ptsum i { font-style: normal; font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; padding: 0 5px; border-radius: 9px; }
.pj-ptsum .t { background: #E1E6EB; color: #44505A; }
.pj-ptsum .p { background: #D3E5F3; color: #1E5A80; }
.pj-ptsum .d { background: #D4EEE3; color: #11705A; }
.pj-rows { display: flex; flex-direction: column; gap: 1px; min-height: 8px; }
.pj-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border-radius: 4px; cursor: pointer; min-height: 38px; box-shadow: 0 0 0 1px #E1E7EC; touch-action: manipulation; }
.pj-row:hover { background: #F7FAFC; }
.pj-row:focus-visible { outline: 2px solid var(--action); }
.pj-rk { font-size: 13px; color: var(--slate); font-weight: 600; white-space: nowrap; }
.pj-rt { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-row .pj-epic { max-width: 160px; }
@media (max-width: 640px) { .pj-row .pj-epic, .pj-row .pj-st, .pj-row .pj-due { display: none; } }
.pj-drop { padding: 14px; border: 1px dashed #B9C7D2; border-radius: 6px; text-align: center; color: var(--slate); font-size: 13px; }
.pj-inlinecreate { display: flex; gap: 6px; margin-top: 6px; }
.pj-inlinecreate select { width: auto; min-height: 36px; height: 36px; font-size: 13px; padding: 2px 24px 2px 8px; }
.pj-inlinecreate input { min-height: 36px; height: 36px; font-size: 14px; }

/* list */
.pj-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.pj-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pj-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--slate); padding: 8px 10px; border-bottom: 1px solid var(--line); background: #F7F9FB; white-space: nowrap; cursor: pointer; }
.pj-table th.sorted { color: var(--navy-ink); }
.pj-table td { padding: 7px 10px; border-bottom: 1px solid #EDF1F4; vertical-align: middle; }
.pj-table tr:last-child td { border-bottom: 0; }
.pj-table tbody tr:hover td { background: #F7FAFC; }
.pj-table tr.sel td { background: #EEF5FA; }
.pj-table a { color: var(--ink); }
.pj-table a:hover { color: var(--action); text-decoration: underline; }
.pj-table .pj-tt { min-width: 260px; }
.pj-table .pj-cb { width: 34px; cursor: default; }
.pj-table input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--action); }
.nowrap { white-space: nowrap; }
.pj-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; background: var(--blue-mist); border-radius: 6px; font-size: 14px; }

/* your work */
.pj-hello { font-size: 15px; margin: 0 0 14px; color: var(--ink); }
.pj-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pj-pcard { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; transition: box-shadow 120ms; }
.pj-pcard:hover { box-shadow: 0 2px 8px rgba(23, 43, 77, .1); }
.pj-pc-top { display: flex; gap: 10px; align-items: center; }
.pj-pc-top b { display: block; font-size: 15px; line-height: 1.2; }
.pj-pc-top small { color: var(--slate); font-size: 12px; }
.pj-pc-n { display: flex; gap: 14px; font-size: 13px; color: var(--slate); }
.pj-pc-n b { color: var(--ink); font-size: 15px; }
.pj-pc-s { display: flex; align-items: center; gap: 4px; color: var(--slate); font-size: 12px; }
.pj-pc-s svg { width: 13px; height: 13px; }
.pj-home { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .pj-home { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pj-home .card { border-radius: 8px; overflow: hidden; }
.pj-home .card-h { padding: 10px 14px; }
.pj-home .card-h h3 { font-size: 15px; margin: 0; }
.pj-wgroup { font-size: 12px; font-weight: 700; color: var(--slate); padding: 10px 14px 4px; text-transform: uppercase; letter-spacing: .03em; }
.pj-wgroup.late { color: var(--danger); }
.pj-wrow { display: flex; align-items: center; gap: 10px; padding: 7px 14px; color: var(--ink); border-top: 1px solid #F0F3F5; }
.pj-wrow:hover { background: #F7FAFC; }
.pj-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-wt b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-wt small { color: var(--slate); font-size: 12px; }
.pj-feed { padding: 6px 14px 12px; max-height: 480px; overflow: auto; }
.pj-hist { display: flex; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.4; border-bottom: 1px solid #F0F3F5; }
.pj-hist:last-child { border-bottom: 0; }
.pj-hist > div { min-width: 0; overflow-wrap: anywhere; }
.pj-hist small { display: block; color: var(--slate); font-size: 12px; }
.pj-hist s { color: var(--slate); }

/* reports */
.pj-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pj-stats div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.pj-stats b { display: block; font-size: 24px; line-height: 1.2; }
.pj-stats span { color: var(--slate); font-size: 13px; }
.pj-reports { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .pj-reports { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pj-rep.wide { grid-column: 1 / -1; } }
.pj-rep { border-radius: 8px; }
.pj-rep .card-h { padding: 10px 14px; }
.pj-rep .card-h h3 { font-size: 15px; margin: 0; }
.pj-rep .card-b { padding: 12px 14px; }
.pj-chart { width: 100%; height: auto; display: block; font-family: var(--font); }
.pj-chart text { font-size: 11px; fill: var(--slate); }
.pj-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); margin-left: 8px; }
.pj-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 6px; }
.pj-legend i.dash { width: 14px; height: 0; border-top: 2px dashed var(--grey); border-radius: 0; }
.pj-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.pj-stack i { display: block; background: #C9D3DB; }
.pj-stack i.pj-st-prog { background: var(--blue); }
.pj-stack i.pj-st-done { background: var(--green-deep); }
.pj-mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.pj-mtable td { padding: 6px 4px; border-bottom: 1px solid #F0F3F5; }
.pj-mtable tr:last-child td { border-bottom: 0; }
.pj-mtable select { min-height: 32px; height: 32px; font-size: 13px; padding: 2px 24px 2px 8px; width: auto; }
.pj-hbar { height: 8px; background: #E8EDF1; border-radius: 4px; overflow: hidden; }
.pj-hbar i { display: block; height: 100%; background: var(--blue-deep); border-radius: 4px; }

/* timeline */
.pj-tl { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.pj-tl-inner { position: relative; width: calc(var(--namew) + var(--w)); }
.pj-tl-row { display: flex; min-height: 40px; border-bottom: 1px solid #EDF1F4; }
.pj-tl-row.head { background: #F7F9FB; min-height: 34px; font-size: 12px; font-weight: 700; color: var(--slate); }
.pj-tl-name { position: sticky; left: 0; z-index: 2; width: var(--namew); flex: none; background: #fff; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 14px; min-width: 0; }
.pj-tl-row.head .pj-tl-name { background: #F7F9FB; }
.pj-tl-name a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.pj-tl-name .pj-prog { width: 46px; flex: none; }
.pj-tl-name.sub { padding-left: 40px; font-size: 13px; }
.pj-tl-lane { position: relative; flex: none; width: var(--w); }
.pj-tl-m { position: absolute; top: 0; bottom: 0; padding: 9px 0 0 6px; border-left: 1px solid var(--line); white-space: nowrap; }
.pj-tl-bar { position: absolute; top: 9px; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--c) 22%, #fff); border: 1px solid color-mix(in srgb, var(--c) 55%, #fff); cursor: pointer; overflow: hidden; display: flex; align-items: center; }
.pj-tl-bar em { font-style: normal; font-size: 12px; font-weight: 600; padding: 0 6px; white-space: nowrap; color: #2B3640; }
.pj-tl-bar.done { background: color-mix(in srgb, var(--c) 45%, #fff); }
.pj-tl-none { position: absolute; top: 11px; left: 8px; font-size: 12px; color: var(--grey); }
.pj-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #D9622B; z-index: 1; pointer-events: none; }

/* settings */
.pj-settings { display: grid; gap: 14px; max-width: 900px; }
.pj-settings .card { border-radius: 8px; }
.pj-settings .card-h { flex-wrap: wrap; padding: 10px 14px; }
.pj-settings .card-h h3 { font-size: 15px; margin: 0; }
.pj-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-iconpick { position: relative; }
.pj-iconpick input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.pj-iconpick span { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--slate); cursor: pointer; }
.pj-iconpick span svg { width: 18px; height: 18px; }
.pj-iconpick input:checked + span { background: var(--c); color: #fff; border-color: var(--c); }
.pj-iconpick input:focus-visible + span { outline: 2px solid var(--action); }
.pj-addm { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pj-addm select { width: auto; min-height: 36px; height: 36px; font-size: 14px; padding: 2px 28px 2px 8px; }
.pj-flow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pj-flowrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-flown { width: 22px; text-align: center; color: var(--slate); font-size: 13px; font-weight: 700; }
.pj-flowrow input, .pj-flowrow select { min-height: 36px; height: 36px; font-size: 14px; padding: 4px 8px; }
.pj-flowrow input[data-k=name] { flex: 1 1 160px; width: auto; }
.pj-flowrow select { width: 140px; }
.pj-flowrow input[data-k=wip] { width: 100px; }

/* issue panel */
.pj-drawer-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(23, 43, 77, 0); transition: background-color 200ms; display: flex; justify-content: flex-end; }
.pj-drawer-wrap.open { background: rgba(23, 43, 77, .32); }
.pj-drawer { width: min(980px, 100vw); height: 100%; background: #fff; overflow: auto; overscroll-behavior: contain; transform: translateX(24px); opacity: 0; transition: transform 220ms var(--ease-out), opacity 160ms; box-shadow: -8px 0 24px rgba(23, 43, 77, .18); padding-bottom: var(--safe-b); }
.pj-drawer-wrap.open .pj-drawer { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pj-drawer, .pj-drawer-wrap { transition: none; } }
.pj-issuepage { border-radius: 8px; overflow: hidden; }
.pj-ih { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; }
.pj-drawer .pj-ih { padding-top: max(10px, var(--safe-t)); }
.pj-ih-key { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--slate); min-width: 0; }
.pj-ih-key a { color: var(--slate); font-weight: 600; }
.pj-ih-key a:hover { color: var(--action); }
.pj-ih-act { display: flex; gap: 2px; }
.pj-ih-act .icon-btn { width: 36px; height: 36px; border-radius: 6px; position: relative; }
.pj-ih-act .icon-btn svg { width: 19px; height: 19px; }
.pj-ih-act .icon-btn:hover { background: #F1F4F7; }
.pj-ih-act .icon-btn em { position: absolute; right: 1px; bottom: 1px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--slate); }
.pj-ih-act .icon-btn[aria-pressed=true] { color: var(--action); }
.pj-ib { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .pj-ib { grid-template-columns: minmax(0, 1fr) 300px; } }
.pj-imain { padding: 16px 20px 28px; min-width: 0; }
.pj-iside { padding: 16px 20px; border-top: 1px solid var(--line); }
@media (min-width: 820px) { .pj-iside { border-top: 0; border-left: 1px solid var(--line); } }
.pj-ititle { font-size: 22px; line-height: 1.3; margin: 0 0 12px -6px; padding: 4px 6px; border-radius: 4px; overflow-wrap: anywhere; outline: none; }
.pj-ititle[contenteditable=true]:hover { background: #F4F7F9; }
.pj-ititle[contenteditable=true]:focus { background: #fff; box-shadow: 0 0 0 2px var(--action); }
.pj-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pj-quick .btn.sm { min-height: 32px; font-size: 13px; }
.pj-quick .btn.sm svg { width: 16px; height: 16px; }
.pj-stsel { width: auto; min-height: 32px; height: 32px; padding: 2px 30px 2px 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; border-radius: 4px; border: 0; background-color: #E8EDF1; color: #44505A; cursor: pointer; }
.pj-stsel.pj-st-prog { background-color: #1E5A80; color: #fff; }
.pj-stsel.pj-st-done { background-color: #11705A; color: #fff; }
.pj-sec { margin-bottom: 20px; }
.pj-sec h4 { font-size: 14px; margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.pj-sec h4 small { color: var(--slate); font-weight: 400; font-size: 13px; }
.pj-desc { font-size: 15px; line-height: 1.55; padding: 6px 8px; margin-left: -8px; border-radius: 4px; overflow-wrap: anywhere; }
.pj-imain .pj-desc:hover { background: #F4F7F9; cursor: text; }
.pj-desc.is-empty { color: var(--grey); }
.pj-desc p, .pj-cbody p { margin: 0 0 8px; }
.pj-desc ul, .pj-desc ol, .pj-cbody ul, .pj-cbody ol { margin: 0 0 8px; padding-left: 22px; }
.pj-desc h4 { margin: 10px 0 6px; font-size: 15px; }
.pj-desc code, .pj-cbody code { background: #F1F4F7; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
.pj-descedit textarea { font-size: 15px; min-height: 140px; }
.pj-cbody textarea { font-size: 14px; min-height: 70px; }
.pj-descedit .btn-row, .pj-cbody .btn-row { margin-top: 6px; }
.pj-mini { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pj-mini:empty { display: none; }
.pj-minirow { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #EDF1F4; font-size: 14px; flex: 1; min-width: 0; }
.pj-minirow:last-child { border-bottom: 0; }
.pj-minirow a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pj-minirow a b { font-weight: 600; color: var(--slate); }
.pj-minirow input[type=checkbox] { width: 16px; height: 16px; min-height: 0; accent-color: var(--green-deep); }
.pj-linkrow { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #EDF1F4; padding-left: 10px; }
.pj-linkrow:last-child { border-bottom: 0; }
.pj-linkrow > small { width: 92px; flex: none; color: var(--slate); font-size: 12px; }
.pj-linkrow .pj-minirow { border-bottom: 0; }
.pj-inline input { min-height: 36px; height: 36px; font-size: 14px; margin-top: 6px; }
.pj-cform { display: flex; gap: 10px; margin: 12px 0; }
.pj-cform > div { flex: 1; min-width: 0; }
.pj-cform textarea { min-height: 44px; font-size: 14px; }
.pj-cform .btn-row { margin-top: 6px; }
.pj-comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #F0F3F5; }
.pj-comment > div { flex: 1; min-width: 0; }
.pj-cmeta { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.pj-cmeta span { color: var(--slate); font-size: 12px; }
.pj-cbody { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; margin-top: 2px; }
.pj-cact { display: flex; gap: 10px; }
.pj-cact button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--slate); font-weight: 600; cursor: pointer; }
.pj-cact button:hover { color: var(--action); }
.pj-wform { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pj-wform input { min-height: 36px; height: 36px; font-size: 14px; padding: 4px 8px; }
.pj-wform input[name=hours] { width: 90px; }
.pj-wform input[name=day] { width: 150px; }
.pj-wform input[name=note] { flex: 1 1 180px; width: auto; }
.pj-sec [data-tabs] { margin: 4px 0; }
.pj-fields { display: flex; flex-direction: column; gap: 2px; }
.pj-field { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 38px; font-size: 14px; }
.pj-field > span { color: var(--slate); font-size: 13px; font-weight: 600; }
.pj-field > div { min-width: 0; }
.pj-field input, .pj-field select { min-height: 32px; height: 32px; padding: 3px 6px; font-size: 14px; border-color: transparent; background-color: transparent; border-radius: 4px; }
.pj-field input:hover:not(:disabled), .pj-field select:hover:not(:disabled) { border-color: var(--line); background-color: #F7F9FB; }
.pj-field input:focus, .pj-field select:focus { border-color: var(--action); background-color: #fff; }
.pj-field input[type=color] { width: 48px; padding: 2px; }
.pj-field input:disabled, .pj-field select:disabled { color: var(--ink); opacity: 1; -webkit-text-fill-color: var(--ink); appearance: none; }
.pj-person { display: flex; align-items: center; gap: 4px; }
.pj-person select { flex: 1; min-width: 0; }
.pj-field .pj-link { font-size: 12px; margin-left: 30px; }
.pj-time small { color: var(--slate); font-size: 12px; }
.pj-bar { height: 6px; border-radius: 3px; background: #E3E9EE; overflow: hidden; margin: 4px 0 2px; }
.pj-bar i { display: block; height: 100%; background: var(--blue-deep); }
.pj-dates { color: var(--slate); font-size: 12px; margin: 14px 0 0; }
.chip.sm { font-size: 12px; padding: 0 8px; }

/* ============================================================
   QC Projects: green glass theme
   Deep Quick Clean green, frosted glass panels over a soft mint backdrop,
   gentle spring motion. Everything is scoped to body.on-pj.
   ============================================================ */
body.on-pj {
  --pj-g9: #0E4A3B; --pj-g8: #12604C; --pj-g7: #146F58; --pj-g6: #168468; --pj-g5: #22A785; --pj-g4: #5CC4A8;
  --pj-g1: #D8F1EA; --pj-g0: #EFF9F6;
  --pj-ink: #0F1F1A; --pj-sub: #55665F; --pj-faint: #8A9A94; --pj-hair: rgba(15, 80, 60, .12);
  --pj-violet: #6E56CF; --pj-violet-0: #EFEBFD; --pj-amber: #B7791F; --pj-red: #D1453B; --pj-red-0: #FDECEA; --pj-teal: #0E8C7A;
  --pj-glass: rgba(255, 255, 255, .68);
  --pj-glass-2: rgba(255, 255, 255, .5);
  --pj-edge: rgba(255, 255, 255, .8);
  --pj-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 12px 32px -16px rgba(8, 54, 42, .32), 0 2px 6px -2px rgba(8, 54, 42, .08);
  --pj-shadow-up: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 44px -18px rgba(8, 54, 42, .38), 0 4px 10px -4px rgba(8, 54, 42, .12);
  --pj-spring: cubic-bezier(.22, 1.25, .36, 1);
  --pj-ease: cubic-bezier(.2, .8, .2, 1);
  --pj-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Calibri, Carlito, system-ui, sans-serif;
  font-family: var(--pj-font);
  color: var(--pj-ink);
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(63, 193, 154, .32), transparent 60%),
    radial-gradient(900px 600px at 105% 10%, rgba(14, 140, 122, .22), transparent 62%),
    radial-gradient(800px 700px at 50% 115%, rgba(183, 121, 31, .1), transparent 60%),
    linear-gradient(180deg, #EEF8F3 0%, #F5FAF7 45%, #EFF6F3 100%) fixed;
}
body.on-pj::before { display: none; }
body.on-pj .topbar { background: rgba(244, 251, 248, .72); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border-bottom: 1px solid var(--pj-hair); box-shadow: none; }
body.on-pj .topbar .title { font-weight: 700; letter-spacing: -.01em; color: var(--pj-ink); }
body.on-pj .topbar .icon-btn { color: var(--pj-g7); }
body.on-pj main.content:has(.pj) { background: transparent; }

/* frame */
body.on-pj .pj { background: transparent; }
body.on-pj .pj-main { padding-bottom: calc(96px + var(--safe-b)); }
@media (min-width: 960px) { body.on-pj .pj-main { padding-bottom: 56px; } }
body.on-pj .pj-side { background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border-right: 1px solid var(--pj-hair); gap: 3px; padding: 18px 12px; }
body.on-pj .pj-logo { background: linear-gradient(150deg, var(--pj-g5), var(--pj-g8)); box-shadow: 0 6px 16px -6px rgba(15, 107, 82, .6), 0 1px 0 rgba(255, 255, 255, .4) inset; border-radius: 10px; }
body.on-pj .pj-logo svg { width: 20px; height: 20px; }
body.on-pj .pj-brand b { font-size: 16px; letter-spacing: -.01em; }
body.on-pj .pj-brand small { color: var(--pj-sub); }
body.on-pj .pj-nav { border-radius: 10px; padding: 9px 10px; font-weight: 600; color: var(--pj-ink); transition: background-color .2s var(--pj-ease), transform .3s var(--pj-spring); }
body.on-pj .pj-nav:hover { background: rgba(255, 255, 255, .7); }
body.on-pj .pj-nav:active { transform: scale(.98); }
body.on-pj .pj-nav.active { background: #fff; color: var(--pj-g7); box-shadow: 0 1px 0 #fff inset, 0 6px 16px -10px rgba(8, 54, 42, .4); }
body.on-pj .pj-nav.active .pj-i { color: var(--pj-g6); }
body.on-pj .pj-nav.add, body.on-pj .pj-nav.add .pj-i { color: var(--pj-g6); }
body.on-pj .pj-side-label { color: var(--pj-faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 16px; }
.pj-i { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--pj-sub); vertical-align: middle; }
.pj-i svg { width: 100%; height: 100%; }
.pj-nav .pj-i { width: 19px; height: 19px; }
.pj-nav .pj-lock { width: 14px; height: 14px; color: var(--pj-faint); margin-left: auto; }
.pj-side .pj-sp { flex: 1; min-height: 12px; }

body.on-pj .pj-head { margin-bottom: 16px; }
body.on-pj .pj-title { gap: 14px; }
body.on-pj .pj-title h1 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
body.on-pj .pj-title p { margin: 2px 0 0; color: var(--pj-sub); font-size: 15px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
body.on-pj .pj-title p .pj-i { width: 15px; height: 15px; }
body.on-pj .pj-tabs { border-bottom: 0; gap: 4px; margin-top: 14px; padding: 4px; background: rgba(255, 255, 255, .5); border: 1px solid var(--pj-edge); border-radius: 14px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); width: fit-content; max-width: 100%; }
body.on-pj .pj-tabs a { border: 0; margin: 0; border-radius: 10px; padding: 8px 12px; color: var(--pj-sub); transition: background-color .2s, color .2s; }
body.on-pj .pj-tabs a .pj-i { width: 17px; height: 17px; }
body.on-pj .pj-tabs a.active { background: #fff; color: var(--pj-g7); box-shadow: 0 4px 12px -6px rgba(8, 54, 42, .35); }
body.on-pj .pj-tabs a.active .pj-i { color: var(--pj-g6); }

.pj-pbadge { background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--c) 70%, transparent), 0 1px 0 rgba(255, 255, 255, .35) inset; border-radius: 8px; }
.pj-pbadge svg { stroke: #fff; }
.pj-pbadge.lg { width: 48px; height: 48px; border-radius: 14px; }
.pj-pbadge.lg svg { width: 24px; height: 24px; }

/* entrance: one soft rise when a screen opens */
@keyframes pjRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pj-enter .pj-body > * { animation: pjRise .5s var(--pj-ease) both; }
.pj-enter .pj-body > *:nth-child(2) { animation-delay: .04s; }
.pj-enter .pj-body > *:nth-child(3) { animation-delay: .08s; }
.pj-enter .pj-body > *:nth-child(4) { animation-delay: .12s; }

/* glass surfaces */
.pj-panel, body.on-pj .pj-tile, body.on-pj .pj-card, body.on-pj .pj-bl, body.on-pj .pj-epics, body.on-pj .pj-tablewrap, body.on-pj .pj-tl, body.on-pj .pj-settings .card, body.on-pj .pj-rep, body.on-pj .pj-stats div, body.on-pj .pj-sprintbar.pj-panel, body.on-pj .pj-empty {
  background: var(--pj-glass);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--pj-edge);
  box-shadow: var(--pj-shadow);
}
.pj-panel { border-radius: 20px; padding: 18px 20px; margin-bottom: 16px; }
.pj-panel.flat { padding: 6px; border-radius: 16px; }
.pj-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pj-panel-h h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.pj-panel-h h3 .pj-i { color: var(--pj-g6); }
.pj-panel-sub { color: var(--pj-sub); font-size: 14px; margin: -2px 0 10px; }
.pj-muted { color: var(--pj-sub); font-size: 13px; }
.pj-two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .pj-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pj-two > .pj-panel { margin-bottom: 0; }
.pj-two { margin-bottom: 16px; }

/* buttons, inputs */
body.on-pj:not(.cine) .btn { border-radius: 12px; min-height: 42px; font-weight: 600; letter-spacing: -.005em; color: var(--pj-ink); background: rgba(255, 255, 255, .78); border: 1px solid rgba(15, 80, 60, .14); box-shadow: 0 1px 0 #fff inset, 0 4px 12px -8px rgba(8, 54, 42, .35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-shadow: none; transition: transform .35s var(--pj-spring), box-shadow .25s var(--pj-ease), background-color .2s; }
body.on-pj:not(.cine) .btn::after { display: none; }
body.on-pj:not(.cine) .btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 1px 0 #fff inset, 0 10px 22px -12px rgba(8, 54, 42, .45); }
body.on-pj:not(.cine) .btn:active { transform: scale(.97); }
body.on-pj:not(.cine) .btn svg, body.on-pj .btn .pj-i { width: 18px; height: 18px; color: currentColor; }
body.on-pj:not(.cine) .btn.sm { min-height: 34px; border-radius: 10px; font-size: 14px; padding: 0 12px; }
body.on-pj:not(.cine) .btn.primary { color: #fff; background: linear-gradient(180deg, #22A785 0%, #168468 100%); border-color: rgba(8, 54, 42, .25); box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 10px 24px -10px rgba(15, 122, 90, .75); }
body.on-pj:not(.cine) .btn.primary:hover { background: linear-gradient(180deg, #2AB592 0%, #178A6D 100%); }
body.on-pj:not(.cine) .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--pj-g7); }
body.on-pj:not(.cine) .btn.danger { color: var(--pj-red); }
body.on-pj:not(.cine) .btn.danger.solid { color: #fff; background: var(--pj-red); border-color: var(--pj-red); }
body.on-pj .pj-link { color: var(--pj-g6); display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
body.on-pj .pj-link .pj-i { width: 17px; height: 17px; color: currentColor; }
body.on-pj .pj-link.sm { font-size: 13px; }
body.on-pj .pj-link.danger { color: var(--pj-red); }
body.on-pj:not(.cine) input, body.on-pj:not(.cine) select, body.on-pj:not(.cine) textarea { border-radius: 12px; background-color: rgba(255, 255, 255, .85); border: 1px solid rgba(15, 80, 60, .16); color: var(--pj-ink); font-family: var(--pj-font); }
body.on-pj:not(.cine) input:focus, body.on-pj:not(.cine) select:focus, body.on-pj:not(.cine) textarea:focus { background-color: #fff; border-color: var(--pj-g5); box-shadow: 0 0 0 4px rgba(24, 160, 122, .16); }
body.on-pj .pj-check input, body.on-pj input[type=checkbox], body.on-pj input[type=radio] { accent-color: var(--pj-g6); }
body.on-pj .sheet { border-radius: 24px 24px 0 0; background: rgba(250, 253, 251, .92); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border: 1px solid var(--pj-edge); }
@media (min-width: 720px) { body.on-pj .sheet { border-radius: 24px; } }
body.on-pj .overlay { background: rgba(8, 40, 31, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.on-pj .sheet-h h3 { font-size: 21px; letter-spacing: -.02em; }
body.on-pj label.f { color: var(--pj-ink); font-weight: 600; font-size: 15px; }
body.on-pj label.f small { color: var(--pj-faint); font-weight: 400; }

/* tiles */
.pj-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 900px) { .pj-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
body.on-pj .pj-tile { border-radius: 20px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 2px; color: var(--pj-ink); position: relative; overflow: hidden; transition: transform .45s var(--pj-spring), box-shadow .3s var(--pj-ease); }
body.on-pj a.pj-tile:hover { transform: translateY(-3px); box-shadow: var(--pj-shadow-up); }
body.on-pj a.pj-tile:active { transform: scale(.98); }
.pj-tile b { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.pj-tile > span:last-child { color: var(--pj-sub); font-size: 14px; font-weight: 500; }
.pj-tile-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
.pj-tile-ic .pj-i { width: 20px; height: 20px; color: #fff; }
.pj-tile.g .pj-tile-ic { background: linear-gradient(150deg, #22B98D, #168468); }
.pj-tile.t .pj-tile-ic { background: linear-gradient(150deg, #17A6B0, #0E6E79); }
.pj-tile.v .pj-tile-ic { background: linear-gradient(150deg, #8B74E8, #5B43C2); }
.pj-tile.r .pj-tile-ic { background: linear-gradient(150deg, #EE6A5C, #C0392B); }
.pj-tile.n .pj-tile-ic { background: linear-gradient(150deg, #B9C6C1, #8A9A94); }
.pj-tile.r b { color: var(--pj-red); }
.pj-tile::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 70%); pointer-events: none; }

/* task rows */
.pj-rows2 { display: flex; flex-direction: column; gap: 2px; }
.pj-trow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: var(--pj-ink); transition: background-color .2s var(--pj-ease), transform .35s var(--pj-spring); }
.pj-trow:hover { background: rgba(255, 255, 255, .85); }
.pj-trow:active { transform: scale(.99); }
.pj-trow .pj-type { width: 26px; height: 26px; border-radius: 8px; }
.pj-trow .pj-type svg { width: 17px; height: 17px; }
.pj-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pj-tt b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-trow.done .pj-tt b { color: var(--pj-sub); text-decoration: line-through; text-decoration-color: rgba(85, 102, 95, .5); }
.pj-tt small { color: var(--pj-sub); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-steps { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pj-steps .pj-prog { width: 90px; flex: none; margin: 0; }
.pj-steps em { font-style: normal; font-size: 12px; color: var(--pj-sub); }
.pj-tmeta { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 640px) {
  .pj-trow { flex-wrap: wrap; row-gap: 6px; padding: 12px 10px; }
  .pj-tmeta { width: 100%; padding-left: 38px; flex-wrap: wrap; }
  .pj-tmeta .pj-whoav { margin-left: auto; }
}
.pj-group { font-size: 13px; font-weight: 700; color: var(--pj-sub); margin: 14px 4px 8px; display: flex; align-items: center; gap: 6px; }
.pj-group.r { color: var(--pj-red); }
.pj-group .pj-i { width: 16px; height: 16px; color: currentColor; }

/* shared chips */
.pj-type { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(150deg, color-mix(in srgb, var(--t) 80%, #fff), var(--t)); box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--t) 70%, transparent); }
.pj-type svg { width: 14px; height: 14px; }
.pj-av { background: linear-gradient(150deg, color-mix(in srgb, var(--a, #168468) 75%, #fff), var(--a, #168468)); box-shadow: 0 0 0 2px #fff; letter-spacing: 0; }
.pj-av.none { background: #E6EFEB; box-shadow: 0 0 0 2px #fff; color: var(--pj-sub); }
.pj-av.none svg { width: 15px; height: 15px; }
body.on-pj .pj-st { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; background: #E8EFEC; color: #44544E; }
body.on-pj .pj-st-prog { background: #DCF2F4; color: #0E6E79; }
body.on-pj .pj-st-done { background: var(--pj-g1); color: var(--pj-g7); }
body.on-pj .pj-st-wait { background: var(--pj-violet-0); color: var(--pj-violet); }
body.on-pj .pj-st-late { background: var(--pj-red-0); color: var(--pj-red); }
body.on-pj .pj-due { font-size: 13px; color: var(--pj-sub); gap: 4px; }
body.on-pj .pj-due .pj-i { width: 14px; height: 14px; color: currentColor; }
body.on-pj .pj-due.late { color: var(--pj-red); }
body.on-pj .pj-prog { height: 7px; border-radius: 99px; background: rgba(15, 80, 60, .1); }
body.on-pj .pj-prog.big { height: 10px; }
body.on-pj .pj-prog i { border-radius: 99px; transition: width .8s var(--pj-ease); }
body.on-pj .pj-prog .d { background: linear-gradient(90deg, #5CC4A8, #168468); }
body.on-pj .pj-prog .p { background: linear-gradient(90deg, #6CD3DC, #17A6B0); }
.pj-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid var(--pj-hair); font-size: 13px; margin: 0 6px 6px 0; }
.pj-chip button { border: 0; background: none; cursor: pointer; color: var(--pj-faint); font-size: 16px; line-height: 1; padding: 0; }

/* departments */
.pj-depts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pj-dept { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .62); border: 1px solid var(--pj-edge); color: var(--pj-ink); transition: transform .45s var(--pj-spring), box-shadow .3s; }
a.pj-dept:hover { transform: translateY(-3px); box-shadow: var(--pj-shadow-up); }
.pj-dept-top { display: flex; align-items: center; gap: 12px; }
.pj-dept-top b { display: block; font-size: 16px; letter-spacing: -.01em; }
.pj-dept-top small { color: var(--pj-sub); font-size: 13px; }
.pj-dept-top em { margin-left: auto; font-style: normal; font-size: 20px; font-weight: 700; color: var(--pj-g7); font-variant-numeric: tabular-nums; }
.pj-dept-n { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--pj-sub); }
.pj-dept-n b { color: var(--pj-ink); }
.pj-dept-n .r b, .pj-dept-n .r { color: var(--pj-red); }
.pj-dept-n .v b, .pj-dept-n .v { color: var(--pj-violet); }
.pj-dept-n .g b { color: var(--pj-g6); }
.pj-deptlist { display: flex; flex-direction: column; gap: 4px; }
.pj-deptrow { display: grid; grid-template-columns: auto 160px minmax(80px, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--pj-ink); }
.pj-deptrow:hover { background: rgba(255, 255, 255, .8); }
.pj-deptrow span { color: var(--pj-sub); font-size: 13px; white-space: nowrap; }
.pj-deptrow em { font-style: normal; }
@media (max-width: 640px) { .pj-deptrow { grid-template-columns: auto 1fr; } .pj-deptrow .pj-prog, .pj-deptrow span { grid-column: 1 / -1; } }

/* segmented controls (My tasks) */
.pj-segbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.pj-seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 14px; background: rgba(255, 255, 255, .5); border: 1px solid var(--pj-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pj-seg button { border: 0; background: none; border-radius: 10px; padding: 8px 14px; font: inherit; font-family: var(--pj-font); font-size: 15px; font-weight: 600; color: var(--pj-sub); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color .25s var(--pj-ease), color .2s, box-shadow .25s; }
.pj-seg button .pj-i { width: 17px; height: 17px; color: currentColor; }
.pj-seg button[aria-selected="true"] { background: #fff; color: var(--pj-g7); box-shadow: 0 4px 12px -6px rgba(8, 54, 42, .4); }
.pj-seg.small button { font-size: 14px; padding: 6px 12px; }
.pj-segbar .pj-search { margin-left: auto; }
@media (max-width: 640px) { .pj-segbar .pj-search { margin-left: 0; width: 100%; } .pj-segbar .pj-search input { width: 100%; } }

/* empty states */
body.on-pj .pj-empty { border-radius: 20px; padding: 28px 20px; text-align: center; color: var(--pj-sub); display: flex; flex-direction: column; align-items: center; gap: 8px; border-style: solid; }
body.on-pj .pj-panel .pj-empty, body.on-pj .pj-empty.sm { background: transparent; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 18px 10px; }
.pj-empty > .pj-i { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--pj-g1); color: var(--pj-g6); }
.pj-empty p { margin: 0; font-size: 15px; line-height: 1.5; }
.pj-empty b { color: var(--pj-ink); }
.pj-only { padding: 40px 16px; display: grid; place-items: center; min-height: 60vh; }
.pj-only .pj-empty { max-width: 460px; }
.pj-only .pj-empty h3 { margin: 4px 0 0; color: var(--pj-ink); }
.pj-hintline { color: var(--pj-faint); font-size: 14px; margin: 6px 2px; }

/* progress page */
.pj-say { display: flex; gap: 12px; align-items: flex-start; }
.pj-say > .pj-i { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: linear-gradient(150deg, #22B98D, #168468); color: #fff; flex: none; }
.pj-say p { margin: 4px 0 0; font-size: 17px; line-height: 1.55; letter-spacing: -.01em; }
.pj-weeks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; height: 190px; padding-top: 10px; }
.pj-week { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.pj-week i { width: 100%; max-width: 38px; height: max(var(--h), 4px); border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, #8EDDC3, #5CC4A8); transform-origin: bottom; animation: pjGrow .9s var(--pj-spring) both; }
.pj-week.now i { background: linear-gradient(180deg, #22B98D, #168468); }
.pj-week em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--pj-ink); min-height: 18px; }
.pj-week span { font-size: 11px; color: var(--pj-faint); white-space: nowrap; }
@keyframes pjGrow { from { transform: scaleY(0); } to { transform: none; } }
.pj-kv { display: flex; flex-direction: column; }
.pj-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--pj-hair); font-size: 15px; }
.pj-kv > div:last-child { border-bottom: 0; }
.pj-kv span { color: var(--pj-sub); }

/* help */
.pj-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(34, 185, 141, .92), rgba(11, 77, 59, .94)) !important; color: #fff; border: 0 !important; }
.pj-hero h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.pj-hero p { margin: 4px 0 0; opacity: .9; }
body.on-pj:not(.cine) .pj-hero .btn.primary { background: #fff; color: var(--pj-g8); text-shadow: none; }
.pj-how { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pj-howcard { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .6); border: 1px solid var(--pj-edge); }
.pj-howic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--pj-g1); flex: none; }
.pj-howic .pj-i { color: var(--pj-g6); }
.pj-howcard b { font-size: 16px; }
.pj-howcard p { margin: 4px 0 0; color: var(--pj-sub); font-size: 15px; line-height: 1.5; }
.pj-words { margin: 0; display: grid; gap: 0 24px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pj-words div { padding: 11px 0; border-bottom: 1px solid var(--pj-hair); }
.pj-words dt { font-weight: 700; font-size: 16px; }
.pj-words dd { margin: 2px 0 0; color: var(--pj-sub); font-size: 15px; line-height: 1.5; }
.pj-kinds { display: flex; flex-direction: column; gap: 8px; }
.pj-kinds > div { display: grid; grid-template-columns: 22px 92px 1fr; align-items: center; gap: 10px; font-size: 15px; }
.pj-kinds span { color: var(--pj-sub); }
.pj-flowline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pj-flowline span { padding: 6px 12px; border-radius: 999px; background: #E8EFEC; font-weight: 600; font-size: 14px; }
.pj-flowline span.v { background: var(--pj-violet-0); color: var(--pj-violet); }
.pj-flowline span.g { background: var(--pj-g1); color: var(--pj-g7); }
.pj-flowline i { width: 18px; height: 2px; background: var(--pj-faint); border-radius: 2px; }

/* phone bar */
.pj-mnav { display: none; }
@media (max-width: 959px) {
  .pj-mnav { position: fixed; z-index: 60; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: 66px; padding: 0 6px; border-radius: 22px; background: rgba(250, 253, 251, .78); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--pj-edge); box-shadow: 0 18px 40px -16px rgba(8, 54, 42, .45), 0 1px 0 #fff inset; }
  .pj-mnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--pj-sub); padding: 6px 0; border-radius: 14px; }
  .pj-mnav a .pj-i { width: 23px; height: 23px; color: currentColor; }
  .pj-mnav a.active { color: var(--pj-g7); }
  .pj-mnew { justify-self: center; width: 54px; height: 54px; border-radius: 18px; border: 0; color: #fff; background: linear-gradient(160deg, #22B98D, #168468); box-shadow: 0 12px 24px -10px rgba(15, 122, 90, .9), 0 1px 0 rgba(255, 255, 255, .35) inset; display: grid; place-items: center; transform: translateY(-10px); transition: transform .4s var(--pj-spring); }
  .pj-mnew:active { transform: translateY(-10px) scale(.92); }
  .pj-mnew svg { width: 26px; height: 26px; }
  body.on-pj .pj-newbtn { display: none; }
  body.on-pj .pj-title h1 { font-size: 24px; }
  body.on-pj .pj-panel { padding: 14px; border-radius: 18px; }
  body.on-pj .pj-tile b { font-size: 28px; }
}

/* board */
body.on-pj .pj-colh { background: rgba(255, 255, 255, .55); border-radius: 14px 14px 0 0; text-transform: none; font-size: 14px; letter-spacing: 0; color: var(--pj-ink); padding: 10px 12px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.on-pj .pj-colh em { background: rgba(15, 80, 60, .08); border-radius: 999px; padding: 0 8px; font-size: 12px; }
body.on-pj .pj-colh.done { color: var(--pj-g7); }
body.on-pj .pj-colh.over { background: var(--pj-red-0); color: var(--pj-red); }
body.on-pj .pj-col { background: rgba(255, 255, 255, .32); border-radius: 0 0 14px 14px; }
body.on-pj .pj-lane + .pj-cols .pj-col { border-radius: 14px; }
body.on-pj .pj-cards { gap: 8px; padding: 8px; }
body.on-pj .pj-card { border-radius: 14px; padding: 12px 12px 10px; gap: 8px; transition: transform .4s var(--pj-spring), box-shadow .25s var(--pj-ease); }
body.on-pj .pj-card:hover { background: rgba(255, 255, 255, .9); transform: translateY(-2px); box-shadow: var(--pj-shadow-up); }
body.on-pj .pj-ct { font-size: 15px; font-weight: 500; line-height: 1.4; }
body.on-pj .pj-epic { border-radius: 6px; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 1px 7px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
body.on-pj .pj-epic .pj-i { width: 12px; height: 12px; color: currentColor; }
body.on-pj .pj-subc .pj-i { width: 14px; height: 14px; }
body.on-pj .pj-addcard { border-radius: 12px; }
body.on-pj .pj-addcard .pj-i { width: 16px; height: 16px; }
body.on-pj .pj-sprintbar { border-radius: 18px; padding: 12px 16px; margin-bottom: 14px; }
.pj-coltabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; padding: 2px; }
.pj-coltabs button { flex: none; border: 1px solid var(--pj-edge); background: rgba(255, 255, 255, .55); border-radius: 999px; padding: 8px 14px; font: inherit; font-family: var(--pj-font); font-size: 14px; font-weight: 600; color: var(--pj-sub); display: inline-flex; gap: 6px; align-items: center; }
.pj-coltabs button em { font-style: normal; background: rgba(15, 80, 60, .08); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.pj-coltabs button[aria-selected="true"] { background: var(--pj-g6); color: #fff; border-color: var(--pj-g6); box-shadow: 0 8px 18px -10px rgba(15, 122, 90, .8); }
.pj-coltabs button[aria-selected="true"] em { background: rgba(255, 255, 255, .25); }
.pj-board.one .pj-cols { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.pj-board.one .pj-col { border-radius: 16px; }
body.on-pj .pj-ghost { border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(8, 54, 42, .45) !important; }
body.on-pj .pj-ph { border-radius: 14px; background: rgba(24, 160, 122, .1); border: 2px dashed rgba(24, 160, 122, .45); }

/* plan work */
body.on-pj .pj-bl { border-radius: 18px; padding: 10px 12px 12px; }
body.on-pj .pj-bl.active { background: rgba(232, 248, 241, .8); }
body.on-pj .pj-row { border-radius: 12px; box-shadow: none; background: rgba(255, 255, 255, .78); border: 1px solid var(--pj-hair); min-height: 44px; transition: background-color .2s, transform .35s var(--pj-spring); }
body.on-pj .pj-row:hover { background: #fff; }
body.on-pj .pj-rows { gap: 4px; }
body.on-pj .pj-epics { border-radius: 18px; }
body.on-pj .pj-epicf.on { background: var(--pj-g1); border-color: transparent; }

/* filters */
body.on-pj .pj-search input { height: 40px; min-height: 40px; border-radius: 12px; font-size: 15px; width: 220px; }
body.on-pj .pj-qf { border-radius: 10px; min-height: 36px; background: rgba(255, 255, 255, .7); border-color: var(--pj-hair); font-family: var(--pj-font); }
body.on-pj .pj-qf.on { background: var(--pj-g1); color: var(--pj-g7); border-color: transparent; }
body.on-pj .pj-fsel, body.on-pj .pj-groupby select, body.on-pj .pj-bulk select { height: 36px; min-height: 36px; border-radius: 10px; font-size: 14px; }
body.on-pj .pj-avbtn.on { border-color: var(--pj-g6); box-shadow: 0 0 0 1px var(--pj-g6); }

/* tables */
body.on-pj .pj-tablewrap { border-radius: 18px; }
body.on-pj .pj-table th { background: rgba(255, 255, 255, .55); color: var(--pj-sub); font-size: 13px; }
body.on-pj .pj-table td { border-bottom-color: var(--pj-hair); }
body.on-pj .pj-table tbody tr:hover td { background: rgba(255, 255, 255, .7); }
body.on-pj .pj-bulk { background: var(--pj-g1); border-radius: 14px; }

/* reports, timeline, settings */
body.on-pj .pj-stats div { border-radius: 18px; }
body.on-pj .pj-rep { border-radius: 20px; }
body.on-pj .pj-rep .card-h, body.on-pj .pj-settings .card-h { border-bottom-color: var(--pj-hair); }
body.on-pj .pj-settings .card { border-radius: 20px; }
body.on-pj .pj-tl { border-radius: 18px; }
body.on-pj .pj-tl-name { background: rgba(250, 253, 251, .95); }
body.on-pj .pj-tl-row.head, body.on-pj .pj-tl-row.head .pj-tl-name { background: rgba(240, 249, 245, .97); }
body.on-pj .pj-tl-bar { border-radius: 8px; }
body.on-pj .pj-tl-today { background: var(--pj-g5); }
body.on-pj .pj-hbar i { background: linear-gradient(90deg, #5CC4A8, #168468); }
.pj-waiting { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .6); border: 1px dashed rgba(15, 80, 60, .25); }
.pj-waiting > p { margin: 2px 0 8px; }

/* task panel */
body.on-pj .pj-drawer-wrap.open, .pj-drawer-wrap.open { background: rgba(8, 40, 31, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pj-drawer { transition: transform .5s var(--pj-spring, cubic-bezier(.22, 1.25, .36, 1)), opacity .25s; transform: translateX(40px); }
body.on-pj .pj-drawer { background: rgba(248, 252, 250, .9); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border-left: 1px solid var(--pj-edge); border-radius: 24px 0 0 24px; box-shadow: -24px 0 60px -20px rgba(8, 54, 42, .4); }
@media (max-width: 720px) { body.on-pj .pj-drawer { border-radius: 0; } }
body.on-pj .pj-ih { background: rgba(248, 252, 250, .85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--pj-hair); }
body.on-pj .pj-ih-act .icon-btn svg { width: 20px; height: 20px; color: var(--pj-sub); }
.pj-deptchip { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--pj-g1, #D8F1EA); color: var(--pj-g7, #146F58); }
.pj-ofgoal { font-size: 13px; color: var(--pj-sub, #55665F); }
body.on-pj .pj-ititle { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
body.on-pj .pj-ititle.done { color: var(--pj-sub); }
.pj-statusrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
body.on-pj .pj-stsel { border-radius: 999px; text-transform: none; font-size: 14px; height: 36px; min-height: 36px; padding: 2px 32px 2px 14px; font-weight: 700; border: 0; background-color: #E8EFEC; color: #33433D; }
body.on-pj .pj-stsel.pj-st-prog { background-color: #DCF2F4; color: #0E6E79; }
body.on-pj .pj-stsel.pj-st-done { background-color: var(--pj-g1); color: var(--pj-g7); }
body.on-pj .pj-stsel.pj-st-wait { background-color: var(--pj-violet-0); color: var(--pj-violet); }
.pj-duebig { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--pj-sub, #55665F); }
.pj-duebig .pj-i { width: 18px; height: 18px; color: currentColor; }
.pj-duebig.late { color: var(--pj-red, #D1453B); }
.pj-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
body.on-pj .pj-actions .btn { min-height: 48px; font-size: 16px; padding: 0 20px; border-radius: 14px; }
.pj-waitnote, .pj-donenote { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-weight: 600; }
.pj-waitnote { background: var(--pj-violet-0, #EFEBFD); color: var(--pj-violet, #6E56CF); }
.pj-donenote { background: var(--pj-g1, #D8F1EA); color: var(--pj-g7, #146F58); }
.pj-waitnote .pj-i, .pj-donenote .pj-i { color: currentColor; }
.pj-callout { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .75); border: 1px solid var(--pj-hair, #ddd); margin-bottom: 14px; }
.pj-callout.warn { background: #FFF6E5; border-color: #F2DDB0; }
.pj-callout p { margin: 2px 0 0; }
.pj-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 8px; }
.pj-people > div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--pj-edge, #fff); }
.pj-people span { display: block; font-size: 12px; color: var(--pj-sub, #55665F); font-weight: 600; margin-bottom: 4px; }
.pj-people b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.pj-minor { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 18px; }
body.on-pj .pj-sec h4 { font-size: 16px; letter-spacing: -.01em; }
body.on-pj .pj-desc { font-size: 16px; }
body.on-pj .pj-desc.is-empty { color: var(--pj-faint); }
body.on-pj .pj-mini { border-radius: 14px; border-color: var(--pj-hair); background: rgba(255, 255, 255, .6); }
body.on-pj .pj-minirow { border-bottom-color: var(--pj-hair); padding: 9px 12px; font-size: 15px; }
.pj-minirow.checked a { color: var(--pj-sub, #55665F); text-decoration: line-through; }
.pj-tick { position: relative; width: 24px; height: 24px; flex: none; cursor: pointer; }
.pj-tick input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.pj-tick span { width: 24px; height: 24px; border-radius: 8px; border: 2px solid rgba(15, 80, 60, .3); display: grid; place-items: center; background: #fff; transition: background-color .2s, border-color .2s, transform .35s var(--pj-spring, ease); }
.pj-tick span svg { width: 15px; height: 15px; stroke: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .35s var(--pj-spring, ease); }
.pj-tick input:checked + span { background: var(--pj-g6, #168468); border-color: var(--pj-g6, #168468); }
.pj-tick input:checked + span svg { opacity: 1; transform: none; }
.pj-tick input:focus-visible + span { box-shadow: 0 0 0 3px rgba(24, 160, 122, .3); }
.pj-inline { display: flex; gap: 8px; margin-top: 8px; }
.pj-inline input { margin-top: 0 !important; height: 42px !important; min-height: 42px !important; }
body.on-pj .pj-comment { border-top-color: var(--pj-hair); }
body.on-pj .pj-cbody { font-size: 15px; }
.pj-moredetails { margin-top: 10px; border-top: 1px solid var(--pj-hair, #e5e5e5); padding-top: 8px; }
.pj-moredetails > summary, .pj-more > summary { cursor: pointer; font-weight: 600; color: var(--pj-g6, #168468); padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
.pj-moredetails > summary::-webkit-details-marker, .pj-more > summary::-webkit-details-marker { display: none; }
.pj-moredetails > summary::before, .pj-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .3s var(--pj-spring, ease); }
.pj-moredetails[open] > summary::before, .pj-more[open] > summary::before { transform: rotate(45deg); }
.pj-linksbox, .pj-histbox, .pj-logs { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.pj-linksbox > b, .pj-histbox > b { font-size: 13px; color: var(--pj-sub, #55665F); }
.pj-histbox { max-height: 300px; overflow: auto; }
.pj-sidefoot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.pj-hours { font-weight: 600; }
body.on-pj .pj-wform { align-items: center; margin-top: 12px; }
body.on-pj .pj-wform b { width: 100%; font-size: 13px; color: var(--pj-sub); }
body.on-pj .pj-field input, body.on-pj .pj-field select { border-color: transparent; background-color: transparent; }
body.on-pj .pj-field input:hover:not(:disabled), body.on-pj .pj-field select:hover:not(:disabled) { background-color: rgba(255, 255, 255, .85); border-color: var(--pj-hair); }
body.on-pj .pj-field > span { color: var(--pj-sub); font-weight: 600; }
body.on-pj .pj-iside { border-color: var(--pj-hair); }
body.on-pj .pj-issuepage { padding: 0; overflow: hidden; }

/* new task form */
.pj-newform { display: flex; flex-direction: column; gap: 14px; }
.pj-newform input[name=title] { font-size: 18px; min-height: 52px; font-weight: 500; }
.pj-prios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pj-prios legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0; }
.pj-prios label { position: relative; }
.pj-prios input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.pj-prios span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(15, 80, 60, .16); font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, transform .35s var(--pj-spring, ease); }
.pj-prios input:checked + span { background: var(--pj-g1, #D8F1EA); border-color: var(--pj-g5, #22A785); color: var(--pj-g8, #12604C); }
.pj-prios input:focus-visible + span { box-shadow: 0 0 0 3px rgba(24, 160, 122, .3); }
.pj-prios span:active { transform: scale(.96); }
.pj-more { border-radius: 14px; padding: 2px 14px 10px; background: rgba(255, 255, 255, .5); border: 1px solid var(--pj-hair, #e5e5e5); }
.pj-more .pj-grid2 { margin: 6px 0 10px; }
.pj-formfoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* guided tour */
.pj-tour { position: fixed; inset: 0; z-index: 400; pointer-events: auto; opacity: 0; transition: opacity .3s var(--pj-ease, ease); }
.pj-tour.in { opacity: 1; }
.pj-tour.out { opacity: 0; }
.pj-tour-hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(6, 32, 25, .55); transition: left .5s var(--pj-spring, ease), top .5s var(--pj-spring, ease), width .5s var(--pj-spring, ease), height .5s var(--pj-spring, ease), opacity .3s; pointer-events: none; outline: 2px solid rgba(255, 255, 255, .9); }
.pj-tour-card { position: fixed; width: min(380px, calc(100vw - 24px)); padding: 20px 20px 16px; border-radius: 22px; background: rgba(250, 253, 251, .95); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -20px rgba(6, 32, 25, .55); color: #0F1F1A; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Calibri, sans-serif; transition: left .5s var(--pj-spring, ease), top .5s var(--pj-spring, ease), bottom .5s var(--pj-spring, ease); }
.pj-tour-card.pop { animation: pjPop .45s var(--pj-spring, ease); }
@keyframes pjPop { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
.pj-tour-step { font-size: 12px; font-weight: 700; color: #168468; letter-spacing: .04em; text-transform: uppercase; }
.pj-tour-card h3 { margin: 6px 0 6px; font-size: 20px; letter-spacing: -.02em; }
.pj-tour-text { margin: 0; font-size: 16px; line-height: 1.55; color: #33433D; }
.pj-tour-dots { display: flex; gap: 5px; margin: 14px 0 12px; }
.pj-tour-dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(15, 80, 60, .2); transition: width .35s var(--pj-spring, ease), background-color .2s; }
.pj-tour-dots i.on { width: 20px; background: #168468; }
.pj-tour-btns { display: flex; align-items: center; gap: 8px; }
.pj-tour-btns .pj-sp { flex: 1; }

/* accessibility: calm motion and solid surfaces when asked */
@media (prefers-reduced-motion: reduce) {
  .pj-enter .pj-body > *, .pj-week i, .pj-tour-card.pop { animation: none !important; }
  body.on-pj .pj-card, body.on-pj .pj-tile, .pj-dept, .pj-trow, .pj-drawer, .pj-tour-hole, .pj-tour-card, .pj-mnew, body.on-pj:not(.cine) .btn { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .pj-panel, body.on-pj .pj-tile, body.on-pj .pj-card, body.on-pj .pj-side, body.on-pj .pj-drawer, .pj-mnav, body.on-pj .sheet { background: #FBFDFC !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pj-panel, body.on-pj .pj-tile, body.on-pj .pj-card, .pj-mnav, body.on-pj .pj-drawer { background: rgba(252, 254, 253, .96); }
}
@media (max-width: 720px) { body.on-pj .install-pop { bottom: calc(var(--safe-b) + 84px); } } /* above the QC Projects phone bar */
.pj-nav > span.pj-i { flex: none; }
.pj-nav > span:not(.pj-pbadge):not(.pj-i) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-search .pj-i { position: absolute; left: 11px; width: 17px; height: 17px; pointer-events: none; color: var(--pj-sub, #55665F); }
body.on-pj .pj-search input { padding-left: 36px; }
.pj.pj-only { display: grid; grid-template-columns: minmax(0, 1fr) !important; }
.pj-people span { display: initial; margin: 0; }
.pj-people > div > span { display: block; font-size: 12px; color: var(--pj-sub, #55665F); font-weight: 600; margin-bottom: 6px; }
.pj-people .pj-av { display: inline-grid; margin: 0; font-size: 12px; color: #fff; }
.pj-prios .pj-prio { display: inline-grid; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
.pj-addm input[type=email] { flex: 1 1 260px; width: auto; min-height: 40px; height: 40px; }
.pj-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--pj-sub, #55665F); }
.pj-mode .pj-seg button { padding: 5px 12px; font-size: 13px; }
.pj-views { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pj-viewcard { text-align: left; font: inherit; font-family: var(--pj-font); color: var(--pj-ink); cursor: pointer; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .6); border: 2px solid rgba(15, 80, 60, .12); display: flex; flex-direction: column; gap: 6px; transition: transform .4s var(--pj-spring), border-color .2s, box-shadow .25s; }
.pj-viewcard:hover { transform: translateY(-2px); box-shadow: var(--pj-shadow-up); }
.pj-viewcard.on { border-color: var(--pj-g5); background: rgba(232, 248, 241, .9); cursor: default; }
.pj-viewcard b { font-size: 18px; letter-spacing: -.01em; }
.pj-viewcard p { margin: 0; color: var(--pj-sub); font-size: 15px; line-height: 1.5; }
.pj-viewcard small { color: var(--pj-g7); font-weight: 600; }
.pj-viewtag { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: rgba(15, 80, 60, .08); color: var(--pj-sub); }
.pj-viewcard.on .pj-viewtag { background: var(--pj-g6); color: #fff; }
.pj-only .btn-row { justify-content: center; }
.pj-teamf { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.pj-teamf small { color: var(--pj-faint, #8A9A94); font-weight: 400; }
.pj-teampick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; max-height: 160px; overflow: auto; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .6); border: 1px solid var(--pj-hair, #e5e5e5); }
.pj-teampick .pj-check { font-weight: 500; }
@media (max-width: 959px) {
  .pj-mnav button:not(.pj-mnew) { border: 0; background: none; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--pj-sub, #55665F); padding: 6px 0; border-radius: 14px; cursor: pointer; }
  .pj-mnav button:not(.pj-mnew) .pj-i { width: 23px; height: 23px; color: currentColor; }
  .pj-mnav button.active { color: var(--pj-g7, #146F58); }
  .pj-mnav { position: fixed !important; z-index: 80; }
}
body:not(.on-pj) #pjMnav { display: none !important; }
.pj-sheetlist { display: flex; flex-direction: column; gap: 2px; }
.pj-sheetrow { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 14px; color: var(--pj-ink, #0F1F1A); }
.pj-sheetrow:active, .pj-sheetrow:hover { background: rgba(255, 255, 255, .8); }
.pj-sheetrow > .pj-i { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--pj-g1, #D8F1EA); color: var(--pj-g6, #168468); }
.pj-sheetrow span { display: flex; flex-direction: column; }
.pj-sheetrow b { font-size: 16px; font-weight: 600; }
.pj-sheetrow small { color: var(--pj-sub, #55665F); font-size: 13px; }
.pj-autodept { color: var(--pj-g6, #168468); font-weight: 500; font-size: 13px; }

/* phone bar: runs to the bottom edge, soft blur, nearly solid */
@media (max-width: 959px) {
  .pj-mnav { left: 0 !important; right: 0 !important; bottom: 0 !important; height: calc(68px + var(--safe-b)) !important; padding: 0 8px var(--safe-b) !important; border-radius: 24px 24px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(15, 80, 60, .1) !important; background: rgba(248, 252, 250, .95) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; backdrop-filter: blur(20px) saturate(160%) !important; box-shadow: 0 -10px 30px -18px rgba(8, 54, 42, .35) !important; }
  body.on-pj .pj-main { padding-bottom: calc(100px + var(--safe-b)); }
}

/* pages and forms move up and down only */
body.on-pj .pj-main { overflow-x: clip; }
body.on-pj .sheet { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; max-width: 100vw; }
body.on-pj .sheet form, body.on-pj .sheet label.f, body.on-pj .sheet .pj-grid2 > * { min-width: 0; }
body.on-pj .sheet input, body.on-pj .sheet select, body.on-pj .sheet textarea { max-width: 100%; min-width: 0; }
body.on-pj .sheet input[type=date] { width: 100%; -webkit-appearance: none; appearance: none; }
body.on-pj .pj-teampick { overflow-x: hidden; }

/* sideways rows with arrows while there is more */
.pj-hs { position: relative; max-width: 100%; min-width: 0; }
.pj-hs.pj-hs-tabs { width: fit-content; }
.pj-hs > .pj-tabs, .pj-hs > .pj-seg, .pj-hs > .pj-coltabs { scroll-behavior: smooth; }
.pj-hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(15, 80, 60, .12); background: rgba(255, 255, 255, .95); color: var(--pj-g7, #146F58); display: grid; place-items: center; box-shadow: 0 4px 12px -4px rgba(8, 54, 42, .35); cursor: pointer; padding: 0; transition: opacity .2s; }
.pj-hs-arrow svg { width: 16px; height: 16px; }
.pj-hs-arrow.r { right: 2px; }
.pj-hs-arrow.l { left: 2px; }
.pj-hs::after, .pj-hs::before { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; z-index: 1; transition: opacity .2s; }
.pj-hs::after { right: 0; background: linear-gradient(90deg, rgba(241, 250, 246, 0), rgba(241, 250, 246, .95)); border-radius: 0 14px 14px 0; }
.pj-hs::before { left: 0; background: linear-gradient(270deg, rgba(241, 250, 246, 0), rgba(241, 250, 246, .95)); border-radius: 14px 0 0 14px; }
.pj-hs.at-end .pj-hs-arrow.r, .pj-hs.at-end::after { opacity: 0; pointer-events: none; }
.pj-hs.at-start .pj-hs-arrow.l, .pj-hs.at-start::before { opacity: 0; pointer-events: none; }
.pj-segbar .pj-hs { flex: 0 1 auto; }
.pj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pj-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.pj-hs.pj-hs-tabs { margin-top: 14px; }
body.on-pj .pj-hs > .pj-tabs { margin-top: 0; }
.pj-hs.pj-hs-tabs::after { border-radius: 0 14px 14px 0; }
.pj-hs.pj-hs-tabs::before { border-radius: 14px 0 0 14px; }
.pj-group.v { color: var(--pj-violet, #6E56CF); }

/* ============================================================
   QC Moments: dark glass and soft motion, in its own night-and-gold palette
   ============================================================ */
body.cine {
  --mg: rgba(255, 255, 255, .07);
  --mg-2: rgba(255, 255, 255, .11);
  --mg-edge: rgba(255, 255, 255, .13);
  --mg-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px -20px rgba(0, 0, 0, .75);
  --m-spring: cubic-bezier(.22, 1.25, .36, 1);
  --m-ease: cubic-bezier(.2, .8, .2, 1);
}
body.cine .maincol { background: radial-gradient(900px 520px at 10% -10%, rgba(140, 40, 70, .45), transparent 62%), radial-gradient(800px 520px at 110% 20%, rgba(232, 199, 122, .14), transparent 60%), radial-gradient(700px 600px at 50% 120%, rgba(40, 90, 140, .22), transparent 60%), var(--cine-bg); }
body.cine .topbar { background: rgba(13, 10, 12, .62); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border-bottom: 1px solid var(--mg-edge); }
/* frosted surfaces */
body.cine .card, body.cine .m-tabs, body.cine .m-capture > .card, body.cine .m-posted-card, body.cine .m-chat-form, body.cine .m-empty, body.cine .ps-sizes button {
  background: var(--mg); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--mg-edge); box-shadow: var(--mg-shadow);
}
body.cine .card { border-radius: 20px; }
body.cine .m-tabs { border-radius: 18px; padding: 5px; }
body.cine .m-tabs button { border-radius: 13px; color: var(--cine-mute); transition: background-color .25s var(--m-ease), color .2s, transform .35s var(--m-spring); }
body.cine .m-tabs button:active { transform: scale(.96); }
body.cine .m-tabs button[aria-selected="true"] { background: var(--mg-2); color: var(--cine-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 18px -10px rgba(0, 0, 0, .6); }
body.cine .seg { background: var(--mg); border-color: var(--mg-edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 14px; }
body.cine .seg button { border-radius: 10px; transition: background-color .25s var(--m-ease), color .2s; }
body.cine .seg button[aria-selected="true"] { background: var(--mg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
/* buttons: soft glass, spring on press */
body.cine .btn { border-radius: 14px; transition: transform .4s var(--m-spring), box-shadow .25s var(--m-ease), background-color .2s; }
body.cine .btn:not(.primary):not(.danger) { background: var(--mg); border-color: var(--mg-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
body.cine .btn:hover { transform: translateY(-1px); }
body.cine .btn:active { transform: scale(.97); }
body.cine .btn.primary { background: linear-gradient(180deg, #F2D58E 0%, #D9B062 100%); border-color: rgba(255, 255, 255, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 28px -12px rgba(232, 199, 122, .7); }
/* photos */
body.cine .m-tile { border-radius: 14px; transition: transform .45s var(--m-spring), box-shadow .3s var(--m-ease); }
body.cine .m-tile:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .8); }
body.cine .m-grid { gap: 6px; }
body.cine .m-posted-card { border-radius: 22px; overflow: hidden; }
/* sheets and pop-ups */
body.cine .overlay { background: rgba(5, 4, 6, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.cine .sheet { background: rgba(28, 22, 26, .86); color: var(--cine-ink); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); border: 1px solid var(--mg-edge); border-bottom: 0; }
body.cine .install-pop { background: rgba(28, 22, 26, .9); color: var(--cine-ink); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--mg-edge); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); }
body.cine .install-pop b { color: var(--cine-ink); }
body.cine .install-pop small { color: var(--cine-mute); }
body.cine .install-pop .btn.ghost { color: var(--cine-accent); }
/* one soft rise when a screen opens */
@keyframes mRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.cine main.content > * > * { animation: mRise .55s var(--m-ease) both; }
body.cine main.content > * > *:nth-child(2) { animation-delay: .05s; }
body.cine main.content > * > *:nth-child(3) { animation-delay: .1s; }
body.cine main.content > * > *:nth-child(4) { animation-delay: .15s; }
/* the camera booth: frosted controls over the picture, springy shutter */
.booth-bottom { background: rgba(10, 10, 12, .55); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 26px 26px 0 0; }
.booth-icon { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .14); transition: transform .4s cubic-bezier(.22, 1.25, .36, 1), background-color .2s; }
.booth-icon:active { transform: scale(.9); }
.booth-modes { width: fit-content; margin: 2px auto 10px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.booth-modes button { transition: background-color .3s cubic-bezier(.2, .8, .2, 1), color .2s, transform .4s cubic-bezier(.22, 1.25, .36, 1); }
.booth-modes button:active { transform: scale(.94); }
.booth-modes button[aria-checked="true"] { background: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.booth-shutter { transition: transform .45s cubic-bezier(.22, 1.25, .36, 1); }
.booth-shutter:active { transform: scale(.92); }
.booth-shutter span { transition: transform .3s cubic-bezier(.22, 1.25, .36, 1), width .35s cubic-bezier(.22, 1.25, .36, 1), height .35s cubic-bezier(.22, 1.25, .36, 1), border-radius .3s cubic-bezier(.2, .8, .2, 1), background-color .25s; }
.booth-formats button, .booth-frame { transition: transform .4s cubic-bezier(.22, 1.25, .36, 1), background-color .2s; }
.booth-formats button:active, .booth-frame:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  body.cine main.content > * > * { animation: none !important; }
  body.cine .btn, body.cine .m-tile, body.cine .m-tabs button, .booth-shutter, .booth-shutter span, .booth-icon, .booth-modes button { transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  body.cine .card, body.cine .m-tabs, body.cine .sheet, body.cine .install-pop, .booth-bottom { background: #1B1519 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* My tasks: the three lists share one row (no scrolling), and so do the three states */
.pj-seg.pj-fill { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: visible; }
.pj-seg.pj-fill button { justify-content: center; text-align: center; }
@media (max-width: 720px) {
  .pj-segbar { flex-direction: column; align-items: stretch; }
  .pj-seg.pj-fill { display: grid; width: 100%; }
  .pj-seg.pj-views3 button { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 13px; line-height: 1.2; white-space: normal; }
  .pj-seg.pj-views3 button .pj-i { width: 20px; height: 20px; }
  .pj-seg.small.pj-fill button { padding: 8px 4px; font-size: 13px; line-height: 1.2; white-space: normal; }
}
@media (max-width: 720px) { .pj-segbar .pj-search, body.on-pj .pj-segbar .pj-search input { width: 100%; } }

/* Simple or Full: two big cards, and a one-tap switch at the top of the page */
.pj-flabel { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.pj-modes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pj-modecard { position: relative; display: block; cursor: pointer; }
.pj-modecard input { position: absolute; opacity: 0; width: 0; height: 0; min-height: 0; }
.pj-modecard span { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px 44px; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 2px solid rgba(15, 80, 60, .14); transition: border-color .2s, background-color .2s, transform .35s var(--pj-spring, ease); position: relative; }
.pj-modecard span::before { content: ""; position: absolute; left: 14px; top: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(15, 80, 60, .35); background: #fff; }
.pj-modecard b { font-size: 16px; color: var(--pj-ink, #0F1F1A); }
.pj-modecard small { color: var(--pj-sub, #55665F); font-size: 13px; line-height: 1.45; }
.pj-modecard input:checked + span { border-color: var(--pj-g5, #22A785); background: rgba(232, 248, 241, .95); }
.pj-modecard input:checked + span::before { border-color: var(--pj-g6, #168468); background: radial-gradient(circle, var(--pj-g6, #168468) 0 5px, #fff 6px); }
.pj-modecard input:focus-visible + span { box-shadow: 0 0 0 3px rgba(24, 160, 122, .3); }
.pj-modecard span:active { transform: scale(.98); }
.pj-modecard input:disabled + span { cursor: default; opacity: .75; }
.pj-modeswitch { margin-left: auto; }
.pj-modeswitch button { white-space: nowrap; }
.pj-modetag { margin-left: auto; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1px solid var(--pj-hair, #ddd); color: var(--pj-sub, #55665F); }
@media (max-width: 720px) { .pj-modeswitch, .pj-modetag { margin-left: 0; width: 100%; } .pj-modetag { width: auto; } }
.pj-views button.pj-viewcard { width: 100%; }
.pj-viewcard.on { border-color: var(--pj-g5, #22A785); background: rgba(232, 248, 241, .95); }
.pj-viewcard.on .pj-viewtag { background: var(--pj-g6, #168468); color: #fff; }
.pj-apply { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(232, 248, 241, .7); border: 1px solid rgba(24, 160, 122, .25); }
.pj-apply label.f { flex: 1 1 240px; }
.pj-modelist { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.pj-moderow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .6); border: 1px solid var(--pj-hair, #e5e5e5); }
.pj-moderow b { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-moderow .pj-seg { width: auto; }
.pj-follow { margin-top: 12px; font-size: 15px; } .pj-viewcard p { margin: 0; }
/* QC Projects: quick lists above a board (assigned to me, waiting for approval, late…) */
body.on-pj .pj-shows { display: flex; gap: 6px; flex-wrap: wrap; }
body.on-pj .pj-shows .pj-qf em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(15, 34, 51, .07); color: inherit; }
body.on-pj .pj-shows .pj-qf.on em { background: rgba(255, 255, 255, .25); }
body.on-pj .pj-shows .pj-qf.late:not(.on) em { background: #FDE3E1; color: #B42318; }
@media (max-width: 720px) { body.on-pj .pj-shows { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; } body.on-pj .pj-shows .pj-qf { flex: none; } }
.am-full.am-view { color: var(--muted, #64748B); font-weight: 600; }
.am-rolecell select { font-weight: 700; }
/* Switches: a track with a sliding knob. Stronger than the glass theme's general input rule, which would flatten them. */
body .switch input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; min-height: 0; min-width: 46px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #CBD5DD; box-shadow: inset 0 1px 2px rgba(15, 34, 51, .18); position: relative; flex: none; cursor: pointer; transition: background-color 180ms ease; }
body .switch input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 34, 51, .3); transition: transform 200ms cubic-bezier(.3, 1.4, .5, 1); }
body .switch input[type=checkbox]:checked { background: var(--blue-deep, #1F6FA8); }
body .switch input[type=checkbox]:checked::after { transform: translateX(18px); }
body .switch input[type=checkbox]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--blue-mist, #D6EAF7); }
body .switch input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.am-hide { gap: 10px; min-width: 104px; }
.am-hide span { min-width: 48px; text-align: right; color: var(--slate); }
.am-tool { align-items: center; }
@media (prefers-reduced-motion: reduce) { body .switch input[type=checkbox], body .switch input[type=checkbox]::after { transition: none; } }
/* Team & access: use the room a wide screen has; when it still doesn't fit, scroll sideways with space at both edges */
main.content:has(> .access) { max-width: none; }
.access { max-width: 1680px; padding: 0 clamp(0px, 1.5vw, 24px); }
.access-matrix { overflow-x: auto; overscroll-behavior-x: contain; padding: 0 14px 10px; scroll-padding-inline: 14px; }
.am-row { grid-template-columns: 36px minmax(230px, 1.6fr) 140px repeat(var(--tools, 2), minmax(150px, 1fr)) 310px; gap: 12px; padding: 12px 10px;
  min-width: calc(36px + 230px + 140px + var(--tools, 2) * 150px + 310px + 100px); }
.am-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; padding-right: 4px; }
.am-actions .btn { white-space: nowrap; }
/* QC Projects: goals done by one person or a team */
.pj-goalwho { border: 0; padding: 0; margin: 0; }
.pj-goalwho .pj-modes { margin-top: 6px; }
.pj-teamgrp { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 0; }
.pj-teamgrp > b { flex-basis: 100%; font-size: 12.5px; color: var(--pj-i2, #4B5B66); }
.pj-teampick { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.pj-teamrows { display: grid; gap: 8px; }
.pj-teamrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av name count" "av bar bar"; align-items: center; gap: 2px 10px; }
.pj-teamrow .pj-av { grid-area: av; }
.pj-teamrow b { grid-area: name; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-teamrow em { font-style: normal; font-size: 11px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--pj-g1, #D8F1EA); color: var(--pj-g8, #12604C); }
.pj-teamcount { grid-area: count; font-size: 12.5px; color: var(--pj-i2, #4B5B66); }
.pj-teambar { grid-area: bar; height: 5px; border-radius: 999px; background: rgba(15, 34, 51, .08); overflow: hidden; }
.pj-teambar i { display: block; height: 100%; background: var(--pj-g5, #22A785); border-radius: inherit; transition: width .4s var(--pj-ease, ease); }
.pj-goalteam h4 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pj-splitrows { display: grid; gap: 8px; margin-bottom: 8px; }
.pj-splitrow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 150px auto; gap: 8px; align-items: center; }
@media (max-width: 720px) {
  .pj-splitrow { grid-template-columns: 1fr 1fr auto; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .55); }
  .pj-splitrow input[name=title] { grid-column: 1 / -1; }
}
/* Today bar: tasks due today or late, approvals and notifications, under the top bar on every screen */
.qc-today { position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 29; padding: 8px 16px 0; pointer-events: none; }
.qc-today > * { pointer-events: auto; }
.qc-today[hidden] { display: none; }
.qt-bar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 8px 6px 12px; border-radius: 14px; background: rgba(232, 248, 241, .92); border: 1px solid rgba(18, 128, 95, .22);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 6px 20px rgba(15, 60, 45, .10); font-size: 14px; }
.qc-today.has-late .qt-bar { background: rgba(255, 244, 226, .95); border-color: rgba(183, 121, 31, .35); }
.qt-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #168468; color: #fff; flex: none; }
.qt-ic svg { width: 17px; height: 17px; }
.has-late .qt-ic { background: #B7791F; }
.qt-head { display: flex; flex-direction: column; line-height: 1.25; flex: none; }
.qt-late { color: #B42318; font-weight: 700; }
.qt-ok { font-size: 12.5px; color: #5B3FB3; font-weight: 700; text-decoration: none; }
.qt-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.qt-chips::-webkit-scrollbar { display: none; }
.qt-chip, .qt-more { flex: none; max-width: 260px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(15, 34, 51, .08); color: #1B2A36; text-decoration: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-chip span { font-weight: 700; color: #168468; }
.qt-chip.late span { color: #B42318; }
.qt-more { font-weight: 700; color: #168468; }
.qt-alerts { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: #168468; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.qt-alerts svg { width: 15px; height: 15px; }
.qt-blocked { flex: none; font-size: 12px; font-weight: 700; color: #B42318; }
.qt-bell, .qt-min, .qt-pill { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .8); color: #1B2A36; cursor: pointer; }
.qt-bell svg, .qt-min svg, .qt-pill svg { width: 18px; height: 18px; }
.qt-min svg { transform: rotate(90deg); }
.qt-bell em { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #D1453B; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; font-style: normal; }
.qc-today.is-min { display: flex; justify-content: flex-end; gap: 6px; }
.qt-pill { width: auto; display: inline-flex; gap: 6px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(15, 60, 45, .14); background: rgba(232, 248, 241, .95); border: 1px solid rgba(18, 128, 95, .22); }
.qt-pill.late { background: rgba(255, 244, 226, .97); border-color: rgba(183, 121, 31, .35); color: #7A4E0E; }
.is-min .qt-bell { box-shadow: 0 4px 14px rgba(15, 60, 45, .14); }
.qt-panel { position: absolute; right: 16px; top: calc(100% + 6px); width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 16px;
  background: rgba(255, 255, 255, .97); border: 1px solid rgba(15, 34, 51, .08); box-shadow: 0 18px 50px rgba(15, 34, 51, .22); }
.qt-panel-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 10px; }
.qt-link { border: 0; background: none; color: #168468; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.qt-list { display: grid; gap: 2px; }
.qt-note { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #1B2A36; }
.qt-note:hover { background: rgba(18, 128, 95, .06); }
.qt-note.new { background: rgba(232, 248, 241, .8); }
.qt-note b { font-size: 14px; }
.qt-note span { font-size: 13px; color: #3E4C57; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qt-note small { font-size: 11.5px; color: #6B7A85; }
.qt-empty { margin: 4px 8px 10px; color: #4B5B66; font-size: 13.5px; }
body.cine .qc-today { display: none; }
@media (max-width: 720px) {
  .qc-today { padding: 6px 10px 0; }
  .qt-bar { flex-wrap: wrap; gap: 8px; }
  .qt-chips { order: 5; flex-basis: 100%; }
  .qt-head { flex: 1; }
}

/* Department overview: tiles, and a card per project with how it is doing */
.pj-ovtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pj-ovtile { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .78); border: 1px solid var(--pj-hair, rgba(15, 80, 60, .1)); text-decoration: none; color: inherit; box-shadow: 0 4px 14px rgba(15, 60, 45, .06); }
.pj-ovtile b { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--pj-i1, #12212B); }
.pj-ovtile span { font-size: 13px; color: var(--pj-i2, #4B5B66); }
.pj-ovtile.doing b { color: #2B7A9B; }
.pj-ovtile.wait b { color: #6E56CF; }
.pj-ovtile.late b { color: #B42318; }
.pj-ovtile.good b { color: #168468; }
.pj-ovhead { margin: 6px 2px 10px; }
.pj-ovhead small { font-size: 13px; color: var(--pj-i2, #4B5B66); margin-left: 6px; }
.pj-ovgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pj-ovgrid.one { grid-template-columns: minmax(0, 560px); }
.pj-ovcard { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .82); border: 1px solid var(--pj-hair, rgba(15, 80, 60, .1)); box-shadow: 0 6px 20px rgba(15, 60, 45, .07); }
.pj-ovcard.locked { opacity: .85; }
.pj-ovcard-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pj-ovcard-h b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-ovcard-h small { font-size: 12.5px; color: var(--pj-i2, #4B5B66); }
.pj-health { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pj-health.good { background: #D8F1EA; color: #0B5E45; }
.pj-health.watch { background: #FFF1D6; color: #7A4E0E; }
.pj-health.late { background: #FDE3E1; color: #9B1C14; }
.pj-health.empty { background: #EEF2F5; color: #4B5B66; }
.pj-ovpct { display: flex; align-items: baseline; gap: 8px; }
.pj-ovpct b { font-size: 26px; font-weight: 800; }
.pj-ovpct span { font-size: 13px; color: var(--pj-i2, #4B5B66); }
.pj-ovbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #EEF2F5; gap: 2px; }
.pj-ovbar i { display: block; min-width: 0; }
.pj-ovbar .done { background: #22A785; }
.pj-ovbar .doing { background: #4BA3C7; }
.pj-ovbar .wait { background: #8B74E0; }
.pj-ovbar .todo { background: #D5DEE5; }
.pj-ovfacts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--pj-i2, #4B5B66); }
.pj-ovfacts span { display: inline-flex; align-items: center; gap: 6px; }
.pj-ovfacts i { width: 8px; height: 8px; border-radius: 50%; background: #D5DEE5; }
.pj-ovfacts i.doing { background: #4BA3C7; }
.pj-ovfacts i.wait { background: #8B74E0; }
.pj-ovfacts i.late { background: #D1453B; }
.pj-ovfacts .late { color: #B42318; font-weight: 700; }
.pj-ovfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid rgba(15, 34, 51, .06); }
.pj-ovfoot small { font-size: 12.5px; color: var(--pj-i2, #4B5B66); }
.pj-ovempty p { margin: 0; }

/* All activity */
.pj-actday { margin-bottom: 12px; }
.pj-actrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 2px; border-top: 1px solid rgba(15, 34, 51, .05); }
.pj-actrow:first-of-type { border-top: 0; }
.pj-actrow p { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.pj-actrow a { color: inherit; }
.pj-actrow small { display: block; font-size: 12px; color: var(--pj-i2, #4B5B66); }
/* Work as CEO or employee (QC Projects sidebar and CEO dashboard) */
.pj-work { display: grid; gap: 6px; margin: 4px 4px 12px; }
.pj-work > span { font-size: 11.5px; font-weight: 700; color: var(--pj-i2, #4B5B66); padding-left: 2px; }
.pj-body > .pj-work { display: none; }
@media (max-width: 900px) { .pj-body > .pj-work { display: grid; max-width: 320px; margin: 0 0 12px; } }

/* CEO dashboard */
.pj-ceotop { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .pj-ceotop { grid-template-columns: 1fr; } }
.pj-ceoweeks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 170px; padding-top: 6px; }
.pj-ceoweek { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; height: 100%; text-align: center; }
.pj-ceobars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 100%; }
.pj-ceobars i { width: 14px; min-height: 3px; border-radius: 6px 6px 2px 2px; display: block; }
.pj-ceobars .new { background: #D5DEE5; }
.pj-ceobars .fin { background: #22A785; }
.pj-ceoweek small { font-size: 11px; color: var(--pj-i2, #4B5B66); }
.pj-ceoweek b { font-size: 13px; }
.pj-lateperson { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pj-lateperson b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-ceodept a.pj-ovcard-h { color: inherit; text-decoration: none; }
.pj-ceoprojs { display: grid; gap: 4px; }
.pj-ceoproj { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.pj-ceoproj:hover { background: rgba(18, 128, 95, .06); }
.pj-ceoproj-n b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-ceoproj-n small { font-size: 12px; color: var(--pj-i2, #4B5B66); }
.pj-ceopct { font-weight: 800; font-size: 14px; }
.pj-health.dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; }
.pj-health.dot.good { background: #22A785; }
.pj-health.dot.watch { background: #E2A93B; }
.pj-health.dot.late { background: #D1453B; }
.pj-health.dot.empty { background: #C5CFD6; }

/* Team & access: CEO dashboard tick under the role */
.am-rolecell { display: grid; gap: 4px; }
.am-ceo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--slate); cursor: pointer; }
.am-ceo input { width: 15px; height: 15px; min-height: 0; margin: 0; }
small.am-ceo.on { color: var(--green-deep); cursor: default; }
/* One colour code for task progress: on bars, legends, tiles, status labels and board columns */
body.on-pj { --st-done: #168468; --st-doing: #1E88B4; --st-waiting: #7C5CD6; --st-late: #D1453B; --st-todo: #C3CDD5; }
.pj-wbar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: #E9EEF2; }
.pj-wbar.big { height: 18px; }
.pj-wbar i { display: block; min-width: 6px; }
.pj-wbar .done, .pj-wlegend .done { background: var(--st-done); }
.pj-wbar .doing, .pj-wlegend .doing { background: var(--st-doing); }
.pj-wbar .waiting, .pj-wlegend .waiting { background: var(--st-waiting); }
.pj-wbar .late, .pj-wlegend .late { background: var(--st-late); }
.pj-wbar .todo, .pj-wlegend .todo { background: var(--st-todo); }
.pj-wlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--pj-i2, #4B5B66); }
.pj-wlegend li { display: inline-flex; align-items: center; gap: 6px; }
.pj-wlegend li.zero { opacity: .72; }
.pj-wlegend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pj-wlegend b { color: var(--pj-i1, #12212B); }
.pj-ovwork { display: grid; gap: 10px; margin-bottom: 18px; }
.pj-ovwork .pj-panel-h { margin-bottom: 0; }
.pj-ovline { margin: 0 0 10px; font-size: 14px; }
.pj-ovwork .pj-ovline { margin: 0; }
a.pj-ovcard { color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.pj-ovcard:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 60, 45, .12); }
@media (prefers-reduced-motion: reduce) { a.pj-ovcard { transition: none; } a.pj-ovcard:hover { transform: none; } }

/* tiles */
body.on-pj .pj-ovtile.done b { color: var(--st-done); }
body.on-pj .pj-ovtile.doing b { color: var(--st-doing); }
body.on-pj .pj-ovtile.waiting b { color: var(--st-waiting); }
body.on-pj .pj-ovtile.late b { color: var(--st-late); }
body.on-pj .pj-ovtile.todo b { color: #5F6F7A; }

/* health dots use the plain class names */
.pj-health.dot.good { background: var(--st-done); }
.pj-health.dot.watch { background: #E2A93B; }
.pj-health.dot.late { background: var(--st-late); }

/* status labels, small bars and the status breakdown */
body.on-pj .pj-st-prog, body.on-pj .pj-stsel.pj-st-prog { background-color: #DDEFF7; color: #135F80; }
body.on-pj .pj-st-done, body.on-pj .pj-stsel.pj-st-done { background-color: #DCF2E9; color: #0B5E45; }
body.on-pj .pj-st-wait, body.on-pj .pj-stsel.pj-st-wait { background-color: #ECE7FB; color: #553BB0; }
body.on-pj .pj-st-late { background-color: #FBE4E2; color: #A32A21; }
body.on-pj .pj-prog { gap: 2px; }
body.on-pj .pj-prog .d { background: var(--st-done); }
body.on-pj .pj-prog .p { background: var(--st-doing); }
body.on-pj .pj-prog .w { background: var(--st-waiting); }
body.on-pj .pj-prog .l { background: var(--st-late); }
body.on-pj .pj-stack i { background: var(--st-todo); }
body.on-pj .pj-stack i.pj-st-prog { background: var(--st-doing); }
body.on-pj .pj-stack i.pj-st-wait { background: var(--st-waiting); }
body.on-pj .pj-stack i.pj-st-done { background: var(--st-done); }

/* board columns: a dot in the same colour */
.pj-colh[data-st]::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--st-todo); }
.pj-colh[data-st=pj-st-prog]::before { background: var(--st-doing); }
.pj-colh[data-st=pj-st-wait]::before { background: var(--st-waiting); }
.pj-colh[data-st=pj-st-done]::before { background: var(--st-done); }

/* The app download page */
.dl { min-height: 100dvh; display: flex; flex-direction: column; }
.dl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: min(760px, 100%); margin: 0 auto; padding: 20px 16px 8px; }
.dl-main { display: grid; gap: 16px; width: min(760px, 100%); margin: 0 auto; padding: 8px 16px 40px; }
.dl-card { padding: 24px; }
.dl-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.dl-head img { border-radius: 18px; flex: none; box-shadow: var(--shadow-1); }
.dl-head h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.15; color: var(--navy-ink); }
.dl-head p { margin: 0; color: var(--slate); }
.dl-btn { margin-bottom: 18px; }
.dl-note { margin: -8px 0 0; font-size: 14px; color: var(--slate); }
.dl-link { border: 0; padding: 0; background: none; font: inherit; color: var(--action); text-decoration: underline; cursor: pointer; }
.dl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px 20px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.dl-facts dt { font-size: 13px; color: var(--slate); }
.dl-facts dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); }
.dl-card h2 { margin: 0 0 12px; font-size: 18px; color: var(--navy-ink); }
.dl-card .install-steps { margin-bottom: 0; }
.dl-card[data-steps].on { outline: 2px solid var(--action); outline-offset: -2px; }
.dl-gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 20px; padding: 4px 8px; }
.dl-gets b { display: block; margin-bottom: 2px; color: var(--navy-ink); }
.dl-gets span { font-size: 14px; color: var(--slate); }
.dl-warn { margin: 12px 0; font-size: 14px; color: var(--slate); }
.dl-card .dl-gets { padding: 0; }
.dl-other { margin: 0; padding: 0 8px; font-size: 14px; color: var(--slate); }
@media (max-width: 480px) { .dl-head { align-items: flex-start; } .dl-head h1 { font-size: 23px; } .dl-head img { width: 56px; height: 56px; border-radius: 14px; } .dl-card { padding: 18px; } }

/* Who can change a task, and the order of work */
.pj-ownnote { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; font-size: 13px; color: var(--pj-i2, #4B5B66); }
.pj-ownnote svg { flex: none; width: 14px; height: 14px; }
.pj-st.pj-st-after { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; width: fit-content; background: #FFF1D6; color: #7A4E0E; }
.pj-st.pj-st-after svg { width: 13px; height: 13px; }
.pj-order .pj-flabel { display: block; margin: 8px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--pj-i2, #4B5B66); }
.pj-order .pj-linkrow { display: flex; align-items: center; gap: 6px; }
.pj-order .pj-linkrow .pj-minirow { flex: 1; min-width: 0; }

/* Live wall: each card's size is set before its photo shows, so rows never jump */
.fx-marquee .wc, .fx-filmstrip .wc { height: 100%; width: calc(var(--thick) * var(--ar)); }
.fx-marquee .wc img, .fx-marquee .wc video, .fx-filmstrip .wc img, .fx-filmstrip .wc video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-rise .wc { width: 100%; height: calc(var(--thick) / var(--ar)); flex: none; }
.fx-rise .wc img, .fx-rise .wc video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lane-track { backface-visibility: hidden; }
/* Blur over moving photos is what makes a big screen stutter: solid glass instead */
.live-screen .wc figcaption { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .62); }
.live-screen .new-moment { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 3, 8, .82); }
.live-screen .live-join, .live-screen .live-chat { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Getting the wall ready */

/* ========== Premium wall: every size in screen units and every decoration in vector, so it holds up on the biggest displays ========== */
/* Refined type */
.live-title b { letter-spacing: .005em; }

/* Side columns: hanging lamps and candles live here, and the header and photos stay between them */
.live-screen { --sides: 0vmin; }
.live-screen.has-ornaments { --sides: 8.5vmin; }
.live-screen.has-sides { --sides: 14.5vmin; }
.live-screen.has-ornaments .live-head { margin-left: var(--sides); margin-right: var(--sides); }
.live-screen.has-sides .live-head { margin-left: var(--sides); margin-right: var(--sides); }
.live-screen.has-sides.side-open .live-head, .live-screen.side-open .live-body, .live-screen.side-open .live-ticker { margin-right: min(380px, 92vw); }
.live-screen.has-swags .live-head { padding-top: 6vmin; }
.fx-lanterns, .fx-jhoomar { left: 0; right: 0; top: 0; height: 60vmin; z-index: 3; }
.fx-jhoomar .lamp { position: absolute; top: 0; width: calc(9vmin * var(--s)); margin-left: calc(-4.5vmin * var(--s)); transform-origin: top center; animation: lampSway 9s ease-in-out infinite; will-change: transform; }
.fx-jhoomar .lamp::before { content: ""; position: absolute; left: -40%; right: -40%; bottom: -8%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 180, 90, .3), transparent); }
@keyframes lampSway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
.fx-jhoomar .lamp svg { width: 100%; height: auto; display: block; }
.fx-pillars { left: 0; right: 0; bottom: .6vmin; height: 34vmin; z-index: 3; }
.with-ticker .fx-pillars { bottom: 5.8vmin; }
.fx-pillars .pl { position: absolute; bottom: 0; width: 11vmin; }
.fx-pillars .pl.l { left: 1vmin; } .fx-pillars .pl.r { right: 1vmin; }
.fx-pillars svg { width: 100%; height: auto; display: block; overflow: visible; }
.fx-pillars .flame { transform-box: fill-box; transform-origin: 50% 90%; animation: flicker 1.4s steps(6) infinite alternate; }
.has-pillars .fx-diyas, .has-pillars .fx-candles { padding-left: 14vmin; padding-right: 14vmin; }
.fx-swags { left: 0; right: 0; top: 0; height: 5.4vmin; z-index: 3; }
.fx-swags svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-swags .bell { position: absolute; top: .2vmin; width: 1.5vmin; height: 2.2vmin; margin-left: -.75vmin; border-radius: 50% 50% 12% 12%; background: linear-gradient(90deg, #7A5420, #F2D592 45%, #6E4A1B); transform-origin: top center; animation: sway 6s ease-in-out infinite; }
.fx-mandala { inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; }
.fx-mandala svg { width: 118vmin; height: 118vmin; flex: none; opacity: .13; animation: spin 240s linear infinite; }
.wall-fx.show-mandala .fx-mandala, .wall-fx.show-rays .fx-rays, .wall-fx.show-vignette .fx-vignette, .wall-fx.show-ornaments .fx-ornaments, .wall-fx.show-jhoomar .fx-jhoomar, .wall-fx.show-swags .fx-swags, .wall-fx.show-pillars .fx-pillars { opacity: 1; }
.fx-rays { inset: 0; z-index: 0; background: conic-gradient(from 168deg at 50% -18%, transparent 0deg, rgba(255, 222, 160, .13) 5deg, transparent 10deg, rgba(255, 222, 160, .08) 15deg, transparent 21deg); }
.fx-vignette { inset: 0; z-index: 1; background: radial-gradient(75% 75% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.fx-ornaments { inset: 0; z-index: 3; }
.fx-ornaments span { position: absolute; width: 7vmin; height: 7vmin; opacity: .75; }
.fx-ornaments svg { width: 100%; height: 100%; display: block; }
.fx-ornaments .tl { left: 1vmin; top: 1vmin; } .fx-ornaments .tr { right: 1vmin; top: 1vmin; transform: scaleX(-1); }
.fx-ornaments .bl { left: 1vmin; bottom: 1vmin; transform: scaleY(-1); } .fx-ornaments .br { right: 1vmin; bottom: 1vmin; transform: scale(-1); }
/* corners stay out of the way of hanging lamps and candles */
.has-sides .fx-ornaments .tl, .has-sides .fx-ornaments .tr, .has-sides .fx-ornaments .bl, .has-sides .fx-ornaments .br, .has-swags .fx-ornaments .tl, .has-swags .fx-ornaments .tr { display: none; }
/* Tall screens and the 9:16 story have no room for side columns */
.live-story.has-sides, .live-screen.live-story { --sides: 0vmin; }
.live-story .fx-jhoomar, .live-story .fx-lanterns, .live-story .fx-pillars, .live-story .fx-toran .strand { display: none; }
@media (max-aspect-ratio: 1/1) { .live-screen { --sides: 0vmin !important; } .fx-jhoomar, .fx-lanterns, .fx-pillars, .fx-toran .strand { display: none; } }

/* Themes */
.live-screen[data-theme="diwali-luxe"] .live-bg { background: radial-gradient(90% 60% at 50% -6%, #3A2A14 0%, rgba(58, 42, 20, 0) 62%), radial-gradient(120% 90% at 50% 112%, #2A1608 0%, #120C08 45%, #070504 100%); }
.live-screen[data-theme="temple-gold"] .live-bg { background: radial-gradient(90% 70% at 50% -8%, #8A3A14 0%, rgba(138, 58, 20, 0) 62%), linear-gradient(180deg, #3D0A12 0%, #260609 60%, #150305 100%); }
.live-screen[data-theme="ivory-gold"] .live-bg { background: radial-gradient(90% 70% at 50% -10%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #FBF6EA 0%, #F2E8D2 100%); }
.live-screen[data-theme="ivory-gold"] { --wall-gold: #9C7429; }
.live-screen[data-theme="ivory-gold"] .live-title b { color: #6E4F18; }
.live-screen[data-theme="ivory-gold"] .fx-mandala svg { opacity: .22; }
.live-screen[data-theme="gptw-luxe"] .live-bg { background: radial-gradient(70% 55% at 50% -6%, rgba(215, 38, 46, .34) 0%, rgba(215, 38, 46, 0) 70%), linear-gradient(180deg, #14181F 0%, #0B0E13 100%); }
.live-screen[data-theme="gptw-luxe"] { --wall-gold: #F2545B; }

/* Depth rows */
.fx-depth { display: flex; flex-direction: column; gap: var(--gap); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.fx-depth .lane { min-height: 0; }
.fx-depth .lane-track { width: max-content; height: 100%; padding-right: var(--gap); }
.fx-depth .wc { flex: none; height: 100%; width: calc(var(--thick) * var(--ar)); }
.fx-depth .wc img, .fx-depth .wc video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-depth .lane:not(:nth-child(2)) { opacity: .72; }

/* Triptych */
.fx-triptych { display: grid; grid-template-columns: 1fr 1.34fr 1fr; gap: var(--gap); padding: 0 3vmin; }
.fx-triptych .tile .wc img, .fx-triptych .tile .wc video { object-fit: cover; }

/* Museum gallery: framed prints on the wall, each under its own light */
.fx-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3.4vmin; padding: 6vmin 3vmin 3vmin; }
.live-screen .fx-gallery .tile { overflow: visible; border-radius: .3vmin; padding: 1.8vmin; background: #FBF8F1; box-shadow: 0 0 0 .34vmin #1B140C, 0 0 0 .5vmin #C69A4C, 0 -1.6vmin 7vmin rgba(255, 226, 170, .2), 0 3vmin 5vmin -1.5vmin rgba(0, 0, 0, .75); }
.fx-gallery .tile-layer { inset: 1.8vmin; overflow: hidden; }
.fx-gallery .tile-blur { display: none; }
.fx-gallery .tile .wc { background: #1A1418; }
.fx-gallery .tile .wc img, .fx-gallery .tile .wc video { object-fit: cover; animation: none; }
@media (max-aspect-ratio: 1/1) { .fx-gallery { grid-template-columns: 1fr; } }

/* Grid and mosaic: photos fill their tile, with no bars */
.fx-grid .tile .wc img, .fx-mosaic .tile .wc img, .fx-grid .tile .wc video, .fx-mosaic .tile .wc video { object-fit: cover; }
.fx-grid .tile-blur, .fx-mosaic .tile-blur { display: none; }

/* Polaroid wall: the number of prints asked for, with room around each */
.fx-polaroid .pol-card { box-shadow: 0 1.4vmin 2.6vmin -1vmin rgba(0, 0, 0, .6); }

/* New moment: the print in a brass-edged mount */
.nm-img { box-shadow: 0 0 0 .2vmin #C69A4C, 0 5vmin 12vmin -3vmin rgba(0, 0, 0, .85); }

/* Collage: the words stay clear of the prints */
.cl-words { font-size: calc(min(33vmin, 23vw) / (var(--lines, 4) + .6)); text-align: center; }
/* Floor decorations stay above the photos' lower edge */
.has-floor .live-stage-wrap { padding-bottom: 10.5vmin; }
.live-screen.with-ticker.has-floor .live-stage-wrap { padding-bottom: 16vmin; }
/* 5K and up: the huge background layers stay still, leaving the graphics card's memory for the photos */
@media (min-width: 5000px) { .fx-mandala svg, .live-bg::before { animation: none; } .fx-jhoomar .lamp { animation: none; will-change: auto; } }

/* ========== Edge to edge, themed logo, type ========== */
/* Fonts live on this server, so a wall works with no internet at the venue */
@font-face { font-family: "Wall Cinzel"; src: url(/fonts/cinzel-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Wall Cinzel Deco"; src: url(/fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Wall Playfair"; src: url(/fonts/playfair-display-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Wall Playfair"; src: url(/fonts/playfair-display-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Wall Cormorant"; src: url(/fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Wall Cormorant"; src: url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Wall Great Vibes"; src: url(/fonts/great-vibes-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Wall Marcellus"; src: url(/fonts/marcellus-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Wall Yatra"; src: url(/fonts/yatra-one-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Wall Yatra"; src: url(/fonts/yatra-one-devanagari-400-normal.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; font-display: swap; }
@font-face { font-family: "Wall Montserrat"; src: url(/fonts/montserrat-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Wall Montserrat"; src: url(/fonts/montserrat-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* The stack: background, then photos, then what hangs in front of them, then the heading and message */
.live-screen .live-bg { z-index: auto; }
.live-screen .live-body { z-index: 4; }
.fx-lanterns, .fx-jhoomar, .fx-pillars, .fx-toran, .fx-swags, .fx-lights, .fx-ornaments, .fx-diyas, .fx-candles, .fx-anars { z-index: 5; }
.live-screen .live-head { z-index: 6; }
.live-screen .live-ticker { z-index: 7; }
.live-screen .new-moment { z-index: 8; }
.live-screen .live-tools, .live-screen .live-side { z-index: 9; }

/* Photos run from the left edge of the display to the right */
.live-screen .fx-grid, .live-screen .fx-spotlight, .live-screen .fx-cinema, .live-screen .fx-mosaic, .live-screen .fx-rise, .live-screen .fx-triptych { padding-left: 0; padding-right: 0; }
.live-screen .fx-gallery { padding: 5vmin 1.6vmin 3vmin; gap: 2vmin; }
.live-screen .fx-marquee, .live-screen .fx-depth { -webkit-mask-image: none; mask-image: none; }
.live-screen .live-chat { margin-left: 2vmin; margin-right: 2vmin; }

/* Heading row: the logo on the left, the heading on the right, with room to breathe */
.live-screen .live-head { gap: 3.6vmin; padding: 2.2vmin 3.4vmin 1.8vmin; }
.live-screen .live-title { flex-flow: row wrap; align-items: baseline; justify-content: flex-end; gap: .4vmin 2.6vmin; text-align: right; }
.live-screen .live-title b { flex: 0 0 100%; }
.live-screen[data-align="center"] .live-title { justify-content: center; text-align: center; }
.live-screen[data-align="left"] .live-title { justify-content: flex-start; text-align: left; }
.live-screen .live-title b { max-width: 100%; padding: .1em .06em .14em; font-family: var(--title-font); font-style: var(--title-style, normal); font-weight: var(--title-weight, 600); font-size: calc(var(--title-size, 5vmin) * var(--title-scale, 1)); line-height: 1.12; letter-spacing: .012em; }
.live-screen[data-tsize="s"] { --title-size: 3.8vmin; }
.live-screen[data-tsize="m"] { --title-size: 5vmin; }
.live-screen[data-tsize="l"] { --title-size: 6.2vmin; }
.live-screen[data-tsize="xl"] { --title-size: 7.4vmin; }
.live-sub { font-family: var(--sub-font); font-weight: 500; font-size: 2.1vmin; letter-spacing: .14em; color: var(--wall-ink); opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.live-sub[hidden] { display: none; }
.live-screen .live-badge { font-family: var(--sub-font); font-weight: 500; font-size: 1.7vmin; letter-spacing: .1em; }
.live-screen .live-ticker-track span { font-family: var(--sub-font); font-weight: 500; letter-spacing: .06em; }
.live-screen .live-join { font-family: var(--sub-font); }
.live-screen.live-story[data-align] .live-title { justify-content: center; text-align: center; }

/* The logo: its own shape, filled in the theme's metal or colour, with no plate behind it */
.live-screen { --logo-fill: linear-gradient(100deg, #9C6F2A 0%, #E8C77A 22%, #FFF2C9 38%, #D9A94E 55%, #F8DE8A 72%, #A97B31 100%); }
.live-brand { position: relative; flex: none; display: block; line-height: 0; }
.live-logofill { display: block; height: 7.6vmin; aspect-ratio: 1382 / 260; background: var(--logo-fill); background-size: 240% 100%; -webkit-mask: url(/brand/qc-logo.png) left center / contain no-repeat; mask: url(/brand/qc-logo.png) left center / contain no-repeat; animation: logoFoil 16s ease-in-out infinite alternate; }
@keyframes logoFoil { to { background-position: 100% 0; } }
.live-brand .live-logo { display: none; height: 7.6vmin; width: auto; filter: none; }
.live-screen[data-logo="original"] .live-logofill { display: none; }
.live-screen[data-logo="original"] .live-brand .live-logo { display: block; }
.live-story .live-logofill, .live-story .live-brand .live-logo { height: 6vmin; }
.live-screen[data-theme="ivory-gold"], .live-screen[data-theme="champagne"] { --logo-fill: linear-gradient(100deg, #6E4F18 0%, #A97F3E 30%, #C9A15C 48%, #8A6423 68%, #5E4214 100%); }
.live-screen[data-theme="rose-gold"], .live-screen[data-theme="birthday"], .live-screen[data-theme="sunset"] { --logo-fill: linear-gradient(100deg, #B9745F 0%, #F2C4B0 30%, #FFE9DE 46%, #E5A68F 64%, #B9745F 100%); }
.live-screen[data-theme="pastel"] { --logo-fill: linear-gradient(100deg, #8A5C78, #B583A1, #8A5C78); }
.live-screen[data-theme="sapphire"], .live-screen[data-theme="fireworks"] { --logo-fill: linear-gradient(100deg, #9FC2EC 0%, #E4F0FF 40%, #FFFFFF 52%, #A9CBF2 100%); }
.live-screen[data-theme="emerald"] { --logo-fill: linear-gradient(100deg, #B98A3A 0%, #F8DE8A 36%, #FFF2C9 50%, #D9A94E 100%); }
.live-screen[data-theme="aurora"], .live-screen[data-theme="qc"] { --logo-fill: linear-gradient(100deg, #7FE0C6 0%, #E6FFF7 45%, #FFFFFF 55%, #8FD0F2 100%); }
.live-screen[data-theme="noir"], .live-screen[data-theme="midnight"], .live-screen[data-theme="gptw-luxe"] { --logo-fill: linear-gradient(100deg, #A9B0B8 0%, #F4F6F8 42%, #FFFFFF 52%, #B9C0C8 100%); }
.live-screen[data-theme="gptw"] { --logo-fill: linear-gradient(100deg, #8A1219, #D7262E 50%, #8A1219); }
.live-screen[data-theme="daylight"] { --logo-fill: linear-gradient(100deg, #1E5A80, #2F7FB0 50%, #1E5A80); }
.live-screen[data-logo="gold"] { --logo-fill: linear-gradient(100deg, #9C6F2A 0%, #E8C77A 22%, #FFF2C9 38%, #D9A94E 55%, #F8DE8A 72%, #A97B31 100%); }
.live-screen[data-logo="white"] { --logo-fill: linear-gradient(#FFF, #FFF); }
@media (prefers-reduced-motion: reduce) { .live-logofill { animation: none; } }


/* ============================================================
   One look across QC Arena: the Quick Clean brand kit
   Calibri, brand blue and green, frosted glass over one soft backdrop, spring motion.
   The camera booth and the live wall keep their own looks on purpose.
   ============================================================ */
:root {
  --qc-grad: linear-gradient(135deg, #2F7FB0 0%, #22A785 100%);
  --qc-grad-hover: linear-gradient(135deg, #3A8CC0 0%, #2AB592 100%);
  --qc-backdrop:
    radial-gradient(1100px 620px at 6% -10%, rgba(73, 160, 210, .24), transparent 60%),
    radial-gradient(900px 600px at 104% 6%, rgba(34, 167, 133, .2), transparent 62%),
    linear-gradient(180deg, #EEF6FB 0%, #F4F9FA 48%, #EFF8F5 100%);
  --qc-spring: cubic-bezier(.22, 1.25, .36, 1);
  --qc-ease: cubic-bezier(.2, .8, .2, 1);
}
body:not(.on-live), body.on-pj { background: var(--qc-backdrop) fixed; }
body.on-pj {
  --pj-font: var(--font);
  --pj-ink: #1E1E1E; --pj-sub: #5F6368; --pj-faint: #A0A4A8; --pj-hair: rgba(30, 90, 128, .13);
  --pj-teal: #22A785;
  --pj-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 12px 32px -16px rgba(30, 90, 128, .3), 0 2px 6px -2px rgba(30, 90, 128, .08);
  --pj-shadow-up: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 44px -18px rgba(30, 90, 128, .36), 0 4px 10px -4px rgba(30, 90, 128, .12);
  font-family: var(--font);
}
body .sticky-actions { background: linear-gradient(to top, rgba(240, 247, 250, .96) 70%, rgba(240, 247, 250, 0)); }

/* The one primary button */
body:not(.cine) .btn.primary, body.on-pj:not(.cine) .btn.primary {
  background: var(--qc-grad); color: #fff; border-color: rgba(30, 90, 128, .18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 10px 22px -10px rgba(34, 130, 140, .75);
}
body:not(.cine) .btn.primary:hover, body.on-pj:not(.cine) .btn.primary:hover { background: var(--qc-grad-hover); }

/* Answers the finger: a quick spring on every button */
.btn, .icon-btn, .apps-btn, .hub-app.live, .m-event, .chip { transition: transform .38s var(--qc-spring), box-shadow .25s var(--qc-ease), background-color .2s var(--qc-ease), color .2s var(--qc-ease), border-color .2s var(--qc-ease); }
.btn:active, .icon-btn:active, .apps-btn:active { transform: scale(.96); transition-duration: .12s; }
.hub-app.live:hover { transform: translateY(-3px); }
.hub-app.live:active { transform: scale(.985); }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

/* All apps */
.topbar .apps-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin-left: 6px; padding: 0 12px; border: 1px solid rgba(47, 127, 176, .22); border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); color: var(--navy-ink); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 0 #fff inset, 0 4px 12px -8px rgba(30, 90, 128, .5); }
.topbar .apps-btn svg { width: 17px; height: 17px; }
.topbar .apps-btn:hover { background: #fff; }
.topbar .apps-btn[aria-expanded="true"] { background: var(--blue-mist); border-color: rgba(47, 127, 176, .4); }
.apps-menu { position: fixed; z-index: 200; width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow: auto; padding: 8px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); box-shadow: 0 1px 0 #fff inset, 0 28px 60px -20px rgba(30, 90, 128, .45), 0 6px 16px -8px rgba(30, 90, 128, .2); transform-origin: top right; animation: appsIn .32s var(--qc-spring); }
@keyframes appsIn { from { opacity: 0; transform: translateY(-6px) scale(.94); } to { opacity: 1; transform: none; } }
.apps-menu a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; transition: background-color .16s var(--qc-ease), transform .3s var(--qc-spring); }
.apps-menu a:hover { background: rgba(47, 127, 176, .1); }
.apps-menu a:active { transform: scale(.98); }
.apps-menu .apps-home { min-height: 42px; margin-bottom: 4px; color: var(--navy-ink); border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.apps-menu .apps-home svg { width: 18px; height: 18px; }
.apps-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--qc-grad); color: #fff; box-shadow: 0 6px 12px -7px rgba(34, 130, 140, .8); }
.apps-icon svg { width: 18px; height: 18px; }
.apps-menu a[aria-current="page"] { background: var(--blue-mist); color: var(--navy-ink); font-weight: 700; }

/* QC Moments: posting shows at once */
.live-dot.sending { background: var(--blue-deep); }
.live-dot.failed { background: #B3261E; }
.live-dot.failed::before { animation: none; }
.m-notposted { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid #F2C9C6; border-radius: 14px; background: var(--danger-mist); color: var(--danger); font: inherit; text-align: left; cursor: pointer; }
.m-notposted svg { flex: none; width: 20px; height: 20px; }
.m-notposted span { display: flex; flex-direction: column; }

/* The booth when the phone turns: the buttons stay where they are, and what's on them turns to face you */
.booth-turn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: transform .42s var(--qc-spring); }
.booth-turn .booth-rec { pointer-events: none; }
.booth-pill svg { display: none; width: 22px; height: 22px; }
.booth-icon svg, .booth-icon b, .booth-pill svg, .booth-frame-thumb canvas, .booth-modes button span { transform: rotate(var(--turn, 0deg)); transition: transform .42s var(--qc-spring); }
.booth.turned .booth-pill { width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.booth.turned .booth-pill span { display: none; }
.booth.turned .booth-pill svg { display: block; }
.booth.turned .booth-formats { display: none; }
.booth.turned .booth-frame small { visibility: hidden; height: 0; }
.booth.turned .booth-modes button { writing-mode: vertical-rl; min-height: 58px; padding: 4px 10px; }
.booth[style*="--turn: -90deg"] .booth-modes button { transform: rotate(180deg); }
.booth-formats button[aria-checked="true"], .booth-frame[aria-checked="true"], .booth-modes button[aria-checked="true"] { color: #7FE0C6; }
.booth-frame[aria-checked="true"] .booth-frame-thumb { box-shadow: 0 0 0 3px #7FE0C6; }

/* Screen rotation on: the picture takes the screen, with the buttons down the sides */
@media (orientation: landscape) and (max-height: 560px) {
  .booth { flex-direction: row; }
  .booth-top { flex-direction: column; justify-content: space-between; padding: calc(10px + var(--safe-t)) 8px calc(10px + var(--safe-b)) max(10px, env(safe-area-inset-left, 0px)); }
  .booth-top-right { flex-direction: column; }
  .booth-pill { width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; }
  .booth-pill span { display: none; }
  .booth-pill svg { display: block; }
  .booth-stage { min-width: 0; padding: 8px 6px; }
  .booth-bottom { width: 236px; flex: none; justify-content: center; gap: 8px; padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px 0; border-top: 0; overflow: auto; }
  .booth-formats { justify-content: flex-start; }
  .booth-frames { padding: 4px 80px; }
  .booth-frame { width: 58px; }
  .booth-frame-thumb { width: 50px; height: 50px; }
  .booth-frame small { display: none; }
  .booth-modes { margin: 0 auto; }
  .booth-controls { padding: 0 8px; }
  .booth-shutter { width: 66px; height: 66px; }
  .booth-shutter span { width: 50px; height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .icon-btn, .apps-btn, .hub-app.live, .m-event, .chip, .apps-menu a, .booth-turn, .booth-icon svg, .booth-icon b, .booth-pill svg, .booth-frame-thumb canvas { transition: none; }
  .apps-menu { animation: none; }
  .btn:active, .icon-btn:active, .apps-btn:active, .hub-app.live:hover, .hub-app.live:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .apps-menu, .topbar .apps-btn { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* QC Moments in the brand colours */
body:not(.cine) .moment[class] .cam-btn.m-shoot { background: var(--qc-grad); box-shadow: 0 22px 44px -22px rgba(34, 130, 140, .75); }
body:not(.cine) .moment-event[class] { background: var(--qc-grad); box-shadow: 0 16px 30px -18px rgba(34, 130, 140, .7); transition: transform .38s var(--qc-spring), box-shadow .25s var(--qc-ease); }
body .moment-event[class]:hover { transform: translateY(-3px); }
body .moment-event[class]:active { transform: scale(.985); }
body:not(.cine) .moment-event .me-glow { display: none; }
body:not(.cine) .moment[class] .frame-opt[aria-checked="true"] { border-color: var(--blue-deep); background: var(--blue-mist); }
body:not(.cine) .m-kicker { color: var(--green-deep); }
body:not(.cine) .moment h1, body:not(.cine) .moment .m-title { font-family: var(--font); font-style: normal; font-weight: 700; color: var(--navy-ink); }
body:not(.cine) .m-posted-bar { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 0 #fff inset, 0 16px 34px -18px rgba(30, 90, 128, .4); }
body:not(.cine) .m-pb { color: var(--navy-ink); }
body:not(.cine) .m-pb span { background: var(--blue-mist); transition: transform .34s var(--qc-spring); }
body:not(.cine) .m-pb-main span { background: var(--qc-grad); color: #fff; box-shadow: 0 10px 22px -10px rgba(34, 130, 140, .85); }

/* Post live is always in reach, never below the fold and never under anything */
body .m-capture:has(.m-stage) .sticky-actions, body .m-capture:has(.m-clip) .sticky-actions { position: sticky; bottom: calc(8px + var(--safe-b)); z-index: 25; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 16px 34px -16px rgba(30, 90, 128, .45); }
body:has(.m-capture) .install-pop, body:has(.m-posted) .install-pop { display: none; }

/* The install suggestion on a phone: words across the top, buttons under them */
@media (max-width: 559px) {
  .install-pop { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 8px 10px; }
  .install-pop .grow { grid-column: 2 / -1; min-width: 0; }
  .install-pop [data-later] { grid-column: 3; }
  .install-pop [data-install] { grid-column: 4; }
}

/* Event cards: the status stays readable on the brand colour */
body .moment-event[class] .chip, body:not(.cine) .moment-event[class] .chip.ok, body:not(.cine) .moment-event[class] .chip.warn { background: rgba(255, 255, 255, .94) !important; color: var(--navy-ink) !important; border-color: transparent !important; flex: none; min-height: 26px; padding: 2px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; }
body .vs-head h1, body .ps-head h1 { font-family: var(--font); font-style: normal; font-weight: 700; color: var(--navy-ink); }


/* Live wall: the QR code sits in the bottom right corner, clear of the title */
.live-screen > .live-join { position: absolute; right: 2.4vmin; bottom: 2.4vmin; z-index: 6; flex-direction: column; gap: .7vmin; padding: 1vmin 1vmin .8vmin; border-radius: 1.6vmin; background: rgba(12, 10, 18, .62); color: #fff; font-size: 1.6vmin; font-weight: 700; line-height: 1.1; text-align: center; box-shadow: 0 1.2vmin 3vmin -1vmin rgba(0, 0, 0, .6); transition: right .3s ease; }
.live-screen > .live-join[hidden] { display: none; }
.live-screen.light-theme > .live-join { background: rgba(255, 255, 255, .9); color: var(--navy-ink); }
.live-screen > .live-join .live-qr { width: 11vmin; height: 11vmin; }
.live-screen.with-ticker > .live-join { bottom: 7vmin; }
.live-screen.side-open > .live-join { right: calc(min(380px, 92vw) + 2.4vmin); }
.live-screen.with-chat .live-chat { margin-bottom: 19vmin; }
.live-screen.with-chat.with-ticker .live-chat { margin-bottom: 23vmin; }
.live-screen.live-story.with-chat .live-chat { margin-bottom: 0; }
.live-screen.live-story > .live-join .live-qr { width: 12vmin; height: 12vmin; }
.live-screen .live-tools, .live-screen.side-open .live-tools { left: 2vmin; right: auto; }
.live-wait { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.live-wait[hidden] { display: none; }

/* Print studio */
main.content:has(.ps2) { max-width: none; padding: 0; }
.ps2 { --ps-line: var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ps-side, .ps-insp { background: rgba(255, 255, 255, .86); }
.ps-side { order: 2; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--ps-line); }
.ps-work { order: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ps-insp { order: 3; padding: 14px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--ps-line); }
.ps-insp:has(.ps-empty-insp) { display: none; }
@media (min-width: 1180px) {
  .ps2 { grid-template-columns: 318px minmax(0, 1fr) 272px; height: calc(100dvh - var(--top-h) - var(--safe-t)); }
  .ps-side { order: 0; border-top: 0; border-right: 1px solid var(--ps-line); overflow: hidden; }
  .ps-work { order: 0; }
  .ps-insp { order: 0; border-top: 0; border-left: 1px solid var(--ps-line); overflow-y: auto; }
  .ps-insp:has(.ps-empty-insp) { display: flex; }
  .ps-panel { flex: 1; min-height: 0; overflow-y: auto; }
  .ps-stage { flex: 1; min-height: 0; }
}
@media (max-width: 1179px) { .ps-stage { height: 62dvh; } .ps2 { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 16px); } }
.ps-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--ps-line); }
.ps-tabs button { min-height: 42px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--slate); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.ps-tabs button[aria-selected="true"] { color: var(--navy-ink); border-bottom-color: var(--blue-deep); }
.ps-panel { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.ps-group { display: flex; flex-direction: column; gap: 9px; }
.ps-group h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy-ink); }
.ps-group + .ps-group { padding-top: 14px; border-top: 1px solid var(--ps-line); }
.ps-panel label, .ps-insp label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--slate); min-width: 0; }
.ps-panel select, .ps-panel input:not([type="checkbox"]):not([type="range"]):not([type="color"]), .ps-insp select, .ps-insp textarea, .ps-insp input:not([type="range"]):not([type="color"]) { width: 100%; min-height: 38px; padding: 6px 9px; font-size: 14px; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ps-range > span { display: flex; justify-content: space-between; gap: 8px; }
.ps-range output { color: var(--navy-ink); font-variant-numeric: tabular-nums; }
.ps-range input { width: 100%; accent-color: var(--blue-deep); }
.ps-panel .ps-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--ink); font-size: 14px; }
.ps-panel .ps-check input { width: 18px; height: 18px; accent-color: var(--blue-deep); }
.ps-panel .ps-inline, .ps-insp .ps-inline { flex-direction: row; align-items: center; justify-content: space-between; }
input[type="color"] { width: 46px; height: 34px; padding: 2px; border: 1px solid var(--ps-line); border-radius: 8px; background: #fff; cursor: pointer; }
.ps-two input[type="color"] { width: 100%; height: 38px; }
.ps-hint { margin: 0; font-size: 13px; line-height: 1.35; color: var(--slate); }
.ps-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--blue-mist); color: var(--navy-ink); font-size: 13px; line-height: 1.35; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.ps-lays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ps-lay { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border: 1px solid var(--ps-line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .12s; }
.ps-lay small { font-size: 12px; line-height: 1.15; text-align: center; }
.ps-lay-pic { position: relative; width: 40px; height: 54px; background: #fff; outline: 1px solid #C8D5DE; }
.ps-lay-pic i { position: absolute; display: block; border: 1px solid #fff; background: #A9CDE3; }
.ps-lay[aria-pressed="true"], .ps-sizes button[aria-pressed="true"], .ps-frame[aria-pressed="true"] { border-color: var(--blue-deep); background: var(--blue-mist); box-shadow: 0 0 0 1px var(--blue-deep); }
.ps-lay[aria-pressed="true"] .ps-lay-pic i { background: var(--blue-deep); }
.ps-lay-own { font-size: 14px; font-weight: 700; min-height: 38px; }
.ps-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ps-sizes button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 9px; border: 1px solid var(--ps-line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ps-sizes small { font-size: 12px; color: var(--slate); }
.ps-reset { align-self: flex-start; }
.ps-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1179px) and (min-width: 560px) { .ps-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ps-lays { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ps-frames { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.ps-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--blue-mist); }
.ps-thumb-main { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .35; transition: opacity .12s; }
.ps-thumb-main[aria-pressed="true"] img { opacity: 1; }
.ps-tick { position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .85); color: transparent; }
.ps-thumb-main[aria-pressed="true"] .ps-tick { background: var(--blue-deep); color: #fff; }
.ps-tick svg { width: 13px; height: 13px; }
.ps-thumb-add { position: absolute; right: 4px; bottom: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--navy-ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ps-thumb-add svg { width: 15px; height: 15px; }
.ps-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ps-frame { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 5px; border: 1px solid var(--ps-line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.ps-frame small { font-size: 12px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.ps-frame-pic { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #EEF3F7; }
.ps-frame-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-frame-pic i { position: absolute; inset: 0; display: block; background: linear-gradient(145deg, #7FA6B8, #C9B58F); }
.ps-fp-white i { inset: 6%; } .ps-fp-white { background: #fff; outline: 1px solid var(--ps-line); }
.ps-fp-polaroid i { inset: 7% 7% 24% 7%; } .ps-fp-polaroid { background: #FBFAF6; outline: 1px solid var(--ps-line); }
.ps-fp-line i { inset: 5%; } .ps-fp-line { background: #fff; outline: 1px solid var(--navy-ink); }
.ps-fp-shadow { background: #fff; } .ps-fp-shadow i { inset: 8%; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); }
.ps-fp-round i { border-radius: 14%; } .ps-fp-round { background: #fff; }
.ps-addlist { display: flex; flex-direction: column; gap: 7px; }
.ps-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--ps-line); }
.ps-bar-group { display: flex; align-items: center; gap: 2px; }
.ps-bar-end { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.ps-summary { font-size: 13px; color: var(--slate); min-width: 0; }
.ps-ico { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--navy-ink); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.ps-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps-ico:hover:not(:disabled), .ps-zoomval:hover { background: var(--blue-mist); }
.ps-ico:disabled { opacity: .3; cursor: default; }
.ps-zoomval { min-width: 54px; height: 36px; border: 0; border-radius: 9px; background: none; color: var(--navy-ink); font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.ps-stage { overflow: auto; padding: 20px; display: flex; background: #E4EBF0; touch-action: pan-x pan-y; }
.ps-sheet { position: relative; flex: none; background: #fff; }
.ps-live { margin: auto; box-shadow: 0 18px 40px -18px rgba(30, 90, 128, .55), 0 0 0 1px rgba(30, 90, 128, .12); }
.ps-clip { position: absolute; inset: 0; overflow: hidden; }
.ps-item { position: absolute; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.ps-live .ps-item { cursor: move; touch-action: pan-x pan-y; }
.ps-live .ps-item.sel { touch-action: none; }
.ps-item img { display: block; -webkit-user-drag: none; }
.ps-t-image img { width: 100%; height: 100%; object-fit: contain; }
.ps-photo { position: absolute; overflow: hidden; background: #ECE8E1; }
.ps-photo img { width: 100%; height: 100%; }
.ps-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ps-f-white { background: #fff; box-shadow: 0 0 0 .15mm rgba(0, 0, 0, .12); }
.ps-f-polaroid { background: #FBFAF6; box-shadow: 0 0 0 .15mm rgba(0, 0, 0, .1); }
.ps-f-line { background: #fff; outline: .3mm solid var(--navy-ink); outline-offset: -.3mm; }
.ps-f-shadow .ps-photo { box-shadow: 0 1mm 3.5mm rgba(0, 0, 0, .45); }
.ps-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 0 3mm; overflow: hidden; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; color: #2A2420; text-align: center; line-height: 1.05; }
.ps-cap[hidden] { display: none; }
.ps-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.15; }
.ps-cut { outline: .15mm dashed #A8A8A8; }
.ps-marginline { position: absolute; border: 1px dashed rgba(47, 127, 176, .5); border-width: calc(1px * var(--k, 1)); pointer-events: none; }
.ps-sel { position: absolute; pointer-events: none; outline: calc(2px * var(--k, 1)) solid var(--blue-deep); }
.ps-sel[hidden] { display: none; }
.ps-sel.cropping { outline-style: dashed; outline-color: var(--green-deep); }
.ps-sel.cropping .ps-h { display: none; }
.ps-h { --s: calc(13px * var(--k, 1)); position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 3px; background: #fff; border: calc(2px * var(--k, 1)) solid var(--blue-deep); box-sizing: border-box; pointer-events: auto; touch-action: none; }
.ps-h::after { content: ""; position: absolute; inset: calc(-10px * var(--k, 1)); }
.ps-h-nw { left: 0; top: 0; cursor: nwse-resize; } .ps-h-n { left: 50%; top: 0; cursor: ns-resize; } .ps-h-ne { left: 100%; top: 0; cursor: nesw-resize; }
.ps-h-e { left: 100%; top: 50%; cursor: ew-resize; } .ps-h-se { left: 100%; top: 100%; cursor: nwse-resize; } .ps-h-s { left: 50%; top: 100%; cursor: ns-resize; }
.ps-h-sw { left: 0; top: 100%; cursor: nesw-resize; } .ps-h-w { left: 0; top: 50%; cursor: ew-resize; }
.ps-h-rot { left: 50%; top: calc(-26px * var(--k, 1)); border-radius: 50%; background: var(--blue-deep); cursor: grab; }
.ps-guide { position: absolute; background: #E0328A; pointer-events: none; }
.ps-guide.v { top: 0; bottom: 0; width: calc(1px * var(--k, 1)); }
.ps-guide.h { left: 0; right: 0; height: calc(1px * var(--k, 1)); }
.ps-pages { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: rgba(255, 255, 255, .86); border-top: 1px solid var(--ps-line); flex-wrap: wrap; }
.ps-strip { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px; }
.ps-mini { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: inherit; color: var(--slate); }
.ps-mini[aria-current] { border-color: var(--blue-deep); color: var(--navy-ink); font-weight: 700; }
.ps-mini small { font-size: 11px; line-height: 1; }
.ps-mini-sheet { display: block; pointer-events: none; box-shadow: 0 0 0 1px #C8D5DE; }
.ps-jump { flex: none; }
.ps-page-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ps-seg button { flex: 1; min-width: 36px; min-height: 36px; border: 1px solid var(--ps-line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ps-seg button[aria-pressed="true"] { border-color: var(--blue-deep); background: var(--blue-mist); }
.ps-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 6px; }
.ps-acts .btn { padding: 0 6px; font-size: 13px; white-space: normal; line-height: 1.1; }
.ps-acts-end { grid-template-columns: 1fr 1fr; }


/* The big QR code: it takes the photos' place on the same wall, so the theme and every setting stay as they are */
.live-stage-inner { position: relative; height: 100%; }
.live-screen .join-show { position: absolute; inset: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vmin; text-align: center; color: var(--wall-ink); }
.join-show[hidden] { display: none !important; }
.join-qr { width: 52vmin; height: 52vmin; width: min(76cqh, 80cqw); height: min(76cqh, 80cqw); flex: none; box-sizing: border-box; padding: 1.4vmin; border-radius: 2vmin; background: #fff; box-shadow: 0 0 0 .4vmin var(--wall-gold), 0 2vmin 6vmin -1vmin rgba(0, 0, 0, .6); }
.join-qr svg { display: block; width: 100%; height: 100%; }
.join-cta { margin: .6vmin 0 0; font-family: var(--title-font); font-style: var(--title-style); font-weight: var(--title-weight); font-size: calc(4.6vmin * var(--title-scale, 1)); line-height: 1.05; color: var(--wall-gold); }
.join-url { margin: 0; font-family: var(--sub-font); font-size: 1.9vmin; font-weight: 600; opacity: .85; overflow-wrap: anywhere; }
.live-screen.join-on #stage { visibility: hidden; }
.live-screen.join-on .live-empty, .live-screen.join-on .live-wait, .live-screen.join-on .new-moment { display: none !important; }
.m-joinscreen b { display: inline-block; }

/* The studio needs the whole screen */
body:has(.ps2) .qc-today, body:has(.ps2) .install-pop { display: none !important; }

/* The All apps button on the dark gold and pink screens */
body.cine .topbar .apps-btn { background: rgba(255, 255, 255, .08); border-color: rgba(232, 199, 122, .4); color: #F6DFA0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.live-screen.light-theme .join-cta { color: var(--wall-ink); }

/* Before an event opens */
.m-waiting { padding-top: 12vh; }
.m-opens { margin: 18px 0 0; font-size: 22px; font-weight: 700; color: var(--cine-accent, var(--navy-ink)); }
.m-opens-sub { margin: 8px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.4; color: var(--cine-mute, var(--slate)); }

/* Dark gold and pink screens: nothing light behind cream text */
body.cine .m-capture:has(.m-stage) .sticky-actions, body.cine .m-capture:has(.m-clip) .sticky-actions { background: rgba(24, 15, 20, .9); border-color: rgba(232, 199, 122, .28); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .8); }
body.cine .m-capture .sticky-actions .btn:not(.primary):not(.danger) { background: rgba(255, 255, 255, .12); border-color: rgba(232, 199, 122, .55); color: #FFF6E2; }
body.cine .moment[class] .frame-opt[aria-checked="true"] { border-color: var(--cine-accent); background: rgba(232, 199, 122, .18); }
body.cine .moment[class] .frame-opt[aria-checked="true"] small { color: #FFF6E2; }
body.cine .m-view-bar { background: transparent; }
body.cine .sheet .icon-btn { color: var(--cine-ink); }
body.cine .sheet .btn:not(.primary):not(.danger) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #FFF6E2; }
body:has(.sheet) .install-pop { display: none; }
body:not(.cine) .m-draft { color: #8A5A00; }

/* Readable on every look */
body.cine .sheet label.f, body.cine .sheet .f { color: var(--cine-mute); }
.live-screen.light-theme .live-ticker span { color: var(--wall-ink); }
.pj-side-label { color: #6B7075; }
.wa-qr { width: min(280px, 100%); aspect-ratio: 1; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.wa-qr svg { display: block; width: 100%; height: 100%; }
.m-signin-rows { display: flex; flex-direction: column; gap: 10px; }
.m-signin-row { display: flex; gap: 10px; align-items: flex-start; }
.m-signin-row .chip { flex: none; margin-top: 2px; }

/* Music on the wall: a quiet prompt until someone clicks once */
.live-music-tap { position: absolute; left: 50%; bottom: 3vmin; z-index: 9; transform: translateX(-50%); padding: 1vmin 2.2vmin; border: 1px solid rgba(232, 199, 122, .5); border-radius: 999px; background: rgba(12, 10, 18, .78); color: #FFF6E2; font: 600 1.8vmin var(--sub-font, var(--font)); cursor: pointer; }
.live-music-tap[hidden] { display: none; }
.with-ticker .live-music-tap { bottom: 8vmin; }
.m-posted-card .m-posted-canvas { display: block; width: 100%; height: auto; }