*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:#eceef0;color:#1a2531}
.hidden{display:none !important}
button{cursor:pointer;font-family:inherit}

/* LOGIN */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:20px}
.login-card{background:#fff;border-radius:18px;padding:42px 38px;width:100%;max-width:390px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{height:46px;object-fit:contain;margin-bottom:18px}
.login-card h1{font-size:21px;margin-bottom:6px}
.login-card .sub{font-size:13px;color:#7a8794;margin-bottom:26px}
.login-card input{width:100%;padding:13px 15px;border:1px solid #d5dbe1;border-radius:10px;font-size:15px;margin-bottom:14px}
.login-card button{width:100%;padding:13px;background:#2d5a2d;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600}
.login-card button:hover{background:#264d26}
.error{color:#c0392b;font-size:13px;margin-top:12px;min-height:16px}

/* TOPBAR */
.topbar{background:#1a1a2e;color:#fff}
.topbar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 22px}
.topbar-logo{height:30px;background:#fff;padding:3px 8px;border-radius:6px}
.topbar-title{font-weight:600;font-size:16px}
.ghost-btn{background:transparent;border:1px solid #cfd6dd;color:inherit;padding:9px 15px;border-radius:9px;font-size:13px;font-weight:500}
.topbar .ghost-btn{margin-left:auto;border-color:rgba(255,255,255,.35);color:#fff}
.ghost-btn:hover{background:rgba(0,0,0,.05)}
.ghost-btn.disabled{opacity:.45;pointer-events:none}
.ghost-btn:disabled{opacity:.45;cursor:not-allowed}

/* LAYOUT */
.layout{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:360px 1fr 320px;gap:22px;padding:24px 22px}
.col{background:#fff;border-radius:14px;padding:22px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.col h2{font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* FORM */
#dog-form label{display:block;font-size:12px;font-weight:600;color:#55636f;margin-bottom:13px}
#dog-form label span{color:#c0392b}
#dog-form input,#dog-form select{width:100%;padding:10px 12px;border:1px solid #d5dbe1;border-radius:8px;font-size:14px;margin-top:5px;font-family:inherit}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions{display:flex;gap:10px;margin-top:6px}
#save-btn{flex:1;background:#2d5a2d;color:#fff;border:none;padding:12px;border-radius:9px;font-weight:600;font-size:14px}
#save-btn:hover{background:#264d26}
#save-btn:disabled{opacity:.6;cursor:not-allowed}
.msg{font-size:13px;margin-top:12px;min-height:16px}
.msg.ok{color:#2d5a2d}
.msg.err{color:#c0392b}
#photo-preview-wrap{margin-bottom:13px}
#photo-preview{max-width:120px;border-radius:8px;border:1px solid #e0e0e0}

/* CARD PREVIEW (mirrors printable badge) */
.preview-col{display:flex;flex-direction:column;align-items:center}
.preview-col h2{align-self:flex-start}
#card-scale{width:100%;display:flex;justify-content:center}
/* Gray rounded frame — reproduces the reference look (rounded card floating on
   a light-gray page). This wrapper is what the PNG download captures. */
.card-frame{background:#e4e6e9;padding:30px;display:inline-block}
.card{width:520px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.14);transform-origin:top center;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.card-header{padding:24px 24px 21px;text-align:center;background:#fff}
/* Logo lockup ≈ 63% of card width, matching the reference badge.
   display:block removes the inline-image descender gap so header height is exact. */
.card-header img{height:84px;object-fit:contain;max-width:74%;display:block;margin:0 auto}
.panel{background:#5a717f;padding:26px;display:flex;gap:20px;min-height:407px}
.panel-left{flex:1 1 58%;color:#fff}
.handler-name{font-size:27px;font-weight:700;line-height:1.1;margin-bottom:20px;letter-spacing:-.3px}
.field{margin-bottom:16px}
.field .label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:3px}
.field .value{font-size:16px;font-weight:700;color:#fff}
.panel-right{flex:0 0 128px;display:flex;flex-direction:column;gap:11px}
.panel-right .photo{width:128px;height:150px;border-radius:12px;object-fit:cover;background:#ddd;border:2px solid #ffffff}
.chip{background:#f7f8f9;border-radius:10px;text-align:center}
/* CERTIFIED TEAM box — both lines bold dark green, matching the master design */
.chip-cert{padding:10px 6px}
.chip-cert .cert-line{font-size:14px;font-weight:700;letter-spacing:1.5px;color:#222f26;line-height:1.25}
/* EXPIRATION box — gray label + dark bold date */
.chip-exp{padding:8px 6px}
.chip-exp .chip-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#595959;margin-bottom:3px}
.chip-exp .chip-value{font-size:15px;font-weight:700;color:#171717}
.card-footer{background:#fff;padding:34px 26px 40px;display:flex;align-items:center;justify-content:center;gap:20px;min-height:319px}
.exp-vert{flex:0 0 auto;align-self:center;display:flex;align-items:center}
.exp-vert img{display:block}
.qr-wrap{text-align:center}
.qr-wrap canvas{width:172px !important;height:172px !important;display:block}
.preview-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;justify-content:center}

/* LIST */
.dog-list{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow:auto}
.dog-item{border:1px solid #e6eaee;border-radius:10px;padding:12px 13px}
.dog-item .di-name{font-weight:700;font-size:14px}
.dog-item .di-sub{font-size:12px;color:#7a8794;margin:2px 0 8px}
.dog-item .di-status{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px}
.di-status.active{background:#e8f5e8;color:#2d5a2d}
.di-status.expired,.di-status.revoked{background:#f5e8e8;color:#8a2d2d}
.di-actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.mini-btn{background:#eef1f4;border:none;border-radius:7px;padding:2px 8px;font-size:14px}
.di-actions .mini-btn{font-size:12px;padding:5px 10px}
.muted{color:#9aa3ab;font-size:13px}
a{color:#2563eb}

@media(max-width:1150px){.layout{grid-template-columns:1fr}}