/* ============== SVG ICON SYSTEM ============== */
        .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            flex-shrink: 0;
        }
        .icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }
        .icon-18 { width: 18px; height: 18px; }
        .icon-20 { width: 20px; height: 20px; }
        .icon-24 { width: 24px; height: 24px; }
        
        /* Icon with text spacing */
        .icon + span, span + .icon, .icon + text { margin-left: 4px; }
        
        /* ============== CSS RESET & BASE ============== */
        * { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box;
        }
        
        /* ============== CSS VARIABLES (8px Grid System) ============== */
        :root {
            /* Spacing (8px base) */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;
            --space-10: 40px;
            
            /* Colors - Background (LuStruct / lumocad palette) */
            --bg-base: #070a12;
            --bg-primary: #0a0e17;
            --bg-secondary: #111827;
            --bg-tertiary: #1a2236;
            --bg-elevated: #232e44;
            
            /* Colors - Accent */
            --accent-primary: var(--primary);
            --accent-primary-hover: #2563eb;
            --accent-success: var(--success);
            --accent-success-hover: #059669;
            --accent-warning: var(--warning);
            --accent-danger: var(--danger);
            /* Yazi mavisi ARTIK --primary degil. --primary dolgulu dugmelerin
               zemini; ayni tonu koyu kart uzerinde YAZI olarak kullanmak 4.18
               kontrast veriyordu (4.5 gerekli). Bir basamak acigi 6.04 verir ve
               dugme zeminine dokunmaz. */
            --accent-info: #60a5fa;

            /* Dolgulu dugmelerin ZEMINI. --primary'nin kendisi degismiyor:
               o ayni zamanda 3B gorunumdeki kiris rengi, vurgu ve kenarlik;
               koyultmak kirisleri koyu tuval uzerinde soluklastirirdi. Beyaz
               yazi --primary uzerinde 3.68, --success uzerinde 2.28 kontrast
               veriyordu; asagidaki tonlarda 5.17 ve 5.02. */
            --primary-fill: #2563eb;
            --success-fill: #15803d;

            /* Tehlike rengi YAZI olarak. --danger dolgu icin secilmis; ayni
               tonu cerceveli dugmede yazi olarak kullanmak koyu zeminde 3.94,
               acik zeminde 3.44 kontrast veriyordu. */
            --danger-text: #f87171;
            
            /* Colors - Text */
            --text-primary: #f1f5f9;
            --text-secondary: var(--text-2);
            --text-muted: var(--text-3);
            --text-disabled: var(--text-3);
            
            /* Colors - Border */
            --border-subtle: rgba(255,255,255,0.06);
            --border-default: #1e293b;
            --border-strong: #334155;
            --border-focus: var(--accent-primary);
            
            /* Shadows */
            --shadow-sm: none;             /* yuzmeyen yuzeyde golge olmaz, 1px cizgi yeter */
            --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
            --shadow-glow-primary: none;   /* parlama yok: durumu renk ve kenarlik anlatir */
            --shadow-glow-success: none;
            
            /* Border Radius */
            --radius-sm: var(--r-ctl);
            --radius-md: var(--r-ctl);
            --radius-lg: var(--r-ovl);
            --radius-xl: var(--r-ovl);
            
            /* Transitions */
            --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
            
            /* Typography */
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
            --bg-input: #0d1321;
            --font-size-xs: var(--fs-xs);
            --font-size-sm: var(--fs-sm);
            --font-size-base: var(--fs-sm);
            --font-size-lg: var(--fs-md);
            --font-size-xl: var(--fs-lg);
            --font-size-2xl: 1.25rem;
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-semibold: 600;
            /* Arayuz uc agirlik kullaniyor: 400 / 500 / 600.
               Bu token 700 idi ve olcegi disaridan bozuyordu. */
            --font-weight-bold: 600;
        }
        
        /* ============== GLOBAL STYLES ============== */
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        body {
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-normal);
            background: var(--bg-base);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transition: background 0.3s, color 0.3s;
        }
        
        /* ============== LIGHT MODE ============== */
        body.light-mode {
            --bg-base: #f8fafc;
            --bg-primary: #ffffff;
            --bg-secondary: #f1f5f9;
            --bg-tertiary: #e2e8f0;
            --bg-elevated: #cbd5e1;
            --bg-panel: #ffffff;
            
            --text-primary: #1e293b;
            --text-secondary: #475569;
            --text-muted: var(--text-3);
            --text-disabled: #94a3b8;
            
            --border-subtle: rgba(0,0,0,0.06);
            --border-default: #e2e8f0;
            --border-strong: #cbd5e1;
            
            --shadow-sm: none;
            --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
        }
        
        body.light-mode .header {
            background: #ffffff;
            border-bottom-color: #e2e8f0;
        }
        
        body.light-mode .canvas-container {
            background: #f8fafc;
        }
        
        body.light-mode .toolbar-group {
            background: rgba(241, 245, 249, 0.8);
            border-color: #e2e8f0;
        }
        
        body.light-mode .toolbar-btn {
            color: var(--text-3);
        }
        
        body.light-mode .toolbar-btn:hover {
            background: #e2e8f0;
        }
        
        body.light-mode .toolbar-btn.active {
            background: var(--primary-fill);
            color: white;
        }
        
        body.light-mode .data-table th {
            background: #f1f5f9;
            color: var(--text-3);
        }
        
        body.light-mode .data-table td {
            border-color: #e2e8f0;
        }
        
        body.light-mode .collapsible-header {
            background: #f1f5f9;
        }
        
        body.light-mode .btn-secondary {
            background: #f1f5f9;
            border-color: #e2e8f0;
            color: var(--text-3);
        }
        
        body.light-mode .btn-secondary:hover {
            background: #e2e8f0;
        }
        
        /* ============== AUTOCAD COMMAND SYSTEM ============== */
        
        /* Command/Status Bar */
        .command-bar {
            position: relative;
            flex-shrink: 0;
            width: 100%;
            height: 28px;
            background: var(--bg-elev);
            border-top: 1px solid var(--border-default);
            display: flex;
            align-items: center;
            padding: 0 12px;
            font-family: var(--font-mono);
            font-size:var(--fs-xs);
            z-index: 60;
            gap: 8px;
        }
        
        .command-bar-status {
            color: var(--success);
            font-weight: 500;
            min-width: 50px;
        }
        
        .command-bar-message {
            color: var(--text-primary);
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .command-bar-input {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-default);
            border-radius:var(--r-ctl);
            color: var(--warning);
            font-family: inherit;
            font-size:var(--fs-xs);
            padding: 2px 8px;
            width: 120px;
            outline: none;
        }
        
        .command-bar-input:focus {
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        
        .command-bar-hints {
            color: var(--text-muted);
            font-size:var(--fs-xs);
            white-space: nowrap;
            overflow: hidden;
        }
        
        .command-bar-hints span {
            color: var(--accent-info);
            margin: 0 1px;
        }
        
        .command-bar-coords {
            color: var(--text-secondary);
            font-size:var(--fs-xs);
            min-width: 120px;
            text-align: right;
            white-space: nowrap;
        }
        
        .command-bar-ortho {
            padding: 2px 8px;
            border-radius:var(--r-ctl);
            font-size:var(--fs-xs);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        /* Rozet zemini --success; acik temada bu ton koyulasinca siyah yazi
           4.19'a dusuyordu. Beyaz yazi her iki temada da esigi geciyor. */
        .command-bar-ortho.active {
            background: var(--success-fill);
            color: #fff;
        }
        
        .command-bar-ortho.inactive {
            background: var(--bg-tertiary);
            color: var(--text-muted);
        }
        
        body.light-mode .command-bar {
            background: #f1f5f9;
            border-top-color: var(--text-2);
        }
        
        body.light-mode .command-bar-input {
            background: #fff;
            border-color: var(--text-2);
        }
        
        /* Dynamic Input Box (follows cursor) */
        .dynamic-input-box {
            position: fixed;
            display: none;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid var(--accent-primary);
            border-radius:var(--r-ctl);
            padding: 4px 8px;
            font-family: var(--font-mono);
            font-size:var(--fs-sm);
            z-index: 10000;
            pointer-events: none;
            box-shadow: none;
        }
        
        .dynamic-input-box.active {
            display: flex;
            align-items: center;
            gap: 8px;
            pointer-events: auto;
        }
        
        .dynamic-input-box input {
            background: transparent;
            border: none;
            color: var(--warning);
            font-family: inherit;
            font-size:var(--fs-sm);
            width: 70px;
            outline: none;
            text-align: right;
        }
        
        .dynamic-input-box .unit {
            color: var(--text-muted);
            font-size:var(--fs-xs);
        }
        
        .dynamic-input-box .separator {
            color: var(--text-muted);
        }
        
        /* Preview Elements */
        .preview-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 100;
        }
        
        /* Base Point Marker */
        .base-point-marker {
            position: fixed;
            width: 16px;
            height: 16px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            display: none;
        }
        
        .base-point-marker.visible {
            display: block;
        }
        
        .base-point-marker::before,
        .base-point-marker::after {
            content: '';
            position: absolute;
            background: var(--danger);
        }
        
        .base-point-marker::before {
            width: 16px;
            height: 2px;
            top: 7px;
            left: 0;
        }
        
        .base-point-marker::after {
            width: 2px;
            height: 16px;
            top: 0;
            left: 7px;
        }
        
        /* Direction Line */
        .direction-line {
            position: fixed;
            height: 1px;
            background: repeating-linear-gradient(
                90deg,
                var(--success) 0px,
                var(--success) 4px,
                transparent 4px,
                transparent 8px
            );
            transform-origin: left center;
            pointer-events: none;
            z-index: 9998;
            display: none;
        }
        
        .direction-line.visible {
            display: block;
        }
        
        /* Angle Arc for Rotate */
        .angle-indicator {
            position: fixed;
            pointer-events: none;
            z-index: 9997;
            display: none;
        }
        
        .angle-indicator.visible {
            display: block;
        }
        
        /* Mirror Line */
        .mirror-line-preview {
            position: fixed;
            width: 2px;
            background: repeating-linear-gradient(
                0deg,
                var(--primary) 0px,
                var(--primary) 6px,
                transparent 6px,
                transparent 12px
            );
            transform-origin: top center;
            pointer-events: none;
            z-index: 9998;
            display: none;
        }
        
        .mirror-line-preview.visible {
            display: block;
        }
        
        /* Split Point Indicator */
        .split-point-indicator {
            position: fixed;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--success);
            border: 2px solid #fff;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            display: none;
            box-shadow: none;
        }
        
        .split-point-indicator.visible {
            display: block;
        }
        
        /* Tooltip for ratios/distances */
        .cmd-tooltip {
            position: fixed;
            background: rgba(15, 23, 42, 0.95);
            border: 1px solid var(--border-default);
            border-radius:var(--r-ctl);
            padding: 4px 8px;
            font-size:var(--fs-xs);
            color: var(--text-primary);
            pointer-events: none;
            z-index: 10001;
            display: none;
            white-space: nowrap;
        }
        
        .cmd-tooltip.visible {
            display: block;
        }
        
        .cmd-tooltip .ratio {
            color: var(--success);
            font-weight: 600;
        }
        
        .cmd-tooltip .distance {
            color: var(--primary-text);
            margin-left: 8px;
        }
        
        /* Command Active Indicator on Toolbar */
        .toolbar-btn.cmd-active {
            background: var(--success-fill) !important;
            color: white !important;
            box-shadow: none;
        }
        
        body.light-mode .result-card {
            background: #f1f5f9;
            border-color: #e2e8f0;
        }
        
        body.light-mode .results-bottom-panel {
            background: #ffffff;
            border-top-color: var(--primary-text);
        }
        
        body.light-mode .results-bottom-header {
            background: #f1f5f9;
        }
        
        body.light-mode .results-data-table th {
            background: #f1f5f9;
            color: var(--text-3);
        }
        
        body.light-mode .modal {
            background: #ffffff;
        }
        
        body.light-mode input,
        body.light-mode select,
        body.light-mode textarea {
            background: #ffffff;
            border-color: #e2e8f0;
            color: #1e293b;
        }
        
        /* .context-menu zaten --bg-panel / --border kullaniyor ve light-mode bu
           iki tokeni yeniden tanimliyor; burada tek gereken, koyu zemin icin
           ayarlanmis golgeyi acik zeminde yumusatmak. */
        body.light-mode .context-menu {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        }

        body.light-mode .context-menu-item:hover {
            background: #f1f5f9;
        }
        
        body.light-mode #viewInfoOverlay {
            background: rgba(255, 255, 255, 0.9);
            color: var(--text-3);
        }
        
        body.light-mode #viewInfoOverlay span:first-child {
            color: var(--primary-text);
        }
        
        /* Smooth transitions for interactive elements */
        a, button, input, select, textarea {
            transition: all var(--transition-base);
        }
        
        /* ============== HEADER ============== */
        .header {
            position: relative;
            z-index: 10;
            flex-shrink: 0;
            background: rgba(30,41,59,0.95);
            padding: var(--space-4) var(--space-6);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4);
            border-bottom: 1px solid var(--border-default);
            backdrop-filter: blur(10px);
        }
        
        .header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
            opacity: 0.6;
        }
        
        .brand {
            display: flex;
            align-items: center;
            gap: var(--space-3);
        }
        
        .brand-logo {
            width: 42px;
            height: 42px;
            border-radius: var(--radius-lg);
            background: var(--accent-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-mono);
            font-weight: 600;
            font-size:var(--fs-lg);
            color: #fff;
            letter-spacing: -0.5px;
            flex-shrink: 0;
            box-shadow: none;
        }
        
        .brand-titles {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }
        
        .brand-name {
            font-family: var(--font-mono);
            font-size:var(--fs-lg);
            font-weight: 600;
            color: var(--text-primary);
            letter-spacing: -0.5px;
            line-height: 1.1;
            margin: 0;
        }
        
        .brand-subtitle {
            font-size: var(--font-size-sm);
            color: var(--text-muted);
            letter-spacing: 0.3px;
            margin: 0;
        }
        
        .brand-badge {
            font-family: var(--font-mono);
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            background: var(--bg-tertiary);
            padding: 4px 8px;
            border-radius:var(--r-ovl);
            border: 1px solid var(--border-default);
            white-space: nowrap;
            align-self: center;
            margin-left: var(--space-2);
        }
        
        .logo {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-bold);
            color: var(--accent-info);
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .logo-version {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            color: var(--text-muted);
            background: var(--bg-tertiary);
            padding: 2px 8px;
            border-radius: var(--radius-sm);
        }
        
        .header-actions {
            display: flex;
            gap: var(--space-2);
            align-items: center;
        }
        
        /* ============== MAIN LAYOUT ============== */
        .main {
            display: flex;
            width: 100%;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }
        
        /* ============== PANELS ============== */
        .panel {
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-default);
            overflow-y: auto;
            padding: var(--space-4);
            width: 320px;
            flex-shrink: 0;
        }
        
        .panel:last-child {
            border-right: none;
            border-left: 1px solid var(--border-default);
            width: 350px;
        }
        
        /* Custom scrollbar */
        .panel::-webkit-scrollbar {
            width: 6px;
        }
        
        .panel::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }
        
        .panel::-webkit-scrollbar-thumb {
            background: var(--bg-elevated);
            border-radius:var(--r-ctl);
        }
        
        .panel::-webkit-scrollbar-thumb:hover {
            background: var(--border-strong);
        }
        
        .panel h2 {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--accent-info);
            margin-bottom: var(--space-4);
            padding-bottom: var(--space-2);
            border-bottom: 1px solid var(--border-default);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .panel h3 {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
            margin: var(--space-4) 0 var(--space-3) 0;
        }
        
        /* ============== FORM ELEMENTS ============== */
        .form-group {
            margin-bottom: var(--space-3);
        }
        
        .form-group label {
            display: block;
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: var(--space-1);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-2);
        }
        
        .form-row-3 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--space-2);
        }
        
        input, select {
            width: 100%;
            padding: var(--space-2) var(--space-3);
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-md);
            background: var(--bg-input);
            color: var(--text-primary);
            font-family: var(--font-family);
            font-size: var(--font-size-base);
            transition: all var(--transition-fast);
        }
        
        input:hover, select:hover {
            border-color: var(--text-muted);
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: var(--border-focus);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }
        
        input[type="number"] {
            text-align: right;
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.02em;
            padding-right: var(--space-2);
        }
        
        /* Clean custom number spinner */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
            width: 18px;
            height: calc(100% + 2px);
            margin-right: -8px;
            cursor: pointer;
            background:
                linear-gradient(var(--text-muted) 0 0) center / 8px 1.5px no-repeat;
            opacity: 0;
            transition: opacity var(--transition-fast);
        }
        
        /* Firefox: hide default, we rely on typing */
        input[type="number"] {
            -moz-appearance: textfield;
        }
        
        input::placeholder {
            color: var(--text-muted);
        }
        
        /* Checkbox styling */
        input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--accent-primary);
        }
        
        /* ============== CUSTOM NUMBER STEPPER ============== */
        .num-wrap {
            position: relative;
            display: block;
            width: 100%;
            min-width: 0;
        }
        
        .num-wrap input[type="number"] {
            width: 100%;
            padding-right: 16px;
        }
        
        .num-stepper {
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            width: 15px;
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--border-default);
            opacity: 0;
            transition: opacity var(--transition-fast);
            background: var(--bg-input);
        }
        
        .num-wrap:hover .num-stepper,
        .num-wrap:focus-within .num-stepper {
            opacity: 1;
        }
        
        .num-stepper button {
            flex: 1;
            padding: 0;
            min-width: 0;
            background: transparent;
            border: none;
            border-radius: 0;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background var(--transition-fast), color var(--transition-fast);
        }
        
        .num-stepper button:first-child {
            border-bottom: 1px solid var(--border-default);
        }
        
        .num-stepper button:hover {
            background: var(--accent-primary);
            color: #fff;
        }
        
        .num-stepper button:active {
            transform: none;
        }
        
        .num-stepper svg {
            width: 9px;
            height: 9px;
            stroke: currentColor;
            stroke-width: 2.5;
            fill: none;
        }
        
        /* ============== BUTTONS ============== */
        button {
            padding: var(--space-2) var(--space-4);
            border: none;
            border-radius: var(--radius-md);
            font-family: var(--font-family);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: all var(--transition-fast);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
        }
        
        button:active {
            transform: scale(0.97);
        }
        
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        .btn-primary {
            background: var(--accent-primary);
            color: white;
            box-shadow: var(--shadow-sm);
        }
        
        .btn-primary:hover:not(:disabled) {
            box-shadow: var(--shadow-glow-primary);
            transform: translateY(-1px);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.055);
            color: var(--text-primary);
            /* Zemin tonu sinirini zaten cizyor, cerceve ikinci kez cizmesin.
               Odak halkasi ve :hover kendi kurallarinda duruyor. */
            border: 1px solid transparent;
        }
        
        .btn-secondary:hover:not(:disabled) {
            background: var(--bg-elevated);
            border-color: var(--border-strong);
        }
        
        .btn-success {
            background: var(--success-fill-fill);
            color: white;
            box-shadow: var(--shadow-sm);
        }
        
        .btn-success:hover:not(:disabled) {
            box-shadow: var(--shadow-glow-success);
            transform: translateY(-1px);
        }
        
        .btn-danger {
            background: var(--accent-danger);
            color: white;
        }
        
        .btn-danger:hover:not(:disabled) {
            background: var(--danger);
        }
        
        .btn-small {
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-xs);
        }
        
        .btn-block {
            width: 100%;
        }
        
        /* Color Swatch Buttons */
        .color-swatch {
            width: 28px;
            height: 28px;
            border-radius:var(--r-ctl);
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: none;
        }
        .color-swatch:hover {
            transform: scale(1.1);
            box-shadow: none;
        }
        .color-swatch.active {
            border-color: #fff;
            box-shadow: 0 0 0 2px var(--accent-primary), 0 2px 8px rgba(0,0,0,0.4);
        }
        
        .btn-group {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-3);
        }
        
        .btn-icon {
            padding: var(--space-2);
            min-width: 32px;
        }
        
        .btn-block {
            width: 100%;
        }
        
        /* ============== SOLVE SECTION ============== */
        .solve-section {
            background: var(--bg-tertiary);
            padding: var(--space-4);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
            border: 1px solid var(--border-default);
        }
        
        .solve-btn {
            padding: var(--space-4);
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            background: var(--success-fill-fill);
            color: white;
            border: none;
            border-radius: var(--radius-lg);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            transition: all var(--transition-base);
            position: relative;
            overflow: hidden;
        }
        
        .solve-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        
        .solve-btn:hover:not(:disabled)::before {
            left: 100%;
        }
        
        .solve-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: var(--shadow-glow-success);
        }
        
        .solve-btn:active:not(:disabled) {
            transform: translateY(0) scale(0.98);
        }
        
        .solve-btn:disabled {
            background: var(--bg-elevated);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .solve-btn.loading {
            pointer-events: none;
        }
        
        .solve-btn.loading .btn-text {
            opacity: 0;
        }
        
        .solve-btn.loading::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        /* ============== LOADING SPINNER ============== */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-default);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        .loading-spinner.lg {
            width: 32px;
            height: 32px;
            border-width: 3px;
        }
        
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(8, 12, 20, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(4px);
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }
        
        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .loading-overlay .loading-spinner {
            width: 48px;
            height: 48px;
            border-width: 4px;
        }
        
        .loading-overlay .loading-text {
            margin-top: var(--space-4);
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
        }
        
        /* ============== TOAST NOTIFICATIONS ============== */
        .toast-container {
            position: fixed;
            /* Ust cubuk + sekme cubugunun ALTINDA (37 + 32 px): 16px'te bildirim
               "Sign in" dugmesinin, 56px'te Import/Export dugmelerinin ustune
               biniyordu. */
            top: 76px;
            right: var(--space-4);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            pointer-events: none;
        }
        
        .toast {
            background: var(--bg-secondary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            padding: var(--space-3) var(--space-4);
            min-width: 280px;
            max-width: 400px;
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            pointer-events: auto;
            transform: translateX(120%);
            opacity: 0;
            transition: all var(--transition-slow);
        }
        
        .toast.show {
            transform: translateX(0);
            opacity: 1;
        }
        
        .toast.hiding {
            transform: translateX(120%);
            opacity: 0;
        }
        
        /* Status Bar */
        .status-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 26px;
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-top: 1px solid var(--border-subtle);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            font-size:var(--fs-sm);
            color: var(--text-2);
            z-index: 50;
            gap: 16px;
            pointer-events: none;
        }
        
        .status-bar > * {
            pointer-events: auto;
        }
        
        /* View info overlay - top line inside canvas */
        .canvas-viewinfo {
            position: absolute;
            bottom: 34px;
            left: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 4px 12px;
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            font-size:var(--fs-xs);
            z-index: 50;
            pointer-events: none;
            max-width: calc(100% - 24px);
        }
        
        .canvas-viewinfo #viewModeName {
            color: var(--accent-info);
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            white-space: nowrap;
        }
        
        .canvas-viewinfo-hints {
            color: var(--text-muted);
            font-size:var(--fs-xs);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* ============== APP FOOTER ============== */
        .app-footer {
            position: relative;
            flex-shrink: 0;
            height: 26px;
            z-index: 101;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 var(--space-6);
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-default);
        }
        
        .app-footer::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
            opacity: 0.3;
        }
        
        .app-footer-signature {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
        }
        
        .app-footer-signature strong {
            color: var(--text-secondary);
            font-weight: var(--font-weight-semibold);
        }
        
        .app-footer-meta {
            font-family: var(--font-mono);
            font-size: var(--font-size-xs);
            color: var(--text-muted);
        }
        
        .status-bar .status-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1;
            overflow: hidden;
        }
        
        .status-bar .status-right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }
        
        .status-bar .status-sep {
            width: 1px;
            height: 12px;
            background: var(--border-default);
            flex-shrink: 0;
        }
        
        .status-bar #viewModeName {
            color: var(--accent-info);
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            white-space: nowrap;
        }
        
        .status-bar .status-hints {
            color: var(--text-muted);
            font-size:var(--fs-xs);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }
        
        .status-bar .status-message {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        
        .status-bar .status-message.success { color: var(--success); }
        .status-bar .status-message.error { color: var(--danger-text); }
        .status-bar .status-message.warning { color: var(--warning); }
        
        .status-bar .status-info {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-3);
            font-size:var(--fs-xs);
        }
        
        .status-bar .selection-mode {
            display: flex;
            gap: 4px;
        }
        
        .status-bar .selection-mode button {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            color: var(--text-2);
            padding: 2px 8px;
            border-radius:var(--r-ctl);
            font-size:var(--fs-xs);
            cursor: pointer;
        }
        
        .status-bar .selection-mode button.active {
            background: var(--primary-fill);
            border-color: var(--primary-text);
            color: white;
        }
        
        .status-bar .selection-mode button:hover:not(.active) {
            background: var(--bg-hover);
        }
        
        .toast-icon {
            font-size: var(--fs-md);
            flex-shrink: 0;
        }
        
        .toast-content {
            flex: 1;
            min-width: 0;
        }
        
        .toast-title {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            margin-bottom: 2px;
        }
        
        .toast-message {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            line-height: 1.4;
        }
        
        .toast-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 2px;
            font-size: var(--font-size-lg);
            line-height: 1;
            opacity: 0.6;
            transition: opacity var(--transition-fast);
        }
        
        .toast-close:hover {
            opacity: 1;
        }
        
        .toast-close:active {
            transform: none;
        }
        
        .toast.success {
            border-left: 3px solid var(--accent-success);
        }
        
        .toast.success .toast-icon {
            color: var(--accent-success);
        }
        
        .toast.error {
            border-left: 3px solid var(--accent-danger);
        }
        
        .toast.error .toast-icon {
            color: var(--accent-danger);
        }
        
        .toast.warning {
            border-left: 3px solid var(--accent-warning);
        }
        
        .toast.warning .toast-icon {
            color: var(--accent-warning);
        }
        
        .toast.info {
            border-left: 3px solid var(--accent-info);
        }
        
        .toast.info .toast-icon {
            color: var(--accent-info);
        }
        
        /* Toast progress bar */
        .toast-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: currentColor;
            opacity: 0.3;
            border-radius: 0 0 0 var(--radius-lg);
            animation: toast-progress linear forwards;
        }
        
        @keyframes toast-progress {
            from { width: 100%; }
            to { width: 0%; }
        }
        
        /* ============== CANVAS AREA ============== */
        .canvas-area {
            background: var(--bg-primary);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            flex: 1;
        }
        
        .canvas-toolbar {
            padding: var(--space-2) var(--space-3);
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-default);
            display: flex;
            gap: var(--space-2);
            align-items: center;
            flex-wrap: wrap;
        }
        
        .toolbar-group {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            padding: var(--space-1) var(--space-2);
            background: rgba(255, 255, 255, 0.04);
            border-radius: var(--radius-md);
            /* Cerceve kaldirildi: yedi arac grubu birden kutuya giriyordu.
               Ayirma isini zemin tonu ve bosluk yapiyor. */
            border: 1px solid transparent;
        }
        
        .toolbar-group-label {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            text-transform: uppercase;
            font-weight: var(--font-weight-semibold);
            margin-right: var(--space-1);
            letter-spacing: 0.5px;
        }
        
        .toolbar-divider {
            width: 1px;
            height: 24px;
            background: var(--border-default);
            margin: 0 var(--space-1);
        }
        
        .toolbar-btn {
            padding: var(--space-1) var(--space-2);
            border: none;
            border-radius: var(--radius-sm);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: all var(--transition-fast);
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }
        
        .toolbar-btn:hover {
            background: var(--bg-elevated);
            color: var(--text-primary);
        }
        
        .toolbar-btn:active {
            transform: scale(0.95);
        }
        
        .toolbar-btn.active {
            background: var(--accent-primary);
            color: white;
            box-shadow: var(--shadow-glow-primary);
        }
        
        .toolbar-btn.success {
            background: var(--success-fill-fill);
            color: white;
        }
        
        .toolbar-btn-icon {
            padding: var(--space-1) var(--space-2);
            font-size: var(--font-size-base);
        }
        
        .zoom-display {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            min-width: 40px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        
        .canvas-container {
            flex: 1;
            position: relative;
            overflow: hidden;
            min-height: 300px;
            min-width: 300px;
            /* Sonuc paneli sabit konumlu ve kanvasin uzerine biniyordu; model ve
               gerilme lejanti tablonun altinda kaliyordu. Kanvas artik panelin
               ustunde bitiyor - degeri syncResultsPanelSpace() ayarliyor. */
            margin-bottom: var(--results-h, 0px);
        }
        
        #mainCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        /* View Mode Buttons */
        .view-mode-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 12px;
            background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(71, 85, 105, 0.5);
            color: var(--text-2);
            border-radius:var(--r-ctl);
            font-size:var(--fs-sm);
            cursor: pointer;
            transition: all 0.2s;
            backdrop-filter: blur(8px);
        }
        
        .view-mode-btn:hover {
            background: rgba(51, 65, 85, 0.9);
            border-color: var(--primary-text);
            color: #e2e8f0;
        }
        
        .view-mode-btn.active {
            background: var(--primary-fill);
            border-color: var(--primary-text);
            color: white;
            box-shadow: none;
        }
        
        .view-mode-btn svg {
            opacity: 0.8;
        }
        
        .view-mode-btn.active svg {
            opacity: 1;
        }
        
        /* Display Size Slider Control */
        .display-size-control {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(71, 85, 105, 0.5);
            border-radius:var(--r-ctl);
            backdrop-filter: blur(8px);
        }
        
        .display-size-control input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            background: var(--bg-hover);
            border-radius:var(--r-ctl);
            outline: none;
        }
        
        .display-size-control input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 12px;
            height: 12px;
            background: var(--primary);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .display-size-control input[type="range"]::-webkit-slider-thumb:hover {
            background: var(--primary);
            transform: scale(1.2);
        }
        
        .display-size-control input[type="range"]::-moz-range-thumb {
            width: 12px;
            height: 12px;
            background: var(--primary);
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        
        body.light-mode .display-size-control {
            background: rgba(241, 245, 249, 0.9);
            border-color: #e2e8f0;
        }
        
        body.light-mode .display-size-control input[type="range"] {
            background: var(--text-2);
        }
        
        /* ============== RESULT CARDS ============== */
        .result-card {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            margin-bottom: var(--space-3);
            border: 1px solid var(--border-default);
            transition: all var(--transition-fast);
        }
        
        .result-card:hover {
            border-color: var(--border-strong);
            box-shadow: var(--shadow-sm);
        }
        
        .result-card .label {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            color: var(--text-muted);
            margin-bottom: var(--space-1);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .result-card .value {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            color: var(--accent-info);
            font-variant-numeric: tabular-nums;
        }
        
        .result-card .unit {
            font-size: var(--font-size-sm);
            color: var(--text-muted);
            margin-left: var(--space-1);
            font-weight: var(--font-weight-normal);
        }
        
        .result-card.warning .value {
            color: var(--accent-warning);
        }
        
        .result-card.danger .value {
            color: var(--accent-danger);
        }
        
        .result-card.success .value {
            color: var(--accent-success);
        }
        
        /* Results Grid */
        .results-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-3);
        }
        
        /* ============== DATA TABLE ============== */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--font-size-sm);
            margin-top: var(--space-3);
        }
        
        .data-table th {
            background: var(--bg-tertiary);
            padding: var(--space-2);
            text-align: left;
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
            font-size: var(--font-size-xs);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .data-table th:first-child {
            border-radius: var(--radius-sm) 0 0 0;
        }
        
        .data-table th:last-child {
            border-radius: 0 var(--radius-sm) 0 0;
        }
        
        .data-table td {
            padding: var(--space-2);
            border-bottom: 1px solid var(--border-default);
            transition: background var(--transition-fast);
        }
        
        .data-table tr:hover td {
            background: rgba(59, 130, 246, 0.08);
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        /* ============== STATUS BAR ============== */
        .status-bar {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
        }
        
        .status-ok { color: var(--accent-success); }
        .status-warning { color: var(--accent-warning); }
        .status-error { color: var(--accent-danger); }
        
        /* ============== TABS ============== */
        .tabs {
            display: flex;
            gap: 2px;
            margin-bottom: var(--space-4);
            background: var(--bg-primary);
            padding: var(--space-1);
            border-radius: var(--radius-lg);
        }
        
        .tab {
            flex: 1;
            padding: var(--space-2);
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }
        
        .tab:hover:not(.active) {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }
        
        .tab.active {
            background: var(--accent-primary);
            color: white;
            font-weight: var(--font-weight-semibold);
            box-shadow: var(--shadow-sm);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* ============== INFO BOX ============== */
        .info-box {
            background: rgba(59, 130, 246, 0.08);
            border-left: 3px solid var(--accent-primary);
            padding: var(--space-3);
            margin-bottom: var(--space-4);
            font-size: var(--font-size-sm);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            color: var(--text-secondary);
        }
        
        .info-box.warning {
            background: rgba(245, 158, 11, 0.08);
            border-left-color: var(--accent-warning);
        }
        
        .info-box.success {
            background: rgba(16, 185, 129, 0.08);
            border-left-color: var(--accent-success);
        }
        
        /* ============== COLOR SCALE ============== */
        .color-scale {
            height: 20px;
            /* Bu bir degrade DEGIL, bir olcek: gerilme rampasinin kendisi.
               Krom degradeleri duzlestirilirken bu bilerek korunur. */
            background: linear-gradient(90deg, #3b82f6, #22c55e, #eab308, #f97316, #ef4444);
            border-radius: var(--radius-sm);
            margin: var(--space-3) 0;
        }
        
        .scale-labels {
            display: flex;
            justify-content: space-between;
            font-size: var(--font-size-xs);
            color: var(--text-muted);
        }
        
        /* ============== QUICK SETUP ============== */
        .quick-setup {
            background: var(--bg-tertiary);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            margin-bottom: var(--space-4);
            border: 1px solid var(--border-default);
        }

        /* ============== DIVIDER ============== */
        .divider {
            height: 1px;
            background: var(--border-default);
            margin: var(--space-4) 0;
        }
        
        /* ============== LEGEND ============== */
        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-3);
            font-size: var(--font-size-xs);
            margin-top: var(--space-3);
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: var(--space-1);
            color: var(--text-secondary);
        }
        
        .legend-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        /* ============== LIMIT INPUT ============== */
        .limit-input {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            margin-bottom: var(--space-3);
        }
        
        .limit-input label {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        
        .limit-input input {
            width: 100%;
        }
        
        /* ============== MAIN TAB BAR ============== */
        .main-tab-bar {
            display: flex;
            flex-shrink: 0;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-default);
            padding: 0 var(--space-4);
            gap: var(--space-1);
        }
        
        .main-tab {
            padding: var(--space-3) var(--space-5);
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: all var(--transition-fast);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .main-tab:hover {
            color: var(--text-secondary);
            background: rgba(59, 130, 246, 0.05);
        }
        
        .main-tab.active {
            color: var(--accent-info);
            border-bottom-color: var(--accent-info);
            background: rgba(59, 130, 246, 0.08);
        }
        
        .main-tab-icon {
            font-size: var(--font-size-lg);
        }
        
        .main-tab-content {
            display: none;
        }
        
        .main-tab-content.active {
            display: block;
        }
        
        /* ============== ENTITY INFO PANEL ============== */
        .entity-info-panel {
            background: var(--bg-secondary);
            border-left: 1px solid var(--border-default);
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            width: 280px;
            min-width: 200px;
            max-width: 450px;
            flex-shrink: 0;
        }
        
        .entity-info-header {
            padding: var(--space-4);
            border-bottom: 1px solid var(--border-default);
            background: var(--bg-tertiary);
        }
        
        .entity-info-header h3 {
            color: var(--accent-info);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .entity-info-body {
            flex: 1;
            padding: var(--space-4);
            overflow-y: auto;
        }
        
        /* Bos durum 445 px yer tutuyordu - iki satir yazi icin. Sag panelin
           yarisindan fazlasi, ve altindaki Model ozeti asagi itiliyordu.
           Bos durum bir DURUM bildirimidir, bir bolum degil. */
        .entity-info-empty {
            text-align: center;
            padding: var(--space-4) var(--space-3);
            color: var(--text-muted);
        }
        
        .entity-info-empty .icon {
            font-size:var(--fs-md);
            margin-bottom: var(--space-2);
            opacity: 0.5;
        }
        
        .entity-section {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: var(--space-3);
            margin-bottom: var(--space-3);
            border: 1px solid var(--border-default);
        }
        
        .entity-section-title {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-2);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .entity-property {
            display: flex;
            justify-content: space-between;
            padding: var(--space-1) 0;
            font-size: var(--font-size-sm);
            border-bottom: 1px solid var(--border-subtle);
        }
        
        .entity-property:last-child {
            border-bottom: none;
        }
        
        .entity-property .label {
            color: var(--text-secondary);
        }
        
        .entity-property .value {
            color: var(--text-primary);
            font-weight: var(--font-weight-medium);
            font-variant-numeric: tabular-nums;
        }
        
        .entity-property .value.highlight {
            color: var(--accent-info);
        }
        
        /* ============== SECTION DIAGRAM ============== */
        .section-diagram {
            background: var(--bg-primary);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            margin-bottom: var(--space-3);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 150px;
            border: 1px solid var(--border-default);
        }
        
        .section-diagram svg {
            max-width: 100%;
            max-height: 150px;
        }
        
        /* ============== ENTITY ACTIONS ============== */
        .entity-actions {
            display: flex;
            gap: var(--space-2);
            padding: var(--space-4);
            border-top: 1px solid var(--border-default);
            background: var(--bg-secondary);
        }
        
        .entity-actions button {
            flex: 1;
        }
        
        /* ============== COLLAPSIBLE PANEL ============== */
        .collapsible-panel {
            background: var(--bg-primary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-3);
            overflow: hidden;
            transition: all var(--transition-fast);
        }
        
        .collapsible-panel:hover {
            border-color: var(--border-strong);
        }
        
        .collapsible-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3);
            background: var(--bg-secondary);
            cursor: pointer;
            user-select: none;
            transition: all var(--transition-fast);
        }
        
        .collapsible-header:hover {
            background: var(--bg-tertiary);
        }
        
        .collapsible-header .title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
        }
        
        .collapsible-header .title .icon {
            font-size: var(--font-size-base);
        }
        
        .collapsible-header .count {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            padding: 2px 8px;
            border-radius: var(--radius-xl);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
        }
        
        .collapsible-header .arrow {
            color: var(--text-muted);
            font-size: var(--font-size-sm);
            transition: transform var(--transition-fast);
        }
        
        .collapsible-header.open .arrow {
            transform: rotate(180deg);
        }
        
        .collapsible-content {
            display: none;
            padding: var(--space-3);
            border-top: 1px solid var(--border-default);
            animation: slideDown var(--transition-fast) ease-out;
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .collapsible-content.open {
            display: block;
        }
        
        /* ============== ENGINEERING DATASHEET ============== */
        .datasheet {
            display: flex;
            flex-direction: column;
        }
        
        .datasheet-row {
            display: grid;
            grid-template-columns: 1fr auto auto;
            align-items: baseline;
            gap: var(--space-3);
            padding: var(--space-2) 0;
            border-bottom: 1px solid var(--border-subtle);
        }
        
        .datasheet-row:last-child {
            border-bottom: none;
        }
        
        .datasheet-row .ds-key {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }
        
        .datasheet-row .ds-val {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
            text-align: right;
            min-width: 64px;
        }
        
        .datasheet-row .ds-unit {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            text-align: left;
            min-width: 48px;
            font-variant-numeric: tabular-nums;
        }
        
        .datasheet-sub {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            letter-spacing: 0.02em;
            margin-top: var(--space-1);
        }
        
        /* Read-only material display */
        .readonly-field {
            padding: var(--space-2) var(--space-3);
            background: var(--bg-secondary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            color: var(--text-primary);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        /* ============== PRO FIELD SYSTEM ============== */
        .field-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }
        
        .field {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            flex: 1;
        }
        
        .field-label {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .field-label.accent {
            color: var(--accent-info);
        }
        
        .field input,
        .field select {
            padding: var(--space-2) var(--space-3);
            font-size: var(--font-size-sm);
        }
        
        .field-row {
            display: flex;
            gap: var(--space-2);
        }
        
        /* ============== SEGMENTED CONTROL (Pro Tabs) ============== */
        .segmented {
            display: flex;
            gap: 2px;
            padding: 4px;
            background: var(--bg-primary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
        }
        
        .segmented button {
            flex: 1;
            padding: var(--space-2) 0;
            background: transparent;
            border: none;
            border-radius: var(--radius-sm);
            color: var(--text-secondary);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .segmented button:hover:not(.active) {
            color: var(--text-primary);
            background: var(--bg-tertiary);
        }
        
        .segmented button.active {
            background: var(--accent-primary);
            color: white;
            box-shadow: var(--shadow-sm);
        }
        
        /* ============== UNDERLINE TABS ============== */
        .underline-tabs {
            display: flex;
            gap: var(--space-1);
            border-bottom: 1px solid var(--border-default);
            margin-bottom: var(--space-3);
        }
        
        .underline-tabs button {
            flex: 1;
            padding: var(--space-2) 0;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            color: var(--text-muted);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            letter-spacing: 0.03em;
            cursor: pointer;
            transition: color var(--transition-fast), border-color var(--transition-fast);
            margin-bottom: -1px;
        }
        
        .underline-tabs button:hover:not(.active) {
            color: var(--text-secondary);
        }
        
        .underline-tabs button.active {
            color: var(--accent-info);
            border-bottom-color: var(--accent-info);
        }
        
        /* ============== PRO SECTION DIVIDER ============== */
        .section-divider {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin: var(--space-4) 0 var(--space-3);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        
        .section-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-default);
        }
        
        .or-divider {
            text-align: center;
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            margin: var(--space-2) 0;
            position: relative;
        }
        
        /* ============== PRO PROFILE PREVIEW ============== */
        .profile-preview-pro {
            background-color: var(--bg-base);
            background-image:
                linear-gradient(var(--border-subtle) 1px, transparent 1px),
                var(--border-subtle) 1px;
            background-size: 20px 20px;
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            height: 190px;
            margin-bottom: var(--space-3);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: border-color var(--transition-fast);
        }
        
        .profile-preview-pro:hover {
            border-color: var(--accent-info);
        }
        
        .profile-preview-pro .preview-badge {
            position: absolute;
            bottom: var(--space-2);
            right: var(--space-3);
            font-size:var(--fs-xs);
            color: var(--text-muted);
            letter-spacing: 0.02em;
        }
        
        .profile-preview-pro .expand-hint {
            position: absolute;
            top: var(--space-2);
            right: var(--space-2);
            opacity: 0;
            transition: opacity var(--transition-fast);
            color: var(--text-muted);
            /* Artik gercek bir dugme: kendi zemini ve cercevesi olmasin,
               ama tiklanabilir oldugu imlecten anlasilsin. */
            background: none;
            border: none;
            padding: 2px;
            cursor: pointer;
            line-height: 0;
        }

        .profile-preview-pro .expand-hint:hover {
            color: var(--accent-info);
        }

        /* Dokunmatikte hover yok - simge hep gorunsun. */
        @media (hover: none) {
            .profile-preview-pro .expand-hint { opacity: 0.6; }
        }
        
        .profile-preview-pro:hover .expand-hint {
            opacity: 1;
        }
        
        /* ============== PRO INLINE CHECKBOX ROW ============== */
        .check-row {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-3);
            background: var(--bg-primary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .check-row:hover {
            border-color: var(--border-strong);
        }
        
        .check-row label {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            cursor: pointer;
            margin: 0;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .check-row.accent {
            background: rgba(56, 189, 248, 0.08);
            border-color: rgba(56, 189, 248, 0.25);
        }
        
        .check-row.accent label {
            color: var(--accent-info);
        }
        
        /* Radio pill group */
        .radio-pills {
            display: flex;
            gap: var(--space-2);
        }
        
        .radio-pill {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-2);
            background: var(--bg-primary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .radio-pill:has(input:checked) {
            background: rgba(59, 130, 246, 0.12);
            border-color: var(--accent-primary);
            color: var(--text-primary);
        }
        
        .radio-pill input {
            width: auto;
        }
        
        /* Result highlight box */
        .result-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-2) var(--space-3);
            background: rgba(34,197,94,0.1);
            border: 1px solid rgba(34, 197, 94, 0.2);
            border-radius: var(--radius-md);
        }
        
        .result-box .result-label {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
        }
        
        .result-box .result-value {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-bold);
            color: var(--accent-success);
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
        }
        
        /* ============== PANEL SUBTABS ============== */
        .panel-subtabs {
            display: flex;
            gap: 2px;
            margin-bottom: var(--space-3);
            background: var(--bg-primary);
            padding: var(--space-1);
            border-radius: var(--radius-md);
        }
        
        /* ============== CONSISTENT PANEL SECTION TITLE ============== */
        .panel-title {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: var(--space-3);
            margin-top: var(--space-4);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .panel-title:first-child {
            margin-top: 0;
        }
        
        .panel-title .icon {
            color: var(--text-muted);
        }
        
        /* Neutral grouping box (replaces old filled blue #1e3a5f boxes) */
        .subpanel {
            background: var(--bg-secondary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-lg);
            padding: var(--space-3) var(--space-4);
        }
        
        .subpanel-title {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-3);
        }
        
        .panel-subtab {
            flex: 1;
            padding: var(--space-2) var(--space-3);
            border: none;
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--text-muted);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: all var(--transition-fast);
        }
        
        .panel-subtab:hover:not(.active) {
            color: var(--text-secondary);
            background: var(--bg-tertiary);
        }
        
        .panel-subtab.active {
            background: var(--accent-primary);
            color: white;
        }
        
        .panel-subtab-content {
            display: none;
        }
        
        .panel-subtab-content.active {
            display: block;
        }
        
        /* ============== ENTITY FORM ============== */
        .entity-form .form-group {
            margin-bottom: var(--space-2);
        }
        
        .entity-form input, .entity-form select {
            padding: var(--space-2);
            font-size: var(--font-size-sm);
        }
        
        /* ============== MODEL TREE ============== */
        .model-tree {
            font-size: var(--font-size-sm);
        }
        
        .tree-section {
            margin-bottom: 8px;
        }
        
        .tree-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 8px;
            background: var(--bg-elev);
            border-radius:var(--r-ctl);
            cursor: pointer;
            font-weight: 500;
            color: var(--text-2);
        }
        
        .tree-header:hover {
            background: var(--text-3);
        }
        
        .tree-header .count {
            margin-left: auto;
            background: var(--bg-main);
            padding: 2px 8px;
            border-radius:var(--r-ovl);
            font-size:var(--fs-sm);
        }
        
        .tree-items {
            padding-left: 12px;
            margin-top: 4px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .tree-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            border-radius:var(--r-ctl);
            cursor: pointer;
            color: var(--text-2);
        }
        
        .tree-item:hover {
            background: rgba(56, 189, 248, 0.1);
            color: #e2e8f0;
        }
        
        .tree-item.selected {
            background: rgba(56, 189, 248, 0.2);
            color: var(--primary-text);
        }
        
        /* Compact Solve Button */
        .solve-compact {
            padding: var(--space-3);
            background: var(--bg-tertiary);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-3);
        }
        
        .solve-compact .solve-btn {
            padding: var(--space-3);
            font-size: var(--font-size-base);
        }
        
        /* ============== MODAL ============== */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(8, 12, 20, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
            backdrop-filter: blur(4px);
        }
        
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-xl);
            max-width: 700px;
            max-height: 90vh;
            width: 90%;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            transform: scale(0.9) translateY(20px);
            transition: transform var(--transition-base);
        }
        
        .modal-overlay.active .modal {
            transform: scale(1) translateY(0);
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-4) var(--space-5);
            border-bottom: 1px solid var(--border-default);
            background: var(--bg-tertiary);
        }
        
        .modal-header h2 {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin: 0;
            border: none;
            padding: 0;
        }
        
        .modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: var(--font-size-xl);
            cursor: pointer;
            padding: var(--space-1);
            line-height: 1;
            transition: color var(--transition-fast);
        }
        
        .modal-close:hover {
            color: var(--text-primary);
        }
        
        .modal-close:active {
            transform: none;
        }
        
        .modal-body {
            padding: var(--space-5);
            overflow-y: auto;
            /* Pencere tavani ile AYNI tabandan turer. Ikisi ayrildiginda
               (govde 85vh, pencere 90vh) 47 px kullanilmadan kaliyor ve icerik
               bos yer varken kaydiriyordu. */
            max-height: calc(90vh - 120px);
        }
        
        .modal-body h3 {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            color: var(--accent-info);
            margin: var(--space-5) 0 var(--space-3) 0;
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }
        
        .modal-body h3:first-child {
            margin-top: 0;
        }
        
        .modal-body p {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: var(--space-3);
        }
        
        .modal-body code {
            background: var(--bg-primary);
            color: var(--accent-success);
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-family: var(--font-mono);
            font-size: var(--font-size-sm);
        }
        
        .modal-body .code-block {
            background: var(--bg-primary);
            border: 1px solid var(--border-default);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            margin: var(--space-3) 0;
            font-family: var(--font-mono);
            font-size: var(--font-size-sm);
            overflow-x: auto;
        }
        
        .modal-body .code-block .comment {
            color: var(--text-muted);
        }
        
        .modal-body .code-block .layer-name {
            color: var(--accent-info);
            font-weight: var(--font-weight-medium);
        }
        
        .modal-body .code-block .description {
            color: var(--text-secondary);
        }
        
        .modal-body .tip-box {
            background: rgba(16, 185, 129, 0.1);
            border-left: 3px solid var(--accent-success);
            padding: var(--space-3);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            margin: var(--space-4) 0;
        }
        
        .modal-body .tip-box .tip-title {
            color: var(--accent-success);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-sm);
            margin-bottom: var(--space-1);
        }
        
        .modal-body .warning-box {
            background: rgba(245, 158, 11, 0.1);
            border-left: 3px solid var(--accent-warning);
            padding: var(--space-3);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
            margin: var(--space-4) 0;
        }
        
        .modal-body .warning-box .warning-title {
            color: var(--accent-warning);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-sm);
            margin-bottom: var(--space-1);
        }
        
        .modal-body table {
            width: 100%;
            border-collapse: collapse;
            margin: var(--space-3) 0;
            font-size: var(--font-size-sm);
        }
        
        .modal-body table th {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            padding: var(--space-2) var(--space-3);
            text-align: left;
            font-weight: var(--font-weight-medium);
            text-transform: uppercase;
            font-size: var(--font-size-xs);
            letter-spacing: 0.05em;
        }
        
        .modal-body table td {
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-default);
            color: var(--text-primary);
        }
        
        .modal-body table tr:hover td {
            background: rgba(59, 130, 246, 0.05);
        }
        
        .modal-footer {
            padding: var(--space-4) var(--space-5);
            border-top: 1px solid var(--border-default);
            display: flex;
            justify-content: flex-end;
            gap: var(--space-2);
        }
        
        /* ================================================================
           DESIGN SYSTEM THEME PATCH
           Engineering Tool - Clean, Professional, Consistent
           ================================================================ */
        
        :root {
            /* -------- CORE TOKENS (Override old system) -------- */
            
            /* Background Hierarchy */
            --bg-main: #0a0e17;          /* App background */
            --bg-panel: #141b27;         /* Panels, sidebars */
            --bg-elev: #1c2536;          /* Elevated: cards, inputs, dropdowns */
            --bg-hover: #242d3d;         /* Hover states */
            
            /* Text Hierarchy */
            /* Uc basamak da zemininden okunabilir olmali. Olculen eski
               degerler: --text-3 kart uzerinde 2.57, en koyu zeminde 3.23
               kontrast veriyordu - yani butun kucuk etiketler ("Material",
               "b (mm)", "X (mm)") esikte degil, esigin epey altindaydi.
               --text-2 yukseltilmezse iki basamak birbirine yapisiyordu.
               Yeni degerler kart zemininde: 12.95 / 7.02 / 4.57. */
            --text: #e8ecf2;             /* Primary text, values */
            --text-2: #a7b0be;           /* Secondary text, labels */
            --text-3: #828d9e;           /* Muted, placeholders, disabled */
            
            /* Single Border Color */
            --border: #2a3444;           /* All borders - subtle, consistent */
            
            /* Accent Colors - Use Sparingly */
            --primary: #3b82f6;          /* Actions, active states, links */
            --primary-hover: #2563eb;
            --success: #22c55e;          /* Positive, solve button */
            --success-hover: #16a34a;
            --warning: #eab308;          /* Warnings, caution */
            --danger: #ef4444;           /* Errors, delete - DOLGU/CERCEVE icin */

            /* METIN varyantlari. Dolgu rengiyle metin rengi ayni olamaz:
               #ef4444 koyu zeminde 4.08, #3b82f6 4.18 kontrast veriyor,
               metin icin gereken 4.5. Dolguda sorun yok (grafik esigi 3.0),
               sorun bu renklerin `color:` olarak kullanilmasiydi - ui-audit
               yuk tablosundaki "-10.0" uzerinde yakaladi.
               Olculdu (uc koyu zeminde de): danger 5.55-6.45, primary
               6.04-7.02. */
            --danger-text: #f87171;
            --primary-text: #60a5fa;
            
            /* Spacing Scale */
            --s-1: 4px;
            --s-2: 8px;
            --s-3: 12px;
            --s-4: 16px;
            --s-5: 20px;
            --s-6: 28px;
            
            /* Border Radius */
            --r-sm: var(--r-ctl);
            --r-md: var(--r-ctl);
            --r-lg: var(--r-ovl);
            
            /* Shadows - Minimal */
            --shadow-1: none;
            --shadow-2: 0 4px 12px rgba(0,0,0,0.4);
            
            /* Focus Ring */
            --ring: 0 0 0 2px var(--bg-main), 0 0 0 4px var(--primary);
            
            /* Typography */
            --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --text-xs: var(--fs-xs);
            --text-sm: var(--fs-sm);
            --text-base: var(--fs-sm);
            --text-lg: var(--fs-md);
            --text-xl: var(--fs-lg);
        }

        /* Bu ikinci token seti :root uzerinde tanimli ve sonraki body kurali onu
           kullaniyor; body.light-mode ise yalnizca ESKI seti geciyordu. Sonuc: acik
           temada govde koyu kaliyor, ondan miras alan her metin beyaz uzerine acik gri
           oluyordu. Ayni isimleri burada da geciyoruz. */
        body.light-mode {
            --bg-main: #f8fafc;
            --bg-panel: #ffffff;
            --bg-elev: #f1f5f9;
            --bg-hover: #e2e8f0;

            --text: #1e293b;
            --text-2: #475569;
            --text-3: #5b6675;   /* #64748b acik zeminde 4.34 kaliyordu */
            --accent-info: #1d4ed8;   /* acik zeminde acik mavi okunmaz */

            /* Anlamsal renkler koyu tema icin secilmis; acik zeminde YAZI
               olarak okunmuyorlardi (yesil 2.08, kirmizi 3.76 kontrast).
               Dolgu tonlari (--success-fill / --primary-fill) ayri oldugu
               icin bunlari koyultmak dugmeleri etkilemez. */
            --success: #15803d;
            --danger:  #b91c1c;
            --warning: #92400e;
            --danger-text: #991b1b;

            --border: #e2e8f0;

            --shadow-1: none;
            --shadow-2: 0 4px 12px rgba(0,0,0,0.12);

            /* Govdenin kendi arka plani ve rengi de acikca verilir: yalnizca degiskenleri
               gecmek yeterli olmuyordu ve govdeden miras alan her metin beyaz uzerine
               acik gri kaliyordu. */
            background: #f8fafc;
            color: #1e293b;
        }
        
        /* -------- GLOBAL OVERRIDES -------- */
        
        body {
            background: var(--bg-main);
            color: var(--text);
            font-family: var(--font);
        }
        
        /* -------- HEADER -------- */
        
        .logo {
            display: flex;
            align-items: baseline;
            gap: var(--s-3);
        }
        
        .logo-brand {
            font-size: var(--text-xl);
            font-weight: 600;
            color: var(--text);
            letter-spacing: 0.05em;
        }
        
        .logo-tagline {
            font-size: var(--text-sm);
            font-weight: 400;
            color: var(--text-2);
        }
        
        .logo-company {
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--text-3);
            padding-left: var(--s-2);
            border-left: 1px solid var(--border);
        }
        
        /* -------- MAIN TAB BAR -------- */
        
        .main-tab-bar {
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border);
            padding-right: var(--s-4);
        }
        
        .main-tab {
            color: var(--text-3);
            border-bottom: 2px solid transparent;
            padding: var(--s-3) var(--s-4);
        }
        
        .main-tab:hover {
            color: var(--text-2);
            background: transparent;
        }
        
        .main-tab.active {
            color: var(--primary-text);
            border-bottom-color: var(--primary-text);
            background: transparent;
        }
        
        /* -------- PANELS -------- */
        
        .panel {
            background: var(--bg-panel);
            border-color: var(--border);
        }
        
        /* -------- COLLAPSIBLE PANELS -------- */
        
        .collapsible-panel {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        
        .collapsible-panel:hover {
            border-color: var(--border);
        }
        
        .collapsible-header {
            background: transparent;
            padding: var(--s-3);
        }
        
        .collapsible-header:hover {
            background: var(--bg-hover);
        }
        
        .collapsible-header .title {
            color: var(--text);
            font-size: var(--text-sm);
            font-weight: 500;
        }
        
        .collapsible-header .count {
            background: var(--bg-main);
            color: var(--text-3);
        }
        
        .collapsible-content {
            border-top: 1px solid var(--border);
            padding: var(--s-3);
        }
        
        /* -------- FORM ELEMENTS -------- */
        
        input, select {
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius: var(--r-sm);
            color: var(--text);
            font-size: var(--text-base);
            padding: var(--s-2) var(--s-3);
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        
        input:hover, select:hover {
            border-color: #3a4454;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: var(--primary-text);
            box-shadow: var(--ring);
        }
        
        input::placeholder {
            color: var(--text-3);
        }
        
        input:disabled, select:disabled {
            background: var(--bg-elev);
            color: var(--text-3);
            cursor: not-allowed;
        }
        
        /* -------- BUTTONS: 3-TIER SYSTEM -------- */
        
        /* Reset all buttons */
        button {
            font-family: var(--font);
            font-size: var(--text-sm);
            font-weight: 500;
            border-radius: var(--r-sm);
            padding: var(--s-2) var(--s-3);
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
        }
        
        button:active:not(:disabled) {
            transform: scale(0.98);
        }
        
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* PRIMARY: Main actions (1 per screen ideally) */
        .btn-primary {
            background: var(--primary-fill);
            color: white;
            border: none;
            box-shadow: none;
        }
        
        .btn-primary:hover:not(:disabled) {
            background: var(--primary-hover);
            transform: none;
            box-shadow: none;
        }
        
        .btn-primary:focus {
            box-shadow: var(--ring);
        }
        
        /* SUCCESS: Solve button only */
        .btn-success, .solve-btn {
            background: var(--success-fill);
            color: white;
            border: none;
            box-shadow: none;
        }
        
        .btn-success:hover:not(:disabled), .solve-btn:hover:not(:disabled) {
            background: var(--success-hover);
            transform: none;
            box-shadow: none;
        }
        
        /* SECONDARY: Most buttons */
        .btn-secondary {
            background: rgba(255, 255, 255, 0.055);
            color: var(--text);
            /* Zemin tonu siniri zaten cizyor; cerceve ikinci kez cizmesin. */
            border: 1px solid transparent;
        }
        
        .btn-secondary:hover:not(:disabled) {
            background: var(--bg-hover);
            border-color: var(--border);
        }
        
        .btn-secondary.active {
            background: var(--primary-fill);
            color: white;
            border-color: var(--primary-text);
        }
        
        /* GHOST/DANGER: Delete, cancel */
        .btn-danger {
            background: transparent;
            color: var(--danger-text);
            border: 1px solid var(--danger);
        }
        
        .btn-danger:hover:not(:disabled) {
            background: rgba(239, 68, 68, 0.1);
        }
        
        /* Small buttons */
        .btn-small {
            padding: var(--s-1) var(--s-2);
            font-size: var(--text-xs);
        }
        
        .btn-icon {
            padding: var(--s-1) var(--s-2);
            min-width: 28px;
        }
        
        /* -------- TOOLBAR -------- */
        
        .canvas-toolbar {
            background: var(--bg-panel);
            border-bottom: 1px solid var(--border);
            padding: var(--s-2) var(--s-3);
        }
        
        .toolbar-group {
            background: rgba(255, 255, 255, 0.04);
            /* Yedi arac grubu birden kutuya giriyordu; zemin tonu ve bosluk yeter. */
            border: 1px solid transparent;
            border-radius: var(--r-sm);
            padding: var(--s-1) var(--s-2);
        }
        
        .toolbar-btn {
            background: transparent;
            color: var(--text-2);
            border: none;
            padding: var(--s-1) var(--s-2);
        }
        
        .toolbar-btn:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        
        .toolbar-btn.active {
            background: var(--primary-fill);
            color: white;
            box-shadow: none;
        }
        
        .toolbar-btn.success {
            background: var(--success-fill);
            color: white;
        }
        
        /* -------- CONTEXT MENU -------- */
        /* Baglam menusu masaustu olcusunde. Eskiden satir yazisi 14 px (govde
           12 px iken ekrandaki en buyuk metinlerden biriydi) ve satir yuksekligi
           37 px idi - dokunmatik hedef olcusu, fare ile kullanilan bir CAD
           aracinda. AutoCAD/Rhino menuleri 22-26 px araligindadir. */
        .context-menu {
            position: fixed;
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: var(--r-ctl);
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            min-width: 168px;
            z-index: 10000;
            padding: 4px 0;
            font-size: var(--fs-sm);
        }
        
        .context-menu-item {
            padding: 4px 12px;
            min-height: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            color: var(--text);
            transition: background 0.12s;
        }
        
        .context-menu-item:hover {
            background: var(--primary-fill);
            color: white;
        }
        
        .context-menu-item .shortcut {
            font-size: var(--fs-xs);
            color: var(--text-3);
            font-variant-numeric: tabular-nums;
        }
        
        .context-menu-item:hover .shortcut {
            color: rgba(255,255,255,0.7);
        }
        
        .context-menu-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }
        
        .context-menu-danger {
            color: var(--danger-text);
        }
        
        .context-menu-danger:hover {
            background: var(--danger);
            color: white;
        }
        
        /* -------- TOOLBAR DROPDOWN -------- */
        .toolbar-dropdown {
            position: relative;
            display: inline-block;
        }
        
        .toolbar-dropdown .dropdown-arrow {
            font-size:var(--fs-xs);
            margin-left: 2px;
            opacity: 0.7;
        }
        
        .toolbar-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--bg-elevated);
            border: 1px solid var(--border-default);
            border-radius:var(--r-ctl);
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            min-width: 170px;
            z-index: 1000;
            padding: 4px 0;
            margin-top: 4px;
        }
        
        .toolbar-dropdown:hover .toolbar-dropdown-menu,
        .toolbar-dropdown-menu:hover {
            display: block;
        }
        
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            cursor: pointer;
            font-size:var(--fs-sm);
            color: var(--text);
            transition: background 0.15s;
        }
        
        .dropdown-item:hover {
            background: var(--bg-hover);
        }
        
        .dropdown-item input[type="checkbox"] {
            width: 14px;
            height: 14px;
            accent-color: var(--primary-text);
        }
        
        /* -------- ACTION MODALS -------- */
        @keyframes modalSlideIn {
            from { opacity: 0; transform: translateY(-20px) scale(0.95); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        
        .modal-field {
            margin-bottom: 16px;
        }
        
        .modal-field label {
            display: block;
            font-size:var(--fs-sm);
            color: var(--text-2);
            margin-bottom: 8px;
        }
        
        .modal-field-row {
            display: flex;
            gap: 8px;
        }
        
        .modal-field-row .modal-input-group {
            flex: 1;
        }
        
        .modal-input-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .modal-input-group small {
            font-size:var(--fs-xs);
            color: var(--text-2);
        }
        
        .modal-field input[type="number"],
        .modal-field input[type="text"] {
            width: 100%;
            padding: 8px 12px;
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius:var(--r-ctl);
            color: var(--text);
            font-size:var(--fs-md);
        }
        
        .modal-field input:focus {
            outline: none;
            border-color: var(--primary-text);
            box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
        }
        
        .modal-radio-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .modal-radio-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius:var(--r-ctl);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .modal-radio-item:hover {
            border-color: var(--primary-text);
        }
        
        .modal-radio-item.selected {
            border-color: var(--primary-text);
            background: rgba(99,102,241,0.1);
        }
        
        .modal-radio-item input[type="radio"] {
            accent-color: var(--primary-text);
        }
        
        .modal-radio-item .radio-content {
            flex: 1;
        }
        
        .modal-radio-item .radio-label {
            font-size:var(--fs-md);
            color: var(--text);
        }
        
        .modal-radio-item .radio-input {
            margin-left: auto;
        }
        
        .modal-radio-item .radio-input input {
            width: 70px;
            padding: 4px 8px;
            font-size:var(--fs-sm);
        }
        
        .modal-checkbox {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: var(--bg-main);
            border-radius:var(--r-ctl);
            cursor: pointer;
        }
        
        .modal-checkbox input {
            accent-color: var(--primary-text);
        }
        
        /* -------- TABS -------- */
        
        .tabs {
            background: var(--bg-main);
            border-radius: var(--r-md);
            padding: 2px;
        }
        
        .tab {
            color: var(--text-3);
            font-size: var(--text-sm);
            border-radius: var(--r-sm);
        }
        
        .tab:hover:not(.active) {
            color: var(--text-2);
            background: var(--bg-elev);
        }
        
        .tab.active {
            background: var(--primary-fill);
            color: white;
            box-shadow: none;
        }
        
        .panel-subtabs {
            background: var(--bg-main);
        }
        
        .panel-subtab {
            color: var(--text-3);
        }
        
        .panel-subtab:hover:not(.active) {
            color: var(--text-2);
            background: var(--bg-elev);
        }
        
        .panel-subtab.active {
            background: var(--primary-fill);
            color: white;
        }
        
        /* -------- DATA TABLES -------- */
        
        .data-table {
            font-size: var(--text-sm);
        }
        
        .data-table th {
            background: var(--bg-elev);
            color: var(--text-2);
            font-size: var(--text-xs);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            padding: var(--s-2) var(--s-2);
            border-bottom: 1px solid var(--border);
        }
        
        .data-table td {
            padding: var(--s-2);
            border-bottom: 1px solid var(--border);
            color: var(--text);
        }
        
        .data-table tr:hover td {
            background: var(--bg-hover);
        }
        
        .data-table tr:last-child td {
            border-bottom: none;
        }
        
        /* -------- RESULT CARDS -------- */
        
        .result-card {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        
        .result-card:hover {
            border-color: var(--border);
            box-shadow: none;
        }
        
        .result-card .label {
            color: var(--text-3);
            font-size: var(--text-xs);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        
        .result-card .value {
            color: var(--text);
            font-size: var(--text-lg);
            font-weight: 600;
        }
        
        .result-card .unit {
            color: var(--text-3);
            font-size: var(--text-sm);
        }
        
        .result-card.success .value { color: var(--success); }
        .result-card.warning .value { color: var(--warning); }
        .result-card.danger .value { color: var(--danger-text); }
        
        /* -------- ENTITY INFO PANEL -------- */
        
        .entity-info-panel {
            background: var(--bg-panel);
            border-left: 1px solid var(--border);
        }
        
        .entity-info-header {
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
        }
        
        .entity-info-header h3 {
            color: var(--text);
            font-size: var(--text-sm);
            font-weight: 600;
        }
        
        /* Sag paneldeki bolum kutulari sol paneldeki .collapsible-panel ile
           BIREBIR ayni: ayni zemin, ayni cerceve, ayni kose yaricapi. Iki panel
           farkli gorunuyorsa once buraya bakilir. */
        .entity-section {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        
        /* Sol panel baslıklari normal yazi, 12px, acik renk. Sagdakiler
           BUYUK HARF + harf araligi + soluk renkti: ayni ekranda iki ayri
           baslik dili. */
        .entity-section-title {
            color: var(--text);
            font-size: var(--fs-sm);
            font-weight: 500;
            text-transform: none;
            letter-spacing: normal;
        }
        
        .entity-property .label {
            color: var(--text-2);
        }
        
        .entity-property .value {
            color: var(--text);
            font-weight: 500;
        }
        
        .entity-property .value.highlight {
            color: var(--accent-info);
        }
        
        /* -------- SECTION DIAGRAM -------- */
        
        .section-diagram {
            background: var(--bg-main);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: border-color 0.2s;
        }
        
        .section-diagram:hover {
            border-color: var(--primary-text);
        }
        
        .section-diagram svg {
            display: block;
        }
        
        /* -------- SECTION MODAL -------- */
        
        #sectionModalSvg {
            width: 600px;
            height: 400px;
        }
        
        /* -------- INFO BOX -------- */
        
        .info-box {
            background: rgba(59, 130, 246, 0.08);
            border-left: 3px solid var(--primary);
            padding: var(--s-3);
            border-radius: 0 var(--r-sm) var(--r-sm) 0;
        }
        
        .info-box.warning {
            background: rgba(234, 179, 8, 0.08);
            border-left-color: var(--warning);
        }
        
        .info-box.success {
            background: rgba(34, 197, 94, 0.08);
            border-left-color: var(--success);
        }
        
        /* -------- QUICK SETUP -------- */
        
        .quick-setup {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        
        /* -------- SOLVE SECTION -------- */
        
        .solve-section {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        
        /* Solve button in solve-section (full width) */
        .solve-section .solve-btn {
            width: 100%;
            border-radius: var(--r-md);
        }
        
        /* Solve button in tab bar (compact) */
        .main-tab-bar .solve-btn {
            width: auto;
            padding: var(--s-2) var(--s-4);
            font-size: var(--text-sm);
            border-radius: var(--r-sm);
        }
        
        .solve-btn::before {
            display: none; /* Remove shine effect */
        }
        
        /* -------- CANVAS AREA -------- */
        
        .canvas-area {
            background: var(--bg-main);
        }
        
        /* -------- STATUS BAR -------- */
        
        .status-bar {
            color: var(--text-2);
        }
        
        .status-ok { color: var(--success); }
        .status-warning { color: var(--warning); }
        .status-error { color: var(--danger-text); }
        
        /* -------- DIVIDER -------- */
        
        .divider {
            background: var(--border);
        }
        
        /* -------- LEGEND -------- */
        
        .legend-item {
            color: var(--text-2);
            font-size: var(--text-xs);
        }
        
        /* -------- TOAST NOTIFICATIONS -------- */
        
        .toast {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-2);
        }
        
        .toast-title {
            color: var(--text);
            font-weight: 500;
        }
        
        .toast-message {
            color: var(--text-2);
        }
        
        .toast.success { border-left: 3px solid var(--success); }
        .toast.error { border-left: 3px solid var(--danger); }
        .toast.warning { border-left: 3px solid var(--warning); }
        .toast.info { border-left: 3px solid var(--primary); }
        
        .toast.success .toast-icon { color: var(--success); }
        .toast.error .toast-icon { color: var(--danger-text); }
        .toast.warning .toast-icon { color: var(--warning); }
        .toast.info .toast-icon { color: var(--primary-text); }
        
        /* -------- LOADING OVERLAY -------- */
        
        .loading-overlay {
            background: rgba(11, 15, 24, 0.9);
        }
        
        .loading-spinner {
            border-color: var(--border);
            border-top-color: var(--primary-text);
        }
        
        .loading-text {
            color: var(--text-2);
        }
        
        /* -------- MODAL -------- */
        
        .modal-overlay {
            background: rgba(11, 15, 24, 0.9);
        }
        
        .modal {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-2);
        }
        
        .modal-header {
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
        }
        
        .modal-header h2 {
            color: var(--text);
            font-size: var(--text-lg);
        }
        
        .modal-body h3 {
            color: var(--text);
            font-size: var(--text-base);
            font-weight: 600;
        }
        
        .modal-body p {
            color: var(--text-2);
        }
        
        .modal-body code {
            background: var(--bg-main);
            color: var(--success);
        }
        
        .modal-body .code-block {
            background: var(--bg-main);
            border: 1px solid var(--border);
        }
        
        .modal-body table th {
            background: var(--bg-elev);
            color: var(--text-2);
        }
        
        .modal-body table td {
            border-bottom: 1px solid var(--border);
            color: var(--text);
        }
        
        .modal-body .tip-box {
            background: rgba(34, 197, 94, 0.08);
            border-left: 3px solid var(--success);
        }
        
        .modal-body .warning-box {
            background: rgba(234, 179, 8, 0.08);
            border-left: 3px solid var(--warning);
        }
        
        .modal-footer {
            border-top: 1px solid var(--border);
        }
        
        /* -------- TREE ITEMS -------- */
        
        .tree-item {
            color: var(--text-2);
        }
        
        .tree-item:hover {
            background: var(--bg-hover);
            color: var(--text);
        }
        
        .tree-item.selected {
            background: rgba(59, 130, 246, 0.15);
            color: var(--primary-text);
        }
        
        /* -------- PROFILE PREVIEW -------- */
        
        #profilePreviewSvg {
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
        }
        
        /* -------- CHECKBOX/RADIO STYLING -------- */
        
        input[type="checkbox"],
        input[type="radio"] {
            accent-color: var(--primary-text);
        }
        
        /* -------- SCROLLBAR -------- */
        
        .panel::-webkit-scrollbar {
            width: 6px;
        }
        
        .panel::-webkit-scrollbar-track {
            background: var(--bg-main);
        }
        
        .panel::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius:var(--r-ctl);
        }
        
        .panel::-webkit-scrollbar-thumb:hover {
            background: #3a4454;
        }
        
        /* -------- SELECTION COLORS -------- */
        
        ::selection {
            background: var(--primary);
            color: white;
        }
    </style>
    <style>
        .import-type-btn {
            padding: 20px;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius:var(--r-ovl);
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .import-type-btn:hover {
            background: var(--bg-hover);
            border-color: var(--text-3);
        }
        
        .import-type-btn.active {
            background: rgba(59, 130, 246, 0.2);
            border-color: var(--primary-text);
            color: #e2e8f0;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        }
        
        .import-type-btn.active div:first-child {
            transform: scale(1.1);
        }
        
        .orient-btn {
            flex: 1;
            padding: 8px 16px;
            background: var(--bg-main);
            border: 1px solid var(--border);
            border-radius:var(--r-ctl);
            color: var(--text-2);
            cursor: pointer;
            transition: all 0.2s;
            font-size:var(--fs-md);
        }
        
        .orient-btn:hover {
            background: var(--bg-elev);
            border-color: var(--text-3);
        }
        
        .orient-btn.active {
            background: var(--primary-fill);
            border-color: var(--primary-text);
            color: white;
        }
        
        .orient-btn small {
            display: block;
            font-size:var(--fs-xs);
            opacity: 0.7;
            margin-top: 2px;
        }
        
        /* Results Bottom Panel */
        .results-bottom-panel {
            position: fixed;
            /* bottom: 0 komut cubugunun ve alt bilgi seridinin ALTINA
               uzaniyordu. Gercek deger asagida --alt-yukseklik ile geliyor;
               burasi da onunla ayni olsun ki kural sirasi degisirse
               panel bir anligina cubugun uzerine dusmesin. */
            bottom: var(--alt-yukseklik, 58px);
            left: 326px;
            right: 280px;
            height: 250px;
            background: var(--bg-panel);
            border-top: 2px solid var(--primary);
            z-index: 100;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        }
        
        .results-resize-handle {
            height: 6px;
            background: transparent;
            cursor: ns-resize;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            position: relative;
        }
        
        .results-resize-handle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 3px;
            background: var(--text-3);
            border-radius:var(--r-ctl);
            transition: all 0.2s;
        }
        
        .results-resize-handle:hover::before {
            background: var(--primary);
            width: 60px;
        }
        
        .resize-grip {
            display: none;
        }
        
        /* Vertical Panel Resize Handle */
        .panel-resize-handle {
            width: 6px;
            background: transparent;
            cursor: ew-resize;
            position: relative;
            flex-shrink: 0;
        }
        
        .panel-resize-handle.right-resize {
            /* Sagdaki tutamak -3px ile iceri cekiliyordu, soldaki degil:
               iki kenar farkli yerde bitiyordu. Ikisi de ayni. */
            margin: 0;

        }
        
        .panel-resize-handle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 3px;
            height: 40px;
            background: var(--text-3);
            border-radius:var(--r-ctl);
            transition: all 0.2s;
        }
        
        .panel-resize-handle:hover::before {
            background: var(--primary);
            height: 60px;
        }
        
        .beam-diagram-tab {
            padding: 8px 16px;
            font-size:var(--fs-sm);
        }
        
        .beam-diagram-tab.active {
            background: var(--primary-fill);
            color: white;
        }
        
        .results-bottom-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px;
            background: var(--bg-elev);
            border-bottom: 1px solid var(--border);
        }
        
        .results-bottom-tabs {
            display: flex;
            gap: 4px;
        }
        
        .results-bottom-tab {
            padding: 8px 16px;
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-secondary);
            border-radius:var(--r-ctl);
            cursor: pointer;
            font-size:var(--fs-sm);
            transition: all 0.2s;
        }
        
        .results-bottom-tab:hover {
            background: rgba(59, 130, 246, 0.2);
        }
        
        .results-bottom-tab.active {
            background: var(--primary-fill);
            color: white;
            border-color: var(--primary-text);
        }
        
        .results-bottom-content {
            /* min-height:0 olmadan flex cocugu icerigi kadar buyur ve panelden
               tasar; overflow:auto ancak bir sinir varsa kaydirir. */
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
            padding: 0;
        }
        
        .results-data-table {
            width: 100%;
            border-collapse: collapse;
            font-size:var(--fs-sm);
        }
        /* secili satira kaydirinca sabit basligin altinda kalmasin */
        .results-data-table tbody tr { scroll-margin-top: 40px; }
        
        .results-data-table th {
            position: sticky;
            top: 0;
            background: var(--bg-elev);
            padding: 8px 8px;
            text-align: left;
            color: var(--text-2);
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            border-bottom: 1px solid var(--border);
            white-space: nowrap;
        }
        
        .results-data-table th:hover {
            background: var(--bg-hover);
            color: var(--primary-text);
        }
        
        .results-data-table td {
            padding: 8px 8px;
            border-bottom: 1px solid var(--border-default);
            color: var(--text-primary);
        }
        
        /* Secim zemini HUCREDE (td) verilir: hucre zemini satir zeminini ortmesin.
           Secili satir kalici mavi; secili olmayan satir fare ustunde notr; secili
           satir fare ustunde biraz koyulasir (secim kaybolmus gibi gorunmez). */
        .results-data-table tr:hover {
            cursor: pointer;
        }
        .results-data-table tbody tr:hover td {
            background: var(--bg-hover);
        }
        .results-data-table tr.selected {
            /* Sahnedeki secim tabloda bir bakista bulunsun: koyu zemin, sol
               serit, kalin yazi. Eski %30 mavi satirlar arasinda kayboluyordu. */
            box-shadow: inset 3px 0 0 var(--primary);
        }
        .results-data-table tr.selected td { background: rgba(59, 130, 246, 0.35); font-weight: 600; color: var(--text); }
        .results-data-table tr.selected:hover td { background: rgba(59, 130, 246, 0.45); }
        /* Sabit (sticky) sol hucre koyu temada opak kalir: kaydirmada icerik altindan gecmez */
        .results-data-table th.sabit { background: var(--bg-elev); }
        .results-data-table td.sabit { background: var(--bg-panel); }
        .results-data-table tbody tr:hover td.sabit { background: var(--bg-hover); }
        .results-data-table tr.selected td.sabit { background: #223f6f; box-shadow: inset 3px 0 0 var(--primary); }
        .results-data-table tr.selected:hover td.sabit { background: #254985; }
        
        .results-data-table .stress-ok { color: var(--success); }
        .results-data-table .stress-warn { color: var(--warning); }
        .results-data-table .stress-fail { color: var(--danger-text); font-weight: 600; }
        
        @media (max-width: 1200px) {
            .results-bottom-panel {
                left: 0;
                right: 0;
            }
        }


        /* ---- Acik tema: inline stil ile koyu kodlanmis kanvas ustu parcalar ----
           Bu elemanlarin renkleri HTML icinde satir ici yazilmis; satir ici stil CSS'i
           yendigi icin !important gerekiyor. Kalici cozum bunlari CSS degiskenlerine
           tasimak, ama gorunur bozukluk burada bitiyor. */
        body.light-mode #threeContainer { background: #f8fafc !important; }
        body.light-mode #stressLegend {
            background: rgba(255, 255, 255, 0.96) !important;
            border-color: var(--text-2) !important;
            color: #1e293b !important;
        }
        body.light-mode #stressLegendHeader {
            background: rgba(241, 245, 249, 0.95) !important;
            border-radius:var(--r-ovl) 8px 0 0;
        }
        body.light-mode #stressLegend span,
        body.light-mode #stressLegend div { color: #334155 !important; }
        body.light-mode .canvas-viewinfo,
        body.light-mode #statusBar {
            background: rgba(255, 255, 255, 0.9) !important;
            color: #334155 !important;
        }
        body.light-mode .canvas-viewinfo span,
        body.light-mode #statusBar span { color: var(--text-3) !important; }
        /* Gorunum secici acik temada: beyaz segment, secili olan acik mavi
           zemin + mavi yazi (css/acik-tema.css ile ayni dil). */
        body.light-mode .view-mode-btn {
            background: rgba(255, 255, 255, 0.95) !important;
            color: #475569 !important;
            border-color: #e2e8f0 !important;
        }
        body.light-mode .view-mode-btn:hover {
            background: #f8fafc !important;
            color: #0f172a !important;
        }
        body.light-mode .view-mode-btn.active {
            background: #eff6ff !important;
            color: #1d4ed8 !important;
            border-color: #bfdbfe !important;
        }


        /* ================================================================
           SCALE - deliberately small. Eleman eleman yazilan stiller 21 farkli
           yazi boyutu, 8 vurgu rengi ve 7 kose yaricapi birakmisti; bazi
           boyutlar birbirinden 1 pikselden az farkliydi. Hiyerarsiyi boyut
           degil agirlik tasir.
           ================================================================ */
        :root {
            /* dort adim, baska yok - ama SABIT DEGIL.
               Dort boy da px olarak sabitti: 13 inclik bir dizustunde ile 27
               inclik monitorde ayni 11-12 px. Kucuk ekranda sikisik, buyuk
               ekranda gereginden ufak duruyordu.

               --fs-taban pencere GENISLIGIYLE dogrusal buyur ve iki ucta durur:
                 1280 px -> 11.5    1600 px -> 12.0
                 1920 px -> 12.5    2560 px ve ustu -> 14.0

               ILK EGIM COK DIKTI (0.3125vw): 1280'de 12, 1920'de 14, 2560'ta
               16 px veriyordu. Buyuk monitorde istenen sey daha buyuk harf
               degil DAHA COK BILGI; 1920'de 14 px taban, yogun bir muhendislik
               aracinda sayi girisini 16.3 px'e, tablo satirini 36 px'e
               cikariyordu. Yeni egim ekran buyudukce yine buyutuyor ama
               okunabilirlik icin gereken kadar.

               --ui-olcek kullanicinin Settings'ten verdigi carpan (varsayilan 1).
               Ikisi carpilir: ekran otomatigi + kisisel tercih. */
            --ui-olcek: 1;
            --fs-taban: clamp(11px, calc(0.15625vw + 9.5px), 14px);
            --fs-xs: calc(var(--fs-taban) * var(--ui-olcek) * 0.9167);  /* mikro etiket, tablo basligi */
            --fs-sm: calc(var(--fs-taban) * var(--ui-olcek));           /* govde, ikincil */
            --fs-md: calc(var(--fs-taban) * var(--ui-olcek) * 1.1667);  /* birincil deger, baslik */
            --fs-lg: calc(var(--fs-taban) * var(--ui-olcek) * 1.5);     /* tek one cikan sayi */

            /* iki yaricap */
            --r-ctl: 4px;    /* kontroller */
            --r-ovl: 8px;    /* ustte yuzen katmanlar */

            /* golge YALNIZCA gercekten yuzen seyler icin */
            --shadow-overlay: 0 8px 24px rgba(0,0,0,0.35);
        }

        /* Sayilar her yerde ayni genislikte olsun ki ondalikar alt alta dizilsin */
        .data-table td, .results-data-table td, .ds-val, .result-card .value,
        .entity-property span:last-child, .datasheet-row .ds-val {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1;
        }


        /* ---- Deger tablosu ----
           Alti KPI karti yerine. Etiket solda sakin, sayi sagda tabular rakamla,
           birim kucuk ve muted. Ondalikar alt alta dizilir; goz asagi tarayabilir. */
        .value-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: var(--space-3);
        }
        .value-table th,
        .value-table td {
            padding: 4px 0;
            border-bottom: 1px solid var(--border);
            font-weight: 400;
            font-size: var(--fs-sm);
            vertical-align: baseline;
        }
        .value-table tr:last-child th,
        .value-table tr:last-child td { border-bottom: 0; }
        .value-table th {
            text-align: left;
            color: var(--text-2);
            white-space: nowrap;
        }
        .value-table td {
            text-align: right;
            color: var(--text);
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum" 1;
            white-space: nowrap;
        }
        .value-table td.unit {
            width: 1%;
            padding-left: 8px;
            text-align: left;
            color: var(--text-3);
            font-size: var(--fs-xs);
        }
        .value-row-strong th { color: var(--text); }
        .value-row-strong td { font-size: var(--fs-md); font-weight: 600; }

        .check-table td { text-align: left; }
        .check-detail {
            color: var(--text-3);
            font-size: var(--fs-xs);
            margin-top: 2px;
            white-space: normal;
        }


        /* ---- Birlesik ust satir ----
           Marka + sekmeler + eylemler. Ayri baslik cubugu 78 px aliyordu; o yer
           artik modelin. */
        .main-tab-bar {
            display: flex;
            align-items: stretch;
            gap: var(--space-4);
            padding: 0 var(--space-4);
            flex-shrink: 0;
        }
        .main-tab-bar .brand {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding-right: var(--space-4);
            border-right: 1px solid var(--border);
            flex-shrink: 0;
        }
        .main-tab-bar .brand-logo {
            width: 22px; height: 22px;
            border-radius: var(--r-ctl);
            font-size: var(--fs-sm);
            display: flex; align-items: center; justify-content: center;
        }
        .main-tab-bar .brand-name {
            font-size: var(--fs-sm);
            font-weight: 600;
            margin: 0;
            line-height: 1.2;
        }
        /* slogan degil, model adi - ve ikincil */
        .main-tab-bar .brand-subtitle {
            font-size: var(--fs-xs);
            color: var(--text-3);
            margin: 0;
            line-height: 1.2;
        }
        .main-tab-group {
            display: flex;
            align-items: stretch;
            gap: 2px;
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }
        .main-tab-bar .header-actions {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-left: auto;
            flex-shrink: 0;
        }


        /* ---- Araclar tek satirda ----
           flex-wrap iki satira tasiyordu: 98 px. Tek satir, dar ekranda yatay
           kaydirma. Kaybedilen yer yok, kazanilan yer modelin. */
        .canvas-toolbar {
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: thin;
            padding: 4px var(--space-3);
            gap: var(--space-2);
        }
        .canvas-toolbar::-webkit-scrollbar { height: 4px; }
        .canvas-toolbar::-webkit-scrollbar-thumb {
            background: var(--border); border-radius: 2px;
        }
        .canvas-toolbar .toolbar-group { flex-shrink: 0; }
        /* Grup etiketleri (SECTION, ZOOM, DISPLAY...) yaklasik 440 px yiyordu ve her
           dugmenin zaten ipucu var. Gruplar ayirici cizgiyle belli olur. */
        .canvas-toolbar .toolbar-group-label { display: none; }
        .canvas-toolbar .toolbar-group + .toolbar-group {
            border-left: 1px solid var(--border);
            padding-left: var(--space-2);
        }


        /* Durum cubugundaki secim eylemleri - secim sayacinin yaninda */
        .status-actions {
            display: inline-flex;
            gap: 1px;
            margin-left: var(--space-2);
        }
        .status-actions button {
            background: transparent;
            border: 0;
            color: var(--text-2);
            font-size: var(--fs-xs);
            font-family: inherit;
            padding: 2px 8px;
            border-radius: var(--r-ctl);
            cursor: pointer;
        }
        .status-actions button:hover { background: var(--bg-hover); color: var(--text); }
        .status-actions button.danger:hover { color: var(--danger-text); }


        /* ---- Ikonlar yalnizca TEK etiket olduklari yerde ----
           Metnin yaninda duran ikon bilgi tasimaz: baslik zaten ne oldugunu soyluyor.
           Ayni kup ikonu 11 alakasiz baslikta geciyordu, yani "baslik" demek olmustu.
           Arac cubugu, sekmeler ve gorunum kupu ikonlarini KORUYORUZ - orada ikon
           etiketin kendisidir. */
        .panel-title > .icon,
        .collapsible-header .title > .icon,
        .entity-section-title > .icon,
        .section-header > .icon,
        .modal-header h2 > .icon,
        .results-bottom-header > .results-bottom-tabs .icon,
        h3 > .icon:first-child,
        .value-table .icon {
            display: none;
        }

        /* Ikon TEK icerikse kalir - yoksa etiketsiz bir dugme olur.
           (Sonuc panelini daraltma dugmesi boyle kaybolmustu.) */
        button > .icon:only-child,
        .toolbar-btn > .icon:only-child,
        .btn-icon .icon {
            display: inline-flex !important;
        }

        /* Baslik artik kendi basina duruyor; biraz nefes alsin */
        .panel-title {
            font-weight: 600;
            text-transform: none;      /* BUYUK HARF + harf araligi bir vurgu degil */
            letter-spacing: 0;
            font-size: var(--fs-xs);
            color: var(--text-3);
        }


        /* ---- Panel hiyerarsisi dortten ikiye ----
           Onceden: sekme basligi -> kart basligi -> BUYUK HARF alan etiketi -> deger.
           Dort katman, tek bir sabiti soylemek icin. Artik: bolum -> deger. */

        /* Sekme basligi zaten sekme cubugunda yaziyor; burada tekrar etmesin */
        .main-tab-content > h2 { display: none; }
        .main-tab-content > h2 > .icon { display: none; }

        /* Alan etiketleri: buyuk harf ve harf araligi bir vurgu degil, gurultu */
        .field-label {
            text-transform: none;
            letter-spacing: 0;
            font-size: var(--fs-xs);
            color: var(--text-3);
        }

        /* Salt-okunur deger girdi gibi gorunmesin - tiklamaya davet ediyordu */
        .readonly-field {
            background: transparent;
            border: 0;
            padding: 0;
            color: var(--text);
            font-size: var(--fs-sm);
        }


        /* ---- Gorunum anahtarlari ----
           Dort bagimsiz anahtar. Acik olan vurgu rengini alir - hangisi oldugu
           farketmez; her secenege ayri renk vermek rengin anlamini yok eder. */
        .view-toggles {
            display: flex;
            gap: 1px;
            margin-bottom: var(--space-2);
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: var(--r-ctl);
            overflow: hidden;
        }
        .view-toggle {
            flex: 1;
            background: var(--bg-panel);
            border: 0;
            color: var(--text-2);
            font-family: inherit;
            font-size: var(--fs-xs);
            padding: 8px 4px;
            cursor: pointer;
            white-space: nowrap;
        }
        .view-toggle:hover { background: var(--bg-hover); color: var(--text); }
        .view-toggle.active {
            background: var(--primary-fill);
            color: #fff;
            font-weight: 500;
        }

        /* Kiris detay ozet satiri. Kart degil satir: dort deger, aralarinda ince
           ayirici. Etiket kucuk ve sonuk, deger buyuk ve tabular. */
        .beam-detail-summary {
            display: flex;
            gap: var(--space-5);
            padding: 0 0 var(--space-4);
            margin-bottom: var(--space-4);
            border-bottom: 1px solid var(--border);
        }

        .beam-detail-summary > div {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }

        .beam-detail-summary span {
            font-size: var(--fs-xs);
            color: var(--text-3);
        }

        .beam-detail-summary b {
            font-size: var(--fs-md);
            font-weight: 600;
            color: var(--text);
            font-variant-numeric: tabular-nums;
        }

        /* Detay penceresindeki tablo basliklari BUYUK HARF olmasin: yedi sutunlu
           dar bir tabloda harf araligi kelimeleri birbirine karistiriyor. */
        #beamDetailModal .data-table th {
            text-transform: none;
            letter-spacing: 0;
            font-size: var(--fs-xs);
        }

        #beamDetailModal .data-table td {
            font-variant-numeric: tabular-nums;
        }

        /* Menu satirlarindaki ikonlar. Ana ekranda "adi olan seye ikon koyma"
           kuralini uygulayip menuleri atlamisim: her satirda bir ikon vardi ve
           metin zaten ne oldugunu soyluyordu. */
        .context-menu-item > .icon,
        .context-menu-item > svg {
            display: none;
        }

        /* Katlanmis panelin tutamagi: hala orada oldugu ve cift tiklamayla geri
           gelecegi gorunsun diye belirgin bir seride birakilir. */
        .panel-resize-handle.collapsed::before {
            background: var(--primary);
            opacity: 0.5;
            height: 32px;
        }

        .panel-resize-handle.collapsed:hover::before {
            opacity: 1;
        }

        /* Kontrol tablosunda etiket ile durum bitisikti ("Plate slendernessPASS"):
           th'in sag dolgusu sifirdi ve etiket uzayinca degdi. */
        .check-table th {
            padding-right: var(--space-3);
            vertical-align: top;
        }
        /* Tarayici <strong> icin 700 kullanir; arayuzde uc agirlik yeterli,
           dordunculer sadece govde metninde beliriyordu. */
        strong, b { font-weight: 600; }
        /* Sol panelin son alanlari (b/t girisleri) komut cubugunun altina
           giriyordu: "b (mm)" ile "READY" ust uste biniyordu. Panel kendi
           son satirini gorebilsin diye alt dolgu. */
        .main-tab-content { padding-bottom: var(--space-6); }

        /* Durum cubugu eylemleri 1px araliktaydi - dort dugme birbirine
           yapisikti. Bosluk olcege oturtuldu. */
        .status-actions { gap: var(--space-2) !important; }
        .status-actions button { padding: 2px var(--space-2); }


        /* Sag panelin kaydirma cubugu tarayici varsayilaniydi, soldaki
           stillenmisti: ayni ekranda iki farkli kaydirma cubugu. */
        .entity-info-panel::-webkit-scrollbar { width: 6px; }
        .entity-info-panel::-webkit-scrollbar-track { background: var(--bg-primary); }
        .entity-info-panel::-webkit-scrollbar-thumb {
            background: var(--bg-elevated);
            border-radius: var(--r-ctl);
        }
        .entity-info-panel::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

        /* ============ TUTARLILIK KATMANI ============
           Sekme sekme olculen farklar. Kurallarin cogu bu dosyada iki kez
           tanimli oldugu ve sonuncusu kazandigi icin duzeltmeler sona
           yaziliyor - dosyanin ortasini duzenlemek dort kez ise yaramadi. */

        /* Tablo basliklari: kiris detay penceresinde BUYUK HARF ve harf araligi
           kaldirilmisti, sol panelde kalmisti. Ayni uygulamada iki tablo dili. */
        .data-table th {
            text-transform: none;
            letter-spacing: normal;
        }

        /* "or enter manually" gibi ayiricilar da BUYUK HARF idi; bolum
           basliklari normal yaziya cevrilirken bunlar atlanmis. */
        .section-divider {
            text-transform: none;
            letter-spacing: normal;
        }

        /* Arayuz uc agirlik kullaniyor (400/500/600). Bu tek deger 700'de
           kalmisti. */
        .result-value {
            font-weight: 600;
        }

        /* label ve alt panel basliklari da BUYUK HARF idi. Bolum basliklarini
           normal yaziya cevirirken bunlar atlanmisti. */
        .limit-input label,
        .form-group label,
        label,
        .subpanel-title {
            text-transform: none;
            letter-spacing: normal;
        }

        /* <small> 10px cikiyordu; olcegin en kucugu 11px. */
        small {
            font-size: var(--fs-xs);
        }

        /* ---- Sag panel hizalama ----
           Govde kendi icinde kayiyordu, baslik kaymiyordu: kaydirma cubugu
           govdenin 15px'ini yiyor, kartlar baslıktan 15px dar kaliyordu.
           Sol panel butun olarak kayiyor; sag da oyle olsun. Boylece baslik ve
           kartlar ayni kenardan baslar, ayni kenarda biter. */
        .entity-info-body {
            overflow: visible;
        }

        /* Baslik da bir kart: asagidaki kartlarla AYNI kutu. Kutusu panel
           kenarina kadar uzaniyordu, kartlar ise govdenin 16px dolgusuyla
           iceride kaliyordu - ust ust duran iki farkli genislik. */
        .entity-info-header {
            border-radius: var(--r-md);
            border: 1px solid var(--border);
            margin: 0 var(--space-4) var(--space-3);
            padding: var(--space-3);
        }

        /* Bolum kartlari kapsayicinin tamamini kaplasin. */
        #entityInfoEmpty,
        #entityInfoNode,
        #entityInfoBeam,
        #entityInfoMulti {
            width: auto;
        }

        /* X / Y / Z girisleri 80px sabitti, sardigi kutu 182px: girdinin
           sagında 86px bos alan kaliyor, sayilar sola sikismis ve birim
           uzakta duruyordu. Girdi artik alanini dolduruyor. */
        .num-wrap {
            display: block;
            position: relative;
        }

        .num-wrap input {
            width: 100%;
            padding-right: var(--space-5);
        }

        /* Sag panel 16px yukaridan basliyordu: "Properties" ile soldaki
           "Material Properties" ayni yatay cizgide degildi. Ust dolgu sol
           panelinkiyle ayni. */
        .entity-info-panel {
            padding-top: var(--space-4);
        }

        /* Baslik ile ilk kart arasi 28px idi (baslik margin 12 + govde dolgu 16),
           kartlarin kendi arasi ise 12px: ayni sutunda iki farkli ritim.
           Govdenin ust dolgusu kalkti, bosluk her yerde 12px. */
        .entity-info-body {
            padding-top: 0;
        }

        /* ---- Sekme iceriginin dikey ritmi ----
           Olculen durum: Model sekmesinde bloklar 12px arayla, Boundary ve
           Loads sekmelerinde 16px arayla diziliyordu; aralarda 20px ve 8px
           tekil sapmalar vardi. Yani sekme degistirince ayni arayuzun nefesi
           degisiyordu. Tek olcek:
               blok -> blok        12px
               blok -> yeni baslik 16px  (grup ayrimi)
               baslik -> icerik    12px
           Marj cokusmesi sayesinde baslik mt=16 komsunun mb=12'sini yutar.
           !important gerekiyor cunku index.html'de bu bloklarin bir kismi
           style="margin-top:20px" gibi satir ici marj tasiyor ve satir ici
           bildirimi normal bir kural yenemez. Kapsam dar tutuldu: yalnizca
           sekme iceriginin DOGRUDAN cocuklari. */
        .main-tab-content > * {
            margin-top: 0 !important;
            /* 12 -> 8 px. Her sekmede HER blogun altina 12 px koyuyordu;
               sekiz bloklu bir sekmede tek basina 84 px. Bloklarin kendi ic
               dolgusu duruyor, degisen yalnizca ARALARINDAKI mesafe - yogun
               gorunsun diye kartin ici degil kartlar arasi kisilir.
               6 px denendi ve GERI ALINDI: olcek 4/8/12/16, 6 disarida kalir
               ve ui-audit.js bunu 15 ritim bulgusu olarak yakaladi. Iki
               piksel goze gorunmez, olcek disi bir deger sisteme girer. */
            margin-bottom: var(--space-2) !important;
        }

        .main-tab-content > *:last-child {
            margin-bottom: 0 !important;
        }

        .main-tab-content > h3.panel-title {
            /* Bolum basliginin USTUNDEKI bosluk, ALTINDAKINDEN buyuk kalmali -
               baslik kendinden sonrakine ait gorunsun. Oranlar korunarak
               kisildi (16/12 -> 12/4), yani gruplama okunurlugu bozulmuyor. */
            margin-top: var(--space-3) !important;
            margin-bottom: var(--space-1) !important;
        }

        /* Her sekmenin ILK cocugu gizli bir <h2>'dir (ekran okuyucu basligi),
           bu yuzden :first-child gorunen ilk bloga hicbir zaman denk gelmiyor
           ve Model/Settings sekmelerinde baslik 16px asagi kayiyordu - sag
           paneldeki Properties kutusuyla ayni hizada durmuyordu. */
        .main-tab-content > h3.panel-title:first-child,
        .main-tab-content > h2:first-child + h3.panel-title {
            margin-top: 0 !important;
        }

        /* ---- Tek kart tarifi ----
           Olculen durum: uygulamada IKI ayri kart vardi - .collapsible-panel
           (--bg-elev + cerceve + 4px) ve satir ici yazilmis (--bg-tertiary,
           cercevesiz, 8px, 12px dolgu) - ustune Boundary/Loads sekmelerinde
           hic kartlanmamis bolumler. Ayni sekmede "Point Loads" duz, "Add
           Point Load" kutulu goruluyordu. Kanonik tarif .collapsible-panel'in
           kutusudur; sag paneldeki .entity-section de aynisini kullanir. */
        .panel-card {
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: var(--space-3);
        }

        /* Katlanabilir bolum kendi basligini ve govdesini zaten dolguluyor. */
        .collapsible.panel-card {
            padding: 0;
            overflow: hidden;
        }

        /* ---- Kaydirma cubuklari ----
           Paneller temali, ama panellerin ICINDEKI kaydirma kutulari
           (tablo sarmalayicilari, acilir listeler) tarayici varsayilanini
           kullaniyordu: koyu temanin ustunde parlak beyaz serit. Ayni
           kural butun ic kutulara da uygulanir. */
        .panel *::-webkit-scrollbar,
        .entity-info-panel *::-webkit-scrollbar,
        .modal *::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .panel *::-webkit-scrollbar-track,
        .entity-info-panel *::-webkit-scrollbar-track,
        .modal *::-webkit-scrollbar-track {
            background: var(--bg-main);
        }

        .panel *::-webkit-scrollbar-thumb,
        .entity-info-panel *::-webkit-scrollbar-thumb,
        .modal *::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: var(--r-ctl);
        }

        .panel *::-webkit-scrollbar-thumb:hover,
        .entity-info-panel *::-webkit-scrollbar-thumb:hover,
        .modal *::-webkit-scrollbar-thumb:hover {
            background: var(--border-strong, #3a4454);
        }

        .panel *::-webkit-scrollbar-corner,
        .entity-info-panel *::-webkit-scrollbar-corner,
        .modal *::-webkit-scrollbar-corner {
            background: var(--bg-main);
        }

        /* ---- Komut tamamlama listesi ----
           Komut cubugu ekranin en altinda oldugu icin liste YUKARI acilir.
           Kart dili panellerdekiyle ayni: --bg-elev + cerceve + --r-md. */
        .cmd-autocomplete {
            display: none;
            position: absolute;
            bottom: calc(100% + 4px);
            min-width: 300px;
            max-width: 460px;
            max-height: 240px;
            overflow-y: auto;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
            z-index: 70;
            padding: var(--space-1) 0;
        }

        .cmd-suggestion {
            display: flex;
            align-items: baseline;
            gap: var(--space-2);
            padding: 4px var(--space-3);
            cursor: pointer;
            font-family: var(--font-mono);
            font-size: var(--fs-xs);
            white-space: nowrap;
        }

        .cmd-suggestion.selected {
            background: var(--primary-fill);
        }

        /* Amber (--warning) iki temada da ayni deger; acik zeminde kontrast
           1.75'e dusuyordu, yani okunmuyordu. Komut adi metin renginde ve
           kalin - kimligini kalinlik verir, renk degil. */
        .cmd-suggestion-name {
            color: var(--text);
            font-weight: 600;
            min-width: 64px;
        }

        .cmd-suggestion.selected .cmd-suggestion-name {
            color: #fff;
        }

        /* Kisaltma: komutu bir kez ogrendikten sonra kullanilacak olan sey. */
        .cmd-suggestion-alias {
            color: var(--text-2);   /* --text-3 koyu temada 2.57 kontrast veriyordu */
            min-width: 44px;
        }

        .cmd-suggestion-desc {
            color: var(--text-2);
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cmd-suggestion.selected .cmd-suggestion-alias,
        .cmd-suggestion.selected .cmd-suggestion-desc {
            color: rgba(255, 255, 255, 0.82);
        }

        /* Komut girdisi acik temada beyaz zemin uzerinde amber yaziyordu:
           kontrast 1.85. Ayni amber ailesinin koyu tonu okunur. */
        body.light-mode .command-bar-input {
            color: #92400e;
        }

        /* Gorunum boyutu etiketlerinin rengi anlam tasiyor: o ogenin 3B'deki
           rengi. Ama renkli YAZI olarak acik temada okunmuyordu (camgobegi
           1.81, mavi 3.68 kontrast). Renk noktaya tasindi; anlam duruyor,
           yazi normal metin renginde. */
        .color-key {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: var(--space-2);
            vertical-align: baseline;
        }

        /* Hesap sonucu kutusu: yesil yazi yesil tonlu zeminde 1.92 kontrast
           veriyordu - deger okunmuyordu. Zemin ipucu olarak kalir, deger
           normal metin renginde yazilir. */
        .result-box .result-value {
            color: var(--text);
        }

        /* ---- Arac cubugu acilir menuleri ----
           .canvas-toolbar dar ekranda yatay kaydirilabilmek icin
           overflow-x:auto tasiyor; bu da overflow-y'yi hidden yapiyor ve
           menuler cubugun alt kenarinda kesiliyordu. Snap menusunun 214px'lik
           yuksekliginin 208px'i gorunmuyordu - yani menu aciliyor ama
           goruntulenmiyordu. Sabit konum onu kirpma baglamindan cikarir;
           koordinati acilisinda JS verir (js/ui/layout.js).
           margin YOK: dugme ile menu arasinda bosluk kalirsa imlec o bosluga
           girince hover kesiliyor ve menu kapaniyor. */
        .toolbar-dropdown-menu {
            position: fixed;
            top: auto;
            left: auto;
            margin-top: 0;
        }

        /* ---- Komut cubugu: uc bolum ----
           Girdi 120px'lik bir kutuydu ve cubugun sagina sikismisti; yazmak
           icin once onu bulmak gerekiyordu. Simdi orta bolum TUVALIN
           genisliginde ve girdi onu bastan sona dolduruyor, yani yazdiginiz
           yer cizim alaninin tam alti. Sol ve sag bolumlerin genisligini
           js/ui/layout.js panellerden okuyup --cmd-sol / --cmd-sag olarak
           yaziyor, panel yeniden boyutlaninca birlikte kayiyor. */
        .command-bar {
            height: 32px;
            padding: 0;
            gap: 0;
        }

        .command-bar-left {
            flex: 0 0 auto;
            width: var(--cmd-sol, 326px);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: 0 var(--space-3);
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
        }

        .command-bar-left .command-bar-message {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .command-bar-center {
            position: relative;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .command-bar-right {
            flex: 0 0 auto;
            width: var(--cmd-sag, 286px);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-2);
            padding: 0 var(--space-3);
        }

        /* Girdi orta bolumu doldurur. Sag tarafta ipuclarina yer birakilir. */
        .command-bar-center .command-bar-input {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            height: 24px;
            font-size: var(--fs-sm);
            padding: 2px var(--space-3);
            padding-right: 200px;
        }

        /* Ipuclari girdinin sag ucunda, kutunun icinde durur. */
        .command-bar-center .command-bar-hints {
            position: absolute;
            right: var(--space-3);
            pointer-events: none;
            white-space: nowrap;
        }

        /* Tuval ve arac cubugu kaydirma cubuklari da temali olsun. Deformed
           acilinca cubuk tasiyordu ve altinda tarayicinin klasik beyaz seridi
           (ok dugmeleriyle birlikte) beliriyordu. */
        .canvas-toolbar::-webkit-scrollbar,
        .canvas-area *::-webkit-scrollbar,
        .command-bar *::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .canvas-toolbar::-webkit-scrollbar-track,
        .canvas-area *::-webkit-scrollbar-track,
        .command-bar *::-webkit-scrollbar-track {
            background: var(--bg-main);
        }

        .canvas-toolbar::-webkit-scrollbar-thumb,
        .canvas-area *::-webkit-scrollbar-thumb,
        .command-bar *::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: var(--r-ctl);
        }

        /* Ok dugmeleri: bunlar stillenmeyince serit klasik beyaz gorunuyordu. */
        .panel *::-webkit-scrollbar-button,
        .entity-info-panel *::-webkit-scrollbar-button,
        .modal *::-webkit-scrollbar-button,
        .canvas-toolbar::-webkit-scrollbar-button,
        .canvas-area *::-webkit-scrollbar-button,
        .command-bar *::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        /* ---- Sonuc paneli ----
           "bottom: 0" idi: panel komut cubugunun ve alt bilgi seridinin
           ALTINA uzaniyor, son satirlari onlarin arkasinda kaliyordu.
           left/right de 326px/280px olarak sabit yazilmisti; panel
           suruklenerek genisletilince hizayi kaybediyordu. Ucu de
           js/ui/layout.js'in olctugu degiskenlerden gelir. */
        .results-bottom-panel {
            bottom: var(--alt-yukseklik, 58px);
            left: var(--icerik-sol, 326px);
            right: var(--icerik-sag, 280px);
        }

        /* Cizim balonundaki uzunluk: bakilan tek sayi, oyle de gorunsun.
           --primary koyu zeminde yazi olarak 4.18 kontrast veriyordu;
           --accent-info yazi icin ayrilmis olan. margin-left de artik
           gereksiz: uzunluk artik satirin basinda. */
        .cmd-tooltip .distance {
            color: var(--accent-info);
            font-size: var(--fs-md);
            font-weight: 600;
            margin-left: 0;
        }

        /* ---- Properties: sayi satirlari ----
           Etiket, kutu ve birim ayni yuksekligi paylasiyordu ama satir
           align-items:normal (stretch) oldugu icin ETIKET METNI kutunun
           ustune yapisiyordu - X/Y/Z, yanindaki kutuyla ayni hizada
           gorunmuyordu. Kutu da 182px'e kadar uzuyordu; iceride sag-yasli
           dort haneli bir sayi icin gereginden genis. */
        .entity-property {
            align-items: center;
            gap: var(--space-2);
        }

        .entity-property > .label {
            flex: 0 0 auto;
        }

        .entity-property > .num-wrap {
            flex: 0 1 132px;
            width: auto;
        }

        /* Birim etiketi sabit genislikte: "mm" ve "kN·m" alt alta kaymasin. */
        .entity-property > span:last-child {
            flex: 0 0 auto;
            min-width: 24px;
        }

        /* Cerceveli tehlike dugmesi: yazi tonu ayri token uzerinden. */
        .btn-danger {
            color: var(--danger-text);
            border-color: var(--danger-text);
        }

        /* Sonuc panelinde deger tablolari, gorunum anahtarlari ve notlar
           kendi marjlariyla farkli bosluklar veriyordu (8, 12, 16px).
           Sekme icerigindekiyle ayni ritim.
           !important gerekiyor: bu bloklarin bir kismi satir ici
           margin-bottom tasiyor ve satir ici bildirimi normal kural yenemez
           (sekme icerigindeki ritim katmaniyla ayni sebep). */
        #resultsContent > * {
            margin-top: 0 !important;
            margin-bottom: var(--space-3) !important;
        }

        #resultsContent > *:last-child {
            margin-bottom: 0 !important;
        }

        /* ================================================================
           CALISMA DUZLEMI SERITLERI
           Gorunum dugmelerinin hemen altinda durur; her serit bir duzlem.
           Ad kismina tiklamak o duzleme gecer, x kismi duzlemi siler.
           ================================================================ */
        .plane-chip {
            display: inline-flex;
            align-items: stretch;
            border: 1px solid rgba(71, 85, 105, 0.5);
            background: rgba(30, 41, 59, 0.9);
            border-radius: var(--r-ctl);
            overflow: hidden;
            backdrop-filter: blur(8px);
        }
        .plane-chip.active {
            border-color: var(--primary-text);
            background: var(--primary-fill);
        }
        .plane-chip-name,
        .plane-chip-del {
            background: none;
            border: 0;
            color: var(--text-2);
            font-size: var(--fs-xs);
            font-family: inherit;
            cursor: pointer;
            padding: 4px 8px;
        }
        .plane-chip.active .plane-chip-name,
        .plane-chip.active .plane-chip-del { color: #ffffff; }
        .plane-chip-name:hover { color: var(--text); }
        .plane-chip-del {
            border-left: 1px solid rgba(71, 85, 105, 0.5);
            padding: 4px 7px;
            line-height: 1;
        }
        .plane-chip-del:hover { color: var(--danger-text); background: rgba(239, 68, 68, 0.12); }
        body.light-mode .plane-chip {
            background: rgba(255, 255, 255, 0.92);
            border-color: var(--text-2);
        }
        body.light-mode .plane-chip-name,
        body.light-mode .plane-chip-del { color: #334155; }
        body.light-mode .plane-chip.active { background: var(--primary-fill); }
        body.light-mode .plane-chip.active .plane-chip-name,
        body.light-mode .plane-chip.active .plane-chip-del { color: #ffffff; }

        /* ================================================================
           SAYI KUTUSU: OK TUSLARI YAZININ USTUNE BINIYORDU
           .num-wrap input[type=number] sag dolguyu 16px veriyor ki 15px'lik
           .num-stepper rakamlarin ustune gelmesin. Ama bu kutularin cogunda
           satir ici style="padding:4px" var; satir ici stil yazar kurallarini
           EZER, dolayisiyla sag dolgu 4px'e dusuyor ve sayi ok tuslarinin
           altinda kaliyordu. Alan odaklanincaysa (focus-within) stepper
           opaklasip son basamagi tamamen ortuyor: "100" yazip "10" mu "100" mu
           yazdigini goremiyordunuz. Satir ici dolguyu gecmek icin !important
           sart - kutu kutu satir ici stil temizlemek yerine tek kural.
           ================================================================ */
        .num-wrap input[type="number"] {
            padding-right: 19px !important;
        }

        /* ================================================================
           ALT PANEL TABLOLARI
           On bir sekme var; serit dar ekranda yatay kayar, dikey buyumez.
           ================================================================ */
        .results-bottom-tabs {
            display: flex;
            gap: 2px;
            overflow-x: auto;
            overflow-y: hidden;
            flex: 1;
            min-width: 0;
            scrollbar-width: thin;
        }
        .results-bottom-tabs .results-bottom-tab {
            white-space: nowrap;
            flex: 0 0 auto;
            padding: 6px 10px;
        }

        /* Sagdaki dugme grubu (Report / Export / Katla) KUCULMEZ. Sekme seridi
           flex:1 oldugu icin genisleyip bu grubun uzerine biniyordu: "Combined
           stresses" sekmesi ile "Report" dugmesi ic ice geciyordu. */
        .results-bottom-header > div:last-child {
            flex: 0 0 auto;
        }

        /* Output sekmesi duz metin: hizalamanin bozulmamasi icin tek aralikli. */
        .results-output-text {
            margin: 0;
            padding: var(--space-3) var(--space-4);
            font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
            font-size: var(--fs-sm);
            line-height: 1.55;
            color: var(--text-2);
            white-space: pre;
            overflow: auto;
        }

        .results-notes {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 120px;
            box-sizing: border-box;
            border: 0;
            resize: none;
            background: transparent;
            color: var(--text);
            font-family: inherit;
            font-size: var(--fs-sm);
            line-height: 1.6;
            padding: var(--space-3) var(--space-4);
        }
        .results-notes:focus { outline: none; }

        .results-empty-note {
            padding: var(--space-5) var(--space-4);
            color: var(--text-3);
            font-size: var(--fs-sm);
        }

        /* Siralanan sutun belli olsun - hangi sutuna gore siralandigi
           gorunmuyordu, ayni tablo iki farkli sirada ayni gorunuyordu. */
        .results-data-table th.sorted { color: var(--text); }

        /* ================================================================
           HAZIR AYAR DUGME SATIRI (Fixed / Pinned / Simply / Free)
           flex:1 ile tek satira zorlaniyordu; yazi boyu ekrana gore buyuyunce
           dort dugme panel genisligini asiyor ve sonuncusu disari tasiyordu.
           min-width:0 + sarma: sigdigi kadari yan yana, kalani alt satira.
           ================================================================ */
        .preset-row {
            /* Sabit 2x2. "Sigdigi kadar sutun" (auto-fit) panel genisligine
               gore 3+1 gibi dengesiz bir dizilim birakabiliyordu; dort hazir
               ayar icin 2x2 her yazi boyunda ayni ve dengeli duruyor. */
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 4px;
            margin-top: var(--space-2, 8px);
        }
        .preset-row > button {
            min-width: 0;
            font-size: var(--fs-xs);
            white-space: nowrap;
        }


/* ================================================================
   PANEL YOGUNLUGU
   ----------------------------------------------------------------
   Olculdu (1920x945, model yuklu): sol panelin gorunen yuksekligi
   775 px, icerigi 1709 px - yani iki katindan fazlasi kaydirmayla
   geliyordu. Nereye gittigi:

     Material Properties  361 px   BES veri icin
       baslik 45 - dolgu 12 - uc datasheet satiri 59 + 63 + 38
       (etiketler dar sutunda iki satira sariyordu)
     Beam Profiles       1182 px
       baslik 47 - bos onizleme 190 - form 163
       - etkin plaka bolumu 452 - kutuphane 76 - profiller 132

   Karsilastirma noktasi DNV 3D Beam: her seyi tek ekrana
   sigdiriyor. Fark yazi boyutundan cok CHROME'dan geliyordu -
   baslik yuksekligi, dolgu, satir araligi.

   Asagisi yalnizca PANEL kromunu sikistirir; tuval, arac cubugu ve
   kip cubugu ellenmiyor - orada dokunma hedefi boyutu onemli.
   ================================================================ */

/* Kart basligi: 45 -> 28 px. Baslik bir SATIR, bolum degil. */
.collapsible-header {
    padding: var(--space-1) var(--space-2);
}
/* Kart govdesi kendi icinde kaydirir, PANEL kaydirmaz.
   Sorunun asli buydu: tek bir kart (Beam Profiles, 920 px) butun paneli
   asagi itiyor, oteki bolumlerin BASLIKLARI bile gorunmez oluyordu -
   "her sey nerede" hissi buradan geliyor. Tavan koyunca basliklar her
   zaman yerinde kalir, yalnizca uzun icerik kendi icinde kayar. VS Code
   kenar cubugu, Rhino ozellik paneli ayni sekilde calisir.
   min() ile: kisa dizustu ekranlarda bile ekranin yarisini gecmez. */
.collapsible-content {
    padding: var(--space-2);
    max-height: min(44vh, 400px);
    overflow-y: auto;
}

/* Veri satiri: 59 -> ~24 px. Etiket kucuk ve tek satir; uzun adlar
   (E - Young's Modulus) dar sutunda sarmasin diye satir araligi da
   kisildi. Deger ve birim zaten sagda hizali. */
.datasheet-row {
    padding: 3px 0;
    gap: var(--space-2);
    align-items: center;
}
.datasheet-row .ds-key {
    font-size: var(--fs-xs);
    line-height: 1.25;
}
.datasheet-row .ds-val {
    font-size: var(--fs-sm);
}

/* Alan araligi ve onay satiri */
.field-group { gap: var(--space-2); }
.check-row { padding: 4px var(--space-2); }

/* Kontroller: 36-37 px yukseklik yogun bir arayuzde fazla.
   Sayi girisindeki sag dolgu KORUNUYOR - artirma oklari rakamin
   ustune binmesin diye ozellikle konmustu. */
.panel input[type="text"], .panel input[type="number"], .panel select,
#leftPanel input[type="text"], #leftPanel input[type="number"], #leftPanel select,
#rightPanel input[type="text"], #rightPanel input[type="number"], #rightPanel select {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: var(--fs-sm);
}

/* Profil onizlemesi: SVG 280x180 oraninda cizilir ama kutu 190 px
   yer tutuyordu ve secim yokken tamami bostu. 128 px hem cizime
   yetiyor hem 62 px geri veriyor. */
#profilePreviewArea {
    height: 128px;
}

/* Kartlar arasi bosluk 12 -> 6 px. Yedi kartli bir sekmede bu tek basina
   42 px. Kartin KENDI ic dolgusu korunuyor - sikisik gorunmesin diye
   kisilmasi gereken sey kartlar ARASI mesafe, kartin ici degil. */
#leftPanel .collapsible-panel, #rightPanel .collapsible-panel,
.main-tab-content .collapsible-panel { margin-bottom: 6px; }
#leftPanel .panel-card, #rightPanel .panel-card { margin-bottom: var(--space-2); padding: var(--space-2); }

/* Ipucu kutulari: 62-80 px'lik bir kutu tek cumlelik bir not icin fazla.
   Not KALIYOR - kucuk ve sakin, ama okunur. */
#leftPanel .info-box, #rightPanel .info-box {
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--fs-xs);
    line-height: 1.35;
}

/* Liste kutulari (dugum/kiris listeleri) sabit 150 px tutuyordu.
   Kendi icinde kaydiriyorlar zaten; 118 px alti satiri gosteriyor ve
   panele 64 px geri veriyor. */
#nodeList, #beamList, #elementList, [id$="List"].scroll-list {
    max-height: 118px;
}

/* Ayarlar sayfasindaki aciklama paragraflari: 113 px'lik bir metin blogu
   tek bir dugmeyi anlatiyordu. Metin KALIYOR - ikincil boyutta ve daha sik
   satirla; ayar sayfasi bir okuma metni degil, bir kontrol listesi. */
#tabContentSettings p, #tabContentSettings .form-group > small {
    font-size: var(--fs-xs);
    line-height: 1.4;
    margin-bottom: var(--space-2);
}
#tabContentSettings .form-group { padding: var(--space-2) !important; }

/* Sag panel satir yogunlugu. Kiris secilince panel 1033 px oluyordu
   (gorunen 777): Beam 135 + Section 107 + cizim 150 + Section Properties
   279 + Add Line Load 213. Satirlar 28 px'ti - okunurluk 20 px'te de
   bozulmuyor, ustelik bir bakista daha cok satir goruluyor.
   Bolum ARALIGI da kisildi; bolumlerin kendi ic dolgusu duruyor. */
#rightPanel .entity-property {
    padding: 1px 0;
}
#rightPanel .entity-section {
    margin-bottom: var(--space-2);
    padding: var(--space-2);
}
#rightPanel .entity-section-title {
    margin-bottom: var(--space-1);
}

/* Modal govdeleri de temali kaydirma cubugu kullansin. Dinamik olusturulan
   pencerelerde (Help, Section library) tarayici varsayilani cikiyordu:
   acik gri, kalin, temanin disinda. */
.modal-body::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
[id$="Modal"] div::-webkit-scrollbar { width: 6px; height: 6px; }
.modal-body::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
[id$="Modal"] div::-webkit-scrollbar-track { background: var(--bg-primary); }
.modal-body::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
[id$="Modal"] div::-webkit-scrollbar-thumb {
    background: var(--bg-elevated); border-radius: var(--r-ctl);
}
.modal-body::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover,
[id$="Modal"] div::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Sag paneldeki ozellik satirlari: bir kismi 8 px arali, bir kismi bitisikti.
   Bitisik olmalari kasitli (cizgiyle ayrilan veri satirlari), ama KARISIK
   olmasi degil - denetim ritim bulgusu olarak yakaladi. */
#rightPanel .entity-property { margin: 0; }
#rightPanel #sectionDiagram { margin-bottom: var(--space-2); }
/* Ara baslik altindaki bosluk, bolum basliginin altindakiyle AYNI
   olmali (4 px): ikisi de bir grup aciyor. Farkli olmasi denetimde
   ritim bulgusu veriyordu ve gozle de kararsiz duruyor. */
#rightPanel .entity-subtitle { margin-bottom: var(--space-1) !important; }

/* Yardim pencerelerindeki tablo basliklari BUYUK HARF'e cevriliyordu;
   arayuzun geri kalani normal yaziya gecti. Baslik ayrimini agirlik tasir. */
#dxfHelpModal th, #helpModal th { text-transform: none; }

/* Baslik agirligi. Tarayici h1-h6 icin 700 kullanir; bu arayuzun olcegi
   400/500/600 ve hiyerarsiyi boyut degil agirlik tasiyor. Paneller icin
   zaten ayarliydi, MODALLAR icin degildi - denetim modallara bakmadigi
   surece de gorunmedi. */
[id$="Modal"] h1, [id$="Modal"] h2, [id$="Modal"] h3, [id$="Modal"] h4,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4,
.modal-header h1, .modal-header h2, .modal-header h3 { font-weight: 600; }

#helpModal strong, #sectionLibraryModal strong,
#dxfHelpModal strong { font-weight: 600; }

/* Alt-indis ve ust-indis TABANI. Tarayici bunlari 0.76em cizer; 12.5 px
   tabanda f(y) indisi 9.5 px'e duser. Sembol okunmaz olursa formul de
   okunmaz - 10.5 px'in altina inmesinler. */
.panel sub, .panel sup, #leftPanel sub, #leftPanel sup,
#rightPanel sub, #rightPanel sup, .datasheet sub, .datasheet sup {
    font-size: max(10.5px, 0.78em);
}

/* Tablo satirlari: 36 -> ~24 px */
.data-table td, .data-table th,
.results-data-table td, .results-data-table th {
    padding: 3px var(--space-2);
}

        /* ================================================================
           GENERAL SEKMESI: ONIZLEME PANELIN ALTINA KADAR
           ----------------------------------------------------------------
           Olculdu: "Beam Profiles" kartinin dogal yuksekligi 886 px, ama
           .collapsible-content tavani (min(44vh, 400px)) onu 400 pxe kesip
           ICERIDE kaydiriyordu - panelin altinda bos yer dururken. Onizleme
           kutusu da 190 px yazmasina ragmen 128 pxe sikismisti.

           Tavan oteki sekmelerde kaliyor: yogunluk calismasinda bilerek
           konmustu ve orada isini goruyor. Burada yalnizca BU kart
           muaf tutulup kalan boslugu aliyor.

           Kisa ekranda onizleme min-heighte iner ve kart yine kayar -
           dar ekranda bir sey kaybedilmiyor.
           ================================================================ */
        /* .active SART. Kural bu olmadan yazilmisti ve sekme gizlendiginde
           bile display:flex diyordu: Model sekmesine gecince sol panelde
           General icerigi duruyordu. .main-tab-content varsayilani
           display:none; onu ezen her kural secilmis olma kosulunu tasimali. */
        .main-tab-content.active#tabContentGeneral {
            display: flex;
            flex-direction: column;
            /* min-height DEGIL height: min-height ile kart dogal boyuna (886 px)
               uzayip paneli 443 px asiyordu - panel kayiyor, onizleme yine
               sikisiyordu. Kesin yukseklik verilince kalan bosluk gercekten
               dagitilabiliyor. */
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }

        #tabContentGeneral > .collapsible-panel:not(.buyuyen-kart) {
            flex: 0 0 auto;
        }

        #tabContentGeneral > .collapsible-panel.buyuyen-kart {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        #tabContentGeneral > .buyuyen-kart > .collapsible-content.open {
            max-height: none;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            /* Sigmayan kisim BURADA kaysin - panelin tamami degil. */
            overflow-y: auto;
        }

        /* Kart icinde buyuyen tek parca onizleme; formlar dogal boyunda. */
        #tabContentGeneral .profile-preview-pro {
            height: auto;
            flex: 1 1 auto;
            /* 190 px: kutunun ESKI sabit boyu. Taban olarak o aliniyor ki dar
               ekranda eskisinden kucuk olmasin; yer varsa buyuyor. */
            min-height: 190px;
        }

        #tabContentGeneral .profile-form,
        #tabContentGeneral .underline-tabs {
            flex: 0 0 auto;
        }

        /* ================================================================
           MODEL TABLOSU: SECILI SATIR
           ----------------------------------------------------------------
           Zemin eskiden satir ici stildeydi ve ID hucresi --accent-info ile
           yaziliyordu. Olculdu: mavi yazi (96,165,250) secili zeminde
           (34,67,93) 4.07 kontrast veriyor - okunur sinirin altinda.

           Bu kusur yeni degil; tablolar bugune kadar tuvale cizimle
           dolmadigi icin denetimin gozune hic girmemisti. Tablolar modeli
           takip etmeye baslayinca ilk kosuda cikti.

           Zemin aynen korunuyor, yalnizca ID daha acik bir maviye aliniyor:
           #93c5fd ayni zeminde 5.74. Satirin "secili" oldugu yine renkten
           anlasiliyor, ama numara okunuyor.
           ================================================================ */
        /* Zemin hucrede: fare ustundeki genel satir vurgusu secili satiri ezmesin */
        #modelNodesTable tr.secili-satir td,
        #modelBeamsTable tr.secili-satir td {
            background: rgba(56, 189, 248, 0.2);
        }
        #modelNodesTable tr.secili-satir:hover td,
        #modelBeamsTable tr.secili-satir:hover td {
            background: rgba(56, 189, 248, 0.3);
        }

        /* Renk SATIR ICI degil burada: satir ici stil CSS kuralini eziyor
           ve secili satirda kontrast duzeltmesi hic uygulanmiyordu. */
        .kimlik-hucresi {
            color: var(--accent-info);
            font-weight: 500;
        }

        #modelNodesTable tr.secili-satir .kimlik-hucresi,
        #modelBeamsTable tr.secili-satir .kimlik-hucresi {
            color: #93c5fd;
        }


        /* ================================================================
           KOMPAKT DUZEN - 16 Eylul 2026
           ----------------------------------------------------------------
           Olculdu (1920 px pencere): ust cubuk 65 px, arac cubugu 45 px,
           Solve dugmesi 44 px, sayi girisi 33 px yukseklik / 14,6 px yazi,
           govde satir yuksekligi 1,5 (18,75 px), deger yazisi 14,6 px.
           Kullanici: "sayilar, harfler, basliklar hala cok buyuk; daha
           minimal olsun, hicbir sey ust uste binmesin."

           Hedef, yogun bir muhendislik araci (DNV 3D Beam olcusunde):
             govde 12 px, etiket 11, deger/baslik 13, tek one cikan sayi 16;
             cubuklar 36-48 px; girisler 26 px; satir yuksekligi 1,35.
           Tokenlar burada YENIDEN tanimlanir, tek tek kurallar degil - dort
           adimli olcek korunur, yalnizca adimlar kucultulur. Kontrol icin
           tests/ui-audit.js ve tests/panel-yogunluk.js; bu blok sonra
           yeniden olculdu (asagida degerler).
           ================================================================ */
        :root {
            /* Ikinci tur (17 Eylul): 12/11/13/16 hala "bir tik buyuk, yapay zeka
               programi gibi" bulundu. Referans: masaustu muhendislik yazilimlari
               Windows'un 8-9 pt'sini kullanir - DNV 3D Beam ve SAP2000 8,25 pt
               = 11 px govde. Olcek ona oturtuldu:
                 1280 -> 10.5   1920 -> 11.0   2560+ -> 11.5
               xs 10 / sm 11 / md 12 / lg 14. Daha asagisi (10 px govde) 27"
               monitorde okunmuyor; burasi makul sinir. */
            --fs-taban: clamp(10.5px, calc(0.078vw + 9.5px), 11.5px);
            --fs-xs: calc(var(--fs-taban) * var(--ui-olcek) * 0.9091);  /* 10    */
            --fs-sm: calc(var(--fs-taban) * var(--ui-olcek));           /* 11    */
            --fs-md: calc(var(--fs-taban) * var(--ui-olcek) * 1.0909);  /* 12    */
            --fs-lg: calc(var(--fs-taban) * var(--ui-olcek) * 1.2727);  /* 14    */
            /* Kose yaricapi: 4/8 px yuvarlak "web uygulamasi" hissi veriyor;
               masaustu araclar 2-3 px kullanir. */
            --r-ctl: 3px;
            --r-ovl: 5px;
        }
        body { line-height: 1.3; }

        /* Ust cubuk: Lumeship standardi (css/lumoship-nav.css, 44 px, beyaz) -
           butun araclarda ayni; burada ezilmez. */

        /* Sekme cubugu ve Solve: 46/44 -> 30/26 px. */
        .main-tab { padding: 6px var(--space-3); }
        .main-tab-bar .solve-btn, #solveBtn { padding: 3px 12px; }

        /* Kanvas ustu arac cubugu 45 -> 30 px; gorunus dugmeleri bir adim kucuk. */
        .canvas-toolbar { padding: 1px 4px; }
        .view-mode-btn, .toolbar-btn { padding: 2px 7px; }
        .view-mode-bar, .view-controls { gap: 2px; }

        /* Girisler: sayi girisi 33 px / 14,6 px idi - govde boyunda, 26 px.
           index.html'de 40 giris/secici satir ici font-size, 44 tanesi satir
           ici padding tasiyor (sayildi); satir ici stil her kurali yener.
           Yogunluk TEK yerden yonetilsin diye burada !important - acik tema
           blogunun yaptigi gibi. Kalici cozum satir ici stilleri sokmek. */
        input[type="number"], input[type="text"], select {
            font-size: var(--fs-sm) !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }
        .btn-primary, .btn-secondary { padding: 4px 9px; }
        .btn-small { padding: 2px 7px; }

        /* Tablolar: satir dolgusu 8 -> 4 px; basliklar govdeyle ayni boy. */
        .results-data-table th, .results-data-table td { padding: 4px 7px; }
        .data-table th, .data-table td { padding: 3px 6px; }
        /* Panel bolum basliklari ve ozellik satirlari da sikisir. */
        .entity-section { padding: 8px 10px; }
        .entity-section-title { margin-bottom: 4px; }
        .panel-section { padding: 8px 10px; }
        .panel-title, .panel-section-title, .subpanel-title { margin-bottom: 4px; }
        .command-bar { height: 28px; }
        /* Yalnizca dikey: 'padding: 3px 0' .check-table th'nin sag dolgusunu
           sifirlayip "Plate slendernessPass" yapistiriyordu. */
        .value-table th, .value-table td { padding-top: 3px; padding-bottom: 3px; }

        /* Pencere basliklari ve kapatma isareti: 14,6 / 18,8 -> 13 / 16. */
        .modal-header h2 { font-size: var(--fs-md); }
        .modal-close { font-size: var(--fs-lg); }

        /* Lejant: "Max: 1625.8 MPa (692% - OVER LIMIT)" tek satirda kutudan
           tasiyordu; metin sarilir. */
        #stressLegend { white-space: normal; }

        /* ================================================================
           SONUC KIPI (Results sekmesi) - ozellik paneli salt okunur.
           Kullanici: "results sayfasindayken tiklayinca yuk ekle/cikar,
           mesnet degistir olmasin; orasi sonuclari gorme yeri."
           Duzenleme bolumleri gizlenir, koordinat girisleri kilitlenir;
           sonuc ve kesit ozellik bolumleri kalir. Sekme degisince body
           sinifi kalkar, her sey geri gelir (tabs.js -> switchMainTab).
           ================================================================ */
        body.sonuc-kipi #sonucKipiNotu { display: block !important; }
        body.sonuc-kipi #nodeBCSection,
        body.sonuc-kipi #nodeLoadSection,
        body.sonuc-kipi #beamNodeCoordsSection,
        body.sonuc-kipi #beamEditSectionSection,
        body.sonuc-kipi #beamOrientationSection,
        body.sonuc-kipi #beamHingeSection,
        body.sonuc-kipi #beamBucklingSection,
        body.sonuc-kipi #beamLineLoadSection,
        body.sonuc-kipi #beamPointLoadSection,
        body.sonuc-kipi #beamActionsSection,
        body.sonuc-kipi #infoMultiNodeCards,
        body.sonuc-kipi #multiNodeBCSection,
        body.sonuc-kipi #multiNodeLoadSection,
        body.sonuc-kipi #multiBeamLoadSection,
        body.sonuc-kipi #multiBeamSectionSection,
        body.sonuc-kipi #multiBeamActionsSection { display: none !important; }
        body.sonuc-kipi #infoNodeX,
        body.sonuc-kipi #infoNodeY,
        body.sonuc-kipi #infoNodeZ { pointer-events: none; opacity: 0.7; }
        /* Sag tik menusundeki duzenleme satirlari da kapali */
        body.sonuc-kipi .context-menu-item[onclick*="AddBC"],
        body.sonuc-kipi .context-menu-item[onclick*="AddLoad"],
        body.sonuc-kipi .context-menu-item[onclick*="Delete"],
        body.sonuc-kipi .context-menu-item[onclick*="Split"] { display: none; }

        /* Katlanabilir bolum oku (js/ui/katlama.js) */
        .katlama-ok { margin-left: 6px; color: var(--text-3); font-weight: 400; }
        [data-katlama]:hover .katlama-ok { color: var(--text); }

        /* Ayni satirdaki ogeler hizali olsun: etiket + giris sutunlarinda girisler
           alt cizgide bulussun (farkli satir sayili etiketler girisleri kaydiriyordu);
           yatay flex satirlarda ogeler dikeyde ortalansin. Kendi align-items'i
           olan satirlar (inline style) oncelikli kalir. */
        .entity-section div[style*="display:grid"],
        .panel-card div[style*="display:grid"],
        .input-section div[style*="display:grid"],
        .katlama-icerik div[style*="display:grid"] { align-items: end; }
        .entity-section div[style*="display:flex"]:not([style*="align-items"]):not([style*="flex-direction:column"]),
        .panel-card div[style*="display:flex"]:not([style*="align-items"]):not([style*="flex-direction:column"]),
        .input-section div[style*="display:flex"]:not([style*="align-items"]):not([style*="flex-direction:column"]) { align-items: center; }

        /* Boundary > Current Constraints: 7 sutun + sil dugmesi dar panele sigmiyordu,
           son sutun kirpiliyordu - hucre dolgusu daraltildi, tasarsa yatay kaydirilir */
        .bc-tablo th, .bc-tablo td { padding: 4px 3px; text-align: center; }
        .bc-tablo td:first-child, .bc-tablo th:first-child { text-align: left; padding-left: 6px; }
        .bc-tablo .icon { width: 10px; height: 10px; }

        /* ============== TEK PANEL DUZENI (js/ui/duzen.js) ============== */
        body.tek-panel #entityInfoEmpty { display: none !important; }
        body.tek-panel .main-tab-bar .main-tab-group { gap: 0; }
        body.tek-panel .duzen-kart > .katlama-icerik > * { margin-left: 0; margin-right: 0; }
        body.tek-panel .duzen-kart h3.panel-title,
        body.tek-panel .duzen-kart h3.duzen-altbaslik { font-size: var(--font-size-xs); font-weight: 600; margin: 12px 0 4px; padding: 0; border: 0; color: var(--text-muted); }
        body.tek-panel .duzen-kart .collapsible-panel { border: 0; background: transparent; margin: 0; }
        body.tek-panel .duzen-kart .collapsible-header { padding: 6px 0; background: transparent; }
        body.tek-panel .duzen-kart .collapsible-content { padding: 0; }
        body.tek-panel .duzen-kart .info-box { display: none; }
        body.tek-panel #resultsBottomPanel { display: flex; }
        body.tek-panel .entity-info-panel { width: 340px; }
        /* Preferences penceresinde ayar bolumleri alt alta, kart boslugu olmadan */
        #preferencesModalBody h3.panel-title { margin-top: 18px; }
        #preferencesModalBody h3.panel-title:first-child { margin-top: 0; }

        /* Acilis: tek panel duzeni kurulana kadar ana alan cizilmez - eski
           yerlesim (sol panel + sekmeler) bir an gorunup kayboluyordu */
        body.duzen-bekle .main, body.duzen-bekle .main-tab-bar, body.duzen-bekle .results-bottom-panel { visibility: hidden; }