:root{ --bg:#f6f8fa; --card:#ffffff; --accent:#1db954; --muted:#6b7280; --text:#0f1724; --accent2:#0ea5a2; }
*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:var(--text)}
body{margin:0;background:linear-gradient(180deg,var(--bg),#e9eef2);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}
#app{width:100%;max-width:460px}
header{margin-bottom:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:56px;height:56px;background:linear-gradient(90deg,#10b981,#06b6d4);border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.title{font-size:18px;font-weight:700}
.sub{font-size:12px;color:var(--muted)}
.card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 6px 20px rgba(12,16,20,0.06);margin-bottom:12px}
label{display:block;margin:8px 0}
input[type="email"],input[type="password"],input[type="text"],input[type="number"],input[type="file"]{width:100%;padding:10px;border-radius:8px;border:1px solid #e6eef3;background:#fff}
button{padding:10px 12px;border-radius:10px;border:none;cursor:pointer}
.primary{background:var(--accent);color:#002b22;font-weight:700}
.ghost{background:transparent;border:1px solid #e2e8f0}
.hidden{display:none}
.balance-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.balance-amount{font-size:28px;font-weight:800}
.actions-col{display:flex;gap:8px;align-items:center}
.contact-list{display:flex;gap:8px;flex-wrap:wrap}
.contact{width:100%;display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;border:1px solid #f1f5f9;background:#fbfeff}
.contact .meta{flex:1}
.contact .send-btn{background:var(--accent2);color:#002b22}
.activity-list{list-style:none;padding:0;margin:0}
.activity-list li{padding:8px;border-bottom:1px solid #f1f5f9;font-size:14px}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,10,0.45)}
.modal-card{width:92%;max-width:420px;background:var(--card);padding:14px;border-radius:12px}
.slider-wrap{display:flex;align-items:center;gap:12px}
#add-slider{flex:1}
.slider-value button{background:transparent;border:2px solid #e6eef3;padding:8px;border-radius:8px}
.preview img{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid #e6eef3}
.muted{color:var(--muted)}
.small{font-size:12px}