/* ================================================
   LottoPicker — Main Theme
   Medium dark, easy on eyes
   ================================================ */

:root {
    --bg-main:     #2b2d3e;
    --bg-card:     #343650;
    --bg-deep:     #23253a;
    --bg-input:    #1e2033;
    --border:      #4a4e6a;
    --accent:      #7c83f5;
    --accent-hover:#5a63e8;
    --text-main:   #e8e9f3;
    --text-muted:  #9096b8;
    --text-dim:    #6b7099;

    /* Number colors */
    --hot:         #f5c842;   /* gold/yellow — hot numbers */
    --hot-bg:      #3a3310;
    --hot-border:  #c9a200;
    --normal:      #5b9bd5;   /* blue — normal numbers */
    --normal-bg:   #1a2a3e;
    --normal-border:#3a6fa8;
    --cold:        #e05c5c;   /* red — cold numbers */
    --cold-bg:     #3a1a1a;
    --cold-border: #b03030;
    --overdue:     #f5a742;   /* orange — overdue */
    --overdue-bg:  #3a2810;
    --overdue-border:#c07a00;

    /* Prize colors */
    --prize-1st:   #f5c842;
    --prize-2nd:   #a8c8f0;
    --prize-3rd:   #7dd87d;
    --prize-sp:    #9096b8;
    --prize-con:   #5a5f80;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.5;
}

/* ---- HEADER ---- */
.header {
    background: var(--bg-deep);
    padding: 18px 30px;
    border-bottom: 2px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header h1 { color: var(--accent); font-size: 22px; font-weight: 700; }
.header p  { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.header a  { color: var(--text-muted); text-decoration: none; font-size: 13px; }
.header a:hover { color: var(--accent); }

/* ---- CONTAINER ---- */
.container { padding: 25px 30px; max-width: 1200px; }

/* ---- SECTION TITLE ---- */
.section-title {
    color: var(--accent);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 22px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

/* ---- CARDS ---- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
}

/* ---- GRID ---- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 10px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    text-align: center;
}
.stat-card h3   { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.stat-card .count { font-size: 30px; color: var(--accent); font-weight: 700; }
.stat-card .label { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* ---- FORMS ---- */
label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
}
select, input[type="file"], input[type="text"], input[type="password"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-main);
    padding: 8px 12px;
    font-size: 13px;
    width: 100%;
    margin-bottom: 14px;
}
select:focus, input:focus {
    outline: none;
    border-color: var(--accent);
}

/* ---- BUTTONS ---- */
.btn {
    background: var(--accent);
    color: #fff;
    padding: 9px 22px;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}
.btn:hover { background: var(--accent-hover); }

.btn-outline {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 9px 22px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-outline:hover { background: var(--accent); color: #fff; }

/* ---- MESSAGES ---- */
.msg { padding: 12px 16px; border-radius: 7px; margin-bottom: 18px; font-size: 13px; }
.success { background: #1a3a2a; border: 1px solid #3aaa6a; color: #5dd89a; }
.error   { background: #3a1a1a; border: 1px solid var(--cold-border); color: var(--cold); }

/* ---- CONTROLS BAR ---- */
.controls {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 22px;
}
.form-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.form-row > div { min-width: 140px; }

/* ---- NUMBER BALLS (6-number games) ---- */
.balls { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.ball {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--normal-bg);
    border: 2px solid var(--normal-border);
    color: var(--normal);
}
.ball.bonus {
    background: var(--overdue-bg);
    border-color: var(--overdue-border);
    color: var(--overdue);
}

/* ---- NUMBER ANALYSIS CARDS ---- */
.num-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 7px;
    margin-bottom: 20px;
}
.num-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 9px 5px;
    text-align: center;
    transition: transform 0.1s;
}
.num-card:hover { transform: scale(1.04); }
.num-card .n  { font-size: 17px; font-weight: 700; color: var(--text-main); }
.num-card .f  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.num-card .g  { font-size: 10px; color: var(--text-dim); }

.num-card.hot     { border-color: var(--hot-border);    background: var(--hot-bg);    }
.num-card.hot .n  { color: var(--hot); }
.num-card.cold    { border-color: var(--cold-border);   background: var(--cold-bg);   }
.num-card.cold .n { color: var(--cold); }
.num-card.overdue { border-color: var(--overdue-border); background: var(--overdue-bg); }
.num-card.overdue .n { color: var(--overdue); }

/* ---- LEGEND ---- */
.legend { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.leg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.leg-dot  { width: 13px; height: 13px; border-radius: 3px; border: 2px solid; }
.leg-hot     { border-color: var(--hot-border);     background: var(--hot-bg); }
.leg-cold    { border-color: var(--cold-border);    background: var(--cold-bg); }
.leg-overdue { border-color: var(--overdue-border); background: var(--overdue-bg); }
.leg-normal  { border-color: var(--normal-border);  background: var(--normal-bg); }

/* ---- PICK BALLS ---- */
.picks-grid { display: flex; flex-direction: column; gap: 10px; }
.pick-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.pick-num { font-size: 12px; color: var(--text-dim); min-width: 28px; }

.pick-ball {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700;
    background: var(--normal-bg);
    border: 2px solid var(--normal-border);
    color: var(--normal);
}
.pick-ball-4d {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 3px;
    background: var(--normal-bg);
    border: 2px solid var(--normal-border);
    color: var(--normal);
}

/* ---- 4D DRAW CARDS ---- */
.draw-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.draw-card-header { display: flex; gap: 18px; margin-bottom: 10px; align-items: center; }
.draw-date { font-size: 13px; color: var(--prize-1st); font-weight: 700; }
.draw-no   { font-size: 11px; color: var(--text-dim); }
.prizes    { display: flex; gap: 18px; flex-wrap: wrap; }
.prize-group { }
.prize-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.prize-nums  { display: flex; gap: 5px; flex-wrap: wrap; }
.prize-num   { background: var(--bg-deep); border-radius: 5px; padding: 4px 8px; font-size: 13px; font-weight: 700; border: 1px solid var(--border); }
.prize-num.first       { border-color: var(--prize-1st); color: var(--prize-1st); }
.prize-num.second      { border-color: var(--prize-2nd); color: var(--prize-2nd); }
.prize-num.third       { border-color: var(--prize-3rd); color: var(--prize-3rd); }
.prize-num.special     { border-color: var(--border); color: var(--text-muted); font-size: 12px; }
.prize-num.consolation { border-color: var(--bg-deep); color: var(--text-dim); font-size: 11px; }

/* ---- 6NUM TABLE ---- */
.table-6num { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-6num th { background: var(--bg-deep); color: var(--accent); padding: 10px 12px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.table-6num td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-6num tr:hover td { background: var(--bg-deep); }
.jackpot { font-size: 11px; color: #5dd89a; }

/* ---- PAGINATION ---- */
.pagination { display: flex; gap: 5px; margin-top: 20px; flex-wrap: wrap; }
.pagination a, .pagination span {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
}
.pagination a:hover  { background: var(--accent); border-color: var(--accent); }
.pagination .active  { background: var(--accent); border-color: var(--accent); }
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* ---- INFO BOX ---- */
.info-box {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.8;
}
.info-box strong { color: var(--accent); }

/* ---- METHOD INFO ---- */
.method-info {
    background: var(--bg-deep);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 11px 14px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.method-info strong { color: var(--accent); }

/* ---- NAV BUTTONS ---- */
.nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }

/* ---- STATS ROW ---- */
.stats-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 20px;
    text-align: center;
    min-width: 120px;
}
.stat-box .val { font-size: 24px; color: var(--accent); font-weight: 700; }
.stat-box .lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; }