:root{
  --bg:#07111f;
  --bg-deep:#040a13;
  --surface:#0d2139;
  --surface-2:#102a47;
  --surface-3:#143456;
  --surface-soft:rgba(14,38,65,.82);
  --border:rgba(255,255,255,.085);
  --border-strong:rgba(117,190,255,.18);
  --text:#f5f9ff;
  --muted:#9db3cc;
  --muted-2:#718ba7;
  --blue:#2f80ed;
  --blue-2:#64c6ff;
  --cyan:#22d3c7;
  --green:#25ca82;
  --amber:#f4b13b;
  --red:#ff6278;
  --purple:#9a77ff;
  --shadow:0 22px 65px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-soft:0 11px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
  --radius:22px;
  --radius-sm:15px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#4daaff rgba(255,255,255,.045)}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(1150px 580px at 82% -10%,rgba(47,128,237,.19),transparent 60%),
    radial-gradient(760px 460px at 10% 4%,rgba(34,211,199,.08),transparent 58%),
    linear-gradient(180deg,#040a14,#071426 40%,#06101e);
}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.035);border-radius:999px}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2f80ed,#62c5ff 55%,#22d3c7);
  border:2px solid #07111f;border-radius:999px
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5caaff,#83d4ff 55%,#3fe5d8)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;overflow:auto;
  background:linear-gradient(180deg,rgba(4,12,25,.98),rgba(6,17,31,.98));
  border-right:1px solid var(--border)
}
.brand{padding:27px 22px 22px;border-bottom:1px solid var(--border)}
.brand-name{font-size:17px;font-weight:850;letter-spacing:.04em}
.brand-line{width:52px;height:3px;border-radius:999px;margin:11px 0 9px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.brand p{margin:0;color:var(--muted-2);font-size:11px;line-height:1.5}
.navgroup{padding:17px 14px 6px}
.navtitle{padding:0 11px 9px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#627e9d}
.navlink{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin:4px 0;border-radius:14px;color:#c7d6e7;
  transition:transform .2s,background .2s,color .2s,box-shadow .2s
}
.navlink:before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  transform:translateX(-120%);transition:transform .45s
}
.navlink:hover:before{transform:translateX(120%)}
.navlink:hover{background:rgba(255,255,255,.04);color:#fff;transform:translateX(3px)}
.navlink.active{
  color:#fff;background:linear-gradient(135deg,rgba(47,128,237,.25),rgba(34,211,199,.075));
  box-shadow:0 0 0 1px rgba(95,176,255,.13),0 17px 38px rgba(20,73,145,.25)
}
.navico{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.035);font-size:13px
}
.sidebar-foot{padding:20px 14px}
.userbox{
  display:flex;align-items:center;gap:11px;padding:13px;border-radius:17px;
  border:1px solid var(--border);background:linear-gradient(180deg,#102a46,#0b1e34);box-shadow:var(--shadow-soft)
}
.avatar{
  width:41px;height:41px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#22d3c7);font-weight:800
}
.main{min-width:0}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 23px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(7,17,31,.9),rgba(7,17,31,.67));backdrop-filter:blur(18px) saturate(135%)
}
.page-title h1{font-size:27px;letter-spacing:-.035em;margin:0}
.page-title p{font-size:12px;color:var(--muted-2);margin:4px 0 0}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn,.control{
  min-height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--border);
  color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.028));
  display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:var(--shadow-soft)
}
.btn:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.btn.success{background:linear-gradient(135deg,#0e9d69,#25ca82)}
.btn.warning{background:linear-gradient(135deg,#e79410,#f4b13b)}
.btn.danger{background:linear-gradient(135deg,#d84259,#ff6278)}
.content{padding:22px 22px 44px}
.hero{
  position:relative;overflow:hidden;padding:22px 24px;border-radius:27px;border:1px solid var(--border);
  background:
    radial-gradient(520px 190px at 100% 0%,rgba(100,198,255,.22),transparent 64%),
    radial-gradient(440px 200px at 0% 0%,rgba(37,202,130,.075),transparent 64%),
    linear-gradient(135deg,#0e2948,#091d34);
  box-shadow:var(--shadow);margin-bottom:15px
}
.hero:after{
  content:"";position:absolute;right:-110px;bottom:-160px;width:390px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,128,237,.28),transparent 70%);pointer-events:none
}
.hero h2{margin:0;font-size:26px;letter-spacing:-.035em}
.hero p{margin:7px 0 0;max-width:1080px;color:#a9bed4;font-size:13px;line-height:1.62}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.grid{display:grid;gap:14px}
.kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:14px;align-items:stretch}
.kpi{
  position:relative;overflow:hidden;padding:15px;border-radius:19px;border:1px solid var(--border);
  background:
    radial-gradient(180px 70px at 100% 0%,rgba(47,128,237,.105),transparent 72%),
    linear-gradient(180deg,#102740,#0c2037);
  box-shadow:var(--shadow-soft);transition:transform .22s,border-color .22s,box-shadow .22s
}
.kpi:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:0 0 0 1px rgba(94,184,255,.1),0 23px 54px rgba(13,63,133,.24)}
.kpi .icon{
  width:41px;height:41px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2f80ed,#64c6ff);box-shadow:0 10px 20px rgba(47,128,237,.27)
}
.kpi:nth-child(2) .icon{background:linear-gradient(135deg,#0ea5b7,#48d6f0)}
.kpi:nth-child(3) .icon{background:linear-gradient(135deg,#16a35b,#34d399)}
.kpi:nth-child(4) .icon{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.kpi:nth-child(5) .icon{background:linear-gradient(135deg,#e9920e,#f5b94d)}
.kpi:nth-child(6) .icon{background:linear-gradient(135deg,#dc4058,#ff7186)}
.kpi .label{font-size:12px;margin-top:11px;color:#dce7f4}
.kpi .value{font-size:29px;font-weight:850;letter-spacing:-.045em;margin-top:4px}
.kpi .delta{font-size:10.5px;color:var(--muted-2);margin-top:4px}
.card{
  min-width:0;padding:17px;border-radius:21px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(14,36,62,.97),rgba(9,27,47,.97));box-shadow:var(--shadow)
}
.card.soft{background:linear-gradient(180deg,rgba(16,43,73,.87),rgba(10,29,50,.9));backdrop-filter:blur(10px)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px}
.card h3{font-size:16px;margin:0}
.sub{font-size:10.5px;color:var(--muted-2);margin-top:4px;line-height:1.45}
.pill,.tag{
  display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;border:1px solid var(--border);
  font-size:9.5px;font-weight:750;white-space:nowrap
}
.tag.green{background:rgba(37,202,130,.14);color:#8ff0be}
.tag.orange{background:rgba(244,177,59,.15);color:#ffd28a}
.tag.red{background:rgba(255,98,120,.14);color:#ffa1b0}
.tag.blue{background:rgba(47,128,237,.15);color:#a9ceff}
.tag.gray{background:rgba(255,255,255,.065);color:#c8d5e4}
.two{grid-template-columns:1.28fr .92fr}
.equal-two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
.filterbar{
  display:grid;grid-template-columns:1.2fr repeat(4,minmax(120px,1fr)) auto;gap:9px;
  padding:13px;border-radius:18px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.043),rgba(255,255,255,.024));
  box-shadow:var(--shadow-soft);margin-bottom:14px
}
.filter-field{display:grid;gap:5px}
.filter-field label{font-size:9.5px;color:#9eb5cf}
.filter-field input,.filter-field select{
  width:100%;height:38px;border-radius:11px;border:1px solid var(--border);
  color:#fff;background:rgba(255,255,255,.04);padding:0 10px;outline:none
}
.filter-actions{display:flex;gap:7px;align-items:end}
.active-filters{display:flex;gap:7px;flex-wrap:wrap;margin:-2px 0 14px}
.filter-chip{
  padding:7px 10px;border-radius:999px;border:1px solid var(--border);
  background:rgba(255,255,255,.035);font-size:10px;color:#cad9e9
}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.tabs button{
  padding:9px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.034);color:#cbd9e9
}
.tabs button.active{background:linear-gradient(135deg,rgba(47,128,237,.24),rgba(34,211,199,.075));color:#fff;box-shadow:0 0 0 1px rgba(94,184,255,.09)}
.tab-panel{display:none}.tab-panel.active{display:block}
.table-wrap{overflow:auto;border-radius:15px;border:1px solid rgba(255,255,255,.06)}
table{width:100%;border-collapse:collapse;font-size:11px}
th{position:sticky;top:0;z-index:4;padding:10px;text-align:left;white-space:nowrap;background:#12304f;color:#e7f1fc;border-bottom:1px solid var(--border)}
td{padding:10px;color:#d1deed;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
tbody tr:nth-child(odd){background:rgba(255,255,255,.013)}
tbody tr:hover{background:rgba(47,128,237,.07)}
.section-row td{background:rgba(91,143,216,.15)!important;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.035em}
.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.075);overflow:hidden;min-width:90px}
.progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.progress.green i{background:linear-gradient(90deg,#16a35b,#34d399)}
.progress.orange i{background:linear-gradient(90deg,#e9920e,#f5b94d)}
.progress.red i{background:linear-gradient(90deg,#dc4058,#ff7186)}
.chart{height:295px;border:1px solid var(--border);border-radius:16px;padding:9px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012))}
.chart.tall{height:390px}
canvas{max-width:100%}
.real-map{
  height:430px;border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 17px 42px rgba(0,0,0,.23)
}
.map-fallback{
  height:100%;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 45%,rgba(47,128,237,.14),transparent 55%),linear-gradient(180deg,#081b30,#071421)
}
.leaflet-container{background:#071426!important;font-family:Inter,"Segoe UI",Arial,sans-serif!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0b223b!important;color:#fff!important;border:1px solid var(--border)!important}
.leaflet-control-zoom a{background:#0e2a48!important;color:#fff!important;border-bottom-color:var(--border)!important}
.leaflet-control-attribution{background:rgba(5,13,24,.78)!important;color:#9db3cc!important}
.leaflet-control-attribution a{color:#64c6ff!important}
.alerts,.checklist,.timeline,.value-stack{display:grid;gap:9px}
.alert,.check{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;
  padding:11px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025)
}
.alert .bubble,.check .ico{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.06)
}
.b-red{background:rgba(255,98,120,.16)!important;color:#ffa1b0}
.b-orange{background:rgba(244,177,59,.16)!important;color:#ffd28a}
.b-blue{background:rgba(47,128,237,.16)!important;color:#a9ceff}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.metric{
  padding:12px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(180deg,#102943,#0d223b)
}
.metric strong{display:block;font-size:22px;letter-spacing:-.04em}
.metric span{font-size:10px;color:var(--muted-2)}
.donut{
  width:188px;height:188px;border-radius:50%;margin:8px auto;display:grid;place-items:center;
  background:conic-gradient(var(--blue) 0 35%,var(--green) 35% 60%,var(--amber) 60% 82%,var(--red) 82% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 13px 28px rgba(0,0,0,.24)
}
.donut:after{
  content:attr(data-label);white-space:pre;display:grid;place-items:center;text-align:center;
  width:101px;height:101px;border-radius:50%;background:linear-gradient(180deg,#0d223b,#091a2f);
  border:1px solid var(--border);font-size:18px;font-weight:850
}
.form-section{padding:14px;border-radius:17px;border:1px solid var(--border);background:rgba(255,255,255,.02);margin-bottom:12px}
.form-section h4{font-size:13px;margin:0 0 11px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.field{display:grid;gap:6px}
.field label{font-size:10.5px;color:#d1deec}
.field input,.field select,.field textarea{
  width:100%;padding:10px 11px;border-radius:12px;border:1px solid var(--border);
  background:rgba(255,255,255,.04);color:#fff;outline:none
}
.field textarea{min-height:105px;resize:vertical}
.radio-row{display:flex;gap:9px;flex-wrap:wrap}
.radio-choice{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.035);color:#fff}
.radio-choice.active{background:linear-gradient(135deg,rgba(47,128,237,.23),rgba(34,211,199,.08));box-shadow:0 0 0 1px rgba(94,184,255,.09)}
.kanban{display:grid;grid-template-columns:repeat(7,minmax(205px,1fr));gap:10px;overflow:auto;padding-bottom:8px}
.kan-col{min-height:490px;padding:10px;border-radius:17px;border:1px solid var(--border);background:rgba(255,255,255,.022)}
.kan-head{display:flex;justify-content:space-between;align-items:center;padding:1px 2px 9px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.055);font-size:11px}
.count{min-width:23px;height:23px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.075);font-size:9px}
.ticket{
  position:relative;overflow:hidden;padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(180deg,#132d4c,#10243f);box-shadow:var(--shadow-soft);margin-bottom:9px;
  cursor:grab;transition:transform .2s,box-shadow .2s
}
.ticket:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(100,198,255,.1),0 19px 39px rgba(13,58,120,.25)}
.ticket:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ticket,#2f80ed)}
.ticket h4{font-size:11px;margin:0}
.ticket p{font-size:9.8px;line-height:1.45;color:var(--muted-2);margin:6px 0}
.ticket-tags{display:flex;gap:5px;flex-wrap:wrap;margin:7px 0}
.ticket-foot{display:flex;justify-content:space-between;align-items:center;font-size:8.8px;color:#91a9c4;margin-top:7px}
.ticket-progress{height:5px;border-radius:999px;background:rgba(255,255,255,.075);overflow:hidden}
.ticket-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2))}
.avatars{display:flex}
.avatars span{
  width:21px;height:21px;margin-left:-5px;border-radius:50%;display:grid;place-items:center;
  border:2px solid #0b2037;background:linear-gradient(135deg,#2563eb,#64c6ff);font-size:8px
}
.timeline-item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px}
.timeline-item:not(:last-child):before{content:"";position:absolute;left:14px;top:31px;bottom:-9px;width:2px;background:rgba(255,255,255,.075)}
.timeline-dot{z-index:1;width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#64c6ff);font-size:10px}
.sidepanel{
  position:fixed;right:-480px;top:0;z-index:90;width:480px;max-width:94vw;height:100vh;overflow:auto;
  padding:20px;background:linear-gradient(180deg,#0d2139,#081725);border-left:1px solid var(--border);
  box-shadow:-22px 0 65px rgba(0,0,0,.4);transition:right .25s
}
.sidepanel.open{right:0}
.sidepanel .close{position:absolute;right:14px;top:14px}
.toast{
  position:fixed;right:18px;bottom:18px;z-index:110;transform:translateY(120px);opacity:0;transition:.25s;
  padding:12px 14px;border-radius:13px;background:linear-gradient(135deg,#0e9d69,#25ca82);box-shadow:var(--shadow)
}
.toast.show{transform:translateY(0);opacity:1}
.hub-journey{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.journey-step{
  padding:14px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(180deg,#102943,#0d223b);box-shadow:var(--shadow-soft)
}
.journey-step .num{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#64c6ff);font-weight:800}
.journey-step strong{display:block;margin:10px 0 4px;font-size:12px}
.journey-step span{font-size:9.8px;color:var(--muted-2);line-height:1.45}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.module-card{
  min-height:210px;padding:17px;border:1px solid var(--border);border-radius:20px;
  background:
    radial-gradient(210px 90px at 100% 0%,rgba(47,128,237,.12),transparent 70%),
    linear-gradient(180deg,#102943,#0c2037);box-shadow:var(--shadow);transition:transform .22s,border-color .22s
}
.module-card:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.module-visual{
  height:89px;border-radius:14px;border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(135deg,rgba(47,128,237,.16),rgba(34,211,199,.055));
  margin-bottom:13px;padding:10px;display:flex;gap:6px;align-items:flex-end
}
.module-visual i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--blue-2),var(--blue));opacity:.85}
.module-card h3{font-size:14px;margin:0}
.module-card p{font-size:10.5px;color:var(--muted-2);line-height:1.5;min-height:47px}
.intro-overlay{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 42%,rgba(47,128,237,.24),transparent 62%),
    radial-gradient(620px 390px at 50% 50%,rgba(34,211,199,.075),transparent 65%),
    linear-gradient(180deg,#020611,#061326);
  transition:opacity .72s,visibility .72s
}
.intro-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro-grid{
  position:absolute;inset:-35%;
  background-image:linear-gradient(rgba(100,198,255,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(100,198,255,.065) 1px,transparent 1px);
  background-size:54px 54px;transform:perspective(920px) rotateX(68deg) translateY(24%);animation:gridmove 8s linear infinite
}
@keyframes gridmove{to{background-position:0 108px}}
.intro-orbit{
  position:absolute;width:550px;height:550px;border:1px solid rgba(100,198,255,.15);border-radius:50%;animation:spin 20s linear infinite
}
.intro-orbit:before,.intro-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(34,211,199,.13)}
.intro-orbit:before{inset:72px}.intro-orbit:after{inset:155px}
@keyframes spin{to{transform:rotate(360deg)}}
.data-orb{
  width:126px;height:126px;border-radius:50%;margin:auto;position:relative;
  background:radial-gradient(circle at 35% 30%,#bfe7ff 0 4%,#64c6ff 11%,#2f80ed 40%,#0b2d57 72%);
  box-shadow:0 0 75px rgba(47,128,237,.65),inset -14px -14px 32px rgba(2,10,24,.5);animation:float 3.5s ease-in-out infinite
}
.data-orb:after{content:"";position:absolute;inset:-20px;border:1px solid rgba(100,198,255,.35);border-radius:50%;animation:spin 7s linear infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.intro-card{position:relative;z-index:4;max-width:790px;padding:25px;text-align:center}
.intro-card h2{font-size:54px;line-height:1.03;letter-spacing:-.057em;margin:27px 0 12px}
.intro-card h2 span{background:linear-gradient(90deg,#fff,#8ed7ff 58%,#78f0df);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro-card p{max-width:650px;margin:0 auto 22px;color:#a7bdd5;line-height:1.65}
.intro-progress{width:330px;max-width:75vw;height:6px;margin:auto;border-radius:999px;background:rgba(255,255,255,.075);overflow:hidden}
.intro-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-2),var(--cyan));animation:load 4s ease forwards}
@keyframes load{to{width:100%}}
@media(max-width:1450px){
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .two,.equal-two,.three,.four{grid-template-columns:1fr}
  .filterbar{grid-template-columns:repeat(3,1fr)}
  .module-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar{position:relative;flex-direction:column;align-items:flex-start}
  .content{padding:15px}
  .filterbar{grid-template-columns:1fr 1fr}
  .hub-journey,.metric-grid,.module-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .intro-card h2{font-size:39px}
}
.b-green{background:rgba(37,202,130,.16)!important;color:#8ff0be}

/* =========================================================
   VERSION COMPLÈTE — Baseline, processus, EVM, projet, MO
   ========================================================= */
.hub-journey{grid-template-columns:repeat(6,1fr)}
.phase-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.035);font-size:10px;color:#d4e3f2
}
.process-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}
.process-flow{display:grid;gap:9px}
.process-node{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;
  padding:13px 14px;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(180deg,#102943,#0d223b);box-shadow:var(--shadow-soft)
}
.process-node:not(:last-child):after{
  content:"↓";position:absolute;left:24px;bottom:-19px;z-index:4;color:#64c6ff;font-weight:900
}
.process-node .node-icon{
  width:39px;height:39px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#64c6ff);font-size:16px
}
.process-node.green .node-icon{background:linear-gradient(135deg,#0f9c68,#25ca82)}
.process-node.orange .node-icon{background:linear-gradient(135deg,#e29110,#f4b13b)}
.process-node.purple .node-icon{background:linear-gradient(135deg,#7138df,#9a77ff)}
.process-node.cyan .node-icon{background:linear-gradient(135deg,#0ea5b7,#22d3c7)}
.process-node strong{font-size:12px}.process-node p{margin:3px 0 0;font-size:9.8px;color:var(--muted-2)}
.step-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}
.step-card{
  position:relative;padding:13px;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(180deg,#102943,#0d223b);min-height:130px
}
.step-card .n{
  width:31px;height:31px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2563eb,#64c6ff);font-weight:850
}
.step-card strong{display:block;margin:10px 0 5px;font-size:11px}
.step-card p{margin:0;font-size:9.6px;line-height:1.48;color:var(--muted-2)}
.baseline-flow{
  display:grid;grid-template-columns:1fr auto 1.1fr auto 1fr;gap:12px;align-items:center
}
.baseline-block{
  min-height:210px;padding:16px;border-radius:20px;border:1px solid var(--border);
  background:
    radial-gradient(190px 75px at 100% 0%,rgba(47,128,237,.12),transparent 70%),
    linear-gradient(180deg,#102943,#0d223b);box-shadow:var(--shadow)
}
.baseline-block.center{
  min-height:260px;display:grid;place-items:center;text-align:center;
  background:linear-gradient(145deg,#123457,#0b2440)
}
.baseline-book{
  width:145px;height:180px;border-radius:8px 18px 18px 8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#7eb7ed,#e8f3ff);color:#0d3764;font-weight:900;
  box-shadow:18px 18px 40px rgba(0,0,0,.28),inset -12px 0 22px rgba(12,52,95,.18)
}
.flow-arrow{font-size:30px;color:#64c6ff}
.deliverables{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.deliverable{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;padding:14px;
  border-radius:17px;border:1px solid var(--border);background:linear-gradient(180deg,#102943,#0d223b)
}
.deliverable .ico{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:rgba(47,128,237,.15);font-size:18px}
.deliverable strong{font-size:11px}.deliverable span{font-size:9px;color:var(--muted-2)}
.gantt{display:grid;gap:8px}
.gantt-head,.gantt-row{display:grid;grid-template-columns:200px repeat(12,1fr);gap:4px;align-items:center}
.gantt-head span{font-size:8.5px;color:var(--muted-2);text-align:center}
.gantt-row .task{font-size:10px;color:#d7e4f2}
.gantt-cell{height:23px;border-radius:5px;background:rgba(255,255,255,.028);position:relative}
.gantt-bar{height:100%;border-radius:6px;background:linear-gradient(90deg,#2f80ed,#64c6ff);box-shadow:0 6px 16px rgba(47,128,237,.22)}
.gantt-bar.green{background:linear-gradient(90deg,#0f9c68,#25ca82)}
.gantt-bar.orange{background:linear-gradient(90deg,#e29110,#f4b13b)}
.gantt-bar.red{background:linear-gradient(90deg,#d84259,#ff6278)}
.approval-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.approval-stage{
  padding:14px;border-radius:17px;border:1px solid var(--border);
  background:linear-gradient(180deg,#102943,#0d223b)
}
.approval-stage .top{display:flex;justify-content:space-between;gap:9px;align-items:center}
.approval-stage strong{font-size:11px}.approval-stage p{font-size:9.5px;color:var(--muted-2);line-height:1.45}
.gauge{
  --value:75;--gauge:#25ca82;
  width:190px;height:95px;overflow:hidden;position:relative;margin:12px auto 0
}
.gauge:before{
  content:"";position:absolute;left:0;top:0;width:190px;height:190px;border-radius:50%;
  background:conic-gradient(from 270deg,var(--gauge) calc(var(--value)*.5%),rgba(255,255,255,.08) 0 50%,transparent 0);
}
.gauge:after{
  content:"";position:absolute;left:29px;top:29px;width:132px;height:132px;border-radius:50%;
  background:#0b2037;border:1px solid var(--border)
}
.gauge .gauge-value{
  position:absolute;z-index:3;left:0;right:0;bottom:4px;text-align:center;font-size:26px;font-weight:900
}
.gauge .gauge-label{position:absolute;z-index:3;left:0;right:0;bottom:31px;text-align:center;font-size:9px;color:var(--muted-2)}
.evm-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.evm-mini{
  padding:14px;border-radius:17px;border:1px solid var(--border);
  background:linear-gradient(180deg,#102943,#0d223b)
}
.evm-mini .title{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#b7cadf}
.evm-mini strong{display:block;font-size:24px;margin:5px 0 7px}
.evm-mini .mini-chart{height:95px}
.dark-performance{
  padding:18px;border-radius:22px;border:1px solid rgba(100,198,255,.18);
  background:
    radial-gradient(500px 160px at 100% 0%,rgba(47,128,237,.18),transparent 70%),
    linear-gradient(180deg,#072553,#051a3b);box-shadow:var(--shadow)
}
.project-overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.project-widget{
  padding:14px;border-radius:17px;border:1px solid var(--border);
  background:linear-gradient(180deg,#102943,#0d223b)
}
.project-widget h3{font-size:11px;margin:0 0 8px}.project-widget .chart{height:190px}
.owner-identity{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;
  border-radius:20px;border:1px solid var(--border);background:linear-gradient(135deg,#10315a,#0c2544);box-shadow:var(--shadow)
}
.owner-logo{
  width:70px;height:70px;border-radius:21px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2f80ed,#22d3c7);font-size:24px;font-weight:900
}
.owner-identity h2{font-size:21px;margin:0}.owner-identity p{font-size:10px;color:var(--muted-2);margin:5px 0 0}
.owner-stats{display:flex;gap:9px;flex-wrap:wrap}
.owner-stat{padding:9px 11px;border-radius:13px;border:1px solid var(--border);background:rgba(255,255,255,.035)}
.owner-stat strong{display:block;font-size:17px}.owner-stat span{font-size:8.8px;color:var(--muted-2)}
.cutoff-badge{
  display:inline-flex;padding:5px 8px;border-radius:999px;background:rgba(255,98,120,.15);color:#ffadba;font-size:9px
}
.workflow-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.workflow-step{
  position:relative;padding:12px;border-radius:15px;border:1px solid var(--border);
  background:linear-gradient(180deg,#102943,#0d223b);text-align:center
}
.workflow-step:not(:last-child):after{
  content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:4;color:#64c6ff
}
.workflow-step .ico{width:37px;height:37px;border-radius:12px;margin:0 auto 8px;display:grid;place-items:center;background:rgba(47,128,237,.15)}
.workflow-step strong{font-size:9.5px}.workflow-step span{display:block;font-size:8.5px;color:var(--muted-2);margin-top:4px}
@media(max-width:1500px){
  .hub-journey{grid-template-columns:repeat(3,1fr)}
  .step-cards{grid-template-columns:repeat(4,1fr)}
  .baseline-flow{grid-template-columns:1fr}
  .flow-arrow{transform:rotate(90deg);text-align:center}
  .project-overview-grid,.evm-mini-grid{grid-template-columns:repeat(2,1fr)}
  .workflow-strip{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1000px){
  .process-grid,.step-cards,.deliverables,.approval-flow,.project-overview-grid,.evm-mini-grid,.workflow-strip{grid-template-columns:1fr}
  .gantt-head,.gantt-row{grid-template-columns:150px repeat(12,34px);width:max-content}
  .owner-identity{grid-template-columns:1fr;text-align:center}
}

/* Gestion des utilisateurs */
.user-directory{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr);gap:14px}
.user-card{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.025)}
.user-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#64c6ff);font-weight:850}
.user-card strong{font-size:11px}.user-card p{font-size:9px;color:var(--muted-2);margin:3px 0 0}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.role-card{padding:14px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(180deg,#102943,#0d223b)}
.role-card strong{display:block;font-size:15px}.role-card p{font-size:9.5px;color:var(--muted-2);line-height:1.45}
.permission-matrix td,.permission-matrix th{text-align:center}.permission-matrix td:first-child,.permission-matrix th:first-child{text-align:left}
.access-event{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:11px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025)}
@media(max-width:1200px){.user-directory,.role-grid{grid-template-columns:1fr}}

.tag.purple{background:rgba(154,119,255,.15);color:#cbbcff}
.b-green{background:rgba(37,202,130,.16)!important;color:#8ff0be}


.owner-identity{min-width:0}
.owner-identity > div:nth-child(2){min-width:0}
.owner-identity h2{word-break:break-word}
.owner-stats{justify-content:flex-end}
.owner-stat{min-width:94px;flex:1 1 94px}
.kpi{min-width:0}
.kpi .value,.owner-stat strong{word-break:break-word}
.hero h2{overflow-wrap:anywhere}
@media(max-width:1280px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .two,.equal-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three,.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .owner-identity{grid-template-columns:auto minmax(0,1fr);align-items:flex-start}
  .owner-stats{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:1100px){
  .filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.equal-two,.three,.four,.module-grid,.hub-journey,.metric-grid,.project-overview-grid,.evm-mini-grid,.workflow-strip{grid-template-columns:1fr}
  .owner-identity{grid-template-columns:1fr;text-align:left}
  .owner-logo{width:62px;height:62px}
  .owner-stats{justify-content:flex-start}
}
@media(max-width:760px){
  .kpi-grid,.filterbar{grid-template-columns:1fr}
  .topbar{padding:15px 16px}
  .content{padding:14px 14px 34px}
  .hero,.card,.dark-performance,.owner-identity{padding:14px}
  .page-title h1{font-size:23px}
  .hero h2{font-size:22px}
  .kpi .value{font-size:25px}
}