/* ---------- Themes (CSS variables) ---------- */
.dpu-wrap{
    --dpu-accent:#ff5a00;
    --dpu-radius:14px;
    --dpu-bg:#0f1220;
    --dpu-panel:#161a30;
    --dpu-border:#3a4270;
    --dpu-border-hover:#7a8bff;
    --dpu-text:#e8ecff;
    --dpu-muted:#b8bfe4;
    --dpu-input-bg:#0c1024;
    --dpu-input-border:#2a3060;
    --dpu-shadow:0 12px 40px rgba(15,18,32,.18);
}
.dpu-wrap.dpu-theme-light{
    --dpu-bg:#ffffff;
    --dpu-panel:#f6f7fb;
    --dpu-border:#d6dae8;
    --dpu-border-hover:var(--dpu-accent);
    --dpu-text:#1a1f36;
    --dpu-muted:#5a6180;
    --dpu-input-bg:#ffffff;
    --dpu-input-border:#d6dae8;
    --dpu-shadow:0 8px 30px rgba(20,25,60,.08);
}

/* ---------- Layout ---------- */
.dpu-wrap{
    max-width:100%;
    margin:20px 0;
    padding:20px;
    background:var(--dpu-bg);
    color:var(--dpu-text);
    border-radius:var(--dpu-radius);
    
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    box-sizing:border-box;
}
.dpu-wrap *,
.dpu-wrap *:before,
.dpu-wrap *:after{ box-sizing:border-box; }

.dpu-heading{
    margin:0 0 16px;
    font-size:20px;
    font-weight:600;
    color:#656565;
    letter-spacing:.2px;
}

.dpu-row{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}
.dpu-field{
    flex:1;
    display:block;
}
.dpu-label{
    display:block;
    font-size:12pt;
    font-family: monda;
    
    letter-spacing:.4px;

    color:#656565;
    margin-bottom:6px;
}
.dpu-label em{ color:#ff5a00; font-style:normal; }
.dpu-field input[type="text"],
.dpu-field input[type="email"]{
    width:100%;
    padding:10px 12px;
    font-size:12pt;
    color:#656565;
    background:var(--dpu-input-bg);
    border:1px solid var(--dpu-input-border);
    border-radius:calc(var(--dpu-radius) - 6px);
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
.dpu-field input:focus{
    border-color:var(--dpu-accent);
    box-shadow:0 0 0 3px rgba(88,101,242,.18);
}

/* ---------- Drop zone ---------- */
.dpu-drop{
    display:flex;
    font-size:12pt;
    font-family: monda;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0px;
    padding:28px 18px;
    border:2px solid var(--dpu-border);
    border-radius:calc(var(--dpu-radius) - 2px);
    background:var(--dpu-panel);
    cursor:pointer;
    transition:background .2s,border-color .2s;
    position:relative;
}
.dpu-drop:hover,
.dpu-drop.is-drag,
.dpu-drop:focus-within{
    background:var(--dpu-panel);
    border-color:var(--dpu-border-hover);
}
.dpu-file{
    position:absolute!important;
    width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);border:0;
}
.dpu-drop-text strong{ color:#656565; }
.dpu-drop-text small{ color:#656565; }
.dpu-file-name{
    display:block;
    margin-top:4px;
    font-size:14px;
    color:#ff5a00;
    word-break:break-all;
}

/* ---------- Button ---------- */
.dpu-submit{
    display:inline-block;
    margin-top:16px;
    padding:11px 22px;
    background:var(--dpu-accent);
    color:#fff;
    border:0;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    cursor:pointer;
    transition:filter .15s,transform .15s;
}
.dpu-submit:hover{ filter:brightness(1.08); }
.dpu-submit:active{ transform:translateY(1px); }
.dpu-submit[disabled]{ opacity:.6; cursor:not-allowed; }

/* ---------- Progress ---------- */
.dpu-progress{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
}
.dpu-bar{
    flex:1;
    height:6px;
    background:var(--dpu-input-border);
    border-radius:999px;
    overflow:hidden;
}
.dpu-bar span{
    display:block;
    height:100%;
    width:0;
    background:#ff5a00;
    transition:width .2s;
}
.dpu-percent{
    font-size:12px;
    color:#ff5a00;
    min-width:36px;
    text-align:right;
}

/* ---------- Messages ---------- */
.dpu-message{
    margin-top:14px;
    font-size:14px;
    line-height:1.4;
}
.dpu-message.is-ok{ color:#ff5a00; }
.dpu-wrap.dpu-theme-dark .dpu-message.is-ok{ color:#7de3a1; }
.dpu-message.is-err{ color:#ff5a00; }
.dpu-wrap.dpu-theme-dark .dpu-message.is-err{ color:#ff8080; }

@media (max-width:480px){
    .dpu-row{ flex-direction:column; gap:0; }
    .dpu-field{ margin-bottom:12px; }
}