.context-variables-content{padding:0}.context-variables-header{margin-bottom:40px}.context-variables-header__badge-container{align-items:center;gap:8px;margin-bottom:16px;display:flex}.context-variables-header__badge{margin-bottom:0}.context-variables-header__title{background:linear-gradient(135deg,var(--header-title-gradient));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 14px;font-size:36px;font-weight:700;line-height:42px}.performance-template--light .context-variables-header__title{--header-title-gradient:#1e293b 0%,#4338ca 50%,#7c3aed 100%}.performance-template--dark .context-variables-header__title{--header-title-gradient:#fff 0%,#a5f3fc 50%,#c084fc 100%}.context-variables-header__description{margin:0;font-size:16px;line-height:24px}.performance-template--light .context-variables-header__description{color:#334155}.performance-template--dark .context-variables-header__description{color:#ffffffb3}.context-variables-header__add-btn{border-radius:10px;flex-shrink:0;align-items:center;gap:8px;margin-top:40px;padding:12px 20px;font-size:16px;font-weight:600;display:flex}.performance-template--light .context-variables-header__add-btn{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#10b981;box-shadow:0 4px 16px #10b9814d}.performance-template--light .context-variables-header__add-btn:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.performance-template--dark .context-variables-header__add-btn{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#34d399}.performance-template--dark .context-variables-header__add-btn:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%)}.context-variables-table-container{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid;border-radius:16px;overflow:hidden}.performance-template--light .context-variables-table-container{background:#ffffff80;border-color:#ffffffb3;box-shadow:0 8px 24px #0000001f,0 4px 12px #0000000f}.performance-template--dark .context-variables-table-container{background:#ffffff1a;border-color:#fff3}.context-variables-table{width:100%}.context-variables-table__header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid;grid-template-columns:1fr auto;gap:24px;padding:16px 24px 12px;display:grid}.performance-template--light .context-variables-table__header{background:linear-gradient(135deg,#3b82f61a 0%,#10b9811a 100%);border-color:#ffffff4d}.performance-template--dark .context-variables-table__header{background:linear-gradient(135deg,#3b82f626 0%,#10b98126 100%);border-color:#ffffff1a}.context-variables-table__header-cell{text-transform:uppercase;letter-spacing:.05em;font-size:14px;font-weight:600}.performance-template--light .context-variables-table__header-cell{color:#475569}.performance-template--dark .context-variables-table__header-cell{color:#cbd5e1}.context-variables-table__header-cell--variable{text-align:left}.context-variables-table__header-cell--action{text-align:center;min-width:120px}.context-variables-table__body{flex-direction:column;display:flex}.context-variables-table__row{border-bottom:1px solid;grid-template-columns:1fr auto;gap:24px;padding:20px 24px;transition:all .2s;display:grid}.performance-template--light .context-variables-table__row{border-color:#ffffff4d}.performance-template--light .context-variables-table__row:hover{background:#fff3}.performance-template--light .context-variables-table__row:last-child{border-bottom:none}.performance-template--dark .context-variables-table__row{border-color:#ffffff1a}.performance-template--dark .context-variables-table__row:hover{background:#ffffff0d}.performance-template--dark .context-variables-table__row:last-child{border-bottom:none}.context-variables-table__cell{align-items:center;display:flex}.context-variables-table__cell--variable{justify-content:flex-start;gap:12px}.context-variables-table__cell--action{flex-direction:column;justify-content:center;gap:8px;min-width:120px}.context-variables-table__variable-name{font-size:16px;font-weight:500}.performance-template--light .context-variables-table__variable-name{color:#1e293b}.performance-template--dark .context-variables-table__variable-name{color:#fff}.context-variables-action-btn{justify-content:center;align-items:center;gap:6px;min-width:100px;display:flex}.context-variables-btn-spinner{width:14px;height:14px;animation:1s linear infinite spin}.context-variables-loading{flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:60px;display:flex}.context-variables-loading__icon{width:32px;height:32px;animation:1s linear infinite spin}.performance-template--light .context-variables-loading{color:#64748b}.performance-template--dark .context-variables-loading{color:#fff9}.context-variables-empty{text-align:center;justify-content:center;align-items:center;padding:60px;display:flex}.performance-template--light .context-variables-empty{color:#64748b}.performance-template--dark .context-variables-empty{color:#fff9}.context-variables-error{border-radius:4px;align-items:center;gap:6px;margin-bottom:8px;padding:4px 8px;font-size:12px;display:flex}.performance-template--light .context-variables-error{color:#dc2626;background:#ef44441a;border:1px solid #ef444433}.performance-template--dark .context-variables-error{color:#fca5a5;background:#ef444426;border:1px solid #ef44444d}.context-variables-error svg{width:12px;height:12px}.context-variables-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#00000080;position:fixed;inset:0}.context-variables-modal{z-index:101;width:calc(100% - 32px);max-width:480px;margin:0!important;position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important}.context-variables-modal__content{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid;border-radius:16px;padding:32px}.performance-template--light .context-variables-modal__content{background:#fffffff2;border-color:#fffc;box-shadow:0 20px 40px #00000026,0 8px 16px #0000001a}.performance-template--dark .context-variables-modal__content{background:#0f172af2;border-color:#fff3}.context-variables-modal__title{margin:0 0 12px;font-size:24px;font-weight:700}.performance-template--light .context-variables-modal__title{color:#1e293b}.performance-template--dark .context-variables-modal__title{color:#fff}.context-variables-modal__description{margin:0 0 24px;font-size:16px;line-height:24px}.performance-template--light .context-variables-modal__description{color:#64748b}.performance-template--dark .context-variables-modal__description{color:#ffffffb3}.context-variables-modal__field{margin-bottom:20px}.context-variables-modal__input{border:1px solid;border-radius:10px;outline:none;width:100%;padding:12px 16px;font-size:16px;transition:all .2s}.performance-template--light .context-variables-modal__input{color:#1e293b;background:#fffc;border-color:#fff9;box-shadow:0 2px 8px #0000001a}.performance-template--light .context-variables-modal__input:focus{background:#ffffffe6;border-color:#3b82f680;box-shadow:0 4px 12px #00000026,0 0 0 3px #3b82f61a}.performance-template--light .context-variables-modal__input::placeholder{color:#94a3b8}.performance-template--dark .context-variables-modal__input{color:#fff;background:#ffffff1a;border-color:#fff3}.performance-template--dark .context-variables-modal__input:focus{background:#ffffff26;border-color:#60a5fa80}.performance-template--dark .context-variables-modal__input::placeholder{color:#ffffff80}.context-variables-modal__error{border-radius:8px;align-items:center;gap:8px;margin-bottom:20px;padding:12px 16px;font-size:14px;display:flex}.performance-template--light .context-variables-modal__error{color:#dc2626;background:#ef44441a;border:1px solid #ef444433}.performance-template--dark .context-variables-modal__error{color:#fca5a5;background:#ef444426;border:1px solid #ef44444d}.context-variables-modal__error svg{width:16px;height:16px}.context-variables-modal__actions{justify-content:flex-end;gap:12px;display:flex}.context-variables-modal__cancel-btn,.context-variables-modal__confirm-btn{border-radius:10px;justify-content:center;align-items:center;gap:8px;min-width:120px;padding:12px 24px;font-size:16px;font-weight:600;display:flex}.performance-template--light .context-variables-modal__cancel-btn{color:#6b7280;background:0 0;border-color:#6b72804d}.performance-template--light .context-variables-modal__cancel-btn:hover{background:#6b72801a;border-color:#6b728066}.performance-template--dark .context-variables-modal__cancel-btn{color:#9ca3af;background:0 0;border-color:#9ca3af4d}.performance-template--dark .context-variables-modal__cancel-btn:hover{background:#9ca3af1a;border-color:#9ca3af66}.performance-template--light .context-variables-modal__confirm-btn{color:#fff;background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);border-color:#3b82f6}.performance-template--light .context-variables-modal__confirm-btn:hover:not(:disabled){background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%)}.performance-template--dark .context-variables-modal__confirm-btn{color:#fff;background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);border-color:#60a5fa}.performance-template--dark .context-variables-modal__confirm-btn:hover:not(:disabled){background:linear-gradient(135deg,#2563eb 0%,#1e40af 100%)}.context-variables-modal__confirm-btn:disabled{opacity:.6;cursor:not-allowed}.context-variables-modal__spinner{width:16px;height:16px;animation:1s linear infinite spin}@media (max-width:1200px){.context-variables-header__add-btn{align-self:flex-start}}@media (max-width:768px){.context-variables-header__title{font-size:28px;line-height:34px}.context-variables-header__description{font-size:14px}.context-variables-table__header,.context-variables-table__row{grid-template-columns:1fr;gap:12px;padding:16px}.context-variables-table__cell--action{justify-content:flex-start;min-width:auto}.context-variables-modal{margin:0 8px}.context-variables-modal__content{padding:24px}.context-variables-modal__actions{flex-direction:column}.context-variables-modal__cancel-btn,.context-variables-modal__confirm-btn{width:100%}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
