:root {
            --se-green: #3dcd58;
            --se-black: #000000;
            --white: #ffffff;
            --surface: #f3f4f7;
            --border: #dfe1e6;
            --text-secondary: #4a5060;
        }

        body { font-family: 'Roboto', sans-serif; background: #cfd8dc; margin: 0; padding: 20px; display: flex; justify-content: center; }

        /* --- APP CONTAINER --- */
        .app-container { width: 100%; max-width: 1200px; background: var(--white); box-shadow: 0 25px 50px rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden; border-top: 8px solid var(--se-green); position: relative;margin-bottom: 100px; }
        header { display: flex; justify-content: space-between; align-items: center; padding: 18px 30px; border-bottom: 1px solid #eee; }
        .logo { font-family: 'Roboto Condensed'; font-size: 26px; text-transform: uppercase; font-weight: 700; color: #000; letter-spacing: -1px; }
        .logo span { color: var(--se-green); }

        /* --- SELECTOR --- */
        .selector-box { background: var(--se-black); padding: 40px 0; text-align: center; color: white; }
        .selector-flex { display: flex; align-items: center; justify-content: center; gap: 40px; }
        .side-img { width: 100px; height: 100px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px; border: 1px solid #333; object-fit: contain; }
        .hp-dropdown { background: #1a1a1a; color: white; border: 2px solid var(--se-green); padding: 12px 15px; border-radius: 4px; width: 280px; font-size: 15px; font-family: 'JetBrains Mono'; cursor: pointer; }

        /* --- DATA GRID --- */
        .comparison-table { display: grid; grid-template-columns: 1fr 240px 240px; background: #eee; gap: 1px; }
        .th { background: var(--se-black); color: white; padding: 15px; font-family: 'Roboto Condensed'; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; text-align: center; border-bottom: 4px solid var(--se-green); }
        .th.label-col { text-align: left; background: #e0e0e0; color: #333; border-bottom: 4px solid #ccc; padding-left: 30px; }

        /* --- GROUPING UI --- */
        .group-container {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr 240px 240px;
            gap: 1px;
            background: #ddd;
            margin: 15px 25px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #eee;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .group-container:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); border-color: var(--se-green); }
        .group-header { grid-column: 1 / -1; background: #f0f0f0; color: #666; font-size: 10px; font-weight: 800; padding: 10px 25px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid #eee; transition: 0.3s; }
        .group-container:hover .group-header { background: var(--se-green); color: white; }

        .td-label { background: #333; color: white; padding: 15px 30px; font-size: 11px; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; font-weight: 500; }
        .td-value { background: white; padding: 12px; text-align: center; font-family: 'JetBrains Mono'; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
        
        .indicator-arrow { width: 14px; height: 14px; opacity: 0.2; transition: 0.3s; }
        .group-container:hover .indicator-arrow { opacity: 1; color: var(--se-green); transform: translateX(5px); }

        .footer-note { padding: 20px 30px; background: #f9f9f9; font-size: 11px; color: #888; border-top: 1px solid #eee; font-style: italic; }

        @media (max-width: 800px) {
            .comparison-table, .group-container { grid-template-columns: 1fr 100px 100px; }
            .side-img { display: none; }
        }


                .fixed-back-btn {
            position: fixed; top: 30px; left: 30px; width: 50px; height: 50px;
            background: #ffffff; border: 2px solid var(--se-green); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: var(--se-green); text-decoration: none; z-index: 2500;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .fixed-back-btn:hover { background: var(--se-green); color: #fff; transform: scale(1.1) rotate(-10deg); box-shadow: 0 8px 20px rgba(61, 205, 88, 0.4); }

/* ── Inline-CSS refactor additions ── */
#table-body { display: contents; }
.row-contents { display: contents; }
.tool-subtitle { font-weight: 700; font-size: 11px; color: #999; }
.selector-label { color: var(--se-green); font-size: 14px; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 12px; font-weight: 700; }




  .footer-note.add-width {
    /* 1. Make it span across all 3 columns of the table */
    grid-column: 1 / span 3;
    
    /* 2. Adjust width to fit the container (instead of 180%) */
    width: 100%;
    
    /* 3. Ensure padding doesn't add to the width */
    box-sizing: border-box;
    
    /* 4. Optional: adjust font-size or padding for better fit */
    padding: 15px 20px;
  }