/* shoesizing.guya.me — shared theme
   Palette: white ground, grass-green accent, sunshine-yellow highlight.
   Friendly and a little playful on purpose — this is for someone standing
   in an airport or unboxing a gift, not filing a spreadsheet. */
:root{
  --bg:#ffffff;         --panel:#f6faf3;      --panel2:#eef6e8;
  --border:#dfe9d8;     --border-soft:#eaf1e4;
  --text:#1c2b1f;       --muted:#657565;
  --ink:#14200f;
  --green:#2f9e44;      --green-dark:#227a34;   --green-soft:#e6f5e2;
  --yellow:#ffcc33;     --yellow-dark:#e0ac0a;  --yellow-soft:#fff6da;
  --good:#2f9e44;       --warn:#e0ac0a;         --info:#3a8dce;
  --font-display:'Segoe UI Rounded','SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'SF Mono','Courier New',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  min-height:100vh;
}
a{color:var(--green-dark);}
.wrap{max-width:1200px; margin:0 auto; padding:0 18px;}

/* Confetti-dot texture used behind hero sections — playful, not noisy */
.confetti{
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,204,51,.35) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 12%, rgba(47,158,68,.20) 0 8px, transparent 9px),
    radial-gradient(circle at 80% 75%, rgba(255,204,51,.25) 0 5px, transparent 6px),
    radial-gradient(circle at 20% 85%, rgba(47,158,68,.18) 0 7px, transparent 8px),
    radial-gradient(circle at 55% 40%, rgba(255,204,51,.15) 0 4px, transparent 5px);
  background-color:var(--bg);
}

header.site{ padding:20px 18px 0; }
.site-nav{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; gap:10px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; background:var(--green);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{width:20px; height:20px;}
.brand-name{ color:var(--ink); font-weight:800; font-size:1.05rem; letter-spacing:-.01em; font-family:var(--font-display); }
.brand-name small{ display:block; font-weight:500; color:var(--muted); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; }
nav.links{ display:flex; gap:4px; flex-wrap:wrap; }
nav.links a{
  color:var(--muted); text-decoration:none; font-size:.86rem; padding:8px 12px; border-radius:8px;
  border:1px solid transparent; font-weight:600;
}
nav.links a:hover{ color:var(--ink); background:var(--panel2); }
nav.links a.active{ color:var(--green-dark); border-color:var(--border); background:var(--green-soft); }

/* Friendly notice banner — informative, not alarming */
.disclaimer{
  max-width:1200px; margin:16px auto 0; padding:14px 16px; border-radius:12px;
  background:var(--yellow-soft); border:1px solid #f0dfa0; color:#5a4a10; font-size:.85rem; line-height:1.55;
}
.disclaimer b{ color:var(--yellow-dark); }
.disclaimer.compact{ font-size:.78rem; padding:10px 14px; }

h1,h2,h3{ font-family:var(--font-display); color:var(--ink); font-weight:800; letter-spacing:-.01em; }

.badge{
  font-size:.66rem; padding:3px 9px; border-radius:20px; background:var(--panel2);
  color:var(--muted); border:1px solid var(--border); white-space:nowrap; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase;
}
.badge.men{ color:#0d3a17; background:#cdeecb; border-color:#a9dfa5; }
.badge.women{ color:#5a3a00; background:var(--yellow-soft); border-color:#f0dfa0; }
.badge.boys{ color:#0a3350; background:#d7ecfa; border-color:#b7dcf2; }
.badge.girls{ color:#5a1440; background:#fbdcee; border-color:#f3bbdd; }
.badge.size{ color:var(--green-dark); border-color:#c9e8c0; background:var(--green-soft); }

button, .btn{
  font-family:var(--font-body); font-size:.85rem; border:1px solid var(--border); background:var(--panel2);
  color:var(--text); padding:9px 15px; border-radius:10px; cursor:pointer; font-weight:700;
}
button:hover, .btn:hover{ background:var(--border-soft); }
button.primary, .btn.primary{ background:var(--green); border-color:var(--green); color:#ffffff; }
button.primary:hover{ background:var(--green-dark); }
button.secondary, .btn.secondary{ background:var(--yellow); border-color:var(--yellow); color:#4a3900; }
button.secondary:hover{ background:var(--yellow-dark); }
button:disabled{ opacity:.5; cursor:not-allowed; }

footer.site{
  max-width:1200px; margin:50px auto 0; padding:20px 18px 40px; color:var(--muted); font-size:.82rem;
  border-top:1px solid var(--border-soft); line-height:1.7;
}
footer.site a{ color:var(--green-dark); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }

/* ---- Convert widget ---- */
.convert-widget{
  background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:22px;
}
.convert-head h2{ margin:0 0 4px; font-size:1.25rem; }
.convert-sub{ margin:0 0 16px; color:var(--muted); font-size:.86rem; }
.convert-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.convert-row select, .convert-row input{
  padding:11px 12px; border-radius:10px; border:1px solid var(--border);
  background:#fff; color:var(--text); font-size:.92rem;
}
.convert-row select{ flex:1; min-width:130px; }
.convert-row input{ flex:1; min-width:110px; }
.convert-status{ margin:12px 0 0; font-size:.85rem; color:var(--muted); min-height:1.2em; }
.warn-text{ color:var(--warn); font-weight:600; }
.convert-results{
  margin-top:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;
}
.convert-result{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; text-align:center;
}
.convert-result.match{ border-color:var(--green); background:var(--green-soft); }
.convert-result .val{ font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--ink); }
.convert-result .lbl{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

/* ---- Size card (search results) ---- */
.size-card{
  background:var(--panel2); border:1px solid var(--border); border-radius:12px; padding:14px;
  display:flex; flex-direction:column; gap:6px; font-size:.86rem;
}
.size-card .badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px; }
.size-card h3{ margin:0; font-size:1.05rem; color:var(--ink); font-weight:800; }
.size-card .grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 10px; margin-top:4px;
}
.size-card .grid div{ font-size:.8rem; }
.size-card .grid .lbl{ color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; }
.size-card .grid .val{ font-weight:700; color:var(--ink); }
.size-card .meta-line{ color:var(--muted); font-size:.78rem; font-style:italic; }
.size-card .wiki-link{ margin-top:2px; font-size:.78rem; text-decoration:none; font-weight:700; }
.size-card .wiki-link:hover{ text-decoration:underline; }