.cti-observations { max-width:1060px; margin:3rem auto 0; padding:2rem 2.25rem 2.1rem; border-radius:8px; background:rgba(10,14,23,.7); box-shadow:0 4px 18px rgba(0,0,0,.1); }
.cti-observations__intro { display:flex; align-items:baseline; justify-content:space-between; gap:2rem; }
.cti-observations__intro h3 { margin:0; color:#f1f5f9; font-size:clamp(1.45rem,2.5vw,1.85rem); font-weight:600; line-height:1.25; }
.cti-observations__intro p { max-width:600px; margin:0; color:#a9b7ca; font-size:.91rem; line-height:1.65; }
.cti-observations__stage { --cti-columns:minmax(0,1fr) 220px minmax(0,1fr); position:relative; display:grid; grid-template-columns:var(--cti-columns); align-items:center; gap:1rem; min-height:295px; margin-top:1.5rem; padding-bottom:22px; overflow:hidden; }
.cti-observations__fallback, .cti-observations__traffic { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cti-observations__fallback { z-index:0; }
.cti-observations__fallback--mobile { display:none; }
.cti-observations__traffic { z-index:1; opacity:0; }
.cti-observations__stage.has-canvas .cti-observations__traffic { opacity:1; }
.cti-observations__stage.has-canvas .cti-observations__fallback { visibility:hidden; }
.cti-observations__incoming, .cti-observations__inspect, .cti-observations__stored { position:relative; z-index:2; min-width:0; }
.cti-observations__incoming { align-self:stretch; }
.cti-observations__inspect, .cti-observations__stored { display:flex; flex-direction:column; align-items:center; }
.cti-observations__labels { position:absolute; z-index:3; right:0; bottom:4px; left:0; display:grid; grid-template-columns:var(--cti-columns); gap:1rem; align-items:end; }
.cti-observations__labels .cti-observations__step:nth-child(2), .cti-observations__labels .cti-observations__step:nth-child(3) { text-align:center; }
.cti-observations__step { color:#cbd5e1; font-size:.78rem; font-weight:600; line-height:1.3; white-space:nowrap; }
.cti-observations__glass { --cti-sweep-width:18px; position:relative; display:flex; align-items:center; justify-content:center; width:178px; height:178px; border:2px solid #cbd5e1; border-radius:50%; background:rgba(19,28,42,.93); box-shadow:inset 0 0 0 5px rgba(148,163,184,.055),0 7px 24px rgba(0,0,0,.2); }
.cti-observations__glass-viewport { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; }
.cti-observations__glass::after { content:""; position:absolute; top:158px; left:151px; width:58px; height:8px; border:1px solid #cbd5e1; border-radius:3px; background:#9fb0c4; transform:rotate(45deg); transform-origin:left center; }
.cti-observations__glass-placeholder { position:absolute; z-index:1; width:32px; height:32px; background:linear-gradient(#60758c,#60758c) center/1px 100% no-repeat,linear-gradient(#60758c,#60758c) center/100% 1px no-repeat; opacity:0; transition:opacity .18s ease; }
.cti-observations__stage.is-animated:not(.is-revealed) .cti-observations__glass-placeholder { opacity:.43; }
.cti-observations__glass-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:138px; overflow:hidden; text-align:center; opacity:1; transition:opacity .18s ease; }
.cti-observations__stage.is-animated:not(.is-revealed) .cti-observations__glass-content { opacity:0; }
.cti-observations__glass-label { color:#8da2b8; font-size:.7rem; line-height:1.2; }
.cti-observations__glass-ip { margin:5px 0 12px; color:#ecf5fb; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:1rem; font-weight:500; white-space:nowrap; }
.cti-observations__glass-fact { display:flex; justify-content:space-between; gap:7px; width:100%; margin-top:4px; color:#8da2b8; font-size:.66rem; line-height:1.2; }
.cti-observations__glass-fact b { min-width:0; overflow:hidden; color:#d7e4ee; font-size:.68rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.cti-observations__glass-sweep { position:absolute; top:0; bottom:0; left:10%; width:var(--cti-sweep-width); border-right:1px solid rgba(103,232,249,.5); background:linear-gradient(90deg,transparent,rgba(103,232,249,.12)); opacity:0; pointer-events:none; }
.cti-observations__stage.is-inspecting .cti-observations__glass-sweep { animation:cti-glass-scan 1.25s ease-in-out both; }
.cti-observations__records { width:min(100%,295px); min-height:205px; padding:1rem 1.1rem; border:1px solid rgba(148,163,184,.15); border-radius:6px; background:rgba(24,34,50,.76); }
.cti-observations__records-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.9rem; color:#dbe6ef; font-size:.76rem; font-weight:600; line-height:1.4; white-space:nowrap; }
.cti-observations__records-head span:last-child { color:#8192a7; font-size:.68rem; font-weight:400; }
.cti-observations__record-list { display:grid; gap:.4rem; }
.cti-observations__stage.is-animated .cti-observations__record-row.is-pending { display:none; }
.cti-observations__record-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; gap:2px .6rem; min-width:0; min-height:45px; padding:.34rem .62rem; border:1px solid rgba(148,163,184,.11); border-radius:4px; background:rgba(12,19,31,.53); transition:transform .42s ease,opacity .42s ease; }
.cti-observations__record-row.is-new { animation:cti-record-enter .52s ease-out both; border-color:rgba(103,232,249,.38); }
.cti-observations__record-row.is-current { border-color:rgba(103,232,249,.38); background:rgba(103,232,249,.055); }
.cti-observations__record-ip { color:#e4eff7; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.7rem; white-space:nowrap; }
.cti-observations__record-detail, .cti-observations__record-time { min-width:0; overflow:hidden; color:#8da2b8; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.cti-observations__record-detail { grid-column:1 / 3; grid-row:2; }
.cti-observations__record-time { grid-column:2; grid-row:1; text-align:right; }
@keyframes cti-glass-scan { 0% { opacity:0; left:10%; } 15%,85% { opacity:1; } 100% { opacity:0; left:calc(90% - var(--cti-sweep-width)); } }
@keyframes cti-record-enter { from { opacity:0; transform:translateX(-22px); } to { opacity:1; transform:translateX(0); } }
@media(min-width:881px) { .cti-observations__intro p { white-space:nowrap; } }
@media(max-width:1024px) { .cti-observations__intro { display:block; } .cti-observations__intro p { max-width:650px; margin-top:.7rem; } }
@media(max-width:720px) { .cti-observations { padding:1.6rem 1.35rem; } .cti-observations__stage { --cti-columns:minmax(0,1fr) 170px minmax(0,1fr); gap:.4rem; } .cti-observations__labels { gap:.4rem; } .cti-observations__glass { transform:scale(.84); } .cti-observations__records { padding:.8rem; } .cti-observations__record-row { display:block; min-height:48px; padding:.35rem .45rem; } .cti-observations__record-ip, .cti-observations__record-detail, .cti-observations__record-time { display:block; } }
@media(max-width:540px) { .cti-observations__stage { --cti-columns:minmax(0,.7fr) 120px minmax(0,1.6fr); gap:.25rem; min-height:315px; } .cti-observations__labels { gap:.25rem; } .cti-observations__glass { --cti-sweep-width:12px; width:118px; height:118px; transform:none; } .cti-observations__glass::after { top:101px; left:16px; width:42px; height:6px; transform:rotate(135deg); } .cti-observations__glass-content { width:96px; } .cti-observations__glass-label { font-size:.56rem; } .cti-observations__glass-ip { margin:3px 0 5px; font-size:.69rem; } .cti-observations__glass-fact { display:block; margin-top:3px; line-height:1.1; } .cti-observations__glass-fact span, .cti-observations__glass-fact b { display:block; font-size:.57rem; } .cti-observations__records { min-height:205px; padding:.65rem .5rem; } .cti-observations__records-head { display:block; font-size:.65rem; } .cti-observations__records-head span { display:block; } .cti-observations__records-head span:last-child { margin-top:2px; font-size:.58rem; } .cti-observations__records-label { margin:.45rem 0 .4rem; font-size:.65rem; } .cti-observations__record-row { min-height:47px; padding:.18rem .3rem; } .cti-observations__record-ip { font-size:.66rem; } .cti-observations__record-detail, .cti-observations__record-time { font-size:.6rem; } .cti-observations__step { font-size:.64rem; white-space:normal; } }
@media(max-width:390px) { .cti-observations { padding:1.45rem .95rem; } .cti-observations__stage { --cti-columns:minmax(0,.55fr) 115px minmax(0,1.45fr); } .cti-observations__glass { width:112px; height:112px; } .cti-observations__glass::after { top:95px; } }
@media(max-width:360px) { .cti-observations__stage { --cti-columns:minmax(0,1fr) 115px 20px; grid-template-rows:175px 24px auto 24px; gap:.2rem; min-height:0; padding-bottom:0; } .cti-observations__incoming { grid-column:1; grid-row:1; } .cti-observations__inspect { grid-column:2; grid-row:1; } .cti-observations__stored { grid-column:1 / -1; grid-row:3; justify-self:end; width:min(100%,210px); } .cti-observations__records { width:100%; min-height:205px; } .cti-observations__record-row { display:grid; min-height:45px; padding:.34rem .62rem; } .cti-observations__record-ip, .cti-observations__record-detail, .cti-observations__record-time { display:initial; } .cti-observations__labels { position:static; display:contents; } .cti-observations__labels .cti-observations__step:nth-child(1) { grid-column:1; grid-row:2; } .cti-observations__labels .cti-observations__step:nth-child(2) { grid-column:2; grid-row:2; } .cti-observations__labels .cti-observations__step:nth-child(3) { grid-column:1 / -1; grid-row:4; text-align:right; } }
@media(min-width:361px) and (max-width:540px) { .cti-observations__stage { --cti-columns:minmax(0,1fr) 120px 20px; grid-template-rows:175px 24px auto 24px; gap:.2rem; min-height:0; padding-bottom:0; } .cti-observations__incoming { grid-column:1; grid-row:1; } .cti-observations__inspect { grid-column:2; grid-row:1; } .cti-observations__stored { grid-column:1 / -1; grid-row:3; justify-self:end; width:min(100%,240px); } .cti-observations__records { width:100%; min-height:205px; } .cti-observations__record-row { display:grid; min-height:45px; padding:.34rem .62rem; } .cti-observations__record-ip, .cti-observations__record-detail, .cti-observations__record-time { display:initial; } .cti-observations__labels { position:static; display:contents; } .cti-observations__labels .cti-observations__step:nth-child(1) { grid-column:1; grid-row:2; } .cti-observations__labels .cti-observations__step:nth-child(2) { grid-column:2; grid-row:2; } .cti-observations__labels .cti-observations__step:nth-child(3) { grid-column:1 / -1; grid-row:4; text-align:right; } }
@media(max-width:540px) { .cti-observations__records-head { display:flex; margin-bottom:.6rem; } .cti-observations__records-head span { display:inline; } .cti-observations__records-head span:last-child { margin-top:0; } }
@media(prefers-reduced-motion:reduce) { .cti-observations__glass-sweep, .cti-observations__record-row.is-new { animation:none !important; } .cti-observations__glass-content { transition:none; } }
@media(max-width:767px) {
  .cti-observations__stage { grid-template-columns:minmax(0,1fr); grid-template-rows:180px 190px 62px auto; align-items:stretch; gap:0; width:100%; max-width:420px; min-height:0; margin:1.2rem auto 0; padding-bottom:0; }
  .cti-observations__fallback--desktop { display:none; }
  .cti-observations__fallback--mobile { display:block; }
  .cti-observations__incoming { grid-column:1; grid-row:1; align-self:stretch; }
  .cti-observations__inspect { grid-column:1; grid-row:2; align-self:stretch; justify-self:stretch; padding-top:24px; }
  .cti-observations__stored { grid-column:1; grid-row:4; align-self:start; justify-self:center; width:min(100%,320px); }
  .cti-observations__records { width:100%; min-height:205px; padding:.75rem .8rem; }
  .cti-observations__records-head { display:flex; margin-bottom:.7rem; }
  .cti-observations__records-head span { display:inline; }
  .cti-observations__records-head span:last-child { margin-top:0; }
  .cti-observations__record-row { display:grid; min-height:45px; padding:.3rem .5rem; }
  .cti-observations__record-ip, .cti-observations__record-detail, .cti-observations__record-time { display:initial; }
  .cti-observations__glass { --cti-sweep-width:clamp(12px,2vw,16px); width:clamp(112px,22vw,150px); height:clamp(112px,22vw,150px); transform:none; }
  .cti-observations__glass::after { top:calc(100% - 17px); left:16px; width:42px; height:6px; transform:rotate(135deg); }
  .cti-observations__glass-content { width:min(118px,calc(100% - 12px)); }
  .cti-observations__glass-label { font-size:.59rem; }
  .cti-observations__glass-ip { margin:3px 0 6px; font-size:clamp(.69rem,1.9vw,.82rem); }
  .cti-observations__glass-fact { display:block; margin-top:3px; line-height:1.15; }
  .cti-observations__glass-fact span, .cti-observations__glass-fact b { display:block; font-size:clamp(.57rem,1.6vw,.65rem); }
  .cti-observations__labels { position:static; display:contents; }
  .cti-observations__step { position:relative; z-index:3; grid-column:1; align-self:start; justify-self:start; margin-top:4px; text-align:left; white-space:nowrap; }
  .cti-observations__labels .cti-observations__step:nth-child(1) { grid-column:1; grid-row:1; }
  .cti-observations__labels .cti-observations__step:nth-child(2) { grid-column:1; grid-row:2; text-align:left; }
  .cti-observations__labels .cti-observations__step:nth-child(3) { grid-column:1; grid-row:3; text-align:left; }
}