| .app-shell {
|
| display: grid;
|
| min-height: 100svh;
|
| grid-template-columns: minmax(320px, 420px) minmax(560px, 880px);
|
| gap: 18px;
|
| align-items: stretch;
|
| justify-content: center;
|
| padding: 28px;
|
| color: #18211f;
|
| background:
|
| linear-gradient(135deg, rgba(20, 94, 84, 0.16), transparent 34%),
|
| linear-gradient(225deg, rgba(168, 75, 49, 0.11), transparent 30%),
|
| linear-gradient(180deg, #fcfcf8 0%, #f3f4ed 100%);
|
| }
|
|
|
| .app-shell.debug-mode { |
| grid-template-columns: clamp(330px, 18vw, 390px) minmax(0, 1.08fr) minmax(0, 0.92fr); |
| align-items: stretch; |
| place-items: stretch; |
| gap: 14px; |
| justify-content: stretch; |
| padding: 18px; |
| } |
|
|
| .app-shell.debug-mode .product-panel { |
| padding: 18px; |
| gap: 14px; |
| } |
|
|
| .app-shell.debug-mode .product-summary h2 { |
| max-width: none; |
| font-size: 24px; |
| } |
|
|
| .app-shell.debug-mode .value-grid, |
| .app-shell.debug-mode .model-mode-buttons { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .app-shell.debug-mode .value-grid div { |
| min-height: 92px; |
| padding: 11px; |
| } |
|
|
| .app-shell.debug-mode .project-status div { |
| grid-template-columns: 82px minmax(0, 1fr); |
| } |
|
|
| .app-shell.debug-mode .product-summary h2 { |
| line-height: 1.15; |
| } |
|
|
| .app-shell.debug-mode .trust-panel p { |
| font-size: 11px; |
| } |
|
|
| .app-shell.debug-mode .message { |
| max-width: min(820px, 94%); |
| } |
|
|
| .app-shell.debug-mode .debug-panel > header, |
| .app-shell.debug-mode .chat-header { |
| padding: 16px 18px; |
| } |
|
|
| .app-shell.debug-mode .debug-scroll { |
| padding: 16px; |
| } |
|
|
| .app-shell.debug-mode .debug-block { |
| padding: 14px 16px; |
| } |
|
|
| .chat-card { |
| position: relative; |
| display: grid; |
| grid-template-rows: auto minmax(0, 1fr) auto auto; |
| width: 100%; |
| height: calc(100svh - 56px);
|
| overflow: hidden;
|
| border: 1px solid rgba(203, 211, 204, 0.86);
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.96);
|
| box-shadow: 0 30px 90px rgba(27, 40, 36, 0.16); |
| } |
|
|
| .chat-card.drag-active { |
| border-color: rgba(23, 101, 92, 0.8); |
| box-shadow: |
| 0 0 0 3px rgba(23, 101, 92, 0.12), |
| 0 30px 90px rgba(27, 40, 36, 0.16); |
| } |
|
|
| .drop-overlay { |
| position: absolute; |
| z-index: 20; |
| inset: 70px 18px 88px; |
| display: grid; |
| place-items: center; |
| border: 2px dashed rgba(23, 101, 92, 0.62); |
| border-radius: 8px; |
| background: rgba(247, 250, 245, 0.88); |
| pointer-events: none; |
| backdrop-filter: blur(3px); |
| } |
|
|
| .drop-overlay div { |
| display: grid; |
| max-width: 420px; |
| justify-items: center; |
| gap: 8px; |
| padding: 20px; |
| color: #145e54; |
| text-align: center; |
| } |
|
|
| .drop-overlay strong { |
| color: #111816; |
| font-size: 20px; |
| } |
|
|
| .drop-overlay span { |
| color: #65716d; |
| font-size: 13px; |
| line-height: 1.6; |
| } |
|
|
| .debug-mode .chat-card,
|
| .debug-panel {
|
| width: 100%;
|
| height: calc(100svh - 48px);
|
| }
|
|
|
| .product-panel {
|
| display: grid;
|
| grid-template-rows: auto auto auto auto auto 1fr;
|
| align-content: start;
|
| gap: 18px;
|
| height: calc(100svh - 56px);
|
| padding: 22px;
|
| overflow: hidden;
|
| border: 1px solid rgba(203, 211, 204, 0.72);
|
| border-radius: 8px;
|
| background: rgba(19, 31, 28, 0.94);
|
| color: #f6f4ea;
|
| box-shadow: 0 30px 90px rgba(27, 40, 36, 0.2);
|
| }
|
|
|
| .product-brand {
|
| display: flex;
|
| align-items: center;
|
| gap: 12px;
|
| }
|
|
|
| .product-brand .brand-mark {
|
| background: #f3efe2;
|
| color: #145e54;
|
| }
|
|
|
| .product-brand p {
|
| margin: 0 0 4px;
|
| color: #aebbb6;
|
| font-size: 12px;
|
| font-weight: 700;
|
| }
|
|
|
| .product-brand h1,
|
| .product-summary h2 {
|
| margin: 0;
|
| color: #fffdf4;
|
| }
|
|
|
| .product-brand h1 {
|
| font-size: 20px;
|
| line-height: 1.18;
|
| }
|
|
|
| .product-summary {
|
| padding-top: 12px;
|
| border-top: 1px solid rgba(255, 255, 255, 0.12);
|
| }
|
|
|
| .product-summary p {
|
| margin: 0 0 10px;
|
| color: #d3c497;
|
| font-size: 13px;
|
| font-weight: 800;
|
| }
|
|
|
| .product-summary h2 {
|
| max-width: 12em;
|
| font-size: 30px;
|
| line-height: 1.18;
|
| }
|
|
|
| .value-grid {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 10px;
|
| }
|
|
|
| .value-grid div,
|
| .project-status,
|
| .model-mode-panel,
|
| .account-panel,
|
| .trust-panel {
|
| border: 1px solid rgba(255, 255, 255, 0.12);
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.055);
|
| }
|
|
|
| .value-grid div {
|
| display: grid;
|
| min-height: 112px;
|
| align-content: space-between;
|
| gap: 10px;
|
| padding: 13px;
|
| }
|
|
|
| .value-grid svg {
|
| color: #d3c497;
|
| }
|
|
|
| .value-grid span,
|
| .project-status span {
|
| color: #b9c6c1;
|
| font-size: 12px;
|
| }
|
|
|
| .value-grid strong {
|
| color: #ffffff;
|
| font-size: 15px;
|
| line-height: 1.3;
|
| }
|
|
|
| .project-status {
|
| display: grid;
|
| gap: 12px;
|
| padding: 14px;
|
| }
|
|
|
| .project-status div {
|
| display: grid;
|
| grid-template-columns: 86px minmax(0, 1fr);
|
| gap: 10px;
|
| align-items: center;
|
| }
|
|
|
| .project-status strong {
|
| min-width: 0;
|
| overflow: hidden;
|
| color: #ffffff;
|
| font-size: 14px;
|
| text-overflow: ellipsis;
|
| white-space: nowrap;
|
| }
|
|
|
| .model-mode-panel {
|
| display: grid;
|
| gap: 11px;
|
| padding: 14px;
|
| }
|
|
|
| .model-mode-title {
|
| display: grid;
|
| gap: 4px;
|
| }
|
|
|
| .model-mode-title span {
|
| color: #b9c6c1;
|
| font-size: 12px;
|
| }
|
|
|
| .model-mode-title strong {
|
| color: #ffffff;
|
| font-size: 13px;
|
| line-height: 1.35;
|
| }
|
|
|
| .model-mode-buttons {
|
| display: grid;
|
| grid-template-columns: repeat(3, minmax(0, 1fr));
|
| gap: 8px;
|
| }
|
|
|
| .model-mode-buttons button {
|
| min-width: 0;
|
| min-height: 34px;
|
| border: 1px solid rgba(255, 255, 255, 0.13);
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.08);
|
| color: #dce5e1;
|
| cursor: pointer;
|
| font: inherit;
|
| font-size: 13px;
|
| font-weight: 700;
|
| }
|
|
|
| .model-mode-buttons button.active {
|
| border-color: rgba(211, 196, 151, 0.85);
|
| background: #d3c497;
|
| color: #12211d;
|
| }
|
|
|
| .account-panel {
|
| display: grid;
|
| gap: 11px;
|
| padding: 14px;
|
| }
|
|
|
| .account-title,
|
| .account-actions {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
|
|
| .account-title {
|
| color: #ffffff;
|
| }
|
|
|
| .account-title svg {
|
| color: #d3c497;
|
| }
|
|
|
| .account-panel p {
|
| margin: 0;
|
| overflow: hidden;
|
| color: #b9c6c1;
|
| font-size: 13px;
|
| line-height: 1.5;
|
| text-overflow: ellipsis;
|
| }
|
|
|
| .auth-form {
|
| display: grid;
|
| gap: 8px;
|
| }
|
|
|
| .auth-form input {
|
| width: 100%;
|
| min-width: 0;
|
| border: 1px solid rgba(255, 255, 255, 0.14);
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.08);
|
| color: #ffffff;
|
| font: inherit;
|
| outline: none;
|
| padding: 10px 11px;
|
| }
|
|
|
| .auth-form input::placeholder {
|
| color: #90a09a;
|
| }
|
|
|
| .auth-form input:focus {
|
| border-color: rgba(211, 196, 151, 0.65);
|
| }
|
|
|
| .account-actions button {
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 6px;
|
| min-height: 34px;
|
| border: 0;
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.11);
|
| color: #ffffff;
|
| cursor: pointer;
|
| font: inherit;
|
| font-size: 13px;
|
| padding: 8px 10px;
|
| }
|
|
|
| .account-actions button:first-child {
|
| flex: 1;
|
| background: #d3c497;
|
| color: #12211d;
|
| font-weight: 700;
|
| }
|
|
|
| .account-actions button:disabled {
|
| cursor: not-allowed;
|
| opacity: 0.58;
|
| }
|
|
|
| .account-error {
|
| color: #ffd2c2 !important;
|
| }
|
|
|
| .trust-panel {
|
| display: grid;
|
| grid-template-columns: auto minmax(0, 1fr);
|
| gap: 10px;
|
| align-self: end;
|
| padding: 14px;
|
| color: #dce5e1;
|
| }
|
|
|
| .trust-panel svg {
|
| color: #d3c497;
|
| }
|
|
|
| .trust-panel p {
|
| margin: 0;
|
| font-size: 12px;
|
| line-height: 1.6;
|
| }
|
|
|
| .debug-panel {
|
| display: grid;
|
| grid-template-rows: auto minmax(0, 1fr);
|
| overflow: hidden;
|
| border: 1px solid #d9dfd7;
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.92);
|
| box-shadow: 0 28px 90px rgba(36, 49, 44, 0.14);
|
| }
|
|
|
| .chat-header {
|
| display: flex;
|
| align-items: center;
|
| gap: 14px;
|
| padding: 18px 20px;
|
| border-bottom: 1px solid #e1e5df;
|
| background: #ffffff;
|
| }
|
|
|
| .project-tools {
|
| display: grid;
|
| grid-template-columns: 38px minmax(170px, 240px) 38px 38px;
|
| gap: 8px;
|
| align-items: center;
|
| margin-left: auto;
|
| }
|
|
|
| .project-tools select {
|
| min-width: 0;
|
| height: 38px;
|
| padding: 0 10px;
|
| border: 1px solid #cbd3cc;
|
| border-radius: 8px;
|
| color: #18211f;
|
| background: #fbfcf8;
|
| font: inherit;
|
| font-size: 13px;
|
| outline: none;
|
| }
|
|
|
| .project-tools select:focus {
|
| border-color: #17655c;
|
| box-shadow: 0 0 0 3px rgba(23, 101, 92, 0.12);
|
| }
|
|
|
| .project-tools button {
|
| display: grid;
|
| width: 38px;
|
| height: 38px;
|
| place-items: center;
|
| border: 0;
|
| border-radius: 8px;
|
| color: #17655c;
|
| background: #eef5ee;
|
| cursor: pointer;
|
| }
|
|
|
| .project-tools button:disabled {
|
| cursor: not-allowed;
|
| opacity: 0.45;
|
| }
|
|
|
| .debug-panel > header {
|
| padding: 20px 22px;
|
| border-bottom: 1px solid #e1e5df;
|
| background: #ffffff;
|
| }
|
|
|
| .debug-panel header p {
|
| margin: 0 0 6px;
|
| color: #17655c;
|
| font-size: 14px;
|
| font-weight: 800;
|
| }
|
|
|
| .debug-panel h2 {
|
| margin: 0;
|
| color: #111816;
|
| font-size: 20px;
|
| line-height: 1.2;
|
| }
|
|
|
| .brand-mark {
|
| display: grid;
|
| width: 42px;
|
| height: 42px;
|
| flex: 0 0 auto;
|
| place-items: center;
|
| border-radius: 8px;
|
| color: #f7f7f2;
|
| background: #17655c;
|
| }
|
|
|
| .chat-header h1 {
|
| margin: 0;
|
| color: #111816;
|
| font-size: 20px;
|
| line-height: 1.2;
|
| }
|
|
|
| .chat-header p {
|
| margin: 4px 0 0;
|
| color: #65716d;
|
| font-size: 14px;
|
| }
|
|
|
| .message-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 14px;
|
| overflow-y: auto;
|
| padding: 22px 22px 18px;
|
| }
|
|
|
| .debug-scroll {
|
| display: grid;
|
| align-content: start;
|
| gap: 14px;
|
| overflow-y: auto;
|
| padding: 18px;
|
| }
|
|
|
| .debug-block {
|
| padding: 14px;
|
| border: 1px solid #e1e5df;
|
| border-radius: 8px;
|
| background: #fbfcf8;
|
| }
|
|
|
| .debug-block h3 {
|
| margin: 0 0 12px;
|
| color: #13201d;
|
| font-size: 15px;
|
| }
|
|
|
| .debug-block dl,
|
| .debug-block dd {
|
| margin: 0;
|
| }
|
|
|
| .debug-block dl {
|
| display: grid;
|
| gap: 8px;
|
| }
|
|
|
| .debug-block dl div,
|
| .feature-row {
|
| display: grid;
|
| grid-template-columns: minmax(112px, 1fr) auto;
|
| gap: 8px;
|
| align-items: start;
|
| }
|
|
|
| .debug-block dt,
|
| .feature-row span,
|
| .prob-row span {
|
| color: #65716d;
|
| font-size: 13px;
|
| }
|
|
|
| .debug-block dd,
|
| .feature-row strong,
|
| .prob-row strong {
|
| color: #13201d;
|
| font-weight: 800;
|
| text-align: right;
|
| }
|
|
|
| .missing-note { |
| margin: 0; |
| padding: 10px; |
| border-radius: 8px; |
| color: #7f412f; |
| background: #fff1e9; |
| font-size: 13px; |
| line-height: 1.5; |
| } |
|
|
| .debug-scope-note { |
| margin: 0 0 12px; |
| padding: 10px 12px; |
| border: 1px solid rgba(20, 94, 84, 0.14); |
| border-radius: 8px; |
| color: #35534d; |
| background: rgba(20, 94, 84, 0.06); |
| font-size: 12px; |
| line-height: 1.6; |
| } |
|
|
| .candidate-debug-grid { |
| display: grid; |
| gap: 12px; |
| } |
|
|
| .candidate-debug-card { |
| display: grid; |
| gap: 12px; |
| padding: 12px; |
| border: 1px solid rgba(203, 211, 204, 0.88); |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.72); |
| } |
|
|
| .candidate-debug-card header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
|
|
| .candidate-debug-card h4 { |
| margin: 0; |
| color: #145e54; |
| font-size: 14px; |
| } |
|
|
| .candidate-debug-card header strong { |
| color: #145e54; |
| font-size: 24px; |
| line-height: 1; |
| } |
|
|
| .candidate-debug-card > p { |
| margin: 0; |
| color: #4f5f59; |
| font-size: 13px; |
| line-height: 1.65; |
| } |
|
|
| .candidate-debug-table { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| overflow: hidden; |
| border: 1px solid rgba(203, 211, 204, 0.9); |
| border-radius: 8px; |
| background: #fff; |
| } |
|
|
| .candidate-debug-table-row { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| align-items: center; |
| gap: 8px; |
| min-height: 42px; |
| padding: 8px 10px; |
| border-right: 1px solid rgba(225, 229, 223, 0.95); |
| border-bottom: 1px solid rgba(225, 229, 223, 0.95); |
| } |
|
|
| .candidate-debug-table-row:nth-child(3n) { |
| border-right: 0; |
| } |
|
|
| .candidate-debug-table-row:nth-last-child(-n + 3) { |
| border-bottom: 0; |
| } |
|
|
| .candidate-debug-table-row span { |
| color: #65716d; |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .candidate-debug-table-row strong { |
| color: #145e54; |
| font-size: 15px; |
| font-weight: 900; |
| line-height: 1.1; |
| text-align: right; |
| white-space: nowrap; |
| } |
|
|
| .control-questions { |
| display: grid; |
| gap: 8px; |
| margin: 10px 0 0; |
| padding-left: 18px;
|
| color: #65716d;
|
| font-size: 12px;
|
| line-height: 1.55;
|
| }
|
|
|
| .evidence-grid {
|
| display: grid;
|
| gap: 10px;
|
| margin-top: 10px;
|
| }
|
|
|
| .evidence-grid div {
|
| display: grid;
|
| gap: 4px;
|
| padding-top: 10px;
|
| border-top: 1px solid #e4e8e1;
|
| }
|
|
|
| .evidence-grid strong {
|
| color: #13201d;
|
| font-size: 12px;
|
| }
|
|
|
| .evidence-grid span {
|
| color: #65716d;
|
| font-size: 12px;
|
| line-height: 1.55;
|
| }
|
|
|
| .feature-row {
|
| margin-top: 10px;
|
| padding-top: 10px;
|
| border-top: 1px solid #e4e8e1;
|
| }
|
|
|
| .feature-row small {
|
| grid-column: 1 / -1;
|
| color: #7b8581;
|
| font-size: 12px;
|
| }
|
|
|
| .feature-row em {
|
| display: block;
|
| margin-top: 3px;
|
| color: #87918d;
|
| font-style: normal;
|
| font-size: 12px;
|
| }
|
|
|
| .project-memory dl {
|
| margin-bottom: 12px;
|
| }
|
|
|
| .memory-timeline {
|
| display: grid;
|
| gap: 10px;
|
| }
|
|
|
| .memory-item {
|
| display: grid;
|
| grid-template-columns: auto auto;
|
| gap: 6px 10px;
|
| padding-top: 10px;
|
| border-top: 1px solid #e4e8e1;
|
| }
|
|
|
| .memory-item span {
|
| color: #65716d;
|
| font-size: 12px;
|
| }
|
|
|
| .memory-item strong {
|
| color: #17655c;
|
| font-size: 12px;
|
| text-align: right;
|
| }
|
|
|
| .memory-item p {
|
| grid-column: 1 / -1;
|
| display: -webkit-box;
|
| overflow: hidden;
|
| margin: 0;
|
| color: #25332f;
|
| font-size: 12px;
|
| line-height: 1.55;
|
| -webkit-box-orient: vertical;
|
| -webkit-line-clamp: 3;
|
| }
|
|
|
| .debug-block code {
|
| display: block;
|
| margin-top: 8px;
|
| padding: 10px;
|
| border-radius: 8px;
|
| color: #24413c;
|
| background: #eef5ee;
|
| font-family: "Noto Sans Mono", "Source Code Pro", "Liberation Mono", ui-monospace, monospace;
|
| font-size: 12px;
|
| line-height: 1.5;
|
| white-space: pre-wrap;
|
| }
|
|
|
| .prob-row {
|
| display: grid;
|
| grid-template-columns: 72px minmax(0, 1fr) 44px;
|
| gap: 10px;
|
| align-items: center;
|
| margin-top: 10px;
|
| }
|
|
|
| .prob-row i {
|
| display: block;
|
| height: 9px;
|
| min-width: 2px;
|
| border-radius: 999px;
|
| background: #17655c;
|
| }
|
|
|
| .success-grade {
|
| display: grid;
|
| grid-template-columns: 1fr auto;
|
| align-items: center;
|
| margin-bottom: 12px;
|
| padding: 10px;
|
| border-radius: 8px;
|
| background: #eef5ee;
|
| }
|
|
|
| .success-grade span {
|
| color: #65716d;
|
| font-size: 12px;
|
| }
|
|
|
| .success-grade strong {
|
| color: #17655c;
|
| font-size: 13px;
|
| text-transform: uppercase;
|
| }
|
|
|
| .success-grade.danger {
|
| background: #fff1e9;
|
| }
|
|
|
| .success-grade.danger strong {
|
| color: #8a3f2a;
|
| }
|
|
|
| .success-grade.balanced {
|
| background: #f3f2ea;
|
| }
|
|
|
| .success-grade.balanced strong {
|
| color: #715f2d;
|
| }
|
|
|
| .driver-grid {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 10px;
|
| margin-top: 14px;
|
| }
|
|
|
| .stage-grid {
|
| display: grid;
|
| grid-template-columns: repeat(3, minmax(0, 1fr));
|
| gap: 8px;
|
| margin-top: 14px;
|
| }
|
|
|
| .stage-grid div {
|
| display: grid;
|
| gap: 6px;
|
| padding: 10px;
|
| border: 1px solid #e4e8e1;
|
| border-radius: 8px;
|
| background: #ffffff;
|
| }
|
|
|
| .stage-grid span {
|
| color: #65716d;
|
| font-size: 12px;
|
| line-height: 1.35;
|
| }
|
|
|
| .stage-grid strong {
|
| color: #17655c;
|
| font-size: 18px;
|
| line-height: 1;
|
| }
|
|
|
| .stage-grid small {
|
| color: #87918d;
|
| font-size: 10px;
|
| line-height: 1.2;
|
| word-break: break-word;
|
| }
|
|
|
| .stage-detail-grid {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| gap: 10px;
|
| margin-top: 10px;
|
| }
|
|
|
| .stage-detail-grid div {
|
| padding: 10px;
|
| border: 1px solid #e4e8e1;
|
| border-radius: 8px;
|
| background: #fbfcf8;
|
| }
|
|
|
| .stage-detail-grid h4 {
|
| margin: 0 0 6px;
|
| color: #13201d;
|
| font-size: 12px;
|
| }
|
|
|
| .stage-detail-grid p {
|
| margin: 0;
|
| color: #65716d;
|
| font-size: 12px;
|
| line-height: 1.55;
|
| }
|
|
|
| .driver-grid > div {
|
| display: grid;
|
| gap: 7px;
|
| align-content: start;
|
| padding: 10px;
|
| border: 1px solid #e4e8e1;
|
| border-radius: 8px;
|
| background: #ffffff;
|
| }
|
|
|
| .driver-grid h4 {
|
| margin: 0 0 2px;
|
| color: #13201d;
|
| font-size: 12px;
|
| }
|
|
|
| .driver-grid p {
|
| display: grid;
|
| grid-template-columns: 1fr auto;
|
| gap: 8px;
|
| margin: 0;
|
| color: #65716d;
|
| font-size: 12px;
|
| }
|
|
|
| .driver-grid strong {
|
| color: #13201d;
|
| }
|
|
|
| .formula-version {
|
| display: block;
|
| margin-top: 10px;
|
| color: #87918d;
|
| font-size: 11px;
|
| }
|
|
|
| .debug-block pre {
|
| max-height: 360px;
|
| overflow: auto;
|
| margin: 0;
|
| padding: 12px;
|
| border-radius: 8px;
|
| color: #21302c;
|
| background: #ffffff;
|
| white-space: pre-wrap;
|
| word-break: break-word;
|
| font-family: "Noto Sans Mono", "Source Code Pro", "Liberation Mono", ui-monospace, monospace;
|
| font-size: 12px;
|
| line-height: 1.55;
|
| }
|
|
|
| .empty-debug {
|
| margin: 18px;
|
| color: #65716d;
|
| line-height: 1.7;
|
| }
|
|
|
| .message {
|
| max-width: min(720px, 92%);
|
| padding: 14px 16px;
|
| border-radius: 8px;
|
| }
|
|
|
| .message.assistant {
|
| align-self: flex-start;
|
| border: 1px solid #e1e5df;
|
| background: #fcfdf9;
|
| box-shadow: 0 10px 28px rgba(31, 45, 40, 0.06);
|
| }
|
|
|
| .message.user {
|
| align-self: flex-end;
|
| color: #ffffff;
|
| background: #145e54;
|
| box-shadow: 0 10px 26px rgba(20, 94, 84, 0.18);
|
| }
|
|
|
| .message pre { |
| margin: 0; |
| white-space: pre-wrap; |
| word-break: break-word; |
| font: inherit; |
| line-height: 1.68; |
| } |
|
|
| .decision-grid-card { |
| display: grid; |
| gap: 14px; |
| padding: 16px; |
| border: 1px solid #e1e5df; |
| border-radius: 8px; |
| background: #fbfcf8; |
| } |
|
|
| .decision-grid-card > header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid #dfe5dd; |
| } |
|
|
| .decision-grid-card > header p, |
| .decision-grid-subtitle { |
| margin: 0; |
| color: #65716d; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .decision-grid-card > header h2 { |
| margin: 4px 0 0; |
| color: #111816; |
| font-size: 19px; |
| line-height: 1.25; |
| } |
|
|
| .decision-grid-card > header span { |
| display: grid; |
| min-width: 58px; |
| min-height: 42px; |
| place-items: center; |
| border: 1px solid #cbd3cc; |
| border-radius: 8px; |
| background: #ffffff; |
| color: #145e54; |
| font-size: 18px; |
| font-weight: 900; |
| } |
|
|
| .simple-grid { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr); |
| gap: 12px; |
| } |
|
|
| .simple-grid > article, |
| .simple-grid > .grid-detail-card { |
| min-width: 0; |
| max-height: none; |
| overflow-y: auto; |
| padding: 14px; |
| border: 1px solid #e1e5df; |
| border-radius: 8px; |
| background: #ffffff; |
| } |
|
|
| .simple-grid h3, |
| .grid-detail-card summary { |
| margin: 0 0 10px; |
| color: #145e54; |
| font-size: 15px; |
| font-weight: 800; |
| line-height: 1.35; |
| } |
|
|
| .simple-grid p, |
| .grid-detail-body p { |
| margin: 0 0 8px; |
| color: #2d3935; |
| font-size: 13px; |
| line-height: 1.68; |
| } |
|
|
| .notebook-conclusion { |
| color: #111d19 !important; |
| font-weight: 900; |
| } |
|
|
| .candidate-rate-grid, |
| .dimension-card-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 10px; |
| margin-top: 10px; |
| } |
|
|
| .candidate-rate-card, |
| .dimension-card, |
| .key-missing-dimensions, |
| .dimension-empty { |
| padding: 10px; |
| border: 1px solid #e1e5df; |
| border-radius: 8px; |
| background: #fbfcf8; |
| } |
|
|
| .candidate-rate-card h4, |
| .dimension-card-title strong, |
| .key-missing-dimensions h4 { |
| margin: 0 0 6px; |
| color: #145e54; |
| font-size: 13px; |
| } |
|
|
| .candidate-rate-card div, |
| .rate-cell div { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| gap: 8px; |
| } |
|
|
| .candidate-rate-card strong, |
| .rate-cell strong { |
| color: #145e54; |
| } |
|
|
| .candidate-rate-card span, |
| .rate-cell span, |
| .candidate-rate-card p, |
| .dimension-card p, |
| .dimension-empty { |
| color: #65716d; |
| font-size: 12px; |
| line-height: 1.55; |
| } |
|
|
| .missing-dimensions-cell { |
| grid-column: 1 / -1; |
| } |
|
|
| .simple-grid > article:nth-child(3), |
| .simple-grid > article:nth-child(4) { |
| max-height: 460px; |
| } |
|
|
| .message.loading { |
| display: inline-flex; |
| align-items: center; |
| gap: 9px;
|
| color: #56635f;
|
| }
|
|
|
| .message.loading svg,
|
| .chat-input button[type='submit'] svg {
|
| animation: spin 900ms linear infinite;
|
| }
|
|
|
| .chat-input button[type='submit'] svg:not(.lucide-loader-circle) {
|
| animation: none;
|
| }
|
|
|
| .chat-input {
|
| display: grid;
|
| grid-template-columns: 48px minmax(0, 1fr) 48px;
|
| gap: 10px;
|
| padding: 14px 16px;
|
| border-top: 1px solid #e1e5df;
|
| background: #ffffff;
|
| }
|
|
|
| .chat-input textarea {
|
| width: 100%;
|
| min-height: 54px;
|
| max-height: 160px;
|
| resize: vertical;
|
| padding: 13px 14px;
|
| border: 1px solid #cbd3cc;
|
| border-radius: 8px;
|
| color: #18211f;
|
| background: #fbfcf8;
|
| font: inherit;
|
| line-height: 1.55;
|
| outline: none;
|
| }
|
|
|
| .chat-input textarea:focus {
|
| border-color: #17655c;
|
| box-shadow: 0 0 0 3px rgba(23, 101, 92, 0.12);
|
| }
|
|
|
| .chat-input button {
|
| display: grid;
|
| width: 48px;
|
| height: 52px;
|
| place-items: center;
|
| align-self: end;
|
| border: 0;
|
| border-radius: 8px;
|
| cursor: pointer;
|
| }
|
|
|
| .chat-input button[type='submit'] {
|
| color: #ffffff;
|
| background: #145e54;
|
| }
|
|
|
| .attach-button {
|
| color: #145e54;
|
| background: #eef5ee;
|
| }
|
|
|
| .chat-input button:disabled {
|
| cursor: not-allowed;
|
| opacity: 0.48;
|
| }
|
|
|
| .login-required-tip {
|
| margin: -6px 18px 10px;
|
| color: #697570;
|
| font-size: 12px;
|
| line-height: 1.45;
|
| }
|
|
|
| .legal-strip {
|
| display: flex;
|
| min-height: 38px;
|
| align-items: center;
|
| gap: 8px;
|
| padding: 0 18px 12px;
|
| color: #697570;
|
| background: #ffffff;
|
| font-size: 12px;
|
| line-height: 1.45;
|
| }
|
|
|
| .legal-strip svg {
|
| flex: 0 0 auto;
|
| color: #145e54;
|
| }
|
|
|
| .legal-strip span {
|
| min-width: 0;
|
| flex: 1;
|
| }
|
|
|
| .legal-strip strong {
|
| color: #384741;
|
| }
|
|
|
| .legal-strip a {
|
| color: #145e54;
|
| font-weight: 800;
|
| text-decoration: none;
|
| }
|
|
|
| .legal-strip a:hover {
|
| text-decoration: underline;
|
| }
|
|
|
| @keyframes spin {
|
| to {
|
| transform: rotate(360deg);
|
| }
|
| }
|
|
|
| @media (max-width: 680px) {
|
| .app-shell {
|
| gap: 12px;
|
| grid-template-columns: 1fr;
|
| min-height: 100svh;
|
| padding: 12px;
|
| }
|
|
|
| .chat-card {
|
| width: 100%;
|
| height: auto;
|
| min-height: 72svh;
|
| border-radius: 8px;
|
| }
|
|
|
| .chat-header {
|
| display: grid;
|
| grid-template-columns: auto minmax(0, 1fr);
|
| padding: 16px;
|
| }
|
|
|
| .project-tools {
|
| width: 100%;
|
| grid-column: 1 / -1;
|
| grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
|
| margin-left: 0;
|
| }
|
|
|
| .message-list {
|
| padding: 16px;
|
| }
|
|
|
| .message {
|
| max-width: 96%;
|
| }
|
|
|
| .legal-strip {
|
| align-items: flex-start;
|
| flex-wrap: wrap;
|
| padding: 0 16px 12px;
|
| }
|
| }
|
|
|
| @media (max-width: 980px) { |
| .app-shell { |
| grid-template-columns: 1fr; |
| padding: 16px; |
| }
|
|
|
| .product-panel {
|
| height: auto;
|
| }
|
|
|
| .app-shell.debug-mode {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .chat-card,
|
| .debug-mode .chat-card,
|
| .debug-panel {
|
| height: min(760px, calc(100svh - 24px));
|
| } |
| } |
|
|
| @media (max-width: 1500px) { |
| .app-shell.debug-mode { |
| grid-template-columns: minmax(300px, 340px) minmax(0, 1.04fr) minmax(0, 0.96fr); |
| gap: 12px; |
| padding: 14px; |
| } |
|
|
| .app-shell.debug-mode .product-panel { |
| padding: 16px; |
| } |
|
|
| .app-shell.debug-mode .product-summary h2 { |
| font-size: 22px; |
| } |
|
|
| .candidate-debug-table { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .candidate-debug-table-row:nth-child(3n) { |
| border-right: 1px solid rgba(225, 229, 223, 0.95); |
| } |
|
|
| .candidate-debug-table-row:nth-child(2n) { |
| border-right: 0; |
| } |
|
|
| .candidate-debug-table-row:nth-last-child(-n + 3) { |
| border-bottom: 1px solid rgba(225, 229, 223, 0.95); |
| } |
|
|
| .candidate-debug-table-row:nth-last-child(-n + 1) { |
| border-bottom: 0; |
| } |
| } |
|
|
| @media (max-width: 1240px) { |
| .app-shell.debug-mode { |
| grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); |
| grid-template-areas: |
| "side chat" |
| "debug debug"; |
| } |
|
|
| .app-shell.debug-mode .product-panel { |
| grid-area: side; |
| height: min(680px, calc(100svh - 28px)); |
| } |
|
|
| .app-shell.debug-mode .chat-card { |
| grid-area: chat; |
| height: min(680px, calc(100svh - 28px)); |
| } |
|
|
| .app-shell.debug-mode .debug-panel { |
| grid-area: debug; |
| height: min(780px, calc(100svh - 28px)); |
| } |
| } |
|
|
| @media (max-width: 760px) { |
| .app-shell.debug-mode { |
| grid-template-columns: 1fr; |
| grid-template-areas: |
| "side" |
| "chat" |
| "debug"; |
| padding: 12px; |
| } |
|
|
| .app-shell.debug-mode .product-panel, |
| .app-shell.debug-mode .chat-card, |
| .app-shell.debug-mode .debug-panel { |
| height: auto; |
| min-height: 0; |
| } |
|
|
| .app-shell.debug-mode .product-panel { |
| max-height: none; |
| } |
|
|
| .app-shell.debug-mode .value-grid, |
| .app-shell.debug-mode .model-mode-buttons { |
| grid-template-columns: 1fr 1fr; |
| } |
|
|
| .app-shell.debug-mode .debug-scroll { |
| max-height: none; |
| } |
|
|
| .candidate-debug-table { |
| grid-template-columns: 1fr; |
| } |
|
|
| .candidate-debug-table-row, |
| .candidate-debug-table-row:nth-child(2n), |
| .candidate-debug-table-row:nth-child(3n), |
| .candidate-debug-table-row:nth-last-child(-n + 3) { |
| border-right: 0; |
| border-bottom: 1px solid rgba(225, 229, 223, 0.95); |
| } |
|
|
| .candidate-debug-table-row:last-child { |
| border-bottom: 0; |
| } |
|
|
| .simple-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .simple-grid > article, |
| .simple-grid > .grid-detail-card { |
| max-height: none; |
| } |
| } |
|
|
| @media (max-width: 680px) { |
| .product-panel { |
| display: grid;
|
| grid-template-rows: none;
|
| gap: 12px;
|
| height: auto;
|
| padding: 16px;
|
| overflow: visible;
|
| border-radius: 8px;
|
| box-shadow: 0 18px 50px rgba(27, 40, 36, 0.16);
|
| }
|
|
|
| .product-brand {
|
| align-items: center;
|
| }
|
|
|
| .product-brand .brand-mark {
|
| width: 44px;
|
| height: 44px;
|
| }
|
|
|
| .product-brand h1 {
|
| font-size: 18px;
|
| }
|
|
|
| .product-summary {
|
| padding-top: 10px;
|
| }
|
|
|
| .product-summary p {
|
| margin-bottom: 8px;
|
| font-size: 12px;
|
| }
|
|
|
| .product-summary h2 {
|
| max-width: none;
|
| font-size: 24px;
|
| line-height: 1.2;
|
| }
|
|
|
| .value-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .value-grid div {
|
| min-height: 86px;
|
| padding: 12px;
|
| }
|
|
|
| .project-status {
|
| gap: 10px;
|
| }
|
|
|
| .project-status div {
|
| grid-template-columns: 92px minmax(0, 1fr);
|
| }
|
|
|
| .model-mode-buttons {
|
| grid-template-columns: repeat(3, minmax(0, 1fr));
|
| }
|
|
|
| .account-panel {
|
| gap: 10px;
|
| padding: 12px;
|
| }
|
|
|
| .auth-form {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .auth-form input,
|
| .account-actions button {
|
| min-height: 44px;
|
| }
|
|
|
| .trust-panel {
|
| padding: 12px;
|
| }
|
|
|
| .chat-card {
|
| height: auto;
|
| min-height: 72svh;
|
| overflow: hidden;
|
| }
|
|
|
| .app-shell.authenticated .product-panel {
|
| grid-template-columns: 1fr;
|
| gap: 10px;
|
| padding: 12px;
|
| }
|
|
|
| .app-shell.authenticated .product-summary,
|
| .app-shell.authenticated .value-grid,
|
| .app-shell.authenticated .project-status,
|
| .app-shell.authenticated .model-mode-panel,
|
| .app-shell.authenticated .trust-panel {
|
| display: none;
|
| }
|
|
|
| .app-shell.authenticated .account-panel {
|
| padding: 10px;
|
| }
|
|
|
| .app-shell.authenticated .account-panel p {
|
| font-size: 12px;
|
| }
|
|
|
| .app-shell.authenticated .chat-card {
|
| min-height: calc(100svh - 156px);
|
| }
|
| }
|
|
|
| .admin-shell {
|
| min-height: 100svh;
|
| padding: 28px;
|
| color: #18211f;
|
| background:
|
| linear-gradient(135deg, rgba(20, 94, 84, 0.14), transparent 34%),
|
| linear-gradient(180deg, #fcfcf8 0%, #f3f4ed 100%);
|
| }
|
|
|
| .admin-login-card,
|
| .admin-page {
|
| width: min(1180px, 100%);
|
| margin: 0 auto;
|
| border: 1px solid rgba(203, 211, 204, 0.86);
|
| border-radius: 8px;
|
| background: rgba(255, 255, 255, 0.96);
|
| box-shadow: 0 30px 90px rgba(27, 40, 36, 0.14);
|
| }
|
|
|
| .admin-login-card {
|
| display: grid;
|
| gap: 22px;
|
| max-width: 460px;
|
| margin-top: 12svh;
|
| padding: 28px;
|
| }
|
|
|
| .admin-login-card .product-brand h1,
|
| .admin-page h1 {
|
| color: #10211d;
|
| }
|
|
|
| .admin-login-form {
|
| display: grid;
|
| gap: 12px;
|
| }
|
|
|
| .admin-login-form input,
|
| .admin-toolbar input,
|
| .admin-table select {
|
| min-height: 40px;
|
| border: 1px solid rgba(194, 205, 198, 0.95);
|
| border-radius: 8px;
|
| background: #fff;
|
| color: #17231f;
|
| font: inherit;
|
| outline: none;
|
| padding: 9px 11px;
|
| }
|
|
|
| .admin-login-form input:focus,
|
| .admin-toolbar input:focus,
|
| .admin-table select:focus {
|
| border-color: #14756a;
|
| }
|
|
|
| .admin-login-form button,
|
| .admin-actions button,
|
| .admin-table button {
|
| min-height: 38px;
|
| border: 0;
|
| border-radius: 8px;
|
| background: #126b61;
|
| color: #fff;
|
| cursor: pointer;
|
| font: inherit;
|
| font-weight: 700;
|
| padding: 8px 12px;
|
| }
|
|
|
| .admin-login-form button:disabled {
|
| cursor: not-allowed;
|
| opacity: 0.55;
|
| }
|
|
|
| .admin-page {
|
| display: grid;
|
| gap: 18px;
|
| padding: 24px;
|
| }
|
|
|
| .admin-header,
|
| .admin-toolbar,
|
| .admin-actions {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 12px;
|
| }
|
|
|
| .admin-header p {
|
| margin: 0 0 4px;
|
| color: #64736d;
|
| font-size: 12px;
|
| font-weight: 800;
|
| }
|
|
|
| .admin-header h1 {
|
| margin: 0;
|
| font-size: 28px;
|
| }
|
|
|
| .admin-actions span {
|
| color: #64736d;
|
| font-size: 13px;
|
| }
|
|
|
| .admin-actions button:last-child {
|
| background: #eef4ef;
|
| color: #1c302b;
|
| }
|
|
|
| .admin-metrics {
|
| display: grid;
|
| grid-template-columns: repeat(5, minmax(0, 1fr));
|
| gap: 12px;
|
| }
|
|
|
| .admin-metrics div {
|
| display: grid;
|
| gap: 10px;
|
| min-height: 92px;
|
| align-content: center;
|
| border: 1px solid rgba(203, 211, 204, 0.9);
|
| border-radius: 8px;
|
| background: #f8faf5;
|
| padding: 14px;
|
| }
|
|
|
| .admin-metrics span,
|
| .admin-table small {
|
| color: #718079;
|
| font-size: 12px;
|
| }
|
|
|
| .admin-metrics strong {
|
| color: #12251f;
|
| font-size: 28px;
|
| }
|
|
|
| .admin-toolbar {
|
| border-top: 1px solid rgba(203, 211, 204, 0.75);
|
| padding-top: 18px;
|
| }
|
|
|
| .admin-toolbar div {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| }
|
|
|
| .admin-toolbar svg {
|
| color: #126b61;
|
| }
|
|
|
| .admin-toolbar input {
|
| width: min(320px, 100%);
|
| }
|
|
|
| .admin-table-wrap {
|
| overflow: auto;
|
| border: 1px solid rgba(203, 211, 204, 0.9);
|
| border-radius: 8px;
|
| }
|
|
|
| .admin-table {
|
| width: 100%;
|
| min-width: 1120px;
|
| border-collapse: collapse;
|
| background: #fff;
|
| }
|
|
|
| .admin-table th,
|
| .admin-table td {
|
| border-bottom: 1px solid rgba(203, 211, 204, 0.75);
|
| padding: 12px;
|
| text-align: left;
|
| vertical-align: middle;
|
| }
|
|
|
| .admin-table th {
|
| background: #f5f8f3;
|
| color: #5e6e68;
|
| font-size: 12px;
|
| }
|
|
|
| .admin-table td:first-child {
|
| display: grid;
|
| gap: 5px;
|
| }
|
|
|
| .admin-table td {
|
| color: #18211f;
|
| font-size: 14px;
|
| }
|
|
|
| .admin-table button {
|
| min-height: 34px;
|
| background: #eef4ef;
|
| color: #1c302b;
|
| }
|
|
|
| @media (max-width: 880px) {
|
| .admin-shell {
|
| padding: 14px;
|
| }
|
|
|
| .admin-header,
|
| .admin-toolbar {
|
| align-items: stretch;
|
| flex-direction: column;
|
| }
|
|
|
| .admin-actions {
|
| justify-content: flex-start;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .admin-metrics {
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| }
|
| }
|
|
|
