/* #######################################################################
 * 🐢 TRTL UX — Base CSS (Global Turtle Tokens + Core Widgets)
 * File: /assets/css/base.css
 * Version: v6.0.3 (TRTL v1.0.1)
 ####################################################################### */

/* Tokens */
:root{
  --t-green:#1a8f3d;
  --t-green-600:#0e7a31;
  --t-green-700:#0c5f29;

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

  --t-fg:#202124;
  --t-muted:#5f6368;
  --t-bg:#ffffff;
  --t-bg-alt:#f8f9fa;

  --t-border:#e0e3e7;
  --t-border-dark:#3c4043;

  --ring:0 0 0 3px rgba(26,143,61,.18);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 2px 10px rgba(0,0,0,.12);
}

html[data-theme="dark"]{
  --t-bg:#121212;
  --t-fg:#e8eaed;
  --t-muted:#a1a6aa;
  --t-bg-alt:#1a1a1a;
  --t-border:#2b2b2b;
  --shadow-md:0 2px 10px rgba(0,0,0,.55);
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--t-bg);
  color:var(--t-fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
}

/* Anchor */
a{color:var(--t-green);text-decoration:none}
a:hover{text-decoration:underline}

/* Global Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--t-border);
  background:var(--t-bg);color:var(--t-fg);
  box-shadow:var(--shadow-sm);cursor:pointer;font-weight:600;
}
.btn:hover{box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(1px)}

.btn-green{
  background:var(--t-green);color:#fff;border-color:transparent;
}
.btn-green:hover{background:var(--t-green-600)}
.btn-green:active{background:var(--t-green-700)}

.btn-blue{
  background:var(--t-blue);color:#fff;border-color:transparent;
}
.btn-blue:hover{background:var(--t-blue-600)}

.btn-red{
  background:#d33;color:#fff;border:0;
}

/* Avatar generic */
.avatar, .ta-avatar img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
}

/* 9-dot */
.tn-dot9{
  width:36px;height:36px;border-radius:50%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  align-items:center;justify-items:center;
  cursor:pointer;background:transparent;border:0;
}
.tn-dot9 .dot{
  width:5px;height:5px;background:var(--t-fg);border-radius:50%;
}
.tn-dot9:hover{background:rgba(0,0,0,.06)}
html[data-theme="dark"] .tn-dot9:hover{background:rgba(255,255,255,.06)}

/* Popovers */
#tn-apps-panel,#tn-settings{position:fixed;z-index:60;display:none}
#tn-apps-panel.show,#tn-settings.show{display:block}

/* App Launcher */
#tn-apps-panel{
  top:72px;right:20px;
  width:420px;max-width:calc(100vw - 40px);
  background:var(--t-bg);color:var(--t-fg);
  border:1px solid var(--t-border);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden;
}
#tn-apps-panel .apps-wrap{padding:16px}
#tn-apps-panel .grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
#tn-apps-panel .tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px;border-radius:12px;background:transparent;
}
#tn-apps-panel .tile:hover{background:rgba(0,0,0,.06)}
html[data-theme="dark"] #tn-apps-panel .tile:hover{background:rgba(255,255,255,.08)}
#tn-apps-panel img{width:44px;height:44px}

/* Settings popunder */
#tn-settings{
  width:360px;max-width:calc(100vw - 40px);
  background:var(--t-bg);color:var(--t-fg);
  border:1px solid var(--t-border);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  right:20px;bottom:76px;
}
#tn-settings header{
  font-weight:700;padding:14px 16px;
  border-bottom:1px solid var(--t-border);
}
#tn-settings .body{padding:16px}
#tn-settings footer{
  padding:12px 16px;
  border-top:1px solid var(--t-border);
  display:flex;justify-content:flex-end;
}
#tn-close-settings:hover{filter:brightness(.95)}

/* ============================================================
   🐢 100% TURTLE.ONL FOOTER LOGIC (UNMODIFIED)
   ============================================================ */

.ftr {
  background: var(--footer-bg);
  border-top: 1px solid rgba(0,0,0,.06);
}
html[data-theme="dark"] .ftr {
  border-top: 1px solid rgba(255,255,255,.08);
}

.ftr__row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ftr__left,
.ftr__right {
  display: flex;
  gap: 18px;
  align-items: center;
}

.ftr__center a {
  font-weight: 600;
}

.ftr a,
.btnlink {
  color: var(--t-green);
  font-size: 14px;
  text-decoration: none;
}

.ftr a:hover,
.btnlink:hover {
  text-decoration: underline;
}

.btnlink {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}