/* 1.2 workspace: one obvious input, one readable output, clear control hierarchy. */
.tool-card { border-color: #cbded3; border-radius: 22px; box-shadow: 0 24px 58px #153b2c16; }
.workspace-bar { min-height: 54px; padding: 14px 28px; background: #f9fcfa; font-size: 11px; letter-spacing: .11em; }
html[data-theme=dark] .workspace-bar { background: #20383b; }
.workspace-local { font-size: 12px; font-weight: 650; }
.workspace-local::before { width: 8px; height: 8px; }
.tool-columns { grid-template-columns: 1.12fr .88fr; }
.tool-input-pane { padding: 28px 30px 30px; }
.field { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.field input,.field textarea,.field select { background: var(--paper,#fff); border: 1px solid #b9cec1; border-radius: 12px; min-height: 52px; color: var(--ink,#142c30); }
.field input[data-field=secret] { min-height: 72px; font-size: 18px; background: #f9fcfa; border-width: 2px; border-color: #a8c8b5; }
html[data-theme=dark] .field input[data-field=secret] { background: #1b3437; border-color: #678e7b; }
.field input[data-field=secret]:focus { background: var(--paper,#fff); border-color: var(--accent,#096f58); outline: 3px solid #b9e9d1; outline-offset: 2px; }
.field input::placeholder,.field textarea::placeholder { color: #52686a; }
html[data-theme=dark] .field input::placeholder,html[data-theme=dark] .field textarea::placeholder { color: #b7cac4; }
.tool-input-pane>.button-secondary { min-height: 44px; border-radius: 10px; }
.field-hint { margin: 9px 0 13px; color: var(--muted,#52656a); }
.advanced { margin-block: 18px; }
.advanced summary { font-size: 14px; font-weight: 650; }
.tool-input-pane>.tool-actions { gap: 9px; }
.tool-input-pane>.tool-actions .button-primary { min-height: 54px; font-size: 15px; }
.button-primary { background: #096f58; color: #fff; box-shadow: 0 5px 14px #0a6c5430; }
.button-primary:hover { background: #075540; }
html[data-theme=dark] .button-primary { background: #81e5bf; color: #102a25; }
html[data-theme=dark] .button-primary:hover { background: #b0f3d9; color: #102a25; }
.button-secondary { border-color: #c9d8ce; background: var(--paper,#fff); }
.tool-input-pane>.tool-actions [data-action=clear] { border: 1px solid #c9d8ce; }
.tool-result-pane { position: relative; overflow: hidden; min-height: 348px; padding: 34px; background: radial-gradient(circle at 80% 10%,#225a4f 0,transparent 42%),linear-gradient(145deg,#173a3b,#0e292e); border-inline-start: 0; color: #effbf4; }
.tool-result-pane::before { content: ''; position: absolute; inset: 14px; border: 1px solid #b8e7d222; border-radius: 15px; pointer-events: none; }
.tool-result-pane .empty-result,.tool-result-pane .tool-output { position: relative; z-index: 1; }
.tool-result-pane .empty-result::before,.tool-result-pane .result-label { color: #b8e8d3; font-size: 11px; letter-spacing: .14em; }
.tool-result-pane .empty-result p,.tool-result-pane [data-countdown] { color: #d1e5dd; font-size: 14px; }
.tool-result-pane .code-placeholder span { height: 6px; width: 27px; background: #a8d1bd; }
.tool-result-pane .code-digits { color: #fff; font-size: clamp(40px,4.5vw,62px); letter-spacing: .045em; text-shadow: 0 6px 25px #021d1c55; margin-bottom: 15px; }
.tool-result-pane .tool-output pre { color: #e7f6ef; }
.tool-result-pane .tool-output .button { min-height: 48px; background: #e8faef; color: #07523f; border-color: #e8faef; font-size: 14px; }
.tool-result-pane .tool-output .button:hover { background: #fff; color: #063e32; }
.code-progress { display: block; width: min(100%,240px); height: 8px; margin: -6px auto 23px; border: 0; border-radius: 99px; overflow: hidden; background: #ffffff33; }
.code-progress[hidden] { display: none; }
.code-progress::-webkit-progress-bar { background: #ffffff33; border-radius: 99px; }
.code-progress::-webkit-progress-value { background: #89e8bd; border-radius: 99px; }
.code-progress::-moz-progress-bar { background: #89e8bd; border-radius: 99px; }
.tool-status:not(:empty) { margin-top: 16px; padding: 10px 12px; border: 1px solid #cbe5d5; border-radius: 10px; }
.qr-output canvas { border-radius: 12px; box-shadow: 0 12px 24px #00171666; }
@media(max-width:700px) {
  .tool-card { border-radius: 18px; }
  .workspace-bar { min-height: 46px; padding: 10px 17px; }
  .workspace-local { font-size: 11px; }
  .tool-columns { grid-template-columns: 1fr; }
  .tool-input-pane { padding: 20px 18px 22px; }
  .field input[data-field=secret] { min-height: 70px; font-size: 16px; }
  .tool-input-pane>.tool-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .tool-input-pane>.tool-actions [data-action=run] { grid-column: 1/-1; width: 100%; min-height: 54px; font-size: 16px; }
  .tool-input-pane>.tool-actions [data-action=demo],.tool-input-pane>.tool-actions [data-action=clear] { width: 100%; min-height: 46px; font-size: 13px; }
  .tool-result-pane { min-height: 176px; padding: 27px 20px; border-top: 0; scroll-margin-top: 80px; }
  .tool-result-pane::before { inset: 10px; }
  .tool-result-pane .code-digits { font-size: clamp(38px,11vw,58px); }
  .tool-result-pane .empty-result p { font-size: 13px; }
}
@media(max-width:370px) {
  .tool-input-pane { padding-inline: 16px; }
  .tool-result-pane .code-digits { font-size: 37px; }
  .tool-result-pane .code-placeholder span { width: 19px; }
}
@media(prefers-reduced-motion:reduce) {
  .button { transition: none; }
}