.developer-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .3fr); gap: 12px; padding: 16px 0; }.developer-form-grid label, .duration-inputs label, .csp-builder label:not(.csp-check) { display: grid; gap: 6px; }.developer-form-grid span, .duration-inputs span, .csp-builder label > span { color: var(--color-muted); font-size: 11px; font-weight: 700; }.developer-form-grid input, .developer-form-grid select, .duration-inputs input, .csp-builder input { min-height: 42px; }.developer-results { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.developer-results > div { display: grid; grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); }.developer-results > div:last-child { border-bottom: 0; }.developer-results span { color: var(--color-muted); font-size: 11px; }.developer-results code { overflow: hidden; font: 12px var(--font-code); text-overflow: ellipsis; white-space: nowrap; }.developer-results button { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); font: 700 10px var(--font-ui); cursor: pointer; }.duration-tool { margin-top: 16px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.duration-tool h3 { margin: 0 0 12px; font-size: 13px; }.duration-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.duration-tool > code { display: block; margin-top: 12px; font: 12px var(--font-code); }.csp-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 16px; padding-top: 16px; }.csp-builder, .csp-output { min-width: 0; padding: 15px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.csp-builder { display: grid; gap: 11px; }.csp-builder h3, .csp-output h3 { margin: 0; font-size: 13px; }.csp-check { display: flex; align-items: center; gap: 8px; font-size: 11px; }.csp-output > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.csp-output pre { overflow-x: auto; min-height: 110px; margin: 12px 0 18px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); white-space: pre-wrap; overflow-wrap: anywhere; }.csp-output code { font: 11px/1.6 var(--font-code); }.csp-output ul { display: grid; gap: 7px; margin: 10px 0 0; padding-left: 20px; color: var(--color-error); font-size: 11px; }.csp-output ul.is-valid { color: var(--color-success); }
.current-epoch { display: grid; grid-template-columns: minmax(180px, .5fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }.current-epoch h3 { margin: 0; font-size: 13px; }.current-epoch div span { display: block; margin-top: 4px; color: var(--color-muted); font-size: 10px; }.current-epoch code { font: 700 18px var(--font-code); }.current-epoch button, .date-parts-results button, .date-format-result button { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); font: 700 10px var(--font-ui); cursor: pointer; }.date-parts-tool, .date-format-tool { margin-top: 16px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.date-parts-tool > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 14px; }.date-parts-tool h3, .date-format-tool h3 { margin: 0; font-size: 13px; }.date-parts-tool > div:first-child label { display: grid; gap: 5px; }.date-parts-tool label span, .date-format-tool label span { color: var(--color-muted); font-size: 10px; font-weight: 700; }.date-parts-grid { display: grid; grid-template-columns: repeat(6, minmax(70px, 1fr)); gap: 10px; margin-top: 12px; }.date-parts-grid label { display: grid; gap: 5px; }.date-parts-grid input, .date-parts-tool select { min-height: 40px; }.date-parts-results { display: grid; margin-top: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.date-parts-results > div { display: grid; grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 7px 10px; border-bottom: 1px solid var(--color-border); }.date-parts-results > div:last-child { border-bottom: 0; }.date-parts-results span, .date-format-result > span { color: var(--color-muted); font-size: 10px; }.date-parts-results code, .date-format-result code { overflow: hidden; font: 11px var(--font-code); text-overflow: ellipsis; white-space: nowrap; }.date-format-tool > p { margin: 7px 0 0; color: var(--color-muted); font-size: 11px; line-height: 1.55; }.date-format-result { display: grid; grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
.header-tool-panel[hidden] { display: none; }.csp-builder select { min-height: 42px; }
.generator-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 16px; margin-top: 16px; }.generator-settings, .generator-results { min-width: 0; padding: 15px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.generator-settings h3, .generator-results h3 { margin: 0; font-size: 13px; }.generator-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }.generator-types label { position: relative; cursor: pointer; }.generator-types input { position: absolute; opacity: 0; pointer-events: none; }.generator-types span { min-height: 64px; display: grid; align-content: center; gap: 3px; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas); transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }.generator-types strong { font-size: 12px; }.generator-types small { color: var(--color-muted); font-size: 9px; line-height: 1.35; }.generator-types label:hover span { border-color: color-mix(in srgb, var(--color-ink) 35%, var(--color-border)); }.generator-types input:checked + span { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-canvas)); box-shadow: inset 0 0 0 1px var(--color-accent); }.generator-types input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-focus) 42%, transparent); outline-offset: 3px; }.generator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 14px 0; }.generator-fields label { display: grid; gap: 6px; }.generator-fields label > span { color: var(--color-muted); font-size: 10px; font-weight: 700; }.generator-fields input, .generator-fields select { min-width: 0; min-height: 42px; }.generator-field-wide { grid-column: 1 / -1; }.generator-settings > .button { width: 100%; }.generator-results-heading { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.generator-results-heading > div { display: flex; align-items: center; gap: 8px; }.generator-results-heading span { min-width: 24px; padding: 2px 7px; border-radius: 999px; color: var(--color-muted); background: var(--color-surface); font: 700 10px var(--font-code); text-align: center; }.generator-results ol { max-height: 470px; overflow: auto; display: grid; margin: 12px 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); list-style: none; }.generator-results li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 45px; padding: 7px 8px 7px 11px; border-bottom: 1px solid var(--color-border); }.generator-results li:last-child { border-bottom: 0; }.generator-results code { overflow: hidden; font: 11px var(--font-code); text-overflow: ellipsis; white-space: nowrap; }.generator-copy { padding: 6px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); font: 700 10px var(--font-ui); cursor: pointer; }.generator-copy:hover { background: var(--color-surface); }.generator-results > p { margin: 18px 0 3px; color: var(--color-muted); font-size: 11px; line-height: 1.55; text-align: center; }
.generator-tab-panel[hidden] { display: none; }.code-generator-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 16px; margin-top: 16px; }.code-generator-settings, .code-generator-preview { min-width: 0; padding: 15px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.code-generator-settings h3, .code-generator-preview h3 { margin: 0; font-size: 13px; }.code-generator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 14px 0; }.code-generator-fields label:not(.csp-check), .qr-form > label { display: grid; gap: 6px; }.code-generator-fields label > span, .qr-form label > span { color: var(--color-muted); font-size: 10px; font-weight: 700; }.code-generator-fields input, .code-generator-fields select, .code-generator-fields textarea, .qr-form input, .qr-form textarea { min-width: 0; min-height: 42px; }.code-generator-fields textarea, .qr-form textarea { width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); font: 12px/1.55 var(--font-code); }.code-generator-fields textarea:hover, .qr-form textarea:hover { border-color: color-mix(in srgb, var(--color-ink) 38%, var(--color-border)); }.code-generator-fields textarea:focus-visible, .qr-form textarea:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }.code-generator-settings > .button { width: 100%; }.qr-type-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.qr-type-tabs label { position: relative; cursor: pointer; }.qr-type-tabs input { position: absolute; opacity: 0; pointer-events: none; }.qr-type-tabs span { min-height: 34px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-muted); background: var(--color-canvas); font-size: 10px; font-weight: 700; }.qr-type-tabs label:hover span { color: var(--color-ink); background: var(--color-surface); }.qr-type-tabs input:checked + span { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--color-canvas)); }.qr-type-tabs input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-focus) 42%, transparent); outline-offset: 3px; }.qr-form { margin-top: 14px; }.qr-form[hidden] { display: none; }.code-output-options { margin-bottom: 14px; }.code-generator-preview .generator-results-heading > div { flex-wrap: wrap; justify-content: flex-end; }.code-canvas-wrap { min-height: 360px; display: grid; place-items: center; overflow: auto; margin-top: 12px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background-color: #ffffff; background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%), linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f1f5f9 75%), linear-gradient(-45deg, transparent 75%, #f1f5f9 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; }.code-canvas-wrap canvas { display: block; max-width: 100%; height: auto; background: #ffffff; box-shadow: 0 3px 14px rgb(15 23 42 / .12); }
.code-scanner { margin-top: 16px; padding: 15px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.code-scanner-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.code-scanner-heading h3 { margin: 0; font-size: 13px; }.code-scanner-heading p { max-width: 65ch; margin: 5px 0 0; color: var(--color-muted); font-size: 10px; line-height: 1.5; }.code-scanner-heading > span { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--color-muted); background: var(--color-surface); font-size: 9px; font-weight: 700; }.scanner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.scanner-file-button { position: relative; cursor: pointer; }.scanner-file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }.scanner-view { position: relative; min-height: 260px; display: grid; place-items: center; overflow: hidden; margin-top: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-muted); background: #0f172a; }.scanner-view video { width: 100%; max-height: 440px; display: block; object-fit: contain; }.scanner-view video[hidden] { display: none; }.scanner-view > div { max-width: 42ch; padding: 24px; color: #cbd5e1; font-size: 11px; line-height: 1.55; text-align: center; }.scanner-result { margin-top: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.scanner-result[hidden] { display: none; }.scanner-result > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 6px 8px 6px 11px; border-bottom: 1px solid var(--color-border); }.scanner-result span { color: var(--color-muted); font-size: 10px; font-weight: 700; }.scanner-result pre { overflow: auto; max-height: 180px; margin: 0; padding: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }.scanner-result code { font: 11px/1.55 var(--font-code); }
@media (max-width: 1000px) { .date-parts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .developer-form-grid, .csp-grid, .generator-layout, .code-generator-layout { grid-template-columns: 1fr; }.duration-inputs { grid-template-columns: 1fr; }.developer-results > div { grid-template-columns: 1fr auto; }.developer-results code { grid-column: 1 / -1; grid-row: 2; }.current-epoch { grid-template-columns: 1fr auto; }.current-epoch code { grid-column: 1 / -1; grid-row: 2; }.date-parts-tool > div:first-child { align-items: stretch; flex-direction: column; }.date-parts-results > div, .date-format-result { grid-template-columns: 1fr auto; }.date-parts-results code, .date-format-result code { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 520px) { .date-parts-grid { grid-template-columns: repeat(2, 1fr); }.generator-types, .generator-fields, .code-generator-fields { grid-template-columns: 1fr; }.generator-field-wide { grid-column: auto; }.code-generator-preview .generator-results-heading { align-items: stretch; flex-direction: column; }.code-generator-preview .generator-results-heading > div { justify-content: flex-start; }.code-canvas-wrap { min-height: 280px; padding: 14px; } }