:root {
            --bg-color: #121214;
            --card-bg: #1a1a1e;
            --primary: #e5a93c;
            --text: #ffffff;
            --text-secondary: #a0a0b2;
            --border: #29292e;
            --tier-bg: #222226;
            --error-bg: #c0392b;
            --success: #2ecc71;
        }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text); 
            margin: 0; 
            padding: 20px; 
            display: flex; 
            justify-content: center; 
        }
        .container { 
            width: 100%; 
            max-width: 700px; 
            background: var(--card-bg); 
            padding: 30px; 
            border-radius: 12px; 
            border: 1px solid var(--border); 
            box-shadow: 0 8px 24px rgba(0,0,0,0.45); 
            position: relative; 
        }
        .language-picker { 
            position: absolute; 
            top: 20px; 
            right: 20px; 
            width: auto; 
            padding: 6px 10px; 
            font-size: 14px; 
            background: var(--bg-color); 
            border: 1px solid var(--border); 
            border-radius: 6px; 
            color: var(--text); 
            cursor: pointer; 
        }
        h1 { 
            text-align: center; 
            color: var(--primary); 
            margin-bottom: 8px; 
            font-size: 30px; 
            letter-spacing: 1px; 
            padding-top: 15px; 
        }
        .subtitle { 
            text-align: center; 
            color: var(--text-secondary); 
            margin-bottom: 30px; 
            font-size: 13px; 
        }
        h3 { 
            color: var(--primary); 
            font-size: 16px; 
            border-bottom: 1px solid var(--border); 
            padding-bottom: 6px; 
            margin-top: 25px; 
            margin-bottom: 15px; 
        }
        .form-group { 
            margin-bottom: 20px; 
        }
        label { 
            display: block; 
            margin-bottom: 8px; 
            font-size: 14px; 
            font-weight: 600; 
            color: var(--text-secondary); 
        }
        input, select { 
            width: 100%; 
            padding: 12px; 
            background: var(--bg-color); 
            border: 1px solid var(--border); 
            border-radius: 6px; 
            color: var(--text); 
            font-size: 16px; 
            box-sizing: border-box; 
        }
        input:focus, select:focus { 
            outline: none; 
            border-color: var(--primary); 
        }
        
        .api-box { 
            background: #111113; 
            border: 1px dashed var(--primary); 
            padding: 18px; 
            border-radius: 8px; 
            margin-bottom: 25px; 
        }
        .api-btn { 
            width: 100%; 
            padding: 12px; 
            background: var(--primary); 
            color: #000; 
            border: none; 
            border-radius: 6px; 
            font-weight: bold; 
            font-size: 16px; 
            cursor: pointer; 
            margin-top: 10px; 
            transition: opacity 0.2s; 
        }
        .api-btn:hover { 
            opacity: 0.9; 
        }
        .api-status { 
            display: none; 
            text-align: center; 
            font-size: 13px; 
            font-style: italic; 
            margin-top: 8px; 
            color: var(--text-secondary); 
        }
        .api-error { 
            display: none; 
            background: var(--error-bg); 
            color: #fff; 
            padding: 10px; 
            border-radius: 6px; 
            font-size: 13px; 
            margin-top: 10px; 
            text-align: center; 
        }
        .account-info {
            margin-top: 15px;
            padding: 12px;
            background: rgba(46, 204, 113, 0.08);
            border: 1px solid rgba(46, 204, 113, 0.25);
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.8;
        }

        .account-info strong {
            color: var(--primary);
        }

        .grid-inputs { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 15px; 
        }
        .farm-section { 
            background: var(--tier-bg); 
            border: 1px solid var(--border); 
            border-radius: 8px; 
            padding: 18px; 
            margin-bottom: 25px; 
        }
        .checkbox-group { 
            display: grid; 
            grid-template-columns: 1fr; 
            gap: 10px; 
            margin-bottom: 15px; 
        }
        @media(min-width: 480px) { 
            .checkbox-group { grid-template-columns: 1fr 1fr; } 
            h1 { padding-top: 0; } 
        }
        .checkbox-item { 
            display: flex; 
            align-items: center; 
            background: var(--bg-color); 
            padding: 10px 14px; 
            border-radius: 6px; 
            border: 1px solid var(--border); 
            cursor: pointer; 
        }
        .checkbox-item input { 
            width: auto; 
            margin-right: 12px; 
            transform: scale(1.2); 
            accent-color: var(--primary); 
        }
        .checkbox-item span { 
            font-size: 14px; 
            color: var(--text); 
        }
        .checkbox-item .desc { 
            font-size: 11px; 
            color: var(--text-secondary); 
            display: block; 
            margin-top: 2px; 
        }
        .sub-group-title { 
            font-size: 12px; 
            text-transform: uppercase; 
            color: var(--primary); 
            font-weight: bold; 
            margin-top: 10px; 
            margin-bottom: 8px; 
            grid-column: 1 / -1; 
        }
        
        .result-box { 
            margin-top: 30px; 
            padding: 22px; 
            border-radius: 10px; 
            border: 1px solid var(--primary); 
            background: rgba(229, 169, 60, 0.08); 
        }
        .result-box h2 { 
            margin-top: 0; 
            text-align: center; 
            font-size: 16px; 
            color: var(--text-secondary); 
            text-transform: uppercase; 
        }
        .time-highlight { 
            text-align: center; 
            font-size: 38px; 
            font-weight: bold; 
            color: var(--primary); 
            margin-bottom: 20px; 
        }
        .details { 
            border-radius: 8px; 
            line-height: 1.8; 
            color: var(--text-secondary); 
            font-size: 14px; 
        }
        small { 
            display: block; 
            margin-top: 15px; 
            line-height: 1.5; 
            text-align: center; 
        }

        /* --- ESTILOS COMPATÍVEIS COM O RETORNO DA API --- */
        .tier-card { 
            background: var(--bg-color); 
            border: 1px solid var(--border); 
            border-radius: 8px; 
            padding: 15px; 
            margin-bottom: 12px; 
            line-height: 1.6; 
            text-align: left; 
        }
        .tier-card.completed { 
            border-color: rgba(46, 204, 113, 0.3); 
            background: rgba(46, 204, 113, 0.02); 
            color: var(--text-secondary); 
        }
        .tier-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            font-weight: bold; 
            font-size: 15px; 
            color: var(--text); 
            margin-bottom: 8px; 
            border-bottom: 1px dashed var(--border); 
            padding-bottom: 6px; 
        }
        .tier-card.completed .tier-header { 
            color: var(--success); 
        }
        .status { 
            font-size: 13px; 
            color: var(--primary); 
            background: rgba(229, 169, 60, 0.12); 
            padding: 3px 8px; 
            border-radius: 4px; 
            font-weight: 600; 
        }
        .tier-card.completed .status { 
            color: var(--success); 
            background: rgba(46, 204, 113, 0.12); 
        }
        .resource { 
            color: var(--text); 
            font-weight: 600; 
        }
        .loading-overlay {
            position: fixed;
            inset: 0;
            z-index: 99999;

            background:
                linear-gradient(
                    rgba(0,0,0,.75),
                    rgba(0,0,0,.85)
                ),
                url("images/mistlock.jpg");

            background-size: cover;
            background-position: center;

            display: none;
            justify-content: center;
            align-items: center;
}
        .loading-overlay.active {
            display: flex;
        }

        .loading-box {
            text-align: center;
        }

        .loading-text {
            margin-top: 20px;
            color: white;
            font-size: 18px;
            font-weight: 600;
        }
        .mist-core{
            position: relative;

            width:140px;
            height:140px;

            border-radius:50%;

            background:
                radial-gradient(
                    circle,
                    rgba(229,169,60,.9),
                    rgba(229,169,60,.25),
                    transparent
                );

            animation:
                pulse 2s infinite ease-in-out,
                rotate 12s infinite linear;
        }

        .matrix{
            position:absolute;

            width:18px;
            height:18px;

            border-radius:50%;
            background:#e5a93c;

            top:50%;
            left:50%;

            margin-left:-9px;
            margin-top:-9px;
        }

        .orbit1{
            animation: orbit 3s infinite linear;
        }

        .orbit2{
            animation: orbit 5s infinite linear reverse;
        }

        .orbit3{
            animation: orbit 7s infinite linear;
        }

        @keyframes orbit{
            from{
                transform:
                    rotate(0deg)
                    translateX(90px)
                    rotate(0deg);
            }

            to{
                transform:
                    rotate(360deg)
                    translateX(90px)
                    rotate(-360deg);
            }
        }

        @keyframes pulse{
            0%{
                transform:scale(1);
                box-shadow:0 0 15px rgba(229,169,60,.3);
            }

            50%{
                transform:scale(1.08);
                box-shadow:0 0 40px rgba(229,169,60,.7);
            }

            100%{
                transform:scale(1);
                box-shadow:0 0 15px rgba(229,169,60,.3);
            }
        }

        @keyframes rotate{
            from{
                transform:rotate(0deg);
            }

            to{
                transform:rotate(360deg);
            }
        }