/* ==========================================================================
   STATISIN 2.0 — PROFESSIONAL STATISTICAL ANALYSIS PLATFORM
   Design language: Claude-inspired · Purple accent #6b5b8d
   Font: Inter (UI) + Source Serif 4 (editorial headings)
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* ── Accent (Purple — Claude-inspired, user-specified) ── */
    --accent:          #6b5b8d;
    --accent-hover:    #5a4a7a;
    --accent-active:   #4a3a68;
    --accent-light:    #f0edf6;
    --accent-muted:    #e3dfed;
    --accent-border:   #c4b8dc;

    /* ── Ground (Warm neutral — Claude's sand palette) ── */
    --bg-app:          #f5f4ef;
    --bg-surface:      #ffffff;
    --bg-panel:        #f0efe9;
    --bg-hover:        #eceae3;
    --bg-stripe:       #f8f7f3;

    /* ── Typography ── */
    --text-main:       #1a1915;
    --text-secondary:  #4a4844;
    --text-muted:      #8a8780;
    --text-placeholder:#b0aea8;

    /* ── Borders ── */
    --border-light:    #e5e3dc;
    --border-medium:   #d0cec7;
    --border-dark:     #b5b3ac;

    /* ── Semantic ── */
    --success:         #2d6a4f;
    --success-bg:      #eaf4ee;
    --success-border:  #a8d5b8;
    --warning:         #92600a;
    --warning-bg:      #fdf3e3;
    --warning-border:  #f5c84a;
    --danger:          #a33030;
    --danger-bg:       #fdf0f0;
    --danger-border:   #f0b0b0;
    --info:            #1a5276;
    --info-bg:         #eaf2fa;
    --info-border:     #9dc8ea;

    /* ── Typography stacks ── */
    --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif:      'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono:       'JetBrains Mono', 'Fira Code', 'Menlo', monospace;

    /* ── Spacing & sizing ── */
    --header-h:        56px;
    --tab-h:           40px;
    --status-h:        28px;

    /* ── Shadows ── */
    --shadow-xs:       0 1px 2px rgba(26,25,21,.04);
    --shadow-sm:       0 1px 4px rgba(26,25,21,.07);
    --shadow-md:       0 4px 14px rgba(26,25,21,.09);
    --shadow-lg:       0 8px 32px rgba(26,25,21,.13);
    --shadow-modal:    0 20px 60px rgba(26,25,21,.20), 0 4px 16px rgba(26,25,21,.10);
    --shadow-accent:   0 4px 14px rgba(107,91,141,.30);

    /* ── Radii ── */
    --r-xs:  3px;
    --r-sm:  5px;
    --r-md:  8px;
    --r-lg:  12px;
    --r-xl:  16px;

    /* ── Transitions ── */
    --t-fast: 0.12s ease;
    --t-med:  0.20s ease;
    --t-slow: 0.30s ease;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:focus         { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

html, body { height: 100%; width: 100%; overflow: hidden; }

body {
    font-family:  var(--font-ui);
    font-size:    13px;
    line-height:  1.55;
    color:        var(--text-main);
    background:   var(--bg-app);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings:   "kern" 1, "liga" 1;
}

* { font-family: var(--font-ui); }

h1,h2,h3,h4,h5,h6,
.modal-title,
.output-section h3,
.ref-header h2,
.empty-title { font-family: var(--font-serif); letter-spacing: -0.02em; }

/* FA hard-override */
.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,[class*="fa-"] {
    font-family: 'Font Awesome 6 Free' !important;
}
.fa-brands { font-family: 'Font Awesome 6 Brands' !important; }

/* ==========================================================================
   3. SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border-medium); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==========================================================================
   4. APP SHELL
   ========================================================================== */
.app-container {
    display:        flex;
    flex-direction: column;
    height:         100vh;
    width:          100%;
    background:     var(--bg-surface);
}

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.header {
    height:          var(--header-h);
    background:      var(--bg-surface);
    border-bottom:   1px solid var(--border-light);
    display:         flex;
    align-items:     center;
    padding:         0 16px 0 20px;
    gap:             16px;
    flex-shrink:     0;
    position:        relative;
    z-index:         20;
    box-shadow:      var(--shadow-xs);
}

/* Brand */
.header-brand {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
    margin-right: 8px;
}

.brand-icon {
    width:            34px;
    height:           34px;
    border-radius:    var(--r-md);
    background:       var(--accent);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            #fff;
    font-size:        15px;
    box-shadow:       var(--shadow-accent);
    flex-shrink:      0;
}

.brand-logo-svg {
    width:       36px;
    height:      36px;
    flex-shrink: 0;
    display:     block;
    filter:      drop-shadow(0 2px 6px rgba(107,91,141,0.35));
    transition:  transform var(--t-med), filter var(--t-med);
}

.header-brand:hover .brand-logo-svg {
    transform: rotate(-6deg) scale(1.06);
    filter:    drop-shadow(0 4px 10px rgba(107,91,141,0.45));
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }

.brand-name {
    font-family:  var(--font-serif);
    font-size:    15px;
    font-weight:  700;
    color:        var(--text-main);
    letter-spacing: -0.03em;
}

.brand-tagline {
    font-size:   10px;
    font-weight: 500;
    color:       var(--text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Toolbar (inside header) */
.header-toolbar {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex:        1;
    overflow-x:  auto;
    overflow-y:  hidden;
    padding-bottom: 0;
}

.header-toolbar::-webkit-scrollbar { height: 0; }

.tb-group {
    display:     flex;
    align-items: center;
    gap:         1px;
    flex-shrink: 0;
    position:    relative;
}

.tb-divider {
    width:       1px;
    height:      22px;
    background:  var(--border-light);
    margin:      0 6px;
    flex-shrink: 0;
}

.tb-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    padding:         5px 8px;
    border:          1px solid transparent;
    border-radius:   var(--r-sm);
    background:      transparent;
    color:           var(--text-secondary);
    cursor:          pointer;
    font-size:       10px;
    font-weight:     500;
    font-family:     var(--font-ui);
    line-height:     1.2;
    white-space:     nowrap;
    transition:      background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
    min-width:       44px;
    user-select:     none;
}

.tb-btn i {
    font-size:   13px;
    font-family: 'Font Awesome 6 Free' !important;
    flex-shrink: 0;
}

.tb-btn:hover {
    background:    var(--bg-panel);
    border-color:  var(--border-light);
    color:         var(--text-main);
}

.tb-btn:active { background: var(--bg-hover); transform: translateY(0.5px); }

/* Primary CTA */
.tb-btn--primary {
    background:    var(--accent);
    color:         #fff;
    border-color:  var(--accent);
    box-shadow:    var(--shadow-accent);
    min-width:     60px;
}
.tb-btn--primary:hover {
    background:   var(--accent-hover);
    border-color: var(--accent-hover);
    color:        #fff;
}

/* Danger */
.tb-btn--danger { color: var(--danger); }
.tb-btn--danger:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

/* Icon-only */
.tb-btn--icon { min-width: 32px; padding: 5px 6px; }
.tb-btn--icon span { display: none; }

/* Header right */
.header-end { flex-shrink: 0; margin-left: 8px; }

.header-badge {
    display:      flex;
    align-items:  center;
    gap:          5px;
    font-size:    11px;
    font-weight:  600;
    color:        var(--text-muted);
    background:   var(--bg-panel);
    border:       1px solid var(--border-light);
    border-radius: 99px;
    padding:      3px 10px;
}

.badge-dot {
    width:        6px;
    height:       6px;
    border-radius: 50%;
    background:   var(--success);
    animation:    pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%,100% { opacity:1; transform: scale(1); }
    50%      { opacity:.5; transform: scale(.85); }
}

/* ==========================================================================
   6. VIEW TABS
   ========================================================================== */
.view-tabs {
    height:        var(--tab-h);
    background:    var(--bg-surface);
    border-bottom: 1px solid var(--border-light);
    display:       flex;
    padding:       0 16px;
    align-items:   flex-end;
    flex-shrink:   0;
    gap:           0;
}

.view-tab {
    height:        100%;
    padding:       0 18px;
    display:       flex;
    align-items:   center;
    gap:           7px;
    cursor:        pointer;
    border:        none;
    border-bottom: 2px solid transparent;
    color:         var(--text-muted);
    font-weight:   500;
    font-size:     12px;
    font-family:   var(--font-ui);
    background:    transparent;
    margin-bottom: -1px;
    user-select:   none;
    position:      relative;
    transition:    color var(--t-med), border-color var(--t-med), background var(--t-med);
}

.view-tab i {
    font-size:   11px;
    font-family: 'Font Awesome 6 Free' !important;
}

.view-tab:hover:not(.active) { color: var(--text-secondary); background: var(--bg-panel); }

.view-tab.active {
    color:              var(--text-main);
    border-bottom-color: var(--accent);
    font-weight:        600;
}

.tab-badge {
    position:    absolute;
    top:         8px;
    right:       8px;
    width:       6px;
    height:      6px;
    border-radius: 50%;
    background:  var(--accent);
}

/* ==========================================================================
   7. DATA CONTAINER
   ========================================================================== */
.data-container {
    flex:       1;
    position:   relative;
    background: var(--bg-surface);
    overflow:   auto;
}

/* ==========================================================================
   8. VIEW VISIBILITY
   ========================================================================== */
.data-view,
.variable-view,
.output-view,
.stat-tables-view { display: none !important; }

table.data-view.active,
table.variable-view.active {
    display:          table !important;
    width:            100%;
    border-collapse:  collapse;
    table-layout:     fixed;
}

div.stat-tables-view.active {
    display:    block !important;
    width:      100%;
    height:     100%;
    overflow-y: auto;
    background: var(--bg-app);
    padding:    0;
}

/* output-view.active handled in section 27 with flex layout */
div.output-view.active { padding: 0 !important; }

/* ==========================================================================
   9. DATA TABLE — Spreadsheet
   ========================================================================== */
#dataTable { user-select: none; cursor: cell; }

#dataTable th,
#dataTable td {
    border-right:   1px solid var(--border-light);
    border-bottom:  1px solid var(--border-light);
    padding:        0 10px;
    height:         30px;
    line-height:    30px;
    text-align:     left;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    font-family:    var(--font-ui);
    font-size:      12.5px;
}

#dataTable th {
    background:  var(--bg-panel);
    font-weight: 500;
    color:       var(--text-secondary);
    font-size:   11.5px;
    letter-spacing: .01em;
    position:    sticky;
    top:         0;
    z-index:     10;
    border-top:  1px solid var(--border-light);
}

#dataTable th:first-child {
    position:   sticky;
    left:       0;
    z-index:    11;
    min-width:  42px;
    max-width:  42px;
    text-align: center;
    border-left: 1px solid var(--border-light);
    background: var(--bg-panel);
}

#dataTable td:first-child {
    position:    sticky;
    left:        0;
    z-index:     9;
    background:  var(--bg-stripe);
    min-width:   42px;
    max-width:   42px;
    text-align:  center;
    color:       var(--text-muted);
    font-size:   11px;
    font-weight: 400;
    border-left: 1px solid var(--border-light);
}

#dataTable td { background: var(--bg-surface); color: var(--text-main); }

#dataTable tbody tr:hover td { background: var(--accent-light); }
#dataTable tbody tr:hover td:first-child { background: var(--accent-muted); }

.cell-selected { background-color: var(--accent-light) !important; }

.active-cell {
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    background: #fff !important;
    z-index: 5;
}

.cell-editor {
    position:    absolute;
    inset:       0;
    width:       100%;
    height:      100%;
    border:      2px solid var(--accent);
    outline:     none;
    padding:     0 10px;
    font-family: var(--font-ui);
    font-size:   12.5px;
    z-index:     50;
    background:  #fff;
    box-shadow:  var(--shadow-md);
    color:       var(--text-main);
}

/* ==========================================================================
   10. VARIABLE TABLE
   ========================================================================== */
#variableTable { width: 100%; border-collapse: collapse; table-layout: fixed; }

#variableTable th,
#variableTable td {
    border:         1px solid var(--border-light);
    padding:        3px 6px;
    text-align:     left;
    vertical-align: middle;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    font-family:    var(--font-ui);
    font-size:      12px;
}

#variableTable th {
    background:     var(--bg-panel);
    font-weight:    500;
    color:          var(--text-secondary);
    position:       sticky;
    top:            0;
    z-index:        10;
    font-size:      11px;
    padding:        5px 6px;
    text-align:     center;
    letter-spacing: .01em;
}

#variableTable td input,
#variableTable td select {
    width:          100%;
    height:         26px;
    padding:        0 5px;
    border:         1px solid transparent;
    background:     transparent;
    border-radius:  var(--r-xs);
    font-family:    var(--font-ui);
    font-size:      12px;
    color:          var(--text-main);
    transition:     border-color var(--t-fast), background var(--t-fast);
}

#variableTable td input:hover,
#variableTable td select:hover { background: var(--bg-panel); }

#variableTable td input:focus,
#variableTable td select:focus {
    border-color: var(--accent);
    background:   var(--bg-surface);
    box-shadow:   0 0 0 2px rgba(107,91,141,.15);
    outline:      none;
}

#variableTable td button {
    width:         100%;
    height:        26px;
    border:        1px solid var(--border-light);
    background:    var(--bg-surface);
    border-radius: var(--r-xs);
    cursor:        pointer;
    font-size:     11px;
    color:         var(--text-secondary);
    transition:    all var(--t-fast);
    padding:       0 4px;
}
#variableTable td button:hover { background: var(--bg-hover); border-color: var(--border-medium); }

/* Column widths */
#variableTable th:nth-child(1),#variableTable td:nth-child(1)  {width:120px;min-width:100px}
#variableTable th:nth-child(2),#variableTable td:nth-child(2)  {width:90px;min-width:80px}
#variableTable th:nth-child(3),#variableTable td:nth-child(3)  {width:55px;min-width:45px}
#variableTable th:nth-child(4),#variableTable td:nth-child(4)  {width:55px;min-width:45px}
#variableTable th:nth-child(5),#variableTable td:nth-child(5)  {width:160px;min-width:120px}
#variableTable th:nth-child(6),#variableTable td:nth-child(6)  {width:75px;min-width:55px}
#variableTable th:nth-child(7),#variableTable td:nth-child(7)  {width:75px;min-width:55px}
#variableTable th:nth-child(8),#variableTable td:nth-child(8)  {width:55px;min-width:45px}
#variableTable th:nth-child(9),#variableTable td:nth-child(9)  {width:75px;min-width:55px}
#variableTable th:nth-child(10),#variableTable td:nth-child(10){width:75px;min-width:55px}
#variableTable th:nth-child(11),#variableTable td:nth-child(11){width:75px;min-width:55px}

/* ==========================================================================
   11. OUTPUT SECTION
   ========================================================================== */
/* outputContent is now inside .output-main — max-width handled there */
#outputContent {
    max-width:      900px;
    margin:         0 auto;
    min-height:     100%;
    padding-bottom: 60px;
}

/* Empty State */
.output-empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         80px 40px;
    text-align:      center;
    min-height:      420px;
}

.empty-icon {
    width:           72px;
    height:          72px;
    border-radius:   var(--r-xl);
    background:      var(--accent-light);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--accent);
    font-size:       28px;
    margin-bottom:   24px;
    border:          1px solid var(--accent-muted);
}

.empty-title {
    font-family:   var(--font-serif);
    font-size:     20px;
    font-weight:   600;
    color:         var(--text-main);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.empty-desc {
    font-size:     13.5px;
    color:         var(--text-muted);
    max-width:     420px;
    line-height:   1.65;
    margin-bottom: 28px;
}

.empty-cta {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 22px;
    background:    var(--accent);
    color:         #fff;
    border:        1px solid var(--accent);
    border-radius: var(--r-md);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--t-fast), box-shadow var(--t-fast);
    box-shadow:    var(--shadow-accent);
}
.empty-cta:hover { background: var(--accent-hover); }
.empty-cta i { font-family: 'Font Awesome 6 Free' !important; }

/* Output Section Card */
.output-section {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding:       28px 32px;
    margin-bottom: 24px;
    box-shadow:    var(--shadow-sm);
    position:      relative;
}

.output-header-container {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    border-bottom:   1px solid var(--border-light);
    margin-bottom:   20px;
    padding-bottom:  14px;
    position:        relative;
}

/* Signature: purple accent underline */
.output-header-container::after {
    content:       '';
    position:      absolute;
    bottom:        -2px;
    left:          0;
    width:         40px;
    height:        2px;
    background:    var(--accent);
    border-radius: 1px;
}

.output-header-container h3 {
    font-family:    var(--font-serif);
    font-size:      1.05rem;
    font-weight:    600;
    color:          var(--text-main);
    margin:         0;
    display:        flex;
    align-items:    center;
    gap:            8px;
    letter-spacing: -0.02em;
}

.output-header-container h3 i { color: var(--accent); font-size: 14px; font-family: 'Font Awesome 6 Free' !important; }

.output-section h4 {
    font-family:    var(--font-ui);
    font-size:      10.5px;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin:         22px 0 10px;
}

.output-section p {
    color:         var(--text-secondary);
    margin-bottom: 10px;
    line-height:   1.65;
    font-size:     13px;
}

/* APA-style statistical tables */
.output-section table.data-table {
    width:           100%;
    border-collapse: collapse;
    margin-bottom:   18px;
    font-size:       12.5px;
}

.output-section table.data-table th,
.output-section table.data-table td { border: none; padding: 7px 10px; text-align: left; }

.output-section table.data-table th {
    background:     transparent;
    border-top:     2px solid var(--text-main);
    border-bottom:  1px solid var(--border-dark);
    color:          var(--text-main);
    font-weight:    600;
    font-size:      11.5px;
    letter-spacing: .01em;
}

.output-section table.data-table td { border-bottom: 1px solid var(--border-light); color: var(--text-main); }
.output-section table.data-table tr:last-child td { border-bottom: 2px solid var(--text-main); }
.output-section table.data-table tr:nth-child(even) td { background: var(--bg-stripe); }

.action-delete-btn {
    color:         var(--text-muted);
    background:    transparent;
    border:        1px solid transparent;
    border-radius: var(--r-sm);
    padding:       3px 10px;
    cursor:        pointer;
    font-size:     11.5px;
    font-weight:   500;
    transition:    all var(--t-med);
}
.action-delete-btn i { font-family: 'Font Awesome 6 Free' !important; }
.action-delete-btn:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

/* ==========================================================================
   12. REFERENCE VIEW
   ========================================================================== */
.ref-container { padding: 32px; }

.ref-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.ref-header h2 {
    font-family:    var(--font-serif);
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--text-main);
    margin-bottom:  6px;
    letter-spacing: -0.03em;
    display:        flex;
    align-items:    center;
    gap:            10px;
}

.ref-header h2 i { color: var(--accent); font-family: 'Font Awesome 6 Free' !important; }
.ref-header p   { color: var(--text-muted); font-size: 13px; }

.ref-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
}

.ref-note { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }

/* Badge pills in ref tables */
.badge-pill {
    display:       inline-block;
    padding:       2px 10px;
    border-radius: 99px;
    font-size:     11px;
    font-weight:   600;
}
.badge-green  { background:#d1f0e0; color:#1a5234; }
.badge-purple { background:var(--accent-light); color:var(--accent); }
.badge-yellow { background:#fef3c7; color:#92600a; }
.badge-red    { background:var(--danger-bg); color:var(--danger); }

/* ==========================================================================
   13. BUTTONS (global)
   ========================================================================== */
button, .btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         7px 14px;
    border-radius:   var(--r-sm);
    border:          1px solid transparent;
    background:      transparent;
    color:           var(--text-secondary);
    cursor:          pointer;
    font-weight:     500;
    font-size:       12.5px;
    font-family:     var(--font-ui);
    line-height:     1.4;
    white-space:     nowrap;
    user-select:     none;
    transition:      background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

button i, .btn i { font-size: 12px; font-family: 'Font Awesome 6 Free' !important; flex-shrink: 0; }

button:hover, .btn:hover { background: var(--bg-hover); border-color: var(--border-light); color: var(--text-main); }
button:active, .btn:active { transform: translateY(.5px); }

.btn-primary {
    background:  var(--accent);
    color:       #fff;
    border-color: var(--accent);
    box-shadow:  var(--shadow-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-secondary {
    background:  var(--bg-surface);
    color:       var(--text-secondary);
    border-color: var(--border-medium);
}
.btn-secondary:hover { background: var(--bg-panel); border-color: var(--border-dark); color: var(--text-main); }

.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-panel); border-color: var(--border-light); }

.btn-sm { padding: 4px 10px; font-size: 11.5px; }

/* ==========================================================================
   14. MODALS
   ========================================================================== */
.modal {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(26,25,21,.45);
    z-index:         1000;
    align-items:     center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal.active { display: flex; }

.modal-content {
    background:    var(--bg-surface);
    border-radius: var(--r-xl);
    width:         100%;
    max-width:     520px;
    box-shadow:    var(--shadow-modal);
    display:       flex;
    flex-direction: column;
    max-height:    90vh;
    border:        1px solid var(--border-light);
    animation:     modalIn .18s cubic-bezier(.34,1.3,.64,1) both;
}

.modal-content--wide { max-width: 640px; }
.modal-content--xl   { max-width: 780px; }

@keyframes modalIn {
    from { opacity:0; transform: translateY(-10px) scale(.97); }
    to   { opacity:1; transform: translateY(0)     scale(1);   }
}

.modal-header {
    padding:         16px 24px;
    border-bottom:   1px solid var(--border-light);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-shrink:     0;
    background:      var(--bg-panel);
    border-radius:   var(--r-xl) var(--r-xl) 0 0;
}

.modal-title {
    font-family:    var(--font-serif);
    font-size:      15px;
    font-weight:    600;
    color:          var(--text-main);
    display:        flex;
    align-items:    center;
    gap:            8px;
    letter-spacing: -0.02em;
}

.modal-title i { color: var(--accent); font-size: 14px; font-family: 'Font Awesome 6 Free' !important; }
.modal-title-sub { font-family: var(--font-ui); font-size: 13px; font-weight: 400; color: var(--accent); margin-left: 4px; }

.modal-close {
    width:         28px;
    height:        28px;
    border-radius: var(--r-sm);
    border:        none;
    background:    transparent;
    color:         var(--text-muted);
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     13px;
    transition:    all var(--t-fast);
    padding:       0;
    flex-shrink:   0;
}
.modal-close i { font-family: 'Font Awesome 6 Free' !important; }
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }

.modal-body {
    padding:    22px 24px;
    overflow-y: auto;
    flex:       1;
}

.modal-footer {
    padding:         14px 24px;
    border-top:      1px solid var(--border-light);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    background:      var(--bg-panel);
    border-radius:   0 0 var(--r-xl) var(--r-xl);
    flex-shrink:     0;
    gap:             10px;
}

.footer-hint {
    font-size:   11.5px;
    color:       var(--text-muted);
    display:     flex;
    align-items: center;
    gap:         6px;
    flex:        1;
}
.footer-hint i { color: var(--accent); font-family: 'Font Awesome 6 Free' !important; }

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

/* ==========================================================================
   15. FORMS
   ========================================================================== */
.form-group { margin-bottom: 16px; }
.form-group.mb-0 { margin-bottom: 0; }

.form-group label,
label {
    display:       block;
    margin-bottom: 5px;
    font-weight:   600;
    color:         var(--text-secondary);
    font-size:     11.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.form-row-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
}

.form-control,
input[type="text"],
input[type="number"],
select,
textarea {
    width:          100%;
    padding:        8px 11px;
    border:         1px solid var(--border-medium);
    border-radius:  var(--r-md);
    background:     var(--bg-surface);
    font-family:    var(--font-ui);
    font-size:      13px;
    color:          var(--text-main);
    transition:     border-color var(--t-fast), box-shadow var(--t-fast);
    appearance:     none;
    -webkit-appearance: none;
}

select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8780' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 11px center;
    padding-right:       32px;
}

.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px rgba(107,91,141,.12);
    outline:      none;
}

input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
input[type="file"].form-control { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }

/* Option groups */
.option-group {
    display:       flex;
    flex-direction: column;
    gap:           10px;
    padding:       14px 16px;
    background:    var(--bg-panel);
    border-radius: var(--r-md);
    border:        1px solid var(--border-light);
    margin-top:    14px;
}

.checkbox-label {
    display:        flex;
    align-items:    center;
    gap:            8px;
    cursor:         pointer;
    font-weight:    400;
    font-size:      13px;
    color:          var(--text-main);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom:  0;
    user-select:    none;
}

.checkbox-label--accent { color: var(--accent); font-weight: 600; }

.radio-label {
    display:     flex;
    align-items: center;
    gap:         8px;
    cursor:      pointer;
    font-weight: 400;
    font-size:   13px;
    color:       var(--text-main);
    padding:     6px 0;
    user-select: none;
}

input[type="radio"] { accent-color: var(--accent); }

.missing-sub-inputs {
    display:       flex;
    flex-direction: column;
    gap:           8px;
    margin:        10px 0 0 22px;
}

.range-inputs { display: flex; align-items: center; gap: 10px; }
.range-sep { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

/* File drop zone */
.file-drop-zone {
    border:         2px dashed var(--border-medium);
    border-radius:  var(--r-lg);
    padding:        32px 24px;
    text-align:     center;
    background:     var(--bg-panel);
    transition:     border-color var(--t-fast), background var(--t-fast);
    cursor:         pointer;
}
.file-drop-zone:hover { border-color: var(--accent); background: var(--accent-light); }
.file-drop-zone i { font-size: 32px; color: var(--accent); margin-bottom: 10px; display: block; font-family: 'Font Awesome 6 Free' !important; }
.file-drop-zone p { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.file-formats { font-size: 11px; color: var(--text-muted); letter-spacing: .04em; }
.file-browse-link { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.file-name-display { font-size: 12px; color: var(--accent); font-weight: 500; margin-top: 10px; min-height: 18px; }

/* Compute vars list */
.compute-vars-list {
    max-height:    180px;
    overflow-y:    auto;
    border:        1px solid var(--border-medium);
    border-radius: var(--r-md);
    padding:       10px 12px;
    background:    var(--bg-surface);
    display:       flex;
    flex-direction: column;
    gap:           4px;
}

/* Value labels editor */
.value-labels-header {
    display:               grid;
    grid-template-columns: 110px 1fr;
    gap:                   10px;
    font-weight:           700;
    font-size:             11px;
    color:                 var(--text-muted);
    text-transform:        uppercase;
    letter-spacing:        .05em;
    margin-bottom:         8px;
    padding:               0 2px;
}

.value-labels-grid-body {
    max-height:    220px;
    overflow-y:    auto;
    display:       flex;
    flex-direction: column;
    gap:           6px;
    padding-right: 4px;
}

.value-labels-actions { margin-top: 14px; display: flex; gap: 8px; }

.value-input, .label-input {
    width:         100%;
    padding:       5px 8px;
    border:        1px solid var(--border-medium);
    border-radius: var(--r-sm);
    font-size:     12.5px;
    background:    var(--bg-surface);
    color:         var(--text-main);
    transition:    border-color var(--t-fast), box-shadow var(--t-fast);
}
.value-input:focus, .label-input:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 2px rgba(107,91,141,.12);
    outline:      none;
}

.value-labels-row {
    display:               grid;
    grid-template-columns: 110px 1fr;
    gap:                   10px;
    align-items:           center;
}

/* Recode */
.recode-header-row {
    display:               grid;
    grid-template-columns: 1fr 24px 1fr;
    gap:                   8px;
    font-weight:           700;
    font-size:             11px;
    color:                 var(--text-muted);
    text-transform:        uppercase;
    letter-spacing:        .05em;
    margin-bottom:         8px;
    text-align:            center;
}

.recode-grid-body {
    display:       flex;
    flex-direction: column;
    gap:           6px;
    max-height:    220px;
    overflow-y:    auto;
    margin-bottom: 12px;
    padding-right: 4px;
}

.recode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.recode-old-value, .recode-new-value {
    width:         100%;
    padding:       5px 8px;
    border:        1px solid var(--border-medium);
    border-radius: var(--r-sm);
    font-size:     12.5px;
    background:    var(--bg-surface);
    color:         var(--text-main);
    transition:    border-color var(--t-fast);
}
.recode-old-value:focus,.recode-new-value:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 2px rgba(107,91,141,.12);
    outline:      none;
}

/* ==========================================================================
   16. ANALYZE MODAL — GRID LAYOUT
   ========================================================================== */

/* Modal header override for Analyze modal — judul pakai Source Serif 4 */
#analyzeOptionsModal .modal-title {
    font-family:    var(--font-serif);
    font-size:      16px;
    font-weight:    700;
    letter-spacing: -0.025em;
    color:          var(--text-main);
}

#analyzeOptionsModal .modal-title i {
    color:       var(--accent);
    font-size:   15px;
    font-family: 'Font Awesome 6 Free' !important;
}

/* Grid layout */
.analyze-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
}

/* Setiap kartu kategori */
.analyze-category {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-xs);
    transition:    box-shadow var(--t-med), border-color var(--t-med);
}

.analyze-category:hover {
    box-shadow:    var(--shadow-sm);
    border-color:  var(--accent-border);
}

/* Header kategori — pakai Source Serif 4 */
.analyze-cat-header {
    padding:        11px 16px;
    font-family:    var(--font-serif);
    font-size:      13px;
    font-weight:    700;
    color:          var(--accent);
    letter-spacing: -0.01em;
    background:     var(--accent-light);
    border-bottom:  1px solid var(--accent-muted);
    display:        flex;
    align-items:    center;
    gap:            8px;
}

.analyze-cat-header i {
    font-family: 'Font Awesome 6 Free' !important;
    font-size:   13px;
    flex-shrink: 0;
}

/* List item */
.analyze-options-list { list-style: none; padding: 6px; margin: 0; }
.analyze-options-list li { margin-bottom: 1px; }

/* Label pilihan analisis */
.analyze-option {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       9px 10px;
    border-radius: var(--r-sm);
    cursor:        pointer;
    transition:    background var(--t-fast);
    user-select:   none;
}

.analyze-option:hover { background: var(--accent-light); }

.analyze-option:has(input:checked) {
    background:    var(--accent-light);
    border-radius: var(--r-sm);
}

.analyze-option input[type="checkbox"] {
    margin-top:   3px;
    flex-shrink:  0;
    accent-color: var(--accent);
}

/* Nama analisis — pakai Source Serif 4 */
.option-name {
    font-family:  var(--font-serif);
    font-weight:  600;
    font-size:    13px;
    color:        var(--text-main);
    display:      block;
    letter-spacing: -0.01em;
}

/* Deskripsi — pakai Inter (font-ui, normal) */
.option-desc {
    font-family: var(--font-ui);
    font-size:   11.5px;
    font-weight: 400;
    color:       var(--text-muted);
    display:     block;
    margin-top:  2px;
    line-height: 1.45;
}

/* Panel opsi tambahan di bawah grid */
.analysis-options-panel {
    margin-top:     18px;
    padding:        18px 20px;
    background:     var(--bg-panel);
    border-radius:  var(--r-lg);
    border:         1px solid var(--border-medium);
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

/* Label section dalam panel opsi — pakai Source Serif 4 */
.option-section-label {
    font-family:    var(--font-serif);
    font-size:      13px;
    font-weight:    700;
    color:          var(--accent);
    letter-spacing: -0.01em;
    display:        flex;
    align-items:    center;
    gap:            7px;
    margin-bottom:  12px;
}

.option-section-label i {
    font-family: 'Font Awesome 6 Free' !important;
    font-size:   13px;
}

/* ==========================================================================
   17. VARIABLE SELECTION MODAL
   ========================================================================== */
.variable-selection {
    display:     flex;
    gap:         12px;
    align-items: stretch;
    height:      220px;
}

.varlist-pane { flex: 1; display: flex; flex-direction: column; }

.varlist-pane-label {
    font-size:      11px;
    font-weight:    700;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom:  6px;
}

.var-list-container {
    flex:          1;
    border:        1px solid var(--border-medium);
    border-radius: var(--r-md);
    overflow-y:    auto;
    background:    var(--bg-surface);
}

.var-list-container ul { list-style: none; padding: 4px; margin: 0; }

.var-list-item {
    padding:         7px 12px;
    cursor:          pointer;
    border-radius:   var(--r-sm);
    font-size:       12.5px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    transition:      background var(--t-fast);
    color:           var(--text-main);
    margin-bottom:   2px;
}
.var-list-item:hover     { background: var(--bg-panel); }
.var-list-item.selected  { background: var(--accent); color: #fff; }
.var-list-item.selected .var-type-indicator { background: rgba(255,255,255,.2); color: #fff; }

.var-type-indicator {
    font-size:     10px;
    padding:       2px 8px;
    border-radius: 99px;
    background:    var(--bg-panel);
    color:         var(--text-muted);
    font-weight:   600;
    flex-shrink:   0;
}

.varlist-actions {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             8px;
    flex-shrink:     0;
}

.varlist-btn {
    width:           32px;
    height:          32px;
    padding:         0;
    min-width:       unset;
    border:          1px solid var(--border-medium);
    border-radius:   var(--r-sm);
    background:      var(--bg-surface);
}
.varlist-btn:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   18. CONTEXT MENU
   ========================================================================== */
.context-menu {
    display:       none;
    position:      fixed;
    background:    var(--bg-surface);
    border:        1px solid var(--border-medium);
    border-radius: var(--r-lg);
    box-shadow:    var(--shadow-lg);
    z-index:       2000;
    padding:       5px;
    min-width:     180px;
    animation:     ctxIn .1s ease both;
}

@keyframes ctxIn {
    from { opacity:0; transform: scale(.96) translateY(-4px); }
    to   { opacity:1; transform: scale(1)   translateY(0);    }
}

.context-menu-item {
    padding:       7px 13px;
    cursor:        pointer;
    font-size:     12.5px;
    display:       flex;
    align-items:   center;
    gap:           9px;
    color:         var(--text-main);
    border-radius: var(--r-sm);
    transition:    background var(--t-fast);
}
.context-menu-item i { color: var(--text-muted); font-size: 11px; width: 14px; text-align: center; font-family: 'Font Awesome 6 Free' !important; }
.context-menu-item:hover { background: var(--accent-light); color: var(--accent); }
.context-menu-item:hover i { color: var(--accent); }
.context-menu-separator { height: 1px; background: var(--border-light); margin: 4px 0; }

/* ==========================================================================
   19. STATUS BAR
   ========================================================================== */
.status-bar {
    height:         var(--status-h);
    background:     var(--bg-panel);
    border-top:     1px solid var(--border-light);
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    padding:        0 16px;
    font-size:      11px;
    color:          var(--text-muted);
    flex-shrink:    0;
}

.status-left { display: flex; align-items: center; gap: 7px; }
.status-right { display: flex; align-items: center; gap: 6px; }
.status-item { color: var(--text-muted); }
.status-item i { font-family: 'Font Awesome 6 Free' !important; margin-right: 3px; }
.status-divider { color: var(--border-dark); }

.status-dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    flex-shrink:   0;
}
.status-dot--ok { background: var(--success); }
.status-dot--warn { background: var(--warning); }
.status-dot--err { background: var(--danger); }

/* ==========================================================================
   20. LOADING OVERLAY
   ========================================================================== */
.loading-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(245,244,239,.88);
    z-index:         999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.loading-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.loading-text {
    font-size:   13px;
    font-weight: 500;
    color:       var(--text-secondary);
}

.spinner {
    width:        30px;
    height:       30px;
    border:       3px solid var(--border-light);
    border-top:   3px solid var(--accent);
    border-radius: 50%;
    animation:    spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   21. ALERTS
   ========================================================================== */
.alert {
    padding:       10px 14px;
    border-radius: var(--r-md);
    margin-bottom: 12px;
    font-size:     12.5px;
    line-height:   1.55;
    border-left:   3px solid var(--border-medium);
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
}
.alert i { font-family: 'Font Awesome 6 Free' !important; margin-top: 1px; flex-shrink: 0; }
.alert.small { font-size: 12px; padding: 8px 12px; }

.alert-info-subtle { background: var(--info-bg);    border-left-color: var(--accent);  color: var(--info); }
.alert-success     { background: var(--success-bg); border-left-color: var(--success); color: var(--success); }
.alert-danger      { background: var(--danger-bg);  border-left-color: var(--danger);  color: var(--danger); }
.alert-warning     { background: var(--warning-bg); border-left-color: var(--warning); color: var(--warning); }
.alert-info        { background: var(--info-bg);    border-left-color: var(--accent);  color: var(--info); }

/* ==========================================================================
   22. BADGES
   ========================================================================== */
.badge {
    display:       inline-block;
    padding:       2px 8px;
    font-size:     10.5px;
    font-weight:   600;
    border-radius: 99px;
    letter-spacing: .02em;
}

.badge-success { background:#d1f0e0; color:#1a5234; }
.badge-danger  { background:var(--danger-bg); color:var(--danger); }
.badge-warning { background:var(--warning-bg); color:var(--warning); }
.badge-info    { background:var(--accent-light); color:var(--accent); }

/* ==========================================================================
   23. CARDS
   ========================================================================== */
.card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-md);
    overflow:      hidden;
}

.card-header {
    padding:       10px 16px;
    border-bottom: 1px solid var(--border-light);
    font-weight:   600;
    font-size:     12.5px;
    color:         var(--text-main);
    background:    var(--bg-panel);
}

.card-body   { padding: 14px; }
.card-footer { padding: 10px 16px; border-top: 1px solid var(--border-light); background: var(--bg-panel); }

/* ==========================================================================
   24. OUTPUT CONTENT OVERRIDE
   ========================================================================== */
#outputContent * { font-family: var(--font-ui); }
#outputContent h1,#outputContent h2,#outputContent h3,
#outputContent h4,#outputContent h5,#outputContent h6 { font-family: var(--font-serif); }

/* ==========================================================================
   25. HELPERS
   ========================================================================== */
.text-primary  { color: var(--accent)     !important; }
.text-success  { color: var(--success)    !important; }
.text-danger   { color: var(--danger)     !important; }
.text-warning  { color: var(--warning)    !important; }
.text-muted    { color: var(--text-muted) !important; }

.mt-1{margin-top:6px}.mt-2{margin-top:10px}.mt-3{margin-top:18px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:18px}
.p-0{padding:0}.p-3{padding:12px}

.flex-between { display:flex; justify-content:space-between; align-items:center; }

.small-table { font-size: 12px; }
.small-table th, .small-table td { padding: 5px 9px; }

.analysis-result { }

hr[style*="border-top"] { border-color: var(--border-light) !important; }

/* ==========================================================================
   26. SMALL SCREEN ADAPTATIONS
   ========================================================================== */
@media (max-width: 900px) {
    .ref-grid    { grid-template-columns: 1fr; }
    .analyze-grid{ grid-template-columns: 1fr; }
    .form-row-2  { grid-template-columns: 1fr; }
    .brand-tagline { display: none; }
    .tb-btn span { display: none; }
    .tb-btn { min-width: 32px; padding: 5px 6px; }
}
/* ==========================================================================
   27. OUTPUT VIEW — SIDEBAR NAVIGATOR (NEW v3.0)
   ========================================================================== */

/* Output view is now a flex row */
.output-view {
    display:        none !important;
    flex-direction: row !important;
}

div.output-view.active {
    display:        flex !important;
    flex-direction: row !important;
    height:         100%;
    width:          100%;
    overflow:       hidden;
    padding:        0 !important;
    background:     var(--bg-app);
}

/* Sidebar Navigator */
.output-nav {
    width:          240px;
    min-width:      240px;
    background:     var(--bg-surface);
    border-right:   1px solid var(--border-light);
    display:        flex;
    flex-direction: column;
    flex-shrink:    0;
    transition:     width var(--t-slow), min-width var(--t-slow);
    overflow:       hidden;
    position:       relative;
    z-index:        5;
}

.output-nav.collapsed {
    width:     36px;
    min-width: 36px;
}

.output-nav-header {
    height:          40px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 12px 0 14px;
    border-bottom:   1px solid var(--border-light);
    flex-shrink:     0;
    background:      var(--bg-panel);
}

.output-nav-title {
    font-size:      11px;
    font-weight:    700;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    display:        flex;
    align-items:    center;
    gap:            6px;
    white-space:    nowrap;
    overflow:       hidden;
}

.output-nav-title i {
    font-family: 'Font Awesome 6 Free' !important;
    color:       var(--accent);
    flex-shrink: 0;
}

.output-nav-toggle {
    width:         22px;
    height:        22px;
    border:        none;
    background:    transparent;
    color:         var(--text-muted);
    cursor:        pointer;
    border-radius: var(--r-sm);
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     10px;
    flex-shrink:   0;
    transition:    background var(--t-fast), color var(--t-fast), transform var(--t-med);
    padding:       0;
}

.output-nav-toggle i { font-family: 'Font Awesome 6 Free' !important; }
.output-nav-toggle:hover { background: var(--bg-hover); color: var(--text-main); }
.output-nav.collapsed .output-nav-toggle { transform: rotate(180deg); }

.output-nav-body {
    flex:       1;
    overflow-y: auto;
    padding:    8px 0;
}

.output-nav-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    padding:        30px 12px;
    text-align:     center;
}

.output-nav-empty i {
    font-size:   20px;
    color:       var(--accent-border);
    font-family: 'Font Awesome 6 Free' !important;
}

.output-nav-empty span {
    font-size:   11px;
    color:       var(--text-muted);
    line-height: 1.5;
}

.output-nav-list {
    list-style:     none;
    padding:        0 6px;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.output-nav-item {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    padding:       7px 10px;
    border-radius: var(--r-sm);
    cursor:        pointer;
    font-size:     11.5px;
    color:         var(--text-secondary);
    line-height:   1.35;
    transition:    background var(--t-fast), color var(--t-fast);
    border:        1px solid transparent;
    word-break:    break-word;
    min-width:     0;
}

.output-nav-item:hover {
    background: var(--accent-light);
    color:      var(--accent);
    border-color: var(--accent-muted);
}

.output-nav-item.active {
    background:  var(--accent);
    color:       #fff;
    font-weight: 600;
}

.output-nav-item i {
    font-size:   10px;
    margin-top:  2px;
    flex-shrink: 0;
    font-family: 'Font Awesome 6 Free' !important;
}

.output-nav-item .nav-item-num {
    font-size:      9.5px;
    font-weight:    700;
    color:          var(--text-muted);
    background:     var(--bg-panel);
    border:         1px solid var(--border-light);
    border-radius:  99px;
    padding:        0 5px;
    flex-shrink:    0;
    height:         16px;
    line-height:    16px;
    display:        inline-block;
}

.output-nav-item.active .nav-item-num {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}

.output-nav-separator {
    height:     1px;
    background: var(--border-light);
    margin:     6px 10px;
}

/* Collapsed state — hide text */
.output-nav.collapsed .output-nav-title span,
.output-nav.collapsed .output-nav-body { display: none; }

/* Output main content */
.output-main {
    flex:       1;
    overflow-y: auto;
    padding:    32px;
    min-width:  0;
}

#outputContent {
    max-width:      900px;
    margin:         0 auto;
    min-height:     100%;
    padding-bottom: 60px;
}

/* ==========================================================================
   28. TAB INDICATORS (Filter/Split/Weight)
   ========================================================================== */
.view-tabs-indicators {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-left: auto;
    padding:     0 12px;
}

.tab-indicator {
    display:       none;
    align-items:   center;
    gap:           5px;
    padding:       3px 10px;
    border-radius: 99px;
    font-size:     11px;
    font-weight:   600;
    border:        1px solid;
    cursor:        default;
    animation:     indicatorIn .2s ease both;
}

@keyframes indicatorIn {
    from { opacity:0; transform: scale(.9); }
    to   { opacity:1; transform: scale(1); }
}

.tab-indicator i { font-family: 'Font Awesome 6 Free' !important; font-size: 10px; }

.tab-indicator--filter {
    background:  #eaf4ee;
    color:       #2d6a4f;
    border-color: #a8d5b8;
}

.tab-indicator--split {
    background:  var(--accent-light);
    color:       var(--accent);
    border-color: var(--accent-border);
}

.tab-indicator--weight {
    background:  #fdf3e3;
    color:       #92600a;
    border-color: #f5c84a;
}

/* ==========================================================================
   29. SYNTAX LOG MODAL (NEW)
   ========================================================================== */
.syntax-log-toolbar {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     10px 16px;
    border-bottom: 1px solid var(--border-light);
    background:  var(--bg-panel);
    flex-shrink: 0;
}

.syntax-log-count {
    margin-left: auto;
    font-size:   11px;
    color:       var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.syntax-log-pre {
    font-family:     var(--font-mono) !important;
    font-size:       12px;
    line-height:     1.7;
    color:           var(--text-main);
    background:      #1a1a2e;
    min-height:      380px;
    max-height:      500px;
    overflow-y:      auto;
    padding:         16px 20px;
    margin:          0;
    white-space:     pre-wrap;
    word-break:      break-word;
    border-radius:   0 0 var(--r-lg) var(--r-lg);
}

.syntax-comment { color: #6b7a90; }
.syntax-cmd     { color: #c4b8dc; font-weight: 600; }
.syntax-var     { color: #79d4ac; }
.syntax-val     { color: #f0c36d; }
.syntax-time    { color: #7eadd4; font-size: 11px; }
.syntax-divider { color: #334; display: block; border-top: 1px solid #223; margin: 8px 0; }

/* ==========================================================================
   30. SELECT CASES / DATA MANAGEMENT (NEW)
   ========================================================================== */
.select-cases-builder {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    margin-bottom: 10px;
}

.select-preview-box {
    margin-top:    12px;
    padding:       10px 14px;
    background:    var(--accent-light);
    border:        1px solid var(--accent-border);
    border-radius: var(--r-md);
    font-size:     12.5px;
    color:         var(--accent);
    font-weight:   500;
}

.radio-group-row {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    padding:        10px 14px;
    background:     var(--bg-panel);
    border:         1px solid var(--border-light);
    border-radius:  var(--r-md);
}

.form-hint {
    font-size:   11.5px;
    color:       var(--text-muted);
    margin-top:  6px;
    display:     flex;
    align-items: flex-start;
    gap:         5px;
    line-height: 1.5;
}

.form-hint i { font-family: 'Font Awesome 6 Free' !important; margin-top: 2px; color: var(--accent); flex-shrink: 0; }
.form-hint code { background: var(--bg-panel); padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); border: 1px solid var(--border-light); }

/* Filtered row visual in data table */
#dataBody tr.case-excluded td { opacity: 0.38; background: #f8f5f2 !important; }
#dataBody tr.case-excluded td:first-child { background: #f0e8e0 !important; color: var(--danger) !important; }
#dataBody tr.case-excluded td:first-child::after { content: '✗'; margin-left: 4px; font-size: 9px; }

/* ==========================================================================
   31. CHART CONTAINERS (Professional polish)
   ========================================================================== */
.chart-wrapper {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding:       16px 20px;
    margin:        16px 0;
    box-shadow:    var(--shadow-xs);
}

.chart-title {
    font-family:    var(--font-serif);
    font-size:      13px;
    font-weight:    600;
    color:          var(--text-main);
    margin-bottom:  12px;
    display:        flex;
    align-items:    center;
    gap:            8px;
    letter-spacing: -0.01em;
}

.chart-title i { color: var(--accent); font-size: 12px; font-family: 'Font Awesome 6 Free' !important; }

.chart-subtitle {
    font-size:   11px;
    color:       var(--text-muted);
    margin-top:  -8px;
    margin-bottom: 12px;
}

/* Canvas responsive */
.chart-wrapper canvas { max-width: 100%; display: block; }

/* ==========================================================================
   32. RECOMMENDATION BOXES (Interpretasi Kualitatif)
   ========================================================================== */
.recommendation-box {
    border:        1px solid;
    border-radius: var(--r-lg);
    padding:       14px 16px;
    margin:        14px 0;
    position:      relative;
}

.recommendation-box--success {
    background:    var(--success-bg);
    border-color:  var(--success-border);
    color:         var(--success);
}

.recommendation-box--warning {
    background:    var(--warning-bg);
    border-color:  var(--warning-border);
    color:         var(--warning);
}

.recommendation-box--danger {
    background:    var(--danger-bg);
    border-color:  var(--danger-border);
    color:         var(--danger);
}

.recommendation-box--info {
    background:    var(--info-bg);
    border-color:  var(--info-border);
    color:         var(--info);
}

.recommendation-header {
    font-weight: 700;
    font-size:   12px;
    display:     flex;
    align-items: center;
    gap:         7px;
    margin-bottom: 6px;
}

.recommendation-header i { font-family: 'Font Awesome 6 Free' !important; }

.recommendation-body {
    font-size:   12.5px;
    line-height: 1.6;
}

.recommendation-action {
    margin-top:  8px;
    font-size:   12px;
    font-weight: 600;
    display:     flex;
    align-items: center;
    gap:         5px;
}

.recommendation-action i { font-family: 'Font Awesome 6 Free' !important; }

/* ==========================================================================
   33. ENHANCED OUTPUT SECTION
   ========================================================================== */
.output-section {
    scroll-margin-top: 20px; /* For smooth scrolling from nav */
}

/* Session separator */
.session-separator {
    display:         flex;
    align-items:     center;
    gap:             12px;
    margin:          28px 0 20px;
    color:           var(--text-muted);
    font-size:       11px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .07em;
}

.session-separator::before,
.session-separator::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border-light);
}

.session-separator i { font-family: 'Font Awesome 6 Free' !important; color: var(--accent); font-size: 10px; }

/* Highlighted output row */
.output-row-sig {
    background: rgba(107,91,141,.06) !important;
    font-weight: 600 !important;
}

.output-row-warn {
    background: var(--warning-bg) !important;
}

/* Delete section button improved */
.action-delete-btn {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    color:       var(--text-muted);
    background:  transparent;
    border:      1px solid transparent;
    border-radius: var(--r-sm);
    padding:     4px 11px;
    cursor:      pointer;
    font-size:   11px;
    font-weight: 500;
    transition:  all var(--t-med);
    flex-shrink: 0;
}

.action-delete-btn i { font-family: 'Font Awesome 6 Free' !important; font-size: 10px; }
.action-delete-btn:hover { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

/* ==========================================================================
   34. RESPONSIVE UPDATES
   ========================================================================== */
@media (max-width: 1100px) {
    .output-nav { width: 200px; min-width: 200px; }
}

@media (max-width: 900px) {
    .ref-grid, .analyze-grid { grid-template-columns: 1fr; }
    .form-row-2 { grid-template-columns: 1fr; }
    .brand-tagline { display: none; }
    .tb-btn span { display: none; }
    .tb-btn { min-width: 32px; padding: 5px 6px; }
    .output-nav { display: none; }
    .output-main { padding: 16px; }
    .view-tabs-indicators { display: none; }
}

/* ==========================================================================
   35. MISC POLISH
   ========================================================================== */
.analysis-options-panel { padding: 16px; }

.modal-footer .footer-actions { gap: 8px; }

/* Ensure FA icons render correctly everywhere */
.output-nav-item i,
.output-nav-toggle i,
.tab-indicator i,
.recommendation-header i,
.recommendation-action i,
.session-separator i,
.syntax-log-toolbar .btn i,
.form-hint i,
.action-delete-btn i {
    font-family: 'Font Awesome 6 Free' !important;
}

/* ==========================================================================
   36. ENHANCED CELL INTERACTIONS (v3.1 — Excel/SPSS Style UX)
   ========================================================================== */

/* ── Tabular Numeric Alignment (Decimal Point Alignment) ── */
#dataTable td.col-numeric {
    font-variant-numeric: tabular-nums;
    letter-spacing:       0;
    font-feature-settings: "tnum" 1;
    font-family:          var(--font-mono), var(--font-ui);
}

/* ── Active Cell — accent bounding box ── */
.active-cell {
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    background: #fff !important;
    z-index: 5;
    position: relative;
}

/* ── Cell Selected Range ── */
.cell-selected {
    background-color: rgba(107, 91, 141, 0.10) !important;
}

/* ── Missing Value Indicator (gray dot for null cells) ── */
#dataTable td.cell-missing {
    color:         var(--text-placeholder);
    font-style:    italic;
    font-size:     11px;
    letter-spacing: 0.02em;
}

#dataTable td.cell-missing::after {
    content:    '·';
    color:      var(--text-placeholder);
    font-size:  16px;
    line-height: 1;
    display:    inline;
}

/* ── Cell Invalid / Validation Error ── */
#dataTable td.cell-invalid {
    background: var(--danger-bg) !important;
    color:      var(--danger) !important;
    font-weight: 600;
}

/* ── Crosshair Highlighting — Active Row/Col Headers ── */
#dataTable thead th.col-header-active {
    background:  var(--accent) !important;
    color:       #fff !important;
    font-weight: 700;
}

#dataTable tbody th.row-header-active {
    background:  var(--accent) !important;
    color:       #fff !important;
    font-weight: 700;
}

/* ── Borderless Cell Editor (no layout shift) ── */
.cell-editor {
    position:    absolute;
    inset:       0;
    width:       100%;
    height:      100%;
    border:      none !important;
    outline:     none !important;
    padding:     0 10px;
    font-family: var(--font-mono), var(--font-ui);
    font-size:   12.5px;
    font-variant-numeric: tabular-nums;
    z-index:     50;
    background:  #fff;
    box-shadow:  0 0 0 2px var(--accent), var(--shadow-md);
    color:       var(--text-main);
    border-radius: 0;
    margin:      0;
    box-sizing:  border-box;
}

/* ── Context Menu — Modern with Drop Shadow + Fade ── */
.context-menu {
    animation:     ctxFadeIn .14s cubic-bezier(.22, 1, .36, 1) both;
    box-shadow:    0 8px 28px rgba(26,25,21,0.17), 0 2px 6px rgba(26,25,21,0.08);
}

@keyframes ctxFadeIn {
    from { opacity: 0; transform: scale(.95) translateY(-5px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ==========================================================================
   37. LOADING OVERLAY — Frosted Glass (v3.1)
   ========================================================================== */
.loading-overlay {
    background:      rgba(245, 244, 239, 0.82);
    backdrop-filter: blur(8px) saturate(1.5);
    -webkit-backdrop-filter: blur(8px) saturate(1.5);
}

.loading-inner {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-xl);
    padding:       28px 40px;
    box-shadow:    var(--shadow-lg);
    gap:           18px;
}

.spinner {
    width:         36px;
    height:        36px;
    border:        3px solid var(--accent-muted);
    border-top:    3px solid var(--accent);
}

/* ==========================================================================
   38. MULTICOLLINEARITY WARNING BADGE (v3.1)
   ========================================================================== */
.badge-multicol-warn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 10px;
    background:    var(--danger-bg);
    border:        1px solid var(--danger-border);
    color:         var(--danger);
    border-radius: 99px;
    font-size:     11px;
    font-weight:   700;
}

.badge-multicol-warn i { font-family: 'Font Awesome 6 Free' !important; }

/* ==========================================================================
   39. QUALITATIVE INTERPRETATION PANEL (v3.1)
   ========================================================================== */
.interpretation-card {
    background:    linear-gradient(135deg, var(--accent-light) 0%, var(--bg-surface) 100%);
    border:        1px solid var(--accent-border);
    border-left:   4px solid var(--accent);
    border-radius: var(--r-lg);
    padding:       18px 20px;
    margin:        18px 0;
    position:      relative;
    overflow:      hidden;
}

.interpretation-card::before {
    content:  '';
    position: absolute;
    top:      0;
    right:    0;
    width:    60px;
    height:   60px;
    background: radial-gradient(circle, rgba(107,91,141,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.interpretation-card-title {
    font-family:    var(--font-serif);
    font-size:      13px;
    font-weight:    700;
    color:          var(--accent);
    margin-bottom:  10px;
    display:        flex;
    align-items:    center;
    gap:            8px;
    letter-spacing: -0.01em;
}

.interpretation-card-title i { font-family: 'Font Awesome 6 Free' !important; font-size: 13px; }

.interpretation-card-body {
    font-size:   12.5px;
    line-height: 1.7;
    color:       var(--text-secondary);
}

.interpretation-card-action {
    margin-top:   12px;
    display:      flex;
    align-items:  center;
    gap:          6px;
    font-size:    12px;
    font-weight:  700;
    color:        var(--accent);
}

.interpretation-card-action i { font-family: 'Font Awesome 6 Free' !important; }

/* Warning variant */
.interpretation-card--warning {
    background:   linear-gradient(135deg, var(--warning-bg) 0%, var(--bg-surface) 100%);
    border-color: var(--warning-border);
    border-left-color: var(--warning);
}
.interpretation-card--warning .interpretation-card-title { color: var(--warning); }
.interpretation-card--warning .interpretation-card-action { color: var(--warning); }

/* Danger variant */
.interpretation-card--danger {
    background:   linear-gradient(135deg, var(--danger-bg) 0%, var(--bg-surface) 100%);
    border-color: var(--danger-border);
    border-left-color: var(--danger);
}
.interpretation-card--danger .interpretation-card-title { color: var(--danger); }
.interpretation-card--danger .interpretation-card-action { color: var(--danger); }

/* Success variant */
.interpretation-card--success {
    background:   linear-gradient(135deg, var(--success-bg) 0%, var(--bg-surface) 100%);
    border-color: var(--success-border);
    border-left-color: var(--success);
}
.interpretation-card--success .interpretation-card-title { color: var(--success); }
.interpretation-card--success .interpretation-card-action { color: var(--success); }

/* ==========================================================================
   40. SMART PASTE PROGRESS BAR (v3.1)
   ========================================================================== */
.paste-progress-bar {
    width:         100%;
    height:        4px;
    background:    var(--bg-hover);
    border-radius: 99px;
    overflow:      hidden;
    margin-top:    10px;
}

.paste-progress-fill {
    height:        100%;
    background:    linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-radius: 99px;
    transition:    width 0.3s ease;
    width:         0%;
}

/* ==========================================================================
   41. PRECISION DISPLAY NUMBERS (Tabular)
   ========================================================================== */
.num-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing:        0;
}

/* Significant coefficient highlight */
.coef-significant {
    color:       var(--accent);
    font-weight: 700;
}

/* Ridge warning in output */
.ridge-warning {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    font-size:     11px;
    color:         var(--warning);
    font-weight:   600;
    background:    var(--warning-bg);
    border:        1px solid var(--warning-border);
    border-radius: var(--r-sm);
    padding:       2px 8px;
    margin-left:   8px;
}

.ridge-warning i { font-family: 'Font Awesome 6 Free' !important; }

/* ==========================================================================
   42. STATISTICAL PRECISION INDICATOR
   ========================================================================== */
.p-value-display {
    font-variant-numeric: tabular-nums;
    font-weight:          600;
}

.p-value-display.p-sig   { color: var(--success); }
.p-value-display.p-warn  { color: var(--warning); }
.p-value-display.p-insig { color: var(--text-muted); }

/* Singularity warning alert */
.singularity-alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    background:    var(--danger-bg);
    border:        1px solid var(--danger-border);
    border-left:   4px solid var(--danger);
    border-radius: var(--r-md);
    padding:       12px 16px;
    margin:        14px 0;
    font-size:     12.5px;
    color:         var(--danger);
    line-height:   1.6;
}

.singularity-alert i { font-family: 'Font Awesome 6 Free' !important; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.singularity-alert strong { display: block; font-size: 13px; margin-bottom: 4px; }

/* ==========================================================================
   43. VIEW TABS INDICATOR SPACING FIX
   ========================================================================== */
.tab-indicator { display: none; }
.tab-indicator[style*="display: flex"],
.tab-indicator[style*="display:flex"] { display: inline-flex !important; }
/* ==========================================================================
   36. ENHANCED CELL INTERACTIONS v3.1 — Excel/SPSS Style UX
   ========================================================================== */

/* Tabular-nums for all numeric data cells */
#dataTable td.col-numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
    font-family: var(--font-mono), var(--font-ui);
    text-align: right;
}

/* Active Cell — accent bounding box */
.active-cell {
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    background: #fff !important;
    z-index: 5;
    position: relative;
}

/* Selected range with subtle accent tint */
.cell-selected {
    background-color: rgba(107, 91, 141, 0.10) !important;
}

/* Missing Value indicator — gray dot • via pseudo-element */
#dataTable td.cell-missing {
    color: transparent !important;
    position: relative;
}
#dataTable td.cell-missing::after {
    content: '•';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-placeholder);
    font-size: 14px;
    pointer-events: none;
}

/* Crosshair: active column header highlight */
#dataTable thead th.col-header-active {
    background: var(--accent-light) !important;
    color: var(--accent) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--accent) !important;
}

/* Crosshair: active row number header highlight */
#dataTable tbody tr.row-active > th:first-child {
    background: var(--accent-light) !important;
    color: var(--accent) !important;
    font-weight: 700;
}

/* Borderless cell editor — no layout shift on double-click */
.cell-editor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    padding: 0 10px;
    font-family: var(--font-mono), var(--font-ui);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    z-index: 50;
    background: #fff;
    box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
    color: var(--text-main);
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Invalid/rejected input flash */
.cell-editor.input-rejected {
    background: var(--danger-bg) !important;
    box-shadow: 0 0 0 2px var(--danger) !important;
}

/* ==========================================================================
   37. CONTEXT MENU — Elevated with fade + shadow
   ========================================================================== */
.context-menu {
    animation: ctxFadeIn .14s cubic-bezier(.22, 1, .36, 1) both;
    box-shadow: 0 8px 28px rgba(26,25,21,.18), 0 2px 6px rgba(26,25,21,.09),
                0 0 0 1px rgba(26,25,21,.04);
}

@keyframes ctxFadeIn {
    from { opacity: 0; transform: scale(.94) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ==========================================================================
   38. FROSTED GLASS LOADING OVERLAY v3.1
   ========================================================================== */
.loading-overlay {
    background: rgba(245, 244, 239, 0.80) !important;
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
}

.loading-inner {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-xl);
    padding: 32px 44px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(107,91,141,.06);
    gap: 18px;
    min-width: 200px;
    align-items: center;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--accent-muted);
    border-top: 3px solid var(--accent);
}

.loading-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

/* ==========================================================================
   39. INTERPRETATION CARD — Qualitative analysis panel
   ========================================================================== */
.interpretation-card {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--accent-border);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    margin: 16px 0;
    position: relative;
    overflow: hidden;
}

.interpretation-card--success {
    background: linear-gradient(135deg, var(--success-bg) 0%, var(--bg-surface) 100%);
    border-color: var(--success-border);
    border-left-color: var(--success);
}

.interpretation-card--warning {
    background: linear-gradient(135deg, var(--warning-bg) 0%, var(--bg-surface) 100%);
    border-color: var(--warning-border);
    border-left-color: var(--warning);
}

.interpretation-card--danger {
    background: linear-gradient(135deg, var(--danger-bg) 0%, var(--bg-surface) 100%);
    border-color: var(--danger-border);
    border-left-color: var(--danger);
}

.interpretation-card-title {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
}
.interpretation-card--success .interpretation-card-title { color: var(--success); }
.interpretation-card--warning .interpretation-card-title { color: var(--warning); }
.interpretation-card--danger .interpretation-card-title  { color: var(--danger); }

.interpretation-card-title i { font-family: 'Font Awesome 6 Free' !important; }

.interpretation-card-body {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.interpretation-card-action {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}
.interpretation-card-action i { font-family: 'Font Awesome 6 Free' !important; }

/* ==========================================================================
   40. SINGULARITY / RIDGE WARNING
   ========================================================================== */
.singularity-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin: 14px 0;
    font-size: 12.5px;
    color: var(--danger);
    line-height: 1.6;
}
.singularity-alert i { font-family: 'Font Awesome 6 Free' !important; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.singularity-alert strong { display: block; font-size: 13px; margin-bottom: 4px; }

/* ==========================================================================
   41. P-VALUE DISPLAY WITH SIGNIFICANCE COLOR
   ========================================================================== */
.p-sig   { color: var(--success); font-weight: 700; }
.p-warn  { color: var(--warning); font-weight: 600; }
.p-insig { color: var(--text-muted); }

/* ==========================================================================
   42. ANALYZE GRID — Extended (3-column for many categories)
   ========================================================================== */
.analyze-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 1100px) {
    .analyze-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .analyze-grid { grid-template-columns: 1fr; }
}

/* Level badges on category headers */
.analyze-cat-header .level-badge {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    background: rgba(107,91,141,.15);
    color: var(--accent);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: var(--font-ui);
}

/* ==========================================================================
   43. BOOTSTRAPPING PROGRESS
   ========================================================================== */
.bootstrap-progress {
    width: 100%;
    height: 6px;
    background: var(--bg-hover);
    border-radius: 99px;
    overflow: hidden;
    margin: 10px 0;
}

.bootstrap-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #9d7fd4 100%);
    border-radius: 99px;
    transition: width .15s linear;
    width: 0%;
}

/* ==========================================================================
   44. PLS-SEM / EFA HEATMAP TABLE
   ========================================================================== */
.heatmap-cell-high   { background: rgba(45, 106, 79, .18) !important; color: var(--success); font-weight: 700; }
.heatmap-cell-mid    { background: rgba(146, 96, 10, .12) !important; color: var(--warning); }
.heatmap-cell-low    { background: rgba(163, 48, 48, .10) !important; color: var(--danger); }
.heatmap-cell-diag   { background: var(--accent-light) !important; color: var(--accent); font-weight: 700; }

/* ==========================================================================
   45. MISC POLISH & RESPONSIVE UPDATES
   ========================================================================== */

/* Tabular nums helper class */
.num-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

/* Ridge warning badge */
.badge-ridge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    border-radius: 99px;
}
.badge-ridge i { font-family: 'Font Awesome 6 Free' !important; font-size: 10px; }

/* Ensure FA renders in all new elements */
.interpretation-card-title i,
.interpretation-card-action i,
.singularity-alert i,
.badge-ridge i,
.analyze-cat-header i {
    font-family: 'Font Awesome 6 Free' !important;
}

@media (max-width: 900px) {
    .analyze-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   STATISIN v3.2 — Enhanced Output, APA-7, Virtual Scroll, PDF Export
   ========================================================================== */

/* ── APA-7 OUTPUT SECTION ─────────────────────────────────────────────────── */
.apa-section {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-top:    3px solid var(--accent);
    border-radius: var(--r-lg);
    padding:       0;
    margin-bottom: 28px;
    box-shadow:    var(--shadow-sm);
    position:      relative;
    overflow:      hidden;
}

.apa-section-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 20px 12px;
    border-bottom:   1px solid var(--border-light);
    background:      var(--bg-panel);
    gap:             12px;
    flex-wrap:       wrap;
}

.apa-section-title-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex:        1;
    min-width:   0;
}

.apa-section-num {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      var(--accent);
    color:           #fff;
    font-size:       10px;
    font-weight:     700;
    flex-shrink:     0;
    font-family:     var(--font-ui);
}

.apa-section-icon {
    color:       var(--accent);
    font-size:   13px;
    flex-shrink: 0;
    font-family: 'Font Awesome 6 Free' !important;
}

.apa-section-h3 {
    font-family:    var(--font-serif);
    font-size:      14px;
    font-weight:    700;
    color:          var(--text-main);
    margin:         0;
    letter-spacing: -0.02em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.apa-section-ts {
    font-size:   10px;
    color:       var(--text-muted);
    flex-shrink: 0;
    font-family: var(--font-ui);
}

.apa-section-actions {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}

.apa-action-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 11px;
    border:        1px solid var(--border-medium);
    border-radius: var(--r-sm);
    background:    var(--bg-surface);
    color:         var(--text-secondary);
    font-size:     11.5px;
    font-weight:   500;
    font-family:   var(--font-ui);
    cursor:        pointer;
    transition:    all var(--t-fast);
    white-space:   nowrap;
}
.apa-action-btn i { font-family: 'Font Awesome 6 Free' !important; font-size: 10px; }
.apa-action-btn:hover { background: var(--bg-panel); border-color: var(--accent); color: var(--accent); }
.apa-action-btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }

.apa-body {
    padding: 20px 24px 24px;
}

/* APA-7 table inside output — proper double/single lines */
.apa-body table.data-table,
.apa-body .data-table {
    width:           100%;
    border-collapse: collapse;
    margin-bottom:   16px;
    font-size:       12.5px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.apa-body table.data-table thead tr:first-child th {
    border-top:    2px solid var(--text-main) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    background:    transparent !important;
    font-weight:   600;
    font-size:     11.5px;
    padding:       7px 10px;
    letter-spacing: .01em;
}

.apa-body table.data-table tbody td {
    border:         none;
    border-bottom:  1px solid var(--border-light);
    padding:        6px 10px;
    color:          var(--text-main);
}

.apa-body table.data-table tbody tr:last-child td {
    border-bottom: 2px solid var(--text-main) !important;
}

.apa-body table.data-table tbody tr:nth-child(even) td {
    background: var(--bg-stripe);
}

/* APA footnote under tables */
.apa-footnote {
    font-size:   11.5px;
    color:       var(--text-muted);
    margin-top:  -10px;
    margin-bottom: 14px;
    padding-top: 6px;
    border-top:  1px solid var(--border-light);
    line-height: 1.6;
}
.apa-footnote b { color: var(--text-secondary); }

/* ── P-VALUE SIGNIFICANCE COLORING ────────────────────────────────────────── */
.p-sig   { color: var(--success); font-weight: 700; }
.p-warn  { color: var(--warning); font-weight: 600; }
.p-insig { color: var(--text-muted); }

/* ── INTERPRETATION CARD ─────────────────────────────────────────────────── */
.interpretation-card {
    background:    linear-gradient(135deg, var(--accent-light) 0%, var(--bg-surface) 100%);
    border:        1px solid var(--accent-border);
    border-left:   4px solid var(--accent);
    border-radius: var(--r-lg);
    padding:       16px 18px;
    margin:        16px 0;
    position:      relative;
}
.interpretation-card--success { background: linear-gradient(135deg, var(--success-bg) 0%, var(--bg-surface) 100%); border-color: var(--success-border); border-left-color: var(--success); }
.interpretation-card--warning { background: linear-gradient(135deg, var(--warning-bg) 0%, var(--bg-surface) 100%); border-color: var(--warning-border); border-left-color: var(--warning); }
.interpretation-card--danger  { background: linear-gradient(135deg, var(--danger-bg)  0%, var(--bg-surface) 100%); border-color: var(--danger-border);  border-left-color: var(--danger); }

.interpretation-card-title {
    font-family:  var(--font-serif);
    font-size:    13px;
    font-weight:  700;
    color:        var(--accent);
    margin-bottom: 8px;
    display:      flex;
    align-items:  center;
    gap:          8px;
    letter-spacing: -0.01em;
}
.interpretation-card--success .interpretation-card-title { color: var(--success); }
.interpretation-card--warning .interpretation-card-title { color: var(--warning); }
.interpretation-card--danger  .interpretation-card-title { color: var(--danger); }
.interpretation-card-title i { font-family: 'Font Awesome 6 Free' !important; }

.interpretation-card-body   { font-size: 12.5px; line-height: 1.75; color: var(--text-secondary); }
.interpretation-card-action { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.interpretation-card--success .interpretation-card-action { color: var(--success); }
.interpretation-card--warning .interpretation-card-action { color: var(--warning); }
.interpretation-card--danger  .interpretation-card-action { color: var(--danger); }
.interpretation-card-action i { font-family: 'Font Awesome 6 Free' !important; }

/* ── SINGULARITY / RIDGE WARNING ─────────────────────────────────────────── */
.singularity-alert {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    background:    var(--danger-bg);
    border:        1px solid var(--danger-border);
    border-left:   4px solid var(--danger);
    border-radius: var(--r-md);
    padding:       12px 16px;
    margin:        14px 0;
    font-size:     12.5px;
    color:         var(--danger);
    line-height:   1.65;
}
.singularity-alert i { font-family: 'Font Awesome 6 Free' !important; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.singularity-alert strong { display: block; font-size: 13px; margin-bottom: 4px; }

/* ── CROSSHAIR HIGHLIGHTING ──────────────────────────────────────────────── */
#dataTable thead th.col-header-active {
    background:    var(--accent-light) !important;
    color:         var(--accent) !important;
    font-weight:   700;
    border-bottom: 2px solid var(--accent) !important;
}
#dataTable tbody tr.row-active > th:first-child {
    background: var(--accent-light) !important;
    color:      var(--accent) !important;
    font-weight: 700;
}

/* ── TABULAR NUMS FOR DATA CELLS ─────────────────────────────────────────── */
#dataTable td.col-numeric {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    font-family: var(--font-mono), var(--font-ui);
    text-align:  right;
}

/* ── MISSING VALUE INDICATOR ─────────────────────────────────────────────── */
#dataTable td.cell-missing { position: relative; color: transparent !important; }
#dataTable td.cell-missing::after {
    content:   '·';
    position:  absolute;
    left:      50%; top: 50%;
    transform: translate(-50%,-50%);
    color:     var(--text-placeholder);
    font-size: 16px;
    pointer-events: none;
}

/* ── ACTIVE CELL — accent border ─────────────────────────────────────────── */
.active-cell {
    box-shadow: inset 0 0 0 2px var(--accent) !important;
    background: #fff !important;
    z-index: 5;
    position: relative;
}
.cell-selected { background-color: rgba(107,91,141,.10) !important; }

/* ── BORDERLESS CELL EDITOR ──────────────────────────────────────────────── */
.cell-editor {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: none !important; outline: none !important;
    padding: 0 10px;
    font-family: var(--font-mono), var(--font-ui);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    z-index: 50; background: #fff;
    box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
    box-sizing: border-box; margin: 0;
}

/* ── FROSTED GLASS LOADING OVERLAY ──────────────────────────────────────── */
.loading-overlay {
    background:      rgba(245,244,239,.82) !important;
    backdrop-filter: blur(10px) saturate(1.6);
    -webkit-backdrop-filter: blur(10px) saturate(1.6);
}
.loading-inner {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-xl);
    padding:       28px 44px;
    box-shadow:    var(--shadow-lg);
    gap:           18px;
    min-width:     180px;
    align-items:   center;
}
.spinner { width: 34px; height: 34px; border: 3px solid var(--accent-muted); border-top: 3px solid var(--accent); }

/* ── CONTEXT MENU — layered shadow + fade ────────────────────────────────── */
.context-menu {
    animation: ctxFadeIn .13s cubic-bezier(.22,1,.36,1) both;
    box-shadow: 0 8px 28px rgba(26,25,21,.18), 0 2px 6px rgba(26,25,21,.08), 0 0 0 1px rgba(26,25,21,.04);
}
@keyframes ctxFadeIn {
    from { opacity:0; transform: scale(.93) translateY(-6px); }
    to   { opacity:1; transform: scale(1)   translateY(0); }
}

/* ── ANALYZE GRID — 3-column responsive ─────────────────────────────────── */
.analyze-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   14px;
}
@media (max-width: 1100px) { .analyze-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .analyze-grid { grid-template-columns: 1fr; } }

/* ── HEATMAP CELLS (EFA/PLS) ──────────────────────────────────────────────── */
.heatmap-cell-high { background: rgba(45,106,79,.18) !important; color: var(--success); font-weight: 700; }
.heatmap-cell-mid  { background: rgba(146,96,10,.12) !important; color: var(--warning); }
.heatmap-cell-low  { background: rgba(163,48,48,.10) !important; color: var(--danger); }
.heatmap-cell-diag { background: var(--accent-light) !important; color: var(--accent); font-weight: 700; }

/* ── VIRTUAL SCROLL STATUS BADGE ─────────────────────────────────────────── */
.vscroll-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       2px 8px;
    background:    var(--accent-light);
    border:        1px solid var(--accent-border);
    border-radius: 99px;
    font-size:     10.5px;
    color:         var(--accent);
    font-weight:   600;
}
.vscroll-badge i { font-family: 'Font Awesome 6 Free' !important; font-size: 10px; }

/* ── NUM TABULAR HELPER ───────────────────────────────────────────────────── */
.num-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── OUTPUT SECTION BODY PRINT RESET ─────────────────────────────────────── */
@media print {
    .apa-section-actions, .apa-section-num, .apa-section-ts,
    .action-delete-btn, .delete-section-btn { display: none !important; }
    .apa-section { box-shadow: none; border: none; page-break-inside: avoid; }
}

/* ── SESSION SEPARATOR POLISH ─────────────────────────────────────────────── */
.session-separator {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin:         24px 0 18px;
    color:          var(--text-muted);
    font-size:      10.5px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.session-separator::before, .session-separator::after {
    content: ''; flex: 1; height: 1px; background: var(--border-light);
}
.session-separator i { font-family: 'Font Awesome 6 Free' !important; color: var(--accent); font-size: 10px; }

/* ── FA OVERRIDE CATCH-ALL ────────────────────────────────────────────────── */
.apa-action-btn i,
.apa-section-icon,
.interpretation-card-title i,
.interpretation-card-action i,
.singularity-alert i,
.vscroll-badge i {
    font-family: 'Font Awesome 6 Free' !important;
}
/* ==========================================================================
   STATISIN v4.0 — STYLE ADDITIONS
   Tambahkan blok ini ke AKHIR style.css yang sudah ada.
   Tidak menghapus / menimpa rule lama — hanya menambah & override spesifik.
   ========================================================================== */

/* ==========================================================================
   TOP BAR — Google Sheets-style header
   ========================================================================== */

/* Override existing .header → .top-bar */
.top-bar {
    height:          48px;          /* lebih kompak dari 56px lama */
    background:      var(--bg-surface);
    border-bottom:   1px solid var(--border-light);
    display:         flex;
    align-items:     center;
    padding:         0 12px 0 14px;
    gap:             0;
    flex-shrink:     0;
    position:        relative;
    z-index:         30;
    box-shadow:      var(--shadow-xs);
}

/* Logo brand */
.top-bar-brand {
    display:         flex;
    align-items:     center;
    gap:             0;
    flex-shrink:     0;
    padding:         4px;
    border-radius:   var(--r-md);
    text-decoration: none;
    transition:      background var(--t-fast);
    margin-right:    10px;
}
.top-bar-brand:hover { background: var(--bg-panel); }

.top-bar-brand .brand-logo-svg {
    width:       32px;
    height:      32px;
    filter:      drop-shadow(0 2px 5px rgba(107,91,141,.3));
    transition:  transform var(--t-med), filter var(--t-med);
}
.top-bar-brand:hover .brand-logo-svg {
    transform: rotate(-6deg) scale(1.06);
    filter:    drop-shadow(0 4px 10px rgba(107,91,141,.45));
}

/* Document Title — inline editable */
.doc-title-wrap {
    display:         flex;
    align-items:     center;
    gap:             5px;
    padding:         3px 8px;
    border-radius:   var(--r-md);
    cursor:          text;
    transition:      background var(--t-fast);
    max-width:       320px;
    flex-shrink:     1;
}
.doc-title-wrap:hover           { background: var(--bg-panel); }
.doc-title-wrap:focus-within    { background: var(--accent-light); }

.doc-title-input {
    font-family:     var(--font-serif);
    font-size:       14px;
    font-weight:     600;
    color:           var(--text-main);
    border:          none;
    outline:         none;
    background:      transparent;
    width:           180px;
    min-width:       60px;
    max-width:       280px;
    letter-spacing:  -0.02em;
    cursor:          text;
}
.doc-title-input::placeholder   { color: var(--text-placeholder); font-style: italic; }

.doc-title-pen {
    font-size:       10px;
    color:           var(--text-muted);
    opacity:         0;
    transition:      opacity var(--t-fast);
    flex-shrink:     0;
    font-family:     'Font Awesome 6 Free' !important;
}
.doc-title-wrap:hover .doc-title-pen { opacity: 1; }

/* Top bar spacer */
.top-bar-spacer { flex: 1; }

/* Save status button */
.top-bar-save-status {
    display:         flex;
    align-items:     center;
    gap:             6px;
    height:          28px;
    padding:         0 10px;
    border-radius:   20px;
    font-size:       11.5px;
    font-weight:     500;
    font-family:     var(--font-ui);
    color:           var(--text-muted);
    background:      transparent;
    border:          1px solid transparent;
    cursor:          pointer;
    transition:      all var(--t-fast);
    white-space:     nowrap;
    margin-right:    6px;
}
.top-bar-save-status:hover {
    background:      var(--bg-panel);
    border-color:    var(--border-light);
    color:           var(--text-secondary);
}
.top-bar-save-status i {
    font-size:       12px;
    color:           var(--success);
    font-family:     'Font Awesome 6 Free' !important;
}
.top-bar-save-status.saving i   { color: var(--warning); }
.top-bar-save-status.error  i   { color: var(--danger); }

/* Top bar action buttons */
.top-bar-actions {
    display:         flex;
    align-items:     center;
    gap:             4px;
    flex-shrink:     0;
}

.top-bar-action-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    height:          30px;
    padding:         0 12px;
    border-radius:   var(--r-md);
    font-size:       12.5px;
    font-weight:     500;
    font-family:     var(--font-ui);
    cursor:          pointer;
    border:          1px solid var(--border-medium);
    background:      var(--bg-surface);
    color:           var(--text-secondary);
    transition:      all var(--t-fast);
    white-space:     nowrap;
}
.top-bar-action-btn:hover {
    background:      var(--bg-hover);
    border-color:    var(--accent-border);
    color:           var(--accent);
}
.top-bar-action-btn--primary,
.top-bar-action-btn--save {
    background:      var(--accent);
    border-color:    var(--accent);
    color:           #fff;
    box-shadow:      var(--shadow-accent);
}
.top-bar-action-btn--primary:hover,
.top-bar-action-btn--save:hover {
    background:      var(--accent-hover);
    border-color:    var(--accent-hover);
    color:           #fff;
}
.top-bar-action-btn i { font-size: 12px; font-family: 'Font Awesome 6 Free' !important; }

/* Icon-only buttons */
.top-bar-icon-btn {
    width:           30px;
    height:          30px;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border:          1px solid transparent;
    border-radius:   var(--r-md);
    background:      transparent;
    cursor:          pointer;
    color:           var(--text-secondary);
    font-size:       13.5px;
    transition:      all var(--t-fast);
}
.top-bar-icon-btn:hover {
    background:      var(--bg-panel);
    border-color:    var(--border-light);
    color:           var(--accent);
}
.top-bar-icon-btn i { font-family: 'Font Awesome 6 Free' !important; }

/* Separator */
.top-bar-sep {
    width:           1px;
    height:          20px;
    background:      var(--border-light);
    margin:          0 4px;
    flex-shrink:     0;
}

/* ==========================================================================
   RIBBON — Tab + Toolbar system
   ========================================================================== */
.ribbon {
    display:         flex;
    flex-direction:  column;
    background:      var(--bg-surface);
    border-bottom:   1px solid var(--border-light);
    flex-shrink:     0;
    position:        relative;
    z-index:         25;
}

/* Tab row */
.ribbon-tabs {
    display:         flex;
    align-items:     center;
    gap:             0;
    padding:         0 14px;
    border-bottom:   1px solid var(--border-light);
    height:          34px;
    overflow-x:      auto;
    scrollbar-width: none;
}
.ribbon-tabs::-webkit-scrollbar { display: none; }

.ribbon-tab {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    height:          100%;
    padding:         0 14px;
    font-size:       12.5px;
    font-weight:     500;
    font-family:     var(--font-ui);
    color:           var(--text-muted);
    border:          none;
    background:      transparent;
    border-bottom:   2px solid transparent;
    cursor:          pointer;
    transition:      color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    white-space:     nowrap;
    position:        relative;
    top:             1px;
    flex-shrink:     0;
}
.ribbon-tab:hover:not(.active) { color: var(--text-secondary); background: var(--bg-panel); }
.ribbon-tab.active {
    color:           var(--accent);
    border-bottom-color: var(--accent);
    font-weight:     600;
}
.ribbon-tab i {
    font-size:       11px;
    font-family:     'Font Awesome 6 Free' !important;
}

/* Toolbar panel row */
.ribbon-panel {
    display:         flex;
    align-items:     center;
    gap:             0;
    padding:         4px 14px;
    height:          48px;
    overflow-x:      auto;
    scrollbar-width: none;
    flex-wrap:       nowrap;
}
.ribbon-panel::-webkit-scrollbar { display: none; }
.ribbon-panel[hidden]            { display: none !important; }

/* Ribbon group */
.ribbon-group {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             0;
    flex-shrink:     0;
}

.ribbon-group-label {
    font-size:       9px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           var(--text-placeholder);
    padding:         0 4px 2px;
    user-select:     none;
    white-space:     nowrap;
}

.ribbon-btns {
    display:         flex;
    align-items:     center;
    gap:             1px;
}

/* Ribbon separator */
.ribbon-sep {
    width:           1px;
    height:          36px;
    background:      var(--border-light);
    margin:          0 10px;
    flex-shrink:     0;
    align-self:      center;
}

/* Ribbon button */
.rb-btn {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             2px;
    padding:         4px 8px;
    border:          1px solid transparent;
    border-radius:   var(--r-sm);
    background:      transparent;
    color:           var(--text-secondary);
    cursor:          pointer;
    font-size:       10px;
    font-weight:     500;
    font-family:     var(--font-ui);
    line-height:     1.2;
    white-space:     nowrap;
    transition:      background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    min-width:       44px;
    user-select:     none;
    height:          38px;
    flex-shrink:     0;
}
.rb-btn i {
    font-size:       14px;
    font-family:     'Font Awesome 6 Free' !important;
    flex-shrink:     0;
}
.rb-btn span {
    font-size:       10px;
    line-height:     1;
    white-space:     nowrap;
    overflow:        visible;
    max-width:       none;
    text-overflow:   unset;
}
.rb-btn:hover {
    background:      var(--bg-panel);
    border-color:    var(--border-light);
    color:           var(--text-main);
}
.rb-btn:active { background: var(--bg-hover); transform: translateY(0.5px); }

.rb-btn--primary {
    background:      var(--accent);
    color:           #fff;
    border-color:    var(--accent);
    box-shadow:      var(--shadow-accent);
}
.rb-btn--primary:hover {
    background:      var(--accent-hover);
    border-color:    var(--accent-hover);
    color:           #fff;
}
.rb-btn--wide  { min-width: 72px; }
.rb-btn--danger { color: var(--danger); }
.rb-btn--danger:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.rb-btn--icon  { min-width: 32px; }

/* Ribbon indicators (Filter/Split/Weight active) */
.ribbon-indicators {
    display:         flex;
    align-items:     center;
    gap:             6px;
    margin-left:     auto;
    padding-right:   12px;
    flex-shrink:     0;
}
.ribbon-indicator {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    height:          22px;
    padding:         0 9px;
    border-radius:   99px;
    font-size:       11px;
    font-weight:     600;
    white-space:     nowrap;
}
.ribbon-indicator--filter {
    background: var(--info-bg);
    color:      var(--info);
    border:     1px solid var(--info-border);
}
.ribbon-indicator--split {
    background: var(--warning-bg);
    color:      var(--warning);
    border:     1px solid var(--warning-border);
}
.ribbon-indicator--weight {
    background: var(--success-bg);
    color:      var(--success);
    border:     1px solid var(--success-border);
}
.ribbon-indicator i { font-size: 10px; font-family: 'Font Awesome 6 Free' !important; }

/* ==========================================================================
   SHEET TABS BAR (bottom — Google Sheets / Excel style)
   ========================================================================== */
.sheet-tab-bar {
    display:         flex;
    align-items:     center;
    height:          30px;
    background:      var(--bg-panel);
    border-top:      1px solid var(--border-light);
    flex-shrink:     0;
    padding:         0 0 0 4px;
    overflow:        hidden;
}

.sheet-tabs-left {
    display:         flex;
    align-items:     flex-end;
    gap:             0;
    overflow-x:      auto;
    scrollbar-width: none;
    flex:            1;
}
.sheet-tabs-left::-webkit-scrollbar { display: none; }

.sheet-tab {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    height:          28px;
    padding:         0 14px;
    font-size:       11.5px;
    font-weight:     500;
    font-family:     var(--font-ui);
    color:           var(--text-muted);
    border:          none;
    background:      transparent;
    border-top:      2px solid transparent;
    cursor:          pointer;
    position:        relative;
    transition:      all var(--t-fast);
    user-select:     none;
    white-space:     nowrap;
    flex-shrink:     0;
}
.sheet-tab:hover:not(.active) {
    background:      var(--bg-hover);
    color:           var(--text-secondary);
}
.sheet-tab.active {
    background:      var(--bg-surface);
    color:           var(--accent);
    font-weight:     600;
    border-top-color: var(--accent);
    box-shadow:      0 -1px 0 var(--bg-surface) inset;
}
.sheet-tab i {
    font-size:       10px;
    font-family:     'Font Awesome 6 Free' !important;
}

.sheet-tab-badge {
    position:        absolute;
    top:             6px;
    right:           6px;
    width:           5px;
    height:          5px;
    border-radius:   50%;
    background:      var(--accent);
}

/* Status right */
.sheet-tabs-status {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         0 14px;
    font-size:       11px;
    color:           var(--text-muted);
    white-space:     nowrap;
    flex-shrink:     0;
    border-left:     1px solid var(--border-light);
    height:          100%;
}
.sheet-tabs-status .status-dot {
    width:           6px;
    height:          6px;
    border-radius:   50%;
    background:      var(--success);
    animation:       pulse-dot 2.5s ease-in-out infinite;
}
.sheet-tabs-status .status-divider {
    color: var(--border-medium);
    font-size: 10px;
}
.sheet-tabs-status .status-item { font-size: 11px; color: var(--text-muted); }
.sheet-tabs-status i { font-family: 'Font Awesome 6 Free' !important; }

/* Hide old .view-tabs and .status-bar if still present */
.view-tabs      { display: none !important; }
.status-bar     { display: none !important; }

/* ==========================================================================
   SPLIT VIEW — data + output side by side
   ========================================================================== */
.app-container.split-active .data-container {
    display:         flex;
    flex-direction:  row;
    overflow:        hidden;
}
.app-container.split-active .data-view.active,
.app-container.split-active table.data-view.active {
    flex:            1;
    min-width:       0;
    display:         table !important;
    border-right:    1px solid var(--border-light);
}
.app-container.split-active .output-view {
    width:           38%;
    min-width:       280px;
    max-width:       55%;
    flex-shrink:     0;
    display:         flex !important;
    resize:          horizontal;
    overflow:        auto;
}
.app-container.split-active .variable-view.active,
.app-container.split-active .stat-tables-view.active { flex: 1; }

/* ==========================================================================
   COMMAND PALETTE
   ========================================================================== */
.ui-palette-overlay {
    position:        fixed;
    inset:           0;
    z-index:         3000;
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    padding-top:     14vh;
    background:      rgba(26,25,21,.5);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity var(--t-fast);
    backdrop-filter: blur(3px);
}
.ui-palette-overlay.ui-open { opacity: 1; pointer-events: auto; }
.ui-palette {
    width:           580px;
    max-width:       92vw;
    max-height:      62vh;
    display:         flex;
    flex-direction:  column;
    background:      var(--bg-surface);
    border-radius:   var(--r-xl);
    box-shadow:      var(--shadow-modal);
    transform:       translateY(-8px);
    transition:      transform var(--t-fast);
    overflow:        hidden;
    border:          1px solid var(--border-light);
}
.ui-palette-overlay.ui-open .ui-palette { transform: translateY(0); }
.ui-palette-input-row {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 16px;
    border-bottom:   1px solid var(--border-light);
    flex-shrink:     0;
}
.ui-palette-input-row i { color: var(--text-muted); font-size: 14px; font-family: 'Font Awesome 6 Free' !important; }
.ui-palette-input-row input {
    flex:            1;
    border:          none;
    outline:         none;
    background:      transparent;
    font-size:       14px;
    font-family:     var(--font-ui);
    color:           var(--text-main);
}
.ui-palette-input-row kbd {
    font-size:       10px;
    padding:         2px 7px;
    border-radius:   4px;
    background:      var(--bg-panel);
    color:           var(--text-muted);
    border:          1px solid var(--border-medium);
    font-family:     var(--font-ui);
}
.ui-palette-list    { overflow-y: auto; padding: 6px; }
.ui-palette-group {
    font-size:       10.5px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    color:           var(--text-muted);
    padding:         8px 10px 4px;
}
.ui-palette-item {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         9px 10px;
    border-radius:   var(--r-md);
    cursor:          pointer;
    font-size:       13px;
    color:           var(--text-main);
    transition:      background var(--t-fast);
}
.ui-palette-item i {
    width:           16px;
    text-align:      center;
    color:           var(--text-muted);
    flex-shrink:     0;
    font-family:     'Font Awesome 6 Free' !important;
}
.ui-palette-item.ui-active { background: var(--accent); color: #fff; }
.ui-palette-item.ui-active i { color: rgba(255,255,255,.8); }
.ui-palette-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* ==========================================================================
   SHORTCUT CHEATSHEET
   ========================================================================== */
.ui-shortcut-grid {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             10px 24px;
}
.ui-shortcut-row {
    display:         flex;
    align-items:     center;
    gap:             10px;
    font-size:       12px;
    color:           var(--text-secondary);
}
.ui-shortcut-row kbd {
    font-size:       11px;
    font-weight:     600;
    padding:         3px 8px;
    border-radius:   5px;
    background:      var(--bg-panel);
    border:          1px solid var(--border-medium);
    color:           var(--text-main);
    white-space:     nowrap;
    min-width:       80px;
    text-align:      center;
    font-family:     var(--font-ui);
    box-shadow:      0 1px 0 var(--border-medium);
}

/* ==========================================================================
   ANALYZE MODAL — search bar addition
   ========================================================================== */
.analyze-search-bar {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 0 16px;
    border-bottom:   1px solid var(--border-light);
    margin-bottom:   16px;
}
.analyze-search-bar i { color: var(--text-muted); font-size: 14px; font-family: 'Font Awesome 6 Free' !important; }
.analyze-search-bar .form-control {
    border:          none;
    background:      var(--bg-panel);
    border-radius:   var(--r-md);
    font-size:       13px;
}
.analyze-search-bar .form-control:focus {
    background:      var(--accent-light);
    box-shadow:      0 0 0 2px var(--accent-border);
}

/* ==========================================================================
   PRO MODAL — shared base (data-pro, report-pro, ui-pro)
   ========================================================================== */
.pro-modal-overlay {
    position:        fixed;
    inset:           0;
    z-index:         2000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(26,25,21,.45);
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .16s ease;
    padding:         24px;
    backdrop-filter: blur(2px);
}
.pro-modal-overlay.pro-open  { opacity: 1; pointer-events: auto; }
.pro-modal {
    width:           520px;
    max-width:       100%;
    max-height:      88vh;
    display:         flex;
    flex-direction:  column;
    background:      var(--bg-surface);
    border-radius:   var(--r-xl);
    box-shadow:      var(--shadow-modal);
    transform:       translateY(10px) scale(.98);
    transition:      transform .16s ease;
    overflow:        hidden;
    border:          1px solid var(--border-light);
}
.pro-modal-overlay.pro-open .pro-modal { transform: translateY(0) scale(1); }
.pro-modal--wide   { width: 760px; }
.pro-modal--narrow { width: 400px; }
.pro-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 18px;
    border-bottom:   1px solid var(--border-light);
    flex-shrink:     0;
}
.pro-modal-title {
    font-family:     var(--font-serif);
    font-size:       15px;
    font-weight:     700;
    color:           var(--text-main);
    display:         flex;
    align-items:     center;
    gap:             9px;
    letter-spacing:  -0.01em;
}
.pro-modal-title i { color: var(--accent); font-family: 'Font Awesome 6 Free' !important; }
.pro-modal-close {
    border:          none;
    background:      none;
    cursor:          pointer;
    color:           var(--text-muted);
    font-size:       15px;
    padding:         6px;
    border-radius:   var(--r-md);
    transition:      all var(--t-fast);
}
.pro-modal-close:hover { background: var(--bg-hover); color: var(--text-main); }
.pro-modal-body {
    padding:         18px 20px;
    overflow-y:      auto;
    font-size:       13px;
    flex:            1;
}
.pro-modal-footer {
    display:         flex;
    justify-content: flex-end;
    gap:             8px;
    padding:         12px 18px;
    border-top:      1px solid var(--border-light);
    flex-shrink:     0;
    background:      var(--bg-panel);
}

/* ==========================================================================
   DATA PRO — autosave badge
   ========================================================================== */
.dp-autosave-badge {
    display:         flex;
    align-items:     center;
    gap:             6px;
    height:          26px;
    padding:         0 10px;
    border:          1px solid var(--border-light);
    border-radius:   20px;
    background:      transparent;
    color:           var(--text-muted);
    font-size:       11px;
    font-family:     var(--font-ui);
    cursor:          pointer;
    transition:      all var(--t-fast);
    white-space:     nowrap;
    margin-right:    4px;
}
.dp-autosave-badge:hover {
    border-color:    var(--accent-border);
    color:           var(--accent);
    background:      var(--accent-light);
}
.dp-autosave-badge i { color: var(--success); font-size: 11px; font-family: 'Font Awesome 6 Free' !important; }
.dp-history-list { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; }
.dp-history-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    padding:         10px 12px;
    border:          1px solid var(--border-light);
    border-radius:   var(--r-md);
    background:      var(--bg-stripe);
    transition:      background var(--t-fast);
}
.dp-history-item:hover { background: var(--bg-hover); }
.dp-history-meta       { display: flex; flex-direction: column; gap: 2px; }
.dp-history-actions    { display: flex; gap: 6px; flex-shrink: 0; }

/* Report PRO helpers */
.rp-lead {
    font-size:       12.5px;
    color:           var(--text-secondary);
    background:      var(--accent-light);
    border-radius:   var(--r-md);
    padding:         10px 12px;
    margin-bottom:   14px;
    border:          1px solid var(--accent-border);
    line-height:     1.6;
}
.rp-lead i { color: var(--accent); margin-right: 4px; font-family: 'Font Awesome 6 Free' !important; }
.rp-empty  { text-align: center; padding: 36px 20px; color: var(--text-muted); }
.rp-empty i { font-size: 32px; margin-bottom: 10px; display: block; opacity: .4; font-family: 'Font Awesome 6 Free' !important; }

/* ==========================================================================
   DARK MODE overrides for new elements
   ========================================================================== */
html[data-theme="dark"] {
    --accent:          #a996d6;
    --accent-hover:    #bcabe0;
    --accent-active:   #cfc0ea;
    --accent-light:    #2b2440;
    --accent-muted:    #362d52;
    --accent-border:   #4f4372;
    --bg-app:          #17161c;
    --bg-surface:      #1d1c24;
    --bg-panel:        #221f2b;
    --bg-hover:        #2a2735;
    --bg-stripe:       #201e27;
    --text-main:       #f0efe9;
    --text-secondary:  #c7c4bb;
    --text-muted:      #8f8c86;
    --text-placeholder:#605d58;
    --border-light:    #322f3b;
    --border-medium:   #3c3946;
    --border-dark:     #4d4a58;
    --success:         #7fd9ac; --success-bg: #16281f; --success-border: #2d6a4f;
    --warning:         #f5c84a; --warning-bg: #2e2410; --warning-border: #92600a;
    --danger:          #f0a0a0; --danger-bg: #2e1616; --danger-border: #a33030;
    --info:            #9dc8ea; --info-bg: #131f2b; --info-border: #1a5276;
    --shadow-modal:    0 20px 60px rgba(0,0,0,.65), 0 4px 16px rgba(0,0,0,.5);
    color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg-app); color: var(--text-main); }
html[data-theme="dark"] .top-bar  { background: var(--bg-surface); border-color: var(--border-light); }
html[data-theme="dark"] .ribbon   { background: var(--bg-surface); border-color: var(--border-light); }
html[data-theme="dark"] .ribbon-tabs { border-color: var(--border-light); }
html[data-theme="dark"] .sheet-tab-bar { background: var(--bg-panel); border-color: var(--border-light); }
html[data-theme="dark"] .sheet-tab.active { background: var(--bg-surface); color: var(--accent); border-top-color: var(--accent); }
html[data-theme="dark"] .ui-palette { background: var(--bg-surface); border-color: var(--border-medium); }
html[data-theme="dark"] .ui-palette-input-row input { color: var(--text-main); }
html[data-theme="dark"] .pro-modal { background: var(--bg-surface); border-color: var(--border-medium); }
html[data-theme="dark"] .pro-modal-footer { background: var(--bg-panel); border-color: var(--border-light); }
html[data-theme="dark"] .dp-autosave-badge { background: var(--bg-panel); }
html[data-theme="dark"] img, html[data-theme="dark"] canvas { filter: brightness(.92) contrast(1.05); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .top-bar        { padding: 0 8px; }
    .doc-title-input { width: 120px; }
    .ribbon-tab span { display: none; }
    .ribbon-tab i    { font-size: 14px; }
    .sheet-tabs-status { display: none; }
    .ui-shortcut-grid  { grid-template-columns: 1fr; }
    .pro-modal--wide, .pro-modal { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .pro-modal-overlay { align-items: flex-end; padding: 0; }
}
/* ==========================================================================
   STATISIN v5.0 — PENAMBAHAN & PERBAIKAN (diimplementasikan di style.css)
   ========================================================================== */

/* ── GRID PRO — Excel-class spreadsheet layer ─────────────────────────────── */
:root {
    --gp-accent:        var(--accent);
    --gp-accent-hover:  var(--accent-hover);
    --gp-accent-light:  var(--accent-light);
    --gp-accent-border: var(--accent-border);
    --gp-sel:           rgba(107, 91, 141, 0.12);
    --gp-sel-border:    var(--accent);
    --gp-handle:        var(--accent);
    --gp-row-h:         28px;
    --gp-header-h:      32px;
    --gp-rownum-w:      48px;
    --gp-col-min:       80px;
    --gp-col-default:   120px;
    --gp-bg-header:     #f4f3f0;
    --gp-bg-stripe:     #faf9f7;
    --gp-bg-cell:       #ffffff;
    --gp-border:        #e5e3dc;
    --gp-border-header: #d0cec7;
    --gp-text:          #1a1915;
    --gp-text-muted:    #8a8780;
}

/* Grid container */
.gp-grid-wrap {
    position:   relative;
    overflow:   auto;
    flex:       1 1 0;
    background: var(--gp-bg-cell);
    outline:    none;
}

/* Grid wrapper view */
.gp-view-wrap {
    display:        flex;
    flex-direction: column;
    height:         100%;
    overflow:       hidden;
}

/* Column headers — override default dataTable th inside grid */
#dataTable thead th {
    position:       sticky;
    top:            0;
    z-index:        12;
    height:         var(--gp-header-h);
    min-width:      var(--gp-col-min);
    padding:        0 10px 0 8px;
    background:     var(--gp-bg-header);
    border-bottom:  2px solid var(--accent);
    border-right:   1px solid var(--gp-border-header);
    color:          var(--gp-text-muted);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align:     center;
    white-space:    nowrap;
    cursor:         default;
    transition:     background 0.1s;
}
#dataTable thead th:hover {
    background: var(--gp-accent-light);
    color:      var(--accent);
}
#dataTable thead th:first-child {
    position:   sticky;
    left:       0;
    z-index:    20;
    width:      var(--gp-rownum-w);
    min-width:  var(--gp-rownum-w);
    max-width:  var(--gp-rownum-w);
    background: var(--gp-bg-header);
    border-right: 2px solid var(--accent);
    font-size:  10px;
}

/* Row number cells */
#dataTable tbody th {
    position:   sticky;
    left:       0;
    z-index:    8;
    width:      var(--gp-rownum-w);
    min-width:  var(--gp-rownum-w);
    max-width:  var(--gp-rownum-w);
    height:     var(--gp-row-h);
    padding:    0 6px;
    background: var(--gp-bg-header);
    border-right:  2px solid var(--accent);
    border-bottom: 1px solid var(--gp-border);
    color:      var(--gp-text-muted);
    font-size:  11px;
    font-weight:500;
    text-align: right;
    cursor:     default;
    transition: background 0.1s;
}
#dataTable tbody tr:hover th {
    background: var(--gp-accent-light);
    color:      var(--accent);
}
#dataTable tbody th.gp-row-sel {
    background: var(--accent);
    color:      #fff;
}

/* Data cells — override the basic styles */
#dataTable tbody td {
    height:            var(--gp-row-h);
    padding:           0 8px;
    background:        var(--gp-bg-cell);
    border-bottom:     1px solid var(--gp-border);
    border-right:      1px solid var(--gp-border);
    color:             var(--gp-text);
    font-size:         12.5px;
    font-variant-numeric: tabular-nums;
    white-space:       nowrap;
    overflow:          hidden;
    text-overflow:     ellipsis;
    cursor:            cell;
    transition:        background 0.06s;
}
#dataTable tbody td.gp-num { text-align: right; }
#dataTable tbody td.gp-str { text-align: left; }
#dataTable tbody tr:nth-child(even) td { background: var(--gp-bg-stripe); }
#dataTable tbody tr:hover td { background: var(--gp-accent-light) !important; }

/* Fill handle */
.gp-fill-handle {
    position:    absolute;
    right:       -4px;
    bottom:      -4px;
    width:       8px;
    height:      8px;
    background:  var(--accent);
    border:      2px solid #fff;
    border-radius: 1px;
    cursor:      crosshair;
    z-index:     20;
    box-shadow:  0 0 0 1px var(--accent);
}

/* Multi-cell selection */
#dataTable td.gp-fill-preview {
    background: var(--gp-sel) !important;
    box-shadow: inset 0 0 0 1px var(--accent) !important;
}
#dataTable thead th.gp-col-sel-header {
    background: var(--accent) !important;
    color:      #fff !important;
}
#dataTable td.gp-col-sel { background: var(--gp-sel) !important; }

/* In-place cell editor */
.gp-cell-editor {
    position:    absolute;
    z-index:     50;
    border:      2px solid var(--accent);
    border-radius: 0;
    background:  #fff;
    color:       var(--gp-text);
    font-size:   12.5px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    padding:     0 7px;
    box-shadow:  0 4px 16px rgba(107,91,141,.18);
    resize:      none;
    outline:     none;
    overflow:    hidden;
    white-space: nowrap;
    min-width:   60px;
    line-height: var(--gp-row-h);
}

/* Column resize handle */
.gp-col-resizer {
    position:    absolute;
    top:         0;
    right:       -3px;
    width:       7px;
    height:      100%;
    cursor:      col-resize;
    z-index:     14;
    touch-action:none;
}
.gp-col-resizer::after {
    content:  "";
    position: absolute;
    top:      20%; right: 3px;
    width:    2px; height: 60%;
    background:  transparent;
    border-radius: 2px;
    transition: background 0.1s;
}
.gp-col-resizer:hover::after,
.gp-col-resizer.gp-active::after { background: var(--accent); }

/* Row resize handle */
.gp-row-resizer {
    position:    absolute;
    left:        0; bottom: -3px;
    height:      7px; width: 100%;
    cursor:      row-resize;
    z-index:     12;
    touch-action:none;
}
.gp-row-resizer::after {
    content:  "";
    position: absolute;
    left:     15%; bottom: 3px;
    height:   2px; width: 70%;
    background:  transparent;
    border-radius: 2px;
    transition: background 0.1s;
}
.gp-row-resizer:hover::after,
.gp-row-resizer.gp-active::after { background: var(--accent); }

/* Resize guides */
.gp-resize-guide {
    position:      fixed;
    z-index:       9999;
    background:    var(--accent);
    pointer-events:none;
    opacity:       0.6;
}

/* Frozen columns */
#dataTable th.gp-frozen,
#dataTable td.gp-frozen {
    position:   sticky;
    z-index:    8;
    background: var(--gp-bg-stripe);
    box-shadow: 2px 0 0 rgba(0,0,0,.04);
}
#dataTable thead th.gp-frozen  { z-index: 12; background: var(--gp-bg-header); }
#dataTable th.gp-frozen-edge,
#dataTable td.gp-frozen-edge   { box-shadow: 3px 0 8px -2px rgba(107,91,141,.16); }

/* Drag reorder */
#dataTable thead th.gp-drag-source { opacity: 0.4; }
#dataTable thead th.gp-drag-over   { box-shadow: inset 3px 0 0 var(--accent); }

/* Placeholder columns */
#dataTable thead th.gp-col-placeholder {
    width:       88px; min-width: 88px; max-width: 88px;
    color:       var(--accent-border);
    font-weight: 400;
    background:  repeating-linear-gradient(
        45deg, var(--gp-bg-header), var(--gp-bg-header) 6px,
        rgba(107,91,141,.04) 6px, rgba(107,91,141,.04) 12px
    );
}

/* Find matches */
#dataTable td.gp-match        { background: #fff9c4 !important; box-shadow: inset 0 0 0 1px #f0c040; }
#dataTable td.gp-match-active { background: #ffe066 !important; box-shadow: inset 0 0 0 2px #c8960a !important; }

/* ── FORMULA BAR ─────────────────────────────────────────────────────────── */
.gp-formula-bar {
    display:       flex;
    align-items:   center;
    gap:           0;
    height:        32px;
    background:    var(--bg-surface);
    border-bottom: 1px solid var(--gp-border);
    padding:       0 10px;
    flex-shrink:   0;
}
.gp-fbar-cell-ref {
    width:         72px;
    min-width:     72px;
    max-width:     72px;
    text-align:    center;
    font-size:     11.5px;
    font-variant-numeric: tabular-nums;
    color:         var(--gp-text-muted);
    border-right:  1px solid var(--gp-border);
    margin-right:  8px;
    padding-right: 8px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    user-select:   none;
}
.gp-fbar-sep { color: var(--gp-text-muted); margin-right: 8px; font-size: 14px; user-select: none; }
.gp-formula-input {
    flex:        1;
    border:      none;
    outline:     none;
    background:  transparent;
    font-size:   12.5px;
    font-family: var(--font-mono), var(--font-ui);
    color:       var(--gp-text);
    padding:     0;
}
.gp-formula-input:focus {
    background:   var(--accent-light);
    border-radius:var(--r-xs);
    padding:      0 6px;
    box-shadow:   0 0 0 2px var(--accent-border);
}
.gp-fbar-tools {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
    margin-left: 8px;
    padding-left:8px;
    border-left: 1px solid var(--gp-border);
}
.gp-fbar-btn {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    height:      24px;
    padding:     0 8px;
    border:      1px solid var(--gp-border);
    border-radius: 4px;
    background:  #fff;
    color:       var(--text-muted);
    font-size:   11px;
    font-weight: 500;
    cursor:      pointer;
    white-space: nowrap;
    transition:  all 0.1s;
}
.gp-fbar-btn:hover {
    background:   var(--accent-light);
    border-color: var(--accent-border);
    color:        var(--accent);
}
.gp-fbar-btn.gp-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gp-fbar-btn i { font-size: 10px; font-family: 'Font Awesome 6 Free' !important; }

/* Zoom cluster */
.gp-zoom {
    display:     inline-flex;
    align-items: center;
    border:      1px solid var(--gp-border);
    border-radius: 4px;
    overflow:    hidden;
    height:      24px;
}
.gp-zoom button {
    width:    24px; height: 100%;
    border:   none; background: #fff;
    color:    var(--text-muted);
    cursor:   pointer; font-size: 13px; line-height: 1;
}
.gp-zoom button:hover { background: var(--accent-light); color: var(--accent); }
.gp-zoom .gp-zoom-val {
    min-width:   44px; text-align: center;
    font-size:   11px; font-variant-numeric: tabular-nums;
    border-left: 1px solid var(--gp-border);
    border-right:1px solid var(--gp-border);
    color:       var(--text-muted);
    cursor:      pointer; user-select: none;
    height:      100%; line-height: 24px;
}

/* ── FIND & REPLACE BAR ──────────────────────────────────────────────────── */
.gp-find {
    position:      absolute;
    top:           10px; right: 16px;
    z-index:       120;
    display:       none;
    flex-direction:column;
    gap:           6px;
    padding:       12px;
    width:         310px;
    background:    #fff;
    border:        1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow:    0 8px 32px rgba(107,91,141,.14);
}
.gp-find.gp-open { display: flex; }
.gp-find-row     { display: flex; align-items: center; gap: 6px; }
.gp-find-row input[type="text"] {
    flex:    1; height: 30px;
    border:  1px solid var(--gp-border);
    border-radius: var(--r-sm);
    padding: 0 9px; font-size: 12px; font-family: inherit;
}
.gp-find-row input:focus {
    outline:      none;
    border-color: var(--accent);
    box-shadow:   0 0 0 3px var(--accent-light);
}
.gp-find-count { font-size: 11px; color: var(--text-muted); min-width: 60px; text-align: right; }
.gp-find-btn {
    height:       30px; min-width: 30px;
    padding:      0 8px; border-radius: var(--r-sm);
    cursor:       pointer;
    border:       1px solid var(--gp-border);
    background:   #fff; color: var(--text-muted); font-size: 12px;
    display:      inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.gp-find-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); }
.gp-find-btn.gp-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gp-find-btn.gp-primary:hover { background: var(--accent-hover); color: #fff; }
.gp-find-opts { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-muted); }
.gp-find-opts label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.gp-find-close {
    position: absolute; top: 8px; right: 10px;
    border: none; background: none; cursor: pointer;
    color: var(--text-muted); font-size: 14px;
}
.gp-find-close:hover { color: var(--danger); }

/* ── DARK MODE — Grid ────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    --gp-bg-header:     #1e1c28;
    --gp-bg-stripe:     #191721;
    --gp-bg-cell:       #14131c;
    --gp-border:        #2a2835;
    --gp-border-header: #332f40;
    --gp-text:          #e8e7f0;
    --gp-text-muted:    #6b6880;
    --gp-accent-light:  var(--accent-light);
    --gp-accent-border: var(--accent-border);
    --gp-sel:           rgba(169,150,214,.18);
}
html[data-theme="dark"] #dataTable tbody td          { background: var(--gp-bg-cell); color: var(--gp-text); }
html[data-theme="dark"] #dataTable tbody tr:nth-child(even) td { background: var(--gp-bg-stripe); }
html[data-theme="dark"] #dataTable tbody tr:hover td { background: var(--accent-light) !important; }
html[data-theme="dark"] #dataTable thead th          { background: var(--gp-bg-header); color: var(--gp-text-muted); border-color: var(--gp-border); }
html[data-theme="dark"] .gp-cell-editor              { background: #1a1929; color: var(--gp-text); border-color: var(--accent); }
html[data-theme="dark"] .gp-formula-bar              { background: var(--bg-surface); border-color: var(--gp-border); }
html[data-theme="dark"] .gp-formula-input            { color: var(--gp-text); }
html[data-theme="dark"] .gp-find                     { background: var(--bg-surface); border-color: var(--border-medium); }
html[data-theme="dark"] .gp-find-row input           { background: var(--bg-panel); color: var(--text-main); border-color: var(--border-medium); }
html[data-theme="dark"] .gp-fbar-btn                 { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-medium); }
html[data-theme="dark"] .loading-overlay             { background: rgba(23,22,28,.82) !important; }
html[data-theme="dark"] .modal-content               { background: var(--bg-surface); border-color: var(--border-medium); }
html[data-theme="dark"] .modal-header                { background: var(--bg-panel); border-color: var(--border-light); }
html[data-theme="dark"] .modal-footer                { background: var(--bg-panel); border-color: var(--border-light); }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea                     { background: var(--bg-panel); border-color: var(--border-medium); color: var(--text-main); }
html[data-theme="dark"] .btn-secondary               { background: var(--bg-panel); border-color: var(--border-medium); color: var(--text-secondary); }
html[data-theme="dark"] .output-section              { background: var(--bg-surface); border-color: var(--border-light); }
html[data-theme="dark"] .context-menu               { background: var(--bg-surface); border-color: var(--border-medium); }

/* ── STAB-DIV alias untuk status bar separator ───────────────────────────── */
.stab-div { color: var(--border-medium); }

/* ── RB-BTN --accent alias (digunakan index.php) ────────────────────────── */
.rb-btn--accent {
    background:   var(--accent);
    color:        #fff;
    border-color: var(--accent);
    box-shadow:   var(--shadow-accent);
}
.rb-btn--accent:hover {
    background:   var(--accent-hover);
    border-color: var(--accent-hover);
    color:        #fff;
}

/* ── POWER ANALYSIS ──────────────────────────────────────────────────────── */
.power-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.power-result {
    background:    var(--accent-light);
    border:        1px solid var(--accent-border);
    border-radius: var(--r-lg);
    padding:       16px;
    text-align:    center;
    margin-top:    14px;
}
.power-result-value { font-size: 32px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.power-result-label { font-size: 12px; color: var(--text-muted); }

/* ── NARASI / CODEBOOK OUTPUT ────────────────────────────────────────────── */
.narrative-block {
    background:    var(--accent-light);
    border:        1px solid var(--accent-border);
    border-radius: var(--r-lg);
    padding:       20px 24px;
    margin-bottom: 16px;
    line-height:   1.75;
    font-size:     13.5px;
    color:         var(--text-main);
}
.narrative-block p { margin-bottom: 10px; }
.narrative-block p:last-child { margin-bottom: 0; }

.codebook-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.codebook-table th, .codebook-table td { border: 1px solid var(--border-light); padding: 7px 12px; }
.codebook-table th { background: var(--bg-panel); font-weight: 600; color: var(--text-secondary); }
.codebook-table tr:nth-child(even) td { background: var(--bg-stripe); }

/* ── DATA-PRO HISTORY (extended) ─────────────────────────────────────────── */
.dp-history-meta h4 { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.dp-history-meta span { font-size: 11px; color: var(--text-muted); }

/* ── TOAST override ──────────────────────────────────────────────────────── */
.gp-toast {
    bottom:        44px;
    border-radius: var(--r-lg);
    font-size:     12.5px;
    box-shadow:    var(--shadow-lg);
    max-width:     80vw;
}
.gp-toast i { color: var(--accent-border); font-family: 'Font Awesome 6 Free' !important; }

/* ── CANVAS responsif di output ──────────────────────────────────────────── */
.output-section canvas { max-width: 100%; height: auto !important; }

/* ── PRINT ───────────────────────────────────────────────────────────────── */
@media print {
    .top-bar, .ribbon, .sheet-tab-bar, .output-nav { display: none !important; }
    .output-view.active { display: block !important; }
    .output-main { overflow: visible; padding: 0; }
    #outputContent { max-width: 100%; }
    .output-section, .apa-section { page-break-inside: avoid; box-shadow: none; }
}

/* ── RESPONSIVE TAMBAHAN ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .top-bar-actions .top-bar-action-btn span { display: none; }
    .top-bar-action-btn { padding: 0 8px; }
    .ribbon-panel { padding: 4px 6px; }
    .rb-btn { min-width: 36px; padding: 4px 4px; }
    .power-grid { grid-template-columns: 1fr; }
}
/* Tambahkan kod ini di bahagian paling bawah fail style.css */

/* 1. Tipografi Ala Claude untuk Heading & Tools */
h1, h2, h3, h4, h5, h6,
.modal-title,
.output-section h3,
.ref-header h2,
.empty-title,
.tb-btn span, 
.rb-btn span,
.ribbon-group-label,
.analyze-category h4 { 
    font-family: var(--font-serif); 
    letter-spacing: -0.01em; 
}

/* Pastikan Font Inter KHUSUS untuk Data Grid dan Nombor */
#dataTable th, 
#dataTable td,
.data-table th, 
.data-table td,
input, select {
    font-family: var(--font-ui) !important;
}

/* 2. PENYELESAIAN ISU BUTANG TIDAK BOLEH DIKLIK (Z-INDEX & POINTER EVENTS) */
.pro-modal-overlay, .dp-overlay, .modal {
    pointer-events: none; /* KUNCI: Elak halangan klik ketika tersembunyi */
    opacity: 0;
    transition: opacity var(--t-fast);
}

.pro-modal-overlay.pro-open, 
.dp-overlay.dp-open, 
.modal.active {
    pointer-events: auto; /* Aktifkan semula ketika modal dibuka */
    opacity: 1;
}

/* 3. Estetika Minimalis (Kurangkan ruang sesak) */
.output-section {
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid var(--border-light);
}

/* ============================================================================
   BUGFIX: modul CSS berikut (sebelumnya file grid.css terpisah) TIDAK PERNAH
   di-link di index.php, sehingga seluruh fitur Grid Pro Engine (resize kolom,
   indikator sort, freeze kolom, zoom, find & replace, formula bar, fill handle)
   tampil tanpa styling / rusak secara visual. Digabungkan di sini agar aktif.
   ============================================================================ */
/* ==========================================================================
   STATISIN — GRID PRO  v2.0  (Excel-class data-grid enhancement layer)
   Additive stylesheet. Load AFTER style.css.
   Professional blue theme: #4565b6 as primary accent.
   ========================================================================== */

/* Gantikan blok :root di bahagian atas fail grid.css */
:root {
  /* --- Accent override: Claude Purple --- */
  --gp-accent:        #6b5b8d;
  --gp-accent-hover:  #5a4a7a;
  --gp-accent-light:  #f0edf6;
  --gp-accent-border: #c4b8dc;
  --gp-sel:           rgba(107, 91, 141, 0.12);
  --gp-sel-border:    #6b5b8d;
  --gp-handle:        #6b5b8d;

  /* --- Row/col geometry --- */
  --gp-row-h:         28px;
  --gp-header-h:      32px;
  --gp-rownum-w:      48px;
  --gp-col-min:       80px;
  --gp-col-default:   120px;

  /* --- Surface tokens (Minimalis) --- */
  --gp-bg-header:     #faf9f7;
  --gp-bg-stripe:     #fcfcfb;
  --gp-bg-cell:       #ffffff;
  --gp-border:        #e5e3dc;
  --gp-border-header: #d0cec7;
  --gp-text:          #1a1915;
  --gp-text-muted:    #8a8780;
  --gp-text-num:      #1a1915;
  --gp-shadow-col:    rgba(107, 91, 141, 0.15);
}

/* ============================================================
   0. GRID CONTAINER — scrollable canvas, Excel-feel
   ============================================================ */
.gp-grid-wrap {
  position: relative;
  overflow: auto;
  flex: 1 1 0;
  background: var(--gp-bg-cell);
  border: 1px solid var(--gp-border);
  border-radius: 0 0 8px 8px;
  outline: none;
}

#dataTable {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* ============================================================
   1. COLUMN / ROW HEADERS — sticky, professional styling
   ============================================================ */
#dataTable thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  height: var(--gp-header-h);
  min-width: var(--gp-col-min);
  padding: 0 10px 0 8px;
  background: var(--gp-bg-header);
  border-bottom: 2px solid var(--gp-accent);
  border-right: 1px solid var(--gp-border-header);
  color: var(--gp-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: default;
  transition: background 0.1s;
}
#dataTable thead th:hover {
  background: var(--gp-accent-light);
  color: var(--gp-accent);
}
#dataTable thead th:first-child {
  /* Row-number corner cell */
  position: sticky;
  left: 0;
  z-index: 20;
  width: var(--gp-rownum-w);
  min-width: var(--gp-rownum-w);
  max-width: var(--gp-rownum-w);
  background: var(--gp-bg-header);
  border-right: 2px solid var(--gp-accent);
  color: var(--gp-text-muted);
  font-size: 10px;
}

/* Row number cells */
#dataTable tbody th {
  position: sticky;
  left: 0;
  z-index: 8;
  width: var(--gp-rownum-w);
  min-width: var(--gp-rownum-w);
  max-width: var(--gp-rownum-w);
  height: var(--gp-row-h);
  padding: 0 6px;
  background: var(--gp-bg-header);
  border-right: 2px solid var(--gp-accent);
  border-bottom: 1px solid var(--gp-border);
  color: var(--gp-text-muted);
  font-size: 11px;
  font-weight: 500;
  text-align: right;
  cursor: default;
  transition: background 0.1s;
}
#dataTable tbody tr:hover th {
  background: var(--gp-accent-light);
  color: var(--gp-accent);
}
/* Selected row header */
#dataTable tbody th.gp-row-sel {
  background: var(--gp-accent);
  color: #fff;
}

/* ============================================================
   2. DATA CELLS — tabular, right-align numerics
   ============================================================ */
#dataTable tbody td {
  height: var(--gp-row-h);
  padding: 0 8px;
  background: var(--gp-bg-cell);
  border-bottom: 1px solid var(--gp-border);
  border-right: 1px solid var(--gp-border);
  color: var(--gp-text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: cell;
  transition: background 0.06s;
}

/* Numeric alignment */
#dataTable tbody td.gp-num { text-align: right; }
#dataTable tbody td.gp-str { text-align: left; }

/* Striped rows */
#dataTable tbody tr:nth-child(even) td { background: var(--gp-bg-stripe); }
#dataTable tbody tr:hover td { background: var(--gp-accent-light) !important; }

/* ============================================================
   3. ACTIVE CELL & SELECTION — Excel blue ring + fill handle
   ============================================================ */
#dataTable td.active-cell {
  background: #fff !important;
  box-shadow: inset 0 0 0 2px var(--gp-accent) !important;
  position: relative;
  z-index: 6;
  overflow: visible;
}

/* Fill handle (small square at bottom-right of active cell) */
.gp-fill-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--gp-handle);
  border: 2px solid #fff;
  border-radius: 1px;
  cursor: crosshair;
  z-index: 20;
  box-shadow: 0 0 0 1px var(--gp-accent);
}

/* Multi-cell selection range */
#dataTable td.cell-selected {
  background-color: var(--gp-sel) !important;
  box-shadow: inset 0 0 0 1px var(--gp-accent-border);
}
#dataTable td.gp-fill-preview {
  background: var(--gp-sel) !important;
  box-shadow: inset 0 0 0 1px var(--gp-sel-border) !important;
}

/* Entire column/row selected */
#dataTable thead th.gp-col-sel-header {
  background: var(--gp-accent) !important;
  color: #fff !important;
}
#dataTable td.gp-col-sel {
  background: var(--gp-sel) !important;
}

/* ============================================================
   4. IN-PLACE CELL EDITOR — textarea overlay
   ============================================================ */
.gp-cell-editor {
  position: absolute;
  z-index: 50;
  border: 2px solid var(--gp-accent);
  border-radius: 0;
  background: #fff;
  color: var(--gp-text);
  font-size: 12.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0 7px;
  box-shadow: 0 4px 16px rgba(69, 101, 182, 0.18);
  resize: none;
  outline: none;
  overflow: hidden;
  white-space: nowrap;
  min-width: 60px;
  line-height: var(--gp-row-h);
}

/* ============================================================
   5. COLUMN RESIZE HANDLE — right edge of header
   ============================================================ */
#dataTable thead th { position: sticky; }

.gp-col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  z-index: 14;
  touch-action: none;
}
.gp-col-resizer::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 3px;
  width: 2px;
  height: 60%;
  background: transparent;
  border-radius: 2px;
  transition: background 0.1s;
}
.gp-col-resizer:hover::after,
.gp-col-resizer.gp-active::after { background: var(--gp-accent); }

/* ============================================================
   6. ROW RESIZE HANDLE — bottom edge of row-number cell
   ============================================================ */
.gp-row-resizer {
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 7px;
  width: 100%;
  cursor: row-resize;
  z-index: 12;
  touch-action: none;
}
.gp-row-resizer::after {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 3px;
  height: 2px;
  width: 70%;
  background: transparent;
  border-radius: 2px;
  transition: background 0.1s;
}
.gp-row-resizer:hover::after,
.gp-row-resizer.gp-active::after { background: var(--gp-accent); }
#dataTable tbody th { position: sticky; }

/* Resize guide lines */
.gp-resize-guide {
  position: fixed;
  z-index: 9999;
  background: var(--gp-accent);
  pointer-events: none;
  opacity: 0.6;
}
.gp-resize-guide.col { width: 2px; top: 0; bottom: 0; }
.gp-resize-guide.row { height: 2px; left: 0; right: 0; }

body.gp-resizing-col { cursor: col-resize !important; user-select: none !important; }
body.gp-resizing-row { cursor: row-resize !important; user-select: none !important; }

/* ============================================================
   7. SORT AFFORDANCE — caret in header
   ============================================================ */
.gp-sort-caret {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  line-height: 1;
  color: var(--gp-text-muted);
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 13;
  cursor: pointer;
  padding: 3px;
  border-radius: 3px;
}
#dataTable thead th:hover .gp-sort-caret { opacity: 0.6; }
.gp-sort-caret.gp-sorted { opacity: 1; color: var(--gp-accent); }
.gp-sort-caret:hover { background: var(--gp-accent-light); opacity: 1; }
#dataTable thead th.gp-col-sorted {
  background: linear-gradient(var(--gp-accent-light), var(--gp-accent-light)), var(--gp-bg-header);
  color: var(--gp-accent);
}

/* ============================================================
   8. FORMULA / CELL-REFERENCE BAR
   ============================================================ */
.gp-formula-bar {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  height: 32px;
  padding: 0 8px;
  background: #fff;
  border-bottom: 1px solid var(--gp-border);
}
.gp-formula-bar[hidden] { display: none; }

.gp-cellref {
  min-width: 70px;
  max-width: 120px;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gp-accent);
  background: var(--gp-accent-light);
  border: 1px solid var(--gp-accent-border);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-fx {
  width: 24px;
  text-align: center;
  font-style: italic;
  font-weight: 700;
  color: var(--gp-text-muted);
  font-size: 13px;
  flex-shrink: 0;
  border-right: 1px solid var(--gp-border);
  margin: 0 8px 0 8px;
  height: 18px;
  line-height: 18px;
}

.gp-formula-input {
  flex: 1;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--gp-text);
  background: transparent;
  min-width: 80px;
  font-variant-numeric: tabular-nums;
}
.gp-formula-input:focus {
  outline: none;
  border-color: var(--gp-accent-border);
  background: #fff;
  box-shadow: 0 0 0 3px var(--gp-accent-light);
}

.gp-fbar-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--gp-border);
}
.gp-fbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--gp-border);
  border-radius: 4px;
  background: #fff;
  color: #5a5f78;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.1s;
}
.gp-fbar-btn:hover {
  background: var(--gp-accent-light);
  border-color: var(--gp-accent-border);
  color: var(--gp-accent);
}
.gp-fbar-btn.gp-on {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: #fff;
}
.gp-fbar-btn i { font-size: 10px; }

/* Zoom cluster */
.gp-zoom {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gp-border);
  border-radius: 4px;
  overflow: hidden;
  height: 24px;
}
.gp-zoom button {
  width: 24px;
  height: 100%;
  border: none;
  background: #fff;
  color: #5a5f78;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.gp-zoom button:hover {
  background: var(--gp-accent-light);
  color: var(--gp-accent);
}
.gp-zoom .gp-zoom-val {
  min-width: 44px;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--gp-border);
  border-right: 1px solid var(--gp-border);
  color: #5a5f78;
  cursor: pointer;
  user-select: none;
  height: 100%;
  line-height: 24px;
}

/* ============================================================
   9. FIND & REPLACE BAR — floating
   ============================================================ */
.gp-find {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 120;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  width: 300px;
  background: #fff;
  border: 1px solid var(--gp-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(69, 101, 182, 0.14);
}
.gp-find.gp-open { display: flex; }
.gp-find-row { display: flex; align-items: center; gap: 6px; }
.gp-find-row input[type="text"] {
  flex: 1;
  height: 28px;
  border: 1px solid var(--gp-border);
  border-radius: 5px;
  padding: 0 9px;
  font-size: 12px;
  font-family: inherit;
}
.gp-find-row input:focus {
  outline: none;
  border-color: var(--gp-accent);
  box-shadow: 0 0 0 3px var(--gp-accent-light);
}
.gp-find-count {
  font-size: 11px;
  color: var(--gp-text-muted);
  min-width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gp-find-btn {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--gp-border);
  background: #fff;
  color: #5a5f78;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.gp-find-btn:hover {
  background: var(--gp-accent-light);
  color: var(--gp-accent);
  border-color: var(--gp-accent-border);
}
.gp-find-btn.gp-primary {
  background: var(--gp-accent);
  border-color: var(--gp-accent);
  color: #fff;
}
.gp-find-btn.gp-primary:hover {
  background: var(--gp-accent-hover);
  color: #fff;
}
.gp-find-opts {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--gp-text-muted);
}
.gp-find-opts label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.gp-find-close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gp-text-muted);
  font-size: 14px;
}
.gp-find-close:hover { color: #c0392b; }

/* Match highlight */
#dataTable td.gp-match {
  background: #fff9c4 !important;
  box-shadow: inset 0 0 0 1px #f0c040;
}
#dataTable td.gp-match-active {
  background: #ffe066 !important;
  box-shadow: inset 0 0 0 2px #c8960a !important;
}

/* ============================================================
   10. FROZEN COLUMNS
   ============================================================ */
#dataTable th.gp-frozen,
#dataTable td.gp-frozen {
  position: sticky;
  z-index: 8;
  background: var(--gp-bg-stripe);
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.04);
}
#dataTable thead th.gp-frozen {
  z-index: 12;
  background: var(--gp-bg-header);
}
#dataTable th.gp-frozen-edge,
#dataTable td.gp-frozen-edge {
  box-shadow: 3px 0 8px -2px rgba(69, 101, 182, 0.16);
}

/* ============================================================
   11. COLUMN DRAG-REORDER
   ============================================================ */
#dataTable thead th.gp-drag-source { opacity: 0.4; }
#dataTable thead th.gp-drag-over {
  box-shadow: inset 3px 0 0 var(--gp-accent);
}

/* ============================================================
   12. PLACEHOLDER COLUMNS
   ============================================================ */
#dataTable thead th.gp-col-placeholder {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  color: #b8bcce;
  font-weight: 400;
  background: repeating-linear-gradient(
    45deg,
    var(--gp-bg-header),
    var(--gp-bg-header) 6px,
    rgba(69, 101, 182, 0.03) 6px,
    rgba(69, 101, 182, 0.03) 12px
  );
}

/* ============================================================
   13. TOAST NOTIFICATIONS
   ============================================================ */
.gp-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #1a1c26;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  box-shadow: 0 4px 16px rgba(26, 28, 38, 0.18);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 80vw;
}
.gp-toast.gp-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.gp-toast i { color: var(--gp-accent-border); }

/* ============================================================
   14. DARK MODE OVERRIDES
   ============================================================ */
html[data-theme="dark"] {
  --gp-bg-header:     #1e2030;
  --gp-bg-stripe:     #191b2a;
  --gp-bg-cell:       #14151f;
  --gp-border:        #2a2d42;
  --gp-border-header: #333654;
  --gp-text:          #e8eaf5;
  --gp-text-muted:    #6b6f8e;
  --gp-text-num:      #e8eaf5;
  --gp-accent-light:  #1c2140;
  --gp-accent-border: #3b4d8a;
  --gp-sel:           rgba(69, 101, 182, 0.22);
}
html[data-theme="dark"] #dataTable tbody td { background: var(--gp-bg-cell); }
html[data-theme="dark"] #dataTable tbody tr:nth-child(even) td { background: var(--gp-bg-stripe); }
html[data-theme="dark"] #dataTable tbody tr:hover td { background: var(--gp-accent-light) !important; }
html[data-theme="dark"] .gp-cell-editor { background: #1a1c2e; color: var(--gp-text); border-color: var(--gp-accent); }
html[data-theme="dark"] .gp-formula-bar { background: #14151f; border-color: var(--gp-border); }
html[data-theme="dark"] .gp-formula-input { color: var(--gp-text); }
html[data-theme="dark"] .gp-formula-input:focus { background: #1a1c2e; }
html[data-theme="dark"] .gp-find { background: #1e2030; border-color: var(--gp-border); }
html[data-theme="dark"] .gp-find-row input[type="text"] { background: #14151f; color: var(--gp-text); border-color: var(--gp-border); }
html[data-theme="dark"] .gp-fbar-btn { background: #14151f; color: #8a8fa8; border-color: var(--gp-border); }
html[data-theme="dark"] .gp-fbar-btn:hover { background: var(--gp-accent-light); color: #7b9aff; }
html[data-theme="dark"] .gp-toast { background: #e8eaf5; color: #1a1c26; }
/* ============================================================================
   BUGFIX: kelas-kelas berikut dipakai oleh tabel hasil analisis (Reliabilitas,
   Multikolinearitas, dsb — gaya Bootstrap) dan komponen Stats Pro / Report Pro
   (badge status uji asumsi, kalkulator Power Analysis, pratinjau narasi APA)
   tapi sebelumnya TIDAK PERNAH didefinisikan di CSS manapun (style.css maupun
   grid.css), sehingga elemen-elemen ini tampil polos/tidak rapi tanpa styling.
   Ditambahkan di sini, mengikuti token desain (warna/spasi) yang sudah ada.
   ============================================================================ */

/* -- Utilitas gaya tabel (dipakai output Reliabilitas & Multikolinearitas) -- */
.table { width:100%; border-collapse:collapse; margin-bottom:14px; font-size:12.5px; color:var(--text-main); }
.table th, .table td { padding:7px 10px; text-align:left; vertical-align:middle; }
.table-bordered th, .table-bordered td { border:1px solid var(--border-medium); }
.table-borderless th, .table-borderless td { border:none; }
.table-sm th, .table-sm td { padding:4px 8px; font-size:12px; }
.table-striped tbody tr:nth-child(even) td { background:var(--bg-stripe); }
.table-hover tbody tr:hover td { background:var(--bg-hover); }
.thead-dark th { background:var(--text-main); color:#fff; border-color:var(--text-main); font-weight:600; }
.thead-light th { background:var(--bg-panel); color:var(--text-main); font-weight:600; border-bottom:2px solid var(--border-dark); }

/* -- Utilitas layout & teks (grid ringkasan Reliabilitas, dsb) --
   NOTE: .row/.col-md-* sengaja di-scope ke dalam .output-section agar TIDAK
   bentrok dengan selector .gp-resize-guide.row milik Grid Pro (garis panduan
   drag-resize kolom/baris) yang juga memakai nama kelas "row". -- */
.output-section .row { display:flex; flex-wrap:wrap; gap:12px; }
.output-section .col-md-6 { flex:1 1 calc(50% - 6px); min-width:220px; box-sizing:border-box; }
.output-section .col-md-12 { flex:1 1 100%; box-sizing:border-box; }
.text-center { text-align:center; }
.text-white { color:#fff; }
.bg-primary { background:var(--accent); color:#fff; }
.bg-light { background:var(--bg-panel); }
.border-primary { border-color:var(--accent) !important; }
.font-weight-bold { font-weight:700; }
.align-middle { vertical-align:middle; }
.badge-secondary { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; background:var(--bg-panel); color:var(--text-secondary); }
.mb-0 { margin-bottom:0 !important; }
.mb-4 { margin-bottom:16px; }
.mt-4 { margin-top:16px; }
.m-0 { margin:0; }

@media (max-width: 640px) {
  .output-section .col-md-6, .output-section .col-md-12 { flex:1 1 100%; }
}

/* -- Stats Pro: badge status & tabel uji asumsi (Assumption Pre-Flight Checker) -- */
.sp-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.sp-badge--ok   { background:var(--success-bg); color:var(--success); border:1px solid var(--success-border); }
.sp-badge--warn { background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-border); }
.sp-badge--bad  { background:var(--danger-bg);  color:var(--danger);  border:1px solid var(--danger-border); }
.sp-assump-table { width:100%; border-collapse:collapse; margin:10px 0; font-size:12.5px; }
.sp-assump-table th, .sp-assump-table td { padding:7px 10px; border-bottom:1px solid var(--border-light); text-align:left; }
.sp-assump-table th { font-weight:600; color:var(--text-secondary); font-size:11.5px; }
.sp-hint { font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.5; }
.sp-warn-intro { background:var(--warning-bg); border:1px solid var(--warning-border); color:var(--warning); padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:12px; }

/* -- Stats Pro: kalkulator Power Analysis / Ukuran Sampel -- */
.pw-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.pw-result { margin-top:14px; padding:14px; background:var(--accent-light); border:1px solid var(--accent-border); border-radius:10px; font-size:13px; color:var(--text-main); }
@media (max-width: 520px) { .pw-grid { grid-template-columns:1fr; } }

/* -- Report Pro: pratinjau narasi APA otomatis -- */
.rp-narrative-preview { white-space:pre-wrap; line-height:1.7; font-size:13.5px; color:var(--text-main); background:var(--bg-panel); border:1px solid var(--border-light); border-radius:10px; padding:16px; max-height:50vh; overflow-y:auto; }

/* -- Grid Pro: label baris pada formula/cell-reference bar -- */
.gp-cellref-row { color:var(--text-muted); font-weight:400; margin-left:2px; }

/* -- Judul kecil di dalam .card (dipakai berbagai kartu interpretasi hasil uji) -- */
.card-title { font-family:var(--font-ui); font-size:13px; font-weight:700; color:var(--text-main); margin:0 0 8px; }

/* -- Report Pro: tabel codebook (Codebook Generator) -- */
.result-table { width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:12.5px; }
.result-table th, .result-table td { padding:8px 10px; border-bottom:1px solid var(--border-light); text-align:left; }
.result-table th { background:var(--bg-panel); font-weight:600; color:var(--text-main); border-top:2px solid var(--text-main); }
.result-table tr:nth-child(even) td { background:var(--bg-stripe); }

/* -- Report Pro: Smart Interpretation Cards ─────────────────────────────────
   Membungkus SETIAP hasil analisis (installOutputObserver → wrapOutputSections)
   dengan header berlabel status (Terpenuhi/Perhatian/Peringatan/Info) yang bisa
   dilipat. Sebelumnya kelas-kelas berikut sama sekali tidak memiliki CSS. -- */
.analysis-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow:    var(--shadow-sm);
    margin-bottom: 24px;
    overflow:      hidden;
}
.analysis-card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    padding:         14px 20px;
    cursor:          pointer;
    background:      var(--bg-panel);
    border-bottom:   1px solid var(--border-light);
    user-select:     none;
}
.analysis-card-header:hover { background: var(--bg-hover); }
.analysis-card-title {
    display:      flex;
    align-items:  center;
    gap:          9px;
    font-family:  var(--font-serif);
    font-size:    1rem;
    font-weight:  600;
    color:        var(--text-main);
    letter-spacing: -0.01em;
}
.analysis-card-title i { color: var(--accent); font-size: 13px; font-family: 'Font Awesome 6 Free' !important; }
.analysis-card-body { padding: 0; }
/* Ratakan .output-section bawaan saat sudah dibungkus analysis-card, agar tidak dobel-kotak */
.analysis-card-body .output-section {
    border:        none;
    box-shadow:    none;
    margin-bottom: 0;
    border-radius: 0;
}

.analysis-card-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        3px 10px;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    600;
    white-space:    nowrap;
}
.analysis-card-badge--ok   { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.analysis-card-badge--warn { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.analysis-card-badge--err  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-border); }
.analysis-card-badge--info { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-border); }