*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f7fb;color:#172033;font-size:14px}button,input,select,textarea{font:inherit}button,.soft,.primary{border:0;border-radius:9px;padding:10px 14px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-block}.primary{background:#2563eb;color:#fff}.soft{background:#eef2f7;color:#334155;border:1px solid #dbe2ea}.link{background:none;color:#2563eb;padding:4px}aside{position:fixed;inset:0 auto 0 0;width:235px;background:#0e1b36;color:#dbe6ff;display:flex;flex-direction:column;z-index:5}.brand{height:78px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid #22304b}.brand>span{font-size:31px}.brand b{font-size:20px;color:#fff}.brand small,.user small{display:block;color:#93a4c7;margin-top:2px}nav{padding:15px 10px;overflow:auto;flex:1}nav button{width:100%;text-align:left;color:#aebddd;background:transparent;margin:2px 0;padding:11px 13px}nav button.active,nav button:hover{background:#1e3a70;color:#fff}.user{display:flex;gap:10px;align-items:center;padding:16px;border-top:1px solid #22304b}.user>span{background:#2563eb;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:800}main{margin-left:235px;min-height:100vh}header{height:70px;background:#fff;border-bottom:1px solid #e6ebf2;display:flex;align-items:center;padding:0 25px;position:sticky;top:0;z-index:4}header>div:first-of-type{display:flex;flex-direction:column}header small{color:#718096;margin-top:3px}.head-actions{margin-left:auto;display:flex;gap:8px}#menu{display:none;background:none;font-size:22px}.view{display:none;padding:25px}.view.active{display:block}.welcome{background:linear-gradient(110deg,#183b77,#2563eb);color:#fff;border-radius:18px;padding:28px 32px;display:flex;justify-content:space-between;align-items:center}.welcome h1{font-size:28px;margin:7px 0}.welcome p{margin:0;color:#dbeafe}.welcome .primary{background:#fff;color:#1d4ed8}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:18px 0}.stats article,.card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 2px 8px #1720330a}.stats article{padding:18px;display:flex;gap:13px;align-items:center}.stats i{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;font-style:normal;font-size:20px}.blue{background:#dbeafe}.green{background:#dcfce7}.amber{background:#fef3c7}.violet{background:#ede9fe}.stats small{color:#718096}.stats strong{display:block;font-size:22px;margin-top:4px}.mini{grid-template-columns:repeat(4,1fr)}.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.card{padding:19px}.card h2{font-size:16px;margin:0 0 15px}.card-title,.page-title{display:flex;justify-content:space-between;align-items:center}.page-title{margin-bottom:18px}.page-title h1{margin:0;font-size:25px}.page-title p{margin:5px 0 0;color:#718096}.table{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;background:#f8fafc;color:#64748b;font-size:12px;text-transform:uppercase}th,td{padding:11px;border-bottom:1px solid #edf0f5}td small{color:#718096}.badge{padding:4px 9px;border-radius:20px;font-size:12px;font-weight:700;background:#dbeafe;color:#1d4ed8}.badge.green{background:#dcfce7;color:#15803d}.badge.red{background:#fee2e2;color:#b91c1c}.badge.amber{background:#fef3c7;color:#a16207}.alerts{display:grid;gap:10px}.alert{padding:12px;background:#f8fafc;border-radius:10px;display:flex;gap:10px}.alert span{font-size:20px}.alert b,.alert small{display:block}.alert small{color:#718096;margin-top:3px}.filters{display:flex;gap:9px;margin-bottom:15px}.filters input{flex:1}.filters input,.filters select,input,select,textarea{border:1px solid #cfd8e5;border-radius:8px;padding:9px;background:#fff;min-width:0}.pet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.pet-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px}.pet-head{display:flex;gap:12px}.pet-icon{width:48px;height:48px;border-radius:50%;background:#dbeafe;display:grid;place-items:center;font-size:24px}.pet-card h3{margin:3px 0}.pet-card p{color:#64748b;line-height:1.6}.pet-card .actions{display:flex;gap:7px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label,label{display:flex;flex-direction:column;gap:6px;font-weight:600}.span2{grid-column:1/-1}.form-card{max-width:850px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:17px}dialog{border:0;border-radius:15px;width:min(720px,94vw);padding:0;box-shadow:0 20px 60px #0004}dialog::backdrop{background:#0f172a99}dialog form{padding:22px}dialog h2{margin-top:0}.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bar{margin:12px 0}.bar>div{height:8px;background:#e2e8f0;border-radius:6px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:#2563eb}.danger{color:#dc2626}.low{background:#fff7ed!important}#toast{position:fixed;right:20px;bottom:20px;background:#172033;color:#fff;padding:12px 18px;border-radius:9px;z-index:20;opacity:0;transform:translateY(20px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}#printArea{display:none}@media print{body>*{display:none!important}#printArea{display:block!important;color:#000;padding:15px;font-size:12px}#printArea h1{text-align:center}#printArea table{white-space:normal}#printArea .ticket{width:72mm;margin:auto;text-align:center}#printArea .ticket .line{display:flex;justify-content:space-between;text-align:left;border-bottom:1px dashed #777;padding:5px 0}}@media(max-width:950px){aside{transform:translateX(-100%);transition:.2s}body.menu-open aside{transform:none}main{margin-left:0}#menu{display:block}.stats{grid-template-columns:1fr 1fr}.dash-grid,.report-grid{grid-template-columns:1fr}.pet-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.view{padding:15px}header{padding:0 12px}.head-actions .soft{display:none}.stats,.mini,.pet-grid,.form-grid{grid-template-columns:1fr}.welcome{padding:20px}.welcome button{display:none}.page-title{align-items:flex-start;gap:12px}.page-title>div:last-child{display:flex;flex-direction:column}.filters{flex-direction:column}}
