:root{
    --bg:#0a0b0e;
    --bg-soft:#0f1116;
    --surface:#141720;
    --surface-2:#1a1e28;
    --border:#242936;
    --border-hi:#333a4a;
    --text:#e8eaf0;
    --muted:#8990a3;
    --accent:#6d8cff;
    --accent-2:#a78bfa;
    --accent-soft:rgba(109,140,255,.14);
    --danger:#ff6b6b;
    --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    min-height:100vh;
    font-family:var(--font);
    color:var(--text);
    background:
      radial-gradient(900px 520px at 12% -12%, rgba(109,140,255,.18), transparent 60%),
      radial-gradient(760px 460px at 96% -4%, rgba(167,139,250,.12), transparent 58%),
      var(--bg);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  button{font-family:inherit}
  svg{display:block}

  /* ---------------- Top bar ---------------- */
  .topbar{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 24px;
    border-bottom:1px solid rgba(36,41,54,.75);
    background:linear-gradient(to bottom, rgba(10,11,14,.94), rgba(10,11,14,.62));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .brand{display:flex;align-items:center;gap:10px}
  .brand-mark{
    display:grid;
    place-items:center;
    width:34px;height:34px;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(150deg,var(--accent),var(--accent-2));
    box-shadow:0 10px 24px -12px rgba(109,140,255,.9);
  }
  .brand-name{
    font-size:17px;
    font-weight:600;
    letter-spacing:-.01em;
  }

  /* ---------------- Buttons ---------------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    font-size:14px;
    font-weight:500;
    line-height:1;
    color:var(--text);
    background:var(--surface-2);
    border:1px solid transparent;
    border-radius:11px;
    cursor:pointer;
    transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
  }
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
  .btn.primary{
    color:#fff;
    background:linear-gradient(180deg,#7d99ff,#5a78f0);
    box-shadow:0 14px 30px -14px rgba(109,140,255,.95);
    padding:12px 20px;
  }
  .btn.ghost{background:transparent;border-color:var(--border);color:var(--muted)}
  .btn.ghost:hover{color:var(--text);border-color:var(--border-hi);background:rgba(255,255,255,.02)}
  .btn.danger{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.35);color:#ffa1a1}
  .btn.danger:hover{background:rgba(255,107,107,.2)}
  .btn.small{padding:8px 13px;font-size:13px;border-radius:9px}
  .badge{
    min-width:20px;
    padding:2px 6px;
    font-size:11px;
    font-weight:600;
    color:var(--accent);
    background:var(--accent-soft);
    border-radius:999px;
  }
  .icon-btn{
    display:grid;place-items:center;
    width:34px;height:34px;
    color:var(--muted);
    background:transparent;
    border:1px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    transition:.16s;
  }
  .icon-btn:hover{color:var(--text);border-color:var(--border-hi)}

  /* ---------------- Layout ---------------- */
  .wrap{
    width:100%;
    max-width:880px;
    margin:0 auto;
    padding:56px 24px 96px;
  }
  .hero{text-align:center;margin-bottom:38px}
  .hero h1{
    margin:0 0 16px;
    font-size:clamp(28px,4.6vw,46px);
    line-height:1.12;
    letter-spacing:-.025em;
    font-weight:650;
  }
  .grad{
    background:linear-gradient(95deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p{
    max-width:620px;
    margin:0 auto;
    font-size:15px;
    line-height:1.75;
    color:var(--muted);
  }
  .hero p strong{color:#c3c9d8;font-weight:550}

  /* ---------------- Card ---------------- */
  .card{
    padding:22px;
    border:1px solid var(--border);
    border-radius:18px;
    background:linear-gradient(180deg,var(--surface),var(--bg-soft));
    box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  }
  .tabs{
    display:inline-flex;
    gap:4px;
    padding:4px;
    margin-bottom:18px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg-soft);
  }
  .tab{
    padding:8px 20px;
    font-size:14px;
    color:var(--muted);
    background:transparent;
    border:0;
    border-radius:9px;
    cursor:pointer;
    transition:.16s;
  }
  .tab:hover{color:var(--text)}
  .tab.active{
    color:var(--text);
    background:var(--surface-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .panel.hidden{display:none}

  /* ---------------- Dropzone ---------------- */
  .dropzone{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:40px 20px;
    text-align:center;
    color:var(--muted);
    border:1.5px dashed var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.012);
    cursor:pointer;
    transition:.2s;
  }
  .dropzone:hover,
  .dropzone.drag{
    color:var(--text);
    border-color:var(--accent);
    background:var(--accent-soft);
  }
  .dz-title{font-size:14px;font-weight:500}
  .dz-sub{font-size:12px;color:var(--muted)}

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    max-width:100%;
    padding:7px 11px;
    font-size:12.5px;
    color:#c8cedd;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:9px;
  }
  .chip em{font-style:normal;color:var(--muted);font-size:11.5px}
  .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}

  textarea{
    width:100%;
    min-height:180px;
    padding:15px;
    font-family:inherit;
    font-size:14px;
    line-height:1.65;
    color:var(--text);
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:13px;
    outline:none;
    resize:vertical;
    transition:.18s;
  }
  textarea::placeholder{color:#5c6274}
  textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

  .field{display:block;margin-top:18px}
  .field span{
    display:block;
    margin-bottom:7px;
    font-size:12.5px;
    font-weight:500;
    color:var(--muted);
  }
  .field em{font-style:normal;color:#5c6274}
  .field input{
    width:100%;
    padding:12px 14px;
    font-family:inherit;
    font-size:14px;
    color:var(--text);
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:11px;
    outline:none;
    transition:.18s;
  }
  .field input::placeholder{color:#5c6274}
  .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

  .actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:20px;
  }
  .hint{font-size:12.5px;color:#5c6274}

  /* ---------------- Drawer ---------------- */
  .overlay{
    position:fixed;
    inset:0;
    z-index:40;
    background:rgba(5,6,9,.62);
    backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
  }
  .overlay.show{opacity:1;pointer-events:auto}

  .drawer{
    position:fixed;
    top:0;right:0;
    z-index:50;
    display:flex;
    flex-direction:column;
    width:min(432px,100%);
    height:100%;
    background:var(--surface);
    border-left:1px solid var(--border);
    transform:translateX(102%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .drawer.open{transform:translateX(0)}

  .drawer-head{padding:20px 20px 14px;border-bottom:1px solid var(--border)}
  .dh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .dh-top h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}

  .storage-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    font-size:12px;
    color:var(--muted);
  }
  .storage-row b{color:#c3c9d8;font-weight:550}
  .bar{
    height:6px;
    border-radius:999px;
    background:var(--bg-soft);
    border:1px solid var(--border);
    overflow:hidden;
  }
  .bar-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transition:width .4s ease;
  }

  .drawer-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 20px 10px;
  }
  .selection-bar{
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 20px 10px;
  }
  .selection-bar .group{display:flex;gap:8px}
  .selection-bar span{font-size:13px;color:#c3c9d8}
  body.selection-mode .drawer-tools{display:none}
  body.selection-mode .selection-bar{display:flex}

  .list{
    flex:1;
    overflow-y:auto;
    padding:6px 16px 28px;
    overscroll-behavior:contain;
  }
  .list::-webkit-scrollbar{width:10px}
  .list::-webkit-scrollbar-thumb{background:#252b39;border-radius:999px;border:3px solid var(--surface)}
  .list::-webkit-scrollbar-track{background:transparent}

  .item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    margin-bottom:8px;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:12px;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    touch-action:manipulation;
    transition:border-color .16s, background .16s;
  }
  .item:hover{border-color:var(--border-hi)}
  .item.selected{border-color:var(--accent);background:var(--accent-soft)}

  .check{
    display:none;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    width:20px;height:20px;
    color:#fff;
    border:1.5px solid #394052;
    border-radius:6px;
    background:transparent;
    transition:.15s;
  }
  body.selection-mode .check{display:flex}
  .check svg{opacity:0;transition:.15s}
  .item.selected .check{background:var(--accent);border-color:var(--accent)}
  .item.selected .check svg{opacity:1}

  .item-icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:36px;height:36px;
    color:var(--accent);
    background:var(--surface-2);
    border-radius:10px;
  }
  .item-body{flex:1;min-width:0}
  .item-title{
    font-size:14px;
    font-weight:500;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .item-meta{
    margin-top:3px;
    font-size:11.5px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:64px 24px;
    text-align:center;
    color:var(--muted);
  }
  .empty p{margin:0;font-size:14px;color:#c3c9d8;font-weight:500}
  .empty span{font-size:12.5px}

  /* ---------------- Modal ---------------- */
  .modal-wrap{
    position:fixed;
    inset:0;
    z-index:70;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(5,6,9,.7);
    backdrop-filter:blur(4px);
  }
  .modal-wrap.hidden{display:none}
  .modal{
    width:100%;
    max-width:360px;
    padding:22px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  }
  .modal h3{margin:0 0 8px;font-size:16px;font-weight:600}
  .modal p{margin:0 0 20px;font-size:13.5px;line-height:1.65;color:var(--muted)}
  .modal-actions{display:flex;justify-content:flex-end;gap:10px}

  /* ---------------- Toasts ---------------- */
  .toast-wrap{
    position:fixed;
    left:50%;
    bottom:26px;
    z-index:80;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    transform:translateX(-50%);
    pointer-events:none;
  }
  .toast{
    padding:11px 16px;
    font-size:13px;
    color:var(--text);
    background:var(--surface-2);
    border:1px solid var(--border-hi);
    border-radius:11px;
    box-shadow:0 20px 40px -20px rgba(0,0,0,.9);
    animation:toastIn .22s ease;
    transition:opacity .25s ease, transform .25s ease;
  }
  .toast.ok{border-color:rgba(109,140,255,.5)}
  .toast.warn{border-color:rgba(255,196,92,.45)}
  .toast.error{border-color:rgba(255,107,107,.45)}
  .toast.out{opacity:0;transform:translateY(8px)}
  @keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

  @media (max-width:520px){
    .wrap{padding:36px 16px 80px}
    .card{padding:16px}
    .topbar{padding:14px 16px}
    .brand-name{display:none}
    .actions{gap:10px}
    .hint{width:100%}
  }
  
  /* ---------------- Smooth scroll + anchor offset ---------------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------------- Hero links ---------------- */
.hero-links{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 22px;
}
.hero-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.hero-link:hover{
  color:var(--text);
  border-color:var(--border-hi);
  background:rgba(255,255,255,.03);
  transform:translateY(-1px);
}
.hero-link:focus-visible{
  outline:none;
  color:var(--text);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------------- Info sections (About / Disclaimer) ---------------- */
.info-section{
  margin-top:24px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),var(--bg-soft));
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  scroll-margin-top:90px; /* biar tidak ketutup topbar sticky */
}
.info-section h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
}
.info-section p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.info-section p + p{margin-top:10px}
.info-section strong{color:#c3c9d8;font-weight:550}

/* ---------------- Footer ---------------- */
.footer{
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding:28px 24px 56px;
  text-align:center;
  font-size:12.5px;
  color:#5c6274;
}
.footer a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.footer a:hover{
  color:var(--text);
  border-bottom-color:var(--border-hi);
}
.footer a:focus-visible{
  outline:none;
  color:var(--text);
  border-bottom-color:var(--accent);
}

@media (max-width:520px){
  .footer{padding:22px 16px 44px}
}