/* =======================================================
   SECTION 3 : AI ENGINEERING INTERPRETATION
======================================================= */
.engineering-panel {
    position: relative;
    padding: 110px 5.5%;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 10%, rgba(46, 213, 115, 0.08), transparent 24%),
        radial-gradient(circle at 10% 75%, rgba(46, 196, 255, 0.08), transparent 30%),
        linear-gradient(180deg, #091928 0%, #07121f 100%);
}
.engineering-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(98, 206, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(98, 206, 255, 0.04) 1px, transparent 1px);
    background-size: 58px 58px;
    pointer-events: none;
}
.engineering-panel .section-header,
.engineering-layout,
.token-card,
.engineering-panel > .glass-card,
.workflow {
    position: relative;
    z-index: 1;
    width: min(1380px, 100%);
    margin-right: auto;
    margin-left: auto;
}
/* ---------- Main analysis layout ---------- */
.engineering-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
    align-items: start;
    gap: 24px;
}
.parsed-card {
    min-height: 100%;
}
.analysis-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* ---------- Card headings ---------- */
.card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 19px;
}
.card-title h3 {
    margin: 0;
    color: #e9faff;
    font-size: 1rem;
    font-weight: 600;
}
.status {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 500;
    white-space: nowrap;
}
.status.success {
    color: #8ff0bc;
    border: 1px solid rgba(46, 213, 115, 0.25);
    background: rgba(46, 213, 115, 0.09);
}
/* ---------- Parsed parameter table ---------- */
.parameter-table,
.drawing-info,
.object-properties,
.project-table {
    width: 100%;
    border-collapse: collapse;
}
.parameter-table tr {
    transition: background 0.2s ease;
}
.parameter-table tr:hover {
    background: rgba(46, 196, 255, 0.055);
}
.parameter-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(137, 215, 248, 0.1);
    font-size: 0.78rem;
    line-height: 1.35;
}
.parameter-table tr:last-child td {
    border-bottom: 0;
}
.parameter-table td:first-child {
    width: 43%;
    color: #88aabb;
    font-weight: 500;
}
.parameter-table td:last-child {
    color: #d9f2fc;
    font-weight: 500;
    text-align: right;
}
.parameter-table td:last-child::selection {
    color: #06111c;
    background: var(--cyan);
}
/* ---------- AI confidence ---------- */
.analysis-column .glass-card {
    text-align: center;
}
.analysis-column .glass-card h3 {
    text-align: left;
}
.confidence-circle {
    display: grid;
    width: 132px;
    height: 132px;
    margin: 25px auto 17px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #0a1d2e 59%, transparent 60%),
        conic-gradient(
            var(--cyan) 0deg,
            var(--green) 352.8deg,
            rgba(255, 255, 255, 0.09) 352.8deg
        );
    box-shadow:
        0 0 0 10px rgba(46, 196, 255, 0.045),
        0 0 32px rgba(46, 196, 255, 0.17);
    place-items: center;
}
.percent {
    color: #eeffff;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.05em;
}
.analysis-column .glass-card p {
    margin: 0;
    color: #92b4c5;
    font-size: 0.78rem;
    line-height: 1.65;
    text-align: center;
}
/* ---------- Validation report ---------- */
.validation-list {
    display: grid;
    gap: 12px;
    margin: 19px 0 0;
    padding: 0;
    text-align: left;
    list-style: none;
}
.validation-list li {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.76rem;
    line-height: 1.35;
}
.validation-list .ok {
    color: #99efbd;
    border: 1px solid rgba(46, 213, 115, 0.14);
    background: rgba(46, 213, 115, 0.055);
}
.validation-list .warning {
    color: #ffd18a;
    border: 1px solid rgba(255, 177, 66, 0.17);
    background: rgba(255, 177, 66, 0.065);
}
/* ---------- Engineering entity tokens ---------- */
.token-card {
    margin-top: 24px;
}
.token-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 600;
}
.token.dimension {
    color: #8ee6ff;
    border-color: rgba(46, 196, 255, 0.25);
    background: rgba(46, 196, 255, 0.1);
}
.token.steel {
    color: #91efbb;
    border-color: rgba(46, 213, 115, 0.23);
    background: rgba(46, 213, 115, 0.08);
}
.token.spacing {
    color: #ffd18c;
    border-color: rgba(255, 177, 66, 0.23);
    background: rgba(255, 177, 66, 0.08);
}
.token.cover {
    color: #d7baff;
    border-color: rgba(180, 130, 255, 0.24);
    background: rgba(180, 130, 255, 0.09);
}
.token.material {
    color: #c9d6df;
    border-color: rgba(201, 214, 223, 0.18);
    background: rgba(201, 214, 223, 0.055);
}
.token.drawing {
    color: #ffb6ce;
    border-color: rgba(255, 122, 168, 0.22);
    background: rgba(255, 122, 168, 0.08);
}
/* ---------- Recommendations ---------- */
.engineering-panel > .glass-card {
    margin-top: 24px;
}
.recommendation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.recommend-item {
    min-height: 126px;
    padding: 17px;
    border: 1px solid rgba(134, 212, 246, 0.13);
    border-radius: 10px;
    background: rgba(3, 17, 29, 0.3);
    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease;
}
.recommend-item:hover {
    transform: translateY(-3px);
    border-color: rgba(46, 196, 255, 0.32);
    background: rgba(46, 196, 255, 0.055);
}
.recommend-item h4 {
    margin: 0;
    color: #dff7ff;
    font-size: 0.82rem;
    font-weight: 600;
}
.recommend-item p {
    margin: 9px 0 0;
    color: #8eadbd;
    font-size: 0.73rem;
    line-height: 1.6;
}
/* ---------- Interpretation summary ---------- */
.summary-card p {
    max-width: 1120px;
    margin: 0;
    color: #a9c4d1;
    font-size: 0.88rem;
    line-height: 1.95;
}
.summary-card strong {
    color: #e1f8ff;
    font-weight: 600;
}
/* ---------- Workflow indicator ---------- */
.workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}
.workflow-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 67px;
    padding: 13px 14px;
    color: #819eae;
    border: 1px solid rgba(132, 209, 244, 0.13);
    border-radius: 11px;
    background: rgba(9, 29, 46, 0.52);
}
.workflow-item:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -17px;
    z-index: 2;
    width: 18px;
    height: 1px;
    content: "";
    background: rgba(104, 188, 222, 0.25);
}
.step-number {
    display: grid;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    color: #9db7c4;
    border: 1px solid rgba(143, 207, 233, 0.23);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.77rem;
    font-weight: 600;
    place-items: center;
}
.workflow-item span {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
}
.workflow-item.completed {
    color: #9cefc0;
    border-color: rgba(46, 213, 115, 0.24);
    background: rgba(46, 213, 115, 0.07);
}
.workflow-item.completed .step-number {
    color: #06170d;
    border-color: var(--green);
    background: var(--green);
    box-shadow: 0 0 16px rgba(46, 213, 115, 0.27);
}
.workflow-item.active {
    color: #d9f8ff;
    border-color: rgba(46, 196, 255, 0.4);
    background: rgba(46, 196, 255, 0.09);
    box-shadow: 0 0 23px rgba(46, 196, 255, 0.08);
}
.workflow-item.active .step-number {
    color: #03111b;
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow: 0 0 16px rgba(46, 196, 255, 0.26);
}
/* ---------- Responsive interpretation section ---------- */
@media (max-width: 1050px) {
    .engineering-panel {
        padding: 88px 4%;
    }
    .engineering-layout {
        grid-template-columns: 1fr;
    }
    .analysis-column {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .recommendation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .workflow-item:nth-child(2)::after {
        display: none;
    }
}
@media (max-width: 700px) {
    .engineering-panel {
        padding: 72px 22px;
    }
    .engineering-layout,
    .analysis-column {
        gap: 16px;
    }
    .analysis-column {
        display: flex;
    }
    .card-title {
        align-items: flex-start;
        flex-direction: column;
    }
    .parameter-table td {
        padding: 11px 8px;
        font-size: 0.7rem;
    }
    .parameter-table td:first-child {
        width: 46%;
    }
    .parameter-table td:last-child {
        text-align: left;
    }
    .confidence-circle {
        width: 116px;
        height: 116px;
        margin-top: 18px;
    }
    .recommendation-grid {
        grid-template-columns: 1fr;
    }
    .recommend-item {
        min-height: auto;
    }
    .workflow {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .workflow-item::after {
        display: none;
    }
    .token {
        padding: 7px 10px;
        font-size: 0.68rem;
    }
    .summary-card p {
        font-size: 0.8rem;
        line-height: 1.8;
    }
}