/* Extracted from static/tools/checklist-gen.html; production CSP forbids inline style blocks. */
:root {
            --accent: var(--accent-cyan);
            --accent-grad: var(--grad-cyan);
            --pass: #10b981;
            --fail: #ef4444;
            --na: #6b7280;
            --warn: #f59e0b;
            --crit: #dc2626;
            --high: #f97316;
            --normal: #3b82f6
        }

        * {
            box-sizing: border-box
        }

        /* ── LAYOUT ── */
        .app-layout {
            display: grid;
            grid-template-columns: 380px 1fr;
            gap: var(--space-xl);
            align-items: start;
            max-width: 1400px;
            margin: 0 auto
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
            position: sticky;
            top: 80px
        }

        .main-panel {
            min-height: 70vh
        }

        /* ── BREADCRUMB ── */
        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: var(--space-md);
            flex-wrap: wrap
        }

        .breadcrumb-item {
            cursor: pointer;
            transition: color .2s
        }

        .breadcrumb-item:hover {
            color: var(--accent-cyan)
        }

        .breadcrumb-sep {
            opacity: .4
        }

        .breadcrumb-active {
            color: var(--text-primary);
            font-weight: 600
        }

        /* ── SECTOR CARDS ── */
        .nav-card {
            padding: 14px 16px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all .2s;
            display: flex;
            align-items: center;
            gap: 14px;
            background: rgba(255, 255, 255, .02)
        }

        .nav-card:hover {
            border-color: rgba(6, 182, 212, .4);
            background: rgba(6, 182, 212, .04);
            transform: translateX(4px)
        }

        .nav-card.active {
            border-color: rgba(6, 182, 212, .6);
            background: rgba(6, 182, 212, .08);
            box-shadow: 0 0 20px rgba(6, 182, 212, .08)
        }

        .nav-card .nav-icon {
            font-size: 1.6rem;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, .04)
        }

        .nav-card .nav-info {
            flex: 1;
            min-width: 0
        }

        .nav-card .nav-name {
            font-weight: 600;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .nav-card .nav-meta {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 2px
        }

        .nav-card .nav-arrow {
            color: var(--text-muted);
            font-size: 14px;
            transition: transform .2s
        }

        .nav-card:hover .nav-arrow {
            transform: translateX(3px);
            color: var(--accent-cyan)
        }

        .nav-back {
            padding: 10px 14px;
            font-size: 12px;
            gap: 8px;
            color: var(--accent-cyan);
            border-color: rgba(6, 182, 212, .2)
        }

        .nav-back:hover {
            background: rgba(6, 182, 212, .06)
        }

        .hazard-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .02em
        }

        .hazard-cok-tehlikeli {
            background: rgba(239, 68, 68, .15);
            color: #f87171
        }

        .hazard-tehlikeli {
            background: rgba(249, 115, 22, .15);
            color: #fb923c
        }

        .hazard-az-tehlikeli {
            background: rgba(34, 197, 94, .15);
            color: #4ade80
        }

        .sidebar-search {
            width: 100%;
            padding: 10px 14px 10px 36px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, .03);
            color: var(--text-primary);
            font-size: 13px;
            outline: none;
            transition: border-color .2s
        }

        .sidebar-search:focus {
            border-color: rgba(6, 182, 212, .5)
        }

        .search-wrap {
            position: relative
        }

        .search-wrap::before {
            content: '🔍';
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            opacity: .5
        }

        /* ── INSPECTION HEADER ── */
        .insp-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-lg);
            flex-wrap: wrap;
            gap: var(--space-md)
        }

        .insp-title {
            font-size: 1.4rem;
            font-weight: 800
        }

        .insp-actions {
            display: flex;
            gap: 8px
        }

        .insp-actions button {
            padding: 8px 16px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, .04);
            color: var(--text-primary);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all .2s;
            display: flex;
            align-items: center;
            gap: 6px
        }

        .insp-actions button:hover {
            border-color: rgba(6, 182, 212, .4);
            background: rgba(6, 182, 212, .08)
        }

        .btn-export {
            background: linear-gradient(135deg, rgba(6, 182, 212, .15), rgba(59, 130, 246, .15)) !important;
            border-color: rgba(6, 182, 212, .3) !important
        }

        /* ── SCORE GAUGE ── */
        .score-section {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            padding: var(--space-lg);
            border-radius: 16px;
            background: rgba(255, 255, 255, .02);
            border: 1px solid var(--border-color);
            margin-bottom: var(--space-lg)
        }

        .score-gauge {
            position: relative;
            width: 100px;
            height: 100px;
            flex-shrink: 0
        }

        .score-gauge svg {
            transform: rotate(-90deg)
        }

        .score-gauge .gauge-bg {
            fill: none;
            stroke: rgba(255, 255, 255, .06);
            stroke-width: 8
        }

        .score-gauge .gauge-fill {
            fill: none;
            stroke-width: 8;
            stroke-linecap: round;
            transition: stroke-dashoffset .8s ease, stroke .3s
        }

        .score-gauge .gauge-text {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center
        }

        .score-gauge .gauge-pct {
            font-size: 1.6rem;
            font-weight: 900;
            font-family: var(--font-mono)
        }

        .score-gauge .gauge-label {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: -2px
        }

        .score-stats {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px
        }

        .score-stat {
            text-align: center;
            padding: 8px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .02)
        }

        .score-stat-num {
            font-size: 1.1rem;
            font-weight: 800;
            font-family: var(--font-mono)
        }

        .score-stat-label {
            font-size: 10px;
            color: var(--text-muted);
            margin-top: 2px
        }

        .stat-pass .score-stat-num {
            color: var(--pass)
        }

        .stat-fail .score-stat-num {
            color: var(--fail)
        }

        .stat-na .score-stat-num {
            color: var(--na)
        }

        /* ── PAGE TABS ── */
        .page-tabs {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            padding-bottom: 4px;
            margin-bottom: var(--space-lg);
            scrollbar-width: none
        }

        .page-tabs::-webkit-scrollbar {
            display: none
        }

        .page-tab {
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            cursor: pointer;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, .02);
            color: var(--text-secondary);
            transition: all .2s
        }

        .page-tab:hover {
            border-color: rgba(6, 182, 212, .3);
            color: var(--text-primary)
        }

        .page-tab.active {
            background: rgba(6, 182, 212, .1);
            border-color: rgba(6, 182, 212, .4);
            color: var(--accent-cyan)
        }

        .page-tab .tab-count {
            margin-left: 6px;
            padding: 1px 6px;
            border-radius: 6px;
            background: rgba(255, 255, 255, .06);
            font-size: 10px
        }

        /* ── INSPECTION ITEMS ── */
        .insp-item {
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 10px;
            transition: all .25s;
            background: rgba(255, 255, 255, .01)
        }

        .insp-item:hover {
            border-color: rgba(255, 255, 255, .1);
            background: rgba(255, 255, 255, .03)
        }

        .insp-item.result-pass {
            border-left: 3px solid var(--pass);
            background: rgba(16, 185, 129, .03)
        }

        .insp-item.result-fail {
            border-left: 3px solid var(--fail);
            background: rgba(239, 68, 68, .03)
        }

        .insp-item.result-na {
            border-left: 3px solid var(--na);
            background: rgba(107, 114, 128, .03)
        }

        .item-top {
            display: flex;
            align-items: flex-start;
            gap: 12px
        }

        .item-num {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-muted);
            min-width: 24px;
            padding-top: 3px;
            font-weight: 600
        }

        .item-content {
            flex: 1;
            min-width: 0
        }

        .item-question {
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
            margin-bottom: 8px
        }

        .item-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 10px
        }

        .item-tag {
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 600
        }

        .tag-category {
            background: rgba(99, 102, 241, .12);
            color: #a5b4fc
        }

        .tag-priority-kritik {
            background: rgba(239, 68, 68, .15);
            color: #fca5a5
        }

        .tag-priority-yuksek {
            background: rgba(249, 115, 22, .12);
            color: #fdba74
        }

        .tag-priority-normal {
            background: rgba(59, 130, 246, .12);
            color: #93c5fd
        }

        .tag-legal {
            background: rgba(139, 92, 246, .1);
            color: #c4b5fd;
            font-size: 9px
        }

        .item-buttons {
            display: flex;
            gap: 6px
        }

        .resp-btn {
            padding: 8px 18px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid;
            transition: all .2s;
            display: flex;
            align-items: center;
            gap: 5px;
            letter-spacing: .02em
        }

        .resp-btn:hover {
            transform: scale(1.04)
        }

        .btn-pass {
            border-color: rgba(16, 185, 129, .3);
            color: var(--pass);
            background: rgba(16, 185, 129, .06)
        }

        .btn-pass:hover,
        .btn-pass.selected {
            background: rgba(16, 185, 129, .2);
            border-color: var(--pass);
            box-shadow: 0 0 16px rgba(16, 185, 129, .15)
        }

        .btn-fail {
            border-color: rgba(239, 68, 68, .3);
            color: var(--fail);
            background: rgba(239, 68, 68, .06)
        }

        .btn-fail:hover,
        .btn-fail.selected {
            background: rgba(239, 68, 68, .2);
            border-color: var(--fail);
            box-shadow: 0 0 16px rgba(239, 68, 68, .15)
        }

        .btn-na {
            border-color: rgba(107, 114, 128, .3);
            color: var(--na);
            background: rgba(107, 114, 128, .06)
        }

        .btn-na:hover,
        .btn-na.selected {
            background: rgba(107, 114, 128, .2);
            border-color: var(--na)
        }

        .item-note {
            margin-top: 10px;
            display: none
        }

        .item-note.show {
            display: block
        }

        .item-note textarea {
            width: 100%;
            padding: 10px 14px;
            border-radius: 10px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, .03);
            color: var(--text-primary);
            font-size: 12px;
            font-family: var(--font-main);
            resize: vertical;
            min-height: 60px;
            outline: none;
            transition: border-color .2s
        }

        .item-note textarea:focus {
            border-color: rgba(6, 182, 212, .4)
        }

        .note-toggle {
            font-size: 11px;
            color: var(--text-muted);
            cursor: pointer;
            margin-top: 6px;
            display: inline-flex;
            align-items: center;
            gap: 4px
        }

        .note-toggle:hover {
            color: var(--accent-cyan)
        }

        .item-guidance {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 4px;
            padding: 6px 10px;
            border-radius: 8px;
            background: rgba(139, 92, 246, .04);
            border-left: 2px solid rgba(139, 92, 246, .2);
            display: none
        }

        .item-guidance.show {
            display: block
        }

        /* ── EMPTY STATE ── */
        .empty-state {
            text-align: center;
            padding: 80px 20px;
            color: var(--text-muted)
        }

        .empty-state .empty-icon {
            font-size: 4rem;
            margin-bottom: var(--space-md);
            opacity: .6
        }

        .empty-state h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-secondary);
            margin-bottom: 8px
        }

        .empty-state p {
            font-size: 13px;
            max-width: 400px;
            margin: 0 auto;
            line-height: 1.6
        }

        /* ── PROGRESS BAR ── */
        .progress-bar-wrap {
            height: 6px;
            border-radius: 6px;
            background: rgba(255, 255, 255, .06);
            overflow: hidden;
            margin-bottom: var(--space-md)
        }

        .progress-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width .5s ease;
            background: linear-gradient(90deg, var(--accent-cyan), #3b82f6)
        }

        /* ── RESPONSIVE ── */
        @media(max-width:900px) {
            .app-layout {
                grid-template-columns: 1fr
            }

            .sidebar {
                position: static;
                order: 1
            }

            .main-panel {
                order: 2
            }

            .score-section {
                flex-direction: column;
                text-align: center
            }

            .score-stats {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media(max-width:500px) {
            .item-buttons {
                flex-wrap: wrap
            }

            .resp-btn {
                flex: 1;
                justify-content: center
            }

            .insp-actions {
                flex-wrap: wrap
            }
        }
.ra-csp-checklist-gen-01 { display:flex; align-items:center; gap:6px; }
.ra-csp-checklist-gen-02 { background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.2);color:var(--accent-cyan); }
.ra-csp-checklist-gen-03 { background:var(--accent-cyan); }
.ra-csp-checklist-gen-04 { margin-top:var(--space-xs);font-size:11px;color:var(--text-muted) }