/* Hallmark · macrostructure: signal-first workbench · tone: compact cobalt terminal · anchor hue: blue */
/* Hallmark · pre-emit critique: P4 H4 E5 S4 R5 V4 · mobile: verified 320/375/414/768 · WCAG token contrast verified */
@import url('./terminal-tokens.css');
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/manrope-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/manrope-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/manrope-cyrillic-500-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/manrope-cyrillic-600-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/manrope-cyrillic-700-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/manrope-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
body::before { display: none; }
.workbench { width: min(100%,440px); padding: max(var(--space-4),env(safe-area-inset-top)) var(--space-4) calc(var(--dock-height) + var(--space-5)); }
.masthead { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-4) var(--space-2); align-items: center; margin-bottom: var(--space-5); }
.identity { justify-content: flex-start; gap: var(--space-2); min-width: 0; }
h1 { font: 800 18px/1.1 var(--font-display); letter-spacing: -.045em; white-space: nowrap; }
.retrix-mark { width: 32px; height: 32px; stroke: var(--color-accent); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; flex: 0 0 auto; }
.subtitle { grid-row: 2; text-align: left; font: 500 11px/1.3 var(--font-body); color: var(--color-muted); }
.header-chips { display: contents; margin: 0; }
.language { grid-row: 2; grid-column: 2; min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-control); background: var(--color-clear); border-color: var(--color-rule); }
.lang-flag { display: none; }
.language select { width: 54px; font-size: 12px; font-weight: 700; }
.level-chip { grid-row: 1; grid-column: 2; justify-content: flex-end; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--color-clear); color: var(--color-muted); font-size: 11px; font-weight: 600; }
.level-bars { display: flex; align-items: flex-end; gap: var(--space-1); height: 13px; }
.level-bars i { width: 3px; height: 5px; background: var(--color-accent); }
.level-bars i:nth-child(2) { height: 9px; background: var(--color-rule); }
.level-bars i:nth-child(3) { height: 13px; background: var(--color-rule); }
body[data-tier="2"] .level-bars i:nth-child(2),body[data-tier="3"] .level-bars i { background: var(--color-accent); }
#signal-form { gap: var(--space-5); }
.signal { min-height: 276px; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-panel-border); border-top: 2px solid var(--color-accent); border-radius: var(--radius-panel); background: var(--color-panel); position: relative; }
.signal-top { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-rule); }
.signal-top h2 { font-size: 12px; font-weight: 600; color: var(--color-muted); }
.signal-status { font-size: 10px; color: var(--color-muted); }
.empty { min-height: 207px; gap: var(--space-2); }
.empty-emblem { height: 70px; width: 70px; display: grid; place-items: center; margin-bottom: var(--space-2); background: var(--color-clear); }
.empty-emblem .retrix-mark { width: 58px; height: 58px; stroke: var(--color-mark); stroke-width: 1.4; }
.empty p { font-size: 13px; color: var(--color-ink); }
.empty-hint { font-size: 11px; max-width: 26ch; }
.direction-row { justify-content: flex-start; gap: var(--space-3); margin: var(--space-5) 0 var(--space-1); }
.direction-icon { width: 35px; height: 35px; stroke-width: 1.8; }
.direction { font: 700 30px/1.1 var(--font-display); letter-spacing: -.04em; text-transform: none; }
.result-pair { text-align: left; margin: var(--space-2) 0 var(--space-5) 48px; font: 600 12px/1.3 var(--font-body); color: var(--color-muted); overflow-wrap: anywhere; }
.metrics { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--space-3); align-items: end; }
.metric { background: var(--color-clear); border: 0; border-radius: 0; padding: 0; min-height: 64px; gap: var(--space-2); align-items: flex-end; flex-direction: column-reverse; }
.metric:first-child { order: -1; align-items: flex-start; }
.metric > span { font-size: 10px; letter-spacing: .01em; text-transform: none; font-weight: 500; }
#confidence { font: 600 25px/1 var(--font-display); letter-spacing: -.04em; color: var(--color-ink); }
#timer { font: 500 var(--text-display)/1 var(--font-mono); letter-spacing: -.065em; }
progress { margin-top: var(--space-5); height: 2px; border-radius: 0; }
.parameters { padding: 0; border: 0; border-radius: 0; background: var(--color-clear); }
.fields { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr); gap: var(--space-3); }
.field { min-width: 0; }
.field > span { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#pair-open { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); border: 1px solid var(--color-field-border); border-radius: var(--radius-control); background: var(--color-field); padding: var(--space-3) var(--space-4); min-height: 54px; font-size: 15px; font-weight: 650; overflow: clip; }
#pair-open::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: var(--space-1); flex-shrink: 0; }
#duration-buttons { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: thin; }
#duration-buttons button { min-width: 58px; min-height: 44px; flex: 1 0 58px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-radius: var(--radius-control); color: var(--color-muted); background: var(--color-clear); font-size: 12px; font-weight: 600; }
#duration-buttons button[aria-pressed="true"] { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }
#duration-buttons button:disabled { opacity: .45; }
.execution-dock { position: fixed; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%,440px); padding: var(--space-3) var(--space-4) max(var(--space-4),env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); background: var(--color-paper); }
.primary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin: 0; min-height: 54px; padding: var(--space-4) var(--space-5); background: var(--color-action); color: var(--color-accent-ink); border-radius: var(--radius-control); font-size: 13px; letter-spacing: .015em; font-weight: 800; }
.primary svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.8; }
.primary:active:enabled { opacity: 1; transform: translateY(1px); }
.primary:disabled { opacity: 1; }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-4) 0 var(--space-3); text-align: left; font-size: 10px; color: var(--color-muted); }
footer a { min-height: 44px; padding: 0; font-size: 11px; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.demo { margin-top: var(--space-2); }
#level-sheet, #pair-sheet, #duration-sheet { border-color: var(--color-panel-border); border-radius: 12px 12px 0 0; }
#pair-sheet { padding-inline: var(--space-4); }
.sheet-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.sheet-head button { color: var(--color-muted); font-size: 12px; border-radius: var(--radius-control); background: var(--color-clear); }
#asset-search { border: 1px solid var(--color-field-border); border-radius: var(--radius-control); background: var(--color-field); font-size: 14px; min-height: 48px; }
#asset-search::placeholder { color: var(--color-muted); }
#asset-categories button, #asset-markets button { min-height: 44px; font-size: 11px; border-radius: var(--radius-control); color: var(--color-muted); }
#asset-categories [aria-pressed=true],#asset-markets [aria-pressed=true] { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-accent-soft); }
#pair-options .pair-option { border-color: var(--color-rule); min-height: 56px; }
#pair-options .pair-option[aria-pressed=true] { background: var(--color-accent-soft); color: var(--color-accent); }
#pair-options .pair-option strong { font-weight: 600; font-size: 14px; }
#pair-options .pair-option .market-tag { color: var(--color-muted); opacity: 1; }
#pair-options .pair-option:disabled { opacity: .45; }
.level-row { background: var(--color-field); border-color: var(--color-rule); border-radius: var(--radius-control); }
.level-row b { font-size: 18px; }
.level-row[data-current=true] { background: var(--color-accent-soft); }
.notice { border-radius: var(--radius-control); font-size: 13px; }
.generation { min-height: 207px; padding: var(--space-4) 0; }
.generation-visual { width: 80px; height: 74px; margin-bottom: var(--space-4); display: grid; place-items: center; }
.generation-visual svg { width: 54px; height: 54px; stroke: var(--color-accent); stroke-width: 2; }
.generation-scan { left: 5%; width: 90%; top: 15%; background: var(--color-accent); animation: retrix-scan 1.5s var(--ease-out) infinite; }
.generation-title { font: 600 12px/1.4 var(--font-body); }
.generation-pair { font: 11px/1.4 var(--font-mono); margin: var(--space-2) 0 var(--space-3); }
.generation-steps i { width: 24px; height: 2px; border-radius: 0; }
@keyframes retrix-scan { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(55px); opacity: 0; } }
body[data-state=active] #active { animation: signal-reveal var(--dur-short) var(--ease-out) both; }
@keyframes signal-reveal { from {opacity:0;transform:translateY(4px);} to {opacity:1;transform:none;} }
:focus-visible { outline-color: var(--color-focus); }
@media (hover:hover) { #pair-open:hover:enabled, #duration-buttons button:hover:enabled { border-color: var(--color-accent); } }
@media (max-width:350px) { .workbench {padding-inline:var(--space-3);} .signal {padding-inline:var(--space-4);} #timer {font-size:32px;} h1 {font-size:16px;} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {animation:none !important;transition:none !important;} }

#selected-asset { min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
#duration-open { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 54px; width: 100%; padding: var(--space-3); border: 1px solid var(--color-field-border); border-radius: var(--radius-control); background: var(--color-field); color: var(--color-ink); font: 600 15px/1.3 var(--font-body); }
#duration-open::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: 0 var(--space-1); }
#duration-open:disabled { color: var(--color-disabled-ink); opacity: .65; }
#duration-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; width: min(100%,440px); max-height: 85dvh; padding: var(--space-4) var(--space-4) max(var(--space-5),env(safe-area-inset-bottom)); background: var(--color-sheet); color: var(--color-ink); border: 1px solid var(--color-panel-border); border-radius: 12px 12px 0 0; }
#duration-sheet::backdrop { background: var(--color-backdrop); }
#duration-buttons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); overflow: visible; padding: 0; }
#duration-buttons button { min-height: 54px; font-size: 14px; }
@media (hover:hover) { #duration-open:hover:enabled { border-color: var(--color-accent); } }