/* ============================================================
   panel.css — panel aplikasi (isi konverter) + halaman pengaturan
   ============================================================ */

.panel-scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
  animation:fade calc(.3s / max(var(--speed),.001)) ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}

.panel{
  position:fixed; z-index:50; top:0; right:0; bottom:0;
  width:min(620px, 100%);
  background:rgba(14,17,20,.96);
  backdrop-filter:blur(18px);
  box-shadow:-30px 0 80px -20px rgba(0,0,0,.9);
  display:flex; flex-direction:column;
  color:#fff;
  animation:panelIn calc(.4s / max(var(--speed),.001)) var(--ease);
}
body.theme-light .panel{background:rgba(248,249,250,.97); color:#10151a}
@keyframes panelIn{from{transform:translateX(60px); opacity:0} to{transform:none; opacity:1}}
.panel.is-closing{animation:panelOut calc(.28s / max(var(--speed),.001)) var(--ease) forwards}
@keyframes panelOut{to{transform:translateX(60px); opacity:0}}

.panel-head{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:26px 30px 18px;
  border-bottom:1px solid rgba(128,128,128,.18);
}
.panel-back{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  background:var(--panel-color, var(--accent));
  transition:transform .2s var(--ease), filter .2s;
}
.panel-back:hover{transform:translateX(-3px); filter:brightness(1.15)}
.panel-back svg{width:18px; height:18px}
.panel-title{font-size:26px; font-weight:200; letter-spacing:.2px; line-height:1.1}
.panel-title small{display:block; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.55; margin-bottom:2px}

.panel-body{flex:1 1 auto; overflow-y:auto; padding:22px 30px 40px}
.panel-body::-webkit-scrollbar{width:9px}
.panel-body::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35)}

/* --- tab varian (mis. pilih bangun datar) --- */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.tab{
  padding:8px 14px; font-size:13px; letter-spacing:.4px;
  background:rgba(128,128,128,.18);
  transition:background .2s, transform .2s var(--ease);
}
.tab:hover{transform:translateY(-2px)}
.tab.is-active{background:var(--panel-color, var(--accent)); color:#fff}

/* --- form --- */
.field{margin-bottom:16px; animation:fieldIn calc(.35s / max(var(--speed),.001)) var(--ease) backwards; animation-delay:calc(var(--i,0) * 40ms)}
@keyframes fieldIn{from{opacity:0; transform:translateY(10px)} to{opacity:1}}
.field label{display:block; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; opacity:.65; margin-bottom:6px}
.control{display:flex; align-items:stretch; gap:0}
.control input, .control select{
  flex:1 1 auto; min-width:0;
  font:300 20px/1 "Segoe UI",system-ui,sans-serif;
  padding:13px 14px;
  color:inherit; background:rgba(128,128,128,.14);
  border:1px solid rgba(128,128,128,.28); border-radius:0;
  outline:none; transition:border-color .2s, background .2s;
}
.control input:focus, .control select:focus{border-color:var(--panel-color,var(--accent)); background:rgba(128,128,128,.22)}
.control select{
  cursor:pointer;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background:rgba(255,255,255,.08)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' fill-opacity='.7' d='M3.5 5.5l4.5 5 4.5-5z'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  background-size:12px;
  border-color:rgba(255,255,255,.4);
  padding-right:38px;
}
.control select option{background:#171b20; color:#fff}
body.theme-light .control input{background:rgba(0,0,0,.05)}
body.theme-light .control select{
  background-color:rgba(0,0,0,.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2310151a' fill-opacity='.6' d='M3.5 5.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  border-color:rgba(0,0,0,.3);
}
body.theme-light .control select option{background:#fff; color:#10151a}
.unit{
  flex:none; display:grid; place-items:center; min-width:62px; padding:0 12px;
  font-size:13px; letter-spacing:.6px; opacity:.75;
  background:rgba(128,128,128,.22); border:1px solid rgba(128,128,128,.28); border-left:0;
}
.field-hint{font-size:12px; opacity:.5; margin-top:5px}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.two-col{grid-template-columns:1fr}}

/* --- hasil --- */
.result{
  margin-top:24px; padding:22px 24px;
  background:var(--panel-color, var(--accent));
  color:#fff;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.9);
  animation:resultIn calc(.4s / max(var(--speed),.001)) var(--ease);
}
@keyframes resultIn{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1}}
.result-label{font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:.8}
.result-main{font-size:clamp(34px,7vw,54px); font-weight:200; line-height:1.05; margin-top:4px; word-break:break-word}
.result-main span{font-size:.4em; opacity:.8; margin-left:6px}
.result-note{margin-top:10px; font-size:14px; opacity:.9; line-height:1.45}

.rows{margin-top:18px; border-top:1px solid rgba(128,128,128,.2)}
.row{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 2px; border-bottom:1px solid rgba(128,128,128,.14);
  font-size:15px;
  animation:fieldIn calc(.35s / max(var(--speed),.001)) var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 30ms);
}
.row b{font-weight:400}
.row span{opacity:.62; letter-spacing:.3px}
.row.is-highlight{color:var(--panel-color,var(--accent)); font-weight:400}

.scale{display:flex; height:10px; margin-top:16px; overflow:hidden}
.scale i{flex:1; opacity:.35; transition:opacity .3s}
.scale i.on{opacity:1}
.scale-legend{display:flex; justify-content:space-between; font-size:11px; opacity:.6; margin-top:5px}

.panel-error{margin-top:20px; padding:14px 16px; background:rgba(220,60,60,.18); border-left:3px solid #dc3c3c; font-size:14px}

/* ============================================================
   halaman pengaturan
   ============================================================ */
.settings{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  margin-top:clamp(10px,2.4vh,26px); padding:4px 10px 30px 2px;
}
.settings::-webkit-scrollbar{width:9px}
.settings::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}
.settings-inner{max-width:1440px}
.set-block{
  margin-bottom:22px;
  padding:22px 24px;
  background:rgba(8,10,13,.6);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 44px -26px rgba(0,0,0,.85);
  animation:fieldIn calc(.4s / max(var(--speed),.001)) var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
body.theme-light .set-block{
  background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 20px 44px -26px rgba(0,0,0,.3);
}
.set-block h3{
  margin:0 0 14px; font-size:13px; font-weight:400;
  letter-spacing:2.4px; text-transform:uppercase; color:var(--ink-soft);
}
.kbd-list{display:flex; flex-direction:column; gap:12px}
.kbd-row{display:flex; align-items:center; gap:16px; font-size:14px; color:var(--ink-soft)}
.kbd-row kbd{
  min-width:38px; padding:7px 10px; text-align:center; flex:none;
  font:600 12px/1 "Segoe UI",system-ui,sans-serif; letter-spacing:.5px;
  background:rgba(255,255,255,.08); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 0 rgba(0,0,0,.4);
}
body.theme-light .kbd-row kbd{background:rgba(0,0,0,.06); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15), 0 2px 0 rgba(0,0,0,.1)}
.bg-choices{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px}
.bg-choice{
  height:80px; position:relative; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 14px 28px -14px rgba(0,0,0,.8);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.bg-choice:hover{transform:translateY(-4px)}
.bg-choice.is-active{box-shadow:inset 0 0 0 3px var(--accent), 0 16px 30px -14px rgba(0,0,0,.85)}
.bg-choice em{
  position:absolute; left:0; right:0; bottom:0; padding:4px 7px;
  font-style:normal; font-size:11px; letter-spacing:.6px;
  background:rgba(0,0,0,.55); color:#fff;
}
.set-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.set-row label{min-width:130px; font-size:14px; color:var(--ink-soft)}
.set-row input[type=range]{flex:1 1 220px; accent-color:var(--accent)}
.set-row input[type=text],.set-row input[type=file]{
  flex:1 1 260px; padding:10px 12px; font:300 14px/1 inherit; color:inherit;
  background:var(--chrome); border:1px solid rgba(128,128,128,.35);
}
.btn{
  padding:11px 18px; font-size:13px; letter-spacing:1px;
  background:var(--accent); color:#fff;
  transition:transform .2s var(--ease), filter .2s;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.12)}
.btn.ghost{background:var(--chrome); box-shadow:inset 0 0 0 1px rgba(128,128,128,.4)}
.accent-list{display:flex; flex-wrap:wrap; gap:8px}
.accent-dot{
  width:44px; height:44px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .2s var(--ease);
}
.accent-dot:hover{transform:scale(1.1)}
.accent-dot.is-active{box-shadow:inset 0 0 0 3px #fff}
.switch{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); cursor:pointer}
.switch input{accent-color:var(--accent); width:17px; height:17px}