:root{
  --paper: #EAE1CC;
  --paper-card: #F4EEDD;
  --ink: #2B2119;
  --ink-soft: #5C4F3F;
  --rule: #C9BB9C;
  --oxblood: #7A2E27;
  --oxblood-dark: #5E211C;
  --pasture: #4C6B45;
  --pasture-dark: #384F32;
  --brass: #A97F2E;
  --brass-light: #D9B76A;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at top left, rgba(169,127,46,0.07), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(74,90,60,0.06), transparent 55%);
  color: var(--ink);
  font-family:'Libre Franklin', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Zilla Slab', serif; margin:0;}
a{color:inherit;}

header.top{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--ink);
  padding:14px 24px;
  flex-wrap:wrap; gap:10px;
}
header.top .brand{display:flex;align-items:center;gap:10px;}
header.top .brand-logo{height:40px;width:auto;}
header.top h1{font-size:1.3rem;}
nav.top-nav{display:flex;gap:4px;flex-wrap:wrap;}
nav.top-nav a{
  font-family:'Zilla Slab',serif;font-weight:600;font-size:0.92rem;
  padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--ink-soft);
}
nav.top-nav a:hover{background:var(--paper-card);}
nav.top-nav a.active{background:var(--oxblood);color:#fff;}

main.page{max-width:1080px;margin:0 auto;padding:24px;}

.flash-stack{margin-bottom:18px;display:flex;flex-direction:column;gap:8px;}
.flash{padding:10px 14px;border-radius:8px;font-size:0.9rem;border:1px solid;}
.flash-success{background:#EAF1E7;border-color:var(--pasture);color:var(--pasture-dark);}
.flash-error{background:#F6E7E5;border-color:var(--oxblood);color:var(--oxblood-dark);}

.card{
  background:var(--paper-card);
  border:1px solid var(--rule);
  border-radius:10px;
  box-shadow: 0 2px 10px -4px rgba(43,33,25,0.25);
  padding:20px;
  margin-bottom:20px;
}
.card h2{font-size:1.15rem;margin-bottom:4px;}
.card .hint{font-size:0.85rem;color:var(--ink-soft);margin:0 0 16px;}

label{display:block;font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-bottom:5px;font-weight:600;}
input[type=text], input[type=password], input[type=number], input[type=email], select{
  width:100%;font-family:'Libre Franklin',sans-serif;font-size:1rem;
  padding:10px;border:1px solid var(--rule);border-radius:8px;
  background:#fffdf8;color:var(--ink);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible{
  outline:3px solid var(--brass);outline-offset:1px;
}

.stack{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.sex-toggle{display:flex;border:1px solid var(--ink);border-radius:8px;overflow:hidden;width:fit-content;}
.sex-toggle label{
  margin:0;padding:9px 22px;cursor:pointer;
  font-family:'Zilla Slab',serif;font-size:0.95rem;text-transform:none;letter-spacing:0;font-weight:600;
  background:#fffdf8;color:var(--ink-soft);
}
.sex-toggle input{display:none;}
.sex-toggle input:checked + label.bull{background:var(--oxblood);color:#fff;}
.sex-toggle input:checked + label.cow{background:var(--pasture);color:#fff;}

.breed-rows{display:flex;flex-direction:column;gap:8px;}
.breed-row{display:flex;gap:8px;align-items:center;}
.breed-row select{flex:1.6;}
.breed-row .pct-wrap{flex:0 0 100px;position:relative;}
.breed-row .pct-wrap input{padding-right:26px;}
.breed-row .pct-wrap span{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--ink-soft);}
.breed-row button.rm{
  flex:0 0 auto;background:none;border:1px solid var(--rule);color:var(--oxblood);
  width:38px;height:38px;border-radius:8px;cursor:pointer;font-size:1rem;
}
.breed-controls{display:flex;justify-content:space-between;align-items:center;margin-top:10px;flex-wrap:wrap;gap:8px;}
.add-breed{
  background:none;border:1px dashed var(--brass);color:var(--brass);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-family:'Zilla Slab',serif;font-weight:600;font-size:0.88rem;
}
.pct-total{font-family:'Zilla Slab',serif;font-size:0.9rem;font-weight:600;}
.pct-total.ok{color:var(--pasture-dark);}
.pct-total.bad{color:var(--oxblood);}

.btn{
  font-family:'Zilla Slab',serif;font-weight:600;font-size:0.95rem;
  padding:11px 20px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  display:inline-block;
}
.btn-primary{background:var(--oxblood);color:#fff;}
.btn-primary:disabled{background:#B79A94;cursor:not-allowed;}
.btn-secondary{background:none;border:1px solid var(--ink-soft);color:var(--ink-soft);}
.btn-danger{background:none;border:1px solid var(--oxblood);color:var(--oxblood);}
.btn-small{padding:6px 12px;font-size:0.82rem;}

.form-actions{display:flex;gap:10px;margin-top:14px;align-items:center;flex-wrap:wrap;}

table.ledger{width:100%;border-collapse:collapse;}
table.ledger th{
  text-align:left;font-size:0.72rem;text-transform:uppercase;letter-spacing:1px;
  color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:8px 6px;
}
table.ledger td{padding:10px 6px;border-bottom:1px solid var(--rule);vertical-align:middle;}
table.ledger tr:hover td{background:rgba(169,127,46,0.06);}

.comp-line{font-size:0.82rem;color:var(--ink-soft);}
.swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}
.tag-pill{font-size:0.72rem;color:var(--ink-soft);border:1px solid var(--rule);padding:1px 7px;border-radius:10px;margin-left:6px;}

.book-switcher{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.book-switcher a{
  padding:7px 14px;border-radius:20px;border:1px solid var(--rule);
  font-family:'Zilla Slab',serif;font-weight:600;font-size:0.85rem;text-decoration:none;color:var(--ink-soft);
}
.book-switcher a.active{background:var(--pasture);border-color:var(--pasture);color:#fff;}
.perm-badge{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--ink-soft);margin-left:4px;}

.result-card{
  background:var(--paper-card);border:2px solid var(--ink);border-radius:10px;
  padding:24px;text-align:center;margin-top:20px;
}
.result-card .eyebrow{font-size:0.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--ink-soft);margin-bottom:4px;}
.result-card h3{font-size:1.25rem;margin:0 0 18px;}
.ring-grid{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;}
.ring-item{width:90px;}
.ring-item .ring{width:78px;height:78px;border-radius:50%;margin:0 auto 6px;position:relative;}
.ring-item .pct-label{
  position:absolute;inset:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Zilla Slab',serif;font-weight:700;font-size:0.85rem;color:var(--ink);background:var(--paper-card);
}
.ring-item .b-name{font-size:0.75rem;color:var(--ink-soft);}
.caveat{font-size:0.78rem;color:var(--ink-soft);margin-top:18px;border-top:1px solid var(--rule);padding-top:14px;text-align:left;}

.coi-block{margin-top:18px;border-top:1px solid var(--rule);padding-top:16px;text-align:left;}
.coi-value{font-family:'Zilla Slab',serif;font-weight:700;font-size:2.1rem;margin-top:4px;}
.coi-low{color:var(--pasture-dark);}
.coi-mid{color:var(--brass);}
.coi-high{color:var(--oxblood);}

.pedigree-chart{display:flex;align-items:stretch;background:#fff;border:1px solid var(--rule);padding:10px;min-height:400px;overflow-x:auto;}

.cross-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;}
.cross-x{display:flex;align-items:center;justify-content:center;padding-top:60px;font-family:'Zilla Slab',serif;font-size:1.4rem;color:var(--ink-soft);}
.role-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--brass);font-weight:700;}

.empty-state{text-align:center;padding:30px 16px;color:var(--ink-soft);font-size:0.92rem;}

.auth-wrap{max-width:420px;margin:60px auto;}
.auth-wrap .card{margin-bottom:0;}
.qr-box{background:#fff;padding:12px;display:inline-block;border-radius:8px;}
.muted{color:var(--ink-soft);font-size:0.85rem;}

.icon-btn{
  background:none;border:1px solid var(--rule);color:var(--ink-soft);
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size:0.85rem;
}
.icon-btn.del{color:var(--oxblood);}

@media (max-width: 720px){
  .row-2, .cross-grid{grid-template-columns:1fr;}
  .cross-x{padding-top:0;}
}

@media print{
  body.printing-pedigree > *:not(#pedigreeModal){display:none !important;}
  body.printing-pedigree #pedigreeModal{position:static;display:block !important;background:none;padding:0;}
  body.printing-pedigree #pedigreeModal > div{max-width:none;max-height:none;box-shadow:none;border:none;overflow:visible;}
  body.printing-pedigree #pedigreeModal button{display:none !important;}

  body.printing-calc > *:not(main){display:none !important;}
  body.printing-calc main.page > *:not(#calcResultCard){display:none !important;}
  body.printing-calc #calcResultCard{border:none;box-shadow:none;}
  body.printing-calc #calcResultCard *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body.printing-calc .pedigree-chart{overflow:visible;break-inside:avoid;}
  .no-print{display:none !important;}
}