/* #######################################################################
 * 🐢 TPL — Base CSS (Mail Home)
 * Version: v6.0.0
 ####################################################################### */
: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:#f8f9fa;
}
html[data-theme="dark"]{ --t-fg:#e8eaed; --t-muted:#a1a6aa; --t-bg:#121212; --surface:#111315 }
*{box-sizing:border-box}
html,body{height: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; }
a{color:var(--t-green); text-decoration:none}
a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:600}
.btn-pill{border-radius:999px}
.btn-green{background:var(--t-green);color:#fff}.btn-green:hover{background:var(--t-green-600)}
.btn-blue{background:var(--t-blue);color:#fff}.btn-blue:hover{background:var(--t-blue-600)}
.btn-ghost{background:transparent;border-color:#dadce0;color:var(--t-fg)} .btn-ghost:hover{background:#f1f3f4}

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

/* Panels */
#tn-apps-panel,#tn-settings{position:fixed;z-index:60;display:none}
#tn-apps-panel.show,#tn-settings.show{display:block}
#tn-apps-panel{ top:64px; right:20px; width:420px; max-width:calc(100vw - 40px);
  background:var(--t-bg); color:var(--t-fg); box-shadow:0 10px 30px rgba(0,0,0,.25); border-radius:14px; 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}
#tn-apps-panel .footer{padding:14px;border-top:1px solid rgba(0,0,0,.06);display:flex;justify-content:center}

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