@font-face {
    font-family: 'AksaraBatakLocal';
    src: local('Noto Sans Batak');
  }
  :root{
    --primary:#CF392C; --primary-700:#5d2626; --bg: #130f0f; --card: #181111; --muted: #b78f8f; --text: #EBF5EE; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans', Arial;
    color:var(--text);
    background: radial-gradient(1200px 800px at 70% -10%, rgba(110, 47, 47, 0.25), transparent 10%),
                radial-gradient(900px 600px at -10% 30%, rgba(110, 47, 47, 0.18), transparent 50%),
                linear-gradient(180deg, #100c0c, #0e0a0a 45%, #130f0f);
  }
  .container{max-width:1100px;margin:0 auto;padding:18px}
  .site-header{
    position:sticky;top:0;z-index:50;
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(24, 17, 17, 0.85), rgba(24, 17, 17, 0.55));
    border-bottom:1px solid rgba(183, 143, 143, 0.08)
  }
  .brand{display:flex;align-items:center;gap:12px;font-weight:800}
  .logo{width:40px;height:40px;border-radius:12px;background: url('assets/img/tondibatak.png') center/cover no-repeat}


  .card{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
    border:1px solid rgba(143,183,160,.12);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden
  }
  .card-header{
    padding:18px 20px;
    border-bottom:1px solid rgba(183, 143, 143, 0.12);
    display:flex;align-items:center;justify-content:space-between
  }
  .card-title{font-size:18px;font-weight:800}
  .card-sub{color:var(--muted)}
  .card-body{padding:18px}

  .layout{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
  @media (max-width:920px){.layout{grid-template-columns:1fr}}


  .preview-wrap{
    background:linear-gradient(135deg, rgba(110, 47, 47, 0.0rgba(110, 47, 47, 0.02).02));
    border-radius:14px;
    padding:14px;
    border:1px solid rgba(183, 143, 143, 0.06)
  }
  canvas#photoCanvas{width:100%;height:auto;border-radius:12px;display:block;background:#0b0b0b}
  .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(180deg,var(--primary),var(--primary-700));
    color:white;padding:10px 14px;border-radius:12px;
    border:1px solid #612a2a;font-weight:700;cursor:pointer
  }
  .btn.secondary{
    background:linear-gradient(180deg,#241b1b,#181111);
    color:#e8cfcf;border-color:#362222
  }


.input, 
.select {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid rgba(183, 143, 143, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
  transition: all 0.25s ease;
}


.input::placeholder {
  color: var(--muted);
  opacity: .8;
}


.input:focus, 
.select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(110, 47, 47, 0.35);
  background: linear-gradient(180deg, rgba(110, 47, 47, 0.12), rgba(110, 47, 47, 0.04));
}

.input:hover, 
.select:hover {
  border-color: var(--primary-700);
}


.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23EBF5EE' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
}


.select option {
  background: #181111;
  color: var(--text);
}
.select option:disabled {
  color: var(--muted);
}


  .controls{display:grid;gap:12px}
  .field{display:flex;flex-direction:column;gap:6px}
  label{font-weight:700}

  input[type=file]{
    color:var(--muted);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border:1px solid rgba(183, 143, 143, 0.18);
    padding:8px;
    border-radius:10px;
  }


  input[type=text], input[type=range], button {
    font: inherit;
  }

  .small{font-size:13px;color:var(--muted)}


  .overlay-list{display:flex;gap:8px;flex-wrap:wrap}
  .overlay-item{
    padding:8px 10px;border-radius:10px;
    border:1px solid rgba(183, 143, 143, 0.08);
    background:#0c120f;cursor:pointer;font-weight:700
  }
  .overlay-item.active{outline:2px solid rgba(163, 74, 74, 0.25)}


  .muted{color:var(--muted)}


  @media (max-width:600px){
    .toolbar{flex-direction:column;align-items:stretch}
    .overlay-list{justify-content:flex-start}
  }

  .site-footer{color:#cfe8d8a6;padding:40px 16px;text-align:center}