/* ═══════════════════════════════════════════════════
   SUBTITLEIY — Modern Warm UI
   Design: Warm sand base, coral accents, cinema-inspired
   ═══════════════════════════════════════════════════ */

:root {
    /* Core palette */
    --bg:          #FEFBF6;
    --bg-warm:     #FBF7F0;
    --surface:     #FFFFFF;
    --surface-alt: #F7F3EC;
    --border:      #E8E0D4;
    --border-light:#F0EBE3;

    /* Text */
    --text:        #1A1612;
    --text-muted:  #7A7168;
    --text-light:  #A39B90;

    /* Accent — warm coral */
    --accent:      #E8573D;
    --accent-hover:#D44A31;
    --accent-soft: #FFF0EC;
    --accent-glow: rgba(232, 87, 61, 0.15);

    /* Secondary — warm amber */
    --amber:       #E8A817;
    --amber-soft:  #FFF8E1;

    /* Success / Info */
    --success:     #2D9E6C;
    --success-soft:#EAFAF2;
    --info:        #3B82C4;
    --info-soft:   #EBF4FF;

    /* Gradient */
    --grad-accent: linear-gradient(135deg, #E8573D 0%, #E8A817 100%);

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(26,22,18,0.04), 0 1px 2px rgba(26,22,18,0.06);
    --shadow-md:   0 4px 16px rgba(26,22,18,0.06), 0 2px 4px rgba(26,22,18,0.04);
    --shadow-lg:   0 12px 40px rgba(26,22,18,0.08), 0 4px 12px rgba(26,22,18,0.04);
    --shadow-glow: 0 0 0 3px var(--accent-glow);

    /* Radius */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;

    /* Transitions */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --duration:    0.25s;
}

/* ─── RESET & BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:'DM Sans',system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.65;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;font-weight:700;line-height:1.2}
a{color:var(--accent);text-decoration:none;transition:color var(--duration) var(--ease)}
a:hover{color:var(--accent-hover)}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select{font-family:inherit;font-size:inherit}
.container{max-width:900px;margin:0 auto;padding:0 24px}

/* ─── HEADER ─── */
.site-header{
    position:sticky;top:0;z-index:100;
    background:rgba(254,251,246,0.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border-light);
}
.site-header .container{
    display:flex;align-items:center;justify-content:space-between;
    height:64px;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-family:'Outfit',sans-serif;font-weight:700;font-size:1.25rem}
.logo-icon{color:var(--accent);display:flex}
.logo-accent{color:var(--accent)}
.header-nav{display:flex;gap:28px}
.header-nav a{color:var(--text-muted);font-size:0.9rem;font-weight:500;transition:color var(--duration) var(--ease)}
.header-nav a:hover{color:var(--text)}

/* ─── HERO ─── */
.hero{
    padding:72px 0 48px;
    text-align:center;
    background:var(--bg);
    position:relative;
    overflow:hidden;
}
.hero::before{
    content:'';position:absolute;top:-120px;left:50%;transform:translateX(-50%);
    width:800px;height:800px;
    background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
    pointer-events:none;
    opacity:0.5;
}
.hero-badge{
    display:inline-flex;align-items:center;
    padding:6px 16px;border-radius:100px;
    background:var(--success-soft);color:var(--success);
    font-size:0.82rem;font-weight:600;
    margin-bottom:20px;
    letter-spacing:0.02em;
}
.hero h1{
    font-size:clamp(2rem,5vw,3.2rem);
    color:var(--text);
    max-width:750px;margin:0 auto 16px;
    position:relative;
}
.text-gradient{
    background:var(--grad-accent);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-sub{
    font-size:1.1rem;
    color:var(--text-muted);
    max-width:580px;margin:0 auto;
    line-height:1.7;
}

/* ─── UPLOAD ZONE ─── */
.upload-zone{
    border:2px dashed var(--border);
    border-radius:var(--radius-lg);
    padding:48px 24px;
    text-align:center;
    cursor:pointer;
    transition:all var(--duration) var(--ease);
    background:var(--surface);
    position:relative;
    margin-bottom:24px;
}
.upload-zone:hover,.upload-zone.dragover{
    border-color:var(--accent);
    background:var(--accent-soft);
    box-shadow:var(--shadow-glow);
}
.upload-zone.has-file{
    border-style:solid;
    border-color:var(--border);
    padding:16px 24px;
    cursor:default;
}
.upload-icon{color:var(--accent);margin-bottom:12px;display:inline-flex}
.upload-title{font-size:1.05rem;font-weight:500;color:var(--text);margin-bottom:4px}
.upload-hint{font-size:0.85rem;color:var(--text-light)}

/* File info (shown after upload) */
.file-info{
    display:flex;align-items:center;gap:14px;
    text-align:left;
}
.file-info-icon{
    width:44px;height:44px;border-radius:var(--radius-sm);
    background:var(--accent-soft);color:var(--accent);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.file-info-text{display:flex;flex-direction:column;flex:1;min-width:0}
.file-name{font-weight:600;font-size:0.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-meta{font-size:0.8rem;color:var(--text-light)}
.file-remove{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;color:var(--text-light);
    transition:all var(--duration) var(--ease);
    flex-shrink:0;
}
.file-remove:hover{background:var(--accent-soft);color:var(--accent)}

/* ─── TAB BAR ─── */
.tab-bar{
    display:flex;gap:4px;
    background:var(--surface-alt);
    border-radius:var(--radius-md);
    padding:4px;
    margin-bottom:24px;
}
.tab{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 16px;border-radius:var(--radius-sm);
    font-weight:600;font-size:0.9rem;
    color:var(--text-muted);
    transition:all var(--duration) var(--ease);
}
.tab:hover{color:var(--text)}
.tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.tab svg{flex-shrink:0}
.tab-badge{
    font-size:0.72rem;font-weight:700;
    padding:2px 8px;border-radius:100px;
    background:var(--amber-soft);color:var(--amber);
    letter-spacing:0.02em;
}

/* ─── PANELS ─── */
.panel{position:relative}
.panel-card{
    background:var(--surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:var(--shadow-sm);
}
.panel-card h2{font-size:1.35rem;margin-bottom:6px}
.panel-desc{color:var(--text-muted);font-size:0.92rem;margin-bottom:28px}

/* ─── SHIFT CONTROLS ─── */
.shift-controls{margin-bottom:28px}
.shift-input-group{
    display:flex;align-items:center;gap:12px;
    justify-content:center;
    margin-bottom:10px;
}
.shift-btn{
    width:48px;height:48px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;font-weight:600;
    background:var(--surface-alt);color:var(--text);
    border:1px solid var(--border);
    transition:all var(--duration) var(--ease);
}
.shift-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.shift-input-wrap{position:relative;display:flex;align-items:center}
.shift-input{
    width:140px;height:56px;
    text-align:center;font-size:1.5rem;font-weight:700;
    font-family:'Outfit',sans-serif;
    border:2px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
    color:var(--text);
    transition:border-color var(--duration) var(--ease);
    -moz-appearance:textfield;
    padding-bottom:14px;
}
.shift-input::-webkit-inner-spin-button,
.shift-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.shift-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-glow)}
.shift-unit{
    position:absolute;bottom:7px;left:0;right:0;
    text-align:center;
    font-size:0.65rem;color:var(--text-light);font-weight:500;
    pointer-events:none;letter-spacing:0.08em;text-transform:uppercase;
}
.shift-hint{text-align:center;font-size:0.82rem;color:var(--text-light);margin-top:4px}

/* ─── LANGUAGE SELECT ─── */
.translate-controls{margin-bottom:28px}
.lang-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:20px}
.lang-row .lang-select-wrap{flex:1;margin-bottom:0}
.lang-arrow{font-size:1.4rem;color:var(--text-light);padding-bottom:12px;flex-shrink:0}
.lang-select-wrap{margin-bottom:20px}
.lang-select-wrap label{
    display:block;font-weight:600;font-size:0.88rem;
    color:var(--text);margin-bottom:8px;
}
.lang-select{
    width:100%;height:50px;padding:0 16px;
    border:2px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface);color:var(--text);
    font-size:0.95rem;font-weight:500;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237A7168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    transition:border-color var(--duration) var(--ease);
}
.lang-select:focus{outline:none;border-color:var(--accent);box-shadow:var(--shadow-glow)}

/* reCAPTCHA */
.recaptcha-wrap{display:flex;justify-content:flex-start}

/* Translate footer */
.translate-footer{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:16px;
    margin-top:8px;
}
.remaining-badge{
    display:inline-flex;align-items:center;gap:6px;
    font-size:0.82rem;color:var(--text-muted);font-weight:500;
}
.remaining-badge svg{flex-shrink:0;opacity:0.6}

/* ─── PREVIEW ─── */
.preview-area{
    background:var(--surface-alt);
    border-radius:var(--radius-md);
    overflow:hidden;
    margin-bottom:24px;
}
.preview-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;
    border-bottom:1px solid var(--border-light);
    font-size:0.82rem;font-weight:600;color:var(--text-muted);
}
.preview-tag{
    font-size:0.72rem;font-weight:700;
    padding:2px 10px;border-radius:100px;
    background:var(--info-soft);color:var(--info);
    text-transform:uppercase;letter-spacing:0.04em;
}
.preview-tag.modified{background:var(--success-soft);color:var(--success)}
.preview-tag.translated{background:var(--amber-soft);color:var(--amber)}
.preview-lines{
    padding:16px;
    font-family:'DM Mono','Courier New',monospace;
    font-size:0.82rem;line-height:1.7;
    color:var(--text-muted);
    max-height:220px;overflow-y:auto;
    white-space:pre-wrap;word-break:break-word;
}
.preview-lines .sub-index{color:var(--accent);font-weight:700}
.preview-lines .sub-time{color:var(--info);font-weight:500}
.preview-lines .sub-text{color:var(--text)}
.preview-lines .sub-block{margin-bottom:12px}

/* ─── BUTTONS ─── */
.btn-primary{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 28px;border-radius:var(--radius-md);
    background:var(--accent);color:#fff;
    font-weight:600;font-size:0.95rem;
    transition:all var(--duration) var(--ease);
    box-shadow:0 2px 8px rgba(232,87,61,0.2);
}
.btn-primary:hover:not(:disabled){
    background:var(--accent-hover);
    box-shadow:0 4px 16px rgba(232,87,61,0.3);
    transform:translateY(-1px);
}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary svg{flex-shrink:0}
.btn-download{width:100%;justify-content:center}

/* ─── LOADING OVERLAY ─── */
.loading-overlay[hidden]{display:none!important}
.loading-overlay{
    position:absolute;inset:0;z-index:10;
    background:rgba(254,251,246,0.92);
    backdrop-filter:blur(4px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:var(--radius-lg);
}
.loading-spinner{
    width:40px;height:40px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
    margin-bottom:16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-weight:600;font-size:1rem;color:var(--text);margin-bottom:4px}
.loading-hint{font-size:0.82rem;color:var(--text-light)}

/* ─── HOW IT WORKS ─── */
.how-section{padding:80px 0;background:var(--bg-warm)}
.how-section h2{text-align:center;font-size:1.8rem;margin-bottom:48px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{
    background:var(--surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:28px;
    text-align:center;
    transition:box-shadow var(--duration) var(--ease);
}
.step-card:hover{box-shadow:var(--shadow-md)}
.step-num{
    width:40px;height:40px;border-radius:50%;
    background:var(--grad-accent);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Outfit',sans-serif;font-weight:800;font-size:1.1rem;
    margin-bottom:16px;
}
.step-card h3{font-size:1.05rem;margin-bottom:8px}
.step-card p{font-size:0.88rem;color:var(--text-muted);line-height:1.6}

/* ─── FEATURES ─── */
.features-section{padding:80px 0;background:var(--bg)}
.features-section h2{text-align:center;font-size:1.8rem;margin-bottom:48px}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature-card{
    background:var(--surface);
    border:1px solid var(--border-light);
    border-radius:var(--radius-lg);
    padding:28px;
    transition:box-shadow var(--duration) var(--ease);
}
.feature-card:hover{box-shadow:var(--shadow-md)}
.feature-icon{font-size:1.8rem;margin-bottom:12px;display:block}
.feature-card h3{font-size:1rem;margin-bottom:6px}
.feature-card p{font-size:0.88rem;color:var(--text-muted);line-height:1.6}

/* ─── FAQ ─── */
.faq-section{padding:80px 0;background:var(--bg-warm)}
.faq-section h2{text-align:center;font-size:1.8rem;margin-bottom:48px}
.faq-list{max-width:700px;margin:0 auto}
.faq-item{
    border:1px solid var(--border-light);
    border-radius:var(--radius-md);
    margin-bottom:12px;
    background:var(--surface);
    overflow:hidden;
    transition:box-shadow var(--duration) var(--ease);
}
.faq-item:hover{box-shadow:var(--shadow-sm)}
.faq-item summary{
    padding:18px 24px;
    font-weight:600;font-size:0.95rem;
    cursor:pointer;
    list-style:none;
    display:flex;align-items:center;justify-content:space-between;
    color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
    content:'+';font-size:1.3rem;font-weight:400;color:var(--text-light);
    transition:transform var(--duration) var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq-item p{
    padding:0 24px 18px;
    font-size:0.9rem;color:var(--text-muted);line-height:1.7;
}

/* ─── FOOTER ─── */
.site-footer{padding:56px 0 32px;background:var(--text);color:rgba(255,255,255,0.6)}
.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand .logo-text{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.15rem;color:#fff;display:block;margin-bottom:8px}
.footer-brand .logo-accent{color:var(--accent)}
.footer-brand p{font-size:0.85rem;line-height:1.6;max-width:280px}
.footer-links h4{color:#fff;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;font-family:'Outfit',sans-serif}
.footer-links a{display:block;font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:10px;transition:color var(--duration) var(--ease)}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:24px}
.footer-bottom p{font-size:0.8rem;text-align:center}

/* ─── TOAST ─── */
.toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
    padding:14px 24px;border-radius:var(--radius-md);
    font-size:0.9rem;font-weight:500;
    box-shadow:var(--shadow-lg);
    z-index:1000;
    transition:transform 0.4s var(--ease),opacity 0.4s var(--ease);
    opacity:0;pointer-events:none;
    max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.toast.success{background:var(--success);color:#fff}
.toast.error{background:#D44A31;color:#fff}
.toast.warning{background:var(--amber);color:var(--text)}

/* ─── RESPONSIVE ─── */
@media(max-width:768px){
    .hero{padding:48px 0 32px}
    .hero h1{font-size:1.8rem}
    .hero-sub{font-size:0.95rem}

    .steps-grid{grid-template-columns:1fr}
    .features-grid{grid-template-columns:1fr}
    .footer-content{grid-template-columns:1fr;gap:28px}

    .panel-card{padding:24px 20px}
    .shift-unit{position:static;display:block;text-align:center;margin-top:4px}
    .shift-input-wrap{flex-direction:column}

    .translate-footer{flex-direction:column;align-items:stretch}
    .btn-translate{width:100%;justify-content:center}

    .tab{font-size:0.82rem;padding:10px 12px}
    .tab svg{width:16px;height:16px}
}

@media(max-width:480px){
    .container{padding:0 16px}
    .site-header .container{height:56px}
    .header-nav{gap:16px}
    .header-nav a{font-size:0.82rem}
    .upload-zone{padding:32px 16px}
    .shift-input-group{gap:8px}
    .shift-btn{width:40px;height:40px;font-size:1.2rem}
    .shift-input{width:120px;height:48px;font-size:1.3rem}
}

/* ─── ANIMATIONS ─── */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}
.hero-badge,.hero h1,.hero-sub{animation:fadeInUp 0.6s var(--ease) both}
.hero h1{animation-delay:0.1s}
.hero-sub{animation-delay:0.2s}