:root{
  --brand:#003761;
  --brand2:#005578;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#f8fafc;
  --panel:#fff;
  --border:#e2e8f0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.hidden{display:none}

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.site-header .wrap{
  max-width:1200px; margin:0 auto; padding:.6rem 1rem;
  display:flex; align-items:center; gap:1rem;
  flex-wrap:nowrap;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  white-space:nowrap;
}
.brand-link{display:flex;align-items:center}
.logo-sw{height:28px;display:block}
.divider{width:1px;height:24px;background:rgba(255,255,255,.35)}
.product-title{font-weight:800}

/* SEARCH */
.searchbar{
  position:relative;
  flex:1 1 360px;
  min-width:0;
  max-width:520px;
  margin-left:auto;
}
.searchbar input{
  width:100%;
  border:none;
  padding:.55rem .75rem;
  border-radius:.6rem;
  font-size:.95rem;
  outline:none;
}
.search-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--border);
  border-radius:.6rem; box-shadow:0 6px 20px rgba(0,0,0,.08);
  display:none; max-height: 55vh; overflow:auto; z-index:50;
}
.search-results .item{padding:.55rem .7rem; cursor:pointer;}
.search-results .item:hover{background:#f8fafc}
.search-results .id{font-weight:700;color:#0f172a}
.main-img {
  max-width: 800px;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}


/* LANG */
.lang{display:flex; gap:.35rem; flex:0 0 auto;}
.btn-lang{
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.15);
  color:#fff; border-radius:.5rem;
  padding:.25rem .55rem; cursor:pointer; font:inherit;
}
.btn-lang.active{background:#fff;color:#003761;font-weight:700}

/* ACTIONS */
.actions{display:flex; gap:.4rem; flex:0 0 auto;}
.btn{
  border:1px solid rgba(255,255,255,.5);
  background:transparent; color:#fff;
  border-radius:.6rem; padding:.45rem .7rem;
  cursor:pointer; font:inherit;
}

/* LAYOUT */
.main{
  max-width:1200px; margin:1rem auto;
  display:grid; grid-template-columns:280px 1fr;
  gap:1rem; padding:0 1rem;
}
.sidebar{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  height:calc(100vh - 140px);
  position:sticky; top:90px; overflow:auto;
}
.sidebar h3{margin:0 0 .8rem 0;color:var(--muted);font-size:.95rem}

/* TREE */
.tree{display:flex;flex-direction:column;gap:.55rem}
.tree-link{
  width:100%;
  text-align:left;
  padding:.45rem .6rem;
  border:1px solid var(--border);
  border-radius:.55rem;
  background:#fff;
  cursor:pointer;
  font:inherit;
}
.tree-link:hover{background:#eef2ff}
.tree-link.active{outline:2px solid rgba(37,99,235,.25); border-color:#93c5fd}

details{border:1px solid var(--border);border-radius:.6rem;background:#fff}
summary{padding:.5rem .6rem;cursor:pointer;font-weight:700;user-select:none}
.group{padding:.35rem .5rem .6rem .5rem;display:flex;flex-direction:column;gap:.2rem}
.group button{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:#fff;
  padding:.42rem .55rem;
  border-radius:.5rem;
  cursor:pointer;
  font:inherit;
}
.group button:hover{background:#eef2ff}
.group button.active{outline:2px solid rgba(37,99,235,.25); border-color:#93c5fd}

/* CONTENT */
.content{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem 1.25rem;
  min-height:calc(100vh - 120px);
}
.card h2{margin:.1rem 0 .5rem 0}
.kicker{color:#64748b;font-weight:600;margin:0}

/* FOOTER */
.footer{margin:1.5rem 0 2rem;text-align:center;color:#64748b}

/* RESPONSIVE */
@media (max-width: 900px){
  .site-header .wrap{ flex-wrap:wrap; }
  .searchbar{ flex-basis:100%; max-width:none; margin-left:0; }
  .actions{ width:100%; justify-content:flex-end; }
  .main{ grid-template-columns:1fr; }
  .sidebar{ position:static; height:auto; }
}