/* ========================================================================
   VidFetch — Dark Metallic Silver Theme
   Base: #1e2124 · Not pitch-black · Semi-dark industrial
   ======================================================================== */

/* ===== Design Tokens ===== */
:root{
  --bg-sidebar:#17191c;
  --bg-main:#1e2124;
  --bg-card:#1c1f23;
  --bg-input:#141618;
  --bg-active:#252930;
  --border:#2e3136;
  --border-hover:#4a505a;
  --text:#d0d5de;
  --text-sec:#7e8694;
  --text-muted:#4a505a;
  --placeholder:#3d4249;

  --btn-dl-bg:#38404a;
  --btn-dl-border:#4e5660;
  --btn-fix-bg:#2a2518;
  --btn-fix-border:#3d3420;
  --btn-fix-text:#9a8e6a;

  --done-bg:#1e2c1e;
  --done-text:#6b8f6b;
  --done-border:#2d4a2d;
  --error-bg:#2a1e1e;
  --error-text:#8f5050;
  --error-border:#4a2d2d;

  --radius-card:8px;
  --radius-btn:6px;
  --radius-pill:10px;
  --sidebar-w:210px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--bg-main);
  color:var(--text);
  font-size:13px;
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
i.ti{font-size:16px;line-height:1}

/* ========================================================================
   APP LAYOUT
   ======================================================================== */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.main__content{padding:18px;flex:1;overflow-y:auto}

/* ========================================================================
   SIDEBAR
   ======================================================================== */
.sidebar{
  width:var(--sidebar-w);
  background:var(--bg-sidebar);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  border-right:0.5px solid var(--border);
  position:relative;
}
.sidebar__logo{
  display:flex;align-items:center;gap:10px;padding:16px 14px;
}
.sidebar__logo-icon{
  width:30px;height:30px;border-radius:6px;background:#3a3d42;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar__app-name{font-size:14px;font-weight:500;display:block}
.sidebar__app-sub{font-size:10px;color:var(--text-muted);display:block}

.sidebar__nav{
  display:flex;flex-direction:column;padding:6px 10px;gap:2px;flex:1;
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:6px;color:var(--text-sec);transition:background .12s,color .12s;
}
.nav-item i{flex-shrink:0}
.nav-item:hover{background:#22262b;color:#b4bbc6}
.nav-item.active{
  background:var(--bg-active);border:0.5px solid #383d44;color:#c8cdd6;
}

.sidebar__storage{
  border-top:0.5px solid var(--border);padding:12px 14px;
}
.sidebar__storage-row{
  display:flex;justify-content:space-between;font-size:11px;
  color:var(--text-muted);margin-bottom:6px;
}
.sidebar__storage-bar{
  height:4px;background:var(--bg-active);border-radius:3px;overflow:hidden;
}
.sidebar__storage-fill{
  height:100%;background:#5a6070;border-radius:3px;
}
.sidebar__storage-path{
  font-size:10px;color:#3d4249;display:block;margin-top:6px;word-break:break-all;
}

.sidebar__hamburger{
  display:none;
  width:32px;height:32px;border-radius:6px;background:var(--bg-active);
  border:0.5px solid var(--border);align-items:center;justify-content:center;
  flex-shrink:0;
}

/* ========================================================================
   TOPBAR
   ======================================================================== */
.topbar{
  background:var(--bg-card);
  border-bottom:0.5px solid var(--border);
  padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.topbar__title{
  font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;
}
.topbar__actions{display:flex;gap:8px}

/* ========================================================================
   BUTTONS
   ======================================================================== */
.btn{
  background:var(--bg-active);
  border:0.5px solid #383d44;
  border-radius:var(--radius-btn);
  font-size:12px;
  padding:8px 12px;
  transition:background .12s;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover:not(:disabled){background:#2d323a}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--ghost{background:transparent;border-color:transparent}
.btn--ghost:hover:not(:disabled){background:#22262b}
.btn--primary{
  background:var(--bg-active);border:0.5px solid var(--border-hover);
  color:var(--text);font-weight:500;
}
.btn--primary:hover:not(:disabled){background:#44484e}
.btn--fix{
  background:var(--btn-fix-bg);border:0.5px solid var(--btn-fix-border);
  color:var(--btn-fix-text);
}
.btn--fix:hover:not(:disabled){background:#332d1e;color:#c4b07a}

/* ========================================================================
   CARDS
   ======================================================================== */
.card{
  background:var(--bg-card);
  border:0.5px solid var(--border);
  border-radius:var(--radius-card);
  padding:16px;
  margin-bottom:14px;
}

/* ========================================================================
   SECTION LABEL (uppercase, tiny)
   ======================================================================== */
.section-label{
  font-size:10px;letter-spacing:0.8px;color:var(--text-muted);
  display:flex;align-items:center;gap:5px;margin-bottom:10px;
}

/* ========================================================================
   URL INPUT CARD
   ======================================================================== */
.url-card__row{display:flex;gap:8px;align-items:stretch}
.input{
  flex:1;min-width:0;
  background:var(--bg-input);border:0.5px solid var(--border);
  border-radius:var(--radius-btn);padding:9px 12px;font-size:13px;color:var(--text);
}
.input::placeholder{color:var(--placeholder)}
.input:focus{outline:none;border-color:var(--border-hover)}
.url-card__msg{font-size:11px;margin-top:8px;min-height:14px}
.url-card__msg--error{color:var(--error-text)}

/* ========================================================================
   PREVIEW CARD
   ======================================================================== */
.preview-card__head{
  display:flex;gap:12px;padding-bottom:12px;border-bottom:0.5px solid var(--border);
}
.preview-card__thumb{
  width:96px;height:54px;border-radius:4px;background:var(--bg-active);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);flex-shrink:0;
  background-size:cover;background-position:center;
}
.preview-card__thumb--loaded i{display:none}
.preview-card__title{font-size:13px;font-weight:500;margin-bottom:6px;line-height:1.35}
.preview-card__detail{
  display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text-muted);
}
.preview-card__detail span{display:inline-flex;align-items:center;gap:4px}
.preview-card__body{padding:12px 0}
.preview-card__actions{
  display:flex;gap:8px;padding-top:12px;border-top:0.5px solid var(--border);
}

/* Format grid */
.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.format-cell{
  background:var(--bg-input);border:0.5px solid var(--border);
  border-radius:var(--radius-btn);padding:8px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:border-color .12s,background .12s;cursor:pointer;
}
.format-cell:hover{border-color:var(--border-hover);color:#c8cdd6}
.format-cell.selected{background:var(--bg-active);border-color:#5a6070;color:var(--text)}
.format-cell__q{font-size:14px;font-weight:500}
.format-cell__sub{font-size:10px;color:var(--placeholder)}

/* Download button */
.btn--download{
  flex:1;
  background:var(--btn-dl-bg);border:0.5px solid var(--btn-dl-border);
  color:#ccd3de;font-weight:500;justify-content:center;padding:10px;
}
.btn--download:hover:not(:disabled){background:#424b56}

/* ========================================================================
   LOADING / ERROR
   ======================================================================== */
.preview-loading{
  display:flex;align-items:center;gap:8px;color:var(--text-sec);
  padding:14px;font-size:12px;
}
.preview-error{display:flex;align-items:center;gap:10px;color:var(--error-text)}
.preview-error__icon i{font-size:20px}
.preview-error__text{font-size:12px}
.ti-spin{animation:ti-spin 1s linear infinite;display:inline-block}
@keyframes ti-spin{to{transform:rotate(360deg)}}

/* ========================================================================
   HISTORY SECTION
   ======================================================================== */
.history__head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
}
.history__empty{
  font-size:12px;color:var(--text-muted);padding:14px 0;text-align:center;
}
.history__item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--bg-card);border:0.5px solid var(--border);
  border-radius:var(--radius-card);margin-bottom:8px;
}
.history__item:hover{border-color:var(--border-hover)}
.history__item-thumb{
  width:42px;height:28px;border-radius:4px;background:var(--bg-active);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);flex-shrink:0;overflow:hidden;
  background-size:cover;background-position:center;
}
.history__item-thumb--loaded i{display:none}
.history__item-info{flex:1;min-width:0}
.history__item-title{
  font-size:12px;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history__item-meta{font-size:10px;color:var(--text-muted);display:flex;gap:8px;margin-top:2px}
.history__item-meta span{display:inline-flex;align-items:center;gap:3px}
.history__item-actions{display:flex;gap:4px;flex-shrink:0}
.btn--copy{
  background:var(--bg-active);border:0.5px solid #383d44;
  border-radius:var(--radius-btn);padding:6px 12px;font-size:11px;
  transition:background .12s;color:var(--text-sec);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.btn--copy:hover{background:#2d323a;color:var(--text)}
.btn--copy.copied{color:var(--done-text)}

/* ========================================================================
   BADGES
   ======================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;
  padding:3px 8px;border-radius:var(--radius-pill);border:0.5px solid;
}
.badge i{font-size:11px}
.badge--done{background:var(--done-bg);color:var(--done-text);border-color:var(--done-border)}
.badge--error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}

/* ========================================================================
   DOWNLOAD OVERLAY (in-page download progress)
   ======================================================================== */
.dl-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(14,16,18,.85);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.dl-overlay.active{opacity:1;pointer-events:auto}
.dl-overlay__box{
  background:var(--bg-card);border:0.5px solid var(--border);
  border-radius:var(--radius-card);padding:28px 36px;
  text-align:center;min-width:300px;
}
.dl-overlay__icon{font-size:28px;color:var(--text-sec);margin-bottom:10px;display:block}
.dl-overlay__msg{font-size:13px;font-weight:500;margin-bottom:4px}
.dl-overlay__detail{font-size:11px;color:var(--text-muted);margin-bottom:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
.dl-overlay__bar{
  height:4px;background:var(--bg-active);border-radius:3px;overflow:hidden;margin-bottom:8px;
}
.dl-overlay__fill{
  height:100%;background:#5a6070;border-radius:3px;width:0%;transition:width .4s;
}
.dl-overlay__stats{
  display:flex;justify-content:space-between;font-size:12px;font-weight:500;
  color:var(--text);margin-bottom:2px;
}
.dl-overlay__stats--sub{
  font-size:11px;font-weight:400;color:var(--text-muted);margin-bottom:12px;
}

.dl-overlay__cancel{
  margin-top:12px;font-size:11px;color:var(--text-muted);padding:6px 16px;
}
.dl-overlay__cancel:hover{color:var(--text)}

/* ========================================================================
   SPLASH SCREEN
   ======================================================================== */
.splash{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(14,16,18,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:1;transition:opacity .4s ease;
}
.splash.hidden{opacity:0;pointer-events:none}
.splash__box{
  background:var(--bg-card);
  border:0.5px solid var(--border);
  border-radius:12px;
  padding:28px 32px;
  width:320px;max-width:90vw;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  animation:splashIn .35s ease;
}
@keyframes splashIn{
  from{transform:translateY(12px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.splash__logo{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.splash__logo-icon{
  width:40px;height:40px;border-radius:8px;background:#3a3d42;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.splash__logo-icon i{font-size:22px}
.splash__app-name{font-size:16px;font-weight:500}
.splash__app-sub{font-size:11px;color:var(--text-muted)}
.splash__desc{
  font-size:12px;color:var(--text-sec);line-height:1.6;
  margin-bottom:16px;padding-bottom:16px;
  border-bottom:0.5px solid var(--border);
}
.splash__pwa{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--done-text);
  background:var(--done-bg);border:0.5px solid var(--done-border);
  border-radius:6px;padding:8px 10px;margin-bottom:16px;
}
.splash__pwa i{font-size:14px;flex-shrink:0}
.splash__timer{
  height:3px;background:var(--bg-active);
  border-radius:3px;overflow:hidden;margin-bottom:14px;
}
.splash__timer-bar{
  height:100%;background:#5a6070;border-radius:3px;
  width:100%;
  transition:width 3s linear;
}
.splash__timer-bar.running{width:0%}
.splash__skip{
  width:100%;padding:10px;border-radius:6px;
  background:var(--bg-active);border:0.5px solid var(--border-hover);
  font-size:13px;font-weight:500;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .12s;
}
.splash__skip:hover{background:#2d323a}

/* ========================================================================
   PWA INSTALL BUTTON (sidebar)
   ======================================================================== */
.sidebar__install{
  padding:10px 14px;border-top:0.5px solid var(--border);
}
.btn--install{
  width:100%;padding:9px 12px;border-radius:6px;
  background:var(--done-bg);border:0.5px solid var(--done-border);
  color:var(--done-text);font-size:12px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .12s;cursor:pointer;
}
.btn--install:hover{background:#253525}

/* ========================================================================
   MOBILE RESPONSIVE
   ======================================================================== */
@media (max-width:760px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:50;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .sidebar--open{transform:translateX(0)}
  /* Hamburger pindah ke topbar di mobile */
  .sidebar__hamburger{display:flex}
  .topbar{gap:8px}
  .topbar__title{flex:1}
  .topbar__btn-text{display:none}
  .topbar__actions .btn{padding:8px}
  .format-grid{grid-template-columns:repeat(2,1fr)}
  .main__content{padding:12px}
}
@media (max-width:420px){
  .format-grid{grid-template-columns:1fr}
}