:root {
  --orange: #F97316;
  --orange-light: #FDBA74;
  --orange-dark: #EA580C;
  --warm-bg: #FFF7ED;
  --warm-card: #FFFFFF;
  --text: #1C1917;
  --text-muted: #78716C;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(249,115,22,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--warm-bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--orange-dark); text-decoration:none; }
a:hover { text-decoration:underline; }

/* NAV */
nav { background:#fff; border-bottom:3px solid var(--orange); padding:0 24px; display:flex; align-items:center; gap:24px; height:60px; flex-wrap:wrap; }
nav .logo { font-size:1.4rem; font-weight:800; color:var(--orange); display:flex; align-items:center; gap:6px; }
nav .logo span { font-size:1.6rem; }
nav .links { display:flex; gap:4px; flex-wrap:wrap; }
nav .links a { padding:6px 14px; border-radius:8px; font-size:.9rem; color:var(--text); font-weight:500; transition:background .2s; }
nav .links a:hover, nav .links a.active { background:var(--orange); color:#fff; text-decoration:none; }
nav .lang-btn { margin-left:auto; background:none; border:2px solid var(--orange); color:var(--orange); padding:4px 12px; border-radius:8px; cursor:pointer; font-weight:700; font-size:.85rem; }

/* HERO */
.hero { text-align:center; padding:48px 24px 32px; }
.hero h1 { font-size:2.4rem; color:var(--orange-dark); margin-bottom:8px; }
.hero p { color:var(--text-muted); font-size:1.1rem; max-width:600px; margin:0 auto; }

/* CARD */
.card { background:var(--warm-card); border-radius:var(--radius); box-shadow:var(--shadow); max-width:640px; margin:0 auto 32px; padding:32px; }
.card h2 { color:var(--orange-dark); margin-bottom:20px; font-size:1.4rem; display:flex; align-items:center; gap:8px; }
.card label { display:block; font-weight:600; margin:12px 0 4px; font-size:.95rem; }
.card input[type="date"], .card input[type="number"], .card select {
  width:100%; padding:10px 14px; border:2px solid #E7E5E4; border-radius:8px; font-size:1rem; outline:none; transition:border .2s;
}
.card input:focus, .card select:focus { border-color:var(--orange); }
.card .row { display:flex; gap:16px; flex-wrap:wrap; }
.card .row > * { flex:1; min-width:140px; }
.btn { display:inline-block; background:var(--orange); color:#fff; border:none; padding:12px 28px; border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer; transition:background .2s; margin-top:16px; }
.btn:hover { background:var(--orange-dark); }

/* RESULT */
.result { margin-top:24px; padding:20px; background:linear-gradient(135deg,#FFF7ED,#FFEDD5); border-radius:var(--radius); border-left:4px solid var(--orange); }
.result .big { font-size:2.2rem; font-weight:800; color:var(--orange-dark); }
.result .detail { color:var(--text-muted); margin-top:4px; font-size:.95rem; }
.result:empty { display:none; }

/* GRID */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; max-width:900px; margin:0 auto 40px; padding:0 24px; }
.grid .tool-card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; text-align:center; transition:transform .2s,box-shadow .2s; }
.grid .tool-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(249,115,22,.18); }
.grid .tool-card .icon { font-size:2.4rem; margin-bottom:12px; }
.grid .tool-card h3 { color:var(--orange-dark); margin-bottom:6px; }
.grid .tool-card p { color:var(--text-muted); font-size:.9rem; margin-bottom:14px; }

/* FOOTER */
footer { margin-top:auto; text-align:center; padding:24px; color:var(--text-muted); font-size:.85rem; border-top:1px solid #E7E5E4; }
footer .donate { display:inline-block; margin-top:8px; padding:6px 16px; background:#FFEDD5; border-radius:8px; font-size:.78rem; word-break:break-all; }

/* HISTORY */
.history-list { margin-top:16px; }
.history-list li { padding:6px 0; border-bottom:1px solid #f0ece8; list-style:none; }
.history-list li strong { color:var(--orange-dark); }

@media(max-width:600px){
  nav { height:auto; padding:10px 16px; gap:8px; }
  .hero h1 { font-size:1.6rem; }
  .card { margin:0 16px 24px; padding:20px; }
  .grid { padding:0 16px; }
  .result .big { font-size:1.6rem; }
}