*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#f3efe7;color:#1d2a24}
#phoneWrap{max-width:960px;margin:0 auto;background:#fff;min-height:100vh}
#phoneWrap.mobile{max-width:400px;border:1px solid #ccc;box-shadow:0 0 24px rgba(0,0,0,.2)}
.hero{position:relative}.banner{width:100%;display:block}
.hero-text{padding:16px 20px;background:#0f3d2e;color:#fff}
.hero-text h1{margin:0 0 6px;font-size:26px}.tagline{margin:4px 0}.sub{opacity:.85;margin:4px 0 10px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;background:#e9e2d3;position:sticky;top:0;z-index:5}
.roles{display:flex;gap:6px}.roles button{padding:8px 14px;border:1px solid #0f3d2e;background:#fff;border-radius:20px;cursor:pointer}
.roles button.active{background:#0f3d2e;color:#fff}
main{padding:16px}.card{border:1px solid #ddd;border-radius:12px;padding:16px;margin-bottom:16px;background:#fff}
.card h2{margin-top:0;font-size:18px}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
label{font-size:14px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px}
input,select,textarea{padding:9px;border:1px solid #bbb;border-radius:8px;font-size:15px;width:100%}
.btn{padding:10px 16px;border-radius:10px;border:1px solid #0f3d2e;background:#fff;color:#0f3d2e;cursor:pointer;font-size:15px;text-decoration:none;display:inline-block}
.btn.primary{background:#0f3d2e;color:#fff}.btn.ghost{border-color:#fff;color:#fff;background:transparent}
.btn.small{padding:6px 10px;font-size:13px}.btn.danger{border-color:#b3261e;color:#b3261e}
.price{background:#f6f1e5;border-radius:8px;padding:10px;margin:10px 0}.muted{color:#666;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{border-bottom:1px solid #eee;padding:6px 4px;text-align:left}
.badge{display:inline-block;padding:2px 8px;border-radius:10px;background:#e6f0e9;font-size:12px}
.badge.warn{background:#fdeecb}.badge.bad{background:#fbd9d3}
.qr{max-width:260px;width:100%}.msg{padding:10px;border-radius:8px;background:#e6f0e9;margin-top:10px}
footer{padding:16px;text-align:center}
@media(max-width:640px){.hero-text h1{font-size:20px}main{padding:10px}}