.trifid-tool {
    --trifid-panel: #f8f8f9;
    --trifid-surface: #ffffff;
    --trifid-line: #d8dbe0;
    --trifid-line-strong: #b8c6da;
    --trifid-text: #152033;
    --trifid-muted: #687385;
    --trifid-blue: #dbe7f5;
    --trifid-accent: #2563eb;
    --trifid-good-bg: #eef8ef;
    --trifid-good-line: #cfe2d1;
    --trifid-good-text: #285c35;
    --trifid-alert-bg: #fff5e3;
    --trifid-alert-line: #ecd8ab;
    --trifid-alert-text: #795513;
    --trifid-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    color: var(--trifid-text);
    font-family: "Inter", var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.55;
}

html[data-theme="dark"] .trifid-tool {
    --trifid-panel: #20242a;
    --trifid-surface: #252a31;
    --trifid-line: #323944;
    --trifid-line-strong: #52677e;
    --trifid-text: #f1f5f9;
    --trifid-muted: #b0bbca;
    --trifid-blue: #213147;
    --trifid-accent: #93b8ff;
    --trifid-good-bg: #203629;
    --trifid-good-line: #3f684c;
    --trifid-good-text: #b4e5c2;
    --trifid-alert-bg: #3b3020;
    --trifid-alert-line: #715c35;
    --trifid-alert-text: #f0d49b;
}

.trifid-tool * { box-sizing: border-box; }
.trifid-tool [hidden] { display: none !important; }
.trifid-tool button, .trifid-tool input { font: inherit; }
.trifid-tool button { touch-action: manipulation; }
.trifid-tool :is(button, input, textarea):focus-visible { outline: 3px solid var(--trifid-accent); outline-offset: 3px; }
.trifid-tool :is(.cipher-left-col, .cipher-right-col, .io-grid, .cipher-io, .cipher-section) { min-width: 0; }
.trifid-tool .cipher-top-controls { display: grid; gap: 12px; margin-bottom: 14px; }
.trifid-tool .cipher-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trifid-tool .cipher-actions .cipher-btn { min-height: 48px; font-size: 0.9rem; padding: 10px 12px; }
.trifid-tool .cipher-left-col > .cipher-section { padding: 16px; }
.trifid-tool .cipher-section-title { font-size: 0.95rem; margin-bottom: 14px; }
.trifid-tool :is(.control-stack, .field, .option-list) { display: grid; gap: 12px; }
.trifid-tool .field { gap: 7px; }
.trifid-tool .field-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.trifid-tool .field-count { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--trifid-muted); }
.trifid-tool .text-input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1px solid var(--trifid-line-strong); border-radius: 12px; background: var(--trifid-surface); color: var(--trifid-text); }
.trifid-tool .alphabet-input { font-family: var(--trifid-mono); letter-spacing: 0.02em; }
.trifid-tool .field-help { margin: 0; color: var(--trifid-muted); font-size: 0.86rem; line-height: 1.55; }
.trifid-tool .tool-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trifid-tool .tool-buttons .cipher-btn { min-height: 44px; padding: 10px 8px; font-size: 0.86rem; }
.trifid-tool .tool-buttons .cipher-btn-primary { grid-column: 1 / -1; }
.trifid-tool .validation { padding: 10px 12px; border: 1px solid var(--trifid-alert-line); border-radius: 12px; color: var(--trifid-alert-text); background: var(--trifid-alert-bg); font-size: 0.86rem; }
.trifid-tool .validation.good { border-color: var(--trifid-good-line); background: var(--trifid-good-bg); color: var(--trifid-good-text); }
.trifid-tool .text-input.invalid { border-color: var(--trifid-alert-line); background: var(--trifid-alert-bg); }
.trifid-tool .option-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trifid-tool .option-left { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.trifid-tool .option-left input { flex: 0 0 18px; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--trifid-accent); }
.trifid-tool .option-left label { font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.trifid-tool .option-desc { margin: 3px 0 0; color: var(--trifid-muted); font-size: 0.83rem; }
.trifid-tool .option-row:has(input:disabled) { opacity: 0.65; }
.trifid-tool .option-list + .field-help { margin-top: 14px; }
.trifid-tool .stepper { display: flex; align-items: center; gap: 5px; }
.trifid-tool :is(.stepper-btn, .block-btn) { display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; padding: 4px; border: 1px solid var(--trifid-line); border-radius: 9px; background: var(--trifid-surface); color: var(--trifid-text); font-weight: 700; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease; }
.trifid-tool :is(.stepper-btn, .block-btn):hover:not(:disabled) { background: var(--trifid-blue); border-color: var(--trifid-line-strong); }
.trifid-tool :is(.stepper-btn, .block-btn):disabled { opacity: 0.45; cursor: not-allowed; }
.trifid-tool .stepper-value { min-width: 18px; font-weight: 700; text-align: center; }
.trifid-tool .is-disabled { opacity: 0.5; }
.trifid-tool .io-grid { display: grid; gap: 12px; }
.trifid-tool .cipher-io { display: flex; flex-direction: column; padding: 14px; }
.trifid-tool .io-head { flex-shrink: 0; }
.trifid-tool .cipher-io textarea { width: 100%; min-width: 0; min-height: 210px; height: 230px; flex: 1; padding: 14px; border: 1px solid var(--trifid-line-strong); border-radius: 14px; background: var(--trifid-surface); color: var(--trifid-text); resize: vertical; font: 0.95rem/1.7 var(--trifid-mono); }
.trifid-tool textarea::placeholder { color: var(--trifid-muted); opacity: 1; }
.trifid-tool .io-divider { display: none; }
.trifid-tool .io-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; color: var(--trifid-muted); font-size: 0.8rem; }
.trifid-tool .stat { display: inline-flex; align-items: center; gap: 5px; }
.trifid-tool .stat strong { color: var(--trifid-text); font-weight: 600; }
.trifid-tool .status-dot { width: 7px; height: 7px; background: var(--trifid-good-text); border-radius: 50%; }
.trifid-tool .status-dot.err { background: var(--trifid-alert-text); }
.trifid-tool .cube-intro { margin: 0 0 15px; color: var(--trifid-muted); font-size: 0.9rem; }
.trifid-tool .cube-structure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trifid-tool .cube-layer { min-width: 0; padding: 12px; border: 1px solid var(--trifid-line); border-radius: 14px; background: var(--trifid-surface); }
.trifid-tool .layer-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; font-weight: 700; }
.trifid-tool .layer-index { padding: 2px 6px; background: var(--trifid-blue); border-radius: 5px; color: var(--trifid-accent); font-size: 0.75rem; }
.trifid-tool .cube-matrix { display: grid; grid-template-columns: 16px repeat(3, minmax(0, 1fr)); gap: 5px; }
.trifid-tool .cube-axis { display: grid; place-items: center; min-height: 20px; color: var(--trifid-muted); font-size: 0.8rem; }
.trifid-tool .cube-cell { min-width: 0; min-height: 42px; padding: 0; border: 1px solid var(--trifid-line); border-radius: 8px; background: var(--trifid-panel); color: var(--trifid-text); font: 700 1rem var(--trifid-mono); cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
.trifid-tool .cube-cell:hover { border-color: var(--trifid-accent); background: var(--trifid-blue); }
.trifid-tool .cube-cell.is-in-block { border-color: var(--trifid-line-strong); background: var(--trifid-blue); }
.trifid-tool :is(.cube-cell.is-selected, .symbol-token.selected) { color: #ffffff; background: #2563eb; border-color: #2563eb; }
.trifid-tool .cube-footer { display: grid; gap: 8px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--trifid-line); }
.trifid-tool .cube-detail { font-size: 0.9rem; }
.trifid-tool .cube-keyline { overflow-wrap: anywhere; color: var(--trifid-muted); font: 0.85rem var(--trifid-mono); }
.trifid-tool .explain-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.trifid-tool .explain-head .cipher-section-title { margin-bottom: 6px; }
.trifid-tool .explain-subtitle { margin: 0; color: var(--trifid-muted); font-size: 0.85rem; }
.trifid-tool .block-navigation { display: inline-flex; align-items: center; gap: 7px; }
.trifid-tool .block-indicator { min-width: 90px; text-align: center; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.trifid-tool .process-canvas { display: grid; gap: 12px; }
.trifid-tool .process-step { min-width: 0; border: 1px solid var(--trifid-line); border-radius: 12px; overflow: hidden; }
.trifid-tool .step-title { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--trifid-blue); font-size: 0.86rem; font-weight: 700; }
.trifid-tool .step-number { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--trifid-surface); color: var(--trifid-accent); font-size: 0.8rem; }
.trifid-tool .step-body { padding: 12px; min-width: 0; background: var(--trifid-surface); }
.trifid-tool .step-note { margin: 10px 0 0; color: var(--trifid-muted); font-size: 0.85rem; }
.trifid-tool :is(.symbol-line, .digit-stream, .chips) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trifid-tool .symbol-token { display: inline-grid; place-items: center; min-width: 34px; min-height: 36px; padding: 4px 7px; border: 1px solid var(--trifid-line-strong); border-radius: 8px; background: var(--trifid-panel); color: var(--trifid-text); font: 700 0.95rem var(--trifid-mono); cursor: pointer; transition: border-color 0.16s ease, background-color 0.16s ease; }
.trifid-tool button.symbol-token:hover { border-color: var(--trifid-accent); background: var(--trifid-blue); }
.trifid-tool .symbol-token.result { border-color: var(--trifid-good-line); background: var(--trifid-good-bg); color: var(--trifid-good-text); cursor: default; }
.trifid-tool .coord-scroll { max-width: 100%; overflow-x: auto; margin-top: 10px; }
.trifid-tool .coord-chart { border-collapse: separate; border-spacing: 3px; font: 600 0.88rem var(--trifid-mono); }
.trifid-tool .coord-chart th { min-width: 70px; padding: 6px; text-align: left; color: var(--trifid-muted); font: 600 0.8rem "Inter", var(--font-sans); }
.trifid-tool .coord-chart td { min-width: 32px; height: 30px; border: 1px solid var(--trifid-line); border-radius: 6px; background: var(--trifid-panel); text-align: center; }
.trifid-tool .coord-chart td.is-focus { background: var(--trifid-blue); border-color: var(--trifid-line-strong); }
.trifid-tool .digit-group { padding: 5px 8px; border: 1px solid var(--trifid-line); border-radius: 8px; background: var(--trifid-panel); font: 700 0.92rem var(--trifid-mono); }
.trifid-tool .formula-line { display: grid; grid-template-columns: 65px minmax(0, 1fr); align-items: baseline; gap: 8px; margin-top: 8px; font-size: 0.85rem; }
.trifid-tool .formula-line code { min-width: 0; overflow-wrap: anywhere; font: 0.9rem var(--trifid-mono); color: var(--trifid-text); }
.trifid-tool .empty-explainer { padding: 22px 14px; border: 1px dashed var(--trifid-line-strong); border-radius: 12px; color: var(--trifid-muted); text-align: center; font-size: 0.9rem; }
.trifid-tool .cube-structure > .empty-explainer { grid-column: 1 / -1; }
.trifid-tool .chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px; border: 1px solid var(--trifid-line); border-radius: 999px; background: var(--trifid-surface); color: var(--trifid-muted); font-size: 0.8rem; }
.trifid-tool .chip strong { color: var(--trifid-text); }
.trifid-tool .callout { padding: 14px; border: 1px solid var(--trifid-line); border-radius: 14px; background: var(--trifid-panel); color: var(--trifid-muted); font-size: 0.9rem; }
.trifid-tool .callout strong { color: var(--trifid-text); }
.trifid-tool .statusbar { min-height: 30px; color: var(--trifid-muted); font-size: 0.88rem; }
.trifid-tool .statusbar.error { color: var(--trifid-alert-text); }
.trifid-tool .statusbar.success { color: var(--trifid-good-text); }

@media (min-width: 1024px) {
    .trifid-tool .cipher-top-controls, .trifid-tool .cipher-content-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 18px; }
    .trifid-tool .cipher-right-col { grid-template-rows: none; height: auto; min-height: 0; align-self: start; }
    .trifid-tool .io-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

@media (max-width: 1023px) {
    .trifid-tool .cipher-left-col { order: 2; }
    .trifid-tool .cipher-right-col { display: contents; }
    .trifid-tool .io-grid { order: 0; }
    .trifid-tool .statusbar { order: 1; }
    .trifid-tool .cube-panel { order: 3; }
    .trifid-tool .explain-panel { order: 4; }
    .trifid-tool .properties-panel { order: 5; }
    .trifid-tool .callout { order: 6; }
    .trifid-tool .cipher-content-grid { grid-template-columns: minmax(0, 1fr); }
    .trifid-tool .cipher-top-controls { grid-template-columns: minmax(0, 1fr); }
    .trifid-tool .cipher-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
    .trifid-tool .cipher-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trifid-tool .cipher-actions .cipher-btn { font-size: 0.86rem; }
    .trifid-tool .cube-structure { grid-template-columns: 1fr; }
    .trifid-tool .cube-cell { min-height: 44px; }
    .trifid-tool .block-navigation { width: 100%; justify-content: flex-end; }
    .trifid-tool .cipher-io textarea { min-height: 170px; height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .trifid-tool *, .trifid-tool *::before, .trifid-tool *::after { transition: none !important; }
}