/* Shared layout for the workbench-style tool pages added in September 2026
   (subnet calculator, hash generator, UUID/ULID, timestamp converter, XML &
   XPath, Unicode inspector). Everything here mirrors the classes the older
   tool pages carry inline, so the new pages look identical to the existing
   ones without copying 200 lines of CSS into each. Page-specific rules stay
   in that page's own style block. Loaded after base.css. */

body {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-main);
  background-color: var(--bg-base);
  background-image: var(--bg-gradient);
  min-height: 100vh;
  padding: 20px 40px;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
body::before {
  content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px, 40px 40px; z-index: -1; animation: drift 60s linear infinite; pointer-events: none;
}

body > header { display: flex; justify-content: flex-start; align-items: center; max-width: 1400px; width: 100%; margin: 0 auto 40px auto; }

.hero { text-align: center; margin-bottom: 40px; animation: fadeIn 1s ease-out; }
.hero h1 { font-size: 2.8em; font-weight: 700; margin-bottom: 10px; }
.hero p { color: var(--text-muted); font-size: 1.1em; max-width: 820px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.3); color: var(--accent-main); font-size: 0.85em; font-weight: 600; margin-bottom: 18px; }
.hero-badge i, .hero-badge svg.lucide { width: 15px; height: 15px; }

/* Workbench grid */
.ide-container {
  max-width: 1400px; width: 100%; margin: 0 auto 30px auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  animation: fadeSlideUp 1s ease-out forwards;
}
.ide-container.single { grid-template-columns: 1fr; }
.ide-container.wide-right { grid-template-columns: 2fr 3fr; }

.pane {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: border-color 0.2s, background 0.2s;
  min-height: 320px;
}
.pane.tall { height: 450px; }
.pane.dragover { border-color: var(--accent-main); background: rgba(56, 189, 248, 0.05); }

.pane-header {
  background: rgba(0,0,0,0.3); padding: 12px 20px; border-bottom: 1px solid var(--card-border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; color: #fff; flex-wrap: wrap;
}
.pane-title { display: flex; align-items: center; gap: 10px; }
.pane-title i, .pane-title svg.lucide { color: var(--accent-main); width: 18px; }
.pane-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; overflow: auto; }

.btn-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff;
  padding: 6px 14px; border-radius: 8px; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 0.85em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.2s;
}
.btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn i, .btn svg.lucide { width: 14px; height: 14px; }
.btn-primary { background: var(--neon-gradient); color: #000; border: 1px solid transparent; box-shadow: 0 0 10px var(--accent-glow); }
.btn-primary:hover { filter: brightness(1.1); }

/* Inputs */
.editor {
  width: 100%; flex-grow: 1; background: transparent; border: none; padding: 20px;
  color: var(--text-main); font-family: 'Fira Code', monospace; font-size: 15px;
  line-height: 1.6; resize: none; outline: none; white-space: pre-wrap; word-break: break-all;
}
.editor::placeholder { color: rgba(255,255,255,0.2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.8em; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.field label i, .field label svg.lucide { width: 14px; height: 14px; color: var(--accent-main); }
.text-input, .select-input {
  width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); color: #fff;
  border-radius: 10px; padding: 11px 14px; font-family: 'Fira Code', monospace; font-size: 0.95em; outline: none; transition: border 0.2s;
}
.select-input { font-family: 'Space Grotesk', sans-serif; cursor: pointer; }
.select-input option { background: #0a0c10; }
.text-input:focus, .select-input:focus { border-color: var(--accent-main); }
.text-input.bad { border-color: #ef4444; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 160px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 0.85em; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; }
.check input { accent-color: var(--accent-main); cursor: pointer; }
.mini-select { background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); color: var(--text-main); border-radius: 6px; padding: 4px 8px; font-family: inherit; font-size: 0.85em; outline: none; cursor: pointer; }
.mini-select option { background: #0a0c10; }

/* Results */
.kv-grid { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: 0.9em; align-items: baseline; }
.kv-grid dt { color: var(--text-muted); font-weight: 600; }
.kv-grid dd { margin: 0; font-family: 'Fira Code', monospace; color: var(--text-main); word-break: break-all; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kv-grid dd .tag { font-family: 'Space Grotesk', sans-serif; font-size: 0.78em; padding: 2px 8px; border-radius: 999px; background: rgba(56,189,248,0.12); color: var(--accent-main); border: 1px solid rgba(56,189,248,0.3); }
.kv-grid dd .tag.warn { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.35); }
.kv-grid dd .tag.ok { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.35); }
.kv-grid dd .tag.bad { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.35); }
.copy-btn { background: none; border: 1px solid rgba(255,255,255,0.12); color: var(--text-muted); border-radius: 6px; padding: 2px 6px; cursor: pointer; display: inline-flex; align-items: center; }
.copy-btn i, .copy-btn svg.lucide { width: 12px; height: 12px; }
.copy-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

.output-area {
  flex: 1; padding: 18px 20px; overflow: auto; font-family: 'Fira Code', monospace; font-size: 0.88em; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--text-main);
}
.error-banner {
  display: none; background: rgba(239,68,68,0.12); border-bottom: 1px solid rgba(239,68,68,0.35);
  color: #fecaca; padding: 10px 20px; font-size: 0.88em; align-items: flex-start; gap: 10px;
}
.error-banner.active { display: flex; }
.error-banner i, .error-banner svg.lucide { color: #f87171; width: 18px; flex-shrink: 0; margin-top: 2px; }
.hint-bar { font-size: 0.78em; color: var(--text-muted); padding: 8px 20px; border-top: 1px solid rgba(255,255,255,0.05); }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.data-table th, .data-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
.data-table th { color: var(--accent-main); font-weight: 600; position: sticky; top: 0; background: rgba(10,12,16,0.95); white-space: nowrap; }
.data-table td { font-family: 'Fira Code', monospace; color: var(--text-main); }
.data-table td.muted, .data-table td .muted { color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; }
.data-table tr.flag td { background: rgba(245,158,11,0.07); }

/* Stats strip */
.stats-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.8em; color: var(--text-muted); padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.15); }
.stats-strip strong { color: var(--text-main); font-weight: 600; }

/* Docs */
.docs-container { max-width: 1400px; margin: 0 auto 60px auto; display: flex; flex-direction: column; gap: 30px; }
.info-panel h2 + h2 { margin-top: 0; }
.info-panel ul.plain { list-style: none; margin-bottom: 20px; }
.info-panel ul.plain li { color: var(--text-muted); margin-bottom: 10px; line-height: 1.6; }
.info-panel ul.plain li i, .info-panel ul.plain li svg.lucide { color: #22c55e; }
.info-panel table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 0.92em; }
.info-panel th, .info-panel td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; color: var(--text-muted); }
.info-panel th { color: var(--text-main); font-weight: 600; }
.info-panel pre { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 14px 16px; overflow: auto; font-family: 'Fira Code', monospace; font-size: 0.85em; line-height: 1.5; margin: 12px 0 18px; color: var(--text-main); }
.info-panel pre code { background: none; padding: 0; border: none; }
.changelog-list { list-style: none; margin: 0; padding: 0; }
.changelog-tag { background: var(--accent-main); color: #000; padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 0.8em; }

/* Command Center FAB */
.fab { position: fixed; bottom: 30px; left: 30px; width: 60px; height: 60px; border-radius: 50%; backdrop-filter: blur(15px); display: flex; align-items: center; justify-content: center; z-index: 9998; background: rgba(20, 22, 30, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 25px rgba(0,0,0,0.5); transition: all 0.4s; text-decoration: none; opacity: 1 !important; visibility: visible !important; }
.fab:hover { transform: scale(1.1); border-color: var(--accent-main); background: rgba(30, 34, 48, 0.9); box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 25px rgba(56, 189, 248, 0.3); }

footer { text-align: center; padding: 40px 0; border-top: 1px solid var(--card-border); color: var(--text-muted); font-size: 0.95em; margin-top: auto; }

/* A grid or flex item defaults to min-width:auto, so a wide table inside a
   pane widens the pane past the viewport instead of scrolling inside it.
   Zeroing the minimum lets the pane's own overflow:auto do its job. */
.ide-container > .pane, .pane-body, .output-area, .docs-container, .info-panel { min-width: 0; max-width: 100%; }
.info-panel { overflow-x: auto; }
.pane-body .data-table, .output-area .data-table { min-width: 0; }

@media (max-width: 900px) {
  .ide-container, .ide-container.wide-right { grid-template-columns: 1fr; }
  .pane.tall { height: 320px; }
  .kv-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .kv-grid dt { margin-top: 8px; }
}
@media (max-width: 600px) {
  body { padding: 15px 20px; }
  .hero h1 { font-size: 2em; }
  .hero p { font-size: 1em; }
  .info-panel { padding: 25px; }
  .pane-header { flex-direction: column; align-items: flex-start; }
  .fab { bottom: 20px; left: 20px; width: 50px; height: 50px; }
  .data-table { font-size: 0.78em; }
}

/* Shared controls for the October 2026 utility tools (password, color,
   number base, text case, markdown): segmented mode switch, check rows,
   meters and findings. */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(0,0,0,0.3); border: 1px solid var(--card-border); flex-wrap: wrap; }
.seg-btn { background: transparent; border: 0; color: var(--text-muted); font: 600 0.82em 'Space Grotesk', sans-serif; padding: 6px 12px; border-radius: 7px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.seg-btn:hover { color: #fff; }
.seg-btn.active { background: rgba(56,189,248,0.16); color: var(--accent-main); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.35); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--accent-main); min-width: 0; }
.text-input.num { width: 84px; flex: 0 0 84px; padding: 8px 10px; text-align: center; }
.meter { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.meter-fill { height: 100%; width: 0; border-radius: inherit; background: #ef4444; transition: width 0.3s ease, background 0.3s ease; }
.meter-fill[data-level="1"] { background: #f59e0b; }
.meter-fill[data-level="2"] { background: #eab308; }
.meter-fill[data-level="3"] { background: #22c55e; }
.meter-fill[data-level="4"] { background: linear-gradient(90deg, #22c55e, #38bdf8); }
.meter-label { font-size: 0.85em; color: var(--text-muted); line-height: 1.5; }
.meter-label strong { color: var(--text-main); }
.findings { display: flex; flex-direction: column; gap: 8px; }
.finding { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 0.85em; line-height: 1.5; border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); color: var(--text-muted); }
.finding i, .finding svg.lucide { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--accent-main); }
.finding strong, .finding code { color: var(--text-main); }
.finding.bad { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.08); }
.finding.bad i, .finding.bad svg.lucide { color: #f87171; }
.finding.warn { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.07); }
.finding.warn i, .finding.warn svg.lucide { color: #f59e0b; }
.finding.ok { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); }
.finding.ok i, .finding.ok svg.lucide { color: #4ade80; }
.muted { color: var(--text-muted); }