:root{--navy:#021E4D;--navy2:#0a356e;--gold:#F0A010;--gold2:#ffb52e;--bg:#eef1f6;--card:#fff;--text:#1a2433;--muted:#667085}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#e8edf5 0,#f4f6fa 260px);color:var(--text);-webkit-font-smoothing:antialiased}
header{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 18px rgba(2,30,77,.35);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:56px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));border-radius:10px}
header h1{font-size:24px;margin:0;letter-spacing:-.02em}header h1 span{color:var(--gold)}
.tagline{margin:1px 0 0;color:#c8d4ea;font-size:12.5px;letter-spacing:.02em}
header a{color:var(--gold);font-weight:600;text-decoration:none;border:1px solid rgba(240,160,16,.5);border-radius:20px;padding:7px 13px;white-space:nowrap}
header a:hover{background:rgba(240,160,16,.15)}
nav{display:flex;gap:8px;padding:10px 12px;background:rgba(255,255,255,.92);border-bottom:1px solid #e2e6ec;overflow-x:auto;position:sticky;top:84px;z-index:19;backdrop-filter:blur(6px)}
nav button{border:1px solid #d0d7e3;background:#fff;border-radius:20px;padding:8px 14px;cursor:pointer;white-space:nowrap;font-weight:600;color:#344054}
nav button.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 3px 10px rgba(2,30,77,.3)}
main{max-width:720px;margin:0 auto;padding:18px 12px 40px}
.card{background:var(--card);border:1px solid #e6eaf2;border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 8px 24px rgba(2,30,77,.08)}
h2{margin:0 0 10px;font-size:20px;letter-spacing:-.015em}h3{margin:16px 0 8px;font-size:16px}
label{display:block;font-size:14px;margin:12px 0 4px;color:#344054;font-weight:600}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d0d7e3;border-radius:10px;font-size:16px;background:#fbfcfe;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,160,16,.25);background:#fff}
button.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);border:none;border-radius:12px;padding:13px 16px;font-weight:800;font-size:16px;cursor:pointer;width:100%;margin-top:12px;box-shadow:0 4px 14px rgba(240,160,16,.35)}
button.primary:hover{filter:brightness(1.05)}button.primary:active{transform:translateY(1px)}
button.secondary{background:#fff;border:1.5px solid var(--gold);color:#7a5200;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
button.danger{background:#fff;border:1px solid #d92d20;color:#d92d20;border-radius:10px;padding:8px 12px;cursor:pointer}
button.small{width:auto;padding:7px 11px;margin:4px 4px 0 0}
.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{flex:1}
.muted{color:var(--muted);font-size:13px}.badge{display:inline-block;background:#fee4e2;color:#b42318;border-radius:12px;padding:2px 8px;font-size:12px;font-weight:700}
.badge.ok{background:#d1fadf;color:#027a48}.badge.warn{background:#fef0c7;color:#b54708}
.slotgrid{display:flex;flex-wrap:wrap;gap:8px}.slotgrid button{width:auto;border:1px solid #d0d7e3;background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:600}
.slotgrid button.sel{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 3px 10px rgba(2,30,77,.3)}
.sugg{border:1px solid #d0d7e3;border-radius:10px;background:#fff;max-height:180px;overflow:auto;box-shadow:0 8px 20px rgba(2,30,77,.12)}
.sugg div{padding:9px 10px;cursor:pointer;border-bottom:1px solid #eef1f5}
.notice{background:#fff8e6;border:1px solid #f0c268;border-radius:10px;padding:11px;margin:10px 0;font-size:14px}
.error{background:#fef3f2;border:1px solid #fecdca;border-radius:10px;padding:11px;margin:10px 0;color:#b42318}
.success{background:#ecfdf3;border:1px solid #a6f4c5;border-radius:10px;padding:11px;margin:10px 0}
.scrollbox{border:1px solid #d0d7e3;border-radius:10px;max-height:340px;overflow:auto;padding:8px}
.visit{border:1px solid #e2e6ec;border-radius:12px;padding:12px;margin-bottom:10px;background:#fbfcfe}
.visit img{max-width:90px;border-radius:8px;display:block;margin-top:6px}
.petnotes{background:#f8f9fb;border:1px solid #e2e6ec;border-radius:10px;padding:10px;margin-top:8px}
.hidden{display:none!important}
footer{max-width:720px;margin:0 auto;padding:0 12px 30px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:480px){.row>*{flex-basis:100%}.logo{height:48px}header h1{font-size:21px}nav{top:76px}}