/* ==========================================================================
   MUKESH.OS — assets/css/portfolio-demo.css
   Shared stylesheet for the application demonstration pages under /apps.
   Uses the same tokens, type scale and spacing as the portfolio site, so an
   application page and the portfolio read as one product.
   ========================================================================== */

:root{
  --bg:          #06080d;
  --surface:     #0c121c;
  --surface-2:   #101827;
  --surface-3:   #141d2e;
  --line:        rgba(176,196,232,.14);
  --line-strong: rgba(176,196,232,.26);

  --text:        #eef2f8;
  --text-2:      #c3ccdb;
  --muted:       #94a1b5;
  --faint:       #6d7a8d;

  --violet:      #a78bfa;
  --violet-deep: #7c4ff0;
  --blue:        #5eb3ff;
  --blue-deep:   #2f7fe0;
  --green:       #34d399;
  --amber:       #fbbf24;
  --red:         #fb7185;

  --fs-xs:  .8125rem;
  --fs-sm:  .875rem;
  --fs-md:  .9375rem;
  --fs-lg:  1.0625rem;
  --fs-xl:  1.1875rem;
  --fs-2xl: 1.5rem;

  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4.5rem;

  --radius:12px; --radius-lg:18px;
  --maxw:1180px;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:1.7;
  color:var(--text-2);
  background:
    radial-gradient(1000px 560px at 82% -10%, rgba(124,79,240,.15), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ color:var(--text); margin:0; line-height:1.18; font-weight:700; letter-spacing:-.02em }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:6px }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:var(--s-5) var(--s-5) var(--s-8) }

/* ------------------------------------------------------------------ top -- */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); flex-wrap:wrap;
  padding-bottom:var(--s-5); margin-bottom:var(--s-6);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:var(--s-3) }
.brand .logo{
  width:38px; height:38px; flex:none; border-radius:12px;
  display:grid; place-items:center; font-weight:800; font-size:var(--fs-sm); color:#fff;
  background:linear-gradient(135deg,var(--violet-deep),var(--blue-deep));
}
.brand b{ font-size:var(--fs-sm); color:var(--text); display:block }
.ey{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--violet);
}
.brand .ey{ color:var(--faint); font-weight:600; letter-spacing:.12em }
.actions{ display:flex; gap:var(--s-2); flex-wrap:wrap }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--line-strong); border-radius:10px;
  background:var(--surface-2); color:var(--text);
  font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.btn:hover{ background:var(--surface-3); border-color:rgba(176,196,232,.4) }
.btn.primary{
  background:linear-gradient(135deg,var(--violet-deep),var(--blue-deep));
  border-color:transparent; color:#fff;
}
.btn.primary:hover{ filter:brightness(1.1) }

/* ----------------------------------------------------------------- hero -- */
.hero{ margin-bottom:var(--s-6) }
.hero h1{ font-size:clamp(1.9rem,4vw,2.85rem); margin:var(--s-3) 0 }
.hero .lede{ font-size:var(--fs-lg); color:var(--muted); max-width:62ch }
.note-pill{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-top:var(--s-4); padding:6px 13px;
  border:1px solid rgba(251,191,36,.26); background:rgba(251,191,36,.07);
  border-radius:999px; font-size:var(--fs-xs); font-weight:600; color:#e8c88a;
}

/* ---------------------------------------------------------------- brief -- */
.brief{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4); margin-bottom:var(--s-5) }
.brief-item{
  border:1px solid var(--line); border-left:3px solid var(--violet-deep);
  border-radius:var(--radius); padding:var(--s-5); background:var(--surface);
}
.brief-item h2{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet); margin-bottom:var(--s-3);
}
.brief-item p{ color:var(--text-2); font-size:var(--fs-sm) }

/* ----------------------------------------------------------------- kpis -- */
.kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-4); margin-bottom:var(--s-5) }
.kpi{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s-5); background:linear-gradient(160deg,var(--surface-2),var(--surface));
}
.kpi small{ display:block; font-size:var(--fs-xs); color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em }
.kpi b{ display:block; font-size:1.85rem; font-weight:800; color:var(--text);
  letter-spacing:-.03em; line-height:1.15; margin:var(--s-2) 0 }
.kpi span{ display:block; font-size:var(--fs-xs); color:var(--faint); line-height:1.5 }
.kpi .up{ color:var(--green) } .kpi .down{ color:var(--red) } .kpi .flat{ color:var(--amber) }

/* ---------------------------------------------------------------- cards -- */
.card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  padding:var(--s-5); margin-bottom:var(--s-5);
}
.card > h2{ font-size:var(--fs-xl); margin-bottom:var(--s-2) }
.card > .sub{ color:var(--muted); font-size:var(--fs-sm); margin-bottom:var(--s-5) }
.split{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--s-5) }

/* ---------------------------------------------------------------- chart -- */
.chart-head{ margin-bottom:var(--s-5) }
.chart-head h2{ font-size:var(--fs-xl); margin-bottom:var(--s-2) }
.chart-head p{ color:var(--muted); font-size:var(--fs-sm) }

.plot{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:0 var(--s-3); font-size:var(--fs-xs); color:var(--faint);
}
.y-axis{ display:flex; flex-direction:column; justify-content:space-between;
  height:230px; text-align:right; white-space:nowrap; padding-bottom:2px }
.plot-area{ position:relative; height:230px; border-bottom:1px solid var(--line-strong) }
.gridlines{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between }
.gridlines i{ display:block; height:1px; background:var(--line) }
.bars{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:2.2% }
.bar-col{ flex:1; display:flex; align-items:flex-end; gap:3px; height:100% }
.bar-col i{
  flex:1; display:block; height:var(--h); border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,var(--violet),var(--blue-deep));
}
.bar-col i.s2{ background:linear-gradient(180deg,rgba(94,179,255,.85),rgba(47,127,224,.35)) }
.x-axis{ grid-column:2; display:flex; gap:2.2%; margin-top:var(--s-2) }
.x-axis span{ flex:1; text-align:center }

.legend{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-4);
  font-size:var(--fs-xs); color:var(--muted) }
.legend span{ display:inline-flex; align-items:center; gap:var(--s-2) }
.legend i{ width:11px; height:11px; border-radius:3px; display:block }
.sw-1{ background:linear-gradient(180deg,var(--violet),var(--blue-deep)) }
.sw-2{ background:linear-gradient(180deg,rgba(94,179,255,.85),rgba(47,127,224,.35)) }

/* funnel */
.funnel{ display:grid; gap:var(--s-3) }
.funnel-row{ display:grid; grid-template-columns:150px minmax(0,1fr) 92px; gap:var(--s-4); align-items:center }
.funnel-row > span:first-child{ font-size:var(--fs-sm); color:var(--text-2); font-weight:500 }
.funnel-bar{ height:30px; border-radius:7px; background:var(--surface-3); overflow:hidden }
.funnel-bar i{ display:block; height:100%; width:var(--w); border-radius:7px;
  background:linear-gradient(90deg,var(--violet),var(--blue-deep)) }
.funnel-row > span:last-child{ font-size:var(--fs-sm); color:var(--muted); text-align:right;
  font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------- table -- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius) }
table{ width:100%; border-collapse:collapse; min-width:520px }
th,td{ padding:var(--s-3) var(--s-4); text-align:left; font-size:var(--fs-sm);
  border-bottom:1px solid var(--line) }
th{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700; background:rgba(255,255,255,.02) }
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover{ background:rgba(139,92,246,.05) }
td.num{ font-variant-numeric:tabular-nums; text-align:right }
th.num{ text-align:right }
td strong{ color:var(--text); font-weight:600 }

.status{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs);
  font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid }
.st-good{ color:#8fe3c0; border-color:rgba(52,211,153,.3);  background:rgba(52,211,153,.09) }
.st-warn{ color:#f2cd86; border-color:rgba(251,191,36,.3);  background:rgba(251,191,36,.09) }
.st-bad { color:#fda4b0; border-color:rgba(251,113,133,.3); background:rgba(251,113,133,.09) }
.st-neut{ color:var(--muted); border-color:var(--line); background:rgba(255,255,255,.03) }

/* ----------------------------------------------------------------- flow -- */
.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) }
.flow .step{
  border:1px solid var(--line); border-radius:10px; padding:var(--s-3) var(--s-4);
  background:var(--surface-3); font-size:var(--fs-sm); font-weight:600; color:var(--text);
}
.flow .arw{ color:var(--violet); font-weight:700 }

/* ----------------------------------------------------------------- built -- */
.built{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4) }
.built-item{ border-left:2px solid var(--line-strong); padding-left:var(--s-4) }
.built-item h3{ font-size:var(--fs-sm); color:var(--violet); margin-bottom:var(--s-1);
  text-transform:uppercase; letter-spacing:.1em; font-weight:700 }
.built-item p{ font-size:var(--fs-sm); color:var(--muted) }

/* ---------------------------------------------------------------- notes -- */
.pill-row{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4) }
.pill{ font-size:var(--fs-xs); color:var(--text-2); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; background:var(--surface-2) }
.foot{ margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--faint); display:flex; flex-wrap:wrap;
  gap:var(--s-4); justify-content:space-between }

/* ----------------------------------------------------------- responsive -- */
@media (max-width:900px){
  .kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .brief{ grid-template-columns:1fr }
  .split{ grid-template-columns:1fr }
  .built{ grid-template-columns:1fr }
}
@media (max-width:620px){
  .wrap{ padding:var(--s-4) var(--s-4) var(--s-7) }
  .kpis{ grid-template-columns:1fr }
  .top{ align-items:flex-start }
  .funnel-row{ grid-template-columns:1fr; gap:var(--s-1) }
  .funnel-row > span:last-child{ text-align:left }
  .y-axis,.plot-area{ height:190px }
}

@media print{
  body{ background:#fff; color:#222 }
  .actions,.btn{ display:none!important }
  h1,h2,h3{ color:#000 }
  .card,.kpi,.brief-item,.table-wrap{ border:1px solid #ccc; background:none; break-inside:avoid }
}