:root {
--cx123-primary: #F57C00;
--cx123-primary-light: #FFF8E1;
--cx123-primary-dark: #E65100;
--cx123-primary-alt: #FF9800;
--cx123-primary-alt-dark: #F57C00;
--cx123-secondary: #37474F;
--cx123-light: #FFFFFF;
--cx123-gray: #FAFAFA;
--cx123-border: #E0E0E0;
--cx123-shadow: 0 4px 16px -4px rgba(245, 124, 0, 0.12);
--cx123-radius: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: var(--cx123-gray);
color: var(--cx123-secondary);
line-height: 1.6;
}
.cx123-main-container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
}
.cx123-header {
background: linear-gradient(145deg, var(--cx123-primary) 0%, var(--cx123-primary-dark) 100%);
padding: 32px 0;
color: white;
border-radius: var(--cx123-radius);
margin: 8px 0 24px;
box-shadow: 0 4px 12px rgba(245, 124, 0, 0.2);
}
.cx123-header-content {
text-align: center;
padding: 0 20px;
}
.cx123-h1 {
font-size: 26px;
margin-bottom: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
.cx123-header-desc {
font-size: 14px;
opacity: 0.9;
line-height: 1.5;
font-weight: 400;
}
.cx123-function-area {
margin-bottom: 24px;
}
.cx123-card {
background: var(--cx123-light);
border-radius: var(--cx123-radius);
box-shadow: var(--cx123-shadow);
overflow: hidden;
margin-bottom: 20px;
}
.cx123-card-header {
background-color: var(--cx123-primary-light);
padding: 14px 18px;
border-bottom: 1px solid var(--cx123-border);
}
.cx123-card-header h2 {
color: var(--cx123-primary-dark);
font-size: 17px;
font-weight: 700;
}
.cx123-card-body {
padding: 18px;
}
.cx123-converter-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.cx123-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.cx123-label {
font-weight: 600;
font-size: 13px;
color: var(--cx123-secondary);
}
.cx123-input, .cx123-textarea {
padding: 10px 14px;
border: 2px solid var(--cx123-border);
border-radius: 6px;
font-size: 15px;
color: var(--cx123-secondary);
background-color: white;
transition: border-color 0.2s;
}
.cx123-input:focus, .cx123-textarea:focus {
border-color: var(--cx123-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(245, 124, 0, 0.1);
}
.cx123-btn-group {
display: flex;
gap: 10px;
margin-top: 6px;
}
.cx123-btn {
padding: 11px 16px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: all 0.2s ease;
}
.cx123-btn-primary {
background-color: var(--cx123-primary);
color: white;
}
.cx123-btn-primary:hover {
background-color: var(--cx123-primary-dark);
transform: translateY(-1px);
}
.cx123-btn-convert {
background-color: var(--cx123-primary-alt);
color: white;
}
.cx123-btn-convert:hover {
background-color: var(--cx123-primary-alt-dark);
transform: translateY(-1px);
}
.cx123-btn-secondary {
background-color: #607D8B;
color: white;
}
.cx123-btn-secondary:hover {
background-color: #455A64;
}
.cx123-result-container {
margin-top: 14px;
padding: 14px;
border-radius: 6px;
background-color: var(--cx123-primary-light);
border-left: 4px solid var(--cx123-primary);
display: none;
color: var(--cx123-secondary);
font-weight: 500;
}
.cx123-error-container {
color: #B71C1C;
padding: 10px;
border-radius: 6px;
background-color: #FFEBEE;
border-left: 4px solid #E53935;
margin-top: 10px;
display: none;
font-weight: 500;
}
.cx123-reference-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 24px;
}

.cx123-dual-panel {
display: flex;
gap: 20px;
align-items: stretch;
}
.cx123-panel {
flex: 1;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
border: 2px solid var(--cx123-border);
border-radius: var(--cx123-radius);
overflow: hidden;
transition: border-color 0.3s, box-shadow 0.3s;
}
.cx123-panel:focus-within {
border-color: var(--cx123-primary);
box-shadow: 0 0 0 4px rgba(245, 124, 0, 0.08);
}
.cx123-panel-header {
background: linear-gradient(135deg, var(--cx123-primary-light) 0%, #FFF8E1 100%);
padding: 14px 18px;
border-bottom: 1px solid var(--cx123-border);
display: flex;
align-items: center;
gap: 8px;
}
.cx123-panel-header-icon {
width: 32px;
height: 32px;
background: var(--cx123-primary);
color: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
}
.cx123-panel-header h3 {
color: var(--cx123-primary-dark);
font-size: 15px;
font-weight: 700;
}
.cx123-panel-body {
flex: 1;
padding: 0;
}
.cx123-panel-body .cx123-input,
.cx123-panel-body .cx123-textarea {
width: 100%;
height: 100%;
min-height: 160px;
border: none;
border-radius: 0;
resize: none;
font-size: 18px;
padding: 18px;
background: transparent;
line-height: 1.8;
}
.cx123-panel-body .cx123-input:focus,
.cx123-panel-body .cx123-textarea:focus {
box-shadow: none;
}
.cx123-panel-footer {
padding: 10px 18px;
background: #FAFAFA;
border-top: 1px solid var(--cx123-border);
font-size: 12px;
color: #90A4AE;
display: flex;
align-items: center;
gap: 6px;
}
.cx123-panel-swap {
width: 48px;
height: 48px;
background: var(--cx123-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
flex-shrink: 0;
align-self: center;
box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
transition: all 0.3s ease;
border: none;
}
.cx123-panel-swap:hover {
background: var(--cx123-primary-dark);
transform: rotate(180deg);
}
.cx123-dual-actions {
display: flex;
gap: 12px;
margin-top: 18px;
}
.cx123-dual-actions .cx123-btn {
flex: 1;
padding: 14px 20px;
font-size: 15px;
}
@media (max-width: 768px) {
.cx123-dual-panel {
flex-direction: column;
}
.cx123-panel-swap {
width: 40px;
height: 40px;
font-size: 16px;
align-self: center;
transform: rotate(90deg);
margin: 4px 0;
}
.cx123-panel-swap:hover {
transform: rotate(270deg);
}
.cx123-panel-body .cx123-input,
.cx123-panel-body .cx123-textarea {
min-height: 100px;
font-size: 16px;
}
.cx123-dual-actions {
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 768px) {
.cx123-reference-section {
grid-template-columns: 1fr;
}
}
.cx123-reference-table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.cx123-reference-table th, .cx123-reference-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--cx123-border);
font-size: 13px;
color: var(--cx123-secondary);
}
.cx123-reference-table th {
background-color: var(--cx123-gray);
font-weight: 700;
color: var(--cx123-secondary);
}
.cx123-reference-table td {
font-weight: 500;
}
.cx123-copy-btn {
background: none;
border: none;
color: var(--cx123-primary);
cursor: pointer;
font-size: 12px;
padding: 3px 8px;
border-radius: 4px;
font-weight: 600;
transition: background 0.2s;
}
.cx123-copy-btn:hover {
background-color: var(--cx123-primary-light);
}
.cx123-text-area {
margin-bottom: 32px;
}
.cx123-section-title {
font-size: 20px;
color: var(--cx123-secondary);
margin-bottom: 24px;
text-align: center;
font-weight: 700;
}
.cx123-section-title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background-color: var(--cx123-primary);
margin: 10px auto 0;
border-radius: 2px;
}
.cx123-guide-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.cx123-guide-card {
background: var(--cx123-light);
border-radius: var(--cx123-radius);
padding: 20px;
box-shadow: var(--cx123-shadow);
}
.cx123-guide-card h3 {
color: var(--cx123-primary-dark);
font-size: 15px;
margin-bottom: 10px;
font-weight: 700;
}
.cx123-guide-card p {
color: #546E7A;
line-height: 1.6;
font-size: 13px;
}
.cx123-guide-card ul {
list-style: none;
padding: 0;
}
.cx123-guide-card ul li {
color: #546E7A;
line-height: 1.6;
margin-bottom: 6px;
padding-left: 16px;
position: relative;
font-size: 13px;
}
.cx123-guide-card ul li::before {
content: '•';
color: var(--cx123-primary);
position: absolute;
left: 0;
font-weight: 700;
}
.cx123-friend-links {
background: var(--cx123-light);
border-radius: var(--cx123-radius);
padding: 20px;
box-shadow: var(--cx123-shadow);
margin-bottom: 32px;
}
.cx123-links-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.cx123-links-grid a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--cx123-secondary);
text-decoration: none;
padding: 6px 14px;
border-radius: 6px;
background-color: var(--cx123-gray);
transition: all 0.3s;
font-size: 13px;
font-weight: 500;
}
.cx123-links-grid a:hover {
background-color: var(--cx123-primary-light);
color: var(--cx123-primary);
}
.cx123-footer {
background-color: var(--cx123-secondary);
color: rgba(255,255,255,0.8);
padding: 32px 0 16px;
margin-top: 32px;
}
.cx123-footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
margin-bottom: 24px;
}
.cx123-footer-column h3 {
color: white;
font-size: 15px;
margin-bottom: 14px;
padding-bottom: 6px;
border-bottom: 2px solid var(--cx123-primary);
font-weight: 700;
}
.cx123-footer-column ul {
list-style: none;
}
.cx123-footer-column li {
margin-bottom: 8px;
}
.cx123-footer-column a {
color: rgba(255,255,255,0.75);
text-decoration: none;
font-weight: 500;
}
.cx123-footer-column a:hover {
color: white;
}
.cx123-footer-bottom {
text-align: center;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.12);
font-size: 12px;
color: rgba(255,255,255,0.6);
}
.cx123-back-to-top {
position: fixed;
bottom: 16px;
right: 16px;
width: 42px;
height: 42px;
background-color: var(--cx123-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 99;
box-shadow: 0 4px 10px rgba(245, 124, 0, 0.25);
}
.cx123-back-to-top.show {
opacity: 1;
visibility: visible;
}
.cx123-back-to-top:hover {
background-color: var(--cx123-primary-dark);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.cx123-btn-group {
flex-direction: column;
gap: 8px;
}
.cx123-h1 {
font-size: 22px;
}
.cx123-header {
padding: 20px 0;
margin: 4px 0 16px;
}
}