:root{
    --teal:#037594;
    --teal-dark:#025c74;
    --teal-deep:#014458;
    --ink:#122b34;
    --muted:#43626d;
    --bg:#f6fafb;
    --line:#e1edf1;
  }

*{box-sizing:border-box;}

*, button, input{ font-family:'IBM Plex Sans', -apple-system, sans-serif; }

html,body{margin:0;padding:0;}

body{
    font-family:'IBM Plex Sans', -apple-system, sans-serif;
    background:var(--bg);
    color:var(--ink);
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

.topbar{ display:flex; justify-content:flex-end; padding:22px 40px 0; }

.logo{ display:flex; justify-content:center; padding:28px 40px 10px; }

.logo-img{ height:26px; width:auto; display:block; }

.lang{ font-size:13px; font-weight:600; letter-spacing:0.5px; display:flex; align-items:center; gap:6px; }

.lang button{ background:none; border:none; padding:2px 1px; font:inherit; font-weight:inherit; letter-spacing:inherit; color:var(--muted); cursor:pointer; }

.lang button.active{ color:var(--teal); }

.lang button:hover{ color:var(--teal-dark); }

.lang .sep{ color:var(--line); }

main{ flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }

.panel-left{ display:flex; flex-direction:column; }

.content-center{ flex:1; display:flex; align-items:center; justify-content:center; padding:20px clamp(24px, 6vw, 100px) 60px; }

.content{ max-width:460px; width:100%; }

.error-code{ font-size:clamp(56px, 8vw, 84px); font-weight:400; line-height:1; color:var(--teal); letter-spacing:-1px; margin:0 0 10px; }

h1{ font-size:clamp(24px, 3vw, 32px); line-height:1.2; font-weight:700; margin:0 0 14px; color:var(--ink); }

p.lead{ font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 32px; }

.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--teal); color:#ffffff; font-size:15px; font-weight:600; text-decoration:none; border:none; border-radius:8px; padding:13px 26px; cursor:pointer; transition:background 0.15s ease; }

.btn-primary:hover{ background:var(--teal-dark); }

.panel-right{ position:relative; background:linear-gradient(160deg, #eef4f6 0%, #dfeaee 100%); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:48px; }

.placeholder-img{ width:100%; max-width:520px; height:auto; object-fit:contain; animation:float 5s ease-in-out infinite; }

@keyframes float{ 0%,100%{ transform:translateY(0) scale(1.01); } 50%{ transform:translateY(-6px) scale(1.01); } }

.footer-credit{ position:absolute; bottom:16px; right:24px; font-size:11.5px; color:#7f9aa3; z-index:2; }

.footer-credit a{ color:var(--teal-deep); text-decoration:underline; }

@media (max-width: 860px){
    main{ grid-template-columns:1fr; }
    .panel-right{ min-height:280px; order:-1; }
    .content-center{ padding:20px 24px 48px; }
    .topbar{ padding:16px 24px 0; }
    .logo{ padding:20px 24px 6px; }
  }

.status-card{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:#fbfdfd; margin-bottom:28px; }

.status-link{ font-size:12.5px; color:var(--muted); margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }

.status-link a{ color:var(--teal); font-weight:600; text-decoration:none; border-bottom:1px solid transparent; }

.status-link a:hover{ border-bottom-color:var(--teal); }

.badge-embed{ display:flex; margin-bottom:14px; }

.hazard{
    height:10px;
    width:100%;
    background:repeating-linear-gradient(
      -45deg,
      var(--amber) 0px, var(--amber) 18px,
      var(--ink) 18px, var(--ink) 36px
    );
    background-size:51px 51px;
    animation:crawl 2.4s linear infinite;
    flex-shrink:0;
  }

@keyframes crawl{
    from{ background-position:0 0; }
    to{ background-position:51px 0; }
  }

header{ display:none; }

.obs{
    display:flex;
    gap:12px;
    background:var(--obs-bg);
    border:1px solid var(--obs-border);
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:28px;
  }

.obs svg{ flex-shrink:0; margin-top:2px; }

.obs-text span{ color:#7a5c1f; font-size:14px; font-weight:600; line-height:1.5; }

h1 em{ color:var(--teal); font-style:normal; }

.status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
  }

.status-label{
    font-size:12.5px;
    font-weight:400;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:0.6px;
    display:flex;
    align-items:center;
    gap:8px;
  }

.dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--amber-deep);
    animation:pulse 1.6s ease-in-out infinite;
  }

@keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.4; transform:scale(0.8); }
  }

.window-info{
    display:flex;
    align-items:stretch;
    gap:16px;
    margin-bottom:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
  }

.window-item{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
  }

.window-label{
    font-size:11px;
    font-weight:400;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:0.5px;
  }

.window-value{
    font-size:14.5px;
    font-weight:600;
    color:var(--teal-deep);
    text-transform:uppercase;
  }

.window-divider{
    width:1px;
    background:var(--line);
  }

.status-step{
    font-size:14px;
    color:var(--ink);
    font-weight:500;
    min-height:20px;
  }

.bar-track{
    height:6px;
    border-radius:4px;
    background:var(--line);
    overflow:hidden;
    position:relative;
  }

.bar-fill{
    position:absolute;
    top:0; left:0; height:100%;
    width:0%;
    border-radius:4px;
    background:linear-gradient(90deg, var(--teal), var(--teal-dark));
    transition:width 1s ease;
  }

.bar-fill.indeterminate{
    width:38%;
    animation:sweep 1.8s ease-in-out infinite;
  }

@keyframes sweep{
    0%{ left:-38%; }
    100%{ left:100%; }
  }

.eyebrow{
    font-size:12px;
    font-weight:600;
    color:var(--teal);
    text-transform:uppercase;
    letter-spacing:0.8px;
    margin-bottom:10px;
  }

.ip-card{
    border:1px solid var(--line);
    border-radius:12px;
    padding:18px 20px;
    background:#fbfdfd;
    margin-bottom:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

.ip-card-label{
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:4px;
  }

.ip-card-value{
    font-size:16px;
    font-weight:600;
    color:var(--teal-deep);
  }

.ip-status{
    font-size:12px;
    font-weight:600;
    color:#b3401c;
    background:#fbeae4;
    border-radius:6px;
    padding:5px 10px;
    white-space:nowrap;
  }

.btn-link{
    display:inline-flex;
    align-items:center;
    font-size:14px;
    font-weight:600;
    color:var(--teal);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }

.btn-link:hover{ border-bottom-color:var(--teal); }

.actions{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; }