/* Drawer Styles */
        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1040;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
        }

        .drawer-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .project-drawer {
            position: fixed;
            top: 0;
            right: -980px;
            width: 920px;
            max-width: 96vw;
            height: 100%;
            background: #fff;
            z-index: 1050;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .project-drawer.show {
            right: 0;
        }

        .drawer-header {
            padding: 20px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8fafc;
        }

        .drawer-header h2 {
            margin: 0;
            font-size: 1.25rem;
            color: var(--text-dark);
        }

        .drawer-content {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }

        .project-detail-shell {
            display: flex;
            flex-direction: column;
            gap: 18px;
            color: #0f172a;
        }

        .project-detail-hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e2e8f0;
        }

        .project-detail-kicker {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 6px;
        }

        .project-detail-hero h3 {
            margin: 0;
            font-size: 24px;
            line-height: 1.25;
        }

        .project-detail-hero p {
            margin: 8px 0 0;
            color: #475569;
        }

        .project-detail-actions {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .project-detail-metrics {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 10px;
        }

        .project-detail-metric {
            min-height: 86px;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .project-detail-metric i {
            color: #2563eb;
            font-size: 18px;
        }

        .project-detail-metric span {
            color: #64748b;
            font-size: 12px;
        }

        .project-detail-metric strong {
            font-size: 14px;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .project-detail-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            border-bottom: 1px solid #e2e8f0;
        }

        .project-detail-tabs button {
            border: 0;
            background: transparent;
            padding: 10px 12px;
            font-weight: 700;
            color: #64748b;
            border-bottom: 2px solid transparent;
            cursor: pointer;
        }

        .project-detail-tabs button.active {
            color: #dc3545;
            border-bottom-color: #dc3545;
        }

        .project-detail-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 22px;
            align-items: start;
        }

        .project-detail-tab-panel {
            display: none;
        }

        .project-detail-tab-panel.active {
            display: block;
        }

        .project-detail-section {
            margin-bottom: 20px;
        }

        .project-detail-section h4,
        .project-detail-chart h4 {
            margin: 0 0 10px;
            font-size: 16px;
        }

        .project-detail-text {
            line-height: 1.8;
            color: #334155;
            font-size: 14px;
            overflow-wrap: anywhere;
        }

        .project-detail-table {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
        }

        .project-detail-table-head,
        .project-detail-table-row {
            display: grid;
            grid-template-columns: 90px 100px 1fr 1fr;
            gap: 8px;
            padding: 10px 12px;
            border-bottom: 1px solid #e2e8f0;
            font-size: 13px;
        }

        .project-detail-table-head {
            background: #f8fafc;
            font-weight: 700;
            color: #475569;
        }

        .project-detail-table-row:last-child {
            border-bottom: 0;
        }

        .project-detail-course-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .project-detail-course {
            display: flex;
            gap: 10px;
            padding: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #fff;
        }

        .project-detail-course > span {
            color: #64748b;
            font-size: 12px;
            min-width: 24px;
        }

        .project-detail-course strong,
        .project-detail-course small {
            display: block;
            overflow-wrap: anywhere;
        }

        .project-detail-course small {
            color: #64748b;
            margin-top: 4px;
        }

        .project-detail-chart {
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid #e2e8f0;
            min-height: 260px;
        }

        .project-detail-chart-canvas-wrap {
            height: 210px;
            min-height: 210px;
        }

        .project-detail-chart-fallback {
            display: grid;
            gap: 8px;
        }

        .project-detail-chart-row {
            display: grid;
            grid-template-columns: minmax(72px, 1fr) minmax(82px, 1.4fr) auto;
            gap: 8px;
            align-items: center;
            font-size: 12px;
            color: #334155;
        }

        .project-detail-chart-row-label {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .project-detail-chart-row-track {
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: #e2e8f0;
        }

        .project-detail-chart-row-track span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #2563eb, #16a34a);
        }

        .project-detail-chart-row strong {
            color: #0f172a;
            font-size: 12px;
        }

        .project-detail-chart-more {
            padding-top: 4px;
            color: #64748b;
            font-size: 12px;
        }

        .project-detail-case-list {
            display: grid;
            gap: 10px;
        }

        .project-detail-case {
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
        }

        .project-detail-case div {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            color: #475569;
            font-size: 13px;
        }

        .project-detail-case p {
            margin: 8px 0 0;
            color: #334155;
            font-size: 13px;
        }

        .project-detail-empty {
            color: #64748b;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            padding: 14px;
            background: #f8fafc;
        }

        @media (max-width: 860px) {
            .project-detail-metrics,
            .project-detail-layout,
            .project-detail-course-grid {
                grid-template-columns: 1fr;
            }

            .project-detail-table-head,
            .project-detail-table-row {
                grid-template-columns: 1fr;
            }

            .project-detail-hero {
                flex-direction: column;
            }
        }

        .drawer-logo {
            width: 80px;
            height: 80px;
            object-fit: contain;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            display: block;
            margin-bottom: 15px;
        }

        .drawer-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
            margin-top: 15px;
        }

        .drawer-img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .drawer-img:hover {
            transform: scale(1.05);
        }

        .drawer-section {
            margin-bottom: 20px;
        }

        .drawer-section h3 {
            font-size: 1rem;
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 5px;
            display: inline-block;
            margin-bottom: 10px;
        }

        /* Lightbox Styles */
        .lightbox-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s;
        }

        .lightbox-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
        }

        .lightbox-content-wrapper {
            text-align: center;
            max-width: 90%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #lightboxImage {
            max-width: 100%;
            max-height: calc(90vh - 60px);
            object-fit: contain;
            border-radius: 4px;
        }

        .lightbox-actions {
            margin-top: 15px;
        }

/* Fixed layout moved from the application shell; no CSP policy relaxation. */
html .shell-layout-01cf5f3701 { gap:15px; align-items:center; }
html .shell-layout-0231bd7a8a { width:150px; }
html .shell-layout-02d1c11b56 { width:40px; }
html .shell-layout-06f1c0ffdf { font-size:18px; font-weight:800; color:#0f172a; }
html .shell-layout-072e967d56 { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
html .shell-layout-083a265e65 { width:auto; margin-right:8px; }
html .shell-layout-09b8327f59 { background-color: #f0f7ff; border: 1px dashed #ced4da; }
html .shell-layout-0bcd9ceed0 { font-size: 1.5rem; }
html .shell-layout-0dfe35f39a { width:110px; }
html .shell-layout-0f6ba93d4a { max-width: 500px; }
html .shell-layout-10d3b374d4 { border:1px solid #e2e8f0; border-radius:14px; padding:16px; background:#f8fafc; }
html .shell-layout-1230cf9d68 { gap:10px; flex-wrap:wrap; margin-bottom:14px; }
html .shell-layout-141abdf468 { flex-direction:column; gap:16px; }
html .shell-layout-1552d72321 { width:80px; padding:4px; border:1px solid #d1d5db; border-radius:4px; }
html .shell-layout-160a277225 { flex-direction:column; overflow:hidden; }
html .shell-layout-16dbf2a37c { margin-bottom:14px; }
html .shell-layout-170edb9350 { margin-top:20px; padding:24px; flex-direction:column; gap:18px; }
html .shell-layout-19b53e4d3f { justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
html .shell-layout-1cd896a576 { margin-bottom: 2rem; }
html .shell-layout-1d2bea3813 { width:auto; min-width:140px; height:36px; padding:0 10px; font-size:13px; }
html .shell-layout-1d44af3ea0 { color:#64748b; font-size:13px; }
html .shell-layout-1fd7f027ca { grid-template-columns: 1fr 1fr; gap:8px; }
html .shell-layout-23f2f4867a { justify-content:flex-end; gap:10px; margin-bottom:14px; }
html .shell-layout-24789f0cb7 { width: 70px; }
html .shell-layout-29007a6828 { grid-template-columns: 1fr 1fr; }
html .shell-layout-2967545c78 { max-width: 860px; }
html .shell-layout-2b0e8ce8c2 { margin:0 0 12px; }
html .shell-layout-2f3c1dd03e { padding: 24px; flex-direction:column; gap:18px; }
html .shell-layout-30e2052f8a { width:100%; border-color: #e0e0e0; color: #666; }
html .shell-layout-314eb17554 { background:none; border:none; font-size:24px; cursor:pointer; color:#999; }
html .shell-layout-38965f9b18 { margin:0; }
html .shell-layout-38cfdd078b { flex:1; overflow-y:auto; padding:10px; background:#f9fafb; min-height:0; }
html .shell-layout-3a7f2c1092 { gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
html .shell-layout-3b6fad0b29 { margin-top: 10px; }
html .shell-layout-3bbc6d2ade { font-size:0.9rem; }
html .shell-layout-3c40282be7 { width:220px; padding:6px 10px; font-size:13px; height:auto; }
html .shell-layout-3cbc62cdc0 { align-items:center; gap:8px; font-weight:700; }
html .shell-layout-41357e538b { max-width: 830px; }
html .shell-layout-436f287734 { background:var(--bg-light); font-size:14px; padding:15px; height: 350px; overflow-y: auto; color: var(--text-secondary); line-height: 1.6; }
html .shell-layout-44b7d81b61 { padding:20px; border-bottom:1px solid #eee; justify-content:space-between; align-items:center; }
html .shell-layout-454ae3671d { grid-column: span 2; }
html .shell-layout-4b767a0e1f { background-color: #f9fafb; }
html .shell-layout-4f4fe07927 { align-items:center;gap:10px; }
html .shell-layout-51cce77d45 { font-size:48px;color:#eee;margin-bottom:10px; }
html .shell-layout-52a2fcf65e { justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
html .shell-layout-562649d339 { flex-direction: column; overflow: hidden; margin-bottom: 0; }
html .shell-layout-570787ec73 { text-align:center; color:#999; }
html .shell-layout-5ac8057a13 { margin-right:4px; }
html .shell-layout-5b5527df72 { width: 180px; }
html .shell-layout-5ffb91a26b { justify-content:space-between; align-items:center; }
html .shell-layout-6590e06cc0 { gap:12px; flex-wrap:wrap; }
html .shell-layout-65d133f4be { color:var(--primary-color) }
html .shell-layout-68397802c2 { padding:18px; border:1px solid #e2e8f0; background:#f8fafc; }
html .shell-layout-688c776460 { max-width: 520px; }
html .shell-layout-6c26ca0e11 { grid-template-columns: 120px 1fr; gap:8px; }
html .shell-layout-6f3b8ebccd { text-align:center;color:#999;font-size:12px;margin-top:20px; }
html .shell-layout-71ac5620fc { align-items: center; gap: 10px; }
html .shell-layout-72244bfef4 { width:170px; }
html .shell-layout-73c872614a { align-items:center; gap:5px; font-size:13px; color: var(--text-secondary); cursor: pointer; }
html .shell-layout-740ec417ea { grid-template-columns: 1fr 1fr; gap: 10px; }
html .shell-layout-74aa97bfdf { justify-content:flex-end; gap:10px; }
html .shell-layout-7564ec607e { margin-bottom:16px; }
html .shell-layout-76977cc9f2 { margin-top:16px; }
html .shell-layout-770944d0c0 { padding: 2rem; line-height: 1.8; }
html .shell-layout-77fcd5a8f9 { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 10px; padding-top: 10px; }
html .shell-layout-7a37e33efa { gap:10px; justify-content: flex-end; align-items: center; }
html .shell-layout-7a7c5670c3 { padding: 20px; height: 300px; }
html .shell-layout-7b5cfc8d85 { align-items:center; gap:10px; flex-wrap:wrap; }
html .shell-layout-7b6ff91f66 { width:220px; }
html .shell-layout-7ba9bad628 { font-weight: 500; }
html .shell-layout-7fc00675aa { width:132px; }
html .shell-layout-80d57354a5 { width: 50px; height: 50px; border-radius: 5px; object-fit: contain; background: #fff; border: 1px solid #ddd; }
html .shell-layout-812961bc03 { width:180px; padding:8px 12px; font-size:13px; height:auto; }
html .shell-layout-82b8c3f4c8 { grid-template-columns: minmax(0, 1.2fr) 180px 200px auto; gap:10px; margin-bottom:14px; }
html .shell-layout-8378652daa { width:140px; }
html .shell-layout-83af181917 { gap: 10px; }
html .shell-layout-86209dc9fa { color:#999 }
html .shell-layout-8ab00ba098 { align-items:center; cursor:pointer; }
html .shell-layout-8ba0c206b7 { align-items:center; gap:10px; }
html .shell-layout-8c7cd80d80 { font-size:14px; color:#475569; }
html .shell-layout-8ccbb39496 { border:1px solid #e2e8f0; border-radius:14px; padding:16px; background:#fff; }
html .shell-layout-8d84299030 { margin-top:14px; }
html .shell-layout-8d8a98d8e9 { max-width: 600px; }
html .shell-layout-92fe6d206c { width: 220px; }
html .shell-layout-936d6bbab2 { margin-top: 20px; }
html .shell-layout-95ea4fc38d { width:240px; padding:8px 12px; font-size:13px; height:auto; }
html .shell-layout-9a7472a9ec { margin-top: 1rem; }
html .shell-layout-9c3785c28e { font-weight:700; }
html .shell-layout-9ccc4ca9d6 { width:100%; }
html .shell-layout-9cfb54837d { gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html .shell-layout-9e77998f13 { gap:8px; flex-wrap:wrap; }
html .shell-layout-9fc24c7120 { max-width: 760px; }
html .shell-layout-a14d8e1a66 { margin:0; font-size:30px; }
html .shell-layout-a23309fd59 { text-align:center;color:#999;padding:40px; }
html .shell-layout-a446e458ad { padding:24px; flex-direction:column; gap:18px; }
html .shell-layout-a82b3cf518 { max-width: 400px; }
html .shell-layout-ab5d51d804 { width:140px; padding:6px; font-size:13px; height:32px; }
html .shell-layout-ac60e96649 { margin-bottom: 15px; font-size: 0.95rem; color: var(--primary-color); }
html .shell-layout-adc1ca6fad { background: linear-gradient(to right, #f8faff, #f0f4ff); border:1px solid #e0e7ff; }
html .shell-layout-ae28122bc1 { width: 120px; }
html .shell-layout-af8dbc582f { max-width: 960px; }
html .shell-layout-b0a4a26a66 { color:#94a3b8 }
html .shell-layout-b3ccdd9bef { font-size:11px; color:#6b7280; }
html .shell-layout-b4d5b66d08 { font-size:12px; font-weight:600; margin-bottom:10px; color:#4b5563; }
html .shell-layout-b699c17309 { width:120px; }
html .shell-layout-b7aa1ec004 { width:100% }
html .shell-layout-b7cbd0c439 { font-size:12px; margin-right:15px; }
html .shell-layout-bd4c87016c { flex:1; overflow-y:auto; padding:15px; min-height:200px; }
html .shell-layout-c264af2d09 { gap:10px; align-items:center; flex-wrap:wrap; }
html .shell-layout-c3ef825843 { flex:1; overflow-y:auto; }
html .shell-layout-c42f23b8ec { font-size:12px; }
html .shell-layout-c4fe6e47a5 { background:white; border-radius:12px; max-width:600px; width:90%; max-height:80vh; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
html .shell-layout-c6b302ddda { padding:18px; border:1px solid #e2e8f0; }
html .shell-layout-c8b0546052 { font-size:12px;color:#f59e0b }
html .shell-layout-cc053a9abb { gap: 10px; align-items: center; }
html .shell-layout-cc36fe5332 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:14px; }
html .shell-layout-cd2508fe5a { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
html .shell-layout-cea0e049c3 { padding: 10px 15px; border-bottom: 1px solid #eee; gap:10px; background:#f9fafb; align-items:center; }
html .shell-layout-cfb6e01b87 { gap: 10px; margin-top:10px; }
html .shell-layout-d13da151ce { margin:0; font-size:18px; }
html .shell-layout-d682df977b { color: var(--primary-color); }
html .shell-layout-d81b965227 { align-items:center; gap:10px; background:#f8fafc; padding:8px 12px; border-radius:12px; border:1px solid #e2e8f0; }
html .shell-layout-d94dfd35fa { gap: 20px; }
html .shell-layout-dc02fda315 { margin-bottom: 10px; font-size: 0.9rem; color: #666; }
html .shell-layout-dd635da57a { margin-top:6px; color:#64748b; font-size:12px; line-height:1.6; }
html .shell-layout-ddf1be1eae { padding:10px; border-bottom:1px solid #eee; flex-shrink:0; }
html .shell-layout-de02bcaaa5 { margin:0; font-size: 30px; }
html .shell-layout-dec6cc3656 { color:red; font-size:12px; margin-bottom:10px; }
html .shell-layout-dfc4442db3 { margin-bottom: 2rem; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
html .shell-layout-e0db5fbf10 { width:160px; }
html .shell-layout-e303f292c2 { flex-direction:column; height:100%; overflow:hidden; }
html .shell-layout-ed1249b03d { width:72px; }
html .shell-layout-eda933eb99 { text-align:center;color:#999; }
html .shell-layout-ee0280aed2 { width:180px; }
html .shell-layout-ef2ecbda31 { padding: 12px 0; border-top: 1px solid #eef2f7; border-bottom: 1px solid #eef2f7; gap:10px; background:transparent; align-items:center; flex-wrap:wrap; }
html .shell-layout-efb4049952 { padding:15px; border-bottom:1px solid #eee; }
html .shell-layout-f097ef38b8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:18px; }
html .shell-layout-f0a245b4cd { max-width: 560px; }
html .shell-layout-f0b30add06 { max-height: 400px; overflow-y: auto; }
html .shell-layout-f0d27ab3a8 { padding:15px; border-bottom:1px solid #eee; flex-shrink:0; }
html .shell-layout-f19ed6396b { gap: 10px; flex-wrap: wrap; margin-top: 10px; }
html .shell-layout-f6279acc73 { margin-bottom: 20px; }
html .shell-layout-f92f2a3da6 { padding:15px; border-top:1px solid #eee; text-align:right; }
html .shell-layout-fb8005edcc { background:#f9fafb; padding:15px; border-radius:8px; margin:15px; border:1px solid #e5e7eb; }
html .shell-layout-fbb14f68fc { grid-template-columns: 320px 1fr; gap: 20px; height: calc(100vh - 120px); }
html .shell-layout-fffdd52c08 { margin-bottom:10px; }

[data-initial-display="block"] { display: block; }
[data-initial-display="flex"] { display: flex; }
[data-initial-display="grid"] { display: grid; }
[data-initial-display="inline"] { display: inline; }
[data-initial-display="inline-block"] { display: inline-block; }
[data-initial-display="inline-flex"] { display: inline-flex; }
[data-initial-display="none"] { display: none; }
[data-initial-display="table"] { display: table; }
[data-initial-display="table-cell"] { display: table-cell; }
[data-initial-display="table-row"] { display: table-row; }