:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --ink:#172033;
  --muted:#667085;
  --line:#d9deea;
  --blue:#2f6fec;
  --green:#0e9f6e;
  --orange:#f59e0b;
  --red:#dc2626;
  --purple:#7c3aed;
  --soft-blue:#eaf1ff;
  --soft-green:#eafaf3;
  --soft-orange:#fff7e6;
  --soft-purple:#f3edff;
  --soft-red:#fff1f1;
  --radius:18px;
  --shadow:0 14px 40px rgba(23,32,51,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
.oc-topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.oc-brand{display:flex;align-items:center;gap:12px;font-weight:800}.oc-eye{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;box-shadow:var(--shadow)}
.oc-nav{display:flex;gap:8px;flex-wrap:wrap}.oc-nav a,.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;color:var(--ink);font-weight:650;cursor:pointer}.oc-nav a:hover,.btn:hover{border-color:var(--blue);text-decoration:none}.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.oc-wrap{max-width:1240px;margin:0 auto;padding:28px 20px}.hero{background:linear-gradient(135deg,#fff,var(--soft-blue));border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow)}.hero h1{margin:0 0 8px;font-size:42px;letter-spacing:-.04em}.hero p{margin:0;color:var(--muted);font-size:17px;max-width:760px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:22px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.card h2,.card h3{margin:0 0 8px}.card p{color:var(--muted);line-height:1.5}.card-blue{background:var(--soft-blue)}.card-green{background:var(--soft-green)}.card-orange{background:var(--soft-orange)}.card-purple{background:var(--soft-purple)}.card-red{background:var(--soft-red)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}.search{min-width:260px;flex:1;border:1px solid var(--line);border-radius:999px;padding:11px 14px;font-size:15px;background:#fff}.select{border:1px solid var(--line);border-radius:999px;padding:11px 14px;background:#fff;font-size:15px}
.table-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f8faff;font-size:13px;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}tr:hover td{background:#fbfcff}.mono{font-family:"SFMono-Regular",Consolas,monospace;font-size:13px}.badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;background:#eef2ff;color:#3538cd}.badge-active{background:#eafaf3;color:#027a48}.badge-review{background:#fff7e6;color:#b54708}.badge-bad{background:#fff1f1;color:#b42318}
.node-head{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}.node-title h1{margin:0;font-size:34px;letter-spacing:-.03em}.node-title p{margin:6px 0 0;color:var(--muted)}.glyph-preview{min-width:86px;height:86px;border-radius:24px;background:linear-gradient(135deg,#fff,var(--soft-purple));border:1px solid var(--line);display:grid;place-items:center;font-size:42px;box-shadow:var(--shadow)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;font-weight:700}.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}.lens{display:none}.lens.active{display:block}.kv{display:grid;grid-template-columns:minmax(140px,240px) 1fr;border-bottom:1px solid var(--line)}.kv div{padding:10px 12px}.kv .k{font-weight:750;color:var(--muted);background:#fbfcff}.jsonbox{white-space:pre-wrap;background:#101828;color:#e9efff;border-radius:18px;padding:18px;overflow:auto;line-height:1.55;font-size:13px}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.empty{padding:20px;color:var(--muted);font-style:italic}.small{font-size:13px;color:var(--muted)}
@media(max-width:720px){.node-head{grid-template-columns:1fr}.hero h1{font-size:32px}.oc-topbar{align-items:flex-start;flex-direction:column}.kv{grid-template-columns:1fr}.kv .k{border-bottom:1px dashed var(--line)}}


/* Oculus v2: less cramped node overview + safer wrapping */
.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:22px;align-items:start;}
.card,.table-card,.hero{min-width:0;}
.kv{grid-template-columns:minmax(110px,38%) minmax(0,1fr);}
.kv div{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.45;}
.mono,.node-id,.jsonbox{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
.summary-list{display:grid;gap:10px;margin-top:10px;}
.summary-item{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(217,222,234,.85);padding:8px 0;}
.summary-item:last-child{border-bottom:0;}
.summary-item .label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--muted);min-width:92px;}
.summary-item .value{font-weight:650;text-align:right;overflow-wrap:anywhere;word-break:break-word;}
.phrase{font-size:15px;color:var(--muted);line-height:1.55;margin-top:6px;}
.edge-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#eef2ff;color:#3538cd;padding:4px 9px;font-weight:750;font-size:12px;}
.spo{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;}
.spo .spo-node,.spo .spo-pred{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;min-width:0;overflow-wrap:anywhere;}
.spo .spo-pred{background:var(--soft-purple);font-weight:800;text-align:center;}
@media(max-width:780px){.spo{grid-template-columns:1fr}.summary-item{display:block}.summary-item .value{text-align:left;margin-top:4px}}


/* Oculus admin page */
.admin-user{display:inline-flex;align-items:center;border:1px solid var(--line);background:#f8faff;border-radius:999px;padding:8px 13px;color:var(--muted);font-weight:700;}
.admin-grid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:18px;margin-top:22px;align-items:start;}
.admin-side,.admin-main{min-width:0;}
.full-select{width:100%;border-radius:14px;}
.admin-main .jsonbox{min-height:420px;}
.admin-hero{background:linear-gradient(135deg,#fff,var(--soft-orange));}
@media(max-width:850px){.admin-grid{grid-template-columns:1fr}}

/* Oculus v3: Node Relations Lens */
.relations-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px;}
.relations-head h3{margin:0 0 4px;}
.relation-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.relation-stats span{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 11px;color:var(--muted);font-weight:700;}
.relation-stats b{color:var(--ink);}
.relation-tabs-lite{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;}
.relation-tabs-lite a{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 12px;color:var(--ink);font-weight:750;}
.relation-tabs-lite a:hover{border-color:var(--blue);text-decoration:none;}
.relations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;margin-bottom:18px;align-items:start;}
.relation-list{display:grid;gap:12px;margin-top:14px;}
.relation-row{border:1px solid rgba(217,222,234,.95);border-radius:18px;background:rgba(255,255,255,.86);padding:12px;box-shadow:0 8px 26px rgba(23,32,51,.05);min-width:0;}
.relation-row.outgoing{border-left:5px solid var(--green);}
.relation-row.incoming{border-left:5px solid var(--blue);}
.relation-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch;}
.relation-subject,.relation-object{min-width:0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;overflow-wrap:anywhere;}
.relation-predicate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line);border-radius:999px;background:var(--soft-purple);padding:8px 12px;min-width:126px;text-align:center;font-weight:850;}
.relation-predicate small{font-size:11px;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.04em;}
.relation-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;color:var(--muted);font-size:12px;}
.relation-node-link{font-weight:850;color:var(--ink);}
.relation-node-link:hover{color:var(--blue);}
.relation-section{margin-top:18px;}
.relation-section > h3{margin-top:0;}
.relation-group{border:1px solid var(--line);border-radius:18px;background:#fff;margin-top:12px;overflow:hidden;}
.relation-group summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;font-weight:850;background:#f8faff;}
.relation-group summary b{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:var(--soft-blue);color:var(--blue);font-size:13px;}
.relation-group .relation-list{padding:14px;margin:0;}
@media(max-width:840px){
  .relations-head{display:block;}
  .relation-stats{justify-content:flex-start;margin-top:12px;}
  .relations-grid{grid-template-columns:1fr;}
  .relation-main{grid-template-columns:1fr;}
  .relation-predicate{border-radius:14px;}
}

/* Oculus v3.1 — Predicate lens viewer */
.predicate-stats-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.big-stat{font-size:40px;font-weight:900;line-height:1;color:var(--blue);margin:8px 0;}
.mini-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.mini-list span{display:inline-flex;gap:5px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:13px;}
.subhead-small{font-size:14px;margin:14px 0 4px;color:var(--muted);}
.btn.btn-small{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:#fff;text-decoration:none;font-weight:800;color:var(--ink);white-space:nowrap;}
.btn.btn-small:hover{background:#f8faff;}
.wrap-id{white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
.predicate-table td,.predicate-table th{vertical-align:top;}
.predicate-preview{min-width:112px;min-height:80px;border:1px solid var(--line);border-radius:22px;background:var(--soft-purple);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;box-shadow:var(--shadow);text-align:center;padding:12px;}
.predicate-preview span{font-weight:900;color:var(--ink);}
.predicate-preview small{color:var(--muted);font-size:12px;}
.template-text{font-family:"SFMono-Regular",Consolas,monospace;overflow-wrap:anywhere;word-break:break-word;}
.mini-json{white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;overflow:auto;font-size:12px;line-height:1.5;}
.predicate-usage-row .relation-predicate{background:var(--soft-purple);}
@media(max-width:780px){.predicate-table th:nth-child(4),.predicate-table td:nth-child(4),.predicate-table th:nth-child(5),.predicate-table td:nth-child(5){display:none;}.predicate-preview{width:100%;}}


/* Oculus v8 — Numericals layer */
.numerical-stats .big-stat{color:var(--purple)}
.numerical-pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:var(--soft-orange);font-weight:800;font-size:12px;}
.domain-numerical, .kind-value_profile, .kind-band_profile{ }

/* Oculus consolidated admin/draft helpers — replaces oculus_v5.css and oculus_v8_1.css */
.oc-code {
  background: #0f172a;
  color: #e5e7eb;
  padding: 16px;
  border-radius: 16px;
  overflow: auto;
  min-height: 90px;
  max-height: 520px;
  line-height: 1.5;
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.oc-error-text { color: #b91c1c; }
.oc-readable-list { line-height: 1.8; color: #475569; }
.oc-readable-list li { margin: .45rem 0; }
.oc-readable-list code { background: rgba(15,23,42,.06); padding: 2px 6px; border-radius: 7px; }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.oc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
button.oc-btn { cursor: pointer; font: inherit; }
button.oc-btn:disabled { opacity: .6; cursor: wait; }

/* Oculus v8.2C — Graph family review + predicate coverage */
.review-stack{display:grid;gap:14px;margin-top:14px}.review-family{border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}.review-family summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:#f8faff}.review-family summary b{font-size:16px}.review-family summary small{display:block;margin-top:4px;color:var(--muted);font-weight:700}.review-family-body{padding:18px}.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0}.meta-grid>div{border:1px solid var(--line);border-radius:16px;background:#fbfcff;padding:12px;min-width:0}.meta-grid b{display:block;margin-bottom:8px}.predicate-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.predicate-mini{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px 12px;min-width:0;overflow-wrap:anywhere}.predicate-mini small{color:var(--muted);font-size:12px;line-height:1.35}.review-list{display:grid;gap:10px;margin-top:12px;max-height:520px;overflow:auto;padding-right:4px}.review-item{border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px 12px;overflow-wrap:anywhere}.spo-line{line-height:1.5}.spo-line span{color:var(--muted);font-weight:700}.alert-soft{border:1px solid #fed7aa;background:#fff7ed;color:#9a3412;border-radius:16px;padding:12px;margin:12px 0}.alert-soft .pill-row{margin-top:8px}.review-item .mono,.review-family .mono{white-space:normal;overflow-wrap:anywhere;word-break:break-word}


/* Oculus step 1 cleanup — concept pages, graph pages, cache-safe UI helpers */
.btn.primary { background: var(--blue); color:#fff; border-color:var(--blue); }
.btn.primary:hover { background:#245dd1; color:#fff; text-decoration:none; }
.btn.small, .btn.btn-small { font-size:12px; padding:6px 10px; }
.oc-input{width:100%;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff;color:var(--ink);font:inherit;min-height:42px;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:18px;}
.mini-stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);min-width:0;}
.mini-stat b{display:block;font-size:30px;line-height:1;font-weight:900;letter-spacing:-.03em;color:var(--blue);overflow-wrap:anywhere;}
.mini-stat span{display:block;margin-top:6px;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;}
.kv-table-lite{display:grid;gap:10px;}
.kv-table-lite>div{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;min-width:0;}
.kv-table-lite b{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.kv-table-lite span{display:block;overflow-wrap:anywhere;word-break:break-word;}
.id-chip{display:inline-flex;align-items:center;max-width:100%;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:850;vertical-align:middle;overflow-wrap:anywhere;word-break:break-word;line-height:1.2;}
.id-chip.ok{background:#eafaf3;color:#027a48;border:1px solid #b7ebd0;}
.id-chip.missing{background:#fff7e6;color:#b54708;border:1px solid #fed7aa;}
.concept-page-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:18px;align-items:start;margin-top:20px;}
.concept-sections{display:grid;gap:18px;min-width:0;}
.concept-sidebar{display:grid;gap:18px;position:sticky;top:90px;align-self:start;min-width:0;}
.concept-subject{padding:0;overflow:hidden;}
.concept-subject h2{margin:0;padding:16px 18px;background:linear-gradient(135deg,#fff,var(--soft-blue));border-bottom:1px solid var(--line);font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere;}
.concept-preds{display:grid;gap:14px;padding:16px 18px;}
.concept-predicate{border:1px solid var(--line);border-radius:18px;background:#fbfcff;overflow:hidden;}
.predicate-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:900;overflow-wrap:anywhere;}
.concept-predicate ul{list-style:none;margin:0;padding:10px 14px;display:grid;gap:8px;}
.concept-predicate li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 11px;line-height:1.4;overflow-wrap:anywhere;}
.raw-panel pre,#rawTriples{white-space:pre-wrap;overflow:auto;max-height:520px;background:#101828;color:#e9efff;border-radius:16px;padding:14px;font-size:12px;line-height:1.5;}
.graph-page .hero,.page-graph-page .hero{margin-bottom:18px;}
.graph-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.graph-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.graph-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end;margin:18px 0;}
.graph-toolbar label{display:grid;gap:6px;color:var(--muted);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;}
.graph-toolbar button{align-self:end;min-height:42px;justify-content:center;}
.graph-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:18px;align-items:start;margin-top:18px;}
.graph-panel{min-width:0;padding:0;overflow:hidden;}
.graph-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:#fbfcff;}
.graph-panel-head h3{margin:0 0 4px;}
.graph-layout-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.graph-control-divider{width:1px;height:28px;background:var(--line);display:inline-block;}
.graph-zoom-label{font-weight:900;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;min-width:64px;text-align:center;}
.cy-box{height:min(68vh,680px);min-height:420px;background:#fff;position:relative;}
.graph-empty{display:grid;place-items:center;height:100%;}
.graph-inspector{position:sticky;top:90px;min-width:0;}
.graph-messages{display:grid;gap:10px;margin:12px 0;}
.graph-messages .card,.graph-messages .alert-soft{margin:0;}
@media(max-width:920px){.concept-page-layout,.graph-shell{grid-template-columns:1fr}.concept-sidebar,.graph-inspector{position:static}.graph-hero,.graph-panel-head{display:block}.graph-hero-actions,.graph-layout-controls{justify-content:flex-start;margin-top:12px}.cy-box{height:520px}}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr}.concept-subject h2{font-size:19px}.graph-toolbar{grid-template-columns:1fr}.cy-box{min-height:380px;height:420px}}

/* v8.5C — numerical draft review helpers */
.oc-filter-card { margin: 18px 0; }
.oc-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.oc-filter-row label { display: grid; gap: 6px; font-size: 0.86rem; color: #475569; min-width: 150px; }
.oc-filter-row input,
.oc-filter-row select { border: 1px solid #cbd5e1; border-radius: 12px; padding: 9px 10px; background: #fff; color: #0f172a; }
.oc-filter-row input[type="search"] { min-width: 220px; }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.big-stat { font-size: 1.55rem; font-weight: 800; margin: 0.3rem 0 0; color: #0f172a; }
.compact-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.compact-tabs button { border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.compact-tabs button.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.draft-review-content { margin-top: 14px; }
.oc-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.oc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.oc-table th,
.oc-table td { padding: 10px 12px; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.oc-table th { background: #f8fafc; color: #334155; font-weight: 800; }
.oc-table tr:last-child td { border-bottom: 0; }
.id-chip { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 0.8rem; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; overflow-wrap: anywhere; max-width: 280px; }
.id-chip.ok { border-color: #86efac; background: #f0fdf4; color: #166534; }
.id-chip.warn { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.empty-note { color: #64748b; padding: 12px 4px; }
.small-code { font-size: 0.82rem; max-height: 520px; overflow: auto; }
@media (max-width: 700px) {
  .oc-filter-row label { min-width: 100%; }
  .oc-filter-row input[type="search"] { min-width: 100%; }
}

/* v8.6 — SQLite health dashboard */
.health-hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.health-summary .card { min-height:120px; }
.health-list { display:grid; gap:10px; }
.health-item { border:1px solid #e2e8f0; background:#f8fafc; border-radius:14px; padding:10px 12px; }
.health-badge { display:inline-flex; align-items:center; border-radius:999px; padding:3px 9px; font-size:.78rem; font-weight:800; border:1px solid #cbd5e1; background:#f8fafc; color:#334155; text-transform:uppercase; letter-spacing:.02em; }
.health-badge.ok { border-color:#86efac; background:#f0fdf4; color:#166534; }
.health-badge.warn { border-color:#fcd34d; background:#fffbeb; color:#92400e; }
.health-badge.bad { border-color:#fca5a5; background:#fef2f2; color:#991b1b; }
.health-okline { border:1px solid #86efac; background:#f0fdf4; color:#166534; border-radius:14px; padding:10px 12px; font-weight:700; }
.card-teal { background: linear-gradient(135deg, #ecfeff, #f0fdfa); border-color:#99f6e4; }
@media(max-width:780px){ .health-hero { display:block; } .health-hero .hero-actions{ margin-top:12px; justify-content:flex-start; } }


/* Oculus v8.7 predicate validation */
.toolbar-wrap{flex-wrap:wrap;gap:12px}
.field-inline{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--muted)}
.field-inline input,.field-inline select{min-width:160px;border:1px solid var(--line);border-radius:16px;padding:10px 13px;background:white;font:inherit;color:var(--ink)}
.field-inline.grow{flex:1;min-width:280px}
.compact-grid .card h2{font-size:32px;margin-bottom:4px}
.stack-list{display:flex;flex-direction:column;gap:9px}
.pill-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.id-chip.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.id-chip.bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.id-chip.ok{background:#ecfdf5;border-color:#bbf7d0;color:#166534}
.ok-box{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:16px;padding:12px 14px;font-weight:700}
.oc-error-text{color:#991b1b}

/* Oculus v8.8 — Navigation + Guides Hub */
.oc-nav-simple {
  gap: 8px;
  flex-wrap: wrap;
}
.oc-nav a.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.eyebrow {
  margin: 0 0 8px;
  color: #2563eb;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
}
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: center;
}
.hero-note {
  border: 1px solid rgba(148, 163, 184, .35);
  background: rgba(255,255,255,.72);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.hero-note h3 { margin-top: 0; }
.hub-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.hub-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hub-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hub-card {
  display: block;
  padding: 24px;
  min-height: 158px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, .32);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 18px 45px rgba(15,23,42,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
  border-color: rgba(37, 99, 235, .28);
}
.hub-card h2 { margin: 7px 0 8px; }
.hub-card p { margin-bottom: 0; color: #526178; line-height: 1.55; }
.hub-kicker {
  color: #2563eb;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
}
.section-card {
  margin-top: 24px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 16px 45px rgba(15,23,42,.055);
}
.section-card h2:first-child { margin-top: 0; }
.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.route-card {
  background: rgba(248,250,252,.86);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 18px;
  padding: 16px;
}
.route-card h3 { margin: 0 0 6px; }
.route-card p { margin: 0; color: #526178; line-height: 1.5; }
.guide-page .hero { margin-bottom: 22px; }
.guide-list { line-height: 1.75; color: #334155; }
.flow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.flow-steps > div {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(248,250,252,.86);
}
.flow-steps p { margin-bottom: 0; color: #526178; }
.code-block {
  display: block;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.28);
  background: #f8fafc;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .94rem;
  line-height: 1.55;
}
@media (max-width: 760px) {
  .hero-split { grid-template-columns: 1fr; }
  .oc-topbar { align-items: flex-start; }
  .oc-nav-simple { justify-content: flex-start; }
}

/* v8.8B — Static help content viewer */
.guide-group{margin-top:26px}.guide-group>h2{margin:0 0 14px;font-size:24px;letter-spacing:-.02em}.help-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}.help-sidebar{position:sticky;top:90px}.help-sidebar h2{margin:0 0 14px}.help-nav{display:grid;gap:8px}.help-nav a{display:block;border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;color:var(--ink);font-weight:750;line-height:1.3}.help-nav a:hover{text-decoration:none;border-color:var(--blue)}.help-nav a.active{background:var(--ink);border-color:var(--ink);color:#fff}.help-side-actions{margin-top:14px}.help-content{padding:0;overflow:hidden}.help-doc{padding:30px;max-width:920px}.help-doc h1{font-size:40px;line-height:1.05;letter-spacing:-.04em;margin:0 0 12px}.help-doc p{color:var(--muted);line-height:1.65;font-size:16px}.help-section{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.help-section h2{margin:0 0 10px;font-size:24px;letter-spacing:-.02em}.help-section ul,.help-section ol{line-height:1.7;color:var(--muted)}.help-section li{margin:4px 0}.help-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.help-flow div{border:1px solid var(--line);background:#fbfcff;border-radius:16px;padding:14px;min-width:0}.help-flow b{display:block;margin-bottom:6px}.help-flow span{display:block;color:var(--muted);line-height:1.45}.help-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}.help-table th,.help-table td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.help-table th{background:#f8faff;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em}.help-code{white-space:pre-wrap;overflow:auto;background:#101828;color:#e9efff;border-radius:16px;padding:14px;line-height:1.55;font-size:13px}.help-doc code{background:#eef2ff;border-radius:7px;padding:2px 5px;color:#3538cd;font-weight:700}
@media(max-width:860px){.help-layout{grid-template-columns:1fr}.help-sidebar{position:static}.help-doc{padding:22px}.help-doc h1{font-size:32px}}


/* v10A MySQL health helpers */
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 9px; font-size:12px; font-weight:800; border:1px solid var(--line, #d8e0ea); background:#f8fafc; }
.pill.ok { color:#166534; background:#ecfdf5; border-color:#bbf7d0; }
.pill.warn { color:#92400e; background:#fffbeb; border-color:#fde68a; }
.compact-table td, .compact-table th { padding:8px 10px; font-size:13px; }

/* v10A.1 MySQL installer states */
.pill.info { color:#1d4ed8; background:#eff6ff; border-color:#bfdbfe; }
.pill.bad { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
.actions-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
.oc-error-text{color:#b91c1c;}


/* v10D.4 stability aliases: support older admin pages while layout is consolidated. */
.oculus-topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.oculus-topbar .brand,.oculus-topbar .oc-brand{display:flex;align-items:center;gap:12px;font-weight:850;color:var(--ink)}
.oculus-topbar nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.oculus-topbar nav a{display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;color:var(--ink);font-weight:750;text-decoration:none}
.oculus-topbar nav a:hover{border-color:var(--blue)}
.logo-dot{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:var(--shadow)}
.logo-dot:after{content:'◉';color:#fff;font-size:15px}
.oculus-shell,.oculus-admin-wrap{max-width:1440px;margin:0 auto;padding:28px 22px}
.hero-card{background:linear-gradient(135deg,#fff,var(--soft-blue));border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:var(--shadow);margin:0 0 24px}
.hero-card h1{margin:0 0 10px;font-size:42px;letter-spacing:-.04em;color:#071a36}
.hero-card p{color:var(--muted);font-size:17px;line-height:1.55;max-width:980px}
.oculus-grid{display:grid;gap:18px}.oculus-grid.four{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.stat-card span{display:block;color:var(--muted);font-weight:800}.stat-card strong{display:block;font-size:30px;margin-top:8px;color:var(--ink)}
.actions-card{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:anywhere}.data-table th{background:#f8faff;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.raw-json{white-space:pre-wrap;background:#101828;color:#e9efff;border-radius:18px;padding:18px;overflow:auto;line-height:1.55;font-size:13px;max-height:520px}
.muted{color:var(--muted)}.muted-pill{background:#f8fafc;color:#53617a;border:1px solid var(--line)}.pill.warn{background:#fff7e6;color:#b54708;border-color:#fed7aa}
.oc-admin-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}.oc-admin-subnav a{display:inline-flex;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;color:var(--ink);font-weight:750;text-decoration:none}.oc-admin-subnav a:hover{border-color:var(--blue)}
.oc-status-ok{color:#047857}.oc-status-warn{color:#b54708}.oc-status-bad{color:#b42318}
@media(max-width:720px){.oculus-topbar{align-items:flex-start;flex-direction:column}.hero-card h1{font-size:32px}}

/* ===== Oculus v10D.6 compatibility layout layer =====
   New MySQL admin tools use oc-* classes. Older CSS used card/grid aliases.
   These rules make all admin/public pages compact and centered consistently. */
:root{
  --oc-bg: var(--bg,#f6f7fb);
  --oc-panel: var(--panel,#ffffff);
  --oc-ink: var(--ink,#172033);
  --oc-muted: var(--muted,#667085);
  --oc-line: var(--line,#d9deea);
  --oc-blue: var(--blue,#2f6fec);
  --oc-green: var(--green,#0e9f6e);
  --oc-orange: var(--orange,#f59e0b);
  --oc-purple: var(--purple,#7c3aed);
  --oc-soft-blue: var(--soft-blue,#eaf1ff);
  --oc-soft-green: var(--soft-green,#eafaf3);
  --oc-soft-orange: var(--soft-orange,#fff7e6);
  --oc-soft-purple: var(--soft-purple,#f3edff);
  --oc-radius: var(--radius,18px);
  --oc-shadow: var(--shadow,0 14px 40px rgba(23,32,51,.08));
}

.oc-shell{
  width:min(100% - 36px, 1360px);
  margin:0 auto;
  padding:28px 0 42px;
}

.oc-hero{
  background:linear-gradient(135deg,#fff,var(--oc-soft-blue));
  border:1px solid var(--oc-line);
  border-radius:28px;
  padding:30px 34px;
  box-shadow:var(--oc-shadow);
  margin:0 0 22px;
}
.oc-hero h1{margin:.15rem 0 .55rem;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em;line-height:1.05;color:var(--oc-ink)}
.oc-hero p{margin:.35rem 0;color:var(--oc-muted);font-size:1rem;line-height:1.55;max-width:920px}
.oc-kicker{margin:0 0 .45rem!important;color:var(--oc-blue)!important;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem!important}

.oc-card{
  background:var(--oc-panel);
  border:1px solid var(--oc-line);
  border-radius:var(--oc-radius);
  padding:20px 22px;
  box-shadow:var(--oc-shadow);
  margin:0;
}
.oc-card h2{margin:0 0 .8rem;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.025em;color:var(--oc-ink)}
.oc-card p{color:var(--oc-muted);line-height:1.55}

.oc-grid{display:grid;gap:18px;margin:22px 0}
.oc-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.oc-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.oc-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}

.soft-blue,.oc-card.soft-blue{background:linear-gradient(135deg,#fff,var(--oc-soft-blue))}
.soft-green,.oc-card.soft-green{background:linear-gradient(135deg,#fff,var(--oc-soft-green))}
.soft-yellow,.soft-orange,.oc-card.soft-yellow,.oc-card.soft-orange{background:linear-gradient(135deg,#fff,var(--oc-soft-orange))}
.soft-purple,.oc-card.soft-purple{background:linear-gradient(135deg,#fff,var(--oc-soft-purple))}

.stat-card{min-height:122px;display:flex;flex-direction:column;justify-content:space-between}
.stat-card h2{font-size:.92rem!important;text-transform:uppercase;letter-spacing:.055em;color:#5c6a83;margin-bottom:.45rem!important}
.big-stat,.resolver-big{font-size:clamp(2rem,3vw,3rem)!important;font-weight:950;letter-spacing:-.05em;color:#081a33;line-height:1}

.oc-btn,button.oc-btn,a.oc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid var(--oc-line);background:#fff;color:var(--oc-ink);
  border-radius:999px;padding:.72rem 1rem;font-weight:850;line-height:1.1;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgba(16,24,40,.02);
}
.oc-btn:hover,a.oc-btn:hover{border-color:var(--oc-blue);background:#f8fbff;text-decoration:none}
.oc-btn.primary,button.oc-btn.primary{background:var(--oc-blue);border-color:var(--oc-blue);color:#fff}
.oc-btn.ghost,a.oc-btn.ghost{background:#fff;color:var(--oc-ink);border-color:var(--oc-line)}
.oc-toolbar,.resolver-toolbar{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.oc-toolbar label,.resolver-toolbar label{font-weight:800;color:var(--oc-ink)}
.oc-toolbar input,.oc-toolbar select,.resolver-toolbar input,.resolver-toolbar select{border:1px solid var(--oc-line);border-radius:14px;padding:.65rem .75rem;background:#fff;color:var(--oc-ink)}
.oc-pill{display:inline-flex;align-items:center;border:1px solid #d7e1f2;border-radius:999px;padding:.48rem .78rem;background:#fff;font-weight:850;color:#0e274a;font-size:.9rem}

.notice{border:1px solid #d7e1f2;background:#f8fbff;border-radius:16px;padding:.85rem 1rem;margin:.8rem 0;color:var(--oc-muted)}
.notice.ok{border-color:#9ee7bd;background:#effdf5;color:#067647}.notice.bad{border-color:#fecaca;background:#fff1f2;color:#b42318}
.muted{color:var(--oc-muted)!important}.small{font-size:.9rem}.mono,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.jsonbox,.resolver-json,.oc-code{white-space:pre-wrap;overflow:auto;max-height:520px;background:#0b1020;color:#e5e7eb;border-radius:18px;padding:18px;font-size:13px;line-height:1.55}
.edge-summary{display:grid;gap:.15rem}.edge-summary .row{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #e8eef7;padding:.62rem 0}.edge-summary .row strong{color:#061a34}

.resolver-table-wrap{overflow:auto;border:1px solid #dbe4f2;border-radius:18px;background:#fff}.resolver-table{width:100%;border-collapse:collapse;min-width:1120px}.resolver-table th{background:#f5f7fb;color:#50617d;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:14px 16px}.resolver-table td{border-top:1px solid #e8eef7;padding:14px 16px;vertical-align:top}.resolver-table tr:hover td{background:#fbfdff}.resolver-main{font-size:16px;font-weight:950;color:#071a3b}.resolver-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#4a5d7a;margin-top:4px;overflow-wrap:anywhere}.resolver-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:950;border:1px solid #d6dfed;background:#fff}.resolver-badge.good{color:#027a48;background:#ecfdf3;border-color:#abefc6}.resolver-badge.warn{color:#b54708;background:#fffaeb;border-color:#fedf89}.resolver-badge.bad{color:#b42318;background:#fef3f2;border-color:#fecdca}.resolver-badge.info{color:#175cd3;background:#eff8ff;border-color:#b2ddff}.resolver-badge.neutral{color:#344054;background:#f8fafc;border-color:#d6dfed}

.oc-topbar .oc-nav a.active,.oc-topbar .admin-nav a.active{background:#111a2e;color:#fff;border-color:#111a2e;text-decoration:none}

@media (max-width: 1100px){.oc-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-shell{width:min(100% - 24px, 980px)}}
@media (max-width: 760px){.oc-topbar{align-items:flex-start;flex-direction:column}.oc-grid.two,.oc-grid.three,.oc-grid.four{grid-template-columns:1fr}.oc-shell{width:min(100% - 18px, 100%);padding-top:18px}.oc-hero{padding:24px 20px}.oc-card{padding:18px}.oc-toolbar,.resolver-toolbar{align-items:stretch;flex-direction:column}.oc-btn,button.oc-btn,a.oc-btn{width:100%}}

/* v10D.7 health/installer compact stability */
.table-scroll{width:100%;overflow:auto;border-radius:14px;border:1px solid var(--oc-line, var(--line));background:#fff}
.table-scroll .oc-table{min-width:720px;margin:0;border:0}
.table-scroll .oc-table th,.table-scroll .oc-table td{white-space:normal;overflow-wrap:anywhere}
.kv-table-lite{width:100%;border-collapse:collapse}
.kv-table-lite th,.kv-table-lite td{padding:10px 12px;border-bottom:1px solid var(--oc-line, var(--line));text-align:left;vertical-align:top}
.kv-table-lite th{width:34%;color:var(--oc-muted, var(--muted));font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;background:#f8faff}
.oc-code{white-space:pre-wrap;background:#0b1220;color:#e9efff;border-radius:16px;padding:16px;overflow:auto;line-height:1.5;font-size:13px;max-height:520px}
.oc-check{display:flex;align-items:center;gap:8px;margin:12px 0;color:var(--oc-muted, var(--muted));font-weight:700}
.oc-error-text{color:#b42318}

/* v13O — unified top navigation with grouped menus */
.oc-nav-unified{align-items:center;gap:8px;flex-wrap:wrap}
.oc-nav-group{position:relative;display:inline-flex;align-items:center}
.oc-nav-group-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;color:var(--ink);font-weight:750;cursor:pointer;font:inherit;line-height:1.15}
.oc-nav-group-btn:hover,.oc-nav-group:focus-within .oc-nav-group-btn,.oc-nav-group:hover .oc-nav-group-btn{border-color:var(--blue);text-decoration:none}
.oc-nav-group.active .oc-nav-group-btn{background:#111a2e;color:#fff;border-color:#111a2e}
.oc-nav-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:235px;padding:8px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 20px 45px rgba(23,32,51,.16);display:none;z-index:1000}
.oc-nav-group:hover .oc-nav-menu,.oc-nav-group:focus-within .oc-nav-menu{display:grid;gap:5px}
.oc-nav-menu a,.oc-nav a.oc-nav-menu-item{display:flex;justify-content:flex-start;border:0;border-radius:12px;background:transparent;padding:9px 10px;font-weight:750;color:var(--ink);white-space:normal;text-align:left}
.oc-nav-menu a:hover,.oc-nav a.oc-nav-menu-item:hover{background:#f4f7ff;text-decoration:none;color:var(--blue)}
.oc-nav-menu a.active{background:#111a2e;color:#fff}
.oc-topbar .oc-nav a.active,.oc-topbar .admin-nav a.active{background:#111a2e;color:#fff;border-color:#111a2e;text-decoration:none}
@media(max-width:900px){.oc-nav-menu{position:static;box-shadow:none;margin-top:6px}.oc-nav-group{display:grid}.oc-nav-group:hover .oc-nav-menu,.oc-nav-group:focus-within .oc-nav-menu{display:grid}.oc-nav-group-btn{justify-content:space-between}.oc-topbar{align-items:flex-start;flex-direction:column}}