#dw-root {
    --bg:#050a30; --panel:#0a0f49; --card:#0d145c; --line:#24326b;
    --tx:#e9eeff; --mut:#a1b3ff; --cta:#69d2ff; --cta2:#3cc2ff;
    --ring:rgba(105,210,255,.22); --ok:#49d383;
    --ice1:#eaf6ff; --ice2:#d6ecff; --chip:#1a2a7f;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fs-xxs:.75rem; --fs-xs:.8125rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.375rem;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:clamp(12px,3vw,24px);
    --r-1:10px; --r-2:12px; --r-3:16px; --r-4:20px; --r-pill:999px;
    --h-sm:38px; --h-md:44px; --h-lg:46px;
    --elev-1:0 10px 22px rgba(60,194,255,.22);
    --elev-ice:0 10px 22px rgba(210,232,255,.28);
    color:var(--tx); font-family:var(--font);
}
#dw-root, #dw-root *{ box-sizing:border-box; }

/* Container do componente */
#dw-root .dw-wrap{
    max-width:520px; margin:0 auto; padding:var(--sp-6);
    background:var(--bg) !important; border-radius:var(--r-4); border:1px solid var(--line);
}
#dw-root .dw-title{ font-size:var(--fs-2xl); font-weight:900; color: #fff; }
#dw-root .dw-sub{ color:var(--mut) !important; font-weight:700; font-size:var(--fs-sm); }

/* ===== Botões ===== */
#dw-root .btn{
    display:inline-flex; align-items:center; justify-content:center; height:var(--h-md);
    padding:0 var(--sp-4); border-radius:var(--r-2); border:1px solid var(--line);
    font-weight:800; cursor:pointer; transition:transform .08s ease, filter .15s ease, box-shadow .15s ease;
    color:var(--tx); background:transparent;
}
#dw-root .btn:hover{ filter:brightness(1.03); }
#dw-root .btn:active{ transform:translateY(1px); }
#dw-root .btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-color:transparent; }
#dw-root .btn.primary{ background:linear-gradient(180deg,var(--cta),var(--cta2)); color:#001b2e; border:none; box-shadow:var(--elev-1); }
#dw-root .btn.ice{ background:linear-gradient(180deg,var(--ice1),var(--ice2)); color:#050a30; border:1px solid rgba(255,255,255,.65); box-shadow:var(--elev-ice); }
#dw-root .btn.ghost{ background:transparent; color:var(--tx); }

/* ===== Card ===== */
#dw-root .card{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.04)); border:1px solid var(--line); border-radius:var(--r-3); padding:var(--sp-5); }

/* ===== Ícone inicial ===== */
#dw-root .dw-start{ text-align:center; }
#dw-root .dw-iconbtn{
    display:inline-flex; flex-direction:column; align-items:center; gap:10px;
    padding:22px 24px; border-radius:20px; border:1px solid var(--line);
    background:var(--panel); color:var(--tx) !important;
    cursor:pointer; transition:transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
#dw-root .dw-iconbtn:hover{ filter:brightness(1.04); color:var(--tx) !important; }
#dw-root .dw-legend{ font-weight:900; font-size:var(--fs-xl); color:var(--tx) !important; }
#dw-root .dw-icon{
    width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
    background:linear-gradient(180deg,var(--cta),var(--cta2)); box-shadow:var(--elev-1); color:#001b2e;
}
#dw-root .dw-icon svg{ width:34px; height:34px; }

/* ===== Painel ===== */
#dw-root .dw-panel{ display:none; }
#dw-root .dw-panel[aria-hidden="false"]{ display:block; }
#dw-root .dw-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
#dw-root .dw-body{ display:grid; gap:var(--sp-3); }

/* ===== Inputs ===== */
#dw-root .field{ display:block; font-weight:800; margin:0 0 var(--sp-1); color: #fff; }
#dw-root .input, #dw-root .textarea{
    width:100%; border:1px solid var(--line); border-radius:var(--r-2);
    background:#0b1466; color:var(--tx); padding:0 14px;
}
#dw-root .input{ height:var(--h-lg); }
#dw-root .textarea{ padding-top:10px; padding-bottom:10px; min-height:96px; }
#dw-root .input::placeholder, #dw-root .textarea::placeholder{ color:rgba(233,238,255,.85); }

#dw-root .toolbar{ display:flex; gap:8px; justify-content:flex-end; }
#dw-root .msg-err{ color:#ffd3d3; font-size:var(--fs-sm); }

/* ===== Toggle da mensagem ===== */
#dw-root .msg-toggle{ display:none; align-items:center; gap:10px; margin-top:8px; }
#dw-root .switch{ position:relative; width:44px; height:24px; }
#dw-root .switch input{ position:absolute; opacity:0; width:0; height:0; }
#dw-root .slider{ position:absolute; inset:0; background:#23316e; border:1px solid var(--line); border-radius:var(--r-pill); transition:all .2s; }
#dw-root .slider::before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:50%; transform:translateY(-50%); background:#fff; border-radius:50%; transition:transform .2s; }
#dw-root .switch input:checked + .slider{ background:linear-gradient(180deg,var(--cta),var(--cta2)); }
#dw-root .switch input:checked + .slider::before{ transform:translate(18px, -50%); }
#dw-root .toggle-text{ font-size:var(--fs-xxs); color:var(--mut); font-weight:400; }

#dw-root #dw-clear{
    background:#050a30 !important;
    color:#ffffff !important;
    border:1px solid var(--line) !important;
}

@media(max-width:560px){
    #dw-root .dw-wrap{ padding:var(--sp-4); }
    #dw-root .dw-icon{ width:64px; height:64px; }
    #dw-root #dw-back{ height:var(--h-sm); padding:0 var(--sp-2); }
}