/* Tools4Host - public/assets/css/app.css
 * Version: v1.2
 * Updated: 2025-12-29
 * Change:
 * - Make Montserrat the global default font (lighter, minimal look)
 * - Reduce “bold” feeling on titles/brand while keeping the same light theme palette
 */

:root{
  color-scheme:light;

  /* Core palette */
  --bg:#f6fbf7;                 /* very light mint */
  --fg:#0f172a;                 /* slate-900 */
  --muted:#475569;              /* slate-600 */

  /* Surfaces */
  --card:rgba(255,255,255,.92);
  --card2:rgba(255,255,255,.78);
  --border:rgba(15,23,42,.10);
  --border2:rgba(15,23,42,.14);

  /* Effects */
  --shadow:0 14px 42px rgba(2,6,23,.10);
  --radius:16px;
  --radius2:12px;

  /* Brand */
  --primary:#16a34a;            /* green-600 */
  --primaryHover:#15803d;       /* green-700 */
  --primarySoft:rgba(22,163,74,.12);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:"Montserrat","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--fg);
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.page{padding:28px 0 56px}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(246,251,247,.86);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}

.brand{
  text-decoration:none;
  font-weight:600; /* was too bold */
  letter-spacing:.15px;
  color:var(--fg);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.nav{display:flex;align-items:center;gap:12px}
.nav a{
  text-decoration:none;
  color:var(--fg);
  opacity:.9;
  font-weight:500;
}
.nav a:hover{opacity:1}

/* Language switcher */
.lang{display:flex;align-items:center;gap:10px;opacity:.95}
.lang-label{opacity:.8;font-size:12px;color:var(--muted);font-weight:500}
.lang-links{display:flex;gap:8px;flex-wrap:wrap}
.lang-links a{
  text-decoration:none;
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--fg);
  background:rgba(255,255,255,.65);
  opacity:.95;
  font-weight:500;
}
.lang-links a:hover{border-color:rgba(22,163,74,.35)}
.lang-links a.active{
  border-color:rgba(22,163,74,.55);
  background:var(--primarySoft);
  opacity:1;
}

/* Main card + hero */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:26px;
}
.title{
  font-size:44px;
  line-height:1.08;
  margin:0;
  font-weight:600;  /* lighter than before */
  letter-spacing:-0.2px;
}
.sub{margin:10px 0 0 0;color:var(--muted);font-weight:400}
.muted{color:var(--muted)}

/* Buttons */
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:var(--radius2);
  border:1px solid var(--border2);
  text-decoration:none;
  color:var(--fg);
  background:rgba(255,255,255,.60);
  cursor:pointer;
  font-weight:500;
  transition:transform .02s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{
  border-color:rgba(22,163,74,.35);
  background:rgba(255,255,255,.78);
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#ffffff;
  box-shadow:0 10px 22px rgba(22,163,74,.18);
  font-weight:600;
}
.btn.primary:hover{background:var(--primaryHover);border-color:var(--primaryHover)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* Footer */
.footer{border-top:1px solid var(--border);padding:18px 0;opacity:.95}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer-links{display:flex;gap:12px}
.footer-links a{text-decoration:none;color:var(--fg);opacity:.85;font-weight:500}
.footer-links a:hover{opacity:1}

/* Tool cards grid */
.tools-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:0 26px 26px;
}
.tool-card{
  background:rgba(255,255,255,.70);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}
.tool-card-muted{color:var(--muted);font-weight:400}

/* PromoVideo panels */
.pv-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;padding:0 26px 26px}
.pv-panel{
  background:rgba(255,255,255,.70);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
}
.panel-title{margin:0 0 14px 0;font-size:16px;font-weight:600}
.form-row{margin-bottom:12px}
.label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}

/* Inputs */
.input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.90);
  color:var(--fg);
  outline:none;
  font-weight:400;
}
.input:focus{
  border-color:rgba(22,163,74,.55);
  box-shadow:0 0 0 4px rgba(22,163,74,.10);
}
.hint{margin-top:6px;font-size:12px;color:var(--muted);font-weight:400}

/* Preview */
.preview-box{
  border:1px dashed rgba(15,23,42,.22);
  border-radius:var(--radius);
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-align:center;
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-weight:400;
}

@media (max-width:860px){
  .hero{flex-direction:column;align-items:flex-start}
  .tools-grid{grid-template-columns:1fr}
  .pv-grid{grid-template-columns:1fr}
  .title{font-size:38px}
}