:root {
        --bg: #0f0f0f;
        --sidebar: #141414;
        --panel: #1b1b1b;
        --border: #333;
        --text: #e0e0e0;
        --accent: #d4a017;

        /* Status Colors */
        --c-green: #2e7d32;
        --c-orange: #f57f17;
        --c-red: #c62828;

        /* Stash Colors */
        --c-koen: #d4a017;
        --c-pack: #8d6e63;

        /* Raid Group Colors */
        --raid-odd: #1a1a1a;
        --raid-even: #222222;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: "Segoe UI", Roboto, monospace;
        margin: 0;
        height: 100vh;
        display: grid;
        grid-template-columns: 360px 1fr;
        overflow: hidden;
      }

      /* ANIMATIONS */
      @keyframes flashGreen {
        0% {
          background-color: #1e1e1e;
        }
        50% {
          background-color: #1b5e20;
        }
        100% {
          background-color: #1e1e1e;
        }
      }
      .flash-success {
        animation: flashGreen 0.8s ease-out;
      }
      @keyframes pulseRing {
        0% {
          box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.7);
        }
        70% {
          box-shadow: 0 0 0 6px rgba(212, 160, 23, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(212, 160, 23, 0);
        }
      }
      .pulse-guide {
        animation: pulseRing 2s infinite;
        border-color: var(--accent) !important;
      }

      /* --- SIDEBAR --- */
      .sidebar {
        background: var(--sidebar);
        border-right: 1px solid var(--border);
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.5);
        z-index: 10;
        height: 100vh;
        box-sizing: border-box;
      }

      .brand {
        font-size: 16px;
        font-weight: 900;
        text-transform: uppercase;
        color: #888;
        border-bottom: 2px solid var(--accent);
        padding-bottom: 10px;
        letter-spacing: 3px;
        text-align: center;
        margin-bottom: 5px;
      }

      /* PROFILE MANAGER */
      .profile-bar {
        background: #1f1f1f;
        border: 1px solid #333;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      .prof-row {
        display: flex;
        gap: 5px;
      }
      .prof-btn {
        padding: 4px;
        font-size: 10px;
        cursor: pointer;
        background: #333;
        border: 1px solid #444;
        color: #ccc;
        flex: 1;
      }
      .prof-btn:hover {
        background: #444;
        color: #fff;
      }
      #profSel {
        background: #111;
        color: var(--accent);
        border: 1px solid #444;
        font-weight: bold;
        font-family: "Consolas", monospace;
      }

      /* DATA IO */
      .io-row {
        display: flex;
        gap: 5px;
        margin-top: 5px;
      }
      .btn-io {
        flex: 1;
        font-size: 9px;
        padding: 4px;
        background: #222;
        border: 1px solid #333;
        color: #666;
        cursor: pointer;
      }
      .btn-io:hover {
        color: #fff;
        border-color: #666;
      }

      /* LINK OBS BTN */
      #obsBtn {
        background: #1f1f1f;
        border: 1px dashed #444;
        color: #666;
        font-size: 10px;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        transition: 0.2s;
      }
      #obsBtn:hover {
        border-color: #888;
        color: #aaa;
      }
      #obsBtn.active {
        background: #1b5e20;
        border: 1px solid #2e7d32;
        color: #fff;
      }

      /* STASH BOXES */
      .stash-box {
        background: #1e1e1e;
        border: 1px solid #333;
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 15px;
      }
      .stash-box img {
        width: 38px;
        height: 38px;
        object-fit: contain;
      }
      .stash-data {
        display: flex;
        flex-direction: column;
      }
      .stash-lbl {
        font-size: 9px;
        text-transform: uppercase;
        color: #777;
        letter-spacing: 1px;
      }
      .stash-val {
        font-size: 20px;
        font-weight: bold;
        font-family: "Consolas", monospace;
        color: #fff;
      }
      .box-koen {
        border-left: 3px solid var(--c-koen);
      }
      .box-pack {
        border-left: 3px solid var(--c-pack);
      }

      /* INPUT PANEL */
      .input-panel {
        background: #1a1a1a;
        border: 1px solid var(--c-koen);
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .panel-title {
        font-size: 10px;
        color: var(--c-koen);
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 2px;
      }

      /* GENERIC INPUT STYLES */
      .input-group {
        background: #1a1a1a;
        padding: 10px;
        border: 1px solid #333;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .input-lbl {
        font-size: 9px;
        color: #888;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        justify-content: space-between;
      }
      .note {
        font-size: 8px;
        color: #555;
        text-transform: uppercase;
        text-align: center;
        margin-top: 2px;
      }

      input,
      select,
      textarea {
        width: 100%;
        background: #111;
        border: 1px solid #444;
        color: #fff;
        padding: 6px;
        box-sizing: border-box;
        font-family: "Consolas", monospace;
        font-size: 11px;
      }
      input:focus,
      select:focus,
      textarea:focus {
        outline: 1px solid var(--accent);
      }
      .row-inputs {
        display: flex;
        gap: 5px;
      }

      button {
        width: 100%;
        padding: 8px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 10px;
        transition: 0.2s;
      }
      .btn-main {
        background: #333;
        color: #fff;
        border: 1px solid #555;
      }
      .btn-main:hover {
        background: var(--accent);
        color: #000;
        border-color: var(--accent);
      }
      .btn-sub {
        flex: 1;
        background: #222;
        color: #888;
        border: 1px solid #333;
      }
      .btn-sub:hover {
        background: #333;
        color: #fff;
      }

      /* RAID CONTROLLER */
      .raid-ctrl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #000;
        padding: 4px;
        border: 1px solid #333;
        margin-bottom: 5px;
      }
      .raid-btn {
        width: 25px;
        height: 25px;
        padding: 0;
        background: #222;
        color: #fff;
        font-size: 14px;
      }
      .raid-disp {
        font-family: "Consolas", monospace;
        font-size: 13px;
        font-weight: bold;
        color: var(--c-koen);
      }

      /* SLIDER */
      .slider-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-bottom: 5px;
      }
      .slider-info {
        display: flex;
        justify-content: space-between;
        font-size: 8px;
        color: #777;
        font-weight: bold;
      }
      input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        background: transparent;
        margin: 5px 0;
      }
      input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background: var(--c-koen);
        cursor: pointer;
        margin-top: -4px;
      }
      input[type="range"]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #444;
        border-radius: 2px;
      }

      /* HISTORY SIDEBAR */
      .history-cont {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-top: 1px solid #333;
        padding-top: 10px;
      }
      .mini-list {
        overflow-y: auto;
        flex: 1;
        padding-right: 5px;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .mini-item {
        font-size: 10px;
        padding: 8px 5px;
        border-bottom: 1px solid #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: "Consolas", monospace;
        color: #888;
      }
      .mini-meta {
        font-size: 9px;
        color: #555;
        margin-left: 5px;
        text-transform: uppercase;
      }
      .raid-bg-odd {
        background: var(--raid-odd);
      }
      .raid-bg-even {
        background: var(--raid-even);
      }

      /* --- CONTENT --- */
      .content {
        display: flex;
        flex-direction: column;
        background: #121212;
        overflow: hidden;
      }
      .tabs {
        display: flex;
        background: #181818;
        border-bottom: 1px solid #333;
        flex-shrink: 0;
      }
      .tab {
        padding: 12px 20px;
        cursor: pointer;
        color: #666;
        font-weight: bold;
        font-size: 11px;
        letter-spacing: 1px;
      }
      .tab.active {
        background: #222;
        color: var(--c-koen);
        border-bottom: 3px solid var(--c-koen);
      }
      .page {
        display: none;
        padding: 20px;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
      }
      .page.active {
        display: block;
      }

      /* DASHBOARD */
      .filter-bar {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        background: #1a1a1a;
        padding: 8px;
        border: 1px solid #333;
        align-items: center;
      }
      .filter-sel {
        width: 140px;
        background: #222;
        border: 1px solid #444;
        color: #fff;
        padding: 4px;
        font-size: 10px;
      }

      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        margin-bottom: 15px;
      }
      .kpi-card {
        background: #1e1e1e;
        border: 1px solid #333;
        padding: 12px;
        text-align: center;
      }
      .kpi-lbl {
        font-size: 9px;
        color: #666;
        text-transform: uppercase;
        margin-bottom: 4px;
      }
      .kpi-val {
        font-size: 18px;
        font-weight: bold;
        font-family: "Consolas", monospace;
      }
      .kpi-sub {
        font-size: 9px;
        color: #555;
        margin-top: 4px;
      }

      .charts-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 15px;
        height: 280px;
      }
      .chart-box {
        background: #1e1e1e;
        border: 1px solid #333;
        padding: 10px;
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
      }
      .chart-head {
        font-size: 11px;
        font-weight: bold;
        color: #888;
        text-transform: uppercase;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      /* PREDICTION PANEL */
      .pred-panel {
        background: #191919;
        border: 1px solid #333;
        padding: 10px 15px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      }
      .pred-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .pred-lbl {
        font-size: 9px;
        font-weight: bold;
        color: #555;
        text-transform: uppercase;
      }
      .pred-val {
        font-family: "Consolas", monospace;
        font-size: 16px;
        font-weight: bold;
        color: #ddd;
      }
      .goal-input {
        flex: 1.5;
        border-left: 1px solid #333;
        padding-left: 20px;
        display: flex;
        align-items: center;
        gap: 15px;
      }

      /* DATA TABLE */
      table {
        width: 100%;
        border-collapse: collapse;
        font-family: "Consolas", monospace;
        font-size: 11px;
      }
      th {
        text-align: left;
        padding: 10px;
        background: #252525;
        color: #888;
        position: sticky;
        top: 0;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        border-bottom: 2px solid #333;
      }
      td {
        padding: 8px 10px;
        border-bottom: 1px solid #252525;
        color: #ccc;
        vertical-align: middle;
      }
      .act-icon {
        cursor: pointer;
        color: #444;
        margin-left: 8px;
        font-size: 14px;
        transition: 0.2s;
      }
      .act-icon:hover {
        color: #fff;
      }
      .act-del:hover {
        color: var(--c-red);
      }
      .act-edit:hover {
        color: var(--c-koen);
      }
      .raid-badge {
        background: #333;
        color: #ccc;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: bold;
      }
      .link-icon {
        text-decoration: none;
        color: #555;
        font-size: 12px;
        margin-left: 5px;
      }
      .link-icon:hover {
        color: #4fc3f7;
      }
      .note-icon {
        cursor: help;
        color: #d4a017;
        font-size: 12px;
        margin-left: 5px;
        position: relative;
      }

      /* TOOLTIP FOR NOTE */
      .tooltip-wrap {
        position: relative;
        display: inline-block;
      }
      .tooltip-wrap .tooltip-txt {
        visibility: hidden;
        width: 180px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 5px;
        position: absolute;
        z-index: 1001;
        bottom: 125%;
        left: 50%;
        margin-left: -90px;
        font-family: "Segoe UI", sans-serif;
        font-size: 10px;
        border: 1px solid #555;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
      }
      .tooltip-wrap:hover .tooltip-txt {
        visibility: visible;
      }

      /* MODAL */
      .modal {
        display: none;
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        justify-content: center;
        align-items: center;
      }
      .modal.open {
        display: flex;
      }
      .modal-box {
        background: #202020;
        padding: 20px;
        border: 1px solid #444;
        width: 320px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
      }

      /* FLOATING RAID MENU */
      #raidMenu {
        display: none;
        position: absolute;
        background: #1b1b1b;
        border: 1px solid var(--accent);
        padding: 0;
        z-index: 999;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
        width: 280px;
        border-radius: 4px;
        overflow: hidden;
      }
      #raidMenu.active {
        display: block;
      }
      .rm-head {
        background: #111;
        padding: 8px 10px;
        font-size: 11px;
        font-weight: bold;
        color: var(--accent);
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #333;
      }
      .rm-close {
        cursor: pointer;
        color: #666;
        font-size: 14px;
        line-height: 10px;
      }
      .rm-close:hover {
        color: #fff;
      }
      .rm-list {
        display: flex;
        flex-direction: column;
        max-height: 200px;
        overflow-y: auto;
      }
      .rm-item {
        padding: 8px 10px;
        font-family: "Consolas", monospace;
        font-size: 11px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #222;
        align-items: center;
      }
      .rm-item:last-child {
        border-bottom: none;
      }
      .rm-val-pos {
        color: var(--c-green);
        font-weight: bold;
      }
      .rm-val-neg {
        color: var(--c-red);
        font-weight: bold;
      }
      .rm-actions {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      /* HEATMAP */
      .heatmap-cont {
        background: #1a1a1a;
        border: 1px solid #333;
        padding: 10px;
        margin-bottom: 15px;
        overflow-x: auto;
      }
      .hm-title {
        font-size: 10px;
        font-weight: bold;
        color: #888;
        margin-bottom: 5px;
        text-transform: uppercase;
      }
      .hm-grid {
        display: grid;
        grid-template-rows: repeat(7, 10px);
        grid-auto-flow: column;
        gap: 2px;
        width: max-content;
      }
      .hm-day {
        width: 10px;
        height: 10px;
        background: #222;
        border: 1px solid #333;
        position: relative;
        cursor: help;
        border-radius: 1px;
      }
      .hm-win {
        background: #2e7d32;
        border-color: #1b5e20;
      }
      .hm-loss {
        background: #c62828;
        border-color: #b71c1c;
      }
      .hm-empty {
        background: #222;
      }

      /* NEW FEATURES */
      .simple-hidden {
        display: none !important;
      }

      .simple-mode-grid {
        grid-template-columns: 1fr !important;
      }
      /* TOGGLE SWITCH */
      .switch {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 20px;
      }
      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #444;
        transition: 0.4s;
        border-radius: 20px;
      }
      .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
      }
      input:checked + .slider {
        background-color: var(--accent);
      }
      input:checked + .slider:before {
        transform: translateX(16px);
      }
      
      .tilt-mode {
        box-shadow: inset 0 0 30px rgba(198, 40, 40, 0.3);
        border: 1px solid var(--c-red);
      }
      #spotlight {
        transition: opacity 0.3s;
      }