:root{
                --bg:#F8FAFC;
                --card:#FFFFFF;
                --text:#0F172A;
                --muted:#475569;
                --line:#CBD5E1;
                --primary:#2563EB;
                --primaryHover:#1D4ED8;
                --focus:rgba(37,99,235,.22);
                --danger:#DC2626;
                --success:#16A34A;
                --warn:#D97706;
                --shadow:0 12px 36px rgba(15,23,42,.12);
                --surface2:#F1F5F9;
                --inputBg:#FFFFFF;
                --cardRadius:18px;
                --fieldRadius:12px;
                --fieldBorder:rgba(148,163,184,.55);
                --fieldBorderHover:rgba(148,163,184,.75);
            }
            html[data-theme="dark"]{
                /* Fundo escuro forte para destacar o card branco */
                --bg:#0A0F1A;
                --card:#FFFFFF;
                --text:#0F172A;
                --muted:#334155;
                --line:#CBD5E1;
                --primary:#2563EB;
                --primaryHover:#1D4ED8;
                --focus:rgba(37,99,235,.24);
                --danger:#DC2626;
                --success:#16A34A;
                --warn:#D97706;
                --shadow:0 22px 56px rgba(0,0,0,.55);
                --surface2:#F1F5F9;
                --inputBg:#FFFFFF;
                --fieldBorder:rgba(148,163,184,.65);
                --fieldBorderHover:rgba(148,163,184,.85);
            }
            *{box-sizing:border-box}
            body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:16px;}
            a{color:var(--primary);text-decoration:none}
            a:hover{text-decoration:underline}
            .wrap{max-width:560px;margin:0 auto;padding:28px;min-height:100vh;display:flex;align-items:center;}
            @media (max-width:600px){
                .wrap{align-items:flex-start;padding-top:64px;}
            }
            .card{width:100%;background:var(--card);border:1px solid var(--fieldBorder);border-radius:var(--cardRadius);padding:28px;box-shadow:var(--shadow);transition: box-shadow .22s ease, transform .22s ease;
            }
            .cardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
            .brand{display:flex;align-items:center;gap:12px;min-width:0;}
            .logo{width:42px;height:42px;border-radius:var(--fieldRadius);background:linear-gradient(135deg,var(--primary),#60A5FA);}
            .logoLink{display:block;width:42px;height:42px;border-radius:var(--fieldRadius);overflow:hidden;flex:0 0 auto;border:1px solid var(--fieldBorder);background:var(--card)}
            .logoLink:hover{filter:brightness(.98)}
            .logoImg{width:100%;height:100%;object-fit:cover;display:block;}
            h1{font-size:20px;line-height:1.2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;color:var(--text);}
            .product{font-size:13px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:10px;}
            .themeToggle{width:44px;height:44px;border-radius:14px;border:1px solid var(--fieldBorder);background:var(--surface2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;}
            .themeToggle:hover{background:var(--surface3, var(--surface2));transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.12);}
            .themeToggle:active{transform:translateY(0);}
            .themeToggle:focus{outline:none;}
            .themeToggle:focus-visible{box-shadow:0 0 0 4px var(--focus), 0 10px 24px rgba(15,23,42,.12);border-color:var(--primary);}
            .themeIcon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:18px;line-height:1;}
            .themeIcon::before{content:"🌙";}
            .themeIcon[data-theme-icon="dark"]::before{content:"☀";}
            .themeIcon[data-theme-icon="light"]::before{content:"🌙";}

            .divider{height:1px;background:var(--line);margin:16px 0 20px;}
            .field{margin:16px 0;}
            .field label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px;font-weight:600;}
            .field input, .field select{
                width:100%;
                height:52px;
                padding:0 16px;
                border-radius:var(--fieldRadius);
                border:1px solid var(--fieldBorder);
                background:var(--inputBg);
                color:var(--text);
                outline:none;
                font-size:16px;
                transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
            }
            .field input:hover, .field select:hover{border-color:var(--fieldBorderHover);}
            .field input:focus, .field select:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--focus);transform:translateY(-1px);}
            .inputWrap{position:relative;}
            .toggle{
                position:absolute;right:10px;top:50%;transform:translateY(-50%);
                width:40px;height:40px;border-radius:12px;border:1px solid var(--fieldBorder);
                background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
            }
            .toggle:hover{background:var(--surface2);}
            .helper{font-size:13px;color:var(--muted);margin:10px 0 0;}
            .status{font-size:13px;margin-top:8px;display:flex;align-items:center;gap:8px;}
            .status--ok{color:var(--success);}
            .status--bad{color:var(--danger);}
            .meter{height:10px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:10px;}
            .meter > span{display:block;height:100%;width:0%;}
            .btn{
                width:100%;
                height:52px;
                border:0;
                border-radius:var(--fieldRadius);
                background:var(--primary);
                color:#fff;
                font-weight:700;
                cursor:pointer;
                display:block;
                text-align:center;
                line-height:52px;
                font-size:16px;
                transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease, filter .18s ease;
            }
            .btn:hover{background:var(--primaryHover);transform:translateY(-1px);box-shadow:0 10px 20px rgba(15,23,42,.12);}
            .btn--secondary{
                background:transparent;
                color:var(--text);
                border:1px solid var(--fieldBorder);
            }
            .btn--secondary:hover{background:var(--surface2);}

            .row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;}
            .notice{border:1px solid var(--fieldBorder);background:#F1F5F9;border-radius:var(--fieldRadius);padding:14px 16px;margin:0 0 16px;color:var(--text);font-size:14px;}
            .notice--success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10);color:#166534;}
            .notice--error{border-color:rgba(220,38,38,.28);background:rgba(220,38,38,.08);color:#7F1D1D;}
            .notice--warning{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.10);color:#92400E;}
            .notice--info{border-color:rgba(59,130,246,.26);background:rgba(37,99,235,.06);color:var(--text);}
        
        
            .btn:active{transform:translateY(0);filter:brightness(.98);}
            .card:hover{transform:translateY(-1px);box-shadow:0 16px 44px rgba(15,23,42,.14);}
            @media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}}