*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--primary: #2563eb;--primary-hover: #1d4ed8;--primary-light: #dbeafe;--exact-bg: #dcfce7;--exact-border: #16a34a;--exact-text: #15803d;--similar-bg: #fef9c3;--similar-border: #ca8a04;--similar-text: #a16207;--diff-bg: #fee2e2;--diff-border: #dc2626;--diff-text: #dc2626;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--radius: 12px;--shadow: 0 2px 8px rgba(0,0,0,.06);--shadow-lg: 0 8px 32px rgba(0,0,0,.08);--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .3);--glass-blur: 16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang TC,Microsoft JhengHei,sans-serif;background:linear-gradient(135deg,#e0e7ff,#dbeafe,#f0fdf4,#fefce8,#ede9fe);background-attachment:fixed;color:var(--gray-800);font-size:14px;line-height:1.6;min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:12px}.logo-img{height:44px;width:auto;object-fit:contain}.logo-text{display:flex;flex-direction:column}.logo-title{font-size:16px;font-weight:700;color:var(--gray-800)}.logo-sub{font-size:12px;color:var(--gray-400)}.header-right{display:flex;align-items:center;gap:8px}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;font-family:inherit}.btn-outline{background:#fff9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);color:var(--gray-700)}.btn-outline:hover{background:#ffffffd9;border-color:#ffffff80;box-shadow:0 2px 12px #0000000f}.btn-primary{background:linear-gradient(135deg,var(--primary),#818cf8);color:#fff;box-shadow:0 2px 12px #2563eb4d}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover),#6366f1);box-shadow:0 4px 16px #2563eb66}.btn-text{background:none;border:none;color:var(--gray-500);cursor:pointer;font-size:12px;font-family:inherit}.btn-text:hover{color:var(--primary)}.btn-export{width:100%;justify-content:center;padding:14px;background:var(--gray-800);color:#fff;font-size:15px;border-radius:var(--radius)}.btn-export:hover{background:var(--gray-700)}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;background:#ffffff80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border)}.legend{display:flex;gap:20px}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-600)}.legend-color{width:14px;height:14px;border-radius:3px;border:1px solid}.legend-exact{background:var(--exact-bg);border-color:var(--exact-border)}.legend-similar{background:var(--similar-bg);border-color:var(--similar-border)}.legend-diff{background:var(--diff-bg);border-color:var(--diff-border)}.toolbar-right{display:flex;align-items:center}.sync-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-600);cursor:pointer}.toggle-switch{position:relative;width:40px;height:22px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gray-300);border-radius:22px;transition:.3s}.toggle-slider:before{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:2px;left:2px;transition:.3s}.toggle-switch input:checked+.toggle-slider{background:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(18px)}.main-content{display:flex;flex:1;overflow:hidden}.panels-container{display:flex;flex:1;min-width:0}.panel{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--glass-border);min-width:0}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#ffffff80;border-bottom:1px solid var(--glass-border)}.panel-title{font-weight:600;font-size:14px}.word-count{font-size:12px;color:var(--gray-400)}.panel-body{flex:1;position:relative;overflow:hidden}.panel-input{width:100%;height:100%;border:none;outline:none;resize:none;padding:20px;font-family:inherit;font-size:15px;line-height:1.8;color:var(--gray-800);background:#fff9}.panel-input::placeholder{color:var(--gray-400)}.panel-result{display:none;width:100%;height:100%;overflow-y:auto;padding:20px;background:#fff9;font-size:15px;line-height:1.8;color:var(--gray-800)}.panel-body.compared .panel-input{display:none}.panel-body.compared .panel-result{display:block}.hl-exact{background:var(--exact-bg);border:1px solid var(--exact-border);border-radius:3px;padding:1px 2px;margin:0 1px}.hl-similar{background:var(--similar-bg);border:1px solid var(--similar-border);border-radius:3px;padding:1px 2px;margin:0 1px}.hl-diff{background:var(--diff-bg);border:1px solid var(--diff-border);border-radius:3px;padding:1px 2px;margin:0 1px}.report-sidebar{width:320px;min-width:320px;background:#fff9;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-left:1px solid var(--glass-border);padding:24px;display:flex;flex-direction:column;overflow-y:auto}.report-title{font-size:18px;font-weight:700;margin-bottom:20px;text-align:center}.chart-container{display:flex;justify-content:center;margin-bottom:24px}.similarity-chart{width:180px;height:180px}.chart-bg{fill:none;stroke:var(--gray-100);stroke-width:12}.chart-fill{fill:none;stroke:var(--primary);stroke-width:12;stroke-linecap:round;stroke-dasharray:502.65;stroke-dashoffset:502.65;transform:rotate(-90deg);transform-origin:100px 100px;transition:stroke-dashoffset 1s ease}.chart-percent{font-size:42px;font-weight:700;fill:var(--primary)}.chart-label{font-size:14px;fill:var(--gray-400)}.stats-row{display:flex;gap:12px;margin-bottom:24px}.stat-box{flex:1;background:#ffffff80;border:1px solid var(--glass-border);border-radius:var(--radius);padding:12px;text-align:center}.stat-label{font-size:12px;color:var(--gray-500);margin-bottom:4px}.stat-value{font-size:20px;font-weight:700;color:var(--gray-800)}.matches-section{flex:1;display:flex;flex-direction:column;margin-bottom:16px;min-height:0}.matches-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;font-weight:600}.matches-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.matches-empty{text-align:center;color:var(--gray-400);padding:40px 0;font-size:14px}.match-card{background:#ffffff80;border:1px solid var(--glass-border);border-radius:var(--radius);padding:12px;cursor:pointer;transition:all .2s}.match-card:hover{background:#fffc;border-color:var(--primary);box-shadow:0 4px 16px #2563eb1a}.match-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.match-type{font-size:12px;font-weight:600;padding:2px 8px;border-radius:4px}.match-type-exact{color:var(--exact-text);background:var(--exact-bg)}.match-type-similar{color:var(--similar-text);background:var(--similar-bg)}.match-type-diff{color:var(--diff-text);background:var(--diff-bg)}.match-pos{font-size:11px;color:var(--gray-400)}.match-preview{font-size:13px;color:var(--gray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footer{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);font-size:12px;color:var(--gray-500)}.footer-left{display:flex;align-items:center;gap:4px}.footer-sep{margin:0 8px;color:var(--gray-300)}.status-dot{display:inline-block;width:8px;height:8px;background:#22c55e;border-radius:50%;margin-right:4px}.footer-right{display:flex;align-items:center;gap:16px}.footer-right a{color:var(--gray-500);text-decoration:none}.footer-right a:hover{color:var(--primary)}.modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a66;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;justify-content:center;align-items:center}.modal-overlay.active{display:flex}.modal{background:#ffffffd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;width:720px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000001f}.modal-sm{width:480px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--glass-border)}.modal-header h3{font-size:16px;font-weight:600}.modal-close{background:none;border:none;font-size:24px;color:var(--gray-400);cursor:pointer;line-height:1}.modal-close:hover{color:var(--gray-600)}.modal-body{padding:24px;overflow-y:auto;flex:1}.modal-paste-body,.modal-upload-body{display:flex;gap:16px}.modal-col{flex:1;display:flex;flex-direction:column;gap:8px}.modal-col label{font-size:13px;font-weight:600;color:var(--gray-600)}.modal-col textarea{flex:1;min-height:200px;border:1px solid var(--gray-300);border-radius:var(--radius);padding:12px;font-family:inherit;font-size:14px;line-height:1.6;resize:none;outline:none}.modal-col textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.upload-zone{flex:1;min-height:200px;border:2px dashed rgba(209,213,219,.8);border-radius:var(--radius);background:#ffffff4d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s}.upload-zone:hover{border-color:var(--primary);background:#dbeafe80}.upload-zone.has-file{border-color:var(--exact-border);background:#dcfce780}.upload-zone p{font-size:14px;color:var(--gray-600)}.upload-zone span{font-size:12px;color:var(--gray-400)}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--glass-border)}.dropdown{position:relative}.dropdown-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#ffffffd9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 8px 32px #0000001a;min-width:180px;padding:6px;z-index:100;animation:dropdownIn .15s ease-out}.dropdown.open .dropdown-menu{display:block}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:none;font-size:14px;color:var(--gray-700);border-radius:6px;cursor:pointer;transition:background .15s}.dropdown-item:hover{background:var(--gray-100)}.dropdown-item svg{flex-shrink:0;color:var(--gray-400)}.dropdown-divider{height:1px;background:var(--gray-100);margin:4px 0}.setting-section-title{display:block;font-size:13px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.preset-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.preset-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border:2px solid var(--glass-border);border-radius:12px;background:#ffffff80;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:all .2s}.preset-card:hover{border-color:var(--primary);background:#e0e7ff80}.preset-card.active{border-color:var(--primary);background:linear-gradient(135deg,#eef2ffcc,#e0e7ffcc);box-shadow:0 0 0 1px var(--primary)}.preset-icon{width:40px;height:40px;border-radius:10px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;color:var(--gray-400);transition:all .2s}.preset-card.active .preset-icon{background:var(--primary);color:#fff}.preset-card.active .preset-icon svg{stroke:#fff}.preset-name{font-size:14px;font-weight:600;color:var(--gray-700)}.preset-card.active .preset-name{color:var(--primary)}.preset-desc{font-size:11px;color:var(--gray-400)}.advanced-section{border-top:1px solid var(--gray-100);padding-top:16px}.advanced-toggle{font-size:13px;font-weight:600;color:var(--gray-400);cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;display:flex;align-items:center;gap:6px}.advanced-toggle::-webkit-details-marker{display:none}.advanced-toggle:before{content:"▶";font-size:10px;transition:transform .2s}details.advanced-section[open] .advanced-toggle:before{transform:rotate(90deg)}.advanced-body{padding-top:16px}.setting-group{margin-bottom:20px}.setting-group label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}.setting-control{display:flex;align-items:center;gap:12px}.setting-control input[type=range]{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--gray-200);border-radius:3px;outline:none}.setting-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer}.setting-value{font-size:16px;font-weight:700;color:var(--primary);min-width:36px;text-align:right}.setting-hint{font-size:12px;color:var(--gray-400);margin-top:6px}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:2000;display:flex;align-items:center;justify-content:center}.loading-card{background:#ffffffd9;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:20px;padding:40px 48px;min-width:420px;box-shadow:0 25px 60px #0000001f;display:flex;flex-direction:column;align-items:center;gap:24px;animation:loadingCardIn .4s cubic-bezier(.34,1.56,.64,1)}@keyframes loadingCardIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.loading-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--primary),#818cf8);display:flex;align-items:center;justify-content:center;animation:loadingPulse 2s ease-in-out infinite}.loading-icon svg{width:28px;height:28px;stroke:#fff;animation:spin 2s linear infinite}@keyframes loadingPulse{0%,to{box-shadow:0 0 #6366f166}50%{box-shadow:0 0 0 12px #6366f100}}@keyframes spin{to{transform:rotate(360deg)}}.loading-title{font-size:18px;font-weight:600;color:var(--gray-800)}.loading-step{font-size:13px;color:var(--gray-400);min-height:20px;transition:color .3s}.loading-progress-wrap{width:100%;display:flex;flex-direction:column;gap:8px}.loading-progress-bar{width:100%;height:8px;background:var(--gray-100);border-radius:99px;overflow:hidden;position:relative}.loading-progress-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--primary),#818cf8,#c084fc);background-size:200% 100%;animation:progressShimmer 1.5s ease-in-out infinite;transition:width .4s cubic-bezier(.22,1,.36,1);position:relative}.loading-progress-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progressGlow 1.5s ease-in-out infinite}@keyframes progressShimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes progressGlow{0%,to{opacity:0}50%{opacity:1}}.loading-percent{font-size:13px;font-weight:600;color:var(--primary);align-self:flex-end;font-variant-numeric:tabular-nums}.loading-steps-dots{display:flex;gap:8px}.loading-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-200);transition:background .3s,transform .3s}.loading-dot.active{background:var(--primary);transform:scale(1.3)}.loading-dot.done{background:#34d399}.help-page{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1500;background:linear-gradient(135deg,#e0e7ff,#dbeafe,#f0fdf4,#fefce8,#ede9fe);flex-direction:column;overflow:hidden}.help-page.active{display:flex}.help-header{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));flex-shrink:0}.help-page-title{font-size:18px;font-weight:700;color:var(--gray-800)}.help-content{flex:1;overflow-y:auto;padding:32px 24px;max-width:800px;margin:0 auto;width:100%}.help-content h3{font-size:20px;font-weight:700;color:var(--gray-800);margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block}.help-content h3:first-child{margin-top:0}.help-content p{font-size:15px;line-height:1.8;color:var(--gray-600);margin-bottom:12px}.help-content ul,.help-content ol{padding-left:24px;margin-bottom:16px}.help-content li{font-size:15px;line-height:1.8;color:var(--gray-600);margin-bottom:4px}.help-content strong{color:var(--gray-800)}.help-content .help-tip{background:#eef2ffb3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-left:4px solid var(--primary);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0;font-size:14px;color:var(--gray-600)}.help-placeholder{text-align:center;color:var(--gray-400);padding:60px 0;font-size:16px}@media print{.header,.toolbar,.footer,.modal-overlay{display:none!important}.main-content,.panels-container{display:block}.panel{border:1px solid #ddd;margin-bottom:20px;page-break-inside:avoid}.panel-input{display:none}.panel-result{display:block!important}.report-sidebar{width:100%;border:none;page-break-before:always}.btn-export{display:none}}