/* =============================================
           CSS DESIGN SYSTEM
           ============================================= */
        :root {
            --bg: #060b18;
            --sidebar-bg: rgba(10, 16, 32, 0.85);
            --card-bg: rgba(18, 27, 50, 0.5);
            --card-hover: rgba(26, 38, 70, 0.6);
            --border: rgba(255, 255, 255, 0.07);
            --border-active: rgba(245, 158, 11, 0.4);
            --text: #f3f4f6;
            --text-muted: #8b95a8;
            --primary: #f59e0b;
            --primary-light: #fbbf24;
            --primary-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            --accent: #10b981;
            --accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
            --info: #3b82f6;
            --info-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            --danger: #ef4444;
            --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            --warning: #f97316;
            --purple: #8b5cf6;
            --purple-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
            --cyan: #06b6d4;
            --cyan-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
            --pink: #ec4899;
            --pink-gradient: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
            --font-display: 'Outfit', sans-serif;
            --font-body: 'Inter', sans-serif;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --radius: 16px;
            --radius-sm: 10px;
            --radius-xs: 6px;
        }
        ::-webkit-scrollbar { width: 5px; height: 5px; }
        ::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            background: var(--bg); color: var(--text); font-family: var(--font-body);
            min-height: 100vh; display: flex; overflow: hidden;
            background-image: radial-gradient(at 0% 0%, rgba(245,158,11,0.08) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(16,185,129,0.06) 0px, transparent 50%),
                radial-gradient(at 50% 50%, rgba(59,130,246,0.04) 0px, transparent 60%);
            -webkit-font-smoothing: antialiased;
        }
        .app-container { display: flex; width: 100vw; height: 100vh; }

        /* SIDEBAR */
        .sidebar {
            width: 260px; background: var(--sidebar-bg); border-right: 1px solid var(--border);
            display: flex; flex-direction: column; padding: 1.5rem 1rem; z-index: 10;
            flex-shrink: 0; backdrop-filter: blur(24px); overflow-y: auto;
        }
        .brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding: 0 0.25rem; }
        .brand-icon {
            background: var(--primary-gradient); width: 38px; height: 38px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center; color: #fff;
            box-shadow: 0 4px 16px rgba(245,158,11,0.3);
        }
        .brand-icon i { width: 20px; height: 20px; }
        .brand h2 {
            font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
            background: linear-gradient(135deg, #fbbf24, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }
        .nav-label {
            font-family: var(--font-display); font-size: 0.65rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
            padding: 0 0.75rem; margin-bottom: 0.35rem; margin-top: 0.75rem;
        }
        .nav-label:first-of-type { margin-top: 0; }
        .nav-list { list-style: none; display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.5rem; }
        .nav-item {
            display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem;
            border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
            color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
            border: 1px solid transparent; position: relative;
        }
        .nav-item i { width: 18px; height: 18px; flex-shrink: 0; }
        .nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
        .nav-item.active { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: var(--primary-light); }
        .nav-item.active i { color: var(--primary); }
        .nav-badge {
            margin-left: auto; background: rgba(239,68,68,0.15); color: var(--danger);
            font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 10px;
            min-width: 18px; text-align: center;
        }
        .nav-badge.accent { background: rgba(16,185,129,0.15); color: var(--accent); }
        .nav-badge.info { background: rgba(59,130,246,0.15); color: var(--info); }
        .nav-badge.success { background: rgba(16,185,129,0.15); color: var(--accent); }
        .sidebar-stats {
            margin-top: auto; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 0.85rem; display: flex; flex-direction: column; gap: 0.35rem;
        }
        .sidebar-stats-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
        .sidebar-stats-value {
            font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
            background: linear-gradient(135deg, #fbbf24, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        }

        /* WORKSPACE */
        .workspace { flex-grow: 1; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
        .workspace-header {
            padding: 1.25rem 2rem; border-bottom: 1px solid var(--border);
            display: flex; justify-content: space-between; align-items: center;
            flex-shrink: 0; background: rgba(6,11,24,0.5); backdrop-filter: blur(12px);
        }
        .header-left { display: flex; align-items: center; gap: 1.25rem; }
        .workspace-title h1 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
        .workspace-subtitle { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.1rem; }
        .month-nav {
            display: flex; align-items: center; gap: 0.4rem;
            background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 0.3rem;
        }
        .month-nav button {
            background: none; border: none; color: var(--text-muted); cursor: pointer;
            padding: 0.3rem; border-radius: var(--radius-xs); transition: var(--transition);
            display: flex; align-items: center; justify-content: center;
        }
        .month-nav button:hover { background: rgba(255,255,255,0.06); color: var(--text); }
        .month-nav button i { width: 15px; height: 15px; }
        .month-nav .month-label { font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; min-width: 130px; text-align: center; }
        .header-right { display: flex; align-items: center; gap: 0.65rem; }
        .search-box { position: relative; }
        .search-box input {
            width: 200px; padding: 0.55rem 0.75rem 0.55rem 2.1rem;
            background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body);
            font-size: 0.8rem; outline: none; transition: var(--transition);
        }
        .search-box input::placeholder { color: rgba(139,149,168,0.6); }
        .search-box input:focus { border-color: var(--primary); background: rgba(255,255,255,0.05); box-shadow: 0 0 0 3px rgba(245,158,11,0.1); width: 260px; }
        .search-box i { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); width: 14px; height: 14px; pointer-events: none; }
        .workspace-content { flex-grow: 1; padding: 1.75rem 2rem; overflow-y: auto; overflow-x: hidden; }
        .page { display: none; }
        .page.active { display: block; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        /* STATS GRID */
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
        .stat-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 1.25rem; transition: var(--transition); position: relative; overflow: hidden;
        }
        .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
        .stat-card.gold::before { background: var(--primary-gradient); }
        .stat-card.green::before { background: var(--accent-gradient); }
        .stat-card.blue::before { background: var(--info-gradient); }
        .stat-card.red::before { background: var(--danger-gradient); }
        .stat-card.purple::before { background: var(--purple-gradient); }
        .stat-card.cyan::before { background: var(--cyan-gradient); }
        .stat-card.pink::before { background: var(--pink-gradient); }
        .stat-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
        .stat-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
        .stat-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
        .stat-icon i { width: 18px; height: 18px; }
        .stat-icon.gold { background: rgba(245,158,11,0.12); color: var(--primary); }
        .stat-icon.green { background: rgba(16,185,129,0.12); color: var(--accent); }
        .stat-icon.blue { background: rgba(59,130,246,0.12); color: var(--info); }
        .stat-icon.red { background: rgba(239,68,68,0.12); color: var(--danger); }
        .stat-icon.purple { background: rgba(139,92,246,0.12); color: var(--purple); }
        .stat-icon.cyan { background: rgba(6,182,212,0.12); color: var(--cyan); }
        .stat-icon.pink { background: rgba(236,72,153,0.12); color: var(--pink); }
        .stat-value { font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; line-height: 1; margin-bottom: 0.25rem; }
        .stat-label { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }

        /* DASHBOARD ROWS */
        .dashboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
        .dashboard-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
        .goal-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
        .goal-card-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .goal-card-title i { width: 18px; height: 18px; color: var(--primary); }
        .goal-progress-area { display: flex; align-items: center; gap: 1.5rem; }
        .circular-progress { width: 110px; height: 110px; position: relative; flex-shrink: 0; }
        .circular-progress svg { transform: rotate(-90deg); width: 110px; height: 110px; }
        .circular-progress .track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 8; }
        .circular-progress .fill { fill: none; stroke: url(#goldGradient); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1s ease; }
        .circular-progress .percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
        .goal-details { display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; }
        .goal-detail-item { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .goal-detail-item:last-child { border: none; }
        .goal-detail-label { font-size: 0.8rem; color: var(--text-muted); }
        .goal-detail-value { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
        .recent-list { display: flex; flex-direction: column; gap: 0.4rem; }
        .recent-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem; background: rgba(255,255,255,0.015); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: var(--transition); }
        .recent-item:hover { background: var(--card-hover); }
        .recent-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .recent-dot.green { background: var(--accent); }
        .recent-dot.gold { background: var(--primary); }
        .recent-dot.red { background: var(--danger); }
        .recent-text { flex-grow: 1; font-size: 0.8rem; }
        .recent-date { font-size: 0.7rem; color: var(--text-muted); }

        /* MOOD */
        .mood-display { text-align: center; padding: 1rem 0; }
        .mood-emoji { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
        .mood-label { font-size: 0.85rem; color: var(--text-muted); }
        .mood-message { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin-top: 0.5rem; max-width: 250px; margin-left: auto; margin-right: auto; line-height: 1.4; }
        .mood-bar { display: flex; gap: 0.25rem; height: 24px; align-items: flex-end; margin-top: 0.5rem; }
        .mood-bar-item { flex: 1; border-radius: 3px; min-height: 4px; transition: var(--transition); }
        .mood-selector { display: flex; gap: 0.35rem; justify-content: center; flex-wrap: wrap; }
        .mood-btn {
            width: 52px; height: 52px; border-radius: var(--radius-sm); border: 2px solid var(--border);
            background: rgba(255,255,255,0.02); cursor: pointer; font-size: 1.5rem;
            display: flex; align-items: center; justify-content: center; transition: var(--transition);
        }
        .mood-btn:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); transform: scale(1.1); }
        .mood-btn.selected { border-color: var(--primary); background: rgba(245,158,11,0.1); transform: scale(1.15); box-shadow: 0 0 12px rgba(245,158,11,0.2); }
        .mood-btn-label { font-size: 0.6rem; color: var(--text-muted); text-align: center; margin-top: 0.15rem; }

        /* TABLES */
        .page-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
        .page-toolbar h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
        .page-toolbar h2 i { width: 20px; height: 20px; color: var(--primary); }
        .btn-primary {
            background: var(--primary-gradient); color: #fff; border: none; padding: 0.55rem 1.1rem;
            border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-display);
            font-weight: 600; font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem;
            transition: var(--transition); box-shadow: 0 4px 12px rgba(245,158,11,0.25);
        }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,0.35); }
        .btn-primary i { width: 15px; height: 15px; }
        .data-table-wrapper { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table thead th {
            padding: 0.85rem 1rem; text-align: left; font-family: var(--font-display); font-size: 0.7rem;
            font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
            border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.15);
        }
        .data-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.03); transition: var(--transition); }
        .data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
        .data-table tbody tr:last-child { border: none; }
        .data-table td { padding: 0.85rem 1rem; font-size: 0.85rem; }
        .data-table .amount { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
        .table-footer { display: flex; justify-content: flex-end; align-items: center; padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); background: rgba(0,0,0,0.1); gap: 0.5rem; }
        .table-total { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
        .table-total-label { color: var(--text-muted); font-size: 0.8rem; }

        /* BADGES */
        .badge { padding: 0.25rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
        .badge-paid { background: rgba(16,185,129,0.12); color: #34d399; }
        .badge-pending { background: rgba(245,158,11,0.12); color: #fbbf24; }
        .badge-partial { background: rgba(59,130,246,0.12); color: #60a5fa; }
        .badge-overdue { background: rgba(239,68,68,0.15); color: #f87171; }
        .badge-low { background: rgba(107,114,128,0.15); color: #9ca3af; }
        .badge-medium { background: rgba(59,130,246,0.12); color: #60a5fa; }
        .badge-high { background: rgba(245,158,11,0.12); color: #fbbf24; }
        .badge-urgent { background: rgba(239,68,68,0.15); color: #f87171; }
        .badge-todo { background: rgba(107,114,128,0.15); color: #9ca3af; }
        .badge-in-progress { background: rgba(59,130,246,0.12); color: #60a5fa; }
        .badge-done { background: rgba(16,185,129,0.12); color: #34d399; }
        .badge-fixed { background: rgba(139,92,246,0.12); color: #a78bfa; }
        .badge-variable { background: rgba(6,182,212,0.12); color: #22d3ee; }
        .action-btns { display: flex; gap: 0.3rem; }
        .btn-icon {
            background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.3rem;
            border-radius: var(--radius-xs); transition: var(--transition); display: flex; align-items: center; justify-content: center;
        }
        .btn-icon i { width: 15px; height: 15px; }
        .btn-icon:hover { background: rgba(255,255,255,0.06); color: var(--text); }
        .btn-icon.edit:hover { color: var(--primary); background: rgba(245,158,11,0.1); }
        .btn-icon.delete:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

        /* KANBAN */
        .kanban-board { display: grid; grid-template-columns: repeat(4, minmax(290px, 1fr)); gap: 1rem; height: calc(100vh - 200px); min-height: 400px; overflow-x: auto; padding-bottom: 0.5rem; }
        .kanban-column { background: rgba(255,255,255,0.015); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
        .kanban-column-header { padding: 1rem 1rem 0.6rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .kanban-column-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
        .kanban-count { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.06); font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
        .kanban-column-body { flex-grow: 1; padding: 0.4rem 0.85rem 0.85rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100px; transition: background 0.2s; }
        .kanban-column-body.drag-over { background: rgba(245,158,11,0.03); }
        .task-card { cursor: grab; }
        .task-card:hover { border-color: rgba(255,255,255,0.12); background: var(--card-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
        .task-card.dragging { opacity: 0.4; border: 1px dashed var(--primary); cursor: grabbing; }
        .task-card-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; line-height: 1.3; }
        .task-card-customer { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.3rem; }
        .task-card-customer i { width: 12px; height: 12px; }
        .task-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed rgba(255, 255, 255, 0.05); flex-wrap: wrap; gap: 0.4rem; }
        .task-card-date { font-size: 0.7rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
        .task-card-date i { width: 11px; height: 11px; }
        .task-card-date.overdue { color: var(--danger); font-weight: 600; }
        .task-card-date.soon { color: var(--warning); font-weight: 600; }
        .task-card-actions { display: flex; gap: 0.1rem; opacity: 0.4; transition: var(--transition); }
        .task-card:hover .task-card-actions { opacity: 1; }

        /* TASK LIST CARDS */
        .task-list-section { margin-bottom: 1.5rem; }
        .task-list-section-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
        .task-list-section-title i { width: 16px; height: 16px; }
        .task-list-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.7rem; }
        .task-list-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; transition: var(--transition); display: flex; flex-direction: column; gap: 0.5rem; }
        .task-list-card:hover { border-color: rgba(255,255,255,0.1); background: var(--card-hover); }
        .task-list-card.overdue-card { border-color: rgba(239,68,68,0.2); box-shadow: inset 3px 0 0 0 var(--danger); }
        .task-list-card.soon-card { border-color: rgba(249,115,22,0.2); box-shadow: inset 3px 0 0 0 var(--warning); }
        .task-list-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
        .task-list-card-title { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
        .task-list-card-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .task-list-card-bottom { display: flex; justify-content: space-between; align-items: center; }

        /* GOALS PAGE */
        .goals-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
        .goal-set-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
        .goal-input-group { display: flex; align-items: center; gap: 0.65rem; width: 100%; }
        .goal-input-group input {
            flex-grow: 1; padding: 0.75rem 0.85rem; background: rgba(255,255,255,0.03);
            border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
            font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
            outline: none; text-align: center; transition: var(--transition);
        }
        .goal-input-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,158,11,0.1); }
        .goal-input-group input::placeholder { color: rgba(139,149,168,0.5); font-weight: 500; }
        .goal-big-progress { width: 160px; height: 160px; position: relative; }
        .goal-big-progress svg { transform: rotate(-90deg); width: 160px; height: 160px; }
        .goal-big-progress .track { fill: none; stroke: rgba(255,255,255,0.04); stroke-width: 10; }
        .goal-big-progress .fill { fill: none; stroke: url(#goldGradientBig); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 471; stroke-dashoffset: 471; transition: stroke-dashoffset 1.2s ease; }
        .goal-big-progress .center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
        .goal-big-progress .pct { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; display: block; background: linear-gradient(135deg, #fbbf24, #10b981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        .goal-big-progress .pct-label { font-size: 0.75rem; color: var(--text-muted); }
        .goal-stats-list { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; }
        .goal-stat-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .goal-stat-row:last-child { border: none; }
        .goal-stat-label { color: var(--text-muted); font-size: 0.8rem; }
        .goal-stat-value { font-family: var(--font-display); font-weight: 600; }
        .goal-stat-value.positive { color: var(--accent); }
        .goal-stat-value.negative { color: var(--danger); }

        /* NOTE CARDS */
        .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; }
        .note-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.15rem; transition: var(--transition); display: flex; flex-direction: column; gap: 0.5rem; }
        .note-card:hover { border-color: rgba(255,255,255,0.1); background: var(--card-hover); }
        .note-card-title { font-weight: 600; font-size: 0.95rem; }
        .note-card-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .note-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
        .note-tag { background: rgba(139,92,246,0.1); color: #a78bfa; padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.65rem; font-weight: 600; }

        /* JOURNAL CARDS */
        .journal-cards { display: flex; flex-direction: column; gap: 0.85rem; }
        .journal-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; transition: var(--transition); }
        .journal-card:hover { border-color: rgba(255,255,255,0.1); }
        .journal-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; }
        .journal-card-date { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
        .journal-card-mood { font-size: 1.5rem; }
        .journal-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
        .journal-field { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); border-radius: var(--radius-xs); padding: 0.65rem; }
        .journal-field-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; margin-bottom: 0.25rem; }
        .journal-field-value { font-size: 0.8rem; line-height: 1.4; }
        .journal-field.full-width { grid-column: 1 / -1; }

        /* TASK TIMERS */
        .task-timer-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.2rem 0.5rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border);
            border-radius: var(--radius-xs);
            font-size: 0.7rem;
            color: var(--text-muted);
        }
        .task-timer-badge.running {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.2);
            color: var(--accent);
        }
        .task-timer-badge i { width: 12px; height: 12px; }
        .task-timer-badge.running i.pulse {
            animation: timerPulse 1.5s infinite;
            color: var(--accent);
        }
        @keyframes timerPulse {
            0% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 0.6; }
        }

        /* DEBT CARDS */
        .debt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.85rem; }
        .debt-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.15rem; transition: var(--transition); }
        .debt-card:hover { border-color: rgba(255,255,255,0.1); }
        .debt-progress { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin: 0.5rem 0; overflow: hidden; }
        .debt-progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

        /* SAVINGS CARDS */
        .savings-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.85rem; }
        .saving-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.15rem; transition: var(--transition); }
        .saving-card:hover { border-color: rgba(255,255,255,0.1); }

        /* SETTINGS */
        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
        .settings-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
        .settings-card h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
        .settings-card h3 i { width: 18px; height: 18px; color: var(--primary); }
        .settings-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .settings-row:last-child { border: none; }
        .settings-row label { font-size: 0.85rem; color: var(--text-muted); }
        .settings-row input { width: 140px; padding: 0.5rem 0.65rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; outline: none; text-align: right; transition: var(--transition); }
        .settings-row input:focus { border-color: var(--primary); }

        /* EMPTY STATE */
        .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.5rem 1.5rem; text-align: center; color: var(--text-muted); gap: 0.75rem; }
        .empty-state i { width: 48px; height: 48px; stroke-width: 1.2; opacity: 0.4; }
        .empty-state h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); }
        .empty-state p { max-width: 350px; font-size: 0.85rem; line-height: 1.5; }

        /* MODAL */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(4,7,15,0.85); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: var(--transition); backdrop-filter: blur(8px); }
        .modal-overlay.open { opacity: 1; pointer-events: all; }
        .modal-content { background: #0c1225; border: 1px solid var(--border-active); border-radius: var(--radius); padding: 1.75rem; width: 520px; max-width: 92%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.6); transform: scale(0.92) translateY(10px); transition: var(--transition); }
        .modal-overlay.open .modal-content { transform: scale(1) translateY(0); }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
        .modal-header h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
        .modal-header h3 i { width: 18px; height: 18px; color: var(--primary); }
        .btn-close-modal { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0.3rem; border-radius: var(--radius-xs); transition: var(--transition); }
        .btn-close-modal:hover { background: rgba(255,255,255,0.06); color: var(--text); }
        .btn-close-modal i { width: 18px; height: 18px; }
        .modal-body { display: flex; flex-direction: column; gap: 0.85rem; }
        .form-group { display: flex; flex-direction: column; gap: 0.3rem; }
        .form-group label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
        .form-group input, .form-group select, .form-group textarea {
            padding: 0.65rem 0.85rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 0.85rem; outline: none; transition: var(--transition);
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); background: rgba(255,255,255,0.05); box-shadow: 0 0 0 3px rgba(245,158,11,0.08); }
        .form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b95a8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; padding-right: 2.25rem; }
        .form-group select option { background: #0c1225; color: var(--text); }
        .form-group textarea { resize: vertical; min-height: 70px; font-size: 0.8rem; line-height: 1.5; }
        .speech-dictation-label-row {
            display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
            flex-wrap: wrap; margin-bottom: 0.35rem;
        }
        .speech-dictation-label-row > label { margin-bottom: 0 !important; }
        .speech-dictation-btn {
            display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.28rem 0.6rem; border-radius: var(--radius-xs);
            border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.08);
            color: var(--primary-light); font-size: 0.68rem; font-weight: 600;
            cursor: pointer; transition: var(--transition); white-space: nowrap;
            font-family: var(--font-body);
        }
        .speech-dictation-btn:hover { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.5); }
        .speech-dictation-btn.listening {
            border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.12); color: #fca5a5;
            animation: speech-pulse 1.2s ease-in-out infinite;
        }
        @keyframes speech-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
        .speech-dictation-interim {
            font-size: 0.68rem; color: var(--primary-light); font-style: italic;
            margin: 0.25rem 0 0.35rem; min-height: 1rem; line-height: 1.4;
        }
        .tcl-field .speech-dictation-label-row label {
            font-size: 0.58rem; color: var(--text-muted); font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.04em;
        }
        .tcl-meta-card .speech-dictation-label-row label {
            font-size: 0.68rem; font-weight: 600; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.04em;
        }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
        .modal-actions { display: flex; justify-content: flex-end; gap: 0.65rem; margin-top: 0.35rem; }
        .btn-cancel { background: none; border: 1px solid var(--border); color: var(--text); padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; transition: var(--transition); }
        .btn-cancel:hover { background: rgba(255,255,255,0.04); }
        .btn-save { background: var(--primary-gradient); color: #fff; border: none; padding: 0.6rem 1.3rem; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; transition: var(--transition); box-shadow: 0 4px 12px rgba(245,158,11,0.2); }
        .btn-save:hover { box-shadow: 0 6px 16px rgba(245,158,11,0.35); transform: translateY(-1px); }
        .btn-danger { background: var(--danger-gradient); box-shadow: 0 4px 12px rgba(239,68,68,0.2); }
        .btn-danger:hover { box-shadow: 0 6px 16px rgba(239,68,68,0.35); }
        .delete-confirm-text { text-align: center; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); padding: 0.75rem 0; }
        .delete-confirm-text strong { color: var(--text); }

        /* TOAST */
        .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: #0c1225; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; z-index: 200; transform: translateY(20px); opacity: 0; transition: var(--transition); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
        .toast.show { transform: translateY(0); opacity: 1; }
        .toast i { width: 18px; height: 18px; flex-shrink: 0; }
        .toast.success { border-color: rgba(16,185,129,0.3); }
        .toast.success i { color: var(--accent); }
        .toast.error { border-color: rgba(239,68,68,0.3); }
        .toast.error i { color: var(--danger); }

        /* RESPONSIVE */
        @media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .kanban-board { grid-template-columns: 1fr; height: auto; } .goals-layout, .dashboard-row, .settings-grid { grid-template-columns: 1fr; } .dashboard-row-3 { grid-template-columns: 1fr; } }
        @media (max-width: 768px) { .sidebar { display: none; } .workspace-header { padding: 0.85rem 1.25rem; flex-wrap: wrap; gap: 0.5rem; } .workspace-content { padding: 1.25rem; } .stats-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

        /* =============================================
           PROJECTS MODULE CSS
           ============================================= */
        .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
        .project-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 1.5rem; transition: var(--transition); display: flex; flex-direction: column; gap: 0.85rem; position: relative;
        }
        .project-card:hover { border-color: rgba(255, 255, 255, 0.12); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
        .project-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
        .project-card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--text); }
        .project-card-client { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; }
        .project-card-client i { width: 13px; height: 13px; }
        .project-card-progress { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.25rem 0; }
        .project-progress-bar { height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
        .project-progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; background: var(--primary-gradient); }
        .project-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; font-size: 0.75rem; color: var(--text-muted); }
        .project-card-finance {
            background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: var(--radius-sm);
            padding: 0.65rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem;
        }
        .project-card-actions { display: flex; justify-content: flex-end; gap: 0.35rem; margin-top: auto; }
        
        /* PROJECT DETAIL CSS */
        .project-detail-layout { display: flex; flex-direction: column; gap: 1.25rem; }
        .project-tabs { display: flex; border-bottom: 1px solid var(--border); gap: 0.5rem; margin-bottom: 0.5rem; overflow-x: auto; }
        .project-tab-btn {
            background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted);
            padding: 0.75rem 1.25rem; cursor: pointer; font-family: var(--font-display); font-weight: 600;
            font-size: 0.9rem; transition: var(--transition); white-space: nowrap;
        }
        .project-tab-btn:hover { color: var(--text); }
        .project-tab-btn.active { color: var(--primary-light); border-bottom-color: var(--primary); }
        .project-tab-content { display: none; }
        .project-tab-content.active { display: block; animation: fadeIn 0.25s ease; }
        
        .project-briefing-view { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; }
        .project-info-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
        .project-info-section { display: flex; flex-direction: column; gap: 0.35rem; }
        .project-info-label { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
        .project-info-value { font-size: 0.85rem; line-height: 1.5; color: var(--text); white-space: pre-line; }
        
        /* TASK PLAN CARD CSS */
        .project-day-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; max-height: calc(100vh - 300px); overflow-y: auto; padding-right: 0.5rem; padding-bottom: 1rem; }
        .project-day-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; transition: var(--transition);
            box-shadow: var(--shadow-sm); position: relative;
        }
        .project-day-card:hover { border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow); }
        .project-day-card.done { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.02); }
        .project-day-card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
        .project-day-card-title-group { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.85rem; color: var(--text); }
        .project-day-checkbox {
            width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border);
            display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); flex-shrink: 0;
        }
        .project-day-checkbox.checked { border-color: var(--accent); background: var(--accent); color: #fff; }
        .project-day-checkbox i { width: 12px; height: 12px; }
        .project-day-card-body { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; flex-grow: 1; display: flex; flex-direction: column; gap: 0.35rem; }
        .project-day-card-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
        .project-day-card-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.25rem; background: rgba(0,0,0,0.12); padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); margin-top: 0.35rem; }
        .project-day-card-meta span { display: flex; align-items: center; gap: 0.35rem; }
        .project-day-card-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.25rem; }
        
        /* TIMER BUTTONS */
        .project-timer-widget { display: flex; align-items: center; gap: 0.3rem; background: rgba(0,0,0,0.2); padding: 0.2rem 0.45rem; border-radius: var(--radius-xs); border: 1px solid var(--border); }
        .project-timer-display { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; color: var(--text); min-width: 58px; text-align: center; }
        .project-timer-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; padding: 0.2rem; border-radius: 4px; transition: var(--transition); }
        .project-timer-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
        .project-timer-btn.start:hover { color: var(--accent); background: rgba(16,185,129,0.15); }
        .project-timer-btn.stop:hover { color: var(--danger); background: rgba(239,68,68,0.15); }
        .project-timer-btn.reset:hover { color: var(--warning); background: rgba(249,115,22,0.15); }
        .project-timer-btn i { width: 12px; height: 12px; }
        .project-timer-widget.active { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.08); }
        .project-timer-widget.active .project-timer-display { color: var(--accent); }
        .project-timer-widget.active i.pulse { animation: timerPulse 1.5s infinite; color: var(--accent); }

        /* PROJECT TASK ACCORDION (12 Aylık Günlük Görevler) */
        .project-task-accordion {
            display: flex; flex-direction: column; gap: 0.75rem;
            padding-bottom: 2rem; overflow: visible; max-height: none;
        }
        .project-task-section {
            border: 1px solid var(--border); border-radius: var(--radius);
            background: rgba(255,255,255,0.025);
            transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
            overflow: visible;
        }
        .project-task-section.open {
            border-color: rgba(245, 158, 11, 0.45);
            background: linear-gradient(180deg, rgba(88, 28, 135, 0.1) 0%, rgba(12, 18, 37, 0.85) 100%);
            box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
        }
        .project-task-section-header {
            display: flex; justify-content: space-between; align-items: center; gap: 1rem;
            min-height: 72px; padding: 1rem 1.35rem;
            cursor: pointer; user-select: none; transition: background 0.2s ease;
            width: 100%; box-sizing: border-box;
        }
        .project-task-section-header:hover { background: rgba(255,255,255,0.04); }
        .project-task-section.open .project-task-section-header {
            border-bottom: 1px solid rgba(245, 158, 11, 0.2);
            background: rgba(255,255,255,0.03);
        }
        .project-task-section-header-main { flex: 1; min-width: 0; }
        .project-task-section-title {
            font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
            color: var(--text); line-height: 1.25;
        }
        .project-task-section-meta {
            font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.35;
        }
        .project-task-section-chevron {
            width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0;
            transition: transform 0.28s ease, color 0.28s ease;
        }
        .project-task-section.open .project-task-section-chevron {
            transform: rotate(180deg); color: var(--primary-light);
        }
        .project-task-section-body {
            display: none !important;
            max-height: none; overflow: visible; height: 0; padding: 0; margin: 0; border: none;
        }
        .project-task-section.open .project-task-section-body {
            display: block !important;
            height: auto; padding: 0;
            animation: accordionExpand 0.28s ease;
        }
        @keyframes accordionExpand {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .project-month-task-list {
            display: flex; flex-direction: column; gap: 0.55rem;
            padding: 0.85rem 0.65rem 1.15rem;
        }
        .daily-task-row {
            display: grid;
            grid-template-columns: 44px 88px minmax(0, 1fr) minmax(160px, 210px) minmax(120px, 140px);
            gap: 1rem; align-items: start;
            min-height: 92px; padding: 1rem;
            background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius-sm); transition: var(--transition);
        }
        .daily-task-row:hover { border-color: rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.24); }
        .daily-task-row.is-done { opacity: 0.88; border-color: rgba(16, 185, 129, 0.2); }
        .daily-task-col-check { display: flex; align-items: flex-start; justify-content: center; padding-top: 0.15rem; }
        .project-day-checkbox.large { width: 22px; height: 22px; border-radius: 5px; }
        .project-day-checkbox.large i { width: 14px; height: 14px; }
        .daily-task-col-day { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.1rem; }
        .daily-task-day-label {
            font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: var(--primary-light);
        }
        .daily-task-day-sub { font-size: 0.68rem; color: var(--text-muted); }
        .daily-task-col-main { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
        .daily-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
        .daily-task-title { font-weight: 600; font-size: 0.9rem; color: var(--text); line-height: 1.35; }
        .daily-task-row.is-done .daily-task-title { text-decoration: line-through; color: var(--text-muted); }
        .daily-task-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; white-space: pre-line; }
        .daily-task-note-preview {
            font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: flex-start; gap: 0.3rem;
            background: rgba(255,255,255,0.03); padding: 0.35rem 0.5rem; border-radius: var(--radius-xs);
        }
        .daily-task-note-preview i { width: 12px; height: 12px; flex-shrink: 0; margin-top: 0.1rem; }
        .daily-task-subitems { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
        .subitem-pill {
            font-size: 0.62rem; font-weight: 600; padding: 0.15rem 0.4rem; border-radius: 999px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-muted);
        }
        .subitem-pill.subitem-done { border-color: rgba(16,185,129,0.3); color: var(--accent); }
        .subitem-pill.subitem-error { border-color: rgba(239,68,68,0.3); color: var(--danger); }
        .subitem-pill.subitem-revision { border-color: rgba(249,115,22,0.3); color: var(--warning); }
        .daily-task-report {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem;
            background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15);
            padding: 0.35rem 0.5rem; border-radius: var(--radius-xs);
        }
        .daily-task-report span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .daily-task-report-btn {
            background: none; border: none; color: var(--info); font-size: 0.68rem; font-weight: 600;
            cursor: pointer; padding: 0.1rem 0.25rem; flex-shrink: 0;
        }
        .daily-task-status-badge {
            font-size: 0.62rem; font-weight: 700; padding: 0.2rem 0.45rem; border-radius: 999px;
            text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
        }
        .daily-task-status-badge.status-planned { background: rgba(139,149,168,0.15); color: var(--text-muted); }
        .daily-task-status-badge.status-working { background: rgba(59,130,246,0.15); color: var(--info); }
        .daily-task-status-badge.status-testing { background: rgba(139,92,246,0.15); color: var(--purple); }
        .daily-task-status-badge.status-done { background: rgba(16,185,129,0.15); color: var(--accent); }
        .daily-task-status-badge.status-revision { background: rgba(249,115,22,0.15); color: var(--warning); }
        .daily-task-status-badge.status-error { background: rgba(239,68,68,0.15); color: var(--danger); }
        .daily-task-col-meta {
            display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.72rem; color: var(--text-muted);
            padding-top: 0.1rem;
        }
        .daily-task-col-meta span { display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1.35; }
        .daily-task-col-meta i { width: 12px; height: 12px; flex-shrink: 0; }
        .daily-task-col-actions {
            display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; padding-top: 0.05rem;
        }
        .daily-task-action-row { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
        .daily-task-col-actions .project-timer-widget { transform: none; width: 100%; justify-content: center; }
        .daily-task-image-badge {
            display: inline-flex; align-items: center; gap: 0.2rem;
            font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.45rem; border-radius: 999px;
            background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.28); color: var(--purple);
            flex-shrink: 0; white-space: nowrap;
        }
        .daily-progress-upload-zone {
            border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 1.25rem;
            text-align: center; cursor: pointer; background: rgba(255,255,255,0.015);
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .daily-progress-upload-zone:hover, .daily-progress-upload-zone.drag-over {
            border-color: var(--primary); background: rgba(139, 92, 246, 0.06);
        }
        .progress-image-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
            gap: 0.65rem; margin-top: 0.65rem;
        }
        .progress-image-card {
            background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: var(--radius-xs);
            overflow: hidden; display: flex; flex-direction: column;
        }
        .progress-image-card-thumb {
            width: 100%; height: 96px; object-fit: cover; cursor: pointer; background: rgba(0,0,0,0.3);
        }
        .progress-image-card-body { padding: 0.45rem 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
        .progress-image-card-name {
            font-size: 0.68rem; font-weight: 600; color: var(--text);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .progress-image-card-meta { font-size: 0.62rem; color: var(--text-muted); }
        .progress-image-caption-input {
            width: 100%; font-size: 0.65rem; padding: 0.25rem 0.35rem;
            background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 3px;
            color: var(--text); outline: none;
        }
        .progress-image-card-actions {
            display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.15rem;
        }
        .progress-image-card-actions button {
            font-size: 0.58rem; padding: 0.15rem 0.3rem; border-radius: 3px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.04);
            color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.15rem;
        }
        .progress-image-card-actions button:hover { border-color: var(--primary-light); color: var(--text); }
        .progress-image-card-actions button.delete:hover { border-color: var(--danger); color: var(--danger); }
        #modal-project-task .modal-content { max-width: 720px; width: 94%; }
        #modal-project-task .modal-body { max-height: 72vh; overflow-y: auto; }
        @media (max-width: 1100px) {
            .daily-task-row {
                grid-template-columns: 44px 1fr;
                grid-template-areas:
                    "check day"
                    "main main"
                    "meta actions";
                gap: 0.65rem 1rem;
            }
            .daily-task-col-check { grid-area: check; }
            .daily-task-col-day { grid-area: day; }
            .daily-task-col-main { grid-area: main; }
            .daily-task-col-meta { grid-area: meta; flex-direction: row; flex-wrap: wrap; }
            .daily-task-col-actions { grid-area: actions; flex-direction: row; align-items: center; }
        }

        /* ATTACHMENT / FILE UPLOAD CSS */
        .upload-zone {
            border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.75rem; text-align: center;
            background: rgba(255,255,255,0.01); cursor: pointer; transition: var(--transition);
            display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-bottom: 1.25rem;
        }
        .upload-zone:hover { border-color: var(--accent); background: rgba(16,185,129,0.02); }
        .upload-zone i { font-size: 2.25rem; color: var(--text-muted); }
        .upload-zone h4 { font-weight: 700; font-size: 0.9rem; color: var(--text); margin: 0; }
        .upload-zone p { font-size: 0.7rem; color: var(--text-muted); margin: 0; }
        .attachment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
        .attachment-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; transition: var(--transition);
            box-shadow: var(--shadow-sm); position: relative;
        }
        .attachment-card:hover { border-color: var(--accent); }
        .attachment-preview {
            position: relative; height: 90px; border-radius: var(--radius-sm); overflow: hidden;
            background: rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;
            border: 1px solid var(--border);
        }
        .attachment-preview img { width: 100%; height: 100%; object-fit: cover; }
        .attachment-preview i { font-size: 2rem; color: var(--text-muted); }
        .attachment-info { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.75rem; }
        .attachment-name { font-weight: 600; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--text); }
        .attachment-size { color: var(--text-muted); font-size: 0.65rem; }
        .attachment-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.15rem; }
        .attachment-link-btn { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; color: var(--accent); font-weight: 600; text-decoration: none; }
        .attachment-link-btn:hover { text-decoration: underline; }

        /* ACCORDION STYLES */
        .accordion-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 0.65rem;
            overflow: hidden;
            transition: var(--transition);
        }
        .accordion-card:hover {
            border-color: rgba(255, 255, 255, 0.12);
        }
        .accordion-header {
            padding: 0.85rem 1.25rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            user-select: none;
            transition: background 0.2s;
        }
        .accordion-header:hover {
            background: rgba(255, 255, 255, 0.02);
        }
        .accordion-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(0, 0, 0, 0.12);
        }
        
        .pulse {
            animation: timerPulse 1.5s infinite;
        }

        /* =============================================
           FAZ 10 - GÖRSEL VE TESLİMAT TASARIM STİLLERİ
           ============================================= */
        .task-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 0.85rem;
            cursor: grab;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            height: auto;
            min-height: auto;
            overflow: visible;
        }
        .task-card-main-content {
            display: flex;
            gap: 0.75rem;
            justify-content: space-between;
            align-items: flex-start;
            width: 100%;
        }
        .task-card-text-area {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }
        .task-card-image-area {
            width: 120px;
            height: 90px;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: rgba(0, 0, 0, 0.25);
            position: relative;
            cursor: pointer;
        }
        .task-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .task-card:hover .task-card-img {
            transform: scale(1.05);
        }
        .task-card-no-img {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 0.65rem;
            color: var(--text-muted);
            background: rgba(255, 255, 255, 0.015);
        }
        .task-card-meta-row {
            display: flex;
            gap: 0.35rem;
            flex-wrap: wrap;
            align-items: center;
        }
        .delivery-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.15rem 0.45rem;
            border-radius: 20px;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        .delivery-badge.pending { background: rgba(245, 158, 11, 0.12); color: var(--primary); }
        .delivery-badge.preparing { background: rgba(59, 130, 246, 0.12); color: var(--info); }
        .delivery-badge.delivered { background: rgba(16, 185, 129, 0.12); color: var(--accent); }
        .delivery-badge.partial { background: rgba(139, 92, 246, 0.12); color: var(--purple); }
        .delivery-badge.revision { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
        .delivery-badge.cancelled { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); }
        
        .task-detail-layout {
            display: flex;
            gap: 1.5rem;
            width: 100%;
            align-items: flex-start;
        }
        @media(max-width: 992px) {
            .task-detail-layout { flex-direction: column; }
            .task-detail-sidebar { width: 100% !important; }
        }
        .task-detail-main {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }
        .task-detail-sidebar {
            width: 360px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .delivery-history-item {
            border-left: 2px solid var(--border);
            padding-left: 0.75rem;
            position: relative;
            margin-bottom: 0.75rem;
            font-size: 0.75rem;
        }
        .delivery-history-item::before {
            content: '';
            position: absolute;
            left: -5px;
            top: 2px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--text-muted);
        }
        .delivery-history-item.active::before {
            background: var(--primary);
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
        }
        
        .zoom-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .zoom-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }
        .zoom-overlay img {
            max-width: 90%;
            max-height: 90%;
            border-radius: var(--radius-sm);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        .zoom-overlay.open img {
            transform: scale(1);
        }
        .zoom-close-btn {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #fff;
            width: 40px; height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        .zoom-close-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .lightbox-nav {
            position: absolute; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,0.12); border: 1px solid rgba(245,158,11,0.35);
            color: #fff; width: 44px; height: 44px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: var(--transition); z-index: 2;
        }
        .lightbox-nav:hover { background: rgba(245,158,11,0.25); border-color: var(--primary); }
        .lightbox-nav.prev { left: 1rem; }
        .lightbox-nav.next { right: 1rem; }
        .lightbox-nav.hidden { display: none; }
        .lightbox-counter {
            position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%);
            color: rgba(255,255,255,0.85); font-size: 0.78rem; font-weight: 600;
            background: rgba(0,0,0,0.45); padding: 0.3rem 0.75rem; border-radius: 999px;
            border: 1px solid rgba(245,158,11,0.25);
        }
        .lightbox-caption {
            position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
            max-width: min(90%, 520px); text-align: center; color: rgba(255,255,255,0.9);
            font-size: 0.78rem; background: rgba(0,0,0,0.55); padding: 0.45rem 0.85rem;
            border-radius: var(--radius-xs); border: 1px solid rgba(255,255,255,0.08);
        }
        .lightbox-caption:empty { display: none; }
        @media (max-width: 640px) {
            .lightbox-nav { width: 36px; height: 36px; }
            .lightbox-nav.prev { left: 0.5rem; }
            .lightbox-nav.next { right: 0.5rem; }
            .zoom-overlay img { max-width: 96%; max-height: 78vh; }
        }

        /* Task rich text & collapsible */
        .task-rich-text {
            font-size: 0.78rem; color: rgba(226, 232, 240, 0.92); line-height: 1.55;
        }
        .task-rich-text ul, .task-rich-text ol {
            margin: 0.25rem 0 0.35rem 1.1rem; padding: 0;
        }
        .task-rich-text li { margin: 0.2rem 0; }
        .task-rich-text .task-checklist {
            list-style: none; margin-left: 0; padding: 0;
        }
        .task-rich-text .task-checklist li {
            display: flex; align-items: flex-start; gap: 0.35rem;
        }
        .task-rich-text .task-checklist .check-box {
            width: 14px; height: 14px; border: 1px solid rgba(245,158,11,0.45);
            border-radius: 3px; flex-shrink: 0; margin-top: 0.15rem;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 0.6rem; color: var(--accent);
        }
        .task-rich-text .task-checklist li.done { color: var(--text-muted); text-decoration: line-through; }
        .task-collapsible.collapsed .task-rich-text {
            max-height: 4.8em; overflow: hidden;
            mask-image: linear-gradient(180deg, #000 55%, transparent);
            -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
        }
        .task-expand-btn {
            background: none; border: none; color: var(--primary-light);
            font-size: 0.68rem; font-weight: 600; cursor: pointer; padding: 0.15rem 0;
            margin-top: 0.15rem;
        }
        .task-expand-btn:hover { color: var(--primary); text-decoration: underline; }
        .daily-task-media-row {
            display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem;
        }
        .daily-task-thumb {
            width: 42px; height: 42px; object-fit: cover; border-radius: 4px;
            border: 1px solid rgba(245,158,11,0.25); cursor: pointer;
            transition: transform 0.15s ease, border-color 0.15s ease;
        }
        .daily-task-thumb:hover { transform: scale(1.05); border-color: var(--primary); }
        .daily-task-doc-chip {
            display: inline-flex; align-items: center; gap: 0.25rem;
            font-size: 0.62rem; font-weight: 600; padding: 0.2rem 0.45rem;
            border-radius: 999px; background: rgba(239,68,68,0.1);
            border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; cursor: pointer;
        }
        .daily-task-doc-chip:hover { background: rgba(239,68,68,0.18); }
        .daily-task-extra-notes {
            margin-top: 0.35rem; display: flex; flex-direction: column; gap: 0.3rem;
        }
        .daily-task-extra-note-item {
            font-size: 0.7rem; background: rgba(245,158,11,0.06);
            border: 1px solid rgba(245,158,11,0.15); border-radius: var(--radius-xs);
            padding: 0.35rem 0.5rem; line-height: 1.4;
        }
        .daily-task-extra-note-item time {
            display: block; font-size: 0.6rem; color: var(--text-muted); margin-bottom: 0.15rem;
        }
        .extra-notes-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; max-height: 160px; overflow-y: auto; }
        .extra-note-item {
            background: rgba(0,0,0,0.18); border: 1px solid var(--border);
            border-radius: var(--radius-xs); padding: 0.45rem 0.55rem; font-size: 0.75rem;
        }
        .extra-note-item time { font-size: 0.65rem; color: var(--text-muted); display: block; margin-bottom: 0.2rem; }
        .progress-doc-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
        .progress-doc-item {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            background: rgba(0,0,0,0.18); border: 1px solid var(--border);
            border-radius: var(--radius-xs); padding: 0.45rem 0.55rem;
        }
        .note-image-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
            gap: 0.45rem; margin-top: 0.45rem;
        }
        .note-image-thumb-wrap {
            position: relative; aspect-ratio: 1; border-radius: var(--radius-xs);
            overflow: hidden; border: 1px solid rgba(245,158,11,0.2); cursor: pointer;
        }
        .note-image-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
        .image-thumb-delete-btn,
        .note-image-delete-btn {
            position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
            border: none; border-radius: 50%; background: rgba(239,68,68,0.88); color: #fff;
            display: flex; align-items: center; justify-content: center; cursor: pointer;
            opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, transform 0.12s ease;
            padding: 0; z-index: 5; font-size: 14px; font-weight: 700; line-height: 1;
        }
        .image-thumb-delete-btn:hover,
        .note-image-delete-btn:hover { background: #ef4444; opacity: 1 !important; transform: scale(1.06); }
        .note-image-thumb-wrap:hover .image-thumb-delete-btn,
        .note-image-thumb-wrap:hover .note-image-delete-btn,
        .tcl-compare-thumb-wrap:hover .image-thumb-delete-btn,
        .tcl-extra-thumb:hover .image-thumb-delete-btn,
        .progress-image-thumb-wrap:hover .image-thumb-delete-btn,
        .attachment-preview.has-image-thumb:hover .image-thumb-delete-btn { opacity: 1; }
        .progress-image-thumb-wrap {
            position: relative; width: 100%; flex-shrink: 0;
        }
        .progress-image-thumb-wrap .progress-image-card-thumb { display: block; }
        .pdf-viewer-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 10001;
            display: none; flex-direction: column;
        }
        .pdf-viewer-overlay.open { display: flex; }
        .pdf-viewer-toolbar {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.65rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .pdf-viewer-frame { flex: 1; width: 100%; border: none; background: #1a1a1a; }

        /* Cost / USD-TL cards */
        .cost-type-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
        .cost-type-tab {
            font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--text-muted);
            cursor: pointer; transition: var(--transition);
        }
        .cost-type-tab.active {
            border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.12); color: var(--primary-light);
        }
        .cost-linked-row {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; align-items: end;
        }
        .cost-linked-row .cost-link-icon {
            position: relative;
        }
        #project-task-ai-panel {
            border: 1px solid rgba(139,92,246,0.25); background: rgba(139,92,246,0.05);
            border-radius: var(--radius-sm); padding: 0.75rem; margin-top: 0.5rem;
        }
        @media (max-width: 640px) {
            .cost-linked-row { grid-template-columns: 1fr; }
        }
        .finance-cost-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 0.6rem; margin-top: 0.5rem;
        }
        .finance-cost-tile {
            background: rgba(0,0,0,0.2); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 0.7rem 0.8rem;
        }
        .finance-cost-tile.usd { border-color: rgba(16,185,129,0.25); }
        .finance-cost-tile.tl { border-color: rgba(245,158,11,0.25); }
        .finance-cost-tile.ai { border-color: rgba(139,92,246,0.25); }
        .finance-cost-tile .fct-label { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
        .finance-cost-tile .fct-value { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-top: 0.2rem; }
        .finance-cost-tile .fct-sub { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.15rem; }

        /* Bulk selection */
        .bulk-toolbar {
            display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
            background: rgba(255,255,255,0.025); border: 1px solid var(--border);
            border-radius: var(--radius-xs); padding: 0.4rem 0.55rem; margin: 0.5rem 0;
        }
        .bulk-toolbar .bulk-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); margin-right: auto; }
        .bulk-btn {
            font-size: 0.66rem; font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 4px;
            border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-muted);
            cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem; transition: var(--transition);
        }
        .bulk-btn:hover { border-color: var(--primary-light); color: var(--text); }
        .bulk-btn.danger { border-color: rgba(239,68,68,0.35); color: var(--danger); background: rgba(239,68,68,0.07); }
        .bulk-btn.danger:hover { background: rgba(239,68,68,0.16); }
        .bulk-checkbox {
            width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0;
        }
        .bulk-cb-overlay {
            position: absolute; top: 4px; left: 4px; z-index: 3;
            background: rgba(0,0,0,0.55); border-radius: 4px; padding: 1px; line-height: 0;
        }
        .progress-image-card { position: relative; }

        /* ALGORITHM MAP */
        .algo-toolbar {
            display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
            background: rgba(255,255,255,0.025); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; margin-bottom: 0.75rem;
        }
        .algo-btn {
            font-size: 0.72rem; font-weight: 600; padding: 0.4rem 0.7rem; border-radius: var(--radius-xs);
            border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--text-muted);
            cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; transition: var(--transition);
        }
        .algo-btn:hover { border-color: var(--primary-light); color: var(--text); }
        .algo-btn.primary { background: var(--accent-gradient); color: #fff; border-color: transparent; }
        .algo-btn.active { background: rgba(245,158,11,0.18); border-color: var(--primary); color: var(--primary-light); }
        .algo-btn.danger { border-color: rgba(239,68,68,0.35); color: var(--danger); }
        .algo-line-style { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.35rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: rgba(255,255,255,0.02); }
        .algo-line-style-label { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; margin-right: 0.1rem; }
        .algo-line-opt { padding: 0.28rem 0.5rem; font-size: 0.68rem; }
        .algo-main { position: relative; display: flex; gap: 0; }
        .algo-canvas-wrap {
            flex: 1; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm);
            background:
                radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px,
                rgba(0,0,0,0.18);
            height: 560px; position: relative;
        }
        .algo-canvas { position: absolute; top: 0; left: 0; overflow: visible; }
        #algo-edges { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; overflow: visible; }
        #algo-edges g[data-edge-id] { pointer-events: none; }
        #algo-edges g.algo-edge-waypoints-layer { pointer-events: none; }
        #algo-edges g.algo-edge-waypoints-layer .algo-edge-waypoint.active { pointer-events: all; }
        #algo-edges g.algo-edge-waypoints-layer .algo-edge-waypoint-del.active { pointer-events: all; }
        #algo-edges .algo-edge-hit { pointer-events: stroke; cursor: pointer; stroke-width: 14; }
        #algo-edges g[data-edge-id]:hover .algo-edge-path.visible,
        #algo-edges g[data-edge-id].selected .algo-edge-path.visible {
            stroke-width: 3; filter: drop-shadow(0 0 5px rgba(245,158,11,0.55)); cursor: pointer;
        }
        #algo-edges g.cross-edge .algo-edge-path.visible {
            stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.75;
        }
        #algo-edges g.cross-edge:hover .algo-edge-path.visible,
        #algo-edges g.cross-edge.selected .algo-edge-path.visible {
            stroke-width: 2.2; opacity: 1;
        }
        /* Node / edge hover highlight */
        .algo-canvas-node.hover-active {
            border-color: #ff3b3b !important;
            box-shadow: 0 0 18px rgba(255, 59, 59, 0.55) !important;
            z-index: 12 !important;
            opacity: 1 !important;
        }
        .algo-canvas-node.related-node-active {
            border-color: rgba(255, 59, 59, 0.7) !important;
            box-shadow: 0 0 10px rgba(255, 59, 59, 0.38) !important;
            z-index: 11 !important;
            opacity: 1 !important;
        }
        .algo-canvas-node.dimmed { opacity: 0.45 !important; }
        #algo-edges g[data-edge-id].edge-hover-active:not(.algo-edge-waypoints-layer) .algo-edge-path.visible,
        #algo-edges g[data-edge-id].selected:not(.algo-edge-waypoints-layer) .algo-edge-path.visible {
            stroke: #ff3b3b !important;
            stroke-width: 3.5 !important;
            filter: drop-shadow(0 0 6px rgba(255, 59, 59, 0.6)) !important;
            opacity: 1 !important;
        }
        #algo-edges g[data-edge-id].dimmed:not(.selected):not(.algo-edge-waypoints-layer) .algo-edge-path.visible {
            opacity: 0.22 !important;
        }
        .algo-wp-count-row { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem; }
        .algo-wp-count-row input[type="number"] {
            flex: 1; min-width: 0; padding: 0.35rem 0.45rem; font-size: 0.75rem;
            background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: var(--radius-xs);
            color: var(--text);
        }
        .algo-wp-count-row input[type="number"]:focus { outline: none; border-color: var(--primary); }
        .algo-wp-step { min-width: 28px; padding: 0.28rem 0.45rem !important; justify-content: center; font-weight: 700; }
        .algo-edge-waypoint {
            fill: var(--primary); stroke: rgba(255,255,255,0.9); stroke-width: 1.5;
            cursor: grab; opacity: 0.18; pointer-events: none;
            transition: opacity 0.15s ease;
        }
        .algo-edge-waypoint.active { opacity: 1; pointer-events: all; }
        .algo-edge-waypoint.active:hover { filter: drop-shadow(0 0 4px rgba(245,158,11,0.6)); }
        .algo-edge-waypoint.dragging { cursor: grabbing; opacity: 1; }
        .algo-edge-waypoint-del {
            fill: var(--danger); stroke: #fff; stroke-width: 1; cursor: pointer; opacity: 0;
            pointer-events: none;
        }
        .algo-edge-waypoint-del.active { opacity: 0.95; pointer-events: all; }
        .algo-edge-waypoints-layer { pointer-events: none; }
        #algo-edges g[data-edge-id].selected .algo-edge-waypoints-layer .algo-edge-waypoint.active { pointer-events: all; }
        .algo-group-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
        .algo-gstat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0.4rem 0.15rem; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
        .algo-gstat-val { font-size: 0.82rem; font-weight: 800; color: var(--text); line-height: 1; }
        .algo-gstat-lbl { font-size: 0.5rem; color: var(--text-muted); text-align: center; }
        .algo-size-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
        .algo-size-btn {
            display: flex; flex-direction: column; align-items: center; gap: 1px;
            padding: 0.38rem 0.2rem; border-radius: 8px; cursor: pointer;
            background: rgba(255,255,255,0.04); border: 1px solid var(--border);
            color: var(--text); font-size: 0.66rem; font-weight: 600; transition: all 0.15s ease;
        }
        .algo-size-btn small { font-size: 0.5rem; color: var(--text-muted); font-weight: 500; }
        .algo-size-btn:hover { border-color: var(--primary); background: rgba(245,158,11,0.1); }
        .algo-size-btn.active { border-color: var(--primary); background: rgba(245,158,11,0.18); color: var(--primary); }
        .algo-bulk-bar {
            position: absolute; bottom: 12px; left: 50%; transform: translate(-50%, 20px);
            display: none; align-items: center; gap: 0.4rem; z-index: 30;
            background: rgba(16,20,38,0.96); border: 1px solid #38bdf8; border-radius: 999px;
            padding: 0.4rem 0.7rem; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
            opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .algo-bulk-bar.show { display: flex; opacity: 1; transform: translate(-50%, 0); }
        .algo-bulk-count { font-size: 0.66rem; font-weight: 700; color: #38bdf8; }
        .algo-bulk-label { font-size: 0.62rem; color: var(--text-muted); }
        .algo-bulk-bar button {
            font-size: 0.62rem; font-weight: 600; padding: 0.22rem 0.5rem; border-radius: 999px;
            background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); cursor: pointer;
        }
        .algo-bulk-bar button:hover { border-color: var(--primary); background: rgba(245,158,11,0.12); }
        .algo-bulk-bar .algo-bulk-clear { color: var(--text-muted); border-radius: 50%; width: 22px; height: 22px; padding: 0; }
        .algo-conn-list { margin-top: 0.35rem; }
        .algo-conn-item {
            display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
            padding: 0.32rem 0.45rem; background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            border-radius: var(--radius-xs); margin-bottom: 0.28rem; font-size: 0.66rem;
        }
        .algo-conn-item-label { flex: 1; min-width: 0; line-height: 1.35; }
        .algo-conn-item-label em { font-style: normal; color: var(--text-muted); font-size: 0.6rem; }
        .algo-conn-del {
            flex-shrink: 0; color: var(--danger); border: none; background: rgba(239,68,68,0.1);
            border-radius: var(--radius-xs); cursor: pointer; padding: 0.2rem 0.35rem; display: inline-flex;
            align-items: center; transition: var(--transition);
        }
        .algo-conn-del:hover { background: rgba(239,68,68,0.22); }
        #algo-edge-preview { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 3; overflow: visible; }
        #algo-nodes { position: absolute; top: 0; left: 0; z-index: 2; overflow: visible; }
        .algo-canvas-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
        .algo-canvas-viewport.panning { cursor: grabbing; }
        .algo-canvas {
            position: absolute; top: 0; left: 0; transform-origin: 0 0;
        }
        .algo-canvas-node {
            position: absolute; width: 220px; height: 88px;
            background: linear-gradient(160deg, rgba(22,27,48,0.98), rgba(16,20,38,0.95));
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            cursor: grab; user-select: none; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
            transition: box-shadow 0.18s ease, transform 0.18s ease;
            display: flex; flex-direction: column; align-items: stretch; padding: 0.55rem 0.65rem; gap: 0.3rem;
            overflow: hidden;
        }
        .algo-canvas-node:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.42); }
        .algo-canvas-node.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245,158,11,0.32); }
        .algo-canvas-node.multi-selected { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,0.45); }
        .algo-canvas-node.dragging { transform: scale(1.03); z-index: 10; box-shadow: 0 14px 36px rgba(245,158,11,0.15); }
        .algo-canvas-node.resizing { z-index: 11; box-shadow: 0 14px 36px rgba(56,189,248,0.25); border-color: #38bdf8; }
        .algo-canvas-node.locked { opacity: 0.92; cursor: not-allowed; }
        .algo-canvas-node.rm-done { border-left: 3px solid #10b981; }
        .algo-canvas-node.rm-progress { border-left: 3px solid #f97316; }
        .algo-canvas-node.rm-planned { border-left: 3px solid #3b82f6; }
        .algo-canvas-node.rm-waiting { border-left: 3px solid #8b5cf6; }
        .algo-canvas-node.rm-testing { border-left: 3px solid #8b5cf6; }
        .algo-canvas-node.rm-risk { border-left: 3px solid #ef4444; }
        .algo-canvas-node-inner { flex: 1; min-width: 0; min-height: 0; cursor: pointer; display: flex; flex-direction: column; gap: 0.22rem; overflow: hidden; }
        .algo-canvas-node-title { font-size: 0.76rem; font-weight: 700; line-height: 1.3; word-break: break-word; }
        .algo-node-head { display: flex; align-items: flex-start; gap: 0.35rem; overflow: visible; flex-shrink: 0; }
        .algo-node-headtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
        .algo-node-ring { position: relative; flex-shrink: 0; z-index: 2; pointer-events: none; }
        .algo-node-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
        .algo-node-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.46rem; font-weight: 800; color: var(--text); letter-spacing: -0.3px; line-height: 1; }
        .algo-node-ring.ring-md .algo-node-ring-label { font-size: 0.5rem; }
        .algo-node-ring.ring-lg .algo-node-ring-label { font-size: 0.54rem; }
        .algo-group-node { border-width: 1px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); background: linear-gradient(160deg, rgba(28,33,58,0.99), rgba(18,22,42,0.97)); }
        .algo-group-node .algo-canvas-node-title { font-size: 0.82rem; }
        .algo-group-node::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; opacity: 0.8; }
        .algo-node-sub { font-size: 0.58rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; }
        .algo-node-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
        .algo-node-type { font-size: 0.56rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }
        .algo-node-progress { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; flex-shrink: 0; min-height: 4px; }
        .algo-node-progress > span { display: block; height: 100%; min-width: 0; border-radius: 3px; transition: width 0.25s ease; }
        .algo-node-meta, .algo-node-stats { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.56rem; color: var(--text-muted); margin-top: 0.1rem; }
        .algo-node-meta span, .algo-node-stats span { display: inline-flex; align-items: center; gap: 0.18rem; }
        .algo-node-meta i, .algo-node-stats i { width: 11px; height: 11px; }
        .algo-node-desc { font-size: 0.58rem; color: var(--text-muted); line-height: 1.35; margin-top: 0.15rem; overflow: hidden; }
        .algo-resize-handle {
            position: absolute; right: 1px; bottom: 1px; width: 16px; height: 16px;
            cursor: nwse-resize; z-index: 6; opacity: 0; transition: opacity 0.15s ease;
            background: linear-gradient(135deg, transparent 50%, rgba(245,158,11,0.85) 50%);
            border-bottom-right-radius: var(--radius-sm);
        }
        .algo-canvas-node:hover .algo-resize-handle { opacity: 1; }
        .algo-handle {
            position: absolute; width: 10px; height: 10px; border-radius: 50%;
            background: rgba(245,158,11,0.35); border: 2px solid rgba(245,158,11,0.65);
            opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
            z-index: 5; cursor: crosshair;
        }
        .algo-canvas-node:hover .algo-handle, .algo-connect-active .algo-handle, .algo-handle.active { opacity: 1; }
        .algo-handle:hover, .algo-handle.active { transform: scale(1.25); box-shadow: 0 0 8px rgba(245,158,11,0.6); background: rgba(245,158,11,0.85); }
        .algo-handle.handle-top { top: -5px; left: 50%; transform: translateX(-50%); }
        .algo-handle.handle-bottom { bottom: -5px; left: 50%; transform: translateX(-50%); }
        .algo-handle.handle-left { left: -5px; top: 50%; transform: translateY(-50%); }
        .algo-handle.handle-right { right: -5px; top: 50%; transform: translateY(-50%); }
        .algo-handle.handle-top:hover, .algo-handle.handle-top.active { transform: translateX(-50%) scale(1.25); }
        .algo-handle.handle-bottom:hover, .algo-handle.handle-bottom.active { transform: translateX(-50%) scale(1.25); }
        .algo-handle.handle-left:hover, .algo-handle.handle-left.active { transform: translateY(-50%) scale(1.25); }
        .algo-handle.handle-right:hover, .algo-handle.handle-right.active { transform: translateY(-50%) scale(1.25); }
        .algo-edge-path { fill: none; stroke-linecap: round; transition: stroke-width 0.15s ease, filter 0.15s ease; pointer-events: stroke; stroke-width: 8; cursor: pointer; }
        .algo-edge-path.visible { stroke-width: 2; }
        .algo-edge-path:hover, .algo-edge-path.selected { stroke-width: 3; filter: drop-shadow(0 0 4px rgba(245,158,11,0.45)); }
        .algo-connect-hint {
            font-size: 0.65rem; color: var(--primary-light); padding: 0.35rem 0.55rem;
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25);
            border-radius: var(--radius-xs); display: none; margin-bottom: 0.45rem;
        }
        .algo-connect-hint.show { display: block; }
        .algo-edge-editor {
            position: fixed; z-index: 10050; width: 280px; max-width: calc(100vw - 24px);
            background: var(--card-bg, #11162b); border: 1px solid var(--border);
            border-radius: var(--radius-sm); box-shadow: 0 16px 48px rgba(0,0,0,0.55);
            display: none; flex-direction: column; max-height: 86vh; overflow: hidden;
            touch-action: none;
        }
        .algo-edge-editor.open { display: flex; }
        .algo-edge-editor-header {
            display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
            padding: 0.55rem 0.65rem; background: rgba(0,0,0,0.28);
            border-bottom: 1px solid var(--border); cursor: move; user-select: none; flex-shrink: 0;
        }
        .algo-edge-editor-header strong { font-size: 0.78rem; flex: 1; min-width: 0; }
        .algo-edge-editor-header .btn-icon { cursor: pointer; flex-shrink: 0; }
        .algo-edge-editor-body {
            flex: 1; min-height: 0; overflow-y: auto; padding: 0.65rem 0.75rem;
            -webkit-overflow-scrolling: touch;
        }
        .algo-edge-editor-footer {
            flex-shrink: 0; display: flex; gap: 0.35rem; padding: 0.55rem 0.75rem;
            border-top: 1px solid var(--border); background: rgba(10,14,28,0.98);
            box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
        }
        .algo-edge-editor-footer .algo-btn { flex: 1; justify-content: center; }
        .algo-edge-editor-footer .algo-btn.danger { flex: 1.2; }
        @media (max-width: 768px) {
            .algo-edge-editor {
                left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
                width: 100% !important; max-width: 100%; max-height: 78vh;
                border-radius: var(--radius-sm) var(--radius-sm) 0 0;
                border-bottom: none;
            }
            .algo-edge-editor-header { cursor: default; }
        }
        .algo-edge-ctx {
            position: fixed; z-index: 9900; min-width: 168px;
            background: var(--card-bg, #11162b); border: 1px solid var(--border);
            border-radius: var(--radius-sm); padding: 0.3rem; box-shadow: 0 12px 40px rgba(0,0,0,0.55);
            display: flex; flex-direction: column; gap: 2px;
        }
        .algo-edge-ctx button {
            display: flex; align-items: center; gap: 0.45rem; width: 100%; text-align: left;
            font-size: 0.72rem; font-weight: 600; padding: 0.42rem 0.55rem; border-radius: var(--radius-xs);
            background: transparent; border: none; color: var(--text); cursor: pointer;
        }
        .algo-edge-ctx button:hover { background: rgba(245,158,11,0.12); }
        .algo-edge-ctx button:disabled { opacity: 0.4; cursor: not-allowed; }
        .algo-edge-ctx button.danger { color: var(--danger); }
        .algo-edge-ctx button i { width: 13px; height: 13px; }
        .algo-canvas-controls { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
        .algo-canvas-controls .algo-btn { padding: 0.3rem 0.5rem; font-size: 0.65rem; }
        .algo-zoom-btn { min-width: 26px; justify-content: center; font-size: 0.9rem !important; font-weight: 700; }
        .algo-zoom-slider {
            -webkit-appearance: none; appearance: none; width: 130px; height: 4px; border-radius: 999px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--primary) 50%, rgba(255,255,255,0.12) 50%);
            outline: none; cursor: pointer; vertical-align: middle;
        }
        .algo-zoom-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
            background: var(--primary-light, #fbbf24); border: 2px solid #fff; cursor: grab;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: transform 0.12s ease;
        }
        .algo-zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
        .algo-zoom-slider::-moz-range-thumb {
            width: 14px; height: 14px; border-radius: 50%; background: var(--primary-light, #fbbf24);
            border: 2px solid #fff; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .algo-zoom-label {
            font-size: 0.68rem; font-weight: 700; color: var(--primary-light, #fbbf24); min-width: 42px;
            text-align: center; cursor: pointer; padding: 0.25rem 0.4rem; border-radius: var(--radius-xs);
            border: 1px solid var(--border); user-select: none;
        }
        .algo-zoom-label:hover { background: rgba(245,158,11,0.12); }
        .algo-minimap {
            position: absolute; right: 12px; bottom: 12px; width: 200px; height: 140px;
            background: rgba(10,14,28,0.82); border: 1px solid var(--border); border-radius: var(--radius-sm);
            box-shadow: 0 8px 24px rgba(0,0,0,0.45); overflow: hidden; z-index: 6; cursor: pointer;
            backdrop-filter: blur(4px);
        }
        .algo-minimap-view {
            position: absolute; border: 1.5px solid var(--primary-light, #fbbf24);
            background: rgba(245,158,11,0.14); border-radius: 2px; pointer-events: none;
            box-shadow: 0 0 0 9999px rgba(0,0,0,0.28);
        }
        .algo-minimap svg { display: block; }
        .algo-minimap-node { transition: none; }
        .algo-node {
            position: absolute; width: 200px; background: rgba(20,24,42,0.96);
            border: 1px solid var(--border); border-left: 4px solid var(--text-muted);
            border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; cursor: grab; user-select: none;
            box-shadow: 0 6px 18px rgba(0,0,0,0.3); transition: box-shadow 0.15s ease, border-color 0.15s ease;
        }
        .algo-node:hover { box-shadow: 0 10px 26px rgba(0,0,0,0.45); }
        .algo-node.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245,158,11,0.3); }
        .algo-node.connect-source { border-color: var(--info); box-shadow: 0 0 0 2px rgba(59,130,246,0.4); }
        .algo-node.status-planned { border-left-color: #3b82f6; }
        .algo-node.status-progress { border-left-color: var(--primary); }
        .algo-node.status-done { border-left-color: var(--accent); }
        .algo-node.status-error { border-left-color: var(--danger); }
        .algo-node.status-revision { border-left-color: #f97316; }
        .algo-node.status-waiting { border-left-color: #8b5cf6; }
        .algo-node-title { font-size: 0.78rem; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 0.25rem; word-break: break-word; }
        .algo-node-type { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
        .algo-node-badge {
            display: inline-block; font-size: 0.58rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; margin-top: 0.3rem;
        }
        .algo-node-badge.status-planned { background: rgba(59,130,246,0.18); color: #93c5fd; }
        .algo-node-badge.status-progress { background: rgba(245,158,11,0.18); color: var(--primary-light); }
        .algo-node-badge.status-done { background: rgba(16,185,129,0.18); color: var(--accent); }
        .algo-node-badge.status-error { background: rgba(239,68,68,0.18); color: #fca5a5; }
        .algo-node-badge.status-revision { background: rgba(249,115,22,0.18); color: #fdba74; }
        .algo-node-badge.status-waiting { background: rgba(139,92,246,0.18); color: #c4b5fd; }
        .algo-node-progress { height: 5px; background: rgba(255,255,255,0.08); border-radius: 999px; margin-top: 0.4rem; overflow: hidden; }
        .algo-node-progress > div { height: 100%; background: var(--accent-gradient); }
        .algo-node-links { font-size: 0.56rem; color: var(--text-muted); margin-top: 0.3rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .algo-side-panel {
            position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 94vw;
            background: var(--card-bg, #11162b); border-left: 1px solid var(--border);
            box-shadow: -10px 0 30px rgba(0,0,0,0.4); z-index: 9500; padding: 1rem;
            transform: translateX(105%); transition: transform 0.28s ease; overflow-y: auto;
        }
        .algo-side-panel.open { transform: translateX(0); }
        .algo-side-section { margin-top: 0.85rem; }
        .algo-side-section h5 {
            font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-light);
            margin: 0 0 0.35rem; font-weight: 700;
        }
        .algo-side-chip {
            display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; background: rgba(0,0,0,0.2);
            border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.3rem 0.45rem; margin-bottom: 0.3rem;
        }
        .algo-side-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; cursor: pointer; }
        .algo-stats {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; margin-top: 0.75rem;
        }
        .algo-stat-tile {
            background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.55rem 0.7rem; text-align: center;
        }
        .algo-stat-tile .ast-v { font-size: 1.1rem; font-weight: 700; color: var(--text); }
        .algo-stat-tile .ast-l { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
        .algo-empty { text-align: center; color: var(--text-muted); padding: 3rem 1rem; }
        @media (max-width: 768px) {
            .algo-canvas-wrap { height: 420px; }
            .algo-side-panel { width: 100%; max-width: 100%; }
        }

        /* Algoritma Haritası — Özet alanı katlama */
        .project-summary-ribbon.collapsed { display: none !important; }

        /* Algoritma Haritası — Odak / Tam Ekran Modu */
        :root { --algo-focus-toolbar-h: 48px; }
        .algo-focus-toolbar {
            display: none; flex-wrap: wrap; align-items: center; gap: 0.35rem;
            background: rgba(10,14,28,0.97); border-bottom: 1px solid var(--border);
            padding: 0.4rem 0.65rem; min-height: var(--algo-focus-toolbar-h);
            position: sticky; top: 0; z-index: 9600;
        }
        .algo-focus-title { font-size: 0.72rem; font-weight: 700; color: var(--primary-light); margin-right: 0.35rem; white-space: nowrap; }
        .algo-focus-exit-fab {
            display: none; position: fixed; top: 10px; right: 10px; z-index: 9700;
            font-size: 0.72rem; font-weight: 700; padding: 0.45rem 0.75rem; border-radius: 999px;
            background: rgba(16,20,38,0.95); border: 1px solid var(--primary); color: var(--primary-light);
            cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,0.45); align-items: center; gap: 0.35rem;
        }
        .algo-focus-exit-fab:hover { background: rgba(245,158,11,0.15); }
        body.algo-focus-mode .algo-focus-exit-fab { display: inline-flex; }
        body.algo-focus-mode .algo-toolbar-full { display: none !important; }
        body.algo-focus-mode .algo-focus-toolbar { display: flex; }
        body.algo-focus-mode .algo-connect-hint.show { position: fixed; top: calc(var(--algo-focus-toolbar-h) + 4px); left: 50%; transform: translateX(-50%); z-index: 9650; margin: 0; }
        body.algo-focus-mode .roadmap-header.algo-map-header { display: none !important; }
        body.algo-focus-mode .algo-stats { display: none !important; }
        body.algo-focus-mode .sidebar {
            width: 58px; min-width: 58px; padding-left: 0.35rem; padding-right: 0.35rem;
        }
        body.algo-focus-mode .sidebar .brand h2,
        body.algo-focus-mode .sidebar .nav-label,
        body.algo-focus-mode .sidebar .nav-item span:not(.nav-badge),
        body.algo-focus-mode .sidebar .sidebar-stats { display: none; }
        body.algo-focus-mode .sidebar .brand { justify-content: center; }
        body.algo-focus-mode .sidebar .nav-item { justify-content: center; padding: 0.55rem; }
        body.algo-focus-mode .workspace-header { display: none; }
        body.algo-focus-mode .workspace-content { padding: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
        body.algo-focus-mode #page-project-detail { flex: 1; min-height: 0; height: auto; display: flex; flex-direction: column; overflow: hidden; }
        body.algo-focus-mode #page-project-detail .page-toolbar { display: none; }
        body.algo-focus-mode #project-detail-content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
        body.algo-focus-mode .project-detail-layout { gap: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
        body.algo-focus-mode .project-tabs { display: none !important; }
        body.algo-focus-mode .project-summary-ribbon { display: none !important; }
        body.algo-focus-mode .project-tab-content { display: none !important; }
        body.algo-focus-mode .project-tab-content.algomap-tab.active { display: flex !important; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
        body.algo-focus-mode .algo-canvas-wrap {
            flex: 1; min-height: 0; height: auto !important;
            border-radius: 0; border-left: none; border-right: none; border-bottom: none;
        }
        @media (max-width: 768px) {
            body.algo-focus-mode .workspace-content { height: 100dvh; }
            body.algo-focus-mode .sidebar { display: none; }
        }

        /* ROADMAP 2.0 — Executive View */
        .roadmap-executive {
            display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0;
            align-items: start; position: relative;
        }
        .roadmap-main-col { min-width: 0; padding-right: 0.5rem; overflow: visible; }
        #roadmap-timeline { width: 100%; min-width: 0; overflow: visible; }
        .roadmap-header {
            display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
            margin-bottom: 1.25rem; flex-wrap: wrap;
        }
        .roadmap-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); }
        .roadmap-header p { margin: 0.25rem 0 0; font-size: 0.72rem; color: var(--text-muted); max-width: 520px; line-height: 1.45; }
        .roadmap-badge-exec {
            font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
            padding: 0.35rem 0.65rem; border-radius: 999px;
            background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(16,185,129,0.12));
            border: 1px solid rgba(245,158,11,0.25); color: var(--primary-light); white-space: nowrap;
        }
        .roadmap-ai-card {
            background: linear-gradient(145deg, rgba(20,24,42,0.98), rgba(30,35,60,0.92));
            border: 1px solid rgba(245,158,11,0.22); border-radius: var(--radius);
            padding: 1rem 1.15rem; margin-bottom: 1.5rem;
            box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
            position: relative; overflow: hidden;
        }
        .roadmap-ai-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: var(--accent-gradient);
        }
        .roadmap-ai-title {
            display: flex; align-items: center; gap: 0.45rem;
            font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 0.85rem;
        }
        .roadmap-ai-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-bottom: 0.85rem;
        }
        .roadmap-ai-stat {
            text-align: center; padding: 0.55rem 0.4rem;
            background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: var(--radius-xs);
        }
        .roadmap-ai-stat .rai-v { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.1; }
        .roadmap-ai-stat .rai-l { font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
        .roadmap-ai-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
        .roadmap-ai-insight {
            padding: 0.6rem 0.75rem; border-radius: var(--radius-xs);
            background: rgba(255,255,255,0.025); border: 1px solid var(--border);
        }
        .roadmap-ai-insight .rai-k { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.25rem; }
        .roadmap-ai-insight .rai-v { font-size: 0.78rem; font-weight: 600; color: var(--text); line-height: 1.35; word-break: break-word; }
        .roadmap-ai-insight.risk .rai-v { color: #fca5a5; }
        .roadmap-ai-insight.next .rai-v { color: var(--primary-light); }
        .roadmap-timeline { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 420px; margin: 0 auto; }
        .roadmap-card {
            width: 100%; max-width: 420px;
            background: linear-gradient(160deg, rgba(22,27,48,0.98), rgba(16,20,38,0.95));
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            padding: 0.85rem 1rem; cursor: pointer; user-select: none;
            display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
            position: relative; overflow: hidden;
        }
        .roadmap-card::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
            background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 55%);
            opacity: 0; transition: opacity 0.22s ease;
        }
        .roadmap-card:hover {
            transform: scale(1.025); box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 24px rgba(245,158,11,0.08);
        }
        .roadmap-card:hover::after { opacity: 1; }
        .roadmap-card.selected {
            border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245,158,11,0.28), 0 12px 36px rgba(0,0,0,0.4);
        }
        .roadmap-card.rm-done { border-left: 3px solid #10b981; }
        .roadmap-card.rm-progress { border-left: 3px solid #f97316; }
        .roadmap-card.rm-planned { border-left: 3px solid #3b82f6; }
        .roadmap-card.rm-waiting { border-left: 3px solid #8b5cf6; }
        .roadmap-card.rm-testing { border-left: 3px solid #8b5cf6; }
        .roadmap-card.rm-risk { border-left: 3px solid #ef4444; }
        .roadmap-card-body { flex: 1; min-width: 0; }
        .roadmap-card-title {
            font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1.35;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .roadmap-card-status {
            display: inline-block; margin-top: 0.3rem;
            font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
            padding: 0.12rem 0.45rem; border-radius: 999px;
        }
        .roadmap-card-status.rm-done { background: rgba(16,185,129,0.18); color: #6ee7b7; }
        .roadmap-card-status.rm-progress { background: rgba(249,115,22,0.18); color: #fdba74; }
        .roadmap-card-status.rm-planned { background: rgba(59,130,246,0.18); color: #93c5fd; }
        .roadmap-card-status.rm-waiting { background: rgba(139,92,246,0.18); color: #c4b5fd; }
        .roadmap-card-status.rm-testing { background: rgba(139,92,246,0.18); color: #c4b5fd; }
        .roadmap-card-status.rm-risk { background: rgba(239,68,68,0.18); color: #fca5a5; }
        .roadmap-card-meta { font-size: 0.58rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.3; }
        .algo-node-day-hours { font-size: 0.58rem; color: var(--text-muted); margin-top: 0.15rem; }
        .roadmap-progress-ring {
            position: relative; width: 44px; height: 44px; flex-shrink: 0;
        }
        .roadmap-progress-ring svg { width: 44px; height: 44px; display: block; }
        .roadmap-progress-ring .rm-ring-label {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            font-size: 0.58rem; font-weight: 800; color: var(--text);
        }
        .roadmap-connector {
            display: flex; flex-direction: column; align-items: center; height: 36px; width: 100%; position: relative;
        }
        .roadmap-connector-line {
            width: 2px; flex: 1; background: linear-gradient(180deg, rgba(245,158,11,0.5), rgba(16,185,129,0.35));
            border-radius: 999px;
        }
        .roadmap-connector-arrow {
            color: rgba(245,158,11,0.75); font-size: 0.85rem; line-height: 1; margin-top: -2px;
            filter: drop-shadow(0 0 4px rgba(245,158,11,0.4));
        }
        .roadmap-empty {
            text-align: center; color: var(--text-muted); padding: 3rem 1.5rem;
            border: 1px dashed var(--border); border-radius: var(--radius); max-width: 420px; margin: 0 auto;
        }
        .roadmap-side-panel {
            position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 94vw;
            background: var(--card-bg, #11162b); border-left: 1px solid var(--border);
            box-shadow: -12px 0 40px rgba(0,0,0,0.45); z-index: 9600; padding: 1.1rem;
            transform: translateX(105%); transition: transform 0.28s ease; overflow-y: auto;
        }
        .roadmap-side-panel.open { transform: translateX(0); }
        .roadmap-side-meta {
            display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0;
        }
        .roadmap-side-meta-item {
            background: rgba(0,0,0,0.2); border: 1px solid var(--border);
            border-radius: var(--radius-xs); padding: 0.45rem 0.55rem;
        }
        .roadmap-side-meta-item .rsm-k { font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
        .roadmap-side-meta-item .rsm-v { font-size: 0.76rem; font-weight: 600; color: var(--text); margin-top: 0.15rem; }
        .roadmap-side-ring-wrap { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; }
        .roadmap-side-ring-wrap .roadmap-progress-ring { width: 56px; height: 56px; }
        .roadmap-side-ring-wrap .roadmap-progress-ring svg { width: 56px; height: 56px; }
        .roadmap-side-ring-wrap .rm-ring-label { font-size: 0.68rem; }
        @media (max-width: 900px) {
            .roadmap-ai-grid { grid-template-columns: repeat(2, 1fr); }
            .roadmap-ai-insights { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .roadmap-executive { grid-template-columns: 1fr; }
            .roadmap-timeline { max-width: 100%; }
            .roadmap-card { max-width: 100%; }
            .roadmap-side-panel { width: 100%; max-width: 100%; }
            .roadmap-header { flex-direction: column; }
        }
        @media (min-width: 1100px) {
            .roadmap-timeline-viewport {
                width: 100%;
                max-width: 100%;
                overflow-x: auto;
                overflow-y: visible;
                -webkit-overflow-scrolling: touch;
                scroll-padding-inline-start: 12px;
                scroll-padding-inline-end: 12px;
            }
            .roadmap-timeline-horizontal {
                display: inline-flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
                flex-wrap: nowrap;
                padding: 0 12px 1rem 12px;
                gap: 0;
                min-width: min-content;
                max-width: none;
                margin: 0;
            }
            .roadmap-timeline-horizontal .roadmap-card { min-width: 200px; max-width: 220px; flex-shrink: 0; }
            .roadmap-timeline-horizontal .roadmap-card-first { scroll-margin-inline-start: 12px; }
            .roadmap-timeline-horizontal .roadmap-connector {
                flex-direction: row; width: 48px; height: auto; align-self: center; flex-shrink: 0;
            }
            .roadmap-timeline-horizontal .roadmap-connector-line {
                width: auto; height: 2px; flex: 1;
                background: linear-gradient(90deg, rgba(245,158,11,0.5), rgba(16,185,129,0.35));
            }
            .roadmap-timeline-horizontal .roadmap-connector-arrow { margin-top: 0; margin-left: -2px; }
        }

        /* ALGORITHM TREE 2.0 */
        .algo-tree-wrap {
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.22));
            padding: 1.25rem 1rem 1.5rem; overflow: auto; max-height: 680px; min-height: 360px;
        }
        .algo-tree-header-note {
            font-size: 0.68rem; color: var(--text-muted); margin-bottom: 1rem; text-align: center;
        }
        .algo-tree-root { display: flex; flex-direction: column; align-items: center; }
        .algo-tree-branch { display: flex; flex-direction: column; align-items: center; }
        .algo-tree-card {
            width: 100%; max-width: 280px;
            background: linear-gradient(160deg, rgba(22,27,48,0.98), rgba(16,20,38,0.95));
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            padding: 0.75rem 0.85rem; cursor: pointer; user-select: none;
            display: flex; align-items: center; justify-content: space-between; gap: 0.65rem;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
            box-shadow: 0 4px 16px rgba(0,0,0,0.25); position: relative; overflow: hidden;
        }
        .algo-tree-card::after {
            content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
            background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent 55%);
            opacity: 0; transition: opacity 0.22s ease;
        }
        .algo-tree-card:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(245,158,11,0.07); }
        .algo-tree-card:hover::after { opacity: 1; }
        .algo-tree-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245,158,11,0.28); }
        .algo-tree-card.rm-done { border-left: 3px solid #10b981; }
        .algo-tree-card.rm-progress { border-left: 3px solid #f97316; }
        .algo-tree-card.rm-planned { border-left: 3px solid #3b82f6; }
        .algo-tree-card.rm-waiting { border-left: 3px solid #8b5cf6; }
        .algo-tree-card.rm-risk { border-left: 3px solid #ef4444; }
        .algo-tree-card-body { flex: 1; min-width: 0; }
        .algo-tree-card-title { font-size: 0.78rem; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; }
        .algo-tree-card-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.28rem; }
        .algo-tree-type-tag { font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
        .algo-tree-link-count { font-size: 0.52rem; color: var(--text-muted); }
        .algo-tree-connector-v {
            display: flex; flex-direction: column; align-items: center; height: 28px; width: 2px;
            background: linear-gradient(180deg, rgba(245,158,11,0.55), rgba(16,185,129,0.35));
            margin: 0.15rem 0; border-radius: 999px; position: relative;
        }
        .algo-tree-connector-v::after {
            content: '▼'; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
            font-size: 0.65rem; color: rgba(245,158,11,0.75); line-height: 1;
        }
        .algo-tree-children {
            display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%;
        }
        .algo-tree-children.multi {
            flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem;
            padding-top: 0.25rem;
        }
        .algo-tree-children.multi > .algo-tree-branch { flex: 0 1 auto; min-width: 200px; max-width: 280px; }
        .algo-form-section {
            margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border);
        }
        .algo-form-section-title {
            font-size: 0.72rem; font-weight: 700; color: var(--primary-light); margin-bottom: 0.55rem;
            display: flex; align-items: center; gap: 0.35rem;
        }
        @media (max-width: 768px) {
            .algo-tree-wrap { max-height: 520px; padding: 0.85rem 0.5rem; }
            .algo-tree-card { max-width: 100%; }
            .algo-tree-children.multi { flex-direction: column; align-items: center; }
        }

        /* NODE DETAIL PANEL */
        .node-detail-panel { font-size: 0.74rem; }
        .node-detail-section { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
        .node-detail-section h5 {
            font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--primary-light); margin: 0 0 0.5rem; font-weight: 700;
        }
        .node-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
        .node-detail-grid.full { grid-template-columns: 1fr; }
        .node-detail-field label {
            display: block; font-size: 0.58rem; color: var(--text-muted); margin-bottom: 0.2rem;
            text-transform: uppercase; letter-spacing: 0.03em;
        }
        .node-detail-field input, .node-detail-field select, .node-detail-field textarea {
            width: 100%; font-size: 0.72rem; padding: 0.35rem 0.45rem;
            background: rgba(0,0,0,0.25); border: 1px solid var(--border);
            border-radius: var(--radius-xs); color: var(--text);
        }
        .node-detail-field textarea { min-height: 52px; resize: vertical; }
        .node-detail-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.85rem; }
        .node-media-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 0.4rem;
        }
        .node-media-thumb {
            position: relative; aspect-ratio: 1; border-radius: var(--radius-xs); overflow: hidden;
            border: 1px solid var(--border); cursor: pointer; background: rgba(0,0,0,0.3);
        }
        .node-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .node-media-thumb .nm-del {
            position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
            background: rgba(239,68,68,0.9); border: none; border-radius: 50%; color: #fff;
            font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
        }
        .node-doc-row {
            display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.45rem;
            background: rgba(0,0,0,0.2); border: 1px solid var(--border); border-radius: var(--radius-xs);
            margin-bottom: 0.3rem; font-size: 0.68rem;
        }
        .node-upload-zone {
            border: 1px dashed var(--border); border-radius: var(--radius-xs); padding: 0.55rem;
            text-align: center; color: var(--text-muted); font-size: 0.65rem; cursor: pointer;
            transition: border-color 0.15s ease;
        }
        .node-upload-zone:hover { border-color: var(--primary-light); color: var(--text); }
        .algo-tree-card-icons, .roadmap-card-icons {
            display: flex; gap: 0.25rem; margin-top: 0.2rem; flex-wrap: wrap;
        }
        .algo-tree-card-icons span, .roadmap-card-icons span {
            font-size: 0.52rem; opacity: 0.85; color: var(--text-muted);
        }
        .node-pkg-badge {
            font-size: 0.5rem; font-weight: 700; padding: 0.08rem 0.35rem; border-radius: 999px;
            background: rgba(245,158,11,0.15); color: var(--primary-light); text-transform: uppercase;
        }

        /* TEST CHECKLIST / QA MODULE */
        .tcl-meta-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
            padding: 1rem 1.15rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.75rem;
        }
        .tcl-meta-card label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
        .tcl-meta-card input, .tcl-meta-card textarea, .tcl-meta-card select {
            width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
            border-radius: var(--radius-xs); padding: 0.45rem 0.55rem; font-size: 0.82rem; font-family: var(--font-body);
        }
        .tcl-meta-card textarea { min-height: 70px; resize: vertical; }
        .tcl-stats-row {
            display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; margin-bottom: 1rem;
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem;
        }
        .tcl-summary-grid {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.65rem; flex: 1; min-width: 0;
        }
        .tcl-summary-card {
            background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius-xs);
            padding: 0.65rem 0.5rem; text-align: center;
        }
        .tcl-summary-card .tcl-sum-val { font-size: 1.35rem; font-weight: 800; font-family: var(--font-display); line-height: 1.1; color: var(--text); }
        .tcl-summary-card .tcl-sum-lbl { font-size: 0.58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; font-weight: 600; }
        .tcl-summary-card.tcl-sum-passed .tcl-sum-val { color: #22c55e; }
        .tcl-summary-card.tcl-sum-failed .tcl-sum-val { color: #ef4444; }
        .tcl-summary-card.tcl-sum-pending .tcl-sum-val { color: #eab308; }
        .tcl-summary-card.tcl-sum-rate .tcl-sum-val { color: #60a5fa; }
        .tcl-ring-wrap {
            position: relative; width: 88px; height: 88px; flex-shrink: 0; align-self: center;
        }
        .tcl-ring-svg { display: block; width: 88px; height: 88px; }
        .tcl-ring-pct {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            font-size: 0.95rem; font-weight: 800; font-family: var(--font-display); color: var(--text);
        }
        .tcl-toolbar {
            display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem;
            padding: 0.65rem 0.75rem; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius-sm);
        }
        .tcl-toolbar .algo-btn { font-size: 0.72rem; padding: 0.35rem 0.65rem; }
        .tcl-toolbar .tcl-toolbar-left { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; min-width: 0; }
        .tcl-toolbar .tcl-toolbar-right { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
        .tcl-btn-add-item {
            background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; color: #fff !important;
            border-color: transparent !important; font-weight: 700;
        }
        .tcl-btn-add-item:hover { filter: brightness(1.08); }
        .tcl-btn-export-pdf {
            background: linear-gradient(135deg, #7c3aed, #6d28d9) !important; color: #fff !important; border-color: transparent !important;
        }
        .tcl-filter-failed { color: #fca5a5 !important; }
        .tcl-filter-failed.active { background: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.4) !important; color: #fca5a5 !important; }
        .tcl-filter-pending { color: #fde047 !important; }
        .tcl-filter-pending.active { background: rgba(234,179,8,0.12) !important; border-color: rgba(234,179,8,0.35) !important; color: #fde047 !important; }
        .tcl-list-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.85rem; }
        .tcl-list-tab {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px;
            padding: 0.3rem 0.75rem; font-size: 0.72rem; cursor: pointer; color: var(--text-muted); transition: var(--transition);
        }
        .tcl-list-tab.active { border-color: var(--primary); color: var(--primary-light); background: rgba(245,158,11,0.08); }
        .tcl-items-wrap { display: flex; flex-direction: column; gap: 0.55rem; }
        .tcl-sections-wrap { display: flex; flex-direction: column; gap: 0.55rem; }
        .tcl-section-card, .tcl-sub-section-card {
            border: 1px solid var(--border); border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.02); overflow: hidden;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }
        .tcl-section-card { border-radius: var(--radius); }
        .tcl-sub-section-card {
            margin-left: 0.85rem; border-radius: var(--radius-xs);
            background: rgba(255,255,255,0.015);
        }
        .tcl-section-card.selected, .tcl-sub-section-card.selected {
            border-color: rgba(245,158,11,0.45);
            background: rgba(245,158,11,0.04);
            box-shadow: 0 0 0 1px rgba(245,158,11,0.12), 0 4px 18px rgba(245,158,11,0.06);
        }
        .tcl-section-head, .tcl-sub-section-head {
            display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem;
            padding: 0.7rem 0.8rem; cursor: pointer; user-select: none;
            border-bottom: 1px solid transparent;
            transition: background 0.18s ease, box-shadow 0.18s ease;
        }
        .tcl-sub-section-head { padding: 0.55rem 0.65rem; }
        .tcl-section-card:not(.collapsed) > .tcl-section-head,
        .tcl-sub-section-card:not(.collapsed) > .tcl-sub-section-head { border-bottom-color: var(--border); }
        .tcl-section-head:hover, .tcl-sub-section-head:hover {
            background: rgba(255,255,255,0.035);
            box-shadow: inset 0 0 24px rgba(124,58,237,0.04);
        }
        .tcl-section-chevron {
            color: var(--text-muted); display: flex; flex-shrink: 0;
            transition: transform 0.22s ease;
        }
        .tcl-section-card.collapsed .tcl-section-chevron,
        .tcl-sub-section-card.collapsed .tcl-section-chevron { transform: rotate(-90deg); }
        .tcl-section-chevron i { width: 16px; height: 16px; }
        .tcl-section-drag-handle {
            color: var(--text-muted); opacity: 0.35; display: flex; flex-shrink: 0;
            cursor: grab; touch-action: none; padding: 0.1rem;
            transition: opacity 0.15s ease;
        }
        .tcl-section-head:hover .tcl-section-drag-handle,
        .tcl-sub-section-head:hover .tcl-section-drag-handle { opacity: 0.75; }
        .tcl-section-drag-handle:active { cursor: grabbing; }
        .tcl-section-drag-handle i { width: 14px; height: 14px; pointer-events: none; }
        .tcl-section-card.tcl-section-dragging,
        .tcl-sub-section-card.tcl-section-dragging { opacity: 0.5; }
        .tcl-section-card.tcl-section-drop-before,
        .tcl-sub-section-card.tcl-section-drop-before { box-shadow: inset 0 3px 0 var(--primary); }
        .tcl-section-card.tcl-section-drop-after,
        .tcl-sub-section-card.tcl-section-drop-after { box-shadow: inset 0 -3px 0 var(--primary); }
        .tcl-section-title-input {
            flex: 1; min-width: 140px; font-size: 0.82rem; font-weight: 700; color: var(--text);
            background: rgba(0,0,0,0.2); border: 1px solid rgba(124,58,237,0.45); border-radius: var(--radius-xs);
            padding: 0.25rem 0.45rem; box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
        }
        .tcl-section-title-input.sub { font-size: 0.76rem; font-weight: 600; }
        .tcl-section-title-input:focus { outline: none; border-color: #7c3aed; }
        .tcl-section-title-wrap {
            flex: 1; min-width: 0; display: flex; align-items: center; min-width: 120px;
        }
        .tcl-section-title-text {
            font-size: 0.84rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            padding: 0.15rem 0.25rem; border-radius: var(--radius-xs);
            transition: background 0.15s ease;
        }
        .tcl-section-title-text.sub { font-size: 0.76rem; font-weight: 600; color: var(--text-muted); }
        .tcl-section-title-text:hover { background: rgba(255,255,255,0.04); }
        .tcl-section-summary-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; align-items: center; }
        .tcl-section-chip {
            font-size: 0.56rem; font-weight: 700; padding: 0.18rem 0.5rem; border-radius: 999px;
            white-space: nowrap; letter-spacing: 0.02em; line-height: 1.2;
        }
        .tcl-section-chip.tcl-chip-total { color: #93c5fd; background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.2); }
        .tcl-section-chip.tcl-chip-pass { color: #86efac; background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.18); }
        .tcl-section-chip.tcl-chip-fail { color: #fca5a5; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.18); }
        .tcl-section-chip.tcl-chip-pend { color: #fde047; background: rgba(234,179,8,0.12); border: 1px solid rgba(234,179,8,0.18); }
        .tcl-section-chip.tcl-chip-rate { color: #c4b5fd; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.22); }
        .tcl-section-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
        .tcl-section-body-anim {
            display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease;
        }
        .tcl-section-card.expanded > .tcl-section-body-anim,
        .tcl-sub-section-card.expanded > .tcl-section-body-anim { grid-template-rows: 1fr; }
        .tcl-section-body-inner { overflow: hidden; min-height: 0; }
        .tcl-section-body { padding: 0.55rem 0.65rem 0.65rem; }
        .tcl-sub-sections-wrap { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.35rem; }
        .tcl-direct-items-label { font-size: 0.68rem; font-weight: 700; color: var(--text-muted); margin: 0.5rem 0 0.35rem; padding-top: 0.35rem; border-top: 1px dashed rgba(255,255,255,0.08); }
        .tcl-add-item-in-section { margin-top: 0.35rem; }
        .tcl-section-body .tcl-items-wrap { gap: 0.5rem; }
        .tcl-add-sub-btn {
            display: inline-flex; align-items: center; gap: 0.35rem;
            margin: 0.15rem 0 0.35rem; padding: 0.35rem 0.65rem;
            font-size: 0.68rem; font-weight: 600; color: var(--text-muted);
            background: transparent; border: 1px dashed rgba(255,255,255,0.12);
            border-radius: var(--radius-xs); cursor: pointer; transition: var(--transition);
        }
        .tcl-add-sub-btn:hover {
            color: #c4b5fd; border-color: rgba(124,58,237,0.35);
            background: rgba(124,58,237,0.06);
        }
        .tcl-add-sub-btn i { width: 13px; height: 13px; }
        .tcl-section-empty {
            text-align: center; padding: 1.35rem 1rem; color: var(--text-muted);
            border: 1px dashed rgba(255,255,255,0.1); border-radius: var(--radius-xs);
            background: rgba(255,255,255,0.015); font-size: 0.76rem; line-height: 1.55;
        }
        .tcl-section-empty strong { display: block; color: var(--text); font-size: 0.82rem; margin-bottom: 0.25rem; font-weight: 600; }
        .tcl-context-menu {
            position: fixed; z-index: 9999; min-width: 168px;
            background: #12182b; border: 1px solid var(--border); border-radius: var(--radius-xs);
            box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 0.3rem;
            display: none;
        }
        .tcl-context-menu.open { display: block; }
        .tcl-context-menu button {
            display: flex; align-items: center; gap: 0.45rem; width: 100%;
            padding: 0.45rem 0.55rem; border: none; background: transparent;
            color: var(--text); font-size: 0.72rem; border-radius: var(--radius-xs);
            cursor: pointer; text-align: left;
        }
        .tcl-context-menu button:hover { background: rgba(255,255,255,0.06); }
        .tcl-context-menu button.danger { color: #fca5a5; }
        .tcl-context-menu button i { width: 13px; height: 13px; opacity: 0.7; }
        .tcl-section-pick {
            font-size: 0.72rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-xs);
            border: 1px solid var(--border); background: rgba(0,0,0,0.2); color: var(--text);
            max-width: 200px;
        }
        .tcl-item-card {
            background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
            border-left: 4px solid #8b95a8; overflow: hidden;
        }
        .tcl-item-card.tcl-pending { border-left-color: #eab308; }
        .tcl-item-card.tcl-passed { border-left-color: #22c55e; }
        .tcl-item-card.tcl-failed { border-left-color: #ef4444; }
        .tcl-item-card.tcl-retest { border-left-color: #8b5cf6; }
        .tcl-item-card.collapsed .tcl-item-body { display: none; }
        .tcl-item-head {
            display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.85rem; cursor: pointer;
            user-select: none; min-height: 44px;
        }
        .tcl-item-head:hover { background: rgba(255,255,255,0.02); }
        .tcl-drag-handle { color: var(--text-muted); opacity: 0.45; display: flex; flex-shrink: 0; cursor: grab; touch-action: none; }
        .tcl-drag-handle:active { cursor: grabbing; }
        .tcl-drag-handle i { width: 14px; height: 14px; pointer-events: none; }
        .tcl-item-card.tcl-item-dragging { opacity: 0.45; }
        .tcl-item-card.tcl-drop-before { box-shadow: inset 0 3px 0 var(--primary); }
        .tcl-item-card.tcl-drop-after { box-shadow: inset 0 -3px 0 var(--primary); }
        .tcl-section-card.tcl-drop-target,
        .tcl-section-body.tcl-drop-target,
        .tcl-section-drop-empty.tcl-drop-target {
            outline: 2px dashed rgba(245,158,11,0.55);
            background: rgba(245,158,11,0.06);
        }
        .tcl-section-drop-empty {
            padding: 1rem; text-align: center; font-size: 0.68rem; color: var(--text-muted);
            border: 1px dashed var(--border); border-radius: var(--radius-xs);
            min-height: 52px; display: flex; align-items: center; justify-content: center;
        }
        .tcl-item-num { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
        .tcl-item-title-head {
            flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .tcl-item-title-head.placeholder { color: var(--text-muted); font-weight: 500; font-style: italic; }
        .tcl-item-title-input {
            flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--text);
            background: rgba(0,0,0,0.35); border: 1px solid var(--primary); border-radius: var(--radius-xs);
            padding: 0.2rem 0.45rem;
        }
        .tcl-item-title-input.editing { box-shadow: 0 0 0 2px rgba(245,158,11,0.25); }
        .tcl-item-chevron { color: var(--text-muted); flex-shrink: 0; display: flex; }
        .tcl-item-chevron i { width: 16px; height: 16px; }
        .tcl-status-badge {
            font-size: 0.58rem; font-weight: 800; padding: 0.18rem 0.55rem; border-radius: 999px;
            text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0;
        }
        .tcl-status-badge.tcl-pending { background: rgba(234,179,8,0.18); color: #fde047; }
        .tcl-status-badge.tcl-passed { background: rgba(34,197,94,0.18); color: #86efac; }
        .tcl-status-badge.tcl-failed { background: rgba(239,68,68,0.18); color: #fca5a5; }
        .tcl-status-badge.tcl-retest { background: rgba(139,92,246,0.18); color: #c4b5fd; }
        .tcl-item-body {
            display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
            padding: 0 0.85rem 0.85rem; border-top: 1px solid var(--border);
        }
        .tcl-item-fields { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.75rem; min-width: 0; }
        .tcl-item-images-col {
            padding-top: 0.75rem; min-width: 0; border-left: 1px solid var(--border); padding-left: 0.85rem;
        }
        .tcl-field { display: flex; flex-direction: column; gap: 0.2rem; }
        .tcl-field label { font-size: 0.58rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
        .tcl-field input, .tcl-field textarea, .tcl-field select {
            background: var(--bg); border: 1px solid var(--border); color: var(--text);
            border-radius: var(--radius-xs); padding: 0.4rem 0.5rem; font-size: 0.78rem; width: 100%;
        }
        .tcl-field textarea { min-height: 72px; resize: vertical; }
        .tcl-field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
        .tcl-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
        .tcl-status-row select { flex: 1; min-width: 120px; }
        .tcl-check-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
        .tcl-check-row label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; cursor: pointer; text-transform: none; font-weight: 500; color: var(--text); }
        .tcl-item-actions { display: flex; justify-content: flex-end; padding-top: 0.25rem; }
        .tcl-empty {
            text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); border: 1px dashed var(--border);
            border-radius: var(--radius); font-size: 0.82rem; line-height: 1.6;
        }
        .tcl-empty strong { display: block; color: var(--text); font-size: 0.9rem; margin-bottom: 0.35rem; }
        .tcl-compare-panel-title {
            font-size: 0.58rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase;
            letter-spacing: 0.06em; margin-bottom: 0.55rem;
        }
        .tcl-compare-slots-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-bottom: 0.55rem; }
        .tcl-compare-slot { min-width: 0; }
        .tcl-compare-slot-label {
            font-size: 0.55rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase;
            letter-spacing: 0.05em; margin-bottom: 0.35rem; text-align: center;
        }
        .tcl-compare-thumb-wrap {
            position: relative; border-radius: var(--radius-xs); overflow: hidden;
            border: 1px solid var(--border); background: var(--bg); aspect-ratio: 16/10;
        }
        .tcl-compare-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .tcl-compare-placeholder {
            aspect-ratio: 16/10; border: 1px dashed var(--border); border-radius: var(--radius-xs);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 0.25rem; color: var(--text-muted); font-size: 0.65rem; background: rgba(255,255,255,0.02);
        }
        .tcl-compare-placeholder i { width: 20px; height: 20px; opacity: 0.4; }
        .tcl-compare-badge {
            position: absolute; top: 6px; left: 6px; font-size: 0.52rem; font-weight: 800;
            padding: 0.12rem 0.4rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em;
        }
        .tcl-compare-badge.tcl-badge-before { background: rgba(239,68,68,0.85); color: #fff; }
        .tcl-compare-badge.tcl-badge-after { background: rgba(34,197,94,0.85); color: #fff; }
        .tcl-compare-meta {
            display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
            gap: 0.2rem; margin-top: 0.35rem; font-size: 0.62rem;
        }
        .tcl-compare-fname { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
        .tcl-compare-fsize { color: var(--text-muted); flex-shrink: 0; }
        .tcl-compare-actions { display: flex; gap: 0.35rem; margin-top: 0.3rem; }
        .tcl-compare-icon-btn {
            width: 28px; height: 28px; border-radius: var(--radius-xs); border: 1px solid var(--border);
            background: rgba(255,255,255,0.04); color: var(--text-muted); cursor: pointer;
            display: flex; align-items: center; justify-content: center; padding: 0;
        }
        .tcl-compare-icon-btn:hover { border-color: var(--primary); color: var(--primary-light); }
        .tcl-compare-icon-btn.danger:hover { border-color: #ef4444; color: #fca5a5; }
        .tcl-compare-icon-btn i { width: 13px; height: 13px; }
        .tcl-combined-upload-zone {
            border: 2px dashed var(--border); border-radius: var(--radius-xs); padding: 0.75rem 0.5rem;
            text-align: center; cursor: pointer; background: rgba(255,255,255,0.02); transition: var(--transition);
        }
        .tcl-combined-upload-zone:hover, .tcl-combined-upload-zone.drag-over {
            border-color: #7c3aed; background: rgba(124,58,237,0.06); color: var(--text);
        }
        .tcl-combined-upload-zone i { display: block; margin: 0 auto 0.2rem; width: 16px; height: 16px; opacity: 0.55; }
        .tcl-combined-upload-zone strong { display: block; font-size: 0.68rem; color: var(--text); margin-bottom: 0.15rem; }
        .tcl-combined-upload-zone span { font-size: 0.58rem; color: var(--text-muted); }
        .tcl-extra-thumbs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; }
        .tcl-extra-thumb {
            position: relative; width: 40px; height: 40px; border-radius: 4px; overflow: hidden;
            border: 1px solid var(--border); cursor: pointer;
        }
        .tcl-extra-thumb .image-thumb-delete-btn { width: 16px; height: 16px; font-size: 11px; top: 2px; right: 2px; }
        .tcl-extra-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .tcl-compare-btn-row { margin-top: 0.35rem; display: flex; justify-content: center; }
        .tcl-compare-btn-row .algo-btn { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
        #test-checklist-pdf-source {
            position: fixed; left: 0; top: 0;
            width: 794px; max-width: 794px; min-width: 794px;
            box-sizing: border-box;
            background: #ffffff; color: #1a1a2e;
            font-family: 'Segoe UI', Arial, sans-serif;
            font-size: 13px; line-height: 1.55;
            padding: 40px;
            z-index: -9999; pointer-events: none; opacity: 0; overflow: hidden;
            clip: rect(0, 0, 0, 0); clip-path: inset(50%);
        }
        #test-checklist-pdf-source.tcl-pdf-capturing {
            z-index: 2147483645; opacity: 1; overflow: visible;
            clip: auto; clip-path: none;
        }
        #tcl-pdf-preview-overlay { position: fixed; inset: 0; z-index: 2147483646; background: rgba(0,0,0,0.88); overflow: auto; padding: 20px; box-sizing: border-box; }
        #tcl-pdf-preview-overlay .tcl-pdf-preview-inner { max-width: 874px; margin: 0 auto; }
        #tcl-pdf-preview-overlay .tcl-pdf-preview-header { color: #fff; font-size: 13px; margin-bottom: 10px; text-align: center; }
        #tcl-pdf-preview-overlay .tcl-pdf-preview-body { background: #fff; color: #1a1a2e; padding: 40px; width: 794px; max-width: 100%; box-sizing: border-box; margin: 0 auto; font-family: 'Segoe UI', Arial, sans-serif; }
        #tcl-pdf-preview-overlay .tcl-pdf-preview-actions { text-align: center; margin-top: 16px; }
        #test-checklist-pdf-source, #test-checklist-pdf-source * {
            box-sizing: border-box;
            word-break: normal;
            overflow-wrap: break-word;
            white-space: normal;
        }
        #test-checklist-pdf-source .tcl-pdf-report { width: 100%; color: #1a1a2e; }
        #test-checklist-pdf-source .tcl-pdf-doc-header {
            border-bottom: 2px solid #e5e7eb; padding-bottom: 20px; margin-bottom: 24px;
        }
        #test-checklist-pdf-source .tcl-pdf-doc-brand {
            font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #6b7280; margin-bottom: 8px;
        }
        #test-checklist-pdf-source .tcl-pdf-doc-title {
            font-size: 22px; font-weight: 700; color: #111827; margin: 0 0 8px; line-height: 1.3;
        }
        #test-checklist-pdf-source .tcl-pdf-doc-project,
        #test-checklist-pdf-source .tcl-pdf-doc-date {
            font-size: 12px; color: #4b5563; margin: 4px 0 0;
        }
        #test-checklist-pdf-source .tcl-pdf-section { margin-bottom: 28px; width: 100%; }
        #test-checklist-pdf-source .tcl-pdf-section-title {
            font-size: 14px; font-weight: 700; color: #111827;
            margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb;
        }
        #test-checklist-pdf-source .tcl-pdf-section-meta {
            display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: #4b5563;
            margin: -4px 0 14px;
        }
        #test-checklist-pdf-source .tcl-pdf-section-meta span { white-space: nowrap; }
        #test-checklist-pdf-source .tcl-pdf-summary {
            background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
            padding: 16px 18px; margin-bottom: 28px;
        }
        #test-checklist-pdf-source .tcl-pdf-summary-grid {
            display: flex; flex-wrap: wrap; gap: 12px; width: 100%;
        }
        #test-checklist-pdf-source .tcl-pdf-stat {
            flex: 1 1 120px; min-width: 100px;
            background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
            padding: 12px 10px; text-align: center;
        }
        #test-checklist-pdf-source .tcl-pdf-stat-val {
            display: block; font-size: 22px; font-weight: 800; color: #111827; line-height: 1.2;
        }
        #test-checklist-pdf-source .tcl-pdf-stat-lbl {
            display: block; font-size: 10px; font-weight: 600; color: #6b7280;
            text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
        }
        #test-checklist-pdf-source .tcl-pdf-stat-pass .tcl-pdf-stat-val { color: #15803d; }
        #test-checklist-pdf-source .tcl-pdf-stat-fail .tcl-pdf-stat-val { color: #b91c1c; }
        #test-checklist-pdf-source .tcl-pdf-stat-wait .tcl-pdf-stat-val { color: #a16207; }
        #test-checklist-pdf-source .tcl-pdf-stat-rate .tcl-pdf-stat-val { color: #1d4ed8; }
        #test-checklist-pdf-source .tcl-pdf-text {
            font-size: 13px; color: #374151; line-height: 1.6; margin: 0;
        }
        #test-checklist-pdf-source .tcl-pdf-cards { display: flex; flex-direction: column; gap: 20px; width: 100%; }
        #test-checklist-pdf-source .tcl-pdf-card {
            width: 100%; border: 1px solid #d1d5db; border-radius: 8px;
            padding: 16px 18px; background: #fff;
        }
        #test-checklist-pdf-source .tcl-pdf-card-head {
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f3f4f6;
        }
        #test-checklist-pdf-source .tcl-pdf-card-num {
            font-size: 12px; font-weight: 700; color: #6b7280; flex-shrink: 0;
        }
        #test-checklist-pdf-source .tcl-pdf-card-title {
            flex: 1; min-width: 0; font-size: 15px; font-weight: 700;
            color: #111827; margin: 0; line-height: 1.35;
        }
        #test-checklist-pdf-source .tcl-pdf-status {
            font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
            text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
        }
        #test-checklist-pdf-source .tcl-pdf-st-passed { background: #dcfce7; color: #15803d; }
        #test-checklist-pdf-source .tcl-pdf-st-failed { background: #fee2e2; color: #b91c1c; }
        #test-checklist-pdf-source .tcl-pdf-st-pending { background: #fef9c3; color: #a16207; }
        #test-checklist-pdf-source .tcl-pdf-st-retest { background: #ede9fe; color: #6d28d9; }
        #test-checklist-pdf-source .tcl-pdf-fields { display: flex; flex-direction: column; gap: 10px; width: 100%; }
        #test-checklist-pdf-source .tcl-pdf-field { width: 100%; }
        #test-checklist-pdf-source .tcl-pdf-field-row {
            display: flex; gap: 16px; width: 100%;
        }
        #test-checklist-pdf-source .tcl-pdf-field-row .tcl-pdf-field { flex: 1; min-width: 0; }
        #test-checklist-pdf-source .tcl-pdf-lbl {
            display: block; font-size: 10px; font-weight: 700; color: #6b7280;
            text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px;
        }
        #test-checklist-pdf-source .tcl-pdf-val {
            display: block; font-size: 13px; color: #1f2937; line-height: 1.55;
        }
        #test-checklist-pdf-source .tcl-pdf-field-issue .tcl-pdf-val { color: #b91c1c; }
        #test-checklist-pdf-source .tcl-pdf-images { margin-top: 14px; width: 100%; }
        #test-checklist-pdf-source .tcl-pdf-img-row {
            display: flex; flex-direction: row; gap: 4%; width: 100%; margin-top: 10px;
        }
        #test-checklist-pdf-source .tcl-pdf-img-slot { width: 48%; min-width: 0; }
        #test-checklist-pdf-source .tcl-pdf-img-label {
            font-size: 10px; font-weight: 700; color: #6b7280;
            text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; text-align: center;
        }
        #test-checklist-pdf-source .tcl-pdf-img-frame {
            width: 100%; min-height: 120px; border: 1px solid #d1d5db; border-radius: 6px;
            background: #f9fafb; display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        #test-checklist-pdf-source .tcl-pdf-img-frame img {
            width: 100%; max-height: 220px; object-fit: contain; display: block;
        }
        #test-checklist-pdf-source .pdf-test-item { width: 100%; margin-bottom: 20px; }
        #test-checklist-pdf-source .pdf-test-card {
            break-inside: avoid;
            page-break-inside: avoid;
        }
        #test-checklist-pdf-source .pdf-visual-compare-block {
            break-inside: avoid;
            page-break-inside: avoid;
            margin-top: 24px;
            width: 100%;
        }
        #test-checklist-pdf-source .pdf-page-break,
        #test-checklist-pdf-source .pdf-page-break-spacer {
            break-before: page;
            page-break-before: always;
            width: 100%;
            height: 0;
            margin: 0;
            padding: 0;
            border: none;
            background: transparent;
            flex-shrink: 0;
        }
        #test-checklist-pdf-source .tcl-pdf-img-empty {
            font-size: 12px; color: #9ca3af; font-style: italic; text-align: center; padding: 24px 8px;
        }
        #test-checklist-pdf-source .tcl-pdf-footer {
            margin-top: 8px; padding-top: 20px; border-top: 2px solid #e5e7eb;
        }
        #test-checklist-pdf-source .tcl-pdf-empty {
            font-size: 13px; color: #6b7280; font-style: italic; padding: 12px 0;
        }
        #modal-test-image-view .modal-content { width: min(92vw, 720px); }
        #modal-test-image-view .modal-body { padding: 0; text-align: center; background: #0a0a0a; }
        #modal-test-image-view img { max-width: 100%; max-height: 75vh; object-fit: contain; display: block; margin: 0 auto; }
        #modal-test-image-compare .modal-content { width: min(92vw, 960px); max-height: 92vh; display: flex; flex-direction: column; }
        #modal-test-image-compare .modal-body { padding: 0; overflow: hidden; flex: 1; min-height: 0; }
        .tcl-compare-viewport { position: relative; width: 100%; height: min(70vh, 620px); background: #0a0a0a; overflow: hidden; user-select: none; touch-action: none; }
        .tcl-compare-viewport img { position: absolute; top: 0; left: 0; height: 100%; object-fit: contain; pointer-events: none; }
        #tcl-compare-before { width: 100%; }
        .tcl-compare-after-wrap { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; width: 50%; }
        #tcl-compare-after { max-width: none; }
        .tcl-compare-handle {
            position: absolute; top: 0; bottom: 0; width: 3px; background: var(--primary); transform: translateX(-50%);
            cursor: ew-resize; z-index: 5;
        }
        .tcl-compare-handle::after {
            content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 36px; height: 36px; border-radius: 50%; background: var(--primary); border: 3px solid #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
        }
        .tcl-compare-labels { display: flex; justify-content: space-between; padding: 0.5rem 1rem; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
        @media (max-width: 900px) {
            .tcl-summary-grid { grid-template-columns: repeat(3, 1fr); }
            .tcl-item-body { grid-template-columns: 1fr; }
            .tcl-item-images-col { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 0.75rem; }
        }
        @media (max-width: 480px) {
            .tcl-summary-grid { grid-template-columns: repeat(2, 1fr); }
            .tcl-stats-row { flex-direction: column; align-items: center; }
            .tcl-field-row-2 { grid-template-columns: 1fr; }
            .tcl-compare-slots-row { grid-template-columns: 1fr; }
            .tcl-toolbar { flex-direction: column; align-items: stretch; }
            .tcl-toolbar .tcl-toolbar-left, .tcl-toolbar .tcl-toolbar-right { width: 100%; margin-left: 0; }
            .tcl-toolbar .algo-btn { width: 100%; justify-content: center; }
        }

        /* DAI FINANS OPERASYON MERKEZİ */
        .dai-fin-page { --dai-bg: #030712; --dai-panel: rgba(8, 14, 32, 0.92); --dai-border: rgba(245, 158, 11, 0.12); --dai-gold: #f59e0b; --dai-neon-up: #00ff88; --dai-neon-down: #ff3355; --dai-text-dim: #6b7a94; display: flex; flex-direction: column; gap: 0.75rem; min-height: calc(100vh - 140px); font-family: 'Inter', monospace; }
        .dai-fin-disclaimer { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-sm); padding: 0.55rem 0.85rem; font-size: 0.72rem; color: var(--dai-gold); display: flex; align-items: center; gap: 0.5rem; line-height: 1.4; }
        .dai-fin-disclaimer i { width: 14px; height: 14px; flex-shrink: 0; }
        .dai-fin-topbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; }
        .dai-fin-search { flex: 1; min-width: 200px; position: relative; }
        .dai-fin-search input { width: 100%; padding: 0.55rem 0.75rem 0.55rem 2rem; background: rgba(0,0,0,0.35); border: 1px solid rgba(0,255,136,0.15); border-radius: var(--radius-xs); color: var(--text); font-size: 0.82rem; font-family: 'Inter', monospace; letter-spacing: 0.04em; outline: none; }
        .dai-fin-search input:focus { border-color: var(--dai-gold); box-shadow: 0 0 12px rgba(245,158,11,0.15); }
        .dai-fin-search i { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--dai-gold); }
        .dai-fin-quick-syms { display: flex; gap: 0.35rem; flex-wrap: wrap; }
        .dai-fin-sym-chip { padding: 0.35rem 0.65rem; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xs); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: var(--transition); font-family: 'Inter', monospace; }
        .dai-fin-sym-chip:hover, .dai-fin-sym-chip.active { border-color: var(--dai-gold); color: var(--dai-gold); background: rgba(245,158,11,0.08); }
        .dai-fin-run-btn { padding: 0.5rem 1rem; background: linear-gradient(135deg, #f59e0b, #d97706); border: none; border-radius: var(--radius-xs); color: #fff; font-weight: 700; font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
        .dai-fin-run-btn:hover { filter: brightness(1.08); }
        .dai-fin-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .dai-fin-layout { display: grid; grid-template-columns: 200px 1fr 300px; grid-template-rows: 1fr auto; gap: 0.75rem; flex: 1; min-height: 520px; }
        .dai-fin-sidebar { grid-row: 1 / 3; background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.65rem; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; }
        .dai-fin-nav-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-xs); cursor: pointer; font-size: 0.78rem; color: var(--text-muted); border: 1px solid transparent; transition: var(--transition); }
        .dai-fin-nav-item i { width: 15px; height: 15px; }
        .dai-fin-nav-item:hover { background: rgba(255,255,255,0.03); color: var(--text); }
        .dai-fin-nav-item.active { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: var(--dai-gold); }
        .dai-fin-center { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
        .dai-fin-quote-bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; }
        .dai-fin-symbol { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--dai-gold); letter-spacing: 0.06em; }
        .dai-fin-price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
        .dai-fin-price.up { color: var(--dai-neon-up); text-shadow: 0 0 20px rgba(0,255,136,0.3); }
        .dai-fin-price.down { color: var(--dai-neon-down); text-shadow: 0 0 20px rgba(255,51,85,0.3); }
        .dai-fin-change { font-size: 0.85rem; font-weight: 600; }
        .dai-fin-change.up { color: var(--dai-neon-up); }
        .dai-fin-change.down { color: var(--dai-neon-down); }
        .dai-fin-chart-wrap { flex: none; background: linear-gradient(180deg, rgba(4, 10, 28, 0.98) 0%, rgba(6, 14, 36, 0.95) 100%); border: 1px solid rgba(0, 255, 136, 0.08); border-radius: var(--radius-sm); padding: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); max-height: 920px; }
        .dai-fin-chart-toolbar { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding: 0.45rem 0.65rem; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.25); flex-shrink: 0; }
        .dai-fin-chart-source { font-size: 0.68rem; color: var(--dai-text-dim); margin-left: 0.35rem; white-space: nowrap; font-weight: 600; }
        .dai-fin-data-badge { font-size: 0.72rem; font-weight: 800; padding: 0.3rem 0.7rem; border-radius: 6px; margin-left: auto; white-space: nowrap; letter-spacing: 0.03em; text-transform: uppercase; }
        .dai-fin-data-badge.live { background: rgba(0,255,136,0.18); color: var(--dai-neon-up); border: 1px solid rgba(0,255,136,0.45); box-shadow: 0 0 14px rgba(0,255,136,0.15); }
        .dai-fin-data-badge.manual { background: rgba(245,158,11,0.18); color: var(--dai-gold); border: 1px solid rgba(245,158,11,0.45); box-shadow: 0 0 14px rgba(245,158,11,0.12); }
        .dai-fin-data-badge.demo { background: rgba(255,51,85,0.18); color: var(--dai-neon-down); border: 1px solid rgba(255,51,85,0.45); box-shadow: 0 0 14px rgba(255,51,85,0.12); }
        .dai-fin-data-badge.loading { background: rgba(255,255,255,0.04); color: var(--dai-text-dim); border: 1px solid rgba(255,255,255,0.08); }
        .dai-fin-source-alert { font-size: 0.68rem; line-height: 1.5; padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; border-radius: var(--radius-xs); border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.25); }
        .dai-fin-source-alert.demo { border-color: rgba(255,51,85,0.35); background: rgba(255,51,85,0.08); }
        .dai-fin-source-alert.manual { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.08); }
        .dai-fin-source-alert.live { border-color: rgba(0,255,136,0.35); background: rgba(0,255,136,0.06); }
        .dai-src-fail { color: var(--dai-neon-down); }
        .dai-src-ok { color: var(--dai-neon-up); }
        .dai-src-skip { color: var(--text-muted); }
        .dai-src-selected { color: var(--dai-gold); font-weight: 700; margin-left: 0.35rem; }
        .dai-fin-quote-bar .dai-fin-data-badge { margin-left: 0.5rem; font-size: 0.65rem; }
        .dai-fin-chart-mode-btn, .dai-fin-chart-ov-btn, .dai-fin-chart-zoom-btn { padding: 0.28rem 0.55rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.35); color: var(--dai-text-dim); cursor: pointer; transition: var(--transition); font-family: 'Inter', monospace; }
        .dai-fin-chart-mode-btn:hover, .dai-fin-chart-ov-btn:hover, .dai-fin-chart-zoom-btn:hover { border-color: rgba(245,158,11,0.35); color: var(--text); }
        .dai-fin-chart-mode-btn.active { border-color: var(--dai-gold); color: var(--dai-gold); background: rgba(245,158,11,0.1); }
        .dai-fin-chart-ov-btn.active { border-color: rgba(0,255,136,0.35); color: var(--dai-neon-up); background: rgba(0,255,136,0.06); }
        .dai-fin-chart-ov-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.08); margin: 0 0.25rem; }
        .dai-fin-chart-zoom-bar { position: absolute; top: 42px; right: 8px; z-index: 6; display: flex; align-items: center; gap: 0.2rem; padding: 0.25rem 0.35rem; background: rgba(4,10,28,0.92); border: 1px solid rgba(245,158,11,0.2); border-radius: 6px; backdrop-filter: blur(6px); max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: thin; }
        .dai-fin-chart-zoom-btn { min-width: 28px; padding: 0.22rem 0.4rem; flex-shrink: 0; }
        .dai-fin-chart-zoom-btn.active { border-color: var(--dai-gold); color: var(--dai-gold); }
        .dai-fin-chart-stack { flex: none; display: flex; flex-direction: column; height: 840px; overflow: hidden; touch-action: none; user-select: none; cursor: grab; }
        .dai-fin-chart-stack.dai-fin-chart-dragging { cursor: grabbing; }
        .dai-fin-chart-panel { position: relative; border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink: 0; overflow: hidden; }
        .dai-fin-chart-panel:last-child { border-bottom: none; }
        .dai-fin-chart-panel-main { height: 420px; min-height: 420px; max-height: 420px; }
        .dai-fin-chart-panel-vol { height: 120px; min-height: 120px; max-height: 120px; }
        .dai-fin-chart-panel-ind-rsi { height: 140px; min-height: 140px; max-height: 140px; }
        .dai-fin-chart-panel-ind-macd { height: 160px; min-height: 160px; max-height: 160px; }
        .dai-fin-chart-panel canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
        .dai-fin-chart-panel-label { position: absolute; top: 4px; left: 6px; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dai-text-dim); pointer-events: none; z-index: 2; }
        @media (max-width: 768px) {
            .dai-fin-chart-stack { height: 560px; }
            .dai-fin-chart-panel-main { height: 280px; min-height: 280px; max-height: 280px; }
            .dai-fin-chart-panel-vol { height: 80px; min-height: 80px; max-height: 80px; }
            .dai-fin-chart-panel-ind-rsi { height: 100px; min-height: 100px; max-height: 100px; }
            .dai-fin-chart-panel-ind-macd { height: 100px; min-height: 100px; max-height: 100px; }
            .dai-fin-chart-zoom-bar { top: 38px; right: 4px; }
        }
        .dai-fin-signal-bar { display: flex; align-items: stretch; gap: 0.5rem; padding: 0.45rem 0.65rem; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.3); font-size: 0.72rem; }
        .dai-fin-signal-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 800; font-size: 0.7rem; letter-spacing: 0.08em; font-family: var(--font-display); }
        .dai-fin-signal-badge.al { background: rgba(0,255,136,0.15); color: var(--dai-neon-up); border: 1px solid rgba(0,255,136,0.35); box-shadow: 0 0 12px rgba(0,255,136,0.15); }
        .dai-fin-signal-badge.sat { background: rgba(255,51,85,0.15); color: var(--dai-neon-down); border: 1px solid rgba(255,51,85,0.35); box-shadow: 0 0 12px rgba(255,51,85,0.15); }
        .dai-fin-signal-badge.bekle { background: rgba(107,122,148,0.15); color: var(--dai-text-dim); border: 1px solid rgba(107,122,148,0.35); }
        .dai-fin-signal-detail { flex: 1; color: var(--text-muted); line-height: 1.45; }
        .dai-fin-signal-reasons { font-size: 0.65rem; color: var(--dai-text-dim); margin-top: 0.15rem; }
        .dai-fin-sr-legend { display: flex; gap: 0.75rem; font-size: 0.6rem; color: var(--dai-text-dim); margin-left: auto; }
        .dai-fin-sr-legend span { display: flex; align-items: center; gap: 0.25rem; }
        .dai-fin-sr-legend .sup { color: var(--dai-neon-up); }
        .dai-fin-sr-legend .res { color: var(--dai-neon-down); }
        .dai-fin-right { background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.85rem; overflow-y: auto; max-height: 100%; }
        .dai-fin-right-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dai-gold); font-weight: 700; margin-bottom: 0.65rem; display: flex; align-items: center; gap: 0.4rem; }
        .dai-fin-ai-box { font-size: 0.78rem; line-height: 1.55; color: var(--text); }
        .dai-fin-ai-box p { margin-bottom: 0.5rem; }
        .dai-fin-agent-tag { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; margin-right: 0.35rem; margin-bottom: 0.35rem; }
        .dai-fin-agent-tag.news { background: rgba(59,130,246,0.2); color: #60a5fa; }
        .dai-fin-agent-tag.tech { background: rgba(16,185,129,0.2); color: #34d399; }
        .dai-fin-agent-tag.risk { background: rgba(239,68,68,0.2); color: #f87171; }
        .dai-fin-agent-tag.org { background: rgba(245,158,11,0.2); color: #fbbf24; }
        .dai-fin-bottom { grid-column: 2 / 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
        .dai-fin-panel { background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.75rem; min-height: 140px; overflow-y: auto; max-height: 200px; }
        .dai-fin-panel-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dai-text-dim); font-weight: 700; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.35rem; }
        .dai-fin-panel-body { font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); }
        .dai-fin-ind-row { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .dai-fin-ind-val.bull { color: var(--dai-neon-up); }
        .dai-fin-ind-val.bear { color: var(--dai-neon-down); }
        .dai-fin-ind-val.neut { color: var(--text-muted); }
        .dai-fin-section-view { display: none; }
        .dai-fin-section-view.active { display: block; animation: fadeIn 0.25s ease; }
        .dai-fin-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
        .dai-fin-card { background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.85rem; }
        .dai-fin-card h4 { font-size: 0.82rem; color: var(--dai-gold); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.4rem; }
        .dai-fin-news-item { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
        .dai-fin-news-item:last-child { border: none; }
        .dai-fin-news-title { font-size: 0.78rem; color: var(--text); font-weight: 500; margin-bottom: 0.2rem; }
        .dai-fin-news-meta { font-size: 0.65rem; color: var(--dai-text-dim); }
        .dai-fin-watch-item { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.78rem; }
        .dai-fin-api-field { margin-bottom: 0.75rem; }
        .dai-fin-api-field label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.3rem; font-weight: 600; }
        .dai-fin-api-field input { width: 100%; padding: 0.5rem 0.65rem; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-size: 0.78rem; font-family: monospace; }
        .dai-fin-api-field input[type="password"] { letter-spacing: 0.15em; }
        .dai-fin-status { font-size: 0.72rem; padding: 0.35rem 0.55rem; border-radius: var(--radius-xs); display: inline-flex; align-items: center; gap: 0.35rem; }
        .dai-fin-status.ok { background: rgba(0,255,136,0.1); color: var(--dai-neon-up); }
        .dai-fin-status.warn { background: rgba(245,158,11,0.1); color: var(--dai-gold); }
        .dai-fin-status.err { background: rgba(255,51,85,0.1); color: var(--dai-neon-down); }
        .dai-fin-log { font-family: monospace; font-size: 0.68rem; color: var(--dai-text-dim); max-height: 120px; overflow-y: auto; background: rgba(0,0,0,0.3); padding: 0.5rem; border-radius: var(--radius-xs); margin-top: 0.5rem; }
        .dai-fin-log-line { padding: 0.15rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
        .dai-fin-sentiment-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; display: flex; margin: 0.5rem 0; }
        .dai-fin-sentiment-bar .bull { background: var(--dai-neon-up); }
        .dai-fin-sentiment-bar .bear { background: var(--dai-neon-down); }
        .dai-fin-sentiment-bar .neut { background: var(--dai-text-dim); }
        /* Piyasa Tarama & Terminal Panelleri */
        .dai-fin-scan-wrap { background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); overflow: hidden; }
        .dai-fin-scan-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.25); flex-wrap: wrap; gap: 0.5rem; }
        .dai-fin-scan-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
        .dai-fin-scan-table th { text-align: left; padding: 0.55rem 0.5rem; color: var(--dai-text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2); white-space: nowrap; }
        .dai-fin-scan-table td { padding: 0.5rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
        .dai-fin-scan-row { cursor: pointer; transition: background 0.15s; }
        .dai-fin-scan-row:hover { background: rgba(0,255,136,0.04); }
        .dai-fin-scan-sym { font-weight: 800; color: #38bdf8; font-size: 0.78rem; }
        .dai-fin-scan-name { font-size: 0.62rem; color: var(--dai-text-dim); display: block; }
        .dai-fin-score-bar { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 72px; }
        .dai-fin-score-track { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; min-width: 48px; }
        .dai-fin-score-fill { height: 100%; background: linear-gradient(90deg, var(--dai-neon-up), #34d399); border-radius: 3px; box-shadow: 0 0 8px rgba(0,255,136,0.35); }
        .dai-fin-outlook-badge { display: inline-block; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
        .dai-fin-outlook-badge.pos { background: rgba(0,255,136,0.12); color: var(--dai-neon-up); border: 1px solid rgba(0,255,136,0.25); }
        .dai-fin-outlook-badge.neg { background: rgba(255,51,85,0.12); color: var(--dai-neon-down); border: 1px solid rgba(255,51,85,0.25); }
        .dai-fin-outlook-badge.neut { background: rgba(107,122,148,0.15); color: var(--dai-text-dim); border: 1px solid rgba(107,122,148,0.25); }
        .dai-fin-outlook-badge.strong-pos { background: rgba(0,255,136,0.18); color: #34d399; border: 1px solid rgba(0,255,136,0.4); }
        .dai-fin-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
        .dai-fin-tech-cell { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-xs); padding: 0.45rem 0.55rem; }
        .dai-fin-tech-cell label { display: block; font-size: 0.58rem; color: var(--dai-text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.15rem; }
        .dai-fin-tech-cell span { font-size: 0.82rem; font-weight: 700; color: var(--text); font-family: var(--font-display); }
        .dai-fin-tech-cell span.up { color: var(--dai-neon-up); }
        .dai-fin-tech-cell span.down { color: var(--dai-neon-down); }
        .dai-fin-analysis-block { background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.75rem; margin-top: 0.75rem; }
        .dai-fin-analysis-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dai-gold); font-weight: 700; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; }
        .dai-fin-sentiment-gauge { margin: 0.5rem 0; }
        .dai-fin-sentiment-scale { display: flex; justify-content: space-between; font-size: 0.58rem; color: var(--dai-text-dim); margin-bottom: 0.25rem; }
        .dai-fin-sentiment-track { height: 8px; background: linear-gradient(90deg, var(--dai-neon-down), var(--dai-text-dim) 50%, var(--dai-neon-up)); border-radius: 4px; position: relative; }
        .dai-fin-sentiment-marker { position: absolute; top: -3px; width: 3px; height: 14px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,0.5); transform: translateX(-50%); }
        .dai-fin-comments-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
        .dai-fin-comment-col h5 { font-size: 0.65rem; text-transform: uppercase; margin-bottom: 0.4rem; }
        .dai-fin-comment-col.pos h5 { color: var(--dai-neon-up); }
        .dai-fin-comment-col.neg h5 { color: var(--dai-neon-down); }
        .dai-fin-comment-item { font-size: 0.72rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); line-height: 1.45; }
        .dai-fin-comment-meta { font-size: 0.6rem; color: var(--dai-text-dim); margin-top: 0.15rem; }
        .dai-fin-demo-tag { display: inline-block; padding: 0.1rem 0.35rem; border-radius: 3px; font-size: 0.55rem; font-weight: 700; background: rgba(245,158,11,0.15); color: var(--dai-gold); border: 1px solid rgba(245,158,11,0.3); margin-left: 0.25rem; }
        .dai-fin-outlook-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
        .dai-fin-outlook-card { background: var(--dai-panel); border: 1px solid var(--dai-border); border-radius: var(--radius-sm); padding: 0.75rem; text-align: center; }
        .dai-fin-outlook-card h4 { font-size: 0.68rem; color: var(--dai-gold); margin-bottom: 0.35rem; text-transform: uppercase; }
        .dai-fin-outlook-card .period { font-size: 0.58rem; color: var(--dai-text-dim); margin-bottom: 0.5rem; }
        .dai-fin-outlook-card .score { font-size: 1.4rem; font-weight: 800; font-family: var(--font-display); margin: 0.35rem 0; }
        .dai-fin-outlook-card .desc { font-size: 0.68rem; color: var(--text-muted); line-height: 1.4; }
        .dai-fin-panel-src { font-size: 0.58rem; color: var(--dai-text-dim); margin-top: 0.5rem; padding-top: 0.35rem; border-top: 1px solid rgba(255,255,255,0.04); }
        .dai-fin-no-data { font-size: 0.72rem; color: var(--dai-text-dim); font-style: italic; padding: 0.5rem 0; }
        .dai-fin-alarm-list { display: flex; flex-direction: column; gap: 0.5rem; }
        .dai-fin-alarm-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.65rem; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-xs); font-size: 0.75rem; }
        .dai-fin-alarm-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-top: 0.75rem; align-items: end; }
        .dai-fin-alarm-form select, .dai-fin-alarm-form input { padding: 0.45rem; background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: var(--radius-xs); color: var(--text); font-size: 0.75rem; }
        .dai-fin-alarm-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; max-width: 360px; padding: 0.75rem 1rem; background: rgba(8,14,32,0.98); border: 1px solid rgba(0,255,136,0.35); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.5); font-size: 0.75rem; animation: fadeIn 0.3s ease; }
        .dai-fin-news-dev { margin-top: 0.75rem; }
        .dai-fin-kap-placeholder { padding: 0.65rem; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.1); border-radius: var(--radius-xs); font-size: 0.68rem; color: var(--dai-text-dim); margin-top: 0.5rem; }
        .dai-fin-signal-badge.momentum { background: rgba(0,255,136,0.15); color: var(--dai-neon-up); border: 1px solid rgba(0,255,136,0.35); }
        .dai-fin-signal-badge.risk { background: rgba(255,51,85,0.15); color: var(--dai-neon-down); border: 1px solid rgba(255,51,85,0.35); }
        .dai-fin-signal-badge.watch { background: rgba(107,122,148,0.15); color: var(--dai-text-dim); border: 1px solid rgba(107,122,148,0.35); }
        .dai-fin-signal-badge.overbought { background: rgba(245,158,11,0.15); color: var(--dai-gold); border: 1px solid rgba(245,158,11,0.35); }
        .dai-fin-signal-badge.oversold { background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.35); }
        @media (max-width: 1200px) {
            .dai-fin-layout { grid-template-columns: 1fr; grid-template-rows: auto; }
            .dai-fin-sidebar { grid-row: auto; flex-direction: row; flex-wrap: wrap; }
            .dai-fin-right { max-height: 300px; }
            .dai-fin-bottom { grid-column: 1; grid-template-columns: 1fr; }
            .dai-fin-tech-grid { grid-template-columns: repeat(2, 1fr); }
            .dai-fin-outlook-row { grid-template-columns: 1fr; }
            .dai-fin-comments-split { grid-template-columns: 1fr; }
        }