:root{
  --ink:#1a1210;
  --ink-dark:#0d0806;
  --parchment:#fbf9f6;
  --paper:#ffffff;
  --gold:#e2660a;
  --gold-light:#f4a13d;
  --crimson:#af1f06;
  --charcoal:#1a1210;
  --line: rgba(26,18,16,0.12);
  --good:#2f6d3f;
  --bad:#af1f06;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--parchment);
  color:var(--charcoal);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
.display{ font-family:'Bebas Neue', sans-serif; letter-spacing:0.02em; }
a{ color:inherit; }
input, select{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  padding:0.7rem 0.9rem;
  border-radius:8px;
  border:1.5px solid var(--line);
  background:var(--paper);
  color:var(--charcoal);
  outline:none;
}
input:focus{ border-color:var(--gold); }
label{
  display:block;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.7;
  margin-bottom:0.35rem;
}
.field{ margin-bottom:1rem; }
button{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.95rem;
  cursor:pointer;
  border:none;
  border-radius:8px;
  padding:0.8rem 1.4rem;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
  box-shadow:0 5px 0 var(--ink-dark);
  transition:transform 0.1s ease, box-shadow 0.1s ease;
  width:100%;
}
.btn-primary:hover{ transform:translateY(2px); box-shadow:0 3px 0 var(--ink-dark); }
.btn-primary:active{ transform:translateY(5px); box-shadow:0 0 0 var(--ink-dark); }
.btn-primary:disabled{ opacity:0.55; cursor:default; transform:none; box-shadow:0 5px 0 var(--ink-dark); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--ink); }
.btn-danger{ background:var(--crimson); color:var(--paper); }
.wrap{ max-width:960px; margin:0 auto; padding:0 1.25rem; }

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 0; border-bottom:1px solid var(--line);
  margin-bottom:2.5rem;
}
.brand{ display:flex; align-items:center; gap:0.6rem; }
.brand img{ width:34px; height:34px; object-fit:contain; }
.brand span{ font-family:'Bebas Neue', sans-serif; font-size:1.5rem; }

.card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:2rem;
  max-width:440px;
  margin:0 auto;
}
.card.wide{ max-width:760px; }

h1.page-title{
  font-size:clamp(1.8rem, 4vw, 2.4rem);
  text-align:center;
  margin-bottom:0.35rem;
}
.subtitle{
  text-align:center; opacity:0.65; font-size:0.9rem; margin-bottom:2rem;
}

.tabbar{ display:flex; gap:0.5rem; margin-bottom:1.5rem; }
.tabbar button{ flex:1; background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.tabbar button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.error{ background:#fbeae6; color:var(--crimson); border:1px solid #f0c4b8; border-radius:8px; padding:0.7rem 0.9rem; font-size:0.85rem; margin-bottom:1rem; }
.success{ background:#e9f4ec; color:var(--good); border:1px solid #c6e3cd; border-radius:8px; padding:0.7rem 0.9rem; font-size:0.85rem; margin-bottom:1rem; }

.balance-hero{
  text-align:center; padding:2rem 1rem;
  background:linear-gradient(160deg, var(--ink), var(--ink-dark));
  border-radius:14px; color:var(--paper); margin-bottom:1.75rem;
}
.balance-hero .label{ font-size:0.8rem; opacity:0.7; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.4rem; }
.balance-hero .amount{ font-family:'Bebas Neue', sans-serif; font-size:3.4rem; color:var(--gold-light); }

.row{ display:flex; justify-content:space-between; align-items:flex-start; padding:0.9rem 0; border-bottom:1px solid var(--line); gap:1rem; }
.row:last-child{ border-bottom:none; }
.row .meta{ font-size:0.78rem; opacity:0.6; margin-top:0.2rem; }
.row .reason{ font-size:0.85rem; margin-top:0.25rem; }
.amt-pos{ color:var(--good); font-weight:700; white-space:nowrap; }
.amt-neg{ color:var(--bad); font-weight:700; white-space:nowrap; }

.section-title{ font-family:'Bebas Neue', sans-serif; font-size:1.3rem; margin-bottom:0.75rem; margin-top:2rem; }
.section-title:first-child{ margin-top:0; }

.user-list-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:0.9rem 1rem; border:1.5px solid var(--line); border-radius:10px;
  margin-bottom:0.6rem; cursor:pointer; background:var(--paper);
}
.user-list-item:hover{ border-color:var(--gold); }
.user-list-item .name{ font-weight:600; }
.user-list-item .phone{ font-size:0.8rem; opacity:0.6; }
.user-list-item .credit{ font-family:'Bebas Neue', sans-serif; font-size:1.3rem; color:var(--gold); }

.backlink{ display:inline-block; margin-bottom:1rem; font-size:0.85rem; font-weight:600; opacity:0.75; cursor:pointer; }
.backlink:hover{ opacity:1; }

.empty{ text-align:center; opacity:0.55; padding:2rem 0; font-size:0.9rem; }
.spinner-wrap{ text-align:center; padding:3rem 0; opacity:0.6; font-size:0.9rem; }

.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem 1.5rem; margin-bottom:1.5rem; }
.detail-grid div span{ display:block; }
.detail-grid .k{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; opacity:0.55; margin-bottom:0.15rem; }
.detail-grid .v{ font-size:0.92rem; }

.adjust-form{ display:flex; gap:0.6rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.5rem; }
.adjust-form .field{ margin-bottom:0; }
.adjust-form .amt-field{ width:150px; }
.adjust-form .reason-field{ flex:1; min-width:220px; }

.stat-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:1.1rem 1.3rem;
  margin-bottom:1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.stat-card .k{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.6; }
.stat-card .v{ font-family:'Bebas Neue', sans-serif; font-size:1.9rem; color:var(--gold); }

.danger-zone{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1.5px dashed var(--line);
}
.danger-zone .section-title{ color:var(--crimson); }
.danger-zone p{ font-size:0.85rem; opacity:0.7; margin-bottom:0.9rem; }
.danger-zone .row-inline{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.danger-zone input{ flex:1; min-width:160px; }
.danger-zone button{ width:auto; }

@media (max-width:640px){
  header{ flex-direction:column; gap:1rem; align-items:flex-start; }
  .detail-grid{ grid-template-columns:1fr; }
  .adjust-form{ flex-direction:column; align-items:stretch; }
  .adjust-form .amt-field{ width:100%; }
}