:root {
            --ink: #18242e;
            --text: #25323d;
            --muted: #5b6671;
            --line: #e4e7eb;
            --primary: #245c73;
            --soft: #f4f6f8
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: #fff;
            color: var(--text);
            font: 14px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
        }

        button,
        input,
        textarea,
        select {
            font: inherit
        }

        button,
        a,
        input,
        select,
        textarea {
            outline-offset: 3px
        }

        button {
            cursor: pointer
        }

        button:disabled {
            cursor: default;
            opacity: .45
        }

        button,
        .button {
            border: 1px solid #c9d1d8;
            border-radius: 5px;
            background: white;
            padding: 10px 16px;
            color: var(--text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            white-space: nowrap
        }

        button:hover {
            background: #f1f5f7
        }

        .primary {
            background: var(--primary);
            color: white;
            border-color: var(--primary)
        }

        .primary:hover {
            background: #1b4b60
        }

        .icon-button {
            width: 36px;
            height: 36px;
            padding: 7px
        }

        .plain {
            border: 0;
            background: transparent;
            padding: 6px;
            color: var(--primary)
        }

        svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0
        }

        header {
            height: 76px;
            padding: 0 48px;
            border-bottom: 1px solid var(--line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

        .brand {
            font-size: 21px;
            font-weight: 650;
            letter-spacing: -.6px;
            color: #172b3a;
            text-decoration: none
        }

        .header-left,
        .header-right {
            display: flex;
            align-items: center;
            gap: 30px
        }

        .header-right {
            gap: 16px
        }

        .crumb {
            font-size: 13px;
            color: var(--muted)
        }

        main {
            padding: 40px 48px;
            max-width: 1800px;
            margin: auto
        }

        h1 {
            font-size: 30px;
            letter-spacing: -.8px;
            margin: 0 0 10px;
            font-weight: 600
        }

        h2 {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: -.4px;
            margin: 0 0 20px
        }

        h3 {
            font-size: 17px;
            margin: 0 0 16px;
            font-weight: 600
        }

        p {
            line-height: 1.6;
            margin: 0 0 16px
        }

        .muted {
            color: var(--muted)
        }

        .small {
            font-size: 12px
        }

        .page-head,
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px
        }

        .page-head {
            margin-bottom: 30px
        }

        .section-head {
            margin-bottom: 16px
        }

        .section-head h3 {
            margin: 0
        }

        .count {
            border-radius: 12px;
            padding: 3px 8px;
            background: #edf1f3;
            font-size: 12px;
            margin-left: 8px
        }

        .table-wrap {
            overflow: auto;
            border: 1px solid #dfe4e8;
            border-radius: 6px
        }

        table {
            border-collapse: collapse;
            width: 100%;
            text-align: left
        }

        th {
            font-weight: 500;
            color: #4f5c68;
            font-size: 12px;
            background: var(--soft);
            vertical-align: top
        }

        td,
        th {
            padding: 15px 16px;
            border-bottom: 1px solid var(--line)
        }

        tr:last-child td {
            border-bottom: 0
        }

        td {
            font-size: 13px
        }

        tbody tr:hover {
            background: #fafcfd
        }

        td a {
            color: var(--primary);
            font-family: ui-monospace, monospace;
            text-decoration: none
        }

        td a:hover {
            text-decoration: underline
        }

        .filter {
            width: 100%;
            min-width: 90px;
            border: 1px solid #dfe4e8;
            padding: 8px;
            margin-top: 8px;
            border-radius: 3px;
            background: white;
            font-size: 12px
        }

        .sort {
            padding: 0;
            border: 0;
            background: none;
            font-size: 12px;
            justify-content: start
        }

        .editable {
            border: 1px solid transparent;
            background: transparent;
            border-radius: 3px;
            padding: 6px;
            width: 100%;
            min-width: 100px;
            color: inherit
        }

        .editable:hover {
            border-color: #c9d1d8;
            background: white
        }

        .editable:focus {
            border-color: var(--primary);
            background: white
        }

        .status {
            background: #edf3f6;
            border-radius: 4px;
            padding: 5px;
            font-size: 12px;
            color: #315a71;
            border: 0;
            min-width: 75px
        }

        .status.closed {
            background: #eef0f2;
            color: #58656f
        }

        .list-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 18px;
            color: #66727e;
            font-size: 12px
        }

        .demo-note {
            background: #f7f9fa;
            color: #66727e;
            text-align: center;
            font-size: 11px;
            padding: 7px;
            border-bottom: 1px solid #edf0f2
        }

        .tabs {
            display: flex;
            gap: 30px;
            border-bottom: 1px solid var(--line);
            margin: 24px 0 28px;
            overflow: auto
        }

        .tabs button {
            border: 0;
            border-radius: 0;
            background: none;
            padding: 14px 0;
            color: #66727e;
            font-weight: 500;
            border-bottom: 3px solid transparent
        }

        .tabs button.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            font-weight: 600
        }

        .fields {
            display: grid;
            grid-template-columns: 180px 200px 140px 1fr;
            gap: 16px;
            margin-bottom: 30px
        }

        label {
            display: block;
            font-size: 12px;
            color: #4f5c68
        }

        label input,
        label textarea,
        label select {
            display: block;
            width: 100%;
            margin-top: 8px;
            border: 1px solid #c9d1d8;
            border-radius: 4px;
            padding: 11px;
            background: white;
            color: var(--text)
        }

        textarea {
            resize: vertical
        }

        .actions {
            display: flex;
            gap: 12px;
            margin-top: 22px;
            flex-wrap: wrap
        }

        .detail-table input {
            min-width: 80px
        }

        .detail-table td {
            padding: 10px
        }

        .detail-table .remove {
            font-size: 12px
        }

        .matrix {
            table-layout: fixed
        }

        .matrix .article {
            width: 340px
        }

        .matrix .process {
            width: 64px
        }

        .matrix th,
        .matrix td {
            text-align: center;
            padding: 10px 4px
        }

        .matrix th.article,
        .matrix td.article {
            text-align: left;
            padding: 14px 16px
        }

        .matrix .article-line {
            display: grid;
            grid-template-columns: 90px 32px 1fr;
            gap: 10px;
            align-items: center
        }

        .matrix .vertical {
            height: 150px;
            vertical-align: middle;
            background: #f4f6f8
        }

        .matrix .vertical span {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            display: inline-block;
            white-space: nowrap;
            font-size: 12px
        }

        .matrix input[type=checkbox] {
            width: 20px;
            height: 20px;
            accent-color: var(--primary);
            cursor: pointer
        }

        .matrix td:has(input:checked) {
            background: #f1f6f8
        }

        .group-head {
            height: 44px;
            font-weight: 600
        }

        .metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--line);
            margin-bottom: 24px
        }

        .metric strong {
            display: block;
            font-size: 34px;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 8px
        }

        .progress-row {
            display: grid;
            grid-template-columns: 240px 1fr 130px;
            gap: 24px;
            align-items: center;
            margin: 20px 0
        }

        .progress-label {
            border-left: 5px solid var(--color);
            padding-left: 16px
        }

        .progress-track {
            height: 8px;
            border-radius: 6px;
            background: #edf0f2;
            overflow: hidden
        }

        .progress-fill {
            height: 100%;
            background: var(--primary)
        }

        .factory {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 40px
        }

        .factory aside {
            border-right: 1px solid var(--line);
            padding-right: 24px
        }

        .step {
            display: block;
            width: 100%;
            padding: 16px;
            text-align: left;
            margin: 12px 0;
            white-space: normal
        }

        .step.selected {
            background: #edf4f7;
            border-color: #b4cbd7
        }

        .step small {
            display: block;
            margin-top: 8px;
            color: var(--muted)
        }

        .warning {
            padding: 20px;
            background: #fff9e9;
            border: 1px solid #e8d8ab;
            border-radius: 5px;
            color: #715622;
            margin: 20px 0
        }

        .document-grid {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 40px
        }

        .source-panel {
            padding-left: 28px;
            border-left: 1px solid var(--line)
        }

        .source-panel dt {
            font-size: 12px;
            color: var(--muted);
            margin-top: 20px
        }

        .source-panel dd {
            margin: 6px 0 0
        }

        .question {
            padding: 20px;
            background: #edf4f7;
            border-radius: 6px;
            margin: 20px 0
        }

        .assistant-answer {
            padding: 8px;
            line-height: 1.7
        }

        .assistant-answer li {
            margin: 14px 0
        }

        dialog {
            border: 1px solid #dfe4e8;
            border-radius: 8px;
            padding: 0;
            width: 560px;
            max-width: calc(100vw - 32px);
            box-shadow: 0 20px 70px #172b3a25;
            color: var(--text)
        }

        dialog::backdrop {
            background: #172b3a55
        }

        .modal-head {
            display: flex;
            gap: 20px;
            justify-content: space-between;
            padding: 28px 28px 20px
        }

        .modal-head h2 {
            margin: 0 0 8px;
            font-size: 24px
        }

        .modal-body {
            padding: 0 28px 28px
        }

        .modal-body label {
            margin-top: 20px
        }

        .modal-footer {
            background: #fafbfc;
            border-top: 1px solid var(--line);
            padding: 20px 28px;
            display: flex;
            justify-content: end;
            gap: 12px
        }

        .error {
            color: #a02e35;
            font-size: 12px;
            margin-top: 10px
        }

        .drawer-backdrop {
            position: fixed;
            inset: 0;
            background: #172b3a22;
            z-index: 20
        }

        .drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 426px;
            max-width: 100%;
            background: white;
            box-shadow: -12px 0 40px #172b3a18;
            display: flex;
            flex-direction: column;
            z-index: 21;
            border-left: 1px solid #dfe4e8
        }

        .drawer-head {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--line)
        }

        .bot-mark {
            background: #eaf2f5;
            border-radius: 8px;
            width: 36px;
            height: 36px;
            display: grid;
            place-items: center;
            color: var(--primary)
        }

        .drawer-head h3 {
            margin: 0 0 4px
        }

        .drawer-head .icon-button {
            margin-left: auto;
            border: 0
        }

        .drawer-body {
            padding: 24px;
            overflow: auto;
            flex: 1
        }

        .drawer-body h2 {
            font-size: 26px
        }

        .upload-area {
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            background: #f7f9fa;
            border: 1px dashed #c3d1d9;
            border-radius: 6px;
            margin: 24px 0
        }

        .upload-area.drag {
            background: #eaf2f5
        }

        .prompt {
            width: 100%;
            padding: 15px 0;
            border: 0;
            border-bottom: 1px solid var(--line);
            border-radius: 0;
            justify-content: start;
            text-align: left;
            white-space: normal
        }

        .prompt span {
            flex: 1
        }

        .prompt small {
            display: block;
            color: var(--muted);
            margin-top: 6px;
            font-weight: 400
        }

        .drawer-composer {
            padding: 16px 24px 20px;
            background: white
        }

        .composer {
            border: 1px solid #aabbc5;
            border-radius: 6px;
            padding: 12px
        }

        .composer textarea {
            width: 100%;
            border: 0;
            min-height: 54px;
            resize: none;
            padding: 0;
            color: var(--text);
            background: white
        }

        .composer .actions {
            justify-content: space-between;
            margin-top: 8px
        }

        .composer button {
            padding: 7px 9px
        }

        .message {
            padding: 14px;
            margin-bottom: 14px;
            border-radius: 6px;
            background: #f5f7f8;
            line-height: 1.6;
            overflow-wrap: anywhere
        }

        .message.user {
            background: #edf4f7;
            margin-left: 24px
        }

        .message small {
            display: block;
            color: #66727e;
            font-size: 10px;
            margin-bottom: 6px;
            letter-spacing: .6px
        }

        .file-chip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            padding: 8px 10px;
            margin: 6px 0;
            background: #edf3f6;
            border-radius: 4px;
            gap: 10px;
            overflow-wrap: anywhere
        }

        .file-chip button {
            padding: 2px;
            border: 0;
            background: transparent
        }

        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: #182e3a;
            color: white;
            padding: 12px 20px;
            border-radius: 6px;
            z-index: 50;
            box-shadow: 0 4px 20px #172b3a22;
            font-size: 13px
        }

        .menu {
            position: absolute;
            right: 48px;
            top: 68px;
            border: 1px solid var(--line);
            background: white;
            padding: 16px;
            border-radius: 6px;
            box-shadow: 0 8px 24px #172b3a12;
            z-index: 5;
            line-height: 1.8
        }

        .empty {
            text-align: center;
            padding: 40px;
            color: var(--muted)
        }

        [hidden] {
            display: none !important
        }

        @media(max-width:1000px) {
            main {
                padding: 28px 24px
            }

            header {
                padding: 0 24px
            }

            .fields {
                grid-template-columns: repeat(2, 1fr)
            }

            .matrix .article {
                width: 300px
            }

            .matrix .process {
                width: 52px
            }

            .document-grid {
                grid-template-columns: 1fr
            }

            .source-panel {
                border-left: 0;
                padding: 0
            }

            .progress-row {
                grid-template-columns: 200px 1fr 100px
            }

            .crumb {
                display: none
            }
        }

        @media(max-width:650px) {
            .page-head {
                align-items: start
            }

            .page-head h1 {
                font-size: 25px
            }

            .header-left {
                gap: 12px
            }

            .header-right {
                gap: 8px
            }

            .account-label {
                display: none
            }

            .fields,
            .factory {
                grid-template-columns: 1fr
            }

            .factory aside {
                border-right: 0;
                padding: 0
            }

            .tabs {
                gap: 22px
            }

            .metrics {
                gap: 12px
            }

            .metric strong {
                font-size: 27px
            }

            .progress-row {
                grid-template-columns: 1fr 80px;
                gap: 12px
            }

            .progress-track {
                grid-column: 1 / -1;
                grid-row: 2
            }

            .list-footer {
                gap: 12px;
                line-height: 1.5
            }

            .section-head {
                align-items: start
            }

            .sort-summary {
                display: none
            }
        }