/* =========================================================
   Global India Portal — minimal pink & white
   Colours come from the Global India logo:
     Rani pink #e30079 · Ink #1b1918
   Headings: Bodoni Moda (matches the Didot logo)
   Text:     Figtree
   ========================================================= */
@font-face { font-family: "Bodoni"; src: url(/fonts/display.woff2) format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni"; src: url(/fonts/display-ext.woff2) format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0; }
@font-face { font-family: "Figtree"; src: url(/fonts/body.woff2) format("woff2-variations"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url(/fonts/body-ext.woff2) format("woff2-variations"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+20A0-20C0; }

:root {
  --white: #ffffff;
  --rani: #e30079;        /* logo pink */
  --rani-deep: #b8005f;   /* hover / pressed */
  --ink: #1b1918;         /* logo black */
  --mauve: #6e5862;       /* secondary text */
  --blush: #fdf0f6;       /* soft panels */
  --blush-2: #fae1ed;     /* hover tint */
  --hair: #f0dbe5;        /* hairlines */
  --hair-strong: #e5c3d4;
  --good: #0b7a52;  --good-bg: #e6f5ee;
  --warn: #9a5700;  --warn-bg: #fdf1e1;
  --bad: #c0262d;   --bad-bg: #fdeaea;

  --r: 14px; --r-sm: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --display: "Bodoni", "Didot", "Bodoni MT", Georgia, serif;
  --text: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --lift: 0 1px 2px rgba(27, 25, 24, .04), 0 12px 28px -16px rgba(120, 0, 60, .22);
  font-size: 15.5px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--text); color: var(--ink); background: var(--white);
  line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: clip;
}
a { color: var(--rani); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 30; font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -0.015em; margin-bottom: .35rem; }
h2 { font-weight: 650; font-size: 1.08rem; margin-bottom: .9rem; }
h3 { font-weight: 650; font-size: 1rem; margin: 1.4rem 0 .3rem; }
.display { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 30; letter-spacing: -0.02em; }
.muted { color: var(--mauve); }
.small, small { font-size: .86rem; }
:focus-visible { outline: 2px solid var(--rani); outline-offset: 2px; border-radius: 6px; }
::selection { background: #ffd0e5; }

/* ---------------------------------------------------------
   Navbar: white → frosted glass on scroll
   --------------------------------------------------------- */
.navbar {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .0);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s, box-shadow .3s;
}
.navbar.scrolled {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--hair); box-shadow: 0 8px 24px -20px rgba(120, 0, 60, .35);
}
.nav-inner { max-width: 1200px; margin: 0 auto; height: 70px; padding: 0 28px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; }
.logo-img { display: block; height: 30px; width: auto; }
.nav-note { margin-left: auto; color: var(--mauve); font-size: .9rem; }

.nav-links { position: relative; display: flex; align-items: center; gap: 2px; height: 100%; }
.nav-link, .nav-links > a {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 0; background: none; cursor: pointer; border-radius: 8px;
  font: 600 .94rem var(--text); color: var(--ink); transition: color .2s, background .2s;
}
.nav-link:hover, .nav-links > a:hover { color: var(--rani); text-decoration: none; }
.nav-link.active { color: var(--rani); }
/* active-link animation: a pink thread that slides under the link */
.nav-indicator {
  position: absolute; left: 0; bottom: 14px; height: 2px; width: 0; border-radius: 2px;
  background: var(--rani); opacity: 0;
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .2s;
}
.chev { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.drop { position: relative; }
.drop.open .chev { transform: rotate(180deg); }
.drop-panel {
  position: absolute; top: calc(100% + 6px); left: -6px; min-width: 268px; padding: 6px;
  background: var(--white); border: 1px solid var(--hair); border-radius: var(--r);
  box-shadow: 0 24px 48px -24px rgba(120, 0, 60, .3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.drop.open .drop-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease); }
.drop-item { display: flex; flex-direction: column; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink); transition: background .15s; }
.drop-item b { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.drop-item small { color: var(--mauve); }
a.drop-item:hover { background: var(--blush); text-decoration: none; }
a.drop-item.active b { color: var(--rani); }
.drop-item.soon { opacity: .55; cursor: default; }
.pill { background: var(--rani); color: #fff; border-radius: 99px; padding: 0 7px; font-size: .74rem; font-weight: 700; line-height: 1.55; }

.who { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blush); color: var(--rani); font: 700 .8rem var(--text); border: 1px solid var(--hair);
}
.who-text { display: flex; flex-direction: column; line-height: 1.2; }
.who-text b { font-size: .88rem; font-weight: 600; }
.who-text small { color: var(--mauve); font-size: .78rem; }
.who form { margin: 0; }
.menu-btn { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; position: relative; margin-left: auto; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:first-child { top: 16px; } .menu-btn span:last-child { top: 23px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 19.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 19.5px; transform: rotate(-45deg); }

/* ---------------------------------------------------------
   Page + transitions
   --------------------------------------------------------- */
.content { max-width: 1200px; margin: 0 auto; padding: 22px 28px 80px; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .2s ease both; }
::view-transition-new(root) { animation: vt-in .35s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
.page-enter { animation: page-in .5s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------
   Login: split screen
   --------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.split-main { display: flex; flex-direction: column; padding: 40px clamp(24px, 6vw, 88px); }
.lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.lockup .logo-img { height: 40px; }
.tagline { font-size: .76rem; letter-spacing: .32em; text-transform: uppercase; color: var(--mauve); padding-left: 2px; }
.split-body { margin: auto 0; padding: 48px 0; max-width: 440px; }
.split-body h1 { font-size: clamp(2.3rem, 4vw, 3.3rem); line-height: 1.06; margin-bottom: 16px; }
.lede { color: var(--mauve); font-size: 1.05rem; margin: 0 0 30px; max-width: 42ch; }
.login-form { max-width: 400px; }
.foot-note { color: var(--mauve); font-size: .82rem; margin: 0; }

.split-art { position: relative; overflow: hidden; background: var(--blush); display: grid; place-items: center; }
.weave { /* fine woven-cloth texture */
  position: absolute; inset: 0; opacity: .4;
  background-image:
    repeating-linear-gradient(0deg, rgba(227, 0, 121, .05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(227, 0, 121, .05) 0 1px, transparent 1px 6px);
}
.paisley { position: relative; width: min(66%, 400px); height: auto; overflow: visible; }

/* the paisley draws itself once, line by line */
.paisley .ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .paisley .ln { stroke-dashoffset: 1; animation: draw 2.4s var(--ease) forwards; }
.js .paisley .ln-1 { animation-duration: 2.8s; }
.js .paisley .ln-2 { animation-delay: .5s; }
.js .paisley .ln-4 { animation-delay: 1.1s; }
.js .paisley .ln-5 { animation-delay: 1.5s; }
.js .paisley .dots, .js .paisley .ln-7, .js .paisley circle[stroke="none"] { stroke-dashoffset: 0; animation: fade-in 1s ease 2s both; }
.paisley .dots { stroke-dasharray: 0.1 13; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* Small centred pages (waiting for approval) */
body.plain:not(.wide) main { max-width: 480px; margin: 0 auto; padding: 8vh 20px 40px; }
.auth-card { padding: 32px; }
.auth-card.center { text-align: center; }
.auth-card h1 { font-size: 1.9rem; margin-bottom: 12px; }
.device-line { font-weight: 600; background: var(--blush); padding: 10px 14px; border-radius: var(--r-sm); display: inline-block; }
.pending-ring { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--rani); animation: spin 1.2s linear infinite; }
.pending-ring span { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   Home
   --------------------------------------------------------- */
.greet { padding: 26px 0 18px; }
.greet-date { margin: 0 0 6px; color: var(--rani); font-weight: 600; font-size: .92rem; }
.greet h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 8px; }
.greet p { margin: 0; }

.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 0 8px;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--white); overflow: hidden;
}
.stat { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; color: var(--ink); border-left: 1px solid var(--hair); transition: background .2s; }
.stat:first-child { border-left: 0; }
.stat:hover { background: var(--blush); text-decoration: none; }
.stat b { font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat span { color: var(--mauve); font-size: .9rem; }
.stat.warn b, .stat.bad b { color: var(--rani); }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tile {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--hair); border-radius: var(--r); background: var(--white);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: var(--hair-strong); }
.tile-icon { flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--blush); display: grid; place-items: center; overflow: hidden; }
.tile-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--rani); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.tile:hover .tile-icon svg { transform: scale(1.12); }
.tile-text { display: flex; flex-direction: column; min-width: 0; }
.tile-text b { font-weight: 600; }
.tile-text small { color: var(--mauve); }

/* ---------------------------------------------------------
   Cards & rows
   --------------------------------------------------------- */
.card { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r); padding: 22px 24px; margin: 16px 0; }
.card.narrow { max-width: 500px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin-bottom: .6rem; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; }
.content > h1 { padding-top: 10px; }

.row-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--hair); }
.card h2 + .row-item, .card .card-head + .row-item, .card > .row-item:first-child, .card > p + .row-item { border-top: 0; }
.grow { flex: 1; min-width: 0; }
.actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.actions.wrap { flex-wrap: wrap; margin: 8px 0 4px; }
.actions form { margin: 0; }
.dev-icon { width: 19px; height: 19px; vertical-align: -4px; color: var(--rani); margin-right: 2px; }

/* ---------------------------------------------------------
   Tables, badges, messages
   --------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 -8px; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-weight: 600; color: var(--mauve); font-size: .84rem; padding: 10px 12px; border-bottom: 1px solid var(--hair-strong); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: #fff7fb; }
tbody tr:last-child td { border-bottom: 0; }

.badge { display: inline-block; font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: #f5eef1; color: var(--mauve); margin-left: 4px; white-space: nowrap; }
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.ea { background: var(--blush); color: var(--rani); }
.flash { padding: 11px 15px; border-radius: var(--r-sm); margin: 12px 0; background: var(--good-bg); color: var(--good); border: 1px solid #c4e6d6; animation: flash-in .35s var(--ease) both; }
.flash.err { background: var(--bad-bg); color: var(--bad); border-color: #f3c7c7; }
.flash.warn { background: var(--warn-bg); color: var(--warn); border-color: #f2d6ae; }
.flash.small { padding: 6px 10px; font-size: .86rem; margin: 6px 0 0; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
label { display: block; font-size: .9rem; font-weight: 600; margin: 0 0 16px; }
label.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
input, select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: 400 1rem var(--text); color: var(--ink);
  background: var(--white); border: 1px solid var(--hair-strong); border-radius: var(--r-sm);
  transition: border-color .2s, box-shadow .2s;
}
input:hover, select:hover { border-color: #d6a6bd; }
input:focus, select:focus { outline: none; border-color: var(--rani); box-shadow: 0 0 0 3px rgba(227, 0, 121, .14); }
input:disabled { background: #fbf6f8; color: var(--mauve); }
label.inline input, .filters input, .filters select { display: inline-block; width: auto; margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 18px; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--hair); font-weight: 500; }
.access-row select { width: 160px; margin: 0; }
.filters { display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.filters.wrap { flex-wrap: wrap; }
.filters input[name="q"] { min-width: 260px; }
.inline-rename { display: flex; gap: 6px; margin: 8px 0 4px; max-width: 480px; }
.inline-rename input { margin: 0; padding: 7px 11px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 68px; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-38%); border: 0; background: none; color: var(--rani); font: 600 .84rem var(--text); cursor: pointer; padding: 6px; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid var(--hair-strong); background: var(--white); color: var(--ink);
  font: 600 .94rem var(--text); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:hover { text-decoration: none; border-color: #d6a6bd; transform: translateY(-1px); }
.btn:active { transform: scale(.97); transition-duration: .06s; }
.btn.small { padding: 6px 12px; font-size: .86rem; }
.btn.primary { border-color: var(--rani); background: var(--rani); color: #fff; }
.btn.primary:hover { background: var(--rani-deep); border-color: var(--rani-deep); box-shadow: 0 10px 20px -12px rgba(227, 0, 121, .8); }
.btn.danger { color: var(--bad); border-color: #efc0c0; }
.btn.danger:hover { background: var(--bad-bg); }
.btn.ghost { background: transparent; }
.btn.full { width: 100%; padding: 13px 20px; font-size: 1rem; margin-top: 4px; }

/* Tabs */
.tabs { display: flex; gap: 22px; margin: 16px 0 6px; border-bottom: 1px solid var(--hair); }
.tabs a { position: relative; padding: 10px 0; color: var(--mauve); font-weight: 600; }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rani); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tabs a.active { color: var(--ink); }
.tabs a.active::after { transform: scaleX(1); }
.tabs a span { background: #f5eef1; border-radius: 99px; padding: 0 7px; font-size: .78rem; margin-left: 4px; }
.tabs a:hover { text-decoration: none; color: var(--ink); }

/* ---------------------------------------------------------
   Confirm dialog (scale + fade)
   --------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(27, 25, 24, .28); opacity: 0; transition: opacity .2s ease; }
.modal[hidden] { display: none; }
.modal.show { opacity: 1; }
.modal-card { width: min(420px, 100%); background: var(--white); border-radius: var(--r); padding: 24px; box-shadow: 0 30px 60px -24px rgba(27, 25, 24, .4); transform: scale(.96); transition: transform .3s var(--ease); }
.modal.show .modal-card { transform: none; }
.modal-card p { font-size: 1.02rem; margin: 0 0 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Gentle reveal while scrolling */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   Tablet & phone
   --------------------------------------------------------- */
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav-links {
    position: fixed; top: 70px; left: 12px; right: 12px; height: auto; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--white); border: 1px solid var(--hair); border-radius: var(--r); box-shadow: 0 24px 48px -24px rgba(120, 0, 60, .3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s;
    max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .25s var(--ease); }
  .nav-indicator { display: none; }
  .nav-link, .nav-links > a { justify-content: space-between; width: 100%; }
  .nav-link.active { background: var(--blush); }
  .drop-panel { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 4px 8px; display: none; opacity: 1; visibility: visible; transform: none; }
  .drop.open .drop-panel { display: block; }
  .who { margin-left: 0; }
  .who-text { display: none; }
  .split { grid-template-columns: 1fr; }
  .split-art { order: -1; height: 200px; }
  .paisley { width: auto; height: 170px; }
  .split-main { padding: 28px 22px 32px; }
  .split-body { padding: 32px 0; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; gap: 12px; }
  .logo-img { height: 24px; }
  .content { padding: 12px 16px 60px; }
  .card { padding: 18px 16px; }
  .grid2, .access-grid { grid-template-columns: 1fr; }
  .row-item { flex-direction: column; align-items: stretch; }
  .actions { flex-wrap: wrap; }
  .filters { flex-wrap: wrap; }
  .filters input[name="q"] { min-width: 0; flex: 1; }
  .tabs { overflow-x: auto; }
  td { white-space: nowrap; }
  .who form .btn { padding: 6px 10px; font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .paisley .ln { stroke-dashoffset: 0; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Centre the login column on wide screens */
.split-main > * { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
.split-main > .split-body { margin-top: auto; margin-bottom: auto; }

/* =========================================================
   Phase 2 — modules
   ========================================================= */
textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: 400 1rem/1.5 var(--text); color: var(--ink); background: var(--white); border: 1px solid var(--hair-strong); border-radius: var(--r-sm); resize: vertical; transition: border-color .2s, box-shadow .2s; }
textarea:focus { outline: none; border-color: var(--rani); box-shadow: 0 0 0 3px rgba(227, 0, 121, .14); }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { font-size: .9rem; font-weight: 600; margin-bottom: 8px; padding: 0; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
label.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--rani); }
[hidden] { display: none !important; }

/* Page header for each module */
.mod-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 14px; }
.mod-head h1 { margin-bottom: 4px; }
.mod-intro { margin: 0; }
.mod-actions { display: flex; gap: 8px; }
.section-block { margin: 22px 0; }
.section-block > h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.section-block > p { margin: 0 0 10px; }
.card > h2 { display: flex; align-items: center; gap: 8px; }
.card.flush { padding: 6px 12px; }
.two-col { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.form-card { max-width: 760px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Chips & counts */
.chip { display: inline-flex; align-items: center; font-size: .76rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: #f5eef1; color: var(--mauve); white-space: nowrap; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.pink { background: var(--blush); color: var(--rani); }
.count-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--blush); color: var(--rani); font: 700 .78rem var(--text); }
.count-badge.bad { background: var(--bad-bg); color: var(--bad); }
.warn-t { color: var(--warn); font-weight: 600; }
.bad-t { color: var(--bad); font-weight: 600; }
.code { font-weight: 700; font-size: .78rem; color: var(--rani); letter-spacing: .02em; }

/* Segmented filter */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.seg a { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--hair); color: var(--mauve); font-weight: 600; font-size: .88rem; transition: background .15s, color .15s, border-color .15s; }
.seg a:hover { text-decoration: none; color: var(--ink); border-color: var(--hair-strong); }
.seg a.active { background: var(--rani); border-color: var(--rani); color: #fff; }

/* Empty state */
.empty-state { text-align: center; padding: 34px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.empty-state svg { width: 44px; height: 44px; fill: none; stroke: var(--hair-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.empty-state p { margin: 0; }
.empty { text-align: center; padding: 60px 16px; }

/* Progress */
.progress-line { height: 6px; border-radius: 6px; background: var(--blush); overflow: hidden; margin: 14px 0 4px; }
.progress-line.small { height: 4px; margin: 10px 0 0; }
.progress-line i { display: block; height: 100%; width: 0; background: var(--rani); border-radius: inherit; transition: width .8s var(--ease); }
.score { display: inline-flex; align-items: center; gap: 10px; }
.score .track { width: 60px; height: 6px; border-radius: 6px; background: var(--blush); overflow: hidden; }
.score i { display: block; height: 100%; width: 0; border-radius: inherit; background: currentColor; transition: width .8s var(--ease); }
.score.good { color: var(--good); } .score.warn { color: var(--warn); } .score.bad { color: var(--bad); }
.score b { color: var(--ink); font-weight: 600; min-width: 38px; }

/* Checklist rows */
.task-list { list-style: none; margin: 0; padding: 0; }
.task-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--hair); }
.task-list > .task-row:first-child { border-top: 0; }
.tick { flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--hair-strong); display: grid; place-items: center; }
.tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.task-row.is-done .tick { background: var(--rani); border-color: var(--rani); }
.task-row.is-done .task-main > b { color: var(--mauve); text-decoration: line-through; text-decoration-color: rgba(110, 88, 98, .4); }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.task-main b { font-weight: 600; }
.task-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.task-side form { margin: 0; }
.ontime { color: var(--good); } .late { color: var(--warn); }
.task-list.compact .task-row { padding: 10px 0; }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.plain-list li:first-child { border-top: 0; }
.plain-list li > span:nth-child(2) { flex: 1; }
.plain-list .when { flex: 0 0 120px; color: var(--rani); font-weight: 600; font-size: .9rem; }
.plain-list form { margin: 0; }
.plain-list.padded { padding: 4px 12px; }

/* Team today */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; align-items: start; }
.person-card { border: 1px solid var(--hair); border-radius: var(--r); background: var(--white); transition: box-shadow .25s var(--ease), border-color .2s; }
.person-card[open] { box-shadow: var(--lift); border-color: var(--hair-strong); }
.person-card summary { list-style: none; cursor: pointer; padding: 14px 16px; }
.person-card summary::-webkit-details-marker { display: none; }
.person-card > ul, .person-card > p { padding: 0 16px 12px; margin: 0; }
.pc-top { display: flex; flex-direction: column; }
.pc-stats { display: flex; gap: 12px; font-size: .9rem; margin-top: 6px; }

/* Task form */
.day-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.pick { margin: 0; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-grid; place-items: center; width: 52px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--hair-strong); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pick input:checked + span { background: var(--rani); border-color: var(--rani); color: #fff; }
.pick input:focus-visible + span { outline: 2px solid var(--rani); outline-offset: 2px; }

/* Delegation / ticket cards */
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 12px; }
.item-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--white); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.item-card:hover { box-shadow: var(--lift); }
.item-card.completed, .item-card.cancelled, .item-card.closed { background: #fffbfd; }
.item-card.cancelled h3 { color: var(--mauve); text-decoration: line-through; }
.item-card h3 { margin: 2px 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
.ic-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ic-text { margin: 0; color: #4a3d43; white-space: pre-line; }
.ic-meta { margin: 0; }
.ic-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.ic-actions form { margin: 0; }
.history { font-size: .86rem; }
.history summary { cursor: pointer; color: var(--mauve); font-weight: 600; width: fit-content; }
.history ol { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

.stepper { list-style: none; display: flex; margin: 6px 0 2px; padding: 0; counter-reset: s; }
.stepper li { flex: 1; position: relative; font-size: .74rem; color: var(--mauve); padding-top: 14px; }
.stepper li::before { content: ""; position: absolute; top: 3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--hair-strong); z-index: 1; }
.stepper li::after { content: ""; position: absolute; top: 6px; left: 8px; right: 0; height: 2px; background: var(--hair); }
.stepper li:last-child::after { display: none; }
.stepper li.done::before { background: var(--rani); }
.stepper li.done::after { background: var(--rani); }
.stepper li.done { color: var(--ink); }
.stepper li.now::before { background: #fff; box-shadow: 0 0 0 2px var(--rani); }
.stepper li.now { color: var(--rani); font-weight: 600; }

/* To do */
.todo-list { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--white); }
.todo-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-top: 1px solid var(--hair); }
.todo-row:first-child { border-top: 0; }
.todo-row h3 { margin: 6px 0 2px; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.todo-row p { margin: 0; }
.todo-row.is-done h3 { color: var(--mauve); }
.todo-main { flex: 1; min-width: 0; }
.todo-row .ic-actions { margin: 0; padding: 0; flex-shrink: 0; justify-content: flex-end; max-width: 300px; }

/* Report tables */
.num-table td:not(:first-child), .num-table th:not(:first-child) { text-align: right; }
.num-table td:last-child, .num-table th:last-child { text-align: left; }
.num-table tfoot td { font-weight: 600; border-top: 1px solid var(--hair-strong); border-bottom: 0; }
.stat-strip.three { grid-template-columns: repeat(3, 1fr); }
.stat-strip.three .stat b { font-size: 1.7rem; }

/* Home tiles */
a.tile { color: var(--ink); position: relative; }
a.tile:hover { text-decoration: none; }
.tile.soon { opacity: .6; }
.tile.soon:hover { transform: none; box-shadow: none; }
.tile-text small.bad { color: var(--bad); }
.tile-text small.good { color: var(--good); }
.tile-badge { margin-left: auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--rani); color: #fff; display: grid; place-items: center; font: 700 .8rem var(--text); }
.tile-badge.bad { background: var(--bad); }

/* Pop-up forms */
.act-dialog, dialog.panel {
  width: min(480px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: var(--r); background: var(--white); color: var(--ink);
  box-shadow: 0 30px 70px -24px rgba(27, 25, 24, .45);
}
.act-dialog::backdrop, dialog.panel::backdrop { background: rgba(27, 25, 24, .3); }
.act-dialog[open], dialog.panel[open] { animation: dlg-in .3s var(--ease); }
.act-dialog[open]::backdrop, dialog.panel[open]::backdrop { animation: fade-in .25s ease; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.act-form { padding: 20px 22px 18px; }
.act-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.act-head h2 { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.act-help { margin: -4px 0 12px; }
.icon-btn { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--mauve); cursor: pointer; padding: 0 4px; border-radius: 6px; }
.icon-btn:hover { color: var(--ink); background: var(--blush); }
.act-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.act-form label > span { display: block; }
input[type="file"] { padding: 9px; background: var(--blush); border-style: dashed; }

@media (max-width: 960px) {
  .two-col { grid-template-columns: 1fr; }
  .card-list { grid-template-columns: 1fr; }
  .stat-strip.three { grid-template-columns: 1fr; }
  .stat-strip.three .stat { border-left: 0; border-top: 1px solid var(--hair); }
  .stat-strip.three .stat:first-child { border-top: 0; }
}
@media (max-width: 640px) {
  .task-row { flex-wrap: wrap; }
  .task-side { width: 100%; justify-content: flex-start; padding-left: 36px; }
  .todo-row { flex-direction: column; }
  .todo-row .ic-actions { max-width: none; justify-content: flex-start; }
  .plain-list .when { flex-basis: 90px; }
  .mod-actions { width: 100%; }
  .mod-actions .btn { flex: 1; }
}
.person-card[open] { grid-column: 1 / -1; }
.person-card[open] > ul { columns: 2 360px; column-gap: 28px; }
.person-card[open] > ul .task-row { break-inside: avoid; }

/* =========================================================
   Phase 2.1 — dashboards as tables
   ========================================================= */
.toolbar { display: flex; gap: 10px; align-items: center; margin: 16px 0 12px; flex-wrap: wrap; }
.toolbar input[type="search"] { flex: 1; min-width: 240px; margin: 0; }
.toolbar select { width: auto; margin: 0; }
.stat-strip.five { grid-template-columns: repeat(5, 1fr); }
.stat-strip.five .stat b { font-size: 1.7rem; }
.stat-strip a.stat.warn b { color: var(--warn); }
.stat-strip a.stat.bad b { color: var(--bad); }

.dtable { font-size: .9rem; }
.dtable th { position: sticky; top: 0; background: var(--white); z-index: 1; }
.dtable td { padding: 11px 10px; }
.dtable .nowrap, .nowrap { white-space: nowrap; }
.dtable .num { text-align: center; }
.task-cell { min-width: 240px; max-width: 420px; }
.task-title { font-weight: 600; }
.cell-sub { display: block; color: var(--mauve); font-size: .78rem; margin-top: 3px; }
.cell-sub.pre { white-space: pre-line; }
.late-row td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.closed-row td { color: var(--mauve); }
.closed-row .task-title { font-weight: 500; }
.act-cell { min-width: 150px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.row-actions form { margin: 0; }
.dtable .history { margin-top: 4px; }
.req { color: var(--rani); }
.counter { display: block; text-align: right; color: var(--mauve); font-size: .78rem; margin-top: 4px; font-weight: 500; }
dialog.panel.wide { width: min(560px, calc(100vw - 24px)); }

/* Active / inactive switch */
.switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; font: 600 .84rem var(--text); color: var(--mauve); padding: 4px 0; }
.switch span { position: relative; width: 36px; height: 20px; border-radius: 99px; background: var(--hair-strong); transition: background .2s; flex-shrink: 0; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s var(--ease); }
.switch.on { color: var(--good); }
.switch.on span { background: var(--good); }
.switch.on span::after { transform: translateX(16px); }
.switch:disabled { cursor: not-allowed; opacity: .6; }
.users-table td { vertical-align: middle; }

/* Master task sheet */
.sheet-card { padding: 0; overflow: hidden; }
.sheet-wrap { margin: 0; max-height: 72vh; overflow: auto; }
table.sheet { font-size: .88rem; border-collapse: separate; }
table.sheet th { position: sticky; top: 0; z-index: 2; background: var(--blush); color: var(--ink); font-weight: 700; text-transform: none; border-bottom: 1px solid var(--hair-strong); padding: 10px 12px; }
table.sheet td { padding: 8px 12px; border-bottom: 1px solid var(--hair); }
table.sheet tbody tr:nth-child(even) td { background: #fffafc; }
table.sheet tbody tr[data-href] { cursor: pointer; }
table.sheet tbody tr:hover td { background: var(--blush); }
table.sheet tbody tr.stopped td { color: var(--mauve); }
table.sheet td a { color: var(--ink); font-weight: 500; }
table.sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.sheet td.center { text-align: center; }
.freq { display: inline-block; min-width: 30px; padding: 1px 6px; border-radius: 6px; background: var(--blush); color: var(--rani); font-weight: 700; font-size: .8rem; }

@media (max-width: 960px) {
  .stat-strip.five { grid-template-columns: 1fr 1fr; }
  .stat-strip.five .stat { border-left: 0; border-top: 1px solid var(--hair); }
  .stat-strip.five .stat:nth-child(-n+2) { border-top: 0; }
  .stat-strip.five .stat:nth-child(even) { border-left: 1px solid var(--hair); }
}
.act-form label > span.req { display: inline; }
.content.wide { max-width: 1680px; }
.more { position: relative; }
.more > summary { list-style: none; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "▾"; margin-left: 4px; font-size: .7rem; }
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 160px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-sm); box-shadow: 0 18px 36px -18px rgba(120, 0, 60, .35); }
.more-menu .btn, .more-menu form, .more-menu form .btn { width: 100%; justify-content: flex-start; border-color: transparent; }
.more-menu .btn:hover { background: var(--blush); transform: none; }
.act-cell { min-width: 0; white-space: nowrap; }
.task-cell { min-width: 220px; max-width: 360px; }
.wide-page .nav-inner { max-width: 1680px; }

/* ---- Team today: compact lines ---- */
.team-list { padding: 0; overflow: hidden; }
.team-row { border-top: 1px solid var(--hair); }
.team-row:first-child { border-top: 0; }
.team-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(180px, 1.4fr) 90px minmax(80px, 1fr) minmax(200px, 2fr) 18px; gap: 16px; align-items: center; padding: 14px 20px; transition: background .2s; }
.team-row summary::-webkit-details-marker { display: none; }
.team-row summary:hover { background: var(--blush); }
.team-row.is-bad { box-shadow: inset 3px 0 0 var(--bad); }
.tr-name { display: flex; flex-direction: column; min-width: 0; }
.tr-done { font-size: .9rem; white-space: nowrap; }
.tr-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-caret { width: 16px; height: 16px; fill: none; stroke: var(--mauve); stroke-width: 1.8; transition: transform .2s; }
.team-row[open] .tr-caret { transform: rotate(180deg); }
.team-row[open] summary { background: var(--blush); }
.team-row > ul, .team-row > p { margin: 0; padding: 4px 20px 12px 20px; }
@media (max-width: 760px) {
  .team-row summary { grid-template-columns: 1fr auto 18px; }
  .tr-bar { display: none; }
  .tr-tags { grid-column: 1 / -1; grid-row: 2; }
}
.tr-bar .progress-line.small { margin: 0; display: block; background: #f5e3ec; }

/* ---- floating menus (More / column filter) ---- */
.more-menu.floating, .cf-pop.floating { position: fixed; right: auto; z-index: 60; }

/* ---- Delegation: assignee filter ---- */
.col-filter { position: relative; display: inline-block; }
.col-filter summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; margin: -3px -8px; border-radius: 8px; transition: background .2s, color .2s; }
.col-filter summary::-webkit-details-marker { display: none; }
.col-filter summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; opacity: .6; }
.col-filter summary:hover, .col-filter[open] summary { background: var(--blush); color: var(--rani); }
.col-filter.on summary { background: var(--rani); color: #fff; }
.col-filter.on summary svg { opacity: 1; fill: currentColor; }
.cf-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 260px; padding: 8px; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-sm); box-shadow: 0 18px 36px -18px rgba(120, 0, 60, .35); font-weight: 400; text-transform: none; letter-spacing: 0; }
.cf-pop input { margin: 0 0 6px; padding: 8px 10px; font-size: .88rem; }
.cf-pop ul { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; }
.cf-pop li a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .88rem; }
.cf-pop li a:hover { background: var(--blush); }
.cf-pop li a.active { background: var(--blush); color: var(--rani); font-weight: 600; }
.cf-pop li a small { color: var(--mauve); }
.cf-pop .cf-clear { color: var(--rani); font-weight: 600; }
.filter-note { margin: -4px 0 12px; font-size: .9rem; color: var(--mauve); }

/* ---- Delegation: one date column + MD remark ---- */
.rev-badge { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: var(--rani); color: #fff; font-size: .72rem; font-weight: 700; vertical-align: 1px; cursor: help; }
.md-remark { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding: 7px 9px; max-width: 220px; background: var(--blush); border-left: 3px solid var(--rani); border-radius: 0 8px 8px 0; font-size: .8rem; line-height: 1.35; color: var(--ink); }
.md-remark svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: var(--rani); stroke-width: 1.5; stroke-linejoin: round; }
.md-remark b { color: var(--rani); }
.dtable .ea-cell { min-width: 150px; }

/* ---- Master Task List: named photos, verifier, WhatsApp ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field { margin: 0 0 16px; }
.field-label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.photo-set, .wa-set { padding: 14px 16px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: #fffafd; }
.photo-set legend { float: left; width: 100%; margin-bottom: 10px; }
.photo-row { clear: both; display: grid; grid-template-columns: 70px 1fr auto 34px; gap: 10px; align-items: center; margin-bottom: 8px; }
.photo-row input[name^="pname_"] { margin: 0; }
.pr-num { font-size: .85rem; font-weight: 600; color: var(--mauve); }
.pr-req { margin: 0; font-size: .86rem; white-space: nowrap; }
.photo-set [data-add-photo] { clear: both; margin-top: 4px; }
.wa-set label.check { margin: 0; }
.wa-box { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wa-box [data-wa-list] { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wa-row { display: grid; grid-template-columns: minmax(0, 320px) 34px; gap: 10px; align-items: center; }
.wa-row input { margin: 0; }
.icon-btn[data-remove-row] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--hair); background: var(--white); color: var(--mauve); font-size: 1.1rem; cursor: pointer; }
.icon-btn[data-remove-row]:hover { border-color: var(--bad); color: var(--bad); }

.multi-pick { position: relative; }
.multi-pick summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--hair-strong); border-radius: var(--r-sm); background: var(--white); font-weight: 400; }
.multi-pick summary::-webkit-details-marker { display: none; }
.multi-pick summary svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--mauve); stroke-width: 1.8; }
.multi-pick[open] summary { border-color: var(--rani); box-shadow: 0 0 0 3px rgba(227, 0, 121, .14); }
.mp-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 8px; background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-sm); box-shadow: 0 18px 36px -18px rgba(120, 0, 60, .35); }
.mp-pop input[type=search] { margin: 0 0 6px; }
.mp-pop ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.mp-pop li label.check { margin: 0; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.mp-pop li label.check:hover { background: var(--blush); }
.mp-pop li span { display: flex; flex-direction: column; font-weight: 400; }
.mp-pop li small { font-size: .78rem; }

.chip.wa { gap: 4px; background: #e9f8ef; color: #128c4a; }
.chip.wa svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* photo slots in the Mark done pop-up */
.photo-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.photo-slot { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px; border: 1.5px dashed var(--hair-strong); border-radius: var(--r-sm); background: #fffafd; cursor: pointer; }
.photo-slot.has-photo { border-style: solid; border-color: var(--good); background: var(--white); }
.photo-slot .ps-name { font-size: .86rem; font-weight: 600; }
.photo-slot input[type=file] { margin: 0; padding: 6px; font-size: .78rem; }
.ps-prev { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }

/* photos on a done task */
.shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.shots a { display: flex; flex-direction: column; gap: 3px; width: 76px; text-decoration: none; color: var(--mauve); font-size: .72rem; }
.shots img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); transition: transform .2s; }
.shots a:hover img { transform: scale(1.04); }
.shots span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verify-card { border-color: #f3d27a; background: #fffdf6; }
@media (max-width: 640px) {
  .photo-row { grid-template-columns: 1fr auto 34px; }
  .pr-num { grid-column: 1 / -1; }
}

/* ---- Backup ---- */
.stat b.small-b { font-size: 1.15rem; font-family: var(--text); font-weight: 600; }
.backup-cols { grid-template-columns: 1.25fr 1fr; margin: 16px 0; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.choice { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1.5px solid var(--hair); border-radius: var(--r-sm); cursor: pointer; font-weight: 400; transition: border-color .2s, background .2s; }
.choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--rani); flex-shrink: 0; }
.choice span { display: flex; flex-direction: column; gap: 2px; }
.choice small { color: var(--mauve); font-size: .82rem; line-height: 1.35; }
.choice:has(input:checked) { border-color: var(--rani); background: var(--blush); }
.note-warn { margin: -4px 0 14px; padding: 9px 12px; border-radius: 8px; background: var(--warn-bg); color: #6b4a00; font-size: .86rem; }
.drive-state { margin: -6px 0 12px; font-size: .86rem; font-weight: 600; }
.drive-state.ok { color: var(--good); }
.drive-state.bad { color: var(--bad); }
.card h2.mt { margin-top: 26px; }
.auto-card { margin-top: 16px; }
.auto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.auto-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: end; }
.auto-form label.check, .auto-form button { grid-column: 1 / -1; justify-self: start; }
.auto-form label.check { margin-bottom: 14px; }
.auto-form .auto-time { grid-column: 1 / -1; max-width: calc(50% - 7px); }
@media (max-width: 560px) { .auto-form .auto-time { max-width: none; } }
.auto-status { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--blush); }
.auto-status p { margin: 0 0 8px; font-size: .92rem; }
.auto-status p.small, .auto-status form, .auto-status > .btn { grid-column: 1 / -1; }
.design-tools { margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .backup-cols { grid-template-columns: 1fr; } .choice-row { grid-template-columns: 1fr; } .auto-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .auto-form, .auto-status { grid-template-columns: 1fr; } }

/* ---- Forgot password ---- */
.forgot-link { margin: -4px 0 10px; font-size: .9rem; text-align: right; }
.forgot-card { margin-top: 40px; }
.forgot-card h1 { font-size: 2rem; }
.otp-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.who-box { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--blush); }
.who-box .mono { font-family: ui-monospace, Consolas, monospace; color: var(--rani); }
.forgot-card .choice { margin-bottom: 8px; }
.test-mail { display: flex; gap: 10px; align-items: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.test-mail label { flex: 1; margin: 0; }

/* =========================================================
   Phase 3 — FMS
   ========================================================= */
.fms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 18px 0; }
.fms-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--white); transition: box-shadow .25s var(--ease), border-color .2s; }
.fms-card:hover { box-shadow: var(--lift); border-color: var(--hair-strong); }
.fms-card h2 { margin: 0; font-size: 1.15rem; }
.fms-card h2 a { color: var(--ink); text-decoration: none; }
.fms-card p { margin: 0; }
.fc-top { display: flex; justify-content: space-between; align-items: center; }
.fc-code { font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: var(--rani); }
.fc-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: .88rem; color: var(--mauve); }
.fc-stats b { color: var(--ink); }
.fc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.card-pad { padding: 12px 8px 0; }
.who-line { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--blush); font-size: .92rem; }
.ff .req { color: var(--rani); }

/* request page */
.req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.req-head h1 { margin-bottom: 2px; }
.req-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 18px; margin: 0; }
.kv dt { color: var(--mauve); font-size: .9rem; }
.kv dd { margin: 0; }
.kv.small { font-size: .88rem; gap: 4px 14px; margin-top: 8px; }
.fthumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hair); }
.steps { list-style: none; margin: 0; padding: 0; }
.st { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.st:first-child { border-top: 0; }
.st-no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--hair-strong); font-weight: 700; font-size: .85rem; color: var(--mauve); }
.st-done .st-no { background: var(--rani); border-color: var(--rani); color: #fff; }
.st-now .st-no { border-color: var(--rani); color: var(--rani); box-shadow: 0 0 0 4px rgba(227, 0, 121, .12); }
.st-todo { opacity: .6; }
.st-title { display: flex; flex-direction: column; margin-bottom: 6px; }
.run { padding: 10px 12px; margin-top: 6px; border-radius: var(--r-sm); background: #fffafd; border: 1px solid var(--hair); }
.run-todo { background: transparent; border: 0; padding: 0; }
.run-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .88rem; }
.run-answer { margin-top: 6px; }
.do-step { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--hair-strong); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.choices legend { width: 100%; margin-bottom: 6px; }
.opt-pill { margin: 0; cursor: pointer; font-size: .92rem; }
.opt-pill input { position: absolute; opacity: 0; pointer-events: none; }
.opt-pill span { display: inline-block; background: var(--white); color: var(--ink); padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--hair-strong); font-weight: 500; transition: all .2s; }
.opt-pill input:checked + span { background: var(--rani); border-color: var(--rani); color: #fff; }
.opt-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(227, 0, 121, .25); }
.reassign { margin-top: 8px; font-size: .86rem; }
.reassign summary { cursor: pointer; color: var(--mauve); }
.inline-form { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.inline-form select { width: auto; margin: 0; }

/* sheet view */
.fms-sheet th.stp { min-width: 130px; }
.fms-sheet th.stp small { display: block; font-weight: 400; color: var(--mauve); font-size: .74rem; white-space: normal; }
.stp-cell { font-size: .8rem; min-width: 130px; }
.stp-cell small { display: block; color: var(--mauve); }
.stp-cell b { display: block; font-weight: 600; }
.stp-cell em { display: block; font-style: normal; color: var(--bad); font-weight: 600; }
.stp-cell.now { background: #fff8e6; }
.stp-cell.late { background: #fff1f3; }
.stp-cell.ok { background: #f2fbf5; }

/* builder */
.design-top { margin: 16px 0; }
.grid3 { display: grid; grid-template-columns: 1.2fr 2fr .8fr; gap: 0 16px; align-items: end; }
.grid3 .form-actions { grid-column: 1 / -1; }
.builder { display: flex; flex-direction: column; gap: 14px; }
.b-section h2, .b-steps-title { margin-bottom: 6px; }
.b-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.b-row { position: relative; display: grid; grid-template-columns: 1fr 210px; gap: 12px; padding: 12px 14px 22px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: #fffafd; }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.b-field { margin-bottom: 10px; font-size: .84rem; }
.b-field input, .b-field select { margin-top: 4px; padding: 8px 10px; font-size: .92rem; }
.b-row-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.b-only { display: flex; flex-direction: column; gap: 2px; }
.b-only label.check { margin: 0; font-size: .82rem; }
.b-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.b-tools .btn { padding: 4px 9px; }
.b-key { position: absolute; left: 14px; bottom: 4px; font-size: .7rem; color: #b49aa7; font-family: ui-monospace, Consolas, monospace; }
.b-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; max-height: 220px; overflow-y: auto; padding: 8px; margin-bottom: 12px; border: 1px solid var(--hair); border-radius: var(--r-sm); }
.b-people label.check { margin: 0; }
.b-step { border-left: 4px solid var(--rani); }
.b-step h4 { margin: 18px 0 8px; font-size: .9rem; color: var(--rani); }
.b-step-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.b-step-no { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--rani); color: #fff; font-weight: 700; }
.b-step-name { margin: 0; font-weight: 600; font-size: 1.02rem; }
.b-rule { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-sm); background: var(--blush); font-size: .9rem; }
.b-rule select, .b-rule input { width: auto; margin: 0; padding: 7px 10px; font-size: .9rem; }
.b-action { grid-template-columns: 1fr 210px; }
.design-save { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 0; background: linear-gradient(transparent, var(--white) 30%); }

/* master lists */
.master-tools { margin: 16px 0; }
.col-row { display: grid; grid-template-columns: 1fr 140px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.col-row input, .col-row select { margin: 0; }
.span2 { grid-column: 1 / -1; }
.big-stock { text-align: right; }
.big-stock b { display: block; font-size: 2.2rem; line-height: 1; font-family: var(--display); }
.big-stock span { color: var(--mauve); font-size: .88rem; }
.big-stock.low b { color: var(--bad); }
.qr-box { display: flex; gap: 16px; align-items: center; }
.qr-box svg { width: 130px; height: 130px; }
.qr-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qr-label { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px dashed #ccc; border-radius: 8px; break-inside: avoid; }
.qr-label svg { width: 96px; height: 96px; flex-shrink: 0; }
.qr-label div { display: flex; flex-direction: column; font-size: .8rem; line-height: 1.25; }
.qr-label b { font-size: 1rem; color: var(--ink); }
.qr-label small { color: #555; }
@media print {
  .navbar, .no-print, .flash { display: none !important; }
  body, .content { background: #fff; padding: 0; margin: 0; }
  .qr-sheet { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .b-row, .b-action { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .qr-sheet { grid-template-columns: 1fr 1fr; }
}

/* ---- temporary password box / confirm text ---- */
#confirm-text { white-space: pre-line; }
.pw-box { display: flex; flex-direction: column; gap: 8px; }
.pw-lines { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.pw-lines code { padding: 4px 10px; border-radius: 8px; background: var(--white); border: 1px solid var(--hair-strong); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--ink); user-select: all; }
.pw-box small { color: inherit; opacity: .85; }

/* ---- Full control switch (EA / MD) ---- */
.fc-toggle { margin: 0; }
.fc-switch { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 99px; border: 1.5px solid var(--hair-strong); background: var(--white); color: var(--mauve); font: 600 .8rem var(--text); cursor: pointer; transition: all .2s; white-space: nowrap; }
.fc-knob { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #e9dbe2; transition: background .2s; }
.fc-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.fc-switch.on { border-color: var(--rani); color: var(--rani); background: var(--blush); }
.fc-switch.on .fc-knob { background: var(--rani); }
.fc-switch.on .fc-knob::after { transform: translateX(12px); }
.fc-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(227, 0, 121, .25); }
.fc-bar { position: sticky; top: 64px; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; padding: 8px 16px; background: var(--rani); color: #fff; font-size: .9rem; }
.fc-bar form { margin: 0; }
.fc-bar .btn { background: #fff; color: var(--rani); border-color: #fff; }
@media (max-width: 760px) { .fc-switch span:last-child { display: none; } .fc-switch { padding: 5px; } .fc-bar { top: 56px; font-size: .82rem; } }
.run-line { padding: 6px 12px; font-size: .88rem; background: transparent; border-style: dashed; }
.fc-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--blush); color: var(--rani); font-size: .86rem; }
.correct { margin-top: 10px; font-size: .9rem; }
.correct summary { cursor: pointer; color: var(--rani); font-weight: 600; }

/* ---- Asset Register (inside Admin Asset FMS) ---- */
.reg-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.reg-table td.num { text-align: right; }
.asset-cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.asset-form .grid2 > *, .asset-form .grid2 input, .asset-form .grid2 select { min-width: 0; }
.asset-form .span2 { grid-column: 1 / -1; }
.drive-link { font-weight: 600; }
@media (max-width: 900px) { .asset-cols { grid-template-columns: 1fr; } }

/* ---- Language switch (login page) ---- */
.lockup { position: relative; }
.lang-switch { position: absolute; right: 0; top: 2px; display: inline-flex; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; }
.lang-switch a { padding: 6px 16px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--mauve); text-decoration: none; }
.lang-switch a.on { background: var(--rani); color: #fff; }
.lang-switch a:not(.on):hover { background: var(--blush); color: var(--ink); }
/* Hindi text: system Devanagari fonts */
html[lang="hi"] body { font-family: var(--text), "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif; }
html[lang="hi"] h1, html[lang="hi"] .display { font-family: var(--display), "Nirmala UI", "Noto Sans Devanagari", serif; }
html[lang="hi"] .tagline, html[lang="hi"] .fc-code, html[lang="hi"] .eyebrow { letter-spacing: normal; text-transform: none; }
@media (max-width: 560px) { .lang-switch { position: static; margin-top: 12px; } }

/* ---- Admin Requirement switch + messages to the raiser ---- */
.admin-switch { margin-bottom: 18px; }
.admin-switch .opt-pill { text-decoration: none; color: inherit; }
.admin-switch .opt-pill.on span { background: var(--rani); border-color: var(--rani); color: #fff; }
.admin-switch .opt-pill:not(.on):hover span { border-color: var(--rani); }
.admin-switch legend { margin-bottom: 8px; }
.b-notify { margin: 12px 0 0; }
.req-notes .row-item { align-items: flex-start; }
.req-notes .note-text { font-weight: 600; }
.req-notes .note-bad .note-text { color: var(--bad); }
.req-notes .note-good .note-text { color: var(--good); }

/* ---------- Delegation: today's update, daily report, pop-up ---------- */
.today-upd { margin-top: 6px; font-size: .84rem; padding: 4px 9px; border-radius: 8px; background: var(--good-bg); color: #0a4f37; width: fit-content; max-width: 100%; }
.today-upd.none { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.card-head.pad, .pad { padding: 14px 18px 0; }
p.pad { padding-bottom: 14px; margin: 0; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th { text-align: left; font-size: .8rem; text-transform: none; background: var(--blush); padding: 9px 12px; }
.report-table td { padding: 9px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: .92rem; }
.report-table td:first-child, .report-table th:first-child { width: 36px; color: var(--mauve); }
.report-table td:nth-child(3) { white-space: nowrap; }
.report-table td:last-child { min-width: 220px; }
.upd-pop { width: min(640px, calc(100vw - 24px)) !important; max-height: calc(100vh - 40px); }
.upd-pop .upd-in { padding: 20px 22px 18px; }
.upd-pop .act-head { margin-bottom: 4px; }
.upd-pop .upd-row { display: flex; gap: 10px; align-items: flex-end; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.upd-pop .upd-row label { flex: 1; margin: 0; }
.upd-pop .upd-row textarea { margin-top: 6px; }
.upd-pop .act-buttons { border: 0; margin-top: 10px; }
@media (max-width: 640px) {
  .upd-pop .upd-row { flex-direction: column; align-items: stretch; }
  .report-table thead { display: none; }
  .report-table, .report-table tbody { display: block; }
  .report-table tr { display: grid; grid-template-columns: 30px 1fr; padding: 10px 6px; border-bottom: 1px solid var(--hair); }
  .report-table td { border: 0; padding: 2px 4px; white-space: normal !important; min-width: 0 !important; }
  .report-table td:first-child { grid-row: span 3; width: auto; }
  .report-table td:nth-child(2) { font-weight: 600; }
  .report-table td:nth-child(3) { color: var(--mauve); font-size: .84rem; }
}

/* ---------- Admin › WhatsApp ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.grid-2 > .card { margin: 0; }
.pink-t { color: var(--rani); }
.steps-list { padding-left: 1.2rem; margin: 0 0 1rem; line-height: 1.55; }
.steps-list li { margin-bottom: 4px; }
.time-row { display: flex; gap: 10px; align-items: center; }
.time-row input { max-width: 140px; }
.run-now { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.wa-text { font-size: .86rem; max-width: 520px; }
.tpl-body { min-width: 280px; font-size: .88rem; }
.tpl-table code { font-size: .86rem; background: var(--blush); padding: 2px 6px; border-radius: 6px; }
.stat.good b { color: var(--good); }
#log .card-head span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#log .btn.active { background: var(--blush-2); color: var(--rani); }