.conversion-type{background:var(--bg-secondary,#f5f5f5);padding:20px;border-radius:8px;margin-bottom:24px;border:1px solid var(--border-color,#e0e0e0)}.conversion-type label{display:block;font-weight:600;margin-bottom:12px;color:var(--text-primary,#333)}.type-buttons{display:flex;gap:12px;flex-wrap:wrap}.type-btn{padding:10px 20px;border:2px solid var(--border-color,#d0d0d0);background:white;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-primary,#666);transition:all 0.3s ease;min-width:120px;text-align:center}.type-btn:hover{border-color:var(--primary-color,#2c3e50);color:var(--primary-color,#2c3e50);background:var(--bg-secondary,#f9f9f9)}.type-btn.active{background:var(--primary-color,#2c3e50);color:white;border-color:var(--primary-color,#2c3e50)}[data-theme="dark"] .type-btn{background:var(--bg-dark,#2c2c2c);color:var(--text-light,#e0e0e0);border-color:var(--border-dark,#404040)}[data-theme="dark"] .type-btn:hover{background:var(--bg-dark-hover,#373737)}[data-theme="dark"] .conversion-type{background:var(--bg-dark-secondary,#1e1e1e);border-color:var(--border-dark,#404040)}.input-group{margin-bottom:24px}.input-group label{display:block;font-weight:600;margin-bottom:8px;color:var(--text-primary,#333)}.input-wrapper{position:relative}.input-wrapper input{width:100%;padding:14px 16px;border:2px solid var(--border-color,#e0e0e0);border-radius:6px;font-size:16px;transition:all 0.3s ease;background:white;color:var(--text-primary,#333)}.input-wrapper input:focus{outline:none;border-color:var(--primary-color,#2c3e50);box-shadow:0 0 0 3px rgba(44,62,80,0.1)}.input-wrapper input.error{border-color:#ff6b6b;background:#fff5f5}.input-hint{display:block;font-size:12px;color:var(--text-secondary,#999);margin-top:6px}[data-theme="dark"] .input-wrapper input{background:var(--bg-dark,#2c2c2c);color:var(--text-light,#e0e0e0);border-color:var(--border-dark,#404040)}[data-theme="dark"] .input-wrapper input:focus{border-color:var(--primary-color,#4a9eff);box-shadow:0 0 0 3px rgba(74,158,255,0.1)}.output-group{margin-bottom:24px}.output-group label{display:block;font-weight:600;margin-bottom:8px;color:var(--text-primary,#333)}.output-wrapper{position:relative;display:flex;flex-direction:column;gap:10px}.output-wrapper textarea{width:100%;min-height:120px;padding:14px 16px;border:2px solid var(--border-color,#e0e0e0);border-radius:6px;font-size:16px;font-family:'Courier New',monospace;resize:vertical;background:white;color:var(--text-primary,#333);line-height:1.6}.output-wrapper textarea:focus{outline:none;border-color:var(--primary-color,#2c3e50);box-shadow:0 0 0 3px rgba(44,62,80,0.1)}[data-theme="dark"] .output-wrapper textarea{background:var(--bg-dark,#2c2c2c);color:var(--text-light,#e0e0e0);border-color:var(--border-dark,#404040)}[data-theme="dark"] .output-wrapper textarea:focus{border-color:var(--primary-color,#4a9eff);box-shadow:0 0 0 3px rgba(74,158,255,0.1)}.copy-btn{align-self:flex-end;padding:8px 16px;font-size:14px;white-space:nowrap}.operations{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap}.operations .btn{flex:1;min-width:120px}.usage-guide{background:var(--bg-secondary,#f5f5f5);padding:24px;border-radius:8px;margin-bottom:32px;border:1px solid var(--border-color,#e0e0e0)}.usage-guide h3{margin:0 0 16px 0;color:var(--text-primary,#333);font-size:18px}.guide-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.guide-item{background:white;padding:16px;border-radius:6px;border-left:4px solid var(--primary-color,#2c3e50)}.guide-item h4{margin:0 0 8px 0;color:var(--primary-color,#2c3e50);font-size:14px}.guide-item p{margin:0;color:var(--text-secondary,#666);font-size:13px;line-height:1.6}[data-theme="dark"] .usage-guide{background:var(--bg-dark-secondary,#1e1e1e);border-color:var(--border-dark,#404040)}[data-theme="dark"] .guide-item{background:var(--bg-dark,#2c2c2c)}[data-theme="dark"] .guide-item h4{color:var(--primary-color,#4a9eff)}[data-theme="dark"] .guide-item p{color:var(--text-secondary-dark,#999)}.examples{background:var(--bg-secondary,#f5f5f5);padding:24px;border-radius:8px;border:1px solid var(--border-color,#e0e0e0)}.examples h3{margin:0 0 20px 0;color:var(--text-primary,#333);font-size:18px}.example-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.example-item{background:white;padding:16px;border-radius:6px;border:2px solid var(--border-color,#e0e0e0);cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:space-between;gap:8px}.example-item:hover{border-color:var(--primary-color,#2c3e50);box-shadow:0 4px 12px rgba(44,62,80,0.1);transform:translateY(-2px)}.example-input{font-weight:600;color:var(--primary-color,#2c3e50);min-width:60px;text-align:center}.example-arrow{color:var(--text-secondary,#ccc);font-size:12px}.example-output{flex:1;color:var(--text-primary,#333);font-size:14px;text-align:right;word-break:break-all}[data-theme="dark"] .examples{background:var(--bg-dark-secondary,#1e1e1e);border-color:var(--border-dark,#404040)}[data-theme="dark"] .example-item{background:var(--bg-dark,#2c2c2c);border-color:var(--border-dark,#404040)}[data-theme="dark"] .example-item:hover{border-color:var(--primary-color,#4a9eff);box-shadow:0 4px 12px rgba(74,158,255,0.1)}[data-theme="dark"] .example-input{color:var(--primary-color,#4a9eff)}[data-theme="dark"] .example-output{color:var(--text-light,#e0e0e0)}@media (max-width:768px){.type-buttons{flex-direction:column}.type-btn{width:100%}.operations{flex-direction:column}.guide-content{grid-template-columns:1fr}.example-grid{grid-template-columns:1fr}.example-item{flex-direction:column;align-items:flex-start}.example-output{width:100%;text-align:left}.copy-btn{align-self:flex-end;margin-top:8px}}.history-section{background:var(--bg-secondary,#f5f5f5);padding:24px;border-radius:8px;border:1px solid var(--border-color,#e0e0e0);margin-top:32px}.history-section h3{margin:0 0 16px 0;color:var(--text-primary,#333);font-size:18px}.history-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto}.history-empty{text-align:center;color:var(--text-secondary,#999);padding:24px;font-size:14px}.history-item{background:white;padding:12px 16px;border-radius:6px;border:1px solid var(--border-color,#e0e0e0);display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all 0.3s ease;flex-wrap:wrap}.history-item:hover{border-color:var(--primary-color,#2c3e50);background:rgba(44,62,80,0.02)}.history-item-content{flex:1;min-width:200px}.history-input,.history-output{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;font-size:13px}.history-output{margin-bottom:0}.history-label{font-weight:600;color:var(--text-secondary,#666);min-width:60px}.history-value{color:var(--text-primary,#333);word-break:break-all;padding:4px 8px;background:rgba(44,62,80,0.05);border-radius:4px;font-family:'Courier New',monospace}.history-arrow{color:var(--text-secondary,#ccc);font-size:12px;margin:0 4px}.history-time{color:var(--text-secondary,#999);font-size:12px;white-space:nowrap;padding:4px 8px;background:rgba(0,0,0,0.02);border-radius:4px}.history-actions{display:flex;gap:6px}.history-btn{padding:6px 10px;background:transparent;border:1px solid var(--border-color,#e0e0e0);border-radius:4px;cursor:pointer;font-size:12px;color:var(--text-primary,#333);transition:all 0.3s ease;min-width:32px;text-align:center}.history-btn:hover{background:var(--primary-color,#2c3e50);color:white;border-color:var(--primary-color,#2c3e50)}.history-btn.delete-btn:hover{background:#ff6b6b;border-color:#ff6b6b}[data-theme="dark"] .history-section{background:var(--bg-dark-secondary,#1e1e1e);border-color:var(--border-dark,#404040)}[data-theme="dark"] .history-item{background:var(--bg-dark,#2c2c2c);border-color:var(--border-dark,#404040)}[data-theme="dark"] .history-item:hover{background:rgba(74,158,255,0.05);border-color:var(--primary-color,#4a9eff)}[data-theme="dark"] .history-value{color:var(--text-light,#e0e0e0);background:rgba(74,158,255,0.1)}[data-theme="dark"] .history-label{color:var(--text-secondary-dark,#999)}[data-theme="dark"] .history-time{color:var(--text-secondary-dark,#999);background:rgba(0,0,0,0.2)}[data-theme="dark"] .history-btn{background:transparent;border-color:var(--border-dark,#404040);color:var(--text-light,#e0e0e0)}[data-theme="dark"] .history-btn:hover{background:var(--primary-color,#4a9eff);border-color:var(--primary-color,#4a9eff);color:white}.history-list::-webkit-scrollbar{width:6px}.history-list::-webkit-scrollbar-track{background:transparent}.history-list::-webkit-scrollbar-thumb{background:var(--border-color,#ddd);border-radius:3px}.history-list::-webkit-scrollbar-thumb:hover{background:var(--border-color,#bbb)}[data-theme="dark"] .history-list::-webkit-scrollbar-thumb{background:var(--border-dark,#555)}[data-theme="dark"] .history-list::-webkit-scrollbar-thumb:hover{background:var(--border-dark,#777)}@media (max-width:768px){.history-section{margin-top:24px}.history-item{flex-direction:column;align-items:flex-start}.history-input,.history-output{width:100%}.history-time{width:100%}.history-actions{width:100%;justify-content:flex-end}.history-list{max-height:300px}}