:root{
      --r: 18px;
      --ink: #0f172a;
      --muted: rgba(15,23,42,0.70);
      --line: rgba(15,23,42,0.10);
      --bg: #f6f7fb;
      --card: #ffffff;
      --shadow: 0 14px 44px rgba(15,23,42,0.10);
      --shadow2: 0 22px 70px rgba(15,23,42,0.18);
    }
    :root{ --card-radius:18px; --preview-max:760px; }
    .app-shell{ min-height:100vh; display:flex; flex-direction:column; }
	
    body{
      background:
        radial-gradient(1200px 500px at 0% 0%, rgba(37,99,235,.12), transparent 60%),
        radial-gradient(1000px 520px at 100% 0%, rgba(16,185,129,.10), transparent 60%),
        var(--bg);
      color: var(--ink);
    }
    .shell{ max-width: 1100px; margin: 18px auto 32px; padding: 0 14px; }
    .cardx{
      background: var(--card);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: var(--r);
      box-shadow: var(--shadow);
    }
    .navbar{
      background: rgba(255,255,255,0.92) !important;
      border-bottom: 1px solid rgba(15,23,42,0.08);
      backdrop-filter: blur(10px);
    }
    .logo{ height:42px; width:auto; object-fit:contain; }	
    .cardx-head{
      padding: 14px 14px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 10px;
      font-weight: 950;
      letter-spacing: -0.02em;
    }
    .brand .dot{
      width: 36px;
      height: 36px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      background: rgba(37,99,235,.12);
      border: 1px solid rgba(37,99,235,.18);
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(15,23,42,0.02);
      color: rgba(15,23,42,0.84);
      font-weight: 900;
      font-size: .86rem;
      user-select:none;
      white-space: nowrap;
    }
    .pill.ok{
      background: rgba(16,185,129,0.10);
      border-color: rgba(16,185,129,0.18);
      color: rgba(5,150,105,1);
    }
    .pill.warn{
      background: rgba(234,179,8,0.12);
      border-color: rgba(234,179,8,0.20);
      color: rgba(161,98,7,1);
    }
    .pill.lock{
      background: rgba(37,99,235,0.10);
      border-color: rgba(37,99,235,0.18);
      color: rgba(37,99,235,1);
    }
    .preview-wrap{ padding: 2px; }
    .paper{
      width: 100%;
      border-radius: 16px;
      background: #fff;
      border: 1px solid rgba(15,23,42,0.10);
      box-shadow: var(--shadow2);
      overflow: hidden;
      position: relative;
    }
    .paper.land{ aspect-ratio: 297 / 210; }
    .paper.port{ aspect-ratio: 210 / 297; }
    canvas{ width:100%; height:100%; display:block; }

    .actionbar{
      padding: 12px 14px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 1px solid rgba(15,23,42,0.06);
      background:
        radial-gradient(900px 360px at 0% 0%, rgba(37,99,235,.08), transparent 55%),
        radial-gradient(900px 360px at 100% 0%, rgba(16,185,129,.06), transparent 55%),
        rgba(15,23,42,0.01);
      border-bottom-left-radius: var(--r);
      border-bottom-right-radius: var(--r);
    }

    .btn-soft{
      background: rgba(15,23,42,0.04);
      border: 1px solid rgba(15,23,42,0.10);
      color: var(--ink);
      font-weight: 900;
    }
    .btn-soft:hover{ background: rgba(15,23,42,0.07); }
    .btn-primary{ font-weight: 950; }

    .opts{ margin-top: 14px; }
    .opts .card-body{ padding: 14px; }

    .grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 860px){
      .grid{ grid-template-columns: 1fr 1fr; }
    }

    .section{
      border: 1px solid rgba(15,23,42,0.10);
      border-radius: 16px;
      background: rgba(15,23,42,0.02);
      overflow: hidden;
    }
    .section-h{
      padding: 12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      background: rgba(255,255,255,0.72);
      border-bottom: 1px solid rgba(15,23,42,0.10);
      font-weight: 950;
    }
    .section-b{ padding: 12px; background: #fff; }

    .mini{ font-size: .86rem; color: var(--muted); font-weight: 800; }

    .row2{ display:grid; grid-template-columns: 1fr; gap: 10px; }
    @media (min-width: 540px){ .row2{ grid-template-columns: 1fr 1fr; } }

    .row3{ display:grid; grid-template-columns: 1fr; gap: 10px; }
    @media (min-width: 740px){ .row3{ grid-template-columns: 1fr 1fr 1fr; } }

    .letter-map{
      display:grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    @media (min-width: 740px){ .letter-map{ grid-template-columns: 1fr 1fr; } }

    .letter-item{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,0.10);
      background: rgba(15,23,42,0.02);
    }

    .letter-chip{
      width: 40px;
      height: 40px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      background:#fff;
      border: 1px solid rgba(15,23,42,0.10);
      font-weight: 950;
      flex: 0 0 40px;
    }

    .pay-modal .modal-content{
      border:0;
      border-radius: 18px;
      overflow:hidden;
      box-shadow: 0 22px 70px rgba(15,23,42,0.24);
    }
    .pay-modal .modal-header{
      border:0;
      padding: 16px 18px;
      background:
        radial-gradient(1200px 520px at 0% 0%, rgba(37,99,235,.22), transparent 55%),
        radial-gradient(900px 420px at 100% 0%, rgba(16,185,129,.16), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
      backdrop-filter: blur(10px);
    }
    .pay-modal .modal-body{ padding: 16px 18px 18px; background:#fff; }

    .pay-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    @media (min-width: 720px){ .pay-grid{ grid-template-columns: 1fr 1fr; } }

    .pay-card{
      border: 1px solid rgba(15,23,42,0.10);
      border-radius: 16px;
      padding: 12px;
      background: rgba(15,23,42,0.02);
    }

    .pay-price{ font-size: 1.9rem; font-weight: 950; line-height: 1; }
    .pay-sub{ font-weight: 900; color: rgba(15,23,42,0.72); margin-top: 6px; }
    .alert{ border-radius: 14px; font-weight: 900; }
    .form-label{ font-weight: 950; }
    .form-range{ cursor: pointer; }

    .switch-line{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,0.10);
      background: rgba(15,23,42,0.02);
    }
	
  .color-swatch{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(15,23,42,0.20);
    cursor: pointer;
    display: inline-block;
  }
  
  .dl-inline{
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(15,23,42,0.06);
  background:
    radial-gradient(900px 360px at 0% 0%, rgba(37,99,235,.06), transparent 55%),
    radial-gradient(900px 360px at 100% 0%, rgba(16,185,129,.05), transparent 55%),
    rgba(15,23,42,0.01);
}

.dl-inline-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight: 900;
  color: rgba(15,23,42,0.78);
  font-size: .9rem;
}

.dl-inline-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-inline-track{
  margin-top: 8px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.10);
  overflow: hidden;
}

.dl-inline-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,235,1), rgba(16,185,129,1));
}

button:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.sec-chevron{
  transition: transform .18s ease;
}

.section-h{
  cursor: pointer;
  user-select: none;
}

.section.collapsed .section-b{
  display: none;
}

.section.collapsed .sec-chevron{
  transform: rotate(-90deg);
}

.info-i{
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
}
.info-i:focus{
  outline: none;
  box-shadow: none;
}
.decor-title{
  font-weight: 950;
  color: rgba(15,23,42,0.72);
  font-size: .9rem;
  margin: 10px 0 6px;
}
.decor-opt{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.02);
}
.decor-thumb{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:#fff;
  border: 1px solid rgba(15,23,42,0.10);
  object-fit: contain;
  flex: 0 0 26px;
}

.pay-plan{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(15,23,42,0.02);
  cursor: pointer;
  display: block;
}
.pay-plan:hover{
  background: rgba(15,23,42,0.04);
}
.pay-plan input{
  display: none;
}
.pay-plan.active{
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  background: rgba(37,99,235,0.06);
}

    footer{
      margin-top:auto;
      border-top: 1px solid rgba(15,23,42,0.08);
      background: rgba(255,255,255,0.75);
    }
    a.footer-link{ color: rgba(15,23,42,0.85); text-decoration:none; }
    a.footer-link:hover{ text-decoration:underline; }
	
    .panel-card{
      background:#fff;
      border:1px solid rgba(15,23,42,0.08);
      border-radius: var(--card-radius);
      box-shadow: 0 10px 30px rgba(15,23,42,0.08);
    }	
	
@media (max-width: 480px){
  .actionbar .dl-btn{
    padding: 6px 10px;     
  }
  .actionbar .dl-btn .dl-label{
    font-size: .60rem;      
    letter-spacing: .02em;
  }
  .actionbar .dl-btn i{
    font-size: 1rem;        
  }
}