:root{
    --navy:#07162f;
    --navy2:#102a56;
    --blue:#1e6bb8;
    --gold:#f3b43f;
    --light:#f5f8fc;
    --text:#263247;
    --border:#d7e1f0;
    --white:#fff;
    --danger:#b00020;
    --success:#0a7d43
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    font-family:Georgia,'Times New Roman',serif;
    background:linear-gradient(180deg,#eef4fb,#fff);
    color:var(--text);
    font-size:18px;
    line-height:1.55
}

a{
    color:#0d5da8
}

.site-header{
    background:linear-gradient(135deg,var(--navy),var(--navy2));
    color:#fff;
    border-bottom:4px solid var(--gold)
}

.header-inner{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 16px
}

.logo-wrap{
    width:350px;
    height:120px;
    flex:0 0 220px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    background:none;
    border:none;
}

.logo-wrap img{
    width:450px;
    height:auto;
    display:block;
}

.brand-text h1{
    margin:0;
    font-size:clamp(30px,5vw,52px);
    letter-spacing:.5px;
    text-shadow:0 3px 9px rgba(0,0,0,.4)
}

.brand-text p{
    margin:4px 0 0;
    color:#dbe8ff;
    font-size:clamp(15px,2.5vw,22px)
}

.main-nav{
    background:#fff;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    padding:12px;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:20
}

.main-nav a,
.btn{
    display:inline-block;
    background:linear-gradient(180deg,#2478ca,#155ca1);
    color:#fff!important;
    text-decoration:none;
    padding:10px 16px;
    border-radius:9px;
    border:1px solid #0b4a87;
    box-shadow:0 2px 5px rgba(0,0,0,.18);
    font-weight:bold
}

.main-nav a:hover,
.btn:hover{
    filter:brightness(1.08)
}

.stat-table td a,
.stat-table td .btn,
.admin-table td a,
.admin-table td .btn{
    color:#0b2c5f !important;
    font-weight:bold;
}

.stat-table td a:hover,
.admin-table td a:hover{
    color:#b51455 !important;
}

.stat-table td .btn,
.admin-table td .btn{
    background:#092b5c !important;
    color:#ffffff !important;
    padding:8px 12px;
    border-radius:10px;
    display:inline-block;
}

/* Admin table action visibility fix */
table th:last-child,
table td:last-child{
    min-width:170px;
}

table td:last-child a,
table td:last-child button,
td.actions a,
td.actions button,
.actions a,
.actions button{
    display:inline-block !important;
    background:linear-gradient(180deg,#2478ca,#155ca1) !important;
    color:#ffffff !important;
    text-decoration:none !important;
    padding:7px 12px !important;
    border-radius:9px !important;
    border:1px solid #0b4a87 !important;
    box-shadow:0 2px 5px rgba(0,0,0,.18) !important;
    font-weight:bold !important;
    font-family:Georgia,'Times New Roman',serif !important;
    font-size:15px !important;
    line-height:1.25 !important;
    margin:2px 3px 2px 0 !important;
    cursor:pointer !important;
    opacity:1 !important;
    visibility:visible !important;
}

table td:last-child a.btn-danger,
table td:last-child button.btn-danger,
td.actions a.btn-danger,
td.actions button.btn-danger,
.actions a.btn-danger,
.actions button.btn-danger{
    background:linear-gradient(180deg,#d83b3b,#9b1b1b) !important;
    border-color:#841010 !important;
    color:#ffffff !important;
}

table td:last-child a.btn-secondary,
table td:last-child button.btn-secondary,
td.actions a.btn-secondary,
td.actions button.btn-secondary,
.actions a.btn-secondary,
.actions button.btn-secondary{
    background:linear-gradient(180deg,#f6bd4d,#d99519) !important;
    border-color:#af7410 !important;
    color:#111111 !important;
}

table td:last-child a:hover,
table td:last-child button:hover,
td.actions a:hover,
td.actions button:hover,
.actions a:hover,
.actions button:hover{
    filter:brightness(1.08) !important;
    text-decoration:none !important;
}

.btn-secondary{
    background:linear-gradient(180deg,#f6bd4d,#d99519);
    border-color:#af7410;
    color:#111!important
}

.btn-danger{
    background:linear-gradient(180deg,#d83b3b,#9b1b1b);
    border-color:#841010
}

.btn-small{
    font-size:15px;
    padding:7px 12px;
    margin-bottom:16px
}

.top-banner,
.bottom-banner{
    text-align:center;
    padding:12px;
    background:#eef4fb
}

.top-banner img,
.bottom-banner img{
    max-width:468px;
    width:100%;
    height:auto
}

.page-shell{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:220px 1fr;
    gap:18px;
    padding:18px 16px;
}

.left-rail{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    height:max-content;
    box-shadow:0 8px 20px rgba(7,22,47,.08);
    min-width:220px;
}

.left-rail h3{
    text-align:center;
    margin:0 0 16px;
    color:var(--navy);
    font-size:22px;
    line-height:1.1;
    white-space:nowrap;
}

.square-ad{
    width:125px;
    min-height:125px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center
}

.square-ad img{
    width:125px;
    height:125px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--border)
}

.ad-empty{
    font-size:14px;
    text-align:center;
    background:#edf3fb;
    color:#456;
    padding:20px 8px;
    border:1px dashed #9fb3cc;
    border-radius:10px
}

.content-panel{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:24px;
    box-shadow:0 8px 22px rgba(7,22,47,.08);
    min-width:0
}

.hero{
    padding:26px;
    border-radius:18px;
    background:linear-gradient(135deg,#07162f,#12366c);
    color:#fff;
    margin-bottom:20px
}

.hero h2{
    font-size:clamp(28px,4vw,44px);
    margin:0 0 10px
}

.hero p{
    color:#e7f0ff
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}

.card{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fbfdff;
    padding:18px;
    margin:16px 0
}

.card h3{
    color:var(--navy);
    margin-top:0
}

.price{
    font-size:34px;
    color:var(--blue);
    font-weight:bold
}

.form-row{
    margin-bottom:14px
}

label{
    font-weight:bold;
    display:block;
    margin-bottom:5px
}

input,
select,
textarea{
    width:100%;
    padding:11px;
    border:1px solid #b8c8dc;
    border-radius:8px;
    font-family:Georgia,'Times New Roman',serif;
    font-size:17px
}

textarea{
    min-height:130px
}

.notice{
    padding:12px 15px;
    border-radius:10px;
    margin:14px 0;
    font-weight:bold
}

.success{
    background:#e8fff3;
    color:var(--success);
    border:1px solid #a7e2c2
}

.error{
    background:#fff0f0;
    color:var(--danger);
    border:1px solid #e8b0b0
}

.table-wrap{
    overflow-x:auto
}

table{
    width:100%;
    border-collapse:collapse;
    margin:15px 0;
    background:#fff
}

th,
td{
    padding:10px;
    border:1px solid var(--border);
    text-align:left;
    vertical-align:top
}

th{
    background:#0f2c59;
    color:#fff
}

.stat-pill{
    display:inline-block;
    background:#edf5ff;
    border:1px solid #c5d8ef;
    padding:4px 8px;
    border-radius:20px;
    margin:2px
}

.site-footer{
    background:#07162f;
    color:#dbe8ff;
    margin-top:20px;
    padding:26px 16px;
    border-top:4px solid var(--gold)
}

.footer-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.site-footer a{
    color:#fff
}

.cards{
    font-weight:bold;
    color:#fff;
    background:#122b55;
    padding:8px;
    border-radius:8px;
    display:inline-block
}

.fineprint{
    text-align:center;
    max-width:1180px;
    margin:20px auto 0;
    font-size:14px;
    color:#b9c7dc
}

.promo-frame iframe{
    width:100%;
    height:70vh;
    border:1px solid var(--border);
    border-radius:12px
}

.timer-box{
    font-size:22px;
    font-weight:bold;
    color:var(--gold);
    padding:10px;
    background:#07162f;
    border-radius:8px;
    display:inline-block
}

@media(max-width:820px){

    .header-inner{
        justify-content:center;
        text-align:center;
        gap:10px
    }

    .logo-wrap{
        width:100px;
        height:100px;
        flex-basis:100px
    }

    .page-shell{
        grid-template-columns:1fr
    }

    .left-rail{
        order:2;
        text-align:center
    }

    .left-rail h3{
        font-size:26px;
    }
    
    .left-rail{
    min-width:100%;
}

    .content-panel{
        order:1;
        padding:18px
    }

    .grid{
        grid-template-columns:1fr
    }

    .footer-grid{
        grid-template-columns:1fr
    }

    .main-nav{
        position:static
    }

    .square-ad{
        display:inline-flex;
        margin:7px
    }
}

@media(max-width:460px){

    body{
        font-size:16px
    }

    .brand-text h1{
        font-size:26px
    }

    .header-inner{
        padding:14px 10px
    }

    .main-nav a,
    .btn{
        width:100%;
        text-align:center
    }

    .content-panel{
        padding:14px
    }

    .hero{
        padding:18px
    }
}