:root{
  --bg:#071325;
  --card:#0d1d31;
  --card2:#112841;
  --line:rgba(163,193,226,.10);
  --line-soft:rgba(163,193,226,.07);
  --text:#eef6ff;
  --muted:#9cb4cf;
  --soft:#bfd2e6;
  --li:#3db5ff;
  --ig:#ff4dc0;
  --tt:#2de4e7;
  --fb:#5a88ff;
  --ok:#6be6b0;
  --no:#ff6b78;
  --shadow:0 26px 60px rgba(1,9,20,.52);
  --format-width:98px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(49,121,255,.18), transparent 30rem),
    radial-gradient(circle at 95% 25%, rgba(255,77,192,.12), transparent 26rem),
    linear-gradient(180deg,#061121,#071325 55%,#08182a);
  color:var(--text);
  min-height:100vh;
}
.app-shell{max-width:1600px;margin:0 auto;padding:8px 12px 24px}
.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 10px 16px;
}
.brand-title{font-size:24px;line-height:.95;font-weight:600;letter-spacing:-.03em}
.brand-title strong{font-size:42px;font-weight:900;text-transform:uppercase}
.brand-sub{font-size:13px;color:var(--muted);margin-top:6px}
.clear-btn{
  border:1px solid rgba(184,209,235,.2);background:rgba(8,18,32,.5);color:#d7e8fa;
  border-radius:999px;padding:12px 18px;cursor:pointer;backdrop-filter:blur(6px);
}
.clear-btn:hover{border-color:rgba(184,209,235,.45)}

.layout{
  display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:18px;align-items:start
}
.side-card,.main-panel{
  background:linear-gradient(180deg, rgba(11,28,48,.84), rgba(8,20,36,.80));
  border:1px solid rgba(169,195,222,.12);
  border-radius:24px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.side-card::before,.main-panel::before{
  content:"";position:absolute;inset:auto -18% -24% auto;width:260px;height:260px;
  background:radial-gradient(circle, rgba(60,174,255,.12), transparent 62%);
  pointer-events:none
}

.intro-panel{padding:24px 22px;min-height:780px;display:flex;flex-direction:column}
.intro-panel h1{
  margin:26px 0 16px;font-size:52px;line-height:.94;letter-spacing:-.05em
}
.intro-panel p{margin:0 0 12px;color:var(--soft);line-height:1.55}
.intro-panel .secondary{color:var(--muted);font-size:14px}
.note-box{
  margin-top:auto;display:flex;gap:10px;align-items:flex-start;padding:15px 14px;border-radius:16px;
  background:rgba(12,31,54,.82);border:1px solid rgba(143,177,210,.12)
}
.note-icon{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(75,187,255,.16);color:#87d7ff;font-weight:800;flex:0 0 auto
}
.note-box p{font-size:13px;color:#b6cae0;margin:0}
.timestamp{margin-top:16px;color:#7f97b1;font-size:12px}

.main-panel{
  padding:24px 18px 20px;
}
.flow-svg{
  position:absolute;left:0;top:0;width:100%;height:320px;pointer-events:none;z-index:1
}
#connectorLayer path{
  fill:none;stroke-linecap:round;stroke-width:2.7;opacity:.9;filter:url(#softGlow)
}
#connectorLayer path.inactive{opacity:.10;stroke-dasharray:5 7}

.networks-row,.formats-grid{
  position:relative;z-index:3;display:grid;justify-content:center
}
.networks-row{
  grid-template-columns:repeat(4, minmax(128px,1fr));
  gap:14px;margin-bottom:28px
}
.network-card{
  min-height:88px;background:rgba(9,20,35,.55);border:1px solid rgba(162,190,223,.12);
  border-radius:18px;color:#f2f7fc;cursor:pointer;padding:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;transition:all .25s ease;position:relative
}
.network-card .network-label{font-size:15px}
.network-card .network-icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:24px;font-weight:900
}
.network-card .network-icon.in{background:#0a66c2}
.network-card .network-icon.ig{background:radial-gradient(circle at 30% 100%,#ffd36c 0 14%,#ef4d7a 42%,#b43fd1 68%,#5b71ef 100%)}
.network-card .network-icon.tt{background:#0a0f16;text-shadow:-2px 0 var(--tt),2px 0 #ff4b83}
.network-card .network-icon.fb{background:#1778f2}
.network-card.is-active{transform:translateY(-2px);opacity:1}
.network-card.linkedin.is-active{border-color:rgba(61,181,255,.6);box-shadow:0 0 0 1px rgba(61,181,255,.25), 0 0 28px rgba(61,181,255,.22)}
.network-card.instagram.is-active{border-color:rgba(255,77,192,.6);box-shadow:0 0 0 1px rgba(255,77,192,.25), 0 0 28px rgba(255,77,192,.20)}
.network-card.tiktok.is-active{border-color:rgba(45,228,231,.65);box-shadow:0 0 0 1px rgba(45,228,231,.22), 0 0 28px rgba(45,228,231,.20)}
.network-card.facebook.is-active{border-color:rgba(90,136,255,.65);box-shadow:0 0 0 1px rgba(90,136,255,.24), 0 0 28px rgba(90,136,255,.20)}
.network-card:not(.is-active){opacity:.38}
.network-card:hover{opacity:1}

.formats-grid{
  grid-template-columns:repeat(8, var(--format-width));
  gap:10px;margin-bottom:14px
}
.format-item{
  position:relative;height:156px;perspective:1200px;z-index:3
}
.format-item:hover{z-index:20}
.flip-card-inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.2,.8,.2,1)
}
.format-item:hover .flip-card-inner{transform:rotateY(180deg)}
.format-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:14px 10px;
  border:1px solid rgba(176,200,228,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.16)
}
.format-face.front{background:linear-gradient(180deg,rgba(12,30,50,.94),rgba(9,23,39,.94))}
.format-face.back{
  transform:rotateY(180deg);background:#16304d;align-items:flex-start;justify-content:flex-start;text-align:left;
  padding:14px 12px;overflow:hidden
}
.format-icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(177,202,230,.18);background:rgba(255,255,255,.04);
  font-size:20px;font-weight:800;margin-bottom:10px;flex:0 0 auto
}
.format-face strong{font-size:15px;line-height:1.08}
.format-face.back strong{margin-bottom:8px}
.format-face.back p{
  margin:0;color:#d7e5f4;font-size:12px;line-height:1.38;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden
}
.format-item.inactive{opacity:.16;filter:saturate(.35)}

.matrix-section{
  position:relative;z-index:2;
  display:grid;grid-template-columns:330px repeat(8, var(--format-width));
  gap:10px;justify-content:center;align-items:start
}
.metric-list{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(5,14,26,.34)
}
.metric-item{
  height:64px;display:flex;align-items:center;gap:12px;padding:11px 16px 11px 12px;
  border-bottom:1px solid var(--line-soft);cursor:help
}
.metric-item:last-child{border-bottom:0}
.metric-item:hover{background:rgba(255,255,255,.035)}
.metric-icon{
  width:26px;height:26px;display:grid;place-items:center;color:#d7e7f8;font-weight:900;font-size:18px;flex:0 0 auto
}
.metric-text strong{display:block;font-size:13px}
.metric-text small{display:block;font-size:11px;color:#90abc7;line-height:1.28}

.matrix-col{
  position:relative;display:flex;flex-direction:column;align-items:center
}
.matrix-lane-head{
  width:100%;height:18px;display:flex;justify-content:center;align-items:flex-start;gap:7px;position:relative;margin-bottom:4px
}
.matrix-lane-head span{
  width:9px;height:9px;border-radius:50%;display:block
}
.matrix-col-track{
  width:100%;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(5,14,26,.34)
}
.metric-cell{
  height:64px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:center;position:relative;padding:0 6px
}
.metric-cell:last-child{border-bottom:0}
.lanes{
  display:flex;align-items:center;justify-content:center;gap:10px;height:100%
}
.lane{
  position:relative;width:18px;height:100%;display:flex;align-items:center;justify-content:center
}
.lane::before{
  content:"";position:absolute;left:50%;top:-8px;bottom:-8px;width:2px;transform:translateX(-50%);
  background:var(--lane);opacity:.34
}
.status{
  position:relative;z-index:2;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:900;border:2px solid rgba(255,255,255,.08)
}
.status.ok{background:var(--ok);color:#0e2f24}
.status.no{background:var(--no);color:#320d15}

.detail-panel{padding:20px;min-height:780px}
.detail-title h2{margin:4px 0 8px;font-size:28px;line-height:1.02}
.detail-title p{margin:0 0 18px;color:#adc2d8;font-size:14px;line-height:1.45}
.detail-stack{display:grid;gap:14px}
.detail-network-card{
  border:1px solid rgba(169,195,222,.12);background:rgba(12,27,48,.72);
  border-radius:18px;padding:16px;display:flex;gap:14px;align-items:flex-start
}
.detail-logo{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;flex:0 0 auto
}
.detail-network-card strong{display:block;font-size:18px;margin-bottom:6px}
.detail-network-card p{margin:0;color:#c4d4e6;font-size:13px;line-height:1.5}

.tooltip{
  position:fixed;z-index:100;max-width:300px;padding:12px 14px;border-radius:12px;
  background:#071423;color:white;box-shadow:0 14px 32px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transform:translateY(6px);transition:.14s ease;
  border:1px solid rgba(186,210,233,.16);font-size:12px;line-height:1.45
}
.tooltip.is-visible{opacity:1;transform:none}

@media (max-width:1480px){
  .layout{grid-template-columns:1fr 1fr}
  .intro-panel,.detail-panel{min-height:auto}
  .detail-panel{order:2}
  .main-panel{grid-column:1 / -1;order:3}
}
@media (max-width:1120px){
  .layout{grid-template-columns:1fr}
  .main-panel,.intro-panel,.detail-panel{grid-column:auto;order:initial}
}
@media (max-width:980px){
  .intro-panel h1{font-size:42px}
  .formats-grid{grid-template-columns:repeat(4, var(--format-width));}
  .matrix-section{grid-template-columns:280px repeat(4, var(--format-width))}
}
@media (max-width:640px){
  .networks-row{grid-template-columns:repeat(2,minmax(110px,1fr))}
  .formats-grid{grid-template-columns:repeat(2, var(--format-width))}
  .matrix-section{grid-template-columns:1fr}
  .matrix-grid-placeholder{display:none}
}