/* Loving Café cream palette, same tokens as live/shared/theme-cream.css */
:root{
  --bg:#F3EEE1; --paper:#FFFCF4; --paper-2:#EAE3D2;
  --ink:#3D4433; --muted:#6E7560; --line:rgba(56,72,40,.16);
  --forest:#4F7322; --forest-deep:#2F3D20; --terra:#874D74; --gold:#B8860B;
  --brass:#D8C48A; --bad:#A3392B;
  --radius:12px; --shadow:0 10px 28px rgba(56,72,40,.14);
  --display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--sans);min-height:100vh}
button,input{font:inherit;color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 48px}

/* header */
.top{display:flex;align-items:center;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--line);margin-bottom:18px}
.top img{height:40px;width:auto;border-radius:6px}
.top .t{flex:1;min-width:0}
.top b{display:block;font:600 19px/1.1 var(--display);color:var(--forest-deep)}
.top small{color:var(--muted);font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--forest);border:1px solid currentColor;border-radius:99px;padding:3px 8px;white-space:nowrap}
.role.owner{color:var(--terra)}

/* cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
h2{font:600 22px/1.2 var(--display);color:var(--forest-deep);margin:0 0 12px}
label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.row{display:flex;gap:10px}
.row > *{min-width:0}
input[type=tel],input[type=text],input[type=number]{width:100%;height:52px;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:0 14px;font-size:20px;letter-spacing:.02em}
input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(79,115,34,.18)}
.hint{color:var(--muted);font-size:13px;margin:6px 0 0}
.err{color:var(--bad);font-size:14px;font-weight:600;margin:8px 0 0}
.err:empty,.preview:empty{display:none}
.btn{height:52px;border:0;border-radius:10px;padding:0 18px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-main{background:var(--forest);color:#fff}
.btn-main:active{background:var(--forest-deep)}
.btn-plum{background:var(--terra);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-full{width:100%}

/* member */
.who{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.who .name{font:600 30px/1.1 var(--display);color:var(--forest-deep);overflow-wrap:anywhere}
.who .phone{color:var(--muted);font-size:14px}
.check{margin:6px 0 14px;font-size:14px;color:var(--muted)}
.check b{color:var(--ink)}
.pts{display:flex;align-items:flex-end;gap:8px;margin:4px 0 2px}
.pts .n{font:700 56px/1 var(--display);color:var(--forest)}
.pts .u{font-size:18px;color:var(--muted);padding-bottom:8px}
.meta{color:var(--muted);font-size:13px;margin-bottom:14px}
.bump{animation:bump .6s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.12);color:var(--gold)}100%{transform:scale(1)}}

/* ready banner + next reward */
.ready{display:flex;align-items:center;gap:10px;background:#F6EDF3;border:1.5px solid var(--terra);color:var(--terra);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-weight:700}
.ready .dot{width:10px;height:10px;border-radius:50%;background:var(--terra);flex:none}
.next{background:var(--forest-deep);color:#F3EEE1;border-radius:10px;padding:14px 16px;margin-bottom:14px}
.next .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);font-weight:700}
.next .big{font:600 20px/1.25 var(--display);margin:4px 0 10px}
.bar{height:12px;background:rgba(243,238,225,.18);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--gold));border-radius:99px;transition:width .6s ease}
.next .say{margin:10px 0 0;font-size:14px;color:#E7E2D0}
.next .say b{color:#fff}

/* rewards */
.rw{list-style:none;margin:0;padding:0}
.rw li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.rw li:first-child{border-top:0}
.rw .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--paper-2);color:var(--muted);font-weight:700;font-size:13px}
.rw li.ok .ic{background:var(--forest);color:#fff}
.rw .tx{flex:1;min-width:0}
.rw .tx b{display:block}
.rw .tx span{font-size:13px;color:var(--muted)}
.rw li.ok .tx span{color:var(--forest);font-weight:600}
.rw .btn{height:42px;padding:0 14px;font-size:14px}

/* add bill */
.bill{display:flex;gap:10px;align-items:flex-start}
.money{position:relative;flex:1}
.money span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;pointer-events:none}
.money input{padding-left:48px}
.preview{font-size:14px;color:var(--forest);font-weight:600;margin:6px 0 0}

.foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.foot .btn{flex:1;height:46px}

/* pending join */
.wait{border-left:4px solid var(--gold);background:#FBF4E2;padding:12px 14px;border-radius:8px;margin:12px 0}
.wait .btn{margin-top:10px;height:44px}

/* login problem */
.gate{text-align:center}
.gate p{color:var(--muted)}

/* toast */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(140%);opacity:0;visibility:hidden;background:var(--forest-deep);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow);max-width:calc(100% - 32px);font-weight:600;transition:transform .3s ease,opacity .3s ease,visibility .3s;z-index:9}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.toast.bad{background:var(--bad)}

.hidden{display:none !important}

@media (max-width:380px){
  .pts .n{font-size:46px}
  .who .name{font-size:26px}
  .bill{flex-direction:column}
  .bill .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.bump{animation:none}.bar i,.toast{transition:none}}

/* ---------- shared nav + owner page ---------- */
.nav{display:flex;gap:6px;margin:-6px 0 16px}
.nav a{flex:1;text-align:center;padding:9px 0;border-radius:10px;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px}
.nav a[aria-current=page]{background:var(--forest-deep);border-color:var(--forest-deep);color:#F3EEE1}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--paper-2);border-radius:10px;padding:12px}
.stat b{display:block;font:700 28px/1.1 var(--display);color:var(--forest)}
.stat span{font-size:13px;color:var(--muted)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.list small{display:block;color:var(--muted);font-size:12px}
.list .btn{height:38px;padding:0 12px;font-size:13px}
.list input{height:42px;font-size:16px}
.pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:99px;background:var(--paper-2);color:var(--muted)}
.pill.on{background:#E3EDD5;color:var(--forest)}
.log li{font-size:14px}
.log .d{font-weight:700;min-width:52px;text-align:right}
.log .d.pos{color:var(--forest)} .log .d.neg{color:var(--terra)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 label{font-size:13px}
.grid2 input{height:46px;font-size:18px}
.cost{background:#FBF4E2;border-left:4px solid var(--gold);border-radius:8px;padding:10px 12px;margin:10px 0;font-size:14px}
.cost b{font-size:18px}
select{height:42px;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:0 8px;font:inherit}
.mt{margin-top:10px}
.row.mt{flex-wrap:wrap}
.row.mt .btn{flex:1 1 140px}
select{min-width:96px}

/* ---------- privacy page ---------- */
.doc h2{margin-top:6px}
.doc h3{font:600 17px/1.3 var(--display);color:var(--forest-deep);margin:18px 0 6px}
.doc p,.doc li{font-size:15px}
.doc ul{padding-left:20px;margin:6px 0}
.lang{display:flex;gap:6px;margin-bottom:16px}
.lang a{flex:1;text-align:center;padding:9px 0;border-radius:10px;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.updated{color:var(--muted);font-size:13px}