:root{
--primary:var(--primary, #3B82F6);
--primary-600:var(--primary-600, #2563EB);
--primary-700:var(--primary-700, #1D4ED8);
--secondary:var(--secondary, #10B981);
}
body{background:linear-gradient(180deg,var(--mk-brand-main-gradient-from),var(--mk-brand-main-gradient-to));background-color:var(--mk-brand-main-bg);}
.dark body{background:linear-gradient(180deg,var(--mk-brand-main-gradient-from-dark),var(--mk-brand-main-gradient-to-dark));background-color:var(--mk-brand-main-bg-dark);}
a{color:var(--mk-brand-link);} a:hover{color:var(--mk-brand-link-hover);}
.btn-primary,.btn--primary{background:var(--mk-brand-button-bg)!important;border-color:var(--mk-brand-button-bg)!important}
.btn-primary:hover,.btn--primary:hover{background:var(--mk-brand-button-hover)!important;border-color:var(--mk-brand-button-hover)!important}
.app-sidebar{background:linear-gradient(180deg,var(--mk-brand-sidebar-tier-1),var(--mk-brand-sidebar-tier-2))!important;}
.nav-item:hover{background:var(--mk-brand-sidebar-hover-bg)!important;color:var(--mk-brand-sidebar-hover-text)!important}
.nav-item:hover svg,.nav-item:hover .nav-ic{color:var(--mk-brand-sidebar-hover-text)!important}
html{font-size:15px;}
/* --- Lufga font (local) --- */
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaThin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaExtraLight.ttf") format("truetype");font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaLight.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaRegular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaMedium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaSemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaBold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaBlack.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Lufga";src:url("../fonts/lufga/LufgaBoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;font-display:swap;}
:root{
--mk-font: "Lufga", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.ptr-indicator {
position: fixed;
top: 12px;
left: 50%;
transform: translate(-50%, -16px);
opacity: 0;
z-index: 9999;
pointer-events: none;
transition: transform .18s ease, opacity .18s ease;
padding: 10px 14px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.9);
color: #fff;
font: 600 13px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}
.ptr-indicator.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
.ptr-indicator.is-ready {
background: rgba(37, 99, 235, 0.95);
}
.ptr-indicator.is-loading {
background: rgba(16, 185, 129, 0.95);
}
/* PM attachments + toast */
.pm-attach-list{display:flex;flex-direction:column;gap:8px}
.pm-attach{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(148,163,184,.16);background:#fff;color:#0f172a;text-decoration:none;font-weight:800}
.pm-attach:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.08)}
.pm-comment[data-depth="1"],.pm-comment[data-depth="2"],.pm-comment[data-depth="3"],.pm-comment[data-depth="4"]{margin-left:22px}
.pm-toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:18px;z-index:9999;padding:12px 14px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:#0f172a;color:#fff;font-weight:900;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;box-shadow:0 18px 40px rgba(15,23,42,.28)}
.pm-toast.is-error{background:#7f1d1d}
.pm-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Utility helpers (project does not ship full Tailwind)
Used by dropdowns / conditional UI. */
.hidden{display:none !important;}
#mkFullModal td, #mkFullModal th {
overflow-wrap: anywhere!important;
}
/* --- MK Modal: Plausible-like --- */
.mk-modal-backdrop{
background: rgba(0,0,0,.45);
backdrop-filter: blur(4px);
}
/* Panel altijd licht (ook in dark mode) */
.mk-modal-panel,
.dark .mk-modal-panel{
background: rgba(255,255,255,.98);
color: #0f172a;
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
/* Subtle borders inside */
.mk-modal-panel .mk-modal-divider{
border-color: rgba(15,23,42,.08);
}
/* Icons/favicons/flags niet mega */
.mk-modal-panel img,
.mk-modal-panel svg{
max-width: 20px;
max-height: 20px;
}
/* Specifiek voor lijst-icon blokjes (referrals/os/countries) */
.mk-analytics-icon{
width: 20px;
margin-right: 10px;
height: 20px;
object-fit: contain;
border-radius: 6px;
}
#mkFullModal th {
overflow-wrap: anywhere !important;
text-align: right;}
:root{--primary:#3B82F6;--primary-600:#2563EB;--primary-700:#1D4ED8;--secondary:#10B981}
.text-primary{color:var(--primary)!important}
.bg-primary{background-color:var(--primary)!important}
.bg-primary-600{background-color:var(--primary-600)!important}
.bg-primary-700{background-color:var(--primary-700)!important}
.bg-primary-10{background-color:rgba(59,130,246,.10)!important}
.bg-primary-15{background-color:rgba(59,130,246,.15)!important}
.border-primary{border-color:var(--primary)!important}
.ring-primary{--tw-ring-color:var(--primary)!important}
.btn-primary{background-color:var(--primary)!important;color:#fff!important}
.btn-primary:hover{opacity:.9}
.text-secondary{color:var(--secondary)!important}
.bg-secondary{background-color:var(--secondary)!important}
.border-secondary{border-color:var(--secondary)!important}
/* Tailwind-like hover helpers used in templates */
.hover\:bg-primary-700:hover{background-color:var(--primary-700)!important}
.hover\:bg-primary-600:hover{background-color:var(--primary-600)!important}
/* Allow Tailwind-like hover classnames in templates (no Tailwind build shipped) */
/* Modern table baseline (used across admin tables) */
.ta-table{width:100%;text-align:left;font-size:.875rem;border-collapse:separate;border-spacing:0}
.ta-table thead th{background:rgba(148,163,184,.10);color:#334155;font-weight:600;font-size:.75rem;letter-spacing:.02em;text-transform:uppercase;padding:.75rem 1rem;border-bottom:1px solid rgba(148,163,184,.18)}
.ta-table tbody td{padding:.9rem 1rem;border-bottom:1px solid rgba(148,163,184,.12);vertical-align:middle}
.ta-table tbody tr:hover{background:rgba(148,163,184,.10)}
.dark .ta-table thead th{background:rgba(30,41,59,.6);color:#e2e8f0;border-bottom:1px solid rgba(148,163,184,.18)}
.dark .ta-table tbody td{border-bottom:1px solid rgba(148,163,184,.14)}
.dark .ta-table tbody tr:hover{background:rgba(30,41,59,.55)}
/* Monitor view: keep the 3 status pills visible on mobile */
.badges-stack{display:grid;grid-template-columns: repeat(3,minmax(0,1fr))!important;gap:.5rem;width:100%}
@media (min-width: 640px){.badges-stack{display:flex;gap:.75rem;width:auto}}
/*body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"!important} */
/* Typography
Keep everything on the same font stack (TailAdmin ships Outfit by default).
*/
body{font-family:var(--mk-font)!important}
/* TailAdmin utilities sometimes apply font-sans; make sure it resolves to the brand font as well. */
.font-sans{font-family:var(--mk-font)!important}
/* Headings: consistent weight/spacing across pages */
main h1{font-size:1.5rem;line-height:2rem;font-weight:700;letter-spacing:-.02em}
main h2{font-size:1.125rem;line-height:1.75rem;font-weight:700;letter-spacing:-.01em}
main h3{font-size:1rem;line-height:1.5rem;font-weight:700}
/* Buttons (used in monitors/seo pages) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .9rem;border-radius:12px;font-weight:600;font-size:.875rem;line-height:1.25;transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;text-decoration:none;border:1px solid rgba(148,163,184,.35);background:rgba(255,255,255,.85);color:#0f172a}
.dark .btn{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.22);color:#f8fafc}
.btn:hover{box-shadow:0 10px 22px rgba(15,23,42,.10)}
.btn:active{transform:translateY(1px)}
.btn--sm{padding:.4rem .7rem;border-radius:10px;font-size:.8125rem}
.btn--icon{padding:.45rem;border-radius:12px}
.btn--primary{background: var(--primary)!important;border-color: var(--primary)!important;color:#fff}
.btn--primary:hover{background:var(--primary-700);border-color:var(--primary-700)}
.btn--ghost{background:transparent;border-color:rgba(148,163,184,.35);color:#334155}
.dark .btn--ghost{border-color:rgba(148,163,184,.22);color:#e2e8f0}
.btn--ghost:hover{background:rgba(59,130,246,.06)}
.btn--danger{background:#fee2e2;border-color:#fecaca;color:#b91c1c}
.dark .btn--danger{background:rgba(127,29,29,.35);border-color:rgba(239,68,68,.25);color:#fca5a5}
.font-medium{font-weight:500!important}
/* Ensure the topbar/user dropdown always stays above tables/cards/charts */
.app-topbar{
background: var(--surface);
box-shadow: var(--shadow-soft);
border-bottom: 1px solid rgba(15,23,42,.08);
backdrop-filter: blur(10px);
position: relative;
z-index:2147483000 !important;
isolation:isolate;
}
.user-menu{z-index:2147483100 !important;}
/* Tooltips */
.tooltip{
/*
Absolute positioning so the tooltip scrolls with the page.
JS keeps it anchored and clamps it to the viewport.
*/
position:absolute; z-index:2147483647;
width:min(360px, calc(100vw - 24px));
max-width:360px;
padding:10px 12px; border-radius:12px;
background:rgba(15,23,42,.97); color:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.25);
font-size:12px; line-height:1.35;
pointer-events:none; opacity:0; transform:translateY(4px);
transition:opacity .12s ease, transform .12s ease;
/* Always keep content readable on small screens */
max-height:calc(100vh - 24px);
overflow:auto;
}
.tooltip.show{opacity:1; transform:translateY(0);}
.tooltip .k{opacity:.75}
.tooltip hr{border:0;border-top:1px solid rgba(255,255,255,.12); margin:8px 0;}
/* ------------------------------------------------------------
Badges (framework-free replacement for Tailwind utility tags)
------------------------------------------------------------ */
.badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 14px;
border-radius:9999px;
border:1px solid transparent;
font-size:14px;
line-height:1.1;
font-weight:600;
white-space:nowrap;
}
.badge--sm {
padding: 8px 12px;
font-size: 12px;
line-height: 1;
}
.badge--sm .badge__icon{width:16px;height:16px;}
.badge--sm .badge__dot{width:7px;height:7px;}
.badge__icon{width:18px;height:18px;display:block;flex:0 0 auto;}
.badge__dot{width:8px;height:8px;border-radius:9999px;background:currentColor;display:block;flex:0 0 auto;}
.badge__label{display:inline-block;}
/* Badge stack helper (used for monitor/analytics headers on mobile) */
@media (max-width:640px){
.badges-stack .badge{width:100%;justify-content:center}
}
.badge--ok{background:#dcfce7;color:#15803d;border-color:#bbf7d0;}
.badge--warn{background:#ffedd5;color:#c2410c;border-color:#fed7aa;}
.badge--down{background:#fee2e2;color:#b91c1c;border-color:#fecaca;}
.badge--neutral{background:#f3f4f6;color:#374151;border-color:#e5e7eb;}
.dark .badge--ok{background:rgba(20,83,45,.35);color:#86efac;border-color:rgba(34,197,94,.25);}
.dark .badge--warn{background:rgba(124,45,18,.35);color:#fdba74;border-color:rgba(249,115,22,.25);}
.dark .badge--down{background:rgba(127,29,29,.35);color:#fca5a5;border-color:rgba(239,68,68,.25);}
.dark .badge--neutral{background:rgba(30,41,59,.7);color:#e2e8f0;border-color:rgba(51,65,85,.7);}
/* Checks-table row backgrounds */
.row-up{background:rgba(34,197,94,.08);} /* green */
.row-warn{background:rgba(249,115,22,.10);} /* orange */
.row-down{background:rgba(239,68,68,.08);} /* red */
.dark .row-up{background:rgba(34,197,94,.12);}
.dark .row-warn{background:rgba(249,115,22,.14);}
.dark .row-down{background:rgba(239,68,68,.12);}
/* Tooltip content styling */
.tooltip .tt-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-bottom:10px;color:#22c55e;}
.tooltip .tt-row{margin:4px 0;font-size:14px;}
.tooltip .tt-row .k{display:inline-block;min-width:170px;font-weight:700;opacity:.9;}
.tooltip .tt-sep{height:1px;background:rgba(255,255,255,.12);margin:10px 0;}
.tooltip .tt-sub{font-weight:700;opacity:.9;margin:6px 0 2px 0;}
.tooltip .muted{opacity:.8;font-size:12px;}
.tooltip .tt-ic{width:18px;height:18px;display:inline-block;flex:0 0 auto;opacity:.95;}
.tooltip .tt-ic-lock{background:url('data:image/svg+xml;utf8,') center/contain no-repeat;}
.tooltip .tt-ic-www{background:url('data:image/svg+xml;utf8,') center/contain no-repeat;}
.tooltip .tt-ic-dot{background:url('data:image/svg+xml;utf8,') center/contain no-repeat;}
/* Responsive tables (mobile overflow) */
.table-scroll {
width: 100%;
overflow-x: auto;
overflow-y: visible;
position: relative;
-webkit-overflow-scrolling: touch;
}
.table-scroll table {
width: 100%;
}
/* On small screens, keep columns readable by allowing horizontal scroll */
@media (max-width: 768px) {
.table-scroll table {
min-width: 720px;
}
}
/* ------------------------------------------------------------
Financial dashboards (framework-free)
------------------------------------------------------------ */
.fin-cards{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px;
margin-bottom:18px;
}
@media (max-width:1100px){
.fin-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
.fin-cards{grid-template-columns:repeat(1,minmax(0,1fr));}
}
.fin-card{
background:rgba(255,255,255,.86);
border:1px solid rgba(148,163,184,.28);
border-radius:28px;
padding:18px;
box-shadow:0 16px 36px rgba(15,23,42,.08);
backdrop-filter: blur(10px);
}
.dark .fin-card{
background:rgba(15,23,42,.55);
border-color:rgba(148,163,184,.18);
box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.fin-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.fin-card__value{font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:#0f172a;}
.dark .fin-card__value{color:#f8fafc;}
.fin-card__label{margin-top:6px;color:#64748b;font-weight:600;}
.dark .fin-card__label{color:#cbd5e1;}
.fin-card__icon{
width:44px;height:44px;
border-radius:18px;
display:flex;align-items:center;justify-content:center;
border:1px solid rgba(148,163,184,.22);
}
.fin-card__icon svg{width:22px;height:22px;}
.fin-card__bar{margin-top:14px;height:6px;border-radius:9999px;background:rgba(148,163,184,.18);overflow:hidden;}
.fin-card__bar > span{display:block;height:100%;background:var(--primary);width:40%;}
.fin-icon--amber{background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.25);}
.fin-icon--sky{background:rgba(14,165,233,.12);color:#0369a1;border-color:rgba(14,165,233,.25);}
.fin-icon--rose{background:rgba(244,63,94,.12);color:#be123c;border-color:rgba(244,63,94,.25);}
.fin-icon--emerald{background:rgba(16,185,129,.12);color:#047857;border-color:rgba(16,185,129,.25);}
.dark .fin-icon--amber{background:rgba(245,158,11,.18);color:#fcd34d;border-color:rgba(245,158,11,.25);}
.dark .fin-icon--sky{background:rgba(14,165,233,.18);color:#7dd3fc;border-color:rgba(14,165,233,.25);}
.dark .fin-icon--rose{background:rgba(244,63,94,.18);color:#fda4af;border-color:rgba(244,63,94,.25);}
.dark .fin-icon--emerald{background:rgba(16,185,129,.18);color:#6ee7b7;border-color:rgba(16,185,129,.25);}
.status-pill{
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:9999px;
font-size:12px;
font-weight: 600;
letter-spacing:.01em;
border:1px solid transparent;
text-transform: capitalize;
}
.status-pill--paid{background:rgba(16,185,129,.14);color:#047857;border-color:rgba(16,185,129,.28);}
.status-pill--overdue{background:rgba(244,63,94,.14);color:#be123c;border-color:rgba(244,63,94,.28);}
.status-pill--pending{background:rgba(245,158,11,.16);color:#b45309;border-color:rgba(245,158,11,.30);}
.status-pill--draft{background:rgba(14,165,233,.14);color:#0369a1;border-color:rgba(14,165,233,.28);}
.status-pill--accepted{background:rgba(16,185,129,.14);color:#047857;border-color:rgba(16,185,129,.28);}
.status-pill--rejected{background:rgba(244,63,94,.14);color:#be123c;border-color:rgba(244,63,94,.28);}
.status-pill--viewed{background:rgba(59,130,246,.14);color:#1d4ed8;border-color:rgba(59,130,246,.28);}
.dark .status-pill--viewed{background:rgba(59,130,246,.20);color:#93c5fd;border-color:rgba(59,130,246,.28);}
.dark .status-pill--paid{background:rgba(16,185,129,.20);color:#6ee7b7;border-color:rgba(16,185,129,.28);}
.dark .status-pill--overdue{background:rgba(244,63,94,.20);color:#fda4af;border-color:rgba(244,63,94,.28);}
.dark .status-pill--pending{background:rgba(245,158,11,.22);color:#fcd34d;border-color:rgba(245,158,11,.28);}
.dark .status-pill--draft{background:rgba(14,165,233,.20);color:#7dd3fc;border-color:rgba(14,165,233,.28);}
.dark .status-pill--accepted{background:rgba(16,185,129,.20);color:#6ee7b7;border-color:rgba(16,185,129,.28);}
.dark .status-pill--rejected{background:rgba(244,63,94,.20);color:#fda4af;border-color:rgba(244,63,94,.28);}
/* Charts: keep a stable height so the page doesn't grow endlessly */
.chart-wrap{height:320px;}
@media (max-width: 768px){
.chart-wrap{height:260px;}
}
/* Ensure charts always stretch full width/height of their container (Chart.js sets inline size attributes) */
.chart-wrap canvas{width:100% !important;height:100% !important;display:block;}
/* Analytics sub-sections (client-side tabs) */
.is-hidden{display:none !important;}
/* ---------------------------
Analytics UI (admin)
--------------------------- */
.analytics-subnav{
display:flex;
gap:8px;
flex-wrap:wrap;
padding:10px;
border:1px solid rgba(148,163,184,.35);
border-radius:12px;
background:rgba(255,255,255,.85);
}
.dark .analytics-subnav{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.2)}
.analytics-subnav__item{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:10px;
border:1px solid rgba(148,163,184,.25);
color:#334155;
background:rgba(255,255,255,.7);
text-decoration:none;
font-size:14px;
line-height:1;
}
.dark .analytics-subnav__item{color:#e2e8f0;background:rgba(2,6,23,.25);border-color:rgba(148,163,184,.18)}
.analytics-subnav__item:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.25)}
.analytics-subnav__item.is-active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45);color:#1d4ed8}
.dark .analytics-subnav__item.is-active{color:#93c5fd;background:rgba(59,130,246,.14)}
.analytics-dot{width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
/* Tiny icon chips used in the analytics tabs */
.analytics-ico{width:16px;height:16px;display:inline-block;position:relative;color:currentColor;opacity:.9}
.analytics-ico:before{content:"";position:absolute;inset:0;background:currentColor;opacity:.9}
/* Flag emoji rendering: ensure emoji-capable font stack so flags don't disappear when using Inter */
.mk-flag{
font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",system-ui,sans-serif;
font-size: 16px;
line-height: 1;
display:inline-flex;
align-items:center;
font-size:18px;
line-height:1;
}
.analytics-ico--bars:before{clip-path:polygon(0 70%,15% 70%,15% 100%,0 100%, 22% 45%,37% 45%,37% 100%,22% 100%, 44% 20%,59% 20%,59% 100%,44% 100%, 66% 55%,81% 55%,81% 100%,66% 100%, 88% 35%,100% 35%,100% 100%,88% 100%)}
.analytics-ico--grid:before{clip-path:polygon(0 0,46% 0,46% 46%,0 46%, 54% 0,100% 0,100% 46%,54% 46%, 0 54%,46% 54%,46% 100%,0 100%, 54% 54%,100% 54%,100% 100%,54% 100%)}
.analytics-ico--share:before{clip-path:polygon(10% 55%,55% 10%,65% 20%,20% 65%, 60% 10%,90% 10%,90% 40%,80% 40%,80% 25%,65% 25%,65% 55%,35% 55%,35% 45%,65% 45%)}
.analytics-ico--map:before{clip-path:polygon(5% 15%,35% 5%,65% 15%,95% 5%,95% 85%,65% 95%,35% 85%,5% 95%)}
.analytics-ico--desktop:before{clip-path:polygon(8% 10%,92% 10%,92% 70%,8% 70%, 38% 75%,62% 75%,62% 85%,38% 85%)}
.analytics-ico--spark:before{clip-path:polygon(50% 0,58% 26%,85% 15%,74% 40%,100% 50%,74% 60%,85% 85%,58% 74%,50% 100%,42% 74%,15% 85%,26% 60%,0 50%,26% 40%,15% 15%,42% 26%)}
.analytics-ico--route:before{clip-path:polygon(18% 22%,30% 22%,30% 32%,24% 32%,24% 72%,70% 72%,70% 64%,82% 64%,82% 80%,64% 80%,64% 78%,18% 78%,18% 22%, 70% 22%,82% 22%,82% 36%,70% 36%)}
.analytics-ico--alert:before{clip-path:polygon(50% 6%,94% 86%,6% 86%,50% 6%, 46% 34%,54% 34%,54% 58%,46% 58%, 46% 66%,54% 66%,54% 74%,46% 74%)}
/* Progress-bar tables (Top pages/referrers) */
.metric-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.metric-row__left{min-width:0}
.metric-row__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* User flow (Sankey) */
.flow-wrap{position:relative}
.flow-sankey{display:block}
.flow-links{color:rgba(59,130,246,.9)}
.flow-node rect{fill:rgba(59,130,246,.22);stroke:rgba(59,130,246,.35);stroke-width:1}
.dark .flow-node rect{fill:rgba(59,130,246,.18);stroke:rgba(99,102,241,.35)}
.flow-node text{font-size:12px;fill:rgba(15,23,42,.85)}
.dark .flow-node text{fill:rgba(226,232,240,.92)}
.flow-node__value{font-size:11px;fill:rgba(100,116,139,.85)}
.dark .flow-node__value{fill:rgba(148,163,184,.92)}
.flow-node:hover rect{fill:rgba(59,130,246,.32)}
.dark .flow-node:hover rect{fill:rgba(99,102,241,.28)}
.metric-row__bar{height:6px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden;margin-top:6px}
.metric-row__bar > span{display:block;height:100%;width:0;background:rgba(59,130,246,.85)}
.dark .metric-row__bar{background:rgba(148,163,184,.18)}
.dark .metric-row__bar > span{background:rgba(147,197,253,.85)}
/* Analytics extras: site preview + chips */
.site-preview{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.site-preview__left{display:flex;align-items:center;gap:10px;min-width:0}
.site-favicon{width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.08)}
.site-preview__shot{flex:0 0 auto}
.site-shot{width:280px;height:86px;object-fit:cover;border-radius:12px;border:1px solid rgba(0,0,0,.08)}
@media (max-width:768px){
.site-preview{flex-direction:column;align-items:stretch}
.site-preview__shot{order:-1}
.site-shot{width:100%;height:140px}
}
/* Dark-mode utility gaps (keeps TailAdmin look even when a Tailwind class isn't compiled) */
.dark .text-gray-900{color:#f8fafc !important;}
.dark .text-gray-800{color:#e2e8f0 !important;}
.dark .text-gray-700{color:#cbd5e1 !important;}
.dark .text-gray-600{color:#94a3b8 !important;}
.dark .text-gray-500{color:#94a3b8 !important;}
.chart-wrap--sm{height:160px}
/* Small colored icon bubbles used in KPI cards (monitor/server/analytics views) */
.stat-ico{width:40px;height:40px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.stat-ico svg{width:18px;height:18px}
.stat-ico--blue{background:rgba(59,130,246,.12);color:rgb(37,99,235)}
.stat-ico--green{background:rgba(34,197,94,.12);color:rgb(22,163,74)}
.stat-ico--orange{background:rgba(249,115,22,.12);color:rgb(234,88,12)}
.stat-ico--red{background:rgba(239,68,68,.12);color:rgb(220,38,38)}
.dark .stat-ico--blue{background:rgba(59,130,246,.18);color:rgb(147,197,253)}
.dark .stat-ico--green{background:rgba(34,197,94,.18);color:rgb(134,239,172)}
.dark .stat-ico--orange{background:rgba(249,115,22,.18);color:rgb(253,186,116)}
.dark .stat-ico--red{background:rgba(239,68,68,.18);color:rgb(252,165,165)}
.row-compact td{vertical-align:middle}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(148,163,184,.35);background:rgba(2,6,23,.02);padding:4px 10px;border-radius:999px;font-size:12px;line-height:1}
.dark .chip{background:rgba(255,255,255,.03);border-color:rgba(148,163,184,.25)}
.chip__dot{width:8px;height:8px;border-radius:999px;background:rgba(34,197,94,.9)}
.chip__ic{display:inline-flex;align-items:center;justify-content:center;width:18px}
/* ------------------------------------------------------------
Plausible-inspired analytics tweaks (layout + density)
NOTE: Visual inspiration only; no Plausible code copied.
------------------------------------------------------------ */
.plausible-kpis > div{box-shadow:none}
.plausible-kpis .w-9.h-9.rounded-xl{display:none}
.plausible-kpis .text-3xl{font-size:28px}
@media (max-width: 640px){
.plausible-kpis .text-3xl{font-size:24px}
}
/* ============================================================
Modern polish (inspired by react-free.tailwind-admin.com)
============================================================ */
:root{
--surface: rgba(255,255,255,.86);
--surface-strong: rgba(255,255,255,.96);
--surface-dark: rgba(2,6,23,.62);
--surface-dark-strong: rgba(15,23,42,.88);
--ring: rgba(15,23,42,.10);
--ring-dark: rgba(148,163,184,.18);
--shadow-soft: 0 10px 30px rgba(15,23,42,.08);
--shadow-card: 0 18px 40px rgba(15,23,42,.10);
--shadow-float: 0 24px 70px rgba(15,23,42,.18);
}
/* Pure-CSS pulsing dot (used on dashboard live traffic)  avoids Tailwind animate-ping purge issues */
.mk-pulse-dot{position:relative;display:inline-block;width:10px;height:10px;border-radius:9999px;background:var(--dot,#10b981);}
.mk-pulse-dot::before{content:"";position:absolute;inset:-6px;border-radius:9999px;background:var(--dotGlow,rgba(16,185,129,.35));animation:mkPulse 1.2s ease-out infinite;}
@keyframes mkPulse{0%{transform:scale(.2);opacity:0;}30%{opacity:1;}100%{transform:scale(1);opacity:0;}}
/* App background: a gentle gradient instead of flat
(also applied to html so PWA standalone doesn't flash white on mobile) */
html{
min-height: 100%;
background:
radial-gradient(1200px 700px at 12% 10%, rgba(59,130,246,.22), transparent 60%),
radial-gradient(900px 600px at 85% 8%, rgba(14,165,233,.16), transparent 55%),
radial-gradient(900px 700px at 30% 90%, rgba(99,102,241,.10), transparent 55%),
linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%)
}
/* Dark mode is toggled on via assets/app.js */
html.dark{
min-height: 100%;
background:
radial-gradient(900px 400px at 15% 10%, rgba(59,130,246,.12), transparent 55%),
radial-gradient(800px 380px at 85% 0%, rgba(99,102,241,.10), transparent 60%),
linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(3,7,18,1) 100%);
}
body {
background: radial-gradient(900px 400px at 15% 10%, rgba(59, 130, 246, .10), transparent 55%), radial-gradient(800px 380px at 85% 0%, rgba(99, 102, 241, .08), transparent 60%), linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(241, 245, 249, 1) 100%);
height: auto !important;
min-height: 100%;
}
.dark body {
background: radial-gradient(900px 400px at 15% 10%, rgba(59, 130, 246, .12), transparent 55%), radial-gradient(800px 380px at 85% 0%, rgba(99, 102, 241, .10), transparent 60%), linear-gradient(180deg, rgba(2, 6, 23, 1) 0%, rgba(3, 7, 18, 1) 100%)!important;
height: auto !important;
min-height: 100%;
}
/* Sidebar + Topbar: glassy surface, soft shadow */
.app-sidebar{
/* Light mode: subtle Swetrix-ish gradient (very soft) */
background:
radial-gradient(600px 420px at 20% 10%, rgba(59,130,246,.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.86) 100%);
box-shadow: var(--shadow-card);
border: 1px solid rgba(15,23,42,.08);
backdrop-filter: blur(10px);
}
.dark .app-sidebar{
background: var(--surface-dark-strong);
border-color: rgba(148,163,184,.12);
}
.app-topbar{
background: var(--surface);
box-shadow: var(--shadow-soft);
border-bottom: 1px solid rgba(15,23,42,.08);
backdrop-filter: blur(10px);
}
.dark .app-topbar{
background: var(--surface-dark);
border-bottom-color: rgba(148,163,184,.12);
z-index: 2147483000 !important;
}
/* Cards: keep borders subtle, add depth */
main :where(.bg-white.rounded-2xl),
main :where(.bg-white.rounded-xl){
box-shadow: var(--shadow-soft);
border-color: rgba(15,23,42,.08) !important;
}
.dark main :where(.dark\:bg-slate-900),
.dark main :where(.dark\:bg-slate-950){
box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
/* Modern nav items: icon bubble + pill active */
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;transition: background .22s cubic-bezier(0.22,1,0.36,1);}
.nav-item:hover{background:rgba(59,130,246,.06);}
.nav-item--active{background:rgba(59,130,246,.12);}
.nav-ic{width:36px;height:36px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(37,99,235,.035);color:#334155}
.nav-ic svg{width:18px;height:18px}
.dark .nav-ic{background:rgba(255,255,255,.06);color:#e2e8f0}
.nav-item--active .nav-ic{background:rgba(59,130,246,.16);color:rgb(37,99,235)}
.dark .nav-item--active .nav-ic{background:rgba(59,130,246,.18);color:rgb(147,197,253)}
/* Tabs: pill bar with icons */
.pill-tabs{display:inline-flex;flex-wrap:wrap;gap:8px;padding:6px;border-radius:18px;background:rgba(2,6,23,.04);border:1px solid rgba(15,23,42,.08)}
.dark .pill-tabs{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.12)}
.pill-tab{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-weight:600;font-size:14px;color:#475569;text-decoration:none;transition:background .12s ease,color .12s ease, transform .12s ease}
.pill-tab:hover{background:rgba(59,130,246,.08);color:#0f172a}
.dark .pill-tab{color:#cbd5e1}
.dark .pill-tab:hover{color:#fff;background:rgba(59,130,246,.10)}
.pill-tab.is-active{background:rgba(255,255,255,.85);box-shadow:0 10px 22px rgba(15,23,42,.10);color:#0f172a}
.dark .pill-tab.is-active{background:rgba(15,23,42,.75);box-shadow:0 14px 30px rgba(0,0,0,.35);color:#fff}
.pill-tab__ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.95}
/* Modals: better depth + backdrop blur */
.modal-backdrop{backdrop-filter: blur(6px);}
.modal-panel{border-radius:24px;box-shadow:var(--shadow-float);border:1px solid rgba(15,23,42,.10)}
.dark .modal-panel{border-color:rgba(148,163,184,.14)}
/* Login: slightly more premium */
.auth-shell{
background:
radial-gradient(900px 420px at 50% 0%, rgba(59,130,246,.12), transparent 55%),
radial-gradient(800px 380px at 0% 30%, rgba(99,102,241,.10), transparent 60%),
linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(241,245,249,1) 100%);
}
.dark .auth-shell{
background:
radial-gradient(900px 420px at 50% 0%, rgba(59,130,246,.16), transparent 55%),
radial-gradient(800px 380px at 0% 30%, rgba(99,102,241,.12), transparent 60%),
linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(3,7,18,1) 100%);
}
.auth-card{box-shadow:var(--shadow-float);border:1px solid rgba(15,23,42,.10);background:var(--surface-strong);backdrop-filter:blur(10px)}
.dark .auth-card{background:rgba(15,23,42,.82);border-color:rgba(148,163,184,.14)}
/* -------------------------------------------------------------------------- */
/* Auth/Login helpers */
/* The bundled TailAdmin CSS in this project doesn't include every Tailwind */
/* utility (e.g. p-8, px-10). These helpers ensure consistent spacing/inputs. */
.auth-card-pad{padding:40px!important}
@media (min-width:640px){.auth-card-pad{padding:52px!important}}
.input-icon{position:relative}
.input-icon .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(100,116,139,.85);pointer-events:none}
.dark .input-icon .icon{color:rgba(148,163,184,.85)}
.input-icon input{padding-left:44px!important;padding-right:14px!important}
.auth-help{margin-top:18px!important}
/* Generic elevated surface (cards, status page sections) */
.surface-card{background:var(--surface-strong);border:1px solid rgba(15,23,42,.10);border-radius:24px;box-shadow:var(--shadow-float)}
.dark .surface-card{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.14)}
.surface-header{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 30px rgba(15,23,42,.08);border-radius:20px}
.dark .surface-header{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.12);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.chip--type{background:rgba(99,102,241,.06);border-color:rgba(99,102,241,.25)}
.dark .chip--type{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.28)}
.chip--page{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.22)}
.dark .chip--page{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.25)}
.analytics-ico--area:before{clip-path:polygon(0 80%,12% 60%,24% 70%,36% 40%,48% 55%,60% 30%,72% 45%,84% 22%,100% 35%,100% 100%,0 100%)}
.analytics-ico--users:before{clip-path:polygon(12% 70%,12% 60%,20% 52%,28% 60%,28% 70%, 44% 70%,44% 58%,52% 50%,60% 58%,60% 70%, 0 100%,0 88%,14% 78%,28% 78%,42% 78%,56% 78%,70% 78%,84% 88%,84% 100%)}
/* Tabler-like dropdown */
.dropdown{position:relative;display:inline-block;}
.dropdown-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(148,163,184,.45);background:#fff;cursor:pointer;}
.dark .dropdown-toggle{background:transparent;border-color:rgba(51,65,85,.9);}
.dropdown-toggle:hover{background:rgba(148,163,184,.12);}
.dropdown-menu{position:absolute;right:0;top:100%;margin-top:8px;min-width:180px;background:#fff;border:1px solid rgba(148,163,184,.35);border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.14);z-index:9999;display:none;overflow:hidden;}
.dark .dropdown-menu{background:rgba(15,23,42,.98);border-color:rgba(51,65,85,.9);}
.dropdown-menu.show{display:block;}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:14px;color:#0f172a;text-decoration:none;}
.dark .dropdown-item{color:#e2e8f0;}
.dropdown-item:hover{background:rgba(148,163,184,.12);}
/* ----------------------------
User dropdown: harden sizing + stacking
(Some installs ship with a purged Tailwind build; these ensure 32x32 avatar + sane icon sizes.)
----------------------------- */
.user-avatar-32{
width:32px !important;
height:32px !important;
max-width:32px !important;
max-height:32px !important;
}
/* Avatar must look like the square header buttons */
.user-avatar-square{
border-radius:10px !important;
}
/* Ensure the sticky header (and its dropdown) always floats above page content */
.app-topbar{
z-index:2147483000 !important;
isolation:isolate;
position: sticky;
top: 0!important;
}
.user-menu{
position:absolute;
z-index:2147483647 !important;
}
.user-menu svg{
width:16px !important;
height:16px !important;
flex:0 0 16px;
}
.dropdown-item.danger{color:#dc2626;}
.dark .dropdown-item.danger{color:#fca5a5;}
.dropdown-divider{height:1px;background:rgba(148,163,184,.25);}
.dark .dropdown-divider{background:rgba(51,65,85,.9);}
/* ----------------------------
Alerts channel toggle (Settings → Alerts)
Matches the provided design: unchecked = ring, checked = blue check.
----------------------------- */
.alert-channel{
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, .25);
background: rgba(148, 163, 184, .08);
cursor: pointer;
}
.dark .alert-channel{
border-color: rgba(148, 163, 184, .25);
background: rgba(148, 163, 184, .08);
}
.alert-channel input{
position:absolute;
opacity:0;
pointer-events:none;
}
.alert-channel .alert-switch{
display:inline-block;
/* Slightly smaller than default TailAdmin switches */
width:52px;
height:30px;
border-radius:9999px;
/* match design: pill background stays gray for both states */
background:#d1d5db;
box-shadow: inset 0 0 0 1px rgba(100,116,139,.25);
position:relative;
flex:0 0 auto;
}
.dark .alert-channel .alert-switch{
background:rgba(148,163,184,.22);
box-shadow: inset 0 0 0 1px rgba(148,163,184,.28);
}
.alert-channel .alert-switch:before{
content:'';
position:absolute;
top:4px;
left:4px;
width:22px;
height:22px;
border-radius:9999px;
background:#fff;
/* unchecked ring look */
border:4px solid rgba(100,116,139,.65);
box-sizing:border-box;
transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.alert-channel input:checked + .alert-switch:before{
transform:translateX(22px);
background:var(--primary);
border-color:var(--primary);
/* white check icon */
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;
background-position:center;
background-size:16px 16px;
}
/* Inline action icons (replaces dropdown) */
.icon-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width: 22px;
height: 22px;
border-radius:12px;
border:0;
background:#fff;
color: var(--primary);
text-decoration:none;
transition:background 120ms ease, transform 120ms ease;
}
.dark .icon-btn{background:transparent;border-color:transparent;color: var(--primary);}
.icon-btn:hover{background:rgba(148,163,184,.12);transform:translateY(-1px);}
/* ----------------------------
Collapsible "details" with chevron (used in Settings + Subscribers)
Gives a clear arrow affordance (matches the reference UI).
----------------------------- */
.mk-details summary{
list-style:none;
display:flex;
align-items:center;
gap:8px;
}
.mk-details summary::-webkit-details-marker{display:none;}
.mk-details summary::before{
content:'';
width:16px;
height:16px;
flex:0 0 16px;
background-repeat:no-repeat;
background-position:center;
background-size:16px 16px;
/* chevron-right */
background-image:url('data:image/svg+xml;utf8,');
transform:rotate(0deg);
transition:transform 140ms ease;
}
.dark .mk-details summary::before{
background-image:url('data:image/svg+xml;utf8,');
}
.mk-details[open] summary::before{ transform:rotate(90deg); }
.icon-btn:active{transform:translateY(0);}
.icon-btn.danger{color:#dc2626;}
.dark .icon-btn.danger{color:#fca5a5;}
/* --- Page transitions (Uptime Kuma-like) --- */
.page-transition{
opacity:0;
transform:translate3d(0, 8px, 0);
transition:
opacity 240ms cubic-bezier(.2,.8,.2,1),
transform 240ms cubic-bezier(.2,.8,.2,1)!important;
will-change:opacity, transform!important;
animation:none !important;
}
body.page-loaded .page-transition{
opacity:1;
transform:translate3d(0, 0, 0);
}
body.page-leave .page-transition{
opacity:0;
transform:translate3d(0, -6px, 0);
}
@media (prefers-reduced-motion: reduce){
}
/* Match requested spacing token: p-6 => spacing * 12 */
.p-6{padding: calc(var(--spacing) * 8) !important;}
/* Mobile: reduce main padding so cards/tables have more width */
@media (max-width: 640px){
.p-6{padding: calc(var(--spacing) * 6) !important;}
}
/* --- Analytics icons (Plausible-like) --- */
.mk-analytics-ic{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
flex:0 0 22px;
}
.mk-analytics-svg{width:22px;height:22px;display:block;}
.mk-analytics-img{
width:22px;
height:22px;
display:block;
object-fit:contain;
padding:2px;
border-radius:6px;
background:rgba(255,255,255,.7);
}
.dark .mk-analytics-img{background:rgba(2,6,23,.35);}
.mk-flag{font-size:22px;line-height:22px;display:block;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;}
/* row hover + active filter */
.analytics-row{transition:background 140ms ease;}
.analytics-row:hover{background: rgba(15,23,42,.04);}
.dark .analytics-row:hover{background: rgba(148,163,184,.10);}
.analytics-row.is-active{background: rgba(59,130,246,.10) !important;}
.dark .analytics-row.is-active{background: rgba(59,130,246,.18) !important;}
.analytics-row .mk-analytics-svg,
.analytics-row .mk-flag{transition:transform 140ms ease, filter 140ms ease;}
.analytics-row:hover .mk-analytics-svg,
.analytics-row:hover .mk-flag{transform: scale(1.05); filter: saturate(1.12) contrast(1.05);}
/* --- Analytics (Umami-like density) --- */
.analytics-page .analytics-subnav{gap:10px;flex-wrap:wrap;}
.analytics-page .analytics-subnav__item{
font-size:13px;
padding:8px 10px;
border-radius:999px;
}
/* Make KPI/metric cards more Umami-like: simpler + denser */
.analytics-page .stat-ico{display:none;}
.analytics-page .plausible-kpis > div{padding:14px;}
.analytics-page .plausible-kpis .w-9.h-9{display:none;}
.analytics-page .plausible-kpis .flex.items-center.justify-between{justify-content:flex-start;}
.analytics-page .plausible-kpis .text-sm{font-size:13px;}
.analytics-page .plausible-kpis .text-3xl{font-size:28px;line-height:1.1;}
/* Tables: slightly tighter rows like Umami */
.analytics-page table td,
.analytics-page table th{padding-top:6px;padding-bottom:6px;}
.analytics-page table thead th{font-size:12px;letter-spacing:.02em;}
.analytics-page table tbody td{font-size:13px;}
/* Chart card spacing */
.analytics-page #trend-chart-container{margin-top:6px;}
/* Heatmap (static services) */
.heatmap-grid{display:grid;gap:6px;grid-template-columns:repeat(12,minmax(0,1fr));}
.heat-cell{height:16px;border-radius:6px;border:1px solid rgba(148,163,184,.35);}
.heat-up{background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.35);}
.heat-down{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.35);}
.heat-degraded{background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.35);}
.dark .heat-cell{border-color:rgba(51,65,85,.9)}
/* Heatmap legend (static monitors) */
.heat-legend{width:16px;height:16px;border-radius:4px;display:inline-block;}
.heat-legend.heat-up{background:#22c55e;}
.heat-legend.heat-degraded{background:#f59e0b;}
.heat-legend.heat-down{background:#ef4444;}
/* Analytics compare delta tones */
.delta-pos{ color:#16a34a; }
.delta-neg{ color:#dc2626; }
.delta-neu{ color:rgba(100,116,139,.95); }
.dark .delta-neu{ color:rgba(148,163,184,.9); }
/* Utility: remove shadow for nested cards */
.no-shadow{ box-shadow:none !important; }
/* Live locations map */
.live-map{ width:100%; height:320px; border-radius:16px; overflow:hidden; background: rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.25); }
.live-map__svg{ width:100%; height:220px; display:block; }
.live-map__bg{ fill: rgba(148,163,184,.10); stroke: rgba(148,163,184,.22); stroke-width:1; }
.dark .live-map__bg{ fill: rgba(148,163,184,.10); stroke: rgba(148,163,184,.25); }
.live-map__land{ fill: rgba(59,130,246,.12); }
.dark .live-map__land{ fill: rgba(99,102,241,.14); }
.live-map__dot{ fill: var(--primary); opacity:.85; }
.live-map__dot:hover{ opacity:1; }
/* KPI cards: premium left-tone indicator */
.kpi-card{ position:relative; }
.kpi-card:before{
content:'';
position:absolute;
left:0;
top:14px;
bottom:14px;
width:4px;
border-radius:9999px;
background:transparent;
}
.kpi-tone--good:before{ background: rgba(16,185,129,.95); }
.kpi-tone--warn:before{ background: rgba(245,158,11,.95); }
.kpi-tone--bad:before{ background: rgba(244,63,94,.95); }
.kpi-tone--neutral:before{ background: rgba(148,163,184,.8); }
/* Premium KPI cards (Tailwind Plus inspired) */
.kpi-card{border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.kpi-card .stat-ico{width:44px;height:44px;border-radius:14px;}
.kpi-card .stat-ico svg{width:22px;height:22px;}
.analytics-page .stat-ico{display:inline-flex !important;}
.analytics-page .plausible-kpis .w-9.h-9{display:flex !important;}
/* Pure-CSS pulsing dot (dashboard live traffic) */
:root{--primary:#3B82F6;--primary-600:#2563EB;--primary-700:#1D4ED8}
@media (max-width:768px){
.site-preview{flex-direction:column;align-items:stretch}
.site-preview__shot{order:-1}
.site-shot{width:100%;height:140px}
.seo-side {
position: static;
top: auto;
align-self: start;
max-width: 100%;
}
}
.dark .app-sidebar{
background: var(--surface-dark-strong)!important;
border-color: rgba(148,163,184,.12);
}
.input-icon .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(100,116,139,.85);pointer-events:none;z-index: 1;}
@media (max-width: 640px){
.p-6{padding: calc(var(--spacing) * 4) !important;}
}
.mk-pulse-dot::before{content:"";position:absolute;inset: -6px;top: 50%;left:50%;border-radius:9999px;background:var(--dotGlow,rgba(16,185,129,.35));animation:mkPulse 1.2s ease-out infinite;}
@keyframes mkPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.85;}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;}}
/* Pulsing live indicator */
.live-dot{
position:relative;
display:inline-flex;
width:10px;
height:10px;
border-radius:999px;
background:currentColor;
}
.live-dot::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:22px;
height:22px;
border-radius:999px;
background:rgba(16,185,129,.35);
transform:translate(-50%,-50%) scale(.2);
animation:liveDotPing 1.2s cubic-bezier(0,0,0.2,1) infinite;
opacity:1;
}
@keyframes liveDotPing{
0% { transform:translate(-50%,-50%) scale(.2); opacity:1; }
100% { transform:translate(-50%,-50%) scale(1.8); opacity:0; }
}
/* Status page service row responsive layout (no Tailwind responsive utilities available) */
.svc-row{ display:flex; flex-direction:column; gap:12px; }
.svc-meta-wrap{ width:100%; }
.svc-meta-desktop{ display:none; align-items:center; justify-content:flex-end; gap:12px; width:100%; flex-wrap:nowrap; }
.svc-meta-mobile{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
@media (min-width: 768px){
.svc-row{ flex-direction:row; align-items:center; justify-content:space-between; }
.svc-meta-wrap{ width:auto; }
.svc-meta-desktop{ display:flex; }
.svc-meta-mobile{ display:none; }
}
/* Analytics geo map: green pulsing city markers (Leaflet divIcon) */
.mk-geo-pulse{position:relative;width:12px;height:12px;border-radius:9999px;background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.25);}
.mk-geo-pulse::before{content:"";position:absolute;inset:0;border-radius:9999px;background:rgba(34,197,94,.35);animation:mkGeoPulse 1.8s ease-out infinite;}
@keyframes mkGeoPulse{0%{transform:scale(1);opacity:.75;}70%{transform:scale(2.6);opacity:0;}100%{opacity:0;}}
/* Cluster styling (when markercluster is loaded) */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{background:rgba(34,197,94,.18);}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div{background:rgba(34,197,94,.65);color:#064e3b;font-weight:700;}
.live-dot{ position:relative; display:inline-flex; width:10px; height:10px; border-radius:999px; background:#10b981; }
.live-dot::before{ content:""; position:absolute; inset:-6px; border-radius:999px; background:rgba(16,185,129,.35); animation:liveDotPing 1.2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes liveDotPing{ 0%{ transform:scale(.2); opacity:1; } 100%{ transform:scale(1.8); opacity:0; } }
.status-dot {
width:10px;
height:10px;
border-radius:50%;
}
.status-dot.online {
background:#2ecc71;
animation:pulse 1.5s infinite;
}
.status-dot.offline {
background:#e74c3c;
}
@keyframes pulse {
0% { box-shadow:0 0 0 0 rgba(46,204,113,.7);}
70%{ box-shadow:0 0 0 10px rgba(46,204,113,0);}
}
.table-row:hover{background:rgba(148,163,184,.06);}
.dark .table-row:hover{background:rgba(148,163,184,.10);}
/* ===== Mobile: Analytics Public View tabs stack ===== */
@media (max-width: 640px){
nav[aria-label="Tabs"]{
display:flex !important;
gap:10px !important;
}
nav[aria-label="Tabs"] > a{
width:100% !important;
display:flex !important;
justify-content: space-between !important;
padding:12px 14px !important;
border-radius:14px !important;
}
/* Range chips wrap nicely */
.range-chips, .range, .range-buttons{
display:flex !important;
flex-wrap: wrap !important;
gap:8px !important;
}
}
/* ===== Toggle switch checkbox ===== */
.wp-toggle{
appearance:none;
width:44px; height:26px;
border-radius:999px;
background: rgba(148,163,184,.35);
position:relative;
cursor:pointer;
transition:.2s;
border: 1px solid rgba(148,163,184,.30);
}
.wp-toggle::after{
content:"";
position:absolute;
top: 2px;
left:3px;
width:20px;
height:20px;
border-radius:999px;
background:#fff;
box-shadow: 0 10px 20px rgba(0,0,0,.15);
transition:.2s;
}
.wp-toggle:checked{
background: rgba(37,99,235,.85);
border-color: rgba(37,99,235,.55);
}
.wp-toggle:checked::after{ transform: translateX(18px); }
/* ===== Server disks: premium usage bars ===== */
.wp-barwrap{ display:flex; align-items:center; gap:10px; min-width:220px; }
.wp-bar{ position:relative; width:180px; height:10px; border-radius:999px; background: rgba(148,163,184,.28); overflow:hidden; }
.wp-bar__fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(14,165,233,.85)); box-shadow: 0 10px 25px rgba(37,99,235,.18); }
.wp-bar__lbl{ font-size:12px; color: rgba(100,116,139,1); min-width:42px; text-align:right; }
.dark .wp-bar{ background: rgba(148,163,184,.18); }
.dark .wp-bar__lbl{ color: rgba(148,163,184,1); }
.wp-icowrap{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:12px;
background: rgba(37,99,235,.10); color: rgba(37,99,235,1); margin-right:10px;
}
.dark .wp-icowrap{ background: rgba(37,99,235,.18); color: rgba(147,197,253,1); }
.wp-ico{ width:18px; height:18px; }
/* =========================================================
GLASS UI (2026)  Option A (blue gradient)
Designed to mimic premium glass dashboards (transparent + blur)
Works as an overlay on top of tailadmin.css without breaking layout.
========================================================= */
/* Background canvas */
html, body {}
body{
position: relative;
background:
radial-gradient(1200px 700px at 12% 10%, rgba(59,130,246,.22), transparent 60%),
radial-gradient(900px 600px at 85% 8%, rgba(14,165,233,.16), transparent 55%),
radial-gradient(900px 700px at 30% 90%, rgba(99,102,241,.10), transparent 55%),
linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%);
}
/* decorative blurred blobs (subtle) */
body::before,
body::after{
content:"";
position: fixed;
inset: auto;
z-index: -1;
pointer-events:none;
filter: blur(38px);
opacity: .85;
}
body::before{
width: 520px; height: 520px;
left: -140px; top: -120px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.55), rgba(59,130,246,0) 60%);
}
body::after{
width: 560px; height: 560px;
right: -200px; top: 30px;
background: radial-gradient(circle at 40% 40%, rgba(14,165,233,.40), rgba(14,165,233,0) 62%);
}
.dark body{
background:
radial-gradient(1200px 700px at 12% 10%, rgba(59,130,246,.22), transparent 60%),
radial-gradient(900px 600px at 85% 8%, rgba(14,165,233,.14), transparent 55%),
radial-gradient(900px 700px at 30% 90%, rgba(99,102,241,.12), transparent 55%),
linear-gradient(180deg, #020617 0%, #0b1220 100%);
}
/* Glass surfaces */
:root{
--glass-bg: rgba(255,255,255,.46);
--glass-border: rgba(255,255,255,.55);
--glass-shadow: 0 28px 80px rgba(15,23,42,.14);
--glass-radius: 22px;
}
.dark{
--glass-bg: background: radial-gradient(900px 420px at 50% 0%, rgba(59,130,246,.16), transparent 55%), radial-gradient(800px 380px at 0% 30%, rgba(99,102,241,.12), transparent 60%), linear-gradient(180deg, rgba(2,6,23,1) 0%, rgba(3,7,18,1) 100%);
--glass-border: rgba(148,163,184,.14);
--glass-shadow: 0 30px 90px rgba(0,0,0,.55);
}
/* Sidebar + Topbar become glass */
.app-sidebar,
.app-topbar{
background: var(--glass-bg) !important;
border-color: var(--glass-border) !important;
box-shadow: 0 18px 60px rgba(15,23,42,.10);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.app-topbar{
border-bottom: 1px solid var(--glass-border);
}
/* Cards / panels */
.bg-white,
.dark .dark\:bg-slate-900,
.dark .dark\:bg-slate-950,
.rounded-xl, .rounded-2xl, .rounded-lg{
}
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl{
box-shadow: var(--glass-shadow) !important;
}
/* Subtle borders */
.border, .border-gray-200, .border-slate-200, .border-slate-100{
border-color: rgb(15 23 42 / 7%) !important;
border-radius: 16px;
}
.dark .border, .dark .border-gray-200, .dark .border-slate-200, .dark .border-slate-100{
border-color: rgba(148,163,184,.14) !important;
}
/* Inputs */
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"],
textarea, select{
background: rgba(255,255,255,.58) !important;
border-color: rgba(255,255,255,.45) !important;
backdrop-filter: blur(10px);
}
.dark input[type="text"], .dark input[type="search"], .dark input[type="number"], .dark input[type="email"], .dark input[type="password"],
.dark textarea, .dark select{
background: rgba(2,6,23,.40) !important;
border-color: rgba(148,163,184,.18) !important;
}
/* Buttons: keep existing primary but add glow */
.bg-primary, .bg-primary-600, .bg-primary-700{
box-shadow: 0 18px 40px rgba(37,99,235,.18);
}
a, button{
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
a:hover, button:hover{
transform: translateY(-1px);
}
/* Tables: soften */
table thead th{ color: rgba(100,116,139,.9); }
.dark table thead th{ color: rgba(148,163,184,.9); }
table tbody tr:hover{
background: rgba(59,130,246,.08) !important;
}
/* Chart tooltip: premium dark bubble */
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark{
background: rgb(17 24 39 / 87%) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 25px 70px rgba(0,0,0,.35) !important;
border-radius: 14px !important;
padding: 8px 8px !important;
color: #fff !important;
font-family: "Poppins", sans-serif;
font-size: 13px!important;
backdrop-filter: blur(10px);
}
.apexcharts-tooltip-title{
background: #000000f0 !important;
border-bottom: 1 !important;
color: rgba(255,255,255,.92) !important;
font-weight: 700 !important;
margin: -12px -12px 6px -12px !important;
padding: 10px!important;
font-size: 14px!important;
}
/* Mobile polish */
@media (max-width: 768px){
body::before, body::after{ opacity:.55; }
.app-topbar{ backdrop-filter: blur(14px); }
}
/* ===== Sidebar collapsed mode + tooltips (Glass Option B + subtle A) ===== */
.sb-shell.sb-collapsed .sb-label{ display:none; }
.sb-shell.sb-collapsed nav .sb-link{ justify-content:center; padding-left: 0.9rem; padding-right: 0.9rem; }
.sb-shell.sb-collapsed nav .sb-ico{ margin-right:0; }
.sb-shell.sb-collapsed .leading-tight{ display:none; }
.sb-link{ position:relative; }
.sb-link:hover .sb-ico{ transform: translateY(-1px) scale(1.03); }
.sb-link:hover{ transform: translateY(-1px); }
/* Tooltip */
.sb-shell.sb-collapsed nav .sb-link::after{
content: attr(data-tip);
position:absolute;
left: 72px;
top:50%;
transform: translateY(-50%);
padding: 8px 10px;
border-radius: 12px;
background: rgba(17,24,39,.92);
color: #fff;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events:none;
box-shadow: 0 25px 70px rgba(0,0,0,.35);
border: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(10px);
transition: .15s;
}
.sb-shell.sb-collapsed nav .sb-link:hover::after{ opacity: 1; }
/* mk_sidebar_icons_glass: Option B + subtle A (base colors) */
.app-sidebar a{ display:flex; align-items:center; gap:12px; }
.app-sidebar a .sb-ico{
display: contents;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius: 100px;
/* subtle primary tint */
background: rgba(37,99,235,.04);
border: 1px solid rgba(37,99,235,.08);
backdrop-filter: blur(14px);
box-shadow: 0 18px 45px rgba(0,0,0,.08);
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.dark .app-sidebar a .sb-ico{
background: rgba(37,99,235,.10);
border-color: rgba(255,255,255,.10);
box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.app-sidebar a .sb-ico svg{ width:18px; height:18px; }
.app-sidebar a:hover .sb-ico{ transform: translateY(-1px); box-shadow: 0 22px 70px rgba(37,99,235,.12); }
.app-sidebar a.active .sb-ico, .app-sidebar .active > a .sb-ico{
background: rgba(37,99,235,.14);
border-color: rgba(37,99,235,.25);
box-shadow: 0 22px 70px rgba(37,99,235,.18);
}
/* Left active indicator bar (kept subtle) */
.app-sidebar a.active{ position: relative; }
.app-sidebar a.active::before{
content:"";
position:absolute;
left:6px; top:50%;
transform: translateY(-50%);
width:4px; height:22px;
border-radius:999px;
background: rgba(37,99,235,.95);
box-shadow: 0 10px 30px rgba(37,99,235,.35);
}
/* Mobile topbar inset a bit higher (but not huge) */
@supports (padding: max(0px)) {
.app-topbar{
padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
}
}
/* mk_sidebar_mobile_base: ensure sidebar starts closed on mobile */
/* mk_sidebar_mobile_base: smooth slide animation (guaranteed) */
.transition-all {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-webkit-transition-duration: var(--tw-duration, var(--default-transition-duration));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
/* Optional: respect reduced motion */
/* Sidebar submenu icons: slightly smaller than top-level icons */
/* Sidebar submenu: smaller + tighter than top-level */
.sb-sub .nav-item{padding:8px 10px; line-height:1.2}
/* Submenu: a bit tighter vertically but still readable */
.sb-sub .nav-item span{font-size: 12px;line-height:0.95rem}
/* Submenu icons: readable + subtle primary tint */
.sb-sub .nav-item{padding:6px 10px; line-height:0.95rem}
.sb-sub .nav-ic{width: 28px;height: 28px;border-radius:12px;background: none!important;border: 0px!important;}
.sb-sub .nav-ic svg,.sb-sub .nav-ic img{width:18px;height:18px}
/* Modal polish: whiter backdrop + stable positioning + mobile friendly */
.modal-backdrop{background: rgba(255,255,255,.82) !important;align-items:flex-start !important;overflow-y:auto;padding: 200px 16px;}
.dark .modal-backdrop{background: rgba(2,6,23,.55) !important;}
.modal-panel input,.modal-panel select,.modal-panel textarea{
border-color: rgba(148,163,184,.55) !important;
}
.modal-panel input:focus,.modal-panel select:focus,.modal-panel textarea:focus{
border-color: rgba(59,130,246,.65) !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
outline: none;
}
.modal-panel{max-height:calc(100vh - 40px); overflow:auto;}
@media (min-width:1024px){ .pm-modal-wide{max-width:920px !important;} }
@media (max-width:640px){ .pm-modal-grid{grid-template-columns:1fr !important;} }
/* Projects progress bar */
.pm-prog{height:10px;border-radius:999px;background:rgba(148,163,184,.22);overflow:hidden;border:1px solid rgba(15,23,42,.08)}
.dark .pm-prog{background:rgba(148,163,184,.18);border-color:rgba(148,163,184,.14)}
.pm-prog-bar{height:100%;background:rgba(37,99,235,.9)}
/* PM tasks (Asana-ish) */
.pm-page{padding:24px}
.pm-header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pm-title h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-0.02em}
.pm-title p{margin:4px 0 0;color:rgba(100,116,139,.95);font-size:13px}
.pm-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pm-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid rgba(148,163,184,.35)}
.pm-tab{border:0;background:transparent;padding:8px 12px;border-radius:12px;font-weight:700;font-size:13px;color:rgba(15,23,42,.75);cursor:pointer}
.pm-tab.is-active{background:rgba(37,99,235,.12);color:rgb(37,99,235)}
.pm-input,.pm-select{height:40px;border-radius:14px;border:1px solid rgba(148,163,184,.35);background:rgba(255,255,255,.75);padding:0 12px;font-size:13px;outline:none}
.pm-input{padding-left:36px}
.pm-search{position:relative}
.pm-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.55}
.pm-btn{height:40px;border-radius:16px;border:1px solid rgba(37,99,235,.35);background:rgb(37,99,235);color:#fff;font-weight:800;padding:0 14px;display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.pm-btn svg{width:16px;height:16px}
.pm-stats{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pm-stat{border-radius:18px;border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.55);padding:14px 16px;box-shadow:0 10px 30px rgba(2,6,23,.06)}
.pm-stat .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,116,139,.85);font-weight:800}
.pm-stat .v{margin-top:8px;display:flex;align-items:flex-end;justify-content:space-between}
.pm-stat .n{font-size:28px;font-weight:900;color:rgba(15,23,42,.92)}
.pm-pill{border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;border:1px solid rgba(148,163,184,.25);background:rgba(255,255,255,.55)}
.pm-pill.open{background:rgba(37,99,235,.12);color:rgb(37,99,235)}
.pm-pill.progress{background:rgba(245,158,11,.18);color:rgb(146,64,14)}
.pm-pill.blocked{background:rgba(244,63,94,.14);color:rgb(190,18,60)}
.pm-pill.done{background:rgba(16,185,129,.16);color:rgb(6,95,70)}
.pm-board{margin-top:18px}
.pm-kanban{display:flex;gap:16px;overflow-x:auto;align-items:flex-start;padding-bottom:14px}
.pm-col{flex:0 0 340px;min-width:340px}
.pm-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 4px}
.pm-col-title{font-weight:900;font-size:14px;border:0;background:transparent;padding:6px 8px;border-radius:10px;outline:none;width:240px;color:rgba(15,23,42,.92)}
.pm-col-title:focus{background:rgba(255,255,255,.55);border:1px solid rgba(148,163,184,.35)}
.pm-badge{min-width:26px;height:22px;border-radius:999px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;background:rgba(148,163,184,.22);color:rgba(15,23,42,.8)}
.pm-col-body{display:flex;flex-direction:column;gap:10px}
.pm-card{border-radius:18px;border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.6);box-shadow:0 10px 30px rgba(2,6,23,.06)}
.pm-task{padding:12px 12px 10px;cursor:pointer}
.pm-task:hover{box-shadow:0 14px 38px rgba(2,6,23,.10)}
.pm-task h3{margin:0;font-size:14px;font-weight:900;color:rgba(15,23,42,.92)}
.pm-task .meta{margin-top:6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:rgba(100,116,139,.95);font-size:12px}
.pm-avatar{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;background:rgba(148,163,184,.22);color:rgba(15,23,42,.85)}
.pm-progress{margin-top:10px;height:10px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden}
.pm-progress > div{height:10px;border-radius:999px;background:linear-gradient(90deg, rgba(244,63,94,.95), rgba(245,158,11,.95), rgba(34,197,94,.95))}
/* Calendar: glassy events + readable text */
.fc .fc-event{
border-radius: 12px !important;
backdrop-filter: blur(10px);
}
.fc .fc-event, .fc .fc-event .fc-event-title, .fc .fc-event .fc-event-time{ color:#fff !important; }
.fc .fc-toolbar-title{ font-weight: 700; }
/* Avatars in PM */
.pm-avatar-img{width:26px;height:26px;border-radius:999px;object-fit:cover;border:1px solid rgba(148,163,184,.35)}
.pm-actions-row{margin-top:10px;display:flex;justify-content:space-between;align-items:center}
.pm-link{font-weight:900;font-size:12px;color:rgb(37,99,235);text-decoration:none}
.pm-link:hover{text-decoration:underline}
@media (max-width: 1100px){
.pm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* --- Plausible-like mobile analytics improvements --- */
@media (max-width: 640px){
.plausible-kpis{ gap: .75rem !important; }
.kpi-card{ padding: .9rem !important; border-radius: 16px !important; }
.kpi-card .text-3xl{ font-size: 1.5rem !important; }
/* make tab bar horizontally scrollable */
.plausible-tabs, .tabbar, .analytics-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.plausible-tabs::-webkit-scrollbar,
.tabbar::-webkit-scrollbar,
.analytics-tabs::-webkit-scrollbar { display:none; }
}
/* Filter button badge */
.pl-filter-count{
margin-left: .25rem;
padding: 0 .45rem;
border-radius: 999px;
background: rgba(59,130,246,.12);
color: rgb(59 130 246);
font-size: 12px;
line-height: 20px;
height: 20px;
}
/* Filter modal (Plausible-like) */
.pl-modal{ position:fixed; inset:0; z-index:2147483000; }
.pl-modal.hidden{ display:none; }
.pl-modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.pl-modal-card{
position:absolute; left:50%; top:10vh; transform:translateX(-50%);
width:min(720px, calc(100vw - 24px));
max-height:80vh;
display:flex; flex-direction:column;
background: rgba(255,255,255,.92);
backdrop-filter: blur(16px);
border: 1px solid rgba(226,232,240,.9);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
overflow:hidden;
}
.dark .pl-modal-card{
background: rgba(15,23,42,.92);
border-color: rgba(51,65,85,.9);
}
.pl-modal-head{
display:flex; align-items:center; justify-content:space-between;
padding: 14px 16px;
border-bottom: 1px solid rgba(226,232,240,.9);
}
.dark .pl-modal-head{ border-bottom-color: rgba(51,65,85,.9); }
.pl-modal-title{ font-weight: 600; }
.pl-modal-close{
background:none; border:none; cursor:pointer;
color: rgb(100 116 139);
font-size: 14px;
}
.dark .pl-modal-close{ color: rgb(148 163 184); }
.pl-modal-body{ padding: 16px; overflow:auto; }
.pl-form-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 640px){ .pl-form-grid{ grid-template-columns:1fr 1fr; } }
.pl-field span{ display:block; font-size:12px; color: rgb(100 116 139); margin-bottom:6px; }
.dark .pl-field span{ color: rgb(148 163 184); }
.pl-input{
width:100%;
border-radius: 14px;
border: 1px solid rgb(226 232 240);
padding: 10px 12px;
background: rgba(255,255,255,.9);
color: rgb(15 23 42);
outline:none;
}
.dark .pl-input{
border-color: rgb(51 65 85);
background: rgba(2,6,23,.35);
color: rgb(226 232 240);
}
.pl-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.pl-btn{
border-radius: 14px;
padding: 10px 14px;
background: rgb(59 130 246);
color:white; border:1px solid rgb(59 130 246);
font-weight:600;
}
.pl-btn:hover{ filter:brightness(.96); }
.pl-btn-ghost{
background: transparent;
color: rgb(100 116 139);
border: 1px solid rgb(226 232 240);
}
.dark .pl-btn-ghost{
color: rgb(148 163 184);
border-color: rgb(51 65 85);
}
/* Web Security: small helper utilities (kept in brand.css for consistency with other modules) */
.security-table .break-all,
.security-table .security-wrap{overflow-wrap:anywhere;word-break:break-word;}
/* SaaS UI Overhaul v3 (Asana/ClickUp-inspired)
Drop-in visual layer: does NOT change markup or JS.
Load AFTER tailadmin.css + brand.css.
Goal: dark sidebar + clean, airy content like Asana.
*/
:root{
/* app surfaces */
--mk-bg:#F3F4F6;
--mk-surface:#FFFFFF;
--mk-surface-2:#F9FAFB;
--mk-border:#E5E7EB;
--mk-border-strong:#D1D5DB;
/* type */
--mk-text:#111827;
--mk-text-2:#6B7280;
--mk-text-3:#9CA3AF;
/* brand */
--mk-brand: #3b82f6;
--mk-brand-hover:#1D4ED8;
--mk-brand-soft:rgba(37,99,235,.14);
/* dark sidebar (like screenshot 2) */
--mk-sb-bg:#0B1220;
--mk-sb-bg-2:#0F1A2E;
--mk-sb-border: rgba(255,255,255,.08);
--mk-sb-text:#CBD5E1;
--mk-sb-text-2:#94A3B8;
--mk-sb-hover-bg: rgba(255,255,255,.04);
--mk-sb-active-bg: rgba(37,99,235,.18);
--mk-sb-active-text:#FFFFFF;
}
/* --------- Dark mode tokens (uses existing JS: html.dark) ---------
Goal: Asana/Linear-like dark mode: deep slate background, slightly lighter surfaces,
subtle borders, readable text, same brand accents.
*/
html.dark{
--mk-bg:#0B1220;
--mk-surface:#0F1A2E;
--mk-surface-2:#111F36;
--mk-border:rgba(255,255,255,.10);
--mk-border-strong:rgba(255,255,255,.16);
--mk-text:#E5E7EB;
--mk-text-2:#A3B0C2;
--mk-text-3:#7B8AA3;
/* sidebar stays dark, but slightly blended */
--mk-sb-bg:#070D18;
--mk-sb-bg-2:#0B1220;
--mk-sb-border: rgba(255,255,255,.10);
--mk-sb-text:#D6DEE9;
--mk-sb-text-2:#97A6BC;
--mk-sb-hover-bg: rgba(255,255,255,.07);
--mk-sb-active-bg: rgba(37,99,235,.22);
--mk-sb-active-text:#FFFFFF;
}
h1,h2,h3{letter-spacing:-0.01em;}
/* ---------- Global surfaces ---------- */
/* ---------- Sidebar (dark) ---------- */
.app-sidebar{
background:var(--mk-sb-bg)!important;
border-color:var(--mk-sb-border)!important;
box-shadow:none!important;
/* Asana-like: sidebar flush to the left edge, not floating */
margin:0!important;
border-radius:0!important;
}
.app-sidebar .border-b,
.app-sidebar .border-t,
.app-sidebar .border-r,
.app-sidebar .border,
.app-sidebar [class*="border-"]{border-color:var(--mk-sb-border)!important;}
.app-sidebar a,
.app-sidebar button{color:var(--mk-sb-text)!important;}
.app-sidebar .text-gray-400,
.app-sidebar .text-gray-500,
.app-sidebar .dark\:text-slate-400{color:var(--mk-sb-text-2)!important;}
.app-sidebar .dark\:text-slate-300{color:var(--mk-sb-text)!important;}
.nav-item:hover{
background:var(--mk-sb-hover-bg)!important;
color:var(--mk-sb-active-text)!important;
}
.nav-item--active{
background:var(--mk-sb-active-bg)!important;
color:var(--mk-sb-active-text)!important;
font-weight:600!important;
position:relative;
}
.nav-item--active::before{
content:"";
position:absolute;
/* keep indicator inside so nothing clips outside viewport */
left:6px;
top:8px;
bottom:8px;
width:3px;
border-radius:999px;
background:var(--mk-brand);
}
.app-sidebar .nav-ic{
align-items:center;
justify-content:center;
border-radius: 8px!important;
background:rgba(255,255,255,.04);
}
.nav-item:hover .nav-ic{background:rgba(255,255,255,.07)!important;}
.nav-item--active .nav-ic{background:rgba(37,99,235,.22)!important;}
.nav-item svg{color:var(--mk-sb-text-2)!important;}
.nav-item:hover svg{color:var(--mk-sb-active-text)!important;}
.nav-item--active svg{color:var(--mk-sb-active-text)!important;}
/* sidebar header (logo area) */
.app-sidebar .px-6.py-5{
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0))!important;
}
.app-sidebar .font-semibold{color: #fff!important;}
.app-sidebar #sbCollapseBtn{
background:rgba(255,255,255,.04)!important;
border-color:rgba(255,255,255,.10)!important;
}
.app-sidebar #sbCollapseBtn:hover{background:rgba(255,255,255,.10)!important;}
.app-sidebar #sbCollapseBtn svg{color:#E5E7EB!important;}
/* ---------- Topbar ---------- */
header,.border-b{border-color:var(--mk-border)!important;}
header{background:var(--mk-surface)!important;box-shadow:none!important;}
/* remove "portal" feeling: keep things flat/clean */
.sb-shell{box-shadow:none!important;}
/* On desktop the template adds md:my-4 + md:ml-4 to the sidebar (floating card look).
Override so it sits flush like Asana. */
@media (min-width: 768px){
.app-sidebar.md\:my-4{margin-top:0!important;margin-bottom:0!important;}
.app-sidebar.md\:ml-4{margin-left:0!important;}
.app-sidebar.md\:rounded-3xl{border-radius:0!important;}
}
/* Submenus in this project are indented with inline styles (padding-left + negative icon margin).
Pull them back in so they never go out of view. */
.app-sidebar .sb-sub .nav-item{padding-left: 16px!important;}
.app-sidebar .sb-sub .nav-ic{margin-left:0!important;}
/* Make submenu items a touch smaller than top-level */
.app-sidebar .sb-sub .nav-item{padding-top:6px!important;padding-bottom:6px!important;font-size: 12px!important;}
/* Flatten sidebar icon tiles (brand.css adds strong shadows) */
.app-sidebar a .sb-ico,
.app-sidebar .nav-ic{box-shadow:none!important;border: none!important;}
.app-sidebar a:hover .sb-ico{transform:none!important;}
/* ---------- Buttons ---------- */
button,.btn,a.button{border-radius:10px;font-weight:600;letter-spacing:-0.005em;}
.bg-primary,.bg-blue-600,.bg-indigo-600,.btn-primary{
background:var(--mk-brand)!important;
color:#fff!important;
border:1px solid rgba(37,99,235,.35)!important;
}
/* icon action buttons (eye/star/edit/trash) */
.icon-btn, .action-btn, button[aria-label*="Edit"], button[aria-label*="Delete"], a[aria-label*="Edit"], a[aria-label*="Delete"]{
padding:6px!important;
border-radius:10px!important;
}
.icon-btn:hover, .action-btn:hover{background:var(--mk-surface-2)!important;}
/* ---------- Dropdowns / popovers ---------- */
[role="menu"],.dropdown,.popover,.absolute.bg-white{
border:1px solid var(--mk-border)!important;
border-radius:12px!important;
box-shadow:var(--mk-shadow-sm)!important;
}
.mk-range-menu {
min-width: 220px!important;
font-size: 13px;
}
/* ---------- Modals / backdrops ---------- */
.fixed.inset-0.bg-black\/30,.fixed.inset-0.bg-black\/40,.modal-backdrop{
background:rgba(17,24,39,.35)!important;
backdrop-filter:blur(4px);
}
[role="dialog"],.modal{border-radius:var(--mk-radius)!important;}
/* ---------- Board / Kanban (best effort) ---------- */
.kanban-column,.board-column,[class*="kanban"][class*="column"],[class*="board"][class*="column"]{
background:#F3F4F6!important;
border:1px solid var(--mk-border)!important;
border-radius:var(--mk-radius)!important;
box-shadow:none!important;
}
.kanban-card,.board-card,[class*="kanban"][class*="card"],[class*="board"][class*="card"]{
background:var(--mk-surface)!important;
border:1px solid var(--mk-border)!important;
border-radius:var(--mk-radius)!important;
box-shadow:none!important;
transition:border-color .15s ease,transform .12s ease;
}
.kanban-card:hover,.board-card:hover{border-color:var(--mk-border-strong)!important;}
/* Real glass highlight */
.sidebar-glass::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 20% 0%, rgba(255,255,255,0.18), transparent 55%),
radial-gradient(circle at 90% 30%, rgba(59,130,246,0.10), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
border-right: 1px solid rgba(255,255,255,0.14);
border-radius: inherit;
}
/* Prevent date/time wrapping inside tables (keeps day + month/year on one line) */
.table-scroll table td,
.table-scroll table th{white-space:nowrap;}
.mk-favicon {max-width:24px;display: inline;margin-right: 10px;}
/* PM settings toggles: reuse Alert toggle styling without the alert card wrapper */
.pm-switch{
position:relative;
}
.pm-switch input{
position:absolute;
opacity:0;
pointer-events:none;
}
.pm-switch .alert-switch{
display:inline-block;
width:52px;
height:30px;
border-radius:9999px;
background:#d1d5db;
box-shadow: inset 0 0 0 1px rgba(100,116,139,.25);
position:relative;
flex:0 0 auto;
}
.dark .pm-switch .alert-switch{
background:rgba(148,163,184,.22);
box-shadow: inset 0 0 0 1px rgba(148,163,184,.28);
}
@keyframes slideOutLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.pm-switch .alert-switch:before{
content:'';
position:absolute;
top:4px;
left:4px;
width:22px;
height:22px;
border-radius:9999px;
background:#fff;
border:4px solid rgba(100,116,139,.65);
box-sizing:border-box;
transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.pm-switch input:checked + .alert-switch:before{
transform:translateX(22px);
background:var(--primary);
border-color:var(--primary);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:center;
background-size:16px 16px;
}
/* PM settings: compact switch row (reuse alert-channel markup without card look) */
.pm-mini{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* PM portal polish to match the portal's glassy card/table style */
.pm-card {
border-radius: 1.5rem; /* 24px */
border: 1px solid rgba(255,255,255,.60);
background: rgba(255,255,255,.70);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 10px 40px rgba(15, 23, 42, .06);
/* Keep content usable inside cards (tables/forms) */
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.dark .pm-card{
background: rgba(2,6,23,.45);
border-color: rgba(255,255,255,.12);
box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.pm-card-hd{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;}
.pm-card-title{font-weight:700;font-size:1.25rem;letter-spacing:-.01em;}
.pm-card-sub{font-size:.875rem;color:#64748b;}
.dark .pm-card-sub{color:#94a3b8;}
.pm-table { width:100%; border-collapse:separate; border-spacing:0; }
.pm-table thead th{
font-size:.75rem;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
padding: .9rem 1rem;
border-bottom: 1px solid rgba(148,163,184,.22);
}
.dark .pm-table thead th{color:#94a3b8;}
.pm-table tbody td{
padding: 1.05rem 1rem;
border-top: 1px solid rgba(148,163,184,.14);
vertical-align: middle;
}
.dark .pm-table tbody td{border-top-color: rgba(148,163,184,.18);}
.pm-row:hover td{ background: rgba(255,255,255,.35); }
.dark .pm-row:hover td{ background: rgba(255,255,255,.06); }
.pm-row:first-child td{ border-top: 0; }
.pm-actions{
display:inline-flex;
gap:.5rem;
align-items:center;
justify-content:flex-end;
}
/* Pill buttons used in Tasks UI */
.pm-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
border-radius:999px;
padding:.65rem .95rem;
font-weight:700;
font-size:.875rem;
border:1px solid transparent;
transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.pm-btn:hover{transform:translateY(-1px);}
.pm-btn-primary{background:#0f172a;color:#fff;}
.pm-btn-primary:hover{background:#111827;}
.dark .pm-btn-primary{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);color:#e2e8f0;}
.dark .pm-btn-primary:hover{background:rgba(255,255,255,.14);}
.pm-btn-secondary{background:rgba(15,23,42,.08);color:#0f172a;border-color:rgba(15,23,42,.10);}
.pm-btn-secondary:hover{background:rgba(15,23,42,.12);}
.dark .pm-btn-secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#e2e8f0;}
.dark .pm-btn-secondary:hover{background:rgba(255,255,255,.10);}
.pm-btn-danger{background:rgba(239,68,68,.12);color:#ef4444;border-color:rgba(239,68,68,.18);}
.pm-btn-danger:hover{background:rgba(239,68,68,.18);}
.pm-iconbtn{
width:40px; height:40px;
display:inline-flex; align-items:center; justify-content:center;
border-radius: 14px;
background: rgba(255,255,255,.40);
border: 1px solid rgba(255,255,255,.55);
transition: transform .12s ease, background .12s ease;
}
.dark .pm-iconbtn{
background: rgba(15,23,42,.35);
border-color: rgba(255,255,255,.14);
}
.pm-iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.55); }
.dark .pm-iconbtn:hover{ background: rgba(15,23,42,.55); }
.pm-iconbtn--danger{ color:#ef4444; }
.pm-iconbtn--primary{ color:#2563eb; }
.pm-iconbtn--muted{ color:#0f172a; }
.dark .pm-iconbtn--muted{ color:#e2e8f0; }
.pm-iconbtn svg{ width:18px; height:18px; stroke-width:2; }
.pm-badge{
display:inline-flex;
align-items:center;
gap:.4rem;
padding: .28rem .62rem;
border-radius: 999px;
font-size: .75rem;
font-weight: 600;
border: 1px solid rgba(148,163,184,.25);
background: rgba(255,255,255,.35);
}
.dark .pm-badge{ background: rgba(15,23,42,.35); border-color: rgba(148,163,184,.22); }
/* Labels (task tags) */
.pm-labels{display:flex;flex-wrap:wrap;gap:.35rem;}
.pm-label-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.22rem .55rem;font-size:.75rem;font-weight:800;border:1px solid transparent;}
.pm-progress{ height: 12px; background:#e5e7eb; border-radius:999px; overflow:hidden; }
.dark .pm-progress{ background: rgba(148,163,184,.25); }
.pm-progress-bar{ height:100%; border-radius:999px; transition:width .25s ease; }
.pm-progress-label{ font-size:.75rem; color:#64748b; margin-top:.35rem; }
.dark .pm-progress-label{ color:#94a3b8; }
.pm-logo-28{ width:28px; height:28px; object-fit:contain; border-radius:8px; background: rgba(255,255,255,.6); border:1px solid rgba(148,163,184,.25); padding:3px; }
.dark .pm-logo-28{ background: rgba(15,23,42,.35); }
.pm-formgrid{ display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 768px){ .pm-formgrid{ grid-template-columns: 1fr 1fr; } }
.pm-section-title{ font-weight:700; font-size:1rem; margin:.25rem 0 .75rem; }
/* Portal-style form controls */
.pm-input,
.pm-select,
.pm-textarea{
width:100%;
border-radius: 18px;
border: 1px solid rgba(15,23,42,.12);
background: rgba(255,255,255,.85);
padding: 10px 12px;
outline: none;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dark .pm-input,
.dark .pm-select,
.dark .pm-textarea{
background: rgba(15,23,42,.28);
border-color: rgba(255,255,255,.14);
}
.pm-textarea{ min-height: 130px; resize: vertical; }
.pm-input:focus,
.pm-select:focus,
.pm-textarea:focus{
border-color: rgba(37,99,235,.35);
box-shadow: 0 0 0 4px rgba(37,99,235,.12);
background: rgba(255,255,255,.95);
}
.dark .pm-input:focus,
.dark .pm-select:focus,
.dark .pm-textarea:focus{ background: rgba(15,23,42,.38); }
.pm-label{ font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color:#64748b; }
.dark .pm-label{ color:#94a3b8; }
/* Avatar chips */
.pm-avatars{ display:flex; align-items:center; gap:8px; }
.pm-avatar{ width:34px; height:34px; border-radius:999px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.55); }
.dark .pm-avatar{ background: rgba(15,23,42,.35); border-color: rgba(255,255,255,.14); }
.pm-avatar img{ width:100%; height:100%; object-fit:cover; }
.pm-avatar-initials{ font-weight:800; font-size:12px; color:#0f172a; }
.dark .pm-avatar-initials{ color:#e2e8f0; }
/* Switch (alert-style) fallback */
.pm-switch{ position:relative; display:inline-flex; align-items:center; gap:10px; }
.pm-switch-ui{ width:56px; height:30px; border-radius:999px; background:#d1d5db; position:relative; transition:background .15s ease; border:1px solid rgba(15,23,42,.08); }
.pm-switch-ui:after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px; background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.15); transition:transform .15s ease; }
.pm-switch input:checked + .pm-switch-ui{ background: rgba(37,99,235,.55); }
.pm-switch input:checked + .pm-switch-ui:after{ transform: translateX(26px); }
/* Quill editor */
.pm-quill{ border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dark .pm-quill{ background: rgba(15,23,42,.28); border-color: rgba(255,255,255,.14); }
.pm-quill .ql-toolbar{ border:0; border-bottom:1px solid rgba(15,23,42,.06); background: rgba(255,255,255,.45); }
.dark .pm-quill .ql-toolbar{ background: rgba(15,23,42,.25); border-bottom-color: rgba(255,255,255,.08); }
.pm-quill .ql-container{ border:0; min-height:260px; }
/* Portal toggle (used for subtasks). If your main portal already defines these, this won't break it. */
.alert-switch{ position:relative; display:inline-block; width:54px; height:30px; }
.alert-switch input{ opacity:0; width:0; height:0; }
.alert-switch span{ position:absolute; cursor:pointer; inset:0; background:#d1d5db; border-radius:999px; transition:.2s; }
.alert-switch span:before{ content:""; position:absolute; height:22px; width:22px; left:4px; top:4px; background:white; border-radius:999px; transition:.2s; box-shadow:0 6px 16px rgba(15,23,42,.18); }
.alert-switch input:checked + span{ background:#3b82f6; }
.alert-switch input:checked + span:before{ transform:translateX(24px); }
/* --- PM portal fixes (2026-02) --- */
/* Typography: match portal (less heavy) */
.pm-card-title{font-weight:600;}
.pm-section-title{font-weight:600;}
.pm-btn{font-weight:600;}
.pm-label{font-weight:600;}
.pm-label-badge{font-weight:600;}
.pm-avatar-initials{font-weight:700;}
/* Replace overly bold inline headings */
.pm-h2{font-weight:600;font-size:18px;letter-spacing:-.01em;}
.pm-h3{font-weight:600;font-size:14px;}
.pm-muted{color:#64748b;font-size:12px;}
.dark .pm-muted{color:#94a3b8;}
/* Labels: make them look like pills (not just colored text) */
.pm-label-badge{
box-shadow: 0 6px 18px rgba(15,23,42,.06);
background-clip: padding-box;
}
.pm-labels .pm-label-badge{
padding:.28rem .62rem;
border-width:1px;
border-style:solid;
}
/* Checkbox inside label pills */
.pm-label-badge input[type="checkbox"]{
width:14px;height:14px;
accent-color: currentColor;
}
/* Selects: prevent arrow overlap + consistent padding */
.pm-select{
padding-right: 2.75rem;
line-height: 1.25;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position: right 12px center;
background-size: 16px 16px;
}
.dark .pm-select{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Task form responsive layout */
.pm-task-grid{display:grid;grid-template-columns: 1.4fr 1fr;gap:16px;}
@media (max-width: 900px){
.pm-task-grid{grid-template-columns: 1fr;}
.pm-task-actions{position:sticky;bottom:12px;z-index:20;justify-content:space-between;}
.pm-task-actions .pm-btn{flex:1;}
.pm-task-actions{gap:10px;background: rgba(255,255,255,.65);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);padding:10px;border-radius:18px;border:1px solid rgba(148,163,184,.25);}
.dark .pm-task-actions{background: rgba(2,6,23,.45);border-color: rgba(255,255,255,.12);}
.pm-quill .ql-container{min-height:180px;}
}
/* Task list actions: align with projects icons */
.pm-actions .pm-iconbtn{width:40px;height:40px;}
/* Multi-selects: no dropdown chevron */
.pm-select[multiple],
.pm-select[size]:not([size="1"]) {
background-image: none !important;
padding-right: 12px;
}
/* Project statuses (Kanban columns management) */
.pm-status-list{display:flex;flex-direction:column;gap:10px;}
.pm-status-item{display:flex;align-items:flex-start;gap:12px;padding:12px 12px;border:1px solid rgba(148,163,184,.25);border-radius:16px;background:rgba(255,255,255,.55);backdrop-filter: blur(10px);}
.dark .pm-status-item{background:rgba(15,23,42,.35);border-color:rgba(148,163,184,.18);}
.pm-status-item.is-dragging{opacity:.6;}
.pm-status-handle{width:36px;height:36px;border-radius:14px;border:1px solid rgba(148,163,184,.28);display:flex;align-items:center;justify-content:center;color:#64748b;background:rgba(255,255,255,.6);cursor:grab;flex:0 0 auto;}
.dark .pm-status-handle{background:rgba(15,23,42,.45);border-color:rgba(148,163,184,.18);color:#94a3b8;}
.pm-status-handle:active{cursor:grabbing;}
/* Minimal modal */
.pm-modal{position:fixed;inset:0;z-index:99999;}
.pm-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.35);backdrop-filter: blur(2px);}
.pm-modal-card{position:relative;max-width:560px;margin:10vh auto 0 auto;background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.22);border-radius:20px;padding:18px 18px;box-shadow:0 20px 60px rgba(15,23,42,.18);}
.dark .pm-modal-card{background:rgba(15,23,42,.92);border-color:rgba(148,163,184,.18);box-shadow:0 20px 60px rgba(0,0,0,.4);}
/* ==========================================================
Tasks: List/Kanban toggle + Kanban board
========================================================== */
.pm-seg{display:inline-flex;border:1px solid rgba(15,23,42,.12);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.65);backdrop-filter:blur(12px)}
.dark .pm-seg{background:rgba(15,23,42,.28);border-color:rgba(255,255,255,.14)}
.pm-seg-btn{padding:.5rem .9rem;font-size:.875rem;color:#334155;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.dark .pm-seg-btn{color:#cbd5e1}
.pm-seg-btn:hover{background:rgba(148,163,184,.18)}
.dark .pm-seg-btn:hover{background:rgba(148,163,184,.14)}
.pm-seg-btn.is-active{background:rgba(37,99,235,.12);color:#1d4ed8;font-weight:600}
.dark .pm-seg-btn.is-active{background:rgba(96,165,250,.16);color:#93c5fd}
.pm-kanban-wrap{padding:1rem}
.pm-kanban{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.75rem;scroll-snap-type:x mandatory}
.pm-kanban-col{flex:0 0 320px;max-width:320px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:18px;overflow:hidden;scroll-snap-align:start}
.dark .pm-kanban-col{background:rgba(15,23,42,.25);border-color:rgba(255,255,255,.12)}
@media (max-width: 640px){.pm-kanban-col{flex-basis:85vw;max-width:85vw}}
.pm-kanban-colhead{padding:.9rem 1rem;border-bottom:1px solid rgba(15,23,42,.08);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.dark .pm-kanban-colhead{border-bottom-color:rgba(255,255,255,.10)}
.pm-kanban-coltitle{display:flex;align-items:center;gap:.6rem;font-weight:600;color:#0f172a}
.dark .pm-kanban-coltitle{color:#e2e8f0}
.pm-kanban-dot{width:10px;height:10px;border-radius:999px;box-shadow:0 0 0 3px rgba(15,23,42,.06)}
.dark .pm-kanban-dot{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.pm-kanban-count{font-size:12px;color:#64748b;background:rgba(148,163,184,.18);padding:.15rem .5rem;border-radius:999px}
.dark .pm-kanban-count{color:#cbd5e1;background:rgba(148,163,184,.14)}
.pm-kanban-colbody{padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-height:120px}
.pm-kanban-card{background:rgba(255,255,255,.80);border:1px solid rgba(15,23,42,.10);border-radius:16px;padding:.75rem .85rem;cursor:grab;box-shadow:0 10px 24px rgba(2,6,23,.06)}
.dark .pm-kanban-card{background:rgba(2,6,23,.28);border-color:rgba(255,255,255,.12);box-shadow:none}
.pm-kanban-card:active{cursor:grabbing}
.pm-kanban-title{font-weight:600;color:#0f172a;font-size:.95rem;line-height:1.25}
.dark .pm-kanban-title{color:#e2e8f0}
.pm-kanban-meta{margin-top:.4rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:12px;color:#64748b}
.dark .pm-kanban-meta{color:#94a3b8}
.pm-kanban-pill{border:1px solid rgba(15,23,42,.10);background:rgba(148,163,184,.14);padding:.1rem .45rem;border-radius:999px}
.dark .pm-kanban-pill{border-color:rgba(255,255,255,.12);background:rgba(148,163,184,.12)}
.pm-kanban-actions{margin-top:.55rem;display:flex;justify-content:flex-end}
.pm-kanban-empty{font-size:12px;color:#94a3b8;border:1px dashed rgba(148,163,184,.5);border-radius:14px;padding:.75rem;text-align:center}
.dark .pm-kanban-empty{color:#94a3b8;border-color:rgba(148,163,184,.35)}
/* =========================
Kanban (Tasks)
========================= */
.pm-kanban-wrap { overflow: auto; }
.pm-kanban { display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; }
.pm-kanban-col { min-width: 320px; max-width: 320px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; display:flex; flex-direction:column; }
@media (max-width: 640px){ .pm-kanban-col{ min-width: 85vw; max-width: 85vw; } }
.pm-kanban-colhead { padding:14px 14px 10px 14px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pm-kanban-coltitle { display:flex; align-items:center; gap:8px; font-weight:600; }
.pm-kanban-dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.pm-kanban-headright { display:flex; align-items:center; gap:8px; }
.pm-kanban-count { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#f8fafc; }
.pm-kanban-colbody { padding:12px; display:flex; flex-direction:column; gap:10px; min-height: 80px; }
.pm-kanban-empty { padding:10px; border:1px dashed #e5e7eb; border-radius:12px; color:#64748b; font-size:13px; text-align:center; background:#f8fafc; }
.pm-kanban-card { background:#f9fafb; border:1px solid #e5e7eb; border-radius:14px; padding:12px; cursor:grab; transition: box-shadow .15s ease, transform .15s ease, background .15s ease; }
.pm-kanban-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.08); transform: translateY(-1px); background:#fff; }
.pm-kanban-title { font-weight:600; font-size:14px; color:#0f172a; }
.pm-kanban-meta { margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:#64748b; font-size:12px; }
.pm-kanban-pill { font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#334155; }
.pm-kanban-labels { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.pm-label-pill { font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(148,163,184,.35); background:rgba(2,132,199,.08); color:#0369a1; }
.pm-kanban-more { font-size:12px; color:#64748b; padding:2px 6px; }
.pm-kanban-footer { margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pm-avatar-stack { display:flex; align-items:center; }
.pm-avatar { width:26px; height:26px; border-radius:999px; border:2px solid #fff; background:#e2e8f0; color:#0f172a; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; overflow:hidden; margin-left:-8px; }
.pm-avatar:first-child { margin-left:0; }
.pm-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.pm-avatar-more { background:#f1f5f9; border-color:#fff; }
.pm-drag-ghost { opacity:.6; }
.pm-drag-chosen { box-shadow: 0 12px 30px rgba(15,23,42,.14); }
body.pm-is-dragging .pm-kanban-card { cursor:grabbing; }
/* =========================
Modal (quick edit/create)
========================= */
.pm-modal { position:fixed; inset:0; z-index: 50; display:none; }
.pm-modal.is-open { display:block; }
.pm-modal-backdrop { position:absolute; inset:0; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); }
.pm-modal-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(720px, 92vw); max-height: 86vh; overflow:auto; background:#fff; border-radius:18px; border:1px solid rgba(148,163,184,.35); box-shadow: 0 24px 80px rgba(15,23,42,.25); }
.pm-modal-head { padding:14px 16px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pm-modal-title { font-weight:700; }
.pm-modal-body { padding:16px; display:grid; gap:12px; }
.pm-modal-foot { padding:14px 16px; border-top:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pm-modal-actions { display:flex; gap:10px; align-items:center; }
.pm-modal-sub { color:#64748b; font-size:13px; }
.pm-field { display:grid; gap:6px; }
/* PM patch styles (portal consistent) */
.pm-badge{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:4px 10px;
border-radius:999px;
font-size:12px;
font-weight:600;
line-height:1;
border:1px solid rgba(148,163,184,.35);
}
.pm-progress{
height:14px;
background:#e5e7eb;
border-radius:999px;
overflow:hidden;
min-width:140px;
}
.pm-progress-bar{
height:100%;
border-radius:999px;
transition:width .3s ease;
}
.pm-progress-label{
font-size:12px;
color:#6b7280;
margin-top:6px;
}
.pm-action{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:999px;
}
.pm-action:hover{ background: rgba(148,163,184,.18); }
.pm-action svg, .pm-action i{
width:18px !important;
height:18px !important;
stroke-width:2 !important;
}
.pm-avatar{
width:28px;
height:28px;
border-radius:999px;
object-fit:cover;
}
.pm-muted{ color:#6b7280; }
.pm-logosm{ max-height:40px; max-width:120px; object-fit:contain; }
/* PM overrides – layout + icons */
.pm-editgrid{
display:grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items:start;
}
@media (max-width: 1024px){
.pm-editgrid{ grid-template-columns: 1fr; }
}
.pm-quill .ql-container{ min-height: 260px; } /* slightly less tall */
.pm-task-actions{ margin-top: 16px; position: relative; z-index: 3; }
.pm-stat-icon{
width:52px;height:52px;border-radius:999px;
display:flex;align-items:center;justify-content:center;
background: rgba(255,255,255,.55);
box-shadow: 0 12px 30px rgba(15,23,42,.12);
}
.pm-stat-icon i{ width:22px;height:22px; }
/* Calendar event content */
.pm-cal-event{
display:flex;
align-items:center;
gap:.5rem;
padding:.15rem .35rem;
border-radius:.5rem;
overflow:hidden;
}
.pm-cal-avatar{
width:18px;
height:18px;
border-radius:999px;
border:1px solid rgba(15,23,42,.12);
flex:0 0 auto;
object-fit:cover;
}
.pm-cal-title{
font-size:12px;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* =========================================================
Premium SaaS KPI Cards (admin/index.php)
- Replaces TailAdmin puffy stats cards with crisp "premium"
========================================================= */
.mk-kpi-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 8px 0 22px;
}
@media (max-width: 1200px){
.mk-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.mk-kpi-grid{ grid-template-columns: 1fr; }
}
.mk-kpi-card{
position: relative;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
padding: 18px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.06);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mk-kpi-card:hover{
transform: translateY(-2px);
border-color: rgba(15,23,42,.12);
box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 20px 46px rgba(15,23,42,.10);
}
/* subtle premium top highlight */
.mk-kpi-card::before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
pointer-events:none;
background: linear-gradient(180deg, rgba(37,99,235,.08), transparent 42%);
opacity:.55;
}
.dark .mk-kpi-card{
background: rgba(15,23,42,.78);
border-color: rgba(148,163,184,.16);
box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 18px 50px rgba(0,0,0,.28);
}
.dark .mk-kpi-card:hover{
border-color: rgba(148,163,184,.22);
box-shadow: 0 1px 2px rgba(0,0,0,.32), 0 22px 62px rgba(0,0,0,.36);
}
.dark .mk-kpi-card::before{
background: linear-gradient(180deg, rgba(59,130,246,.16), transparent 48%);
opacity:.40;
}
.mk-kpi-main{ position:relative; z-index:1; min-width:0; }
.mk-kpi-top{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
margin-bottom: 10px;
}
.mk-kpi-label{
font-size: 12px;
font-weight: 650;
letter-spacing: .02em;
color: rgba(15,23,42,.58);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark .mk-kpi-label{ color: rgba(248,250,252,.60); }
.mk-kpi-value{
font-size: 28px;
line-height: 1.1;
font-weight: 750;
letter-spacing: -0.02em;
color:#0f172a;
}
.dark .mk-kpi-value{ color: rgba(248,250,252,.96); }
.mk-kpi-unit{
font-size: 14px;
font-weight: 650;
color: rgba(15,23,42,.45);
}
.dark .mk-kpi-unit{ color: rgba(248,250,252,.52); }
.mk-kpi-meta{
margin-top: 10px;
font-size: 13px;
color: rgba(15,23,42,.58);
display:flex;
align-items:center;
gap: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark .mk-kpi-meta{ color: rgba(248,250,252,.56); }
.mk-kpi-link{ margin-top: 10px; font-size: 13px; }
.mk-kpi-link a{
color: var(--primary);
font-weight: 600;
text-decoration: none;
}
.mk-kpi-link a:hover{ text-decoration: underline; }
/* Pills */
.mk-kpi-pill{
font-size: 11px;
font-weight: 650;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(15,23,42,.10);
background: rgba(15,23,42,.03);
color: rgba(15,23,42,.72);
white-space: nowrap;
}
.dark .mk-kpi-pill{
background: rgba(148,163,184,.10);
border-color: rgba(148,163,184,.18);
color: rgba(248,250,252,.70);
}
.mk-kpi-pill.good{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); color:#047857; }
.mk-kpi-pill.warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.22); color:#92400e; }
.mk-kpi-pill.danger{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.18); color:#b91c1c; }
/* Icon chips */
.mk-kpi-icon{
position:relative;
z-index:1;
width: 44px;
height: 44px;
border-radius: 14px;
display:flex;
align-items:center;
justify-content:center;
flex: 0 0 auto;
border: 1px solid rgba(15,23,42,.08);
background: rgba(15,23,42,.02);
box-shadow: 0 1px 0 rgba(15,23,42,.03);
color: rgba(15,23,42,.70);
}
/* Smaller icon chip (used in Status Page incident impact chips) */
.mk-kpi-icon--sm{
width: 30px;
height: 30px;
border-radius: 12px;
}
.mk-kpi-icon--sm svg{width:16px;height:16px;}
/* Swetrix-like impact chip (icon + label) */
.mk-impact-chip{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 12px;
border-radius:14px;
border:1px solid rgba(15,23,42,.08);
}
.mk-impact-chip .mk-impact-label{font-weight:700;}
.dark .mk-impact-chip{border-color:rgba(148,163,184,.14);}
/* Swetrix-ish delta badges (up/down/neutral) */
.mk-delta{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border-radius:999px;
font-weight:700;
font-size:12px;
border:1px solid rgba(15,23,42,.08);
background:rgba(2,6,23,.03);
color:#334155;
}
.dark .mk-delta{border-color:rgba(148,163,184,.14);background:rgba(255,255,255,.06);color:#e2e8f0;}
.mk-delta::before{content:"";width:16px;height:16px;border-radius:99px;display:inline-block;background:rgba(148,163,184,.18);}
.mk-delta--up{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.22);color:#047857;}
.mk-delta--up::before{background:rgba(16,185,129,.20);mask: url('data:image/svg+xml;utf8,') center/12px 12px no-repeat; -webkit-mask: url('data:image/svg+xml;utf8,') center/12px 12px no-repeat;}
.mk-delta--down{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22);color:#b91c1c;}
.mk-delta--down::before{background:rgba(239,68,68,.22);mask: url('data:image/svg+xml;utf8,') center/12px 12px no-repeat; -webkit-mask: url('data:image/svg+xml;utf8,') center/12px 12px no-repeat;}
.dark .mk-kpi-icon{
border-color: rgba(148,163,184,.18);
background: rgba(148,163,184,.10);
color: rgba(248,250,252,.78);
}
.mk-kpi-icon svg{
width: 20px;
height: 20px;
}
.dark .mk-kpi-icon{
border-color: rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(248,250,252,.85);
}
.mk-kpi-icon.brand{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.18); color:#2563eb; }
.mk-kpi-icon.good { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); color:#059669; }
.mk-kpi-icon.warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.20); color:#b45309; }
.mk-kpi-icon.danger{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.18); color:#dc2626; }
.mk-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.mk-dot.good{ background:#10b981; }
.mk-dot.warn{ background:#f59e0b; }
.mk-dot.danger{ background:#ef4444; }
.mk-dot.neutral{ background: rgba(15,23,42,.28); }
.dark .mk-dot.neutral{ background: rgba(248,250,252,.32); }
/* Dots */
.mk-dot{ width:8px; height:8px; border-radius:99px; display:inline-block; }
.mk-dot.neutral{ background: rgba(15,23,42,.25); }
.dark .mk-dot.neutral{ background: rgba(248,250,252,.28); }
/* Optional: tame TailAdmin shadow utilities on dashboard area */
.mx-auto.max-w-6xl .shadow-sm{ box-shadow: 0 1px 2px rgba(15,23,42,.05) !important; }
/* =========================================================
Analytics / PM matched sidebar (admin/layout_top.php)
Shared glass cards, rounded geometry and Inter-heavy hierarchy
========================================================= */
.app-sidebar{
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.88)) !important;
backdrop-filter: blur(22px) saturate(160%) !important;
-webkit-backdrop-filter: blur(22px) saturate(160%) !important;
border: 1px solid rgba(148,163,184,.18) !important;
border-right: 1px solid rgba(148,163,184,.18) !important;
box-shadow: 0 24px 70px rgba(15,23,42,.08) !important;
}
.dark .app-sidebar{
background: linear-gradient(180deg, rgba(15,23,42,.90), rgba(2,6,23,.94)) !important;
border-color: rgba(148,163,184,.16) !important;
box-shadow: 0 26px 72px rgba(0,0,0,.42) !important;
}
.app-sidebar > div:first-child{
background: transparent !important;
border-bottom: 1px solid rgba(148,163,184,.14) !important;
}
.dark .app-sidebar > div:first-child{
border-bottom-color: rgba(148,163,184,.12) !important;
}
.app-sidebar nav{
padding: 14px 12px 18px !important;
}
.app-sidebar nav .text-gray-400{
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: .16em !important;
color: #94a3b8 !important;
}
.dark .app-sidebar nav .text-gray-400{
color: rgba(148,163,184,.72) !important;
}
.nav-item{
display:flex;
align-items:center;
gap:12px;
min-height: 48px;
padding: 11px 12px;
border-radius: 18px;
color: rgba(15,23,42,.86) !important;
font-size: 14px;
font-weight: 700;
letter-spacing: -.01em;
transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
border: 1px solid transparent;
}
.dark .nav-item{
color: rgba(248,250,252,.88) !important;
}
.nav-item:hover{
background: rgba(255,255,255,.72) !important;
border-color: rgba(148,163,184,.18) !important;
box-shadow: 0 10px 24px rgba(15,23,42,.05) !important;
transform: translateY(-1px);
}
.dark .nav-item:hover{
background: rgba(255,255,255,.05) !important;
border-color: rgba(148,163,184,.16) !important;
box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
}
.nav-item--active{
background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(16,185,129,.08), rgba(255,255,255,.82)) !important;
border-color: rgba(37,99,235,.18) !important;
box-shadow: 0 12px 26px rgba(37,99,235,.10) !important;
}
.dark .nav-item--active{
background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(16,185,129,.10), rgba(15,23,42,.82)) !important;
border-color: rgba(59,130,246,.28) !important;
box-shadow: 0 14px 32px rgba(15,23,42,.24) !important;
}
.nav-ic{
width:38px;
height:38px;
border-radius: 14px;
display:flex;
align-items:center;
justify-content:center;
background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(241,245,249,.85));
border: 1px solid rgba(148,163,184,.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
flex: 0 0 auto;
}
.dark .nav-ic{
background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.92));
border-color: rgba(148,163,184,.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-item--active .nav-ic{
background: linear-gradient(180deg, rgba(219,234,254,.92), rgba(224,242,254,.86));
border-color: rgba(96,165,250,.28);
}
.dark .nav-item--active .nav-ic{
background: linear-gradient(180deg, rgba(30,64,175,.45), rgba(15,23,42,.96));
border-color: rgba(96,165,250,.30);
}
.app-sidebar .sb-sub{
margin-left: 18px !important;
padding-left: 12px !important;
border-left: 1px solid rgba(148,163,184,.16) !important;
}
.dark .app-sidebar .sb-sub{
border-left-color: rgba(148,163,184,.14) !important;
}
.app-sidebar .sb-sub .nav-item{
min-height: 40px;
padding-top: 8px !important;
padding-bottom: 8px !important;
border-radius: 14px;
font-size: 13px !important;
}
.app-sidebar .sb-sub .nav-ic{
width: 30px;
height: 30px;
border-radius: 11px;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.sb-collapsed .nav-item{
justify-content:center;
padding: 10px;
border-radius: 16px;
}
.sb-collapsed .nav-ic{
margin: 0;
}
.app-sidebar{
scrollbar-width: thin;
scrollbar-color: rgba(148,163,184,.42) transparent;
}
.app-sidebar::-webkit-scrollbar{ width: 10px; }
.app-sidebar::-webkit-scrollbar-track{ background: transparent; }
.app-sidebar::-webkit-scrollbar-thumb{
background: rgba(148,163,184,.30);
border-radius: 99px;
border: 3px solid transparent;
background-clip: content-box;
}
.dark .app-sidebar::-webkit-scrollbar-thumb{
background: rgba(148,163,184,.28);
border: 3px solid transparent;
background-clip: content-box;
}
#sbCollapseBtn{
background: rgba(255,255,255,.72) !important;
border: 1px solid rgba(148,163,184,.18) !important;
border-radius: 16px !important;
box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}
.dark #sbCollapseBtn{
background: rgba(30,41,59,.78) !important;
border-color: rgba(148,163,184,.16) !important;
box-shadow: 0 12px 24px rgba(0,0,0,.18) !important;
}
#sbCollapseBtn:hover{
background: rgba(255,255,255,.92) !important;
}
.dark #sbCollapseBtn:hover{
background: rgba(51,65,85,.92) !important;
}
/* =========================================================
Premium SaaS  Analytics dashboard layer (analytics_view.php)
Scope: .mk-ana
========================================================= */
.mk-ana{
--mk-surface: #ffffff;
--mk-surface-2: rgba(15,23,42,.02);
--mk-border: rgba(15,23,42,.08);
--mk-border-strong: rgba(15,23,42,.12);
--mk-text: #0f172a;
--mk-muted: rgba(15,23,42,.58);
--mk-muted-2: rgba(15,23,42,.42);
--mk-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.06);
--mk-shadow-hover: 0 1px 2px rgba(15,23,42,.06), 0 18px 44px rgba(15,23,42,.10);
--mk-radius: 18px;
}
.dark .mk-ana{
--mk-surface: rgba(2,6,23,.88);
--mk-surface-2: rgba(255,255,255,.04);
--mk-border: rgba(255,255,255,.10);
--mk-border-strong: rgba(255,255,255,.14);
--mk-text: rgba(248,250,252,.96);
--mk-muted: rgba(248,250,252,.62);
--mk-muted-2: rgba(248,250,252,.45);
--mk-shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.35);
--mk-shadow-hover: 0 1px 2px rgba(0,0,0,.40), 0 26px 70px rgba(0,0,0,.45);
}
/* Remove the “tab mess† turn tabs into a clean sticky header */
.mk-ana .pill-tabs{
display:none !important;
}
/* Global spacing & typography tweaks (safe) */
.mk-ana h1, .mk-ana h2, .mk-ana h3{
color: var(--mk-text) !important;
letter-spacing: -0.01em;
}
.mk-ana .text-gray-600,
.mk-ana .text-gray-500{
color: var(--mk-muted) !important;
}
.dark .mk-ana .text-gray-600,
.dark .mk-ana .text-gray-500{
color: var(--mk-muted) !important;
}
/* Premium cards  target the common TailAdmin cards in this page */
.mk-ana .rounded-2xl{
border-radius: var(--mk-radius) !important;
}
.mk-ana .shadow-sm{
box-shadow: var(--mk-shadow) !important;
}
.mk-ana .shadow-sm:hover{
box-shadow: var(--mk-shadow-hover) !important;
}
.mk-ana .bg-white{
background: var(--mk-surface) !important;
}
.mk-ana .dark\:bg-slate-900{
background: var(--mk-surface) !important;
}
.mk-ana .border-gray-200{
border-color: var(--mk-border) !important;
}
.mk-ana .dark\:border-slate-700{
border-color: var(--mk-border) !important;
}
.mk-ana .divide-gray-200 > :not([hidden]) ~ :not([hidden]){
border-color: var(--mk-border) !important;
}
/* Header controls (filter + range) */
.mk-ana .btn,
.mk-ana button,
.mk-ana select,
.mk-ana input[type="text"],
.mk-ana input[type="search"]{
border-radius: 14px !important;
}
.mk-ana select,
.mk-ana input[type="text"],
.mk-ana input[type="search"]{
background: var(--mk-surface) !important;
border: 1px solid var(--mk-border) !important;
color: var(--mk-text) !important;
box-shadow: none !important;
}
.mk-ana input:focus,
.mk-ana select:focus{
outline: none !important;
border-color: var(--mk-border-strong) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #337EF6) 18%, transparent) !important;
}
/* Dropdown / popover panels */
.mk-ana .absolute.z-50,
.mk-ana .dropdown-menu,
.mk-ana [role="menu"]{
background: var(--mk-surface) !important;
border: 1px solid var(--mk-border) !important;
border-radius: 16px !important;
box-shadow: var(--mk-shadow-hover) !important;
}
/* Tables inside cards */
.mk-ana table th{
color: var(--mk-muted) !important;
font-weight: 650 !important;
letter-spacing: .02em;
}
.mk-ana table td{
color: var(--mk-text) !important;
}
.mk-ana tbody tr:hover{
background: color-mix(in oklab, var(--primary, #337EF6) 6%, transparent) !important;
}
/* KPI mini cards (Users / Page Views / etc)  make them tighter */
.mk-ana .analytics-kpi{
border-radius: 16px !important;
border-color: var(--mk-border) !important;
box-shadow: none !important;
}
.mk-ana .analytics-kpi:hover{
box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
}
/* Chart container: keep clean */
.mk-ana .analytics-chart{
border-radius: var(--mk-radius) !important;
}
/* =========================================================
Premium SaaS Analytics Dashboard (Plausible/Vemetric-ish)
Scope: .mk-ana
========================================================= */
.mk-ana{
--mk-bg: #f6f7fb;
--mk-card: #ffffff;
--mk-border: rgba(15,23,42,.08);
--mk-text: #0f172a;
--mk-muted: rgba(15,23,42,.58);
--mk-muted2: rgba(15,23,42,.42);
--mk-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.06);
--mk-shadow2: 0 1px 2px rgba(15,23,42,.06), 0 20px 46px rgba(15,23,42,.10);
--mk-r: 18px;
color: var(--mk-text);
}
/* Page rhythm */
.mk-ana .page-title,
.mk-ana h1, .mk-ana h2, .mk-ana h3{ letter-spacing: -.01em; }
.mk-ana .text-gray-500{ color: var(--mk-muted) !important; }
.mk-ana .text-gray-400{ color: var(--mk-muted2) !important; }
/* Kill "tab chaos": keep content stacked like Plausible */
.mk-ana .analytics-tabs,
.mk-ana .tabs,
.mk-ana .subtabs,
.mk-ana .pill-tabs{ display:none !important; }
/* Ensure tab panels remain visible if JS toggles them */
.mk-ana [data-tab-pane],
.mk-ana .tab-pane,
.mk-ana .tabpanel,
.mk-ana .tab-content > div{
display:block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Card material: normalize Tailwind-ish card blocks */
.mk-ana .rounded-2xl,
.mk-ana .rounded-xl,
.mk-ana .rounded-lg{
border-radius: var(--mk-r) !important;
}
/* Many containers already have border/bg classes; enforce premium material */
.mk-ana .bg-white{
background: var(--mk-card) !important;
}
.mk-ana .border,
.mk-ana .border-gray-200{
border-color: var(--mk-border) !important;
}
/* Sections spacing */
.mk-ana [data-asection]{
margin-top: 14px;
}
/* Headings inside cards */
.mk-ana .font-semibold{
font-weight: 650 !important;
}
/* Controls: buttons/selects */
.mk-ana button,
.mk-ana select,
.mk-ana input[type="text"],
.mk-ana input[type="search"]{
border-radius: 14px !important;
}
.mk-ana select,
.mk-ana input[type="text"],
.mk-ana input[type="search"]{
border: 1px solid var(--mk-border) !important;
background: #fff !important;
box-shadow: none !important;
}
.mk-ana select:focus,
.mk-ana input[type="text"]:focus,
.mk-ana input[type="search"]:focus{
outline: none !important;
border-color: color-mix(in oklab, var(--primary, #337EF6) 40%, var(--mk-border)) !important;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #337EF6) 18%, transparent) !important;
}
.mk-ana button{
border: 1px solid var(--mk-border) !important;
background: rgba(15,23,42,.02) !important;
}
.mk-ana button:hover{
background: rgba(15,23,42,.04) !important;
box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
}
/* KPI cards at top (if present) - tighten */
.mk-ana .stat-ico,
.mk-ana .stat-ico *{ box-sizing: border-box; }
.mk-ana .stat-ico{
border-radius: 14px !important;
border: 1px solid rgba(15,23,42,.08) !important;
background: rgba(15,23,42,.02) !important;
}
/* Dropdowns / popovers */
.mk-ana [role="menu"],
.mk-ana .dropdown-menu,
.mk-ana .menu,
.mk-ana .popover,
.mk-ana .absolute.z-50{
border: 1px solid var(--mk-border) !important;
border-radius: 16px !important;
box-shadow: var(--mk-shadow2) !important;
background: #fff !important;
}
/* Tables/lists */
.mk-ana table{
border-collapse: separate;
border-spacing: 0;
}
.mk-ana thead th{
color: var(--mk-muted) !important;
font-weight: 650 !important;
border-bottom: 1px solid var(--mk-border) !important;
}
.mk-ana tbody td{
border-bottom: 1px solid rgba(15,23,42,.06) !important;
}
.mk-ana tbody tr:hover{
background: color-mix(in oklab, var(--primary, #337EF6) 5%, transparent) !important;
}
/* Chart container: make it feel premium */
.mk-ana .chart-wrap{
padding-top: 8px;
}
.mk-ana canvas{
border-radius: 14px;
}
/* =========================================================
Premium SaaS Pages Layer
Applies to: project_overview.php, project_tasks.php,
financial_invoices.php, monitor_view.php
Scope: .mk-premium-page
========================================================= */
.mk-premium-page{
--mk-card-radius: 18px;
--mk-card-border: rgba(15,23,42,.08);
--mk-card-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.06);
--mk-card-shadow-hover: 0 1px 2px rgba(15,23,42,.06), 0 18px 44px rgba(15,23,42,.10);
--mk-muted: rgba(15,23,42,.58);
--mk-muted-2: rgba(15,23,42,.45);
--mk-bg: #F7F8FA;
}
.dark .mk-premium-page{
--mk-card-border: rgba(255,255,255,.10);
--mk-card-shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.40);
--mk-card-shadow-hover: 0 1px 2px rgba(0,0,0,.35), 0 26px 64px rgba(0,0,0,.55);
--mk-muted: rgba(248,250,252,.62);
--mk-muted-2: rgba(248,250,252,.45);
}
/* Page container feel (Plausible/Vemetric-ish) */
.mk-premium-page .max-w-7xl{
max-width: 1240px;
}
body{
}
/* Headings */
.mk-premium-page h1,
.mk-premium-page .text-2xl.font-semibold{
letter-spacing: -0.02em;
}
.mk-premium-page .text-slate-500,
.mk-premium-page .text-gray-500{
color: var(--mk-muted) !important;
}
/* Card material: convert TailAdmin-style cards to premium */
.mk-premium-page :where(.bg-white, .dark\:bg-slate-900){
border-color: var(--mk-card-border) !important;
}
.mk-premium-page :where(.shadow-sm, .shadow, .shadow-md){
box-shadow: var(--mk-card-shadow) !important;
}
.mk-premium-page :where(.rounded-2xl, .rounded-xl){
border-radius: var(--mk-card-radius) !important;
}
.mk-premium-page :where(.border-gray-200){
border-color: var(--mk-card-border) !important;
}
.mk-premium-page :where(.bg-white){
background: #fff !important;
}
.dark .mk-premium-page :where(.dark\:bg-slate-900){
background: rgba(2,6,23,.72) !important;
}
/* Hover lift on obvious cards */
.mk-premium-page :where(.rounded-2xl.border).hover\:shadow-md:hover,
.mk-premium-page :where(.rounded-2xl.border.shadow-sm):hover{
box-shadow: var(--mk-card-shadow-hover) !important;
transform: translateY(-1px);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Buttons */
.mk-premium-page :where(a,button).bg-primary,
.mk-premium-page :where(a,button).bg-blue-600{
border-radius: 14px !important;
}
.mk-premium-page :where(.btn, .pm-btn){
border-radius: 14px !important;
}
/* Inputs/selects: slightly tighter, premium */
.mk-premium-page :where(input,select,textarea){
border-radius: 14px !important;
}
.mk-premium-page :where(input,select,textarea):focus{
box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary, #337EF6) 18%, transparent) !important;
border-color: color-mix(in oklab, var(--primary, #337EF6) 35%, var(--mk-card-border)) !important;
}
/* Tables: clearer separators */
.mk-premium-page table{
border-collapse: separate;
border-spacing: 0;
}
.mk-premium-page thead th{
color: var(--mk-muted-2) !important;
font-weight: 650;
}
.mk-premium-page tbody tr:hover{
background: color-mix(in oklab, var(--primary, #337EF6) 5%, transparent) !important;
}
/* Tabs / pills used across PM & monitor views */
.mk-premium-page .inline-flex.rounded-xl,
.mk-premium-page .inline-flex.rounded-lg{
border-radius: 999px !important;
padding: 4px;
border: 1px solid var(--mk-card-border);
background: rgba(15,23,42,.02);
}
.dark .mk-premium-page .inline-flex.rounded-xl,
.dark .mk-premium-page .inline-flex.rounded-lg{
background: rgba(255,255,255,.04);
}
.mk-premium-page .inline-flex.rounded-xl a,
.mk-premium-page .inline-flex.rounded-lg a,
.mk-premium-page .inline-flex.rounded-xl button,
.mk-premium-page .inline-flex.rounded-lg button{
border-radius: 999px !important;
}
/* Dropdown menus/popovers (common TailAdmin patterns) */
.mk-premium-page :where(.dropdown-menu, .menu, .popper, .pm-popover, .pm-dd){
border: 1px solid var(--mk-card-border);
border-radius: 16px;
box-shadow: var(--mk-card-shadow-hover);
background: #fff;
}
.dark .mk-premium-page :where(.dropdown-menu, .menu, .popper, .pm-popover, .pm-dd){
background: rgba(2,6,23,.92);
}
/* Task page: make the built-in glassy action buttons less "milky" */
.mk-premium-page .pm-action-btn{
background: rgba(255,255,255,.85) !important;
backdrop-filter: none !important;
}
.dark .mk-premium-page .pm-action-btn{
background: rgba(2,6,23,.72) !important;
}
/* Optional modal styling for task form (if you later enable it) */
.mk-premium-page .mk-modal{
position: fixed;
inset: 0;
z-index: 60;
display: none;
}
.mk-premium-page .mk-modal.is-open{ display: block; }
.mk-premium-page .mk-modal__backdrop{
position:absolute; inset:0;
background: rgba(0,0,0,.28);
backdrop-filter: blur(8px);
}
.mk-premium-page .mk-modal__panel{
position: relative;
width: min(920px, calc(100% - 24px));
margin: 32px auto;
background: #fff;
border: 1px solid var(--mk-card-border);
border-radius: 20px;
box-shadow: var(--mk-card-shadow-hover);
overflow: hidden;
}
.dark .mk-premium-page .mk-modal__panel{
background: rgba(2,6,23,.92);
}
/* Smooth sidebar animation */
/* Sidebar animation + desktop sizing controlled by our own classes */
#appSidebar{
transition: transform 500ms cubic-bezier(0.22,1,0.36,1),
width 260ms cubic-bezier(0.22,1,0.36,1),
opacity 200ms ease;
will-change: transform, width, opacity;
}
/* Desktop widths (don’t rely on Tailwind md:w-*) */
@media (min-width: 768px){
#appSidebar{ width: 18rem !important; } /* default ~ w-72 */
#appSidebar.sb-wide{ width: 20rem !important; } /* ~ w-80 */
#appSidebar.sb-collapsed{ width: 5rem !important; } /* ~ w-20 */
/* “Hidden†(instead of md:hidden, so it can animate) */
#appSidebar.sb-hidden{
width: 0 !important;
opacity: 0 !important;
pointer-events: none;
overflow: hidden;
margin-left: 0 !important; /* you have md:ml-4 */
border-width: 0 !important; /* avoid tiny line */
}
}
/* =========================================================
Premium Analytics Layout V6 (Step B icons + card tabs styling)
Plausible-inspired 2-column architecture (layout only)
Scoped to .mk-ana-v6
========================================================= */
.mk-ana-v6{
--ana-border: rgba(15,23,42,.08);
--ana-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.06);
--ana-radius: 18px;
--ana-muted: rgba(15,23,42,.55);
--ana-text: #0f172a;
}
/* Make more visible above-the-fold */
.mk-ana-v6 .analytics-header{
margin-bottom: 10px !important;
}
.mk-ana-v6 .analytics-header h1{
letter-spacing: -.02em;
}
/* 2-column top grid: main chart + realtime */
.mk-ana-v6 .mk-ana-topgrid{
}
@media (max-width: 1024px){
.mk-ana-v6 .mk-ana-topgrid{ grid-template-columns: 1fr; }
}
/* Main chart card */
.mk-ana-v6 .mk-ana-mainchart{
}
/* Realtime stack on the right (override Tailwind cols) */
.mk-ana-v6 .mk-ana-realtime{
align-content:start;
}
.mk-ana-v6 .mk-ana-realtime > div{
border-radius: var(--ana-radius) !important;
border-color: var(--ana-border) !important;
box-shadow: var(--ana-shadow) !important;
}
/* Content 2x2 grid cards */
.mk-ana-v6 .mk-ana-grid2x2{
gap: 16px !important;
}
.mk-ana-v6 .mk-ana-grid2x2 > div{
border-radius: var(--ana-radius) !important;
border-color: var(--ana-border) !important;
box-shadow: var(--ana-shadow) !important;
}
/* Geographic map card */
.mk-ana-v6 .mk-ana-geo{
border-radius: var(--ana-radius) !important;
border-color: var(--ana-border) !important;
box-shadow: var(--ana-shadow) !important;
}
/* Subtle table hover like Plausible */
.mk-ana-v6 table tbody tr:hover{
background: rgba(15,23,42,.03);
}
.dark .mk-ana-v6 table tbody tr:hover{
background: rgba(255,255,255,.05);
}
/* Buttons / links inside analytics */
.mk-ana-v6 .mk-viewall-link{
font-weight: 600;
color: rgba(15,23,42,.68);
}
.dark .mk-ana-v6 .mk-viewall-link{
color: rgba(248,250,252,.72);
}
.mk-ana-v6 .mk-viewall-link:hover{
text-decoration: underline;
}
/* Hide top-level page tabs (Overview / Alert policy / Public view) – we keep URLs working */
.mk-ana-v6 nav[aria-label="Tabs"]{ display:none !important; }
/* Premium compact realtime card (replaces 3 large cards) */
.mk-ana-v6 .mk-rt-card{
border-radius: var(--ana-radius) !important;
border: 1px solid var(--ana-border) !important;
background: #fff;
box-shadow: var(--ana-shadow) !important;
padding: 10px 12px;
display:flex;
flex-direction:column;
gap: 10px;
}
.dark .mk-ana-v6 .mk-rt-card{
background: rgba(2,6,23,.88);
border-color: rgba(255,255,255,.10) !important;
}
.mk-ana-v6 .mk-rt-row{
display:flex;
align-items:flex-start;
gap:10px;
padding: 8px 6px;
border-radius: 14px;
}
.mk-ana-v6 .mk-rt-row + .mk-rt-row{
border-top: 1px solid rgba(15,23,42,.06);
}
.dark .mk-ana-v6 .mk-rt-row + .mk-rt-row{
border-top-color: rgba(255,255,255,.08);
}
.mk-ana-v6 .mk-rt-ic{
width:36px; height:36px;
border-radius: 12px;
display:flex; align-items:center; justify-content:center;
border: 1px solid rgba(15,23,42,.08);
background: rgba(15,23,42,.03);
flex: 0 0 auto;
}
.mk-ana-v6 .mk-rt-ic svg{ width:18px; height:18px; }
.dark .mk-ana-v6 .mk-rt-ic{
border-color: rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
}
.mk-ana-v6 .mk-rt-ic--blue{ color:#2563eb; background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.18); }
.mk-ana-v6 .mk-rt-ic--violet{ color:#7c3aed; background: rgba(124,58,237,.10); border-color: rgba(124,58,237,.18); }
.mk-ana-v6 .mk-rt-ic--green{ color:#059669; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); }
.mk-ana-v6 .mk-rt-main{ min-width:0; flex: 1 1 auto; }
.mk-ana-v6 .mk-rt-top{
display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.mk-ana-v6 .mk-rt-label{
font-size:12px; font-weight:650; letter-spacing:.02em;
color: rgba(15,23,42,.62);
}
.dark .mk-ana-v6 .mk-rt-label{ color: rgba(248,250,252,.64); }
.mk-ana-v6 .mk-rt-meta{
font-size:12px;
color: rgba(15,23,42,.45);
white-space:nowrap;
}
.dark .mk-ana-v6 .mk-rt-meta{ color: rgba(248,250,252,.46); }
.mk-ana-v6 .mk-rt-value{
margin-top: 2px;
font-size: 22px;
font-weight: 750;
letter-spacing: -.02em;
color: var(--ana-text);
}
.dark .mk-ana-v6 .mk-rt-value{ color: rgba(248,250,252,.95); }
.mk-ana-v6 .mk-rt-pills{
margin-top: 8px;
}
/* =========================================================
Step B: Premium in-card tabs + modal row icons
========================================================= */
/* In-card tab bars (MAP/COUNTRIES/REGIONS/CITIES etc.) */
.mk-ana-v6 .mk-card-tabs,
.mk-ana-v6 .mk-tabs,
.mk-ana-v6 .mk-subtabs,
.mk-ana-v6 .mk-geo-tabs{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.mk-ana-v6 .mk-card-tabs a,
.mk-ana-v6 .mk-card-tabs button,
.mk-ana-v6 .mk-tabs a,
.mk-ana-v6 .mk-tabs button,
.mk-ana-v6 .mk-subtabs a,
.mk-ana-v6 .mk-subtabs button,
.mk-ana-v6 .mk-geo-tabs a,
.mk-ana-v6 .mk-geo-tabs button{
appearance:none;
border:1px solid rgba(15,23,42,.10);
background: rgba(15,23,42,.02);
color: rgba(15,23,42,.70);
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 650;
line-height: 1;
transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.mk-ana-v6 .mk-card-tabs a:hover,
.mk-ana-v6 .mk-card-tabs button:hover,
.mk-ana-v6 .mk-tabs a:hover,
.mk-ana-v6 .mk-tabs button:hover{
background: rgba(15,23,42,.04);
border-color: rgba(15,23,42,.14);
}
.mk-ana-v6 .mk-card-tabs .active,
.mk-ana-v6 .mk-tabs .active,
.mk-ana-v6 .mk-subtabs .active,
.mk-ana-v6 .mk-geo-tabs .active,
.mk-ana-v6 .mk-card-tabs [aria-selected="true"],
.mk-ana-v6 .mk-tabs [aria-selected="true"]{
background: color-mix(in oklab, var(--primary, #337EF6) 12%, transparent);
border-color: color-mix(in oklab, var(--primary, #337EF6) 28%, rgba(15,23,42,.12));
color: #0f172a;
}
/* Modal: Plausible-like density + icon column */
.mk-ana-v6 #mkFullModal .mk-modal__card{
border-radius: 16px !important;
}
.mk-ana-v6 #mkFullModal .mk-modal__card table{
width:100%;
border-collapse: separate;
border-spacing: 0;
}
.mk-ana-v6 #mkFullModal thead th{
position: sticky;
top: 0;
background: rgba(255,255,255,.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1;
}
.dark.mk-ana-v6 #mkFullModal thead th,
.dark .mk-ana-v6 #mkFullModal thead th{
background: rgba(2,6,23,.88);
}
.mk-ana-v6 #mkFullModal tbody tr{
border-top: 1px solid rgba(15,23,42,.06);
}
.mk-ana-v6 #mkFullModal tbody tr:hover{
background: rgba(15,23,42,.03);
}
.dark .mk-ana-v6 #mkFullModal tbody tr:hover{
background: rgba(255,255,255,.06);
}
.mk-ana-v6 .mk-mrow{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.mk-ana-v6 .mk-mic{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.mk-ana-v6 .mk-favicon{
width:16px;
height:16px;
border-radius:4px;
display:block;
}
.mk-ana-v6 .mk-mlabel{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* Make modal search like Plausible */
.mk-ana-v6 #mkFullModal input[type="text"]{
border-radius: 12px !important;
border-color: rgba(15,23,42,.14) !important;
}
.mk-ana-v6 #mkFullModal input[type="text"]:focus{
outline:none !important;
box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary, #337EF6) 20%, transparent) !important;
border-color: color-mix(in oklab, var(--primary, #337EF6) 45%, rgba(15,23,42,.18)) !important;
}
/* =========================================================
Analytics Premium Hotfix (pre-Step C)
Fixes shown in screenshots: top page tabs, empty gaps,
realtime strip sizing, card density.
========================================================= */
/* Hide the legacy top tabs row (Overview / Alert policy / Public view) */
.mk-legacy-top-tabs,
.page-tabs,
.top-tabs,
nav[aria-label="page tabs"],
a[href*="alert_policy"],
a[href*="public_view"]{
/* keep links accessible elsewhere; just visually hide the row */
}
.mk-legacy-top-tabs,
.page-tabs,
.top-tabs{
display:none !important;
}
/* Compact the "Realtime" strip (Visitors/Pageviews/Online) wherever it appears */
.mk-realtime-strip,
.realtime-strip,
#realtimeStrip,
[data-realtime-strip]{
display:grid !important;
grid-template-columns: 1fr !important;
gap:10px !important;
}
.mk-realtime-strip .mk-card,
.realtime-strip .mk-card,
#realtimeStrip .mk-card,
[data-realtime-strip] .mk-card{
padding:12px 14px !important;
border-radius:16px !important;
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 30px rgba(15,23,42,.08) !important;
}
/* Prevent huge empty areas when switching inner tabs (Pages/User flow/etc) */
.mk-ana,
.mk-analytics,
.analytics-page,
[data-analytics]{
min-height: unset !important;
}
/* Make the main analytics layout always pack tightly */
.mk-ana .mk-grid,
.mk-analytics .mk-grid,
.analytics-page .mk-grid,
[data-analytics] .mk-grid{
align-items:start !important;
}
/* Modal polish (Plausible-like) */
.mk-modal, .mk-modal-panel, .modal-content{
border-radius:18px !important;
box-shadow: 0 10px 40px rgba(15,23,42,.18) !important;
}
.mk-modal-header, .modal-header{
position: sticky !important;
top: 0;
z-index: 2;
background: #fff !important;
border-bottom: 1px solid rgba(15,23,42,.08) !important;
}
/* Icon rows inside modals (referrers/browsers/etc) */
.mk-modal-list .row,
.modal-body .row,
.mk-modal-list li,
.modal-body li{
display:flex;
align-items:center;
gap:10px;
}
.mk-modal-list .row:hover,
.modal-body .row:hover,
.mk-modal-list li:hover,
.modal-body li:hover{
background: rgba(15,23,42,.03) !important;
}
.mk-modal-icon,
.row .favicon,
.row .icon,
li .favicon,
li .icon{
width:18px;
height:18px;
border-radius:4px;
flex:0 0 auto;
}
/* =============================================
Analytics Geo Step C - Premium Styling
============================================= */
.mk-geo-card {
border-radius: 18px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 40px rgba(15,23,42,.08);
padding: 18px;
}
.mk-geo-tabs {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.mk-geo-tabs button {
border: 1px solid rgba(15,23,42,.08);
background: #f8fafc;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
cursor: pointer;
transition: all .15s ease;
}
.mk-geo-tabs button.active {
background: #e0ecff;
border-color: #c7dbff;
}
.mk-geo-tabs button:hover {
background: #eef2f7;
}
/* =========================================================
Analytics Premium Layout Fix
- Prevents "everything pushed to the right"
- Forces consistent 2-column grid
- Fixes overflow inside row cards
========================================================= */
/* 1) Ensure page container can use full width and not be constrained oddly */
.mk-ana, .mk-analytics, .analytics-page, [data-analytics]{
width: 100% !important;
max-width: 100% !important;
}
/* 2) Main 2-column layout: left content + right sidebar */
.mk-ana .mk-main-grid,
.mk-analytics .mk-main-grid,
.analytics-page .mk-main-grid,
[data-analytics] .mk-main-grid{
display: grid !important;
grid-template-columns: minmax(0, 1fr) 420px !important;
gap: 18px !important;
align-items: start !important;
}
/* Responsive: stack */
@media (max-width: 1200px){
.mk-ana .mk-main-grid,
.mk-analytics .mk-main-grid,
.analytics-page .mk-main-grid,
[data-analytics] .mk-main-grid{
grid-template-columns: 1fr !important;
}
}
/* 3) Sections inside left column should not overflow and should be full width */
.mk-ana .mk-main-left,
.mk-analytics .mk-main-left,
.analytics-page .mk-main-left,
[data-analytics] .mk-main-left{
min-width: 0 !important;
}
.mk-ana .mk-main-right,
.mk-analytics .mk-main-right,
.analytics-page .mk-main-right,
[data-analytics] .mk-main-right{
min-width: 0 !important;
}
/* 4) Any "row of cards" should wrap nicely and not force horizontal scroll */
.mk-ana .mk-row,
.mk-analytics .mk-row,
.analytics-page .mk-row,
[data-analytics] .mk-row{
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 14px !important;
}
@media (max-width: 1400px){
.mk-ana .mk-row,
.mk-analytics .mk-row,
.analytics-page .mk-row,
[data-analytics] .mk-row{
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px){
.mk-ana .mk-row,
.mk-analytics .mk-row,
.analytics-page .mk-row,
[data-analytics] .mk-row{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px){
.mk-ana .mk-row,
.mk-analytics .mk-row,
.analytics-page .mk-row,
[data-analytics] .mk-row{
grid-template-columns: 1fr !important;
}
}
/* 5) Force cards to fill their grid cell (fixes skinny/right aligned cards) */
.mk-ana .mk-card,
.mk-analytics .mk-card,
.analytics-page .mk-card,
[data-analytics] .mk-card{
width: 100% !important;
max-width: 100% !important;
}
/* 6) Tables/lists: prevent overflow pushing layout */
.mk-ana table,
.mk-analytics table,
.analytics-page table,
[data-analytics] table{
width: 100% !important;
table-layout: fixed;
}
.mk-ana td, .mk-ana th,
.mk-analytics td, .mk-analytics th,
.analytics-page td, .analytics-page th,
[data-analytics] td, [data-analytics] th{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 7) Fix the little "Countries/Cities/Languages" cards that appear as narrow columns */
.mk-ana .mk-mini-grid,
.mk-analytics .mk-mini-grid,
.analytics-page .mk-mini-grid,
[data-analytics] .mk-mini-grid{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
}
@media (max-width: 1200px){
.mk-ana .mk-mini-grid,
.mk-analytics .mk-mini-grid,
.analytics-page .mk-mini-grid,
[data-analytics] .mk-mini-grid{
grid-template-columns: 1fr !important;
}
}
/* 8) Last-resort: kill accidental right-floating columns */
.mk-ana [style*="float:right"],
.mk-analytics [style*="float:right"],
.analytics-page [style*="float:right"],
[data-analytics] [style*="float:right"]{
float: none !important;
}
/* 9) Reduce accidental left margin/padding that shifts everything */
.mk-ana .container,
.mk-analytics .container,
.analytics-page .container,
[data-analytics] .container{
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
/* =========================================================
Premium Modal Scroll + ECharts Traffic sizing
========================================================= */
/* Traffic chart container for ECharts (replaces canvas) */
#trafficChart.mk-echart, #trafficChart{
width: 100%;
height: 360px;
}
@media (max-width: 640px){
#trafficChart.mk-echart, #trafficChart{ height: 260px; }
}
/* Modal: never exceed viewport; inner table scrolls */
.mk-modal__viewport{
padding: 16px !important;
display: flex;
align-items: center;
justify-content: center;
}
.mk-modal__card{
width: min(980px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 !important; /* we control padding inside */
}
.mk-modal__card > .px-5.py-4{
flex: 0 0 auto;
}
#mkFullModalSearch{
width: 100%;
}
.mk-modal__card .px-5.py-4.flex{
flex: 0 0 auto;
}
.mk-modal__card .table-scroll{
overflow: auto;
max-height: calc(100vh - 240px);
-webkit-overflow-scrolling: touch;
}
@media (max-width: 640px){
.mk-modal__card .table-scroll{
max-height: calc(100vh - 210px);
}
}
.mk-echart {
bottom: 15px;
}
/* =====================================================================
SaaS Premium skin (Linear-inspired)
- Keep everything inside brand.css (single-source custom styling)
- Works as an overlay on top of tailadmin.css
===================================================================== */
:root{
--mk-radius-lg: 14px;
--mk-radius-xl: 18px;
--mk-radius-2xl: 22px;
--mk-shadow-soft: 0 12px 30px rgba(15,23,42,.10);
--mk-shadow-soft-2: 0 18px 50px rgba(15,23,42,.12);
--mk-border: rgba(148,163,184,.22);
--mk-border-strong: rgba(148,163,184,.32);
--mk-surface: rgba(255,255,255,.78);
--mk-surface-strong: rgba(255,255,255,.92);
--mk-surface-dark: rgba(2,6,23,.58);
--mk-surface-dark-strong: rgba(2,6,23,.72);
--mk-text: #0f172a;
--mk-text-muted: #64748b;
}
/* App background (subtle grid + gradient like Linear) */
body{
background: radial-gradient(1200px 700px at 12% 10%, rgba(59,130,246,.22), transparent 60%), radial-gradient(900px 600px at 85% 8%, rgba(14,165,233,.16), transparent 55%), radial-gradient(900px 700px at 30% 90%, rgba(99,102,241,.10), transparent 55%), linear-gradient(180deg, #f6f8ff 0%, #eef3ff 100%)!important;
}
.dark body{
background:
radial-gradient(1200px 700px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
radial-gradient(900px 600px at 80% 10%, rgba(16,185,129,.14), transparent 55%),
linear-gradient(to bottom, rgba(2,6,23,1), rgba(2,6,23,.92));
}
/* Page spacing */
main{padding:18px;}
@media (min-width: 768px){ main{padding:26px;} }
/* Cards + panels */
.card,
.rounded-2xl.bg-white,
.rounded-2xl.bg-white\/95,
.rounded-2xl.bg-white\/90,
.bg-white.rounded-2xl,
.bg-white\/95.rounded-2xl,
.bg-white\/90.rounded-2xl{
border-radius: var(--mk-radius-2xl) !important;
border: 1px solid var(--mk-border) !important;
background: var(--mk-surface) !important;
backdrop-filter: blur(14px);
box-shadow: var(--mk-shadow-soft);
}
.dark .card,
.dark .rounded-2xl.bg-white,
.dark .rounded-2xl.bg-white\/95,
.dark .rounded-2xl.bg-white\/90,
.dark .bg-white.rounded-2xl,
.dark .bg-white\/95.rounded-2xl,
.dark .bg-white\/90.rounded-2xl{
background: var(--mk-surface-dark) !important;
border-color: rgba(148,163,184,.18) !important;
box-shadow: 0 18px 54px rgba(0,0,0,.35);
}
/* Buttons */
.btn, .btn-primary, .btn--primary, button, a.inline-flex{
border-radius: var(--mk-radius-lg);
}
.btn-primary, .btn--primary, .bg-primary, .bg-primary-600{
box-shadow: 0 12px 24px rgba(37,99,235,.20);
}
.btn-primary:hover, .btn--primary:hover{
box-shadow: 0 14px 30px rgba(37,99,235,.26);
}
/* Inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
select, textarea,
.input{
border-radius: var(--mk-radius-lg) !important;
border: 1px solid var(--mk-border-strong) !important;
background: rgba(255,255,255,.82);
}
.dark input[type="text"], .dark input[type="email"], .dark input[type="password"], .dark input[type="url"], .dark input[type="number"],
.dark select, .dark textarea,
.dark .input{
background: rgba(2,6,23,.52) !important;
border-color: rgba(148,163,184,.20) !important;
}
/* Sidebar + topbar tweaks (TailAdmin base) */
.app-topbar{
border-bottom: 1px solid rgba(148,163,184,.16) !important;
background: rgba(255,255,255,.72);
backdrop-filter: blur(14px);
}
.dark .app-topbar{ background: rgba(2,6,23,.58); }
/* Tables: consistent row hover + mobile safety */
.ta-table,
table.pl-table{ border-collapse: separate; border-spacing: 0; }
table.pl-table thead th,
.ta-table thead th{
background: rgba(148,163,184,.10) !important;
border-bottom: 1px solid rgba(148,163,184,.18) !important;
}
.dark table.pl-table thead th,
.dark .ta-table thead th{
background: rgba(30,41,59,.55) !important;
}
/* Make long strings safe everywhere */
td, th, .break-anywhere{ overflow-wrap:anywhere; word-break:break-word; }
/* =====================================================================
Plausible-like filter builder (UI)
===================================================================== */
.pl-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-filter-btn{
display:inline-flex;align-items:center;gap:10px;
border:1px solid rgba(148,163,184,.35);
background:rgba(255,255,255,.86);
padding:10px 12px;
border-radius:12px;
font-weight:700;font-size:14px;color:#0f172a;
}
.dark .pl-filter-btn{background:rgba(2,6,23,.45);border-color:rgba(148,163,184,.18);color:#f8fafc}
.pl-filter-pop{
position:absolute;top:calc(100% + 10px);right:0;
width:min(520px, calc(100vw - 24px));
background:#fff;border:1px solid rgba(148,163,184,.35);
border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.16);
padding:12px;z-index:2147483648;
}
.dark .pl-filter-pop{background:rgba(2,6,23,.92);border-color:rgba(148,163,184,.18)}
.pl-filter-row{display:grid;grid-template-columns: 1.1fr .8fr 1.6fr auto;gap:10px;align-items:center}
@media (max-width:640px){.pl-filter-row{grid-template-columns:1fr;}}
.pl-pill{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;border-radius:9999px;
border:1px solid rgba(148,163,184,.35);
background:rgba(255,255,255,.85);
font-weight:700;font-size:13px;color:#0f172a;
}
.dark .pl-pill{background:rgba(2,6,23,.52);border-color:rgba(148,163,184,.18);color:#f8fafc}
.pl-pill button{border:none;background:transparent;opacity:.7}
.pl-pill button:hover{opacity:1}
/* =====================================================================
(Merged) Premium SaaS polish layer (formerly premium.css)
===================================================================== */
/*
Premium SaaS polish layer
-------------------------
Goal: make the UI feel consistent across all pages (admin/auth/public) and
improve mobile usability without having to touch every template.
*/
:root{
--radius-xl: 18px;
--radius-2xl: 24px;
--shadow-soft: 0 12px 30px rgba(15,23,42,.08);
--shadow-soft-dark: 0 18px 44px rgba(0,0,0,.35);
--surface: rgba(255,255,255,.82);
--surface-strong: rgba(255,255,255,.94);
--surface-dark: rgba(2,6,23,.55);
--surface-dark-strong: rgba(2,6,23,.72);
--border-soft: rgba(148,163,184,.24);
--border-soft-dark: rgba(148,163,184,.22);
}
/* Consistent content width helper (useful for public pages too) */
.container-max{max-width: 1200px; margin-left:auto; margin-right:auto; width:100%;}
/* Card baseline */
.card{
border-radius: var(--radius-2xl);
border: 1px solid var(--border-soft);
background: var(--surface);
backdrop-filter: blur(14px);
box-shadow: var(--shadow-soft);
}
.dark .card{
background: var(--surface-dark);
border-color: var(--border-soft-dark);
box-shadow: var(--shadow-soft-dark);
}
.card--strong{ background: var(--surface-strong); }
.dark .card--strong{ background: var(--surface-dark-strong); }
/* Inputs */
.input{
width:100%;
border-radius: 14px;
border: 1px solid rgba(148,163,184,.35);
background: rgba(255,255,255,.80);
padding: 10px 14px;
outline: none;
transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.input:focus{ box-shadow: 0 0 0 4px rgba(59,130,246,.18); border-color: rgba(59,130,246,.55); }
.dark .input{
border-color: rgba(148,163,184,.22);
background: rgba(2,6,23,.55);
color: #f8fafc;
}
.dark .input:focus{ box-shadow: 0 0 0 4px rgba(59,130,246,.20); border-color: rgba(59,130,246,.55); }
/* Make tables safer on mobile by default */
.table-scroll{border-radius: 16px;}
.dark .table-scroll{border-color: rgba(148,163,184,.18);}
/* =========================================================
MK Admin Template (Unified Components)
Goal: one component system across Admin + Public Status
- Cards, grids, tabs, chart shells, typography
========================================================= */
:root{
/* Typography: drop in Lufga locally by adding font files later.
We keep a strong fallback stack. */
--mk-font: "Lufga", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
/* Radius & shadows */
--mk-r-lg: 24px;
--mk-r-md: 18px;
--mk-r-sm: 14px;
--mk-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 14px 34px rgba(15,23,42,.07);
--mk-shadow-md: 0 1px 2px rgba(15,23,42,.08), 0 22px 62px rgba(15,23,42,.12);
/* Surfaces */
--mk-card-bg: rgba(255,255,255,.92);
--mk-card-border: rgba(15,23,42,.08);
--mk-card-top: rgba(59,130,246,.10);
}
.dark{
--mk-card-bg: rgba(15,23,42,.74);
--mk-card-border: rgba(148,163,184,.18);
--mk-card-top: rgba(59,130,246,.18);
}
/* Force our font everywhere Tailwind uses font-sans */
body{ font-family: var(--mk-font); }
.font-sans{ font-family: var(--mk-font) !important; }
/* ---------- Card ---------- */
.mk-card{
position: relative;
border-radius: var(--mk-r-lg);
background: var(--mk-card-bg);
border: 1px solid var(--mk-card-border);
box-shadow: var(--mk-shadow-sm);
overflow: hidden;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mk-card:hover{
transform: translateY(-2px);
box-shadow: var(--mk-shadow-md);
border-color: rgba(15,23,42,.12);
}
.dark .mk-card:hover{ border-color: rgba(148,163,184,.24); }
.mk-card::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius: var(--mk-r-lg);
background: linear-gradient(180deg, var(--mk-card-top), transparent 42%);
opacity:.55;
}
.mk-card__inner{ position: relative; z-index: 1; padding: 18px; }
.mk-card__inner--compact{ padding: 14px; }
.mk-card__inner--p0{ padding: 0; }
.mk-card__head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 12px;
padding: 18px 18px 10px;
position:relative;
z-index: 1;
}
.mk-card__title{
font-size: 14px;
font-weight: 800;
letter-spacing: -0.015em;
color: rgba(15,23,42,.92);
}
.dark .mk-card__title{ color: rgba(248,250,252,.92); }
.mk-card__subtitle{
margin-top: 2px;
font-size: 12px;
font-weight: 600;
color: rgba(15,23,42,.55);
}
.dark .mk-card__subtitle{ color: rgba(248,250,252,.58); }
.mk-card__actions{ display:flex; align-items:center; gap: 8px; }
.mk-icon-btn{
width: 36px;
height: 36px;
border-radius: 14px;
display:inline-flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(15,23,42,.10);
background: rgba(255,255,255,.55);
box-shadow: 0 10px 20px rgba(15,23,42,.06);
transition: transform .15s ease, background .15s ease;
}
.mk-icon-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.72); }
.dark .mk-icon-btn{ border-color: rgba(148,163,184,.18); background: rgba(2,6,23,.22); box-shadow: 0 16px 40px rgba(0,0,0,.28); }
.dark .mk-icon-btn:hover{ background: rgba(2,6,23,.34); }
/* ---------- Grid helpers ---------- */
.mk-grid{ display:grid; gap: 16px; }
.mk-grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px){
.mk-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.mk-grid--4, .mk-grid--3, .mk-grid--2{ grid-template-columns: 1fr; }
}
/* ---------- Tabs (inside cards) ---------- */
.mk-tabs{
display:flex;
gap: 6px;
padding: 6px;
border-radius: 16px;
border: 1px solid rgba(15,23,42,.08);
background: rgba(255,255,255,.55);
box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.dark .mk-tabs{ border-color: rgba(148,163,184,.18); background: rgba(2,6,23,.22); box-shadow: 0 18px 48px rgba(0,0,0,.30); }
.mk-tab{
appearance:none;
border:0;
padding: 8px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: .01em;
color: rgba(15,23,42,.70);
background: transparent;
transition: transform .14s ease, background .14s ease, color .14s ease;
cursor:pointer;
}
.dark .mk-tab{ color: rgba(248,250,252,.72); }
.mk-tab[aria-selected="true"]{
background: linear-gradient(180deg, rgba(59,130,246,.22), rgba(59,130,246,.12));
color: rgba(15,23,42,.92);
}
.dark .mk-tab[aria-selected="true"]{ color: rgba(248,250,252,.94); background: linear-gradient(180deg, rgba(59,130,246,.28), rgba(59,130,246,.14)); }
.mk-tab:active{ transform: scale(.98); }
.mk-tabpanels{ position: relative; z-index: 1; }
.mk-tabpanel{ display:none; }
.mk-tabpanel.is-active{ display:block; }
/* ---------- Swetrix-like pill tabs (inside cards) ---------- */
.mk-pilltabs{
display:inline-flex;
align-items:center;
gap:4px;
padding:4px;
border-radius: 999px;
background: rgba(15,23,42,.06);
border: 1px solid rgba(15,23,42,.10);
}
.dark .mk-pilltabs{
background: rgba(2,6,23,.22);
border-color: rgba(148,163,184,.18);
}
.mk-pilltab{
appearance:none;
border:0;
background: transparent;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .01em;
color: rgba(15,23,42,.72);
cursor:pointer;
transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.dark .mk-pilltab{ color: rgba(226,232,240,.80); }
.mk-pilltab:hover{ background: rgba(15,23,42,.06); }
.dark .mk-pilltab:hover{ background: rgba(255,255,255,.06); }
.mk-pilltab.is-active,
.mk-pilltab[aria-selected="true"]{
background: rgba(255,255,255,.92);
color: rgba(15,23,42,.92);
box-shadow: 0 10px 24px rgba(2,6,23,.12);
}
.dark .mk-pilltab.is-active,
.dark .mk-pilltab[aria-selected="true"]{
background: rgba(15,23,42,.72);
color: rgba(226,232,240,.96);
box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
.mk-pilltab:active{ transform: scale(.98); }
/* ---------- Chart shell ---------- */
.mk-chart{ height: 260px; width: 100%; }
.mk-chart--sm{ height: 180px; }
.mk-chart--lg{ height: 340px; }
/* Tiny "spark" background overlay (like the mocks) */
.mk-spark-bg{
position:absolute;
inset:auto 0 0 0;
height: 44%;
opacity: .16;
pointer-events:none;
filter: blur(.2px);
}
/* =========================================================
Sidebar rebuild – aligned with analytics_view + PM hub
========================================================= */
.app-sidebar{
background: linear-gradient(180deg, rgba(247,250,255,.96) 0%, rgba(255,255,255,.92) 48%, rgba(248,250,252,.96) 100%) !important;
border: 1px solid rgba(148,163,184,.18) !important;
box-shadow: 0 24px 60px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.6) !important;
backdrop-filter: blur(24px) saturate(160%) !important;
-webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}
.dark .app-sidebar{
background: linear-gradient(180deg, rgba(9,14,28,.96) 0%, rgba(15,23,42,.94) 42%, rgba(2,6,23,.98) 100%) !important;
border-color: rgba(148,163,184,.14) !important;
box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.sb-shell-inner{padding:14px;display:flex;flex-direction:column;gap:14px;min-height:100%;}
.sb-brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 14px;border-bottom:1px solid rgba(148,163,184,.14);}
.dark .sb-brandbar{border-bottom-color:rgba(148,163,184,.12);}
.sb-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1;}
.sb-brandmark{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(16,185,129,.12), rgba(255,255,255,.95));border:1px solid rgba(96,165,250,.22);box-shadow:0 18px 34px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;flex:0 0 auto;}
.dark .sb-brandmark{background:linear-gradient(135deg, rgba(30,64,175,.44), rgba(15,23,42,.96));border-color:rgba(96,165,250,.22);box-shadow:0 18px 34px rgba(15,23,42,.38), inset 0 1px 0 rgba(255,255,255,.05);}
.sb-brandcopy{display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:all .25s ease;}
.sb-brandtitle{font-size:17px;font-weight:800;letter-spacing:-.03em;color:#0f172a;white-space:nowrap;}
.dark .sb-brandtitle{color:#f8fafc;}
.sb-brandmeta{font-size:12px;font-weight:600;letter-spacing:.01em;color:#64748b;white-space:nowrap;}
.dark .sb-brandmeta{color:rgba(148,163,184,.8);}
.sb-control{width:40px;height:40px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.74);border:1px solid rgba(148,163,184,.18);color:#334155;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:all .18s ease;}
.sb-control:hover{transform:translateY(-1px);background:#fff;box-shadow:0 14px 28px rgba(15,23,42,.1);}
.dark .sb-control{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.14);color:#e2e8f0;box-shadow:0 14px 28px rgba(0,0,0,.18);}
.dark .sb-control:hover{background:rgba(30,41,59,.92);}
.sb-spotlight{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.88), rgba(236,253,245,.8));border:1px solid rgba(148,163,184,.16);box-shadow:0 18px 36px rgba(15,23,42,.06);}
.dark .sb-spotlight{background:linear-gradient(135deg, rgba(30,41,59,.86), rgba(15,23,42,.96));border-color:rgba(148,163,184,.14);box-shadow:0 20px 40px rgba(0,0,0,.18);}
.sb-spotlight-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:#64748b;}
.sb-spotlight-title{margin-top:4px;font-size:16px;font-weight:800;letter-spacing:-.025em;color:#0f172a;line-height:1.2;}
.dark .sb-spotlight-title{color:#f8fafc;}
.sb-spotlight-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:rgba(37,99,235,.1);border:1px solid rgba(59,130,246,.14);color:#2563eb;font-size:12px;font-weight:800;letter-spacing:.02em;}
.dark .sb-spotlight-badge{background:rgba(37,99,235,.18);border-color:rgba(96,165,250,.18);color:#bfdbfe;}
.sb-nav{padding:0 !important;display:flex;flex-direction:column;gap:6px;}
.sb-section-title{padding:12px 8px 6px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#94a3b8;}
.dark .sb-section-title{color:rgba(148,163,184,.72);}
.sb-divider{height:1px;margin:10px 8px 2px;background:linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.02));}
.dark .sb-divider{background:linear-gradient(90deg, rgba(148,163,184,.14), rgba(148,163,184,0));}
.nav-item{position:relative;align-items:center;min-height:54px;padding:12px 13px !important;border-radius:20px;}
.sb-group-trigger{width:100%;justify-content:space-between;}
.sb-link-copy{display:flex;flex-direction:column;min-width:0;gap:2px;}
.sb-link-label{font-size:14px;font-weight:800;letter-spacing:-.015em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-link-meta{font-size:11px;font-weight:600;color:#64748b;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dark .sb-link-meta{color:rgba(148,163,184,.74);}
.nav-ic{width:40px;height:40px;border-radius:15px;}
.sb-caret{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:#64748b;transition:all .18s ease;flex:0 0 auto;}
.sb-caret svg{width:16px;height:16px;transition:transform .18s ease;}
.sb-caret.is-open svg{transform:rotate(180deg);}
.nav-item:hover .sb-caret{background:rgba(148,163,184,.1);color:#0f172a;}
.dark .nav-item:hover .sb-caret{background:rgba(148,163,184,.08);color:#f8fafc;}
.app-sidebar .sb-sub{margin:2px 0 10px 20px !important;padding:8px 0 4px 14px !important;border-left:1px solid rgba(148,163,184,.16) !important;display:flex;flex-direction:column;gap:6px;}
.app-sidebar .sb-sub .nav-item{min-height:44px;padding:9px 10px !important;border-radius:16px;}
.app-sidebar .sb-sub .nav-ic{width:32px;height:32px;border-radius:12px;background:rgba(255,255,255,.58) !important;border:1px solid rgba(148,163,184,.12) !important;box-shadow:none !important;}
.dark .app-sidebar .sb-sub .nav-ic{background:rgba(30,41,59,.7) !important;border-color:rgba(148,163,184,.12) !important;}
.app-sidebar .sb-sub .sb-link-meta{display:none;}
.sb-collapsed .sb-spotlight,
.sb-collapsed .sb-section-title,
.sb-collapsed .sb-divider,
.sb-collapsed .sb-link-copy,
.sb-collapsed .sb-caret,
.sb-collapsed .sb-sub,
.sb-collapsed .sb-brandmeta{display:none !important;}
.sb-collapsed .sb-brand{justify-content:center;}
.sb-collapsed .sb-brandbar{justify-content:center;padding-bottom:8px;}
.sb-collapsed .nav-item{justify-content:center;padding:10px !important;min-height:48px;}
.sb-collapsed .nav-ic{margin:0;}
@media (max-width: 767px){
.app-sidebar{width:min(88vw, 340px) !important;border-radius:0 28px 28px 0 !important;margin:0 !important;}
.sb-shell-inner{padding:16px 14px 20px;}
}
/* mk dual-tier sidebar isolation */
.mk-shell-sidebar, .mk-shell-sidebar *{--tw-ring-shadow:none;}
.mk-shell-sidebar{background:transparent!important;border:none!important;box-shadow:none!important;}
.mk-shell-sidebar .mk-dual-sidebar,
.mk-shell-sidebar .mk-dual-sidebar *{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;}
.mk-shell-sidebar .mk-dual-sidebar a,
.mk-shell-sidebar .mk-dual-sidebar button{box-shadow:none!important;}
.mk-shell-sidebar .mk-dual-sidebar .mk-rail-btn,
.mk-shell-sidebar .mk-dual-sidebar .mk-tier-toggle,
.mk-shell-sidebar .mk-dual-sidebar .mk-utility-btn,
.mk-shell-sidebar .mk-dual-sidebar .mk-sub-link{border-radius: 16px;}
.mk-shell-sidebar .mk-dual-sidebar .mk-sub-link{display:flex!important;border-radius: 16px;}
.mk-shell-sidebar .mk-dual-sidebar .mk-sub-copy{display:flex!important;flex-direction:column!important;}
.mk-shell-sidebar .mk-dual-sidebar .mk-sub-head,
.mk-shell-sidebar .mk-dual-sidebar .mk-tier-top-actions,
.mk-shell-sidebar .mk-dual-sidebar .mk-rail-nav,
.mk-shell-sidebar .mk-dual-sidebar .mk-rail-foot,
.mk-shell-sidebar .mk-dual-sidebar .mk-sub-list{display:flex!important;}
.mk-shell-sidebar .mk-dual-sidebar .mk-rail-btn::before,
.mk-shell-sidebar .mk-dual-sidebar .mk-rail-btn::after,
.mk-shell-sidebar .mk-dual-sidebar .mk-tier-toggle::before,
.mk-shell-sidebar .mk-dual-sidebar .mk-tier-toggle::after{content:none!important;}
.mk-brand-chip {margin-left: 10px;}
/* ============================================================
Centralized PHP-extracted UI helpers
============================================================ */
[x-cloak]{display:none!important;}
.mk-nav-indent{padding-left:56px!important;}
.mk-nav-icon-offset{margin-left:-40px!important;}
.mk-full-between{width:100%!important;justify-content:space-between!important;}
.mk-inline-flex{display:inline-flex!important;}
.mk-inline-flex-gap-8{display:inline-flex!important;align-items:center!important;gap:8px!important;}
.mk-chevron-icon{width:16px!important;height:16px!important;transition:transform .15s!important;}
.mk-submenu-wrap{margin-top:2px!important;margin-bottom:6px!important;overflow:hidden!important;}
.mk-chart-280{height:280px!important;}
.mk-agent-box{min-height:140px!important;overflow:auto!important;max-width:100%!important;box-sizing:border-box!important;}
.mk-hidden{display:none!important;}
.mk-svg-overflow-icon{overflow:visible!important;width:14px!important;}
.mk-min-w-240{min-width:240px!important;}
.mk-flex-wrap-gap-8{display:flex!important;gap:8px!important;flex-wrap:wrap!important;}
.mk-flex-wrap-gap-10{display:flex!important;gap:10px!important;flex-wrap:wrap!important;}
.mk-flex-gap-10-center-wrap{display:flex!important;gap:10px!important;align-items: end;flex-wrap:wrap!important;}
.mk-flex-between-gap-10-top{display:flex!important;justify-content:space-between!important;gap:10px!important;align-items:flex-start!important;}
.mk-flex-between-gap-16-top{display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:flex-start!important;margin-bottom:18px!important;}
.mk-flex-between-gap-16-center-wrap{display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:center!important;flex-wrap:wrap!important;}
.mk-flex-gap-12-end-wrap{display:flex!important;gap:12px!important;align-items:end!important;flex-wrap:wrap!important;}
.mk-flex-gap-10-center{display:flex!important;align-items:center!important;gap:10px!important;}
.mk-grid-gap-12{display:grid!important;gap:12px!important;}
.mk-grid-gap-14{display:grid!important;gap:14px!important;}
.mk-grid-2-gap-12{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
.mk-grid-gap-12-mt-14{display:grid!important;gap:12px!important;margin-top:14px!important;}
.mk-text-muted{color:#64748b!important;}
.mk-text-muted-12{font-size:12px!important;color:#64748b!important;}
.mk-text-muted-13{font-size:13px!important;color:#64748b!important;}
.mk-text-muted-13-mt-4{font-size:13px!important;color:#64748b!important;margin-top:4px!important;}
.mk-text-muted-13-mt-6{font-size:13px!important;color:#64748b!important;margin-top:6px!important;}
.mk-text-muted-nowrap{color:#64748b!important;white-space:nowrap!important;}
.mk-text-16{font-size:16px!important;}
.mk-font-900{font-weight:900!important;}
.mk-title-24{margin:6px 0 0!important;font-size:24px!important;font-weight:900!important;}
.mk-title-24-lg{margin:6px 0 18px!important;font-size:24px!important;font-weight:900!important;}
.mk-title-28-tight{margin:8px 0 12px!important;font-size:28px!important;font-weight:900!important;letter-spacing:-.04em!important;}
.mk-title-32{margin:6px 0 0!important;font-size:32px!important;font-weight:900!important;letter-spacing:-.04em!important;}
.mk-heading-18{font-weight:900!important;font-size:18px!important;}
.mk-card-note{margin:0 0 10px 0!important;color:#475569!important;font-size:13px!important;}
.mk-m0{margin:0!important;}
.mk-mb-10{margin:0 0 10px 0!important;}
.mk-mt-14{margin-top:14px!important;}
.mk-mt-18{margin-top:18px!important;}
.mk-plain-90{width:90px!important;}
.mk-plain-130{width:130px!important;}
.mk-color-white-78{color:rgba(255,255,255,.78)!important;}
.mk-color-input{height:48px!important;padding:8px!important;}
.mk-cursor-help{cursor:help!important;}
.mk-cursor-pointer{cursor:pointer!important;}
.mk-cursor-default{cursor:default!important;}
.mk-flex-1{flex:1!important;}
.mk-ml-30{margin-left:30px!important;}
.mk-unit-muted{font-size:12px!important;font-weight:800!important;color:#64748b!important;}
.mk-static-actions{position:static!important;background:none!important;padding-top:0!important;}
.mk-static-actions-no-margin{position:static!important;background:none!important;padding-top:0!important;margin-top:0!important;}
.mk-pre-muted{margin-top:10px!important;padding:10px!important;border-radius:12px!important;background:rgba(148,163,184,.08)!important;font-size:12px!important;white-space:pre-wrap!important;}
.mk-line-body{line-height:1.7!important;font-size:15px!important;}
.mk-soft-pill{background:rgba(15,23,42,.06)!important;color:#475569!important;}
.mk-padded-note{padding:12px 14px!important;font-size:12px!important;font-weight:800!important;color:#475569!important;}
.mk-comment-date{font-size:12px!important;color:#64748b!important;}
.mk-time-mini{font-size:11px!important;font-weight:700!important;opacity:.9!important;}
.mk-overflow-wrap-anywhere{overflow-wrap:anywhere!important;}
.mk-dyn-width{width:var(--mk-width)!important;}
.mk-dyn-height{height:var(--mk-height)!important;}
.mk-dyn-min-height{min-height:var(--mk-min-height)!important;}
.mk-dyn-max-width{max-width:var(--mk-max-width)!important;}
.mk-dyn-display{display:var(--mk-display)!important;}
.mk-dyn-bg{background:var(--mk-bg)!important;}
.mk-dyn-fg{color:var(--mk-fg)!important;}
.mk-dyn-border{border-color:var(--mk-border)!important;}
.mk-color-dot{background:var(--mk-color)!important;}
.mk-color-pill{background:var(--mk-bg)!important;color:var(--mk-color)!important;border-color:var(--mk-border, var(--mk-bg))!important;}
.mk-color-chip{background:var(--mk-bg)!important;color:var(--mk-color)!important;}
.mk-color-text{color:var(--mk-color)!important;}
.mk-color-line-through{color:#64748b!important;text-decoration:line-through!important;}
.mk-rotate-180{transform:rotate(180deg)!important;}
.mk-rotate-0{transform:rotate(0deg)!important;}
:root{--sat:env(safe-area-inset-top,0px);--mk-shell-width:330px;--mk-brand-primary:#3B82F6;--mk-brand-primary-600:#2563EB;--mk-brand-primary-700:#1D4ED8;--mk-brand-secondary:#10B981;--mk-dual-bg:#0b1020;--mk-dual-panel:linear-gradient(180deg, rgba(12,18,33,.84) 0%, rgba(8,13,28,.80) 52%, rgba(5,9,20,.78) 100%);--mk-dual-border:rgba(148,163,184,.14);--mk-dual-text:#edf2fb;--mk-dual-muted:#94a3b8;--mk-dual-soft:rgba(148,163,184,.10);--mk-dual-rail:linear-gradient(180deg, rgba(4,8,18,.98) 0%, rgba(3,7,15,.97) 52%, rgba(2,5,12,.98) 100%);--mk-dual-shadow:0 22px 60px rgba(2,6,23,.35)}
.dark{--mk-dual-bg:#060914;--mk-dual-panel:linear-gradient(180deg, rgba(13,19,36,.80) 0%, rgba(9,14,29,.76) 54%, rgba(5,9,20,.74) 100%);--mk-dual-border:rgba(148,163,184,.13);--mk-dual-text:#f3f6fc;--mk-dual-muted:#8f9bb3;--mk-dual-soft:rgba(148,163,184,.09);--mk-dual-rail:linear-gradient(180deg, rgba(3,7,16,.985) 0%, rgba(3,6,13,.985) 52%, rgba(1,4,10,.99) 100%);--mk-dual-shadow:0 26px 90px rgba(2,6,23,.58)}
#ios-safe-area{position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--primary,var(--mk-brand-primary));z-index:2147483647;pointer-events:none}
body.mk-safe-area{padding-top:var(--sat)}
@media (min-width:769px){body.mk-safe-area{padding-top:0!important}#ios-safe-area{display:none!important;height:0!important}}
.app-sidebar{top:var(--sat,0px);height:calc(100dvh - var(--sat,0px))}
/* removed conflicting desktop sidebar override */
.public-shell{min-height:100dvh}.mk-auth-safe{padding-top:var(--sat)}
@media (min-width:769px){.mk-auth-safe{padding-top:0!important}}
#mkFullModal td,#mkFullModal th{overflow-wrap:anywhere!important}
html.mk-admin-font,html.mk-admin-font body,html.mk-admin-font body *,html.mk-admin-font button,html.mk-admin-font input,html.mk-admin-font select,html.mk-admin-font textarea{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
/* ===== Extracted from layout_auth_top.php ===== */
#ios-safe-area{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#3B82F6;z-index:1000;pointer-events:none;}
@media (min-width: 769px){#ios-safe-area{display:none!important;height:0!important;}}
/* ===== Extracted from layout_auth_top.php ===== */
[x-cloak]{display:none!important}
/* ===== Extracted from layout_public_top.php ===== */
:root { --sat: env(safe-area-inset-top, 0px); }
body { padding-top: var(--sat); }
/* Let brand.css control the full-page background (light/dark), including PWA standalone. */
.public-shell{min-height:100vh;background:transparent;}
#ios-safe-area {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--sat);
background: #071a3a;
z-index: 50;
pointer-events: none;
}
/* Desktop: never show the safe-area paint bar and don't offset content */
@media (min-width: 769px) {
body { padding-top: 0 !important; }
#ios-safe-area { display: none !important; height: 0 !important; }
}
/* ===== Extracted from layout_top.php ===== */
/* Ensure mobile fixed sidebar starts below iOS statusbar/safe-area */
.app-sidebar{
top: var(--sat, 0px);
height: calc(100dvh - var(--sat, 0px));
}
@media (min-width: 768px){
.app-sidebar{
top: auto;
height: auto;
}
}
/* ===== Extracted from layout_top.php ===== */
[x-cloak] { display: none !important; }
/* Safe-area handling (iOS Safari + iOS PWA + Android PWA) */
:root { --sat: env(safe-area-inset-top, 0px); }
body { padding-top: var(--sat); }
/* Ensure iOS status bar / safe-area is always our brand blue (works in Safari + standalone). */
#ios-safe-area {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--sat);
/* Primary (Tailwind blue-600). */
background: #2563eb;
/* Sit above everything (incl. sidebar) so the paint covers the iOS status bar area. */
z-index: 2147483647;
pointer-events: none;
}
/* Desktop: never show the safe-area paint bar and don't offset content */
@media (min-width: 769px) {
body { padding-top: 0 !important; }
#ios-safe-area { display: none !important; height: 0 !important; }
}
/* ===== Extracted from public_seo.php ===== */
footer{display:none;}
/* ===== Extracted from public_seo.php ===== */
/* Keep identical styling to the backend SEO report view (admin/seo_report_view.php) */
.seo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.seo-name{font-size:22px;font-weight:700;line-height:1.1}
.seo-url{color:var(--tw-prose-links,#3B82F6);word-break:break-all}
.seo-meta{font-size:12px;color:rgb(107 114 128)}
.dark .seo-meta{color:rgb(148 163 184)}
.seo-layout{display:grid;grid-template-columns: 1fr;gap:16px}
@media (max-width: 640px){
.seo-score-card{flex-direction:column;align-items:flex-start}
.seo-score-left{flex-direction:column;align-items:flex-start;gap:14px}
.seo-shot{width:100%;max-width:360px;margin-top:10px}
}
.seo-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 10px;border-bottom:1px solid rgba(148,163,184,.25);background:rgba(148,163,184,.06)}
.dark .seo-tabs{background:rgba(148,163,184,.08);border-bottom-color:rgba(148,163,184,.2)}
.seo-tab{padding:10px 12px;font-weight:800;font-size:13px;cursor:pointer;border:1px solid rgba(148,163,184,.22);border-radius:14px;display:flex;align-items:center;gap:8px;user-select:none;transition:background .15s,border-color .15s,color .15s}
.seo-tab:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35)}
.dark .seo-tab:hover{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35)}
.seo-tab.is-active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45);color:rgb(59 130 246)}
.dark .seo-tab.is-active{background:rgba(59,130,246,.18)}
.seo-tab-ic{display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.seo-tab-ic svg{width:16px;height:16px;display:block}
.seo-tab .badge{padding:4px 8px;font-size:11px}
.seo-panel{display:none}
.seo-panel.is-active{display:block}
.seo-ic{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:999px;font-size:13px;font-weight:800}
.seo-ic-pass{background:rgba(34,197,94,.15);color:rgb(34 197 94)}
.seo-ic-fail{background:rgba(239,68,68,.15);color:rgb(239 68 68)}
.seo-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(148,163,184,.2)}
.seo-item:last-child{border-bottom:0}
.seo-item h4{font-weight:700}
.seo-item p{margin-top:2px;font-size:13px;color:rgb(75 85 99)}
.dark .seo-item p{color:rgb(148 163 184)}
.seo-details{margin-top:8px}
.seo-details-sum{cursor:pointer;font-size:12px;font-weight:600;color:rgb(59 130 246)}
.dark .seo-details-sum{color:rgb(147 197 253)}
.seo-kv{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-top:1px dashed rgba(148,163,184,.25)}
.seo-k{min-width:110px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:rgb(107 114 128)}
.dark .seo-k{color:rgb(148 163 184)}
.seo-v{font-size:12px;color:rgb(31 41 55);word-break:break-word}
.dark .seo-v{color:rgb(226 232 240)}
.seo-sec{margin-top:14px}
.seo-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.seo-sec-title{display:flex;align-items:center;gap:10px;font-weight:800}
.seo-sec-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgb(107 114 128)}
.dark .seo-sec-pill{color:rgb(148 163 184)}
.seo-sec-card{border:1px solid rgba(148,163,184,.25);border-radius:16px;overflow:hidden}
.dark .seo-sec-card{border-color:rgba(148,163,184,.2)}
.seo-metric{position:relative;padding-left:14px}
.seo-metric:before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:4px;border-radius:999px;opacity:.95}
.seo-metric-ok:before{background:#22c55e}
.seo-metric-warn:before{background:#f59e0b}
.seo-metric-down:before{background:#ef4444}
.seo-donut{width:180px;height:180px}
.seo-donut text{font-weight:900;font-size:24px;fill:currentColor}
.seo-donut .sub{font-weight:700;font-size:12px;opacity:.75}
.seo-score-ok{color:#15803d}
.seo-score-warn{color:#b45309}
.seo-score-down{color:#b91c1c}
.dark .seo-score-ok{color:#86efac}
.dark .seo-score-warn{color:#fdba74}
.dark .seo-score-down{color:#fca5a5}
main :where(.bg-white.rounded-2xl),
main :where(.bg-white.rounded-xl){
box-shadow: var(--shadow-soft);
border-color: rgba(15,23,42,.08) !important;
}
.dark main :where(.dark\:bg-slate-900),
.dark main :where(.dark\:bg-slate-950){
box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
/* ===== Extracted from status.php ===== */
[x-cloak] { display: none !important; }
#ios-safe-area{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#3B82F6;z-index:1000;pointer-events:none;}
@media (min-width: 769px){#ios-safe-area{display:none!important;height:0!important;}}
.pulse { position: relative; }
.pulse:after { content:''; position:absolute; inset:-4px; border-radius:9999px; opacity:.35; animation:pulse 1.5s infinite; border:2px solid currentColor; }
@keyframes pulse { 0%{transform:scale(1); opacity:.35;} 70%{transform:scale(1.6); opacity:0;} 100%{transform:scale(1.6); opacity:0;} }
/* ===== Extracted from admin/server_view.php ===== */
.sv-shell{display:grid;gap:0}
.sv-hero{position:relative;overflow:hidden;border-radius:28px;padding:28px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 55%,rgba(255,255,255,.94));box-shadow:0 24px 70px rgba(15,23,42,.08)}
.dark .sv-hero{background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(16,185,129,.10) 55%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.sv-hero-grid{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.sv-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:800;font-size:13px}
.dark .sv-chip{background:rgba(59,130,246,.18);color:#bfdbfe}
.sv-hero-title{font-size:34px;line-height:1.05;font-weight:900;letter-spacing:-.04em}
.sv-muted{font-size:15px;line-height:1.7;color:#64748b}
.dark .sv-muted{color:#94a3b8}
.sv-actions{display:flex;flex-wrap:wrap;gap:12px}
.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 18px;border-radius:16px;font-weight:800;text-decoration:none}
.sv-btn-secondary{background:rgba(255,255,255,.86);color:#0f172a;border:1px solid rgba(148,163,184,.18);box-shadow:0 10px 24px rgba(15,23,42,.05)}
.dark .sv-btn-secondary{background:rgba(15,23,42,.76);color:#e2e8f0;border-color:rgba(148,163,184,.16)}
.sv-tabbar{padding:14px 16px;border-radius:22px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.76);box-shadow:0 14px 34px rgba(15,23,42,.05);backdrop-filter:blur(14px)}
.dark .sv-tabbar{background:rgba(15,23,42,.72);border-color:rgba(148,163,184,.14)}
.stat-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:3px;}
.stat-dot--ok{background:#22c55e}
.stat-dot--warn{background:#f59e0b}
.stat-dot--bad{background:#ef4444}
.disk-ico{width:32px;height:32px;flex:none}
.diskbar{height:10px;background:rgba(148,163,184,.25);border-radius:999px;overflow:hidden}
.diskbar__fill{height:10px;border-radius:999px}
.diskbar__fill--ok{background:#22c55e}
.diskbar__fill--warn{background:#f59e0b}
.diskbar__fill--crit{background:#ef4444}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:999px;vertical-align:middle}
.status-dot--ok{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulseOk 1.4s infinite}
.status-dot--warn{background:#f59e0b}
.status-dot--bad{background:#ef4444}
@keyframes pulseOk{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.surface-card{border-radius:24px;background:rgba(255,255,255,.92);border:1px solid rgba(148,163,184,.18);box-shadow:0 14px 34px rgba(15,23,42,.06);backdrop-filter:blur(10px)}
.dark .surface-card{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)}
.pill-tabs{display:flex;flex-wrap:nowrap!important;gap:.65rem;align-items:center}
.pill-tab{display:inline-flex;align-items:center;gap:8px;padding:.72rem .98rem;border-radius:999px;border:1px solid rgba(148,163,184,.22);font-size:.875rem;font-weight:700;background:rgba(248,250,252,.85);color:#475569;transition:.2s ease}
.pill-tab:hover{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.20);color:#1d4ed8;transform:translateY(-1px)}
.pill-tab.is-active{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.34);color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)}
.dark .pill-tab{background:rgba(2,6,23,.42);color:#cbd5e1;border-color:rgba(148,163,184,.14)}
.dark .pill-tab:hover{background:rgba(37,99,235,.16);border-color:rgba(59,130,246,.28);color:#dbeafe}
.dark .pill-tab.is-active{background:rgba(59,130,246,.18);border-color:rgba(96,165,250,.30);color:#dbeafe}
.surface-card .font-semibold{letter-spacing:-.02em}
.surface-card table thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;font-weight:800}
.dark .surface-card table thead th{color:#94a3b8}
.surface-card table tbody tr{transition:background .18s ease}
.surface-card table tbody tr:hover{background:rgba(37,99,235,.045)}
.dark .surface-card table tbody tr:hover{background:rgba(59,130,246,.10)}
#tab_overview > .surface-card:first-child{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92))}
.dark #tab_overview > .surface-card:first-child{background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.84))}
#tab_overview > .surface-card:first-child::after{content:"";position:absolute;inset:auto -30px -60px auto;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(59,130,246,.18),rgba(59,130,246,0) 68%);pointer-events:none}
.table-scroll::-webkit-scrollbar{height:10px;width:10px}
.table-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:999px}
.dark .table-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.24)}
@media (max-width:900px){.sv-hero{padding:22px;border-radius:24px}.sv-hero-title{font-size:28px}.sv-tabbar{padding:12px 12px 10px}}
@media (min-width:1024px){ .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));} .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:768px){
main,.app-main,.app-content,.content,.content-shell,.page-content,.page-shell,.sv-shell{min-width:0;max-width:100%;overflow-x:hidden}
.sv-shell > *,.sv-hero,.sv-tabbar,.surface-card{min-width:0;max-width:100%}
.pill-tabs{overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pill-tabs::-webkit-scrollbar{height:6px}
.min-w-\[220px\]{min-width:0!important;width:100%!important}
.w-40{width:auto!important;flex:1 1 auto}
.truncate{max-width:100%}
}
.apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-tooltip.apexcharts-theme-dark{
background: rgba(17,24,39,.92) !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: 0 25px 70px rgba(0,0,0,.35) !important;
border-radius: 14px !important;
padding: 10px 12px !important;
color: #fff !important;
backdrop-filter: blur(10px);
}
.apexcharts-tooltip-title{
background: transparent !important;
border-bottom: 0 !important;
color: rgba(255,255,255,.92) !important;
font-weight: 600 !important;
margin: -12px -12px 6px -12px !important;
padding: 10px!important;
font-size: 14px!important;
}
/* ===== Extracted from admin/index.php ===== */
.pm-lite-hero{position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 58%,rgba(255,255,255,.94));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.pm-lite-hero::before{content:'';position:absolute;inset:auto -10% -45% auto;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle,rgba(37,99,235,.18),transparent 70%);pointer-events:none}
.pm-lite-hero::after{content:'';position:absolute;inset:-35% auto auto -8%;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(16,185,129,.12),transparent 72%);pointer-events:none}
.pm-lite-hero__row{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pm-lite-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(148,163,184,.16);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#2563eb;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.pm-lite-hero__title{margin:12px 0 8px;font-size:30px;line-height:1.05;font-weight:900;letter-spacing:-.03em;color:#0f172a}
.pm-lite-hero__desc{max-width:760px;font-size:14px;line-height:1.7;color:#475569}
.pm-lite-hero__stats{display:flex;gap:12px;flex-wrap:wrap}
.pm-lite-hero__stat{min-width:120px;padding:14px 16px;border-radius:20px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.72);backdrop-filter:blur(10px);box-shadow:0 16px 32px rgba(15,23,42,.06)}
.pm-lite-hero__stat-label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.pm-lite-hero__stat-value{display:block;margin-top:6px;font-size:24px;font-weight:900;line-height:1;color:#0f172a}
.mk-live-card{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(226,232,240,.9);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96));box-shadow:0 18px 46px rgba(15,23,42,.08)}
.mk-live-card::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,rgba(37,99,235,.32),rgba(16,185,129,.16),transparent)}
.live-select{border-radius:14px;border:1px solid rgba(203,213,225,.95);background:rgba(255,255,255,.92);padding: .62rem .95rem!important;font-size:.875rem;font-weight:700;line-height: 20px!important;width: min-content!important;color:#0f172a;box-shadow: 0 10px 24px rgba(15,23,42,.04)!important;}
.live-mode-group{display:inline-flex;align-items:center;gap:6px;padding:5px;border-radius:16px;border:1px solid rgba(203,213,225,.92);background:rgba(255,255,255,.88);box-shadow:0 10px 24px rgba(15,23,42,.04)}
.liveChartMode{border-radius:12px !important;padding:.68rem .95rem !important;font-size:.84rem !important;font-weight:800 !important;line-height:1 !important;border:1px solid transparent !important;transition:all .18s ease;color:#475569;background:transparent}
.liveChartMode.is-active{background:rgba(37,99,235,.12) !important;color:#2563eb !important;border-color:rgba(37,99,235,.18) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.liveChartMode:not(.is-active):hover{background:rgba(37,99,235,.06) !important;color:#1d4ed8 !important}
.live-metric{border-radius:20px;border:1px solid rgba(226,232,240,.85);background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,250,252,.9));box-shadow:0 14px 32px rgba(15,23,42,.06)}
.dark .pm-lite-hero{border-color:rgba(51,65,85,.7);background:linear-gradient(135deg,rgba(30,41,59,.96),rgba(15,23,42,.98) 58%,rgba(15,23,42,.98));box-shadow:0 24px 70px rgba(2,6,23,.42)}
.dark .pm-lite-hero__eyebrow,.dark .pm-lite-hero__stat{background:rgba(15,23,42,.62);border-color:rgba(71,85,105,.55);box-shadow:none}
.dark .pm-lite-hero__title{color:#f8fafc}
.dark .pm-lite-hero__desc,.dark .pm-lite-hero__stat-label{color:#94a3b8}
.dark .pm-lite-hero__stat-value{color:#fff}
.dark .mk-live-card,.dark .live-metric{border-color:rgba(51,65,85,.75);background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(2,6,23,.9));box-shadow:0 18px 46px rgba(2,6,23,.4)}
.dark .live-select,.dark .live-mode-group{border-color:rgba(71,85,105,.7);background:rgba(15,23,42,.82);color:#e2e8f0;box-shadow:none}
.dark .liveChartMode{color:#94a3b8}
.dark .liveChartMode.is-active{background:rgba(37,99,235,.22) !important;color:#dbeafe !important;border-color:rgba(59,130,246,.24) !important}
.dark .liveChartMode:not(.is-active):hover{background:rgba(37,99,235,.12) !important;color:#dbeafe !important}
/* Mobile: allow horizontal scroll for the live traffic control row so tabs don't get cut off */
@media (max-width: 768px) {
.pm-lite-hero{padding:20px 18px 18px;border-radius:22px}
.pm-lite-hero__title{font-size:24px}
.pm-lite-hero__stats{width:100%}
.pm-lite-hero__stat{flex:1 1 140px}
.live-controls {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
margin-bottom: -4px;
}
.live-controls::-webkit-scrollbar { display: none; }
.live-controls > * {flex: 0 0 auto;}
}
/* ===== Extracted from admin/project_pm_projects.php ===== */
.pm-shell{display:grid;gap:22px}
.pm-hero{position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(135deg,rgba(37,99,235,.96),rgba(99,102,241,.92) 45%,rgba(168,85,247,.88));box-shadow:0 26px 70px rgba(37,99,235,.22);color:#fff}
.pm-hero:before{content:"";position:absolute;inset:auto -10% -35% auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%)}
.pm-hero:after{content:"";position:absolute;inset:-20% auto auto -8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 64%)}
.pm-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;align-items:end}
.pm-hero h1{margin:8px 0 6px;font-size:30px;line-height:1.05;font-weight:950;letter-spacing:-.03em}
.pm-hero p{margin:0;max-width:720px;color:rgba(255,255,255,.86);font-size:14px;line-height:1.55}
.pm-pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pm-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-self:start}
.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:14px;font-weight:800;text-decoration:none;transition:.2s ease}
.pm-btn:hover{transform:translateY(-1px)}
.pm-btn-primary{background:#fff;color:#1e3a8a;}
.pm-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
.dark .pm-btn-secondary{color:#fff}
.pm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.pm-kpi{position:relative;z-index:1;border-radius:22px;padding:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.pm-kpi-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.pm-kpi-value{margin-top:8px;font-size:30px;line-height:1;font-weight:950;letter-spacing:-.05em}
.pm-kpi-note{margin-top:8px;font-size:13px;color:rgba(255,255,255,.78)}
.pm-card{border-radius:28px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.94);box-shadow:0 18px 44px rgba(15,23,42,.06)}
.dark .pm-card{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)}
.pm-section{padding:24px}
.pm-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);gap:22px}
.pm-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.pm-section-title{margin:6px 0 0;font-size:26px;font-weight:950;letter-spacing:-.04em;color:#0f172a}.dark .pm-section-title{color:#f8fafc}
.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.pm-list{display:grid;gap:14px}
.pm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(248,250,252,.92),rgba(255,255,255,.96));border:1px solid rgba(148,163,184,.14);align-items:center}
.dark .pm-row{background:linear-gradient(180deg,rgba(2,6,23,.38),rgba(15,23,42,.55))}
.pm-row-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-status{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:rgba(99,102,241,.10);color:#4f46e5;font-size:12px;font-weight:800;text-transform:capitalize}
.pm-meta{display:flex;gap:12px;flex-wrap:wrap;color:#64748b;font-size:13px;margin-top:6px}
.pm-client{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(15,23,42,.05);font-size:12px;font-weight:700;color:#334155}.dark .pm-client{background:rgba(255,255,255,.06);color:#cbd5e1}
.pm-progress-wrap{margin-top:14px}
.pm-progress-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}
.pm-progress-track{width:320px;max-width:100%;height:10px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,23,42,.06)}
.pm-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e 0%,#38bdf8 42%,#6366f1 72%,#a855f7 100%)}
.pm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pm-btn-ghost{background:rgba(255,255,255,.9);color:#0f172a;border:1px solid rgba(148,163,184,.18)}.dark .pm-btn-ghost{background:rgba(15,23,42,.76);color:#e2e8f0}
.pm-input,.pm-select,.pm-textarea{width:100%;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.9);padding:12px 14px}.dark .pm-input,.dark .pm-select,.dark .pm-textarea{background:rgba(2,6,23,.45);border-color:rgba(148,163,184,.15);color:#e2e8f0}
.pm-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pm-form-grid-full{grid-column:1/-1}
.pm-datewrap{display:flex;align-items:center;gap:8px}.pm-datewrap .pm-input{flex:1}.pm-date-btn{width:44px;min-width:44px;padding:0;border-radius:14px}
.pm-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pm-check{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(248,250,252,.72)}
.pm-helper{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5}
@media (max-width:1200px){.pm-grid,.pm-hero-grid{grid-template-columns:1fr}.pm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-hero-actions{justify-content:flex-start}}
@media (max-width:760px){.pm-kpis,.pm-checkgrid,.pm-form-grid{grid-template-columns:1fr}.pm-row{grid-template-columns:1fr}.pm-actions{justify-content:flex-start}.pm-hero{padding:22px}.pm-hero h1{font-size:32px}}
/* ===== Extracted from admin/project_pm_modules.php ===== */
.pm-shell{display:grid;gap:20px}.pm-card{border-radius:24px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.92);box-shadow:0 18px 44px rgba(15,23,42,.06)}.dark .pm-card{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)} .pm-section{padding:22px}.pm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.pm-row{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(248,250,252,.85);border:1px solid rgba(148,163,184,.14);align-items:center}.dark .pm-row{background:rgba(2,6,23,.4)}.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:14px;font-weight:800;text-decoration:none}.pm-btn-primary{background:var(--primary);color:#fff}.pm-btn-secondary{background:rgba(255,255,255,.9);color:#0f172a;border:1px solid rgba(148,163,184,.18)} .dark .pm-btn-secondary{background:rgba(15,23,42,.76);color:#e2e8f0}.pm-input,.pm-select,.pm-textarea{width:100%;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.9);padding:12px 14px}.dark .pm-input,.dark .pm-select,.dark .pm-textarea{background:rgba(2,6,23,.45);border-color:rgba(148,163,184,.15);color:#e2e8f0}.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.pm-dot{display:inline-block;width:12px;height:12px;border-radius:999px}
@media (max-width:1100px){.pm-grid{grid-template-columns:1fr}}
/* ===== Extracted from admin/analytics_settings.php ===== */
:root{--ax-bg:#eff4fb;--ax-panel:#ffffff;--ax-panel2:#f8fbff;--ax-text:#0f172a;--ax-muted:#64748b;--ax-line:rgba(148,163,184,.24);--ax-chip:#eef4ff}html.dark{--ax-bg:#04101f;--ax-panel:#071425;--ax-panel2:#0a1930;--ax-text:#eef5ff;--ax-muted:#91a4c3;--ax-line:rgba(148,163,184,.22);--ax-chip:#0f223d}body{background:var(--ax-bg)}
.ax-page,.ax-page *{box-sizing:border-box}.ax-page{font-family:"Inter",-apple-system,system-ui,sans-serif;margin:0 auto;padding:16px}.ax-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.ax-brand{display:flex;align-items:center;gap:16px;min-width:0}.ax-logo{width:40px;height:40px;border-radius:0;object-fit:contain}.ax-title{font-size:18px;font-weight:700;color:var(--ax-text)}.ax-domain{margin-top:4px;font-size:13px;color:var(--ax-muted)}.ax-right{display:flex;align-items:center;gap:12px}.ax-back{height:46px;min-width:138px;padding:0 18px;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-panel);color:var(--ax-text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700}.ax-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.ax-tabs a{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:14px;border:1px solid var(--ax-line);background:var(--ax-panel);text-decoration:none;color:var(--ax-muted);font-size:14px;font-weight:700}.ax-tabs a.active{background:var(--ax-chip);border-color:rgba(37,99,235,.28);color:var(--ax-text)}html.dark .ax-tabs a{background:var(--ax-panel2);color:var(--ax-text)}html.dark .ax-tabs a.active{background:#0d2146;color:#eff6ff}.ax-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}.ax-stack{display:grid;gap:16px}.ax-card{background:var(--ax-panel);border:1px solid var(--ax-line);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.08);padding:22px;overflow:hidden}.ax-card h2{margin:0 0 6px;font-size:16px}.ax-sub{color:var(--ax-muted);margin-bottom:16px}.ax-form{display:grid;gap:14px}.ax-label{display:grid;gap:6px;color:var(--ax-text);font-weight:600}.ax-input,.ax-textarea,.ax-select{width:100%;padding:12px 14px;border-radius:16px;border:1px solid var(--ax-line);background:var(--ax-panel2);color:var(--ax-text)}.ax-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ax-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.ax-check{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--ax-line);background:var(--ax-panel2);border-radius:16px;color:var(--ax-text)}.ax-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--ax-line);background:var(--ax-chip);color:var(--ax-text);text-decoration:none;font-weight:700}.ax-code{display:block;width:100%;overflow:auto;padding:14px 16px;border-radius:18px;background:var(--ax-panel2);border:1px solid var(--ax-line);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ax-text);white-space:pre}.ax-note{padding:12px 14px;border-radius:16px;background:var(--ax-chip);color:var(--ax-text)}.ax-pills{display:flex;flex-wrap:wrap;gap:10px}.ax-pill{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--ax-line);background:var(--ax-panel2);border-radius:999px;color:var(--ax-text);font-size:12px;font-weight:700}.ax-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width:900px){.ax-grid,.ax-row2,.ax-row3{grid-template-columns:1fr}}@media (max-width:640px){.ax-page{padding:10px}.ax-head{align-items:flex-start;flex-direction:column}.ax-right,.ax-back{width:100%}.ax-tabs a{flex:1 1 calc(50% - 10px);min-width:calc(50% - 10px)}.ax-card{padding:16px;border-radius:20px}}
/* ===== Extracted from admin/analytics_session.php ===== */
.sx-page,.sx-page *{box-sizing:border-box}.sx-page{font-family:"Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",ui-sans-serif,sans-serif,"Apple Color Emoji","Segoe UI Emoji";margin:0 auto;padding:14px}.sx-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.sx-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:138px;height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(148,163,184,.24);background:#fff;color:#0f172a;font-weight:700;text-decoration:none}html.dark .sx-back{background:#09182d;color:#eff6ff;border-color:rgba(148,163,184,.18)}.ix{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#64748b;flex:0 0 22px}.ix svg{width:20px;height:20px}.ix-flag{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px}.ix-flag img{width:20px;height:20px;border-radius:999px;object-fit:cover}.sx-label{display:inline-flex;align-items:center;gap:10px;min-width:0}.sx-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px}.sx-card{background:#fff;border:1px solid rgba(148,163,184,.22);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.05);overflow:hidden}html.dark .sx-card{background:#061224;border-color:rgba(148,163,184,.18);color:#eff6ff}.sx-card-h{padding:22px 22px 0}.sx-card-b{padding:18px 22px 22px;min-width:0}.sx-title{font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-weight:800}.sx-info{display:grid;gap:14px}.sx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.18);min-width:0}.sx-row:last-child{border-bottom:none}.sx-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}.sx-kpi{padding:16px;border-radius:18px;background:#f8fbff;border:1px solid rgba(148,163,184,.18);min-width:0}html.dark .sx-kpi{background:#0b1a31}.sx-kpi .v{font-size:2rem;font-weight:850;letter-spacing:-.04em;word-break:break-word}.sx-kpi .l{margin-top:6px;color:#64748b;font-weight:700}.sx-flow{display:grid;gap:14px}.sx-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;padding:14px;border-radius:18px;background:#f8fbff;border:1px solid rgba(148,163,184,.18);min-width:0}html.dark .sx-item{background:#0b1a31}.sx-dot{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:#e9f1ff;color:#2563eb;font-weight:800}.sx-time{white-space:nowrap;color:#64748b}.sx-chart{height:280px}.sx-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:#eef4ff;border:1px solid rgba(148,163,184,.2);font-weight:700}html.dark .sx-badge{background:#0d2146;color:#dbeafe}.sx-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.sx-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;border-radius:14px;border:1px solid rgba(148,163,184,.24);background:#fff;font-weight:700}html.dark .sx-btn{background:#09182d;color:#eff6ff}@media (max-width:980px){.sx-grid{grid-template-columns:1fr}.sx-hero{grid-template-columns:1fr 1fr}}@media (max-width:640px){.sx-page{padding:10px}.sx-head{flex-direction:column;align-items:stretch}.sx-back{width:100%}.sx-hero{grid-template-columns:1fr 1fr}.sx-item{grid-template-columns:auto 1fr}.sx-time{grid-column:2;white-space:normal}.sx-row{flex-direction:column;align-items:flex-start}.sx-row > div:last-child{width:100%;text-align:left;word-break:break-word}.sx-card{border-radius:20px}}
/* ===== Extracted from admin/analytics_events.php ===== */
:root{--ax-bg:#eff4fb;--ax-panel:#ffffff;--ax-panel2:#f8fbff;--ax-text:#0f172a;--ax-muted:#64748b;--ax-line:rgba(148,163,184,.24);--ax-chip:#eef4ff}html.dark{--ax-bg:#04101f;--ax-panel:#071425;--ax-panel2:#0a1930;--ax-text:#eef5ff;--ax-muted:#91a4c3;--ax-line:rgba(148,163,184,.22);--ax-chip:#0f223d}body{background:var(--ax-bg)}
.ax-page,.ax-page *{box-sizing:border-box}.ax-page{font-family:"Inter",-apple-system,system-ui,sans-serif;margin:0 auto;padding:16px}.ax-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.ax-brand{display:flex;align-items:center;gap:16px;min-width:0}.ax-logo{width:40px;height:40px;border-radius:0;object-fit:contain}.ax-title{font-size:18px;font-weight:700;color:var(--ax-text)}.ax-domain{margin-top:4px;font-size:13px;color:var(--ax-muted)}.ax-right{display:flex;align-items:center;gap:12px}.ax-back{height:46px;min-width:138px;padding:0 18px;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-panel);color:var(--ax-text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700}.ax-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.ax-tabs a{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:14px;border:1px solid var(--ax-line);background:var(--ax-panel);text-decoration:none;color:var(--ax-muted);font-size:14px;font-weight:700}.ax-tabs a.active{background:var(--ax-chip);border-color:rgba(37,99,235,.28);color:var(--ax-text)}html.dark .ax-tabs a{background:var(--ax-panel2);color:var(--ax-text)}html.dark .ax-tabs a.active{background:#0d2146;color:#eff6ff}.ax-grid{display:grid;gap:16px}.ax-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ax-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ax-card{background:var(--ax-panel);border:1px solid var(--ax-line);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.08);padding:22px;overflow:hidden}.ax-card h2{margin:0 0 6px;font-size:16px}.ax-sub{color:var(--ax-muted);margin-bottom:16px}.ax-stat{font-size:30px;font-weight:800;color:var(--ax-text)}.ax-table{width:100%;border-collapse:collapse}.ax-table th,.ax-table td{padding:12px 10px;border-bottom:1px solid var(--ax-line);text-align:left}.ax-table th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ax-muted)}.ax-code{display:block;width:100%;overflow:auto;padding:14px 16px;border-radius:18px;background:var(--ax-panel2);border:1px solid var(--ax-line);font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ax-text);white-space:pre}.ax-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--ax-chip);color:var(--ax-text);font-weight:700}.ax-empty{padding:16px;border-radius:18px;background:var(--ax-panel2);border:1px dashed var(--ax-line);color:var(--ax-muted)}@media (max-width:900px){.ax-grid-3,.ax-grid-2{grid-template-columns:1fr}}@media (max-width:640px){.ax-page{padding:10px}.ax-head{align-items:flex-start;flex-direction:column}.ax-right,.ax-back{width:100%}.ax-tabs a{flex:1 1 calc(50% - 10px);min-width:calc(50% - 10px)}.ax-card{padding:16px;border-radius:20px}}
/* ===== Extracted from admin/analytics_sessions.php ===== */
:root{--ax-bg:#eff4fb;--ax-panel:#ffffff;--ax-panel2:#f8fbff;--ax-text:#0f172a;--ax-muted:#64748b;--ax-line:rgba(148,163,184,.24);--ax-chip:#eef4ff}html.dark{--ax-bg:#04101f;--ax-panel:#071425;--ax-panel2:#0a1930;--ax-text:#eef5ff;--ax-muted:#91a4c3;--ax-line:rgba(148,163,184,.22);--ax-chip:#0f223d}body{background:var(--ax-bg)}
.ax-page,.ax-page *{box-sizing:border-box}.ax-page{font-family:"Inter",-apple-system,system-ui,sans-serif;margin:0 auto;padding:16px}.ax-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.ax-brand{display:flex;align-items:center;gap:16px;min-width:0}.ax-logo{width:40px;height:40px;border-radius:0;object-fit:contain}.ix{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--ax-muted);flex:0 0 22px}.ix svg{width:20px;height:20px}.ix-flag{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px}.ix-flag img{width:20px;height:20px;border-radius:999px;object-fit:cover}.ax-title{font-size:18px;font-weight:700;color:var(--ax-text)}.ax-domain{margin-top:4px;font-size:13px;color:var(--ax-muted)}.ax-right{display:flex;align-items:center;gap:12px}.ax-back{height:46px;min-width:138px;padding:0 18px;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-panel);color:var(--ax-text);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700}.ax-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.ax-tabs a{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:14px;border:1px solid var(--ax-line);background:var(--ax-panel);text-decoration:none;color:var(--ax-muted);font-size:14px;font-weight:700}.ax-tabs a.active{background:var(--ax-chip);border-color:rgba(37,99,235,.28);color:var(--ax-text)}html.dark .ax-tabs a{background:var(--ax-panel2);color:var(--ax-text)}html.dark .ax-tabs a.active{background:#0d2146;color:#eff6ff}.ax-card{background:var(--ax-panel);border:1px solid var(--ax-line);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.08);padding:22px;overflow:hidden}.ax-card h2{margin:0 0 6px;font-size:16px}.ax-sub{color:var(--ax-muted);margin-bottom:16px}.ax-list{display:grid;gap:10px}.ax-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--ax-panel2);border:1px solid var(--ax-line);text-decoration:none;color:var(--ax-text);min-width:0}.ax-top{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:760;flex-wrap:wrap;min-width:0}.ax-meta{margin-top:6px;color:var(--ax-muted);word-break:break-word}.ax-pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:var(--ax-muted);gap:10px;flex-wrap:wrap}.ax-pager .nav{display:flex;gap:8px;flex-wrap:wrap}.ax-pager a{height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--ax-line);background:var(--ax-panel);text-decoration:none;color:var(--ax-text);display:inline-flex;align-items:center;font-weight:700}.ax-pager span.badge{padding:8px 12px;border-radius:12px;background:var(--ax-chip)}@media (max-width:640px){.ax-page{padding:10px}.ax-head{align-items:flex-start;flex-direction:column}.ax-right,.ax-back{width:100%}.ax-tabs a{flex:1 1 calc(50% - 10px);min-width:calc(50% - 10px)}.ax-row{grid-template-columns:1fr;align-items:start}.ax-top{font-size:16px}.ax-row>div:last-child{white-space:normal;color:var(--ax-muted)}.ax-card{padding:16px;border-radius:20px}}
/* ===== Extracted from admin/project_pm_analytics.php ===== */
.pm-wrap{display:grid;gap:22px}
.pm-hero{position:relative;overflow:hidden;border-radius:32px;padding:30px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(14,165,233,.10) 55%,rgba(255,255,255,.96))}
.dark .pm-hero{background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(2,6,23,.9))}
.pm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pm-kpi{padding:18px;border-radius:22px;background:rgb(248 250 252 / 41%);border:1px solid rgba(148,163,184,.14)}
.dark .pm-kpi{background:rgba(2,6,23,.38)}
.pm-panel{border-radius:28px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.94);box-shadow:0 18px 44px rgba(15,23,42,.06)}
.dark .pm-panel{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)}
.pm-body{padding:24px}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#64748b}
.pm-table{width:100%;border-collapse:collapse}
.pm-table th,.pm-table td{padding:14px 12px;border-top:1px solid rgba(148,163,184,.14)}
.pm-table th{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#94a3b8;text-align:left}
@media (max-width:1150px){.pm-grid,.pm-kpis{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.pm-grid,.pm-kpis{grid-template-columns:1fr}}
/* ===== Extracted from admin/financial_offers.php ===== */
.pm-fin-hero{position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 58%,rgba(255,255,255,.94));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.dark .pm-fin-hero{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(16,185,129,.10) 58%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.pm-fin-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.dark .pm-fin-pill{background:rgba(59,130,246,.18);color:#bfdbfe}
.pm-fin-title{margin:14px 0 8px;font-size:32px;line-height:1.03;font-weight:900;letter-spacing:-.04em;color:#0f172a}
.dark .pm-fin-title{color:#f8fafc}
.pm-fin-copy{max-width:760px;font-size:14px;line-height:1.7;color:#64748b}
.dark .pm-fin-copy{color:#94a3b8}
.pm-fin-actions{display:flex;justify-content:flex-end;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pm-fin-cta{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;box-shadow:0 18px 35px rgba(37,99,235,.20)}
.pm-fin-cta:hover{filter:brightness(1.03)}
.pm-fin-panel{border-radius:24px!important;border:1px solid rgba(148,163,184,.18)!important;background:rgba(255,255,255,.92)!important;box-shadow:0 14px 34px rgba(15,23,42,.06)!important;overflow:hidden}
.dark .pm-fin-panel{background:rgba(15,23,42,.86)!important;border-color:rgba(148,163,184,.16)!important;box-shadow:0 18px 38px rgba(2,6,23,.42)!important}
@media (max-width:900px){.pm-fin-title{font-size:28px}}
/* ===== Extracted from admin/project_pm_issues.php ===== */
.dark .pm-card{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)}.pm-section{padding:22px}.pm-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.pm-input,.pm-select,.pm-textarea{width:100%;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.9);padding:12px 14px}.dark .pm-input,.dark .pm-select,.dark .pm-textarea{background:rgba(2,6,23,.45);border-color:rgba(148,163,184,.15);color:#e2e8f0}
.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:14px;font-weight:800;text-decoration:none;border:0;cursor:pointer}.pm-btn-primary{background:var(--primary);color:#fff}.pm-btn-secondary{background:rgba(255,255,255,.9);color:#0f172a;border:1px solid rgba(148,163,184,.18)}.pm-btn-ghost{background:rgba(248,250,252,.96);color:#0f172a;border:1px solid rgba(148,163,184,.18);box-shadow:0 8px 24px rgba(15,23,42,.05)}.pm-drawer-tabs{display:flex;gap:10px;flex-wrap:wrap}.pm-drawer-tab{height:40px;padding:0 16px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:#fff;color:#334155;font-size:14px;font-weight:800}.pm-drawer-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(59,130,246,.22)}
.dark .pm-btn-secondary{background:rgba(15,23,42,.76);color:#e2e8f0}.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.pm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}.pm-board-wrap{overflow-x:auto;padding-bottom:6px}.pm-board{display:flex;gap:18px;align-items:flex-start;min-width:max-content;flex-wrap:nowrap}.pm-col{flex:0 0 330px;min-height:560px;border-radius:22px;padding:16px;background:linear-gradient(180deg,rgba(248,250,252,.92),rgba(241,245,249,.84));border:1px solid rgba(148,163,184,.16)}
.dark .pm-col{background:linear-gradient(180deg,rgba(15,23,42,.86),rgba(15,23,42,.65))}.pm-col.pm-drop{outline:2px dashed rgba(59,130,246,.55);outline-offset:4px}.pm-col-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.pm-col-items{display:grid;gap:12px;min-height:120px}.pm-issue{border-radius:20px;background:rgba(255,255,255,.98);padding:16px;border:1px solid rgba(148,163,184,.16);box-shadow:0 10px 26px rgba(15,23,42,.06)}.dark .pm-issue{background:rgba(15,23,42,.96)} .pm-issue.dragging{opacity:.45}
.pm-table{width:100%;border-collapse:collapse}.pm-table th,.pm-table td{padding:14px;border-bottom:1px solid rgba(148,163,184,.16);text-align:left;vertical-align:top}.pm-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800}.pm-stack{display:flex;align-items:center;gap:8px}.pm-avatar{width:32px;height:32px;border-radius:999px;object-fit:cover;border:1px solid rgba(148,163,184,.2);background:#eef2ff}.pm-avatars{display:flex;align-items:center}.pm-avatars .pm-avatar{margin-left:-10px}.pm-avatars .pm-avatar:first-child{margin-left:0}
.pm-avatwrap{position:relative;display:inline-flex}
.pm-icon-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.pm-icon-circle{width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.18);background:rgba(248,250,252,.96);color:#2563eb;text-decoration:none}
.pm-icon-circle:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.pm-icon-circle:active{transform:translateY(0)}
.pm-icon-danger{color:#e11d48}
.pm-icon-danger:hover{box-shadow:0 10px 22px rgba(225,29,72,.14)}
[data-tooltip]{position:relative}
[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 10px);background:#0f172a;color:#fff;font-size:13px;font-weight:800;padding:8px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 18px 44px rgba(0,0,0,.22);z-index:2147483647}
[data-tooltip]:hover::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 2px);border:8px solid transparent;border-top-color:#0f172a;z-index:2147483647}
.pm-rightcol{display:grid;gap:20px;grid-template-columns:1fr 1fr}.pm-inline-actions{display:flex;gap:8px;align-items:center}.pm-iconbtn{height:36px;padding:0 14px;border-radius:12px}.pm-admin-list{display:grid;gap:10px;margin-top:12px}.pm-admin-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(148,163,184,.16);border-radius:16px}.pm-color{width:16px;height:16px;border-radius:999px;display:inline-block;border:1px solid rgba(15,23,42,.08)}
.pm-datewrap{display:flex;align-items:center;gap:8px}.pm-datewrap .pm-input{flex:1}.pm-date-btn{width:44px;min-width:44px;padding:0;border-radius:14px}html{scrollbar-gutter:stable}body.pm-modal-open{overflow:hidden}.pm-modal-backdrop{position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;background:rgba(15,23,42,.58) !important;backdrop-filter:blur(8px);z-index:2147483000 !important;display:none;align-items:center !important;justify-content:center !important;padding:24px !important;margin:0 !important}.pm-modal-backdrop.pm-open{display:flex !important}.pm-modal{display:block !important;visibility:visible !important;opacity:1 !important;position:relative;margin:auto;width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;border-radius:20px!important;background:#fff;border:1px solid rgba(148,163,184,.16);box-shadow:0 30px 80px rgba(15,23,42,.28);padding:28px;z-index:2147483001 !important}.pm-drawer{display:block !important;position:fixed;top:18px;right:18px;bottom:18px;width:min(1080px,calc(100vw - 28px));overflow:auto;border-radius:22px;background:#fff;border:1px solid rgba(148,163,184,.16);box-shadow:0 30px 80px rgba(15,23,42,.28);padding:28px;z-index:2147483001 !important}
.dark .pm-modal,.dark .pm-drawer{background:#0f172a;color:#e2e8f0}.pm-modal-grid{display:grid;gap:14px}.pm-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;position:sticky;bottom:0;background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,.82),transparent);padding-top:14px}.dark .pm-modal-actions{background:linear-gradient(to top,rgba(15,23,42,.96),rgba(15,23,42,.82),transparent)}.pm-hidden{display:none !important}.pm-viewtabs{display:flex;gap:10px;flex-wrap:wrap}.pm-calendar-shell{display:grid;gap:18px}.pm-calendar-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.pm-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.pm-calendar-cell{min-height:150px;padding:12px;border-radius:18px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.75)}.pm-calendar-head{font-size:12px;font-weight:800;color:#64748b;text-transform:uppercase}.pm-calendar-num{font-size:13px;font-weight:900;margin-bottom:10px}.pm-calendar-item{display:grid;gap:8px;padding:10px;border-radius:14px;border:1px solid rgba(148,163,184,.12);background:#fff;text-decoration:none;color:inherit;box-shadow:0 6px 18px rgba(15,23,42,.04)}.pm-calendar-item.draggable{cursor:grab}.pm-calendar-item.draggable:active{cursor:grabbing}.pm-calendar-time{font-size:12px;color:#64748b}.pm-topline{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.pm-saved-list{display:flex;gap:8px;flex-wrap:wrap}.pm-mini{height:34px;border-radius:12px;padding:0 12px;font-size:13px}.pm-analytics-shell{position:relative}.pm-fab{position:fixed;right:26px;bottom:28px;z-index:1200;height:56px;padding:0 18px;border-radius:18px;background:linear-gradient(135deg,var(--primary),var(--primary-600, var(--primary)));color:#fff;box-shadow:0 20px 40px rgba(37,99,235,.24);border:none;text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-weight:900}.pm-fab:hover{transform:translateY(-1px)}.pm-empty{color:#64748b;padding:12px 0}.pm-assignee-more{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.18);background:#fff;font-size:11px;font-weight:800;color:#475569}
.pm-action-pill{height:38px;padding:0 12px;border-radius:999px;border:1px solid rgba(148,163,184,.18);background:rgba(248,250,252,.96);color:#0f172a;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:800}.pm-action-pill:hover{box-shadow:0 10px 22px rgba(15,23,42,.08)}
.pm-filter-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.pm-filter-main{display:grid;gap:14px}.pm-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pm-span-2{grid-column:1 / -1}@media (max-width: 860px){.pm-filter-grid{grid-template-columns:1fr}}
.pm-filter-chips{display:flex;gap:8px;flex-wrap:wrap}.pm-filter-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(59,130,246,.08);color:#1d4ed8;font-weight:800;font-size:12px}.pm-filter-chip strong{font-weight:900}.pm-comment-form{display:grid;gap:12px}.pm-comment-formbar{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.pm-comment-helper{font-size:12px;color:#64748b}.pm-subtask-title{flex:1;font-weight:700}.pm-subtask-actions{display:flex;gap:8px;align-items:center}.pm-subtask-drop{outline:2px dashed rgba(59,130,246,.45);outline-offset:3px}.pm-inline-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pm-inline-edit-wide{grid-column:1 / -1}.pm-calendar-wrap{border:1px solid rgba(148,163,184,.16);border-radius:28px;padding:14px;box-shadow:0 18px 40px rgba(15,23,42,.06)}.fc{--fc-border-color:rgba(148,163,184,.14);--fc-page-bg-color:transparent;--fc-list-event-hover-bg-color:rgba(59,130,246,.08)}.fc .fc-scrollgrid,.fc .fc-theme-standard td,.fc .fc-theme-standard th{border-color:rgba(148,163,184,.14)}.fc .fc-col-header-cell{padding:12px 0;background:transparent;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8}.fc .fc-daygrid-day-frame{padding:8px;min-height:140px}.fc .fc-daygrid-day-number{font-weight:800;color:#475569;padding:4px 6px}.fc .fc-timegrid-slot{height:3.5rem}.fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion{color:#94a3b8;font-size:12px}.fc .fc-daygrid-more-link{color:#2563eb;font-weight:800}.fc .fc-highlight{background:rgba(59,130,246,.08)}
.pm-drawer-card{border:1px solid rgba(148,163,184,.16);border-radius:18px;padding:16px;}.pm-avatwrap{position:relative;display:inline-flex}.pm-icon-actions{display:flex;gap:8px;align-items:center}.pm-icon-circle{width:34px;height:34px;border-radius:999px;border:1px solid rgba(148,163,184,.18);background:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 6px 16px rgba(15,23,42,.06)}.pm-icon-circle:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.1)}.pm-icon-danger{color:#dc2626}.pm-fc-event{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:10px;min-height:28px;color:#fff;overflow:hidden}.pm-fc-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fc .fc-daygrid-event,.fc .fc-timegrid-event{border:none;background:transparent;padding:0}.fc .fc-event-main{padding:0}.fc .fc-toolbar{display:none}.fc .fc-daygrid-day.fc-day-today,.fc .fc-timegrid-col.fc-day-today{background:rgba(59,130,246,.06)}.pm-drawer-hero{display:grid;gap:14px;padding:18px;border:1px solid rgba(148,163,184,.16);border-radius:22px;background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(241,245,249,.9))}.pm-drawer-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pm-kpi{padding:14px;border-radius:18px;background:#fff;border:1px solid rgba(148,163,184,.14)}.pm-kpi strong{display:block;font-size:12px;text-transform:uppercase;color:#64748b;margin-bottom:6px}.pm-kpi span{font-weight:900;font-size:14px;color:#0f172a}.pm-comment{gap:12px}.pm-comment-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.pm-comment-body{line-height:1.65}.pm-activity-line{display:grid;grid-template-columns: 20px 1fr;gap:12px;align-items:flex-start}.pm-activity-dot{width:12px;height:12px;border-radius:999px;background:#3b82f6;box-shadow:0 0 0 6px rgba(59,130,246,.12);margin:10px auto 0}.pm-checklist-bar{height:10px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden}.pm-checklist-bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#16a34a)}.pm-comment{display: grid;gap: 10px;padding: 8px;border:1px solid rgba(148,163,184,.16);border-radius:18px;margin-bottom: 10px;background:rgba(248,250,252,.7)}.pm-subtask{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid rgba(148,163,184,.16);border-radius:16px;background:rgba(248,250,252,.72)}.pm-subtask[draggable="true"]{cursor:grab}.pm-subtask.dragging{opacity:.5}.pm-subtask-handle{width:28px;height:28px;border-radius:10px;border:1px solid rgba(148,163,184,.16);display:inline-flex;align-items:center;justify-content:center;color:#64748b;background:#fff}.pm-mention{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:rgba(59,130,246,.12);color:#2563eb;font-weight:800}.pm-avatwrap[data-tooltip],.pm-assignee-more[data-tooltip],.pm-icon-circle[data-tooltip]{position:relative}.pm-avatwrap[data-tooltip]:hover::after,.pm-assignee-more[data-tooltip]:hover::after,.pm-icon-circle[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 8px);background:#0f172a;color:#fff;font-size:12px;font-weight:700;padding:7px 9px;border-radius:10px;white-space:nowrap;box-shadow:0 8px 18px rgba(15,23,42,.22);z-index:50}.pm-avatwrap[data-tooltip]:hover::before,.pm-assignee-more[data-tooltip]:hover::before,.pm-icon-circle[data-tooltip]:hover::before{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 2px);border:6px solid transparent;border-top-color:#0f172a;z-index:49}
#pmCalendar{min-height:760px}.fc .fc-toolbar.fc-header-toolbar{display:none}.fc .fc-scrollgrid,.fc-theme-standard td,.fc-theme-standard th{border-color:rgba(148,163,184,.16)}.fc .fc-daygrid-day-frame{min-height:120px}.fc .fc-daygrid-event,.fc .fc-timegrid-event{border:none;border-radius:14px;padding:2px 4px;box-shadow:0 8px 18px rgba(15,23,42,.08)}.fc .fc-event-main{padding:0}.pm-fc-event{display:flex;align-items:center;gap:8px;padding:8px 10px;color:#fff;font-weight:800;font-size:12px;min-height:34px}.pm-fc-event .pm-avatar{width:20px;height:20px;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.26)}.pm-fc-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc .fc-timegrid-slot{height:2.7rem}.fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion,.fc .fc-col-header-cell-cushion{font-weight:700;color:#94a3b8}.fc .fc-day-today{background:rgba(59,130,246,.05) !important}.fc .fc-button{display:none !important}.fc .fc-view-harness{border-radius:24px;padding:16px;border:1px solid rgba(148,163,184,.14);box-shadow:0 24px 50px rgba(15,23,42,.06)}.fc .fc-daygrid-day-top{justify-content:flex-end}.fc .fc-day-other .fc-daygrid-day-number{opacity:.45}.fc .fc-timegrid-col-events{margin:0 6px}.fc .fc-daygrid-event-harness{margin-top:6px}.fc .fc-daygrid-day-number{font-weight: 500;color: #47556996;padding:10px}.fc .fc-col-header-cell-cushion{padding:12px 4px}.fc .fc-timegrid-slot{height:3rem}.fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion{font-size:12px}.fc .fc-daygrid-day-events{}.fc .fc-event{cursor:pointer}
.dark .pm-kpi{background:#111827;border-color:rgba(148,163,184,.18)}.dark .pm-kpi span{color:#f8fafc}.dark .pm-drawer-hero{background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(15,23,42,.9))}.dark .pm-icon-circle{background:#0f172a;color:#e2e8f0}.dark .pm-fc-event{box-shadow:none}@media (max-width: 980px){.pm-rightcol{grid-template-columns:1fr}.pm-modal,.pm-drawer{width:calc(100vw - 24px);top:12px;right:12px;bottom:12px;padding:20px}.pm-modal-backdrop{padding:12px}.pm-drawer-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ===== Extracted from admin/monitor_view.php ===== */
/* Apex heatmap renders a color-scale legend on the right; hide it (we show our own legend below). */
#staticHeatmap .apexcharts-heatmap-legend{display:none !important;}
.metric-icon.icon-green{background:rgba(34,197,94,.12);color:#22c55e}
.metric-icon.icon-blue{background:rgba(59,130,246,.12);color:#3b82f6}
.metric-icon.icon-amber{background:rgba(245,158,11,.12);color:#f59e0b}
.metric-icon.icon-red{background:rgba(239,68,68,.12);color:#ef4444}
.metric-icon.icon-purple{background:rgba(168,85,247,.12);color:#a855f7}
.metric-icon.icon-cyan{background:rgba(6,182,212,.12);color:#06b6d4}
.sla-good{color:#22c55e}
.sla-warn{color:#f59e0b}
.sla-bad{color:#ef4444}
/* ===== Extracted from admin/monitor_view.php ===== */
.monitor-kpi{position:relative;overflow:hidden;border-radius:1.25rem;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98));box-shadow:0 10px 30px rgba(15,23,42,.06)}
.dark .monitor-kpi{background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.92));border-color:rgba(148,163,184,.16);box-shadow:0 14px 34px rgba(2,6,23,.42)}
.monitor-kpi__icon{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:1rem;background:rgba(79,70,229,.10);color:#4f46e5;box-shadow:inset 0 0 0 1px rgba(79,70,229,.10)}
.dark .monitor-kpi__icon{background:rgba(79,70,229,.16);color:#818cf8}
.monitor-kpi__icon svg{width:1.2rem;height:1.2rem}
.monitor-kpi__meta{font-size:.76rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.dark .monitor-kpi__meta{color:#94a3b8}
.monitor-kpi__value{font-size:1.125rem;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-top:.35rem;color:#111827}
.dark .monitor-kpi__value{color:#fff}
.monitor-surface{border-radius:1.25rem;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98));box-shadow:0 10px 30px rgba(15,23,42,.05)}
.dark .monitor-surface{background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.92));border-color:rgba(148,163,184,.16);box-shadow:0 14px 34px rgba(2,6,23,.38)}
.metric-icon.icon-green{background:rgba(34,197,94,.12);color:#22c55e}
.metric-icon.icon-blue{background:rgba(59,130,246,.12);color:#3b82f6}
.metric-icon.icon-amber{background:rgba(245,158,11,.12);color:#f59e0b}
.metric-icon.icon-red{background:rgba(239,68,68,.12);color:#ef4444}
.metric-icon.icon-purple{background:rgba(168,85,247,.12);color:#a855f7}
.metric-icon.icon-cyan{background:rgba(6,182,212,.12);color:#06b6d4}
.sla-good{color:#22c55e}
.sla-warn{color:#f59e0b}
.sla-bad{color:#ef4444}
.mv-hero{position:relative;overflow:hidden;border-radius:28px;padding:26px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 55%,rgba(255,255,255,.96));box-shadow:0 24px 70px rgba(15,23,42,.08)}
.dark .mv-hero{background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(16,185,129,.10) 55%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.mv-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:800;font-size:12px;letter-spacing:.02em}
.dark .mv-chip{background:rgba(59,130,246,.18);color:#bfdbfe}
.mv-title{font-size:32px;line-height:1.05;font-weight:900;letter-spacing:-.04em;margin-top:12px}
.mv-meta{margin-top:10px;font-size:14px;color:#64748b}
.dark .mv-meta{color:#94a3b8}
.mv-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.mv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 16px;border-radius:16px;font-weight:800;text-decoration:none;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.86);color:#0f172a;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.dark .mv-btn{background:rgba(15,23,42,.72);color:#e2e8f0;border-color:rgba(148,163,184,.16)}
.mv-btn-primary{background:linear-gradient(180deg,rgba(37,99,235,.92),rgba(29,78,216,.92));border-color:rgba(37,99,235,.55);color:#eff6ff;box-shadow:0 14px 34px rgba(37,99,235,.18)}
.dark .mv-btn-primary{background:linear-gradient(180deg,rgba(59,130,246,.92),rgba(37,99,235,.92));border-color:rgba(96,165,250,.35)}
.mv-btn:hover{transform:translateY(-1px)}
.mv-tabbar{margin-top:16px;padding:14px 16px;border-radius:22px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.76);box-shadow:0 14px 34px rgba(15,23,42,.05);backdrop-filter:blur(14px)}
.dark .mv-tabbar{background:rgba(15,23,42,.72);border-color:rgba(148,163,184,.14)}
.mv-tabs{display:flex;gap:.65rem;flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;align-items:center}
.mv-tab{display:inline-flex;align-items:center;gap:8px;padding:.72rem .98rem;border-radius:999px;border:1px solid rgba(148,163,184,.22);font-size:.875rem;font-weight:700;background:rgba(248,250,252,.85);color:#475569;white-space:nowrap;transition:.2s ease;text-decoration:none}
.dark .mv-tab{background:rgba(2,6,23,.42);color:#cbd5e1;border-color:rgba(148,163,184,.14)}
.mv-tab:hover{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.20);color:#1d4ed8;transform:translateY(-1px)}
.dark .mv-tab:hover{background:rgba(37,99,235,.16);border-color:rgba(59,130,246,.28);color:#dbeafe}
.mv-tab.is-active{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.34);color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)}
.dark .mv-tab.is-active{background:rgba(59,130,246,.18);border-color:rgba(96,165,250,.30);color:#dbeafe}
.mv-rangebar{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}
.mv-range{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(148,163,184,.18);font-size:12px;font-weight:800;background:rgba(255,255,255,.72);color:#475569;text-decoration:none}
.dark .mv-range{background:rgba(15,23,42,.62);border-color:rgba(148,163,184,.14);color:#cbd5e1}
.mv-range:hover{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.20);color:#1d4ed8}
.dark .mv-range:hover{background:rgba(37,99,235,.16);border-color:rgba(59,130,246,.28);color:#dbeafe}
.mv-range.is-active{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.34);color:#1d4ed8}
.dark .mv-range.is-active{background:rgba(59,130,246,.18);border-color:rgba(96,165,250,.30);color:#dbeafe}
@media (max-width:900px){.mv-hero{padding:20px;border-radius:24px}.mv-title{font-size:26px}.mv-tabbar{padding:12px}}
/* ===== Extracted from admin/project_pm_cycles.php ===== */
.pm-shell{display:grid;gap:20px}.pm-card{border-radius:24px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.92);box-shadow:0 18px 44px rgba(15,23,42,.06)}.dark .pm-card{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)} .pm-section{padding:22px}.pm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.pm-row{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(248,250,252,.85);border:1px solid rgba(148,163,184,.14);align-items:center}.dark .pm-row{background:rgba(2,6,23,.4)}.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:14px;font-weight:800;text-decoration:none}.pm-btn-primary{background:var(--primary);color:#fff}.pm-btn-secondary{background:rgba(255,255,255,.9);color:#0f172a;border:1px solid rgba(148,163,184,.18)} .dark .pm-btn-secondary{background:rgba(15,23,42,.76);color:#e2e8f0}.pm-input,.pm-select,.pm-textarea{width:100%;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.9);padding:12px 14px}.dark .pm-input,.dark .pm-select,.dark .pm-textarea{background:rgba(2,6,23,.45);border-color:rgba(148,163,184,.15);color:#e2e8f0}.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.pm-datewrap{display:flex;align-items:center;gap:8px}.pm-datewrap .pm-input{flex:1}.pm-date-btn{width:44px;min-width:44px;padding:0;border-radius:14px}.pm-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(59,130,246,.10);color:#1d4ed8;font-size:12px;font-weight:800}
@media (max-width:1100px){.pm-grid{grid-template-columns:1fr}}
/* ===== Extracted from admin/settings.php ===== */
.st-shell{}
.st-hero{position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 58%,rgba(255,255,255,.94));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.dark .st-hero{border-color:rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(16,185,129,.12) 58%,rgba(15,23,42,.90));box-shadow:0 24px 70px rgba(2,6,23,.42)}
.st-hero:before{content:"";position:absolute;inset:-40px -60px auto auto;width:240px;height:240px;background:radial-gradient(circle,rgba(14,165,233,.18),transparent 68%)}
.st-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3b82f6;margin-bottom:10px}.st-title{font-size:clamp(1.9rem,2.7vw,2.8rem);line-height:1.04;font-weight:800;letter-spacing:-.03em;color:#0f172a}.dark .st-title{color:#f8fafc}.st-sub{margin-top:10px;max-width:760px;font-size:14px;color:#475569}.dark .st-sub{color:#94a3b8}
.st-panel{border:1px solid rgba(148,163,184,.18);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 16px 50px rgba(15,23,42,.06)}.dark .st-panel{background:rgba(15,23,42,.84);border-color:rgba(148,163,184,.14);box-shadow:0 22px 60px rgba(2,6,23,.36)}
.pill-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.pill-tab{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(148,163,184,.24);font-weight:700;color:#334155;text-decoration:none}.dark .pill-tab{background:rgba(15,23,42,.74);border-color:rgba(71,85,105,.8);color:#cbd5e1}.pill-tab:hover{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.18);color:#1d4ed8}.dark .pill-tab:hover{background:rgba(37,99,235,.14);border-color:rgba(59,130,246,.28);color:#bfdbfe}.pill-tab.is-active{background:rgba(37,99,235,.12);border-color:rgba(59,130,246,.34);color:#1d4ed8;box-shadow:0 8px 24px rgba(37,99,235,.12)}.dark .pill-tab.is-active{background:rgba(37,99,235,.18);color:#bfdbfe}
.surface-card{padding:24px}
.surface-card input,.surface-card select,.surface-card textarea{border-radius:14px!important;padding:.8rem .95rem!important;border-color:rgba(148,163,184,.34)!important;box-shadow:none!important}.dark .surface-card input,.dark .surface-card select,.dark .surface-card textarea{border-color:rgba(71,85,105,.75)!important}
.surface-card h2{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#0f172a}.dark .surface-card h2{color:#f8fafc}
.surface-card h3{font-size:.95rem;font-weight:800;color:#0f172a}.dark .surface-card h3{color:#e2e8f0}
.st-save{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;font-size:14px;font-weight:800;border:0;box-shadow:0 14px 34px rgba(37,99,235,.24)}
.alert-channel{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:rgba(248,250,252,.8)}.dark .alert-channel{background:rgba(2,6,23,.26);border-color:rgba(71,85,105,.62)}
.mk-details{border-radius:18px!important}
/* ===== Extracted from admin/pagespeed.php ===== */
.pm-lite{display:grid;gap:18px}
.pm-lite-hero{position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);background: linear-gradient(135deg, rgb(37 99 235 / 14%), rgba(16, 185, 129, .08) 58%, rgba(255, 255, 255, .94));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.dark .pm-lite-hero{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(16,185,129,.10) 58%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.pm-lite-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.dark .pm-lite-pill{background:rgba(59,130,246,.18);color:#bfdbfe}
.pm-lite-title{margin:14px 0 8px;font-size:32px;line-height:1.03;font-weight:900;letter-spacing:-.04em;color:#0f172a}
.dark .pm-lite-title{color:#f8fafc}
.pm-lite-copy{max-width:760px;font-size: 14px;line-height:1.7;color:#64748b}
.dark .pm-lite-copy{color:#94a3b8}
.pm-lite-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.pm-lite-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:16px;font-weight:800;text-decoration:none}
.pm-lite-btn--primary{background:var(--primary);color:#fff;box-shadow:0 12px 25px rgba(37,99,235,.22)}
.pm-lite-btn--ghost{background:rgba(255,255,255,.88);color:#0f172a;border:1px solid rgba(148,163,184,.18)}
.dark .pm-lite-btn--ghost{background:rgba(15,23,42,.74);color:#e2e8f0;border-color:rgba(148,163,184,.16)}
.pm-lite-panel{border-radius:24px!important;border:1px solid rgba(148,163,184,.18)!important;background:rgba(255,255,255,.92)!important;box-shadow:0 14px 34px rgba(15,23,42,.06)!important;overflow:hidden}
.dark .pm-lite-panel{background:rgba(15,23,42,.88)!important;border-color:rgba(148,163,184,.14)!important}
.pm-lite-table thead{background:rgba(248,250,252,.78)!important}
.dark .pm-lite-table thead{background:rgba(15,23,42,.72)!important}
.pm-lite-table tbody tr:hover{background:rgba(37,99,235,.04)}
.dark .pm-lite-table tbody tr:hover{background:rgba(59,130,246,.08)}
.pm-lite-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.pm-lite-kpi{padding:16px 18px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:rgba(248,250,252,.8)}
.dark .pm-lite-kpi{background:rgba(2,6,23,.34);border-color:rgba(148,163,184,.12)}
.pm-lite-kpi-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.pm-lite-kpi-value{margin-top:6px;font-size:24px;line-height:1;font-weight:900;color:#0f172a}
.dark .pm-lite-kpi-value{color:#f8fafc}
.pm-lite-kpi-copy{margin-top:6px;font-size:12px;color:#64748b}
.dark .pm-lite-kpi-copy{color:#94a3b8}
@media (max-width:900px){.pm-lite-kpis{grid-template-columns:1fr}.pm-lite-title{font-size:28px}}
/* ===== Extracted from admin/pagespeed_view.php ===== */
.psi-wrap{width:100%;margin:0}.psi-wrap,.psi-wrap *{font-family:inherit}
.psi-shell{border:1px solid rgba(148,163,184,.18);border-radius:1.6rem;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.98));box-shadow:0 18px 40px rgba(15,23,42,.07);overflow:hidden}
.dark .psi-shell{border-color:rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(15,23,42,.95),rgba(2,6,23,.94));box-shadow:0 20px 44px rgba(2,6,23,.42)}
.psi-h{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding:1.35rem 1.4rem 1rem;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(239,246,255,.45))}
.dark .psi-h{background:linear-gradient(135deg,rgba(15,23,42,.12),rgba(30,41,59,.22))}
.psi-title{font-size:1.9rem;font-weight:800;letter-spacing:-.04em;color:#0f172a;line-height:1.05}.dark .psi-title{color:#f8fafc}
.psi-title span{font-size:.88rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#64748b}.dark .psi-title span{color:#93c5fd}
.psi-sub{margin-top:.7rem;font-size:.92rem;color:#64748b;font-weight:500;overflow-wrap:anywhere;word-break:break-word}.dark .psi-sub{color:#94a3b8}
.psi-tabs{display:flex;gap:.55rem;flex-wrap:wrap;padding:0 1.4rem 1.1rem 1.4rem;align-items:center}
.psi-tab{padding:.8rem 1.05rem;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:.86rem;cursor:pointer;background:transparent;color:#64748b;transition:.2s ease}
.psi-tab:hover{background:rgba(241,245,249,.9);color:#0f172a}
.psi-tab.is-active{background:rgba(37,99,235,.1);color:var(--primary);border-color:rgba(37,99,235,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.32)}
.dark .psi-tab{color:#94a3b8}.dark .psi-tab:hover{background:rgba(30,41,59,.88);color:#fff}.dark .psi-tab.is-active{background:rgba(59,130,246,.18);color:#bfdbfe;border-color:rgba(96,165,250,.22)}
.psi-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.psi-btn{display:inline-flex;align-items:center;justify-content:center;font-size:.86rem;gap:.5rem;padding:.8rem 1rem;border-radius:999px;border:1px solid rgba(148,163,184,.2);background:rgba(255,255,255,.78);color:#0f172a;font-weight:700;box-shadow:0 10px 24px rgba(15,23,42,.06)}.psi-btn:hover{background:#fff}
.psi-btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-700));border-color:transparent;color:#fff;box-shadow:0 14px 30px rgba(37,99,235,.26)}.psi-btn-primary:hover{filter:brightness(.98)}
.dark .psi-btn{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.16);color:#e2e8f0;box-shadow:none}.dark .psi-btn:hover{background:rgba(30,41,59,.88)}
.psi-grid{display:grid;grid-template-columns:minmax(320px,380px) 1fr;gap:1.15rem;padding:0 1.4rem 1.3rem;align-items:start}@media (max-width: 980px){.psi-grid{grid-template-columns:1fr}}
.psi-scoreBox,.psi-section{display:grid;gap:1rem}
.psi-bigDonut,.psi-cat,.psi-stat,.psi-preview{border-radius:1.35rem;border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.96));box-shadow:0 14px 30px rgba(15,23,42,.05)}
.dark .psi-bigDonut,.dark .psi-cat,.dark .psi-stat,.dark .psi-preview{border-color:rgba(148,163,184,.14);background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.92));box-shadow:none}
.psi-bigDonut{display:flex;gap:1.25rem;align-items:center;padding:1.1rem 1.15rem}.psi-donutSvg{width:148px;height:148px;flex:0 0 148px}.psi-donutNum{font-size:40px;font-weight:700;fill:currentColor}
.psi-good{color:#16a34a}.psi-ni{color:#f59e0b}.psi-bad{color:#ef4444}.psi-statName.psi-good{color:#16a34a}.psi-statName.psi-ni{color:#f59e0b}.psi-statName.psi-bad{color:#ef4444}
.psi-catRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}@media (max-width: 640px){.psi-catRow{grid-template-columns:repeat(2,minmax(0,1fr));}}
.psi-cat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.95rem}.psi-cat svg{width:72px;height:72px}.psi-catName{margin-top:.55rem;font-size:.77rem;color:#475569;font-weight:700;text-align:center}.dark .psi-catName{color:#cbd5e1}
.psi-secTitle{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#64748b;font-weight:800;margin:.1rem 0 .75rem}.dark .psi-secTitle{color:#94a3b8}
.psi-statGrid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}@media (max-width: 720px){.psi-statGrid{grid-template-columns:1fr}}
.psi-stat{padding:1rem}.psi-statName{font-size:.82rem;color:#1f2937;text-decoration:none;font-weight:700;display:flex;align-items:center;gap:.5rem}.dark .psi-statName:not(.psi-good):not(.psi-ni):not(.psi-bad){color:#e2e8f0}.psi-statVal{margin-top:.45rem;font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:#0f172a}.dark .psi-statVal{color:#fff}
.psi-preview{max-width:460px;margin:0 auto}.psi-preview img{max-height:220px;object-fit:contain}
.psi-section{padding:0 1.4rem 1.4rem}.psi-acc{border-top:1px solid rgba(148,163,184,.16)}.dark .psi-acc{border-top-color:rgba(148,163,184,.12)}
.psi-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:1rem .25rem;border-bottom:1px solid rgba(148,163,184,.16)}.dark .psi-row{border-bottom-color:rgba(148,163,184,.12)}
.psi-left{display:flex;align-items:center;gap:10px;min-width:0}.psi-tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #ef4444}.psi-rowTitle{font-size:.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.psi-savings{font-size:.76rem;color:#ef4444;white-space:nowrap;font-weight:700}
.psi-details{padding:1rem .25rem 1.1rem;background:rgba(248,250,252,.8)}.dark .psi-details{background:rgba(15,23,42,.62)}.psi-desc{font-size:.82rem;color:#64748b;overflow-wrap:anywhere;word-break:break-word}.dark .psi-desc{color:#94a3b8}
.psi-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px}.psi-table th,.psi-table td{padding:.7rem .8rem;border-bottom:1px solid rgba(148,163,184,.16);font-size:.76rem;text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}.dark .psi-table th,.dark .psi-table td{border-bottom-color:rgba(148,163,184,.12)}.psi-table th{font-weight:700;color:#334155}.dark .psi-table th{color:#cbd5e1}
.psi-dotOk{width:10px;height:10px;border-radius:999px;background:#16a34a;display:inline-block}.psi-dotNa{width:10px;height:10px;border-radius:999px;background:#94a3b8;display:inline-block}.psi-bullets{margin:0;padding-left:18px;display:grid;gap:6px}.psi-bullets li{color:#475569;font-size:.82rem}.dark .psi-bullets li{color:#94a3b8}
@media (max-width: 900px){.psi-shell{border-radius:1.25rem}.psi-h{padding:1.15rem 1rem .85rem;flex-direction:column}.psi-title{font-size:1.6rem}.psi-tabs,.psi-grid,.psi-section{padding-left:1rem;padding-right:1rem}.psi-bigDonut{flex-direction:column;align-items:flex-start}.psi-donutSvg{width:128px;height:128px;flex-basis:128px}}
/* ===== Extracted from admin/analytics_profile.php ===== */
.px-page,.px-page *{box-sizing:border-box}.px-page{font-family:"Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",ui-sans-serif,sans-serif,"Apple Color Emoji","Segoe UI Emoji";margin:0 auto;padding:14px}.px-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.px-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:138px;height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(148,163,184,.24);background:#fff;color:#0f172a;font-weight:700;text-decoration:none}html.dark .px-back{background:#09182d;color:#eff6ff;border-color:rgba(148,163,184,.18)}.px-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:#edf4ff;border:1px solid rgba(148,163,184,.18);font-weight:700}html.dark .px-badge{background:#0d2146;border-color:rgba(148,163,184,.18);color:#eff6ff}.px-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.px-tabs a{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:14px;border:1px solid rgba(148,163,184,.24);background:#fff;text-decoration:none;color:#64748b;font-size:14px;font-weight:700}html.dark .px-tabs a{background:#09182d;color:#d9e6ff;border-color:rgba(148,163,184,.18)}.px-tabs a.active{border-color:rgba(37,99,235,.28);background:#eef4ff;color:#0f172a}html.dark .px-tabs a.active{background:#0d2146;color:#eff6ff}.px-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px}.px-card{background:#fff;border:1px solid rgba(148,163,184,.22);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.05);overflow:hidden}html.dark .px-card{background:#061224;border-color:rgba(148,163,184,.18);color:#eff6ff}.px-h{padding:22px 22px 0}.px-b{padding:18px 22px 22px;min-width:0}.px-title{font-size:.9rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;font-weight:800}.px-name{font-size:2rem;font-weight:860;letter-spacing:-.04em;margin-top:10px}.px-id{display:inline-flex;align-items:center;padding:8px 10px;border-radius:12px;background:#edf3fb;color:#64748b;margin-top:8px;word-break:break-all}html.dark .px-id{background:#0b1a31;color:#8ea3c6}.px-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.px-kpi{padding:14px;border-radius:18px;background:#f8fbff;border:1px solid rgba(148,163,184,.18);min-width:0}html.dark .px-kpi{background:#0b1a31}.px-kpi .v{font-size: 1.3rem!important;font-weight:840;word-break:break-word}.px-kpi .l{margin-top:6px;color:#64748b;font-weight:700}.px-list{display:grid;gap:12px}.px-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:#f8fbff;border:1px solid rgba(148,163,184,.18);min-width:0}html.dark .px-row{background:#0b1a31}.px-sub{margin-top:6px;color:#64748b;word-break:break-word}.px-chart{height:260px;margin-top:10px}@media (max-width:980px){.px-grid{grid-template-columns:1fr}}@media (max-width:640px){.px-page{padding:10px}.px-head{flex-direction:column;align-items:stretch}.px-back,.px-badge{width:100%;justify-content:center}.px-tabs a{flex:1 1 calc(50% - 10px);min-width:calc(50% - 10px)}.px-hero{grid-template-columns:1fr 1fr}.px-row{grid-template-columns:1fr}.px-row>div:last-child{white-space:normal;color:#64748b}.px-card{border-radius:20px}}
/* ===== Extracted from admin/servers.php ===== */
.miniDonut{ width:40px; height:40px; }
/* ===== Extracted from admin/users.php ===== */
.us-shell{}
.us-hero{position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 58%,rgba(255,255,255,.94));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.dark .us-hero{border-color:rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(16,185,129,.12) 58%,rgba(15,23,42,.90));box-shadow:0 24px 70px rgba(2,6,23,.42)}
.us-hero:before{content:"";position:absolute;inset:auto -80px -120px auto;width:220px;height:220px;background:radial-gradient(circle,rgba(59,130,246,.20),transparent 70%);pointer-events:none}
.us-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3b82f6;margin-bottom:10px}
.us-title{font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1.04;font-weight:800;letter-spacing:-.03em;color:#0f172a}
.dark .us-title{color:#f8fafc}
.us-sub{margin-top:10px;max-width:720px;font-size:14px;color:#475569}
.dark .us-sub{color:#94a3b8}
.us-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.us-btn,.us-btn-secondary{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:14px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid transparent}
.us-btn{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;box-shadow:0 14px 34px rgba(37,99,235,.24)}
.us-btn-secondary{background:rgba(255,255,255,.78);border-color:rgba(148,163,184,.24);color:#0f172a}
.dark .us-btn-secondary{background:rgba(15,23,42,.7);border-color:rgba(148,163,184,.18);color:#e2e8f0}
.us-panel{border:1px solid rgba(148,163,184,.18);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:0 16px 50px rgba(15,23,42,.06)}
.dark .us-panel{background:rgba(15,23,42,.84);border-color:rgba(148,163,184,.14);box-shadow:0 22px 60px rgba(2,6,23,.36)}
.us-form{padding:24px}
.us-form input,.us-form select,.us-form textarea{border-radius:14px!important;padding:.8rem .95rem!important;border-color:rgba(148,163,184,.35)!important;box-shadow:none!important}
.dark .us-form input,.dark .us-form select,.dark .us-form textarea{border-color:rgba(71,85,105,.75)!important}
.us-tablewrap{overflow:hidden}
.us-table{width:100%;border-collapse:separate;border-spacing:0}
.us-table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;background:rgba(248,250,252,.9);padding:14px 16px;border-bottom:1px solid rgba(226,232,240,.95)}
.dark .us-table thead th{color:#94a3b8;background:rgba(15,23,42,.92);border-bottom-color:rgba(51,65,85,.85)}
.us-table tbody td{padding:16px;border-bottom:1px solid rgba(226,232,240,.75)}
.dark .us-table tbody td{border-bottom-color:rgba(30,41,59,.95)}
.us-table tbody tr:hover td{background:rgba(59,130,246,.04)}
.dark .us-table tbody tr:hover td{background:rgba(37,99,235,.08)}
.us-chip{display:inline-flex;align-items:center;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;background:rgba(59,130,246,.1);color:#1d4ed8}
.dark .us-chip{background:rgba(59,130,246,.16);color:#93c5fd}
.us-linkbtn{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.28);font-size:13px;font-weight:700;text-decoration:none;color:#0f172a;background:rgba(255,255,255,.85)}
.us-linkbtn:hover{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.24);color:#1d4ed8}
.dark .us-linkbtn{color:#e2e8f0;background:rgba(15,23,42,.76);border-color:rgba(71,85,105,.82)}
.dark .us-linkbtn:hover{background:rgba(37,99,235,.14);border-color:rgba(59,130,246,.32);color:#bfdbfe}
.us-linkbtn-danger{border-color:rgba(251,113,133,.28);color:#be123c;background:rgba(255,241,242,.88)}
.dark .us-linkbtn-danger{background:rgba(76,5,25,.36);color:#fecdd3;border-color:rgba(190,24,93,.26)}
/* ===== Extracted from admin/seo_report_view.php ===== */
.seo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.seo-name{font-size:22px;font-weight:700;line-height:1.1}
.seo-url{color:var(--tw-prose-links,#3B82F6);word-break:break-all}
.seo-meta{font-size:12px;color:rgb(107 114 128)}
.dark .seo-meta{color:rgb(148 163 184)}
.seo-layout{display:grid;grid-template-columns: 280px 1fr;gap:16px}
@media (max-width: 1024px){.seo-layout{grid-template-columns:1fr;}}
/* Mobile: only stack the score header card; keep other flex layouts. */
@media (max-width: 640px){
.seo-score-card{flex-direction:column;align-items:flex-start;overflow:scroll;}
.seo-score-left{flex-direction:column;align-items:flex-start;gap:14px}
.seo-shot{width:100%;max-width:360px;margin-top:10px}
}
/* Sidebar should be sticky on desktop, but NOT on mobile */
.seo-side{position:static;top:auto;align-self:start}
@media (min-width: 1024px){
.seo-side{position:sticky;top:16px;}
}
/* --- PageSpeed (PSI-like) --- */
.psi-shell{background:#fff;border:1px solid rgb(229 231 235);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.dark .psi-shell{background:rgb(15 23 42);border-color:rgb(30 41 59)}
.psi-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.psi-title{font-weight:700}
.psi-sub{font-size:12px;color:rgb(107 114 128)}
.dark .psi-sub{color:rgb(148 163 184)}
.psi-donuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width: 768px){.psi-donuts{grid-template-columns:repeat(2,minmax(0,1fr));}}
.psi-donut{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;border-radius:16px;background:rgb(249 250 251);border:1px solid rgb(229 231 235)}
.dark .psi-donut{background:rgb(2 6 23);border-color:rgb(30 41 59)}
.psi-donut-label{margin-top:6px;font-size:12px;color:rgb(55 65 81)}
.dark .psi-donut-label{color:rgb(203 213 225)}
.psi-ring{width:72px;height:72px;position:relative}
.psi-ring svg{display:block}
.psi-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700}
.psi-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 768px){.psi-metrics{grid-template-columns:1fr}}
.psi-metric{padding:14px;border-radius:14px;border:1px solid rgb(229 231 235);background:#fff}
.dark .psi-metric{border-color:rgb(30 41 59);background:rgb(15 23 42)}
.psi-metric-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.psi-metric-name{font-size:13px;color:rgb(31 41 55);text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.dark .psi-metric-name{color:rgb(226 232 240)}
.psi-metric-val{font-size:22px;font-weight:700}
.psi-bar{margin-top:10px;height:6px;border-radius:999px;position:relative;overflow:hidden;background:linear-gradient(90deg,#22c55e 0 70%, #f59e0b 70% 90%, #ef4444 90% 100%)}
.psi-bar::after{content:"";position:absolute;top:-4px;width:2px;height:14px;background:#111827;opacity:.7;left:var(--pos,50%)}
.dark .psi-bar::after{background:#e2e8f0}
.psi-accordion{border-top:1px solid rgb(229 231 235)}
.dark .psi-accordion{border-top-color:rgb(30 41 59)}
.psi-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 6px;border-bottom:1px solid rgb(229 231 235)}
.dark .psi-row{border-bottom-color:rgb(30 41 59)}
.psi-row-left{display:flex;align-items:center;gap:10px;min-width:0}
.psi-row-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psi-row-right{display:flex;align-items:center;gap:10px}
.psi-savings{font-size:12px;color:#ef4444;white-space:nowrap}
.psi-caret{transition:transform .15s ease;opacity:.7}
.psi-shell[open] .psi-caret{transform:rotate(180deg)}
.psi-details{padding:12px 6px 18px 6px;background:rgb(249 250 251)}
.dark .psi-details{background:rgb(2 6 23)}
.psi-table{width:100%;border-collapse:separate;border-spacing:0}
.psi-table th,.psi-table td{padding:8px 10px;border-bottom:1px solid rgb(229 231 235);font-size:12px;text-align:left;vertical-align:top}
.dark .psi-table th,.dark .psi-table td{border-bottom-color:rgb(30 41 59)}
.psi-table th{font-weight:600;color:rgb(55 65 81)}
.dark .psi-table th{color:rgb(203 213 225)}
.psi-muted{font-size:12px;color:rgb(107 114 128)}
.dark .psi-muted{color:rgb(148 163 184)}
.seo-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px}
.seo-list a:hover{background:rgba(59,130,246,.08)}
.dark .seo-list a:hover{background:rgba(59,130,246,.14)}
.seo-list .is-active{background:rgba(59,130,246,.12)}
.dark .seo-list .is-active{background:rgba(59,130,246,.18)}
.seo-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 10px;border-bottom:1px solid rgba(148,163,184,.25);background:rgba(148,163,184,.06)}
.dark .seo-tabs{background:rgba(148,163,184,.08);border-bottom-color:rgba(148,163,184,.2)}
.seo-tab{padding:10px 12px;font-weight:800;font-size:13px;cursor:pointer;border:1px solid rgba(148,163,184,.22);border-radius:14px;display:flex;align-items:center;gap:8px;user-select:none;transition:background .15s,border-color .15s,color .15s}
.seo-tab:hover{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35)}
.dark .seo-tab:hover{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35)}
.seo-tab.is-active{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.45);color:rgb(59 130 246)}
.dark .seo-tab.is-active{background:rgba(59,130,246,.18)}
.seo-tab-ic{display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.seo-tab-ic svg{width:16px;height:16px;display:block}
.seo-tab .badge{padding:4px 8px;font-size:11px}
.seo-panel{display:none}
.seo-panel.is-active{display:block}
.seo-ic{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:999px;font-size:13px;font-weight:800}
.seo-ic-pass{background:rgba(34,197,94,.15);color:rgb(34 197 94)}
.seo-ic-fail{background:rgba(239,68,68,.15);color:rgb(239 68 68)}
.seo-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(148,163,184,.2)}
.seo-item:last-child{border-bottom:0}
.seo-item h4{font-weight:700}
.seo-item p{margin-top:2px;font-size:13px;color:rgb(75 85 99)}
.dark .seo-item p{color:rgb(148 163 184)}
.seo-details{margin-top:8px}
.seo-details-sum{cursor:pointer;font-size:12px;font-weight:600;color:rgb(59 130 246)}
.dark .seo-details-sum{color:rgb(147 197 253)}
.seo-kv{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-top:1px dashed rgba(148,163,184,.25)}
.seo-k{min-width:110px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:rgb(107 114 128)}
.dark .seo-k{color:rgb(148 163 184)}
.seo-v{font-size:12px;color:rgb(31 41 55);word-break:break-word}
.dark .seo-v{color:rgb(226 232 240)}
.seo-sec{margin-top:14px}
.seo-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.seo-sec-title{display:flex;align-items:center;gap:10px;font-weight:800}
.seo-sec-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgb(107 114 128)}
.dark .seo-sec-pill{color:rgb(148 163 184)}
.seo-sec-card{border:1px solid rgba(148,163,184,.25);border-radius:16px;overflow:hidden}
.dark .seo-sec-card{border-color:rgba(148,163,184,.2)}
.seo-metric{position:relative;padding-left:14px}
.seo-metric:before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:4px;border-radius:999px;opacity:.95}
.seo-metric-ok:before{background:#22c55e}
.seo-metric-warn:before{background:#f59e0b}
.seo-metric-down:before{background:#ef4444}
.seo-donut{width:180px;height:180px}
.seo-donut text{font-weight:900;font-size:24px;fill:currentColor}
.seo-donut .sub{font-weight:700;font-size:12px;opacity:.75}
.seo-score-ok{color:#15803d}
.seo-score-warn{color:#b45309}
.seo-score-down{color:#b91c1c}
.dark .seo-score-ok{color:#86efac}
.dark .seo-score-warn{color:#fdba74}
.dark .seo-score-down{color:#fca5a5}
/* History: show per-item delete icon only on hover (cleaner list) */
.seo-history-row{position:relative}
.seo-history-del{opacity:0;pointer-events:none;transform:translateX(4px);transition:opacity 140ms ease, transform 140ms ease}
.seo-history-row:hover .seo-history-del{opacity:1;pointer-events:auto;transform:translateX(0)}
/* No hover on touch devices: always show the delete button */
@media (hover: none){
.seo-history-del{opacity:1;pointer-events:auto;transform:none}
}
/* ===== Extracted from admin/project_pm_pages.php ===== */
.pm-shell{display:grid;gap:20px}.pm-card{border-radius:24px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.92);box-shadow:0 18px 44px rgba(15,23,42,.06)}.dark .pm-card{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)} .pm-section{padding:22px}.pm-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}.pm-row{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(248,250,252,.85);border:1px solid rgba(148,163,184,.14);align-items:center}.dark .pm-row{background:rgba(2,6,23,.4)}.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:14px;font-weight:800;text-decoration:none}.pm-btn-primary{background:var(--primary);color:#fff}.pm-btn-secondary{background:rgba(255,255,255,.9);color:#0f172a;border:1px solid rgba(148,163,184,.18)} .dark .pm-btn-secondary{background:rgba(15,23,42,.76);color:#e2e8f0}.pm-input,.pm-select,.pm-textarea{width:100%;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.9);padding:12px 14px}.dark .pm-input,.dark .pm-select,.dark .pm-textarea{background:rgba(2,6,23,.45);border-color:rgba(148,163,184,.15);color:#e2e8f0}.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b}.pm-rich{min-height:420px;font-family:inherit;line-height:1.65}
@media (max-width:1100px){.pm-grid{grid-template-columns:1fr}}
/* ===== Extracted from admin/analytics_view.php ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--font:"Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,ui-sans-serif,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bg:#eff4fb;--bg2:#f7f9fc;--panel:#ffffff;--panel2:#f9fbff;--panel3:#f3f6fb;--text:#0f172a;--muted:#66758e;--muted2:#8b98ad;--line:rgba(148,163,184,.22);--line2:rgba(148,163,184,.33);--blue:#2563eb;--cyan:#06b6d4;--violet:#8b5cf6;--emerald:#10b981;--amber:#f59e0b;--rose:#ef4444;--shadow:0 12px 28px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.03)}
html.dark{--bg:#04101f;--bg2:#071528;--panel:#071425;--panel2:#09182c;--panel3:#0d1e34;--text:#eef5ff;--muted:#91a4c3;--muted2:#7086a8;--line:rgba(148,163,184,.16);--line2:rgba(148,163,184,.24);--shadow:0 18px 44px rgba(2,6,23,.5), inset 0 1px 0 rgba(255,255,255,.02)}
.swx,.swx *{box-sizing:border-box}
.swx{font-family:var(--font);color:var(--text);background:none;min-height:calc(100vh - 4rem);padding:0;border-radius:28px}
.swx-mainwrap{max-width:100%;margin:0 auto;padding:0}
html.dark .swx{background:none}
body,body *,button,input,select,textarea{font-family:"Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,ui-sans-serif,sans-serif!important}
.swx-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.swx-topnav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.swx-topnav a{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel),var(--panel2));text-decoration:none;color:var(--muted);font-size:14px;font-weight:700}.swx-topnav a.active{background:var(--panel3);border-color:rgba(37,99,235,.28);color:var(--text)}
.swx-brand{display:flex;align-items:center;gap:16px;min-width:0}.swx-logoimg{width:60px;height:60px;border-radius:18px;object-fit:contain;display:block}.swx-title{font-size:18px;line-height:1.15;font-weight:700;letter-spacing:-.02em}.swx-domain{margin-top:4px;font-size:13px;color:var(--muted)}
.swx-right{display:flex;align-items:center;gap:12px}.swx-back{height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:var(--shadow);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1}.swx-back svg{width:18px;height:18px;display:block;flex:0 0 auto}.swx-back span{display:block;line-height:1}
.swx-toolbar{position:sticky;top:14px;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:color-mix(in srgb,var(--panel) 94%, transparent);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:18px}
.swx-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.swx-btn,.swx-icon,.swx-range{height:46px;border-radius:16px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel),var(--panel2));display:inline-flex;align-items:center;gap:10px;padding:0 14px;font-size:14px;font-weight:600;color:var(--text);box-shadow:0 4px 10px rgba(15,23,42,.03)}.swx-btn.active{background:linear-gradient(180deg,var(--panel3),var(--panel));border-color:rgba(37,99,235,.3);color:var(--blue)}.swx-icon{width:46px;justify-content:center;padding:0}.swx-icon svg{width:19px;height:19px}.swx-live-dot{width:12px;height:12px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14)}
.swx-dropdown{position:relative}.swx-menu{display:none;position:absolute;left:0;top:calc(100% + 10px);width:min(92vw,380px);max-height:min(72vh,560px);overflow:auto;background:var(--panel);opacity:1;backdrop-filter:none;border:1px solid var(--line);border-radius:22px;box-shadow:0 22px 50px rgba(15,23,42,.14);padding:10px;z-index:120}.swx-menu.open{display:block}.swx-menu.right{left:auto;right:0}.swx-menu.range-panel{width:min(92vw,640px);max-height:min(82vh,720px);padding:12px}.swx-menu h4{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.01em;text-transform:none}.swx-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;font-size:14px;cursor:pointer;color:var(--text);transition:background .15s ease,color .15s ease}.swx-menu-item:hover{background:var(--panel3)}.swx-menu-item.active{background:var(--panel3);color:var(--blue)}.swx-menu-item small{color:var(--muted)}.swx-range-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 8px;padding:6px;border-radius:14px;background:var(--panel3)}.swx-range-tab{height:40px;border-radius:10px;border:1px solid transparent;background:transparent;font-size:13px;font-weight:600;color:var(--muted)}.swx-range-tab.active{background:var(--panel);border-color:var(--line);color:var(--text);font-weight:700}.swx-shortcut{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.swx-chipbar{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}.swx-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;background:var(--panel3);border:1px solid var(--line);font-size:13px;font-weight:700}.swx-chip button{border:none;background:none;color:var(--muted);font-size:18px;line-height:1}
.swx-menu-backdrop{display:none!important}
.swx-main{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,.7fr);gap:16px;align-items:start}.swx-card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}.swx-card-h{padding:20px 20px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.swx-card-t{font-size:16px;font-weight:700;letter-spacing:-.02em}.swx-card-s{margin-top:5px;font-size:13px;color:var(--muted)}.swx-card-b{padding:16px 20px 20px}
.swx-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 4px;margin-bottom:8px}.swx-kpi{min-width:0}.swx-kv{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;min-width:0}.swx-kv strong{font-size:30px;line-height:1;font-weight:700;letter-spacing:-.03em}.swx-kl{margin-top:7px;font-size:13px;font-weight:600}.swx-delta{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);background:var(--panel3);font-size:12px;font-weight:700}.swx-delta.up{color:var(--emerald);border-color:rgba(16,185,129,.28)}.swx-delta.down{color:var(--rose);border-color:rgba(239,68,68,.28)}
.swx-chart{height:400px}.swx-side-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.swx-side-row:last-child{border-bottom:none}.swx-side-row span{color:var(--muted);font-size:14px}.swx-side-row strong{font-size:18px;letter-spacing:-.02em;font-weight:700}
.swx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.swx-block-h{padding:18px 18px 0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.swx-block-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700}.swx-block-title svg{width:18px;height:18px;color:var(--muted)}.swx-tabs{display:flex;gap:8px;flex-wrap:wrap}.swx-tab{height:34px;padding:0 12px;border:1px solid transparent;border-radius:12px;background:var(--panel3);color:var(--muted);font-size:13px;font-weight:700;position:relative}.swx-tab.active{color:var(--text);background:var(--panel);border-color:var(--line2);box-shadow:0 4px 10px rgba(15,23,42,.04)}.swx-tab.active::after{display:none}
.swx-list{padding:8px 10px 10px}.swx-headrow{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:0 6px 4px;color:var(--muted);font-size:12px;font-weight:600}.swx-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:1px 0;border-radius:12px;cursor:pointer}.swx-row:hover{background:var(--panel3)}.swx-maincell{position:relative;display:flex;align-items:center;gap:8px;padding:4px 8px;min-width:0}.swx-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);height:74%;border-radius:10px;background:linear-gradient(90deg,rgba(37,99,235,.12),rgba(37,99,235,.04))}.dark .swx-bar{background:linear-gradient(90deg,rgba(59,130,246,.20),rgba(59,130,246,.06))}.swx-ibox{width:30px;height:30px;border-radius:10px;background:var(--panel3);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;position:relative;z-index:1}.swx-ibox img{width:100%;height:100%;object-fit:cover}.swx-ibox svg{width:16px;height:16px;color:var(--muted)}.swx-label{position:relative;z-index:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.swx-count{padding-right:8px;font-size:14px;font-weight:700}.swx-foot{display:flex;justify-content:center;padding-top:8px}.swx-ghost{height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.swx-modal-backdrop{position:fixed!important;inset:0;background:rgba(15,23,42,.34);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:.18s;z-index:80}.swx-modal-backdrop.open{opacity:1;pointer-events:auto}.swx-modal,.swx-filter-modal{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important}.swx-modal{display:flex;flex-direction:column;width:min(1080px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.22);opacity:0;pointer-events:none;transition:.2s;z-index:91}.swx-modal.open{opacity:1;pointer-events:auto}.swx-modal-h{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.swx-modal-b{padding:18px 22px 22px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;max-height:calc(100vh - 150px);overflow:hidden}.swx-mini{display:grid;gap:12px;align-self:start;position:sticky;top:0}.swx-mini .box{padding:16px;border-radius:18px;background:var(--panel3);border:1px solid var(--line)}.swx-mini .box .v{font-size:26px;font-weight:850;letter-spacing:-.04em}.swx-mini .box .l{margin-top:6px;color:var(--muted);font-size:13px;font-weight:700}.swx-modal-tablewrap{max-height:calc(100vh - 190px);overflow:auto;border-left:1px solid var(--line);padding-left:18px}.swx-table{width:100%;border-collapse:collapse}.swx-table th,.swx-table td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.swx-table th{position:sticky;top:0;background:var(--panel2);font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:800}.swx-table tr:hover td{background:var(--panel3)}.swx-empty{padding:18px;color:var(--muted);font-size:14px}.swx-live-list{max-height:320px;overflow:auto;padding:4px}.swx-live-list .swx-empty{padding:12px}.swx-live-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--panel2);border:1px solid var(--line);margin-bottom:10px}.swx-live-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}.swx-live-meta span{display:inline-flex;align-items:center;gap:6px}.swx-live-item .swx-ghost{height:36px}.swx-filter-modal{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(1120px,calc(100vw - 32px));max-height:calc(100vh - 40px);background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:0 34px 90px rgba(15,23,42,.22);opacity:0;pointer-events:none;transition:.2s;z-index:92;overflow: scroll;z-index: 200000000000;}.swx-filter-modal.open{opacity:1;pointer-events:auto}.swx-filter-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.swx-filter-title{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:800;letter-spacing:.02em}.swx-filter-body{display:grid;grid-template-columns:240px minmax(0,1fr);max-height:calc(100vh - 118px);overflow:hidden}.swx-filter-sidebar{padding:18px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--panel3) 78%, transparent);overflow:auto}.swx-filter-col{display:flex;align-items:center;padding:11px 14px;border-radius:14px;font-size:14px;font-weight:700;cursor:pointer;color:var(--muted)}.swx-filter-col:hover,.swx-filter-col.active{background:var(--panel);color:var(--text);box-shadow:0 4px 14px rgba(15,23,42,.05)}.swx-filter-main{padding:18px;display:grid;gap:14px;overflow:hidden}.swx-filter-row{display:grid;grid-template-columns:minmax(0,1.1fr) 170px minmax(0,1fr) 48px;gap:10px;align-items:center}.swx-select,.swx-input{width:100%;height:46px;border-radius:15px;border:1px solid var(--line2);background:var(--panel);padding:0 14px;font-size:14px;color:var(--text);outline:none}.swx-select:focus,.swx-input:focus{border-color:rgba(37,99,235,.35);box-shadow:0 0 0 4px rgba(37,99,235,.10)}.swx-filter-trash,.swx-primary,.swx-filter-add{height:46px;border-radius:15px;border:1px solid var(--line2);background:var(--panel);display:inline-flex;align-items:center;justify-content:center;font-weight:700}.swx-filter-trash{width:48px;padding:0}.swx-primary{padding:0 18px;background:var(--text);color:var(--panel)}.swx-filter-add{padding:0 16px;background:var(--panel3)}.swx-filter-results{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;min-height:0}.swx-muted-note{margin-top:10px;font-size:13px;color:var(--muted);max-width:220px}.swx-filter-values{min-height:180px;max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:8px;background:var(--panel2)}.swx-filter-value{padding:8px 10px;border-radius:12px;font-size:14px;cursor:pointer}.swx-filter-value:hover,.swx-filter-value.active{background:var(--panel3);color:var(--blue)}.swx-filter-actions{display:flex;justify-content:flex-end}.swx-map-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:2px 0 10px}.swx-map-pill{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);font-size:13px;font-weight:700}.swx-map-pill strong{margin-left:auto;font-size:12px}.swx-map-card{padding:2px 4px 0}.swx-worldmap{height: 380px;width:100%;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--panel2),var(--panel))}.swx-map-actions{display:flex;justify-content:flex-end;padding:8px 8px 0}.swx-map-expand{height:40px;min-width:40px;padding:0 12px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);font-weight:700}
.swx-comparebar{display:none;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));border-radius:18px;box-shadow:var(--shadow);margin:0 0 14px}.swx-comparebar.open{display:flex}.swx-compare-sep{color:var(--muted);font-weight:700}.swx-compare-choice{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:14px;border:1px solid var(--line2);background:var(--panel3);font-size:14px;font-weight:700}.swx-date-modal{position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:min(520px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(15,23,42,.22);opacity:0;pointer-events:none;transition:.2s;z-index:93}.swx-date-modal.open{opacity:1;pointer-events:auto}.swx-date-body{padding:18px 22px 22px;display:grid;gap:14px}.swx-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.swx-date-grid label{display:grid;gap:8px;font-size:13px;color:var(--muted);font-weight:700}.swx-date-actions{display:flex;justify-content:flex-end;gap:10px}.swx-map-shell{position:relative}.swx-map-expand{display:inline-flex;align-items:center;justify-content:center;gap:8px}.swx-map-expand svg{width:16px;height:16px}.swx-map-full .swx-modal-b{grid-template-columns:1fr}.swx-map-full .swx-modal-tablewrap{border-left:none;padding-left:0;max-height:none}.swx-map-full .swx-worldmap{height:72vh}.swx-flagtip{display:inline-flex;align-items:center;gap:8px}.swx-flagtip img{width:22px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.08);object-fit:cover}.swx-scrolllock{overflow:hidden}
html.dark .swx-modal-backdrop{background:rgba(2,6,23,.62)!important;backdrop-filter:blur(8px)!important}
html.dark .swx-modal,
html.dark .swx-filter-modal,
html.dark .swx-date-modal{
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%)!important;
background:linear-gradient(180deg,rgba(8,20,37,.98),rgba(6,16,31,.96))!important;
color:var(--text)!important;
border-color:rgba(148,163,184,.22)!important;
box-shadow:0 30px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.03)!important;
}
html.dark .swx-modal-h,
html.dark .swx-filter-h{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border-bottom-color:rgba(148,163,184,.18)!important}
html.dark .swx-modal-b,
html.dark .swx-filter-body,
html.dark .swx-date-body{background:transparent!important}
html.dark .swx-mini .box,
html.dark .swx-live-item,
html.dark .swx-filter-values,
html.dark .swx-worldmap,
html.dark .swx-map-pill,
html.dark .swx-table th,
html.dark .swx-filter-sidebar,
html.dark .swx-compare-choice,
html.dark .swx-select,
html.dark .swx-input,
html.dark .swx-filter-trash,
html.dark .swx-filter-add,
html.dark .swx-map-expand,
html.dark .swx-ghost{
background:rgba(11,25,45,.88)!important;
color:var(--text)!important;
border-color:rgba(148,163,184,.18)!important;
}
html.dark .swx-table td,
html.dark .swx-table th,
html.dark .swx-empty,
html.dark .swx-muted-note,
html.dark .swx-date-grid label,
html.dark .swx-live-meta,
html.dark .swx-mini .box .l{color:var(--muted)!important}
html.dark .swx-tablewrap,
html.dark .swx-modal-tablewrap{border-left-color:rgba(148,163,184,.16)!important}
html.dark .swx-table tr:hover td,
html.dark .swx-filter-col:hover,
html.dark .swx-filter-col.active,
html.dark .swx-filter-value:hover,
html.dark .swx-filter-value.active{background:rgba(37,99,235,.16)!important;color:#dbeafe!important}
html.dark .swx-select:focus,
html.dark .swx-input:focus{border-color:rgba(59,130,246,.55)!important;box-shadow:0 0 0 4px rgba(59,130,246,.16)!important}
html.dark .swx-primary{background:#3b82f6!important;border-color:#3b82f6!important;color:#eff6ff!important}
html.dark .swx-primary:hover{background:#60a5fa!important;border-color:#60a5fa!important;color:#081120!important}
html.dark .swx-icon,
html.dark .swx-modal a,
html.dark .swx-filter-modal a,
html.dark .swx-date-modal a,
html.dark .swx-modal button,
html.dark .swx-filter-modal button,
html.dark .swx-date-modal button{color:var(--text)!important}
html.dark .swx-select option{background:#0b1728!important;color:#eef5ff!important}
@media (max-width:1200px){.swx-main{grid-template-columns:1fr}.swx-grid{grid-template-columns:1fr}.swx-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.swx-kv strong{font-size:52px}}
@media (max-width:860px){.swx{padding:10px;border-radius:0}.swx-mainwrap{padding:0 4px}.swx-head{align-items:flex-start;gap:12px}.swx-toolbar{padding:10px;display:grid;grid-template-columns:1fr;align-items:stretch;gap:10px}.swx-left,.swx-right{display:contents}.swx-group{width:100%;min-width:0;display: inline-grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.swx-group>*,.swx-group .swx-dropdown{min-width:0}.swx-group:first-child>.swx-dropdown:first-child{grid-column:span 2}.swx-group:first-child>#filterBtn{grid-column:span 2}.swx-group:last-child>#refreshBtn,.swx-group:last-child>#chartBtn{grid-column:span 1}.swx-group:last-child>.swx-dropdown{min-width:0}.swx-group:last-child>.swx-dropdown:has(#metricBtn){grid-column:span 1}.swx-group:last-child>.swx-dropdown:has(#rangeBtn){grid-column:span 4}.swx-btn,.swx-range{width:100%;max-width: -webkit-fill-available;justify-content:space-between;min-width:0}.swx-btn span,.swx-range span{min-width:0;overflow:hidden;text-overflow:ellipsis}.swx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}.swx-kv strong{font-size:clamp(28px,9vw,42px)}.swx-chart{height:320px}.swx-modal,.swx-filter-modal,.swx-date-modal{width:calc(100vw - 12px);max-width:calc(100vw - 12px)}.swx-modal-b,.swx-filter-body{grid-template-columns:1fr}.swx-modal-tablewrap{border-left:none;padding-left:0;overflow:auto}.swx-filter-sidebar{border-right:none;border-bottom:1px solid var(--line)}.swx-main{grid-template-columns:1fr!important}.swx-grid{grid-template-columns:1fr}.swx-card{overflow:hidden}}
@media (max-width:560px){.swx-modal-b{grid-template-columns:1fr}.swx-mini{display:none}.swx-modal-tablewrap{border-left:none;padding-left:0;max-height:calc(100vh - 180px);overflow:auto}.swx-modal-actions-mobile{display:flex}.swx-quickfilter-row{display:flex;margin:0 0 10px}.swx-quickfilter-row .swx-ghost{height:40px} .swx{padding:0;border-radius:0}.swx-mainwrap{padding:0}.swx-title{font-size:16px}.swx-domain{font-size:11px}.swx-head{padding:10px 10px 0}.swx-brand{gap:10px;min-width:0}.swx-brandtext{min-width:0}.swx-topnav{gap:8px;margin:0 0 10px}.swx-topnav a{flex:1 1 calc(33.333% - 6px);padding:0 10px;height:42px}.swx-right{width:100%;justify-content:space-between}.swx-toolbar{padding:10px;gap:8px;border-radius:20px;position:static}.swx-group{grid-template-columns: repeat(8,minmax(0,1fr));gap: 8px;}.swx-group:first-child>.swx-dropdown:first-child,.swx-group:first-child>.swx-dropdown:nth-child(2){grid-column: span 3;}.swx-group:first-child>#filterBtn{grid-column:span 2}.swx-group:last-child>.swx-dropdown:has(#rangeBtn){grid-column:span 4}.swx-btn,.swx-range{min-width:0;padding:0 12px;font-size:12px;height:44px}.swx-btn span,.swx-range span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;line-height:1.15}.swx-icon{width:44px;height:44px}.swx-main{gap:12px}.swx-card-h{padding:14px 14px 0}.swx-card-b{padding:12px 14px 14px}.swx-card-s{font-size:11px}.swx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px}.swx-kv{gap:4px;align-items:start}.swx-kv strong{font-size:clamp(20px,8vw,28px)}.swx-kl{margin-top:4px;font-size:11px}.swx-delta{display:inline-flex;height:22px;padding:0 7px;font-size:10px;line-height:1}.swx-chart{height:260px}.swx-tabs{gap:8px}.swx-modal-b,.swx-filter-main{padding:12px}.swx-live-item{grid-template-columns:auto 1fr}.swx-live-item a{grid-column:span 2}.swx-range-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.swx-filter-row,.swx-filter-results,.swx-map-preview{grid-template-columns:1fr}.swx-worldmap{height:300px}.swx-menu,.swx-menu.right,.swx-menu.range-panel{position:absolute!important;left:0!important;right:auto!important;top:calc(100% + 8px)!important;bottom:auto!important;width: min(calc(100vw - 24px),280px)!important;max-width: min(calc(100vw - 24px),280px)!important;max-height:min(68vh,520px)!important;border-radius:18px;padding:10px;background:var(--panel)!important;opacity: 1;}.swx-dropdown:has(#rangeBtn) .swx-menu.range-panel{width: min(calc(100vw - 24px),420px)!important;max-width: min(calc(100vw - 24px),320px)!important;left: -100px!important;right:auto!important}.swx-comparebar{padding:8px 10px;gap:8px}.swx-compare-choice{flex:1 1 calc(50% - 8px);min-width:0;justify-content:space-between;height:38px;font-size:12px}.swx-compare-sep{font-size:12px}.swx-card{border-radius:20px}.swx-block-h{padding:16px 14px 0}.swx-list,.swx-card > .swx-b,.swx-card > div{min-width:0}.swx-label{word-break:break-word}.swx-block-title,.swx-card-t{font-size:14px}.swx-count{font-size:13px}.swx-menu-item{font-size:13px;padding:10px 12px}.swx-shortcut{width:32px;height:32px;font-size:12px}}
/* ===== Extracted from admin/project_pm_email_overview.php ===== */
.pm-mail-hero{position:relative;overflow:hidden;border-radius:30px;padding:28px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(14,165,233,.10) 55%,rgba(255,255,255,.96));box-shadow:0 26px 70px rgba(15,23,42,.08);margin-bottom:18px}
.pm-mail-hero:before{content:"";position:absolute;inset:auto -80px -120px auto;width:280px;height:280px;border-radius:999px;background:radial-gradient(circle,rgba(59,130,246,.18),transparent 72%)}
.pm-mail-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pm-mail-title{margin:16px 0 8px;font-size:40px;line-height:1.02;font-weight:950;letter-spacing:-.05em;color:#0f172a}
.pm-mail-copy{max-width:780px;font-size:15px;line-height:1.8;color:#64748b}
.pm-mail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:18px}
.pm-mail-card{border-radius:26px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.94);box-shadow:0 16px 40px rgba(15,23,42,.06)}
.pm-mail-card .hd{padding:22px 24px 0}.pm-mail-card .bd{padding:24px}
.pm-field{display:grid;gap:8px}.pm-field label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.pm-input,.pm-select,.pm-textarea{width:100%;border:1px solid #dbe3ef;border-radius:18px;background:#fff;padding:14px 16px;font-size:15px;color:#0f172a;outline:none}
.pm-textarea{min-height:140px;resize:vertical}
.pm-input:focus,.pm-select:focus,.pm-textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 4px rgba(59,130,246,.14)}
.pm-checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pm-check{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #e2e8f0;border-radius:20px;background:#fff}
.pm-check input{margin-top:3px}.pm-check strong{display:block;color:#0f172a;font-size:15px}.pm-check span{display:block;color:#64748b;font-size:13px;line-height:1.6}
.pm-actions{display:flex;gap:12px;flex-wrap:wrap}.pm-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 20px;border-radius:999px;font-weight: 500;}.pm-btn-primary{background: linear-gradient(135deg,#2563eb,#3b82f6)!important;color:#fff;}.pm-btn-secondary{border:1px solid #dbe3ef;background:#fff;color:#0f172a}
.pm-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.pm-kpi{padding:16px;border-radius:22px;border:1px solid #e2e8f0;background:rgba(255,255,255,.76)}.pm-kpi b{display:block;font-size:28px;line-height:1;color:#0f172a;font-weight:900}.pm-kpi span{display:block;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.pm-preview{padding:18px;border-radius:22px;border:1px solid #e2e8f0;background:linear-gradient(180deg,#fff,#f8fafc)}
.pm-list{display:grid;gap:10px;margin-top:14px}.pm-item{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}.pm-item strong{display:block;color:#0f172a}.pm-item small{display:block;color:#64748b;margin-top:2px}.pm-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:800}
@media (max-width:1100px){.pm-mail-grid{grid-template-columns:1fr}.pm-kpis{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:720px){.pm-mail-title{font-size:32px}.pm-checkgrid,.pm-kpis{grid-template-columns:1fr}}
/* ===== Extracted from admin/project_pm_clients.php ===== */
.pm-hero{position:relative;overflow:hidden;border-radius:28px;padding:28px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(168,85,247,.08) 54%,rgba(255,255,255,.96));box-shadow:0 30px 80px rgba(15,23,42,.08);margin-bottom:18px}
.dark .pm-hero{background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(168,85,247,.12) 54%,rgba(15,23,42,.96));border-color:rgba(148,163,184,.16)}
.pm-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(37,99,235,.1);color:#1d4ed8;font-size:12px;font-weight: 600;letter-spacing:.08em;text-transform:uppercase}
.dark .pm-pill{background:rgba(59,130,246,.18);color:#bfdbfe}
.pm-grid{display:grid;gap:16px}.pm-panel{border-radius:24px;border:1px solid rgba(148,163,184,.16);background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.06)}
.dark .pm-panel{background:rgba(15,23,42,.86);border-color:rgba(148,163,184,.14)}
.pm-avatar{width:36px;height:36px;border-radius:999px;object-fit:cover;background:#e2e8f0}
/* ===== Extracted from admin/financial_invoices.php ===== */
.pm-fin-hero{position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 58%,rgba(255,255,255,.94));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.dark .pm-fin-hero{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(16,185,129,.10) 58%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.pm-fin-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.dark .pm-fin-pill{background:rgba(59,130,246,.18);color:#bfdbfe}
.pm-fin-title{margin:14px 0 8px;font-size:32px;line-height:1.03;font-weight:900;letter-spacing:-.04em;color:#0f172a}
.dark .pm-fin-title{color:#f8fafc}
.pm-fin-copy{max-width:760px;font-size:14px;line-height:1.7;color:#64748b}
.dark .pm-fin-copy{color:#94a3b8}
.pm-fin-actions{display:flex;justify-content:flex-end;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pm-fin-cta{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700;box-shadow:0 18px 35px rgba(37,99,235,.20)}
.pm-fin-cta:hover{filter:brightness(1.03)}
.pm-fin-panel{border-radius:24px!important;border:1px solid rgba(148,163,184,.18)!important;background:rgba(255,255,255,.92)!important;box-shadow:0 14px 34px rgba(15,23,42,.06)!important;overflow:hidden}
.dark .pm-fin-panel{background:rgba(15,23,42,.86)!important;border-color:rgba(148,163,184,.16)!important;box-shadow:0 18px 38px rgba(2,6,23,.42)!important}
@media (max-width:900px){.pm-fin-title{font-size:28px}}
.pm-fin-shell{padding-bottom:24px}
.pm-fin-toolbar,.pm-fin-subtle{color:#64748b}.dark .pm-fin-toolbar,.dark .pm-fin-subtle{color:#94a3b8}
.pm-fin-panel .table-scroll{overflow:auto}
.pm-fin-panel .ta-table{width:100%;border-collapse:separate;border-spacing:0}
.pm-fin-panel .ta-table thead th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#64748b;background:rgba(248,250,252,.92);padding:14px 16px;border-bottom:1px solid rgba(226,232,240,.95)}
.dark .pm-fin-panel .ta-table thead th{color:#94a3b8;background:rgba(2,6,23,.55);border-bottom-color:rgba(51,65,85,.9)}
.pm-fin-panel .ta-table tbody td{padding:14px 16px;border-bottom:1px solid rgba(226,232,240,.8);vertical-align:middle}
.dark .pm-fin-panel .ta-table tbody td{border-bottom-color:rgba(51,65,85,.75)}
.pm-fin-panel .ta-table tbody tr:hover td{background:rgba(37,99,235,.035)}
.dark .pm-fin-panel .ta-table tbody tr:hover td{background:rgba(37,99,235,.08)}
.pm-fin-panel input,.pm-fin-panel select,.pm-fin-panel textarea{border-radius:14px!important;border-color:rgba(203,213,225,.95)!important;background:#fff!important;color:#0f172a!important}
.dark .pm-fin-panel input,.dark .pm-fin-panel select,.dark .pm-fin-panel textarea{background:rgba(2,6,23,.65)!important;color:#e2e8f0!important;border-color:rgba(71,85,105,.9)!important}
.pm-fin-panel input:focus,.pm-fin-panel select:focus,.pm-fin-panel textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;border-color:rgba(37,99,235,.65)!important}
.pm-fin-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
@media (max-width:1200px){.pm-fin-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pm-fin-stat-grid{grid-template-columns:1fr}}
.fin-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
@media (max-width:1200px){.fin-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fin-cards{grid-template-columns:1fr}}
.fin-card{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.92));padding:20px;box-shadow:0 16px 40px rgba(15,23,42,.06)}
.dark .fin-card{background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(2,6,23,.82));border-color:rgba(148,163,184,.14);box-shadow:0 20px 44px rgba(2,6,23,.42)}
.fin-card__value{font-size:28px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:#0f172a}
.dark .fin-card__value{color:#f8fafc}
.fin-card__label{margin-top:6px;font-size:13px;color:#64748b}
.dark .fin-card__label{color:#94a3b8}
.fin-card__bar{height:8px;border-radius:999px;background:rgba(148,163,184,.16);margin-top:18px;overflow:hidden}
.fin-card__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#38bdf8)}
.fin-card__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:rgba(37,99,235,.10);color:#2563eb}
.dark .fin-card__icon{background:rgba(59,130,246,.18);color:#bfdbfe}
.pm-fin-section-card{border-radius:24px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.94);box-shadow:0 16px 34px rgba(15,23,42,.06)}
.dark .pm-fin-section-card{background:rgba(15,23,42,.86);border-color:rgba(148,163,184,.16);box-shadow:0 18px 40px rgba(2,6,23,.42)}
.pm-fin-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(191,219,254,.9);background:rgba(239,246,255,.92);color:#1d4ed8;font-weight:700}
.dark .pm-fin-chip{background:rgba(30,41,59,.72);border-color:rgba(59,130,246,.28);color:#bfdbfe}
/* ===== Extracted from admin/project_management.php ===== */
.pm-wrap{display:grid;gap:22px}
.pm-hero{position:relative;overflow:hidden;border-radius:32px;padding:30px;border:1px solid rgba(59,130,246,.18);background:
linear-gradient(135deg, rgba(14,165,233,.96), rgba(37,99,235,.95) 48%, rgba(15,23,42,.95));
box-shadow:0 28px 80px rgba(37,99,235,.22);color:#fff}
.pm-hero:before{content:'';position:absolute;inset:auto -8% -35% auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.18), transparent 68%)}
.pm-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.pm-panel{border-radius:28px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.94);box-shadow:0 18px 44px rgba(15,23,42,.06)}
.dark .pm-panel{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.14)}
.pm-panel-body{padding:24px}
.pm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.pm-kpi{padding:18px;border-radius:22px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);backdrop-filter: blur(10px)}
.pm-kpi-num{font-size:34px;font-weight:900;line-height:1;margin-top:8px}
.pm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pm-link{display:block;padding:18px;border-radius:22px;background:rgba(248,250,252,.88);border:1px solid rgba(148,163,184,.14);text-decoration:none;color:inherit;transition:.18s transform,.18s box-shadow}
.pm-link:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(15,23,42,.08)}
.dark .pm-link{background:rgba(2,6,23,.38)}
.pm-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#64748b}
.pm-table{width:100%;border-collapse:separate;border-spacing:0 10px}
.pm-table td{padding:14px 16px;background:rgba(248,250,252,.88);border-top:1px solid rgba(148,163,184,.12);border-bottom:1px solid rgba(148,163,184,.12)}
.pm-table td:first-child{border-left:1px solid rgba(148,163,184,.12);border-radius:16px 0 0 16px}
.pm-table td:last-child{border-right:1px solid rgba(148,163,184,.12);border-radius:0 16px 16px 0}
.dark .pm-table td{background:rgba(2,6,23,.38)}
@media (max-width:1150px){.pm-grid,.pm-cards{grid-template-columns:1fr 1fr}.pm-kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pm-grid,.pm-cards,.pm-kpis{grid-template-columns:1fr}}
/* ===== Extracted from admin/analytics_profiles.php ===== */
:root{--ax-bg:#eff4fb;--ax-panel:#ffffff;--ax-panel2:#f8fbff;--ax-text:#0f172a;--ax-muted:#64748b;--ax-line:rgba(148,163,184,.24);--ax-chip:#eef4ff}html.dark{--ax-bg:#04101f;--ax-panel:#071425;--ax-panel2:#0a1930;--ax-text:#eef5ff;--ax-muted:#91a4c3;--ax-line:rgba(148,163,184,.22);--ax-chip:#0f223d}body{background:var(--ax-bg)}
.ax-page,.ax-page *{box-sizing:border-box}.ax-page{font-family:"Inter",-apple-system,system-ui,sans-serif;margin:0 auto;padding:16px}.ax-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.ax-brand{display:flex;align-items:center;gap:16px;min-width:0}.ax-logo{width:40px;height:40px;border-radius:0;object-fit:contain}.ax-title{font-size:18px;font-weight:700;color:var(--ax-text)}.ax-domain{margin-top:4px;font-size:13px;color:var(--ax-muted)}.ax-right{display:flex;align-items:center;gap:12px}.ax-back{height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--ax-line);background:var(--ax-panel);color:var(--ax-text);text-decoration:none;display:inline-flex;align-items:center;font-weight:700}.ax-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.ax-tabs a{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:14px;border:1px solid var(--ax-line);background:var(--ax-panel);text-decoration:none;color:var(--ax-muted);font-size:14px;font-weight:700}.ax-tabs a.active{background:var(--ax-chip);border-color:rgba(37,99,235,.28);color:var(--ax-text)}html.dark .ax-tabs a{background:var(--ax-panel2);color:var(--ax-text)}html.dark .ax-tabs a.active{background:#0d2146;color:#eff6ff}.ax-card{background:var(--ax-panel);border:1px solid var(--ax-line);border-radius:24px;box-shadow:0 12px 34px rgba(15,23,42,.08);padding:22px;overflow:hidden}.ax-card h2{margin:0 0 6px;font-size:16px}.ax-sub{color:var(--ax-muted);margin-bottom:16px}.ax-list{display:grid;gap:10px}.ax-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--ax-panel2);border:1px solid var(--ax-line);text-decoration:none;color:var(--ax-text);min-width:0}.ax-top{display:flex;align-items:center;gap:10px;font-size: 16px;font-weight:760;flex-wrap:wrap}.ax-meta{margin-top:6px;color:var(--ax-muted);word-break:break-word}.ax-pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:var(--ax-muted);gap:10px;flex-wrap:wrap}.ax-pager .nav{display:flex;gap:8px;flex-wrap:wrap}.ax-pager a{height:38px;padding:0 14px;border-radius:12px;border:1px solid var(--ax-line);background:var(--ax-panel);text-decoration:none;color:var(--ax-text);display:inline-flex;align-items:center;font-weight:700}.ax-pager span.badge{padding:8px 12px;border-radius:12px;background:var(--ax-chip)}@media (max-width:640px){.ax-page{padding:10px}.ax-head{align-items:flex-start;flex-direction:column}.ax-right,.ax-back{width:100%}.ax-tabs a{flex:1 1 calc(50% - 10px);min-width:calc(50% - 10px)}.ax-row{grid-template-columns:1fr;align-items:start}.ax-top{font-size:16px}.ax-row>div:last-child{white-space:normal;color:var(--ax-muted)}.ax-card{padding:16px;border-radius:20px}}
.mk-link-reset-strong{font-weight:900!important;text-decoration:none!important;color:inherit!important;}
.mk-mt-8{margin-top:8px!important;}
.mk-mt-10{margin-top:10px!important;}
.mk-mt-12{margin-top:12px!important;}
.mk-mt-16{margin-top:16px!important;}
.mk-flex-between-gap-12-center{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;}
.mk-flex-between-gap-12-top{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:flex-start!important;}
.mk-flex-between-gap-12-top-wrap{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:flex-start!important;flex-wrap:wrap!important;}
.mk-flex-gap-8{display:flex!important;gap:8px!important;}
.mk-grid-gap-10{display:grid!important;gap:10px!important;}
.mk-grid-gap-16{display:grid!important;gap:16px!important;}
.mk-grid-gap-16-mt-16{display:grid!important;gap:16px!important;margin-top:16px!important;}
.mk-grid-gap-16-mt-20{display:grid!important;gap:16px!important;margin-top:20px!important;}
.mk-title-28-top{margin:8px 0 0!important;font-size:28px!important;font-weight:900!important;}
.mk-grid-col-full{grid-column:1 / -1!important;}
.mk-pill-done{background:rgba(34,197,94,.12)!important;color:#16a34a!important;}
.mk-note-panel{margin-top:14px!important;padding:14px!important;border:1px solid #e2e8f0!important;border-radius:12px!important;background:#f8fafc!important;}
.mk-note-text{margin:12px 0 0 0!important;font-size:13px!important;color:#475569!important;}
.mk-font-system{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"!important;}
.mk-text-14{font-size:14px!important;color:#0f172a!important;}
.mk-toolbar-pill{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:42px!important;padding:0 18px!important;border-radius:14px!important;border:1px solid rgba(148,163,184,.24)!important;background:#fff!important;text-decoration:none!important;color:#64748b!important;font-size:14px!important;font-weight:700!important;}
.mk-toolbar-pill-active{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:42px!important;padding:0 18px!important;border-radius:14px!important;border:1px solid rgba(37,99,235,.28)!important;background:#eef4ff!important;text-decoration:none!important;color:#0f172a!important;font-size:14px!important;font-weight:700!important;}
.mk-overflow-auto{overflow:auto!important;}
.mk-h-340{height:340px!important;}
.mk-h-240{height:240px!important;}
.mk-bg-current{background:currentColor!important;}
.mk-progress-track{height:8px!important;border-radius:999px!important;background:rgba(148,163,184,.16)!important;overflow:hidden!important;}
.mk-progress-track-flex{flex:1!important;height:8px!important;border-radius:999px!important;background:rgba(148,163,184,.16)!important;overflow:hidden!important;}
.mk-progress-fill-brand{height:100%!important;background:linear-gradient(90deg,#2563eb,#22c55e)!important;}
.mk-w-220{width:220px!important;}
.mk-w-42{width:42px!important;}
.mk-max-w-90{max-width:90px!important;}
.mk-max-w-120{max-width:120px!important;}
.mk-chart-240{height:240px!important;margin-bottom: 30px;}
.mk-os-icon{width:52px!important;height:52px!important;border-radius:16px!important;}
/* Auto-extracted inline style classes */
.mk-auto-015a5e7fbe{display:flex;align-items:center;gap:8px;}
.mk-auto-076c8a6e3d{font-size:11px;font-weight:800;}
.mk-auto-077c6b2961{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.mk-auto-09a5de3112{max-width:820px;}
.mk-auto-0e2083af70{font-size:28px;line-height:1.1;font-weight:900;color:#0f172a;}
.mk-auto-0ed9fef913{font-size:14px;line-height:1.65;}
.mk-auto-17d902bf8b{font-size:13px;color:var(--muted);}
.mk-auto-18a8d08608{justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid rgba(148,163,184,.14);border-radius:20px;}
.mk-auto-1aa613d193{width:'.number_format($p,1,'.','').'%;}
.mk-auto-1c0bf51f29{border-collapse:collapse;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;}
.mk-auto-1cb784d91d{margin-top:8px;color:#64748b;font-size:14px;line-height:1.6;font-weight: 500;}
.mk-auto-20b16df55c{min-width: 38px;}
.mk-auto-22e51530f2{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.8;}
.mk-auto-2416f6b1b6{font-weight:900;font-size:24px;fill:currentColor;}
.mk-auto-251345fd18{font-size:14px;line-height:1.7;color:#475569;margin:0 0 18px 0;}
.mk-auto-256525c272{font-weight:800;color:var(--primary);text-decoration:none;}
.mk-auto-2b95321098{font-weight:800;}
.mk-auto-2ca152295e{margin-top:6px;color:#64748b;font-size:.95rem;}
.mk-auto-2d724d0f24{margin:14px 0 0;}
.mk-auto-2fec6243b8{color:#64748b;max-width:760px;line-height:1.7;}
.mk-auto-339e35c061{margin:8px 0 0;font-size:28px;font-weight:900;letter-spacing:-.04em;}
.mk-auto-385fd02ab4{display:grid;grid-template-columns:140px 1fr;gap:12px;}
.mk-auto-3a4f63b7c2{width:28%;}
.mk-auto-3a58a809a0{font-size:15px;line-height:1.75;opacity:.94;max-width:760px;}
.mk-auto-3afa49bb08{padding:12px 14px;border-top:1px solid #e2e8f0;font-size:14px;color:#334155;white-space:nowrap;}
.mk-auto-3efc9879ca{display:flex;gap:10px;}
.mk-auto-3fef500fec{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;flex-wrap:wrap;}
.mk-auto-486922ca82{border-radius:16px;text-align:center;color:#64748b;}
.mk-auto-4e8055799d{width:32px;height:32px;}
.mk-auto-4fb60c8979{align-items:flex-start;gap:12px;}
.mk-auto-5323aac881{margin:10px 0 12px;font-size:42px;line-height:1;font-weight:900;letter-spacing:-.06em;}
.mk-auto-5964abf2c3{padding:8px 10px;font-size:12px;}
.mk-auto-5a5e368d47{display:flex;gap:10px;align-items:center;}
.mk-auto-5cde3a2381{list-style:none;}
.mk-auto-5ec96cd119{text-align:center;color:#64748b;}
.mk-auto-5fc3adecac{border-collapse:separate;border-spacing:12px 0;margin:0 0 18px 0;}
.mk-auto-60746827b0{width:110px;}
.mk-auto-60abc0ff8e{font-size:14px;color:#64748b;margin-top:4px;}
.mk-auto-60c8a7d763{font-weight:700;font-size:12px;opacity:.75;fill:currentColor;}
.mk-auto-64a30a59ef{padding: 6px;}
.mk-auto-66719fb2cc{margin:8px 0 10px;font-size:38px;line-height:1;font-weight:900;letter-spacing:-.06em;}
.mk-auto-670240728f{padding:16px 18px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;}
.mk-auto-6709852012{width:35%;}
.mk-auto-6788b499a4{display:grid;gap:12px;}
.mk-auto-6982440012{overflow:hidden;}
.mk-auto-69a0fd5a03{width:60%;}
.mk-auto-6ac1322bfa{width:42%;}
.mk-auto-6d0c757c63{margin-top:8px;font-size:30px;font-weight:850;letter-spacing:-.04em;}
.mk-auto-709581712a{border-collapse:collapse;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;margin:0 0 18px 0;}
.mk-auto-746523c4e0{margin:8px 0 16px;font-size:28px;font-weight:900;letter-spacing:-.04em;}
.mk-auto-77a3d0579d{margin-top:10px;font-size:13px;color:#334155;}
.mk-auto-79656f6161{padding:0; border:0; background:transparent;}
.mk-auto-79e0d09d5c{height:320px;}
.mk-auto-7c71508a46{margin:0 0 18px 0;padding:16px 18px;border:1px solid #dbeafe;border-radius:18px;background:#eff6ff;color:#1e3a8a;font-size:14px;line-height:1.7;}
.mk-auto-804bcb294b{display:flex;justify-content:space-between;gap:16px;align-items:end;flex-wrap:wrap;}
.mk-auto-813e73def1{font-weight:950;font-size:20px;color:#0f172a;}
.mk-auto-830c16e97c{height: 240px;}
.mk-auto-841cc809cb{font-size:16px;font-weight:900;color:#0f172a;margin:0 0 10px 0;}
.mk-auto-87c136dfd0{margin-bottom:16px;}
.mk-auto-8c0b6cbed4{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:14px;border:1px solid rgba(148,163,184,.18);text-decoration:none;color:inherit;font-weight:800;}
.mk-auto-9015e55ec8{pointer-events:none;opacity:.9;}
.mk-auto-9037efc54c{min-width: 36px;!important;}
.mk-auto-90ce096e21{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 16px;border-radius:14px;background:var(--primary);text-decoration:none;color:#fff;font-weight:800;}
.mk-auto-94b1733fad{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:800;}
.mk-auto-96a4b3dc00{font-size:12px;color:#64748b;min-width:44px;}
.mk-auto-98ed48f361{margin-top:10px;font-weight:800;}
.mk-auto-9fe621c0f3{background:#f8fafc;}
.mk-auto-a2600b0e71{font-size:28px;}
.mk-auto-a3c9bc7d68{margin-top: 0px;}
.mk-auto-a45760ab9f{margin-top:10px;padding:10px;border-radius:12px;background:rgba(148,163,184,.08);font-size:12px;white-space:pre-wrap;}
.mk-auto-a4d53e1c0f{height:40px; width:auto;}
.mk-auto-a6ba6e1d4a{margin:6px 0 18px;}
.mk-auto-a848666ed9{font-weight:700;margin-bottom:4px;}
.mk-auto-aa550ac6a0{width:55%;}
.mk-auto-ab34acf539{display:flex;align-items:center;gap:10px;font-size:14px;}
.mk-auto-abea8d5adf{border-bottom:1px dashed var(--muted2);}
.mk-auto-ad291089c6{justify-content:space-between;align-items:flex-start;gap:12px;width:100%;}
.mk-auto-ad8bdb9c84{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;}
.mk-auto-b2f8aaca58{font-size:13px;font-weight:800;color:#475569;}
.mk-auto-b6098cde15{padding:12px 14px;font-size:12px;font-weight:800;color:#475569;white-space:nowrap;}
.mk-auto-b819e92b88{font-size:12px;color:#64748b;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.mk-auto-bad0754b5a{margin-top:6px;color:#64748b;}
.mk-auto-c63d481a84{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;}
.mk-auto-cc45e3d2cc{width:120px;height:120px;}
.mk-auto-cdbd2201d1{display:grid;gap:10px;margin-top:8px;}
.mk-auto-d3b7d250d9{font-size:22px;font-weight:900;color:#0f172a;margin:0 0 8px 0;}
.mk-auto-d461c96de5{position:relative;}
.mk-auto-d9da8e7a8f{font-size:1.05rem;font-weight:760;}
.mk-auto-dc39b8f5d6{width:40%;}
.mk-auto-dd5f9307e7{font-size:18px;font-weight: 700;color:#0f172a;}
.mk-auto-e48aaa90ad{padding:12px 14px;border-top:1px solid #e2e8f0;font-size:14px;color:#334155;}
.mk-auto-e56c0534d7{margin-top:10px;color:#475569;font-size:14px;line-height:1.55;}
.mk-auto-e59cada5d9{height:38px;padding:0 14px;font-size:13px;}
.mk-auto-e70bb39fb0{font-size:13px;color:#334155;}
.mk-auto-e9cdb74007{font-weight:800;color:inherit;text-decoration:none;}
.mk-auto-ea4d00a97f{overflow:scroll;}
.mk-auto-f0586e64f1{padding:12px 14px;border-top:1px solid #e2e8f0;font-size:14px;color:#0f172a;font-weight:700;}
.mk-auto-f0eb6ef3d6{font-size:1.05rem;font-weight:760;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mk-auto-f3365f0c8a{margin-top:8px;font-size:34px;font-weight:900;line-height:1;}
.mk-auto-fce9aad137{font-weight:800;font-size:15px;}
.mk-auto-fd88552230{margin-top:10px;width:260px;max-width:100%;height:8px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;}
.mk-auto-fdf33f2304{margin-bottom:8px;}
.mk-auto-progress-brand{height:100%!important;background:linear-gradient(90deg,var(--primary),var(--secondary))!important;}
.mk-auto-opacity-25{opacity:.25!important;}
.mk-auto-pill-inline{display:inline-block!important;padding:8px 14px!important;border-radius:999px!important;font-weight:600!important;font-size:12px!important;}
.mk-auto-pill-badge{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:8px 12px!important;border-radius:9999px!important;font-weight:700!important;font-size:12px!important;white-space:nowrap!important;}
.mk-auto-runcheck-title{margin:0 0 8px 0!important;font-size:16px!important;}
.mk-auto-runcheck-pre{white-space:pre-wrap!important;margin:0!important;color:#334155!important;}
/* === Targeted repair: sidebar aliases + PM issues layout/forms === */
/* PM issues / analytics pages: keep content full-width and restore top hero spacing */
.pm-analytics-shell .pm-grid{
grid-template-columns:minmax(0,1fr) !important;
align-items:start;
}
.pm-analytics-shell .pm-card{
overflow:visible;
}
.pm-analytics-shell .pm-section{
padding:24px;
}
.pm-analytics-shell .pm-toolbar,
.pm-analytics-shell .pm-topline{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
flex-wrap:wrap;
}
.pm-analytics-shell .pm-toolbar > * ,
.pm-analytics-shell .pm-topline > *{
flex:0 1 auto;
}
.pm-analytics-shell .pm-toolbar form{
margin:0;
}
.pm-analytics-shell .pm-toolbar .pm-viewtabs,
.pm-analytics-shell .pm-topline .pm-saved-list,
.pm-analytics-shell .pm-topline [data-style-token="mk-flex-wrap-gap-8"]{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items: end;
}
.pm-analytics-shell .pm-toolbar [data-style-token="mk-min-w-240"]{
min-width:240px;
max-width:320px;
}
.pm-analytics-shell .pm-table{
width:100%;
table-layout:fixed;
}
.pm-analytics-shell .pm-table th:nth-child(1),
.pm-analytics-shell .pm-table td:nth-child(1){width:34%;}
.pm-analytics-shell .pm-table th:nth-child(2),
.pm-analytics-shell .pm-table td:nth-child(2){width:16%;}
.pm-analytics-shell .pm-table th:nth-child(3),
.pm-analytics-shell .pm-table td:nth-child(3){width:10%;}
.pm-analytics-shell .pm-table th:nth-child(4),
.pm-analytics-shell .pm-table td:nth-child(4){width:13%;}
.pm-analytics-shell .pm-table th:nth-child(5),
.pm-analytics-shell .pm-table td:nth-child(5){width:15%;}
.pm-analytics-shell .pm-table th:nth-child(6),
.pm-analytics-shell .pm-table td:nth-child(6){width:12%; text-align:right;}
.pm-analytics-shell .pm-table td,
.pm-analytics-shell .pm-table th{
overflow-wrap:anywhere;
}
/* Compact PM controls baseline */
.pm-select,
.pm-input,
.pm-textarea,
.pm-btn{
font-size:14px !important;
line-height:1.3 !important;
}
.pm-input,
.pm-select{
min-height:42px;
padding-top:9px !important;
padding-bottom:9px !important;
}
.pm-textarea{
min-height:110px;
}
.pm-select option{
color:inherit;
}
.pm-datewrap{
display:grid;
grid-template-columns:minmax(0,1fr) 40px;
gap:8px;
}
.pm-datewrap .pm-date-btn{
height:42px;
}
/* Multi-selects: compact and cleaner */
.pm-select[multiple],
.pm-select[size]:not([size="1"]){
min-height:96px;
padding:6px 8px !important;
border-radius:14px;
background-image:none !important;
overflow:auto;
}
.pm-select[multiple] option,
.pm-select[size]:not([size="1"]) option{
padding:7px 10px;
border-radius:8px;
line-height:1.25;
}
.pm-select[multiple] option:checked,
.pm-select[size]:not([size="1"]) option:checked{
background:rgba(59,130,246,.14);
color:#1d4ed8;
font-weight:700;
}
/* Board/list cards */
.pm-board-wrap{
overflow-x:auto;
}
.pm-board{
min-width:max-content;
}
.pm-col{
min-height:0;
}
.pm-issue{
width:100%;
}
.pm-icon-actions,
.pm-actions,
.pm-avatars{
display: flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.pm-icon-circle,
.pm-iconbtn{
width:40px;
height:40px;
min-width:40px;
}
/* Responsive fixes for PM hero */
@media (max-width: 900px){
.pm-analytics-shell .pm-toolbar,
.pm-analytics-shell .pm-topline{
flex-direction:column;
align-items:stretch;
}
.pm-analytics-shell .pm-toolbar [data-style-token="mk-min-w-240"]{
min-width:0;
max-width:none;
width:100%;
}
.pm-analytics-shell .pm-toolbar .pm-viewtabs,
.pm-analytics-shell .pm-topline .pm-saved-list,
.pm-analytics-shell .pm-topline [data-style-token="mk-flex-wrap-gap-8"]{
width:100%;
}
}
/* ===== Sidebar restore ===== */
.mk-shell-sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;z-index:2147483647;overflow:hidden!important;-webkit-overflow-scrolling:auto!important;overscroll-behavior:contain;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0 16px 16px 0;transform:none!important}
@supports (height:100dvh){.mk-shell-sidebar{height:100dvh;}}
@supports not (height:100dvh){.mk-shell-sidebar{height:100vh;}}
.mk-dual-sidebar{position:relative;isolation:isolate;display:flex;width:330px!important;min-width:330px!important;height:100dvh;min-height:100dvh;border-radius:0;overflow:hidden;background:var(--mk-dual-panel);border-right:1px solid var(--mk-dual-border);box-shadow:var(--mk-dual-shadow);backdrop-filter:blur(22px) saturate(112%);transition:width .26s cubic-bezier(.22,1,.36,1),min-width .26s cubic-bezier(.22,1,.36,1)}
.mk-dual-sidebar *{box-sizing:border-box}
.mk-dual-sidebar.is-collapsed{width:88px;min-width:88px}
.mk-dual-rail{width:86px;padding:16px 12px 14px;background:var(--mk-dual-rail);border-right:1px solid rgba(148,163,184,.10);display:flex;flex-direction:column;align-items:center;gap:16px;flex:none}
.mk-dual-sidebar.is-collapsed .mk-dual-rail{border-right:none}
.mk-dual-sub{flex:1;min-width:0;padding:18px 12px 16px;background:linear-gradient(180deg, rgba(15,22,39,.40) 0%, rgba(12,18,34,.30) 48%, rgba(9,14,28,.20) 100%);overflow-y:auto;overflow-x:hidden;transition:opacity .18s ease,width .26s cubic-bezier(.22,1,.36,1),padding .26s cubic-bezier(.22,1,.36,1)}
.mk-dual-sidebar.is-collapsed .mk-dual-sub{width:0;min-width:0;padding-left:0;padding-right:0;opacity:0;overflow:hidden;border-left:0}
.dark .mk-dual-sub{background:linear-gradient(180deg, rgba(19,28,47,.28) 0%, rgba(12,18,31,.22) 48%, rgba(8,13,25,.16) 100%)}
.mk-brand-chip{display:grid;place-items:center;width: 46px;height: 46px;border-radius:0;background:transparent;padding-left: 8px;border:none;box-shadow:none;text-decoration:none;flex:none;margin-left:0}
.dark .mk-brand-chip{background:transparent;border-color:transparent}
.mk-rail-nav{display:flex;flex-direction:column;gap:8px;width:100%;align-items:center}
.mk-rail-btn,.mk-tier-toggle,.mk-utility-btn{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;text-decoration:none;position:relative;width:46px;height:46px;border-radius:16px;display:grid!important;place-items:center;color:#9fb0ca;transition:all .22s cubic-bezier(.22,1,.36,1);border:1px solid transparent;flex:none;box-shadow:none;outline:none}
.mk-rail-btn:hover,.mk-tier-toggle:hover,.mk-utility-btn:hover{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.20);color:#dbeafe;transform:translateY(-1px)}
.mk-rail-btn.is-active{background:linear-gradient(180deg, rgba(59,130,246,.24), rgba(37,99,235,.14));color:#cfe2ff;border-color:rgba(59,130,246,.28);box-shadow:0 10px 26px rgba(37,99,235,.14)}
.dark .mk-rail-btn.is-active{color:#dbeafe;background:linear-gradient(180deg, rgba(59,130,246,.26), rgba(37,99,235,.12));border-color:rgba(59,130,246,.26)}
.mk-rail-btn .mk-dot{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:999px;background:linear-gradient(135deg,var(--secondary),#22c55e);box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.mk-rail-foot{margin-top:auto;padding-top:8px;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.mk-avatar{display:block;width:38px;height:38px;border-radius:999px;overflow:hidden;border:2px solid rgba(255,255,255,.78);box-shadow:0 10px 22px rgba(15,23,42,.14);flex:none}
.mk-sub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.mk-sub-kicker{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mk-dual-muted)}
.mk-sub-title{font-size:1.32rem;line-height:1.05;font-weight:800;color:var(--mk-dual-text);letter-spacing:-.03em}
.mk-sub-meta{font-size:11.5px;color:var(--mk-dual-muted);margin-top:4px}
.mk-sub-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:var(--mk-dual-soft);color:var(--mk-dual-text);font-size:11px;font-weight:700}
.mk-sub-badge::before{content:'';width:8px;height:8px;border-radius:999px;background:linear-gradient(135deg,var(--secondary),#22c55e)}
.mk-sub-list{display:flex!important;flex-direction:column;gap:6px;margin-top:4px}
.mk-sub-link{display:flex!important;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;color:var(--mk-dual-text);transition:all .22s cubic-bezier(.22,1,.36,1);border:1px solid transparent;text-decoration:none;position:relative}
.mk-sub-link:hover{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.18);transform:translateY(-1px)}
.mk-sub-link.is-active{background:linear-gradient(135deg, rgba(59,130,246,.16), rgba(59,130,246,.08));border-color:rgba(59,130,246,.24);box-shadow:0 12px 28px rgba(37,99,235,.10)}
.dark .mk-sub-link.is-active{background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.08));border-color:rgba(59,130,246,.22)}
.mk-sub-icon{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(148,163,184,.10);color:var(--mk-dual-text);flex:none}
.mk-sub-copy{min-width:0;display:flex!important;flex-direction:column!important}
.mk-sub-label{font-size:12.5px;font-weight:700;line-height:1.2;color:var(--mk-dual-text)}
.mk-sub-desc{font-size:10px;line-height:1.2;color:var(--mk-dual-muted);margin-top:2px}
.mk-sub-link.is-active .mk-sub-label{color:#69a2ff}
.dark .mk-sub-link.is-active .mk-sub-label{color:#69a2ff}
.mk-sub-section{margin-top:8px;padding-top:10px;border-top:1px solid var(--mk-dual-border)}
.mk-sub-section-title{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mk-dual-muted);margin:0 0 8px 3px}
.mk-tier-top-actions{display:flex!important;align-items:center;gap:8px;flex:none}
.mk-dual-tier{display:none}
.mk-dual-tier.is-active{display:block}
.mk-dual-sidebar.is-collapsed .mk-dual-tier.is-active{display:none}
.mk-empty-state{padding:14px 12px;border-radius:16px;border:1px dashed var(--mk-dual-border);color:var(--mk-dual-muted);font-size:12px;background:rgba(148,163,184,.05)}
.mk-dual-sidebar a,.mk-dual-sidebar button,.mk-dual-sidebar input{font:inherit;letter-spacing:normal;text-transform:none;box-shadow:none}
.mk-dual-sidebar a{display:flex;text-decoration:none;color:var(--mk-dual-text)}
.mk-dual-sidebar button{display:grid;color:var(--mk-dual-muted)}
.mk-dual-sidebar .mk-brand-chip img{width:34px;height:34px;object-fit:contain}
.mk-rail-btn svg,.mk-tier-toggle svg,.mk-utility-btn svg{width:20px;height:20px;stroke-width:1.9}
.mk-sub-icon svg{width:15px;height:15px}
.mk-shell-sidebar :where(.flex,.inline-flex){display:unset}
.mk-shell-sidebar .mk-dual-sidebar,.mk-shell-sidebar .mk-dual-sidebar *{backface-visibility:hidden}
.mk-shell-sidebar .mk-dual-sidebar .mk-dual-rail,.mk-shell-sidebar .mk-dual-sidebar .mk-dual-sub,.mk-shell-sidebar .mk-dual-sidebar .mk-rail-nav,.mk-shell-sidebar .mk-dual-sidebar .mk-rail-foot,.mk-shell-sidebar .mk-dual-sidebar .mk-sub-head,.mk-shell-sidebar .mk-dual-sidebar .mk-sub-list,.mk-shell-sidebar .mk-dual-sidebar .mk-tier-top-actions,.mk-shell-sidebar .mk-dual-sidebar .mk-sub-copy{display:flex!important}
#appSidebar,.app-sidebar{width:auto!important;max-width:none!important}
.mk-shell-sidebar a,.mk-shell-sidebar button,.mk-shell-sidebar [role=button]{color:var(--mk-dual-text)!important}
.mk-shell-sidebar .mk-rail-btn,.mk-shell-sidebar .mk-tier-toggle,.mk-shell-sidebar .mk-utility-btn{color:#9fb0ca!important}
.mk-shell-sidebar .mk-rail-btn.is-active,.mk-shell-sidebar .mk-sub-link.is-active{color:#dbeafe!important}
@media (max-width:767px){
.mk-dual-sidebar{width:min(92vw,330px)!important;min-width:0;height: 100dvh!important;min-height:100dvh;border-radius:0}
.mk-dual-sidebar.is-collapsed{width:88px;min-width:88px}
.mk-shell-sidebar{top:0!important;left:0!important}
}
@media (min-width:768px){
.mk-shell-sidebar{position:fixed!important;top:0!important;left:0!important;bottom:0!important;height:100vh!important;flex:none!important;width:var(--mk-shell-width)!important;max-width:var(--mk-shell-width)!important;margin:0!important}
.mk-layout-gap{margin-left:var(--mk-shell-width)!important;min-height:100vh;width:calc(100% - var(--mk-shell-width))}
}
/* ===== Final desktop sidebar fix ===== */
@media (min-width: 768px){
.mk-shell-sidebar,
.app-sidebar,
#appSidebar{
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: auto !important;
}
@supports not (height: 100dvh){
.mk-shell-sidebar,
.app-sidebar,
#appSidebar{
height: 100vh !important;
max-height: 100vh !important;
}
}
.mk-layout-gap{
min-height: 100vh !important;
}
body{
overflow-x: hidden !important;
}
}
@media (max-width: 767px){
.app-sidebar,
#appSidebar{
top: var(--sat, 0px) !important;
height: calc(100dvh - var(--sat, 0px)) !important;
}
}
/* ===== PM compact sizing fix ===== */
.pm-shell,
.pm-analytics-shell,
.pm-projects-page,
.pm-issues-page,
.pm-clients-page,
.pm-overview-page{
font-size: 14px;
}
.pm-hero{
padding: 22px !important;
border-radius: 24px !important;
margin-bottom: 16px !important;
}
.pm-hero h1{
margin: 8px 0 6px !important;
font-size: 30px !important;
line-height: 1.05 !important;
letter-spacing: -.03em !important;
}
.pm-hero p{
font-size: 14px !important;
line-height: 1.55 !important;
max-width: 720px !important;
}
.pm-pill{
height: 28px !important;
padding: 0 10px !important;
font-size: 11px !important;
}
.pm-kpis{
gap: 14px !important;
}
.pm-kpi,
.pm-stat,
.pm-stat-card{
border-radius: 18px !important;
}
.pm-kpi-value,
.pm-kpi-num,
.pm-stat-value{
font-size: 18px !important;
line-height: 1.05 !important;
}
.pm-kpi-label,
.pm-stat-label,
.pm-label{
font-size: 11px !important;
letter-spacing: .08em !important;
}
.pm-card,
.pm-panel{
border-radius: 20px !important;
}
.pm-section,
.pm-panel-body,
.pm-body{
padding: 18px !important;
}
.pm-table thead th{
font-size: 11px !important;
padding: 12px 14px !important;
}
.pm-table tbody td{
font-size: 14px !important;
padding: 14px !important;
}
.pm-btn,
.pm-btn-primary,
.pm-btn-secondary,
.pm-btn-ghost{
height: 38px !important;
padding: 0 14px !important;
border-radius: 12px !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 600!important;
}
.pm-input,
.pm-select,
.pm-textarea,
.pm-shell input,
.pm-shell select,
.pm-shell textarea,
.pm-analytics-shell input,
.pm-analytics-shell select,
.pm-analytics-shell textarea{
font-size: 14px !important;
line-height: 1.3 !important;
border-radius: 14px !important;
}
.pm-input,
.pm-select,
.pm-shell input,
.pm-shell select,
.pm-analytics-shell input,
.pm-analytics-shell select{
min-height: 42px !important;
padding: 9px 12px !important;
}
.pm-textarea,
.pm-shell textarea,
.pm-analytics-shell textarea{
min-height: 110px !important;
padding: 10px 12px !important;
}
.pm-select[multiple],
.pm-select[size]:not([size="1"]),
.pm-shell select[multiple],
.pm-analytics-shell select[multiple]{
min-height: 96px !important;
padding: 6px 8px !important;
border-radius: 14px !important;
}
.pm-select[multiple] option,
.pm-select[size]:not([size="1"]) option,
.pm-shell select[multiple] option,
.pm-analytics-shell select[multiple] option{
padding: 7px 10px !important;
font-size: 14px !important;
line-height: 1.25 !important;
}
.pm-icon-circle,
.pm-iconbtn,
.pm-action{
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
.pm-row,
.pm-issue{
border-radius: 16px !important;
}
.pm-issue .pm-badge,
.pm-row .pm-badge{
font-size: 11px !important;
}
@media (max-width: 760px){
.pm-hero{
padding: 18px !important;
border-radius: 20px !important;
}
.pm-hero h1{
font-size: 26px !important;
}
}
/* ===== PM extra compact refinement ===== */
.pm-wrap,
.pm-shell,
.pm-analytics-shell,
.pm-projects-page,
.pm-issues-page,
.pm-clients-page,
.pm-overview-page{
font-size: 13px;
}
.pm-wrap .pm-lite-hero,
.pm-shell .pm-hero,
.pm-analytics-shell .pm-hero{
padding: 18px !important;
border-radius: 20px !important;
}
.pm-wrap .pm-lite-hero h1,
.pm-shell .pm-hero h1,
.pm-analytics-shell .pm-hero h1,
.pm-wrap h1[data-style-token],
.pm-shell h1[data-style-token]{
font-size: 26px !important;
line-height: 1.06 !important;
}
.pm-wrap h2,
.pm-shell h2,
.pm-analytics-shell h2,
.pm-section-title,
[data-style-token="mk-title-32"],
[data-style-token="mk-title-28-tight"],
[data-style-token="mk-title-24-lg"],
[data-style-token="mk-heading-18"]{
line-height: 1.15 !important;
}
.pm-wrap h2,
.pm-shell h2,
.pm-analytics-shell h2,
.pm-section-title,
[data-style-token="mk-title-28-tight"]{
font-size: 22px !important;
}
[data-style-token="mk-title-24-lg"]{
font-size: 20px !important;
}
[data-style-token="mk-heading-18"]{
font-size: 16px !important;
}
.pm-card,
.pm-panel{
border-radius: 18px !important;
}
.pm-section,
.pm-panel-body,
.pm-body{
padding: 16px !important;
}
.pm-row,
.pm-issue,
.pm-link{
padding: 14px 15px !important;
border-radius: 14px !important;
}
.pm-kpis,
.pm-cards,
.pm-grid{
gap: 12px !important;
}
.pm-kpi,
.pm-stat,
.pm-stat-card{
padding: 14px !important;
border-radius: 16px !important;
}
.pm-kpi-value,
.pm-kpi-num,
.pm-stat-value,
[data-style-token="mk-auto-f3365f0c8a"],
[data-style-token="mk-auto-2b95321098"]{
font-size: 16px !important;
}
.pm-label,
.pm-kpi-label,
.pm-stat-label,
[data-style-token="mk-text-muted-12"]{
font-size: 10.5px !important;
letter-spacing: .07em !important;
}
.pm-btn,
.pm-btn-primary,
.pm-btn-secondary,
.pm-btn-ghost,
.pm-drawer-tab{
height: 34px !important;
min-height: 34px !important;
padding: 0 12px !important;
border-radius: 11px !important;
font-size: 13px !important;
}
.pm-input,
.pm-select,
.pm-textarea,
.pm-shell input,
.pm-shell select,
.pm-shell textarea,
.pm-wrap input,
.pm-wrap select,
.pm-wrap textarea,
.pm-analytics-shell input,
.pm-analytics-shell select,
.pm-analytics-shell textarea{
font-size: 13px !important;
border-radius: 12px !important;
}
.pm-input,
.pm-select,
.pm-shell input,
.pm-shell select,
.pm-wrap input,
.pm-wrap select,
.pm-analytics-shell input,
.pm-analytics-shell select{
min-height: 38px !important;
padding: 8px 11px !important;
}
.pm-textarea,
.pm-shell textarea,
.pm-wrap textarea,
.pm-analytics-shell textarea{
min-height: 96px !important;
padding: 9px 11px !important;
}
.pm-rich{
min-height: 360px !important;
line-height: 1.55 !important;
}
.pm-date-btn,
.pm-icon-circle,
.pm-iconbtn,
.pm-action{
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
}
.pm-table thead th{
font-size: 10.5px !important;
padding: 10px 12px !important;
}
.pm-table tbody td,
.pm-table tr td{
font-size: 13px !important;
padding: 12px !important;
}
@media (max-width: 760px){
.pm-wrap .pm-lite-hero,
.pm-shell .pm-hero,
.pm-analytics-shell .pm-hero{
padding: 16px !important;
}
.pm-wrap .pm-lite-hero h1,
.pm-shell .pm-hero h1,
.pm-analytics-shell .pm-hero h1,
.pm-wrap h1[data-style-token],
.pm-shell h1[data-style-token]{
font-size: 23px !important;
}
.pm-grid,
.pm-cards,
.pm-kpis{
gap: 10px !important;
}
}
.sec-shell{gap:20px}
.sec-hero{position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.14);background: linear-gradient(135deg, rgb(37 99 235 / 88%), rgb(99 102 241 / 80%) 48%, rgb(148 184 152 / 38%));box-shadow:0 26px 70px rgba(37,99,235,.22);color:#fff}
.sec-hero:before,.sec-hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.12);filter:blur(8px)}
.sec-hero:before{width:240px;height:240px;right:-70px;top:-110px}
.sec-hero:after{width:180px;height:180px;left:-60px;bottom:-90px}
.sec-hero-grid{position:relative;z-index:1;grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr);gap:18px;align-items:end}
.sec-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sec-title{margin:14px 0 8px;font-size:34px;line-height:1.02;font-weight:800;color:#fff}
.sec-sub{max-width:720px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.65}
.sec-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sec-stat{padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);}
.sec-stat-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.sec-stat-value{margin-top:6px;font-size:28px;font-weight:800;color:#fff}
.sec-stat-note{margin-top:4px;font-size:12px;color:rgba(255,255,255,.78)}
.sec-panel{background:#fff;border:1px solid #e2e8f0;border-radius:28px;box-shadow:0 18px 45px rgba(15,23,42,.06)}
.dark .sec-panel{background:#0f172a;border-color:#1e293b}
.sec-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 0}
.sec-panel-title{font-size:22px;font-weight:800;color:#0f172a}
.dark .sec-panel-title{color:#f8fafc}
.sec-panel-sub{margin-top:4px;font-size:14px;color:#64748b}
.dark .sec-panel-sub{color:#94a3b8}
.sec-panel-body{padding:24px}
.sec-form-grid{display:grid;gap:16px}
.sec-field{display:grid;gap:8px}
.sec-field label{font-size:13px;font-weight:700;color:#334155}
.dark .sec-field label{color:#cbd5e1}
.sec-input,.sec-select,.sec-textarea{width:100%;border-radius:16px;border:1px solid #cbd5e1;background:#fff;padding:12px 14px;font-size:14px;color:#0f172a;outline:none;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.dark .sec-input,.dark .sec-select,.dark .sec-textarea{background:#020617;border-color:#334155;color:#f8fafc}
.sec-input:focus,.sec-select:focus,.sec-textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.sec-help{font-size:12px;color:#64748b}
.dark .sec-help{color:#94a3b8}
.sec-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sec-check{display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;border:1px solid #dbeafe;background:#f8fbff;font-size:14px;font-weight:600;color:#2563eb}
.dark .sec-check{background:rgba(37,99,235,.08);border-color:rgba(96,165,250,.18);color:#bfdbfe}
.sec-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:6px}
.sec-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}
.sec-summary-card{padding:18px;border-radius:22px;background:#fff;border:1px solid #dbe7ff;box-shadow:0 14px 34px rgba(59,130,246,.08)}
.dark .sec-summary-card{background:#0f172a;border-color:#1e3a8a33}
.sec-summary-card .label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.sec-summary-card .value{margin-top:8px;font-size:30px;font-weight:800;color:#0f172a}
.dark .sec-summary-card .value{color:#f8fafc}
.sec-summary-card .note{margin-top:4px;font-size:13px;color:#64748b}
.dark .sec-summary-card .note{color:#94a3b8}
.sec-table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:24px;background:#fff}
.dark .sec-table-wrap{background:#0b1220;border-color:#1e293b}
.sec-table{width:100%;border-collapse:separate;border-spacing:0}
.sec-table thead th{padding:14px 16px;background:#f8fafc;color:#64748b;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid #e2e8f0}
.dark .sec-table thead th{background:#0f172a;color:#94a3b8;border-color:#1e293b}
.sec-table tbody td{padding:16px;border-bottom:1px solid #eef2f7;vertical-align:middle;width: max-content;}
.dark .sec-table tbody td{border-color:#172036}
.sec-site{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.sec-site-logo{width:48px;height:48px;border-radius:16px;border:1px solid #dbeafe;background:linear-gradient(180deg,#fff,#eff6ff);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.sec-site-logo img{max-width:26px;max-height:26px}
.sec-site-name{font-weight:800;color:#0f172a}
.dark .sec-site-name{color:#f8fafc}
.sec-site-url{margin-top:4px;font-size:12px;color:#64748b;word-break:break-all}
.dark .sec-site-url{color:#94a3b8}
.sec-settings{display: flow;gap: 4px;width: max-content;}
.sec-empty{padding:46px 20px;text-align:center;color:#64748b}
.dark .sec-empty{color:#94a3b8}
@media (max-width: 1024px){.sec-hero-grid,.sec-summary-grid,.sec-split{grid-template-columns:1fr;}.sec-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.sec-hero{padding:22px;}.sec-title{font-size:28px}.sec-panel-head,.sec-panel-body{padding-left:18px;padding-right:18px}.sec-hero-stats{grid-template-columns:1fr}.sec-table thead th,.sec-table tbody td{padding:12px;}}
.analytics-shell{display:grid;gap:24px}
.analytics-hero{position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.97),rgba(99,102,241,.93) 45%,rgba(168,85,247,.88));box-shadow:0 26px 70px rgba(37,99,235,.22);color:#fff}
.analytics-hero:before,.analytics-hero:after{content:'';position:absolute;border-radius:999px;background:rgba(255,255,255,.12);filter:blur(2px)}
.analytics-hero:before{width:220px;height:220px;top:-80px;right:-40px}
.analytics-hero:after{width:180px;height:180px;bottom:-90px;left:-50px;background:rgba(255,255,255,.09)}
.analytics-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end}
.analytics-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.analytics-title{margin:14px 0 8px;font-size:36px;line-height:1.05;font-weight:950;max-width:760px}
.analytics-copy{max-width:720px;color:rgba(255,255,255,.86);font-size:15px;line-height:1.65}
.analytics-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;max-width:780px}
.analytics-kpi{padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.analytics-kpi-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.analytics-kpi-value{margin-top:6px;font-size:32px;line-height:1;font-weight:950}
.analytics-kpi-note{margin-top:6px;font-size:12px;color:rgba(255,255,255,.74)}
.analytics-hero-actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.analytics-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 18px;border-radius:16px;font-weight:800;font-size:14px;text-decoration:none;border:1px solid transparent;transition:.18s ease}
.analytics-btn-primary{background:#fff;color:#1d4ed8;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.analytics-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18)}
.analytics-panel{background:#fff;border:1px solid #dbe4f0;border-radius:28px;box-shadow:0 18px 50px rgba(15,23,42,.05);overflow:hidden}
.dark .analytics-panel{background:#0f172a;border-color:#1e293b;box-shadow:none}
.analytics-panel-head{display:flex;justify-content:space-between;align-items:end;gap:18px;padding:24px 26px 14px;border-bottom:1px solid #e5edf6}
.dark .analytics-panel-head{border-bottom-color:#1e293b}
.analytics-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.analytics-heading{margin-top:6px;font-size:28px;line-height:1.05;font-weight:950;color:#0f172a}
.dark .analytics-heading{color:#f8fafc}
.analytics-helper{font-size:13px;color:#64748b;max-width:540px;line-height:1.55}
.analytics-table-wrap{padding:6px 8px 8px}
.analytics-empty{padding:40px 20px;text-align:center;color:#64748b}
.site-link{color:#0f172a;font-weight:800;text-decoration:none}
.site-link:hover{color:#1d4ed8}
.dark .site-link{color:#f8fafc}
@media (max-width: 980px){.analytics-hero-grid{grid-template-columns:1fr}.analytics-hero-actions{justify-content:flex-start}.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.analytics-hero{padding:22px}.analytics-title{font-size:30px}.analytics-kpis{grid-template-columns:1fr}.analytics-panel-head{padding:20px 18px 12px}.analytics-heading{font-size:24px}}
/* ------------------------------------------------------------
Section theming: Growth / Monitoring / Project Management / Finance
------------------------------------------------------------ */
.section-growth .pm-lite-hero,
.section-growth .sec-hero{
position:relative;
border-radius:30px;
padding:30px;
border:1px solid rgba(148,163,184,.16);
background:linear-gradient(135deg,rgba(37,99,235,.97),rgba(99,102,241,.93) 45%,rgba(168,85,247,.88));
box-shadow:0 26px 70px rgba(37,99,235,.22);
color:#fff;
}
.section-growth .pm-lite-hero::before,
.section-growth .pm-lite-hero::after,
.section-growth .sec-hero::before,
.section-growth .sec-hero::after{content:'';position:absolute;border-radius:999px;background:rgba(255,255,255,.12);pointer-events:none}
.section-growth .pm-lite-hero::before,
.section-growth .sec-hero::before{width:220px;height:220px;top:-80px;right:-40px}
.section-growth .pm-lite-hero::after,
.section-growth .sec-hero::after{width:180px;height:180px;bottom:-90px;left:-50px;background:rgba(255,255,255,.09)}
.section-growth .pm-lite-pill,
.section-growth .pm-lite-hero__eyebrow,
.section-growth .sec-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.24)!important;color:#fff!important;box-shadow:none}
.section-growth .pm-lite-title,
.section-growth .pm-lite-hero__title,
.section-growth .sec-title{color:#fff!important;font-size:clamp(2rem,4vw,4rem);line-height:1.02;font-weight:900;letter-spacing:-.04em}
.section-growth .pm-lite-copy,
.section-growth .pm-lite-hero__desc,
.section-growth .sec-copy{color:rgba(255,255,255,.84)!important;max-width:720px}
.section-growth .pm-lite-kpi,
.section-growth .pm-lite-hero__stat,
.section-growth .sec-stat{background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.18)!important;backdrop-filter:blur(10px);box-shadow:none}
.section-growth .pm-lite-kpi-label,
.section-growth .pm-lite-hero__stat-label,
.section-growth .sec-stat-label{color:rgba(255,255,255,.72)!important}
.section-growth .pm-lite-kpi-value,
.section-growth .pm-lite-hero__stat-value,
.section-growth .sec-stat-value{color:#fff!important}
.section-growth .pm-lite-btn,
.section-growth .sec-btn{border-radius:18px}
.section-growth .pm-lite-btn--primary,
.section-growth .sec-btn--primary{background:#fff!important;color:#1d4ed8!important;border-color:#fff!important}
.section-growth .pm-lite-btn:not(.pm-lite-btn--primary),
.section-growth .sec-btn:not(.sec-btn--primary){background:rgba(255,255,255,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important}
.section-monitoring .pm-lite-hero,
.section-monitoring .monitoring-hero{
position:relative;overflow:hidden;border-radius:26px;padding:24px 24px 22px;border:1px solid rgba(148,163,184,.16);
background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(14,165,233,.10) 56%,rgba(255,255,255,.94));
box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px;
}
.dark.section-monitoring .pm-lite-hero,
.dark .section-monitoring .pm-lite-hero,
.dark.section-monitoring .monitoring-hero,
.dark .section-monitoring .monitoring-hero{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(14,165,233,.12) 58%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.section-monitoring .monitoring-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(148,163,184,.18);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#2563eb}
.section-monitoring .monitoring-title{margin:12px 0 8px;font-size:30px;line-height:1.04;font-weight:900;letter-spacing:-.03em;color:#0f172a}
.section-monitoring .monitoring-copy{max-width:720px;color:#475569;line-height:1.7}
.section-monitoring .monitoring-kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.section-monitoring .monitoring-kpi{min-width:150px;padding:14px 16px;border-radius:20px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.72);backdrop-filter:blur(10px);box-shadow:0 16px 32px rgba(15,23,42,.06)}
.section-monitoring .monitoring-kpi-label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.section-monitoring .monitoring-kpi-value{display:block;margin-top:6px;font-size:24px;font-weight:900;line-height:1;color:#0f172a}
.section-monitoring .monitoring-kpi-note{display:block;margin-top:8px;color:#64748b;font-size:13px;line-height:1.55}
.section-monitoring .monitoring-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero{
position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.16);
background:linear-gradient(135deg,rgba(37,99,235,.97),rgba(99,102,241,.93) 45%,rgba(168,85,247,.88));
box-shadow:0 26px 70px rgba(37,99,235,.22);color:#fff;
}
.section-projects .pm-lite-hero::before,
.section-projects .pm-lite-hero::after,
.section-projects .pm-mail-hero::before,
.section-projects .pm-mail-hero::after{content:'';position:absolute;border-radius:999px;background:rgba(255,255,255,.12);pointer-events:none}
.section-projects .pm-lite-hero::before,
.section-projects .pm-mail-hero::before{width:220px;height:220px;top:-80px;right:-40px}
.section-projects .pm-lite-hero::after,
.section-projects .pm-mail-hero::after{width:180px;height:180px;bottom:-90px;left:-50px;background:rgba(255,255,255,.09)}
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.section-projects .pm-lite-title,
.section-projects .pm-fin-title{color:#fff!important}
.section-projects .pm-lite-hero .pm-label,
.section-projects .pm-mail-hero .pm-label,
.section-projects .pm-lite-hero__eyebrow,
.section-projects .pm-fin-pill{color:rgba(255,255,255,.72)!important}
.section-projects .pm-lite-hero [data-style-token*='mk-auto-3a58a809a0'],
.section-projects .pm-lite-hero [data-style-token*='mk-auto-2fec6243b8'],
.section-projects .pm-mail-hero p{color:rgba(255,255,255,.84)!important}
.section-projects .pm-lite-hero .pm-kpi,
.section-projects .pm-mail-hero .pm-mail-stat{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.18)!important;backdrop-filter:blur(10px)}
.section-projects .pm-lite-hero .pm-kpi-num,
.section-projects .pm-mail-hero .pm-mail-stat strong{color:#fff!important}
.section-projects .pm-lite-hero a,
.section-projects .pm-mail-hero a{border-color:rgba(255,255,255,.24)!important;color:#fff!important;background:rgba(255,255,255,.10)!important}
.page-financial_invoices .pm-fin-hero{
position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.16);
background:linear-gradient(135deg,rgba(6,182,212,.94),rgba(16,185,129,.90) 48%,rgba(132,204,22,.72));
box-shadow:0 26px 70px rgba(16,185,129,.18);color:#fff;
}
.page-financial_invoices .pm-fin-hero::before,
.page-financial_invoices .pm-fin-hero::after{content:'';position:absolute;border-radius:999px;background:rgba(255,255,255,.12);pointer-events:none}
.page-financial_invoices .pm-fin-hero::before{width:220px;height:220px;top:-80px;right:-40px}
.page-financial_invoices .pm-fin-hero::after{width:180px;height:180px;bottom:-90px;left:-50px;background:rgba(255,255,255,.09)}
.page-financial_invoices .pm-fin-pill{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.24)}
.page-financial_invoices .pm-fin-title,.page-financial_invoices .pm-fin-copy{color:#fff}
.page-financial_invoices .pm-fin-copy{opacity:.86}
.page-financial_invoices .pm-fin-cta{background:#fff;color:#059669;border-color:#fff}
.mk-directory-panel{background:rgba(255,255,255,.96);border: 1px solid rgba(148,163,184,.16);border-radius:28px;overflow:hidden;margin-top:18px}
.dark .mk-directory-panel{background:rgba(15,23,42,.94);border-color:rgba(51,65,85,.8);box-shadow:0 20px 50px rgba(2,6,23,.42)}
.mk-directory-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:end;padding:24px 28px 18px;border-bottom:1px solid rgba(148,163,184,.12)}
.mk-directory-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.mk-directory-title{margin-top:8px;font-size:clamp(2rem,4vw,3.2rem);line-height:.95;font-weight:900;letter-spacing:-.05em;color:#0f172a}
.mk-directory-copy{font-size:15px;line-height:1.7;color:#475569;max-width:520px}
.dark .mk-directory-title{color:#fff}
.dark .mk-directory-copy,.dark .mk-directory-label{color:#94a3b8}
.mk-directory-table{width:100%;text-align:left;border-collapse:separate;border-spacing:0}
.mk-directory-table thead th{background:#f7fafc;color:#64748b;font-size:14px;font-weight:800;padding:16px 20px;border-bottom:1px solid rgba(148,163,184,.12)}
.mk-directory-table tbody td{padding:18px 20px;border-bottom:1px solid rgba(148,163,184,.10);vertical-align:middle}
.mk-directory-table tbody tr:hover{background:rgba(59,130,246,.04)}
.mk-directory-table tbody tr:last-child td{border-bottom:0}
.dark .mk-directory-table thead th{background:rgba(15,23,42,.82);color:#cbd5e1;border-bottom-color:rgba(148,163,184,.18)}
.dark .mk-directory-table tbody td{border-bottom-color:rgba(51,65,85,.75)}
.dark .mk-directory-table tbody tr:hover{background:rgba(30,41,59,.74)}
.mk-directory-link{font-size:17px;font-weight:700;color:#3b82f6;text-decoration:none}
.mk-directory-link:hover{text-decoration:underline}
.mk-directory-sub{margin-top:4px;font-size:13px;color:#64748b}
.dark .mk-directory-sub{color:#94a3b8}
.mk-inline-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.mk-inline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:#fff;color:#0f172a;font-size:14px;font-weight:700;text-decoration:none}
.mk-inline-btn:hover{box-shadow:0 10px 22px rgba(15,23,42,.08)}
.mk-inline-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb}
.mk-inline-btn--danger{color:#dc2626;border-color:rgba(248,113,113,.42)}
.dark .mk-inline-btn{background:rgba(15,23,42,.8);border-color:rgba(71,85,105,.55);color:#fff}
.dark .mk-inline-btn--danger{color:#fca5a5}
.page-analytics .analytics-table-wrap table,
.section-growth .pm-lite-table table,
.section-monitoring .pm-lite-table table,
.page-financial_invoices .ta-table{width:100%;text-align:left;border-collapse:separate;border-spacing:0}
.page-analytics .analytics-table-wrap thead th,
.section-growth .pm-lite-table thead th,
.section-monitoring .pm-lite-table thead th,
.page-financial_invoices .ta-table thead th{background:#f7fafc;color:#64748b;font-size:14px;font-weight:800;padding:16px 20px;border-bottom:1px solid rgba(148,163,184,.12);text-transform:none;letter-spacing:0}
.page-analytics .analytics-table-wrap tbody td,
.section-growth .pm-lite-table tbody td,
.section-monitoring .pm-lite-table tbody td,
.page-financial_invoices .ta-table tbody td{padding:18px 20px;border-bottom:1px solid rgba(148,163,184,.10);vertical-align:middle}
.page-analytics .analytics-table-wrap tbody tr:hover,
.section-growth .pm-lite-table tbody tr:hover,
.section-monitoring .pm-lite-table tbody tr:hover,
.page-financial_invoices .ta-table tbody tr:hover{background:rgba(59,130,246,.04)}
.dark.page-analytics .analytics-table-wrap thead th,
.dark .section-growth .pm-lite-table thead th,
.dark .section-monitoring .pm-lite-table thead th,
.dark.page-financial_invoices .ta-table thead th{background:rgba(15,23,42,.82);color:#cbd5e1;border-bottom-color:rgba(148,163,184,.18)}
.dark.page-analytics .analytics-table-wrap tbody td,
.dark .section-growth .pm-lite-table tbody td,
.dark .section-monitoring .pm-lite-table tbody td,
.dark.page-financial_invoices .ta-table tbody td{border-bottom-color:rgba(51,65,85,.75)}
.dark.page-analytics .analytics-table-wrap tbody tr:hover,
.dark .section-growth .pm-lite-table tbody tr:hover,
.dark .section-monitoring .pm-lite-table tbody tr:hover,
.dark.page-financial_invoices .ta-table tbody tr:hover{background:rgba(30,41,59,.74)}
@media (max-width: 980px){.mk-directory-head{grid-template-columns:1fr}.section-growth .pm-lite-hero,.section-growth .sec-hero,.section-projects .pm-lite-hero,.section-projects .pm-mail-hero,.page-financial_invoices .pm-fin-hero{padding:22px}.section-growth .pm-lite-title,.section-growth .sec-title,.section-projects .pm-lite-hero h1,.page-financial_invoices .pm-fin-title,.section-monitoring .monitoring-title{font-size:30px}}
@media (max-width: 640px){.mk-directory-panel{border-radius:24px}.mk-directory-head{padding:20px 18px 14px}.mk-directory-table thead th,.mk-directory-table tbody td,.page-analytics .analytics-table-wrap thead th,.page-analytics .analytics-table-wrap tbody td,.section-growth .pm-lite-table thead th,.section-growth .pm-lite-table tbody td,.section-monitoring .pm-lite-table thead th,.section-monitoring .pm-lite-table tbody td,.page-financial_invoices .ta-table thead th,.page-financial_invoices .ta-table tbody td{padding:14px 16px}.section-monitoring .monitoring-kpis{display:grid;grid-template-columns:1fr}.section-monitoring .monitoring-kpi{min-width:0}}
/* === 2026 refinement pass: finance / mobile / dark mode === */
.section-growth .pm-lite-hero,
.section-growth .sec-hero{
background:linear-gradient(135deg,rgba(37,99,235,.90),rgba(99,102,241,.84) 45%,rgba(168,85,247,.76));
}
.dark.section-growth .pm-lite-hero,
.dark .section-growth .pm-lite-hero,
.dark.section-growth .sec-hero,
.dark .section-growth .sec-hero{
background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(99,102,241,.28) 48%,rgba(168,85,247,.20));
border-color:rgba(148,163,184,.14);
box-shadow:0 24px 60px rgba(2,6,23,.34);
}
.section-monitoring .pm-lite-hero,
.section-monitoring .monitoring-hero{
background:linear-gradient(135deg,#eef6ff,#e0f2fe 52%,#dbeafe);
}
.dark.section-monitoring .pm-lite-hero,
.dark .section-monitoring .pm-lite-hero,
.dark.section-monitoring .monitoring-hero,
.dark .section-monitoring .monitoring-hero{
background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(14,165,233,.20) 58%,rgba(15,23,42,.92));
border-color:rgba(148,163,184,.14);
}
.dark .section-monitoring .monitoring-pill{background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.18);color:#bfdbfe}
.dark .section-monitoring .monitoring-title{color:#fff}
.dark .section-monitoring .monitoring-copy,
.dark .section-monitoring .monitoring-kpi-label,
.dark .section-monitoring .monitoring-kpi-note{color:#cbd5e1}
.dark .section-monitoring .monitoring-kpi{background:rgba(255,255,255,.07);border-color:rgba(148,163,184,.14);box-shadow:none}
.dark .section-monitoring .monitoring-kpi-value{color:#fff}
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero{
background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(99,102,241,.86) 45%,rgba(168,85,247,.78));
}
.dark.section-projects .pm-lite-hero,
.dark .section-projects .pm-lite-hero,
.dark.section-projects .pm-mail-hero,
.dark .section-projects .pm-mail-hero{
background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(99,102,241,.28) 48%,rgba(168,85,247,.20));
border-color:rgba(148,163,184,.14);
box-shadow:0 24px 60px rgba(2,6,23,.34);
}
.section-projects .pm-mail-hero h2,
.section-projects .pm-mail-hero .text-slate-900,
.section-projects .pm-mail-hero .text-slate-700,
.section-projects .pm-mail-hero .text-gray-700,
.section-projects .pm-mail-hero .text-gray-600,
.section-projects .pm-mail-hero .text-slate-600{color:#fff!important}
.section-projects .pm-mail-hero .text-slate-500,
.section-projects .pm-mail-hero .text-gray-500{color:rgba(255,255,255,.82)!important}
.page-financial_invoices .pm-fin-hero,
.page-financial_offers .pm-fin-hero,
.page-financial_items .pm-fin-hero{
position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.16);
background:linear-gradient(135deg,rgba(6,182,212,.88),rgba(16,185,129,.82) 48%,rgba(132,204,22,.66));
box-shadow:0 26px 70px rgba(16,185,129,.16);color:#fff;
}
.page-financial_offers .pm-fin-hero::before,
.page-financial_offers .pm-fin-hero::after,
.page-financial_items .pm-fin-hero::before,
.page-financial_items .pm-fin-hero::after,
.page-financial_invoices .pm-fin-hero::before,
.page-financial_invoices .pm-fin-hero::after{content:'';position:absolute;border-radius:999px;background:rgba(255,255,255,.12);pointer-events:none}
.page-financial_offers .pm-fin-hero::before,
.page-financial_items .pm-fin-hero::before,
.page-financial_invoices .pm-fin-hero::before{width:220px;height:220px;top:-80px;right:-40px}
.page-financial_offers .pm-fin-hero::after,
.page-financial_items .pm-fin-hero::after,
.page-financial_invoices .pm-fin-hero::after{width:180px;height:180px;bottom:-90px;left:-50px;background:rgba(255,255,255,.09)}
.page-financial_invoices .pm-fin-pill,
.page-financial_offers .pm-fin-pill,
.page-financial_items .pm-fin-pill{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.24)}
.page-financial_invoices .pm-fin-title,.page-financial_invoices .pm-fin-copy,
.page-financial_offers .pm-fin-title,.page-financial_offers .pm-fin-copy,
.page-financial_items .pm-fin-title,.page-financial_items .pm-fin-copy{color:#fff}
.page-financial_invoices .pm-fin-copy,
.page-financial_offers .pm-fin-copy,
.page-financial_items .pm-fin-copy{opacity:.86}
.page-financial_invoices .pm-fin-cta,
.page-financial_offers .pm-fin-cta,
.page-financial_items .pm-fin-cta{background:#fff;color:#059669;border-color:#fff}
.dark.page-financial_invoices .pm-fin-hero,
.dark.page-financial_offers .pm-fin-hero,
.dark.page-financial_items .pm-fin-hero,
.dark .page-financial_invoices .pm-fin-hero,
.dark .page-financial_offers .pm-fin-hero,
.dark .page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.28),rgba(16,185,129,.22) 48%,rgba(132,204,22,.18));
border-color:rgba(148,163,184,.14);
box-shadow:0 24px 60px rgba(2,6,23,.34);
}
.page-financial_offers .ta-table,
.page-financial_items .ta-table{width:100%;text-align:left;border-collapse:separate;border-spacing:0}
.page-financial_offers .ta-table thead th,
.page-financial_items .ta-table thead th{background:#f7fafc;color:#64748b;font-size:14px;font-weight:800;padding:16px 20px;border-bottom:1px solid rgba(148,163,184,.12);text-transform:none;letter-spacing:0}
.page-financial_offers .ta-table tbody td,
.page-financial_items .ta-table tbody td{padding:18px 20px;border-bottom:1px solid rgba(148,163,184,.10);vertical-align:middle}
.page-financial_offers .ta-table tbody tr:hover,
.page-financial_items .ta-table tbody tr:hover{background:rgba(59,130,246,.04)}
.dark.page-financial_offers .ta-table thead th,
.dark.page-financial_items .ta-table thead th{background:rgba(15,23,42,.82);color:#cbd5e1;border-bottom-color:rgba(148,163,184,.18)}
.dark.page-financial_offers .ta-table tbody td,
.dark.page-financial_items .ta-table tbody td{border-bottom-color:rgba(51,65,85,.75)}
.dark.page-financial_offers .ta-table tbody tr:hover,
.dark.page-financial_items .ta-table tbody tr:hover{background:rgba(30,41,59,.74)}
.sec-table-wrap,.mk-directory-table-wrap,.analytics-table-wrap,.pm-lite-table,.table-mobile-scroll{overflow:auto;-webkit-overflow-scrolling:touch}
@media (max-width: 640px){
.sec-shell{overflow:hidden;}
.sec-panel,.sec-table-wrap{max-width:100%}
.sec-table{min-width:760px}
.mk-directory-table,.page-analytics .analytics-table-wrap table,.section-growth .pm-lite-table table,.section-monitoring .pm-lite-table table,.page-financial_invoices .ta-table,.page-financial_offers .ta-table,.page-financial_items .ta-table{min-width:720px}
.page-web_security .sec-panel-body{padding-left:0;padding-right:0}
.page-web_security .sec-panel-head{padding-left:18px;padding-right:18px}
.page-web_security .sec-site{grid-template-columns:40px minmax(180px,1fr);gap:10px;align-items:flex-start}
.page-web_security .sec-site-logo{width:40px;height:40px;border-radius:14px}
.page-web_security .sec-site-url{max-width:180px}
}
.mk-impact-chip{
display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;border-radius:999px;border:1px solid rgba(148,163,184,.16);
background:rgba(248,250,252,.9)!important;box-shadow:0 10px 24px rgba(15,23,42,.06)!important;font-size:.8125rem;font-weight:700;color:#334155;
}
.mk-impact-chip .mk-impact-label{font-weight:800;line-height:1.2}
.dark .mk-impact-chip{background:rgba(15,23,42,.82)!important;border-color:rgba(148,163,184,.16);box-shadow:none!important;color:#e2e8f0}
.mk-impact-chip.text-rose-600,.mk-impact-chip.text-rose-600 .mk-kpi-icon{color:#e11d48!important}
.mk-impact-chip.text-orange-600,.mk-impact-chip.text-orange-600 .mk-kpi-icon{color:#ea580c!important}
.mk-impact-chip.text-blue-600,.mk-impact-chip.text-blue-600 .mk-kpi-icon{color:#2563eb!important}
.mk-impact-chip.text-emerald-600,.mk-impact-chip.text-emerald-600 .mk-kpi-icon{color:#059669!important}
.dark .mk-impact-chip.text-rose-300,.dark .mk-impact-chip.text-rose-300 .mk-kpi-icon{color:#fda4af!important}
.dark .mk-impact-chip.text-orange-300,.dark .mk-impact-chip.text-orange-300 .mk-kpi-icon{color:#fdba74!important}
.dark .mk-impact-chip.text-blue-300,.dark .mk-impact-chip.text-blue-300 .mk-kpi-icon{color:#93c5fd!important}
.dark .mk-impact-chip.text-emerald-300,.dark .mk-impact-chip.text-emerald-300 .mk-kpi-icon{color:#6ee7b7!important}
@media (max-width: 980px){
.page-financial_offers .pm-fin-hero,.page-financial_items .pm-fin-hero{padding:22px}
}
@media (max-width: 640px){
.page-financial_offers .ta-table thead th,.page-financial_offers .ta-table tbody td,
.page-financial_items .ta-table thead th,.page-financial_items .ta-table tbody td{padding:14px 16px}
}
.section-projects .pm-mail-hero code{color:#fff!important;background:rgba(255,255,255,.10);padding:.15rem .4rem;border-radius:.5rem}
/* === 2026 subtle hero + mobile consistency pass === */
:root{
--hero-title-size: clamp(2rem, 4vw, 3.9rem);
--hero-copy-size: 15px;
}
.analytics-title,
.section-growth .pm-lite-title,
.section-growth .pm-lite-hero__title,
.section-growth .sec-title,
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.page-financial_invoices .pm-fin-title,
.page-financial_offers .pm-fin-title,
.page-financial_items .pm-fin-title,
.section-monitoring .monitoring-title,
.us-title{line-height:1.04!important;letter-spacing:-.04em}
.analytics-copy,
.section-growth .pm-lite-copy,
.section-growth .pm-lite-hero__desc,
.section-growth .sec-copy,
.section-projects .pm-mail-hero p,
.page-financial_invoices .pm-fin-copy,
.page-financial_offers .pm-fin-copy,
.page-financial_items .pm-fin-copy,
.section-monitoring .monitoring-copy,
.us-sub{font-size:var(--hero-copy-size)!important;line-height:1.68!important}
/* Growth / analytics: a touch subtler + proper dark hero */
.analytics-hero,
.section-growth .pm-lite-hero,
.section-growth .sec-hero{
background:linear-gradient(135deg,rgba(37,99,235,.84),rgba(99,102,241,.78) 46%,rgba(168,85,247,.66))!important;
box-shadow:0 22px 58px rgba(37,99,235,.18)!important;
}
.dark .analytics-hero,
.dark.page-analytics .analytics-hero,
.dark .page-analytics .analytics-hero,
.dark.section-growth .pm-lite-hero,
.dark .section-growth .pm-lite-hero,
.dark.section-growth .sec-hero,
.dark .section-growth .sec-hero{
background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(99,102,241,.22) 48%,rgba(168,85,247,.16))!important;
border-color:rgba(148,163,184,.14)!important;
box-shadow:0 24px 60px rgba(2,6,23,.34)!important;
}
.dark .analytics-hero .analytics-pill,
.dark .analytics-hero .analytics-kpi,
.dark .analytics-hero .analytics-btn-secondary{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important}
.dark .analytics-hero .analytics-copy,
.dark .analytics-hero .analytics-kpi-label,
.dark .analytics-hero .analytics-kpi-note{color:rgba(255,255,255,.78)!important}
.dark .analytics-hero .analytics-btn-primary{color:#1d4ed8!important;background:#fff!important;border-color:#fff!important}
/* Project management: steer more subtle blue */
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero{
background:linear-gradient(135deg,rgba(37,99,235,.78),rgba(14,165,233,.68) 48%,rgba(191,219,254,.48))!important;
box-shadow:0 22px 56px rgba(37,99,235,.16)!important;
}
.dark.section-projects .pm-lite-hero,
.dark .section-projects .pm-lite-hero,
.dark.section-projects .pm-mail-hero,
.dark .section-projects .pm-mail-hero{
background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(14,165,233,.18) 48%,rgba(15,23,42,.92))!important;
}
.section-projects .pm-mail-hero .text-black,
.section-projects .pm-mail-hero .text-slate-800,
.section-projects .pm-mail-hero .text-slate-900,
.section-projects .pm-mail-hero [class*='text-black']{color:#fff!important}
/* Finance green heroes softer */
.page-financial_invoices .pm-fin-hero,
.page-financial_offers .pm-fin-hero,
.page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.74),rgba(16,185,129,.70) 48%,rgba(132,204,22,.54))!important;
box-shadow:0 22px 58px rgba(16,185,129,.14)!important;
}
.dark.page-financial_invoices .pm-fin-hero,
.dark.page-financial_offers .pm-fin-hero,
.dark.page-financial_items .pm-fin-hero,
.dark .page-financial_invoices .pm-fin-hero,
.dark .page-financial_offers .pm-fin-hero,
.dark .page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.22),rgba(16,185,129,.18) 48%,rgba(132,204,22,.14))!important;
}
/* Users page in refreshed style */
.page-users .us-shell{display:grid;gap:18px}
.page-users .us-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-users .us-muted{color:#475569;font-size:14px}
.dark.page-users .us-muted{color:#94a3b8}
.page-users .us-table-panel{overflow:hidden}
.page-users .us-table{min-width:860px}
/* Monitor view polish */
.monitor-kpi{border-radius:1.45rem;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.9));box-shadow:0 18px 42px rgba(15,23,42,.055)}
.dark .monitor-kpi{background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(2,6,23,.9))}
.mv-tabbar .badges-stack{align-items:stretch}
@media (max-width:900px){
.mv-tabbar > div{align-items: stretch!important;display: contents;}
.mv-tabbar .badges-stack{width:100%;grid-template-columns: min-content;gap:.55rem;margin-top:.15rem}
.mv-tabbar .badges-stack .badge{justify-content:flex-start;width:100%;min-width:0;padding:.78rem .92rem;font-size:.9rem}
.mv-tabs{padding-bottom:2px;grid-template-columns: repeat(3, minmax(0, 1fr)) !important;}
}
/* PM issues / calendar mobile overflow */
.pm-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:768px){
.pm-table-scroll .pm-table{min-width:760px}
.pm-calendar-shell{overflow:hidden}
.pm-calendar-toolbar{display:grid;gap:10px}
.pm-calendar-toolbar .pm-viewtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.pm-calendar-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pm-calendar-wrap #pmCalendar{min-width:760px}
}
/* Web security / table mobile safeguard */
@media (max-width:768px){
.sx-card,.surface-card,.status-panel,.mk-directory-panel{min-width:0;max-width:100%}
.table-scroll{overflow-x:auto}
}
/* Status page impact pill + date picker control */
.mk-impact-chip{display:inline-flex!important;align-items:center;gap:.55rem;padding:.45rem .82rem!important;border-radius:999px;background:rgba(59,130,246,.10)!important;border:1px solid rgba(59,130,246,.16)!important;box-shadow:none!important;font-size:.82rem!important;font-weight:800!important}
.dark .mk-impact-chip{background:rgba(59,130,246,.14)!important;border-color:rgba(96,165,250,.18)!important}
.status-datepick{position:relative;display:inline-flex;align-items:center}
.status-datepick input[type="date"]{padding-right:2.7rem!important;border-radius:14px!important}
.status-datepick button{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);width:1.9rem;height:1.9rem;border-radius:999px;border:0;background:rgba(59,130,246,.10);color:#2563eb;display:inline-flex;align-items:center;justify-content:center}
.dark .status-datepick button{background:rgba(59,130,246,.18);color:#bfdbfe}
@media (max-width:640px){
:root{--hero-title-size: clamp(1.85rem, 8vw, 2.35rem);--hero-copy-size:14px}
.page-users .us-list-head{align-items:stretch}
}
/* === 2026 softer hero contrast pass === */
.analytics-hero,
.section-growth .pm-lite-hero,
.section-growth .sec-hero{
background:linear-gradient(135deg,rgba(37,99,235,.68),rgba(99,102,241,.58) 48%,rgba(168,85,247,.42))!important;
box-shadow:0 18px 46px rgba(37,99,235,.12)!important;
}
.analytics-hero:before,
.analytics-hero:after,
.section-growth .pm-lite-hero::before,
.section-growth .pm-lite-hero::after,
.section-growth .sec-hero::before,
.section-growth .sec-hero::after{
background:rgba(255,255,255,.08)!important;
}
.section-growth .pm-lite-copy,
.section-growth .pm-lite-hero__desc,
.section-growth .sec-copy,
.analytics-copy{color:rgba(255,255,255,.92)!important}
.section-growth .pm-lite-kpi,
.section-growth .pm-lite-hero__stat,
.section-growth .sec-stat,
.analytics-kpi{
background:rgba(255,255,255,.08)!important;
border-color:rgba(255,255,255,.16)!important;
}
.section-growth .pm-lite-kpi-label,
.section-growth .pm-lite-hero__stat-label,
.section-growth .sec-stat-label,
.analytics-kpi-label{color:rgba(255,255,255,.84)!important}
.section-growth .pm-lite-kpi-note,
.section-growth .pm-lite-hero__stat-note,
.section-growth .sec-stat-note,
.analytics-kpi-note{color:rgba(255,255,255,.88)!important}
.section-growth .pm-lite-kpi-value,
.section-growth .pm-lite-hero__stat-value,
.section-growth .sec-stat-value,
.analytics-kpi-value{color:#fff!important;text-shadow:0 1px 0 rgba(15,23,42,.08)}
.page-financial_invoices .pm-fin-hero,
.page-financial_offers .pm-fin-hero,
.page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.58),rgba(16,185,129,.50) 48%,rgba(132,204,22,.34))!important;
box-shadow:0 18px 44px rgba(16,185,129,.10)!important;
}
.page-financial_invoices .pm-fin-hero::before,
.page-financial_invoices .pm-fin-hero::after,
.page-financial_offers .pm-fin-hero::before,
.page-financial_offers .pm-fin-hero::after,
.page-financial_items .pm-fin-hero::before,
.page-financial_items .pm-fin-hero::after{background:rgba(255,255,255,.08)!important}
.page-financial_invoices .pm-fin-copy,
.page-financial_offers .pm-fin-copy,
.page-financial_items .pm-fin-copy,
.page-financial_invoices .pm-fin-pill,
.page-financial_offers .pm-fin-pill,
.page-financial_items .pm-fin-pill{color:rgba(255,255,255,.94)!important}
.page-financial_invoices .pm-fin-kpi,
.page-financial_offers .pm-fin-kpi,
.page-financial_items .pm-fin-kpi,
.page-financial_invoices .pm-fin-stat,
.page-financial_offers .pm-fin-stat,
.page-financial_items .pm-fin-stat{
background:rgba(255,255,255,.08)!important;
border-color:rgba(255,255,255,.16)!important;
}
.page-financial_invoices .pm-fin-kpi-label,
.page-financial_offers .pm-fin-kpi-label,
.page-financial_items .pm-fin-kpi-label,
.page-financial_invoices .pm-fin-stat-label,
.page-financial_offers .pm-fin-stat-label,
.page-financial_items .pm-fin-stat-label{color:rgba(255,255,255,.84)!important}
.page-financial_invoices .pm-fin-kpi-note,
.page-financial_offers .pm-fin-kpi-note,
.page-financial_items .pm-fin-kpi-note,
.page-financial_invoices .pm-fin-stat-note,
.page-financial_offers .pm-fin-stat-note,
.page-financial_items .pm-fin-stat-note{color:rgba(255,255,255,.88)!important}
.dark .analytics-hero,
.dark.page-analytics .analytics-hero,
.dark .page-analytics .analytics-hero,
.dark.section-growth .pm-lite-hero,
.dark .section-growth .pm-lite-hero,
.dark.section-growth .sec-hero,
.dark .section-growth .sec-hero{
background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(99,102,241,.16) 48%,rgba(168,85,247,.10))!important;
}
.dark.page-financial_invoices .pm-fin-hero,
.dark.page-financial_offers .pm-fin-hero,
.dark.page-financial_items .pm-fin-hero,
.dark .page-financial_invoices .pm-fin-hero,
.dark .page-financial_offers .pm-fin-hero,
.dark .page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(16,185,129,.14) 48%,rgba(132,204,22,.09))!important;
}
/* Mobile pull-to-refresh */
.mk-pull-refresh{
position:fixed;
top:calc(env(safe-area-inset-top, 0px) + 12px);
left:50%;
transform:translate(-50%, calc(-100% + var(--mk-pull-distance, 0px)));
z-index:2147483645;
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:999px;
background:rgba(255,255,255,.84);
border:1px solid rgba(148,163,184,.24);
box-shadow:0 12px 30px rgba(15,23,42,.12);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
opacity:0;
pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
}
.mk-pull-refresh.is-visible{opacity:1}
.mk-pull-refresh__dot{
width:12px;height:12px;border-radius:999px;
border:2px solid rgba(59,130,246,.24);
border-top-color:rgba(59,130,246,.92);
transform:rotate(calc(var(--mk-pull-progress, 0) * 240deg));
transition:transform .12s linear;
}
.mk-pull-refresh.is-ready .mk-pull-refresh__dot,
.mk-pull-refresh.is-loading .mk-pull-refresh__dot{
border-color:rgba(59,130,246,.2);
border-top-color:rgba(59,130,246,.95);
animation:mk-pull-spin .8s linear infinite;
}
.mk-pull-refresh__label{
font-size:12px;
font-weight:700;
letter-spacing:.01em;
color:#1e3a8a;
white-space:nowrap;
}
body.mk-pulling{overscroll-behavior-y:contain}
.dark .mk-pull-refresh{
background:rgba(15,23,42,.82);
border-color:rgba(148,163,184,.16);
box-shadow:0 14px 36px rgba(2,6,23,.34);
}
.dark .mk-pull-refresh__label{color:rgba(191,219,254,.96)}
@keyframes mk-pull-spin{to{transform:rotate(360deg)}}
/* === 2026 mobile/menu/hero hotfix pass === */
@supports (padding: max(0px)) { .app-topbar{ padding-top: 0 !important; } }
body.mk-safe-area .app-topbar{ margin-top: 0 !important; }
@media (max-width:767px){ .app-topbar > div{ min-height: 72px; } }
.analytics-hero,.section-growth .pm-lite-hero,.section-growth .sec-hero{background:linear-gradient(135deg,rgba(37,99,235,.52),rgba(99,102,241,.42) 50%,rgba(168,85,247,.26))!important;box-shadow:0 14px 34px rgba(37,99,235,.09)!important;border-color:rgba(255,255,255,.16)!important;}
.analytics-hero:before,.analytics-hero:after,.section-growth .pm-lite-hero::before,.section-growth .pm-lite-hero::after,.section-growth .sec-hero::before,.section-growth .sec-hero::after{background:rgba(255,255,255,.05)!important;}
.section-growth .pm-lite-copy,.section-growth .pm-lite-hero__desc,.section-growth .sec-copy,.analytics-copy{color:rgba(255,255,255,.96)!important;}
.section-growth .pm-lite-kpi,.section-growth .pm-lite-hero__stat,.section-growth .sec-stat,.analytics-kpi{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;}
.section-growth .pm-lite-kpi-label,.section-growth .pm-lite-hero__stat-label,.section-growth .sec-stat-label,.analytics-kpi-label{color:rgba(255,255,255,.90)!important;}
.section-growth .pm-lite-kpi-copy,.section-growth .pm-lite-kpi-note,.section-growth .pm-lite-hero__stat-note,.section-growth .sec-stat-note,.analytics-kpi-note{color:rgba(255,255,255,.84)!important;}
.page-financial_invoices .pm-fin-hero,.page-financial_offers .pm-fin-hero,.page-financial_items .pm-fin-hero{background:linear-gradient(135deg,rgba(6,182,212,.44),rgba(16,185,129,.36) 48%,rgba(132,204,22,.20))!important;box-shadow:0 14px 34px rgba(16,185,129,.08)!important;border-color:rgba(255,255,255,.16)!important;}
.page-financial_invoices .pm-fin-hero::before,.page-financial_invoices .pm-fin-hero::after,.page-financial_offers .pm-fin-hero::before,.page-financial_offers .pm-fin-hero::after,.page-financial_items .pm-fin-hero::before,.page-financial_items .pm-fin-hero::after{background:rgba(255,255,255,.05)!important;}
.page-financial_invoices .pm-fin-copy,.page-financial_offers .pm-fin-copy,.page-financial_items .pm-fin-copy,.page-financial_invoices .pm-fin-kpi-label,.page-financial_offers .pm-fin-kpi-label,.page-financial_items .pm-fin-kpi-label,.page-financial_invoices .pm-fin-stat-label,.page-financial_offers .pm-fin-stat-label,.page-financial_items .pm-fin-stat-label{color:rgba(255,255,255,.92)!important;}
.page-financial_invoices .pm-fin-kpi-note,.page-financial_offers .pm-fin-kpi-note,.page-financial_items .pm-fin-kpi-note,.page-financial_invoices .pm-fin-stat-note,.page-financial_offers .pm-fin-stat-note,.page-financial_items .pm-fin-stat-note{color:rgba(255,255,255,.84)!important;}
.page-financial_invoices .pm-fin-kpi,.page-financial_offers .pm-fin-kpi,.page-financial_items .pm-fin-kpi,.page-financial_invoices .pm-fin-stat,.page-financial_offers .pm-fin-stat,.page-financial_items .pm-fin-stat{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important;}
.dark .analytics-hero,.dark.page-analytics .analytics-hero,.dark .page-analytics .analytics-hero,.dark.section-growth .pm-lite-hero,.dark .section-growth .pm-lite-hero,.dark.section-growth .sec-hero,.dark .section-growth .sec-hero{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(99,102,241,.12) 50%,rgba(168,85,247,.07))!important;}
.dark.page-financial_invoices .pm-fin-hero,.dark.page-financial_offers .pm-fin-hero,.dark.page-financial_items .pm-fin-hero,.dark .page-financial_invoices .pm-fin-hero,.dark .page-financial_offers .pm-fin-hero,.dark .page-financial_items .pm-fin-hero{background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(16,185,129,.11) 48%,rgba(132,204,22,.06))!important;}
/* === final mobile/PWA/sidebar/hero normalization === */
body.mk-safe-area{padding-top:0!important;}
#ios-safe-area{height:env(safe-area-inset-top,0px)!important;z-index:2147483647!important;}
.app-topbar{padding-top:max(env(safe-area-inset-top,0px),0px)!important;}
.app-topbar > div{min-height:72px;}
@media (max-width:767px){
.app-topbar{top:0!important;}
.mk-shell-sidebar{top:0!important;height:100dvh!important;}
.mk-dual-sidebar{height:100dvh!important;min-height:100dvh!important;}
.mk-dual-rail{padding-top:calc(env(safe-area-inset-top,0px) + 14px)!important;}
.mk-dual-sub{padding-top:calc(env(safe-area-inset-top,0px) + 18px)!important;}
}
@media (min-width:768px){
.app-topbar{padding-top:0!important;}
.mk-dual-rail,.mk-dual-sub{padding-top:18px!important;}
}
/* unify PM / Analytics hero typography */
.analytics-hero h1,.pm-lite-hero__title,.pm-hero h1,.pm-mail-title,.pm-fin-title,.sec-hero__title{
font-size:clamp(2.35rem,4.8vw,4.3rem)!important;
line-height:.98!important;
letter-spacing:-.05em!important;
font-weight:900!important;
}
.analytics-copy,.pm-lite-copy,.pm-mail-copy,.pm-fin-copy,.pm-hero p,.sec-copy{
line-height:1.48!important;
}
/* make purple / green heroes subtler and readable */
.analytics-hero,
.section-growth .pm-lite-hero,
.section-growth .sec-hero,
.page-seo_sites .pm-lite-hero,
.page-pagespeed .pm-lite-hero,
.page-web_security .pm-lite-hero{
background:linear-gradient(135deg,rgba(37,99,235,.34),rgba(99,102,241,.26) 52%,rgba(168,85,247,.16))!important;
box-shadow:0 14px 34px rgba(37,99,235,.07)!important;
border-color:rgba(255,255,255,.18)!important;
}
.analytics-hero:before,.analytics-hero:after,
.section-growth .pm-lite-hero::before,.section-growth .pm-lite-hero::after,
.section-growth .sec-hero::before,.section-growth .sec-hero::after,
.page-seo_sites .pm-lite-hero::before,.page-seo_sites .pm-lite-hero::after,
.page-pagespeed .pm-lite-hero::before,.page-pagespeed .pm-lite-hero::after,
.page-web_security .pm-lite-hero::before,.page-web_security .pm-lite-hero::after{opacity:.55!important;}
.analytics-copy,.section-growth .pm-lite-copy,.section-growth .pm-lite-hero__desc,.section-growth .sec-copy,
.page-seo_sites .pm-lite-copy,.page-pagespeed .pm-lite-copy,.page-web_security .pm-lite-copy{color:rgba(255,255,255,.94)!important;}
.analytics-kpi,.section-growth .pm-lite-kpi,.section-growth .pm-lite-hero__stat,.section-growth .sec-stat,
.page-seo_sites .pm-lite-kpi,.page-pagespeed .pm-lite-kpi,.page-web_security .pm-lite-kpi{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;}
.analytics-kpi-label,.section-growth .pm-lite-kpi-label,.section-growth .pm-lite-hero__stat-label,.section-growth .sec-stat-label,
.page-seo_sites .pm-lite-kpi-label,.page-pagespeed .pm-lite-kpi-label,.page-web_security .pm-lite-kpi-label{color:rgba(255,255,255,.95)!important;}
.analytics-kpi-note,.section-growth .pm-lite-kpi-copy,.section-growth .pm-lite-kpi-note,.section-growth .pm-lite-hero__stat-note,.section-growth .sec-stat-note,
.page-seo_sites .pm-lite-kpi-copy,.page-pagespeed .pm-lite-kpi-copy,.page-web_security .pm-lite-kpi-copy{color:rgba(255,255,255,.84)!important;}
.page-financial_invoices .pm-fin-hero,.page-financial_offers .pm-fin-hero,.page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.26),rgba(16,185,129,.22) 48%,rgba(132,204,22,.12))!important;
box-shadow:0 14px 34px rgba(16,185,129,.06)!important;
}
.page-financial_invoices .pm-fin-kpi,.page-financial_offers .pm-fin-kpi,.page-financial_items .pm-fin-kpi,.page-financial_invoices .pm-fin-stat,.page-financial_offers .pm-fin-stat,.page-financial_items .pm-fin-stat{background:rgba(255,255,255,.08)!important;}
.page-financial_invoices .pm-fin-copy,.page-financial_offers .pm-fin-copy,.page-financial_items .pm-fin-copy,.page-financial_invoices .pm-fin-kpi-label,.page-financial_offers .pm-fin-kpi-label,.page-financial_items .pm-fin-kpi-label,.page-financial_invoices .pm-fin-kpi-note,.page-financial_offers .pm-fin-kpi-note,.page-financial_items .pm-fin-kpi-note{color:rgba(255,255,255,.92)!important;}
/* project management section uses same subtle blue family */
.page-project_pm_projects .pm-hero,
.page-project_pm_clients .pm-hero,
.page-project_pm_email_overview .pm-mail-hero,
.page-project_pm_analytics .pm-lite-hero,
.page-project_management .pm-lite-hero{
background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(59,130,246,.16) 54%,rgba(14,165,233,.10))!important;
border-color:rgba(59,130,246,.18)!important;
box-shadow:0 16px 40px rgba(37,99,235,.08)!important;
color:#fff!important;
}
.page-project_pm_projects .pm-hero .pm-kpi,
.page-project_pm_clients .pm-hero .pm-kpi,
.page-project_pm_email_overview .pm-kpi,
.page-project_pm_analytics .pm-lite-kpi,
.page-project_management .pm-lite-kpi{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important;}
.page-project_pm_projects .pm-hero p,
.page-project_pm_clients .pm-hero p,
.page-project_pm_email_overview .pm-mail-copy,
.page-project_pm_analytics .pm-lite-copy,
.page-project_management .pm-lite-copy{color:rgba(255,255,255,.94)!important;}
.page-project_pm_projects .pm-kpi-label,.page-project_pm_projects .pm-kpi-note,
.page-project_pm_email_overview .pm-kpi span,
.page-project_pm_analytics .pm-lite-kpi-label,.page-project_pm_analytics .pm-lite-kpi-copy,
.page-project_management .pm-lite-kpi-label,.page-project_management .pm-lite-kpi-copy,
.page-project_pm_clients .pm-hero .text-slate-500{color: rgba(255,255,255,.88);}
.page-project_pm_clients .pm-hero h1,.page-project_pm_clients .pm-hero strong,
.page-project_pm_email_overview .pm-mail-title,
.page-project_pm_projects .pm-hero h1{color:#fff!important;}
.dark .analytics-hero,.dark.section-growth .pm-lite-hero,.dark.section-growth .sec-hero,
.dark .page-seo_sites .pm-lite-hero,.dark .page-pagespeed .pm-lite-hero,.dark .page-web_security .pm-lite-hero{
background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(99,102,241,.09) 52%,rgba(168,85,247,.05))!important;
}
.dark.page-financial_invoices .pm-fin-hero,.dark.page-financial_offers .pm-fin-hero,.dark.page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.10),rgba(16,185,129,.08) 48%,rgba(132,204,22,.04))!important;
}
.dark.page-project_pm_projects .pm-hero,.dark.page-project_pm_clients .pm-hero,.dark.page-project_pm_email_overview .pm-mail-hero,.dark.page-project_pm_analytics .pm-lite-hero,.dark.page-project_management .pm-lite-hero{
background:linear-gradient(135deg,rgba(37,99,235,.14),rgba(59,130,246,.10) 54%,rgba(14,165,233,.06))!important;
}
/* === 2026 final iOS PWA + readability pass === */
@media (max-width:767px){
/* Top app header should start directly below the painted status bar. */
.app-topbar{padding-top:0!important;top:0!important}
.app-topbar>div{min-height:64px!important;padding-top:14px!important;padding-bottom:14px!important}
/* Sidebar content should sit lower than the iOS status bar. */
.mk-shell-sidebar{top:0!important;height:100dvh!important}
.mk-dual-sidebar{height:100dvh!important;min-height:100dvh!important}
.mk-dual-rail{padding-top:calc(env(safe-area-inset-top,0px) + 28px)!important}
.mk-dual-sub{padding-top:calc(env(safe-area-inset-top,0px) + 34px)!important}
}
/* PM heroes: same typography, just a touch darker for readability on the lighter subtle background. */
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero{
background:linear-gradient(135deg,rgba(37,99,235,.86),rgba(99,102,241,.80) 45%,rgba(139,92,246,.68))!important;
box-shadow:0 22px 56px rgba(37,99,235,.14)!important;
}
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.section-projects .pm-lite-title,
.section-projects .pm-mail-title,
.section-projects .pm-hero h1{
color:rgba(8,15,33,.94)!important;
}
.section-projects .pm-lite-hero p,
.section-projects .pm-mail-hero p,
.section-projects .pm-lite-copy,
.section-projects .pm-lite-hero__desc,
.section-projects .pm-mail-copy,
.section-projects .pm-label,
.section-projects .pm-lite-hero__eyebrow,
.section-projects .pm-mail-hero .text-slate-500,
.section-projects .pm-mail-hero .text-gray-500,
.section-projects .pm-mail-hero .text-slate-600,
.section-projects .pm-mail-hero .text-gray-600,
.section-projects .pm-mail-hero .text-slate-700,
.section-projects .pm-mail-hero .text-gray-700{
color:rgba(15,23,42,.74)!important;
}
.section-projects .pm-lite-hero .pm-kpi,
.section-projects .pm-mail-hero .pm-mail-stat{
background:rgba(255,255,255,.14)!important;
border-color:rgba(255,255,255,.20)!important;
}
.section-projects .pm-lite-hero .pm-kpi-num,
.section-projects .pm-mail-hero .pm-mail-stat strong,
.section-projects .pm-lite-hero__stat-value,
.section-projects .pm-lite-hero a,
.section-projects .pm-mail-hero a{
color:rgba(8,15,33,.94)!important;
}
/* Finance heroes: a tiny bit darker text as requested. */
.page-financial_invoices .pm-fin-hero,
.page-financial_offers .pm-fin-hero,
.page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(6,182,212,.82),rgba(16,185,129,.75) 48%,rgba(132,204,22,.58))!important;
box-shadow:0 22px 56px rgba(16,185,129,.14)!important;
}
.page-financial_invoices .pm-fin-title,
.page-financial_offers .pm-fin-title,
.page-financial_items .pm-fin-title{
color: white;
}
.page-financial_invoices .pm-fin-copy,
.page-financial_offers .pm-fin-copy,
.page-financial_items .pm-fin-copy,
.page-financial_invoices .pm-fin-pill,
.page-financial_offers .pm-fin-pill,
.page-financial_items .pm-fin-pill,
.page-financial_invoices .pm-fin-kpi-label,
.page-financial_offers .pm-fin-kpi-label,
.page-financial_items .pm-fin-kpi-label,
.page-financial_invoices .pm-fin-stat-label,
.page-financial_offers .pm-fin-stat-label,
.page-financial_items .pm-fin-stat-label,
.page-financial_invoices .pm-fin-kpi-note,
.page-financial_offers .pm-fin-kpi-note,
.page-financial_items .pm-fin-kpi-note,
.page-financial_invoices .pm-fin-stat-note,
.page-financial_offers .pm-fin-stat-note,
.page-financial_items .pm-fin-stat-note{
color: white;
}
.page-financial_invoices .pm-fin-kpi,
.page-financial_offers .pm-fin-kpi,
.page-financial_items .pm-fin-kpi,
.page-financial_invoices .pm-fin-stat,
.page-financial_offers .pm-fin-stat,
.page-financial_items .pm-fin-stat{
background:rgba(255,255,255,.14)!important;
border-color:rgba(255,255,255,.22)!important;
}
.page-financial_invoices .pm-fin-kpi strong,
.page-financial_offers .pm-fin-kpi strong,
.page-financial_items .pm-fin-kpi strong,
.page-financial_invoices .pm-fin-stat strong,
.page-financial_offers .pm-fin-stat strong,
.page-financial_items .pm-fin-stat strong{
color:rgba(6,18,24,.94)!important;
}
.dark .section-projects .pm-lite-hero,
.dark .section-projects .pm-mail-hero,
.dark .page-financial_invoices .pm-fin-hero,
.dark .page-financial_offers .pm-fin-hero,
.dark .page-financial_items .pm-fin-hero,
.dark.section-projects .pm-lite-hero,
.dark.section-projects .pm-mail-hero,
.dark.page-financial_invoices .pm-fin-hero,
.dark.page-financial_offers .pm-fin-hero,
.dark.page-financial_items .pm-fin-hero{
background:linear-gradient(135deg,rgba(30,64,175,.28),rgba(79,70,229,.22) 48%,rgba(15,23,42,.86))!important;
}
.dark .section-projects .pm-lite-hero h1,
.dark .section-projects .pm-mail-hero h1,
.dark .section-projects .pm-lite-title,
.dark .section-projects .pm-mail-title,
.dark .page-financial_invoices .pm-fin-title,
.dark .page-financial_offers .pm-fin-title,
.dark .page-financial_items .pm-fin-title{color:#fff!important}
.dark .section-projects .pm-lite-hero p,
.dark .section-projects .pm-mail-hero p,
.dark .section-projects .pm-lite-copy,
.dark .section-projects .pm-lite-hero__desc,
.dark .page-financial_invoices .pm-fin-copy,
.dark .page-financial_offers .pm-fin-copy,
.dark .page-financial_items .pm-fin-copy{color:rgba(226,232,240,.84)!important}
/* ===== iOS/PWA safe-area final fixes ===== */
:root{--sat:env(safe-area-inset-top,0px)}
html,body,body.mk-safe-area{padding-top:0!important}
#ios-safe-area{
position:fixed!important;
top:0!important;left:0!important;right:0!important;
height:var(--sat)!important;
background:#3B82F6!important;
z-index:2147483647!important;
pointer-events:none!important;
}
.app-topbar{
padding-top:calc(var(--sat) + 6px)!important;
}
.mk-shell-sidebar{
padding-top:var(--sat)!important;
}
.
@supports not (height:100dvh){
.mk-dual-sidebar{
height:calc(100vh - var(--sat))!important;
min-height:calc(100vh - var(--sat))!important;
}
}
@media (min-width:769px){
html,body,body.mk-safe-area{padding-top:0!important}
.app-topbar{padding-top:0!important}
.mk-shell-sidebar{padding-top:0!important}
.mk-dual-sidebar{height:100dvh!important;min-height:100dvh!important}
}
/* PM pages should match finance hero layout but with a blue tint; PM issues stays unchanged */
.page-project_management .pm-lite-hero,
.page-project_pm_analytics .pm-lite-hero,
.page-project_pm_clients .pm-hero,
.page-project_pm_email_overview .pm-mail-hero,
.page-project_overview .pm-lite-hero{
position:relative;
overflow:hidden;
border-radius:30px;
padding:30px;
border:1px solid rgba(148,163,184,.16) !important;
background:linear-gradient(135deg,rgba(59,130,246,.30),rgba(96,165,250,.24) 48%,rgba(255,255,255,.92)) !important;
box-shadow:0 26px 70px rgba(37,99,235,.12) !important;
color:#0f172a !important;
}
.page-project_management .pm-lite-hero::before,
.page-project_management .pm-lite-hero::after,
.page-project_pm_analytics .pm-lite-hero::before,
.page-project_pm_analytics .pm-lite-hero::after,
.page-project_pm_clients .pm-hero::before,
.page-project_pm_clients .pm-hero::after,
.page-project_pm_email_overview .pm-mail-hero::before,
.page-project_pm_email_overview .pm-mail-hero::after,
.page-project_overview .pm-lite-hero::before,
.page-project_overview .pm-lite-hero::after{
content:'';
position:absolute;
border-radius:999px;
background:rgba(255,255,255,.10) !important;
pointer-events:none;
}
.page-project_management .pm-lite-hero::before,
.page-project_pm_analytics .pm-lite-hero::before,
.page-project_pm_clients .pm-hero::before,
.page-project_pm_email_overview .pm-mail-hero::before,
.page-project_overview .pm-lite-hero::before{width:220px;height:220px;top:-80px;right:-40px}
.page-project_management .pm-lite-hero::after,
.page-project_pm_analytics .pm-lite-hero::after,
.page-project_pm_clients .pm-hero::after,
.page-project_pm_email_overview .pm-mail-hero::after,
.page-project_overview .pm-lite-hero::after{width:180px;height:180px;bottom:-90px;left:-50px;background:rgba(255,255,255,.08) !important}
.page-project_management .pm-lite-hero h1,
.page-project_pm_analytics .pm-lite-hero h1,
.page-project_pm_clients .pm-hero h1,
.page-project_pm_email_overview .pm-mail-hero h1,
.page-project_overview .pm-lite-hero h1,
.page-project_management .pm-lite-hero .pm-lite-hero__title,
.page-project_pm_analytics .pm-lite-hero .pm-lite-hero__title,
.page-project_pm_email_overview .pm-mail-title,
.page-project_pm_clients .pm-hero .text-3xl,
.page-project_pm_clients .pm-hero .font-black{
color:#0f172a !important;
font-size: clamp(2.5rem,6vw,2.6rem) !important;
line-height:.95 !important;
letter-spacing:-.05em !important;
font-weight:900 !important;
}
.page-project_management .pm-lite-hero p,
.page-project_pm_analytics .pm-lite-hero p,
.page-project_pm_clients .pm-hero p,
.page-project_pm_email_overview .pm-mail-copy,
.page-project_overview .pm-lite-hero p,
.page-project_management .pm-lite-hero [data-style-token*='mk-auto-3a58'],
.page-project_pm_analytics .pm-lite-hero [data-style-token*='mk-auto-2fec'],
.page-project_pm_clients .pm-hero .text-slate-500,
.page-project_pm_email_overview .pm-mail-copy{
color:rgba(255,255,255,.94) !important;
font-size:15px !important;
line-height:1.7 !important;
}
.page-project_management .pm-lite-hero .pm-label,
.page-project_pm_analytics .pm-lite-hero .pm-label,
.page-project_pm_clients .pm-hero .pm-pill,
.page-project_pm_email_overview .pm-mail-pill,
.page-project_overview .pm-lite-hero .pm-label,
.page-project_management .pm-lite-hero [data-style-token*='mk-auto-22e515'],
.page-project_pm_analytics .pm-lite-hero [data-style-token*='mk-auto-66719'],
.page-project_pm_email_overview .pm-mail-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 16px;
border-radius:999px;
background:rgba(255,255,255,.62) !important;
border:1px solid rgba(255,255,255,.28) !important;
color:#334155 !important;
box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}
.page-project_management .pm-lite-hero .pm-kpi,
.page-project_pm_analytics .pm-lite-hero .pm-kpi,
.page-project_pm_clients .pm-hero .pm-kpi,
.page-project_pm_email_overview .pm-mail-stat,
.page-project_overview .pm-lite-hero .pm-kpi{
background:rgba(255,255,255,.68) !important;
border:1px solid rgba(255,255,255,.22) !important;
box-shadow:0 16px 32px rgba(15,23,42,.05) !important;
backdrop-filter:blur(10px);
}
.page-project_management .pm-lite-hero .pm-kpi-num,
.page-project_pm_analytics .pm-lite-hero .pm-kpi-num,
.page-project_management .pm-lite-hero .pm-kpi-value,
.page-project_pm_analytics .pm-lite-hero .pm-kpi-value,
.page-project_pm_clients .pm-hero .pm-kpi-value,
.page-project_pm_email_overview .pm-mail-stat strong,
.page-project_pm_clients .pm-hero strong,
.page-project_overview .pm-lite-hero .pm-kpi-num{
color:#0f172a !important;
}
.page-project_management .pm-lite-hero .pm-kpi .pm-label,
.page-project_pm_analytics .pm-lite-hero .pm-kpi .pm-label,
.page-project_pm_email_overview .pm-mail-stat span,
.page-project_overview .pm-lite-hero .pm-kpi .pm-label{
color:#64748b !important;
}
.page-project_management .pm-lite-hero a,
.page-project_pm_analytics .pm-lite-hero a,
.page-project_pm_clients .pm-hero a,
.page-project_pm_email_overview .pm-mail-hero a,
.page-project_overview .pm-lite-hero a{
color:#2563eb !important;
border-color:rgba(59,130,246,.18) !important;
}
.dark.page-project_management .pm-lite-hero,
.dark.page-project_pm_analytics .pm-lite-hero,
.dark.page-project_pm_clients .pm-hero,
.dark.page-project_pm_email_overview .pm-mail-hero,
.dark.page-project_overview .pm-lite-hero,
.dark .page-project_management .pm-lite-hero,
.dark .page-project_pm_analytics .pm-lite-hero,
.dark .page-project_pm_clients .pm-hero,
.dark .page-project_pm_email_overview .pm-mail-hero,
.dark .page-project_overview .pm-lite-hero{
background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(14,165,233,.14) 48%,rgba(15,23,42,.94)) !important;
border-color:rgba(148,163,184,.14) !important;
}
.dark.page-project_management .pm-lite-hero h1,
.dark.page-project_pm_analytics .pm-lite-hero h1,
.dark.page-project_pm_clients .pm-hero h1,
.dark.page-project_pm_email_overview .pm-mail-hero h1,
.dark.page-project_overview .pm-lite-hero h1,
.dark .page-project_management .pm-lite-hero h1,
.dark .page-project_pm_analytics .pm-lite-hero h1,
.dark .page-project_pm_clients .pm-hero h1,
.dark .page-project_pm_email_overview .pm-mail-hero h1,
.dark .page-project_overview .pm-lite-hero h1{color:#f8fafc !important}
.dark.page-project_management .pm-lite-hero p,
.dark.page-project_pm_analytics .pm-lite-hero p,
.dark.page-project_pm_clients .pm-hero p,
.dark.page-project_pm_email_overview .pm-mail-copy,
.dark.page-project_overview .pm-lite-hero p,
.dark .page-project_management .pm-lite-hero p,
.dark .page-project_pm_analytics .pm-lite-hero p,
.dark .page-project_pm_clients .pm-hero p,
.dark .page-project_pm_email_overview .pm-mail-copy,
.dark .page-project_overview .pm-lite-hero p{color:#cbd5e1 !important}
@media (max-width: 980px){
.page-project_management .pm-lite-hero,
.page-project_pm_analytics .pm-lite-hero,
.page-project_pm_clients .pm-hero,
.page-project_pm_email_overview .pm-mail-hero,
.page-project_overview .pm-lite-hero{padding:22px}
.page-project_management .pm-lite-hero h1,
.page-project_pm_analytics .pm-lite-hero h1,
.page-project_pm_clients .pm-hero h1,
.page-project_pm_email_overview .pm-mail-hero h1,
.page-project_overview .pm-lite-hero h1{font-size:30px !important}
}
/* === Final PM hero parity fix: match finance structure, but blue tint + dark text === */
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero,
.section-projects .pm-hero{
position:relative;
overflow:hidden;
border-radius:30px;
padding:30px;
border:1px solid rgba(148,163,184,.16)!important;
background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(96,165,250,.14) 48%,rgba(255,255,255,.94))!important;
box-shadow:0 24px 64px rgba(37,99,235,.08)!important;
color:#0f172a!important;
}
.section-projects .pm-lite-hero::before,
.section-projects .pm-mail-hero::before,
.section-projects .pm-hero::before,
.section-projects .pm-lite-hero::after,
.section-projects .pm-mail-hero::after,
.section-projects .pm-hero::after{
content:'';
position:absolute;
border-radius:999px;
pointer-events:none;
}
.section-projects .pm-lite-hero::before,
.section-projects .pm-mail-hero::before,
.section-projects .pm-hero::before{
width:220px;height:220px;top:-80px;right:-40px;
background:rgba(255,255,255,.18)!important;
}
.section-projects .pm-lite-hero::after,
.section-projects .pm-mail-hero::after,
.section-projects .pm-hero::after{
width:180px;height:180px;bottom:-90px;left:-50px;
background:rgba(255,255,255,.10)!important;
}
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.section-projects .pm-hero h1,
.section-projects .pm-mail-title,
.section-projects .pm-fin-title{
color:#0f172a!important;
font-size:32px!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
font-weight:900!important;
}
.section-projects .pm-lite-hero .pm-label,
.section-projects .pm-lite-hero__eyebrow,
.section-projects .pm-mail-pill,
.section-projects .pm-pill,
.section-projects .pm-fin-pill,
.section-projects [data-style-token*='mk-auto-22e51530f2']{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
border:1px solid rgba(148,163,184,.16)!important;
gba(15,23,42,.05)!important;
}
.section-projects .pm-lite-hero p,
.section-projects .pm-mail-copy,
.section-projects .pm-mail-hero p,
.section-projects .pm-hero p,
.section-projects [data-style-token*='mk-auto-3a58a809a0'],
.section-projects [data-style-token*='mk-auto-2fec6243b8'],
.section-projects .text-slate-500,
.section-projects .text-slate-600,
.section-projects .text-slate-700,
.section-projects .text-gray-500,
.section-projects .text-gray-600,
.section-projects .text-gray-700{
color:#475569!important;
opacity:1!important;
font-size:14px!important;
line-height:1.7!important;
}
.section-projects .pm-kpi,
.section-projects .pm-mail-stat,
.section-projects .pm-hero .pm-kpi{
background:rgba(255,255,255,.76)!important;
border:1px solid rgba(148,163,184,.16)!important;
box-shadow:0 14px 30px rgba(15,23,42,.05)!important;
backdrop-filter:blur(10px);
}
.section-projects .pm-kpi .pm-label,
.section-projects .pm-kpi-label,
.section-projects .pm-kpi-note,
.section-projects .pm-mail-stat span,
.section-projects .pm-mail-stat small{
color:#64748b!important;
}
.section-projects .pm-kpi-num,
.section-projects .pm-kpi-value,
.section-projects .pm-mail-stat b,
.section-projects .pm-mail-stat strong,
.section-projects .pm-hero .pm-kpi-value{
color:#0f172a!important;
}
.section-projects .pm-lite-hero a,
.section-projects .pm-mail-hero a,
.section-projects .pm-hero a.pm-btn-secondary,
.section-projects .pm-hero a.pm-btn-ghost{
background:rgba(255,255,255,.78)!important;
color:#1d4ed8!important;
border-color:rgba(148,163,184,.18)!important;
}
.section-projects .pm-hero a.pm-btn-primary,
.section-projects .pm-mail-hero .pm-fin-cta,
.section-projects .pm-mail-hero .pm-cta-primary{
background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
color:#fff!important;
border-color:#2563eb!important;
}
.dark.section-projects .pm-lite-hero,
.dark .section-projects .pm-lite-hero,
.dark.section-projects .pm-mail-hero,
.dark .section-projects .pm-mail-hero,
.dark.section-projects .pm-hero,
.dark .section-projects .pm-hero{
background:linear-gradient(135deg,rgba(37,99,235,.24),rgba(96,165,250,.18) 48%,rgba(15,23,42,.92))!important;
border-color:rgba(148,163,184,.14)!important;
box-shadow:0 24px 60px rgba(2,6,23,.34)!important;
}
.dark.section-projects .pm-lite-hero h1,
.dark .section-projects .pm-lite-hero h1,
.dark.section-projects .pm-mail-hero h1,
.dark .section-projects .pm-mail-hero h1,
.dark.section-projects .pm-hero h1,
.dark .section-projects .pm-hero h1,
.dark .section-projects .pm-mail-title{
color:#f8fafc!important;
}
.dark.section-projects .pm-lite-hero p,
.dark .section-projects .pm-lite-hero p,
.dark.section-projects .pm-mail-hero p,
.dark .section-projects .pm-mail-hero p,
.dark.section-projects .pm-hero p,
.dark .section-projects .pm-hero p,
.dark .section-projects [data-style-token*='mk-auto-3a58a809a0'],
.dark .section-projects [data-style-token*='mk-auto-2fec6243b8']{color:#cbd5e1!important}
.dark.section-projects .pm-kpi,
.dark .section-projects .pm-kpi,
.dark.section-projects .pm-mail-stat,
.dark .section-projects .pm-mail-stat{background:rgba(15,23,42,.55)!important;border-color:rgba(148,163,184,.16)!important}
.dark.section-projects .pm-kpi-num,
.dark .section-projects .pm-kpi-num,
.dark.section-projects .pm-kpi-value,
.dark .section-projects .pm-kpi-value,
.dark.section-projects .pm-mail-stat strong,
.dark .section-projects .pm-mail-stat strong{color:#f8fafc!important}
@media (max-width:900px){
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero,
.section-projects .pm-hero{padding:22px!important}
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.section-projects .pm-hero h1,
.section-projects .pm-mail-title{font-size:28px!important}
}
/* === Final PM hero light-text fix === */
.section-projects .pm-lite-hero,
.section-projects .pm-mail-hero,
.section-projects .pm-hero{
background:linear-gradient(135deg,rgba(96,165,250,.24),rgba(59,130,246,.18) 48%,rgba(255,255,255,.94))!important;
border:1px solid rgba(148,163,184,.16)!important;
box-shadow:0 24px 70px rgba(15,23,42,.08)!important;
color:#0f172a!important;
}
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.section-projects .pm-hero h1,
.section-projects .pm-mail-title,
.section-projects .pm-fin-title,
.section-projects .pm-lite-hero [data-style-token*="mk-auto-66719fb2cc"]{
color:#0f172a!important;
font-size:32px!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
font-weight:900!important;
}
.section-projects .pm-lite-hero p,
.section-projects .pm-mail-copy,
.section-projects .pm-mail-hero p,
.section-projects .pm-hero p,
.section-projects .pm-lite-hero [data-style-token*="mk-auto-2fec6243b8"],
.section-projects .pm-mail-hero .text-slate-500,
.section-projects .pm-mail-hero .text-slate-600,
.section-projects .pm-mail-hero .text-slate-700,
.section-projects .pm-mail-hero .text-gray-500,
.section-projects .pm-mail-hero .text-gray-600,
.section-projects .pm-mail-hero .text-gray-700{
color:#475569!important;
opacity:1!important;
}
.section-projects .pm-lite-hero .pm-label,
.section-projects .pm-lite-hero__eyebrow,
.section-projects .pm-mail-pill,
.section-projects .pm-pill,
.section-projects .pm-fin-pill,
.section-projects .pm-kpi .pm-label,
.section-projects .pm-kpi-label,
.section-projects .pm-kpi-note,
.section-projects .pm-mail-stat span,
.section-projects .pm-mail-stat small,
.section-projects .pm-mail-hero .text-slate-900,
.section-projects .pm-mail-hero .text-slate-700,
.section-projects .pm-mail-hero .text-gray-700{
}
.section-projects .pm-kpi-num,
.section-projects .pm-kpi-value,
.section-projects .pm-mail-stat b,
.section-projects .pm-mail-stat strong,
.section-projects .pm-hero .pm-kpi-value,
.section-projects .pm-lite-hero [data-style-token*="mk-auto-f3365f0c8a"]{
color:#0f172a!important;
}
.dark.section-projects .pm-lite-hero,
.dark .section-projects .pm-lite-hero,
.dark.section-projects .pm-mail-hero,
.dark .section-projects .pm-mail-hero,
.dark.section-projects .pm-hero,
.dark .section-projects .pm-hero{
background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(96,165,250,.20) 48%,rgba(15,23,42,.94))!important;
color:#fff!important;
}
.dark.section-projects .pm-lite-hero h1,
.dark .section-projects .pm-lite-hero h1,
.dark.section-projects .pm-mail-hero h1,
.dark .section-projects .pm-mail-hero h1,
.dark.section-projects .pm-hero h1,
.dark .section-projects .pm-hero h1,
.dark .section-projects .pm-mail-title,
.dark .section-projects .pm-fin-title,
.dark .section-projects .pm-lite-hero [data-style-token*="mk-auto-66719fb2cc"]{color:#fff!important}
.dark.section-projects .pm-lite-hero p,
.dark .section-projects .pm-lite-hero p,
.dark.section-projects .pm-mail-hero p,
.dark .section-projects .pm-mail-hero p,
.dark.section-projects .pm-hero p,
.dark .section-projects .pm-hero p,
.dark .section-projects .pm-lite-hero [data-style-token*="mk-auto-2fec6243b8"]{color:rgba(226,232,240,.84)!important}
.dark .section-projects .pm-lite-hero .pm-label,
.dark .section-projects .pm-lite-hero__eyebrow,
.dark .section-projects .pm-mail-pill,
.dark .section-projects .pm-pill,
.dark .section-projects .pm-fin-pill,
.dark .section-projects .pm-kpi .pm-label,
.dark .section-projects .pm-kpi-label,
.dark .section-projects .pm-kpi-note,
.dark .section-projects .pm-mail-stat span,
.dark .section-projects .pm-mail-stat small{color:rgba(226,232,240,.86)!important}
.dark .section-projects .pm-kpi-num,
.dark .section-projects .pm-kpi-value,
.dark .section-projects .pm-mail-stat b,
.dark .section-projects .pm-mail-stat strong,
.dark .section-projects .pm-lite-hero [data-style-token*="mk-auto-f3365f0c8a"]{color:#fff!important}
@media (max-width:900px){
.section-projects .pm-lite-hero h1,
.section-projects .pm-mail-hero h1,
.section-projects .pm-hero h1,
.section-projects .pm-mail-title,
.section-projects .pm-fin-title,
.section-projects .pm-lite-hero [data-style-token*="mk-auto-66719fb2cc"]{font-size:28px!important}
}
/* Final PM hero text parity fix: match finance hero text behavior with blue tint */
.page-project_management .pm-lite-hero,
.page-project_pm_analytics .pm-lite-hero,
.page-project_pm_clients .pm-hero,
.page-project_pm_email_overview .pm-mail-hero,
.page-project_pm_projects .pm-hero,
.page-project_overview .pm-lite-hero,
.section-projects .pm-lite-hero,
.section-projects .pm-hero,
.section-projects .pm-mail-hero{
color:#0f172a !important;
}
.page-project_management .pm-lite-hero h1,
.page-project_pm_analytics .pm-lite-hero h1,
.page-project_pm_clients .pm-hero h1,
.page-project_pm_email_overview .pm-mail-title,
.page-project_pm_projects .pm-hero h1,
.page-project_overview .pm-lite-hero h1,
.section-projects .pm-lite-hero h1,
.section-projects .pm-hero h1,
.section-projects .pm-mail-title{
display:block !important;
padding:0 !important;
background:none !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
color:#0f172a !important;
font-size:clamp(2.95rem,6vw,4.45rem) !important;
line-height:.95 !important;
letter-spacing:-.05em !important;
font-weight:900 !important;
}
.page-project_pm_analytics .pm-lite-hero [data-style-token*='mk-auto-66719fb2cc']{
display:block !important;
padding:0 !important;
background:none !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
color:#0f172a !important;
line-height:.95 !important;
letter-spacing:-.05em !important;
font-weight:900 !important;
}
.page-project_management .pm-lite-hero p,
.page-project_pm_analytics .pm-lite-hero p,
.page-project_pm_clients .pm-hero p,
.page-project_pm_email_overview .pm-mail-copy,
.page-project_pm_projects .pm-hero p,
.page-project_overview .pm-lite-hero p,
.page-project_management .pm-lite-hero [data-style-token*='mk-auto-3a58'],
.page-project_pm_analytics .pm-lite-hero [data-style-token*='mk-auto-2fec'],
.page-project_pm_clients .pm-hero .text-slate-500,
.page-project_pm_clients .pm-hero .dark\:text-slate-400,
.section-projects .pm-lite-hero p,
.section-projects .pm-hero p,
.section-projects .pm-mail-copy,
.section-projects [data-style-token*='mk-auto-3a58'],
.section-projects [data-style-token*='mk-auto-2fec']{
color:#334155 !important;
opacity:1 !important;
}
.page-project_management .pm-lite-hero .pm-label,
.page-project_pm_analytics .pm-lite-hero .pm-label,
.page-project_pm_clients .pm-hero .pm-pill,
.page-project_pm_email_overview .pm-mail-pill,
.page-project_pm_projects .pm-pill,
.page-project_overview .pm-lite-hero .pm-label,
.section-projects .pm-lite-hero .pm-label,
.section-projects .pm-pill,
.section-projects .pm-mail-pill{
}
.dark.page-project_management .pm-lite-hero h1,
.dark.page-project_pm_analytics .pm-lite-hero h1,
.dark.page-project_pm_clients .pm-hero h1,
.dark.page-project_pm_email_overview .pm-mail-title,
.dark.page-project_pm_projects .pm-hero h1,
.dark.page-project_overview .pm-lite-hero h1,
.dark .page-project_management .pm-lite-hero h1,
.dark .page-project_pm_analytics .pm-lite-hero h1,
.dark .page-project_pm_clients .pm-hero h1,
.dark .page-project_pm_email_overview .pm-mail-title,
.dark .page-project_pm_projects .pm-hero h1,
.dark .page-project_overview .pm-lite-hero h1,
.dark.section-projects .pm-lite-hero h1,
.dark.section-projects .pm-hero h1,
.dark.section-projects .pm-mail-title,
.dark .section-projects .pm-lite-hero h1,
.dark .section-projects .pm-hero h1,
.dark .section-projects .pm-mail-title,
.dark .page-project_pm_analytics .pm-lite-hero [data-style-token*='mk-auto-66719fb2cc']{
color:#f8fafc !important;
}
.dark.page-project_management .pm-lite-hero p,
.dark.page-project_pm_analytics .pm-lite-hero p,
.dark.page-project_pm_clients .pm-hero p,
.dark.page-project_pm_email_overview .pm-mail-copy,
.dark.page-project_pm_projects .pm-hero p,
.dark.page-project_overview .pm-lite-hero p,
.dark .page-project_management .pm-lite-hero p,
.dark .page-project_pm_analytics .pm-lite-hero p,
.dark .page-project_pm_clients .pm-hero p,
.dark .page-project_pm_email_overview .pm-mail-copy,
.dark .page-project_pm_projects .pm-hero p,
.dark .page-project_overview .pm-lite-hero p,
.dark.section-projects .pm-lite-hero p,
.dark.section-projects .pm-hero p,
.dark.section-projects .pm-mail-copy,
.dark .section-projects .pm-lite-hero p,
.dark .section-projects .pm-hero p,
.dark .section-projects .pm-mail-copy{
color:#e2e8f0 !important;
}
/* Unified hero title sizing: match .st-title everywhere */
.st-title,
.st-hero .st-title,
.sv-hero-title,
.mv-title,
.us-title,
.pm-lite-hero__title,
.pm-fin-hero__title,
.pm-mail-hero__title,
.pm-hero h1,
.pm-lite-hero h1,
.pm-fin-hero h1,
.pm-mail-hero h1,
.pm-analytics-shell .pm-hero h1,
.pm-wrap .pm-lite-hero h1,
.pm-shell .pm-hero h1,
[class*="hero"] h1,
[class*="hero"] .hero-title {
font-size: clamp(1.9rem, 2.7vw, 2.8rem) !important;
line-height: 1.04 !important;
font-weight: 800 !important;
letter-spacing: -.03em !important;
}
@media (max-width: 900px) {
.st-title,
.st-hero .st-title,
.sv-hero-title,
.mv-title,
.us-title,
.pm-lite-hero__title,
.pm-fin-hero__title,
.pm-mail-hero__title,
.pm-hero h1,
.pm-lite-hero h1,
.pm-fin-hero h1,
.pm-mail-hero h1,
.pm-analytics-shell .pm-hero h1,
.pm-wrap .pm-lite-hero h1,
.pm-shell .pm-hero h1,
[class*="hero"] h1,
[class*="hero"] .hero-title {
font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
}
}
/* Desktop dark-mode sidebar fix */
@media (min-width: 768px){
#mkShellSidebar,
.mk-shell-sidebar{
transform: none !important;
overflow: hidden !important;
}
#mkShellSidebar .mk-dual-sidebar,
.mk-shell-sidebar .mk-dual-sidebar{
height: 100dvh !important;
min-height: 100dvh !important;
overflow: hidden !important;
}
@supports not (height: 100dvh){
#mkShellSidebar .mk-dual-sidebar,
.mk-shell-sidebar .mk-dual-sidebar{
height: 100vh !important;
min-height: 100vh !important;
}
}
#mkShellSidebar .mk-dual-sub,
.mk-shell-sidebar .mk-dual-sub{
height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
html,
body,
body.mk-safe-area,
.dark body{
height: auto !important;
min-height: 100% !important;
}
}
/* ===== Phase 3 targeted view polish ===== */
.mk-view-hero{position:relative;overflow:hidden;border-radius:28px;padding:26px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 55%,rgba(255,255,255,.96));box-shadow:0 24px 70px rgba(15,23,42,.08);margin-bottom:18px}
.dark .mk-view-hero{background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(16,185,129,.10) 55%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14)}
.mk-view-hero__top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;position:relative;z-index:1}
.mk-view-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:rgba(37,99,235,.10);color:#1d4ed8;font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.dark .mk-view-pill{background:rgba(59,130,246,.18);color:#bfdbfe}
.mk-view-title{margin:12px 0 8px;font-size:32px;line-height:1.05;font-weight:900;letter-spacing:-.04em;color:#0f172a}
.dark .mk-view-title{color:#f8fafc}
.mk-view-title span{font-size:.9rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.dark .mk-view-title span{color:#93c5fd}
.mk-view-copy{max-width:860px;font-size:14px;line-height:1.7;color:#64748b;word-break:break-word}
.dark .mk-view-copy{color:#94a3b8}
.mk-view-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mk-view-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 16px;border-radius:16px;font-weight:800;text-decoration:none;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.86);color:#0f172a;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.dark .mk-view-btn{background:rgba(15,23,42,.72);color:#e2e8f0;border-color:rgba(148,163,184,.16)}
.mk-view-btn--primary{background:linear-gradient(180deg,rgba(37,99,235,.92),rgba(29,78,216,.92));border-color:rgba(37,99,235,.55);color:#eff6ff;box-shadow:0 14px 34px rgba(37,99,235,.18)}
.dark .mk-view-btn--primary{background:linear-gradient(180deg,rgba(59,130,246,.92),rgba(37,99,235,.92));border-color:rgba(96,165,250,.35)}
.mk-view-btn--ghost{background:rgba(255,255,255,.92)}
.mk-view-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px;position:relative;z-index:1}
.mk-view-stats--inside{margin-top:20px}
.mk-view-stat{padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(10px)}
.dark .mk-view-stat{background:rgba(15,23,42,.42);border-color:rgba(148,163,184,.14)}
.mk-view-stat__label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.dark .mk-view-stat__label{color:#94a3b8}
.mk-view-stat__value{margin-top:6px;font-size:28px;line-height:1.05;font-weight:900;color:#0f172a}
.dark .mk-view-stat__value{color:#f8fafc}
.mk-view-stat__note{margin-top:6px;font-size:12px;line-height:1.5;color:#64748b}
.dark .mk-view-stat__note{color:#94a3b8}
/* Keep monitor consistent with new hero cards */
.mv-hero .mk-view-stat{background:rgba(255,255,255,.72)}
.dark .mv-hero .mk-view-stat{background:rgba(15,23,42,.42)}
/* SEO / PageSpeed / Web Security pages */
.seo-report-card{border-radius:24px!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:0 16px 36px rgba(15,23,42,.06)!important}
.ws-head-minimal{display:none}
.ws-top-grid,.seo-layout,.psi-wrap{position:relative;z-index:1}
/* Web Security overview + view mobile tables */
.sec-panel,.sec-table-wrap,.security-history,.overflow-auto{max-width:100%}
.security-table,.sec-table,.psi-table{min-width: max-content;}
@media (max-width: 760px){
.security-table,.sec-table,.psi-table{
overflow: scroll!important;
}
.ws-top-grid{grid-template-columns: 1fr!important;display: inline;}
}
/* PageSpeed hero and shell */
.psi-shell{overflow:hidden}
.psi-actions{display:flex;flex-wrap:wrap;gap:10px}
.psi-table{table-layout:auto}
/* SEO view polish */
.seo-top{display:none}
.seo-layout > .seo-side > div:first-child,
.web-security-hero-card{border-radius:22px}
/* Financial invoices hero integration */
.pm-fin-shell .fin-cards--hero{margin-top:-34px;position:relative;z-index:3;margin-bottom:24px}
.pm-fin-shell .fin-cards--hero .fin-card{box-shadow:0 16px 32px rgba(15,23,42,.08)}
@media (min-width:901px){.pm-fin-shell .fin-cards--hero{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Make sec hero align with other growth pages */
.sec-hero{background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(16,185,129,.08) 55%,rgba(255,255,255,.96));border:1px solid rgba(148,163,184,.16);box-shadow:0 24px 70px rgba(15,23,42,.08);color:#0f172a}
.dark .sec-hero{background:linear-gradient(135deg,rgba(37,99,235,.20),rgba(16,185,129,.10) 55%,rgba(15,23,42,.94));border-color:rgba(148,163,184,.14);color:#f8fafc}
.sec-hero:before,.sec-hero:after{background:rgba(255,255,255,.18)}
.sec-title{color:#0f172a}.dark .sec-title{color:#f8fafc}
.sec-sub{color:#64748b}.dark .sec-sub{color:#94a3b8}
.sec-kicker{background:rgba(37,99,235,.10);color:#1d4ed8;border:1px solid rgba(59,130,246,.12)}
.dark .sec-kicker{background:rgba(59,130,246,.18);color:#bfdbfe;border-color:rgba(96,165,250,.18)}
.sec-stat{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.55)}
.dark .sec-stat{background:rgba(15,23,42,.42);border-color:rgba(148,163,184,.14)}
.sec-stat-label{color:#64748b}.dark .sec-stat-label{color:#94a3b8}
.sec-stat-value{color:#0f172a}.dark .sec-stat-value{color:#f8fafc}
.sec-stat-note{color:#64748b}.dark .sec-stat-note{color:#94a3b8}
@media (max-width: 1024px){
.mk-view-hero__top{flex-direction:column;align-items:flex-start}
.mk-view-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
.mk-view-hero{padding:20px;border-radius:24px}
.mk-view-title{font-size:26px}
.mk-view-stats{grid-template-columns:1fr}
.mk-view-stat__value{font-size:24px}
.pm-fin-shell .fin-cards--hero{margin-top:14px}
.psi-h{display:none}
.psi-tabs{padding-top:1rem}
}
/* PM timeline + checklist details */
.pm-timeline{display:grid;gap:14px;position:relative}
.pm-timeline::before{content:'';position:absolute;left:19px;top:4px;bottom:4px;width:2px;background:rgba(148,163,184,.18)}
.pm-tl-item{position:relative}
.pm-comment-reply{margin-left:34px;margin-top:10px}
.pm-activity-timeline .pm-comment{background:transparent;border:none;padding:0}
.pm-activity-card{display:grid;gap:10px;padding:14px 16px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:rgba(248,250,252,.78)}
.pm-activity-actor{display:flex;align-items:center;gap:10px;color:#475569;font-weight:700}
.pm-attach-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.pm-attach{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:#fff;text-decoration:none;color:#0f172a;overflow:hidden}
.pm-attach:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.pm-attach-img{display:grid;gap:8px;align-items:start}
.pm-attach-img img{width:100%;max-height:180px;object-fit:cover;border-radius:12px;border:1px solid rgba(148,163,184,.14);background:#f8fafc}
.pm-subtask{display:block;padding:0;overflow:hidden}
.pm-subtask summary{list-style:none;cursor:pointer}
.pm-subtask summary::-webkit-details-marker{display:none}
.pm-subtask-summary{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px}
.pm-subtask-body{padding:0 14px 14px 14px;border-top:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.55)}
.pm-subtask-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pm-subtask-grid-span{grid-column:1 / -1}
.pm-subtask-editor{display:grid;gap:12px}
.pm-subtask-meta{font-size:12px;color:#64748b;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.pm-subtask-note{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(241,245,249,.9);color:#334155;line-height:1.6}
@media (max-width: 720px){.pm-subtask-grid{grid-template-columns:1fr}.pm-subtask-summary{align-items:flex-start}.pm-subtask-actions{flex-direction:column;align-items:flex-end}.pm-attach-list{grid-template-columns:1fr}}
/* =====================================================================
2026-03 UI cleanup layer
Unifies font stack and form styling across auth/admin/public pages.
===================================================================== */
:root{
--mk-ui-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--mk-field-bg:#ffffff;
--mk-field-bg-dark:rgba(15,23,42,.82);
--mk-field-border:#dbe4f0;
--mk-field-border-dark:rgba(148,163,184,.26);
--mk-field-text:#0f172a;
--mk-field-text-dark:#f8fafc;
--mk-field-muted:#475569;
--mk-field-shadow-inset:inset 0 1px 0 rgba(255,255,255,.92);
--mk-field-shadow-focus:0 0 0 4px rgba(59,130,246,.12),0 14px 30px rgba(59,130,246,.08);
--mk-field-radius:18px;
--mk-pane-radius:24px;
}
html,body,
button,input,select,textarea,
optgroup,option,
.mk-app-shell,.app-shell,.public-shell,.auth-shell,
[class*="mk-"],[class*="pm-"]{
font-family:var(--mk-ui-font) !important;
}
h1,h2,h3,h4,h5,h6{
letter-spacing:-.02em;
}
label,
.mk-label,
.pm-label,
.form-label{
color:#334155;
font-weight:700;
}
.dark label,
.dark .mk-label,
.dark .pm-label,
.dark .form-label{
color:#cbd5e1;
}
:where(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
select,
textarea,
.input,
.pm-input,
.pm-select,
.pm-textarea,
.pl-input
){
width:100%;
min-height:52px;
border-radius:var(--mk-field-radius) !important;
border:1px solid var(--mk-field-border) !important;
background:var(--mk-field-bg) !important;
color:var(--mk-field-text) !important;
box-shadow:var(--mk-field-shadow-inset) !important;
padding:0 16px !important;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease !important;
}
:where(textarea,.pm-textarea){
min-height:132px;
padding:14px 16px !important;
resize:vertical;
}
:where(select,.pm-select){
padding-right:40px !important;
}
:where(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
select,
textarea,
.input,
.pm-input,
.pm-select,
.pm-textarea,
.pl-input
):focus{
outline:none !important;
border-color:rgba(59,130,246,.7) !important;
box-shadow:var(--mk-field-shadow-focus) !important;
transform:translateY(-1px);
}
:where(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
select,
textarea,
.input,
.pm-input,
.pm-select,
.pm-textarea,
.pl-input
)::placeholder{
color:#94a3b8;
opacity:1;
}
.dark :where(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
select,
textarea,
.input,
.pm-input,
.pm-select,
.pm-textarea,
.pl-input
){
background:var(--mk-field-bg-dark) !important;
color:var(--mk-field-text-dark) !important;
border-color:var(--mk-field-border-dark) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.dark :where(
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
select,
textarea,
.input,
.pm-input,
.pm-select,
.pm-textarea,
.pl-input
)::placeholder{
color:#94a3b8;
}
.card,.mk-pane,.mk-card,.modal-panel,.ta-card,.pm-card,.stat-card{
border-radius:var(--mk-pane-radius) !important;
}
button,.btn,.btn-primary,.btn-secondary,.mk-btn,.mk-link-btn,a.btn{
font-family:var(--mk-ui-font) !important;
font-weight:800;
}
.input-icon input,
.input-icon .input,
.input-icon .pm-input,
.input-icon .pl-input{
padding-left:44px !important;
}
/* PM issues v2 */
.pm-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.pm-summary-card{padding:18px 20px;border:1px solid rgba(148,163,184,.14);border-radius:20px;background:rgba(255,255,255,.9)}
.dark .pm-summary-card{background:rgba(15,23,42,.88)}
.pm-summary-card strong{display:block;font-size:28px;line-height:1;margin-top:8px}
.pm-summary-label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.pm-task-groups{display:grid;gap:16px}
.pm-task-group{border:1px solid rgba(148,163,184,.16);border-radius:24px;background:rgba(248,250,252,.76);overflow:hidden}
.dark .pm-task-group{background:rgba(15,23,42,.58)}
.pm-task-group.is-collapsed .pm-task-group-body{display:none}
.pm-task-group-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:0;background:transparent;font-weight:800;color:inherit}
.pm-task-group-head::after{content:'â–¾';font-size:14px;color:#64748b}
.pm-task-group.is-collapsed .pm-task-group-head::after{content:'â–¸'}
.pm-task-group-title{display:flex;align-items:center;gap:10px}
.pm-task-group-count{min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.9);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#0f172a}
.dark .pm-task-group-count{background:rgba(15,23,42,.92);color:#e2e8f0}
.pm-task-list{display:grid;gap:10px;padding:0 16px 16px;min-height:72px}
.pm-task-list.pm-drop{outline:2px dashed rgba(59,130,246,.45);outline-offset:-8px}
.pm-task-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:#fff;cursor:grab}
.dark .pm-task-row{background:rgba(15,23,42,.94)}
.pm-task-row.dragging{opacity:.5}
.pm-task-row.pm-drop-before{box-shadow:inset 0 2px 0 #2563eb}
.pm-task-row.pm-drop-after{box-shadow:inset 0 -2px 0 #2563eb}
.pm-task-main,.pm-task-meta{display:flex;align-items:center;gap:14px;min-width:0;cursor:pointer}
.pm-task-copy{min-width:0}
.pm-task-title{font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .pm-task-title{color:#f8fafc}
.pm-task-subtitle{font-size:13px;color:#64748b;margin-top:3px}
.pm-task-labels{margin-top:8px}
.pm-task-handle{color:#94a3b8;font-size:16px;letter-spacing:-2px;user-select:none}
.pm-task-meta{justify-content:flex-end;flex-wrap:wrap}
.pm-task-date{font-size:13px;font-weight:700;color:#475569;white-space:nowrap}
.pm-task-actions{justify-content:flex-end}
.pm-task-empty{padding:10px 2px}
.pm-gantt-shell{display:grid;gap:14px}
.pm-gantt-wrap{overflow:auto;border:1px solid rgba(148,163,184,.16);border-radius:26px;background:rgba(255,255,255,.92)}
.dark .pm-gantt-wrap{background:rgba(15,23,42,.9)}
.pm-gantt-grid{display:grid;grid-template-columns:280px minmax(max-content,1fr);align-items:stretch}
.pm-gantt-corner,.pm-gantt-header,.pm-gantt-side{background:inherit}
.pm-gantt-sticky{position:sticky;z-index:4}
.pm-gantt-corner{top:0;left:0;padding:18px 18px;border-right:1px solid rgba(148,163,184,.14);border-bottom:1px solid rgba(148,163,184,.14);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.pm-gantt-header{top:0;z-index:3;border-bottom:1px solid rgba(148,163,184,.14)}
.pm-gantt-weeks,.pm-gantt-days,.pm-gantt-track{display:grid}
.pm-gantt-week{padding:12px 10px;border-right:1px solid rgba(148,163,184,.12);font-size:12px;font-weight:800;color:#475569;background:rgba(248,250,252,.96)}
.dark .pm-gantt-week{background:rgba(2,6,23,.72);color:#cbd5e1}
.pm-gantt-day{display:grid;place-items:center;gap:2px;padding:8px 0;border-right:1px solid rgba(148,163,184,.12);font-size:11px;color:#94a3b8;background:rgba(255,255,255,.96)}
.dark .pm-gantt-day{background:rgba(15,23,42,.92)}
.pm-gantt-day strong{font-size:13px;color:#334155}
.dark .pm-gantt-day strong{color:#e2e8f0}
.pm-gantt-day.is-weekend,.pm-gantt-cell.is-weekend{background:rgba(248,250,252,.72)}
.dark .pm-gantt-day.is-weekend,.dark .pm-gantt-cell.is-weekend{background:rgba(2,6,23,.48)}
.pm-gantt-side{left:0;z-index:2;padding:14px 18px;border-right:1px solid rgba(148,163,184,.14);border-bottom:1px solid rgba(148,163,184,.12);cursor:pointer}
.pm-gantt-side-title{font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .pm-gantt-side-title{color:#f8fafc}
.pm-gantt-side-meta{margin-top:4px;font-size:12px;color:#64748b}
.pm-gantt-track{position:relative;border-bottom:1px solid rgba(148,163,184,.12);min-height:70px}
.pm-gantt-cell{border-right:1px solid rgba(148,163,184,.08)}
.pm-gantt-bar{position:relative;align-self:center;height:38px;margin:0 6px;border-radius:12px;border:0;background:color-mix(in srgb, var(--bar-color) 85%, white);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;font-weight:800;overflow:hidden;cursor:pointer}
.pm-gantt-bar small{font-size:11px;font-weight:700;opacity:.9;white-space:nowrap}
.pm-calendar-item,.pm-gantt-wrap,.pm-gantt-bar{box-shadow:none!important}
.pm-calendar-wrap{box-shadow:none}
@media (max-width: 1100px){
.pm-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-task-row{grid-template-columns:minmax(0,1fr) auto}
.pm-task-actions{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width: 720px){
.pm-summary-grid{grid-template-columns:1fr 1fr}
.pm-task-row{grid-template-columns:1fr}
.pm-task-main,.pm-task-meta{justify-content:flex-start}
.pm-gantt-grid{grid-template-columns:220px minmax(max-content,1fr)}
}
/* PM v3 refinements */
.pm-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.pm-summary-card{text-decoration:none;color:inherit;padding:14px 18px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(255,255,255,.92);transition:border-color .18s ease,background .18s ease,transform .18s ease}
.pm-summary-card:hover{border-color:rgba(59,130,246,.28);transform:translateY(-1px)}
.pm-summary-card.is-active{border-color:rgba(59,130,246,.32);background:rgba(239,246,255,.92)}
.dark .pm-summary-card.is-active{background:rgba(30,41,59,.92)}
.pm-summary-card strong{display:block;font-size:22px;line-height:1.05;margin-top:8px}
.pm-summary-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.pm-task-groups{display:grid;gap:14px}
.pm-task-group{border-radius:22px}
.pm-task-group-head{padding:14px 16px}
.pm-task-group-count{min-width:30px;height:30px;padding:0 9px;font-size:12px}
.pm-task-group-body{padding:0 12px 12px}
.pm-task-list{display:grid;gap:10px}
.pm-task-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 16px;border-radius:18px;border:1px solid rgba(148,163,184,.12);background:#fff;cursor:grab;min-height:60px}
.dark .pm-task-row{background:rgba(15,23,42,.94)}
.pm-task-row .pm-task-main,.pm-task-row .pm-task-meta{display:flex;align-items:center;gap:14px;min-width:0;cursor:pointer}
.pm-task-copy{min-width:0;display:grid;gap:3px}
.pm-task-title{font-size:15px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .pm-task-title{color:#f8fafc}
.pm-task-subline{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.pm-task-subtitle{font-size:13px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:440px;margin-top:0}
.pm-task-labels{margin-top:0;gap:6px}
.pm-task-labels .pm-pill{padding:5px 10px;font-size:11px}
.pm-task-handle{color:#94a3b8;font-size:15px;letter-spacing:-2px;user-select:none;align-self:center}
.pm-task-meta{justify-content:flex-end;flex-wrap:wrap;gap:12px}
.pm-task-meta .pm-pill[data-style-token="mk-soft-pill"]{padding:6px 10px;font-size:11px}
.pm-task-date{font-size:13px;font-weight:700;color:#475569;white-space:nowrap}
.pm-task-row .pm-task-actions{justify-content:flex-end;gap:8px;align-self:center;margin-top:0;position:relative;z-index:3;background:transparent;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.pm-task-row .pm-icon-circle{width:36px;height:36px}
.pm-fab.pm-fab-lower{bottom:14px}
@media (max-width: 1100px){
.pm-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pm-task-row{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}
.pm-task-row .pm-task-actions{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width: 760px){
.pm-summary-grid{grid-template-columns:1fr 1fr}
.pm-task-group-body{padding:0 10px 10px}
.pm-task-row{grid-template-columns:1fr;padding:10px 12px}
.pm-task-row .pm-task-main,.pm-task-row .pm-task-meta{justify-content:flex-start;flex-wrap:wrap}
.pm-task-subtitle{max-width:100%}
}
/* PM v5 refinements */
.pm-task-group{border-radius:20px}
.pm-task-group-head{padding:12px 16px;min-height:56px}
.pm-task-group-body{padding:0 10px 10px}
.pm-task-list{display:grid;gap:8px}
.pm-task-list.pm-drop-list{background:rgba(59,130,246,.04);border-radius:16px}
.pm-task-row{min-height:52px;padding:8px 14px;border-radius:16px;gap:12px}
.pm-task-row .pm-task-copy{display:grid;gap:4px;min-width:0}
.pm-task-row .pm-task-title{font-size:15px;line-height:1.25}
.pm-task-row .pm-task-subline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-task-row .pm-task-subtitle{font-size:13px;color:#64748b}
.pm-task-row .pm-task-stats{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#94a3b8;font-weight:700}
.pm-task-row .pm-task-meta{gap:12px}
.pm-task-row .pm-task-date{font-size:13px;font-weight:800;color:#475569;white-space:nowrap}
.pm-task-row .pm-task-actions .pm-icon-circle{width:34px;height:34px}
.pm-task-row .pm-task-handle{width:20px;color:#94a3b8}
.pm-task-group.is-collapsed .pm-task-group-head{border-bottom:none}
.pm-board-subtasks{margin-top:10px;padding-top:10px;border-top:1px solid rgba(148,163,184,.12)}
.pm-board-subtasks summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;font-size:12px;font-weight:800;color:#475569}
.pm-board-subtasks summary::-webkit-details-marker{display:none}
.pm-board-subtask-list{display:grid;gap:8px;margin-top:10px}
.pm-board-subtask-item{display:flex;gap:8px;align-items:center;font-size:13px;color:#334155;padding-bottom:8px;border-bottom:1px solid rgba(148,163,184,.12)}
.pm-board-subtask-item:last-child{border-bottom:none;padding-bottom:0}
.pm-board-subtask-item.is-done span:last-child{text-decoration:line-through;color:#94a3b8}
.pm-board-subtask-check{font-size:12px;color:#64748b}
.pm-board-subtask-more,.pm-issue-stats{font-size:12px;color:#64748b;font-weight:700}
.pm-issue-stats{display: grid;gap:10px;flex-wrap:wrap;margin-top:8px}
.pm-comment-timeline{position:relative;display:grid;gap:12px;padding-left:8px}
.pm-comment-node{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.pm-comment-rail{position:absolute;left:21px;top:0;bottom:-12px;width:2px;background:linear-gradient(180deg,rgba(59,130,246,.22),rgba(148,163,184,.1))}
.pm-comment-node:last-child .pm-comment-rail{bottom:24px}
.pm-comment-marker{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;padding-top:6px}
.pm-comment-card{border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,#fff,rgba(248,250,252,.92));border-radius:18px;padding:14px 16px;box-shadow:none}
.pm-comment-head{align-items:flex-start}
.pm-comment-body{margin-top:10px;font-size:14px;line-height:1.75;color:#334155}
.pm-comment-attachments{margin-top:12px}
.pm-drawer-actions-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.pm-drawer-menu-wrap{position:relative}
.pm-drawer-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;padding:8px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:#fff;box-shadow:0 16px 36px rgba(15,23,42,.12);display:none;z-index:20}
.pm-drawer-menu.is-open{display:grid;gap:4px}
.pm-drawer-menu-item{display:flex;align-items:center;width:100%;padding:10px 12px;border-radius:12px;border:0;background:transparent;color:#334155;text-decoration:none;font-weight:700;cursor:pointer;text-align:left}
.pm-drawer-menu-item:hover{background:rgba(241,245,249,.96)}
.pm-drawer-menu-item.is-danger{color:#dc2626}
.pm-gantt-side{padding:12px 16px}
.pm-gantt-track{min-height:60px}
.pm-gantt-bar{height:34px;border-radius:10px}
.pm-fab.pm-fab-lower{bottom:14px}
@media (max-width: 900px){.pm-task-row{grid-template-columns:1fr}.pm-task-row .pm-task-meta{justify-content:flex-start;flex-wrap:wrap}.pm-drawer-actions-row{justify-content:flex-start}}
/* v6 refinements */
.pm-task-groups{gap:12px}
.pm-task-group{border-radius:20px}
.pm-task-group-head{padding:10px 14px;min-height:48px}
.pm-task-group-body{padding:0 8px 8px}
.pm-task-group-title{gap:8px}
.pm-task-group-count{min-width:28px;height:28px;padding:0 8px}
.pm-task-list{display:grid;gap:8px}
.pm-task-row{grid-template-columns:minmax(240px,1.1fr) minmax(260px,.9fr) auto auto;gap:16px;align-items:center;min-height:44px;padding:6px 14px;border-radius:14px}
.pm-task-row .pm-task-main{min-width:0}
.pm-task-row .pm-task-middle{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-width:0;cursor:pointer}
.pm-task-row .pm-task-copy{display:grid;gap:2px;min-width:0}
.pm-task-row .pm-task-title{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-task-row .pm-task-subtitle{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#64748b}
.pm-task-row .pm-task-labels{min-width:0;flex-wrap:wrap}
.pm-task-row .pm-task-stats{gap:12px;white-space:nowrap}
.pm-task-row .pm-task-meta{justify-content:flex-end;gap:12px;min-width:max-content}
.pm-task-row .pm-task-date{font-size:12px}
.pm-task-row .pm-task-actions .pm-icon-circle{width:32px;height:32px}
.pm-task-row .pm-task-handle{width:16px;font-size:13px;cursor:grab;user-select:none;touch-action:none}
.pm-task-row .pm-task-handle:active{cursor:grabbing}
.pm-task-row .pm-pill{padding:6px 11px;font-size:11px}
.pm-task-row.pm-drop-before{box-shadow:inset 0 2px 0 #2563eb}
.pm-task-row.pm-drop-after{box-shadow:inset 0 -2px 0 #2563eb}
.pm-task-list.pm-drop-list{background:rgba(59,130,246,.03);border-radius:14px}
.pm-board-subtasks{margin-top:8px;padding-top:8px;border-top:1px solid rgba(148,163,184,.12)}
.pm-board-subtasks summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;font-size:12px;font-weight:800;color:#475569;padding:2px 0}
.pm-board-subtasks summary::-webkit-details-marker{display:none}
.pm-board-subtasks-label{display:inline-flex;align-items:center;gap:8px}
.pm-board-subtasks-meta{display:inline-flex;align-items:center;gap:8px;color:#64748b}
.pm-board-subtasks-caret{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:rgba(148,163,184,.12);font-size:11px;transition:transform .18s ease}
.pm-board-subtasks[open] .pm-board-subtasks-caret{transform:rotate(180deg)}
.pm-board-subtask-list{display:grid;gap:6px;margin-top:8px}
.pm-board-subtask-item{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(248,250,252,.9);border:1px solid rgba(148,163,184,.12)}
.pm-calendar-wrap,.fc .fc-view-harness{box-shadow:none !important}
.fc .fc-daygrid-event,.fc .fc-timegrid-event,.fc .fc-event,.pm-fc-event{box-shadow:none !important}
.fc .fc-daygrid-event-harness{left:6px !important;right:6px !important}
.fc .fc-daygrid-block-event,.fc .fc-h-event{display:block;width:100%}
.pm-fc-event{width:100%;min-height:34px;border-radius:12px}
.pm-comment-timeline{position:relative;display:grid;gap:14px;padding-left:18px}
.pm-comment-timeline::before{content:'';position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,rgba(59,130,246,.22),rgba(148,163,184,.12))}
.pm-comment-node{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.pm-comment-marker{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.pm-comment-card{border:1px solid rgba(148,163,184,.14);border-radius:16px;background:#fff;padding:14px 16px}
.pm-comment-rail{display:none}
@media (max-width: 1100px){
.pm-task-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:8px}
.pm-task-row .pm-task-middle{grid-column:1 / -2;justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width: 860px){
.pm-task-row{grid-template-columns:1fr;row-gap:8px}
.pm-task-row .pm-task-middle,.pm-task-row .pm-task-meta,.pm-task-row .pm-task-actions{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap;min-width:0}
}
/* PM v7 refinements */
.pm-subtask-list{display:grid;gap:10px}
.pm-subtask{display:block;padding:0;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:#fff;overflow:hidden}
.pm-subtask summary{list-style:none;cursor:pointer}
.pm-subtask summary::-webkit-details-marker{display:none}
.pm-subtask-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px}
.pm-subtask-summary-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pm-subtask-summary-right{display:inline-flex;align-items:center;gap:10px;color:#64748b;font-size:12px;font-weight:800}
.pm-subtask-copy{min-width:0;display:grid;gap:3px}
.pm-subtask-title{font-size:15px;line-height:1.25;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-subtask-meta{font-size:12px;color:#94a3b8;font-weight:700}
.pm-subtask-status{padding:4px 8px;border-radius:999px;background:rgba(148,163,184,.12);color:#475569}
.pm-subtask-caret{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:rgba(148,163,184,.12);transition:transform .18s ease}
.pm-subtask[open] .pm-subtask-caret{transform:rotate(90deg)}
.pm-subtask-checkwrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none}
.pm-subtask-checkwrap input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pm-subtask-checkmark{width:22px;height:22px;border-radius:999px;border:1.5px solid rgba(100,116,139,.55);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;background:#fff}
.pm-subtask-checkwrap input:checked + .pm-subtask-checkmark{background:#2563eb;border-color:#2563eb}
.pm-subtask-body{padding:0 12px 12px 44px;border-top:1px solid rgba(148,163,184,.12);background:rgba(248,250,252,.55)}
.pm-subtask-note{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#fff;color:#334155;line-height:1.6}
.pm-subtask-actions-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.pm-subtask-handle{width:18px;height:18px;border:none;background:transparent;color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;cursor:grab;user-select:none}
.pm-subtask[draggable="true"]{cursor:grab}
.pm-subtask.dragging{opacity:.55}
.pm-subtask-drop{outline:2px dashed rgba(59,130,246,.35);outline-offset:3px}
.pm-summary-grid{margin:0 0 16px}
.pm-task-groups{gap:10px}
.pm-task-group{border-radius:18px}
.pm-task-group-head{padding: px;min-height:44px}
.pm-task-group-body{padding:0 8px 8px}
.pm-task-group-count{min-width:28px;height:28px;padding:0 8px}
.pm-task-list{display:grid;gap:8px}
.pm-task-row{grid-template-columns:minmax(280px,1.2fr) minmax(320px,1fr) minmax(280px,.9fr) auto;min-height:40px;padding:5px 12px;gap:12px;border-radius:12px}
.pm-task-row .pm-task-main,.pm-task-row .pm-task-middle,.pm-task-row .pm-task-meta{min-width:0}
.pm-task-row .pm-task-middle{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;cursor:pointer}
.pm-task-row .pm-task-copy{display:grid;gap:1px;min-width:0}
.pm-task-row .pm-task-title{font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-task-row .pm-task-subtitle{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-task-row .pm-task-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;white-space:nowrap}
.pm-task-row .pm-task-meta{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.pm-task-row .pm-task-date{font-size:12px;white-space:nowrap}
.pm-task-row .pm-avatars{justify-content:flex-end}
.pm-task-row .pm-task-actions .pm-icon-circle{width:30px;height:30px}
.pm-task-row .pm-task-handle{width:14px;font-size:12px}
.pm-board-subtasks{margin-top:10px}
.pm-board-subtasks summary{padding:6px 0}
.pm-board-subtasks-label::before{content:'≡';font-size:11px;color:#94a3b8}
.pm-board-subtasks-meta strong{font-size:12px}
.pm-board-subtask-list{display:grid;gap:0;margin-top:8px;border-top:1px solid rgba(148,163,184,.1)}
.pm-board-subtask-item{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(148,163,184,.1)}
.pm-board-subtask-item:last-child{border-bottom:none}
.pm-board-subtask-check{width:18px;height:18px;border-radius:999px;border:1px solid rgba(100,116,139,.45);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#64748b}
.pm-board-subtask-item.is-done .pm-board-subtask-check{background:#2563eb;border-color:#2563eb;color:#fff}
.pm-calendar-wrap,.fc .fc-view-harness{box-shadow:none !important}
.fc .fc-daygrid-event-harness{left:4px !important;right:4px !important}
.fc .fc-daygrid-block-event,.fc .fc-h-event,.fc .fc-timegrid-event{display:block;width:100%}
.pm-fc-event{width:100%;display:flex;align-items:center;gap:8px;border-radius:10px;padding:8px 10px;box-shadow:none !important}
.fc .fc-event,.fc .fc-daygrid-event,.fc .fc-timegrid-event{box-shadow:none !important}
@media (max-width: 1100px){
.pm-task-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:6px}
.pm-task-row .pm-task-middle{grid-column:1 / -2;justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width: 760px){
.pm-task-row{grid-template-columns:1fr;row-gap:6px}
.pm-task-row .pm-task-middle,.pm-task-row .pm-task-meta,.pm-task-row .pm-task-actions{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap}
.pm-subtask-body{padding-left:12px}
}
/* v8 refinement */
.pm-task-group-head,
.pm-task-group-head *{text-align:left}
.pm-task-group-head{align-items:center}
.pm-task-group-count{margin-left:auto;text-align:left;display:inline-flex;align-items:center;justify-content:flex-start}
.pm-task-list{gap:6px}
.pm-task-group{}
.pm-task-row{
grid-template-columns:minmax(320px,1.35fr) minmax(360px,1.2fr) minmax(330px,1fr) auto;
min-height:0;
padding:4px 12px;
gap:14px;
align-items:center;
}
.pm-task-row .pm-task-main,
.pm-task-row .pm-task-middle,
.pm-task-row .pm-task-meta{
justify-content:flex-start;
text-align:left;
}
.pm-task-row .pm-task-middle{gap:18px}
.pm-task-row .pm-task-meta{justify-content:flex-start}
.pm-task-row .pm-task-stats{justify-content:flex-start}
.pm-task-row .pm-task-copy{gap:0}
.pm-task-row .pm-task-subtitle{margin-top:2px}
.pm-task-row .pm-avatars{justify-content:flex-start}
.pm-task-row .pm-task-actions{justify-self:end}
.pm-task-group.is-collapsed .pm-task-group-body{display:none}
.pm-board-subtasks{margin-top:12px;border-top:1px solid rgba(148,163,184,.12);padding-top:8px}
.pm-board-subtasks summary{padding:4px 0}
.pm-board-subtask-item{
grid-template-columns:18px minmax(0,1fr) auto;
padding:8px 0;
}
.pm-board-subtask-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-board-subtask-inline-meta{font-size:11px;color:#94a3b8;white-space:nowrap}
.pm-calendar-wrap,
.fc .fc-view-harness,
.fc .fc-scrollgrid,
.fc .fc-scrollgrid-section > *{
box-shadow:none !important;
}
.fc .fc-daygrid-event-harness{left:2px !important;right:2px !important}
.fc .fc-daygrid-event,
.fc .fc-daygrid-event-harness-abs,
.fc .fc-timegrid-event-harness,
.fc .fc-timegrid-event{margin-left:0 !important;margin-right:0 !important}
.pm-fc-event{border-radius:10px;padding:8px 10px;width:100%;box-shadow:none !important}
.pm-subtask-create{
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);
gap:14px;
align-items:start;
}
.pm-subtask-create-main,
.pm-subtask-create-side{display:grid;gap:10px}
.pm-subtask-list{display:grid;gap:10px}
.pm-subtask{
border:1px solid rgba(148,163,184,.18);
border-radius:14px;
background:#fff;
overflow:hidden;
}
.pm-subtask-summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 14px;
text-align:left;
}
.pm-subtask-summary-main{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1;
}
.pm-subtask-copy{min-width:0}
.pm-subtask-title{font-size:14px;line-height:1.2}
.pm-subtask-meta{
margin-top:3px;
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
font-size:12px;
color:#64748b;
}
.pm-subtask-summary-right{
display:flex;
align-items:center;
gap:8px;
white-space:nowrap;
}
.pm-subtask-status{
display:inline-flex;
align-items:center;
padding:4px 10px;
border-radius:999px;
background:#f8fafc;
border:1px solid rgba(148,163,184,.18);
font-size:12px;
font-weight:700;
}
.pm-subtask-caret{font-size:12px;color:#64748b}
.pm-subtask[open] .pm-subtask-caret{transform:rotate(90deg)}
.pm-subtask-body{
padding:0 14px 14px 52px;
display:grid;
gap:12px;
}
.pm-subtask-inline-grid{
display:grid;
grid-template-columns:minmax(0,1.4fr) minmax(180px,.7fr) minmax(190px,.7fr);
gap:12px;
}
.pm-subtask-field{display:grid;gap:6px}
.pm-subtask-field-grow{min-width:0}
.pm-subtask-actions-row{display:flex;gap:8px;justify-content:flex-end}
.pm-subtask-checkwrap{position:relative;display:inline-flex;align-items:center}
.pm-subtask-checkwrap input{
position:absolute;
inset:0;
opacity:0;
cursor:pointer;
}
.pm-subtask-checkmark{
width:22px;
height:22px;
border-radius:999px;
border:1.5px solid rgba(100,116,139,.5);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:12px;
color:#fff;
background:#fff;
}
.pm-subtask-checkwrap input:checked + .pm-subtask-checkmark{
background:#2563eb;
border-color:#2563eb;
}
.pm-subtask-handle{color:#94a3b8;font-size:13px;cursor:grab}
.pm-subtask[open]{box-shadow:0 1px 0 rgba(148,163,184,.06)}
.pm-subtask.dragging{opacity:.55}
.pm-subtask-drop{outline:2px dashed rgba(59,130,246,.35)}
.pm-subtask-note{color:#475569}
.pm-subtask .pm-input,
.pm-subtask .pm-select,
.pm-subtask .pm-textarea{width:100%}
@media (max-width: 1100px){
.pm-task-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
}
.pm-task-row .pm-task-meta{grid-column:1 / span 2}
.pm-subtask-create,
.pm-subtask-inline-grid{grid-template-columns:1fr}
}
/* v9 board subtasks polish */
.pm-board-subtasks{
margin-top:12px;
padding-top:10px;
border-top:1px solid rgba(148,163,184,.12);
}
.pm-board-subtasks summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:2px 0 4px;
cursor:pointer;
list-style:none;
}
.pm-board-subtasks summary::-webkit-details-marker{display:none}
.pm-board-subtasks-label{
display:flex;
align-items:center;
gap:10px;
min-width:0;
font-size:12px;
font-weight:800;
color:#334155;
}
.pm-board-subtasks-label::before{
content: '';
font-size:11px;
color:#94a3b8;
}
.pm-board-subtasks-inline-progress{
color:#64748b;
font-weight:700;
white-space:nowrap;
}
.pm-board-subtasks-meta{
display:inline-flex;
align-items:center;
gap:8px;
color:#64748b;
font-size:12px;
}
.pm-board-subtasks-meta strong{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
padding:0 8px;
border-radius:999px;
background:rgba(148,163,184,.12);
font-size:11px;
font-weight:900;
}
.pm-board-subtasks-caret{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius:999px;
color:#64748b;
transition:transform .18s ease;
}
.pm-board-subtasks[open] .pm-board-subtasks-caret{transform:rotate(180deg)}
.pm-board-subtasks-bar{margin:6px 0 10px;height:6px}
.pm-board-subtask-list{
display:grid;
gap:6px;
}
.pm-board-subtask-row{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:9px 10px;
border:1px solid rgba(148,163,184,.14);
border-radius:12px;
background:rgba(248,250,252,.7);
text-align:left;
color:inherit;
}
.pm-board-subtask-row:hover{
border-color:rgba(59,130,246,.2);
background:#fff;
}
.pm-board-subtask-row-main{
display:flex;
align-items:center;
gap:10px;
min-width:0;
flex:1;
}
.pm-board-subtask-row-main.is-done .pm-board-subtask-name{
color:#94a3b8;
text-decoration:line-through;
}
.pm-board-subtask-check{
width:18px;
height:18px;
border-radius:999px;
border:1.5px solid rgba(100,116,139,.45);
display:inline-flex;
align-items:center;
justify-content:center;
flex:none;
background:#fff;
color:#2563eb;
font-size:11px;
font-weight:900;
}
.pm-board-subtask-row-main.is-done .pm-board-subtask-check{
border-color:#2563eb;
background:#eff6ff;
}
.pm-board-subtask-name{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:13px;
font-weight:700;
color:#334155;
}
.pm-board-subtask-row-right{
display:inline-flex;
align-items:center;
gap:8px;
flex:none;
}
.pm-board-subtask-inline-meta{
font-size:11px;
color:#94a3b8;
font-weight:700;
white-space:nowrap;
}
.pm-board-subtask-open{
color:#94a3b8;
font-size:16px;
line-height:1;
}
.pm-board-subtask-more{
width:100%;
padding:6px 2px 0;
border:none;
background:transparent;
text-align:left;
font-size:12px;
font-weight:800;
color:#2563eb;
}
.pm-board-subtask-more:hover{color:#1d4ed8}
/* v10 refinements */
.pm-analytics-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0 18px}
.pm-analytics-card{padding:14px 18px;border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(255,255,255,.88)}
.pm-analytics-card strong{display:block;font-size:22px;line-height:1.05;margin-top:8px;color:#0f172a}
.pm-analytics-card small{display:block;margin-top:6px;color:#64748b;font-size:12px}
.pm-task-row{display:grid;grid-template-columns:minmax(320px,1.4fr) minmax(260px,1fr) minmax(320px,1.2fr) auto;align-items:center;column-gap:20px;row-gap:10px}
.pm-task-main,.pm-task-middle,.pm-task-meta,.pm-task-actions{align-self:center}
.pm-task-meta{justify-content:flex-start;gap:12px}
.pm-task-actions{justify-self:end}
.pm-task-inline-edit{display:none;grid-column:1 / -1;border-top:1px solid rgba(148,163,184,.12);padding-top:12px}
.pm-task-row.is-editing .pm-task-inline-edit{display:block}
.pm-task-inline-grid{display:grid;grid-template-columns:1.4fr .9fr .9fr 1fr;gap:10px;align-items:start}
.pm-task-inline-grid textarea{grid-column:1 / span 2}
.pm-inline-people{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
.pm-inline-person{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:#fff;color:#334155;font-size:12px;font-weight:600}
.pm-inline-person input{display:none}
.pm-inline-person.is-selected,.pm-inline-person:has(input:checked){border-color:rgba(59,130,246,.28);background:rgba(239,246,255,.92)}
.pm-inline-actions{grid-column:1 / -1;display:flex;gap:8px;justify-content:flex-end}
.pm-avatars{display:flex;align-items:center;isolation:isolate}
.pm-avatars .pm-avatwrap,.pm-avatars .pm-assignee-more{margin-left:-8px;position:relative}
.pm-avatars .pm-avatwrap:first-child,.pm-avatars .pm-assignee-more:first-child{margin-left:0}
.pm-task-group-head,.pm-task-group-title,.pm-task-group-count,.pm-task-date,.pm-task-stats span,.pm-task-subtitle,.pm-task-title,.pm-task-meta,.pm-task-middle{text-align:left;justify-content:flex-start}
.pm-board-subtask-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding: 8px 8px;border-bottom:1px solid rgba(148,163,184,.1)}
.pm-board-subtask-row:last-child{border-bottom:none}
.pm-board-subtask-toggle,.pm-board-subtask-open{appearance:none;border:none;background:transparent;padding:0;margin:0;color:#64748b;cursor:pointer}
.pm-board-subtask-toggle{width:18px;height:18px;border-radius:999px;border:1px solid rgba(100,116,139,.45);display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.pm-board-subtask-row.is-done .pm-board-subtask-toggle{background:#2563eb;border-color:#2563eb;color:#fff}
.pm-board-subtask-row.is-done .pm-board-subtask-name{text-decoration:line-through;color:#94a3b8}
.pm-board-subtask-row-main{appearance:none;border:none;background:transparent;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.pm-board-subtask-row-right{display:inline-flex;align-items:center;gap:8px}
@media (max-width: 1200px){.pm-task-row{grid-template-columns:1fr}.pm-task-inline-grid{grid-template-columns:1fr 1fr}.pm-analytics-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 760px){.pm-task-inline-grid,.pm-analytics-strip{grid-template-columns:1fr}}
.pm-analytics-strip{display:none!important}
.pm-avatars{display:flex;align-items:center}
.pm-task-meta .pm-avatars .pm-avatwrap,.pm-task-meta .pm-avatars .pm-assignee-more{margin-left:-10px}
.pm-task-meta .pm-avatars .pm-avatwrap:first-child,.pm-task-meta .pm-avatars .pm-assignee-more:first-child{margin-left:0}
.pm-avatar-radio-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:6px}
.pm-avatar-radio{display:flex;align-items:center;gap:10px;border:1px solid rgba(148,163,184,.2);border-radius:14px;padding:10px 12px;background:#fff;cursor:pointer}
.pm-avatar-radio input{display:none}
.pm-avatar-radio.is-selected,.pm-avatar-radio:has(input:checked){border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.06)}
.pm-avatar-radio-face{display:inline-flex;align-items:center;justify-content:center}
.pm-avatar-picker{position:relative}
.pm-avatar-picker-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(148,163,184,.22);border-radius:14px;padding:10px 12px;background:#fff;color:#0f172a}
.pm-avatar-picker-current{display:flex;align-items:center;gap:10px;min-width:0}.pm-avatar-picker-current span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-avatar-picker-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;background:#fff;border:1px solid rgba(148,163,184,.22);border-radius:16px;padding:8px;box-shadow:0 16px 40px rgba(15,23,42,.12);display:none;max-height:260px;overflow:auto}
.pm-avatar-picker.is-open .pm-avatar-picker-menu{display:block}
.pm-avatar-picker-option{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:#0f172a;background:transparent}
.pm-avatar-picker-option:hover,.pm-avatar-picker-option.is-selected{background:rgba(37,99,235,.08)}
/* Monitor view visual refresh */
.mv-overview-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);gap:18px;align-items:stretch}
.mv-main-stack,.mv-side-stack{display:grid;gap:18px;height:100%}
.mv-side-stack{grid-template-rows:auto 1fr}
.mv-detail-card{display:flex;flex-direction:column;padding:18px 20px;height:100%}
.mv-detail-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.mv-section-kicker{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.dark .mv-section-kicker{color:#94a3b8}
.mv-section-title{margin:6px 0 0;font-size:1.125rem;line-height:1.2;font-weight:800;color:#0f172a}
.dark .mv-section-title{color:#f8fafc}
.mv-section-copy{margin-top:8px;max-width:66ch;font-size:.93rem;line-height:1.65;color:#64748b}
.dark .mv-section-copy{color:#94a3b8}
.mv-status-note{font-size:.78rem;color:#64748b;font-weight:700}
.dark .mv-status-note{color:#94a3b8}
.mv-info-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.mv-info-pill{display:grid;gap:2px;min-width:130px;max-width:220px;padding:11px 13px;border-radius:16px;border:1px solid rgba(148,163,184,.18);background:rgba(248,250,252,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);cursor:help}
.dark .mv-info-pill{background:rgba(15,23,42,.56);border-color:rgba(148,163,184,.16);box-shadow:none}
.mv-info-pill strong{font-size:.88rem;line-height:1.35;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .mv-info-pill strong{color:#f8fafc}
.mv-info-pill__label{font-size:.69rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.dark .mv-info-pill__label{color:#94a3b8}
.mv-inline-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mv-inline-stat{padding:14px 15px;border-radius:18px;background:rgba(248,250,252,.86);border:1px solid rgba(148,163,184,.16);min-width:0}
.dark .mv-inline-stat{background:rgba(15,23,42,.54);border-color:rgba(148,163,184,.14)}
.mv-inline-stat__label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.dark .mv-inline-stat__label{color:#94a3b8}
.mv-inline-stat__value{display:block;margin-top:7px;font-size:1rem;font-weight:800;line-height:1.25;color:#0f172a;word-break:break-word}
.dark .mv-inline-stat__value{color:#f8fafc}
.mv-inline-stat__note{display:block;margin-top:6px;font-size:.78rem;line-height:1.45;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .mv-inline-stat__note{color:#94a3b8}
.mv-inline-stat__topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.mv-inline-stat__tone{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.01em;white-space:nowrap;border:1px solid rgba(148,163,184,.14)}
.mv-config-list{display:grid;gap: 6px;}
.mv-config-list div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid rgba(148,163,184,.12)}
.mv-config-list div:first-child{border-top:none;padding-top:0}
.mv-config-list dt{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.mv-config-list dd{margin:0;font-weight:700;color:#0f172a;word-break:break-word}
.dark .mv-config-list dt{color:#94a3b8}.dark .mv-config-list dd{color:#f8fafc}
.mv-run-list,.mv-incident-timeline{display:grid;gap:10px;align-content:start}
.mv-detail-card > .mk-chart--lg,.mv-detail-card > [id^="latencyChart"],.mv-detail-card > .apexcharts-canvas{flex:1 1 auto}
.mv-detail-card .echarts-for-react,.mv-detail-card #latencyChart{flex:1 1 auto;min-height:0}
.mv-run-item,.mv-incident-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:rgba(248,250,252,.82)}
.dark .mv-run-item,.dark .mv-incident-item{background:rgba(15,23,42,.52);border-color:rgba(148,163,184,.14)}
.mv-run-item__left{display:flex;align-items:center;gap:12px;min-width:0}
.mv-run-item__time{font-weight:800;color:#0f172a}
.dark .mv-run-item__time{color:#f8fafc}
.mv-run-item__meta,.mv-incident-item__meta{font-size:.8rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.dark .mv-run-item__meta,.dark .mv-incident-item__meta{color:#94a3b8}
.mv-run-item__right{display:grid;justify-items:end;gap:3px;font-size:.82rem;color:#64748b;font-weight:700}
.dark .mv-run-item__right{color:#94a3b8}
.mv-incident-item{display:grid;gap:6px;justify-content:stretch}
.mv-incident-item__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mv-empty-state{padding:16px;border-radius:16px;background:rgba(248,250,252,.76);border:1px dashed rgba(148,163,184,.2);color:#64748b}
.dark .mv-empty-state{background:rgba(15,23,42,.44);border-color:rgba(148,163,184,.16);color:#94a3b8}
.mv-incident-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.mv-incident-summary__metric{padding:14px 16px;border-radius:18px;background:rgba(248,250,252,.82);border:1px solid rgba(148,163,184,.14)}
.dark .mv-incident-summary__metric{background:rgba(15,23,42,.52);border-color:rgba(148,163,184,.14)}
.mv-incident-summary__metric span{display:block;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#64748b}
.mv-incident-summary__metric strong{display:block;margin-top:7px;font-size:1.15rem;color:#0f172a}
.dark .mv-incident-summary__metric span{color:#94a3b8}.dark .mv-incident-summary__metric strong{color:#f8fafc}
.monitor-surface .table-scroll{border-radius:18px;border:1px solid rgba(148,163,184,.14);overflow:hidden;background:rgba(248,250,252,.72)}
.dark .monitor-surface .table-scroll{background:rgba(15,23,42,.42);border-color:rgba(148,163,184,.14)}
.monitor-surface table thead th{padding:14px 16px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;background:rgba(255,255,255,.66)}
.monitor-surface table tbody td{padding:14px 16px;vertical-align:middle}
.dark .monitor-surface table thead th{background:rgba(15,23,42,.72);color:#94a3b8}
@media (max-width: 1100px){.mv-overview-grid{grid-template-columns:1fr}.mv-info-pills{justify-content:flex-start}.mv-inline-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 720px){.mv-overview-grid{grid-template-columns:1fr;align-items:start}.mv-main-stack,.mv-side-stack{height:auto}.mv-side-stack{grid-template-rows:none}.mv-detail-card{padding:16px;height:auto}.mv-detail-card__head{flex-direction:column}.mv-info-pills{width:100%}.mv-info-pill{min-width:calc(50% - 5px);max-width:none}.mv-inline-stats,.mv-incident-summary{grid-template-columns:1fr}.mv-config-list div{grid-template-columns:1fr;gap:4px}.mv-run-item,.mv-run-item__left,.mv-incident-item__top{align-items:flex-start}.mv-run-item{flex-direction:column}.mv-run-item__right{justify-items:start}}
.mv-inline-stat--state{position:relative}
.mv-inline-stat__value--with-dot{display:flex;align-items:center;gap:10px}
.mv-pulse-dot{width:10px;height:10px;border-radius:999px;background:currentColor;box-shadow:0 0 0 0 rgba(0,0,0,0);animation:mvPulse 1.8s ease-out infinite;flex:0 0 auto;color:#22c55e}
@keyframes mvPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 44%, transparent)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.mv-overview-grid .mv-main-stack > .mv-detail-card:first-child{justify-content:space-between}
.mv-overview-grid .mv-main-stack > .mv-detail-card:first-child .mv-detail-card__head{margin-bottom:12px}
.mv-overview-grid .mv-main-stack > .mv-detail-card:first-child .mv-inline-stats{margin-top:auto}
.pm-avatar-picker-caret{color:#64748b}
.pm-analytics-topcards .pm-summary-card{cursor:default}
/* Zorg dat charts nooit boven menus uitkomen */
.swx-chart {
position: relative;
z-index: 1;
}
/* Toolbar en dropdowns altijd erboven */
#rangeMenu {
position: absolute;
z-index: 9999;
}
/* Op mobiel nog stricter */
@media (max-width: 768px) {
#rangeMenu {
position: fixed;
z-index: 99999!important;
}
.analytics-chart,
.analytics-chart canvas,
.chart-wrap {
z-index: 1 !important;
}
}
/* Operational dashboard redesign */
.op-shell{padding-bottom:24px}
.op-hero{position:relative;overflow:hidden;border-radius:30px;padding:30px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(14,165,233,.08) 48%,rgba(255,255,255,.96));box-shadow:0 26px 70px rgba(15,23,42,.08);margin-bottom:18px}
.op-hero::before,.op-hero::after{content:'';position:absolute;border-radius:999px;pointer-events:none}
.op-hero::before{width:320px;height:320px;right:-80px;bottom:-160px;background:radial-gradient(circle,rgba(37,99,235,.16),transparent 70%)}
.op-hero::after{width:240px;height:240px;left:-70px;top:-120px;background:radial-gradient(circle,rgba(16,185,129,.14),transparent 70%)}
.op-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:24px;align-items:start}
.op-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid rgba(148,163,184,.16);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#2563eb}
.op-hero__title{margin:12px 0 10px;font-size:40px;line-height:1.02;font-weight:900;letter-spacing:-.04em;color:#0f172a}
.op-hero__copy{max-width:780px;font-size:15px;line-height:1.75;color:#475569}
.op-hero__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.op-hero__meta-card{padding:18px;border-radius:22px;background:rgba(255,255,255,.72);border:1px solid rgba(148,163,184,.16);backdrop-filter:blur(12px)}
.op-hero__meta-label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.op-hero__meta-value{display:block;margin-top:8px;font-size:30px;line-height:1;font-weight:900;color:#0f172a}
.op-hero__meta-note{display:block;margin-top:8px;font-size:13px;line-height:1.55;color:#64748b}
.op-hero__actions{align-self:stretch}
.op-quick-nav{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:26px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.56);box-shadow:0 18px 38px rgba(15,23,42,.06);backdrop-filter:blur(12px);height:100%}
.op-quick-nav__head{display:flex;flex-direction:column;gap:10px}
.op-quick-nav__eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:800;color:#64748b}
.op-quick-nav__title{display:block;font-size:18px;line-height:1.25;color:#0f172a}
.op-quick-nav__copy{margin:0;font-size:13px;line-height:1.6;color:#64748b}
.op-quick-nav__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.op-quick-link{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:20px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.82);color:#0f172a;box-shadow:0 10px 24px rgba(15,23,42,.05);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;min-height:88px}
.op-quick-link:hover{transform:translateY(-1px);background:rgba(248,250,252,.98);border-color:rgba(59,130,246,.18);box-shadow:0 14px 28px rgba(15,23,42,.07);color:#0f172a}
.op-quick-link:hover .op-quick-link__label{color:#0f172a}
.op-quick-link:hover .op-quick-link__meta{color:#475569}
.op-quick-link:hover .op-quick-link__arrow{color:#64748b}
.op-quick-link--accent{background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(56,189,248,.1));color:#0f172a;border-color:rgba(59,130,246,.2)}
.op-quick-link--accent:hover{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(56,189,248,.14));color:#0f172a;border-color:rgba(59,130,246,.24)}
.op-quick-link--accent .op-quick-link__label{}
.op-quick-link--accent .op-quick-link__meta{color:#475569}
.op-quick-link--accent .op-quick-link__arrow{color:#2563eb}
.op-quick-link__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;border:1px solid rgba(148,163,184,.18);background:#eff6ff;color:#2563eb;flex:0 0 auto}
.op-quick-link--accent .op-quick-link__icon{background:rgba(255,255,255,.72);border-color:rgba(59,130,246,.14);color:#2563eb}
.op-quick-link__icon svg{width:20px;height:20px}
.op-quick-link__content{display:flex;flex-direction:column;gap:4px;min-width:0}
.op-quick-link__label{font-size:15px;font-weight:800;line-height:1.2}
.op-quick-link__meta{font-size:13px;line-height:1.45;color:#64748b}
.op-quick-link__arrow{margin-left:auto;font-size:18px;color:#94a3b8;flex:0 0 auto}
.op-kpi-grid{margin-top:0}
.op-main-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);gap:18px;margin-top:18px}
.op-panel{overflow:hidden;border-radius:28px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.88);box-shadow:0 20px 55px rgba(15,23,42,.07)}
.op-panel__body{padding:24px}
.op-spotlight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.op-panel--spotlight .op-panel__body{padding:20px}
.op-panel--spotlight .analytics-panel-head .analytics-heading{max-width:360px}
.op-panel--spotlight .analytics-panel-head .analytics-helper{max-width:520px}
.op-focus-card{padding:18px 20px;border-radius:24px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(180deg,rgba(248,250,252,.95),rgba(255,255,255,.92));display:flex;flex-direction:column;gap:12px;min-height:160px}
.op-focus-card.is-danger{background:linear-gradient(180deg,rgba(254,242,242,.95),rgba(255,255,255,.96));border-color:rgba(248,113,113,.24)}
.op-focus-card.is-warn{background:linear-gradient(180deg,rgba(255,251,235,.96),rgba(255,255,255,.96));border-color:rgba(251,191,36,.28)}
.op-focus-card.is-good{background:linear-gradient(180deg,rgba(240,253,244,.96),rgba(255,255,255,.96));border-color:rgba(74,222,128,.24)}
.op-focus-card.is-brand{background:linear-gradient(180deg,rgba(239,246,255,.96),rgba(255,255,255,.96));border-color:rgba(59,130,246,.22)}
.op-focus-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.op-focus-card__label{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.op-focus-card__value{font-size:34px;line-height:1;font-weight:900;color:#0f172a}
.op-focus-card__copy{font-size:14px;line-height:1.55;color:#475569;margin:0}
.op-inline-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#2563eb}
.op-inline-link:hover{text-decoration:underline}
.op-list{display:flex;flex-direction:column;gap:12px}
.op-list__item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 16px;border-radius:18px;border:1px solid rgba(148,163,184,.14);background:rgba(248,250,252,.72)}
.op-list__content{min-width:0;display:flex;flex-direction:column;gap:4px}
.op-list__content--site{flex-direction:row;align-items:center;gap:12px}
.op-list__title{font-size:14px;font-weight:800;color:#0f172a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-list__meta{font-size:12px;color:#64748b;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-empty-state{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:20px;border:1px dashed rgba(148,163,184,.26);background:rgba(248,250,252,.55);color:#64748b}
.op-empty-state strong{font-size:15px;color:#0f172a}
.op-empty-state--small{padding:16px}
.op-subpanel{margin-top:20px;padding-top:20px;border-top:1px solid rgba(148,163,184,.14)}
.op-subpanel--compact{margin-top:0;padding-top:0;border-top:0}
.op-subpanel__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.op-subpanel__label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.op-subpanel__title{font-size:24px;font-weight:900;line-height:1.1;color:#0f172a;letter-spacing:-.03em}
.op-live-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.op-live-main{padding:20px;border-radius:24px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(180deg,rgba(248,250,252,.9),rgba(255,255,255,.96))}
.op-live-top{display:flex;align-items:start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.op-live-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;color:#0f172a}
.op-live-sub{margin-top:6px;font-size:13px;color:#64748b}
.op-live-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:999px;background:rgba(37,99,235,.08);color:#1d4ed8;font-size:13px;font-weight:800}
.op-live-controls{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.op-mode-toggle{display:flex;flex-wrap:wrap;gap:8px}
.op-mode-toggle .liveChartMode{padding:10px 14px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:#fff;color:#475569;font-size:13px;font-weight:700}
.op-mode-toggle .liveChartMode.is-active{background:#0f172a;color:#fff;border-color:#0f172a}
.op-chart-wrap{margin-top:16px;border-radius:22px;border:1px solid rgba(148,163,184,.14);background:#fff;padding:12px;overflow:hidden;min-width:0}
.op-chart-wrap--tall [data-style-token]{min-height:320px;width:100%;max-width:100%}
.op-live-chart-grid{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(320px,.9fr);gap:16px;align-items:stretch}
.op-live-chart-grid > *{min-width:0}
.op-live-chart-grid .op-chart-wrap{margin-top:0;height:100%}
.op-live-chart-grid .op-live-sites{height:100%;display:flex;flex-direction:column;overflow:hidden}
.op-live-chart-grid .op-live-sites .op-list{min-width:0}
.op-live-chart-grid .echarts-for-react,.op-live-chart-grid .echarts,.op-live-chart-grid canvas,.op-live-chart-grid svg{max-width:100%!important}
.op-live-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.92fr);gap:18px;align-items:start}
.op-live-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.op-live-sites{padding:18px;border-radius:22px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(180deg,rgba(248,250,252,.82),rgba(255,255,255,.96));min-width:0}
.op-mini-stat{padding:18px;border-radius:22px;border:1px solid rgba(148,163,184,.14);background:linear-gradient(180deg,rgba(248,250,252,.82),rgba(255,255,255,.96))}
.op-mini-stat__label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.op-mini-stat__value{display:block;margin-top:8px;font-size:28px;line-height:1;font-weight:900;color:#0f172a}
.op-mini-stat__note{display:block;margin-top:8px;font-size:13px;line-height:1.55;color:#64748b}
.op-count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:999px;background:rgba(37,99,235,.08);color:#1d4ed8;font-size:13px;font-weight:900}
.dark .op-hero{background:linear-gradient(135deg,rgba(30,41,59,.96),rgba(15,23,42,.98) 58%,rgba(15,23,42,.98));border-color:rgba(51,65,85,.74);box-shadow:0 24px 70px rgba(2,6,23,.42)}
.dark .op-hero__eyebrow,.dark .op-hero__meta-card,.dark .op-quick-nav,.dark .op-quick-link{background:rgba(15,23,42,.62);border-color:rgba(71,85,105,.55);box-shadow:none}
.dark .op-hero__title,.dark .op-hero__meta-value,.dark .op-focus-card__value,.dark .op-list__title,.dark .op-subpanel__title,.dark .op-live-title,.dark .op-mini-stat__value,.dark .op-empty-state strong{color:#f8fafc}
.dark .op-hero__copy,.dark .op-hero__meta-label,.dark .op-hero__meta-note,.dark .op-list__meta,.dark .op-focus-card__copy,.dark .op-subpanel__label,.dark .op-live-sub,.dark .op-mini-stat__label,.dark .op-mini-stat__note,.dark .op-empty-state{color:#94a3b8}
.dark .op-quick-nav__eyebrow{color:#94a3b8}
.dark .op-quick-nav__title,.dark .op-quick-link{color:#e2e8f0}
.dark .op-quick-nav__copy{color:#94a3b8}
.dark .op-quick-link__meta,.dark .op-quick-link__arrow{color:#94a3b8}
.dark .op-quick-link__icon{background:rgba(30,41,59,.92);border-color:rgba(71,85,105,.55);color:#93c5fd}
.dark .op-quick-link--accent{background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(56,189,248,.14));border-color:rgba(96,165,250,.22);color:#e2e8f0}
.dark .op-quick-link--accent:hover{background:linear-gradient(135deg,rgba(37,99,235,.26),rgba(56,189,248,.18));color:#fff;border-color:rgba(96,165,250,.28)}
.dark .op-quick-link--accent .op-quick-link__icon{background:rgba(255,255,255,.08);border-color:rgba(96,165,250,.18);color:#bfdbfe}
.dark .op-quick-link--accent .op-quick-link__meta,.dark .op-quick-link--accent .op-quick-link__arrow{color:#cbd5e1}
.dark .op-panel{background:rgba(15,23,42,.88);border-color:rgba(71,85,105,.55);box-shadow:none}
.dark .op-focus-card,.dark .op-list__item,.dark .op-live-main,.dark .op-mini-stat,.dark .op-chart-wrap{background:rgba(15,23,42,.7);border-color:rgba(71,85,105,.48)}
.dark .op-empty-state{background:rgba(15,23,42,.45);border-color:rgba(71,85,105,.5)}
.dark .op-mode-toggle .liveChartMode{background:rgba(15,23,42,.82);border-color:rgba(71,85,105,.48);color:#cbd5e1}
.dark .op-mode-toggle .liveChartMode.is-active{background:#2563eb;border-color:#2563eb;color:#fff}
.dark .op-live-pill,.dark .op-count-pill{background:rgba(37,99,235,.18);color:#bfdbfe}
@media (max-width: 1100px){.op-hero__grid,.op-main-grid,.op-live-grid,.op-live-summary,.op-live-chart-grid{grid-template-columns:1fr}.op-live-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.op-quick-nav__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.op-hero__meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 760px){.op-hero{padding:22px;border-radius:24px}.op-hero__title{font-size:30px}.op-hero__meta{grid-template-columns:1fr}.op-quick-nav{padding:18px}.op-quick-nav__grid,.op-live-stats{grid-template-columns:1fr}.op-panel,.op-live-main,.op-chart-wrap,.op-focus-card,.op-mini-stat,.op-live-sites{border-radius:20px}.op-panel__body{padding:18px}.op-spotlight-grid{grid-template-columns:1fr}.op-focus-card__value{font-size:30px}.op-live-top{flex-direction:column;align-items:flex-start}.op-live-controls{align-items:stretch;}.op-live-controls .live-select,.op-mode-toggle{white-space: nowrap;display: block;width: -webkit-fill-available;}.op-mode-toggle .liveChartMode{flex:1 1 calc(50% - 8px)}.op-list__item{align-items:flex-start;flex-direction:column}.op-list__content--site{width:100%}.op-count-pill{align-self:flex-start}}
/* Financial line editor widths */
.page-financial_offers .fin-line-table,
.page-financial_invoices .fin-line-table{min-width:1180px;table-layout:fixed;}
.page-financial_offers .fin-line-table .fin-col-item,
.page-financial_invoices .fin-line-table .fin-col-item{width:220px;}
.page-financial_offers .fin-line-table .fin-col-desc,
.page-financial_invoices .fin-line-table .fin-col-desc{width:auto;}
.page-financial_offers .fin-line-table .fin-col-qty,
.page-financial_invoices .fin-line-table .fin-col-qty{width:88px;}
.page-financial_offers .fin-line-table .fin-col-unit,
.page-financial_invoices .fin-line-table .fin-col-unit{width:92px;}
.page-financial_offers .fin-line-table .fin-col-price,
.page-financial_invoices .fin-line-table .fin-col-price{width:140px;}
.page-financial_offers .fin-line-table .fin-col-vat,
.page-financial_invoices .fin-line-table .fin-col-vat{width:96px;}
.page-financial_offers .fin-line-table .fin-col-total,
.page-financial_invoices .fin-line-table .fin-col-total{width:140px;}
.page-financial_offers .fin-line-table .fin-col-actions,
.page-financial_invoices .fin-line-table .fin-col-actions{width:64px;}
.page-financial_offers .fin-line-table input,
.page-financial_offers .fin-line-table select,
.page-financial_invoices .fin-line-table input,
.page-financial_invoices .fin-line-table select{min-width:0;}
.page-financial_offers .fin-line-table [data-role="unit"],
.page-financial_invoices .fin-line-table [data-role="unit"]{min-width:70px;}
.page-financial_offers .fin-line-table [data-role="qty"],
.page-financial_offers .fin-line-table [data-role="price"],
.page-financial_offers .fin-line-table [data-role="vat"],
.page-financial_invoices .fin-line-table [data-role="qty"],
.page-financial_invoices .fin-line-table [data-role="price"],
.page-financial_invoices .fin-line-table [data-role="vat"]{text-align:right;}
.page-financial_offers .fin-line-table td,
.page-financial_invoices .fin-line-table td{white-space:normal;}
/* === Round 9: sidebar always-dark glass, even in light mode === */
:root{
--mk-dual-bg:#050914;
--mk-dual-panel:linear-gradient(180deg, rgba(7,12,24,.96) 0%, rgba(6,10,21,.94) 52%, rgba(4,8,18,.93) 100%);
--mk-dual-border:rgba(148,163,184,.14);
--mk-dual-text:#f3f6fc;
--mk-dual-muted:#93a4bf;
--mk-dual-soft:rgba(148,163,184,.10);
--mk-dual-rail:linear-gradient(180deg, rgba(3,7,16,.992) 0%, rgba(3,6,14,.988) 52%, rgba(2,4,10,.994) 100%);
--mk-dual-shadow:0 30px 96px rgba(2,6,23,.54);
}
.mk-shell-sidebar,
#mkShellSidebar{
isolation:isolate;
}
.mk-dual-sidebar{
background:var(--mk-dual-panel) !important;
border-right:1px solid rgba(148,163,184,.16) !important;
box-shadow:var(--mk-dual-shadow) !important;
}
.mk-dual-sidebar::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(520px 420px at 12% 9%, rgba(59,130,246,.16), transparent 58%),
radial-gradient(460px 340px at 92% 24%, rgba(16,185,129,.08), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0));
opacity:.92;
}
.mk-dual-rail,
.dark .mk-dual-rail{
background:var(--mk-dual-rail) !important;
border-right:1px solid rgba(148,163,184,.10) !important;
}
.mk-dual-sub,
.dark .mk-dual-sub{
position:relative;
background:linear-gradient(180deg, rgba(10,16,30,.52) 0%, rgba(8,13,25,.40) 42%, rgba(6,10,21,.32) 100%) !important;
border-left:1px solid rgba(148,163,184,.07);
backdrop-filter:blur(18px) saturate(116%);
}
.mk-dual-sub::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.008) 26%, rgba(255,255,255,0) 58%),
radial-gradient(520px 380px at 0% 0%, rgba(59,130,246,.10), transparent 64%);
opacity:.72;
}
.mk-dual-sub > *{ position:relative; z-index:1; }
.mk-rail-foot .w-8.h-px,
.mk-shell-sidebar .w-8.h-px{
background:rgba(148,163,184,.18) !important;
}
.mk-sub-link,
.mk-sub-link:visited{
color:var(--mk-dual-text) !important;
}
.mk-sub-link:hover{
background:rgba(59,130,246,.13) !important;
border-color:rgba(96,165,250,.18) !important;
}
.mk-sub-link.is-active,
.dark .mk-sub-link.is-active{
background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.08)) !important;
border-color:rgba(96,165,250,.24) !important;
box-shadow:0 16px 36px rgba(37,99,235,.14) !important;
}
.mk-sub-icon,
.dark .mk-sub-icon{
background:rgba(148,163,184,.10) !important;
color:var(--mk-dual-text) !important;
}
.mk-sub-label,
.mk-sub-title,
.mk-sub-badge,
.mk-shell-sidebar a,
.mk-shell-sidebar button,
.mk-shell-sidebar [role=button]{
color:var(--mk-dual-text) !important;
}
.mk-sub-kicker,
.mk-sub-meta,
.mk-sub-desc,
.mk-shell-sidebar .text-slate-400,
.mk-shell-sidebar .text-slate-500,
.mk-shell-sidebar .text-gray-400,
.mk-shell-sidebar .text-gray-500{
color:var(--mk-dual-muted) !important;
}
/* =========================================================
Round 10: restore dashboard/topbar/monitors/server view polish
========================================================= */
/* Always-dark glass sidebar, even when app content is light */
.mk-shell-sidebar .mk-dual-sidebar,
.mk-shell-sidebar .mk-dual-rail,
.mk-shell-sidebar .mk-dual-sub{
backdrop-filter: blur(28px) saturate(165%) !important;
-webkit-backdrop-filter: blur(28px) saturate(165%) !important;
}
.mk-shell-sidebar .mk-dual-sidebar{
background: linear-gradient(180deg, rgba(3,10,24,.96) 0%, rgba(4,11,26,.94) 52%, rgba(2,8,19,.97) 100%) !important;
border-right: 1px solid rgba(96,165,250,.18) !important;
box-shadow: 0 32px 90px rgba(2,6,23,.58), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.mk-shell-sidebar .mk-dual-rail,
.mk-shell-sidebar .mk-dual-sub{position:relative;overflow:hidden;}
.mk-shell-sidebar .mk-dual-rail{
background: linear-gradient(180deg, rgba(5,16,36,.985) 0%, rgba(6,15,32,.97) 40%, rgba(4,11,25,.985) 100%) !important;
border-right: 1px solid rgba(96,165,250,.15) !important;
}
.mk-shell-sidebar .mk-dual-sub{
background: linear-gradient(180deg, rgba(12,24,45,.42) 0%, rgba(8,19,38,.34) 58%, rgba(5,12,28,.30) 100%) !important;
}
.mk-shell-sidebar .mk-dual-rail::before,
.mk-shell-sidebar .mk-dual-sub::before{
content:"";position:absolute;inset:0;pointer-events:none;
}
.mk-shell-sidebar .mk-dual-rail::before{
background:
radial-gradient(220px 240px at 0% 0%, rgba(56,189,248,.12), transparent 62%),
radial-gradient(220px 260px at 100% 12%, rgba(99,102,241,.11), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%, transparent 82%, rgba(255,255,255,.02));
}
.mk-shell-sidebar .mk-dual-sub::before{
background:
radial-gradient(360px 260px at 100% 0%, rgba(14,165,233,.14), transparent 56%),
radial-gradient(260px 220px at 0% 20%, rgba(59,130,246,.10), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,.04), transparent 24%, transparent 80%, rgba(255,255,255,.02));
}
.mk-shell-sidebar .mk-dual-rail > *,
.mk-shell-sidebar .mk-dual-sub > *{position:relative;z-index:1;}
.mk-shell-sidebar .mk-brand-chip,
.mk-shell-sidebar .mk-rail-btn,
.mk-shell-sidebar .mk-tier-toggle,
.mk-shell-sidebar .mk-utility-btn,
.mk-shell-sidebar .mk-sub-link,
.mk-shell-sidebar .mk-sub-badge,
.mk-shell-sidebar .mk-sub-icon{
backdrop-filter: blur(16px) saturate(155%) !important;
-webkit-backdrop-filter: blur(16px) saturate(155%) !important;
}
.mk-shell-sidebar .mk-rail-btn,
.mk-shell-sidebar .mk-tier-toggle,
.mk-shell-sidebar .mk-utility-btn{
border-color: none!important;
color: #a8bcda !important;
box-shadow: 0 16px 34px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.mk-shell-sidebar .mk-rail-btn:hover,
.mk-shell-sidebar .mk-tier-toggle:hover,
.mk-shell-sidebar .mk-utility-btn:hover{
background: rgba(37,99,235,.22) !important;
border-color: rgba(96,165,250,.26) !important;
color: #e4efff !important;
}
.mk-shell-sidebar .mk-rail-btn.is-active{
background: linear-gradient(180deg, rgba(59,130,246,.32), rgba(37,99,235,.16)) !important;
border-color: none!important;
color: #dbeafe !important;
box-shadow: 0 18px 40px rgba(37,99,235,.22) !important;
}
.mk-shell-sidebar .mk-sub-head{padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid rgba(148,163,184,.12) !important;}
.mk-shell-sidebar .mk-sub-link{
background: none;
border-color: rgba(148,163,184,.06) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.mk-shell-sidebar .mk-sub-link:hover{
background: rgba(37,99,235,.17) !important;
border-color: none!important;
box-shadow: 0 16px 34px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.mk-shell-sidebar .mk-sub-link.is-active{
background: linear-gradient(135deg, rgba(59,130,246,.24), rgba(15,23,42,.30)) !important;
border-color: none!Important;
box-shadow: none!important;
}
.mk-shell-sidebar .mk-sub-icon,
.mk-shell-sidebar .mk-sub-badge{
background: rgba(255,255,255,.05) !important;
border-color: rgba(148,163,184,.08) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* Topbar styling restored */
.app-topbar{
background: linear-gradient(180deg, rgb(255 255 255 / 58%), rgba(255, 255, 255, .70)) !important;
border-bottom: 1px solid rgb(191 219 254 / 0%) !important;
backdrop-filter: blur(20px) saturate(150%) !important;
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
.dark .app-topbar{
background: linear-gradient(180deg, rgba(2,6,23,.84), rgba(2,6,23,.68)) !important;
border-bottom-color: rgba(59,130,246,.16) !important;
}
.mk-top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap}
.mk-top-action,.mk-top-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;height:42px;min-width:42px;padding:0 14px;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(239,246,255,.92));color:#1e293b;box-shadow: 0 10px 26px rgba(37,99,235,.10);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;text-decoration:none}
.mk-top-action:hover,.mk-top-avatar:hover{transform:translateY(-1px);border-color:rgba(96,165,250,.95);box-shadow:0 16px 32px rgba(37,99,235,.16)}
.mk-top-action--pill{padding:0 20px;min-width:84px;font-weight:800}
.mk-top-action__label{display:inline-block;font-size:1rem;line-height:1;color:#0f172a}
.mk-top-avatar{padding:3px 6px}
.mk-top-avatar__frame{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:13px;border:1px solid rgba(191,219,254,.76);background:rgba(255,255,255,.88);padding:2px}
.dark .mk-top-action,.dark .mk-top-avatar{border-color:rgba(59,130,246,.22);background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(15,23,42,.72));color:#e2e8f0;box-shadow:0 16px 34px rgba(2,6,23,.34)}
.dark .mk-top-action:hover,.dark .mk-top-avatar:hover{border-color:rgba(96,165,250,.36);background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(30,41,59,.82))}
.dark .mk-top-action__label{color:#f8fafc}
.dark .mk-top-avatar__frame{border-color:rgba(59,130,246,.18);background:rgba(2,6,23,.54)}
@media (max-width:760px){.mk-top-actions{gap:8px}.mk-top-action,.mk-top-avatar{height:40px;min-width:40px;padding:0 12px}.mk-top-action--pill{padding:0 16px;min-width:0}.mk-top-action__label{font-size:.95rem}.mk-topbar-copy{display:none!important}}
/* Dashboard KPI cards restored */
.page-index .op-kpi-grid{gap:14px;margin-bottom:22px}
.page-index .mk-kpi-card{position:relative;overflow:hidden;min-height:146px;padding:20px 20px 18px;border-radius:24px;border:1px solid rgba(37,99,235,.14);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,249,.94));box-shadow:0 24px 54px rgba(15,23,42,.08);align-items:stretch}
.page-index .mk-kpi-card::before{background:linear-gradient(180deg,rgba(59,130,246,.08),transparent 46%);opacity:.9}
.page-index .mk-kpi-card:hover{transform:translateY(-2px);box-shadow:0 26px 62px rgba(37,99,235,.12)}
.page-index .mk-kpi-card__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-width:0;flex:1 1 auto}
.page-index .mk-kpi-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.page-index .mk-kpi-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;white-space:normal;overflow:visible;text-overflow:clip;max-width:100%}
.page-index .mk-kpi-card__main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0}
.page-index .mk-kpi-card__text{min-width:0;flex:1 1 auto}
.page-index .mk-kpi-chart-slot{display:flex;align-items:flex-start;justify-content:flex-end;flex:0 1 34%;min-width:116px;max-width:168px;padding-top:6px;margin-left:auto}
.page-index .mk-kpi-value{font-size:2.55rem;line-height:.95;font-weight:900;letter-spacing:-.06em}
.page-index .mk-kpi-unit{font-size:1.2rem;font-weight:700;color:#64748b}
.page-index .mk-kpi-meta{margin-top:9px;font-size:.95rem;line-height:1.45;color:#64748b;white-space:normal;overflow:visible;text-overflow:clip}
.page-index .mk-kpi-icon{width:44px;height:44px;border-radius:15px;border-color:rgba(59,130,246,.16);background:linear-gradient(180deg,rgba(248,250,252,.95),rgba(239,246,255,.9));box-shadow:none;flex:0 0 44px}
.page-index .mk-kpi-icon.good{color:#0f9f6e;background:linear-gradient(180deg,rgba(16,185,129,.16),rgba(16,185,129,.08));border-color:rgba(16,185,129,.26)}
.page-index .mk-kpi-icon.warn{color:#d97706;background:linear-gradient(180deg,rgba(245,158,11,.18),rgba(245,158,11,.08));border-color:rgba(245,158,11,.26)}
.page-index .mk-kpi-icon.danger{color:#dc2626;background:linear-gradient(180deg,rgba(239,68,68,.18),rgba(239,68,68,.08));border-color:rgba(239,68,68,.24)}
.page-index .mk-kpi-icon.brand{color:#6d28d9;background:linear-gradient(180deg,rgba(124,58,237,.16),rgba(59,130,246,.08));border-color:rgba(124,58,237,.24)}
.page-index .mk-kpi-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:.82rem;font-weight:800;border-width:1px}
.page-index .mk-kpi-pill .mk-kpi-pill-dot{width:7px;height:7px;border-radius:999px;background:currentColor;display:inline-block}
.page-index .mk-kpi-pill.neutral{background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.2);color:#64748b}
.page-index .mk-kpi-spark{position:relative;right:auto;top:auto;width:100%;height:56px;pointer-events:none;z-index:0;opacity:.98}
.page-index .mk-kpi-meter{display:flex;gap:4px;align-items:center;margin-top:4px}
.page-index .mk-kpi-meter span{width:5px;height:5px;border-radius:999px;background:rgba(148,163,184,.22)}
.page-index .mk-kpi-meter span.is-active{background:var(--kpi-meter-color,#10b981);box-shadow:0 0 10px color-mix(in srgb,var(--kpi-meter-color,#10b981) 40%, transparent)}
.page-index .mk-kpi-card[data-tone="good"]{--kpi-meter-color:#10b981}
.page-index .mk-kpi-card[data-tone="warn"]{--kpi-meter-color:#f59e0b}
.page-index .mk-kpi-card[data-tone="danger"]{--kpi-meter-color:#ef4444}
.page-index .mk-kpi-card[data-tone="brand"]{--kpi-meter-color:#7c3aed}
.dark .page-index .mk-kpi-card{background:linear-gradient(180deg,rgba(2,6,23,.98),rgba(8,15,35,.96));border-color:rgba(59,130,246,.18);box-shadow:0 24px 60px rgba(2,6,23,.42)}
.dark .page-index .mk-kpi-card::before{background:linear-gradient(180deg,rgba(59,130,246,.14),transparent 48%);opacity:.9}
.dark .page-index .mk-kpi-label,.dark .page-index .mk-kpi-meta,.dark .page-index .mk-kpi-unit{color:#94a3b8}
.dark .page-index .mk-kpi-value{color:#f8fafc}
.dark .page-index .mk-kpi-icon{background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.74));border-color:rgba(59,130,246,.2);color:#cbd5e1}
.dark .page-index .mk-kpi-pill.neutral{background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.16);color:#cbd5e1}
.dark .page-index .mk-kpi-meter span{background:rgba(51,65,85,.9)}
@media (max-width:900px){.page-index .mk-kpi-chart-slot{flex-basis:30%;min-width:96px;max-width:138px;padding-top:4px}.page-index .mk-kpi-spark{height:48px}.page-index .mk-kpi-value{font-size:2.2rem}}
@media (max-width:640px){.page-index .mk-kpi-card{min-height:0;padding:18px}.page-index .mk-kpi-chart-slot{flex:1 1 100%;min-width:0;max-width:none;padding-top:6px;margin-left:0}.page-index .mk-kpi-spark{width:100%;height:54px;margin-top:0}.page-index .mk-kpi-card__main{align-items:center;flex-wrap:wrap}}
/* Monitors table restored + softened typography */
.page-monitors .monitor-table-wrap{padding-top:6px}
.page-monitors .pm-lite-table{border-radius:30px;overflow:hidden;border:1px solid rgba(191,219,254,.8);box-shadow:0 22px 54px rgba(15,23,42,.07);background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,250,252,.94))}
.page-monitors .analytics-panel-head{padding:24px 26px 14px}
.page-monitors .monitor-filters{padding:18px 22px 12px}
.page-monitors .monitor-table-wrap table{border-collapse:separate;border-spacing:0 0}
.page-monitors .monitor-directory-table thead th{padding:18px 16px;background:#f3f7fb;color:#8aa0c6;font-size:.94rem;font-weight:800;border-top:1px solid rgba(191,219,254,.64);border-bottom:1px solid rgba(191,219,254,.64)}
.page-monitors .monitor-directory-table thead th:first-child{border-top-left-radius:18px}
.page-monitors .monitor-directory-table thead th:last-child{border-top-right-radius:18px}
.page-monitors .monitor-dir-row td{padding:20px 16px;border-bottom:1px solid rgba(226,232,240,.88);vertical-align:middle;background:transparent}
.page-monitors .monitor-dir-row:hover td{background:rgba(248,250,252,.78)}
.page-monitors .monitor-name-link{display:flex;align-items:center;gap:16px;min-width:0;color:inherit;text-decoration:none}
.page-monitors .monitor-favicon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid rgba(226,232,240,.96);background:rgba(255,255,255,.96);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.page-monitors .monitor-favicon img{width:100%;height:100%;object-fit:contain}
.page-monitors .monitor-name-text{min-width:0;display:flex;flex-direction:column;gap:4px}
.page-monitors .monitor-name-title{font-size:1rem;font-weight:740;line-height:1.2;color:#425671;white-space:normal}
.page-monitors .monitor-name-meta{font-size:.84rem;color:#7b8ca6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-monitors .monitor-type-badge,.page-monitors .monitor-ssl-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;border:1px solid rgba(226,232,240,.95);background:rgba(255,255,255,.86);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6f819a}
.page-monitors .monitor-scope{font-size:1rem;font-weight:700;color:#475d79}
.page-monitors .monitor-status-pill{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;font-size:.92rem;font-weight:800}
.page-monitors .monitor-status-pill .dot{width:10px;height:10px;border-radius:999px;background:currentColor;display:inline-block}
.page-monitors .monitor-latency{font-size:1.14rem;font-weight:690;letter-spacing:-.02em;line-height:1;color:#10b981;white-space:nowrap}
.page-monitors .monitor-latency small{font-size:.52em;font-weight:620;opacity:.88}
.page-monitors .monitor-latency--good{color:#10b981}
.page-monitors .monitor-latency--warn{color:#f59e0b}
.page-monitors .monitor-latency--danger{color:#ef4444}
.page-monitors .monitor-latency--na{font-size:1.02rem;color:#94a3b8}
.page-monitors .monitor-ssl-wrap{display:flex;flex-direction:column;gap:6px}
.page-monitors .monitor-ssl-meta{font-size:.88rem;font-weight:670;color:#7b8ca4;line-height:1.35}
.page-monitors .monitor-checked{font-size:.96rem;font-weight:680;color:#546b86;white-space:nowrap}
.page-monitors .monitor-actions{gap:10px}
.page-monitors .monitor-action-btn{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.94)}
.dark .page-monitors .pm-lite-table{background:linear-gradient(180deg,rgba(2,6,23,.98),rgba(8,15,35,.96));border-color:rgba(59,130,246,.18);box-shadow:0 24px 60px rgba(2,6,23,.42)}
.dark .page-monitors .monitor-directory-table thead th{background:rgba(15,23,42,.96);color:#8ea4cc;border-color:rgba(51,65,85,.92)}
.dark .page-monitors .monitor-dir-row td{border-bottom-color:rgba(51,65,85,.86)}
.dark .page-monitors .monitor-dir-row:hover td{background:rgba(15,23,42,.68)}
.dark .page-monitors .monitor-favicon{background:rgba(15,23,42,.88);border-color:rgba(51,65,85,.9)}
.dark .page-monitors .monitor-name-title{color:#d4deee}
.dark .page-monitors .monitor-scope{color:#d0daea}
.dark .page-monitors .monitor-checked{color:#b7c4d8}
.dark .page-monitors .monitor-name-meta,.dark .page-monitors .monitor-ssl-meta,.dark .page-monitors .monitor-type-badge,.dark .page-monitors .monitor-ssl-badge{color:#91a3bd}
.dark .page-monitors .monitor-type-badge,.dark .page-monitors .monitor-ssl-badge{background:rgba(15,23,42,.82);border-color:rgba(51,65,85,.9)}
.dark .page-monitors .monitor-action-btn{background:rgba(15,23,42,.72)}
@media (max-width:1100px){.page-monitors .monitor-directory-table{min-width:1080px}}
/* Restore dark analytics/live-sites blocks */
.dark .page-index .op-live-sites{background:linear-gradient(180deg,rgba(10,17,36,.86),rgba(5,11,24,.92));border-color:rgba(71,85,105,.48);box-shadow:none}
.dark .page-index .op-live-sites .op-subpanel__title,.dark .page-index .op-live-sites .op-subpanel__label{color:#f8fafc}
.dark .page-index .op-live-sites .op-subpanel__label{color:#94a3b8}
.dark .page-index .op-live-sites .op-empty-state{background:linear-gradient(180deg,rgba(15,23,42,.58),rgba(15,23,42,.42));border-color:rgba(71,85,105,.5)}
/* Round 12: keep round10 dark menu/topbar/dashboard restore + slightly more transparent light cards */
html:not(.dark) .page-index .mk-kpi-card{
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,245,249,.84)) !important;
border-color: rgba(37,99,235,.12) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
html:not(.dark) .page-monitors .pm-lite-table,
html:not(.dark) .surface-card,
html:not(.dark) .surface-header,
html:not(.dark) .fin-card,
html:not(.dark) .pm-card,
html:not(.dark) main .bg-white.rounded-2xl,
html:not(.dark) main .bg-white.rounded-xl,
html:not(.dark) main .bg-white.rounded-3xl{
background: rgba(255,255,255,.84) !important;
border-color: rgba(148,163,184,.18) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
html:not(.dark) .page-monitors .monitor-type-badge,
html:not(.dark) .page-monitors .monitor-ssl-badge,
html:not(.dark) .page-monitors .monitor-action-btn,
html:not(.dark) .page-monitors .monitor-favicon{
background: rgba(255,255,255,.88) !important;
}
/* -------------------------------------------------------------------------- */
/* Auth login layout */
.auth-login-shell{width:min(1180px,100%);margin:0 auto}
.auth-login-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:26px;align-items:stretch}
.auth-welcome-panel,.auth-form-panel{border-radius:34px;border:1px solid rgba(148,163,184,.18);backdrop-filter:blur(16px);box-shadow:0 24px 70px rgba(15,23,42,.10)}
.auth-welcome-panel{min-height:min(74vh,760px);padding:38px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(245,249,255,.88))}
.auth-welcome-panel:before{content:"";position:absolute;inset:-10% auto auto -6%;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,rgba(59,130,246,.22),transparent 70%);pointer-events:none}
.auth-welcome-panel:after{content:"";position:absolute;inset:auto -12% -18% auto;width:440px;height:440px;border-radius:999px;background:radial-gradient(circle,rgba(14,165,233,.14),transparent 70%);pointer-events:none}
.auth-welcome-copy{position:relative;z-index:1;max-width:430px;padding-top:8px}
.auth-welcome-kicker{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(191,219,254,.82);background:rgba(255,255,255,.58);font-size:.78rem;line-height:1;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#64748b;margin-bottom:22px}
.auth-welcome-title{font-size:clamp(3rem,5vw,4.8rem);line-height:.92;letter-spacing:-.06em;font-weight:900;color:#0f172a;margin:0}
.auth-welcome-sub{margin-top:18px;font-size:1.12rem;line-height:1.6;color:#5f6f8a;max-width:420px}
.auth-welcome-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.auth-welcome-tile{min-height:84px;padding:18px 20px;border-radius:24px;border:1px solid rgba(191,219,254,.44);background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.auth-welcome-tile-kicker{display:block;margin-bottom:8px;font-size:.78rem;line-height:1;text-transform:uppercase;letter-spacing:.16em;font-weight:800;color:#7ca9e9}
.auth-welcome-tile strong{display:block;font-size:1rem;font-weight:800;}
.auth-form-panel{padding:34px 34px 30px;background:rgba(255,255,255,.80)}
.auth-login-brand{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.auth-login-logo{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;border:1px solid rgba(148,163,184,.20);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.92));box-shadow:0 12px 26px rgba(15,23,42,.08)}
.auth-login-title{font-size:2rem;line-height:1;font-weight:900;letter-spacing:-.05em;color:#0f172a}
.auth-login-subtitle{margin-top:8px;font-size:1.02rem;font-weight:700;color:#64748b}
.auth-field{display:grid;gap:10px}
.auth-field-label{font-size:.92rem;font-weight:700;color:#64748b}
.auth-field-box{position:relative;border:1px solid rgba(191,219,254,.92);border-radius:22px;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.44);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.auth-field-box:focus-within{border-color:rgba(37,99,235,.48);box-shadow:0 0 0 5px rgba(59,130,246,.10),0 14px 28px rgba(37,99,235,.08)}
.auth-field-input{width:100%;border:0;background:transparent;padding:17px 18px 17px 46px;font-size:1rem;font-weight:600;color:#0f172a;outline:none}
.auth-remember{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:20px;font-size:.95rem;color:#334155;cursor:pointer;user-select:none;margin-top: 10px;margin-bottom: 10px;}
.auth-checkbox{appearance:none;-webkit-appearance:none;display:inline-grid;place-content:center;width:24px;height:24px;border-radius:8px;border:1px solid rgba(148,163,184,.42);background:rgba(255,255,255,.92);box-shadow:0 6px 14px rgba(15,23,42,.06);margin:0;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.auth-checkbox::after{content:"";width:12px;height:7px;border:2.2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) scale(.65);opacity:0;transition:transform .15s ease,opacity .15s ease}
.auth-checkbox:checked{background:linear-gradient(135deg,var(--primary,#2563eb),var(--primary-700,#1d4ed8));border-color:transparent;box-shadow:0 10px 22px rgba(37,99,235,.24)}
.auth-checkbox:checked::after{opacity:1;transform:rotate(-45deg) scale(1)}
.auth-checkbox:focus-visible{outline:none;box-shadow:0 0 0 5px rgba(59,130,246,.14)}
.auth-login-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:58px;border:0;border-radius:20px;background:linear-gradient(135deg,var(--primary,#3b82f6),var(--primary-700,#2563eb));color:#fff;font-weight:800;font-size:1rem;box-shadow:0 20px 42px rgba(37,99,235,.24);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.auth-login-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.auth-login-link{display:block;text-align:center;font-size:.92rem;color:#64748b;text-decoration:none}
.auth-login-link:hover{color:#0f172a}
.auth-twofa-copy{margin-top:4px;border-radius:22px;border:1px solid rgba(191,219,254,.86);background:rgba(255,255,255,.78);padding:18px 20px;font-size:.95rem;line-height:1.7;color:#334155}
.dark .auth-welcome-panel{background:linear-gradient(180deg,rgba(17,33,70,.92),rgba(5,20,56,.96));border-color:rgba(148,163,184,.16);box-shadow:0 28px 80px rgba(2,6,23,.42)}
.dark .auth-welcome-kicker{background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.18);color:#cbd5e1}
.dark .auth-form-panel{background:rgba(15,23,42,.86);border-color:rgba(148,163,184,.16);box-shadow:0 28px 80px rgba(2,6,23,.42)}
.dark .auth-welcome-title,.dark .auth-login-title{color:#f8fafc}
.dark .auth-field-label,.dark .auth-login-subtitle,.dark .auth-login-link{color:#94a3b8}
.dark .auth-welcome-sub,.dark .auth-twofa-copy,.dark .auth-remember{color:#cbd5e1}
.dark .auth-welcome-tile{border-color:rgba(148,163,184,.14);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));box-shadow:none}
.dark .auth-welcome-tile strong{color:#f8fafc}
.dark .auth-login-logo{background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(15,23,42,.76));border-color:rgba(148,163,184,.16)}
.dark .auth-field-box{background:rgba(2,6,23,.62);border-color:rgba(59,130,246,.22);box-shadow:none}
.dark .auth-field-box:focus-within{border-color:rgba(96,165,250,.42);box-shadow:0 0 0 5px rgba(59,130,246,.14),0 14px 28px rgba(2,6,23,.30)}
.dark .auth-field-input{color:#f8fafc}
.dark .auth-remember,.dark .auth-twofa-copy{background:rgba(2,6,23,.56);border-color:rgba(59,130,246,.18)}
.dark .auth-checkbox{background:rgba(2,6,23,.74);border-color:rgba(148,163,184,.22);box-shadow:none}
@media (max-width:980px){.auth-login-layout{grid-template-columns:1fr}.auth-welcome-panel{min-height:280px;order:2;padding:30px}.auth-form-panel{order:1}.auth-login-title{font-size:1.75rem}}
@media (max-width:640px){.auth-form-panel{padding:26px 22px 24px}.auth-welcome-title{font-size:3rem}.auth-welcome-sub{font-size:1rem}.auth-welcome-grid{grid-template-columns:1fr}}
/* =========================================================
Round 17: performance cleanup for shell compositing
- keep the same visual language, but reduce blur/compositing cost
========================================================= */
.mk-shell-sidebar .mk-dual-sidebar,
.mk-shell-sidebar .mk-dual-rail,
.mk-shell-sidebar .mk-dual-sub{
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}
.mk-shell-sidebar .mk-brand-chip,
.mk-shell-sidebar .mk-rail-btn,
.mk-shell-sidebar .mk-tier-toggle,
.mk-shell-sidebar .mk-utility-btn,
.mk-shell-sidebar .mk-sub-link,
.mk-shell-sidebar .mk-sub-badge,
.mk-shell-sidebar .mk-sub-icon{
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.app-topbar{
backdrop-filter: blur(10px) saturate(122%) !important;
-webkit-backdrop-filter: blur(10px) saturate(122%) !important;
}
.surface-card,
.sv-tabbar,
.mv-tabbar,
.status-panel,
.auth-welcome-panel,
.auth-form-panel{
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
.monitor-surface{
background: linear-gradient(180deg, rgba(255,255,255,.985), rgba(248,250,252,.975)) !important;
}
.dark .monitor-surface{
background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(2,6,23,.94)) !important;
}
.surface-card{
background: rgba(255,255,255,.95) !important;
}
.dark .surface-card{
background: rgba(15,23,42,.90) !important;
}
.sv-tabbar,
.mv-tabbar,
.status-panel{
background: rgba(255,255,255,.90) !important;
}
.dark .sv-tabbar,
.dark .mv-tabbar,
.dark .status-panel{
background: rgba(15,23,42,.80) !important;
}
/* PM issue drawer dark mode fixes */
.pm-activity-entry{position:relative;border:1px solid rgba(148,163,184,.16);box-shadow:none;background:linear-gradient(180deg,#fff,rgba(248,250,252,.92));border-radius:18px;padding:16px 18px 16px 22px}
.pm-activity-entry-rail{position:absolute;left:12px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,rgba(59,130,246,.22),rgba(148,163,184,.08))}
.pm-activity-entry-line{gap:14px}
.pm-activity-entry-dot{margin-top:6px}
.pm-activity-entry-copy{flex:1;min-width:0}
.pm-activity-entry-author{margin-top:4px;color:#64748b;font-size:13px}
.pm-activity-entry-meta{margin-top:12px;background:#f8fafc;border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:12px;color:#334155}
.dark .pm-drawer-card{background:rgba(15,23,42,.72);border-color:rgba(148,163,184,.18)}
.dark .pm-comment,
.dark .pm-comment-card,
.dark .pm-subtask,
.dark .pm-subtask-body{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.18)}
.dark .pm-subtask-note,
.dark .pm-activity-entry,
.dark .pm-activity-entry-meta{background:rgba(15,23,42,.94);border-color:rgba(148,163,184,.18);color:#cbd5e1}
.dark .pm-activity-entry-author,
.dark .pm-subtask-meta,
.dark .pm-subtask-status,
.dark .pm-comment-helper{color:#94a3b8}
.dark .pm-subtask-title,
.dark .pm-comment-head strong,
.dark .pm-comment-body,
.dark .pm-avatar-picker-current,
.dark .pm-avatar-picker-option{color:#f8fafc}
.dark .pm-comment-card{background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.88))}
.dark .pm-avatar-picker-trigger,
.dark .pm-avatar-picker-menu{background:rgba(15,23,42,.96);border-color:rgba(148,163,184,.24);color:#f8fafc}
.dark .pm-avatar-picker-option:hover,
.dark .pm-avatar-picker-option.is-selected{background:rgba(59,130,246,.16)}
.dark .pm-subtask-checkmark{background:rgba(15,23,42,.96);border-color:rgba(148,163,184,.45)}
.dark .pm-subtask-summary-right{color:#94a3b8}
.dark .pm-checklist-bar{background:rgba(148,163,184,.16)}