:root {
    --pri:        #3b82f6;
    --pri-hover:  #2563eb;
    --pri-soft:   #eff6ff;
    --pri-dark:   #1e40af;

    --bg:         #f1f5f9;
    --surface:    #ffffff;
    --surface-2:  #f8fafc;
    --border:     #e2e8f0;
    --border-lt:  #f1f5f9;

    --txt:        #0f172a;
    --txt-2:      #475569;
    --txt-3:      #94a3b8;

    --green:      #22c55e;
    --red:        #ef4444;
    --amber:      #f59e0b;

    --sh-xs:  0 1px 2px rgba(0,0,0,.04);
    --sh-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sh-md:  0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.04);
    --sh-lg:  0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.03);
    --sh-xl:  0 20px 25px -5px rgba(0,0,0,.1),  0 8px 10px -6px rgba(0,0,0,.04);

    --r-sm:   8px;
    --r:      12px;
    --r-lg:   16px;
    --r-full: 9999px;
    --dur:    150ms;
    --ease:   cubic-bezier(.4,0,.2,1);
    --font:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --header: 64px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.6;
     min-height:100vh;-webkit-font-smoothing:antialiased}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--txt)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
::selection{background:var(--pri-soft);color:var(--pri-dark)}

.header{
    position:sticky;top:0;z-index:100;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    height:var(--header);
    backdrop-filter:blur(12px);
}
.header-inner{
    max-width:1440px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    height:100%;padding:0 28px;gap:16px;
}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-icon{display:grid;place-items:center;color:var(--pri);font-size:26px}
.logo-text{font-size:21px;font-weight:600;letter-spacing:-.3px}
.logo-text b{color:var(--pri);font-weight:800}

.nav-tabs{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:var(--r-full)}
.nav-tab{
    display:flex;align-items:center;gap:7px;
    padding:7px 18px;border-radius:var(--r-full);
    font-weight:500;font-size:13.5px;
    color:var(--txt-2);transition:all var(--dur) var(--ease);
}
.nav-tab i{font-size:13px}
.nav-tab:hover{color:var(--pri)}
.nav-tab.active{background:var(--surface);color:var(--pri);box-shadow:var(--sh-sm)}

.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

.header-link{
    display:flex;align-items:center;gap:7px;
    padding:7px 14px;border-radius:var(--r-full);
    font-size:13.5px;font-weight:500;
    color:var(--txt-2);border:1px solid var(--border);
    transition:all var(--dur) var(--ease);
}
.header-link:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft)}
.header-link i{font-size:12px}

.memory-toggle{
    display:flex;align-items:center;gap:8px;
    padding:7px 16px;border-radius:var(--r-full);
    font-size:13.5px;font-weight:500;
    color:var(--txt-2);border:1px solid var(--border);
    transition:all var(--dur) var(--ease);flex-shrink:0;
}
.memory-toggle:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft)}
.badge{
    background:var(--pri);color:#fff;
    font-size:11px;font-weight:700;
    padding:1px 7px;border-radius:var(--r-full);line-height:1.5;
}

.main{max-width:1440px;margin:0 auto;padding:28px 28px 60px}

.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .35s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.translator{display:flex;align-items:stretch}
.translator-side{
    flex:1;background:var(--surface);
    display:flex;flex-direction:column;
    border:1px solid var(--border);min-width:0;
}
.source-side{border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:none;box-shadow:var(--sh-md);}
.target-side{border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:var(--sh-md)}

.translator-mid{display:flex;align-items:center;z-index:5}
.swap-btn{
    width:44px;height:44px;border-radius:50%;
    background:var(--surface);border:2px solid var(--border);
    display:grid;place-items:center;font-size:15px;color:var(--txt-3);
    margin:0 -22px;box-shadow:var(--sh-xs);
    transition:all .25s var(--ease);
}
.swap-btn:hover{
    border-color:var(--pri);color:var(--pri);
    background:var(--pri-soft);transform:rotate(180deg);
}

.lang-bar{
    display:flex;align-items:center;gap:3px;
    padding:10px 14px;border-bottom:1px solid var(--border-lt);
    position:relative;flex-wrap:wrap;min-height:57px;
}
.lang-chips-row{display:flex;gap:3px}
.lang-chip{
    padding:5px 13px;border-radius:var(--r-full);
    font-size:13px;font-weight:500;
    color:var(--txt-2);transition:all var(--dur) var(--ease);
    white-space:nowrap;
}
.lang-chip:hover{background:var(--pri-soft);color:var(--pri)}
.lang-chip.active{background:var(--pri);color:#fff}

.detect-chip{display:flex;align-items:center;gap:6px}
.detect-chip i{font-size:11px}
.detected-label{font-size:11px;opacity:.85;font-weight:400}

.more-chip{
    width:30px;height:30px;padding:0;
    display:grid;place-items:center;border-radius:50%;font-size:11px;
}

.lang-more-wrap{position:relative}
.lang-dropdown{
    position:absolute;top:calc(100% + 6px);right:0;
    width:260px;background:var(--surface);
    border-radius:var(--r);box-shadow:var(--sh-xl);
    border:1px solid var(--border);z-index:250;
    display:none;overflow:hidden;
}
.lang-dropdown.open{display:block;animation:dropIn .2s var(--ease)}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.lang-search{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-bottom:1px solid var(--border-lt);
}
.lang-search i{color:var(--txt-3);font-size:13px}
.lang-search input{flex:1;border:none;outline:none;background:none;font-size:13.5px}

.lang-list{max-height:280px;overflow-y:auto;padding:6px}
.lang-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border-radius:var(--r-sm);font-size:13.5px;
    cursor:pointer;transition:background var(--dur);
}
.lang-item:hover{background:var(--pri-soft)}
.lang-item.active{background:var(--pri);color:#fff}
.lang-item .flag{font-size:17px;width:24px;text-align:center}
.lang-item .name{flex:1}
.lang-item .check{font-size:11px;opacity:0}
.lang-item.active .check{opacity:1}

.formality-group{
    display:flex;gap:2px;margin-left:auto;
    background:var(--bg);border-radius:var(--r-full);padding:3px;
}
.fmt-btn{
    width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;font-size:13px;
    color:var(--txt-3);transition:all var(--dur) var(--ease);
}
.fmt-btn:hover{color:var(--txt-2)}
.fmt-btn.active{background:var(--surface);color:var(--pri);box-shadow:var(--sh-xs)}

.editor-wrap{flex:1;position:relative;min-height:300px}
.editor-wrap textarea{
    width:100%;height:100%;min-height:300px;
    border:none;outline:none;resize:none;
    padding:20px 48px 20px 20px;font-size:17px;line-height:1.65;
    background:transparent;color:var(--txt);
}
.editor-wrap textarea::placeholder{color:var(--txt-3)}

.output-wrap{position:relative}
.output-text{
    padding:20px;font-size:17px;line-height:1.65;
    min-height:300px;white-space:pre-wrap;word-wrap:break-word;
}
.output-placeholder{
    position:absolute;top:20px;left:20px;
    font-size:17px;color:var(--txt-3);pointer-events:none;
    transition:opacity var(--dur);
}
.output-placeholder.hidden{opacity:0}

.clear-btn{
    position:absolute;top:14px;right:14px;
    width:30px;height:30px;border-radius:50%;
    background:var(--bg);display:grid;place-items:center;
    color:var(--txt-3);font-size:14px;opacity:0;
    transition:all var(--dur) var(--ease);
}
.editor-wrap:hover .clear-btn,.clear-btn:focus{opacity:1}
.clear-btn:hover{background:var(--red);color:#fff}

.loading-dots{
    position:absolute;top:24px;left:20px;
    display:none;gap:5px;
}
.loading-dots.show{display:flex}
.loading-dots span{
    width:7px;height:7px;border-radius:50%;background:var(--pri);
    animation:dotPulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.15s}
.loading-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotPulse{
    0%,80%,100%{transform:scale(.55);opacity:.35}
    40%{transform:scale(1);opacity:1}
}

.panel-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 16px;border-top:1px solid var(--border-lt);min-height:48px;
}
.char-count{font-size:12px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.out-actions{display:flex;gap:6px;margin-left:auto}
.act-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 11px;border-radius:var(--r-sm);
    font-size:13px;color:var(--txt-2);
    transition:all var(--dur) var(--ease);
}
.act-btn:hover:not(:disabled){background:var(--pri-soft);color:var(--pri)}
.act-btn:disabled{opacity:.35;cursor:default}

.primary-btn{
    padding:10px 22px;border-radius:var(--r-sm);
    background:var(--pri);color:#fff;font-weight:600;font-size:13.5px;
    display:inline-flex;align-items:center;gap:8px;
    transition:background var(--dur);white-space:nowrap;
}
.primary-btn:hover{background:var(--pri-hover)}
.primary-btn:disabled{opacity:.55;cursor:not-allowed}

.lang-arrow{color:var(--txt-3);font-size:12px}

.upload-zone{
    background:var(--surface);border:2px dashed var(--border);
    border-radius:var(--r-lg);padding:56px 40px;text-align:center;
    cursor:pointer;transition:all var(--dur) var(--ease);
    margin-bottom:24px;
}
.upload-zone:hover,.upload-zone.dragover{
    border-color:var(--pri);background:var(--pri-soft);
}
.upload-zone i{font-size:44px;color:var(--pri);margin-bottom:14px;display:block}
.upload-zone h3{font-size:17px;margin-bottom:4px}
.upload-zone p{color:var(--txt-2);margin-bottom:10px;font-size:14.5px}
.upload-hint{font-size:12px;color:var(--txt-3)}

.media-preview-card{
    display:flex;align-items:flex-start;gap:18px;
    background:var(--surface);border-radius:var(--r-lg);
    padding:18px;box-shadow:var(--sh-md);border:1px solid var(--border-lt);
    margin-bottom:24px;
}
.media-preview-card img,
.media-preview-card video{
    max-width:280px;max-height:200px;object-fit:contain;
    border-radius:var(--r-sm);border:1px solid var(--border);
}
.media-preview-card audio{min-width:220px;margin-top:6px}
.media-meta{display:flex;flex-direction:column;gap:10px;min-width:0}
.media-meta span{font-size:13px;color:var(--txt-2);word-break:break-all}
.audio-preview .audio-icon{
    width:60px;height:60px;border-radius:var(--r);
    background:var(--pri-soft);display:grid;place-items:center;
    font-size:24px;color:var(--pri);flex-shrink:0;
}
.doc-preview .doc-icon{
    width:60px;height:60px;border-radius:var(--r);
    background:var(--pri-soft);display:grid;place-items:center;
    font-size:24px;color:var(--pri);flex-shrink:0;
}
.remove-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 14px;border-radius:var(--r-sm);
    border:1px solid var(--red);color:var(--red);
    font-size:13px;font-weight:500;transition:all var(--dur);
    align-self:flex-start;
}
.remove-btn:hover{background:var(--red);color:#fff}

.media-actions-bar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:var(--surface);border-radius:var(--r-lg);
    padding:16px 18px;box-shadow:var(--sh-sm);border:1px solid var(--border-lt);
    margin-bottom:24px;
}
.media-actions-bar select{
    padding:8px 12px;border-radius:var(--r-sm);border:1px solid var(--border);
    font-size:13.5px;background:var(--surface);cursor:pointer;min-width:150px;
}

.loader-box{
    display:flex;flex-direction:column;align-items:center;padding:60px 20px;
}
.spinner{
    width:38px;height:38px;
    border:3px solid var(--border);border-top-color:var(--pri);
    border-radius:50%;animation:spin .7s linear infinite;
    margin-bottom:14px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-box p{font-size:14px;color:var(--txt-2);font-weight:500}

.res-loading{
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:48px 20px;min-height:160px;
}
.res-loading .spinner{
    width:28px;height:28px;border-width:2.5px;margin-bottom:12px;
}
.res-loading p{
    font-size:13px;color:var(--txt-3);font-weight:500;margin:0;
}

.dual-results{display:flex;gap:20px}
.res-col{
    flex:1;background:var(--surface);border-radius:var(--r-lg);
    box-shadow:var(--sh-md);overflow:hidden;border:1px solid var(--border-lt);min-width:0;
}
.res-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 18px;border-bottom:1px solid var(--border-lt);background:var(--surface-2);
}
.res-head h3{font-size:13px;font-weight:600;color:var(--txt-2);display:flex;align-items:center;gap:8px}
.res-head h3 i{color:var(--pri)}
.res-body{
    padding:18px;font-size:14.5px;line-height:1.75;
    max-height:520px;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;
    min-height:180px;color:var(--txt);
}

.res-thumb{padding:14px 18px 0;text-align:center}
.res-thumb img{
    max-width:120px;max-height:90px;object-fit:contain;
    border-radius:var(--r-sm);border:1px solid var(--border);
    display:inline-block;
}

.res-transcript{
    white-space:normal;
    padding:14px;
}
.transcript-turn{
    padding:10px 14px 10px 16px;
    border-left:3px solid var(--speaker-color, var(--pri));
    margin-bottom:10px;
    background:var(--bg);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    transition:background var(--dur);
    animation:turnAppear .3s var(--ease) both;
}
.transcript-turn:last-child{margin-bottom:0}
.transcript-turn:hover{background:var(--border-lt)}
@keyframes turnAppear{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:none}
}
.speaker-name{
    display:flex;align-items:center;gap:6px;
    font-size:12px;font-weight:700;line-height:1.3;
    color:var(--speaker-color, var(--pri));
    margin-bottom:3px;
}
.speaker-name::before{
    content:'';display:block;
    width:7px;height:7px;border-radius:50%;flex-shrink:0;
    background:var(--speaker-color, var(--pri));
}
.speaker-text{
    font-size:14px;line-height:1.65;
    color:var(--txt);
}
.transcript-line{
    padding:4px 0;
    font-size:14px;line-height:1.65;
    color:var(--txt-2);
}
.transcript-partial{
    opacity:.45;
    font-style:italic;
    animation:partialPulse 1.4s ease-in-out infinite;
}
@keyframes partialPulse{
    0%,100%{opacity:.3}
    50%{opacity:.6}
}

.overlay{
    position:fixed;inset:0;background:rgba(15,23,42,.45);
    z-index:500;opacity:0;visibility:hidden;
    transition:all .3s var(--ease);backdrop-filter:blur(2px);
}
.overlay.open{opacity:1;visibility:visible}

.memory-panel{
    position:fixed;top:0;right:0;bottom:0;
    width:480px;max-width:100vw;background:var(--surface);
    box-shadow:var(--sh-xl);z-index:600;
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .3s var(--ease);
}
.memory-panel.open{transform:translateX(0)}

.mem-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.mem-header h2{font-size:17px;display:flex;align-items:center;gap:10px;font-weight:700}
.mem-header h2 i{color:var(--pri)}
.icon-btn{
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;color:var(--txt-3);font-size:15px;
    transition:all var(--dur);
}
.icon-btn:hover{background:var(--bg);color:var(--txt)}

.mem-desc{padding:14px 22px 0;font-size:13px;color:var(--txt-2);line-height:1.55;flex-shrink:0}
.mem-desc em{color:var(--pri);font-style:normal;font-weight:600}

.mem-tabs{display:flex;gap:4px;padding:14px 22px;flex-shrink:0}
.mem-tab{
    flex:1;padding:9px;border-radius:var(--r-sm);
    font-size:13px;font-weight:600;color:var(--txt-2);
    background:var(--bg);display:flex;align-items:center;
    justify-content:center;gap:7px;transition:all var(--dur);
}
.mem-tab:hover{color:var(--pri)}
.mem-tab.active{background:var(--pri);color:#fff}

.mem-body{flex:1;overflow-y:auto;padding:0 22px;display:none}
.mem-body.active{display:block}

.add-form{margin-bottom:16px}
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.form-row input,.add-form textarea{
    flex:1;padding:9px 12px;border-radius:var(--r-sm);
    border:1px solid var(--border);font-size:13.5px;
    outline:none;transition:border-color var(--dur);background:var(--surface);
}
.form-row input:focus,.add-form textarea:focus{border-color:var(--pri)}
.add-form textarea{width:100%;resize:vertical;min-height:72px;line-height:1.5}
.form-row select{
    flex:1;padding:9px 8px;border-radius:var(--r-sm);
    border:1px solid var(--border);font-size:12.5px;background:var(--surface);
}
.arrow-icon{color:var(--txt-3);font-size:11px;flex-shrink:0}

.add-btn{
    padding:9px 18px;border-radius:var(--r-sm);
    background:var(--pri);color:#fff;font-weight:600;font-size:13px;
    display:inline-flex;align-items:center;gap:6px;
    transition:background var(--dur);white-space:nowrap;flex-shrink:0;
}
.add-btn:hover{background:var(--pri-hover)}
.add-btn.wide{width:100%;justify-content:center;margin-top:8px}

.entries{padding-bottom:16px}

.entry{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:var(--r-sm);
    background:var(--bg);margin-bottom:6px;
    animation:fadeUp .25s var(--ease);
}
.entry-body{flex:1;min-width:0}
.entry-terms{font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:7px}
.entry-terms .arr{color:var(--pri);font-size:11px}
.entry-langs{font-size:11px;color:var(--txt-3);margin-top:1px}
.entry-text{font-size:13.5px;line-height:1.45}

.toggle{
    position:relative;width:38px;height:21px;
    background:var(--border);border-radius:11px;
    transition:background var(--dur);flex-shrink:0;cursor:pointer;
}
.toggle.on{background:var(--pri)}
.toggle::after{
    content:'';position:absolute;top:3px;left:3px;
    width:15px;height:15px;border-radius:50%;
    background:#fff;box-shadow:var(--sh-xs);
    transition:transform var(--dur);
}
.toggle.on::after{transform:translateX(17px)}

.del-btn{
    width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;color:var(--txt-3);font-size:12px;
    transition:all var(--dur);flex-shrink:0;
}
.del-btn:hover{background:var(--red);color:#fff}

.empty-state{text-align:center;padding:36px 16px;color:var(--txt-3)}
.empty-state i{font-size:30px;margin-bottom:10px;display:block}
.empty-state p{font-size:13.5px;font-weight:500;color:var(--txt-2);margin-bottom:3px}
.empty-state span{font-size:12.5px}

.mem-footer{
    display:flex;gap:8px;padding:14px 22px;
    border-top:1px solid var(--border);flex-shrink:0;
}
.outline-btn{
    flex:1;padding:9px;border-radius:var(--r-sm);
    border:1px solid var(--border);font-size:13px;font-weight:500;
    display:flex;align-items:center;justify-content:center;gap:7px;
    color:var(--txt-2);transition:all var(--dur);
}
.outline-btn:hover{border-color:var(--pri);color:var(--pri);background:var(--pri-soft)}

.toast-rack{
    position:fixed;bottom:24px;right:24px;z-index:9999;
    display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
    padding:11px 20px;border-radius:var(--r-sm);
    background:var(--txt);color:#fff;font-size:13.5px;font-weight:500;
    box-shadow:var(--sh-lg);display:flex;align-items:center;gap:9px;
    animation:slideIn .3s var(--ease);pointer-events:auto;max-width:380px;
}
.toast.success{background:var(--green)}
.toast.error{background:var(--red)}
.toast.info{background:var(--pri)}
@keyframes slideIn{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}

@media(max-width:960px){
    .translator{flex-direction:column}
    .source-side{border-radius:var(--r-lg) var(--r-lg) 0 0;border-right:1px solid var(--border);border-bottom:none}
    .target-side{border-radius:0 0 var(--r-lg) var(--r-lg)}
    .translator-mid{padding:0}
    .swap-btn{margin:-22px 0;transform:rotate(90deg)}
    .swap-btn:hover{transform:rotate(270deg)}
    .dual-results{flex-direction:column}
    .memory-panel{width:100%}
    .media-preview-card{flex-direction:column;align-items:stretch}
    .media-preview-card img,.media-preview-card video{max-width:100%}
}
@media(max-width:680px){
    .header-inner{padding:0 14px}
    .nav-tab span{display:none}
    .nav-tab{padding:7px 12px}
    .memory-label{display:none}
    .header-link span{display:none}
    .logo-text{font-size:18px}
    .main{padding:16px 12px 40px}
    .editor-wrap textarea,.output-text{font-size:16px;padding:16px}
    .editor-wrap,.editor-wrap textarea{min-height:220px}
    .formality-group{display:none}
    .lang-chips-row{display:none !important}
    .more-chip{display:grid !important}
}