/* PRISLAB Tools — same visual language as GeoView (2015–2018 corporate/GIS). */
:root {
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --blue: #1f4e9c; --blue-d: #173b78;
  --top: #1d2b3a; --top2: #2d3e55; --top-tx: #e6e9ee; --top-dim: #9fb0c4;
  --bg: #e4e6e9; --panel: #f6f6f6; --panel2: #fff; --bd: #c3c6cb; --bd2: #d9dbde;
  --tx: #222; --tx2: #555; --tx3: #777; --hdr: #d9dde3; --btn: #f3f3f3; --btn-bd: #a9adb3; --btn-hov: #e3e6ea;
}
body.theme-dark {
  --top: #07090b; --top2: #11161c; --top-tx: #d6dee6; --top-dim: #6f8193;
  --bg: #0c0f12; --panel: #13171c; --panel2: #181d23; --bd: #2a3139; --bd2: #222930;
  --tx: #cfd7df; --tx2: #9aa7b4; --tx3: #6f7d8a; --hdr: #1b2229; --btn: #1a2027; --btn-bd: #34404c; --btn-hov: #222b34;
  --blue: #3d8fe0; --blue-d: #2b6fb5;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 13px/1.45 var(--font); color: var(--tx); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
a { color: var(--blue); }

#topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--top); color: var(--top-tx); padding: 5px 12px; border-bottom: 1px solid #000; }
.brand { display: flex; align-items: center; gap: 16px; color: inherit; text-decoration: none; min-width: 0; }
.logo { font: italic bold 28px/1 var(--font); letter-spacing: -.3px; color: #fff; }
body.theme-dark .logo { color: #57b4f0; }
.brand-sub { display: flex; flex-direction: column; border-left: 1px solid #45566b; padding-left: 12px; font-size: 11px; color: var(--top-dim); white-space: nowrap; }
.brand-sub b { color: var(--top-tx); font-size: 13px; letter-spacing: .3px; }
#crumbbar { background: var(--top2); color: var(--top-tx); border-bottom: 2px solid var(--blue); padding: 5px 14px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .4px; display: flex; gap: 8px; }
.crumb-home { color: var(--top-dim); text-decoration: none; } a.crumb-home:hover { color: #fff; }
.top-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .crumb-sep { color: var(--top-dim); }

.btn { display: inline-flex; align-items: center; font: 12px var(--font); color: var(--tx); background: var(--btn); border: 1px solid var(--btn-bd); border-radius: 2px; padding: 6px 12px; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--btn-hov); }
.btn-primary { background: var(--blue); border-color: var(--blue-d); color: #fff; } .btn-primary:hover { background: var(--blue-d); }
.btn-dark { padding: 4px 9px; font-size: 11px; background: transparent; color: var(--top-tx); border-color: #4a5b70; } .btn-dark:hover { background: rgba(255,255,255,.08); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #d9480f; outline-offset: 1px; }

.page { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 16px 16px 30px; }
.page-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--bd); padding-bottom: 10px; margin-bottom: 14px; }
.page-h h1 { margin: 0; font-size: 22px; }
.crumb { color: var(--tx3); }
.search { margin-left: auto; }
.search input { width: 260px; max-width: 100%; font: 13px var(--font); padding: 6px 8px; border: 1px solid var(--btn-bd); background: var(--panel2); color: var(--tx); border-radius: 0; }

.tools { display: flex; flex-direction: column; gap: 12px; }
.tool { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); background: var(--panel); border: 1px solid var(--bd); }
.tool-prev { display: block; border-right: 1px solid var(--bd); line-height: 0; background: #d6d6d2; }
.tool-prev img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
body.theme-dark .tool-prev img { filter: invert(.9) hue-rotate(180deg) saturate(.75) brightness(.95); }
.tool-body { padding: 14px 16px; display: flex; flex-direction: column; }
.tool-h { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--blue); padding-bottom: 8px; margin-bottom: 10px; }
.tool-h h2 { margin: 0; font-size: 20px; color: var(--blue); } .tool-h h2 span { color: var(--tx); font-weight: normal; }
.tool-meta { font-size: 12px; color: var(--tx3); } .ok { color: #2e7d4f; } body.theme-dark .ok { color: #6fd08c; }
.tool-ico { flex: none; width: 30px; height: 30px; background: var(--blue); box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; position: relative; }
.tool-ico::after { content: ""; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%); }
.tool-body p { margin: 0 0 10px; color: var(--tx2); }
.tags { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tags li { font-size: 11px; border: 1px solid var(--bd); background: var(--panel2); padding: 1px 7px; color: var(--tx2); }
.tool-actions { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.note { background: var(--panel2); border: 1px solid var(--bd); border-left: 3px solid var(--blue); padding: 8px 10px; }
.note[hidden] { display: none; }

#footer { display: flex; gap: 20px; flex-wrap: wrap; padding: 6px 14px; background: var(--top); color: var(--top-dim); font-size: 11px; border-top: 1px solid #000; }

@media (max-width: 760px) {
  .logo { font-size: 22px; } .brand-sub span { display: none; } .brand { gap: 10px; } .brand-sub { padding-left: 10px; }
  .top-actions .btn-dark { padding: 3px 7px; font-size: 11px; } #topbar { flex-wrap: nowrap; }
  .tool { grid-template-columns: 1fr; } .tool-prev { border-right: none; border-bottom: 1px solid var(--bd); }
  .search { margin-left: 0; width: 100%; } .search input { width: 100%; }
  #footer span + span { display: none; }
}