:root {
    --bg: #fff6fb;
    --surface: #ffffff;
    --text: #47424d;
    --muted: #8d8493;
    --line: #f2dfea;

    --sakura: #ff9fbd;
    --sakura-strong: #e86792;
    --peach: #ffbd9f;
    --butter: #ffe480;
    --matcha: #bde8bd;
    --matcha-strong: #5e9b6a;
    --sky: #aee0f7;
    --sky-strong: #4f9fc5;
    --lavender: #cdbdff;
    --lilac-strong: #816ac4;
    --cream: #fff0bd;

    --danger-bg: #ffe8eb;
    --danger: #c65d6c;
    --shadow: 0 12px 34px rgba(112, 79, 111, .09);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Noto Sans JP", Tahoma, sans-serif;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.page-shell { width: min(100%, 720px); margin: 0 auto; min-height: 100vh; padding: 18px 16px 42px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; }
.brand-mark {
    width:36px; height:36px; border-radius:13px;
    background:var(--sakura);
    color:#fff; display:grid; place-items:center; font-size:1.02rem;
    box-shadow:0 7px 16px rgba(237,117,157,.18);
}
.brand-jp { font-weight:650; color:var(--lilac-strong); margin-left:3px; }
.brand-admin { color:var(--muted); font-size:.8rem; font-weight:700; margin-left:4px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.muted { color: var(--muted); }
.small { font-size:.88rem; }
.center { text-align:center; }
.card { background:var(--surface); border:1px solid rgba(241,231,239,.95); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.auth-wrap { min-height:calc(100vh - 70px); display:grid; place-items:center; }
.auth-card { width:100%; max-width:430px; padding:32px 22px 28px; position:relative; overflow:hidden; }
.auth-card::before {
    content:""; position:absolute; width:105px; height:105px; border-radius:50%;
    background:var(--butter); opacity:.36; right:-42px; top:-46px; pointer-events:none;
}
.auth-card::after {
    content:""; position:absolute; width:72px; height:72px; border-radius:50%;
    background:var(--sky); opacity:.32; left:-34px; bottom:-32px; pointer-events:none;
}
.auth-card .brand { justify-content:center; margin-bottom:30px; position:relative; z-index:1; }
.auth-title { font-size:1.38rem; margin:0 0 6px; text-align:center; position:relative; z-index:1; }
.auth-subtitle { margin:0 0 24px; text-align:center; color:var(--muted); position:relative; z-index:1; }
label { display:block; font-size:.92rem; font-weight:700; margin-bottom:8px; }
.input, select.input, textarea.input {
    width:100%; border:1.5px solid var(--line); background:#fff; color:var(--text); border-radius:16px; padding:13px 14px; outline:none; transition:.2s;
}
.input:focus { border-color:var(--sakura-strong); box-shadow:0 0 0 4px rgba(255,184,207,.25); }
.access-code-input { letter-spacing:.18em; font-weight:700; }
textarea.input { min-height:96px; resize:vertical; }
.field { margin-bottom:16px; position:relative; z-index:1; }
.button { border:0; border-radius:15px; padding:13px 16px; font-weight:750; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; }
.button-primary {
    width:100%; color:#514252;
    background:var(--sakura);
    box-shadow:0 9px 20px rgba(237,117,157,.15);
}
.button-primary:hover { filter:saturate(1.06) brightness(1.01); }
.button-soft { background:var(--cream); color:#6d5d43; }
.button-sakura { background:var(--sakura); color:#704653; }
.button-matcha { background:var(--matcha); color:#426449; }
.button-danger { background:var(--danger-bg); color:var(--danger); }
.button-link { padding:8px 0; min-height:auto; background:transparent; color:var(--muted); }
.alert { padding:12px 14px; border-radius:14px; margin-bottom:16px; font-size:.92rem; position:relative; z-index:1; }
.alert-error { background:var(--danger-bg); color:var(--danger); }
.alert-success { background:#e9f8e9; color:#4f805a; }
.hero-balance {
    background:#eaf7ff;
    border-color:#f2e5ef; padding:27px 22px; margin-bottom:22px; text-align:center; position:relative; overflow:hidden;
}
.hero-balance::after {
    content:""; position:absolute; width:92px; height:92px; border-radius:50%; right:-40px; bottom:-48px;
    background:var(--lavender); opacity:.28;
}
.friend-name { font-size:.95rem; color:var(--muted); margin-bottom:16px; position:relative; z-index:1; }
.balance-label { font-size:.9rem; color:var(--muted); position:relative; z-index:1; }
.balance-amount { font-size:2.45rem; font-weight:850; letter-spacing:-.04em; margin:6px 0 2px; position:relative; z-index:1; color:#554b5d; }
.balance-clear { color:var(--matcha-strong); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 2px 12px; }
.section-title { margin:0; font-size:1.02rem; }
.timeline { display:grid; gap:11px; }
.transaction {
    background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:15px 16px;
    display:grid; grid-template-columns:1fr auto; gap:6px 12px; box-shadow:0 5px 16px rgba(112,79,111,.035);
}
.transaction:nth-child(4n+1) { border-left:4px solid var(--sakura); }
.transaction:nth-child(4n+2) { border-left:4px solid var(--sky); }
.transaction:nth-child(4n+3) { border-left:4px solid var(--butter); }
.transaction:nth-child(4n+4) { border-left:4px solid var(--lavender); }
.transaction-repayment { border-left-color:var(--matcha) !important; background:#effbef; }
.transaction-date { color:var(--muted); font-size:.82rem; grid-column:1 / -1; }
.transaction-title { font-weight:750; }
.transaction-amount { font-weight:850; text-align:right; }
.transaction-repayment .transaction-amount { color:var(--matcha-strong); }
.transaction-note { font-size:.88rem; color:var(--muted); grid-column:1 / -1; }
.receipt-link {
    font-size:.86rem; color:#6d7197; grid-column:1 / -1; width:max-content; margin-top:5px;
    font-weight:700;
}
.receipt-button { appearance:none; border:0; background:#f1efff; border-radius:999px; padding:7px 11px; }
.receipt-button:hover { background:#e9e5ff; }
.empty { text-align:center; color:var(--muted); padding:34px 18px; border:1.5px dashed #e9dfe9; background:#fffdfd; border-radius:18px; }
.admin-shell { width:min(100%, 900px); }
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.admin-actions { display:flex; gap:8px; flex-wrap:wrap; }
.friend-list { display:grid; gap:11px; }
.friend-card {
    background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px;
    display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 5px 16px rgba(112,79,111,.035);
}
.friend-card:nth-child(4n+1) { border-left:4px solid var(--sakura); }
.friend-card:nth-child(4n+2) { border-left:4px solid var(--sky); }
.friend-card:nth-child(4n+3) { border-left:4px solid var(--butter); }
.friend-card:nth-child(4n+4) { border-left:4px solid var(--lavender); }
.friend-main { min-width:0; }
.friend-card-name { font-weight:800; margin-bottom:3px; }
.friend-card-balance { text-align:right; white-space:nowrap; }
.friend-card-balance strong { display:block; font-size:1.1rem; }
.pill { display:inline-flex; border-radius:999px; padding:4px 9px; font-size:.76rem; background:#fff1c7; color:#826a35; }
.pill-off { background:#f1edef; color:#91888d; }
.form-card { max-width:600px; margin:0 auto; }
.form-grid { display:grid; grid-template-columns:1fr; gap:0; }
.two-col { display:grid; grid-template-columns:1fr; gap:12px; }
.help { color:var(--muted); font-size:.8rem; margin-top:6px; }
.form-footer { display:flex; gap:9px; margin-top:22px; }
.form-footer .button { flex:1; }
.divider { height:1px; background:var(--line); margin:18px 0; }
.admin-transaction { position:relative; }
.row-actions { grid-column:1 / -1; display:flex; gap:7px; margin-top:7px; }
.row-actions form { margin:0; }
.row-actions .button { min-height:36px; padding:7px 10px; font-size:.83rem; }
.fab {
    position:fixed; right:max(18px, calc((100vw - 900px)/2 + 18px)); bottom:calc(20px + env(safe-area-inset-bottom));
    width:58px; height:58px; border-radius:20px; color:#514252; display:grid; place-items:center; font-size:1.8rem;
    background:var(--butter); box-shadow:0 12px 30px rgba(237,117,157,.23);
}
.inline-form { display:inline; }
.setup-note { background:#fff2bd; border-radius:16px; padding:13px 14px; font-size:.88rem; margin-bottom:20px; position:relative; z-index:1; }

@media (min-width: 620px) {
    .page-shell { padding:28px 22px 60px; }
    .two-col { grid-template-columns:1fr 1fr; }
    .form-card { padding:26px; }
}