/*
* ╔══════════════════════════════════════════════════════════════╗
* ║ INTERNAL TOOL DESIGN SYSTEM — toolkit.css ║
* ║ Dark default · Light toggle · IBM Plex fonts ║
* ╚══════════════════════════════════════════════════════════════╝
*
* Usage in HTML:
*
* ← default
* ← toggled via JS
*
* Required in :
*
*
*/
/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ── Themes ───────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
--bg: #0f1117; /* page / input background */
--surface: #181c27; /* card background */
--surface2: #1e2335; /* option-row / stat background */
--border: #2a3050; /* default border */
--border-hi: #3d4f8a; /* highlight border (card top line) */
--accent: #4f7cff; /* primary action color */
--success: #22d3a0; /* success / copied state */
--danger: #f87171; /* destructive actions (clear btn) */
--text: #e8ecf8; /* primary text */
--text-muted: #6b7799; /* secondary text, labels */
--text-dim: #3d4f6e; /* placeholders, disabled */
--page-bg: #0f1117; /* body background */
--shadow: 0 10px 30px rgba(0,0,0,.45);
--grid: rgba(79,124,255,.04); /* subtle dot/grid overlay */
--accent-glow: rgba(79,124,255,.3);
}
:root[data-theme="light"] {
--bg: #f9fafb;
--surface: #ffffff;
--surface2: #f3f4f6;
--border: #e5e7eb;
--border-hi: #93aaf0;
--accent: #2563eb;
--success: #10b981;
--danger: #ef4444;
--text: #111827;
--text-muted: #6b7280;
--text-dim: #9ca3af;
--page-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--shadow: 0 10px 30px rgba(0,0,0,.12);
--grid: transparent;
--accent-glow: rgba(37,99,235,.25);
}
/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--page-bg);
color: var(--text);
min-height: 100vh;
padding: 28px 20px;
transition: background .3s, color .3s;
}
/* Subtle grid overlay — visible in dark mode only */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 0;
}
.container {
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* ── Card ─────────────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow);
padding: 26px 28px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
transition: background .3s, border-color .3s, box-shadow .3s;
}
/* Shimmer line at top of every card */
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-hi), transparent);
}
/* ── Header card extras ───────────────────────────────────────────────────── */
.header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.header-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
background: rgba(79,124,255,.1);
border: 1px solid rgba(79,124,255,.25);
border-radius: 4px;
padding: 3px 9px;
margin-bottom: 10px;
}
[data-theme="light"] .header-badge {
background: rgba(37,99,235,.08);
border-color: rgba(37,99,235,.2);
}
h1 {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.6rem;
font-weight: 700;
color: var(--text);
letter-spacing: -.02em;
}
h1 span { color: var(--accent); } /* accent word in title */
.header-sub {
margin-top: 6px;
color: var(--text-muted);
font-size: .9rem;
line-height: 1.55;
}
/* ── Theme toggle ─────────────────────────────────────────────────────────── */
/*
HTML:
JS (minimal):
const themeChk = document.getElementById('theme-chk');
const themeThumb = document.getElementById('theme-thumb');
const themeLabel = document.getElementById('theme-label');
function applyTheme(light) {
document.documentElement.setAttribute('data-theme', light ? 'light' : 'dark');
themeThumb.textContent = light ? '🌙' : '☀️';
themeLabel.textContent = light ? 'DARK' : 'LIGHT';
themeChk.checked = light;
}
themeChk.addEventListener('change', () => applyTheme(themeChk.checked));
*/
.theme-toggle {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
flex-shrink: 0;
margin-top: 4px;
}
.toggle-track {
width: 44px; height: 24px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 24px;
position: relative;
transition: background .25s, border-color .25s;
}
.toggle-thumb {
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--accent);
transition: transform .25s;
display: flex;
align-items: center;
justify-content: center;
font-size: .6rem;
line-height: 1;
}
[data-theme="light"] .toggle-thumb { transform: translateX(20px); }
.toggle-label {
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
font-weight: 700;
color: var(--text-muted);
letter-spacing: .06em;
}
/* ── Section label ────────────────────────────────────────────────────────── */
/* 01 · Label Text
*/
.section-label {
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.field { margin-bottom: 20px; }
/* Input header row (label + clear button side by side) */
.input-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
gap: 10px;
}
.input-header .section-label { margin-bottom: 0; flex: 1; }
/* ── Textarea ─────────────────────────────────────────────────────────────── */
textarea {
width: 100%;
min-height: 130px;
resize: vertical;
padding: 12px 14px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12.5px;
line-height: 1.9;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
outline: none;
caret-color: var(--accent);
transition: border-color .2s, box-shadow .2s, background .3s;
}
textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(79,124,255,.13);
}
[data-theme="light"] textarea:focus {
box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
textarea::placeholder { color: var(--text-dim); }
/* ── Text input ───────────────────────────────────────────────────────────── */
input[type="text"],
input[type="number"],
select {
width: 100%;
padding: 11px 14px;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 15px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
outline: none;
transition: border-color .2s, box-shadow .2s, background .3s;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(79,124,255,.13);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus {
box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
/* ── 2-col grid for paired inputs ─────────────────────────────────────────── */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* ── Option row ───────────────────────────────────────────────────────────── */
/*
🔀 Label
...controls...
*/
.option-row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
transition: background .3s, border-color .3s;
}
.opt-label {
font-size: .88rem;
color: var(--text-muted);
font-weight: 600;
min-width: 140px;
white-space: nowrap;
}
/* ── Pill tabs (sep / output format selectors) ────────────────────────────── */
/*
*/
.tab-group { display: flex; gap: 5px; flex-wrap: wrap; }
.tab {
padding: 5px 13px;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
font-weight: 700;
border: 1px solid var(--border);
border-radius: 20px;
cursor: pointer;
background: transparent;
color: var(--text-muted);
transition: all .18s;
}
.tab:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.tab.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 0 10px var(--accent-glow);
}
/* Optional green dot to mark auto-detected value */
.tab.detected:not(.active)::after {
content: ' ●';
color: var(--success);
font-size: .55em;
vertical-align: super;
}
/* Small custom-value text input inside tab rows */
.tab-custom {
width: 52px;
padding: 5px 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
font-weight: 700;
border: 1px solid var(--border);
border-radius: 20px;
background: transparent;
color: var(--text);
outline: none;
text-align: center;
transition: border-color .18s;
}
.tab-custom:focus { border-color: var(--accent); }
.tab-custom::placeholder { color: var(--text-dim); }
/* ── Detect pills (auto-parse info bar) ───────────────────────────────────── */
/*
Delimiter";"
Columns5
*/
.detect-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; min-height: 22px; }
.detect-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'IBM Plex Mono', monospace;
font-size: .72rem;
font-weight: 700;
padding: 2px 10px;
border-radius: 20px;
background: rgba(79,124,255,.1);
color: var(--accent);
border: 1px solid rgba(79,124,255,.22);
}
[data-theme="light"] .detect-pill {
background: rgba(37,99,235,.07);
border-color: rgba(37,99,235,.18);
}
.detect-pill span { color: var(--text-muted); font-weight: 400; }
/* ── Stats row ────────────────────────────────────────────────────────────── */
/*
*/
.stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.stat {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 16px;
transition: background .3s, border-color .3s;
}
.stat-label {
font-family: 'IBM Plex Mono', monospace;
font-size: .64rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}
.stat-val {
font-family: 'IBM Plex Mono', monospace;
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
/* Use .stat-val-sm when the value is text (e.g. a column name) */
.stat-val-sm {
font-family: 'IBM Plex Mono', monospace;
font-size: 1rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
padding-top: 4px;
}
/* ── Output display area ──────────────────────────────────────────────────── */
.out-area {
width: 100%;
min-height: 64px;
padding: 13px 15px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 12.5px;
line-height: 1.8;
color: var(--text);
word-break: break-all;
white-space: pre-wrap;
transition: background .3s, border-color .3s;
}
.out-area.empty { color: var(--text-dim); font-style: italic; }
/* ── Error text ───────────────────────────────────────────────────────────── */
.error { color: var(--danger); font-weight: 700; }
/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* Primary full-width action button */
.btn-primary {
width: 100%;
padding: 13px;
font-family: 'IBM Plex Mono', monospace;
font-size: .9rem;
font-weight: 700;
letter-spacing: .04em;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
transition: all .22s;
}
.btn-primary:hover {
filter: brightness(1.12);
transform: translateY(-2px);
box-shadow: 0 6px 18px var(--accent-glow);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary.success { background: var(--success); }
.btn-primary:disabled {
opacity: .4;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* Small destructive button (e.g. clear input) */
.btn-danger {
padding: 4px 13px;
font-size: .76rem;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
color: var(--danger);
background: transparent;
border: 1px solid var(--danger);
border-radius: 20px;
cursor: pointer;
transition: all .2s;
opacity: .75;
white-space: nowrap;
}
.btn-danger:hover { background: var(--danger); color: #fff; opacity: 1; }
.btn-danger:disabled { opacity: .25; cursor: not-allowed; }
/* Small secondary button (downloads, reset, inline actions) */
.btn-sm {
padding: 8px 16px;
font-size: .82rem;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
border-radius: 8px;
cursor: pointer;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text-muted);
white-space: nowrap;
transition: all .2s;
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm.success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm:disabled { opacity: .4; cursor: not-allowed; }
/* ── Help / instructions (collapsible Anleitung) ──────────────────────────── */
details.help {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--shadow);
margin-bottom: 18px;
overflow: hidden;
transition: background .3s, border-color .3s;
}
details.help > summary {
list-style: none;
cursor: pointer;
padding: 14px 20px;
font-family: 'IBM Plex Mono', monospace;
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--accent);
display: flex;
align-items: center;
gap: 8px;
user-select: none;
}
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary::after {
content: '▾';
margin-left: auto;
color: var(--text-muted);
transition: transform .2s;
}
details.help[open] > summary::after { transform: rotate(180deg); }
details.help > summary:hover { filter: brightness(1.15); }
.help-body {
padding: 6px 22px 20px;
font-size: .9rem;
line-height: 1.65;
color: var(--text-muted);
border-top: 1px solid var(--border);
}
.help-body h4 {
font-family: 'IBM Plex Mono', monospace;
font-size: .68rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text);
margin: 14px 0 6px;
}
.help-body p { margin-bottom: 8px; }
.help-body ol, .help-body ul { margin: 0 0 6px 20px; }
.help-body li { margin-bottom: 5px; }
.help-body strong { color: var(--text); }
.help-body code {
font-family: 'IBM Plex Mono', monospace;
font-size: .85em;
background: var(--surface2);
padding: 1px 6px;
border-radius: 4px;
color: var(--accent);
}
/* ── Toggle switch (generic, reusable) ────────────────────────────────────── */
/*
JS: just read .toggle-chk.checked
*/
.toggle-wrap { display: inline-flex; align-items: center; cursor: pointer; }
.toggle-chk { display: none; }
.toggle-ui {
position: relative;
width: 44px; height: 24px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 24px;
transition: background .25s;
}
.toggle-ui::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--text-dim);
transition: transform .25s, background .25s;
}
.toggle-chk:checked + .toggle-ui { background: var(--accent); border-color: var(--accent); }
.toggle-chk:checked + .toggle-ui::after {
transform: translateX(20px);
background: #fff;
}
/* ── Preview pill (inline value preview) ──────────────────────────────────── */
.preview-pill {
display: inline-block;
margin-left: 8px;
padding: 2px 10px;
background: rgba(79,124,255,.1);
color: var(--accent);
border-radius: 20px;
font-size: .78rem;
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
}
[data-theme="light"] .preview-pill { background: rgba(37,99,235,.08); }
/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
body { padding: 16px 14px; }
.card { padding: 20px 18px; }
.stats-row { grid-template-columns: 1fr 1fr; }
.grid-2 { grid-template-columns: 1fr; }
.opt-label { min-width: 100%; }
h1 { font-size: 1.3rem; }
}
/* ── Home button ──────────────────────────────────────────────────────────── */
.home-btn {
display: inline-flex;
align-items: center;
gap: 6px;
position: fixed;
top: 16px;
left: 16px;
z-index: 999;
font-family: 'IBM Plex Mono', monospace;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
color: var(--text-muted);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 6px 13px 6px 10px;
box-shadow: 0 2px 12px rgba(0,0,0,.25);
transition: all .18s;
white-space: nowrap;
}
.home-btn:hover {
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 4px 18px rgba(79,124,255,.2);
transform: translateY(-1px);
}
.home-btn .home-icon { font-size: .85rem; line-height: 1; }
[data-theme="light"] .home-btn { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
[data-theme="light"] .home-btn:hover { box-shadow: 0 4px 14px rgba(37,99,235,.15); }