/* mvd-node finder — visual identity ported from status-node.
   Same CSS-var theme system (dark default + [data-theme="light"]),
   same sticky-hdr / scroll-wrap layout, same theme/help button row,
   same tour spotlight system. */

:root{
  --bg-url:url('static/backround-main.svg');
  --bg-page:#0a0a0b;
  --bg-page-overlay:rgba(10,10,11,.6);
  --bg-card:#111114;
  --bg-elev:#17171b;
  --bg-input:#0c090a;
  --bg-modal:rgba(4,3,5,.72);
  --bg-muted:#27272a;
  --text-primary:#d4d4d8;
  --text-secondary:#8d8d98;
  --text-hover:#a1a1aa;
  --text-bright:#ececee;
  --text-white:#fff;
  --text-faint:#71717e;
  --text-subtle:#72727d;
  --text-disabled:#5d5d61;
  --border-line:#1e1e24;
  --border-chip:#23232a;
  --border-card:#1f1f24;
  --accent-from:#C50F35;
  --accent-to:#690B1F;
  --accent-soft:rgba(197,15,53,.55);
  --status-new-bg:rgba(110,231,183,.12);
  --status-new-fg:#6ee7b7;
  --status-removed-bg:rgba(255,116,116,.12);
  --status-removed-fg:#ff9b9b;
  --category-bg:rgba(255,184,108,.14);
  --category-fg:#ffb86c;
}
[data-theme="light"]{
  --bg-url:url('static/backround-main-light.svg%3Fv=4');
  --bg-page:#fdfdfc;
  --bg-page-overlay:rgba(255,255,255,0);
  --bg-card:#ffffff;
  --bg-elev:#f8f7f5;
  --bg-input:#fafaf9;
  --bg-modal:rgba(0,0,0,.35);
  --bg-muted:#ddd8d4;
  --text-primary:#1a1412;
  --text-secondary:#585250;
  --text-hover:#3a3230;
  --text-bright:#1a1412;
  --text-white:#1a1412;
  --text-faint:#7a726c;
  --text-subtle:#605a56;
  --text-disabled:#908880;
  --border-line:#ddd6d0;
  --border-chip:#ccc5be;
  --border-card:#ddd6d0;
  --status-new-bg:rgba(34,139,86,.14);
  --status-new-fg:#1e7a4a;
  --status-removed-bg:rgba(190,24,24,.12);
  --status-removed-fg:#b91c1c;
  --category-bg:rgba(176,98,15,.12);
  --category-fg:#9a5510;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;background:var(--bg-page);overscroll-behavior:none}
body{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background-color:var(--bg-page);
  background-image:linear-gradient(var(--bg-page-overlay),var(--bg-page-overlay)),var(--bg-url);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  color:var(--text-primary);
  font-family:-apple-system,system-ui,'Segoe UI',sans-serif;
  font-size:16px;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-user-select:none;user-select:none;
}
body.tg-fs{
  padding-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  padding-bottom:calc(var(--tg-safe-area-inset-bottom,0px) + env(safe-area-inset-bottom,0px));
}

/* Search input + button text are user-selectable even though body disables it. */
input,textarea{user-select:text;-webkit-user-select:text}

/* Layout primitives — same as status-node so the proportions stay familiar. */
.scroll-wrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.scroll-wrap>main{flex:1 1 auto}
.scroll-wrap>footer{flex-shrink:0}
.wrap{width:100%;max-width:860px;margin:0 auto}

.sticky-hdr{flex-shrink:0;z-index:20;position:relative}
header>.wrap,
.sub-bar>.wrap{position:relative}
header>.wrap::after,
.sub-bar>.wrap::after{
  content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--border-line);
}

header{background:rgba(8,7,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[data-theme="light"] header{background:rgba(253,253,252,.65)}

.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{width:26px;height:26px;border-radius:4px;flex-shrink:0}
/* The inline `width=180 height=17` on the wordmark SVG is the desktop
 * size; flex-shrink + min-width:0 lets the row contract on small phones
 * (icon-buttons on the right stay full-size — they're flex-shrink:0). */
.brand svg{flex-shrink:1;min-width:0;height:17px;width:180px}
@media (max-width:540px){.brand svg{width:150px;height:14px}}
@media (max-width:400px){.brand svg{width:122px;height:11px}}
@media (max-width:340px){.brand svg{display:none}}
/* Brand wordmark: white path inverts to dark in light theme — mirrors
 * the rule from status-node so the SVG-as-logo stays legible on both
 * backgrounds. */
[data-theme="light"] header svg path[fill="white"]{fill:var(--text-primary)}
[data-theme="light"] header svg g path{fill:var(--text-primary)}

/* ── Tabs (Розыск МВД / Прочие) ────────────────────────────────────
 * Ported from status-node: glass-pill `.tab-slider` slides between
 * `.tab-btn`s inside `.tab-track`. Same Safari-friendly seeded
 * transform + z-index trick to overpaint header's divider line. */
nav{position:relative;z-index:1;margin-top:-1px}
nav>.wrap{position:relative}
nav>.wrap::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;background:var(--border-line)}
.tab-track{position:relative}
.tab-btn{position:relative;z-index:3;padding:14px 14px;font-size:16px;font-weight:500;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;white-space:nowrap;background:none;transition:color .25s ease}
.tab-btn:hover{color:var(--text-hover)}
.tab-btn.tab-active{color:#fff}
[data-theme="light"] .tab-btn.tab-active{color:#fff}
.tab-slider{position:absolute;top:0;left:0;width:0;height:100%;background:linear-gradient(135deg,rgba(197,15,53,.9),rgba(105,11,31,.85));box-shadow:0 8px 24px -8px rgba(197,15,53,.95),inset 0 1px 0 rgba(255,255,255,.12);opacity:0;pointer-events:none;z-index:2;transform:translate3d(0,0,0);transition:transform .38s cubic-bezier(.32,.72,0,1),width .38s cubic-bezier(.32,.72,0,1),opacity .25s ease;will-change:transform}
.tab-slider::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 50%,rgba(0,0,0,.12));pointer-events:none}
.tab-slider.no-anim{transition:none}
[data-theme="light"] .tab-slider{box-shadow:0 4px 24px -2px rgba(197,15,53,.65)}
/* Telegram fullscreen Mini App: tabs morph into a compact capsule pinned
 * to the safe-area strip between the native Close and menu buttons — same
 * treatment status-node uses. */
.tg-fs nav{position:fixed;top:var(--tg-safe-area-inset-top,0px);left:50%;transform:translateX(-50%);z-index:30;margin-top:0;height:var(--tg-content-safe-area-inset-top,40px);display:flex;align-items:center;pointer-events:none}
.tg-fs nav .wrap{padding:0!important;display:inline-flex;pointer-events:auto}
.tg-fs nav>.wrap::after{display:none}
.tg-fs .tab-track{display:inline-flex!important;gap:0;flex:none!important;overflow:visible!important;min-width:0;background:rgba(255,255,255,.08);border-radius:8px;padding:2px}
[data-theme="light"] .tg-fs .tab-track{background:rgba(0,0,0,.06)}
.tg-fs .tab-btn{padding:5px 14px!important;font-size:13px!important;font-weight:600;border-bottom:none!important;border-radius:6px}
.tg-fs .tab-slider{border-radius:6px!important;top:2px!important;height:calc(100% - 4px)!important;overflow:hidden;box-shadow:0 4px 12px -4px rgba(197,15,53,.6),inset 0 1px 0 rgba(255,255,255,.15)!important}

/* ── Empty-state for the «Прочие» pane ── */
.tab-pane-empty{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 240px)}
.empty-state{max-width:360px;text-align:center;padding:32px 20px;color:var(--text-secondary)}
.empty-state-icon{width:56px;height:56px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--bg-card);border:1px solid var(--border-card);color:var(--text-faint)}
.empty-state-icon svg{width:28px;height:28px}
.empty-state-title{font-size:16px;font-weight:600;color:var(--text-bright);margin-bottom:8px}
.empty-state-sub{font-size:14px;line-height:1.45;color:var(--text-secondary)}

/* Round icon buttons in the header (theme/help). Identical recipe to status-node. */
.icon-btn{background:none;border:1px solid var(--border-chip);border-radius:8px;cursor:pointer;padding:4px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color .2s,border-color .2s,background .2s,box-shadow .25s;position:relative}
.icon-btn:hover{color:var(--text-hover);border-color:var(--text-secondary)}
.icon-btn svg{width:18px;height:18px;display:block}

/* Theme toggle: show moon in dark theme, sun in light. */
.theme-btn .theme-ico-sun{display:none}
[data-theme="light"] .theme-btn .theme-ico-moon{display:none}
[data-theme="light"] .theme-btn .theme-ico-sun{display:block}

/* Help button — toggles to a close icon when tour is active. */
.help-btn .help-ico-close{display:none}
.help-btn.tour-active{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff;border-color:transparent;box-shadow:0 2px 10px -2px var(--accent-soft);z-index:90}
.help-btn.tour-active .help-ico-q{display:none}
.help-btn.tour-active .help-ico-close{display:block}

/* Container for the search UI. */
.container{padding:18px 16px 80px}

.search-form{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:0 8px 30px -16px rgba(0,0,0,.45);
}
[data-theme="light"] .search-form{box-shadow:0 8px 28px -16px rgba(0,0,0,.14)}

.search-form .row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.search-form .row-controls{align-items:center;justify-content:flex-start;margin-bottom:6px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-grow{flex:1 1 320px}
.field-small{flex:0 0 140px}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-faint);font-weight:600}

input[type=search],input[type=number],input[type=text],select{
  background:var(--bg-input);border:1px solid var(--border-line);color:var(--text-primary);
  padding:11px 13px;border-radius:9px;font:inherit;width:100%;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input[type=search]:focus,input[type=number]:focus,input[type=text]:focus,select:focus{
  border-color:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(197,15,53,.14);
}
/* Render the dropdown chevron ourselves so the select matches our inputs in
   both themes — the platform default washes out on the dark bg.  */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px 8px;
}
select option{background:var(--bg-input);color:var(--text-primary)}

.checkbox{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);cursor:pointer;user-select:none;font-size:14px}
.checkbox input{width:16px;height:16px;accent-color:#C50F35}

button.primary{
  background:linear-gradient(135deg,var(--accent-from),var(--accent-to));
  color:#fff;border:0;border-radius:9px;padding:11px 22px;font-weight:600;font-size:14px;
  cursor:pointer;letter-spacing:.02em;
  box-shadow:0 6px 18px -8px rgba(197,15,53,.85),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .12s,box-shadow .15s,opacity .15s;
}
button.primary:hover{box-shadow:0 8px 22px -8px rgba(197,15,53,1),inset 0 1px 0 rgba(255,255,255,.18)}
button.primary:active{transform:translateY(1px)}
button.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

.hint{margin:0;color:var(--text-faint);font-size:12px;line-height:1.5}
.hint code{font-family:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;background:var(--bg-input);border:1px solid var(--border-line);padding:1px 6px;border-radius:4px;font-size:11px}

.status{margin:16px 0 8px;min-height:22px;color:var(--text-secondary);font-size:13px;padding:0 2px}
.status.error{color:var(--status-removed-fg)}

.results{display:flex;flex-direction:column;gap:8px}

/* Each result is now a compact, horizontal row. Click anywhere on it to
 * open the full-details modal. Two visible lines:
 *   row 1 — name + status/category badges
 *   row 2 — small meta line (year • nationality) */
.person{
  background:var(--bg-card);border:1px solid var(--border-card);border-radius:10px;
  padding:11px 14px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s;
}
.person:hover{border-color:var(--accent-soft);background:var(--bg-input)}
.person:active{transform:translateY(1px)}

.person-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.person-name{font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--text-bright);line-height:1.3;flex:0 1 auto;min-width:0}

.badge{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--border-line);color:var(--text-secondary)}
.badge-new{background:var(--status-new-bg);color:var(--status-new-fg);border-color:transparent}
.badge-removed{background:var(--status-removed-bg);color:var(--status-removed-fg);border-color:transparent}
.badge-category{background:var(--category-bg);color:var(--category-fg);border-color:transparent;text-transform:none;letter-spacing:.02em;font-weight:600}

/* Inline pipe-separated meta line. `.sep` is a thin vertical divider that
 * collapses gracefully when a value is missing (the JS just omits the
 * <span> entirely). */
.person-line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  font-size:12.5px;color:var(--text-secondary);line-height:1.4;
}
.person-line .meta-k{color:var(--text-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-right:5px}
.person-line .meta-v{color:var(--text-primary)}
.person-line .sep{color:var(--text-faint);opacity:.5;user-select:none}

/* ── Modal: detail card ──
 * Re-uses the .modal-bg overlay markup from status-node. These styles
 * shape the *body* (id="modal-body") which is filled in by JS. */
.modal-bg{background:var(--bg-modal);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-bg.hidden{display:none!important}

.mdl-name{font-size:18px;font-weight:700;color:var(--text-bright);line-height:1.25;margin-bottom:6px;letter-spacing:.01em}
.mdl-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mdl-grid{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:13px;color:var(--text-primary)}
.mdl-grid dt{color:var(--text-faint);font-size:11px;text-transform:uppercase;letter-spacing:.55px;font-weight:600;margin:0;align-self:start;padding-top:1px}
.mdl-grid dd{margin:0;word-break:break-word;line-height:1.45}
.mdl-section{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border-line)}
.mdl-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.55px;color:var(--text-faint);font-weight:600;margin-bottom:6px}
.mdl-features{font-size:13px;color:var(--text-secondary);white-space:pre-wrap;line-height:1.5}

.alias-link{color:var(--text-bright);cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.alias-link:hover{color:var(--accent-from)}

.footer{margin-top:32px;font-size:12px;color:var(--text-faint);text-align:center;padding:0 16px 24px;line-height:1.5}
.footer a{color:var(--text-hover);text-decoration:none;font-weight:600}
.footer a:hover{color:var(--text-primary)}

/* ── Tour spotlight system — ported verbatim from status-node ── */
html.tour-on{overflow:hidden}
.tour-backdrop{position:fixed;inset:0;z-index:80;background:transparent;cursor:pointer}
.tour-spot{
  position:absolute;z-index:81;border-radius:8px;
  box-shadow:0 0 0 4px rgba(197,15,53,.55),0 0 0 9999px rgba(0,0,0,.62);
  pointer-events:auto;cursor:pointer;
  transition:top .2s ease,left .2s ease,width .2s ease,height .2s ease;
  animation:tourPulse 2s ease-in-out infinite;
}
[data-theme="light"] .tour-spot{box-shadow:0 0 0 4px rgba(197,15,53,.5),0 0 0 9999px rgba(0,0,0,.45)}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 4px rgba(197,15,53,.55),0 0 0 9999px rgba(0,0,0,.62)}50%{box-shadow:0 0 0 6px rgba(197,15,53,.7),0 0 0 9999px rgba(0,0,0,.62)}}
.tour-card{
  position:absolute;z-index:82;background:var(--bg-card);color:var(--text-bright);
  border:1px solid var(--border-card);border-radius:12px;padding:14px 16px 12px;
  box-shadow:0 12px 36px -8px rgba(0,0,0,.7),0 4px 16px -4px rgba(0,0,0,.45);
  max-width:320px;width:calc(100vw - 32px);cursor:pointer;
  animation:tourCardIn .22s ease-out;transition:top .22s ease,left .22s ease;
}
[data-theme="light"] .tour-card{box-shadow:0 12px 36px -8px rgba(0,0,0,.18),0 4px 16px -4px rgba(0,0,0,.1)}
.tour-card-title{font-size:16px;font-weight:700;color:var(--text-white);margin-bottom:6px;letter-spacing:.02em}
.tour-card-body{font-size:15px;color:var(--text-primary);line-height:1.45}
.tour-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.tour-card-progress{flex:0 0 auto}
.tour-card-hint{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-bright);text-transform:none;letter-spacing:.02em;font-weight:500;line-height:1.25;text-align:right}
.tour-tap-pulse{position:relative;display:inline-flex;width:18px;height:18px;flex:0 0 auto;align-items:center;justify-content:center}
.tour-tap-pulse::before,.tour-tap-pulse::after{content:"";position:absolute;border:2px solid #C50F35;border-radius:50%;animation:tourTap 1.4s ease-out infinite;opacity:0}
.tour-tap-pulse::before{width:18px;height:18px}
.tour-tap-pulse::after{width:18px;height:18px;animation-delay:.7s}
.tour-tap-pulse>span{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--accent-from),var(--accent-to));box-shadow:0 0 0 2px rgba(255,255,255,.18)}
@keyframes tourTap{0%{transform:scale(.4);opacity:.9}80%{opacity:0}100%{transform:scale(1.6);opacity:0}}
.tour-dots{
  position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0));transform:translateX(-50%);
  z-index:82;display:flex;gap:6px;background:rgba(12,10,13,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:8px 12px;border-radius:999px;border:1px solid var(--border-line);cursor:default;
}
[data-theme="light"] .tour-dots{background:rgba(255,255,255,.85)}
.tour-dot{width:8px;height:8px;border-radius:999px;background:var(--text-faint);transition:background .2s,transform .2s;cursor:pointer}
.tour-dot.done{background:var(--text-secondary)}
.tour-dot.active{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));transform:scale(1.25)}
@keyframes tourCardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Mobile breakpoints ── */
@media (max-width:540px){
  .container{padding:14px 12px 80px}
  .search-form{padding:14px 14px 12px;border-radius:12px}
  .search-form .row{gap:8px}
  .field-small{flex:1 1 100%}
  .row-controls{flex-direction:column;align-items:stretch;gap:12px}
  .row-controls .checkbox{justify-content:flex-start}
  .person{padding:10px 12px;border-radius:9px}
  .person-name{font-size:13.5px}
  .person-line{font-size:12px;gap:3px 8px}
  /* The wordmark stays visible on phones (shrunk via the responsive
   * width rules near `.brand`); only on truly cramped <340px viewports
   * does it drop out (rule lives at the top of styles.css). */
  header>.wrap{padding:12px 12px 10px!important}
}

@media (max-width:480px){
  .tour-card{padding:12px 14px 10px;width:calc(100vw - 24px);max-width:340px}
  .tour-card-title{font-size:15px}
  .tour-card-body{font-size:14px}
}

/* Telegram fullscreen: header has padding-top to clear the native close button. */
body.tg-fs header>.wrap{padding-top:18px}

/* ── Preloader ──
 * Ported 1:1 from status-node (#preloader block) but with two
 * functional swaps for the Wanted Radar brand:
 *   - `.pl-fist` → `.pl-eye`: instead of a fist sliding up from below
 *     (`plFistUp`), the eye PNG "opens" by scaling vertically from 0
 *     to 1 around its centre (`plEyeOpen`). The animation runs after
 *     the red gradient rect has finished its bottom-up reveal, so the
 *     visual reads as: card slides into view → eye opens inside it.
 *   - `.pl-sub` is unused: the wordmark is two lines tall and fills
 *     the same vertical space the wordmark+subtitle pair used in
 *     status-node, so the secondary line would have nowhere to go.
 *
 * The container is hidden by adding `.done` on the element itself
 * (NOT on body) — see app.js for the timing. `pointer-events:none`
 * keeps the fading-out preloader from swallowing clicks. */
#preloader{position:fixed;inset:0;z-index:99999;background:var(--bg-page);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .6s cubic-bezier(.4,0,.2,1)}
#preloader::before{content:'';position:absolute;inset:0;background:url('static/backround-main.svg') center/cover no-repeat;opacity:1;pointer-events:none;animation:plBgDim 1.8s cubic-bezier(.4,0,.2,1) .2s forwards}
[data-theme="light"] #preloader::before{background-image:url('static/backround-main-light.svg%3Fv=4')}
#preloader.done{opacity:0;pointer-events:none}
.pl-wrap{display:flex;align-items:stretch;gap:28px;position:relative;z-index:1}
.pl-icon{position:relative;width:160px;height:160px;flex-shrink:0;overflow:hidden}
.pl-rect{position:relative;width:160px;height:160px;clip-path:inset(100% 0 0 0);animation:plRevealRect .9s cubic-bezier(.22,1,.36,1) .15s forwards;border-radius:12px;overflow:hidden}
.pl-rect svg{width:100%;height:100%;display:block}
.pl-rect::after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 40%,transparent 55%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 1px rgba(255,255,255,.07);pointer-events:none}
/* Eye PNG sits centred over the gradient card and starts as a
 * horizontal slit (scaleY 0). The keyframe lets it "open" upward
 * AND downward simultaneously, which is what `transform-origin:
 * center` + scaleY does for free. We keep the image at ~78% of
 * the rect so the gradient frame is still visible around it. */
.pl-eye{position:absolute;top:50%;left:50%;width:78%;height:78%;transform:translate(-50%,-50%) scaleY(0);transform-origin:center center;opacity:0;animation:plEyeOpen .85s cubic-bezier(.22,1,.36,1) .55s forwards}
.pl-eye img{width:100%;height:100%;display:block;object-fit:contain;image-rendering:-webkit-optimize-contrast;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.pl-text{display:flex;flex-direction:column;justify-content:center;padding:6px 0}
/* Two-line wordmark (846×366 ≈ 2.31:1). At 130px tall the width is
 * ~300px which sits nicely next to the 160px icon. */
.pl-title{height:130px;opacity:0;transform:translateX(60px);animation:plSlideText .85s cubic-bezier(.22,1,.36,1) .85s forwards}
.pl-title svg{height:100%;width:auto;display:block}
@keyframes plRevealRect{to{clip-path:inset(0 0 0 0)}}
@keyframes plEyeOpen{0%{opacity:0;transform:translate(-50%,-50%) scaleY(0)}30%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}}
@keyframes plSlideText{to{opacity:1;transform:translateX(0)}}
@keyframes plBgDim{to{opacity:.4}}
@media(max-width:540px){
  .pl-wrap{gap:16px}
  .pl-icon{width:96px;height:96px}
  .pl-rect{width:96px;height:96px}
  .pl-text{padding:4px 0}
  .pl-title{height:78px}
}
/* Light-theme: the inline filter on the wordmark SVG keeps the existing
 * `header svg path[fill="white"]` override out of the preloader (the
 * preloader card has a red gradient background — white text is correct
 * there regardless of theme). */
#preloader .pl-title svg path[fill="white"]{fill:#fff}