/* ============================================================
   CyberTunnel — Terminal Ops design layer (.op-*)
   Source of truth: /design-reference-terminal-ops.html
   A page opts in by setting $body_class = 'op-body' before
   including views/base/head.php. Non-op pages are unaffected.
   ============================================================ */

/* ---------- page shell ---------- */
.op-body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0a0f0d;
  color: #e6ede9;
  min-height: 100vh;
  overflow-x: hidden;
}
.op-body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(700px 320px at 20% -10%, rgba(16,185,129,.13), transparent 70%),
    radial-gradient(560px 300px at 105% 30%, rgba(20,184,166,.07), transparent 70%);
}
.op-body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px);
  opacity: .5;
}
.op-body main { position: relative; z-index: 1; }
.op-body footer { position: relative; z-index: 1; }
.op-body [id] { scroll-margin-top: 64px; }

/* ---------- top note (reset schedule) ---------- */
.op-note {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6ee7b7;
  padding: 6px 16px; border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(16,185,129,.05);
}
.op-note .dim { color: #5f7268; }

/* ---------- nav ---------- */
.op-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 30px; border-bottom: 1px solid rgba(255,255,255,.09); }
.op-logo { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #fff; text-decoration: none; }
.op-logo b { color: #34d399; font-weight: 500; }
.op-logo::before { content: "[_]"; color: #10b981; }
.op-path { display: flex; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8ba398; }
.op-path a { padding: 5px 10px; border-radius: 7px; text-decoration: none; color: inherit; }
.op-path a:hover { background: rgba(16,185,129,.1); color: #6ee7b7; }
.op-path .on { background: rgba(16,185,129,.12); color: #34d399; }
.op-status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #6ee7b7; border: 1px solid rgba(52,211,153,.3); border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.led { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: op-led 2.2s infinite; flex-shrink: 0; display: inline-block; }
@keyframes op-led { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- nav dropdowns (desktop, pure CSS) ---------- */
.op-dd { position: relative; }
.op-dd-trigger { padding: 5px 10px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.op-dd-trigger::after { content: "▾"; font-size: 10px; color: #5f7268; transition: transform .18s; }
.op-dd:hover .op-dd-trigger, .op-dd:focus-within .op-dd-trigger { background: rgba(16,185,129,.1); color: #6ee7b7; }
.op-dd:hover .op-dd-trigger::after, .op-dd:focus-within .op-dd-trigger::after { transform: rotate(180deg); }
.op-dd-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 232px;
  background: #0d1310; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 8px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  box-shadow: 0 24px 48px rgba(0,0,0,.5);
}
.op-dd-panel--right { left: auto; right: 0; }
.op-dd:hover .op-dd-panel, .op-dd:focus-within .op-dd-panel { opacity: 1; visibility: visible; transform: none; }
.op-dd-head { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #10b981; padding: 7px 10px 3px; }
.op-dd-head::before { content: "## "; color: #57534e; }
.op-dd-item { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8ba398; padding: 7px 10px; border-radius: 8px; text-decoration: none; }
.op-dd-item::before { content: "→"; color: #57534e; }
.op-dd-item:hover { background: rgba(16,185,129,.08); color: #6ee7b7; }
.op-dd-item.on { color: #34d399; background: rgba(16,185,129,.12); }

/* ---------- mobile nav ---------- */
.op-burger {
  display: none; width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  border: 1px solid rgba(255,255,255,.14); background: transparent; padding: 0;
}
.op-burger i { display: block; width: 16px; height: 1.5px; background: #8ba398; transition: transform .2s, opacity .2s; }
.op-burger.open i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.op-burger.open i:nth-child(2) { opacity: 0; }
.op-burger.open i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.op-mobile { display: none; background: #0d1310; border-bottom: 1px solid rgba(255,255,255,.09); }
.op-mobile.open { display: block; }
.op-mobile-inner { padding: 10px 18px 16px; display: grid; gap: 2px; }
.op-mobile a { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8ba398; text-decoration: none; padding: 9px 12px; border-radius: 8px; border-left: 2px solid transparent; }
.op-mobile a:hover { background: rgba(16,185,129,.08); color: #6ee7b7; }
.op-mobile a.on { color: #34d399; background: rgba(16,185,129,.12); border-left-color: #34d399; }
.op-mobile .op-dd-head { padding: 10px 12px 4px; }

/* ---------- hero ---------- */
.op-hero-row {
  max-width: 1100px; margin: 0 auto; padding: 42px 30px 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center;
}
.op-hero { padding: 0; }
.op-hero-row .op-term { margin: 0; max-width: none; }
.op-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #10b981; letter-spacing: .04em; }
.op-tag::before { content: "$ "; color: #57534e; }
.op-h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 4.8vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; color: #fff; margin-top: 12px; max-width: 21ch; }
.op-h1 em { font-style: normal; color: #34d399; text-shadow: 0 0 28px rgba(52,211,153,.45); }
.op-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.op-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 12px 20px; border-radius: 10px; cursor: pointer; text-decoration: none; }
.op-btn svg { width: 15px; height: 15px; }
.op-btn-primary { background: #10b981; color: #04110b; border: 1px solid #34d399; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 24px rgba(16,185,129,.35); }
.op-btn-primary:hover { background: #34d399; }
.op-btn-ghost { background: transparent; color: #cdd9d3; border: 1px solid rgba(255,255,255,.16); }
.op-btn-ghost:hover { border-color: rgba(52,211,153,.5); color: #6ee7b7; }

/* ---------- terminal window ---------- */
.op-term { margin: 26px 30px 0; max-width: 1100px; background: #0d1310; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.op-term-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.op-tdot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); }
.op-tdot.g { background: #22c55e; border-color: #22c55e; }
.op-tdot.y { background: #eab308; border-color: #eab308; }
.op-tdot.r { background: #ef4444; border-color: #ef4444; }
.op-term-title { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8ba398; }
.op-term-body { padding: 18px 20px 20px; font-family: 'JetBrains Mono', monospace; font-size: 12.8px; line-height: 2; }
.op-ln { color: #cdd9d3; white-space: pre-wrap; }
.op-ln .pr { color: #34d399; } .op-ln .dim { color: #5f7268; } .op-ln .warn { color: #eab308; } .op-ln .usr { color: #a7f3d0; }
.op-cursor { display: inline-block; width: 8px; height: 15px; background: #34d399; vertical-align: -2px; animation: op-blink 1.1s steps(1) infinite; }
@keyframes op-blink { 50% { opacity: 0; } }

/* ---------- server strip ---------- */
.op-servers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 22px 30px 8px; max-width: 1100px; margin: 0 auto; }
.op-srv { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 13px 15px; background: rgba(255,255,255,.03); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-srv:hover { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.06); }
.op-srv b { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.op-srv small { display: block; font-size: 11px; color: #8ba398; margin-top: 3px; }
.op-ms { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #6ee7b7; }

/* ---------- sections (shared) ---------- */
.op-sec { max-width: 1100px; margin: 0 auto; padding: 54px 30px 6px; }
.op-sec-head { margin-bottom: 24px; }
.op-h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; margin-top: 10px; }
.op-h2 em { font-style: normal; color: #34d399; }
.op-sub { color: #8ba398; font-size: 15px; margin-top: 10px; max-width: 62ch; }
.op-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.op-span-all { grid-column: 1 / -1; }
/* ---------- ad slots ---------- */
.op-ad-slot { text-align: center; margin: 22px 0 6px; }
.op-ad { /* dashed placeholder used by the design mockup */
  margin: 22px 0 6px; border: 1px dashed rgba(255,255,255,.14); border-radius: 10px;
  padding: 28px 16px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #5f7268;
}

/* ---------- inner-page helpers ---------- */
.op-sec--tight { padding-top: 34px; }
.op-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* country cards (service index) */
.op-country { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.op-country:hover { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.05); transform: translateY(-2px); }
.op-country .flag-icon { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); flex-shrink: 0; }
.op-country-name { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #fff; flex: 1; min-width: 0; }
.op-country-name::before { content: "~/"; color: #5f7268; }

/* server node cards (service list) */
.op-node { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 16px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, background .2s; }
.op-node:hover { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.05); }
.op-node-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.op-node-top b { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.led--off { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: none; }
.op-node-host { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #5f7268; word-break: break-all; }
.op-node-meta { display: grid; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.op-node-meta span { color: #5f7268; }
.op-node-meta b { color: #8ba398; font-weight: 500; margin-left: 8px; }
.op-slots { height: 5px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.op-slots i { display: block; height: 100%; background: #10b981; }
.op-slots.full i { background: #ef4444; }
.op-slots-label { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #5f7268; }
.op-slots-label em { font-style: normal; color: #6ee7b7; }
.op-slots-label.full em { color: #fca5a5; }
.op-node .op-btn { justify-content: center; }
.op-node .op-btn.disabled { opacity: .45; pointer-events: none; }

/* pagination */
.op-pager { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.op-pager a, .op-pager span { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8ba398; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 8px; padding: 7px 12px; text-decoration: none; min-width: 36px; text-align: center; }
.op-pager a:hover { color: #6ee7b7; border-color: rgba(52,211,153,.5); }
.op-pager .on { color: #04110b; background: #10b981; border-color: #34d399; }
.op-pager .off { opacity: .35; pointer-events: none; }

/* forms */
.op-form { display: grid; gap: 18px; }
.op-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6ee7b7; margin-bottom: 7px; }
.op-label::before { content: "--"; color: #57534e; margin-right: 7px; }
.op-input, .op-select { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #e6ede9; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 11px 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.op-input:focus, .op-select:focus { border-color: #34d399; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.op-input::placeholder { color: #5f7268; }
.op-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #5f7268; margin-top: 6px; }
.op-form .op-btn { justify-content: center; }

/* alerts */
.op-alert { display: flex; gap: 10px; align-items: flex-start; border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.07); color: #fca5a5; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.6; border-radius: 10px; padding: 12px 14px; }
.op-alert::before { content: "✕"; flex-shrink: 0; }
.op-alert--ok { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.08); color: #6ee7b7; }
.op-alert--ok::before { content: "✓"; }

/* key-value rows (account result) */
.op-kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.op-kv span { color: #5f7268; }
.op-kv b { color: #cdd9d3; font-weight: 500; word-break: break-all; }

/* chip variants */
.op-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.op-chip--warn { color: #fca5a5; background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }

/* generic ▸ list (info sections) */
.op-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-list li { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8ba398; display: flex; gap: 8px; line-height: 1.6; }
.op-list li::before { content: "▸"; color: #10b981; flex-shrink: 0; }
.op-list + .op-list { margin-top: 8px; }
.op-list--warn li::before { content: "✕"; color: #ef4444; }

/* tables (tool results) */
.op-table-wrap { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); }
.op-table-wrap + .op-table-wrap { margin-top: 12px; }
.op-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.op-table th { text-align: left; color: #5f7268; font-weight: 500; font-size: 11px; letter-spacing: .06em; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); white-space: nowrap; }
.op-table td { color: #cdd9d3; padding: 10px 14px; border-bottom: 1px dashed rgba(255,255,255,.07); word-break: break-all; }
.op-table tr:last-child td { border-bottom: 0; }

/* radios + textarea */
.op-radios { display: grid; gap: 8px; }
.op-radio { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8ba398; cursor: pointer; }
.op-radio input { accent-color: #10b981; width: 15px; height: 15px; cursor: pointer; }
textarea.op-input { resize: vertical; min-height: 96px; }

/* ---------- benefits ---------- */
.op-card { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 20px; background: rgba(255,255,255,.03); transition: border-color .2s, background .2s; }
.op-card:hover { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.05); }
.op-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.op-chip { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6ee7b7; background: rgba(16,185,129,.1); border: 1px solid rgba(52,211,153,.25); padding: 4px 9px; border-radius: 7px; }
.op-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,.12); color: #34d399; flex-shrink: 0; }
.op-ico svg { width: 17px; height: 17px; }
.op-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.op-card p { font-size: 13.5px; line-height: 1.65; color: #8ba398; }

/* ---------- services ---------- */
.op-svc { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.03); overflow: hidden; transition: border-color .2s, background .2s, transform .2s; }
.op-svc:hover { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.05); transform: translateY(-3px); }
.op-svc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.op-svc-name { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #fff; }
.op-svc-name::before { content: "~/"; color: #5f7268; }
.op-srv-n { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #6ee7b7; border: 1px solid rgba(52,211,153,.25); background: rgba(16,185,129,.1); border-radius: 7px; padding: 3px 8px; white-space: nowrap; }
.op-svc ul { list-style: none; padding: 12px 16px; display: grid; gap: 7px; flex: 1; margin: 0; }
.op-svc li { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8ba398; display: flex; gap: 8px; }
.op-svc li::before { content: "▸"; color: #10b981; flex-shrink: 0; }
.op-svc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 16px 16px; padding: 10px 14px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.14); color: #cdd9d3;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.op-svc-btn:hover { border-color: rgba(52,211,153,.5); color: #6ee7b7; background: rgba(16,185,129,.07); }
.op-svc-btn svg { width: 14px; height: 14px; }

/* ---------- features ---------- */
.op-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.op-feat-item { display: flex; gap: 13px; align-items: flex-start; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 16px; background: rgba(255,255,255,.03); transition: border-color .2s, background .2s; }
.op-feat-item:hover { border-color: rgba(52,211,153,.4); background: rgba(16,185,129,.05); }
.op-feat-item h3 { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.op-feat-item h3::before { content: "## "; color: #10b981; }
.op-feat-item p { font-size: 12.5px; line-height: 1.6; color: #8ba398; }

/* ---------- about ---------- */
.op-about { max-width: 860px; margin: 0 auto; }
.op-about .op-term-body { font-size: 13px; }

/* ---------- cta ---------- */
.op-cta { max-width: 760px; margin: 0 auto; text-align: center; border: 1px solid rgba(52,211,153,.25); border-radius: 16px; padding: 46px 28px; background: rgba(16,185,129,.05); box-shadow: 0 0 60px rgba(16,185,129,.08) inset; }
.op-cta .op-h2 { margin-top: 12px; }
.op-cta p { color: #8ba398; font-size: 14.5px; margin: 12px auto 24px; max-width: 46ch; }
.op-cta .op-actions { justify-content: center; margin-top: 0; }

/* ---------- footer ---------- */
.op-foot { border-top: 1px solid rgba(255,255,255,.09); margin-top: 58px; padding: 40px 30px 0; }
.op-foot-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 28px; }
.op-foot-brand p { font-size: 13px; color: #8ba398; line-height: 1.65; margin: 12px 0 16px; max-width: 34ch; }
.op-social { display: flex; gap: 8px; }
.op-social a { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #8ba398; transition: color .2s, border-color .2s; }
.op-social a:hover { color: #6ee7b7; border-color: rgba(52,211,153,.5); }
.op-social svg { width: 15px; height: 15px; }
.op-foot-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: #5f7268; margin: 0 0 14px; }
.op-foot-col h4::before { content: "## "; color: #10b981; }
.op-foot-col ul { list-style: none; padding: 0; display: grid; gap: 9px; margin: 0; }
.op-foot-col a { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8ba398; text-decoration: none; }
.op-foot-col a:hover { color: #6ee7b7; }
.op-foot-col a::before { content: "→ "; color: #57534e; }
.op-stat { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.op-stat span { color: #8ba398; }
.op-stat b { color: #cdd9d3; font-weight: 500; }
.op-stat i { font-style: normal; font-size: 10.5px; color: #6ee7b7; background: rgba(16,185,129,.1); border: 1px solid rgba(52,211,153,.25); border-radius: 6px; padding: 2px 6px; margin-left: 7px; }
.op-partners { max-width: 1100px; margin: 30px auto 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.op-partners h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .08em; color: #5f7268; margin: 0 8px 0 0; }
.op-partners h4::before { content: "## "; color: #10b981; }
.op-partner { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #8ba398; text-decoration: none; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 6px 12px; transition: color .2s, border-color .2s; }
.op-partner:hover { color: #6ee7b7; border-color: rgba(52,211,153,.5); }
.op-foot-bar { max-width: 1100px; margin: 34px auto 0; padding: 15px 0 20px; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.op-foot-bar span { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #5f7268; }
.op-exit { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #5f7268; }
.op-exit b { color: #34d399; font-weight: 500; }

/* ---------- back to top ---------- */
.op-top-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,19,16,.9); color: #34d399;
  border: 1px solid rgba(52,211,153,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s, border-color .2s;
}
.op-top-btn.show { opacity: 1; pointer-events: auto; }
.op-top-btn:hover { border-color: rgba(52,211,153,.7); color: #6ee7b7; }
.op-top-btn svg { width: 16px; height: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .op-hero-row { grid-template-columns: 1fr; }
  .op-grid3, .op-feat { grid-template-columns: 1fr 1fr; }
  .op-grid4 { grid-template-columns: 1fr 1fr; }
  .op-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .op-path { display: none; }
  .op-burger { display: inline-flex; }
  .op-servers { grid-template-columns: 1fr 1fr; }
  .op-term { margin: 22px 18px 0; }
  .op-hero-row, .op-servers, .op-sec, .op-foot { padding-left: 18px; padding-right: 18px; }
  .op-hero-row .op-term { margin: 0; }
  .op-grid3, .op-feat { grid-template-columns: 1fr; }
  .op-grid4 { grid-template-columns: 1fr; }
  .op-kv { grid-template-columns: 110px 1fr; }
  .op-foot-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 480px) {
  .op-status-pill { display: none; }
  .op-note { font-size: 10px; }
}