/* assets/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
  --bg-color: #f4f7fd;
  --text-color: #1a1a1a;
  --card-bg: #ffffff;
  --primary-color: #5c6bc0;
  --button-bg: linear-gradient(90deg, #5c6bc0, #7986cb);
  --button-hover: linear-gradient(90deg, #3f51b5, #5c6bc0);
}

body.dark {
  --bg-color: #181a1f;
  --text-color: #eee;
  --card-bg: #242730;
  --primary-color: #7986cb;
  --button-bg: linear-gradient(90deg, #7986cb, #5c6bc0);
  --button-hover: linear-gradient(90deg, #5c6bc0, #3f51b5);
}

body {
  margin:0;
  font-family:'Inter',sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  transition: 0.3s;
}

header {
  background: var(--primary-color);
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  position: relative;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

header h1{margin:0;font-size:2.5em;}
header p{margin:10px 0 0;font-size:1.2em;}
.theme-toggle{
  position:absolute; top:25px; right:25px;
  cursor:pointer; font-weight:bold; background: #fff;
  color: var(--primary-color); padding:8px 12px; border-radius:6px; user-select:none;
}

main{
  max-width:1200px; margin:40px auto; padding:0 20px;
}

.tool-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:20px;
}

.tool-card{
  background: var(--card-bg);
  padding:20px; border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  text-align:center; transition: transform 0.2s, box-shadow 0.2s;
}

.tool-card:hover{
  transform: translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.tool-card h3{margin:15px 0 10px;font-size:1.2em;}
.tool-card p{font-size:0.95em; color:#555;}

.tool-card a{
  display:inline-block; margin-top:10px;
  padding:10px 20px;
  background: var(--button-bg);
  color:#fff; text-decoration:none; border-radius:8px;
  font-weight:600; transition:0.3s;
}
.tool-card a:hover{background: var(--button-hover);}

footer{
  text-align:center; margin:60px 0 20px;
  color:#777; font-size:14px;
}

input, select{
  width:100%; padding:10px; margin-top:8px;
  border-radius:8px; border:1px solid #ccc; background: var(--bg-color);
  color: var(--text-color); font-size:1em;
}

button.calc-btn{
  margin-top:15px; padding:12px 24px; font-size:1em;
  border:none; border-radius:10px; cursor:pointer;
  background: var(--button-bg); color:#fff; font-weight:600; transition:0.3s;
}

button.calc-btn:hover{
  background: var(--button-hover);
}

.result{
  margin-top:20px; font-weight:600; font-size:1.1em; min-height:1.5em;
  transition: all 0.3s;
}

@media(max-width:640px){
  main{margin:20px auto;}
  .tool-card a, button.calc-btn{font-size:0.95em;}
}
.affiliate {
  margin-top: 15px;
  text-align: center;
}
.affiliate-btn {
  display: inline-block;
  padding: 8px 15px;
  background-color: #0070f3;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin-bottom: 5px;
}
.affiliate-btn:hover {
  background-color: #005bb5;
}
.affiliate-note {
  font-size: 12px;
  color: #555;
}