/* MERQIVO — product experience layer
   Shared finishing details for the logged-in product. The rules in this file are
   intentionally structural and cosmetic only; they never alter entitlement,
   checkout, database, or role behavior. */

:root{
  --shell:rgba(8,12,27,.82);
  --panel-strong:rgba(18,25,50,.9);
  --panel-soft:rgba(255,255,255,.045);
  --shadow-lg:0 28px 80px rgba(0,0,0,.28);
  --shadow-sm:0 14px 34px rgba(0,0,0,.18);
}

html{scroll-behavior:smooth}
body{position:relative;background-attachment:fixed}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;
  background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,.17) 0 1px,transparent 1.3px),
                   radial-gradient(circle at 72% 64%,rgba(255,255,255,.1) 0 1px,transparent 1.2px);
  background-size:88px 88px,123px 123px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}

::selection{background:rgba(124,92,255,.48);color:#fff}
a,button,input,textarea,select{transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease,opacity .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.topbar{
  position:sticky;top:0;z-index:50;min-height:66px;
  background:linear-gradient(180deg,rgba(7,11,24,.94),rgba(7,11,24,.78));
  box-shadow:0 10px 40px rgba(0,0,0,.18);
}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(169,141,255,.45),rgba(56,217,197,.35),transparent)}
.brand{position:relative}
.brand::after{content:"";position:absolute;left:2px;bottom:-8px;width:34px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--teal));opacity:.72}
.brand-mark img{transition:transform .25s ease,filter .25s ease}
.brand:hover .brand-mark img{transform:rotate(-5deg) scale(1.06);filter:drop-shadow(0 0 13px rgba(56,217,197,.35)) drop-shadow(0 0 20px rgba(124,92,255,.35))}
.topbar .pill{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.055)}
.topbar .pill:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);transform:translateY(-1px)}
.topbar a.pill[aria-current="page"]{color:#fff;border-color:rgba(169,141,255,.55);background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(56,217,197,.1));box-shadow:0 8px 24px rgba(124,92,255,.14)}
.mq-member-tools{display:inline-flex;align-items:center;gap:7px}
.mq-tool-link{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.045);color:var(--muted);text-decoration:none;font:700 .72rem var(--body)}
.mq-tool-link:hover{color:#fff;border-color:rgba(169,141,255,.42);background:rgba(124,92,255,.12);transform:translateY(-1px)}
.mq-tool-icon,.mq-profile-dot{width:25px;height:25px;display:grid;place-items:center;flex:none;border-radius:50%;font-size:.72rem;color:#fff;background:linear-gradient(135deg,rgba(124,92,255,.82),rgba(56,217,197,.64));box-shadow:0 6px 16px rgba(0,0,0,.2)}
.mq-profile-dot{font:800 .68rem var(--head);color:#07121a;background:linear-gradient(135deg,var(--gold),var(--teal))}

.wrap{max-width:1180px;padding-top:42px}
.wrap>h1{font-size:clamp(1.75rem,3.4vw,2.45rem);line-height:1.08;letter-spacing:-.035em}
.wrap>h1::before{content:"";display:block;width:42px;height:4px;margin-bottom:15px;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--coral),var(--gold));box-shadow:0 0 24px rgba(255,110,138,.25)}
.wrap>.sub{font-size:.96rem;line-height:1.65;max-width:730px;margin-bottom:30px}

.card,.block,.chart-card,.kpi,.setup,.row-card,.empty{
  box-shadow:var(--shadow-sm);
}
.card,.block,.chart-card,.kpi,.setup{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(22,30,59,.86),rgba(12,18,39,.72));
}
.card::before,.block::before,.chart-card::before,.kpi::before,.setup::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
}
.row-card:hover,.kpi:hover{border-color:rgba(169,141,255,.32);transform:translateY(-2px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(124,92,255,.42)}
.btn:active,.pill:active{transform:translateY(0) scale(.985)}

.empty{
  min-height:210px;display:grid;place-items:center;padding:38px;
  background:linear-gradient(145deg,rgba(124,92,255,.075),rgba(56,217,197,.035));
  border-color:rgba(169,141,255,.28);
}
.loading{gap:12px;color:#bbc3d8}
.loading::before{content:"";width:31px;height:31px;border-radius:50%;border:2px solid rgba(255,255,255,.1);border-top-color:var(--violet2);border-right-color:var(--teal);animation:mq-spin .8s linear infinite;box-shadow:0 0 24px rgba(124,92,255,.2)}
@keyframes mq-spin{to{transform:rotate(360deg)}}
.empty-rich{display:block;min-height:0;text-align:left;padding:0;overflow:hidden}
.empty-rich-main{padding:28px;background:radial-gradient(circle at 95% 0,rgba(124,92,255,.19),transparent 15rem)}
.empty-rich-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:16px;border-radius:15px;background:linear-gradient(135deg,rgba(124,92,255,.38),rgba(56,217,197,.25));border:1px solid rgba(169,141,255,.26);font-size:1.2rem}
.empty-rich h2{margin:0 0 7px;font:800 1.18rem var(--head);color:var(--text);letter-spacing:-.02em}.empty-rich p{max-width:630px;margin:0;color:var(--muted);font-size:.84rem;line-height:1.6}
.empty-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.empty-actions .pill{text-decoration:none}
.empty-path{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-top:1px solid var(--line);background:var(--line)}
.empty-step{padding:18px;background:rgba(9,14,31,.95)}.empty-step b{display:block;color:#fff;font-size:.76rem;margin-bottom:4px}.empty-step span{display:block;color:var(--muted);font-size:.7rem;line-height:1.45}
@media(max-width:620px){.empty-rich-main{padding:23px 20px}.empty-path{grid-template-columns:1fr}.empty-step{padding:14px 20px}}

/* Small-screen navigation: persistent, thumb-friendly, and derived from the
   same destinations already present in each role's desktop interface. */
.mq-mobile-dock{display:none}
@media(max-width:720px){
  body.mq-has-dock{padding-bottom:78px}
  .wrap{padding:28px 16px 46px}
  .wrap>h1{font-size:1.82rem}
  .wrap>.sub{font-size:.9rem;margin-bottom:23px}
  .mq-mobile-dock{
    position:fixed;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));z-index:80;
    border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:7px;
    background:rgba(8,12,27,.88);box-shadow:0 18px 55px rgba(0,0,0,.42);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)
  }
  .mq-mobile-dock a{display:grid;place-items:center;gap:2px;min-width:0;padding:7px 5px;border-radius:14px;color:var(--muted);text-decoration:none;font:700 .65rem var(--body);white-space:nowrap}
  .mq-mobile-dock a .mq-dock-icon{font-size:1.05rem;line-height:1}
  .mq-mobile-dock a.on{color:#fff;background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(56,217,197,.12));box-shadow:inset 0 0 0 1px rgba(169,141,255,.22)}
  .empty{min-height:180px;padding:28px 20px}
  .mq-member-tools{gap:5px}
  .mq-tool-link{padding:5px;min-height:36px;border-color:rgba(255,255,255,.1)}
  .mq-tool-label{display:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* An error message in the loading box must stop the spinner. Setting textContent
   alone leaves .loading::before animating forever, so the page reads as still
   working while it is actually telling you it failed. Seen live 2026-09-17. */
.loading.is-error::before{display:none}
.loading.is-error{min-height:40vh}