/* 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; }
}

/* ---------- Landing ---------- */
.hero { position: relative; background: var(--top2); color: var(--top-tx); border-bottom: 2px solid var(--blue); overflow: hidden; }
.hero-map { position: absolute; inset: 0; background: url("tools/assets/geoview-preview.webp") center / cover no-repeat; opacity: .16; filter: grayscale(1); }
.hero-in { position: relative; max-width: 1100px; margin: 0 auto; padding: 26px 16px 24px; }
.hero .logo-xl { font: italic bold clamp(34px, 6vw, 56px)/1 var(--font); letter-spacing: -1px; color: #fff; }
body.theme-dark .hero .logo-xl { color: #57b4f0; }
.hero .rule { width: min(200px, 50%); height: 3px; margin: 8px 0 10px; background: linear-gradient(90deg, var(--blue) 0 40%, rgba(255,255,255,.25) 40% 100%); transform: skewX(-20deg); }
.hero p { margin: 0; font-size: 13px; color: var(--top-dim); letter-spacing: .3px; }
.entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.entry { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--bd); text-decoration: none; color: var(--tx); }
.entry:hover { border-color: var(--blue); }
.entry-h { display: flex; align-items: center; gap: 12px; background: var(--hdr); border-bottom: 1px solid var(--bd); padding: 10px 14px; }
.entry-h h2 { margin: 0; font-size: 19px; color: var(--blue); }
.entry-h small { display: block; color: var(--tx3); font-size: 12px; }
.entry-b { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.entry-b p { margin: 0; color: var(--tx2); }
.entry-b .btn { align-self: flex-start; margin-top: auto; }
.ico { flex: none; width: 32px; height: 32px; background: var(--blue); box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; display: grid; place-items: center; color: #fff; font: bold 15px var(--font); }
.badge { font-size: 10px; letter-spacing: .6px; font-weight: bold; border: 1px solid currentColor; padding: 1px 5px; margin-left: auto; }
.badge.red { color: #b3261e; } .badge.green { color: #2e7d4f; }
body.theme-dark .badge.red { color: #f08c6f; } body.theme-dark .badge.green { color: #6fd08c; }

/* ---------- Admin login ---------- */
.login-wrap { flex: 1; display: grid; place-items: center; padding: 30px 14px; }
.login { width: min(400px, 100%); background: var(--panel); border: 1px solid var(--bd); }
.login-h { background: var(--top); color: #fff; padding: 16px 18px 14px; border-bottom: 3px solid var(--blue); }
.login-h .logo { font-size: 30px; }
.login-h div { color: var(--top-dim); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; margin-top: 4px; }
.login form { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tx2); font-weight: bold; }
.login input[type=text], .login input[type=password] { font: 14px var(--font); padding: 8px; border: 1px solid var(--btn-bd); background: var(--panel2); color: var(--tx); border-radius: 0; }
.login .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.login .chk { flex-direction: row; align-items: center; font-weight: normal; }
.login .btn-primary { justify-content: center; padding: 9px; font-size: 13px; font-weight: bold; }
.login .btn-primary[disabled] { opacity: .7; cursor: wait; }
.msg { border: 1px solid; padding: 8px 10px; font-size: 12px; }
.msg.err { color: #8a1c14; background: #fbe9e7; border-color: #e0a59d; }
.msg.info { color: #173b78; background: #e7eefb; border-color: #a9bfe6; }
body.theme-dark .msg.err { color: #f4b4a8; background: #2a1512; border-color: #6b2c22; }
body.theme-dark .msg.info { color: #a9cdf5; background: #111d2b; border-color: #26476d; }
.msg[hidden] { display: none; }
.login-f { border-top: 1px solid var(--bd); padding: 10px 18px; font-size: 11px; color: var(--tx3); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.linkbtn { background: none; border: none; padding: 0; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; }

@media (max-width: 760px) {
  .entries { grid-template-columns: 1fr; }
  .top-actions .dup { display: none; }
  .hero-in { padding: 18px 16px 16px; }
}

/* ---------- How it works ---------- */
.lead { font-size: 14px; color: var(--tx2); margin: 0 0 16px; max-width: 760px; }
.sec { margin: 22px 0 10px; font-size: 12px; font-weight: bold; letter-spacing: .8px; color: var(--hdr-tx, #2d3e55); text-transform: uppercase; border-bottom: 1px solid var(--bd); padding-bottom: 5px; }
body.theme-dark .sec { color: #57b4f0; }
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow .node { background: var(--panel); border: 1px solid var(--bd); padding: 10px 12px; min-width: 150px; flex: 1; }
.flow .node b { display: block; color: var(--blue); } .flow .node small { color: var(--tx3); }
.flow .arr { display: grid; place-items: center; padding: 0 8px; color: var(--tx3); font-size: 18px; }
.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { counter-increment: s; background: var(--panel); border: 1px solid var(--bd); padding: 9px 12px 9px 48px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 12px; top: 9px; width: 22px; height: 22px; background: var(--blue); color: #fff; font-weight: bold; display: grid; place-items: center; font-size: 12px; }
.steps li b { display: block; }
.kv2 { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--bd); }
.kv2 th, .kv2 td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--bd2); vertical-align: top; }
.kv2 th { width: 32%; color: var(--tx2); font-weight: bold; background: var(--panel2); }
.faq details { background: var(--panel); border: 1px solid var(--bd); padding: 8px 12px; margin-bottom: 6px; }
.faq summary { cursor: pointer; font-weight: bold; } .faq details p { margin: 8px 0 2px; color: var(--tx2); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) {
  .grid3 { grid-template-columns: 1fr; }
  .flow { flex-direction: column; } .flow .arr { padding: 2px 0; transform: rotate(90deg); }
}

/* ---------- Company homepage ---------- */
html { scroll-behavior: smooth; }
.home .wrap { max-width: 1100px; margin: 0 auto; padding: 0 18px; }
.sitenav { position: sticky; top: 0; z-index: 30; }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a { color: var(--top-tx); text-decoration: none; font-size: 13px; padding: 7px 11px; }
.menu a:hover { background: rgba(255,255,255,.08); }
.menu .menu-cta { background: var(--blue); color: #fff; margin: 0 6px; }
.menu .menu-cta:hover { background: var(--blue-d); }
.menu-btn { display: none; background: none; border: 1px solid #4a5b70; color: var(--top-tx); font: 12px var(--font); padding: 4px 9px; cursor: pointer; }
.btn-lg { padding: 10px 18px; font-size: 14px; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

.h-hero { position: relative; background: #14202c; color: #fff; overflow: hidden; }
.h-hero-bg { position: absolute; inset: 0; background: url("tools/assets/geoview-preview.webp") center / cover no-repeat; opacity: .28; filter: grayscale(.6) contrast(1.05); }
.h-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,32,44,.95) 0%, rgba(20,32,44,.75) 55%, rgba(20,32,44,.35) 100%); }
.h-hero-in { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 84px 18px 80px; }
.h-kicker { font: italic bold 15px var(--font); letter-spacing: 1px; color: #8fb6e8; border-left: 3px solid var(--blue); padding-left: 10px; margin-bottom: 16px; }
.h-hero h1 { margin: 0 0 14px; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; font-weight: bold; max-width: 680px; }
.h-hero p { margin: 0 0 24px; font-size: 16px; color: #c9d3df; max-width: 560px; }
.h-cta { display: flex; gap: 10px; flex-wrap: wrap; }

.h-stats { background: var(--blue); color: #fff; }
.h-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.h-stats .wrap > div { padding: 16px 10px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.h-stats .wrap > div:last-child { border-right: none; }
.h-stats b { display: block; font-size: 26px; line-height: 1.1; } .h-stats span { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .85; }

.h-sec { padding: 56px 0; background: var(--panel2); }
.h-sec.alt { background: var(--bg); }
.h-label { font-size: 11px; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.h-sec h2 { margin: 0 0 18px; font-size: 28px; }
.h-sec p { color: var(--tx2); font-size: 15px; line-height: 1.6; }
.h-split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.h-figure { display: block; border: 1px solid var(--bd); background: var(--panel); text-decoration: none; }
.h-figure img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.h-figure span { display: block; padding: 7px 10px; font-size: 12px; color: var(--tx3); border-top: 1px solid var(--bd); }
.h-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.h-card { background: var(--panel2); border: 1px solid var(--bd); border-top: 3px solid var(--blue); padding: 18px; display: flex; flex-direction: column; }
.h-card-h { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.h-card h3, .h-tool h3 { margin: 0; font-size: 20px; color: var(--blue); }
.h-card small { color: var(--tx3); }
.h-card p { margin: 6px 0 16px; font-size: 14px; }
.h-card-f { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.h-tool { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; background: var(--panel); border: 1px solid var(--bd); padding: 18px; }
.h-tool-img img { display: block; width: 100%; border: 1px solid var(--bd); }
.h-tool h3 span { color: var(--tx); font-weight: normal; }
.h-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.h-steps > div { background: var(--panel2); border: 1px solid var(--bd); padding: 18px; }
.h-steps span { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--blue); color: #fff; font-weight: bold; }
.h-steps h3 { margin: 10px 0 6px; font-size: 17px; } .h-steps p { margin: 0; font-size: 14px; }
.h-band { background: var(--top2); color: #fff; padding: 30px 0; }
.h-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.h-band h2 { margin: 0 0 4px; font-size: 22px; } .h-band p { margin: 0; color: #c9d3df; }
.h-foot { background: var(--top); color: var(--top-dim); padding: 34px 0 14px; font-size: 13px; }
.h-foot .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 20px; }
.h-foot b { display: block; color: var(--top-tx); margin-bottom: 8px; }
.h-foot a { display: block; color: var(--top-dim); text-decoration: none; padding: 2px 0; } .h-foot a:hover { color: #fff; }
.h-foot .logo { font-size: 24px; } .h-foot p { margin: 6px 0 0; }
.h-foot .h-copy { display: block; border-top: 1px solid #33445a; margin-top: 22px; padding-top: 12px; font-size: 11px; }
body.theme-dark .h-hero-bg { filter: grayscale(1) invert(.85); }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--top); border-bottom: 2px solid var(--blue); padding: 6px 0; }
  .menu-open .menu { display: flex; }
  .menu a, .menu .menu-cta { padding: 11px 18px; margin: 0; }
  .menu #btn-theme { margin: 8px 18px; align-self: flex-start; }
  .h-hero-in { padding: 54px 18px 50px; }
  .h-stats .wrap { grid-template-columns: 1fr 1fr; }
  .h-stats .wrap > div:nth-child(2) { border-right: none; } .h-stats .wrap > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.2); }
  .h-split, .h-cards, .h-tool, .h-steps { grid-template-columns: 1fr; }
  .h-sec { padding: 40px 0; } .h-sec h2 { font-size: 24px; }
  .h-foot .wrap { grid-template-columns: 1fr 1fr; }
}
.h-sec { scroll-margin-top: 44px; }
/* homepage v2 */
.h-intro { margin: -8px 0 22px; max-width: 640px; }
.h-values { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.h-values li { border-left: 3px solid var(--blue); background: var(--panel); padding: 8px 12px; }
.h-values b { display: block; } .h-values span { color: var(--tx2); font-size: 13px; }
.h-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.h-svc { background: var(--panel2); border: 1px solid var(--bd); padding: 18px; }
.h-svc h3 { margin: 12px 0 6px; font-size: 17px; } .h-svc p { margin: 0; font-size: 14px; }
.svc-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--blue); color: #fff; font-weight: bold; box-shadow: inset 0 0 0 3px var(--blue), inset 0 0 0 5px #fff; }
.h-facts { list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; color: var(--tx2); border-top: 1px solid var(--bd2); }
.h-facts li { padding: 5px 0; border-bottom: 1px solid var(--bd2); } .h-facts b { display: inline-block; width: 70px; color: var(--tx); }
.h-check { list-style: none; padding: 0; margin: 0 0 16px; } .h-check li { padding: 4px 0 4px 22px; position: relative; color: var(--tx2); }
.h-check li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: bold; }
.h-faqwrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 30px; align-items: start; }
.h-contact { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: start; }
.h-cinfo { display: grid; gap: 10px; background: var(--top2); color: var(--top-tx); padding: 20px; }
.h-cinfo div { border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 8px; }
.h-cinfo b { display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #8fb6e8; } .h-cinfo span { font-size: 15px; }
.h-cinfo .btn { justify-self: start; }
.h-form { background: var(--panel); border: 1px solid var(--bd); padding: 20px; display: grid; gap: 12px; }
.h-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: bold; color: var(--tx2); }
.h-form input, .h-form select, .h-form textarea { font: 14px var(--font); padding: 8px; border: 1px solid var(--btn-bd); background: var(--panel2); color: var(--tx); border-radius: 0; }
.h-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-form .h-card-f { align-items: center; }
.muted { color: var(--tx3); } .small { font-size: 11px; }
.h-foot span { display: block; padding: 2px 0; }
@media (max-width: 860px) {
  .h-grid4 { grid-template-columns: 1fr 1fr; }
  .h-faqwrap, .h-contact, .h-form .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .h-grid4 { grid-template-columns: 1fr; } }