/* ===========================
   SHIO GENERATOR
=========================== */

.shio-container-v1{
    display:flex;
    justify-content:center;
    padding:20px 10px;
    font-family:Arial,Helvetica,sans-serif;
}

.shio-machine-v1{
    width:100%;
    max-width:520px;
    background:#1b1b1b;
    color:#fff;
    border:2px solid #d4af37;
    border-radius:15px;
    padding:18px;
    box-sizing:border-box;
}

.shio-title-v1{
    text-align:center;
    color:#ffd700;
    margin:0 0 20px;
    font-size:22px;
}

/* ===========================
   CONTROL
=========================== */

.shio-controls-v1{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:15px;
}

.shio-controls-v1 label{
    display:flex;
    flex-direction:column;
    font-size:12px;
    color:#ccc;
}

.shio-controls-v1 select{
    margin-top:5px;
    padding:8px;
    border-radius:8px;
    border:none;
    background:#333;
    color:#fff;
}

#btnGenerateShio{
    grid-column:span 2;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#d4af37;
    color:#111;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

#btnGenerateShio:hover{
    background:#f0c94d;
}

/* ===========================
   STATUS
=========================== */

.shio-status-v1{
    text-align:center;
    padding:10px;
    margin-bottom:15px;
    background:#2b2b2b;
    border-radius:8px;
    color:#ffd700;
    font-weight:bold;
}

/* ===========================
   HEADER
=========================== */

.shio-header-v1{
    text-align:center;
    margin-bottom:20px;
}

.shio-icon{
    font-size:60px;
}

.shio-name{
    font-size:26px;
    font-weight:bold;
    color:#ffd700;
    margin:8px 0;
}

.shio-confidence{
    color:#ccc;
}

.shio-confidence strong{
    color:#00ff99;
}

/* ===========================
   CARD
=========================== */

.shio-card-v1{
    background:#262626;
    padding:15px;
    border-radius:10px;
    margin-bottom:15px;
}

.card-title{
    color:#ffd700;
    font-weight:bold;
    margin-bottom:8px;
}

.card-content{
    line-height:1.6;
}

/* ===========================
   GRID ANGKA
=========================== */

.shio-grid-v1,
.shio-grid-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:15px;
}

.item,
.info-box{
    background:#2d2d2d;
    padding:10px;
    border-radius:8px;
    text-align:center;
}

.item span,
.info-box span{
    display:block;
    color:#aaa;
    font-size:12px;
}

.item strong,
.info-box strong{
    display:block;
    margin-top:6px;
    color:#ffd700;
    font-size:18px;
}

/* ===========================
   LUCKY METER
=========================== */

.luck-meter{
    margin-bottom:20px;
}

.meter-title{
    margin-bottom:8px;
    font-weight:bold;
}

.meter-bar{
    height:10px;
    background:#444;
    border-radius:30px;
    overflow:hidden;
}

.meter-fill{
    width:70%;
    height:100%;
    background:#00cc66;
}

.meter-text{
    text-align:center;
    margin-top:8px;
    color:#ffd700;
}

/* ===========================
   TABLE
=========================== */

.tafsir-table-v1{
    margin-bottom:20px;
}

.table-title{
    color:#ffd700;
    font-weight:bold;
    margin-bottom:10px;
}

.tafsir-table-v1 table{
    width:100%;
    border-collapse:collapse;
}

.tafsir-table-v1 td{
    border:1px solid #444;
    padding:8px;
}

/* ===========================
   ALTERNATIF
=========================== */

.alt-title{
    color:#ffd700;
    margin-bottom:10px;
    font-weight:bold;
}

.alt-list{
    display:grid;
    gap:10px;
}

.alt-item{
    background:#2d2d2d;
    padding:10px;
    border-radius:8px;
}

/* ===========================
   NOTE
=========================== */

.shio-note-v1{
    margin-top:20px;
    text-align:center;
    color:#aaa;
    font-size:12px;
}

/* ===========================
   MOBILE
=========================== */

@media(max-width:480px){

.shio-grid-v1,
.shio-grid-info{
grid-template-columns:1fr;
}

.shio-controls-v1{
grid-template-columns:1fr;
}

#btnGenerateShio{
grid-column:auto;
}

}