.unit-conversion-page { --uc-primary:#ea580c; --uc-primary-dark:#b45309; --uc-warm:#fff7ed; --uc-yellow:#fef3c7; --uc-border:#eadfcd; --uc-text:#2a2520; --uc-text-2:#57534e; --uc-text-3:#8a8174; max-width: 1320px; margin: 0 auto; padding: 18px 16px 42px; color: var(--uc-text); }
.uc-breadcrumb { display:flex; gap:8px; align-items:center; margin:0 0 14px; color:var(--uc-text-3); font-size:13px; }
.uc-breadcrumb a { color:var(--uc-text-2); text-decoration:none; }
.uc-hero { border:1px solid var(--uc-border); border-radius:24px; padding:26px 30px; margin-bottom:18px; background:linear-gradient(135deg,#fff7ed,#fef3c7); box-shadow:0 18px 36px -28px rgba(146,64,14,.35); }
.uc-hero-badge { display:inline-flex; gap:7px; align-items:center; padding:5px 12px; border-radius:999px; background:#fff; color:var(--uc-primary-dark); font-size:12px; font-weight:700; margin-bottom:12px; }
.uc-hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--uc-primary); }
.uc-hero h1 { margin:0 0 8px; font-size:28px; line-height:1.25; color:var(--uc-text); }
.uc-hero p { margin:0; color:var(--uc-text-2); line-height:1.7; }
.uc-app { display:grid; grid-template-columns: 330px minmax(0,1fr); gap:18px; align-items:start; }
.uc-panel { position:sticky; top:14px; max-height:calc(100vh - 28px); overflow:auto; border:1px solid var(--uc-border); border-radius:20px; padding:18px; background:#fffaf2; }
.uc-field { margin-bottom:16px; }
.uc-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.uc-label { display:block; margin-bottom:8px; color:var(--uc-text-2); font-weight:700; font-size:13px; }
.uc-label span { color:var(--uc-text-3); font-weight:400; font-size:11px; }
.uc-input { width:100%; box-sizing:border-box; height:40px; border:1px solid var(--uc-border); border-radius:12px; padding:0 12px; background:#fff; color:var(--uc-text); }
.uc-input:focus { outline:none; border-color:var(--uc-primary); box-shadow:0 0 0 3px rgba(234,88,12,.12); }
.uc-options { display:flex; flex-wrap:wrap; gap:7px; }
.uc-opt { position:relative; cursor:pointer; }
.uc-opt input { position:absolute; opacity:0; pointer-events:none; }
.uc-opt span { display:block; padding:7px 12px; border:1px solid var(--uc-border); border-radius:999px; background:#fff; color:var(--uc-text-2); font-size:13px; }
.uc-opt input:checked + span { border-color:var(--uc-primary); background:var(--uc-yellow); color:var(--uc-primary-dark); font-weight:700; }
.uc-checks { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
.uc-checks label, .uc-toggle { color:var(--uc-text-2); font-size:13px; cursor:pointer; }
.uc-checks input, .uc-toggle input { accent-color:var(--uc-primary); }
.uc-advanced { border:1px solid var(--uc-border); border-radius:14px; background:#fff; margin-bottom:16px; overflow:hidden; }
.uc-advanced summary { padding:10px 12px; cursor:pointer; color:var(--uc-text-2); font-weight:700; font-size:13px; }
.uc-advanced-body { padding:0 12px 12px; }
.uc-actions { display:grid; grid-template-columns:1fr; gap:8px; }
.uc-btn { border:0; border-radius:12px; height:40px; font-weight:700; cursor:pointer; transition:.18s ease; }
.uc-btn:active { transform:translateY(1px); }
.uc-btn-primary { background:linear-gradient(135deg,var(--uc-primary),var(--uc-primary-dark)); color:#fff; box-shadow:0 8px 18px -10px rgba(234,88,12,.7); }
.uc-btn-secondary { background:#fff; border:1px solid var(--uc-border); color:var(--uc-primary-dark); }
.uc-records { margin-top:16px; padding-top:14px; border-top:1px dashed var(--uc-border); }
.uc-records-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; color:var(--uc-text-2); }
.uc-records-head button { border:0; background:transparent; color:var(--uc-primary-dark); cursor:pointer; }
.uc-records-list { display:flex; flex-direction:column; gap:6px; }
.uc-record-item { text-align:left; border:1px solid var(--uc-border); background:#fff; border-radius:12px; padding:9px; cursor:pointer; }
.uc-record-item span { display:block; color:var(--uc-text); font-weight:700; font-size:13px; }
.uc-record-item small { display:block; margin-top:3px; color:var(--uc-text-3); line-height:1.4; }
.uc-record-empty, .uc-empty, .uc-loading { color:var(--uc-text-3); text-align:center; padding:20px; }
.uc-preview-wrap { min-width:0; }
.uc-preview-toolbar { display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; color:var(--uc-text-2); font-size:13px; }
.uc-preview { overflow:auto; padding-bottom:10px; }
.uc-page { width:210mm; min-height:297mm; box-sizing:border-box; padding:13mm 11mm; margin:0 auto; background:#fff; border:1px solid #eee3d2; box-shadow:0 16px 40px rgba(120,80,40,.1); font-family:"LXGW WenKai", "PingFang SC", "Songti SC", serif; }
.uc-page-top { position:relative; min-height:32mm; margin-bottom:4mm; }
.uc-page h2 { text-align:center; margin:0 0 7mm; font-size:18pt; }
.uc-page-header { display:flex; gap:12mm; font-size:11pt; }
.uc-page-header span { flex:1; }
.uc-page-header u { display:inline-block; min-width:24mm; border-bottom:1px solid #333; text-decoration:none; }
.uc-answer-card { float:left; width:30mm; text-align:center; color:var(--uc-primary-dark); font-size:9pt; font-weight:700; margin:0 5mm 2mm 0; }
.uc-answer-card img { width:18mm; height:18mm; display:block; margin:1mm auto; }
.uc-grid { display:grid; gap:5mm 4mm; }
.uc-grid.cols-1 { grid-template-columns:1fr; }
.uc-grid.cols-2 { grid-template-columns:1fr 1fr; }
.uc-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.uc-item { display:flex; align-items:flex-start; gap:2mm; min-height:10mm; line-height:1.65; font-size:12pt; }
.uc-no { color:#888; font-size:9pt; min-width:7mm; }
.uc-expr { flex:1; }
.uc-compare-slot { display:inline-flex; align-items:center; justify-content:center; width:7mm; height:7mm; margin:0 1mm; font-size:18pt; font-weight:700; line-height:1; vertical-align:-1mm; }
.uc-compare-slot-answer { color:#15803d; font-size:16pt; }
.uc-inline-answer { display:inline-block; min-width:14mm; color:#15803d; font-weight:700; text-align:center; border-bottom:1px solid #15803d; }
.uc-answer { color:#15803d; font-weight:700; margin-left:3mm; }
.uc-answer-page { margin-top:14px; page-break-before:always; }
.uc-answer-list { display:grid; grid-template-columns:repeat(4, 1fr); gap:4mm 5mm; font-size:11pt; line-height:1.7; }
.uc-article { margin-top:24px; border-top:1px solid var(--uc-border); padding-top:20px; color:var(--uc-text-2); line-height:1.8; }
.uc-article h2 { color:var(--uc-text); font-size:20px; margin:18px 0 8px; }
.uc-modal { position:fixed; inset:0; z-index:9999; }
.uc-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.42); }
.uc-modal-card { position:relative; width:min(460px,calc(100vw - 32px)); margin:12vh auto 0; background:#fff; border-radius:20px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.22); }
.uc-modal-card h3 { margin:0 0 10px; }
.uc-modal-card p { color:var(--uc-text-2); line-height:1.7; }
.uc-modal-warning { color:var(--uc-primary-dark) !important; font-weight:700; }
.uc-modal-error { margin-top:8px; color:#b91c1c; font-size:13px; }
.uc-modal-actions { display:flex; gap:10px; margin-top:14px; }
.uc-modal-actions .uc-btn { flex:1; }
@media (max-width: 900px) { .uc-app { grid-template-columns:1fr; } .uc-panel { position:static; max-height:none; } .uc-page { width:100%; min-height:auto; padding:8mm; } }
@media print { body * { visibility:hidden !important; } .uc-preview,.uc-preview * { visibility:visible !important; } .uc-preview { position:absolute !important; left:0 !important; top:0 !important; width:100% !important; overflow:visible !important; padding:0 !important; margin:0 !important; } .uc-page { width:auto; min-height:auto; border:0; box-shadow:none; margin:0; padding:0; page-break-after:always; } .uc-page:last-child { page-break-after:auto; } }