/* Lark216 tools theme: navy/black, blue borders, gold accents. Applied to every
   page that uses includes/header.php without landing.css (weather, converter,
   drive time, networking, domain & DNS, PowerShell toolkit, sub-tools, auth).
   Mirrors the look of landing.css; everything is scoped to body.tool. */
body.tool {
    --bg: #050813; --bg2: #0a1020;
    --surface: #0d1730;
    --border: rgba(90,162,255,.2); --border2: rgba(90,162,255,.4);
    --muted: #aab6cc;
    --gold: #e0b24a;
    --edge: #1c2f55;
}
html:has(body.tool), body.tool {
    background: radial-gradient(1400px 800px at 50% -10%, rgba(61,134,240,.16), transparent 60%), linear-gradient(180deg, #050813, #0a1020 60%, #070a14);
    background-attachment: fixed; background-color: #070a14;
}

/* Navbar (same as landing) */
body.tool .navbar { background: rgba(5,8,19,.88); border-bottom: 1px solid rgba(90,162,255,.2); }
body.tool .logo-216 { color: #3d86f0; }
body.tool .nav-links a { color: #3d86f0; font-weight: 600; padding: .5rem .2rem; border-bottom: 2px solid #3d86f0; }
body.tool .nav-links a:hover { text-decoration: none; filter: brightness(1.2); }

/* Hero banner: card art, full-bleed, fading into the page */
.thero { position: relative; overflow: hidden; min-height: 170px; display: flex; align-items: flex-end; isolation: isolate;
    background: #050813 var(--img, none) var(--pos, center) / cover no-repeat; }
.thero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,8,19,.78) 0%, rgba(5,8,19,.4) 50%, rgba(5,8,19,.05) 85%), linear-gradient(180deg, rgba(5,8,19,0) 40%, #070a14 100%); }
.thero-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.6rem 20px 1.1rem; }
.thero-back { display: inline-block; margin-bottom: .5rem; color: #7ec4ff; font-size: .85rem; font-weight: 600; }
.thero h1 { margin: 0; font-size: 2.6rem; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.thero-sub { margin-top: .35rem; color: #b9d3ff; font-size: 1.05rem; font-weight: 500; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
@media (max-width: 700px) { .thero { min-height: 140px; } .thero h1 { font-size: 2rem; } .thero-inner { padding-left: 1rem; padding-right: 1rem; } }

/* Page body: widen a little, hero supplies the title */
body.tool .page { max-width: 1100px; padding-top: 1rem; }

/* Cards */
body.tool .card, body.tool #drivetime, body.tool .tool-card {
    border: 1px solid var(--edge);
    background: linear-gradient(135deg, #0d1730 0%, #080c16 75%);
    box-shadow: 0 0 0 1px rgba(5,8,19,.9), 0 10px 28px rgba(0,0,0,.4);
    border-radius: 14px;
}
body.tool .card h2 { color: #fff; }
body.tool .tool-card:hover { border-color: #5aa2ff; box-shadow: 0 0 0 1px rgba(5,8,19,.9), 0 16px 36px rgba(0,0,0,.5), 0 0 24px rgba(90,162,255,.22); transform: translateY(-3px); }
body.tool .tool-card h2 { color: #fff; }
body.tool .tool-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 1.6rem; border-radius: 12px; background: rgba(90,162,255,.1); border: 1px solid rgba(90,162,255,.3); }
body.tool .tool-grid { gap: .9rem; }
body.tool .subtle { color: var(--muted); }

/* KPI tiles */
body.tool .kpi, body.tool #drivetime .dt-card, body.tool #drivetime .dt-reco {
    background: rgba(90,162,255,.06); border: 1px solid rgba(90,162,255,.25); border-radius: 12px;
}
body.tool .kpi .value { color: #fff; }
body.tool .kpi .label { color: #7ec4ff; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 600; }

/* Tables */
body.tool table { border-collapse: separate; border-spacing: 0; }
body.tool th { color: #7ec4ff; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid rgba(90,162,255,.3); }
body.tool td { border-bottom: 1px solid rgba(255,255,255,.07); }
body.tool tbody tr:hover td { background: rgba(90,162,255,.05); }
body.tool .sticky-col { background: #0a1224; }

/* Inputs, buttons */
body.tool input, body.tool select, body.tool textarea,
body.tool #drivetime input, body.tool #drivetime select { background: #0a1020; border: 1px solid rgba(90,162,255,.28); }
body.tool input:focus, body.tool select:focus, body.tool textarea:focus,
body.tool #drivetime input:focus, body.tool #drivetime select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,178,74,.15); }
body.tool input[type="checkbox"], body.tool input[type="radio"] { accent-color: #5aa2ff; }
body.tool button, body.tool #drivetime button { border: 1px solid rgba(126,196,255,.5); background: linear-gradient(135deg, #5aa2ff, #2f6bff); box-shadow: 0 8px 22px rgba(47,107,255,.25); }
body.tool button.btn-secondary, body.tool #drivetime .dt-secondary { background: rgba(90,162,255,.07); border: 1px solid rgba(90,162,255,.3); box-shadow: none; }
body.tool button.btn-secondary:hover, body.tool #drivetime .dt-secondary:hover { border-color: #7ec4ff; background: rgba(90,162,255,.16); }
body.tool .form-group label, body.tool #drivetime label { color: #aab6cc; }

/* Badges */
body.tool .badge-ok { background: rgba(47,191,113,.18); color: #6ee7b0; border: 1px solid rgba(47,191,113,.5); }
body.tool .badge-fail { background: rgba(255,107,107,.15); color: #ffb4b4; border: 1px solid rgba(255,107,107,.5); }
body.tool .badge-info { background: rgba(90,162,255,.15); color: #8fc2ff; border: 1px solid rgba(90,162,255,.5); }
body.tool .badge-warn { background: rgba(224,178,74,.12); color: var(--gold); border: 1px solid rgba(224,178,74,.45); }

/* Misc blocks */
body.tool .mono-block { background: #0a1020; border: 1px solid rgba(90,162,255,.25); }
body.tool .radarWrap { border: 1px solid var(--edge); border-radius: 12px; }
body.tool .finding-list li { border-bottom-color: rgba(255,255,255,.07); }
body.tool .call-list-item:hover { border-color: #5aa2ff; }
body.tool .call-list-item.active { border-color: var(--gold); background: rgba(224,178,74,.07); }