:root {
  --bg: #f5f5f7;
  --sidebar: #eeeef1;
  --surface: #ffffff;
  --surface-soft: #f8f9fa;
  --surface-hover: #f1f2f5;
  --text: #24242c;
  --text-2: #656570;
  --text-3: #9696a1;
  --line: #ededf1;
  --line-strong: #dedee5;
  --primary: #5146d8;
  --primary-dark: #4237bd;
  --primary-soft: #efedff;
  --success: #169b62;
  --success-soft: #eaf8f1;
  --warning: #c37a0b;
  --warning-soft: #fff6df;
  --danger: #d94b54;
  --danger-soft: #fff0f1;
  --cyan: #168da3;
  --shadow-card: 0 1px 2px rgba(31, 31, 38, .03), 0 12px 34px rgba(31, 31, 38, .055);
  --shadow-float: 0 8px 24px rgba(35, 35, 45, .12);
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --sidebar-width: 248px;
  --topbar-height: 64px;
  --content-pad: 38px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: 0; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(81,70,216,.17); outline-offset: 1px; }
svg { width: 18px; height: 18px; stroke-width: 1.8; flex: none; }
.hidden { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 30; display: flex; flex-direction: column; padding: 18px 12px 14px; background: var(--sidebar); border-right: 1px solid rgba(31,31,38,.045); }
.brand { height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 9px; margin-bottom: 15px; }
.brand-mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--text); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 5px 14px rgba(34,34,43,.16); }
.brand-mark span { color: #8f87ff; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; }
.brand-copy strong { font-size: 15px; font-weight: 650; }
.brand-copy small { color: var(--text-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tool-nav { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 3px; scrollbar-width: thin; }
.nav-item { width: 100%; height: 39px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; padding: 0 10px; text-align: left; transition: all .2s ease-in-out; }
.nav-item span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-item kbd { font: 10px var(--mono); color: var(--text-3); background: transparent; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.46); transform: translateY(-1px); }
.nav-item.active { color: var(--primary); background: var(--surface); box-shadow: 0 1px 2px rgba(30,30,38,.05), 0 5px 14px rgba(30,30,38,.055); font-weight: 600; }
.nav-item.active kbd { color: #aaa5e8; }
.sidebar-foot { display: flex; align-items: center; gap: 8px; padding: 14px 11px 2px; color: var(--text-3); font-size: 11px; border-top: 1px solid rgba(31,31,38,.06); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(22,155,98,.1); }

.main-area { grid-column: 2; min-width: 0; }
.topbar { height: var(--topbar-height); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--content-pad); border-bottom: 1px solid rgba(39,39,49,.055); background: rgba(245,245,247,.82); backdrop-filter: blur(16px) saturate(140%); }
.topbar > div, .top-actions { display: flex; align-items: center; gap: 12px; }
.crumb { color: var(--text-3); font-size: 11px; letter-spacing: .08em; }
.crumb strong { color: var(--text-2); font-weight: 600; }
.shortcut-hint { color: var(--text-3); font-size: 11px; display: flex; align-items: center; gap: 4px; }
kbd { padding: 2px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 10px var(--mono); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.72); color: var(--text-2); transition: all .2s var(--ease); }
.icon-button:hover { color: var(--primary); background: #fff; border-color: #dad7fa; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,37,48,.07); }
.mobile-menu { display: none; }

.content { max-width: 1340px; margin: 0 auto; padding: var(--content-pad); }
.tool-panel { display: none; animation: panel-in .28s var(--ease) both; }
.tool-panel.active { display: block; }
@keyframes panel-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 10px 2px 25px; }
.eyebrow { color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
h1 { margin: 7px 0 7px; font-size: 28px; line-height: 1.2; font-weight: 650; letter-spacing: 0; }
.panel-heading p { margin: 0; color: var(--text-2); line-height: 1.6; }
.heading-badge { display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: var(--success); background: var(--success-soft); border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; white-space: nowrap; }
.heading-badge svg { width: 15px; }
.tool-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-card); }
.card-toolbar { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.button-row.align-start { margin-top: 14px; justify-content: flex-start; }
.button { height: 34px; border: 1px solid transparent; border-radius: var(--radius-md); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; transition: all .18s var(--ease); white-space: nowrap; }
.button svg { width: 15px; height: 15px; }
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--primary); box-shadow: 0 4px 10px rgba(81,70,216,.18); }
.button.primary:hover { background: var(--primary-dark); box-shadow: 0 6px 14px rgba(81,70,216,.24); }
.button.secondary { background: var(--surface-soft); border-color: var(--line); color: var(--text-2); }
.button.secondary:hover { color: var(--text); background: var(--surface-hover); }
.copy-button { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-2); background: #fff; font-size: 11px; transition: all .18s var(--ease); white-space: nowrap; }
.copy-button svg { width: 14px; height: 14px; }
.copy-button:hover { color: var(--primary); border-color: #d9d5ff; background: var(--primary-soft); transform: translateY(-1px); }
.copy-button.copied { transform: scale(.95); color: var(--success); border-color: #bde5d2; background: var(--success-soft); }
.segmented { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 3px; background: var(--surface-hover); border-radius: var(--radius-md); }
.segmented button { height: 29px; border: 0; border-radius: 6px; background: transparent; padding: 0 11px; color: var(--text-2); font-size: 11px; transition: all .2s ease-in-out; }
.segmented button.active { color: var(--text); background: #fff; box-shadow: 0 1px 4px rgba(30,30,40,.09); font-weight: 600; }
.segmented.standalone { margin-bottom: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.field > span, .range-field label { color: var(--text-2); font-size: 11px; font-weight: 600; }
.field-row { display: flex; gap: 14px; align-items: flex-end; }
.field.grow { flex: 1 1 auto; }
.field.small { flex: 0 0 90px; }
.field.medium { flex: 0 0 180px; }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-soft); transition: border .18s, box-shadow .18s, background .18s; }
input, select { height: 40px; padding: 0 12px; }
textarea { min-height: 150px; padding: 12px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #b1b1ba; }
input:focus, textarea:focus, select:focus { outline: none; background: #fff; border-color: #aaa4ef; box-shadow: 0 0 0 3px rgba(81,70,216,.09); }
.mono, .code-input, pre, code { font-family: var(--mono); }
.code-input { min-height: 170px; background: #f8f9fa; color: #30303a; tab-size: 2; }
.code-input.tall { min-height: 360px; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.output-wrap { position: relative; }
.output-wrap textarea { padding-right: 78px; }
.copy-button.floating { position: absolute; right: 9px; top: 9px; }
.input-with-action { position: relative; }
.input-with-action input { padding-right: 76px; }
.input-with-action .copy-button { position: absolute; right: 5px; top: 4px; }
.inline-status { min-height: 32px; margin-top: 12px; display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 11px; }
.inline-status svg { width: 15px; height: 15px; }
.inline-status.success { color: var(--success); }
.inline-status.error { color: var(--danger); border-bottom: 2px solid rgba(217,75,84,.45); padding: 0 4px; background: linear-gradient(0deg, var(--danger-soft), transparent 72%); }
.inline-status.warning { color: var(--warning); background: var(--warning-soft); padding: 0 9px; border-radius: 6px; }

.json-workspace { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px; }
.json-pane { min-width:0;display:flex;flex-direction:column; }
.pane-label { height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 3px;color:var(--text-2);font-size:11px;font-weight:600; }
.pane-label small { color:var(--text-3);font:9px var(--mono);letter-spacing:.1em; }
.json-pane .code-input,.json-tree { height:420px;min-height:420px; }
.json-tree { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-soft); font: 13px/1.75 var(--mono); overflow: auto; }
.json-tree details { margin-left: 17px; }
.json-tree > details { margin-left: 0; }
.json-tree summary { cursor: pointer; color: var(--text-2); }
.json-tree .key { color: #3f62ba; }.json-tree .string { color: #16835d; }.json-tree .number { color: #a45616; }.json-tree .boolean, .json-tree .null { color: #7654c4; }
.cron-legend { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 475px; margin: 8px 0 0; color: var(--text-3); font-size: 10px; text-align: center; }
.cron-run { height:40px;padding-inline:16px; }
.result-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 8px; }
.result-item { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--surface-soft); border-radius: var(--radius-md); border: 1px solid var(--line); }
.result-item > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font: 10px var(--mono); }
.result-item strong { display:block;font:600 13px var(--mono); }.result-item small { display:block; margin-top: 3px; color: var(--text-3); }
.unit-switch { display: flex; gap: 8px; margin: 14px 0; }
.unit-switch label input { position:absolute; opacity:0; }.unit-switch label span { display:block; padding: 6px 11px; border:1px solid var(--line); border-radius: 6px; color:var(--text-2); font-size:11px; cursor:pointer; }.unit-switch input:checked + span { color:var(--primary); border-color:#d3ceff; background:var(--primary-soft); font-weight:600; }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.stat { padding:14px; border-radius:var(--radius-md); background:var(--surface-soft); border:1px solid var(--line); }.stat span { display:block; color:var(--text-3); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }.stat strong { font: 13px var(--mono); overflow-wrap:anywhere; }
.section-divider { display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--text-2);font-size:11px;font-weight:600; }.section-divider::after { content:"";height:1px;flex:1;background:var(--line); }
.date-parts { display:grid;grid-template-columns:1.35fr repeat(5,1fr);gap:9px; }.date-parts label { display:flex;flex-direction:column;gap:7px; }.date-parts label > span { color:var(--text-2);font-size:11px;font-weight:600; }.date-parts input { font-family:var(--mono); }
.timestamp-derived { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }.timestamp-derived > div { min-width:0;display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft); }.timestamp-derived span { color:var(--text-3);font-size:10px; }.timestamp-derived code { overflow:hidden;text-overflow:ellipsis; }

.password-output { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border:1px solid #dcd9fb; border-radius:var(--radius-md); background:var(--primary-soft); }.password-output code { color:#332b9f; font-size:16px; font-weight:600; overflow-wrap:anywhere; }.strength { margin:16px 0 20px; }.strength > div:first-child { display:flex; justify-content:space-between; font-size:11px; color:var(--text-2); }.strength > div strong { color:var(--success); }.strength-track { height:5px; margin:8px 0; border-radius:5px; overflow:hidden; background:var(--surface-hover); }.strength-track i { display:block; width:75%; height:100%; border-radius:5px; background:var(--success); transition:.25s; }.strength small { color:var(--text-3); }.range-field > div { display:flex; justify-content:space-between; }.range-field output { color:var(--primary); font:600 12px var(--mono); }.range-field input { height:auto; padding:0; accent-color:var(--primary); border:0; box-shadow:none; }.check-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }.checkbox-option { min-height:64px;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-soft);cursor:pointer;transition:.2s; }.checkbox-option:hover { border-color:#d5d1ff;background:#fafaff;transform:translateY(-1px); }.checkbox-option > input { position:absolute;opacity:0;pointer-events:none; }.checkbox-mark { width:18px;height:18px;display:grid;place-items:center;flex:none;border:1.5px solid #b9b9c3;border-radius:5px;background:#fff;transition:.18s; }.checkbox-mark svg { width:13px;height:13px;color:#fff;opacity:0;transform:scale(.6);transition:.18s; }.checkbox-option input:focus-visible + .checkbox-mark { outline:3px solid rgba(81,70,216,.17);outline-offset:2px; }.checkbox-option input:checked + .checkbox-mark { border-color:var(--primary);background:var(--primary);box-shadow:0 0 0 3px rgba(81,70,216,.1); }.checkbox-option input:checked + .checkbox-mark svg { opacity:1;transform:scale(1); }.checkbox-option > span:last-child { display:flex;flex-direction:column;gap:4px;min-width:0; }.checkbox-option b { font-size:11px; }.checkbox-option small { color:var(--text-3);font:10px var(--mono); }
.conversion-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:18px; }.conversion-item, .hash-item { min-width:0; padding:12px; display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-soft); }.conversion-item span, .hash-item > span { color:var(--text-3); font:10px var(--mono); }.conversion-item code, .hash-item code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.qr-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; }.qr-preview { min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-left:1px solid var(--line); position:relative; }.qr-preview #qrCanvas canvas,.qr-preview #qrCanvas img { display:block;max-width:100%;height:auto!important;padding:12px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(32,32,40,.09);border-radius:8px; }.qr-preview small { color:var(--text-3); font:9px var(--mono); letter-spacing:.15em; }.skeleton { position:absolute;z-index:2;width:256px;height:256px;max-width:80%;border-radius:8px;background:linear-gradient(90deg,#f1f1f4 25%,#fafafa 50%,#f1f1f4 75%);background-size:200% 100%;animation:shimmer 1.2s infinite; }.skeleton-line { height:48px; margin-top:8px; border-radius:8px; background:linear-gradient(90deg,#f3f3f5 25%,#fafafa 50%,#f3f3f5 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; } @keyframes shimmer { to { background-position:-200% 0; } }
.regex-bar { height:46px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--surface-soft); color:var(--primary); font:15px var(--mono); }.regex-bar input { height:42px; padding:0; border:0; background:transparent; box-shadow:none; }.regex-bar .flags-input { flex:0 0 60px; color:var(--warning); }.highlight-output { min-height:150px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-soft); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }.highlight-output mark { color:#2d284d; background:#ddd9ff; border-radius:3px; padding:1px 0; box-shadow:0 0 0 1px #c7c1ff; }.match-chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }.match-chip { padding:5px 8px; border-radius:6px; background:var(--primary-soft); color:var(--primary); font:10px var(--mono); }
.drop-zone { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #d6d6dd; border-radius:var(--radius-lg); background:var(--surface-soft); color:var(--text-2); cursor:pointer; transition:.2s; }.drop-zone input { display:none; }.drop-zone svg { width:30px; height:30px; color:var(--primary); }.drop-zone span { color:var(--text-3); font-size:11px; }.drop-zone.dragging { border-color:var(--primary); background:var(--primary-soft); animation:drop-pulse .8s infinite alternate; } @keyframes drop-pulse { to { box-shadow:0 0 0 7px rgba(81,70,216,.07); } }.file-result { margin-top:12px; display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:12px; padding:10px; background:var(--surface-soft); border-radius:var(--radius-md); }.file-preview { width:48px;height:48px;display:grid;place-items:center;border-radius:6px;background:#fff;overflow:hidden; }.file-preview img { width:100%;height:100%;object-fit:cover; }.file-result small { display:block;color:var(--text-3);margin-top:4px; }
.jwt-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }.code-panel { border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }.code-panel > div { height:42px; display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface-soft);font-size:10px;letter-spacing:.08em; }.code-panel .copy-button { margin-left:auto; }.token-dot { width:7px;height:7px;border-radius:50%;background:var(--primary); }.token-dot.payload { background:var(--cyan); }.code-panel pre { min-height:230px;max-height:430px;overflow:auto;margin:0;padding:14px;background:#fbfbfc;color:#34343e;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere; }.file-label { display:flex;align-items:center;gap:8px;color:var(--text-2);font:11px var(--mono); }.file-label svg { width:15px;color:var(--primary); }
.hash-list { margin-top:12px; }.hash-item { margin-top:8px; grid-template-columns:74px minmax(0,1fr) auto; }.hash-item code { white-space:normal; overflow-wrap:anywhere; }.toast { position:fixed; z-index:100; left:50%; bottom:28px; transform:translate(-50%,15px); display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:rgba(35,35,43,.9);backdrop-filter:blur(12px);color:#fff;box-shadow:var(--shadow-float);opacity:0;pointer-events:none;transition:.22s var(--ease);font-size:11px; }.toast svg{width:14px;color:#77e7af}.toast.show{opacity:1;transform:translate(-50%,0)}
.mobile-overlay { display:none; }

@media (max-width: 900px) { :root{--sidebar-width:76px;--content-pad:24px}.brand{justify-content:center;padding:0}.brand-copy,.nav-item span,.nav-item kbd,.sidebar-foot span:last-child{display:none}.nav-item{grid-template-columns:1fr;padding:0;place-items:center}.sidebar-foot{justify-content:center}.qr-layout{grid-template-columns:1fr}.qr-preview{border-left:0;border-top:1px solid var(--line);padding-top:24px}.check-grid{grid-template-columns:repeat(2,1fr)}.date-parts{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 640px) { :root{--content-pad:16px}.app-shell{display:block}.sidebar{width:248px;transform:translateX(-105%);transition:.25s var(--ease);box-shadow:var(--shadow-float)}.sidebar.open{transform:none}.brand{justify-content:flex-start;padding:0 9px}.brand-copy,.nav-item span,.nav-item kbd,.sidebar-foot span:last-child{display:flex}.nav-item{grid-template-columns:22px 1fr auto;padding:0 10px;place-items:initial;align-items:center}.sidebar-foot{justify-content:flex-start}.main-area{width:100%}.mobile-menu{display:grid}.mobile-overlay{display:block;position:fixed;inset:0;z-index:25;background:rgba(30,30,38,.25);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s}.mobile-overlay.show{opacity:1;pointer-events:auto}.topbar{padding:0 14px}.crumb{display:none}.shortcut-hint{display:none}.content{padding:16px}.panel-heading{align-items:flex-start;margin-top:8px}.panel-heading .button,.heading-badge{flex:none}.panel-heading p{font-size:12px}.panel-heading h1{font-size:23px}.tool-card{padding:14px;border-radius:12px}.card-toolbar{align-items:flex-start}.two-column,.jwt-grid,.stat-grid,.conversion-grid,.result-list,.json-workspace,.timestamp-derived{grid-template-columns:1fr}.field-row{align-items:stretch;flex-direction:column}.field.small,.field.medium{flex:auto}.check-grid{grid-template-columns:1fr 1fr}.qr-layout{grid-template-columns:1fr}.button span,.copy-button span{display:none}.copy-button{width:32px;justify-content:center;padding:0}.password-output code{font-size:13px}.code-input.tall{min-height:310px}.json-pane .code-input,.json-tree{height:330px;min-height:330px}.cron-legend{display:none}.top-actions{gap:7px}.hash-item{grid-template-columns:58px minmax(0,1fr) auto}.panel-heading{gap:10px}.date-parts{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }

/* Utility classes (moved out of inline styles) */
.json-tree .tree-leaf { margin-left: 17px; }
.highlight-output .placeholder { color: var(--text-3); }

/* Dark theme — the semantic palette is redefined, then hardcoded light surfaces are patched. */
:root[data-theme="dark"] {
  --bg: #17171b;
  --sidebar: #1c1c21;
  --surface: #222228;
  --surface-soft: #1d1d23;
  --surface-hover: #292930;
  --text: #e9e9ef;
  --text-2: #a7a7b3;
  --text-3: #74747f;
  --line: #2c2c34;
  --line-strong: #3a3a44;
  --primary: #7c6ff2;
  --primary-dark: #8f84ff;
  --primary-soft: #272539;
  --success: #43c48c;
  --success-soft: #17281f;
  --warning: #e0a63e;
  --warning-soft: #2c2510;
  --danger: #ef6f77;
  --danger-soft: #2f1a1c;
  --cyan: #49b7cf;
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.45);
  --shadow-float: 0 8px 24px rgba(0,0,0,.55);
  color-scheme: dark;
}
:root[data-theme="dark"] .topbar { background: rgba(23,23,27,.82); }
:root[data-theme="dark"] .sidebar { border-right-color: rgba(255,255,255,.05); }
:root[data-theme="dark"] .brand-mark { background: var(--primary); color: #fff; box-shadow: 0 5px 14px rgba(0,0,0,.4); }
:root[data-theme="dark"] .brand-mark span { color: #dcd8ff; }
:root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.055); }
:root[data-theme="dark"] .icon-button { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .icon-button:hover { background: var(--surface); border-color: var(--primary); }
:root[data-theme="dark"] .copy-button { background: var(--surface); }
:root[data-theme="dark"] .segmented button.active { color: var(--text); background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { background: var(--surface); border-color: var(--primary); }
:root[data-theme="dark"] .code-input { background: var(--surface-soft); color: var(--text); }
:root[data-theme="dark"] .json-tree .key { color: #7fa5ff; }
:root[data-theme="dark"] .json-tree .string { color: #4fc48a; }
:root[data-theme="dark"] .json-tree .number { color: #e3a969; }
:root[data-theme="dark"] .json-tree .boolean, :root[data-theme="dark"] .json-tree .null { color: #b7a4ff; }
:root[data-theme="dark"] .highlight-output mark { color: #e9e9ef; background: rgba(124,111,242,.30); box-shadow: 0 0 0 1px rgba(124,111,242,.55); }
:root[data-theme="dark"] .password-output { border-color: var(--line-strong); }
:root[data-theme="dark"] .password-output code { color: #cfc9ff; }
:root[data-theme="dark"] .checkbox-option:hover { border-color: var(--primary); background: var(--surface-hover); }
:root[data-theme="dark"] .checkbox-mark { background: var(--surface); border-color: var(--line-strong); }
:root[data-theme="dark"] .code-panel pre { background: var(--surface-soft); color: var(--text); }
:root[data-theme="dark"] .drop-zone { border-color: var(--line-strong); }
:root[data-theme="dark"] .file-preview { background: var(--surface); }
:root[data-theme="dark"] .skeleton,
:root[data-theme="dark"] .skeleton-line { background: linear-gradient(90deg,#242430 25%,#2e2e3b 50%,#242430 75%); background-size: 200% 100%; }