:root { color-scheme: light; --ink:#163d35; --muted:#526a62; --paper:#f3f1e9; --card:#e7e9e1; --line:#b7c6bc; --accent:#146a57; --danger:#983c34; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(155deg,#e1e8df,var(--paper) 38%); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; font-size:16px; }
.shell { width:min(100%,760px); margin:auto; padding:env(safe-area-inset-top) 16px calc(32px + env(safe-area-inset-bottom)); }
.hero { padding:30px 4px 18px; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; color:#507467; }
h1 { margin:10px 0; font-size:clamp(27px,7vw,39px); letter-spacing:-.04em; }
h2 { margin:0 0 10px; font-size:20px; }
p { line-height:1.65; }
.hero p { margin:0; color:var(--muted); }
.status-card,.control-card,.danger-card { background:#fafaf6; border:1px solid var(--line); border-radius:20px; padding:19px; margin:14px 0; box-shadow:0 6px 22px #143d3510; }
.status-card { background:#dce8dc; }
.status-row,.list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.status-row strong { font-size:17px; }
.status-row span { background:var(--ink); color:white; border-radius:99px; padding:6px 11px; font-weight:800; }
.status-card p,.control-card p,.danger-card p { margin:8px 0; }
.message { font-weight:700; }
.message:empty { display:none; }
.message.error { color:var(--danger); }
label { display:block; font-weight:800; margin:15px 0 6px; }
input { width:100%; min-height:52px; font-size:17px; padding:11px 13px; color:var(--ink); background:white; border:2px solid var(--line); border-radius:12px; }
input:focus-visible,button:focus-visible { outline:3px solid #c49b51; outline-offset:2px; }
button { width:100%; min-height:54px; margin-top:12px; border:0; border-radius:12px; color:white; background:var(--accent); font-size:17px; font-family:inherit; font-weight:700; cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
button.secondary { color:var(--danger); background:#f6eee9; border:1px solid #d5afa8; }
.note { color:var(--muted); font-size:13px; }
.list-section { margin:27px 0; }
.list-heading span { font-size:12px; color:var(--muted); }
.search-label { font-size:13px; }
.list { margin-top:14px; display:grid; gap:11px; }
.customer { border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:13px; background:#fbfbf7; padding:14px 15px; }
.customer h3 { margin:0; font-size:21px; }
.customer p { margin:4px 0 0; }
.customer .address { font-size:17px; font-weight:700; }
.customer .info { color:#344e44; font-size:14px; }
.customer .code { color:var(--muted); font-size:12px; }
.customer .tags { color:#8c5b1c; font-size:13px; font-weight:800; }
.empty { color:var(--muted); padding:18px 2px; }
@media (min-width:650px) { .shell { padding-left:28px; padding-right:28px; } }