:root{
    --gs-primary:#0d6efd;
    --gs-bg:#f3f6fa;
    --gs-card:#fff;
    --gs-text:#172033;
    --gs-border:#e4e8ef;
}
body{
    background:var(--gs-bg);
    color:var(--gs-text);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.dark{
    --gs-bg:#101827;
    --gs-card:#182334;
    --gs-text:#eef3fa;
    --gs-border:#334155;
}
body.dark .card,
body.dark .modal-content,
body.dark .form-control,
body.dark .form-select,
body.dark .input-group-text{
    background:var(--gs-card);
    color:var(--gs-text);
    border-color:var(--gs-border);
}
body.dark .text-muted{color:#aab6c7!important}
body.dark .form-check-input{background-color:#334155;border-color:#64748b}
body.dark .bg-body-secondary{background:#243244!important;color:#eef3fa!important}

.hero{
    background:linear-gradient(135deg,#0d6efd,#063b9f);
    color:#fff;
    padding:16px 0;
    box-shadow:0 6px 25px #0002;
}
.card{
    border:0;
    border-radius:16px;
    background:var(--gs-card);
    box-shadow:0 8px 28px #0000000d;
}
.section-title{
    font-weight:800;
    font-size:1rem;
    margin:16px 0 10px;
    display:flex;
    gap:8px;
    align-items:center;
}
.section-toggle{
    width:100%;
    border:0;
    border-top:1px solid var(--gs-border);
    background:transparent;
    color:var(--gs-text);
    padding:10px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:800;
    font-size:.95rem;
    text-align:left;
}
.section-toggle:first-of-type{border-top:0}
.section-toggle:hover{color:#0d6efd}
.section-toggle .arrow{transition:.2s}
.section-toggle[aria-expanded="true"] .arrow{transform:rotate(180deg)}
.collapse-box{padding:0 0 10px}
.section-toggle[aria-expanded="true"] {
    color: blue;
}


.drop{
    border:2px dashed #9aa6b5;
    border-radius:14px;
    padding:24px 12px;
    text-align:center;
    cursor:pointer;
    transition:.2s;
}
.drop:hover,.drop.drag{
    border-color:#0d6efd;
    background:#0d6efd0d;
}
.drop i{font-size:38px;color:#0d6efd}

.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}
.thumb{
    position:relative;
    border:2px solid transparent;
    border-radius:9px;
    overflow:hidden;
    cursor:pointer;
    background:#111;
}
.thumb.active{border-color:#0d6efd}
.thumb img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    display:block;
}
.thumb .x{
    position:absolute;
    right:2px;
    top:2px;
    width:24px;
    height:24px;
    padding:0;
    line-height:1;
}

.template{
    border:2px solid var(--gs-border);
    border-radius:10px;
    padding:6px;
    cursor:pointer;
}
.template.active{
    border-color:#0d6efd;
    background:#0d6efd0d;
}
.mini{
    height:62px;
    border-radius:7px;
    color:#fff;
    padding:6px;
    display:flex;
    flex-direction:column;
    justify-content:end;
    font-size:8px;
}
.mini.blue{background:linear-gradient(135deg,#111827,#0d6efd)}
.mini.dark{background:linear-gradient(135deg,#050505,#303030)}
.mini.clean{background:linear-gradient(135deg,#fff,#cbd5e1);color:#111}

.preview-wrap{
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:auto;
    background:
      linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),
      linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);
    background-size:22px 22px;
    background-position:0 0,11px 11px;
    border-radius:12px;
    padding:10px;
}
body.dark .preview-wrap{
    background-color:#0f172a;
    background-image:
      linear-gradient(45deg,#1e293b 25%,transparent 25%,transparent 75%,#1e293b 75%),
      linear-gradient(45deg,#1e293b 25%,transparent 25%,transparent 75%,#1e293b 75%);
}
#canvas{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    box-shadow:0 8px 28px #0005;
}
.empty{text-align:center;color:#8793a4;padding:60px 20px}
.empty i{font-size:46px}
#map{height:360px;border-radius:10px}
.sticky{position:sticky;top:12px}
.status-processing{background:#ffc107!important;color:#111!important}
.status-ready{background:#198754!important}
.small-note{font-size:.75rem}
.form-label{font-size:.82rem;margin-bottom:4px}
.form-control,.form-select{font-size:.88rem}
.btn-lg{font-size:.95rem}

@media(max-width:991px){
    body{font-size:14px}
    .hero{padding:11px 0}
    .hero .fs-4{font-size:1.05rem!important}
    .hero .small{font-size:.68rem}
    main.container{padding-top:8px!important;padding-bottom:8px!important}
    .row.g-4{--bs-gutter-y:.75rem}
    .card{border-radius:12px;box-shadow:0 4px 16px #0000000d}
    .card.p-3,.card.p-md-4{padding:10px!important}
    .drop{padding:15px 8px}
    .drop i{font-size:30px}
    .drop .fw-bold{font-size:.86rem}
    .section-toggle{padding:9px 0;font-size:.88rem}
    .form-control,.form-select{min-height:37px;padding:6px 8px}
    textarea.form-control{min-height:65px}
    .form-check{font-size:.8rem;margin-bottom:4px}
    .btn{font-size:.84rem}
    .btn-lg{padding:.55rem .75rem}
    .preview-wrap{min-height:255px;padding:7px}
    #map{height:300px}
    .gallery{grid-template-columns:repeat(4,1fr)}
    .sticky{position:static}
    footer{padding:10px!important}
}