/* ===== CSS Variables - Dark Glassmorphism Theme ===== */
:root {
  --c-primary: #4fd1c5;
  --c-primary-hover: #38b2ac;
  --c-primary-light: rgba(79,209,197,0.12);
  --c-primary-lighter: rgba(79,209,197,0.06);
  --c-primary-surface: rgba(79,209,197,0.15);
  --c-accent: #4fd1c5;
  --c-accent-hover: #38b2ac;
  --c-accent-light: rgba(79,209,197,0.1);
  --c-bg: #0e1a2b;
  --c-bg-gradient: linear-gradient(135deg, #0e1a2b 0%, #162435 40%, #1a2d40 100%);
  --c-card: rgba(20,40,60,0.65);
  --c-card-solid: #14283c;
  --c-card-border: rgba(79,209,197,0.15);
  --c-glass: rgba(25,50,70,0.5);
  --c-glass-border: rgba(79,209,197,0.2);
  --c-text: #e2e8f0;
  --c-text-secondary: #a0aec0;
  --c-text-muted: #718096;
  --c-danger: #fc8181;
  --c-danger-hover: #f56565;
  --c-overlay: rgba(10,20,30,0.75);
  --c-drop-bg: rgba(79,209,197,0.04);
  --c-drop-border: rgba(79,209,197,0.25);
  --c-active-bg: rgba(79,209,197,0.12);
  --c-active-border: #4fd1c5;
  --c-inactive-bg: rgba(25,50,70,0.4);
  --c-inactive-border: rgba(79,209,197,0.12);
  --c-chip-selected-bg: rgba(79,209,197,0.15);
  --c-chip-selected-border: #4fd1c5;
  --c-tab-active: #4fd1c5;
  --c-tab-inactive: #718096;
  --c-glow: rgba(79,209,197,0.3);

  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --convert-margin: 36px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-dialog: 0 8px 32px rgba(0,0,0,0.5), 0 0 60px rgba(79,209,197,0.08);
  --shadow-glow: 0 0 20px rgba(79,209,197,0.15);
  --font: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs: 13px; --fs-sm: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 24px;
  --transition: 0.2s ease;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
body{font-family:var(--font);color:var(--c-text);background:var(--c-bg-gradient);background-attachment:fixed;line-height:1.4;font-size:var(--fs-md);min-height:100vh;overflow-x:hidden}

/* ===== Header ===== */
.header{display:flex;align-items:center;justify-content:space-between;padding:10px var(--sp-lg);background:rgba(14,26,43,0.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--c-card-border);position:sticky;top:0;z-index:10;height:60px}
.header__title{display:flex;align-items:center;gap:var(--sp-sm);font-size:var(--fs-lg);font-weight:600;color:var(--c-primary)}
.header__title svg{width:24px;height:24px}
.lang-switcher{padding:var(--sp-sm) var(--sp-md);border:1px solid var(--c-inactive-border);border-radius:var(--r-sm);background:var(--c-inactive-bg);color:var(--c-text);font-size:var(--fs-md);cursor:pointer;backdrop-filter:blur(8px);color-scheme:dark}
.lang-switcher:hover{border-color:var(--c-primary)}

/* ===== Main ===== */
.main{max-width:780px;margin:0 auto;padding:var(--sp-lg)}

/* ===== Drop Zone ===== */
.drop-zone{background:var(--c-glass);border:2px dashed var(--c-drop-border);border-radius:var(--r-lg);padding:var(--sp-xl) var(--sp-lg);text-align:center;cursor:pointer;transition:all var(--transition);backdrop-filter:blur(12px)}
.drop-zone:hover,.drop-zone--dragover{border-color:var(--c-primary);background:rgba(79,209,197,0.08);box-shadow:var(--shadow-glow)}
.drop-zone__icon{font-size:48px;margin-bottom:var(--sp-md);opacity:.6}
.drop-zone__text{font-size:var(--fs-lg);color:var(--c-text-secondary)}
.drop-zone__hint{font-size:var(--fs-md);color:var(--c-text-muted);margin-top:var(--sp-sm)}

/* ===== Video Preview ===== */
.video-preview{display:none;background:var(--c-card);backdrop-filter:blur(16px);border-radius:var(--r-lg);border:1px solid var(--c-card-border);overflow:hidden}
.video-preview--active{display:block}
.video-preview__player{position:relative;width:100%;aspect-ratio:16/9;background:#0a1520;display:flex;align-items:center;justify-content:center}
.video-preview__player video{width:100%;height:100%;object-fit:contain}
.video-preview__close{position:absolute;top:var(--sp-sm);right:var(--sp-sm);width:32px;height:32px;border:none;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0.7;transition:opacity var(--transition),background var(--transition);z-index:2}
.video-preview__close:hover{opacity:1;background:rgba(252,129,129,0.85)}
.video-preview__info{display:flex;flex-wrap:wrap;gap:var(--sp-xs) 0;padding:var(--sp-sm) var(--sp-md);font-size:var(--fs-md);background:var(--c-glass);border-top:1px solid var(--c-card-border);justify-content:center;align-items:center}
.video-preview__info-item span:first-child{display:none}
.video-preview__info-item:first-child{width:100%;text-align:center;overflow:hidden}
.video-preview__info-item:first-child span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;color:var(--c-text-muted)}
.video-preview__info-item:not(:first-child){display:inline-flex;align-items:center}
.video-preview__info-item:not(:first-child) span:last-child{font-size:var(--fs-sm);font-weight:300;color:var(--c-text-muted);letter-spacing:0.3px}
.video-preview__info-item:nth-child(2){order:2}
.video-preview__info-item:nth-child(3){order:1}
.video-preview__info-item:nth-child(4){order:3}
.video-preview__info-item:not(:first-child):not(:last-child)::after{content:'•';color:var(--c-text-muted);margin:0 var(--sp-sm)}

/* ===== Tool Buttons ===== */
.tools{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-sm);margin-top:var(--sp-lg)}
.tool-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-md) var(--sp-sm);border:1.5px solid var(--c-inactive-border);border-radius:var(--r-md);background:var(--c-glass);backdrop-filter:blur(8px);cursor:pointer;transition:all var(--transition);position:relative}
.tool-btn:hover{border-color:var(--c-primary);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.tool-btn--active{border-color:var(--c-active-border);background:rgba(79,209,197,0.12);box-shadow:0 0 0 3px rgba(79,209,197,0.1),var(--shadow-glow)}
.tool-btn--active .tool-btn__icon{background:rgba(79,209,197,0.2);color:#4fd1c5}
.tool-btn--active::after{content:'✓';position:absolute;top:4px;right:6px;font-size:11px;color:#0e1a2b;font-weight:700;background:#4fd1c5;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.tool-btn__icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--c-primary-light);color:var(--c-primary)}
.tool-btn__icon svg{width:22px;height:22px}
.tool-btn__label{font-size:var(--fs-md);font-weight:600;color:var(--c-text);margin-top:4px}
.tool-btn__value{font-size:13px;color:var(--c-text-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Tabs ===== */
.tabs{margin-top:var(--sp-lg);background:var(--c-card);backdrop-filter:blur(16px);border-radius:var(--r-lg);border:1.5px solid var(--c-card-border);overflow:hidden}
.tabs__header{display:flex;gap:0;border-bottom:1px solid var(--c-card-border)}
.tab-btn{flex:1;padding:var(--sp-md) var(--sp-lg);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:var(--fs-lg);font-weight:600;color:var(--c-text-muted);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:var(--sp-sm);white-space:nowrap;overflow:hidden}
.tab-btn svg{flex-shrink:0}
.tab-btn:hover{color:var(--c-primary)}
.tab-btn--active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.tab-panel{display:none;padding:var(--sp-md);padding-top:var(--sp-md)}
.tab-panel--active{display:block}

/* ===== Tab Content: Video Settings ===== */
.settings-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-sm)}
.setting-item{display:flex;flex-direction:column;gap:var(--sp-xs)}
.setting-item__label{font-size:var(--fs-sm);color:var(--c-text-muted);font-weight:500}
.setting-item__select{padding:12px var(--sp-md);padding-right:36px;border:1px solid var(--c-inactive-border);border-radius:var(--r-sm);font-size:var(--fs-md);color:var(--c-text);background:var(--c-inactive-bg);color-scheme:dark;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234fd1c5' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.setting-item__select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 2px rgba(79,209,197,0.2)}

/* ===== Tab Content: Output Size ===== */
.size-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-sm)}
.size-chip{padding:12px var(--sp-sm);border:1.5px solid var(--c-inactive-border);border-radius:var(--r-sm);background:var(--c-inactive-bg);font-size:var(--fs-md);font-weight:500;color:var(--c-text);cursor:pointer;transition:all var(--transition);text-align:center;box-sizing:border-box}
.size-chip:hover{border-color:var(--c-primary)}
.size-chip--selected{border-color:var(--c-chip-selected-border);background:var(--c-chip-selected-bg);color:var(--c-primary)}
.size-chip--custom{display:flex;align-items:center;justify-content:center;font-size:13px}
.size-chip--custom input[type="checkbox"]{display:none}
.size-chip--custom.active{border-color:var(--c-chip-selected-border);background:var(--c-chip-selected-bg);color:var(--c-primary)}
.size-chip--input{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px}
.size-chip--input input{width:60px;border:none;background:transparent;color:var(--c-text);font-size:var(--fs-md);font-weight:500;text-align:center;outline:none}
.size-chip--input input::placeholder{color:var(--c-text-muted);opacity:0.6}
.size-chip--input input:disabled{opacity:0.4}
.size-chip--input span{color:var(--c-text-muted);font-size:13px}

/* ===== Convert Button ===== */
.convert-section{margin-top:var(--convert-margin);display:flex;justify-content:center;padding:0}
.convert-btn{display:flex;align-items:center;justify-content:center;gap:var(--sp-sm);padding:16px 0;background:linear-gradient(135deg,#38b2ac,#4fd1c5);color:#0e1a2b;border:none;border-radius:var(--r-md);font-size:var(--fs-lg);font-weight:600;cursor:pointer;transition:all var(--transition);box-shadow:0 4px 20px rgba(79,209,197,0.3);width:50%;text-align:center}
.convert-btn:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(79,209,197,0.4);background:linear-gradient(135deg,#319795,#38b2ac)}
.convert-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.convert-btn svg{width:22px;height:22px}

/* ===== Dialog ===== */
.dialog-overlay{display:none;position:fixed;inset:0;background:var(--c-overlay);z-index:100;align-items:center;justify-content:center;padding:var(--sp-md)}
.dialog-overlay--open{display:flex}
.dialog{background:var(--c-card);backdrop-filter:blur(16px);border-radius:var(--r-lg);box-shadow:var(--shadow-dialog);border:1px solid rgba(79,209,197,0.12);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:dlgIn .2s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-lg) var(--sp-lg) var(--sp-md)}
.dialog__title{font-size:var(--fs-xl);font-weight:600;color:var(--c-text)}
.dialog__close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--c-text-muted);font-size:24px;transition:all var(--transition)}
.dialog__close:hover{background:rgba(255,255,255,.08);color:var(--c-text)}
.dialog__body{padding:0 var(--sp-lg) var(--sp-md)}
.dialog__video{width:100%;aspect-ratio:16/9;background:#0a1220;border-radius:var(--r-sm);overflow:hidden;margin-bottom:var(--sp-md)}
.dialog__video video{width:100%;height:100%;object-fit:contain}
.dialog__footer{display:flex;gap:var(--sp-sm);justify-content:flex-end;padding:var(--sp-md) var(--sp-lg) var(--sp-lg);border-top:1px solid var(--c-card-border)}
.dialog-btn{padding:12px var(--sp-lg);border:none;border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:500;color:var(--c-text);cursor:pointer;transition:all var(--transition)}
.dialog-btn--apply{background:var(--c-primary);color:#0e1a2b}
.dialog-btn--apply:hover{background:var(--c-primary-hover)}
.dialog-btn--remove{background:transparent;color:var(--c-text-muted);border:1.5px solid var(--c-inactive-border)}
.dialog-btn--remove:hover{background:rgba(239,68,68,0.1);color:var(--c-danger);border-color:var(--c-danger)}

/* ===== Form Elements ===== */
.form-group{margin-bottom:var(--sp-md)}
.form-group__label{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--c-text-secondary);margin-bottom:var(--sp-xs)}
.form-group__input,.form-group__select{width:100%;padding:12px var(--sp-md);padding-right:36px;border:1px solid var(--c-inactive-border);border-radius:var(--r-sm);font-size:var(--fs-md);color:var(--c-text);background:var(--c-inactive-bg);color-scheme:dark;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234fd1c5' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;box-shadow:var(--shadow-sm)}
.form-group__input{background-image:none;padding-right:var(--sp-md)}
.form-group__input:focus,.form-group__select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 2px rgba(79,209,197,0.2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md)}
.format-chips{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.format-chip{padding:12px var(--sp-lg);border:1.5px solid var(--c-inactive-border);border-radius:var(--r-sm);background:var(--c-inactive-bg);font-size:var(--fs-md);font-weight:500;color:var(--c-text);cursor:pointer;transition:all var(--transition)}
.format-chip:hover{border-color:var(--c-primary)}
.format-chip--selected{border-color:var(--c-chip-selected-border);background:var(--c-chip-selected-bg);color:var(--c-primary)}

/* Slider range */
.range-slider{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--c-primary-surface);outline:none}
.range-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--c-primary);cursor:pointer;border:2px solid rgba(255,255,255,0.9);box-shadow:0 1px 6px rgba(0,0,0,.3),0 0 8px rgba(79,209,197,0.3)}

/* Rotate/Flip options */
.transform-options{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-sm)}
.transform-option{display:flex;flex-direction:column;align-items:center;gap:var(--sp-xs);padding:var(--sp-md);border:1.5px solid var(--c-inactive-border);border-radius:var(--r-md);background:var(--c-inactive-bg);color:var(--c-text);cursor:pointer;transition:all var(--transition);font-size:var(--fs-md);font-weight:500}
.transform-option:hover{border-color:var(--c-primary)}
.transform-option--selected{border-color:var(--c-primary);background:var(--c-chip-selected-bg);color:var(--c-primary)}
.transform-option__icon{font-size:24px}
.flip-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm)}

/* Crop overlay */
.crop-container{position:relative;width:100%;aspect-ratio:16/9;background:#0a1220;overflow:hidden;margin-bottom:var(--sp-md)}
.crop-container video{width:100%;height:100%;object-fit:contain}
.crop-rect{position:absolute;border:2px solid var(--c-primary);background:linear-gradient(0deg, rgba(79,209,197,0.15) 1px, transparent 1px),linear-gradient(90deg, rgba(79,209,197,0.15) 1px, transparent 1px);background-size:20px 20px;background-color:rgba(79,209,197,0.1);cursor:move;box-shadow:0 0 0 9999px rgba(0,0,0,0.6),inset 0 0 0 1px rgba(79,209,197,0.4);touch-action:none}
.crop-rect__handle{position:absolute;width:12px;height:12px;background:#4fd1c5;border:2px solid rgba(255,255,255,0.9);border-radius:50%;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.4),0 0 8px rgba(79,209,197,0.3)}
.crop-rect__tl{top:-6px;left:-6px;cursor:nwse-resize}
.crop-rect__tr{top:-6px;right:-6px;cursor:nesw-resize}
.crop-rect__bl{bottom:-6px;left:-6px;cursor:nesw-resize}
.crop-rect__br{bottom:-6px;right:-6px;cursor:nwse-resize}

/* Video controls (crop dialog) */
.video-controls{display:flex;align-items:center;gap:var(--sp-sm);padding:var(--sp-sm) 0}
.video-controls__btn{width:36px;height:36px;border:none;border-radius:var(--r-sm);background:var(--c-primary);color:#0e1a2b;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.video-controls__btn:hover{background:var(--c-primary-hover)}
.video-controls__slider{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--c-inactive-border);border-radius:3px;cursor:pointer}
.video-controls__slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--c-primary);border-radius:50%;cursor:pointer}
.video-controls__time{font-size:var(--fs-sm);color:var(--c-text-secondary);min-width:70px;text-align:right}

/* Speed options */
.speed-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-sm)}
.speed-chips--grid{display:grid;grid-template-columns:repeat(5,1fr)}
.speed-chip{padding:12px var(--sp-sm);border:1.5px solid var(--c-inactive-border);border-radius:var(--r-sm);background:var(--c-inactive-bg);font-size:var(--fs-md);font-weight:500;color:var(--c-text);cursor:pointer;transition:all var(--transition);text-align:center}
.speed-chip:hover{border-color:var(--c-primary)}
.speed-chip--selected{border-color:var(--c-chip-selected-border);background:var(--c-chip-selected-bg);color:var(--c-primary)}

/* Volume slider */
.volume-slider-wrap{display:flex;align-items:center;gap:var(--sp-md)}
.volume-slider-wrap .range-slider{flex:1}
.volume-value{font-size:var(--fs-lg);font-weight:600;color:var(--c-primary);min-width:48px;text-align:right}

/* ===== Footer ===== */
.footer{text-align:center;padding:var(--sp-xl);color:var(--c-text-muted);font-size:var(--fs-sm)}

/* ===== Mobile Convert Bar ===== */
.mobile-convert-bar{display:none}

/* ===== Responsive ===== */
@media(max-width:640px){
  .main{padding:var(--sp-md);padding-bottom:90px}
  .tools{grid-template-columns:repeat(3,1fr)}
  .convert-section{display:none}
  .mobile-convert-bar{display:block;position:fixed;bottom:0;left:0;right:0;padding:var(--sp-md);background:linear-gradient(to top,var(--c-bg) 80%,transparent);z-index:100}
  .convert-btn--mobile{width:100%;font-size:var(--fs-lg);padding:14px;border-radius:var(--r-lg)}
  .dialog{max-width:100%;border-radius:var(--r-md)}
  .dialog__body{padding:0 var(--sp-sm) var(--sp-sm)}
  .dialog__footer{flex-direction:row}
  .settings-row{grid-template-columns:1fr}
  .transform-options{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .speed-chips--grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .speed-chip{padding:10px 6px;font-size:14px}
}