:root{
  --card: rgba(255,255,255,.92);
  --ink: #0f172a;
  --muted: rgba(15,23,42,.62);
  --line: rgba(15,23,42,.12);
  /* house-style accents (blue + red) */
  --accent:#1d4ed8;
  --accent2:#ef4444;
  --shadow: 0 22px 55px rgba(15,23,42,.10);
  --shadow2: 0 10px 22px rgba(15,23,42,.08);
  --sidebar:#0b1b3c;
  --sidebar2:#09142e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 10% -10%, rgba(29,78,216,.10), transparent 55%),
              radial-gradient(900px 600px at 90% 0%, rgba(239,68,68,.08), transparent 52%),
              linear-gradient(180deg, #F6F7FB, #F2F6FF 45%, #F6F7FB);
  color: var(--ink);
}
.p-container{width:min(1180px, calc(100% - 48px)); margin:0 auto}

/* ------------------------------------------------------------
   Auth screens (login)
   When not authenticated, center content and make it feel like
   a dedicated login page without changing routing or templates.
------------------------------------------------------------- */
.l-app[data-auth="0"] .l-main{min-height: calc(100vh - 72px - 72px); display:flex; align-items:center; justify-content:center; padding:46px 0 54px}
.l-app[data-auth="0"] .p-container{width:min(720px, calc(100% - 48px))}
.p-login-wrap{width:100%; display:flex; justify-content:center}
.p-login-card{width:min(560px, 100%); padding:22px}
.p-login-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.p-login-badge{width:46px;height:46px;border-radius:16px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.92); border:1px solid var(--line); box-shadow: var(--shadow2)}
.p-login-badge img{width:30px;height:30px; object-fit:contain; display:block}
.p-login-title{margin:0; font-size:26px; letter-spacing:-.5px}
.p-login-sub{margin:2px 0 0; color: var(--muted); font-weight:800}
.p-login-foot{display:flex; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color: var(--muted); font-weight:800; font-size:12px; flex-wrap:wrap}

/* New shell layout (sidebar + topbar) */
.l-app{min-height:100vh; display:grid; grid-template-columns: 280px 1fr}
/* When NOT logged in, remove the sidebar column so the login card can truly center */
.l-app[data-auth="0"]{grid-template-columns: 1fr}
.l-app[data-auth="0"] .l-content{grid-column: 1 / -1}
.l-sidebar{position:sticky; top:0; align-self:start; height:100vh; padding:18px 14px; background: linear-gradient(180deg, var(--sidebar), var(--sidebar2)); color: rgba(255,255,255,.88); border-right: 1px solid rgba(255,255,255,.08)}
.l-brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; padding:10px 10px; border-radius:16px}
.l-brand:hover{background: rgba(255,255,255,.06)}
.l-logo{width:44px; height:44px; object-fit:contain; border-radius:14px; background: rgba(255,255,255,.95); border:1px solid rgba(15,23,42,.12)}
.l-brand-title{font-weight:950; letter-spacing:-.2px}
.l-brand-sub{opacity:.72; font-weight:800; font-size:12px; margin-top:2px}
.l-nav{display:grid; gap:6px; margin-top:14px}
.l-navgroup{margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10)}
.l-navgroup-title{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.55); padding: 0 12px 6px 12px; font-weight:700}
.l-navbadge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px; background: rgba(255,255,255,.16); color: rgba(255,255,255,.92); font-size:12px; font-weight:800; margin-left:6px}
.l-navcount{margin-left:6px; font-size:12px; font-weight:800; color: rgba(255,255,255,.78)}
.l-navlink{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; text-decoration:none; color: rgba(255,255,255,.84); font-weight:900}
.l-navlink:hover{background: rgba(255,255,255,.07)}
.l-navlink.is-active{background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10)}
.l-navlink .i{width:18px;height:18px;fill:currentColor;opacity:.92}
.l-navlink{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; text-decoration:none; color: rgba(255,255,255,.84); font-weight:900}
.l-navlink .i{flex:0 0 18px}

.l-sidefoot{margin-top:auto; padding:12px 10px; border-top:1px solid rgba(255,255,255,.10)}
.l-side-meta{margin-bottom:10px}
.l-side-name{font-weight:950}
.l-side-email{opacity:.72; font-weight:800; font-size:12px}
.l-logout button{width:100%; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-radius:14px; padding:10px 12px; font-weight:950; cursor:pointer}
.l-logout button:hover{background: rgba(255,255,255,.12)}

.l-content{min-width:0; display:flex; flex-direction:column}
.l-topbar{position:sticky; top:0; z-index:12; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background: rgba(246,247,251,.78); backdrop-filter: blur(12px); border-bottom:1px solid var(--line)}
.l-top-title{font-weight:950; letter-spacing:-.2px}
.l-top-actions{display:flex; align-items:center; gap:12px}
.l-userchip{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); background: rgba(255,255,255,.72); border-radius:999px; box-shadow: var(--shadow2)}
.l-avatar{width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:1000; color:#fff; background: linear-gradient(135deg, var(--accent), var(--accent2))}
.l-usertext{line-height:1.05}
.l-username{font-weight:1000; font-size:13px; letter-spacing:-.2px}
.l-userrole{font-weight:900; font-size:11px; color: rgba(15,23,42,.60)}
.l-burger{display:none; border:1px solid var(--line); background: rgba(255,255,255,.86); border-radius:14px; padding:10px 12px; cursor:pointer; font-weight:950}
.l-main{padding:22px 0 44px}
.l-footer{margin-top:auto; border-top:1px solid var(--line); background: rgba(255,255,255,.60); padding:18px 0}
.l-footer-inner{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}

/* Legacy header/footer (kept for admin pages only) */
.p-top{position:sticky; top:0; z-index:10; backdrop-filter: blur(12px); background: rgba(246,244,241,.72); border-bottom:1px solid var(--line)}
.p-topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.p-brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.p-brandmark{display:flex; align-items:center; gap:10px}
.p-logo{width:34px; height:34px; object-fit:contain; border-radius:10px; border:1px solid rgba(18,19,26,.12); background: rgba(255,255,255,.7); box-shadow: var(--shadow2)}
.p-dot{width:14px;height:14px;border-radius:999px;background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 10px 22px rgba(109,94,248,.18)}
.p-brand strong{display:block; font-weight:900}
.p-brand small{display:block; color:var(--muted); font-weight:700}
.p-nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.p-navlink{padding:10px 12px; text-decoration:none; border-radius:999px; color:rgba(18,19,26,.74); font-weight:850}
.p-navlink:hover{background: rgba(18,19,26,.06)}
.p-navlink.is-active{background: rgba(109,94,248,.14); color: rgba(18,19,26,.9); border:1px solid rgba(109,94,248,.22)}
.p-logout button{border:1px solid var(--line); background: rgba(255,255,255,.75); border-radius:999px; padding:10px 12px; font-weight:900; cursor:pointer}
.p-main{padding:26px 0 50px}
.p-card{background: var(--card); border:1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding:18px}
.p-card:hover{box-shadow: 0 26px 64px rgba(18,19,26,.12)}
.p-card--narrow{max-width:560px; margin:0 auto}
h1{margin:0 0 10px; font-size:28px; letter-spacing:-.4px}
h2{margin:0 0 10px; font-size:18px}
.p-muted{color: var(--muted)}
.p-alert{border:1px solid rgba(255,98,98,.35); background: rgba(255,98,98,.10); padding:12px 14px; border-radius:16px; margin:12px 0; font-weight:800}
.p-form{display:grid; gap:10px; margin-top:12px}
.p-form--grid{grid-template-columns:1fr 1fr}
.p-form label{font-weight:900; font-size:13px}
.p-form input{width:100%; border-radius:16px; border:2px solid rgba(18,19,26,.14); background: rgba(255,255,255,.86); padding:12px 12px; outline:none; box-shadow: var(--shadow2)}
.p-form-actions{grid-column:1/-1}
.p-btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 14px; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.82); box-shadow: var(--shadow2); text-decoration:none; font-weight:950; cursor:pointer}
.p-btn--primary{background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color:transparent; color:#fff}
.p-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:14px}
.p-grid--3{grid-template-columns: repeat(3, 1fr)}
.p-grid--dash{grid-template-columns:1.45fr .55fr; align-items:start}

/* modern list cards ("provider rows" style) */
.p-list{display:grid; gap:12px; margin-top:12px}
.p-item{position:relative; display:grid; grid-template-columns: 160px 1fr auto; gap:14px; align-items:center; padding:16px 16px 16px 18px; border-radius:22px; border:1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.92); box-shadow: var(--shadow2)}
.p-item::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:5px; border-radius:999px; background: linear-gradient(180deg, rgba(29,78,216,.85), rgba(239,68,68,.75)); opacity:.9}
.p-item:hover{box-shadow: 0 18px 38px rgba(15,23,42,.12)}
.p-item-left{display:flex; flex-direction:column; gap:4px; padding-right:6px; border-right:1px solid rgba(15,23,42,.10)}
.p-item-kicker{font-size:12px; font-weight:950; color: rgba(15,23,42,.55); letter-spacing:.2px}
.p-item-main{font-size:14px; font-weight:1000; letter-spacing:-.2px}
.p-item-sub{font-size:12px; font-weight:850; color: rgba(15,23,42,.60)}
.p-item-mid{min-width:0}
.p-item-title{font-size:15px; font-weight:1000; margin:0; letter-spacing:-.2px}
.p-item-desc{margin-top:4px; font-size:13px; color: rgba(15,23,42,.62); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-item-right{display:flex; gap:10px; align-items:center; justify-content:flex-end; flex-wrap:wrap; min-width:240px}
.p-amount{font-weight:1000; font-size:14px; white-space:nowrap; min-width:110px; text-align:right}

/* dashboard invoice row: stack amount above actions so it never overlaps */
.p-item-right--stack{flex-direction:column; align-items:flex-end; justify-content:center; gap:10px; min-width:260px}
.p-item-right--stack .p-amount{font-size:15px; min-width:0}
.p-item-right--stack .p-actions{justify-content:flex-end}

/* Quick links (right column) */
.p-quick{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.p-quick-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid rgba(15,23,42,.10); border-radius:18px; background: rgba(255,255,255,.86)}
.p-quick-left{min-width:0}
.p-quick-title{font-weight:1000; letter-spacing:-.2px}
.p-quick-sub{color: rgba(15,23,42,.60); font-size:13px; font-weight:800; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.p-quick-right{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.p-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.85); font-weight:950; text-decoration:none; color: inherit}
.p-chip:hover{box-shadow: var(--shadow2)}
.p-chip--primary{background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color:#fff}
.p-chip--success{background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(34,197,94,.85)); border-color: transparent; color:#fff}
.p-chip--success:hover{box-shadow: 0 16px 30px rgba(16,185,129,.22)}
.p-inline{display:inline-flex; margin:0}


.p-page{display:grid; gap:14px}
.p-surface{background: rgba(255,255,255,.55); border:1px solid rgba(15,23,42,.10); border-radius:26px; padding:18px}
.p-surface--tight{padding:16px}
.p-surface--flush{padding:0; overflow:hidden}
.p-surface-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:18px}
.p-surface-body{padding:0 18px 18px}
.p-h1{margin:0; font-size:28px; letter-spacing:-.5px; font-weight:1050}
.p-subtitle{margin-top:6px; color: rgba(15,23,42,.60); font-weight:850}

/* Compact right column (dashboard aside) */
.p-aside .p-surface--tight{padding:12px}
.p-aside-title{font-size:16px; font-weight:850; letter-spacing:-.2px}
.p-subtitle--aside{margin-top:4px; font-size:13px; font-weight:650}
.p-aside .p-quick{gap:8px; margin-top:10px}
.p-aside .p-quick-item{padding:10px; border-radius:16px}
.p-aside .p-quick-title{font-weight:750; font-size:14px; letter-spacing:-.15px}
.p-aside .p-quick-sub{font-size:12px; font-weight:600}
.p-aside .p-chip{padding:6px 10px; font-weight:750}
.p-aside .p-chip--primary{background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.35); color: rgba(15,23,42,.92)}
.p-aside .p-chip--primary:hover{box-shadow: var(--shadow2)}
.p-table{display:grid; margin-top:12px; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.p-tr{display:grid; grid-template-columns:110px 1fr 110px 120px 60px}
.p-tr--invoices{grid-template-columns: 150px 1fr 120px 120px 130px 70px}
.p-tr--compact{grid-template-columns: 1fr 110px 130px 70px}
.p-th{background: rgba(18,19,26,.04); font-weight:950}
.p-tr > div{padding:12px; border-top:1px solid var(--line); font-weight:800; color:rgba(18,19,26,.78)}
.p-th > div{border-top:0}
.p-link{font-weight:950; text-decoration:none}
.p-link:hover{text-decoration:underline}
.p-badge{display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:12px; font-weight:950; background: rgba(255,255,255,.75)}
.p-badge--paid{border-color: rgba(46,229,157,.35); background: rgba(46,229,157,.14)}
.p-badge--open{border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.14)}
.p-badge--canceled,.p-badge--cancelled,.p-badge--expired{border-color: rgba(255,98,98,.35); background: rgba(255,98,98,.12)}
.p-badge--new{border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.14)}
.p-badge--in_progress{border-color: rgba(99,102,241,.35); background: rgba(99,102,241,.12)}
.p-badge--done{border-color: rgba(46,229,157,.35); background: rgba(46,229,157,.14)}
.p-badge--closed{border-color: rgba(148,163,184,.45); background: rgba(148,163,184,.12)}
.p-row{display:flex; gap:12px}
.p-row--between{justify-content:space-between; flex-wrap:wrap}
.p-right{text-align:right}
.p-price{font-weight:950; font-size:18px; margin-top:6px}
.p-pay{margin-top:16px; display:grid; gap:10px}
.p-note{border:1px solid rgba(18,19,26,.12); background: rgba(255,255,255,.62); padding:12px 14px; border-radius:16px; margin-top:12px; font-weight:850}
.p-fine{font-size:12px; color: var(--muted); font-weight:750}
.p-kv{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.p-k{font-size:12px; color: var(--muted); font-weight:950; letter-spacing:.2px}
.p-v{font-weight:950}
.p-pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.p-actions{display:flex; gap:10px; flex-wrap:wrap}
.p-footer{border-top:1px solid var(--line); background: rgba(255,255,255,.55); padding:18px 0}
.p-footer-inner{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}
@media (max-width:980px){.p-grid{grid-template-columns:1fr}.p-grid--dash{grid-template-columns:1fr}.p-form--grid{grid-template-columns:1fr}}
@media (max-width:980px){
  .l-app{grid-template-columns: 1fr}
  .l-sidebar{position:fixed; left:0; top:0; width:280px; transform: translateX(-110%); transition: transform .2s ease; box-shadow: 0 28px 65px rgba(2,6,23,.35); z-index:50}
  .l-app.is-sidebar-open .l-sidebar{transform: translateX(0)}
  .l-burger{display:inline-flex}
}
@media (max-width:680px){.p-tr{grid-template-columns:1fr}.p-th{display:none}}

@media (max-width:780px){
  .p-item{grid-template-columns: 1fr; gap:10px}
  .p-item-left{border-right:0; padding-right:0; border-bottom:1px solid rgba(15,23,42,.10); padding-bottom:10px}
  .p-item-right{justify-content:flex-start; min-width:0}
  .p-item-right--stack{align-items:flex-start; min-width:0}
  .p-item-right--stack .p-actions{justify-content:flex-start}
}

/* extra status badges */
.p-badge--draft{border-color: rgba(148,163,184,.45); background: rgba(148,163,184,.12)}
.p-badge--sent{border-color: rgba(255,176,32,.35); background: rgba(255,176,32,.14)}
.p-badge--overdue{border-color: rgba(255,98,98,.35); background: rgba(255,98,98,.12)}
.p-badge--accepted{border-color: rgba(46,229,157,.35); background: rgba(46,229,157,.14)}
.p-badge--rejected{border-color: rgba(255,98,98,.35); background: rgba(255,98,98,.12)}
.p-badge--converted{border-color: rgba(99,102,241,.35); background: rgba(99,102,241,.12)}


/* status strips */
.p-item--paid::before{background: linear-gradient(180deg, rgba(16,185,129,.95), rgba(16,185,129,.55))}
.p-item--open::before,.p-item--sent::before{background: linear-gradient(180deg, rgba(245,158,11,.95), rgba(245,158,11,.55))}
.p-item--overdue::before{background: linear-gradient(180deg, rgba(239,68,68,.95), rgba(239,68,68,.55))}
.p-item--draft::before{background: linear-gradient(180deg, rgba(148,163,184,.95), rgba(148,163,184,.55))}

.p-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}

/* ------------------------------------------------------------
   Calm dashboard mode
   Goal: less "shouty" bold text and fewer hard accent colors.
   We keep the brand feel, but reduce visual noise.
------------------------------------------------------------- */

/* Softer secondary accent (removes the strong red/purple feel on most gradients) */
:root{ --accent2: #2563eb; }

/* Typography: reduce heavy bold everywhere */
h1, .p-h1{font-weight:850}
h2{font-weight:800}
.l-top-title{font-weight:850}
.l-username{font-weight:850}
.p-item-kicker{font-weight:800}
.p-item-main{font-weight:850}
.p-item-title{font-weight:850}
.p-item-sub,.p-item-desc{font-weight:700}
.p-quick-title{font-weight:850}
.p-quick-sub{font-weight:700}
.p-form label{font-weight:800}
.p-tr > div{font-weight:700}
.p-th{font-weight:850}

/* Buttons & chips: keep primary action clear, but remove gradients */
.p-btn--primary,
.p-chip--primary{
  background: rgba(29,78,216,.12);
  color: var(--accent);
  border-color: rgba(29,78,216,.28);
}
.p-btn--primary:hover,
.p-chip--primary:hover{box-shadow: 0 14px 28px rgba(29,78,216,.12)}

/* Keep "success" subtle too */
.p-chip--success{
  background: rgba(16,185,129,.12);
  color: rgba(5,150,105,1);
  border-color: rgba(16,185,129,.28);
}
.p-chip--success:hover{box-shadow: 0 14px 28px rgba(16,185,129,.12)}

/* Status badges: softer fills and borders */
.p-badge{font-weight:800; background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.12)}
.p-badge--paid{background: rgba(46,229,157,.10); border-color: rgba(46,229,157,.22)}
.p-badge--open,.p-badge--new,.p-badge--sent{background: rgba(255,176,32,.10); border-color: rgba(255,176,32,.22)}
.p-badge--in_progress{background: rgba(99,102,241,.09); border-color: rgba(99,102,241,.20)}
.p-badge--done{background: rgba(46,229,157,.10); border-color: rgba(46,229,157,.22)}
.p-badge--canceled,.p-badge--cancelled,.p-badge--expired,.p-badge--overdue{background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.18)}
.p-badge--closed,.p-badge--draft{background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.22)}

/* List cards: tone down the colored strip */
.p-item::before{
  background: rgba(29,78,216,.55);
  opacity: .45;
}
.p-item--paid::before{background: rgba(16,185,129,.70)}
.p-item--open::before,.p-item--sent::before{background: rgba(245,158,11,.70)}
.p-item--overdue::before{background: rgba(239,68,68,.70)}
.p-item--draft::before{background: rgba(148,163,184,.70)}

/* Quick boxes: less contrast */
.p-quick-item{background: rgba(255,255,255,.78)}
.p-meta .p-pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(15,23,42,.10); background: rgba(15,23,42,.03); font-weight:900; font-size:12px; color: rgba(15,23,42,.70)}
.p-pill .i{width:14px;height:14px;fill:currentColor;opacity:.85}

.p-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px}
.p-stat{background: rgba(255,255,255,.92); border:1px solid rgba(15,23,42,.10); border-radius:24px; padding:16px; box-shadow: var(--shadow2)}
.p-stat-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.p-stat-title{font-weight:950; color: rgba(15,23,42,.70); font-size:12px; letter-spacing:.2px; text-transform:uppercase}
.p-stat-icon{width:40px;height:40px;border-radius:16px; display:flex; align-items:center; justify-content:center; background: rgba(29,78,216,.10); border:1px solid rgba(29,78,216,.18)}
.p-stat-icon .i{width:18px;height:18px; fill: rgba(29,78,216,.95)}
.p-stat-value{margin-top:10px; font-size:22px; font-weight:1050; letter-spacing:-.4px}
.p-stat-sub{margin-top:6px; font-weight:850; color: rgba(15,23,42,.60); font-size:13px}
@media (max-width:1100px){.p-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.p-stats{grid-template-columns:1fr}}

.p-hero{background: linear-gradient(135deg, rgba(29,78,216,.10), rgba(239,68,68,.06)); border:1px solid rgba(15,23,42,.10); border-radius:28px; padding:18px; box-shadow: var(--shadow2)}
.p-hero-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap}
.p-hero h1{margin:0; font-size:30px; letter-spacing:-.6px}

.p-chip .i{width:16px;height:16px;fill:currentColor;opacity:.9}

/* Embedded admin inside dashboard */
.admin-embed-frame{width:100%;height:calc(100vh - 240px);min-height:720px;border:0;display:block;background:transparent}
@media (max-width:900px){.admin-embed-frame{height:calc(100vh - 200px)}}

/* When admin pages are loaded inside iframe (?embed=1), hide the admin topbar so it feels native */
body.is-embed .p-top{display:none}
body.is-embed .p-main{padding-top:0}
body.is-embed .p-container{padding:0;max-width:100%}