/* ZelvotriX 2026 Experience System | V1.0
   Authoritative final layer for the existing public site, private workspace,
   Platform Admin Hub, and link-gated Product Hunt campaign.
   Uses existing PHP markup, URLs, permissions and the approved brand assets.
   Scoped selectors prevent platform menus from inheriting app/public styles.
*/
:root{
 --zfx-ink:#14233b;--zfx-ink-2:#31445e;--zfx-muted:#687a91;--zfx-navy:#0a1c34;
 --zfx-navy-2:#0d2b4d;--zfx-accent:#116ee6;--zfx-accent-hover:#005dd1;
 --zfx-cyan:#00bde5;--zfx-border:#dfE7f2;--zfx-canvas:#f3f7fd;
 --zfx-surface:#fff;--zfx-soft:#edf5ff;--zfx-green:#20af81;
 --zfx-radius:17px;--zfx-elev:0 6px 24px rgba(20,48,93,.05),0 1px 2px rgba(20,48,93,.025);
 --zfx-elev-hover:0 16px 36px rgba(21,56,100,.11),0 3px 7px rgba(21,56,100,.04);
 --zfx-motion:cubic-bezier(.2,.75,.2,1);
}
:where(body.mode-app,body.mode-site,body.zph-shell,body.zfx-ph){font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
:where(body.mode-app,body.mode-site,body.zph-shell,body.zfx-ph) :where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #27b6ee!important;outline-offset:3px}
:where(body.mode-app,body.mode-site,body.zph-shell,body.zfx-ph) :where(button,a){-webkit-tap-highlight-color:transparent}
:where(body.mode-app,body.mode-site,body.zph-shell,body.zfx-ph) :where(svg){flex-shrink:0}
:where(body.mode-app,body.mode-site,body.zph-shell,body.zfx-ph) :where([hidden]){display:none!important}
/* Public site: consistent nav, component borders, true dropdown icon (not a text glyph). */
body.mode-site .site-header{background:rgba(9,27,49,.98);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px rgba(6,26,52,.13)}
body.mode-site .site-links> a,body.mode-site .zx-nav-resources>summary{border-radius:9px;transition:color .2s var(--zfx-motion),background .2s var(--zfx-motion)}
body.mode-site .site-links> a:hover,body.mode-site .zx-nav-resources>summary:hover{background:rgba(255,255,255,.09)}
body.mode-site .site-links a[aria-current="page"]{color:#fff}
body.mode-site .zx-nav-resources>summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none}
body.mode-site .zx-nav-resources>summary::-webkit-details-marker{display:none}
body.mode-site .zx-nav-resources>summary::marker{content:''}
body.mode-site .zvx-chevron{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;transition:transform .22s var(--zfx-motion)}
body.mode-site .zvx-chevron svg{display:block!important;width:13px!important;height:13px!important;transform:rotate(90deg);stroke-width:2.2}
body.mode-site .zx-nav-resources[open] .zvx-chevron{transform:rotate(180deg)}
body.mode-site .zx-resource-menu{border:1px solid #dce8f5;border-radius:15px;box-shadow:0 18px 48px rgba(3,23,49,.19)}
body.mode-site .btn-primary,body.mode-site .nav-actions .btn-primary{background:linear-gradient(135deg,#167bf0,#0859c8);border-radius:10px;box-shadow:0 8px 24px rgba(16,110,230,.22)}
body.mode-site .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
body.mode-site :where(.feature-card,.pricing-card,.resource-card,.zx-feature-card){transition:transform .24s var(--zfx-motion),box-shadow .24s var(--zfx-motion),border-color .24s var(--zfx-motion)}
body.mode-site :where(.feature-card,.pricing-card,.resource-card,.zx-feature-card):hover{transform:translateY(-3px);box-shadow:var(--zfx-elev-hover);border-color:#bed5ef}
/* Workspace: coherent white surfaces, pale blue canvas, compact crisp sidebar. */
body.mode-app{background:var(--zfx-canvas);color:var(--zfx-ink)}
body.mode-app .app-sidebar{background:linear-gradient(180deg,#0b213c,#09182e)!important;border-right:1px solid #17375b!important}
body.mode-app .side-brand{border-bottom:1px solid rgba(224,241,255,.08)}
body.mode-app .side-caption,body.mode-app .side-section-title{color:#9eb9d6;letter-spacing:.12em}
body.mode-app .workspace-switch{background:rgba(255,255,255,.045)!important;border:1px solid rgba(193,221,255,.12)!important;border-radius:13px}
body.mode-app .app-sidebar .app-navigation :is(a,.zvx5-nav-group-button),body.mode-app .app-sidebar .sidebar-bottom :is(a,button){transition:background .19s var(--zfx-motion),color .19s var(--zfx-motion),border-color .19s var(--zfx-motion)}
body.mode-app .app-sidebar .app-navigation a{border-radius:10px;position:relative;min-height:42px}
body.mode-app .app-sidebar .app-navigation a.active,body.mode-app .app-sidebar .app-navigation a[aria-current="page"]{background:linear-gradient(90deg,rgba(22,118,220,.42),rgba(18,96,168,.2))!important;color:#fff;border-color:rgba(126,192,255,.29)!important}
body.mode-app .app-sidebar .app-navigation a.active::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 5px 5px 0;background:#4bc9f6}
body.mode-app .app-sidebar .app-navigation :is(a,.zvx5-nav-group-button):hover,body.mode-app .app-sidebar .sidebar-bottom :is(a,button):hover{background:rgba(255,255,255,.085)!important;color:#fff}
body.mode-app .app-sidebar :where(svg){width:18px;height:18px;stroke-width:1.75}
body.mode-app .zvx5-chevron{display:inline-block;transition:transform .2s ease}
body.mode-app .app-topbar{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #e0e8f2!important;box-shadow:0 3px 12px rgba(32,70,113,.035)}
body.mode-app .breadcrumb{color:#65758b;font-weight:650}
body.mode-app .breadcrumb b{color:#acc0d4;margin:0 6px}
body.mode-app .app-page{color:var(--zfx-ink)}
body.mode-app .app-page-head{margin-bottom:20px}
body.mode-app .app-page-head h1{color:#0b223e;letter-spacing:-.045em;font-size:clamp(1.75rem,2.55vw,2.65rem)}
body.mode-app .app-page-head p{color:var(--zfx-muted)}
body.mode-app .app-eyebrow{color:#3378b6;letter-spacing:.12em;font-size:.7rem}
body.mode-app :where(.panel,.stat-card,.zvx5-journey,.zvx5-integration-card){border:1px solid var(--zfx-border)!important;border-radius:var(--zfx-radius)!important;box-shadow:var(--zfx-elev)!important;background:#fff}
body.mode-app .stats-grid{gap:14px;margin-bottom:22px}
body.mode-app .stat-card{position:relative;overflow:hidden;min-height:132px;padding:19px 21px!important;transition:box-shadow .24s var(--zfx-motion),transform .24s var(--zfx-motion)}
body.mode-app .stat-card:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#3faefa,#075fd8)}
body.mode-app .stat-card:hover{box-shadow:var(--zfx-elev-hover)!important;transform:translateY(-2px)}
body.mode-app .stat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.mode-app .stat-top>span:first-child{font-weight:720;color:#62758b;font-size:.79rem}
body.mode-app .stat-icon{width:36px;height:36px;display:grid;place-items:center;background:#eaf3ff;color:#176ac6;border:1px solid #e2eefc}
body.mode-app .stat-icon svg{width:18px;height:18px}
body.mode-app .stat-value{color:#102441!important;letter-spacing:-.055em;margin-top:10px!important;font-weight:800;font-variant-numeric:tabular-nums;font-size:clamp(1.65rem,2.65vw,2.35rem)!important}
body.mode-app .stat-card>small{color:#8090a2}
body.mode-app .panel{padding:clamp(18px,2vw,24px)!important}
body.mode-app .panel-title h2{color:#172b47;letter-spacing:-.025em}
body.mode-app .quick-actions a,body.mode-app .zvx5-page-actions a{border-radius:10px;background:#fff;color:#245383;border:1px solid #dce7f1;transition:background .18s ease,transform .18s ease,border-color .18s ease}
body.mode-app .quick-actions a:hover,body.mode-app .zvx5-page-actions a:hover{transform:translateY(-1px);border-color:#b5d6fb;background:#f1f8ff}
body.mode-app .app-page :where(.btn-primary){background:linear-gradient(125deg,#1679e9,#075bc5);border-color:#0866d3;box-shadow:0 5px 16px rgba(20,104,210,.17);border-radius:10px;transition:transform .2s var(--zfx-motion),box-shadow .2s ease}
body.mode-app .app-page .btn-primary:hover{transform:translateY(-1px);box-shadow:0 11px 22px rgba(20,104,210,.22)}
body.mode-app :where(.data-table){border-spacing:0}
body.mode-app .data-table th{background:#f7faff!important;color:#61758c!important;font-size:.7rem!important;font-weight:800!important;letter-spacing:.05em}
body.mode-app .data-table td{border-bottom:1px solid #ebf0f5;color:#41516a}
body.mode-app .data-table tbody tr{transition:background .16s ease}
body.mode-app .data-table tbody tr:hover{background:#f5f9ff}
body.mode-app .data-table a.table-link{color:#145ec3;font-weight:760}
body.mode-app .pill{border-radius:100px;font-size:.7rem;font-weight:800;padding:5px 9px;white-space:nowrap}
body.mode-app .pill-new{background:#ecf4ff;color:#1663b9}body.mode-app .pill-scheduled{background:#f1edff;color:#7052c3}
body.mode-app .pill-in_progress{background:#fff5de;color:#916313}body.mode-app .pill-completed,body.mode-app .pill-paid{background:#e4f8f1;color:#187a59}
body.mode-app .pill-cancelled{background:#fff0f1;color:#b54252}
body.mode-app .activity-row:hover,body.mode-app .shortcut-list>a:hover{background:#f7faff}
body.mode-app .app-page input:not([type="checkbox"]):not([type="radio"]),body.mode-app .app-page select,body.mode-app .app-page textarea{border-radius:10px}
/* Shared data-driven workspace visualisation components */
body.mode-app .zfx-pulse{margin:8px 0 23px}
body.mode-app .zfx-pulse-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
body.mode-app .zfx-overline{display:block;color:#40729d;letter-spacing:.13em;font-size:.67rem;font-weight:850;margin:0 0 7px}
body.mode-app .zfx-pulse-heading h2{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.035em;color:#0f2746;margin:0 0 4px;font-weight:800}
body.mode-app .zfx-pulse-heading p{font-size:.82rem;color:#6e8097;margin:0;line-height:1.55}
body.mode-app .zfx-subtle-link,body.mode-app .zfx-view-link{display:inline-flex;gap:6px;align-items:center;color:#1662b9;font-size:.79rem;font-weight:750;text-decoration:none;white-space:nowrap}
body.mode-app .zfx-subtle-link svg,body.mode-app .zfx-view-link svg{width:15px;height:15px;transition:transform .2s}
body.mode-app .zfx-subtle-link:hover svg,body.mode-app .zfx-view-link:hover svg{transform:translateX(3px)}
body.mode-app .zfx-pulse-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;margin-bottom:15px}
body.mode-app .zfx-panel{padding:clamp(18px,2vw,25px);border-radius:17px;border:1px solid var(--zfx-border);box-shadow:var(--zfx-elev);background:white;min-width:0}
body.mode-app .zfx-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
body.mode-app .zfx-panel-head h3{font-size:1.04rem;letter-spacing:-.022em;margin:0;color:#16314d}
body.mode-app .zfx-micro-label{color:#78879b;font-size:.7rem}
body.mode-app .zfx-status-layout{display:grid;grid-template-columns:minmax(170px,.85fr) minmax(160px,1fr);align-items:center;gap:20px}
body.mode-app .zfx-ring{width:min(100%,210px);aspect-ratio:1;border-radius:50%;background:var(--zfx-ring);padding:0;margin:auto;box-shadow:inset 0 0 0 1px #f0f4f8;display:grid;place-items:center;transition:filter .3s ease}
body.mode-app .zfx-ring-centre{width:68%;height:68%;min-width:0;min-height:0;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 0 1px #eef3f9;text-align:center}
body.mode-app .zfx-ring-centre strong{font-size:clamp(1.9rem,3vw,2.45rem);line-height:1;font-weight:850;color:#142744;font-variant-numeric:tabular-nums}
body.mode-app .zfx-ring-centre span{color:#72849c;font-size:.7rem;margin-top:8px}
body.mode-app .zfx-legend{display:flex;flex-direction:column;gap:5px;min-width:0}
body.mode-app .zfx-legend a{display:grid;grid-template-columns:11px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 8px;border-radius:8px;color:#465875;font-size:.78rem;text-decoration:none;transition:background .18s ease}
body.mode-app .zfx-legend a:hover{background:#f0f6ff}
body.mode-app .zfx-legend-dot{width:10px;height:10px;border-radius:4px;background:var(--zfx-dot)}
body.mode-app .zfx-legend strong{font-size:.79rem;color:#1e304b;font-variant-numeric:tabular-nums}
body.mode-app .zfx-bar-chart{height:215px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:12px;padding:8px 0 0}
body.mode-app .zfx-bar-col{height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}
body.mode-app .zfx-bar-col>strong{font-size:.71rem;color:#40536c;font-variant-numeric:tabular-nums}
body.mode-app .zfx-bar-col>small{font-size:.69rem;color:#7c8c9f}
body.mode-app .zfx-bar-track{width:min(100%,49px);flex:1;display:flex;align-items:flex-end;position:relative;background:linear-gradient(180deg,transparent 0 24%,#f3f7fc 24% 25%,transparent 25% 49%,#f3f7fc 49% 50%,transparent 50% 74%,#f3f7fc 74% 75%,transparent 75%);border-bottom:1px solid #e4ebf4}
body.mode-app .zfx-bar-track>span{display:block;width:100%;height:var(--zfx-bar-height);border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#61b2fc 0%,#116bd7 100%);box-shadow:0 5px 12px rgba(26,113,217,.12);transform-origin:bottom}
body.mode-app.zfx-motion-ready .zfx-bar-track>span{transform:scaleY(0)}
body.mode-app .zfx-inview .zfx-bar-track>span{animation:zfx-rise .85s var(--zfx-motion) forwards}
body.mode-app .zfx-bar-col:nth-child(2) .zfx-bar-track>span{animation-delay:.045s}body.mode-app .zfx-bar-col:nth-child(3) .zfx-bar-track>span{animation-delay:.09s}body.mode-app .zfx-bar-col:nth-child(4) .zfx-bar-track>span{animation-delay:.135s}body.mode-app .zfx-bar-col:nth-child(5) .zfx-bar-track>span{animation-delay:.18s}body.mode-app .zfx-bar-col:nth-child(6) .zfx-bar-track>span{animation-delay:.225s}body.mode-app .zfx-bar-col:nth-child(7) .zfx-bar-track>span{animation-delay:.27s}
@keyframes zfx-rise{to{transform:scaleY(1)}}
body.mode-app .zfx-chart-note{color:#7d8c9f;font-size:.69rem;border-top:1px solid #edf2f8;margin-top:15px;padding-top:12px}
body.mode-app .zfx-recent{margin-bottom:22px}
body.mode-app .zfx-recent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:9px}
body.mode-app .zfx-recent-item{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:inherit;border:1px solid #e7edf5;border-radius:11px;padding:11px 14px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
body.mode-app .zfx-recent-item:hover{border-color:#bfd7f0;box-shadow:0 6px 15px rgba(30,65,100,.07);transform:translateY(-1px)}
body.mode-app .zfx-job-number{display:grid;place-items:center;min-width:54px;padding:7px 5px;border-radius:9px;background:#eaf3ff;color:#2364af;font-weight:800;font-size:.7rem}
body.mode-app .zfx-recent-detail{flex:1;min-width:0;display:grid;gap:3px}
body.mode-app .zfx-recent-detail strong{font-size:.81rem;color:#1d3555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mode-app .zfx-recent-detail small{font-size:.7rem;color:#8493a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mode-app .zfx-recent-item>.pill{margin-left:auto}
body.mode-app .zfx-recent-item>svg{width:16px;height:16px;color:#8da1b9}
body.mode-app .zfx-empty{color:#74869a;font-size:.84rem;line-height:1.65;margin:0}
body.mode-app .zfx-job-status-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 19px}
body.mode-app .zfx-job-status-filters>a{display:inline-flex;align-items:center;gap:10px;border:1px solid #dce7f2;background:#fff;padding:10px 13px;border-radius:9px;font-size:.78rem;font-weight:700;color:#45617c;text-decoration:none;transition:all .18s ease}
body.mode-app .zfx-job-status-filters>a strong{font-variant-numeric:tabular-nums;color:#5e7490;font-size:.73rem;background:#f0f5fa;padding:3px 7px;border-radius:7px}
body.mode-app .zfx-job-status-filters>a:hover{background:#eff7ff;border-color:#accef2}
body.mode-app .zfx-job-status-filters>a.is-selected{background:#106ad6;border-color:#106ad6;color:#fff;box-shadow:0 5px 14px rgba(25,107,207,.2)}
body.mode-app .zfx-job-status-filters>a.is-selected strong{background:#ffffff28;color:#fff}
/* Admin Hub: full interface refresh, icons, cards, data presentation and nav layout. */
body.zph-shell{background:var(--zfx-canvas);color:var(--zfx-ink)}
body.zph-shell .zph-layout{grid-template-columns:262px minmax(0,1fr)}
body.zph-shell .zph-sidebar{background:linear-gradient(180deg,#0b233f 0%,#08182c 100%);border-color:#15395d;width:262px;scrollbar-color:#44668e transparent}
body.zph-shell .zph-main{min-width:0}
body.zph-shell .zph-nav{padding:0 12px 15px;gap:3px}
body.zph-shell .zph-nav a{display:flex;align-items:center;gap:13px;min-height:43px;border-radius:10px;line-height:1.3;color:#bdcde0;transition:background .19s var(--zfx-motion),color .19s var(--zfx-motion),transform .19s var(--zfx-motion)}
body.zph-shell .zph-nav a:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
body.zph-shell .zph-nav a.active,body.zph-shell .zph-nav a[aria-current="page"]{background:linear-gradient(90deg,#1665b756,#13528d42);border:1px solid rgba(137,205,255,.27);color:#fff;box-shadow:inset 3px 0 #42c9ef}
body.zph-shell .zfx-admin-nav-icon{display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;color:#9fbddc}
body.zph-shell .zph-nav a:is(.active,[aria-current="page"]) .zfx-admin-nav-icon{color:#80d9ff}
body.zph-shell .zfx-admin-nav-icon svg{display:block;width:19px;height:19px;stroke-width:1.8;stroke:currentColor;fill:none;max-width:none}
body.zph-shell .zph-side-bottom{border-top:1px solid #ffffff18}
body.zph-shell .zph-top{min-height:71px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--zfx-border);box-shadow:0 3px 15px rgba(34,74,116,.035)}
body.zph-shell .zph-crumb{color:#5b7190;font-weight:730;font-size:.8rem}
body.zph-shell .zph-content{max-width:1700px;padding:clamp(19px,2.5vw,38px);padding-bottom:70px}
body.zph-shell .zph-pagehead{margin-bottom:24px}
body.zph-shell .zph-pagehead h1{font-size:clamp(1.7rem,2.5vw,2.55rem);font-weight:800;color:#0e2743;letter-spacing:-.045em}
body.zph-shell .zph-pagehead p{font-size:.87rem;color:#718199}
body.zph-shell .zph-eyebrow{color:#3777bb;font-weight:850}
body.zph-shell .zph-kpis{gap:14px}
body.zph-shell :is(.zph-kpi,.zph-card){background:#fff;border:1px solid var(--zfx-border);border-radius:17px;box-shadow:var(--zfx-elev)}
body.zph-shell .zph-kpi{padding:21px;position:relative;overflow:hidden;transition:box-shadow .22s var(--zfx-motion),transform .22s var(--zfx-motion)}
body.zph-shell .zph-kpi:after{content:'';position:absolute;right:-30px;top:-35px;width:100px;height:100px;background:radial-gradient(circle,#bfe5ff88,transparent 70%);pointer-events:none}
body.zph-shell .zph-kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#23b7f5,#1264ce)}
body.zph-shell .zph-kpi:hover{transform:translateY(-2px);box-shadow:var(--zfx-elev-hover)}
body.zph-shell .zph-kpi strong{color:#102747;font-size:clamp(1.7rem,2.6vw,2.35rem);font-weight:850;margin-top:10px}
body.zph-shell .zph-kpi span{font-weight:730;color:#5d738e}
body.zph-shell .zph-card{padding:clamp(17px,2vw,24px)}
body.zph-shell .zph-card h2{color:#163454;font-weight:800;letter-spacing:-.025em}
body.zph-shell .zph-btn{background:linear-gradient(120deg,#1976e5,#0d5cbd);border-radius:10px;box-shadow:0 5px 12px #1471d51b;transition:transform .18s var(--zfx-motion),box-shadow .18s ease}
body.zph-shell .zph-btn:hover{transform:translateY(-1px);box-shadow:0 9px 17px #1471d52d}
body.zph-shell .zph-btn.secondary{background:white;color:#28608f;border-color:#d6e3f2;box-shadow:none}
body.zph-shell .zph-table th{background:#f7faff;color:#637992;letter-spacing:.08em;font-size:.66rem;padding:12px 13px}
body.zph-shell .zph-table td{padding:13px;border-color:#edf2f7}
body.zph-shell .zph-table tbody tr{transition:background .16s ease}
body.zph-shell .zph-table tbody tr:hover{background:#f7faff}
body.zph-shell .zph-tinychart{height:190px;gap:10px}
body.zph-shell .zph-tinychart>div{gap:8px;color:#637992}
body.zph-shell .zph-tinychart b{background:linear-gradient(180deg,#68b7fa 0%,#116dd9 100%);border-radius:8px 8px 3px 3px;transform-origin:bottom;box-shadow:0 4px 10px #146bd02a}
body.zph-shell.zfx-motion-ready .zph-tinychart b{transform:scaleY(0)}
body.zph-shell .zfx-inview .zph-tinychart b{animation:zfx-rise .83s var(--zfx-motion) forwards}
body.zph-shell .zph-metric{border-color:#e3edf8;background:#f7fbff;border-radius:12px}
body.zph-shell .zph-metric b{font-size:clamp(1.45rem,2vw,1.95rem);color:#183655}
body.zph-shell .zph-quick a{border-radius:11px;background:#f8fbff;transition:background .16s,transform .16s}
body.zph-shell .zph-quick a:hover{background:#edf6ff;transform:translateX(2px)}
body.zph-shell .zph-hub-backdrop{backdrop-filter:blur(3px)}
/* Product Hunt: align product illustrations, forms and buttons to the same coherent system. */
body.zfx-ph{color:#1b3152}
body.zfx-ph :where(.feature-card,.flow-card,.conversion-panel,.visual-frame){border-radius:15px}
body.zfx-ph :where(.feature-card,.conversion-panel){transition:transform .22s var(--zfx-motion),box-shadow .22s var(--zfx-motion)}
body.zfx-ph :where(.feature-card,.conversion-panel):hover{transform:translateY(-2px);box-shadow:var(--zfx-elev-hover)}
body.zfx-ph :where(.button){border-radius:10px;transition:transform .2s var(--zfx-motion),filter .2s ease,box-shadow .2s ease}
body.zfx-ph :where(.button):hover{transform:translateY(-1px);filter:brightness(1.05)}
/* Motion progressive enhancement. Never suppress real content without JS. */
@media(min-width:801px){
 body.mode-app .zfx-panel[data-zfx-reveal],body.mode-app .zfx-pulse[data-zfx-reveal],body.zph-shell .zph-card,body.zph-shell .zph-kpi{will-change:transform}
}
@media(max-width:1180px){body.mode-app .zfx-status-layout{grid-template-columns:1fr;gap:14px}body.mode-app .zfx-ring{max-width:185px}body.mode-app .zfx-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){body.mode-app .zfx-pulse-grid{grid-template-columns:1fr}body.mode-app .zfx-status-layout{grid-template-columns:minmax(160px,.7fr) 1fr}body.mode-app .zfx-legend{display:flex}}
@media(max-width:800px){body.mode-app .zfx-pulse-grid{grid-template-columns:1fr}body.mode-app .zfx-panel{padding:17px}body.mode-app .zfx-recent-grid{grid-template-columns:1fr}body.zph-shell .zph-sidebar{width:min(310px,calc(100vw - 42px))}}
@media(max-width:600px){
 body.mode-app .zfx-status-layout{grid-template-columns:1fr}body.mode-app .zfx-ring{max-width:195px}body.mode-app .zfx-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}body.mode-app .zfx-legend a{padding:6px 5px}body.mode-app .zfx-bar-chart{height:165px;gap:6px}body.mode-app .zfx-job-status-filters{gap:6px}body.mode-app .zfx-job-status-filters>a{padding:8px 10px;font-size:.73rem}body.mode-app .zfx-recent-item{flex-wrap:wrap}body.mode-app .zfx-recent-item>.pill{margin-left:0}
 body.mode-app .app-page-head h1{font-size:1.68rem}body.zph-shell .zph-content{padding:17px 13px 60px}body.zph-shell .zph-kpis{gap:9px}body.zph-shell .zph-kpi{padding:17px}body.zph-shell .zph-card{padding:16px}
}
@media(max-width:420px){body.mode-app .zfx-legend{grid-template-columns:1fr}body.mode-app .zfx-ring{max-width:185px}body.mode-app .zfx-bar-chart{height:142px}body.mode-app .zfx-bar-col strong{font-size:.64rem}body.mode-app .zfx-bar-col small{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){
 :where(body.mode-app,body.mode-site,body.zph-shell,body.zfx-ph) :where(*, *::before, *::after){animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 body.mode-app .zfx-bar-track>span,body.zph-shell .zph-tinychart b{transform:none!important}
}
@media print{body.mode-app .zfx-bar-track>span,body.zph-shell .zph-tinychart b{transform:none!important}body.mode-app .zfx-subtle-link{display:none}}

/* Remove the remaining legacy glyph arrows from sidebar controls. */
body.mode-app .zvx5-chevron{width:10px;height:10px;position:relative;flex:0 0 10px}
body.mode-app .zvx5-chevron::after{content:'';position:absolute;width:6px;height:6px;top:0;left:1px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
body.mode-app :where(.zvx5-sidebar-toggle,.zvx5-header-toggle,.zvx5-topbar-toggle,.zvx5-footer-toggle,.zvx5-panel-toggle) svg{display:block;width:17px;height:17px}
body.zph-shell .zph-menu svg{display:block;width:20px;height:20px;stroke:currentColor;fill:none}
@media(max-width:760px){body.zph-shell .zph-layout{display:block}}