:root{font-family:Arial,system-ui,sans-serif;color:#172c32;background:#f4f7f7}*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:#007c79}header{background:#103c42;color:white}header a{color:#fff}.wrap{max-width:1160px;margin:auto;padding:0 22px}.nav{display:flex;align-items:center;justify-content:space-between;min-height:76px}.brand{font-size:26px}.brand span{color:#4bd3a0}.brand small{font-size:13px;color:#d5eded;margin-left:10px}main{padding-top:34px!important;padding-bottom:60px!important;min-height:75vh}h1{font-size:29px}h2{margin-top:0;font-size:21px}.sub{color:#597277}.panel{background:white;border:1px solid #dfe9e8;border-radius:14px;padding:24px;margin:22px 0;box-shadow:0 3px 12px #163e4010}.narrow{max-width:480px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.card{border:1px solid #d8e7e4;border-radius:12px;padding:22px;background:#fbfdfc}.card h3{margin-top:0}.button,button{background:#097e71;color:white;border:0;border-radius:8px;padding:11px 16px;font-weight:bold;display:inline-block;text-decoration:none;cursor:pointer}.secondary{background:#d7e7e5;color:#173d3c}.textbtn{background:none;color:white;font-weight:normal}.inline{display:inline}.quick{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.quick a{background:#e0f1eb;border-radius:7px;padding:12px 15px;text-decoration:none;color:#11534b}label{display:block;margin:16px 0;font-weight:bold}input,select,textarea{display:block;width:100%;padding:11px;margin-top:6px;border:1px solid #b9cdcb;border-radius:6px;font:inherit;background:white}textarea{min-height:120px}.badge{background:#eef4f4;padding:5px 10px;border-radius:15px;font-size:13px}.badge.good{background:#d1f1df;color:#1a6c3c}.badge.muted{background:#eee;color:#555}.notice{background:#e1f3e6;padding:14px;border-left:4px solid #10835e}.error{background:#ffe9e9;color:#8a2020;padding:14px}.row{border-bottom:1px solid #eee;display:flex;justify-content:space-between;gap:15px;padding:12px 0;align-items:center}.row .inline button{font-size:13px}.statrow{display:flex;gap:16px}.stat{background:white;padding:20px;border-radius:10px;min-width:175px}.stat b{font-size:30px;display:block}.ticket{padding:16px;border-bottom:1px solid #ddd}.ticket p{white-space:normal}.small{color:#6c8280}footer{background:#103c42;color:white;padding:22px 0}hr{border:0;border-top:1px solid #ddd;margin:25px 0}@media(max-width:600px){.row,.statrow{display:block}.row>*{margin-top:8px}}

/* Mobile-first usability: large tap targets, flexible navigation and cards. */
button,.button,.quick a,header nav a{min-height:44px;touch-action:manipulation}
button,.button{display:inline-flex;align-items:center;justify-content:center;max-width:100%}
nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card .button{width:100%;text-align:center}
@media(max-width:640px){
 .wrap{padding-left:14px;padding-right:14px}
 .nav{padding-top:10px;padding-bottom:10px;gap:9px;align-items:flex-start;flex-direction:column}
 .brand{font-size:23px}.brand small{display:block;margin:4px 0 0}
 h1{font-size:25px}h2{font-size:20px}main{padding-top:22px!important}
 .panel{padding:16px;margin:14px 0}.cards{grid-template-columns:1fr}
 .quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.quick a{padding:12px 8px;text-align:center}
 input,select,textarea{font-size:16px;min-height:44px}
 .stat{min-width:0;margin-bottom:10px}.row{overflow-wrap:anywhere}
 .ticket{padding:12px 0}nav .textbtn{padding-left:0}
}