/* #######################################################################
 * 🐢 TPL — Base CSS
 * Version: v6.0.3
 * TRTL: v1.0.1
 * Change: Full overwrite (tokens + topbar + footer) + scroll safety
 ####################################################################### */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --t-green:#1a8f3d;
  --t-green-600:#0e7a31;

  --t-blue:#1b73e8;
  --t-blue-600:#155fc4;

  --t-fg:#202124;
  --t-muted:#5f6368;

  --t-bg:#ffffff;
  --surface:#ffffff;

  --ring:0 0 0 3px rgba(26,143,61,.18);

  --radius-8:8px;
  --radius-12:12px;
  --radius-16:16px;
  --radius-18:18px;
  --radius-24:24px;

  --shadow-1:0 1px 2px rgba(0,0,0,.08);
  --shadow-2:0 10px 30px rgba(0,0,0,.08);

  --border:rgba(0,0,0,.10);
  --border-soft:rgba(0,0,0,.06);
}

html[data-theme="dark"]{
  --t-fg:#e8eaed;
  --t-muted:#a1a6aa;

  --t-bg:#121212;
  --surface:#111315;

  --border:rgba(255,255,255,.14);
  --border-soft:rgba(255,255,255,.08);

  --shadow-1:0 1px 2px rgba(0,0,0,.55);
  --shadow-2:0 10px 30px rgba(0,0,0,.45);
}

/* ============================================================
   BASE RESET
   ============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--t-fg);
  background:var(--t-bg);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,Apple Color Emoji,Segoe UI Emoji;
}

img,svg,video,canvas{ max-width:100%; height:auto; }
a{ color:var(--t-green); text-decoration:none; font-weight:400; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:10px; }

/* ============================================================
   SCROLL SAFETY (ANTI-STICKY / ANTI-CLAMP)
   - This prevents "100vh + overflow hidden" bugs from killing pages
   ============================================================ */
html, body{
  height:auto;
  min-height:100%;
}
body{
  overflow-x:hidden;
  overflow-y:auto;
}

/* If any legacy rule tries to clamp these, we neutralize it */
.tn-page,
.tn-main{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* Keep footer at bottom without trapping scroll */
.tn-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.tn-main{
  flex:1 0 auto;
  display:block;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:24px;
  padding:10px 16px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-lg{ padding:12px 18px; }

.btn-green{
  background:var(--t-green);
  color:#fff;
}
.btn-green:hover{
  background:var(--t-green-600);
  text-decoration:none;
}

.btn-ghost{
  background:transparent;
  border-color:#dadce0;
  color:var(--t-fg);
}
html[data-theme="dark"] .btn-ghost{
  border-color:var(--border);
}
.btn-ghost:hover{
  background:rgba(0,0,0,.04);
  text-decoration:none;
}
html[data-theme="dark"] .btn-ghost:hover{
  background:rgba(255,255,255,.06);
}

/* ============================================================
   TOPBAR (base structure — nav.css can enhance underline, etc.)
   ============================================================ */
.tn-topbar{
  position:sticky;
  top:0;
  z-index:30;

  display:flex;
  align-items:center;
  gap:24px;

  height:68px;
  padding:0 24px;

  background:var(--surface);
  border-bottom:1px solid #e6e6e6;
}
html[data-theme="dark"] .tn-topbar{
  border-bottom:1px solid var(--border-soft);
}

.tn-topbar .brand a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--t-fg);
  text-decoration:none;
}

.tn-nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.tn-link{
  position:relative;
  padding:10px 2px;
  color:var(--t-fg);
  text-decoration:none;
  font-weight:500;
}
.tn-link:hover{ text-decoration:none; }

/* (Nav underline behavior is handled in nav.css; base.css keeps it clean) */

/* ============================================================
   FOOTER
   ============================================================ */
.tn-footer{
  margin-top:72px;
  background:var(--surface);
  border-top:1px solid #e6e6e6;
}
html[data-theme="dark"] .tn-footer{
  border-top:1px solid var(--border-soft);
}

.tn-footer .wrap{
  max-width:1200px;
  margin:0 auto;
  padding:36px 20px;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.tn-footer h4{
  margin:0 0 10px 0;
  font-size:14px;
  color:var(--t-muted);
  font-weight:600;
}

.tn-footer a{
  display:block;
  color:var(--t-green);
  font-size:14px;
  margin:6px 0;
}

.tn-footer .sub{
  max-width:1200px;
  margin:0 auto;
  padding:14px 20px;

  border-top:1px solid #e6e6e6;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
html[data-theme="dark"] .tn-footer .sub{
  border-top:1px solid var(--border-soft);
}

.tn-footer .sub .left a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--t-fg);
  font-weight:600;
}
.tn-footer .sub .left img{
  width:20px;
  height:20px;
  display:block;
}

.tn-footer .sub nav{
  display:flex;
  align-items:center;
}
.tn-footer .sub nav a{
  display:inline-flex;
  margin-left:16px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .tn-topbar{ padding:0 16px; }
  .tn-nav{ gap:18px; }

  .tn-footer .wrap{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:640px){
  .tn-topbar{
    height:auto;
    padding:12px 14px;
    flex-wrap:wrap;
    gap:12px;
  }
  .tn-nav{
    width:100%;
    flex-wrap:wrap;
    gap:14px;
  }
  .tn-footer .wrap{
    grid-template-columns:1fr;
  }
}