:root {
  --mango: #FF9F43; --mango-d: #E8740C; --pandan: #10AC84; --pandan-d: #0B8566;
  --cream: #FFF8EC; --ink: #2B1D0E; --chili: #E74C3C; --line: #F0DFC4;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font-family: 'Bricolage Grotesque', sans-serif;
  background:
    radial-gradient(circle at 10% 0%, #FFE2B8 0, transparent 40%),
    radial-gradient(circle at 100% 30%, #D4F5E9 0, transparent 35%),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,159,67,.05) 22px 24px),
    var(--cream);
  min-height: 100vh;
}
.mono { font-family: 'JetBrains Mono', monospace; }
.logo { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: .9; margin: 0; }
.logo span { color: var(--mango); font-style: italic; }
.tagline { font-weight: 300; font-size: 1.05rem; margin-top: .3rem; }
.card {
  background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 1.25rem;
  box-shadow: 5px 5px 0 var(--ink); animation: rise .5s both;
}
.summary { background: linear-gradient(135deg, var(--mango), #FF6B6B); color: #fff; }
.big { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; }
.sultan { margin-top: .75rem; background: #FFE066; color: var(--ink); padding: .5rem .75rem; border-radius: 10px; font-weight: 600; animation: wobble 1.5s infinite; }
.h2 { font-weight: 800; font-size: 1.25rem; margin: 0 0 .75rem; }
.lbl { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; opacity: .7; margin-bottom: .3rem; }
.inp { width: 100%; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 12px; background: #FFFCF6; font: inherit; outline: none; transition: border .15s; }
.inp:focus { border-color: var(--mango); }
.btn { padding: .65rem 1.1rem; border-radius: 12px; font-weight: 700; border: 2px solid var(--ink); transition: transform .1s, box-shadow .1s; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; }
.btn-primary { background: var(--mango); color: #fff; }
.btn-green { background: var(--pandan); color: #fff; }
.btn-ghost { background: #fff; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem .25rem .25rem; background: var(--cream); border: 2px solid var(--line); border-radius: 999px; font-weight: 600; }
.chip .x { opacity: .4; font-size: .8rem; } .chip .x:hover { opacity: 1; color: var(--chili); }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; color: var(--ink); border: 2px solid var(--ink); flex-shrink: 0; }
.seg { display: flex; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.seg button { flex: 1; padding: .5rem; font-weight: 600; font-size: .9rem; }
.seg button.on { background: var(--ink); color: var(--cream); }
.pill { padding: .25rem .6rem; border-radius: 999px; border: 2px solid var(--line); font-size: .85rem; font-weight: 600; background: #fff; }
.pill.on { background: var(--pandan); color: #fff; border-color: var(--pandan); }
.row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.exp, .tx { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 12px; background: var(--cream); flex-wrap: wrap; }
.tx.done { opacity: .55; } .tx.done .mono { text-decoration: line-through; }
.arrow { color: var(--mango); font-weight: 800; }
.icon { opacity: .5; } .icon:hover { opacity: 1; }
.muted { opacity: .6; }
.warn { color: var(--chili); font-size: .85rem; font-weight: 600; }
.text-green { color: var(--pandan-d); } .text-red { color: var(--chili); }
.bar { flex: 1; height: 10px; background: var(--cream); border-radius: 99px; position: relative; overflow: hidden; }
.bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .3; }
.bar div { position: absolute; top: 0; bottom: 0; border-radius: 99px; transition: width .4s; }
.bar .pos { background: var(--pandan); } .bar .neg { background: var(--chili); }
.empty { text-align: center; padding: 1.5rem; opacity: .7; font-weight: 600; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--cream); padding: .7rem 1.2rem; border-radius: 12px; font-weight: 600; animation: rise .3s; z-index: 50; }
.confetti { position: fixed; top: -10px; width: 10px; height: 14px; z-index: 60; animation: fall 2s ease-in forwards; pointer-events: none; }
.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.fade { animation: rise .5s; }
.wobble { display: inline-block; animation: wobble 2s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wobble { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .8; } }