.variables-tab{padding:24px;max-width:1000px;margin:0 auto;background:#fafbfc;min-height:100vh;display:block}.variables-header{margin-bottom:32px;text-align:center;display:block}.variables-header h3{font-size:2.2rem;font-weight:700;color:#1a202c;margin:0 0 12px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.variables-header p{font-size:1.1rem;color:#64748b;line-height:1.6;max-width:600px;margin:0 auto}.variables-actions{margin-bottom:40px;margin-top:0;display:block;width:100%}.add-variable-form{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 20px #00000014;border:1px solid #e2e8f0;position:relative;overflow:hidden}.add-variable-form:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2)}.add-variable-form h4{font-size:1.5rem;font-weight:600;color:#1a202c;margin:0 0 24px;display:flex;align-items:center;gap:12px}.add-variable-form h4:before{content:"➕";font-size:1.2rem}.form-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:16px;align-items:end}.variable-name-input,.variable-value-input,.variable-type-select{padding:14px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all .3s ease;background:#1a202c;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.variable-name-input:focus,.variable-value-input:focus,.variable-type-select:focus{outline:none;border-color:#667eea;background:#2d3748;color:#fff;box-shadow:0 0 0 4px #667eea1a;transform:translateY(-2px)}.variable-name-input::placeholder,.variable-value-input::placeholder{color:#a0aec0;font-style:italic;opacity:.8}.btn-add-variable{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 28px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #667eea4d;white-space:nowrap;min-height:52px;display:flex;align-items:center;gap:8px}.btn-add-variable:before{content:"✨";font-size:1.1rem}.btn-add-variable:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 25px #667eea66}.btn-add-variable:active{transform:translateY(-1px)}.btn-add-variable:disabled{opacity:.6;cursor:not-allowed;transform:none}.variable-type-info{margin-top:16px;padding:16px 20px;background:linear-gradient(135deg,#f0f4ff,#e0e7ff);border-radius:12px;border-left:4px solid #667eea;box-shadow:0 2px 8px #667eea1a}.type-description{margin:0;font-size:.95rem;color:#4a5568;font-style:italic;line-height:1.5}.variables-list h4{font-size:1.6rem;font-weight:600;color:#1a202c;margin:0 0 24px;display:flex;align-items:center;gap:12px}.variables-list h4:before{content:"📊";font-size:1.3rem}.variables-grid{display:grid;gap:20px}.variable-item{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:24px;transition:all .3s ease;box-shadow:0 2px 8px #0000000a;position:relative;overflow:hidden}.variable-item:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);opacity:0;transition:opacity .3s ease}.variable-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000001f;border-color:#cbd5e0}.variable-item:hover:before{opacity:1}.variable-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.variable-name{display:flex;align-items:center;gap:12px}.variable-label{font-size:1.3rem;font-weight:700;color:#667eea;font-family:JetBrains Mono,Fira Code,Courier New,monospace;background:linear-gradient(135deg,#f0f4ff,#e0e7ff);padding:8px 16px;border-radius:8px;border:1px solid #c7d2fe;box-shadow:0 2px 4px #667eea1a}.variable-actions{display:flex;gap:8px}.btn-edit-variable,.btn-delete-variable{padding:8px 16px;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px}.btn-edit-variable{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px #10b9814d}.btn-edit-variable:before{content:"✏️";font-size:.9rem}.btn-edit-variable:hover{transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.btn-delete-variable{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 8px #ef44444d}.btn-delete-variable:before{content:"🗑️";font-size:.9rem}.btn-delete-variable:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.variable-details{margin-top:16px}.variable-info{display:grid;gap:12px}.variable-info-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:10px;border:1px solid #e2e8f0;transition:all .3s ease}.variable-info-item:hover{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);transform:translate(4px)}.info-label{font-weight:600;color:#64748b;font-size:.95rem;display:flex;align-items:center;gap:8px}.info-label:before{content:"📝";font-size:.9rem}.info-value{font-weight:700;color:#1a202c;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:1rem;background:#fff;padding:4px 8px;border-radius:6px;border:1px solid #e2e8f0}.variable-item.inventory-variable{border-left:4px solid #10b981;background:linear-gradient(135deg,#f0fdf4,#ecfdf5)}.variable-item.inventory-variable .variable-label{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.variable-item.inventory-variable .variable-info-item{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border-color:#a7f3d0}.variable-item.inventory-variable .variable-info-item:hover{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.variable-item.inventory-variable .info-label:before{content:"🎒"}.variable-item.task-variable{border-left:4px solid #8b5cf6;background:linear-gradient(135deg,#faf5ff,#f3e8ff)}.variable-item.task-variable .variable-label{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.variable-item.task-variable .variable-info-item{background:linear-gradient(135deg,#faf5ff,#f3e8ff);border-color:#c4b5fd}.variable-item.task-variable .variable-info-item:hover{background:linear-gradient(135deg,#f3e8ff,#e9d5ff)}.variable-item.task-variable .info-label:before{content:"📋"}.edit-form{background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:12px;padding:20px;border:2px solid #f59e0b;margin-top:16px;position:relative}.edit-form:before{content:"✏️ Editing Variable";position:absolute;top:-12px;left:16px;background:#f59e0b;color:#fff;padding:4px 12px;border-radius:6px;font-size:.8rem;font-weight:600}.edit-form .form-group{margin-bottom:16px}.edit-form .form-group label{display:block;margin-bottom:8px;font-weight:600;color:#92400e;font-size:.95rem}.edit-input{width:100%;padding:12px 16px;border:2px solid #f59e0b;border-radius:8px;font-size:1rem;background:#1a202c;color:#fff;transition:all .3s ease}.edit-input:focus{outline:none;border-color:#d97706;background:#2d3748;color:#fff;box-shadow:0 0 0 4px #f59e0b1a}.edit-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.btn-save,.btn-cancel{padding:10px 20px;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px}.btn-save{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px #10b9814d}.btn-save:before{content:"💾";font-size:.9rem}.btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b98166}.btn-save:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-cancel{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;box-shadow:0 2px 8px #6b72804d}.btn-cancel:before{content:"❌";font-size:.9rem}.btn-cancel:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6b728066}.no-variables{text-align:center;padding:80px 40px;background:#fff;border-radius:16px;border:2px dashed #cbd5e0;margin-top:20px}.no-variables p{font-size:1.2rem;margin:0 0 24px;color:#64748b;font-weight:500}.no-variables:before{content:"📊";font-size:4rem;display:block;margin-bottom:20px;opacity:.6}.usage-example{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-radius:12px;padding:24px;border:1px solid #0ea5e9;margin-top:24px;text-align:left}.usage-example h4{margin:0 0 16px;color:#0c4a6e;font-size:1.2rem;display:flex;align-items:center;gap:8px}.usage-example h4:before{content:"💡";font-size:1.1rem}.usage-example p{margin:8px 0;font-size:1rem;color:#0c4a6e;line-height:1.6}.usage-example code{background:#fff;padding:4px 8px;border-radius:6px;font-family:JetBrains Mono,Fira Code,Courier New,monospace;color:#0ea5e9;font-weight:700;border:1px solid #bae6fd}.form-field{margin-bottom:1rem}.form-label{display:block;margin-bottom:.5rem;font-weight:600;color:#333}.required{color:#e53e3e;margin-left:.25rem}.form-input{width:100%;padding:.75rem;border:2px solid #e2e8f0;border-radius:.375rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-input:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px #4299e11a}.form-input.error{border-color:#e53e3e;box-shadow:0 0 0 3px #e53e3e1a}.form-input:disabled{background-color:#f7fafc;cursor:not-allowed;opacity:.6}.form-error{margin-top:.5rem;color:#e53e3e;font-size:.875rem;font-weight:500}.form-group{margin-bottom:1rem}.form-row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.form-row>*{flex:1;min-width:200px}.form-input[type=checkbox],.form-input[type=radio]{width:auto;margin-right:.5rem}.form-input[rows]{resize:vertical;min-height:80px}.form-input select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.5rem}