:root { font-family: Inter, system-ui, Arial, sans-serif; color:#17312d; background:#f4f8f7; }
*{box-sizing:border-box} body{margin:0;min-height:100vh}.wrap{max-width:560px;margin:auto;padding:24px}
.brand{padding:28px 0 20px;text-align:center}.brand h1{font-size:22px;line-height:1.3;margin:10px 0 4px}
.brand p{margin:0;color:#5d746f}.mark{width:64px;height:64px;border-radius:18px;margin:auto;display:grid;place-items:center;background:#0b5e55;color:#fff;font-size:28px;font-weight:800}
.card{background:#fff;border:1px solid #dce8e5;border-radius:20px;padding:24px;box-shadow:0 12px 32px rgba(11,94,85,.08)}
label{font-weight:700;display:block;margin:0 0 8px}.amount{display:flex;align-items:center;border:1px solid #b8cbc7;border-radius:14px;padding:0 14px;background:#fff}.amount span{font-size:24px}.amount input{width:100%;border:0;outline:0;padding:16px 8px;font-size:28px;font-weight:700}
button{width:100%;border:0;border-radius:14px;padding:15px 18px;background:#0b5e55;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}.note{font-size:13px;color:#667c77;margin-top:14px;line-height:1.5}.status{margin-top:14px;padding:12px;border-radius:12px;background:#eef6f4;display:none}.footer{text-align:center;color:#71847f;font-size:12px;padding:22px 4px}
.adminbar{background:#102925;color:#fff;padding:12px 18px}.adminwrap{max-width:1100px;margin:auto;padding:18px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.metric{background:#fff;border:1px solid #dce8e5;border-radius:14px;padding:16px}.metric strong{display:block;font-size:26px}.tablewrap{overflow:auto;background:#fff;border:1px solid #dce8e5;border-radius:14px;margin-top:18px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:10px 12px;border-bottom:1px solid #edf2f1;text-align:left;white-space:nowrap}th{background:#f7faf9}.pill{padding:4px 8px;border-radius:999px;background:#eaf3f1;font-weight:700}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row a{color:#0b5e55}
/* Phase 2: customer status/receipt pages (mobile first) */
.logo{max-width:96px;max-height:96px;border-radius:18px}
.linkbtn{width:auto;background:none;color:#0b5e55;padding:6px 10px;font-size:14px;text-decoration:underline}
.btn{display:block;text-align:center;text-decoration:none;border-radius:14px;padding:15px 18px;background:#0b5e55;color:#fff;font-weight:800;font-size:16px;margin-top:10px}
.btn[hidden]{display:none}.btn.ghost{background:#eaf3f1;color:#0b5e55}
.facts{display:grid;grid-template-columns:1fr;gap:2px 12px;margin:16px 0}.facts dt{color:#667c77;font-size:13px;margin-top:10px}.facts dd{margin:0;font-weight:700;font-size:18px;word-break:break-all}
.ok{color:#0b7a4b}.bad{color:#b3261e}.actions{margin-top:8px}
.spinner{width:34px;height:34px;border:4px solid #dce8e5;border-top-color:#0b5e55;border-radius:50%;animation:spin 1s linear infinite;margin:14px 0}@keyframes spin{to{transform:rotate(360deg)}}
.footer a{color:#5d746f}
@media (min-width:480px){.facts{grid-template-columns:auto 1fr}.facts dt{margin-top:0;align-self:center}}
/* Admin sidebar layout */
.shell{display:flex;min-height:100vh}
.side{width:230px;flex:none;background:#102925;color:#fff;display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}.side-brand .mark{width:36px;height:36px;border-radius:10px;font-size:16px;margin:0}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.side nav a{display:flex;align-items:center;gap:10px;color:#cfe3de;text-decoration:none;padding:10px 12px;border-radius:10px;font-size:14px}
.side nav a:hover{background:#1a3d37}.side nav a.on{background:#0b5e55;color:#fff;font-weight:700}.ico{width:18px;text-align:center}
.side-user{border-top:1px solid #234a43;padding:12px 8px 0;font-size:13px}.side-user small{display:block;color:#8fb0a8;margin:2px 0 8px}.side-user a{color:#fff}
.main{flex:1;min-width:0}
@media (max-width:760px){.shell{flex-direction:column}.side{width:auto;height:auto;position:static;padding:10px}.side nav{flex-direction:row;flex-wrap:wrap}.side-user{display:flex;gap:10px;align-items:center;border:0;padding-top:8px}.side-user small{margin:0}}
/* ---- Responsive pass ---- */
html{-webkit-text-size-adjust:100%}img{max-width:100%;height:auto}
input,select,button{font:inherit;max-width:100%}
.adminwrap input,.adminwrap select{padding:8px 10px;border:1px solid #b8cbc7;border-radius:8px;background:#fff;min-width:0}
.adminwrap label{font-weight:600;font-size:13px;margin:0}.adminwrap form.card .row{align-items:flex-end}
.adminwrap h2,.adminwrap h3{margin:.4em 0}
.navtoggle{position:absolute;opacity:0;pointer-events:none}.burger{display:none;cursor:pointer;font-size:24px;line-height:1;padding:6px 10px;margin-left:auto;border-radius:8px}
.navtoggle:focus-visible~.side-brand .burger{outline:2px solid #fff}
.tablewrap{-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .wrap{padding:14px}.brand{padding:14px 0 10px}.brand h1{font-size:17px}.card{padding:18px;border-radius:16px}
  .amount input{font-size:24px}.btn,button{padding:14px 16px}
  .adminwrap{padding:12px}.grid{grid-template-columns:repeat(2,1fr)}.metric strong{font-size:20px}
  .side{padding:8px 10px}.side-brand{padding:2px 4px}.burger{display:block}
  .side nav,.side-user{display:none}
  .navtoggle:checked~nav{display:flex;flex-direction:column;margin-top:8px}
  .navtoggle:checked~.side-user{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .adminwrap form.card .row,.adminwrap form.card{display:flex;flex-direction:column;align-items:stretch}
  .adminwrap form.card label{display:flex;flex-direction:column;gap:4px}
  .adminwrap form.card button{width:100%!important}
  th,td{padding:8px 9px;font-size:12px}
}
@media (max-width:380px){.grid{grid-template-columns:1fr}}
/* Wide admin tables: keep columns readable and scroll sideways inside the card */
.tablewrap{max-width:100%;overflow-x:auto}.tablewrap table{min-width:720px;width:100%}.tablewrap th{white-space:nowrap}
.adminwrap{max-width:100%;overflow-wrap:anywhere}
@media (max-width:760px){.adminwrap h2{font-size:20px}.adminwrap p{line-height:1.7}.tablewrap{margin-top:12px}.tablewrap td form{display:inline-block}}
@media (min-width:761px) and (max-width:1100px){.side{width:200px}.adminwrap{padding:16px}}