.hex-calculator[data-v-f766f639]{max-width:100%;padding:16px;font-family:var(--font-family-sans-serif)}h1[data-v-f766f639]{margin-bottom:12px}.description[data-v-f766f639]{margin-bottom:20px;color:var(--color-text-light);line-height:1.5}.examples-section[data-v-f766f639]{margin-bottom:20px}.section-label[data-v-f766f639]{font-weight:500;margin-right:10px}.examples-buttons[data-v-f766f639]{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.example-button[data-v-f766f639]{background-color:var(--color-background-soft);border:1px solid var(--color-border);border-radius:4px;padding:6px 12px;font-size:13px;cursor:pointer;transition:all .2s}.example-button[data-v-f766f639]:hover{border-color:var(--color-primary);background-color:rgba(var(--color-primary-rgb),.1)}.main-layout[data-v-f766f639]{display:flex;gap:20px;margin-bottom:20px}.left-panel[data-v-f766f639],.right-panel[data-v-f766f639]{width:50%}.calculator-container[data-v-f766f639]{background:var(--color-background-soft);border-radius:8px;box-shadow:0 2px 8px #0000000d;height:100%;display:flex;flex-direction:column}.section-header[data-v-f766f639]{background:var(--color-primary);color:#fff;padding:10px 16px;font-weight:500;display:flex;align-items:center}.section-header i[data-v-f766f639]{margin-right:8px}.input-list[data-v-f766f639]{padding:16px 16px 0}.input-row[data-v-f766f639]{display:flex;align-items:flex-start;margin-bottom:12px;position:relative}.row-number[data-v-f766f639]{width:24px;height:24px;background:var(--color-background-mute);color:var(--color-text-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;margin-right:8px;margin-top:8px;flex-shrink:0}.hex-input-wrapper[data-v-f766f639]{flex-grow:1}.hex-input[data-v-f766f639]{display:flex;align-items:center;border:1px solid var(--color-border);border-radius:4px;overflow:hidden}.hex-input .prefix[data-v-f766f639]{background:var(--color-background-mute);padding:8px;color:var(--color-text-light);border-right:1px solid var(--color-border);font-family:monospace;font-size:14px}.hex-input input[data-v-f766f639]{flex-grow:1;border:none;padding:8px;font-family:monospace;background-color:var(--color-background);color:var(--color-text);font-size:14px;outline:none}.error-message[data-v-f766f639]{color:#e74c3c;font-size:12px;margin-top:4px;display:flex;align-items:center}.error-message i[data-v-f766f639]{margin-right:4px;font-size:12px}.remove-button[data-v-f766f639]{background-color:#ff4d4f;border:none;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;margin-left:8px;align-self:center;transition:all .2s}.remove-button[data-v-f766f639]:hover{background-color:#ff7875;box-shadow:0 2px 4px #ff4d4f33}.input-actions[data-v-f766f639]{padding:0 16px;margin-bottom:12px}.add-button[data-v-f766f639]{background:transparent;border:1px dashed var(--color-border);color:var(--color-primary);padding:8px 16px;width:100%;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.add-button i[data-v-f766f639]{margin-right:6px}.add-button[data-v-f766f639]:hover{background:rgba(var(--color-primary-rgb),.05);border-color:var(--color-primary)}.input-toolbar[data-v-f766f639]{display:flex;justify-content:space-between;padding:0 16px 16px;flex-wrap:wrap;gap:8px}.tool-button[data-v-f766f639]{background-color:var(--color-background);border:1px solid var(--color-border);color:var(--color-text);padding:6px 12px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex:1;min-width:calc(50% - 4px)}.tool-button i[data-v-f766f639]{margin-right:6px}.tool-button[data-v-f766f639]:hover{background-color:var(--color-background-soft);color:var(--color-primary);border-color:var(--color-primary)}.calculate-wrapper[data-v-f766f639]{padding:16px;text-align:center;margin-top:auto}.calculate-button[data-v-f766f639]{background:var(--color-primary);color:#fff;border:none;padding:10px 24px;border-radius:4px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;transition:all .2s}.calculate-button i[data-v-f766f639]{margin-right:8px}.calculate-button[data-v-f766f639]:hover{background:var(--color-primary-dark, #3a8ee6);transform:translateY(-1px)}.calculate-button[data-v-f766f639]:disabled{background:#ccc;cursor:not-allowed;transform:none}.result-content[data-v-f766f639]{padding:16px;flex-grow:1;display:flex;flex-direction:column}.result-card[data-v-f766f639]{display:flex;align-items:center;background:var(--color-background);border:1px solid var(--color-border);border-radius:4px;padding:10px;margin-bottom:10px;position:relative}.result-label[data-v-f766f639]{width:70px;font-weight:500;color:var(--color-primary);flex-shrink:0}.result-value[data-v-f766f639]{flex-grow:1;font-family:monospace;padding:2px 8px;background:var(--color-background-mute);border-radius:2px;overflow-x:auto;white-space:nowrap}.copy-button[data-v-f766f639]{background:transparent;border:none;color:var(--color-text-light);padding:5px;margin-left:4px;cursor:pointer;transition:color .2s}.copy-button[data-v-f766f639]:hover{color:var(--color-primary)}.copied-indicator[data-v-f766f639]{color:var(--color-success, #42b983);font-size:12px;margin-left:4px}.no-result[data-v-f766f639]{padding:30px;text-align:center;color:var(--color-text-light);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;font-style:italic}.no-result i[data-v-f766f639]{font-size:24px;margin-bottom:10px}.bit-visualization[data-v-f766f639]{margin-top:auto;border-top:1px solid var(--color-border);padding-top:16px}.vis-header[data-v-f766f639]{font-weight:500;color:var(--color-primary);display:flex;align-items:center;margin-bottom:10px}.vis-header i[data-v-f766f639]{margin-right:6px}.bit-diagram[data-v-f766f639]{font-family:monospace}.scrollable[data-v-f766f639]{overflow-x:auto}.bit-row[data-v-f766f639]{display:flex;margin-bottom:8px;align-items:center}.bit-label[data-v-f766f639]{width:100px;text-align:right;padding-right:10px;font-weight:500;flex-shrink:0}.bit-cells[data-v-f766f639]{display:flex;flex-wrap:nowrap}.bit-cell[data-v-f766f639]{width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-right:2px;border-radius:2px;flex-shrink:0;font-size:12px}.bit-one[data-v-f766f639]{background:rgba(var(--color-primary-rgb),.15);color:var(--color-primary);border:1px solid var(--color-primary)}.bit-zero[data-v-f766f639]{background:var(--color-background-mute);color:var(--color-text-light);border:1px solid var(--color-border)}.result-bits[data-v-f766f639]{margin-top:10px;padding-top:10px;border-top:1px dashed var(--color-border)}.explanation-section[data-v-f766f639]{background:var(--color-background-soft);border-radius:8px;box-shadow:0 2px 8px #0000000d;overflow:hidden}.explanation-content[data-v-f766f639]{padding:16px}.explanation-content p[data-v-f766f639]{margin-top:0;line-height:1.5}.operation-code[data-v-f766f639]{margin-top:16px}.operation-code h4[data-v-f766f639]{margin-top:0;margin-bottom:8px;font-size:16px;color:var(--color-primary)}.operation-code pre[data-v-f766f639]{background:var(--color-background);border:1px solid var(--color-border);border-radius:4px;padding:12px;overflow-x:auto;font-size:14px}@media (max-width: 768px){.main-layout[data-v-f766f639]{flex-direction:column}.left-panel[data-v-f766f639],.right-panel[data-v-f766f639]{width:100%}.section-header[data-v-f766f639]{padding:8px 12px}.input-list[data-v-f766f639],.result-content[data-v-f766f639],.explanation-content[data-v-f766f639]{padding:12px}.bit-cell[data-v-f766f639]{width:20px;height:20px;font-size:11px}.bit-label[data-v-f766f639]{width:80px;font-size:12px}}.tool-article[data-v-f766f639]{margin-top:30px;background:var(--color-background-soft);border-radius:8px;box-shadow:0 2px 8px #0000000d;overflow:hidden}.article-section[data-v-f766f639]{padding:20px;border-bottom:1px solid var(--color-border)}.article-section[data-v-f766f639]:last-child{border-bottom:none}.article-section h3[data-v-f766f639]{margin-top:0;margin-bottom:16px;color:var(--color-primary);font-size:18px}.article-content p[data-v-f766f639]{margin-bottom:16px;line-height:1.6}.use-cases h4[data-v-f766f639],.advanced-tips h4[data-v-f766f639]{margin-top:20px;margin-bottom:12px;font-size:16px;color:var(--color-text)}.use-cases ul[data-v-f766f639],.advanced-tips ul[data-v-f766f639]{padding-left:20px;margin-bottom:0}.use-cases li[data-v-f766f639],.advanced-tips li[data-v-f766f639]{margin-bottom:12px;line-height:1.5}.faq-section[data-v-f766f639]{background-color:var(--color-background)}.faq-item[data-v-f766f639]{margin-bottom:20px;border:1px solid var(--color-border);border-radius:6px;overflow:hidden}.faq-question[data-v-f766f639]{display:flex;align-items:center;padding:12px 16px;background-color:var(--color-background-mute);cursor:pointer}.faq-question i[data-v-f766f639]{color:var(--color-primary);margin-right:10px;font-size:16px}.faq-question h4[data-v-f766f639]{margin:0;font-size:15px;font-weight:500;flex-grow:1}.faq-answer[data-v-f766f639]{padding:16px;background-color:var(--color-background);border-top:1px solid var(--color-border)}.faq-answer p[data-v-f766f639]{margin:0;line-height:1.5}.tutorial-steps[data-v-f766f639]{counter-reset:step-counter}.tutorial-step[data-v-f766f639]{display:flex;margin-bottom:20px}.step-number[data-v-f766f639]{width:30px;height:30px;background:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;flex-shrink:0;margin-right:15px;margin-top:2px}.step-content[data-v-f766f639]{flex-grow:1}.step-content h4[data-v-f766f639]{margin-top:0;margin-bottom:8px;font-size:16px}.step-content p[data-v-f766f639]{margin:0;line-height:1.5}@media (max-width: 768px){.article-section[data-v-f766f639]{padding:16px}.faq-question[data-v-f766f639]{padding:10px 12px}.faq-answer[data-v-f766f639]{padding:12px}}.result-toolbar button[data-v-f766f639]{background:transparent;border:none;color:var(--color-text-light);padding:8px 16px;cursor:pointer;transition:color .2s}.result-toolbar button[data-v-f766f639]:hover{color:var(--color-primary)}.button-container[data-v-f766f639]{padding:8px 16px;display:flex;justify-content:center}.button-grid[data-v-f766f639]{padding:8px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.action-button[data-v-f766f639]{border:none;border-radius:4px;padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.action-button i[data-v-f766f639]{margin-right:8px}.action-button[data-v-f766f639]:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.action-button[data-v-f766f639]:active{transform:translateY(0)}.remove-button[data-v-f766f639]{background-color:#ff4d4f;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;padding:6px 12px;height:36px;display:flex;align-items:center;justify-content:center;margin-left:8px;align-self:center;transition:all .2s;box-shadow:0 2px 4px #ff4d4f33}.remove-button[data-v-f766f639]:hover{background-color:#ff7875;box-shadow:0 4px 8px #ff4d4f4d;transform:translateY(-2px)}.add-button[data-v-f766f639]{background-color:#1890ff;color:#fff;width:100%;margin-bottom:8px}.add-button[data-v-f766f639]:hover{background-color:#40a9ff}.import-button[data-v-f766f639]{background-color:#52c41a;color:#fff}.import-button[data-v-f766f639]:hover{background-color:#73d13d}.save-button[data-v-f766f639]{background-color:#722ed1;color:#fff}.save-button[data-v-f766f639]:hover{background-color:#9254de}.copy-button[data-v-f766f639]{background-color:#faad14;color:#fff}.copy-button[data-v-f766f639]:hover{background-color:#ffc53d}.paste-button[data-v-f766f639]{background-color:#13c2c2;color:#fff}.paste-button[data-v-f766f639]:hover{background-color:#36cfc9}.calculate-button[data-v-f766f639]{background-color:#2f54eb;color:#fff;width:100%;font-size:16px;padding:12px 24px;margin-top:8px}.calculate-button[data-v-f766f639]:hover{background-color:#597ef7}.calculate-button[data-v-f766f639]:disabled{background-color:#d9d9d9;color:#00000040;cursor:not-allowed;box-shadow:none;transform:none}.result-toolbar[data-v-f766f639]{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-toolbar .action-button[data-v-f766f639]{background-color:#2f54eb;color:#fff}.result-toolbar .action-button[data-v-f766f639]:hover{background-color:#597ef7}