:root{
  --bg:#0C0F1A;
  --panel:#0F1424;
  --panel2:#0B1020;
  --text:#E0E3EB;
  --muted:#9AA3B2;
  --line:rgba(224,227,235,.10);
  --line2:rgba(224,227,235,.18);
  --cyan:#00B2FF;
  --purple:#9B5CFF;
  --mint:#00FFE1;
  --emerald:#34D399;
  --amber:#EAB308;
  --orange:#FB923C;
  --red:#F87171;
  --radius:18px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --display: "Orbitron", var(--sans);
  --brand: "ROSNOC", var(--display);
}

@font-face{
  font-family: "ROSNOC";
  src: local("ROSNOC");
  font-display: swap;
}

*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none !important}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 18% -10%, rgba(155,92,255,.25), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(0,178,255,.20), transparent 55%),
    radial-gradient(900px 700px at 60% 110%, rgba(0,255,225,.12), transparent 60%),
    linear-gradient(180deg, #070914, var(--bg) 38%, #070914);
  overflow:hidden;
}

.mono{font-family:var(--mono)}
.dotsep{opacity:.6}

.app{
  display:grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr;
  height:100vh;
}

.side{
  border-right:1px solid var(--line);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background: linear-gradient(180deg, rgba(15,20,36,.95), rgba(11,16,32,.95));
  overflow:auto;
  min-height:0;
}

.brand{
  padding:16px;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 110px;
}
.brand:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,178,255,.06), rgba(155,92,255,.06), rgba(0,255,225,.06));
  pointer-events:none;
}
.brand__top{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  position:relative;
  text-align:center;
  width:100%;
}
.brand__logo{
  width:42px;height:42px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,255,225,.85), transparent 42%),
    radial-gradient(circle at 70% 70%, rgba(155,92,255,.85), transparent 48%),
    radial-gradient(circle at 50% 55%, rgba(0,178,255,.85), transparent 50%);
  outline:1px solid rgba(224,227,235,.12);
  box-shadow: 0 0 18px rgba(0,178,255,.25), 0 0 18px rgba(155,92,255,.18);
}
.brand__name{
  font-family: var(--brand);
  font-weight: 700;
  letter-spacing:.14em;
  font-size: 30px;
  line-height: 1.05;
}
.brand__sub{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-top:6px;
}
.brand__meta{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; position:relative;}

.nav{display:flex; flex-direction:column; gap:8px}
.nav__item{
  display:flex; gap:10px; align-items:center;
  padding:12px 12px;
  border-radius:16px;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
  background:rgba(255,255,255,.02);
}
.nav__item:hover{border-color:rgba(224,227,235,.14); background:rgba(255,255,255,.03)}
.nav__item[aria-current="page"]{
  border-color:rgba(0,178,255,.35);
  background: linear-gradient(90deg, rgba(0,178,255,.10), rgba(155,92,255,.08));
  box-shadow: 0 0 22px rgba(0,178,255,.12);
}
.nav__icon{width:22px; text-align:center; opacity:.9}
.nav__icon svg{
  width:18px;
  height:18px;
  display:block;
}
.nav__label{font-weight:500}

.side__footer{margin-top:auto; opacity:.9}
.hint{border:1px solid rgba(224,227,235,.10); border-radius:var(--radius); padding:12px; background:rgba(0,0,0,.18)}
.hint__title{font-size:12px; color:var(--muted); margin-bottom:8px}
.hint__list{display:grid; gap:6px; font-size:13px}
.kbd{
  font-family:var(--mono);
  font-size:12px;
  padding:2px 6px;
  border-radius:10px;
  border:1px solid rgba(224,227,235,.18);
  background:rgba(255,255,255,.03);
}

.main{
  padding:18px 18px 24px 18px;
  overflow:auto;
  min-height:0;
}

/* Ultra-thin blue scrollbar on black (Menu + Page) */
.side, .main{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,178,255,.55) #000;
}
.side::-webkit-scrollbar,
.main::-webkit-scrollbar{
  width:4px;
  height:4px;
}
.side::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track{
  background:#000;
}
.side::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb{
  background: rgba(0,178,255,.55);
  border-radius: 999px;
}
.side::-webkit-scrollbar-thumb:hover,
.main::-webkit-scrollbar-thumb:hover{
  background: rgba(0,178,255,.80);
}
.top{display:flex; gap:16px; align-items:flex-start; justify-content:space-between}
.top__title{font-size:22px; font-weight:600; letter-spacing:.01em}
.top__subtitle{display:none}
.top__right{min-width:420px; width:520px}

.heroTitle{
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1.05;
  color: rgba(224,227,235,.95);
  text-shadow:
    0 0 18px rgba(0,178,255,.18),
    0 0 22px rgba(155,92,255,.12);
}
.heroSector{
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .30em;
  text-transform: uppercase;
  margin-top: 8px;
  color: rgba(0,178,255,.95);
  text-shadow: 0 0 18px rgba(0,178,255,.20);
}

@media (max-width: 980px){
  .heroTitle{font-size: 34px}
  .heroSector{font-size: 18px}
}

.project{
  padding:14px;
  border-radius:var(--radius);
  background:rgba(0,0,0,.16);
}
.project__label{font-size:12px; color:var(--muted); margin-bottom:8px}
.project__row{display:flex; gap:10px; align-items:center}
.project__meta{display:flex; gap:8px; align-items:center; margin-top:10px; color:var(--muted); font-size:12px}

.select{
  width: 1fr;
  flex:1;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(15,20,36,.70);
  color:var(--text);
  outline:none;
}
.select:focus{border-color:rgba(0,178,255,.45); box-shadow:0 0 0 4px rgba(0,178,255,.10)}

.btn{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  font-weight:500;
}
.btn:hover{border-color:rgba(224,227,235,.22); background:rgba(255,255,255,.05)}
.btn--primary{
  border-color:rgba(0,178,255,.45);
  background: linear-gradient(90deg, rgba(0,178,255,.16), rgba(155,92,255,.14));
  box-shadow:0 0 18px rgba(0,178,255,.10);
}
.btn--primary:hover{box-shadow:0 0 24px rgba(0,178,255,.14)}
.btn--ghost{background:transparent}
.btn--danger{border-color:rgba(248,113,113,.55); background:rgba(248,113,113,.08)}
.btn--small{padding:8px 10px; border-radius:14px; font-size:13px}

.view{margin-top:16px}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.card{
  grid-column: span 12;
  border-radius:var(--radius);
  border:1px solid rgba(224,227,235,.10);
  background: linear-gradient(180deg, rgba(15,20,36,.66), rgba(11,16,32,.66));
  padding:14px;
  position:relative;
  overflow:hidden;
}
.card{padding:16px}
.card--cyan{
  border-color: rgba(0,178,255,.40);
  background: linear-gradient(180deg, rgba(0,178,255,.06), rgba(15,20,36,.66));
  box-shadow: 0 0 22px rgba(0,178,255,.12);
}
.card--purple{
  border-color: rgba(155,92,255,.40);
  background: linear-gradient(180deg, rgba(155,92,255,.06), rgba(15,20,36,.66));
  box-shadow: 0 0 22px rgba(155,92,255,.10);
}
.card--green{
  border-color: rgba(52,211,153,.35);
  background: linear-gradient(180deg, rgba(52,211,153,.06), rgba(15,20,36,.66));
  box-shadow: 0 0 22px rgba(52,211,153,.08);
}
.card--orange{
  border-color: rgba(251,146,60,.40);
  background: linear-gradient(180deg, rgba(251,146,60,.08), rgba(46,29,21,.70));
  box-shadow: 0 0 22px rgba(251,146,60,.10);
}
.text-glow-cyan{ text-shadow: 0 0 12px rgba(0,178,255,.35); }
.text-glow-purple{ text-shadow: 0 0 14px rgba(155,92,255,.30); }
.text-glow-green{ text-shadow: 0 0 14px rgba(52,211,153,.25); }
.text-glow-orange{ text-shadow: 0 0 14px rgba(251,146,60,.25); }
.badge{
  width:38px;height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(224,227,235,.14);
  background: rgba(255,255,255,.03);
}
.badge--cyan{ background: rgba(0,178,255,.10); border-color: rgba(0,178,255,.25); color: rgba(0,178,255,.95); box-shadow: 0 0 18px rgba(0,178,255,.12); }
.badge--purple{ background: rgba(155,92,255,.10); border-color: rgba(155,92,255,.25); color: rgba(155,92,255,.95); box-shadow: 0 0 18px rgba(155,92,255,.10); }
.badge--green{ background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.22); color: rgba(52,211,153,.95); box-shadow: 0 0 18px rgba(52,211,153,.08); }
.badge--orange{ background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.25); color: rgba(251,146,60,.95); box-shadow: 0 0 18px rgba(251,146,60,.10); }

.chartWrap{
  height: 340px;
  border-radius: var(--radius);
  border: 1px solid rgba(224,227,235,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.14));
  overflow:hidden;
  position:relative;
}
.chartHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.chipRow{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid rgba(224,227,235,.14);
  background: rgba(255,255,255,.02);
  color: rgba(224,227,235,.92);
  cursor:pointer;
}
.chip:hover{border-color: rgba(224,227,235,.22); background: rgba(255,255,255,.04)}
.chip[aria-pressed="true"]{
  border-color: rgba(0,178,255,.40);
  box-shadow: 0 0 18px rgba(0,178,255,.10);
}
.chip--month[aria-pressed="true"]{border-color: rgba(155,92,255,.40); box-shadow: 0 0 18px rgba(155,92,255,.08)}
.chip--acc[aria-pressed="true"]{border-color: rgba(0,178,255,.45); box-shadow: 0 0 18px rgba(0,178,255,.10)}
.chip--rt[aria-pressed="true"]{border-color: rgba(16,185,129,.35); box-shadow: 0 0 18px rgba(16,185,129,.08)}
.card--premium{padding:16px}
.card--premium:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity:.10;
  mix-blend-mode:screen;
  pointer-events:none;
}
.card__title{font-weight:600; letter-spacing:.01em}
.card__sub{color:var(--muted); font-size:13px; margin-top:4px}

.neon-border{
  border: 1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(0,178,255,.75), rgba(155,92,255,.70), rgba(0,255,225,.70)) border-box;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:6px 10px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(255,255,255,.02);
  font-size:12px;
}
.pill__dot{
  width:8px;height:8px;border-radius:999px;
  background:rgba(224,227,235,.55);
  box-shadow: 0 0 10px rgba(224,227,235,.25);
}
.pill--success{background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.30)}
.pill--success .pill__dot{background:rgba(52,211,153,.95); box-shadow:0 0 12px rgba(52,211,153,.25)}
.pill--critical{background:rgba(248,113,113,.10); border-color:rgba(248,113,113,.30)}
.pill--critical .pill__dot{background:rgba(248,113,113,.95); box-shadow:0 0 12px rgba(248,113,113,.25)}
.pill--tech{background:rgba(0,255,225,.08); border-color:rgba(0,255,225,.24)}
.pill--tech .pill__dot{background:rgba(0,255,225,.95); box-shadow:0 0 12px rgba(0,255,225,.20)}
.pill--ia{background:rgba(155,92,255,.10); border-color:rgba(155,92,255,.26)}
.pill--ia .pill__dot{background:rgba(155,92,255,.95); box-shadow:0 0 12px rgba(155,92,255,.20)}

.metric{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:10px}
.metric__label{color:var(--muted); font-size:12px}
.metric__value{font-family:var(--mono); font-weight:600; letter-spacing:.02em}
.metric__delta{font-size:12px; color:var(--muted)}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.split{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}

.bar{
  height:10px;
  border-radius:999px;
  background:rgba(224,227,235,.08);
  border:1px solid rgba(224,227,235,.10);
  overflow:hidden;
}
.bar__fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(0,178,255,.85), rgba(155,92,255,.80), rgba(0,255,225,.80));
  box-shadow: 0 0 18px rgba(0,178,255,.18);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:12px;
  font-size:13px;
}
.table th,.table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(224,227,235,.10);
  vertical-align:top;
}
.table td{color: rgba(224,227,235,.92)}
.table th{letter-spacing:.06em; text-transform:uppercase}
.table th{
  text-align:left;
  color:var(--muted);
  font-weight:500;
  font-size:12px;
}
.table tr:hover td{background:rgba(255,255,255,.02)}

.field{display:grid; gap:6px}
.field label{font-size:12px; color:var(--muted)}
.input{
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(15,20,36,.70);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(155,92,255,.45); box-shadow:0 0 0 4px rgba(155,92,255,.10)}
.help{color:var(--muted); font-size:12px; line-height:1.35}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.drawer{
  position:fixed;
  top:12px;
  right:12px;
  width:min(520px, calc(100vw - 24px));
  height:calc(100vh - 24px);
  border-radius:var(--radius);
  border:1px solid rgba(224,227,235,.10);
  background: linear-gradient(180deg, rgba(15,20,36,.92), rgba(11,16,32,.92));
  transform: translateX(120%);
  transition: transform .22s ease;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.drawer[aria-hidden="false"]{transform: translateX(0)}
.drawer__head{
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.drawer__title{font-weight:600}
.drawer__sub{color:var(--muted); font-size:13px; margin-top:4px}
.drawer__body{padding:14px; overflow:auto}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal__card{
  width:min(860px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(15,20,36,.95), rgba(11,16,32,.95));
  overflow:hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
.modal__head{padding:14px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.modal__title{font-weight:600}
.modal__sub{color:var(--muted); font-size:13px; margin-top:4px}
.modal__body{padding:14px; overflow:auto}
.modal__foot{padding:14px; border-top:1px solid rgba(224,227,235,.10); display:flex; justify-content:flex-end; gap:10px}

.tag{
  font-family:var(--mono);
  font-size:12px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(255,255,255,.02);
  padding:4px 8px;
  border-radius:999px;
  color:var(--muted);
}

.gantt{
  border:1px solid rgba(224,227,235,.10);
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(0,0,0,.14);
}
.gantt__head{
  display:grid;
  grid-template-columns: 280px 1fr;
  border-bottom:1px solid rgba(224,227,235,.10);
}
.gantt__head .gantt__label{
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
}
.gantt__months{
  display:grid;
  grid-template-columns: repeat(18, 1fr);
  gap:0;
}
.gantt__month{
  padding:10px 0;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  border-left:1px solid rgba(224,227,235,.06);
}
.gantt__body{display:grid; gap:0}
.gantt__row{
  display:grid;
  grid-template-columns: 280px 1fr;
  border-bottom:1px solid rgba(224,227,235,.06);
}
.gantt__row:last-child{border-bottom:none}
.gantt__stage{
  padding:12px;
}
.gantt__stageName{font-weight:600}
.gantt__stageMeta{margin-top:4px; font-size:12px; color:var(--muted)}
.gantt__track{
  position:relative;
  padding:12px 10px;
}
.gantt__bars{
  position:relative;
  display:grid;
  grid-template-columns: repeat(18, 1fr);
  align-items:center;
  height:44px;
  gap:0;
}
.gantt__barWrap{position:relative}
.gantt__grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(18, 1fr);
  pointer-events:none;
}
.gantt__grid > div{
  border-left:1px solid rgba(224,227,235,.06);
}
.gantt__bar{
  position:relative;
  height:28px;
  border-radius:14px;
  border:1px solid rgba(0,178,255,.25);
  background: linear-gradient(90deg, rgba(0,178,255,.16), rgba(155,92,255,.14));
  box-shadow: 0 0 16px rgba(0,178,255,.10);
  overflow:hidden;
}
.gantt__barFill{
  height:100%;
  background: linear-gradient(90deg, rgba(0,178,255,.65), rgba(155,92,255,.55), rgba(0,255,225,.55));
  width:0%;
}
.gantt__barText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  font-size:12px;
  color:rgba(224,227,235,.92);
}
.marker{
  position:absolute;
  top:8px;
  width:2px;
  height:44px;
  background:rgba(248,113,113,.85);
  box-shadow: 0 0 14px rgba(248,113,113,.22);
}
.marker--soon{background:rgba(0,255,225,.85); box-shadow: 0 0 14px rgba(0,255,225,.18);}
.marker__tag{
  position:absolute;
  top:-18px;
  left:-24px;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:10px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(0,0,0,.35);
  color:rgba(224,227,235,.85);
}

.ganttMarker{
  position:relative;
  width:2px;
  height:44px;
  justify-self:center;
  background:rgba(248,113,113,.85);
  box-shadow: 0 0 14px rgba(248,113,113,.22);
}
.ganttMarker--soon{background:rgba(0,255,225,.85); box-shadow: 0 0 14px rgba(0,255,225,.18);}
.ganttMarker__tag{
  position:absolute;
  top:-18px;
  left:-24px;
  white-space:nowrap;
  font-family:var(--mono);
  font-size:10px;
  padding:3px 7px;
  border-radius:999px;
  border:1px solid rgba(224,227,235,.14);
  background:rgba(0,0,0,.35);
  color:rgba(224,227,235,.85);
}

@keyframes shine {
  0%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}
.shine-loop{
  position:relative;
  overflow:hidden;
}
.shine-loop:before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  transform:rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(224,227,235,.10), transparent);
  animation: shine 4.8s linear infinite;
  pointer-events:none;
}

@media (max-width: 980px){
  body{overflow:auto}
  .app{grid-template-columns: 1fr}
  .side{position:sticky; top:0; z-index:2}
  .top{flex-direction:column}
  .top__right{width:100%; min-width:auto}
}