*{box-sizing:border-box}html{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;background:#fff8f4;color:#393347}body{margin:0}#app{max-width:560px;margin:auto;padding:12px;min-height:100vh;background:radial-gradient(circle at 10% 0%,#f8dbef 0,transparent 35%),radial-gradient(circle at 90% 18%,#dff5e6 0,transparent 38%),#fff8f4}header,.identity,.stats,.cardhead,.unit,.actions{display:flex;align-items:center;justify-content:space-between;gap:9px}.identity{justify-content:flex-start}.identity strong,.identity small{display:block}.identity strong{font-size:17px}.identity small{font-size:11px;color:#756879}.brandmark{display:grid;place-items:center;border-radius:14px;background:#eddaf8;width:42px;height:42px;font-size:25px;color:#8c63a8}.pill{font-size:10px;background:#f5eaf8;color:#654978;border-radius:99px;padding:7px 10px;white-space:nowrap}.welcome{text-align:center;margin:17px 0;padding:15px;border-radius:20px;background:linear-gradient(120deg,#fff1eb,#f9eaff 60%,#e5f9ef);border:1px solid #fff}.welcome span{font-size:11px;color:#a076a0}.welcome h1{font-size:23px;margin:7px 0;color:#745186}.welcome p{font-size:12px;line-height:1.5;margin:0}.notice{font-size:11px;line-height:1.5;background:#fff;border:1px solid #eadfe6;border-radius:12px;padding:10px;margin:12px 0}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}button{border:0;cursor:pointer;font:inherit}nav button{font-size:12px;font-weight:700;color:#725b78;border-radius:12px;padding:12px 2px;background:#fff;box-shadow:0 2px 8px #8d708510}nav button[aria-pressed=true]{background:#816398;color:white}.card{background:#fffdfc;border:1px solid #ecdfeb;border-radius:18px;padding:14px;margin:10px 0;box-shadow:0 3px 12px #9c769610}.card h2{font-size:15px;margin:0 0 10px}.muted{font-size:12px;color:#7e7286}.stats{align-items:stretch}.stat{flex:1;background:#f5f0fa;padding:11px 5px;border-radius:12px;text-align:center}.stat b,.stat small{display:block}.stat b{font-size:16px}.stat small{color:#766780;font-size:10px}.unit{border-radius:12px;background:#faf3f7;padding:10px;margin:7px 0}.unit strong{font-size:13px}.unit small{font-size:11px;color:#85788c}.avatar{display:grid;place-items:center;background:#e5d8f2;width:44px;height:44px;border-radius:12px;flex-shrink:0}.unitmain{display:flex;align-items:center;gap:9px}.tag{font-size:10px;color:#805b94;background:#eadbf4;border-radius:8px;padding:5px 7px}.cta{width:100%;background:#84649a;color:#fff;border-radius:11px;padding:10px;font-size:12px;font-weight:700}.cta:disabled{background:#c9bfd0;cursor:not-allowed}input{width:100%;border:1px solid #d9cadd;border-radius:10px;padding:11px;font:inherit;font-size:13px;margin:4px 0 8px}footer{text-align:center;color:#98879c;font-size:10px;margin-top:24px}.empty{padding:20px;text-align:center;color:#766780;font-size:12px}.config{padding:20px;max-width:560px;margin:auto}code{overflow-wrap:anywhere}@media(max-width:330px){#app{padding:8px}.stats{gap:4px}.stat b{font-size:13px}}
.avatar img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}