:root { --ink:#0d2c52; --muted:#6c88aa; --blue:#087fdd; --line:#b8d4ee; --paper:#fff; --wash:#f4f9fd; --archive:#8b5e34; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#f8fcff; font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.ambient-texture { position:fixed; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(240,249,255,.35)); }
.orb { fill:#cceaff; opacity:.42; transform-box:fill-box; transform-origin:center; animation:orb-drift 24s ease-in-out infinite alternate; }
.orb-b,.orb-f,.orb-h { fill:#a9d9fb; opacity:.25; animation-duration:31s; animation-direction:alternate-reverse; }
.orb-c,.orb-e,.orb-i { fill:#e0f2ff; opacity:.68; animation-duration:37s; }
.orb-d,.orb-g { fill:#b8e0fc; opacity:.34; animation-duration:29s; animation-delay:-9s; }
.orb-a { animation-delay:-15s; }
@keyframes orb-drift { 0%{transform:translate(-2px,-1px) scale(.96)} 50%{transform:translate(3px,2px) scale(1.06)} 100%{transform:translate(-1px,4px) scale(1)} }
.landing { position:relative; z-index:1; min-height:100svh; overflow:hidden; background:transparent; isolation:isolate; }
.topbar { position:relative; z-index:5; width:100%; height:112px; padding:30px 2.2vw; display:flex; align-items:flex-start; justify-content:space-between; }
.brand { color:var(--ink); text-decoration:none; font-size:clamp(32px,3.3vw,52px); line-height:1; font-weight:900; letter-spacing:-.055em; }
.db-state { margin-top:8px; color:#7895b4; font-size:12px; opacity:.9; }
.db-state i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#f0b429; }
.db-state.ready i { background:#30b884; }
.hero { position:relative; z-index:2; width:100%; min-height:calc(100svh - 112px); }
.search-area { position:absolute; z-index:3; top:30%; left:2.2vw; width:min(58%,920px); transform:none; }
.search-area h1 { margin:0 0 7px; font-size:18px; font-weight:750; letter-spacing:-.01em; opacity:0; }
.search-area>p { margin:0 0 18px; color:var(--muted); opacity:0; }
.search-box { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; min-height:84px; padding:7px 8px 7px 24px; border:2px solid #aecdec; border-radius:20px; background:rgba(255,255,255,.96); box-shadow:0 8px 30px rgba(34,105,162,.07); }
.search-box:focus-within { border-color:#7eb4e5; box-shadow:0 0 0 5px rgba(8,127,221,.1),0 10px 34px rgba(34,105,162,.1); }
.search-box svg { width:29px; fill:none; stroke:#6c8db5; stroke-linecap:round; stroke-width:2.3; }
.search-box input { min-width:0; padding:16px 0; border:0; outline:0; color:var(--ink); background:transparent; font-size:clamp(17px,1.55vw,23px); }
.search-box input::placeholder { color:#819bbb; opacity:1; }
.search-box button { min-width:142px; align-self:stretch; padding:0 24px; border:0; border-radius:14px; color:#fff; background:linear-gradient(145deg,#1289e5,#0574d2); font-size:18px; cursor:pointer; box-shadow:0 6px 14px rgba(5,116,210,.18); }
.search-box button:hover { background:linear-gradient(145deg,#087fdd,#0568bd); }
.advanced-toggle { display:flex; align-items:center; gap:8px; margin:11px 0 0 14px; padding:4px 1px; border:0; border-bottom:1px dashed #7da3c7; color:#557a9e; background:transparent; font-size:13px; cursor:pointer; }
.advanced-toggle i { font-style:normal; font-size:16px; transition:transform .18s ease; }
.advanced-toggle[aria-expanded="true"] i { transform:rotate(180deg); }
.advanced-panel { margin-top:12px; }
.advanced-panel[hidden] { display:none; }
.advanced-panel .filters { margin:0; box-shadow:0 12px 32px rgba(34,105,162,.1); }
.owl { position:absolute; z-index:2; right:-1.5%; bottom:1%; width:min(48vw,650px); height:auto; filter:drop-shadow(0 16px 12px rgba(27,73,119,.12)); }
.catalog { position:relative; z-index:1; max-width:1120px; min-height:50vh; margin:0 auto; padding:34px 24px 72px; background:transparent; }
.filters { display:flex; gap:18px; margin-bottom:20px; padding:18px; border:1px solid #d7e5f2; border-radius:14px; background:#fff; }
.filters label { flex:1; color:var(--muted); font-size:12px; font-weight:700; }
.filters select,.filters input { display:block; width:100%; margin-top:5px; padding:10px; border:1px solid #cdddec; border-radius:8px; color:var(--ink); background:#fbfdff; }
.summary { min-height:28px; margin:0 2px 10px; color:var(--muted); }
.result { display:grid; grid-template-columns:1fr auto; gap:18px; margin-bottom:10px; padding:22px 24px; border:0; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 6px 22px rgba(49,104,149,.09); cursor:pointer; transition:transform .15s,box-shadow .15s; }
.result:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(16,42,67,.13); }
.result h2 { margin:0 0 6px; font-size:18px; }
.result p { margin:0; color:var(--muted); }
.badges { display:flex; align-items:flex-start; gap:6px; }
.badge { padding:4px 8px; border-radius:999px; color:#0568bd; background:#e5f4ff; font-size:11px; font-weight:800; text-transform:uppercase; }
.badge.catalog-badge { text-transform:none; }
.badge.archive { color:var(--archive); background:#f7efe8; }
.pagination { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:24px; }
.pagination button { min-width:40px; padding:8px 10px; border:1px solid #cdddec; border-radius:8px; color:var(--ink); background:#fff; cursor:pointer; }
.pagination button.active { color:#fff; border-color:var(--blue); background:var(--blue); }
.empty { padding:50px 20px; border:1px dashed #b8cee2; border-radius:12px; color:var(--muted); text-align:center; }
dialog { width:min(1640px,calc(100% - 48px)); max-height:94vh; padding:0; border:1px solid rgba(174,205,236,.8); border-radius:22px; color:var(--ink); background:
  radial-gradient(circle at 92% 12%,rgba(169,217,251,.28) 0 150px,transparent 151px),
  radial-gradient(circle at 5% 95%,rgba(204,234,255,.42) 0 210px,transparent 211px),
  linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,253,.98));
  box-shadow:0 30px 90px rgba(13,44,82,.32); }
dialog::backdrop { background:rgba(13,44,82,.56); backdrop-filter:blur(5px); }
.close { position:absolute; z-index:5; top:18px; right:20px; width:40px; height:40px; border:1px solid #c9dff2; border-radius:12px; background:rgba(255,255,255,.94); color:#557a9e; font-size:27px; line-height:1; cursor:pointer; box-shadow:0 5px 16px rgba(34,105,162,.1); }
.close:hover { color:#fff; border-color:var(--blue); background:var(--blue); }
#detailsBody { position:relative; z-index:1; padding:36px 42px 46px; }
.doc-header { display:flex; justify-content:space-between; align-items:flex-start; gap:70px; padding-right:48px; }
.doc-eyebrow { color:var(--muted); font-size:11px; letter-spacing:.09em; font-weight:700; }
.doc-header h2 { margin:7px 0 0; font-size:34px; line-height:1.1; font-weight:650; letter-spacing:-.025em; }
.doc-status { display:flex; align-items:center; gap:7px; flex:none; margin-top:3px; padding:8px 12px; border-radius:9px; color:#287557; background:#e4f2eb; font-size:13px; font-weight:650; }
.doc-status i { width:7px; height:7px; border-radius:50%; background:currentColor; }
.doc-status.inactive { color:#8b5e34; background:#f3e9df; }
.doc-title { max-width:780px; margin:14px 0 20px; font-size:17px; line-height:1.5; }
.doc-actions { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:25px; }
.doc-actions a,.doc-actions button { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:9px 13px; border:1px solid #c9dff2; border-radius:10px; color:var(--ink); background:rgba(255,255,255,.9); text-decoration:none; font:inherit; cursor:pointer; }
.doc-actions .doc-primary { color:#fff; border-color:var(--blue); background:linear-gradient(145deg,#1289e5,#0574d2); }
.doc-metrics { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:24px; border:1px solid #d7e5f2; border-radius:14px; background:rgba(255,255,255,.9); overflow:hidden; box-shadow:0 6px 22px rgba(49,104,149,.06); }
.doc-metrics div { padding:16px 18px; border-right:1px solid #d7e5f2; }
.doc-metrics div:last-child { border:0; }
.doc-metrics small,.family-heading small { display:block; margin-bottom:5px; color:#68737b; font-size:11px; }
.doc-metrics strong { font-size:15px; font-weight:650; }
.doc-layout { display:grid; grid-template-columns:minmax(0,1fr) 315px; gap:18px; align-items:start; }
.doc-content,.doc-family { border:1px solid #d7e5f2; border-radius:14px; background:rgba(255,255,255,.92); overflow:hidden; box-shadow:0 8px 26px rgba(49,104,149,.07); }
.doc-content section { padding:21px 23px; border-bottom:1px solid #d7e5f2; }
.doc-content h3,.family-heading h3 { margin:0 0 10px; font-size:14px; font-weight:650; }
.doc-content p { margin:0; color:#68737b; line-height:1.6; overflow-wrap:anywhere; }
.doc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; margin:0; }
.doc-grid dt { margin-bottom:5px; color:#68737b; font-size:11px; }
.doc-grid dd { margin:0; font-size:14px; overflow-wrap:anywhere; }
.doc-tags { display:flex; flex-wrap:wrap; gap:7px; }
.doc-tags span { padding:6px 9px; border-radius:7px; color:#557a9e; background:#edf7ff; font-size:12px; }
.reference-groups { display:grid; gap:17px; }
.reference-groups h4 { margin:0 0 8px; color:#68737b; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.reference-links { display:flex; flex-wrap:wrap; gap:7px; }
.reference-links button { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid #dce6ef; border-radius:8px; color:#176596; background:#f4f9fd; font-size:12px; cursor:pointer; }
.reference-links button:hover { color:#fff; border-color:#176596; background:#176596; }
.reference-links button span { font-size:10px; opacity:.7; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section-heading h3 { margin:0; }
.section-heading>span { display:grid; place-items:center; min-width:25px; height:23px; padding:0 7px; border-radius:999px; color:#557a9e; background:#e7f4fd; font-size:11px; }
.relation-list { display:grid; gap:8px; }
.relation-list>div { padding:11px 12px; border-radius:9px; color:#355779; background:#f1f8fd; overflow-wrap:anywhere; }
.relation-list small { display:block; margin-bottom:4px; color:#a76f22; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.all-fields dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; border:1px solid #dce9f4; border-radius:10px; overflow:hidden; }
.all-fields dl>div { min-width:0; padding:12px 13px; border-right:1px solid #dce9f4; border-bottom:1px solid #dce9f4; }
.all-fields dl>div:nth-child(2n) { border-right:0; }
.all-fields dl>div:nth-last-child(-n+2) { border-bottom:0; }
.all-fields dt { margin-bottom:5px; color:#68737b; font-size:11px; font-weight:650; }
.all-fields dt small { display:block; margin-top:2px; color:#9a9289; font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.all-fields dd { margin:0; color:#303a40; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.all-fields a { color:#0874c9; }
.field-json { max-height:180px; margin:0; padding:10px; font-size:10px; }
.doc-raw { margin:0; padding:18px 23px; }
.doc-raw summary { cursor:pointer; color:#68737b; }
.family-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:17px 18px 15px; border-bottom:1px solid #d7e5f2; }
.family-heading h3 { margin:0; font-size:15px; }
.family-heading>span { display:grid; place-items:center; min-width:26px; height:24px; border-radius:999px; color:#557a9e; background:#e7f4fd; font-size:11px; }
.doc-family ol { position:relative; list-style:none; margin:0; padding:8px 0; }
.doc-family ol::before { content:""; position:absolute; top:26px; bottom:26px; left:51px; width:1px; background:#cfe2f2; }
.doc-family li { position:relative; }
.doc-family li button { position:relative; z-index:1; display:grid; grid-template-columns:48px 1fr; gap:10px; width:100%; padding:10px 14px; border:0; color:#182026; background:transparent; text-align:left; cursor:pointer; }
.doc-family li button:hover { background:#f1f8fd; }
.doc-family li button>span { padding:2px 0; color:#68737b; background:#fff; font-size:11px; }
.doc-family b { display:block; font-size:12px; font-weight:650; }
.doc-family small { display:block; margin-top:2px; color:#68737b; font-size:10px; }
.doc-family li.current button { background:#eaf5fd; }
.doc-family li.current b,.doc-family li.current small { color:#287557; }
.detail-title { padding-right:30px; font-size:28px; line-height:1.2; }
.detail-grid { display:grid; grid-template-columns:150px 1fr; gap:10px 20px; margin-top:24px; }
.detail-grid dt { color:var(--muted); font-weight:700; }
.detail-grid dd { margin:0; word-break:break-word; }
details { margin-top:24px; }
pre { max-height:320px; overflow:auto; padding:16px; border-radius:10px; color:#d9e2ec; background:#102a43; font:12px/1.55 ui-monospace,monospace; white-space:pre-wrap; }
@media (max-width:850px) {
  dialog { width:calc(100% - 24px); max-height:96vh; border-radius:16px; }
  .topbar { height:92px; padding-top:26px; }
  .db-state { display:none; }
  .hero { min-height:calc(100svh - 92px); display:flex; flex-direction:column; }
  .search-area { position:relative; top:auto; left:auto; order:1; width:auto; margin:8vh 24px 0; transform:none; }
  .owl { right:-6%; bottom:-4%; width:min(68vw,500px); }
  .search-box { min-height:76px; grid-template-columns:28px 1fr auto; padding-left:18px; }
  .search-box svg { width:25px; }
  .search-box button { min-width:120px; }
  #detailsBody { padding:28px 18px 36px; }
  .doc-header { display:block; padding-right:45px; }
  .doc-status { display:inline-flex; margin-top:14px; }
  .doc-metrics { grid-template-columns:1fr 1fr; }
  .doc-metrics div:nth-child(2) { border-right:0; }
  .doc-metrics div:nth-child(-n+2) { border-bottom:1px solid #e8e0d5; }
  .doc-layout { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .brand { font-size:36px; }
  .search-area { margin:4vh 16px 0; }
  .search-area h1,.search-area>p { opacity:1; }
  .search-box { min-height:64px; grid-template-columns:24px 1fr; padding:7px 8px 7px 15px; border-radius:16px; }
  .search-box input { padding:11px 0; font-size:15px; }
  .search-box button { grid-column:1/-1; min-height:48px; border-radius:11px; font-size:16px; }
  .owl { right:-16%; bottom:-4%; width:min(92vw,480px); }
  .catalog { padding-inline:14px; }
  .filters { flex-direction:column; gap:10px; }
  .result { grid-template-columns:1fr; }
  .badges { grid-row:1; }
  .detail-grid { grid-template-columns:1fr; gap:2px; }
  .doc-header h2 { font-size:28px; }
  .doc-grid { grid-template-columns:1fr; }
  .all-fields dl { grid-template-columns:1fr; }
  .all-fields dl>div { border-right:0; }
  .all-fields dl>div:nth-last-child(-n+2) { border-bottom:1px solid #eee7de; }
  .all-fields dl>div:last-child { border-bottom:0; }
}