:root{
    --bg:#f4eedf;
    --card:#fbf8ef;
    --gold:#b78a35;
    --gold-light:#d8bb75;
    --text:#24322b;
    --muted:#6b746e;
    --green:#173a2d;
    --green-soft:#285744;
    --line:rgba(67,70,55,.18);
    --shadow:0 18px 45px rgba(47,43,31,.11);
}

html{
    min-height:100%;
    background:var(--bg);
}

body{
    min-height:100vh;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 8%,rgba(183,138,53,.08),transparent 24rem),
        linear-gradient(rgba(64,56,39,.035) 1px,transparent 1px),
        var(--bg);
    background-size:auto,100% 5px,auto;
    font-family:"Segoe UI",system-ui,sans-serif;
}

body > .header,
body > .top-actions,
body > .success-box,
body > .card,
body > .empty,
body > .pesan-title,
body > .templates,
body > form,
body > h2,
body > .back{
    width:min(820px,100%);
    margin-left:auto;
    margin-right:auto;
}

.header{
    padding:24px 0 16px;
}

.header h1,
body > h2{
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(28px,5vw,40px);
    line-height:1.15;
}

.header p{
    margin-top:6px;
    color:var(--muted);
}

.back{
    color:var(--green);
    font-weight:700;
}

.top-actions{
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:10px;
}

.btn-create,
.btn-back,
.btn,
.btn-save,
body > form > button{
    min-height:48px;
    display:grid;
    place-items:center;
    border-radius:2px!important;
    font-weight:700;
}

.btn-create,
.btn-save,
body > form > button,
.popup .btn,
body > .card .btn{
    color:#fbf8ef!important;
    background:var(--green)!important;
}

.btn-back{
    margin-top:0;
    color:var(--green);
    background:transparent;
    border:1px solid var(--green);
}

.success-box{
    color:#24533e;
    background:#edf4f0;
    border:1px solid #a9c3b5;
    border-left:4px solid var(--green-soft);
    border-radius:0;
}

body > .card:not(.popup){
    margin-bottom:12px;
    padding:22px;
    color:var(--text);
    background:rgba(251,248,239,.86);
    border:1px solid var(--line);
    border-left:4px solid var(--gold);
    border-radius:0;
    box-shadow:0 8px 26px rgba(47,43,31,.06);
}

.card h3{
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
    font-size:21px;
}

.date{
    color:var(--muted);
}

.actions{
    gap:7px;
}

.actions a{
    border-radius:2px;
    font-size:12px;
    font-weight:700;
}

.preview{
    color:var(--green);
    background:transparent;
    border:1px solid var(--green);
}

.edit{
    background:#355f70;
}

.share{
    color:#fbf8ef;
    background:var(--green-soft);
}

.delete{
    background:#8b423b;
}

.empty{
    padding:38px 20px;
    color:var(--muted);
    background:rgba(251,248,239,.68);
    border:1px solid var(--line);
}

.pesan-title,
.music-title,
body > form h3{
    color:var(--gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.templates{
    gap:8px;
}

.templates button{
    color:var(--green);
    background:rgba(251,248,239,.76);
    border:1px solid var(--line);
    border-radius:2px;
    font-weight:700;
}

.templates button:hover{
    border-color:var(--gold);
    background:var(--card);
}

form{
    padding:24px;
    background:rgba(251,248,239,.8);
    border:1px solid var(--line);
    border-top:4px solid var(--gold);
    box-shadow:var(--shadow);
}

input,
textarea,
input[type="date"]{
    color:var(--text)!important;
    background:#fffdf7!important;
    border:1px solid var(--line)!important;
    border-radius:0!important;
    outline:none;
}

input:focus,
textarea:focus{
    border-color:var(--gold)!important;
    box-shadow:0 0 0 3px rgba(183,138,53,.12);
}

input[type="date"]::-webkit-calendar-picker-indicator{
    filter:none;
}

.date-label{
    color:var(--green);
}

.music-selector{
    color:var(--green);
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:2px;
}

.music-modal{
    background:rgba(13,29,23,.86);
    backdrop-filter:blur(8px);
}

.music-box{
    color:var(--text);
    background:var(--card);
    border:0;
    border-top:5px solid var(--gold);
    border-radius:3px;
    box-shadow:0 28px 70px rgba(0,0,0,.34);
}

.music-box h3{
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
}

.music-option,
.music-card{
    color:var(--text);
    background:#fffdf7;
    border:1px solid var(--line);
    border-radius:2px;
}

.music-option:hover,
.music-option.active,
.music-card:has(input:checked){
    color:var(--green);
    background:#f4eedf;
    border-color:var(--gold);
}

.popup,
body > .card:only-child{
    color:var(--text);
    background:var(--card);
    border:0;
    border-top:5px solid var(--gold);
    border-radius:3px;
    box-shadow:var(--shadow);
}

.popup .title,
body > .card:only-child .title{
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
}

.popup .desc,
body > .card:only-child .desc{
    color:var(--muted);
}

.top-bar{
    color:#fbf8ef;
    background:rgba(23,58,45,.98);
    border-bottom:1px solid rgba(216,187,117,.35);
    box-shadow:0 8px 28px rgba(15,35,27,.14);
}

.top-bar .travel-title{
    color:var(--gold-light);
    font-family:Georgia,"Times New Roman",serif;
}

.top-bar .date{
    color:rgba(251,248,239,.62);
}

.close-btn{
    color:#fbf8ef;
    background:transparent;
    border:1px solid rgba(216,187,117,.4);
    border-radius:2px;
}

.header-area{
    color:var(--text);
    background:var(--bg);
}

.muthawwif-name{
    color:var(--gold);
}

.muthawwif-person{
    color:var(--green);
    font-family:Georgia,"Times New Roman",serif;
}

.start button{
    color:#fbf8ef;
    background:var(--green);
    border-radius:2px;
}

.content{
    color:var(--text);
    background:var(--card);
    border-top:1px solid var(--line);
}

.content::first-line{
    color:var(--green);
}

.content::-webkit-scrollbar-thumb{
    background:var(--gold);
}

.notice-box,
.important-box{
    border-radius:2px!important;
}

.footer-bar{
    color:rgba(251,248,239,.65);
    background:#102a20;
    border-top:1px solid var(--gold);
}

@media(max-width:620px){
    body{padding:14px;}
    .top-actions{grid-template-columns:1fr;}
    .btn-back{margin-top:0;}
    form{padding:18px;}
    .actions{flex-wrap:wrap;}
    .actions a{min-width:calc(50% - 7px);}
    .content{padding-left:20px;padding-right:20px;font-size:18px;}
}

@media(prefers-reduced-motion:reduce){
    *{transition:none!important;}
}