:root{--bg-main:#fff;--bg-body:#faf6f3;--border-color:#e8dcc4;--text-primary:#3e2723;--text-secondary:#795548;--primary-color:sienna;--primary-light:#f6efea;--hover-gray:#f0eae1;--panel-radius:16px;--btn-radius:8px;--transition-speed:.2s}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-body);color:var(--text-primary);background-image:radial-gradient(#a0522d14 1px,#0000 1px);background-size:20px 20px;flex-direction:column;min-height:100vh;font-family:Roboto,sans-serif;display:flex}header{background-color:var(--bg-main);border-bottom:1px solid var(--border-color);z-index:100;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 5%;display:flex;position:sticky;top:0;box-shadow:0 2px 10px #3e27230d}.header-left{align-items:center;display:flex}.logo{-webkit-user-select:none;user-select:none;align-items:center;gap:8px;text-decoration:none;display:flex}.logo-icon{color:var(--primary-color);font-size:28px}.logo-text-main{color:var(--text-primary);font-family:Lora,serif;font-size:24px;font-weight:600}.logo-text-sub{color:var(--primary-color);font-size:16px;font-weight:500}.nav-menu{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:24px;margin-left:auto;display:flex}.nav-link{color:var(--text-secondary);transition:color var(--transition-speed);font-size:15px;font-weight:500;text-decoration:none}.nav-link:hover,.nav-link.active{color:var(--primary-color)}main{flex:1;width:100%;max-width:1600px;margin:0 auto;padding:24px 5%}.top-controls{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.mode-btn{cursor:pointer;border:1px solid var(--border-color);background-color:var(--bg-main);color:var(--text-primary);transition:all var(--transition-speed);border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;display:flex}.mode-btn.active{background-color:var(--primary-light);color:var(--primary-color);border-color:var(--primary-light)}.mode-btn:not(.active):hover{background-color:var(--hover-gray)}.translation-container{flex-direction:column;gap:20px;width:100%;max-width:1600px;margin:0 auto 24px;display:flex;position:relative}.panel{background-color:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--panel-radius);min-height:280px;transition:box-shadow var(--transition-speed),border-color var(--transition-speed);flex-direction:column;display:flex;overflow:hidden}.panel:focus-within{border-color:var(--primary-color);box-shadow:0 4px 12px #a0522d26}.panel-header{border-bottom:1px solid var(--border-color);scrollbar-width:none;background-color:#fcfaef;align-items:center;padding:0 8px;display:flex;overflow-x:auto}.panel-header::-webkit-scrollbar{display:none}.lang-tab{color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-bottom:3px solid #0000;padding:16px 12px;font-size:14px;font-weight:500}.lang-tab:hover{color:var(--text-primary)}.lang-tab.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.header-actions{margin-left:auto;padding-right:8px;display:flex}.icon-btn{cursor:pointer;color:var(--text-secondary);width:40px;height:40px;transition:background-color var(--transition-speed);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.icon-btn:hover{background-color:var(--hover-gray);color:var(--primary-color)}.panel-body{flex-direction:column;flex:1;padding:16px 24px;display:flex}textarea{resize:none;width:100%;color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:24px;line-height:1.5}textarea::placeholder{color:var(--text-secondary);opacity:.6;font-style:italic}.translated-text{color:var(--text-primary);flex:1;font-size:28px;line-height:1.6}.translation-meta{align-items:center;gap:12px;margin-top:16px;display:flex}.badge-type{background-color:var(--primary-light);color:var(--primary-color);border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500}.panel-footer{color:var(--text-secondary);border-top:1px dashed var(--border-color);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.footer-group{align-items:center;gap:4px;display:flex}.char-count{margin-left:12px;font-size:12px}.swap-wrapper{background-color:var(--bg-body);z-index:10;border-radius:50%;padding:8px;position:absolute;top:26px;left:50%;transform:translate(-50%,-50%)}.swap-btn{background-color:var(--primary-color);cursor:pointer;color:#fff;width:40px;height:40px;transition:all var(--transition-speed);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 2px 6px #a0522d4d}.swap-btn:hover{background-color:#8b4513;transform:scale(1.05)}.bottom-section{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;display:flex}.history-tools{flex-wrap:wrap;gap:16px;display:flex}.action-btn{color:var(--text-secondary);background:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--btn-radius);cursor:pointer;transition:all var(--transition-speed);align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;display:flex}.action-btn:hover{background-color:var(--primary-light);color:var(--primary-color);border-color:var(--primary-color)}.dictionary-box{background-color:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--panel-radius);flex:1;min-width:300px;max-width:600px;padding:20px;box-shadow:0 2px 8px #00000005}.dict-header{color:var(--text-secondary);border-bottom:1px solid var(--border-color);justify-content:space-between;margin-bottom:16px;padding-bottom:8px;font-size:13px;font-weight:500;display:flex}.dict-row{border-bottom:1px dashed var(--hover-gray);align-items:flex-start;padding:8px 0;font-size:15px;display:flex}.dict-row:last-child{border-bottom:none}.dict-word{width:140px;color:var(--primary-color);font-size:18px}.dict-desc{color:var(--text-primary);flex:1;line-height:1.5}footer{background-color:var(--bg-main);border-top:1px solid var(--border-color);text-align:center;color:var(--text-secondary);padding:20px 5%;font-size:14px}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;max-width:1600px;margin:0 auto;display:flex}@media (min-width:1024px){.translation-container{flex-direction:row;align-items:stretch}.panel{flex:1}}@media (max-width:900px){.translation-container{grid-template-columns:1fr;gap:12px}.swap-wrapper{padding:4px;top:50%;left:50%;transform:translate(-50%,-50%)}.swap-btn{transform:rotate(90deg)}.swap-btn:hover{transform:rotate(90deg)scale(1.05)}.dictionary-box{max-width:100%}.nav-menu{justify-content:center;gap:12px;width:100%;margin-left:0}}@media (max-width:600px){header{justify-content:center;padding:12px 5%}main{padding:12px 5%}.logo-text-sub{display:none}.lang-tab{padding:12px 8px;font-size:13px}.action-btn span{display:none}.action-btn{padding:8px}.nav-link{font-size:13px}}.upload-container{background-color:var(--bg-main);border:1px solid var(--border-color);border-radius:var(--panel-radius);flex-direction:column;justify-content:center;align-items:center;min-height:400px;margin-bottom:24px;padding:60px 5%;display:flex;box-shadow:0 2px 10px #3e272305}.upload-area{border:2px dashed var(--border-color);text-align:center;width:100%;max-width:600px;transition:all var(--transition-speed);background-color:var(--bg-body);border-radius:16px;padding:40px}.upload-area.dragging{border-color:var(--primary-color);background-color:var(--primary-light);transform:scale(1.02)}.cloud-icon{color:var(--primary-color);opacity:.8;margin-bottom:16px;font-size:80px}.upload-title{color:var(--text-primary);margin-bottom:24px;font-size:20px;font-weight:500}.btn-upload-primary{background-color:var(--primary-color);color:#fff;border-radius:var(--btn-radius);cursor:pointer;transition:background-color var(--transition-speed);border:none;align-items:center;gap:8px;padding:12px 32px;font-size:16px;font-weight:600;display:inline-flex}.btn-upload-primary:hover{background-color:#8b4513}