@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root{
    --cream:#FFF9F0;
    --paper:#FFFDF9;
    --pink:#F3A6C4;
    --pink-light:#FCE3EE;
    --lavender:#C9AEDD;
    --mint:#A6D4B4;
    --gold:#E7B84E;
    --plum:#5C3B5C;
    --plum-soft:#8A6B8A;
    --shadow: 0 8px 24px rgba(92,59,92,0.12);
    --error:#D9647F;
}

*{box-sizing:border-box;}

html,body{
    margin:0;
    padding:0;
    background:
            radial-gradient(circle at 12% 8%, rgba(243,166,196,0.18), transparent 40%),
            radial-gradient(circle at 88% 15%, rgba(201,174,221,0.18), transparent 40%),
            radial-gradient(circle at 50% 95%, rgba(166,212,180,0.15), transparent 45%),
            var(--cream);
    font-family:'Quicksand', sans-serif;
    color:var(--plum);
    min-height:100vh;
}

.page{
    max-width:880px;
    margin:0 auto;
    padding:32px 20px 60px;
    display:none;
}
.page.show{display:block;}

/* ---------- GATE ---------- */
.gate{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.gate.hide{display:none;}

.gate-card{
    background:var(--paper);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:40px 32px;
    max-width:340px;
    width:100%;
    text-align:center;
    border:1px solid rgba(92,59,92,0.06);
}

.gate-icon{font-size:34px; margin-bottom:8px;}

.gate-title{
    font-family:'Caveat', cursive;
    font-size:30px;
    font-weight:700;
    color:var(--plum);
    margin:0 0 6px;
}

.gate-sub{
    font-size:13px;
    color:var(--plum-soft);
    margin:0 0 22px;
    line-height:1.5;
}

.gate-field{
    position:relative;
    margin-bottom:14px;
}

.gate-input{
    width:100%;
    border:1.5px solid rgba(92,59,92,0.15);
    border-radius:999px;
    padding:12px 44px 12px 18px;
    font-family:'Quicksand', sans-serif;
    font-size:14.5px;
    color:var(--plum);
    background:#fff;
    outline:none;
    transition:border-color .15s ease;
}
.gate-input:focus{border-color:var(--pink);}

.gate-toggle{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    cursor:pointer;
    font-size:15px;
    padding:6px;
    color:var(--plum-soft);
}

.gate-btn{
    width:100%;
    background:var(--plum);
    color:#fff;
    border:none;
    border-radius:999px;
    padding:12px;
    font-family:'Quicksand', sans-serif;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
}
.gate-btn:hover{transform:translateY(-2px);}
.gate-btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

.gate-error{
    color:var(--error);
    font-size:12.5px;
    font-weight:600;
    margin-top:12px;
    min-height:16px;
}

.gate-status{
    font-size:12.5px;
    color:var(--plum-soft);
    margin-top:14px;
    opacity:.75;
}

/* ---------- HEADER ---------- */
header{
    text-align:center;
    padding:18px 10px 30px;
    position:relative;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--plum-soft);
    background:var(--pink-light);
    padding:6px 16px;
    border-radius:999px;
    font-weight:600;
}

h1{
    font-family:'Caveat', cursive;
    font-size:clamp(42px, 8vw, 68px);
    font-weight:700;
    margin:14px 0 6px;
    color:var(--plum);
    line-height:1.05;
}

h1 .accent{color:var(--pink);}

header p.sub{
    font-size:15.5px;
    color:var(--plum-soft);
    max-width:460px;
    margin:0 auto;
    line-height:1.5;
}

.dashes{
    width:120px;
    height:2px;
    margin:20px auto 0;
    background-image: repeating-linear-gradient(90deg, var(--pink) 0 10px, transparent 10px 18px);
    opacity:.7;
}

/* ---------- WRAPPER ---------- */
.wrapper{
    background:var(--paper);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:36px clamp(18px,4vw,44px) 40px;
    position:relative;
    border:1px solid rgba(92,59,92,0.06);
}

.section-title{
    font-family:'Caveat', cursive;
    font-size:26px;
    font-weight:600;
    margin:0 0 4px;
    color:var(--plum);
}
.section-hint{
    font-size:13.5px;
    color:var(--plum-soft);
    margin:0 0 22px;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.sync-badge{
    font-size:11.5px;
    font-weight:700;
    padding:3px 10px;
    border-radius:999px;
    background:var(--mint);
    color:var(--plum);
    opacity:0;
    transition:opacity .25s ease;
}
.sync-badge.show{opacity:1;}
.sync-badge.saving{background:var(--gold);}
.sync-badge.error{background:var(--error); color:#fff;}

/* category grid */
.categories{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
    margin-bottom:8px;
}
@media (max-width:640px){
    .categories{grid-template-columns:repeat(2,1fr);}
}

.cat-card{
    border:none;
    cursor:pointer;
    border-radius:18px;
    padding:20px 14px 16px;
    text-align:center;
    font-family:'Quicksand', sans-serif;
    font-weight:600;
    font-size:14.5px;
    color:var(--plum);
    position:relative;
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 3px 0 rgba(92,59,92,0.08);
}
.cat-card:nth-child(1){background:var(--pink-light); transform:rotate(-1.5deg);}
.cat-card:nth-child(2){background:#FFF0DC; transform:rotate(1deg);}
.cat-card:nth-child(3){background:#E7F3EA; transform:rotate(-1deg);}
.cat-card:nth-child(4){background:#F1E7F7; transform:rotate(1.5deg);}

.cat-card:hover{transform:translateY(-4px) rotate(0deg); box-shadow:0 10px 18px rgba(92,59,92,0.14);}
.cat-card.active{outline:2.5px solid var(--pink); transform:translateY(-4px) rotate(0deg);}

.cat-icon{font-size:26px; display:block; margin-bottom:8px;}

.cat-count{
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--plum-soft);
    margin-top:4px;
    opacity:.75;
}

/* list panel */
.list-panel{
    margin-top:28px;
    padding-top:26px;
    border-top:1.5px dashed rgba(92,59,92,0.15);
}

.list-panel-header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px;
    flex-wrap:wrap;
}

.list-panel-title{
    font-family:'Caveat', cursive;
    font-size:26px;
    font-weight:600;
    color:var(--plum);
}

.list-panel-count{
    font-size:12.5px;
    color:var(--plum-soft);
    font-weight:600;
}

.placeholder{
    color:var(--plum-soft);
    font-size:14.5px;
    text-align:center;
    max-width:300px;
    line-height:1.6;
    margin:20px auto;
}
.placeholder .arrow{display:block; font-size:22px; margin-bottom:6px;}

.items-list{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:18px;
}

.item-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    color:var(--plum);
    font-size:14px;
    font-weight:600;
    padding:8px 8px 8px 16px;
    border-radius:999px;
    box-shadow:0 2px 8px rgba(92,59,92,0.08);
    animation: chip-in .2s ease;
}
@keyframes chip-in{
    0%{transform:scale(.7); opacity:0;}
    100%{transform:scale(1); opacity:1;}
}

.item-chip button{
    border:none;
    background:var(--pink-light);
    color:var(--plum);
    width:22px;
    height:22px;
    border-radius:50%;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    transition:transform .12s ease, background .12s ease, color .12s ease;
}
.item-chip button:hover{background:var(--pink); color:#fff; transform:scale(1.1);}

.items-empty{
    font-size:13.5px;
    color:var(--plum-soft);
    opacity:.7;
    font-style:italic;
    margin-bottom:16px;
}

.add-row{display:flex; gap:8px;}
.add-input{
    flex:1;
    border:1.5px solid rgba(92,59,92,0.15);
    border-radius:999px;
    padding:10px 18px;
    font-family:'Quicksand', sans-serif;
    font-size:14px;
    color:var(--plum);
    background:#fff;
    outline:none;
    transition:border-color .15s ease;
}
.add-input:focus{border-color:var(--pink);}
.add-input::placeholder{color:var(--plum-soft); opacity:.6;}

.btn{
    font-family:'Quicksand', sans-serif;
    font-weight:700;
    font-size:13.5px;
    border:none;
    border-radius:999px;
    padding:10px 20px;
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
    white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-add{background:var(--plum); color:#fff;}
.btn-add:disabled{opacity:.4; cursor:not-allowed; transform:none;}

/* ---------- FOOTER ---------- */
footer{text-align:center; margin-top:34px; padding:0 10px;}
.footer-line{font-family:'Caveat', cursive; font-size:22px; color:var(--plum-soft);}
.footer-sub{font-size:12px; color:var(--plum-soft); opacity:.65; margin-top:4px; letter-spacing:.04em;}

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