/* Temporarily hidden tools stay in the project so they can be re-enabled later. */
.temporarily-hidden { display: none !important; }


.tools-page { background: var(--bg); }
.tools-page .main-nav a[aria-current="page"] { color: var(--olive-light); }
.tools-hero { position: relative; min-height: 72vh; display: grid; align-items: center; overflow: hidden; padding: 8rem 0 4rem; background: radial-gradient(circle at 74% 32%, rgba(124,140,100,.18), transparent 28%), #0b0f14; }
.tools-grid-bg { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black 25%, transparent); }
.tools-hero-content { position: relative; z-index: 1; }
.tools-hero h1 { max-width: 850px; margin: 0; color: var(--white); font-size: clamp(3.8rem, 8vw, 8rem); line-height: .88; letter-spacing: -.07em; }
.tools-hero h1 span { color: var(--olive-light); }
.tools-hero-content > p:not(.eyebrow) { max-width: 720px; margin: 1.8rem 0; color: var(--muted); font-size: 1.08rem; }
.local-badge { display: inline-flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border: 1px solid rgba(166,181,140,.25); border-radius: 999px; background: rgba(124,140,100,.07); color: var(--text); font-size: .78rem; }
.local-badge > span:first-child { width: .5rem; height: .5rem; border-radius: 50%; background: var(--olive-light); box-shadow: 0 0 0 .25rem rgba(166,181,140,.09); }
.tools-overview { background: var(--bg); }
.tool-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tool-card { position: relative; min-height: 320px; display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.tool-card:hover { transform: translateY(-4px); border-color: rgba(166,181,140,.5); background: var(--panel-2); }
.tool-card-index { position: absolute; top: 1.35rem; right: 1.35rem; color: var(--olive-light); font-size: .72rem; letter-spacing: .16em; }
.tool-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 3rem; border: 1px solid rgba(166,181,140,.3); border-radius: .8rem; color: var(--olive-light); background: rgba(124,140,100,.09); font-size: 1.15rem; font-weight: 800; }
.tool-card h3 { margin: 0; color: var(--white); font-size: 1.45rem; }
.tool-card p { margin: .65rem 0 1.4rem; color: var(--muted); }
.tool-card strong { margin-top: auto; color: var(--olive-light); font-size: .82rem; }
.tool-card-muted { opacity: .72; }
.calculator-section { background: #10151b; border-block: 1px solid var(--line); }
.camo-section { background: #0c1116; }
.tool-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.tool-layout.reverse { grid-template-columns: .82fr 1.18fr; }
.tool-copy { position: sticky; top: 8rem; }
.tool-copy h2 { margin: 0; color: var(--white); font-size: clamp(2.7rem, 5vw, 5rem); line-height: .97; letter-spacing: -.05em; }
.tool-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.04rem; }
.calculator-panel { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.calculator-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.calculator-controls label { display: grid; gap: .45rem; color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.calculator-controls label:last-child { grid-column: span 2; }
.calculator-controls input, .calculator-controls select { width: 100%; min-height: 3.2rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: .65rem; outline: none; background: #10151b; color: var(--white); font-size: 1rem; text-transform: none; letter-spacing: normal; }
.calculator-controls input:focus, .calculator-controls select:focus { border-color: var(--olive); box-shadow: 0 0 0 3px rgba(124,140,100,.12); }
.input-unit { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--line); border-radius: .65rem; background: #10151b; overflow: hidden; }
.input-unit input { border: 0; border-radius: 0; background: transparent; }
.input-unit span { padding: 0 .9rem; color: var(--olive-light); font-size: .82rem; }
.weight-presets { margin-top: 1rem; }
.weight-presets > span { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .76rem; }
.weight-presets > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.weight-presets button { padding: .42rem .62rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; font-size: .76rem; }
.weight-presets button:hover, .weight-presets button.active { border-color: var(--olive); background: rgba(124,140,100,.12); color: var(--white); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: 1.5rem; }
.result-grid > div { padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #11171d; }
.result-grid small { display: block; margin-bottom: .35rem; color: var(--muted); }
.result-grid strong { color: var(--white); font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1; }
.result-grid span { margin-left: .3rem; color: var(--olive-light); font-size: .74rem; }
.tool-note { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.camo-controls { grid-template-columns: 1fr; }
.camo-controls label:last-child { grid-column: auto; }
.full-button { width: 100%; margin-top: 1rem; cursor: pointer; }
.camo-result { margin-top: 1.4rem; }
.result-label { display: block; margin-bottom: .6rem; color: var(--olive-light); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.camo-result-list { display: grid; gap: .65rem; }
.camo-result-list article { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #11171d; }
.camo-result-list small { grid-row: span 2; padding-top: .12rem; color: var(--olive-light); }
.camo-result-list strong { color: var(--white); }
.camo-result-list p { margin: .25rem 0 0; color: var(--muted); font-size: .86rem; }
.future-section { background: var(--bg); }
.future-card { padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(166,181,140,.22); border-radius: var(--radius); background: linear-gradient(135deg, rgba(124,140,100,.09), rgba(24,30,37,.9)); }
.future-card h2 { margin: 0; color: var(--white); font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; letter-spacing: -.05em; }
.future-card > p:not(.eyebrow) { max-width: 760px; color: var(--muted); }
.future-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.future-chips span { padding: .48rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.tools-page .footer-links a { color: var(--muted); font-size: .85rem; }
.tools-page .footer-links a:hover { color: var(--white); }
@media (max-width: 900px) { .tool-card-grid { grid-template-columns: 1fr; } .tool-layout, .tool-layout.reverse { grid-template-columns: 1fr; } .tool-copy { position: static; } }
@media (max-width: 640px) { .tools-hero { min-height: 68vh; padding-top: 7rem; } .tools-hero h1 { font-size: clamp(3.5rem, 16vw, 5rem); } .calculator-controls { grid-template-columns: 1fr; } .calculator-controls label:last-child { grid-column: auto; } .result-grid { grid-template-columns: 1fr; } .tool-card { min-height: 260px; } }

/* --------------------------------------------------------------------------
   Camo matcher
   -------------------------------------------------------------------------- */
.camo-matcher-panel { overflow: hidden; }
.camo-privacy-note { display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.4rem; padding: .85rem 1rem; border: 1px solid rgba(166,181,140,.22); border-radius: .8rem; background: rgba(124,140,100,.07); color: var(--text); font-size: .84rem; }
.camo-privacy-dot { flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .22rem; border-radius: 50%; background: var(--olive-light); box-shadow: 0 0 0 .24rem rgba(166,181,140,.08); }
.camo-photo-tip { margin-top: 1rem !important; font-size: .86rem !important; }
.camo-dropzone { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; border: 1px dashed rgba(166,181,140,.38); border-radius: 1rem; outline: none; background: linear-gradient(145deg, rgba(124,140,100,.07), rgba(13,17,23,.6)); cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.camo-dropzone:hover, .camo-dropzone:focus-visible, .camo-dropzone.is-dragging { border-color: var(--olive-light); background: rgba(124,140,100,.10); }
.camo-dropzone.is-dragging { transform: scale(.995); }
.camo-drop-placeholder { display: grid; place-items: center; gap: .42rem; padding: 2rem; text-align: center; }
.camo-drop-placeholder strong { color: var(--white); font-size: 1.1rem; }
.camo-drop-placeholder span { color: var(--muted); font-size: .9rem; }
.camo-drop-placeholder small { margin-top: .35rem; color: var(--olive-light); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.camo-upload-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .65rem; border: 1px solid rgba(166,181,140,.3); border-radius: .9rem; background: rgba(124,140,100,.10); color: var(--olive-light); font-size: 1.4rem; font-weight: 800; }
.camo-preview { width: 100%; height: 100%; min-height: 340px; max-height: 520px; object-fit: cover; }
.camo-preview-overlay { position: absolute; inset: auto 1rem 1rem 1rem; padding: .72rem .9rem; border: 1px solid rgba(255,255,255,.13); border-radius: .7rem; background: rgba(8,11,15,.76); backdrop-filter: blur(12px); color: var(--white); text-align: center; font-size: .78rem; font-weight: 750; letter-spacing: .04em; opacity: 0; transform: translateY(.35rem); transition: opacity .2s ease, transform .2s ease; }
.camo-dropzone.has-image:hover .camo-preview-overlay, .camo-dropzone.has-image:focus-visible .camo-preview-overlay { opacity: 1; transform: translateY(0); }
.camo-scene-info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #11171d; }
.camo-scene-info small { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.camo-swatches { display: flex; gap: .4rem; }
.camo-swatches span { width: 1.7rem; height: 1.7rem; border: 1px solid rgba(255,255,255,.18); border-radius: .42rem; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.camo-reset { flex: 0 0 auto; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .65rem; background: transparent; color: var(--text); cursor: pointer; font-size: .76rem; }
.camo-reset:hover { border-color: var(--olive); color: var(--white); }
.camo-actions { margin-top: 1rem; }
.camo-actions .full-button { margin-top: 0; }
.camo-actions .button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.camo-status { margin-top: .9rem; padding: .75rem .9rem; border-radius: .7rem; color: var(--muted); background: #11171d; font-size: .82rem; }
.camo-status[data-kind="loading"] { color: var(--olive-light); }
.camo-status[data-kind="error"] { color: #e6b9b9; border: 1px solid rgba(210,110,110,.25); background: rgba(120,35,35,.12); }
.camo-results { margin-top: 1.5rem; }
.camo-best-match { display: grid; grid-template-columns: minmax(160px,.62fr) 1.38fr; overflow: hidden; border: 1px solid rgba(166,181,140,.24); border-radius: 1rem; background: #11171d; }
.camo-best-match > img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; }
.camo-best-content { padding: 1.2rem; }
.camo-best-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.camo-best-topline small { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.camo-best-topline h3 { margin: 0; color: var(--white); font-size: clamp(1.45rem, 3vw, 2rem); }
.camo-score { flex: 0 0 auto; color: var(--olive-light); font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.camo-score span { margin-left: .15rem; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: normal; }
.camo-metrics { display: grid; gap: .72rem; margin-top: 1.35rem; }
.camo-metric > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.camo-metric span { color: var(--muted); font-size: .75rem; }
.camo-metric strong { color: var(--text); font-size: .72rem; }
.camo-meter, .camo-rank-meter { height: .35rem; overflow: hidden; border-radius: 999px; background: #222a33; }
.camo-meter i, .camo-rank-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--olive), var(--olive-light)); }
.camo-ranking-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.55rem 0 .7rem; }
.camo-ranking-heading h3 { margin: 0; color: var(--white); font-size: 1.05rem; }
.camo-ranking-heading span { color: var(--muted); font-size: .7rem; }
.camo-ranking { display: grid; gap: .55rem; }
.camo-rank-card { display: grid; grid-template-columns: auto 70px 1fr auto; align-items: center; gap: .8rem; padding: .7rem; border: 1px solid var(--line); border-radius: .8rem; background: #11171d; }
.camo-rank-number { color: var(--olive-light); font-size: .68rem; letter-spacing: .08em; }
.camo-rank-card img { width: 70px; height: 58px; object-fit: cover; border-radius: .48rem; }
.camo-rank-card strong { display: block; margin-bottom: .45rem; color: var(--white); font-size: .88rem; }
.camo-rank-card b { min-width: 2.2rem; color: var(--olive-light); text-align: right; font-size: .95rem; }

@media (max-width: 720px) {
  .camo-dropzone, .camo-preview { min-height: 280px; }
  .camo-best-match { grid-template-columns: 1fr; }
  .camo-best-match > img { min-height: 210px; max-height: 260px; }
  .camo-rank-card { grid-template-columns: auto 58px 1fr auto; gap: .6rem; }
  .camo-rank-card img { width: 58px; height: 50px; }
}

@media (max-width: 480px) {
  .camo-scene-info { align-items: flex-start; flex-direction: column; }
  .camo-reset { width: 100%; }
  .camo-rank-card { grid-template-columns: auto 1fr auto; }
  .camo-rank-card img { display: none; }
}


/* --------------------------------------------------------------------------
   Additional Airsoft calculators
   -------------------------------------------------------------------------- */
.tool-section { border-block: 1px solid var(--line); }
.tool-section-hpa { background: #0d1218; }
.tool-section-air { background: #10151b; }
.tool-section-bb { background: #0c1116; }
.tool-section-range { background: #10151b; }
.calculator-controls-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calculator-controls-3 label:last-child { grid-column: auto; }
.calculator-controls .span-full { grid-column: 1 / -1 !important; }
.input-with-select { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: .65rem; background: #10151b; }
.input-with-select input, .input-with-select select { min-height: 3.2rem; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.input-with-select select { width: auto; min-width: 5rem; border-left: 1px solid var(--line) !important; color: var(--olive-light); cursor: pointer; }
.comparison-energy { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.35rem 0 .8rem; padding: .9rem 1rem; border: 1px solid rgba(166,181,140,.22); border-radius: .8rem; background: rgba(124,140,100,.07); }
.comparison-energy small { color: var(--muted); }
.comparison-energy strong { color: var(--olive-light); font-size: 1.35rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; }
.tool-table { width: 100%; border-collapse: collapse; min-width: 430px; background: #11171d; }
.tool-table th, .tool-table td { padding: .82rem 1rem; border-bottom: 1px solid var(--line); text-align: right; }
.tool-table th:first-child, .tool-table td:first-child { text-align: left; }
.tool-table thead th { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: #0f141a; }
.tool-table tbody td { color: var(--text); font-size: .9rem; }
.tool-table tbody tr:last-child td { border-bottom: 0; }
.tool-table tbody tr:hover td { background: rgba(124,140,100,.05); }
.tool-table tbody tr.is-reference td { background: rgba(124,140,100,.14); border-bottom-color: rgba(166,181,140,.28); }
.tool-table tbody tr.is-reference td:first-child { box-shadow: inset 3px 0 0 var(--olive-light); }
.tool-table tbody tr.is-reference:hover td { background: rgba(124,140,100,.18); }
.tool-table tbody td strong { color: var(--white); }
.reference-badge { display: inline-flex; align-items: center; margin-left: .55rem; padding: .18rem .4rem; border: 1px solid rgba(166,181,140,.35); border-radius: 999px; background: rgba(166,181,140,.08); color: var(--olive-light); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
@media (max-width: 900px) { .calculator-controls-3 { grid-template-columns: 1fr 1fr; } .calculator-controls-3 .span-full { grid-column: 1 / -1 !important; } }
@media (max-width: 640px) { .calculator-controls-3 { grid-template-columns: 1fr; } .calculator-controls-3 .span-full { grid-column: auto !important; } .input-with-select select { min-width: 4.7rem; } }


/* --------------------------------------------------------------------------
   Volume ratio guide + trajectory graph
   -------------------------------------------------------------------------- */
.result-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.result-grid strong.compact-result { font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.ratio-status { margin-top: .75rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--muted); background: #0f151b; font-size: .82rem; }
.ratio-status[data-state="good"] { border-color: rgba(166,181,140,.38); color: var(--olive-light); background: rgba(124,140,100,.08); }
.ratio-status[data-state="low"], .ratio-status[data-state="high"] { border-color: rgba(216,218,220,.16); }
.tool-explainer { margin-top: .85rem; border: 1px solid var(--line); border-radius: .75rem; background: #0f151b; overflow: hidden; }
.tool-explainer summary { padding: .85rem 1rem; color: var(--white); cursor: pointer; font-weight: 750; font-size: .82rem; }
.tool-explainer p { margin: 0; padding: 0 1rem 1rem; color: var(--muted); font-size: .82rem; line-height: 1.65; }

.trajectory-panel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #0d1318; }
.trajectory-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.trajectory-heading small { display: block; color: var(--white); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.trajectory-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.trajectory-live { padding: .28rem .5rem; border: 1px solid rgba(166,181,140,.28); border-radius: 999px; color: var(--olive-light); font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.trajectory-chart { min-height: 300px; width: 100%; }
.trajectory-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.trajectory-chart .hx-grid { stroke: rgba(216,218,220,.09); stroke-width: 1; }
.trajectory-chart .hx-axis { stroke: rgba(216,218,220,.24); stroke-width: 1; }
.trajectory-chart .hx-reference { stroke: rgba(216,218,220,.26); stroke-width: 1.2; stroke-dasharray: 6 7; }
.trajectory-chart .hx-path { fill: none; stroke: var(--olive-light); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trajectory-chart .hx-area { fill: rgba(124,140,100,.08); }
.trajectory-chart .hx-label { fill: var(--muted); font: 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.trajectory-chart .hx-axis-title { fill: var(--olive-light); font: 700 12px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; }
.trajectory-chart .hx-point { fill: var(--olive-light); stroke: #0d1318; stroke-width: 2; }

@media (max-width: 1000px) { .result-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .result-grid-4 { grid-template-columns: 1fr; } .trajectory-chart { min-height: 230px; } .trajectory-panel { padding: .75rem; } }