:root{
    --green-900:#0b3d2e;
    --green-700:#146c43;
    --green-600:#1c8a5a;
    --green-100:#e6f4ec;
    --gold:#c9a227;
    --text:#1f2a24;
    --muted:#6b7c73;
    --bg:#f4f8f5;
    --card:#ffffff;
    --radius:14px;
}
*{box-sizing:border-box;}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}
.topbar{
    background:linear-gradient(135deg,var(--green-900),var(--green-700));
    color:#fff;
    padding:28px 20px 40px;
    text-align:center;
}
.topbar h1{margin:0;font-size:1.5rem;}
.subtitle{margin:6px 0 0;opacity:.85;font-size:.9rem;}

.container{
    max-width:640px;
    margin:-24px auto 0;
    padding:0 16px 40px;
}
.card{
    background:var(--card);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:18px;
    box-shadow:0 6px 18px rgba(11,61,46,.08);
}
label{
    display:block;
    font-size:.85rem;
    font-weight:600;
    color:var(--green-900);
    margin-bottom:6px;
    margin-top:14px;
}
label:first-of-type{margin-top:0;}
input[type=text], input[type=date]{
    width:100%;
    padding:11px 12px;
    border:1px solid #d7e2dc;
    border-radius:10px;
    font-size:1rem;
    background:#fbfdfc;
}
input:focus{outline:2px solid var(--green-600);border-color:transparent;}

.search-box{position:relative;}
.autocomplete-list{
    list-style:none;
    margin:4px 0 0;
    padding:6px;
    position:absolute;
    z-index:20;
    left:0;right:0;
    background:#fff;
    border:1px solid #e1e8e3;
    border-radius:10px;
    max-height:240px;
    overflow-y:auto;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.autocomplete-list li{
    padding:10px 10px;
    border-radius:8px;
    cursor:pointer;
    font-size:.92rem;
}
.autocomplete-list li:hover, .autocomplete-list li.active{background:var(--green-100);}
.hidden{display:none !important;}

.btn-primary, .btn-secondary{
    margin-top:16px;
    width:100%;
    border:none;
    padding:13px 16px;
    border-radius:10px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
}
.btn-primary{background:var(--green-700);color:#fff;}
.btn-primary:active{background:var(--green-900);}
.btn-secondary{background:var(--green-100);color:var(--green-900);}
.btn-secondary:active{background:#d7ecdf;}

.status-card{font-size:.92rem;color:var(--muted);}
.status-card.error{color:#a3241d;background:#fdecea;}

.schedule-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}
.schedule-header h2{margin:0;font-size:1.15rem;color:var(--green-900);}
.badge{
    background:var(--green-100);
    color:var(--green-900);
    padding:4px 10px;
    border-radius:20px;
    font-size:.78rem;
    font-weight:600;
    white-space:nowrap;
}
.next-prayer{
    margin:14px 0 6px;
    padding:12px 14px;
    background:linear-gradient(135deg,var(--green-600),var(--green-700));
    color:#fff;
    border-radius:10px;
    font-size:.92rem;
}
.next-prayer b{font-size:1.1rem;}

.schedule-table{
    width:100%;
    border-collapse:collapse;
    margin-top:14px;
}
.schedule-table td, .schedule-table th{
    padding:10px 8px;
    border-bottom:1px solid #eef2ef;
    font-size:.92rem;
    text-align:left;
}
.schedule-table tr:last-child td{border-bottom:none;}
.schedule-table td.time{font-weight:700;color:var(--green-900);text-align:right;}
.schedule-table tr.current-prayer td{background:var(--green-100);border-radius:8px;}

.month-table{min-width:640px;}
.month-table th{background:var(--green-100);color:var(--green-900);font-size:.78rem;}
.month-table td{font-size:.82rem;white-space:nowrap;}
.table-scroll{overflow-x:auto;margin-top:10px;}
.muted{color:var(--muted);font-size:.85rem;margin:4px 0 0;}

.footer{
    text-align:center;
    color:var(--muted);
    font-size:.8rem;
    padding:10px 20px 30px;
}
.footer a{color:var(--green-700);}