/* Toolwave's own page styles. css/style.css is Notewave's file, copied
   as-is so themes stay in sync; everything Toolwave-specific lives here. */

body { overflow: auto; padding: 1.5rem 1rem 3rem; box-sizing: border-box; }
.tools-wrap { position: relative; z-index: 1; width: 100%; max-width: 860px; margin: 0 auto; }
.tools-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tools-topbar__right { display: flex; align-items: center; gap: 0.6rem; color: var(--star-dim); font-size: 0.9rem; }
.tools-title span { color: var(--star); }
.tools-title { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.8rem; letter-spacing: 0.08em; margin: 0 0 0.9rem; text-align: center; }
.tools-tabs { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-bottom: 1rem; }
.tools-tabs__group { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.tools-tabs__group[hidden] { display: none; }
.tools-tabs__label { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--star-dim); min-width: 3.2rem; text-align: right; }
.tools-tabs .chip { cursor: pointer; font-size: 0.92rem; padding: 0.3rem 0.8rem; }
.tools-main { padding: 1.1rem; }
.tools-form { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.tools-form__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tools-form__row > input, .tools-form__row > select { flex: 1 1 12rem; min-width: 0; }
.tools-form textarea { min-height: 12rem; resize: vertical; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; tab-size: 4; }
.tools-form .btn { align-self: flex-start; }
.tools-hint { font-size: 0.8rem; color: var(--star-dim); }
.tools-drop { display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 1rem; text-align: center; border: 1px dashed var(--panel-border); border-radius: 4px; cursor: pointer; color: var(--star-dim); transition: border-color 0.15s ease, background 0.15s ease; word-break: break-word; }
.tools-drop:hover, .tools-drop--over { border-color: var(--gold-bright); background: var(--accent-tint); color: var(--star); }
.tools-drop input { display: none; }
.tools-progress { width: 100%; accent-color: var(--gold-bright); }
.tools-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tools-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--panel-border); border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
.tools-row__main { flex: 1; min-width: 0; }
.tools-row__name { color: var(--gold-bright); font-family: var(--font-heading); text-decoration: none; word-break: break-word; }
.tools-row__name:hover { text-decoration: underline; }
.tools-row__desc { font-size: 0.85rem; color: var(--star); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools-row__meta { font-size: 0.75rem; color: var(--star-dim); }
.tools-row__actions { display: flex; gap: 0.35rem; flex: none; }
.tools-row__actions .btn { padding: 0.4rem 0.6rem; font-size: 0.65rem; }
.tools-convert { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding: 1rem 0.5rem; }
.tools-convert p { margin: 0; max-width: 34rem; line-height: 1.5; }
.tools-convert a:not(.btn) { color: var(--gold-bright); }
.tools-form__row > .btn { flex: none; }
.ip-card { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; padding: 0.8rem 0.9rem; margin-bottom: 0.8rem; border: 1px solid var(--panel-border); border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
.ip-card__head { grid-column: 1 / -1; font-family: var(--font-heading); color: var(--gold-bright); font-size: 1.15rem; margin-bottom: 0.3rem; word-break: break-all; }
.ip-card dt { color: var(--star-dim); font-size: 0.85rem; }
.ip-card dd { margin: 0; word-break: break-word; }
.ip-card a { color: var(--gold-bright); }
.tools-empty { text-align: center; color: var(--star-dim); font-style: italic; padding: 1rem; }

/* Shared bits for the tabs in js/tabs/. */
select.tools-select, .tw select { background: rgba(19, 10, 31, 0.55); border: 1px solid var(--panel-border); border-radius: 3px; color: var(--star); font-family: var(--font-body); font-size: 1rem; padding: 0.45rem 0.6rem; }
select.tools-select option, .tw select option { background: var(--void); color: var(--star); }
.tw { display: flex; flex-direction: column; gap: 0.9rem; }
.tw h2 { font-family: var(--font-heading); color: var(--gold-bright); font-size: 1.05rem; letter-spacing: 0.06em; margin: 0; }
.tw p { margin: 0; line-height: 1.5; }
.tw a:not(.btn) { color: var(--gold-bright); }
.tw-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.tw-row > input:not([type="color"]):not([type="checkbox"]):not([type="range"]), .tw-row > select { flex: 1 1 10rem; min-width: 0; }
.tw-card { padding: 0.8rem 0.9rem; border: 1px solid var(--panel-border); border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
.tw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.7rem; }
.tw-out { margin: 0; padding: 0.7rem; min-height: 2.5rem; max-height: 26rem; overflow: auto; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--panel-border); border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tw textarea { width: 100%; box-sizing: border-box; min-height: 8rem; resize: vertical; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.tw-label { font-size: 0.8rem; color: var(--star-dim); }
.tw-subtabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tw-subtabs .chip { cursor: pointer; font-size: 0.85rem; padding: 0.25rem 0.7rem; }
.tw-error { color: var(--danger); }
.tw-ok { color: #6fcf8f; }
.btn--small { padding: 0.4rem 0.6rem; font-size: 0.65rem; }
.tw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; }
.tw-stat { padding: 0.6rem 0.8rem; border: 1px solid var(--panel-border); border-radius: 4px; background: rgba(0, 0, 0, 0.15); }
.tw-stat__value { font-family: var(--font-heading); font-size: 1.5rem; color: var(--gold-bright); }
.tw-stat__label { font-size: 0.75rem; color: var(--star-dim); }
.tw-bars { display: flex; flex-direction: column; gap: 0.3rem; }
.tw-bar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(3rem, 1fr) 2.5rem; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
.tw-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-bar__track { display: block; height: 0.55rem; background: rgba(0, 0, 0, 0.3); border-radius: 2px; overflow: hidden; }
.tw-bar__fill { display: block; height: 100%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.tw-bar__value { text-align: right; color: var(--star-dim); font-variant-numeric: tabular-nums; }

/* Tabs: clipboard, dev tools, random, text art, theme workshop, visits. */
.clip-text { white-space: pre-wrap; word-break: break-word; max-height: 10rem; overflow: auto; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.color-swatch { height: 3rem; border-radius: 4px; border: 1px solid var(--panel-border); }
.regex-view { min-height: 2rem; }
.regex-view mark { background: var(--accent-tint); color: var(--gold-bright); outline: 1px solid var(--gold); border-radius: 2px; }
.random-big { font-family: var(--font-heading); font-size: 1.6rem; color: var(--gold-bright); min-height: 1.6em; word-break: break-word; }
.random-faces { font-size: 2.2rem; line-height: 1.1; color: var(--star); }
.random-wheel { width: 100%; max-width: 320px; aspect-ratio: 1; align-self: center; cursor: pointer; }
.random textarea { min-height: 7rem; }
.art-preview { display: flex; align-items: center; justify-content: center; min-height: 7rem; padding: 1rem; overflow: hidden; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--panel-border); border-radius: 4px; text-align: center; line-height: 1.2; word-break: break-word; }
.art-ascii { font-size: 0.6rem; line-height: 1.1; white-space: pre; overflow-x: auto; word-break: normal; }
.theme-source { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.theme-source img { max-width: 160px; max-height: 120px; border-radius: 4px; border: 1px solid var(--panel-border); }
.theme-palette { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.theme-swatch { width: 2.2rem; height: 2.2rem; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; }
.theme-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.theme-slot { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.theme-slot input[type="color"], .tw input[type="color"] { width: 2.6rem; height: 2.2rem; padding: 0.15rem; flex: none; cursor: pointer; }
.tw details ol { margin: 0.5rem 0 0; padding-left: 1.3rem; line-height: 1.6; }
.tw code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }
.visits-map { height: 360px; border-radius: 4px; border: 1px solid var(--panel-border); overflow: hidden; z-index: 0; }
.visits-map.leaflet-container { background: var(--void); font-family: var(--font-body); }
/* Light OpenStreetMap tiles turned into a dark map. */
.visits-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.4); }
.visits-map .leaflet-control-attribution { background: rgba(0, 0, 0, 0.55); color: var(--star-dim); }
.visits-map .leaflet-control-attribution a { color: var(--gold-bright); }
.day-chart { position: relative; }
.day-chart svg { display: block; width: 100%; height: auto; }
.day-chart__axis { stroke: var(--panel-border); stroke-width: 1; }
.day-chart__tick { fill: var(--star-dim); font-size: 11px; font-family: var(--font-body); }
.day-chart__tip { position: absolute; top: -0.5rem; transform: translateY(-100%); padding: 0.35rem 0.55rem; font-size: 0.8rem; background: var(--void); border: 1px solid var(--panel-border); border-radius: 4px; pointer-events: none; white-space: nowrap; z-index: 2; }
.visits-recent { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
.visits-recent__row { display: grid; grid-template-columns: 8rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.visits-recent__row > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .visits-recent__row { grid-template-columns: 1fr 1fr; }
  .tools-tabs__label { min-width: 0; width: 100%; text-align: center; }
  .tools-row { flex-direction: column; align-items: stretch; }
  .tools-row__actions { justify-content: flex-end; }
}