:root {
     --primary: #4361ee;
     --secondary: #7209b7;
     --dark: #2d3436;
     --light: #f8f9fa;
     --success: #2ecc71;
     --border-radius: 12px;
     --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', sans-serif;
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 20px;
     color: var(--dark);
     line-height: 1.6;

     background-image: url('https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     /* ✅ No crop, full image */
     background-attachment: fixed;
 }

 .container {
     width: 100%;
     max-width: 800px;
     background: white;
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     overflow: hidden;
     padding: 40px;
 }

 .header {
     text-align: center;
     margin-bottom: 30px;
 }

 .header h1 {
     font-size: 2.5rem;
     background: linear-gradient(90deg, var(--primary), var(--secondary));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     margin-bottom: 10px;
 }

 .subtitle {
     color: #6c757d;
     font-size: 1.1rem;
 }

 .input-section {
     background: #f8f9fa;
     border-radius: var(--border-radius);
     padding: 30px;
     margin-bottom: 30px;
 }

 .input-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     margin-bottom: 20px;
 }

 @media (max-width: 768px) {
     .input-grid {
         grid-template-columns: 1fr;
     }
 }

 .input-group {
     position: relative;
 }

 .input-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: 500;
     color: var(--dark);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .input-group input {
     width: 100%;
     padding: 16px 20px;
     border: 2px solid #e9ecef;
     border-radius: 10px;
     font-size: 1.1rem;
     font-weight: 500;
     transition: all 0.3s ease;
     outline: none;
 }

 .input-group input:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
 }

 .input-group input::placeholder {
     color: #adb5bd;
 }

 .submit-btn {
     width: 100%;
     padding: 18px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     color: white;
     border: none;
     border-radius: 10px;
     font-size: 1.2rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     transition: all 0.3s ease;
 }

 .submit-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 20px rgba(67, 97, 238, 0.2);
 }

 .result-section {
     background: #f8f9fa;
     border-radius: var(--border-radius);
     padding: 30px;
     display: none;
 }

 .result-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
 }

 .result-header h2 {
     color: var(--primary);
     font-size: 1.8rem;
 }

 .copy-btn {
     background: var(--success);
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 8px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 500;
 }

 .table-container {
     background: white;
     border-radius: 10px;
     padding: 25px;
     border-left: 4px solid var(--primary);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     max-height: 400px;
     overflow-y: auto;
 }

 .table-title {
     color: var(--secondary);
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 2px dashed #e9ecef;
     font-size: 1.4rem;
 }

 .table-content {
     font-family: 'Courier New', monospace;
     font-size: 1.2rem;
     line-height: 2;
 }

 .table-row {
     padding: 8px 0;
     border-bottom: 1px solid #f8f9fa;
     display: flex;
     justify-content: space-between;
     padding: 10px 15px;
     border-radius: 8px;
     margin-bottom: 5px;
     background: #f8f9fa;
     transition: all 0.3s ease;
 }

 .table-row:hover {
     background: #e9ecef;
     transform: translateX(5px);
 }

 .table-row:nth-child(even) {
     background: #f1f3f5;
 }

 .highlight {
     color: var(--primary);
     font-weight: 600;
 }

 /* Remove number input arrows */
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }

 input[type="number"] {
     -moz-appearance: textfield;
     appearance: textfield;
 }

 .footer {
     text-align: center;
     margin-top: 30px;
     color: #6c757d;
     font-size: 0.9rem;
 }

 .range-info {
     background: var(--primary);
     color: white;
     padding: 12px 20px;
     border-radius: 8px;
     margin-bottom: 20px;
     font-weight: 500;
     display: flex;
     align-items: center;
     gap: 10px;
 }