:root {
  --bg:#0d0f17;--bg2:#13162a;--bg3:#1a1e35;--card:#1e2238;--card2:#252a45;
  --border:rgba(255,255,255,0.07);--accent:#e2b714;--accent2:#ff6b6b;--accent3:#4ecdc4;
  --text:#d1d5db;--text2:#8892a4;--text3:#4b5563;--green:#57cc99;--red:#ff6b6b;
  --font-mono:'JetBrains Mono',monospace;--font-ui:'Sora',sans-serif;
  --radius:14px;--radius-sm:8px;--shadow:0 8px 32px rgba(0,0,0,0.4);
  --shadow-accent:0 0 40px rgba(226,183,20,0.15);
}
[data-theme="light"]{
  --bg:#f0f2f8;--bg2:#e4e8f5;--bg3:#dce1f0;--card:#ffffff;--card2:#f5f7ff;
  --border:rgba(0,0,0,0.08);--text:#1a1e35;--text2:#4b5563;--text3:#9ca3af;
  --shadow:0 8px 32px rgba(0,0,0,0.12);--shadow-accent:0 0 40px rgba(226,183,20,0.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;overflow-x:hidden;}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);min-height:100vh;transition:background 0.3s,color 0.3s;}

/* NAVBAR */
.navbar-custom{background:linear-gradient(135deg,#0d0f17 0%,#1a1040 50%,#0d1a2e 100%);border-bottom:1px solid rgba(226,183,20,0.2);padding:0.75rem 1rem;position:sticky;top:0;z-index:1000;backdrop-filter:blur(20px);}
[data-theme="light"] .navbar-custom{background:linear-gradient(135deg,#1a1040 0%,#2d1b69 50%,#1a2a4a 100%);}
.navbar-brand-custom{font-family:var(--font-mono);font-weight:700;font-size:clamp(1rem,4vw,1.25rem);color:var(--accent)!important;letter-spacing:-0.5px;text-decoration:none;}
.navbar-brand-custom span{color:#fff;}
.btn-dark-toggle{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;border-radius:50px;padding:0.4rem 0.9rem;font-size:0.8rem;font-family:var(--font-ui);transition:all 0.2s;display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;}
.btn-dark-toggle:hover{background:rgba(226,183,20,0.2);border-color:var(--accent);color:var(--accent);}

/* TABS */
.main-tabs-wrapper{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 1rem;}
.nav-tabs-custom{border:none;gap:4px;}
.nav-tabs-custom .nav-link{font-family:var(--font-ui);font-weight:600;font-size:clamp(0.8rem,3vw,0.95rem);color:var(--text2);border:none;border-bottom:3px solid transparent;border-radius:0;padding:clamp(0.6rem,2vw,0.85rem) clamp(0.75rem,3vw,1.5rem);transition:all 0.2s;display:flex;align-items:center;gap:8px;background:transparent;}
.nav-tabs-custom .nav-link:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.nav-tabs-custom .nav-link.active{color:var(--accent);border-bottom-color:var(--accent);background:transparent;}

/* CONTAINER */
.app-container{padding:clamp(1rem,3vw,2rem) clamp(0.75rem,3vw,2rem);max-width:1400px;margin:0 auto;}

/* CARDS */
.glass-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1rem,3vw,1.75rem);box-shadow:var(--shadow);transition:all 0.3s;}
.glass-card:hover{border-color:rgba(226,183,20,0.15);}

/* STAT CARDS */
.stat-card{background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:clamp(0.6rem,2vw,1rem) clamp(0.75rem,2vw,1.25rem);text-align:center;position:relative;overflow:hidden;transition:all 0.2s;flex:1 1 0;min-width:0;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent3));opacity:0;transition:opacity 0.3s;}
.stat-card:hover::before,.stat-card.active-stat::before{opacity:1;}
.stat-value{font-family:var(--font-mono);font-size:clamp(1.4rem,5vw,2.2rem);font-weight:700;color:var(--accent);line-height:1;}
.stat-label{font-size:clamp(0.6rem,2vw,0.72rem);color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-top:4px;font-weight:600;}
.stat-sub{font-size:0.65rem;color:var(--text3);margin-top:2px;}
.stats-row{display:flex;gap:clamp(6px,2vw,12px);flex-wrap:wrap;}
@media(max-width:576px){.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}}

/* TYPING CONTROLS */
.typing-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:1.25rem;}
.control-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.btn-time{font-family:var(--font-mono);font-size:0.8rem;padding:0.35rem 0.85rem;border-radius:50px;border:1px solid var(--border);background:var(--card2);color:var(--text2);cursor:pointer;transition:all 0.2s;font-weight:600;}
.btn-time:hover,.btn-time.active{background:var(--accent);color:#0d0f17;border-color:var(--accent);}
.select-custom{font-family:var(--font-ui);font-size:0.85rem;padding:0.4rem 0.75rem;border-radius:50px;border:1px solid var(--border);background:var(--card2);color:var(--text);cursor:pointer;outline:none;transition:all 0.2s;appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238892a4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;}
.select-custom:focus{border-color:var(--accent);}
.btn-mode-toggle{font-family:var(--font-ui);font-size:0.8rem;padding:0.4rem 1rem;border-radius:50px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px;font-weight:600;}
.btn-mode-toggle:hover,.btn-mode-toggle.active{border-color:var(--accent3);color:var(--accent3);}

/* TYPING AREA */
.typing-wrapper{position:relative;border-radius:var(--radius);overflow:hidden;}
#words-display{font-family:var(--font-mono);font-size:clamp(1rem,2.5vw,1.3rem);line-height:2.2;padding:clamp(1rem,3vw,1.5rem);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);min-height:clamp(120px,20vw,180px);overflow:hidden;cursor:text;user-select:none;position:relative;transition:all 0.3s;word-break:break-word;}
#words-display:focus-within{border-color:rgba(226,183,20,0.3);box-shadow:0 0 0 3px rgba(226,183,20,0.05);}
.word{display:inline;}
.char{position:relative;transition:color 0.1s;}
.char.correct{color:var(--green);}
.char.incorrect{color:var(--red);text-decoration:underline wavy var(--red);}
.char.current::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);animation:cursor-blink 0.8s ease infinite;}
@keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:0}}
.char.default{color:var(--text3);}
#hidden-input{position:absolute;opacity:0;width:1px;height:1px;border:none;outline:none;pointer-events:none;top:0;left:0;}
.exam-static-box{font-family:var(--font-mono);font-size:clamp(0.85rem,2vw,1rem);line-height:1.9;padding:clamp(0.75rem,2vw,1.25rem);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;color:var(--text2);max-height:160px;overflow-y:auto;user-select:text;}
#exam-textarea{font-family:var(--font-mono);font-size:clamp(0.9rem,2vw,1.05rem);line-height:1.8;padding:clamp(0.75rem,2vw,1.25rem);background:var(--bg);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);color:var(--text);width:100%;resize:none;outline:none;min-height:clamp(100px,15vw,140px);transition:border-color 0.2s;}
#exam-textarea:focus{border-color:rgba(226,183,20,0.3);}
.timer-ring{position:relative;width:56px;height:56px;flex-shrink:0;}
.timer-ring svg{transform:rotate(-90deg);}
.timer-ring-circle{transition:stroke-dashoffset 1s linear;}
.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:0.7rem;font-weight:700;color:var(--accent);text-align:center;line-height:1;}
@media(max-width:576px){.timer-ring{width:44px;height:44px;}}
.typing-bottom{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:1rem;}
.btn-restart{font-family:var(--font-ui);font-weight:700;font-size:0.85rem;padding:0.5rem 1.4rem;border-radius:50px;border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:8px;}
.btn-restart:hover{background:var(--accent);color:#0d0f17;box-shadow:var(--shadow-accent);}
@media(max-width:480px){.btn-restart{width:100%;justify-content:center;}}
.typing-progress{height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-bottom:1rem;}
.typing-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:2px;transition:width 0.3s;width:0%;}

/* ZEN OVERLAY */
.zen-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem;backdrop-filter:blur(10px);}
.zen-box{width:100%;max-width:820px;background:var(--bg2);border:1px solid rgba(226,183,20,0.25);border-radius:var(--radius);padding:2rem;}
.zen-box #zen-words-display{font-family:var(--font-mono);font-size:clamp(1.1rem,3vw,1.5rem);line-height:2.4;padding:1.5rem;background:transparent;min-height:200px;cursor:text;user-select:none;word-break:break-word;}

/* MODAL */
.modal-custom .modal-content{background:var(--bg2);border:1px solid rgba(226,183,20,0.25);border-radius:var(--radius);color:var(--text);}
.modal-custom .modal-header{border-bottom:1px solid var(--border);}
.modal-custom .modal-footer{border-top:1px solid var(--border);}
.result-metric{text-align:center;padding:1rem;}
.result-value{font-family:var(--font-mono);font-size:2.5rem;font-weight:700;color:var(--accent);}
.result-label{font-size:0.75rem;color:var(--text2);text-transform:uppercase;letter-spacing:1px;}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
@media(max-width:480px){.result-grid{grid-template-columns:repeat(2,1fr);}}

/* LANG STUDIO */
.lang-config-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:1.25rem;}
.lang-dir-arrow{color:var(--accent);font-size:1.1rem;flex-shrink:0;opacity:0.7;}
.btn-swap-langs{background:rgba(226,183,20,0.1);border:1px solid rgba(226,183,20,0.3);color:var(--accent);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.25s;flex-shrink:0;font-size:1rem;}
.btn-swap-langs:hover{background:var(--accent);color:#0d0f17;transform:rotate(180deg);box-shadow:var(--shadow-accent);}
.counter-row{display:flex;gap:12px;flex-wrap:wrap;font-size:0.8rem;color:var(--text2);}
.counter-badge{background:var(--card2);border:1px solid var(--border);border-radius:50px;padding:0.25rem 0.75rem;font-family:var(--font-mono);display:flex;align-items:center;gap:6px;}
.counter-badge span{color:var(--accent);font-weight:700;}
.studio-textarea{width:100%;font-family:var(--font-mono);font-size:clamp(0.9rem,2vw,1.05rem);line-height:1.8;padding:clamp(0.75rem,2vw,1.25rem);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);resize:vertical;outline:none;min-height:clamp(160px,25vw,220px);transition:border-color 0.2s;}
.studio-textarea:focus{border-color:rgba(226,183,20,0.3);}
.studio-textarea.output-area{color:var(--accent3);background:var(--bg2);}
.switch-custom{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.switch-custom input{display:none;}
.switch-track{width:46px;height:24px;background:var(--card2);border:1px solid var(--border);border-radius:50px;position:relative;transition:all 0.2s;}
.switch-track::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--text3);top:2px;left:2px;transition:all 0.2s;}
.switch-custom input:checked+.switch-track{background:rgba(226,183,20,0.2);border-color:var(--accent);}
.switch-custom input:checked+.switch-track::after{background:var(--accent);left:24px;}
.switch-label{font-size:0.85rem;color:var(--text2);font-weight:600;}
.action-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem;}
.btn-action{font-family:var(--font-ui);font-size:0.8rem;font-weight:600;padding:0.5rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card2);color:var(--text);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px;white-space:nowrap;flex:1 0 auto;justify-content:center;}
.btn-action:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2);}
.btn-action.danger:hover{border-color:var(--red);color:var(--red);}
@media(max-width:576px){.btn-action{flex:1 0 calc(50% - 4px);}}

/* TRANSLIT STATUS */
.translit-status{font-size:0.75rem;color:var(--text3);display:flex;align-items:center;gap:6px;height:20px;}
.spinner-sm{width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite;display:none;}
.spinner-sm.show{display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* AUDIO BUTTONS */
.btn-audio{font-family:var(--font-ui);font-size:0.8rem;font-weight:700;padding:0.45rem 1.1rem;border-radius:50px;border:1.5px solid rgba(78,205,196,0.4);background:rgba(78,205,196,0.08);color:var(--accent3);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:7px;white-space:nowrap;min-height:36px;}
.btn-audio:hover{background:rgba(78,205,196,0.18);border-color:var(--accent3);box-shadow:0 0 18px rgba(78,205,196,0.2);transform:translateY(-1px);}
.btn-audio.speaking{background:rgba(255,107,107,0.12);border-color:var(--red);color:var(--red);animation:audio-pulse 1.2s ease infinite;}
.btn-audio.speaking i{animation:speaker-bounce 0.5s ease infinite alternate;}
.btn-audio-output{border-color:rgba(226,183,20,0.4);background:rgba(226,183,20,0.08);color:var(--accent);}
.btn-audio-output:hover{background:rgba(226,183,20,0.18);border-color:var(--accent);box-shadow:0 0 18px rgba(226,183,20,0.2);}
.btn-audio-output.speaking{background:rgba(255,107,107,0.12);border-color:var(--red);color:var(--red);}
@keyframes audio-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0.4);}50%{box-shadow:0 0 0 6px rgba(255,107,107,0);}}
@keyframes speaker-bounce{from{transform:scale(1);}to{transform:scale(1.25);}}
@media(max-width:576px){.btn-audio{width:100%;justify-content:center;}.btn-audio-output{width:100%;}}

/* VOICE-TO-TEXT MIC BUTTON */
.btn-mic{font-family:var(--font-ui);font-size:0.8rem;font-weight:700;padding:0.45rem 1rem;border-radius:50px;border:1.5px solid rgba(87,204,153,0.4);background:rgba(87,204,153,0.08);color:var(--green);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:7px;white-space:nowrap;min-height:36px;}
.btn-mic:hover{background:rgba(87,204,153,0.18);border-color:var(--green);box-shadow:0 0 18px rgba(87,204,153,0.2);}
.btn-mic.recording{background:rgba(255,107,107,0.15);border-color:var(--red);color:var(--red);animation:mic-pulse 1s ease infinite;}
.btn-mic.recording i{animation:mic-shake 0.3s ease infinite alternate;}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0.5);}50%{box-shadow:0 0 0 8px rgba(255,107,107,0);}}
@keyframes mic-shake{from{transform:scale(1) rotate(-5deg);}to{transform:scale(1.2) rotate(5deg);}}
@media(max-width:576px){.btn-mic{width:100%;justify-content:center;}}

/* SECTION LABEL */
.section-label{font-size:0.72rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);font-weight:700;margin-bottom:0.5rem;display:flex;align-items:center;gap:8px;}
.section-label::after{content:'';flex:1;height:1px;background:var(--border);}

/* TOAST */
.toast-container-custom{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;}
.toast-custom{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:0.75rem 1rem;font-size:0.85rem;color:var(--text);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;animation:slide-in 0.3s ease;margin-top:8px;}
@keyframes slide-in{from{transform:translateX(100px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.devanagari{font-family:'Noto Sans Devanagari','JetBrains Mono',monospace;}
.divider{height:1px;background:var(--border);margin:1.25rem 0;}
.tab-content>.tab-pane{animation:fadeIn 0.25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.badge-live{background:rgba(87,204,153,0.15);color:var(--green);border:1px solid rgba(87,204,153,0.3);border-radius:50px;padding:2px 8px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.tap-to-start{font-family:var(--font-ui);font-size:0.8rem;color:var(--text3);text-align:center;padding:0.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
.panel-arrow{display:flex;align-items:center;justify-content:center;padding:0.5rem 0;color:var(--text3);font-size:1.25rem;}
@media(max-width:767px){.panel-arrow{transform:rotate(90deg);}}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:var(--card2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text3);}

/* FOOTER */
.app-footer{background:var(--bg2);border-top:1px solid var(--border);padding:1.5rem 1rem;margin-top:2rem;text-align:center;}

/* FONT DIR TOGGLE */
.font-dir-toggle{display:flex;border:1px solid var(--border);border-radius:50px;overflow:hidden;background:var(--card2);}
.font-dir-btn{font-family:var(--font-ui);font-size:0.78rem;font-weight:600;padding:0.35rem 0.9rem;border:none;background:transparent;color:var(--text2);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:5px;white-space:nowrap;}
.font-dir-btn.active{background:var(--accent);color:#0d0f17;}
.font-dir-btn:hover:not(.active){color:var(--text);}

/* FIND REPLACE BAR */
.find-replace-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:1rem;}
.fr-input{font-family:var(--font-ui);font-size:0.85rem;padding:0.45rem 0.9rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);outline:none;transition:border-color 0.2s;flex:1 1 160px;min-width:140px;}
.fr-input:focus{border-color:rgba(226,183,20,0.4);}
.fr-input::placeholder{color:var(--text3);}
@media(max-width:576px){.fr-input{flex:1 0 100%;}}

/* FOOTER */
.app-footer{background:var(--bg2);border-top:1px solid var(--border);padding:1.5rem 1rem;margin-top:2rem;text-align:center;}
.footer-links{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:0.75rem;}
.footer-links a{color:var(--text2);font-size:0.8rem;text-decoration:none;transition:color 0.2s;}
.footer-links a:hover{color:var(--accent);}
.footer-copy{font-size:0.75rem;color:var(--text3);}

/* POLICY MODAL */
.policy-modal .modal-content{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);max-height:85vh;}
.policy-modal .modal-body{overflow-y:auto;max-height:65vh;font-size:0.9rem;line-height:1.8;color:var(--text2);}
.policy-modal h5{color:var(--accent);font-family:var(--font-mono);font-size:0.95rem;margin-top:1.25rem;margin-bottom:0.4rem;}
.policy-modal h5:first-child{margin-top:0;}
.policy-modal p{margin-bottom:0.75rem;}
.policy-modal ul{padding-left:1.25rem;margin-bottom:0.75rem;}
.policy-modal ul li{margin-bottom:0.3rem;}

/* MIC INFO BANNER */
.mic-info-banner{background:linear-gradient(135deg,rgba(226,183,20,0.12),rgba(78,205,196,0.08));border:1px solid rgba(226,183,20,0.25);border-radius:var(--radius-sm);padding:0.75rem 1rem;font-size:0.8rem;color:var(--text2);display:flex;align-items:flex-start;gap:10px;margin-bottom:0.75rem;}
.mic-info-banner i{color:var(--accent);font-size:1.1rem;flex-shrink:0;margin-top:1px;}

/* IMAGE HUB */
.hub-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1rem,3vw,1.5rem);margin-bottom:1.25rem;transition:border-color 0.2s;}
.hub-section:hover{border-color:rgba(226,183,20,0.2);}
.hub-section-title{font-family:var(--font-mono);font-size:0.9rem;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:1rem;}
.hub-section-title .hub-badge{background:rgba(226,183,20,0.15);border:1px solid rgba(226,183,20,0.3);border-radius:50px;padding:2px 10px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;}

/* DROP ZONE */
.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.5rem) 1rem;text-align:center;cursor:pointer;transition:all 0.25s;background:var(--bg);position:relative;overflow:hidden;}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:rgba(226,183,20,0.04);box-shadow:0 0 0 4px rgba(226,183,20,0.06);}
.drop-zone.has-files{border-color:var(--green);background:rgba(87,204,153,0.04);}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.drop-zone-icon{font-size:clamp(2rem,6vw,2.8rem);color:var(--text3);margin-bottom:0.5rem;display:block;transition:color 0.2s;}
.drop-zone:hover .drop-zone-icon,.drop-zone.dragover .drop-zone-icon{color:var(--accent);}
.drop-zone.has-files .drop-zone-icon{color:var(--green);}
.drop-zone-text{font-size:0.85rem;color:var(--text2);font-weight:600;}
.drop-zone-sub{font-size:0.72rem;color:var(--text3);margin-top:4px;}

/* FILE PREVIEW LIST */
.file-preview-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:0.75rem;}
.file-chip{background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.3rem 0.75rem;font-size:0.75rem;color:var(--text2);display:flex;align-items:center;gap:6px;max-width:200px;}
.file-chip i{color:var(--accent);flex-shrink:0;}
.file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-chip .chip-remove{margin-left:4px;cursor:pointer;color:var(--text3);flex-shrink:0;}
.file-chip .chip-remove:hover{color:var(--red);}

/* IMAGE PREVIEW THUMBNAILS */
.img-thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:0.75rem;}
.img-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);border:2px solid var(--border);cursor:pointer;transition:border-color 0.2s;}
.img-thumb:hover{border-color:var(--accent);}

/* HUB STATUS */
.hub-status{display:flex;align-items:center;gap:8px;font-size:0.8rem;margin-top:0.75rem;min-height:28px;}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.status-dot.idle{background:var(--text3);}
.status-dot.processing{background:var(--accent);animation:pulse 1s infinite;}
.status-dot.done{background:var(--green);}
.status-dot.error{background:var(--red);}
.hub-progress{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-top:6px;}
.hub-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:2px;width:0%;transition:width 0.3s;}

/* QUALITY SLIDER */
.quality-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--bg3);outline:none;cursor:pointer;}
.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.quality-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);}
.quality-value-display{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--accent);min-width:48px;text-align:center;}

/* SIZE CHIPS */
.size-chip-group{display:flex;gap:6px;flex-wrap:wrap;}
.size-chip{background:var(--card2);border:1px solid var(--border);border-radius:50px;padding:0.3rem 0.85rem;font-size:0.78rem;font-weight:700;color:var(--text2);cursor:pointer;transition:all 0.2s;}
.size-chip:hover,.size-chip.active{background:var(--accent);color:#0d0f17;border-color:var(--accent);}

/* BIG ACTION BUTTON */
.btn-hub{font-family:var(--font-ui);font-weight:700;font-size:0.9rem;padding:0.65rem 1.5rem;border-radius:50px;border:2px solid var(--accent);background:linear-gradient(135deg,rgba(226,183,20,0.15),rgba(226,183,20,0.05));color:var(--accent);cursor:pointer;transition:all 0.25s;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.btn-hub:hover:not(:disabled){background:var(--accent);color:#0d0f17;box-shadow:var(--shadow-accent);transform:translateY(-1px);}
.btn-hub:disabled{opacity:0.4;cursor:not-allowed;}
.btn-hub.success{border-color:var(--green);color:var(--green);background:rgba(87,204,153,0.1);}
.btn-hub.success:hover{background:var(--green);color:#0d0f17;}
@media(max-width:576px){.btn-hub{width:100%;justify-content:center;}}

/* PDF ORDER LIST */
.pdf-order-list{list-style:none;padding:0;margin:0.5rem 0;}
.pdf-order-item{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.4rem 0.75rem;margin-bottom:6px;font-size:0.8rem;color:var(--text2);cursor:grab;}
.pdf-order-item:active{cursor:grabbing;}
.pdf-order-item i.drag-handle{color:var(--text3);flex-shrink:0;}
.pdf-order-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.pdf-order-item .item-size{color:var(--text3);font-size:0.7rem;flex-shrink:0;}
.pdf-order-item .item-remove{color:var(--text3);cursor:pointer;flex-shrink:0;}
.pdf-order-item .item-remove:hover{color:var(--red);}

/* CONVERTED IMAGE PREVIEW */
.converted-img-preview{max-width:100%;max-height:200px;object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--border);margin-top:0.5rem;display:none;}

/* ── OCR SCANNER TAB ── */
.ocr-drop-zone{border:2.5px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;transition:all 0.3s;background:var(--bg);position:relative;overflow:hidden;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:2rem 1rem;}
.ocr-drop-zone:hover,.ocr-drop-zone.dragover{border-color:var(--accent);background:rgba(226,183,20,0.04);box-shadow:0 0 0 4px rgba(226,183,20,0.06);}
.ocr-drop-zone.has-image{padding:0;background:var(--bg2);border-color:var(--green);}
.ocr-drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.ocr-dz-icon{font-size:3rem;color:var(--text3);transition:color 0.3s;}
.ocr-drop-zone:hover .ocr-dz-icon,.ocr-drop-zone.dragover .ocr-dz-icon{color:var(--accent);}
.ocr-dz-title{font-size:0.92rem;font-weight:700;color:var(--text2);}
.ocr-dz-sub{font-size:0.75rem;color:var(--text3);}
.ocr-img-preview{width:100%;height:220px;object-fit:contain;border-radius:var(--radius) var(--radius) 0 0;display:none;padding:8px;}
.ocr-filename{font-size:0.75rem;color:var(--text3);padding:6px 10px;background:var(--card2);border-radius:0 0 var(--radius) var(--radius);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;}
.ocr-progress-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;margin-top:0.75rem;display:none;}
.ocr-progress-bar-wrap{height:8px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-top:8px;}
.ocr-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:4px;width:0%;transition:width 0.3s ease;}
.ocr-status-text{font-size:0.78rem;color:var(--text2);font-family:var(--font-mono);margin-top:6px;min-height:18px;}
.ocr-result-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;height:100%;}
.ocr-result-header{background:var(--card2);border-bottom:1px solid var(--border);padding:0.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.ocr-result-title{font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;}
.ocr-word-badge{background:rgba(226,183,20,0.15);border:1px solid rgba(226,183,20,0.3);color:var(--accent);font-family:var(--font-mono);font-size:0.75rem;font-weight:700;padding:3px 12px;border-radius:50px;white-space:nowrap;}
.ocr-textarea{flex:1;width:100%;font-family:var(--font-mono);font-size:clamp(0.85rem,1.8vw,1rem);line-height:1.9;padding:1.25rem;background:var(--bg);border:none;outline:none;resize:none;color:var(--text);min-height:300px;}
.ocr-textarea::placeholder{color:var(--text3);}
.ocr-result-footer{background:var(--card2);border-top:1px solid var(--border);padding:0.85rem 1.25rem;display:flex;gap:8px;flex-wrap:wrap;}
.btn-ocr{font-family:var(--font-ui);font-size:0.8rem;font-weight:700;padding:0.45rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.btn-ocr:hover:not(:disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.btn-ocr:disabled{opacity:0.35;cursor:not-allowed;}
.btn-ocr.export-word{background:rgba(226,183,20,0.1);border-color:rgba(226,183,20,0.4);color:var(--accent);}
.btn-ocr.export-word:hover:not(:disabled){background:var(--accent);color:#0d0f17;box-shadow:var(--shadow-accent);}
.btn-ocr.clr:hover:not(:disabled){border-color:var(--red);color:var(--red);}
.btn-ocr-start{font-family:var(--font-ui);font-weight:800;font-size:1rem;padding:0.8rem 1.5rem;border-radius:50px;border:none;background:linear-gradient(135deg,#e2b714,#f5cc30);color:#0d0f17;cursor:pointer;transition:all 0.25s;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:0.75rem;box-shadow:0 4px 24px rgba(226,183,20,0.35);letter-spacing:0.3px;}
.btn-ocr-start:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px rgba(226,183,20,0.5);}
.btn-ocr-start:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:0 2px 8px rgba(226,183,20,0.15);}
@media(max-width:576px){.ocr-result-footer{justify-content:center;}.btn-ocr{flex:1 0 calc(50% - 4px);justify-content:center;}}

/* ─── TypeStudio PRO scaffold additions (Modules 4 & 6) ─── */
@keyframes ts-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shake{animation:ts-shake 0.15s ease;}
.no-select{-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;}
.no-select input,.no-select textarea,.no-select [contenteditable]{user-select:text;}
@media print{.no-print{display:none!important;}}