:root {
    --bg: #0b0d12;
    --panel: #12151c;
    --panel-2: #171b24;
    --border: #252a36;
    --text: #f5f7fb;
    --muted: #9198a8;
    --accent: #7c5cff;
    --accent-2: #9b87ff;
    --success: #35d07f;
    --danger: #ff5f6d;
    --shadow: 0 18px 50px rgba(0,0,0,.28);
    --radius: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    background:
        radial-gradient(circle at 20% -10%, rgba(124,92,255,.15), transparent 34rem),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 60px; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 78px; border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 38px;
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; }
.brand-dot { width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 25px var(--accent); }
.nav-user { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid var(--border); }
.nav-name { color:#d6d9e0; font-size:.92rem; }

.hero, .person-hero {
    display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:28px;
}
.hero h1, .person-hero h1 { font-size:clamp(2rem,5vw,3.5rem); letter-spacing:-.055em; margin:3px 0 8px; line-height:1; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:800; color:var(--accent-2); margin:0 0 9px; }
.muted { color:var(--muted); }
.small { font-size:.9rem; }
.tiny { font-size:.78rem; }

.primary-btn, .ghost-btn, .danger-btn, .discord-btn {
    border:0; border-radius:12px; padding:12px 17px; font-weight:750; display:inline-flex;
    align-items:center; justify-content:center; transition:.18s ease; white-space:nowrap;
}
.primary-btn { background:var(--accent); color:white; box-shadow:0 8px 24px rgba(124,92,255,.26); }
.primary-btn:hover { transform:translateY(-1px); background:#8b70ff; }
.ghost-btn { background:transparent; border:1px solid var(--border); color:#dce0e8; padding:8px 12px; }
.ghost-btn:hover { background:var(--panel-2); }
.ghost-btn.big { padding:11px 15px; }
.danger-btn { background:rgba(255,95,109,.1); color:#ff7b87; border:1px solid rgba(255,95,109,.2); }
.danger-btn:hover { background:rgba(255,95,109,.17); }

.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:42px; }
.stat-card {
    background:linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--panel);
    border:1px solid var(--border); border-radius:var(--radius); padding:20px;
}
.stat-card span { display:block; color:var(--muted); font-size:.85rem; margin-bottom:10px; }
.stat-card strong { display:block; font-size:clamp(1.35rem,3vw,2.05rem); letter-spacing:-.035em; }
.stat-card.accent strong { color:#b7a9ff; }
.stat-card.success strong { color:var(--success); }

.section-head { display:flex; justify-content:space-between; align-items:end; margin:0 0 15px; }
.section-head h2 { margin:0 0 4px; font-size:1.35rem; letter-spacing:-.02em; }
.section-head p { margin:0; }

.people-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.person-card {
    display:block; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px; transition:.18s ease;
}
.person-card:hover { transform:translateY(-2px); border-color:#3a4050; box-shadow:var(--shadow); }
.person-top { display:flex; gap:12px; align-items:center; }
.person-letter {
    width:42px; height:42px; border-radius:13px; background:linear-gradient(145deg,#2b2349,#1b1930);
    display:grid; place-items:center; color:#c8bcff; font-weight:850; border:1px solid #3a315f;
}
.person-letter.large { width:58px; height:58px; border-radius:18px; font-size:1.2rem; }
.person-title { min-width:0; flex:1; }
.person-title h3 { margin:0 0 5px; font-size:1.05rem; }
.arrow { color:#666e7e; font-size:1.3rem; }
.status { font-size:.72rem; font-weight:750; }
.status.open { color:#ffba71; }
.status.settled { color:var(--success); }
.status.neutral { color:var(--muted); }
.person-balance { margin:24px 0 14px; }
.person-balance span { display:block; color:var(--muted); font-size:.82rem; margin-bottom:5px; }
.person-balance strong { font-size:1.8rem; letter-spacing:-.04em; }
.person-meta { display:flex; flex-wrap:wrap; gap:7px 16px; color:var(--muted); font-size:.78rem; border-top:1px solid var(--border); padding-top:14px; }
.person-meta b { color:#d7dbe4; font-weight:650; }

.empty-state {
    border:1px dashed #313746; border-radius:var(--radius); min-height:260px; display:grid; place-items:center;
    align-content:center; text-align:center; padding:30px; background:rgba(255,255,255,.01);
}
.empty-state.compact { min-height:180px; }
.empty-state h3 { margin:6px 0; }
.empty-state p { margin:0 0 18px; }
.empty-icon { font-size:1.6rem; color:var(--accent-2); }

.back-link { display:inline-block; color:var(--muted); font-size:.9rem; margin-bottom:28px; }
.back-link:hover { color:white; }
.person-heading { display:flex; align-items:center; gap:15px; }
.person-note { max-width:650px; margin:15px 0 0 73px; }
.timeline { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tx-row { display:flex; gap:13px; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border); }
.tx-row:last-child { border-bottom:0; }
.tx-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; font-weight:900; font-size:1.15rem; }
.tx-icon.debt { background:rgba(255,186,113,.1); color:#ffba71; }
.tx-icon.payment { background:rgba(53,208,127,.1); color:var(--success); }
.tx-main { min-width:0; flex:1; }
.tx-title { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.tx-amount { white-space:nowrap; font-weight:800; }
.debt-text { color:#ffba71; }
.payment-text { color:var(--success); }
.tx-sub { display:flex; gap:6px; flex-wrap:wrap; color:var(--muted); font-size:.8rem; margin-top:5px; }
.inline-form { display:inline; }
.icon-btn { width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:1.25rem; }
.icon-btn:hover { background:var(--panel-2); color:white; }
.icon-btn.danger:hover { color:var(--danger); border-color:rgba(255,95,109,.3); }

.danger-zone {
    margin-top:40px; border:1px solid rgba(255,95,109,.16); background:rgba(255,95,109,.025);
    border-radius:var(--radius); padding:18px; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.danger-zone p { margin:4px 0 0; }

.modal {
    width:min(520px, calc(100% - 24px)); border:1px solid var(--border); border-radius:22px;
    background:#11141b; color:var(--text); padding:0; box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.modal::backdrop { background:rgba(4,5,8,.78); backdrop-filter:blur(5px); }
.modal form { padding:22px; }
.modal-head { display:flex; align-items:start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.modal-head h2 { margin:0; font-size:1.45rem; }
label { display:block; margin:15px 0; }
label > span { display:block; color:#c7cbd5; font-size:.84rem; font-weight:650; margin-bottom:7px; }
label em { color:var(--muted); font-style:normal; font-weight:450; }
input, textarea {
    width:100%; border:1px solid var(--border); background:#0c0f15; color:white; border-radius:12px;
    padding:12px 13px; outline:none; resize:vertical;
}
input:focus, textarea:focus { border-color:#6651ce; box-shadow:0 0 0 3px rgba(124,92,255,.10); }
.amount-input { position:relative; }
.amount-input input { padding-right:48px; }
.amount-input b { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.9rem; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:#0c0f15; padding:5px; border:1px solid var(--border); border-radius:14px; }
.segmented label { margin:0; cursor:pointer; }
.segmented input { position:absolute; opacity:0; pointer-events:none; }
.segmented span { margin:0; text-align:center; padding:10px; border-radius:10px; color:var(--muted); }
.segmented input:checked + span { background:var(--panel-2); color:white; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

.flash { margin:-18px 0 24px; padding:12px 15px; border-radius:12px; font-size:.9rem; border:1px solid; }
.flash.success { background:rgba(53,208,127,.08); color:#75e6a9; border-color:rgba(53,208,127,.18); }
.flash.error { background:rgba(255,95,109,.08); color:#ff8f98; border-color:rgba(255,95,109,.18); }
.flash.info { background:rgba(124,92,255,.08); color:#b7a9ff; border-color:rgba(124,92,255,.18); }

.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px 0; }
.login-card {
    width:min(430px,100%); text-align:center; background:rgba(18,21,28,.92); border:1px solid var(--border);
    border-radius:26px; padding:38px; box-shadow:var(--shadow);
}
.login-card h1 { font-size:2.5rem; letter-spacing:-.055em; margin:7px 0 12px; }
.login-card > .muted { line-height:1.6; }
.login-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 20px; border-radius:20px; background:#211b3b; border:1px solid #3b3067; color:#beafff; font-size:1.6rem; font-weight:900; }
.discord-btn { width:100%; background:#5865f2; color:white; margin:18px 0 8px; padding:13px; }
.discord-btn:hover { background:#6874f4; transform:translateY(-1px); }
.danger-text { color:#ff7b87; }

@media (max-width: 760px) {
    .shell { width:min(100% - 22px, 1120px); }
    .topbar { margin-bottom:26px; min-height:68px; }
    .nav-name { display:none; }
    .hero, .person-hero { align-items:stretch; flex-direction:column; }
    .hero .primary-btn, .person-hero .primary-btn { width:100%; }
    .stats-grid { grid-template-columns:1fr; gap:9px; margin-bottom:32px; }
    .people-grid { grid-template-columns:1fr; }
    .person-note { margin-left:0; }
    .tx-title { align-items:flex-start; flex-direction:column; gap:3px; }
    .tx-row { align-items:flex-start; }
    .danger-zone { align-items:stretch; flex-direction:column; }
    .danger-zone .danger-btn { width:100%; }
}

@media (max-width: 430px) {
    .person-meta { flex-direction:column; }
    .login-card { padding:28px 20px; }
}