:root{--primary-color-base: 76, 175, 80;--error-color-base: 187, 64, 64;--warning-color-base: 225, 129, 77;--primary-opacity: .8;--secondary-opacity: .55;--third-opacity: .12;--shadow-opacity: .2;--bg: #f8fafc;--surface: #ffffff;--line: #e5e7eb;--muted: #6b7280;--primary-color: rgba(var(--primary-color-base), var(--primary-opacity));--primary-color-light: rgba(var(--primary-color-base), var(--secondary-opacity));--primary-color-soft: rgba(var(--primary-color-base), var(--third-opacity));--primary-color-shadow: rgba(var(--primary-color-base), var(--shadow-opacity));--secondary-color: #ffffff;--error-color: rgb(var(--error-color-base));--error-color-shadow: rgba(var(--error-color-base), var(--shadow-opacity));--warning-color: rgb(var(--warning-color-base));--primary-text-color: #0f172a;--secondary-text-color: #fff;--third-text-color: var(--muted);--padding-xs: 6px;--padding-sm: 8px;--padding-md: 12px;--padding-lg: 16px;--primary-border: 1px solid var(--line);--error-border: 1px solid #bb4040;--container-border-radius: 12px;--input-border-radius: 10px;--input-font-size: 14px;--btn-font-size: 14px}body{margin:0;color:var(--primary-text-color);background-color:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4{margin:0 0 8px;font-weight:800}p{margin:0 0 8px}.x-d-none{display:none!important}.container{max-width:1100px;margin:24px auto;padding:0 16px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.block{background:var(--surface);border:1px dashed var(--line);padding:14px;border-radius:12px}.x-w-50\%{width:50%!important}.x-h-100px{height:100px!important}.x-container{width:100%;border:1px solid var(--line);border-radius:var(--container-border-radius);overflow:hidden;box-shadow:0 2px 8px #0206170f}.text-gray{color:var(--muted)}.x-input,input[type=text],input[type=email],input[type=number],input[type=tel],input[type=search],select,textarea{width:100%;padding:10px 14px;font-size:var(--input-font-size);border:var(--primary-border);border-radius:var(--input-border-radius);background-color:var(--surface);color:var(--primary-text-color);min-height:40px;box-sizing:border-box;outline:none;transition:box-shadow .15s ease,border-color .15s ease,background .15s ease}.x-input:hover,input:hover,select:hover,textarea:hover{background:#fff}.x-input:focus,input:focus,select:focus,textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color-soft)}.x-select{width:100%;padding:var(--padding-sm) var(--padding-lg);font-size:var(--input-font-size);border:var(--primary-border);border-radius:var(--input-border-radius);background-color:var(--secondary-color);color:var(--primary-text-color);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41.59L6 5.17 10.59.59 12 2l-6 6-6-6z' fill='%23000'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.x-select:hover{filter:brightness(.9);cursor:pointer}.x-select:focus{outline:none;border-color:var(--primary-color-lighter);box-shadow:var(--input-focus-shadow)}.x-select.x-error{border:var(--error-border)}.x-select:focus.x-error{box-shadow:var(--input-focus-error-shadow)}.x-btn{width:100%;margin-top:16px;padding:8px 16px;background:var(--primary-color);color:var(--secondary-color);border:none;border-radius:var(--input-border-radius);font-size:var(--btn-font-size);cursor:pointer;transition:filter .2s}.x-btn.x-warning{background-color:var(--warning-color)}.x-btn:hover:enabled{filter:brightness(.9)}.x-btn:disabled{background:#ccc;color:#666;cursor:not-allowed;filter:none}.x-table{display:flex;flex-direction:column;border-radius:var(--container-border-radius);overflow:hidden;width:100%}.x-row{display:flex;color:var(--primary-text-color)}.x-row:hover:not(:first-child){background-color:var(--primary-color-soft)}.x-cell{flex:1;padding:var(--padding-sm) var(--padding-lg);border-bottom:var(--primary-border);display:flex;align-items:center}.x-header{background-color:var(--primary-color);color:var(--secondary-text-color);font-weight:700;text-align:left}.x-row:last-child,.x-row:first-child .x-cell{border-bottom:none}table.x-table{width:100%;border-collapse:collapse;border-radius:var(--container-border-radius);overflow:hidden;background:var(--surface)}table.x-table thead th{font-weight:700;color:var(--primary-text-color);background:#f8fafc}table.x-table th,table.x-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left}table.x-table tbody tr:nth-child(2n){background:#fcfcfd}table.x-table tbody tr:hover{background:rgba(var(--primary-color-base),.04)}.x-accordion{display:flex;flex-direction:column;position:relative;box-sizing:border-box}.x-accordion-header{background:var(--primary-color);padding:var(--padding-md) var(--padding-lg);font-weight:600;font-size:2rem;color:var(--secondary-color);display:flex;justify-content:space-between;align-items:center}.x-accordion-body{width:100%;padding:16px 20px}.x-badge{display:inline-block;min-width:24px;padding:2px 8px;border-radius:999px;background:rgba(var(--primary-color-base),.12);color:var(--primary-text-color);text-align:center;font-weight:700;font-size:12px}.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}.x-accordion-toggle-button{padding:2px 8px;border:1px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer}.x-accordion-toggle-button:hover{background:#fff}.x-accordion.x-collapsed .x-accordion-body{display:none}.x-accordion-toggle-button{color:var(--secondary-color);background:none;border:none;font-size:1.5rem;cursor:pointer;margin-left:8px}.loader-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.loader{width:24px;height:24px;border:3px solid #ccc;border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.loader-text{cursor:wait}@keyframes spin{to{transform:rotate(360deg)}}.x-error-hint{border:var(--error-border);background:#fff5f5;color:var(--error-color);border-radius:var(--container-border-radius);padding:10px 12px}
