html,body{height:100%}
body{margin:0; overflow-x:hidden}
/* True Daily Focus — Calm UI */
:root{
--bg:#F4F1EC;
--ink:#2E2E2E;
--primary:#6FA3B8;
--secondary:#4F6B58;
--warm:#D4A85E;
--card:rgba(255,255,255,.15);
--border:rgba(46,46,46,.12);
--shadow:0 14px 34px rgba(0,0,0,.08);
--radius:18px;
--max:980px;
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
/* ============================
Add Idea - dropdown readability
(scoped to the Add Idea stage dropdown)
============================ */
.tdf-select-light{ color:#000 !important; }
.tdf-select-light option{ color:#000 !important; background:#fff !important; }
#tdf-app-root{ font-family:var(--font); }
/* Layout safety: prevent 100% width inputs/textareas from overflowing (fixes clipped fields) */
#tdf-app-root, #tdf-app-root *, #tdf-app-root *::before, #tdf-app-root *::after{ box-sizing:border-box; }
/* Elementor / theme container bypass (full-bleed)
Put the shortcode on any page; wrapper will break out to full viewport width. */
.tdf-fullbleed{
width:100vw !important;
max-width:100vw !important;
position:relative;
left:50%; right:50%;
margin-left:-50vw !important;
margin-right:-50vw !important;
padding-left:0 !important;
padding-right:0 !important;
overflow:clip;
}
/* === BACKGROUND FULL-VIEWPORT FIX (Start/Close pages) ===
Force the app shell to truly occupy the entire viewport width/height even inside
theme/Elementor containers, so background images can "cover" with no side gaps. */
.tdf-fullbleed,
#tdf-app-root{
width:100vw !important;
max-width:100vw !important;
}
#tdf-app-root{ min-height:100vh; }
.tdf-app[data-bg="morning"],
.tdf-app[data-bg="afternoon"],
.tdf-app[data-bg="evening"],
.tdf-app[data-bg="night"]{
width:100vw !important;
min-height:100vh;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
}
@supports (height: 100dvh){
.tdf-app[data-bg="morning"],.tdf-app[data-bg="afternoon"],.tdf-app[data-bg="evening"],.tdf-app[data-bg="night"]{ min-height:100dvh; }
}
/* ==== ADMIN-CONFIGURABLE BACKGROUND IMAGES ==== */
/* These are set via WordPress options (tdf_bg_morning, tdf_bg_afternoon, tdf_bg_evening, tdf_bg_night) */
/* Fallback gradients used when no image is configured */
.tdf-app[data-bg="morning"]:not([style*="background-image"]):not(.has-bg){
background: linear-gradient(160deg,#f9a825 0%,#ffe082 40%,#b3e5fc 100%) !important;
}
.tdf-app[data-bg="afternoon"]:not([style*="background-image"]):not(.has-bg){
background: linear-gradient(160deg,#1565c0 0%,#42a5f5 50%,#e3f2fd 100%) !important;
}
.tdf-app[data-bg="evening"]:not([style*="background-image"]):not(.has-bg){
background: linear-gradient(160deg,#6a1b9a 0%,#f06292 50%,#ff8a65 100%) !important;
}
.tdf-app[data-bg="night"]:not([style*="background-image"]):not(.has-bg){
background: linear-gradient(160deg,#0d1b2a 0%,#1a237e 50%,#283593 100%) !important;
}
.tdf-shell{ background:var(--bg); color:var(--ink); min-height:78vh; padding:16px; display:flex; justify-content:center; }
.tdf-card{ width:min(var(--max), 100%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius) !important; box-shadow:var(--shadow); padding:16px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); overflow:hidden; }
@media (min-width:900px){ .tdf-card{ padding:24px; } }
.tdf-top{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between; }
.tdf-eyebrow{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
/* ✅ Small Info chip next to Locked/Morning/Evening */
.tdf-info-btn{
appearance:none;
border:1px solid var(--border);
background:rgba(255,255,255,.70);
color:var(--ink);
padding:6px 10px;
border-radius:999px;
font-weight:800;
font-size:12px;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
}
.tdf-info-btn:hover{ background:rgba(255,255,255,.86); }
.tdf-info-dot{ width:10px; height:10px; border-radius:999px; border:1.5px solid currentColor; display:inline-block; opacity:.9; }
.tdf-title{ margin:6px 0 6px; font-size:22px; line-height:1.2; }
@media (min-width:900px){ .tdf-title{ font-size:28px; } }
.tdf-muted{ opacity:.75; font-size:14px; line-height:1.45; }
.tdf-pill{ border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:8px 12px; font-size:13px; white-space:nowrap; background:rgba(255,255,255,.14); }
@media (max-width: 560px){
/* Prevent header pills from overflowing/cutting on small screens */
.tdf-pill{
white-space: normal !important;
max-width: 100%;
display: inline-block;
line-height: 1.35;
}
}
.tdf-tabs{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.tdf-tab{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.14); border-radius:999px; padding:9px 12px; font-size:13px; cursor:pointer; color:var(--ink); }
.tdf-tab[aria-current="page"]{ background:rgba(111,163,184,.18); border-color:rgba(111,163,184,.45); }
.tdf-prompts{ margin-top:16px; display:grid; gap:12px; }
.tdf-prompt{ border:1px solid rgba(255,255,255,.20); border-radius:16px; padding:14px; background:rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.tdf-prompt h3{ margin:0 0 10px; font-size:15px; font-weight:650; }
.tdf-prompt textarea{ width:100%; min-height:110px; max-height:260px; resize:vertical; border-radius:12px; border:1px solid var(--border); padding:12px; font-size:14px; line-height:1.5; outline:none; color:var(--ink); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.tdf-prompt textarea:focus{ border-color:rgba(111,163,184,.6); box-shadow:0 0 0 4px rgba(111,163,184,.15); }
.tdf-lockedbox{ width:100%; min-height:110px; border-radius:12px; border:1px dashed rgba(46,46,46,.25); background:rgba(255,255,255,.10); display:flex; align-items:center; justify-content:center; }
.tdf-lockicon{ font-size:26px; opacity:.85; }
.tdf-lockbadge{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:999px; background:rgba(17,24,39,.06); border:1px solid rgba(17,24,39,.12); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.tdf-prompt textarea[disabled]{ opacity:.65; cursor:not-allowed; background:rgba(255,255,255,.75); }
.tdf-prompt .tdf-readonly{ white-space:pre-wrap; font-size:14px; line-height:1.6; padding:12px; border-radius:12px; background:rgba(244,241,236,.65); border:1px solid var(--border); }
.tdf-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.tdf-btn{ border:1px solid var(--border); border-radius:14px; padding:11px 14px; font-size:14px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); cursor:pointer; color:inherit !important; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.tdf-btn-primary{ background:var(--primary); border-color:transparent; color:#111; }
.tdf-btn-disabled{ background:#e5e7eb; border-color:#e5e7eb; color:#111827 !important; opacity:.92; cursor:not-allowed; }
.tdf-btn-disabled:hover{ filter:none !important; transform:none !important; }
.tdf-btn-warm{ background:var(--warm); border-color:transparent; color:#2E2E2E; }
.tdf-btn:disabled{ opacity:.55; cursor:not-allowed; }
.tdf-note{ margin-top:12px; font-size:13px; opacity:.85; }
.tdf-locknote{ margin:10px 0 12px; padding:10px 12px; border-radius:14px; background:rgba(17,24,39,.06); border:1px dashed rgba(17,24,39,.22); color:#111827; font-weight:700; }
.tdf-field{ margin-top:12px; }
.tdf-field label{ display:block; font-size:13px; opacity:.85; margin-bottom:6px; }
.tdf-field input{ width:100%; border:1px solid var(--border); border-radius:12px; padding:11px 12px; font-size:14px; outline:none; background:rgba(255,255,255,.12); color:inherit; border:1px solid rgba(255,255,255,.22); }
.tdf-field input:focus{ border-color:rgba(111,163,184,.6); box-shadow:0 0 0 4px rgba(111,163,184,.15); }
/* Base textarea styling for .tdf-field (Identity Design, etc.) */
.tdf-field textarea{ width:100%; min-height:120px; resize:vertical; border-radius:12px; border:1px solid rgba(255,255,255,.20); padding:12px; font-size:14px; line-height:1.5; outline:none; color:inherit; background:rgba(255,255,255,.10); overflow-y:auto; }
.tdf-field textarea:focus{ border-color:rgba(111,163,184,.6); box-shadow:0 0 0 4px rgba(111,163,184,.15); }
.tdf-small{ font-size:12.5px; opacity:.8; line-height:1.45; }
.tdf-list{ margin-top:14px; display:grid; gap:10px; }
.tdf-item{ border:1px solid var(--border); border-radius:14px; padding:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.tdf-item h4{ margin:0 0 6px; font-size:14px; }
.tdf-item .meta{ font-size:12.5px; opacity:.75; margin-bottom:8px; }
/* === HARD OVERRIDES (Elementor/Theme compatibility) === */
.tdf-fullbleed{overflow:visible !important;}
.tdf-shell{background:transparent !important;}
/* Ensure buttons never inherit white-on-white from theme */
.tdf-btn{color:var(--ink) !important;}
.tdf-btn *{color:inherit !important;}
.tdf-btn-primary{background:var(--primary) !important; border-color:transparent !important; color:#111 !important;}
.tdf-btn-disabled{background:#e5e7eb !important; border-color:#e5e7eb !important; color:#111827 !important;}
.tdf-btn-warm{background:var(--warm) !important; border-color:transparent !important; color:#1f1f1f !important;}
.tdf-btn-primary *,.tdf-btn-warm *{color:#111 !important;}
/* Plans + Checkout */
.tdf-plan-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:12px;}
@media (max-width:720px){ .tdf-plan-grid{grid-template-columns:1fr;} }
.tdf-plan{border:1px solid var(--border); border-radius:var(--radius); padding:14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow);}
.tdf-plan-reco{outline:2px solid rgba(212,168,94,.55);}
.tdf-plan-head{margin-bottom:10px;}
.tdf-plan-title{font-weight:800; font-size:18px; color:var(--ink);}
.tdf-plan-price{font-weight:900; font-size:22px; margin-top:4px; color:var(--ink);}
.tdf-plan-list{margin:10px 0 14px; padding-left:18px; color:var(--ink);}
.tdf-plan-list li{margin:6px 0;}
.tdf-checkout{margin-top:10px;}
.tdf-checkout label{display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.tdf-in{width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12); color:inherit; font-size:14px; outline:none;}
.tdf-in:focus{box-shadow:0 0 0 4px rgba(111,163,184,.25);}
.tdf-row{margin-bottom:10px;}
.tdf-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:520px){ .tdf-grid2{grid-template-columns:1fr;} }
/* Full-page app background + Elementor full-width bypass */
.tdf-fullbleed{
width:100vw !important;
max-width:100vw !important;
position:relative !important;
left:50% !important; right:50% !important;
margin-left:-50vw !important;
margin-right:-50vw !important;
padding-left:0 !important;
padding-right:0 !important;
overflow:visible !important;
background:var(--bg) !important;
}
.tdf-fullpage{
width:100%;
min-height:100vh;
background:var(--bg);
padding:24px 0 48px;
}
.tdf-auth{ display:flex; justify-content:center; padding:24px 16px; }
.tdf-auth-card{
width:100%;
max-width:520px;
background:rgba(255,255,255,.72);
border:1px solid var(--border);
border-radius:22px;
box-shadow:var(--shadow);
padding:28px 24px;
backdrop-filter: blur(10px);
}
.tdf-auth-title{ font-size:34px; line-height:1.1; margin:0 0 10px; color:var(--ink); font-weight:800; letter-spacing:-.2px; text-align:center; }
.tdf-auth-sub{ color:rgba(46,46,46,.78); font-size:15px; line-height:1.6; margin-bottom:18px; text-align:center; }
.tdf-auth-links{ display:flex; justify-content:space-between; gap:12px; margin-top:8px; flex-wrap:wrap; }
.tdf-field input{
width:100% !important;
padding:16px 16px !important;
border-radius:14px !important;
border:1px solid rgba(46,46,46,.14) !important;
background:#fff !important;
color:var(--ink) !important;
font-size:15px !important;
outline:none;
}
.tdf-field input::placeholder{ color:rgba(46,46,46,.45) !important; }
.tdf-check{ display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(46,46,46,.75); margin:12px 0 14px; }
.tdf-check input{ width:16px; height:16px; }
.tdf-link{
background:transparent !important;
border:0 !important;
padding:0 !important;
color:rgba(46,46,46,.75) !important;
text-decoration:underline;
cursor:pointer;
font-size:13px;
}
.tdf-link:hover{ color:var(--ink) !important; }
.tdf-btn{ color:var(--ink) !important; }
.tdf-btn *{ color:inherit !important; }
.tdf-btn-primary{
background:#1E2A36 !important;
border-color:#1E2A36 !important;
color:#fff !important;
}
.tdf-btn-primary *{ color:#fff !important; }
.tdf-btn-lg{ width:100% !important; padding:16px 18px !important; font-size:16px !important; border-radius:14px !important; }
/* =========================
APP DASHBOARD LAYOUT
Desktop: left sidebar + right content
Mobile: top nav + full height
========================= */
.tdf-app{
min-height:100vh;
background:var(--bg);
display:flex;
align-items:stretch;
position:relative;
}
/* =========================
GLOBAL TIME-BASED BACKGROUNDS
- Background can switch by time and apply across ALL tabs/views.
- JS sets: data-bg="morning" / "sunset" / "night" on .tdf-app
========================= */
.tdf-app[data-bg="morning"],
.tdf-app[data-bg="sunset"],
.tdf-app[data-bg="night"]{
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
background-color:#0b0f0e;
min-height:100vh;
}
.tdf-app[data-bg="morning"]{
background-image:url("https://magenta-goshawk-797025.hostingersite.com/wp-content/uploads/2026/02/startyourdaypage2560x1440fordesktop.jpeg");
}
.tdf-app[data-bg="sunset"]{
background-image:url("https://magenta-goshawk-797025.hostingersite.com/wp-content/uploads/2026/02/sunsetpicturefordeskto.jpeg");
}
.tdf-app[data-bg="night"]{
background-image:url("https://magenta-goshawk-797025.hostingersite.com/wp-content/uploads/2026/02/closeyourdaypage2560x1440fordesktop.jpeg");
}
/* Responsive background swaps (desktop vs mobile) */
@media (max-width: 768px){
.tdf-app[data-bg="morning"]{
background-image:url("https://magenta-goshawk-797025.hostingersite.com/wp-content/uploads/2026/02/Startnyourdaypage1440x2560formobile.jpeg");
}
.tdf-app[data-bg="sunset"]{
background-image:url("https://magenta-goshawk-797025.hostingersite.com/wp-content/uploads/2026/02/sunsetimageformobil.jpeg");
}
.tdf-app[data-bg="night"]{
background-image:url("https://magenta-goshawk-797025.hostingersite.com/wp-content/uploads/2026/02/closeyourdaypage1440x2560formobile.jpeg");
}
}
/* Subtle dark overlay to guarantee contrast */
.tdf-app[data-bg="morning"]::before,
.tdf-app[data-bg="sunset"]::before,
.tdf-app[data-bg="night"]::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.28);
pointer-events:none;
z-index:0;
}
/* Ensure children sit above overlay */
.tdf-app[data-bg="morning"] > *,
.tdf-app[data-bg="sunset"] > *,
.tdf-app[data-bg="night"] > *{
position:relative;
z-index:1;
}
/* Sidebar: transparent so background shows behind it, but readable */
.tdf-app[data-bg="morning"] .tdf-sidebar,
.tdf-app[data-bg="sunset"] .tdf-sidebar,
.tdf-app[data-bg="night"] .tdf-sidebar{
background:rgba(255,255,255,.14);
backdrop-filter: blur(10px);
}
/* Main content panel slightly frosted to keep text clear */
.tdf-app[data-bg="morning"] .tdf-main-inner .tdf-card,
.tdf-app[data-bg="sunset"] .tdf-main-inner .tdf-card,
.tdf-app[data-bg="night"] .tdf-main-inner .tdf-card{
background: rgba(0,0,0,.16);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(8px);
}
/* Start/Close backgrounds: make headings + navigation white across ALL tabs */
.tdf-app[data-bg="morning"],
.tdf-app[data-bg="sunset"],
.tdf-app[data-bg="night"]{
color:#fff;
}
.tdf-app[data-bg="morning"] .tdf-title,
.tdf-app[data-bg="sunset"] .tdf-title,
.tdf-app[data-bg="night"] .tdf-title,
.tdf-app[data-bg="morning"] h1,
.tdf-app[data-bg="sunset"] h1,
.tdf-app[data-bg="night"] h1,
.tdf-app[data-bg="morning"] h2,
.tdf-app[data-bg="sunset"] h2,
.tdf-app[data-bg="night"] h2,
.tdf-app[data-bg="morning"] h3,
.tdf-app[data-bg="sunset"] h3,
.tdf-app[data-bg="night"] h3,
.tdf-app[data-bg="morning"] .tdf-sidebar,
.tdf-app[data-bg="sunset"] .tdf-sidebar,
.tdf-app[data-bg="night"] .tdf-sidebar,
.tdf-app[data-bg="morning"] .tdf-sidebar a,
.tdf-app[data-bg="sunset"] .tdf-sidebar a,
.tdf-app[data-bg="night"] .tdf-sidebar a{
color:#fff !important;
}
/* Time backgrounds: prompt containers transparent (thin outline) */
.tdf-app[data-bg="morning"] .tdf-prompt,
.tdf-app[data-bg="sunset"] .tdf-prompt,
.tdf-app[data-bg="night"] .tdf-prompt{
background: rgba(0,0,0,.10) !important;
border: 1px solid rgba(255,255,255,.28) !important;
}
.tdf-app[data-bg="morning"] .tdf-lockedbox,
.tdf-app[data-bg="sunset"] .tdf-lockedbox,
.tdf-app[data-bg="night"] .tdf-lockedbox{
background: transparent !important;
border: 1px dashed rgba(255,255,255,.35) !important;
}
/* Time backgrounds: semi-transparent input boxes so the image stays visible */
.tdf-app[data-bg="morning"] .tdf-field input,
.tdf-app[data-bg="sunset"] .tdf-field input,
.tdf-app[data-bg="night"] .tdf-field input,
.tdf-app[data-bg="afternoon"] .tdf-field input,
.tdf-app[data-bg="evening"] .tdf-field input,
.tdf-app[data-bg="morning"] .tdf-field textarea,
.tdf-app[data-bg="sunset"] .tdf-field textarea,
.tdf-app[data-bg="night"] .tdf-field textarea,
.tdf-app[data-bg="afternoon"] .tdf-field textarea,
.tdf-app[data-bg="evening"] .tdf-field textarea,
.tdf-app[data-bg="morning"] .tdf-prompt textarea,
.tdf-app[data-bg="sunset"] .tdf-prompt textarea,
.tdf-app[data-bg="night"] .tdf-prompt textarea,
.tdf-app[data-bg="afternoon"] .tdf-prompt textarea,
.tdf-app[data-bg="evening"] .tdf-prompt textarea,
.tdf-app[data-bg="morning"] .tdf-step textarea,
.tdf-app[data-bg="sunset"] .tdf-step textarea,
.tdf-app[data-bg="night"] .tdf-step textarea,
.tdf-app[data-bg="afternoon"] .tdf-step textarea,
.tdf-app[data-bg="evening"] .tdf-step textarea,
.tdf-app[data-bg="morning"] .tdf-step input,
.tdf-app[data-bg="sunset"] .tdf-step input,
.tdf-app[data-bg="night"] .tdf-step input,
.tdf-app[data-bg="afternoon"] .tdf-step input,
.tdf-app[data-bg="evening"] .tdf-step input,
.tdf-app[data-bg="morning"] .tdf-rule-card textarea,
.tdf-app[data-bg="sunset"] .tdf-rule-card textarea,
.tdf-app[data-bg="night"] .tdf-rule-card textarea,
.tdf-app[data-bg="afternoon"] .tdf-rule-card textarea,
.tdf-app[data-bg="evening"] .tdf-rule-card textarea{
background: rgba(0,0,0,0.45) !important;
border: 1px solid rgba(255,255,255,.35) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
caret-color: #fff !important;
}
.tdf-app[data-bg="morning"] .tdf-field textarea::placeholder,
.tdf-app[data-bg="sunset"] .tdf-field textarea::placeholder,
.tdf-app[data-bg="night"] .tdf-field textarea::placeholder,
.tdf-app[data-bg="afternoon"] .tdf-field textarea::placeholder,
.tdf-app[data-bg="evening"] .tdf-field textarea::placeholder,
.tdf-app[data-bg="morning"] .tdf-prompt textarea::placeholder,
.tdf-app[data-bg="sunset"] .tdf-prompt textarea::placeholder,
.tdf-app[data-bg="night"] .tdf-prompt textarea::placeholder,
.tdf-app[data-bg="afternoon"] .tdf-prompt textarea::placeholder,
.tdf-app[data-bg="evening"] .tdf-prompt textarea::placeholder,
.tdf-app[data-bg="morning"] .tdf-field input::placeholder,
.tdf-app[data-bg="sunset"] .tdf-field input::placeholder,
.tdf-app[data-bg="night"] .tdf-field input::placeholder,
.tdf-app[data-bg="afternoon"] .tdf-field input::placeholder,
.tdf-app[data-bg="evening"] .tdf-field input::placeholder,
.tdf-app[data-bg="morning"] .tdf-step textarea::placeholder,
.tdf-app[data-bg="sunset"] .tdf-step textarea::placeholder,
.tdf-app[data-bg="night"] .tdf-step textarea::placeholder,
.tdf-app[data-bg="afternoon"] .tdf-step textarea::placeholder,
.tdf-app[data-bg="evening"] .tdf-step textarea::placeholder,
.tdf-app[data-bg="morning"] .tdf-step input::placeholder,
.tdf-app[data-bg="sunset"] .tdf-step input::placeholder,
.tdf-app[data-bg="night"] .tdf-step input::placeholder,
.tdf-app[data-bg="afternoon"] .tdf-step input::placeholder,
.tdf-app[data-bg="evening"] .tdf-step input::placeholder{
color: rgba(255,255,255,.65) !important;
}
/* iOS WebKit autofill text color fix */
.tdf-app textarea:-webkit-autofill,
.tdf-app input:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
caret-color: #fff !important;
}
/* Time backgrounds: primary buttons should be light */
.tdf-app[data-bg="morning"] .tdf-btn-primary,
.tdf-app[data-bg="sunset"] .tdf-btn-primary,
.tdf-app[data-bg="night"] .tdf-btn-primary{
background: rgba(255,255,255,.92) !important;
border-color: rgba(255,255,255,.92) !important;
color: #111 !important;
}
.tdf-app[data-bg="morning"] .tdf-btn-primary:hover,
.tdf-app[data-bg="sunset"] .tdf-btn-primary:hover,
.tdf-app[data-bg="night"] .tdf-btn-primary:hover{
background: rgba(255,255,255,1) !important;
}
.tdf-sidebar{
width:260px;
background:rgba(255,255,255,.60);
border-right:1px solid var(--border);
padding:18px 14px;
position:sticky;
top:0;
height:100vh;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
flex-shrink:0;
}
.tdf-sidebar::-webkit-scrollbar{ display:none; }
.tdf-brand{
font-weight:900;
letter-spacing:-.2px;
font-size:16px;
margin:2px 8px 12px;
}
.tdf-side-hi{
margin:0 8px 14px;
font-size:14px;
opacity:.8;
}
.tdf-nav{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.tdf-navbtn{
width:100%;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
padding:10px 12px;
border-radius:14px;
border:1px solid transparent;
background:transparent;
cursor:pointer;
color:var(--ink) !important;
font-size:14px;
}
.tdf-navbtn:hover{ background:rgba(111,163,184,.10); }
.tdf-navbtn[aria-current="page"]{ background:rgba(111,163,184,.16); border-color:rgba(111,163,184,.35); }
/* ✅ Mobile-only: make Sign Out slightly more visible (no desktop change) */
@media (max-width: 560px){
.tdf-navbtn.tdf-navbtn-logout{
background: rgba(220,60,60,.08);
border-color: rgba(220,60,60,.22);
}
.tdf-navbtn.tdf-navbtn-logout:hover{
background: rgba(220,60,60,.12);
}
}
.tdf-main{
flex:1;
padding:22px 16px 48px;
}
.tdf-main-inner{ width:min(980px, 100%); margin:0 auto; }
/* Brand logo */
.tdf-logo{ width:34px; height:34px; object-fit:contain; border-radius:10px; background:#fff; border:1px solid var(--border); }
.tdf-brand{ display:flex; align-items:center; gap:10px; }
.tdf-brandtext{ font-weight:900; }
/* Auth logo (login/register) */
.tdf-auth-logo{ display:flex; justify-content:center; margin-bottom:14px; }
/* Bigger, crisp logo on auth pages (desktop + mobile) */
.tdf-auth-logoimg{ height:160px !important; width:auto !important; max-width:560px !important; object-fit:contain !important; }
@media (min-width:900px){ .tdf-auth-logoimg{ height:220px !important; } }
/* Greeting (consistent size) */
.tdf-greet{ font-size:15px; font-weight:750; letter-spacing:-.1px; margin:0 0 4px; }
.tdf-greet-name{ font-size:20px; font-weight:900; letter-spacing:-.2px; }
@media (min-width:900px){ .tdf-greet-name{ font-size:24px; } }
/* Mobile top bar + drawer (premium) */
.tdf-topbar{ display:none; }
.tdf-drawerwrap{ display:none; }
/* Admin in-app topbar (shown on desktop + mobile) */
.tdf-admintopbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
position:sticky;
top:0;
z-index:40;
padding:14px 14px;
border:1px solid var(--border);
border-radius:16px;
background: rgba(255,255,255,.70);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin: 0 0 14px;
}
.tdf-admintitle{
font-weight:900;
letter-spacing:-.2px;
}
.tdf-adminsignout{
appearance:none;
border:1px solid var(--border);
background: rgba(255,255,255,.85);
color: var(--ink);
padding:10px 12px;
border-radius:12px;
font-weight:800;
cursor:pointer;
}
.tdf-adminsignout:hover{ background: rgba(255,255,255,.95); }
/* Admin layout tweaks */
.tdf-app[data-view="admin"] .tdf-main-inner{ width:min(1180px, 100%); }
@media (max-width: 860px){
.tdf-app{ flex-direction:column; }
.tdf-sidebar{ display:none; }
/* Mobile header: true full-width, flush to top, safe-area aware */
.tdf-topbar{
display:flex;
position:fixed;
top:0;
left:0;
right:0;
width:100vw;
margin:0;
border-radius:0;
z-index:9999;
align-items:center;
justify-content:space-between;
padding: calc(env(safe-area-inset-top) + 10px) 12px 10px;
background:rgba(255,255,255,.78);
border-bottom:1px solid var(--border);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Push main content below fixed mobile header via spacer */
.tdf-main{
padding-top: 16px;
}
.tdf-topbar-spacer{
display:block;
height: calc(env(safe-area-inset-top) + 72px);
}
.tdf-burger{
visibility:visible !important;
opacity:1 !important;
width:42px;
height:42px;
border-radius:14px;
border:1px solid var(--border);
background:#fff !important;
/* Theme-proof icon: draw 3 lines as background on the button itself */
background-image:
linear-gradient(#111 0 0),
linear-gradient(#111 0 0),
linear-gradient(#111 0 0);
background-repeat:no-repeat;
background-size:18px 2px, 18px 2px, 18px 2px;
background-position:12px 13px, 12px 20px, 12px 27px;
display:flex;
align-items:center;
justify-content:center;
gap:4px;
cursor:pointer;
position:relative;
}
/* Ultra-robust hamburger: draw lines via pseudo-element so it shows even if inner nodes fail */
.tdf-burger::before{
content:"";
width:18px;
height:14px;
display:block;
background:
linear-gradient(#000 0 0) top/18px 2px no-repeat,
linear-gradient(#000 0 0) center/18px 2px no-repeat,
linear-gradient(#000 0 0) bottom/18px 2px no-repeat;
}
/* If spans exist, keep them visible too */
.tdf-burger .b{
display:block !important;
width:18px !important;
height:2px !important;
border-radius:2px !important;
background:#000 !important;
opacity:1 !important;
}
.tdf-burger svg{ width:22px !important; height:22px !important; display:block !important; fill:#000 !important; }
.tdf-topbrand{ display:flex; align-items:center; gap:10px; }
.tdf-topbrandtext{ font-weight:900; letter-spacing:-.2px; }
.tdf-topout{
border:1px solid var(--border);
background:#fff;
border-radius:14px;
padding:10px 12px;
cursor:pointer;
font-size:13px;
color:var(--ink) !important;
}
.tdf-drawerwrap{
display:block;
position:fixed;
inset:0;
z-index:40;
background:rgba(0,0,0,.18);
backdrop-filter: blur(2px);
animation: tdfFade .16s ease;
}
.tdf-drawer{
width:min(86vw, 340px);
height:100%;
background:rgba(255,255,255,.92);
border-right:1px solid var(--border);
box-shadow: var(--shadow);
padding:14px;
animation: tdfSlide .18s ease;
}
.tdf-drawerhead{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 12px; }
.tdf-drawerhi{ font-weight:800; letter-spacing:-.15px; }
.tdf-drawerx{
width:42px; height:42px;
border-radius:14px;
border:1px solid var(--border);
background:#fff;
cursor:pointer;
font-size:20px;
color:#000;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
}
.tdf-draweritems{ display:flex; flex-direction:column; gap:8px; padding:4px; }
.tdf-drawerbtn{ text-align:left; width:100%; border-radius:16px; border:1px solid var(--border); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20); padding:12px 12px; cursor:pointer; font-size:14px; color:inherit !important; }
.tdf-drawerbtn:hover{ background:rgba(111,163,184,.10); }
.tdf-drawerbtn-out{ border-color:rgba(220,60,60,.25) !important; }
.tdf-drawerbtn-out{ color:#000 !important; font-weight:700; }
@keyframes tdfFade{ from{opacity:0} to{opacity:1} }
@keyframes tdfSlide{ from{transform:translateX(-10px); opacity:.8} to{transform:translateX(0); opacity:1} }
}
/* =========================================================
NORTH STAR (page-scoped styles only)
✅ No impact on other pages
========================================================= */
#tdf-northstar-page{
position:relative;
border-radius: 18px;
overflow:hidden;
isolation:isolate;
}
#tdf-northstar-page::before{
content:"";
position:absolute; inset:0;
/* ✅ Dark overlay for readability (North Star only) */
background: rgba(0,0,0,.60);
pointer-events:none;
}
#tdf-northstar-page .tdf-ns-inner{ position:relative; z-index:2; }
#tdf-northstar-page .tdf-ns-inner{ padding:24px; }
#tdf-northstar-page .tdf-ns-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:14px; align-items:start; }
/* North Star layout refinements (page-scoped) */
#tdf-northstar-page .tdf-ns-grid{ gap:18px; }
#tdf-northstar-page .tdf-ns-left .tdf-card{ margin-bottom:16px; }
#tdf-northstar-page .tdf-ns-left .tdf-item{ margin-top:10px; padding:14px; }
#tdf-northstar-page .tdf-ns-left h4{ margin-bottom:6px; }
#tdf-northstar-page .tdf-ns-side{ position:sticky; top:18px; max-height: calc(100vh - 36px); overflow:auto; padding-right:4px; }
@media (max-width: 980px){
#tdf-northstar-page .tdf-ns-side{ position:relative; top:auto; max-height:none; overflow:visible; }
}
@media (max-width: 980px){
#tdf-northstar-page .tdf-ns-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
#tdf-northstar-page .tdf-ns-inner{ padding:16px; }
}
#tdf-northstar-page .tdf-item,
#tdf-northstar-page .tdf-prompt{
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color:#fff;
padding:18px;
border-radius:16px;
}
#tdf-northstar-page h2,
#tdf-northstar-page h3,
#tdf-northstar-page h4{ color:#fff; }
#tdf-northstar-page .tdf-muted,
#tdf-northstar-page .meta{ color: rgba(255,255,255,.72); }
#tdf-northstar-page textarea,
#tdf-northstar-page input,
#tdf-northstar-page select{
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
color:#fff;
line-height:1.4;
}
#tdf-northstar-page select{
background:#fff;
color:#111;
}
#tdf-northstar-page textarea{ min-height:110px; resize:vertical; }
#tdf-northstar-page textarea::placeholder,
#tdf-northstar-page input::placeholder{ color: rgba(255,255,255,.60); }
/* ✅ North Star collapsibles (scoped) */
#tdf-northstar-page .tdf-ns-hero{ padding-bottom:14px; }
#tdf-northstar-page .tdf-ns-collapsible{
border-radius:16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
overflow:hidden;
}
#tdf-northstar-page .tdf-ns-collapsible-btn{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 14px;
background: transparent;
border:0;
color:#fff;
cursor:pointer;
}
#tdf-northstar-page .tdf-ns-collapsible-title{ font-weight:800; letter-spacing:.2px; }
#tdf-northstar-page .tdf-ns-collapsible-sub{ margin-top:4px; font-size:13px; color: rgba(255,255,255,.72); }
#tdf-northstar-page .tdf-ns-collapsible-chev{
width:34px; height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background: rgba(0,0,0,.18);
flex:0 0 auto;
font-weight:900;
}
#tdf-northstar-page .tdf-ns-collapsible-panel{
max-height:0;
overflow:hidden;
transition: max-height .28s ease;
}
#tdf-northstar-page .tdf-ns-collapsible.is-open .tdf-ns-collapsible-panel{
/* large max-height to allow content; still animates */
max-height: 3000px;
}
#tdf-northstar-page .tdf-ns-card{ margin:0; border:0; background:transparent; }
/* ✅ Categories grid (reduce scrolling) */
#tdf-northstar-page .tdf-ns-cats-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:14px;
padding: 0 14px 14px;
}
@media (max-width: 980px){
#tdf-northstar-page .tdf-ns-cats-grid{ grid-template-columns: 1fr; }
}
/* ✅ Timeline (clean, vertical, minimalist) */
#tdf-northstar-page .tdf-ns-timeline{
position:relative;
padding: 4px 14px 14px 44px;
}
#tdf-northstar-page .tdf-ns-timeline::before{
content:"";
position:absolute;
left:28px;
top:14px;
bottom:18px;
width:2px;
background: rgba(255,255,255,.14);
}
#tdf-northstar-page .tdf-ns-tl-item{
position:relative;
padding: 10px 0;
}
#tdf-northstar-page .tdf-ns-tl-dot{
position:absolute;
left:-22px;
top:18px;
width:12px;
height:12px;
border-radius:999px;
background: rgba(199,248,0,.95);
box-shadow: 0 0 0 4px rgba(199,248,0,.14);
}
#tdf-northstar-page .tdf-ns-tl-body{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius:14px;
padding: 12px 12px;
}
#tdf-northstar-page .tdf-ns-tl-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
#tdf-northstar-page .tdf-ns-tl-title{ font-weight:800; }
#tdf-northstar-page .tdf-ns-tl-preview{
margin-top:8px;
color: rgba(255,255,255,.78);
font-size:13px;
line-height:1.5;
}
@media (max-width: 560px){
#tdf-northstar-page .tdf-ns-timeline{ padding-left: 40px; }
#tdf-northstar-page .tdf-ns-tl-top{ flex-direction:column; }
#tdf-northstar-page .tdf-ns-tl-top .tdf-btn{ width:100%; }
}
/* =========================
MODAL (One-time popups + Reset success)
Modern, warm, clean + centered text
========================= */
.tdf-modal-backdrop{
position:fixed;
inset:0;
background: rgba(0,0,0,.55);
display:flex;
align-items:center;
justify-content:center;
padding:18px;
z-index:9999;
}
.tdf-modal{
width:min(720px, 100%);
max-height:min(78vh, 720px);
overflow:auto;
border-radius:22px;
padding:26px 22px 22px;
background:
radial-gradient(800px 420px at 50% 0%, rgba(255,255,255,.14), transparent 60%),
rgba(12,16,18,.74);
border:1px solid rgba(255,255,255,.22);
box-shadow: 0 24px 80px rgba(0,0,0,.45);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color:#fff;
position:relative;
text-align:center;
}
/* ✅ Modal content cards are white by default (.tdf-item background:#fff)
but the modal text is white, so content becomes invisible.
Force readable dark text inside modal cards only. */
.tdf-modal .tdf-item,
.tdf-modal .tdf-item *{
color:#0b1220 !important;
}
.tdf-modal .tdf-item .tdf-muted{ opacity:.78; }
.tdf-modal-title{
font-size:22px;
font-weight:800;
letter-spacing:.2px;
margin: 0 0 10px;
}
.tdf-modal-body{
font-size:15px;
line-height:1.7;
opacity:.96;
}
.tdf-modal-body p{ margin: 0 0 12px; }
.tdf-modal-x{
position:absolute;
top:12px;
right:12px;
width:38px;
height:38px;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.10);
color:#fff;
font-size:24px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.tdf-modal-x:hover{ background: rgba(255,255,255,.16); }
/* ===== Idea Bank + Reset UI ===== */
.tdf-row{ display:flex; gap:12px; }
.tdf-row-between{ justify-content:space-between; }
.tdf-row-center{ align-items:center; }
.tdf-step{ padding:12px; border:1px solid rgba(255,255,255,.20); border-radius:14px; margin:10px 0; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.tdf-step-title{ font-weight:800; margin-bottom:8px; }
/* Reset form controls should match the rest of the portal */
.tdf-step textarea{
width:100%;
min-height:120px;
max-height:320px;
resize:vertical;
border-radius:14px;
border:1px solid rgba(46,46,46,.14);
padding:14px 14px;
background:#fff;
color:var(--ink);
font-size:15px;
line-height:1.55;
outline:none;
}
.tdf-step textarea:focus{
border-color:rgba(111,163,184,.6);
box-shadow:0 0 0 4px rgba(111,163,184,.15);
}
.tdf-step input{
width:100%;
border-radius:14px;
border:1px solid rgba(46,46,46,.14);
padding:14px 14px;
background:#fff;
color:var(--ink);
font-size:15px;
outline:none;
}
.tdf-step input:focus{
border-color:rgba(111,163,184,.6);
box-shadow:0 0 0 4px rgba(111,163,184,.15);
}
.tdf-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid rgba(0,0,0,.10); border-radius:16px; background:rgba(212,168,94,.12); margin-bottom:14px; }
.tdf-section{ margin-top:18px; }
.tdf-section-title{ font-weight:900; letter-spacing:.2px; margin:0 0 10px; }
.tdf-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
@media (max-width: 840px){ .tdf-grid{ grid-template-columns: 1fr; } }
.tdf-idea-card{ border:1px solid rgba(0,0,0,.10); border-radius:18px; padding:12px 12px 10px; background:rgba(255,255,255,.75); }
.tdf-idea-card-elevated{ border-color: rgba(212,168,94,.35); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
/* =========================
Pattern Replacement
========================= */
.tdf-pat-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:16px;}
@media (max-width: 980px){ .tdf-pat-grid{grid-template-columns:1fr;} }
.tdf-pat-list{display:grid; gap:12px;}
.tdf-pat-card{
border:1px solid rgba(2,6,23,.10);
border-radius:16px;
padding:14px;
/* Hollow / transparent card look */
background: rgba(255,255,255,.10);
backdrop-filter: blur(10px);
box-shadow: none;
}
[data-bg="night"] .tdf-pat-card,
[data-bg="evening"] .tdf-pat-card{
border-color: rgba(255,255,255,.14);
background: rgba(0,0,0,.10);
backdrop-filter: blur(12px);
}
.tdf-pat-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.tdf-pat-note{padding:16px;}
.tdf-idea-card-head{ display:flex; justify-content:space-between; gap:10px; }
.tdf-idea-title{ font-weight:900; margin-bottom:4px; }
.tdf-idea-sub{ font-size:13px; opacity:.78; line-height:1.4; }
.tdf-idea-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.tdf-tag{ font-size:12px; padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.8); display:inline-flex; align-items:center; line-height:1; }
.tdf-tag-focus{ border-color: rgba(212,168,94,.55); }
.tdf-idea-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.tdf-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* Idea Bank: make buttons + controls cleaner, aligned, and consistent */
.tdf-idea-actions .tdf-btn{
height:42px;
padding:0 14px;
border-radius:14px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.tdf-idea-actions .tdf-btn.tdf-btn-ghost{
background: rgba(255,255,255,.7);
}
.tdf-idea-actions .tdf-inline{
gap:10px;
}
.tdf-idea-actions .tdf-inline .tdf-btn{ min-width:132px; }
.tdf-stage-select{ min-width:200px; }
@media (max-width: 620px){
.tdf-idea-actions{ gap:8px; }
.tdf-stage-select{ width:100%; min-width:0; }
.tdf-idea-actions .tdf-inline{ width:100%; }
.tdf-idea-actions .tdf-inline .tdf-btn{ flex:1; min-width:0; }
}
.tdf-stage-select{
height:42px;
border-radius:14px;
border:1px solid rgba(0,0,0,.10);
background:rgba(255,255,255,.92);
padding:0 12px;
font-size:13px;
color:var(--ink);
cursor:pointer;
}
.tdf-stage-select:focus{ outline:none; box-shadow:0 0 0 4px rgba(111,163,184,.18); border-color:rgba(111,163,184,.55); }
/* Mobile: ensure rounded corners remain visible */
@media (max-width: 520px){
.tdf-main{ padding: calc(16px + 62px + env(safe-area-inset-top)) 12px 42px; }
.tdf-card{ border-radius:22px !important; }
.tdf-idea-card{ border-radius:20px !important; }
}
.tdf-radio-row{ display:flex; gap:14px; flex-wrap:wrap; }
/* Toast / popup */
.tdf-toastwrap{
position:fixed;
inset:0;
display:flex;
align-items:flex-end;
justify-content:center;
pointer-events:auto;
z-index:60;
padding:18px;
}
.tdf-toast{
width:min(680px, 100%);
border-radius:18px;
border:1px solid var(--border);
background:rgba(255,255,255,.92);
box-shadow: var(--shadow);
padding:14px 14px;
display:flex;
gap:12px;
align-items:flex-start;
justify-content:space-between;
animation: tdfPop .18s ease;
}
.tdf-toast-msg{ font-size:14px; line-height:1.5; }
.tdf-toast-x{
width:38px;
height:38px;
border-radius:14px;
border:1px solid var(--border);
background:#fff;
cursor:pointer;
font-size:22px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
color:#111827;
}
.tdf-toast-success{ border-color:rgba(79,107,88,.35); }
.tdf-toast-warm{ border-color:rgba(212,168,94,.5); }
@keyframes tdfPop{ from{transform:translateY(8px); opacity:.75} to{transform:translateY(0); opacity:1} }
/* Calendar fire */
.tdf-fire{ margin-top:6px; font-size:16px; }
/* ✅ Calendar icons should stack horizontally (not stretching day cells) */
.tdf-cal-icons{ display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.tdf-cal-icons .tdf-fire{ margin-top:0; }
/* Plans + checkout (updated classes) */
.tdf-plans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:12px; }
@media (max-width:720px){ .tdf-plans{ grid-template-columns:1fr; } }
.tdf-plan-sub{ opacity:.7; font-size:13px; margin-top:2px; }
.tdf-cardgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px; }
@media (max-width:700px){ .tdf-cardgrid{ grid-template-columns:1fr; } }
/* Calendar grid */
.tdf-cal{ margin-top:14px; }
.tdf-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.tdf-cal-day{ border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.10); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:10px 8px; min-height:58px; }
.tdf-cal-today{ border-color:rgba(212,168,94,.85) !important; box-shadow:0 0 0 3px rgba(212,168,94,.18); }
.tdf-cal-day .n{ font-weight:800; font-size:12px; opacity:.7; }
.tdf-cal-day .dots{ margin-top:8px; display:flex; gap:6px; align-items:center; }
.tdf-dot{ width:10px; height:10px; border-radius:999px; border:1px solid var(--border); background:rgba(0,0,0,.04); }
.tdf-dot.on{ background:rgba(111,163,184,.65); border-color:rgba(111,163,184,.65); }
.tdf-dot.full{ background:rgba(79,107,88,.7); border-color:rgba(79,107,88,.7); }
/* End-of-cycle panel */
.tdf-end{
margin-top:18px;
border:1px solid rgba(212,168,94,.55);
background:rgba(255,255,255,.75);
border-radius:18px;
padding:16px;
}
.tdf-end h3{ margin:0 0 8px; font-size:18px; }
.tdf-end p{ margin:0 0 10px; opacity:.85; line-height:1.6; }
/* UX polish */
@media (prefers-reduced-motion: no-preference){
.tdf-item, .tdf-sidebar, .tdf-main-inner, .tdf-btn { transition: all .18s ease; }
.tdf-item{ transform: translateY(0); }
.tdf-item:hover{ transform: translateY(-1px); }
}
.tdf-badge{
display:inline-block;
margin-left:10px;
font-size:12px;
padding:4px 10px;
border-radius:999px;
background: rgba(212,168,94,.20);
border:1px solid rgba(212,168,94,.45);
color: var(--ink);
vertical-align:middle;
}
.tdf-archive-controls .tdf-row{
display:grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap:10px;
}
@media (max-width: 700px){
.tdf-archive-controls .tdf-row{ grid-template-columns: 1fr; }
}
/* ===== v1.0.10 Auth + Mobile polish ===== */
.tdf-auth-logo{ display:flex; justify-content:center; margin:6px 0 14px; }
.tdf-auth-logoimg{ height:160px !important; width:auto !important; max-width:560px !important; object-fit:contain !important; }
.tdf-auth-title, .tdf-auth-sub{ text-align:center; }
@media (max-width: 520px){
.tdf-auth-logoimg{ height:160px !important; width:auto !important; max-width:560px !important; object-fit:contain !important; }
}
/* Brand/logo in nav */
.tdf-brand.has-logo .tdf-brandtext{ display:none; }
.tdf-logo{ height:30px; width:auto; object-fit:contain; }
@media (max-width: 860px){
.tdf-topbrandtext{ display:none; }
.tdf-topbar{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
border-radius:0;
padding:12px 14px;
}
.tdf-shell{ padding:0; }
.tdf-card{ width:100%; border-radius:0; }
.tdf-main{ padding:16px 14px 18px; }
.tdf-burger{ visibility:visible !important; opacity:1 !important; border-color:rgba(0,0,0,.12) !important; }
.tdf-burger .b{ background:#000 !important; }
}
/* === Time backgrounds: keep the SAME tab UI styling on every view === */
/* Background must cover full viewport (no black side gaps) */
.tdf-app[data-bg="morning"], .tdf-app[data-bg="sunset"], .tdf-app[data-bg="night"]{ background-size:cover !important; }
.tdf-app[data-bg="morning"] .tdf-sidebar,
.tdf-app[data-bg="sunset"] .tdf-sidebar,
.tdf-app[data-bg="night"] .tdf-sidebar{
background: rgba(12,16,18,.22) !important;
border-right: 1px solid rgba(255,255,255,.18) !important;
color: #fff !important;
}
.tdf-app[data-bg="morning"] .tdf-brand,
.tdf-app[data-bg="sunset"] .tdf-brand,
.tdf-app[data-bg="night"] .tdf-brand,
.tdf-app[data-bg="morning"] .tdf-side-hi,
.tdf-app[data-bg="sunset"] .tdf-side-hi,
.tdf-app[data-bg="night"] .tdf-side-hi,
.tdf-app[data-bg="morning"] .tdf-title,
.tdf-app[data-bg="sunset"] .tdf-title,
.tdf-app[data-bg="night"] .tdf-title{
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-navbtn,
.tdf-app[data-bg="sunset"] .tdf-navbtn,
.tdf-app[data-bg="night"] .tdf-navbtn{
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-navbtn:hover,
.tdf-app[data-bg="sunset"] .tdf-navbtn:hover,
.tdf-app[data-bg="night"] .tdf-navbtn:hover{
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.14) !important;
}
/* Time backgrounds — force headings + sidebar text to white */
.tdf-app[data-bg="morning"] .tdf-greet,
.tdf-app[data-bg="sunset"] .tdf-greet,
.tdf-app[data-bg="night"] .tdf-greet,
.tdf-app[data-bg="morning"] .tdf-eyebrow,
.tdf-app[data-bg="sunset"] .tdf-eyebrow,
.tdf-app[data-bg="night"] .tdf-eyebrow,
.tdf-app[data-bg="morning"] .tdf-title,
.tdf-app[data-bg="sunset"] .tdf-title,
.tdf-app[data-bg="night"] .tdf-title,
.tdf-app[data-bg="morning"] .tdf-muted,
.tdf-app[data-bg="sunset"] .tdf-muted,
.tdf-app[data-bg="night"] .tdf-muted{
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-sidebar,
.tdf-app[data-bg="sunset"] .tdf-sidebar,
.tdf-app[data-bg="night"] .tdf-sidebar{
background:transparent !important;
backdrop-filter:saturate(115%) blur(10px);
-webkit-backdrop-filter:saturate(115%) blur(10px);
}
.tdf-app[data-bg="morning"] .tdf-brandtext,
.tdf-app[data-bg="sunset"] .tdf-brandtext,
.tdf-app[data-bg="night"] .tdf-brandtext,
.tdf-app[data-bg="morning"] .tdf-side-hi,
.tdf-app[data-bg="sunset"] .tdf-side-hi,
.tdf-app[data-bg="night"] .tdf-side-hi,
.tdf-app[data-bg="morning"] .tdf-navbtn,
.tdf-app[data-bg="sunset"] .tdf-navbtn,
.tdf-app[data-bg="night"] .tdf-navbtn{
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-navbtn.active,
.tdf-app[data-bg="sunset"] .tdf-navbtn.active,
.tdf-app[data-bg="night"] .tdf-navbtn.active{
border-color:rgba(255,255,255,.55) !important;
background:rgba(255,255,255,.10) !important;
}
/* =========================================================
GLASS THEME (Start/Close backgrounds)
Make EVERY card/box across ALL tabs look like the Start/Close prompts:
- transparent / frosted
- thin white outline
- white text
========================================================= */
.tdf-app[data-bg="morning"],
.tdf-app[data-bg="sunset"],
.tdf-app[data-bg="night"]{
--tdf-glass-bg: rgba(0,0,0,.14);
--tdf-glass-bg-2: rgba(0,0,0,.10);
--tdf-glass-border: rgba(255,255,255,.28);
--tdf-glass-border-2: rgba(255,255,255,.20);
--tdf-glass-shadow: 0 18px 44px rgba(0,0,0,.22);
}
/* Core surfaces */
.tdf-app[data-bg="morning"] .tdf-card,
.tdf-app[data-bg="sunset"] .tdf-card,
.tdf-app[data-bg="night"] .tdf-card,
.tdf-app[data-bg="morning"] .tdf-item,
.tdf-app[data-bg="sunset"] .tdf-item,
.tdf-app[data-bg="night"] .tdf-item,
.tdf-app[data-bg="morning"] .tdf-step,
.tdf-app[data-bg="sunset"] .tdf-step,
.tdf-app[data-bg="night"] .tdf-step,
.tdf-app[data-bg="morning"] .tdf-idea-card,
.tdf-app[data-bg="sunset"] .tdf-idea-card,
.tdf-app[data-bg="night"] .tdf-idea-card,
.tdf-app[data-bg="morning"] .tdf-plan,
.tdf-app[data-bg="sunset"] .tdf-plan,
.tdf-app[data-bg="night"] .tdf-plan,
.tdf-app[data-bg="morning"] .tdf-end,
.tdf-app[data-bg="sunset"] .tdf-end,
.tdf-app[data-bg="night"] .tdf-end,
.tdf-app[data-bg="morning"] .tdf-banner,
.tdf-app[data-bg="sunset"] .tdf-banner,
.tdf-app[data-bg="night"] .tdf-banner,
.tdf-app[data-bg="morning"] .tdf-toast,
.tdf-app[data-bg="sunset"] .tdf-toast,
.tdf-app[data-bg="night"] .tdf-toast,
.tdf-app[data-bg="morning"] .tdf-cal-day,
.tdf-app[data-bg="sunset"] .tdf-cal-day,
.tdf-app[data-bg="night"] .tdf-cal-day{
background: var(--tdf-glass-bg) !important;
border: 1px solid var(--tdf-glass-border) !important;
box-shadow: var(--tdf-glass-shadow) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color:#fff !important;
}
/* Slightly lighter for nested/secondary surfaces */
.tdf-app[data-bg="morning"] .tdf-pill,
.tdf-app[data-bg="sunset"] .tdf-pill,
.tdf-app[data-bg="night"] .tdf-pill,
.tdf-app[data-bg="morning"] .tdf-tag,
.tdf-app[data-bg="sunset"] .tdf-tag,
.tdf-app[data-bg="night"] .tdf-tag,
.tdf-app[data-bg="morning"] .tdf-dot,
.tdf-app[data-bg="sunset"] .tdf-dot,
.tdf-app[data-bg="night"] .tdf-dot{
background: var(--tdf-glass-bg-2) !important;
border: 1px solid var(--tdf-glass-border-2) !important;
color:#fff !important;
}
/* Make ALL headings/labels/meta white */
.tdf-app[data-bg="morning"] .tdf-section-title,
.tdf-app[data-bg="sunset"] .tdf-section-title,
.tdf-app[data-bg="night"] .tdf-section-title,
.tdf-app[data-bg="morning"] .tdf-prompt h3,
.tdf-app[data-bg="sunset"] .tdf-prompt h3,
.tdf-app[data-bg="night"] .tdf-prompt h3,
.tdf-app[data-bg="morning"] .tdf-field label,
.tdf-app[data-bg="sunset"] .tdf-field label,
.tdf-app[data-bg="night"] .tdf-field label,
.tdf-app[data-bg="morning"] .tdf-plan-title,
.tdf-app[data-bg="sunset"] .tdf-plan-title,
.tdf-app[data-bg="night"] .tdf-plan-title,
.tdf-app[data-bg="morning"] .tdf-plan-price,
.tdf-app[data-bg="sunset"] .tdf-plan-price,
.tdf-app[data-bg="night"] .tdf-plan-price,
.tdf-app[data-bg="morning"] .tdf-checkout label,
.tdf-app[data-bg="sunset"] .tdf-checkout label,
.tdf-app[data-bg="night"] .tdf-checkout label,
.tdf-app[data-bg="morning"] .tdf-idea-title,
.tdf-app[data-bg="sunset"] .tdf-idea-title,
.tdf-app[data-bg="night"] .tdf-idea-title,
.tdf-app[data-bg="morning"] .tdf-idea-sub,
.tdf-app[data-bg="sunset"] .tdf-idea-sub,
.tdf-app[data-bg="night"] .tdf-idea-sub,
.tdf-app[data-bg="morning"] .tdf-item .meta,
.tdf-app[data-bg="sunset"] .tdf-item .meta,
.tdf-app[data-bg="night"] .tdf-item .meta,
.tdf-app[data-bg="morning"] .tdf-small,
.tdf-app[data-bg="sunset"] .tdf-small,
.tdf-app[data-bg="night"] .tdf-small,
.tdf-app[data-bg="morning"] .tdf-plan-sub,
.tdf-app[data-bg="sunset"] .tdf-plan-sub,
.tdf-app[data-bg="night"] .tdf-plan-sub{
color: rgba(255,255,255,.92) !important;
}
/* Lists inside plans */
.tdf-app[data-bg="morning"] .tdf-plan-list,
.tdf-app[data-bg="sunset"] .tdf-plan-list,
.tdf-app[data-bg="night"] .tdf-plan-list{
color: rgba(255,255,255,.92) !important;
}
/* Selects should be transparent + white */
.tdf-app[data-bg="morning"] select,
.tdf-app[data-bg="sunset"] select,
.tdf-app[data-bg="night"] select,
.tdf-app[data-bg="morning"] .tdf-stage-select,
.tdf-app[data-bg="sunset"] .tdf-stage-select,
.tdf-app[data-bg="night"] .tdf-stage-select{
background: transparent !important;
border: 1px solid var(--tdf-glass-border) !important;
color:#fff !important;
}
/* Inputs used in checkout */
.tdf-app[data-bg="morning"] .tdf-in,
.tdf-app[data-bg="sunset"] .tdf-in,
.tdf-app[data-bg="night"] .tdf-in{
background: transparent !important;
border: 1px solid var(--tdf-glass-border) !important;
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-in::placeholder,
.tdf-app[data-bg="sunset"] .tdf-in::placeholder,
.tdf-app[data-bg="night"] .tdf-in::placeholder{
color: rgba(255,255,255,.78) !important;
}
/* Mobile topbar should also be glass + white */
@media (max-width: 860px){
.tdf-app[data-bg="morning"] .tdf-topbar,
.tdf-app[data-bg="sunset"] .tdf-topbar,
.tdf-app[data-bg="night"] .tdf-topbar{
background: rgba(12,16,18,.22) !important;
border-bottom: 1px solid rgba(255,255,255,.18) !important;
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-topbrandtext,
.tdf-app[data-bg="sunset"] .tdf-topbrandtext,
.tdf-app[data-bg="night"] .tdf-topbrandtext{
color:#fff !important;
}
/* Fix: mobile header right button text was white on white button */
.tdf-app[data-bg="morning"] .tdf-topout,
.tdf-app[data-bg="sunset"] .tdf-topout,
.tdf-app[data-bg="night"] .tdf-topout{
color:#111 !important;
background: rgba(255,255,255,.92) !important;
border-color: rgba(255,255,255,.22) !important;
}
.tdf-app[data-bg="morning"] .tdf-burger,
.tdf-app[data-bg="sunset"] .tdf-burger,
.tdf-app[data-bg="night"] .tdf-burger{
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.22) !important;
}
.tdf-app[data-bg="morning"] .tdf-burger::before,
.tdf-app[data-bg="sunset"] .tdf-burger::before,
.tdf-app[data-bg="night"] .tdf-burger::before{
background:
linear-gradient(#fff 0 0) top/18px 2px no-repeat,
linear-gradient(#fff 0 0) center/18px 2px no-repeat,
linear-gradient(#fff 0 0) bottom/18px 2px no-repeat;
}
}
/* =========================
GLASS THEME FIX PACK (nav dots, calendar dots, full white typography)
========================= */
/* Navigation dot (was inline before) */
.tdf-navdot{
display:inline-block;
width:8px; height:8px;
border-radius:999px;
background:rgba(46,46,46,.35);
}
/* ============================
Admin panel (inside /tdf)
============================ */
.tdf-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:rgba(255,255,255,.92);
font-weight:600;
cursor:pointer;
}
.tdf-chip:hover{ background:rgba(255,255,255,.10); }
.tdf-chip.active{
background:rgba(111,163,184,.22);
border-color:rgba(111,163,184,.40);
}
.tdf-admin-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap:12px;
margin-top:12px;
}
.tdf-admin-metric{
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
border-radius:16px;
padding:14px 14px 12px;
}
.tdf-admin-metric .k{ font-size:12px; opacity:.78; margin-bottom:6px; }
.tdf-admin-metric .v{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.tdf-admin-tablewrap{ overflow:auto; border-radius:16px; border:1px solid rgba(255,255,255,.10); }
.tdf-admin-table{
width:100%;
border-collapse:collapse;
min-width:680px;
}
.tdf-admin-table th,
.tdf-admin-table td{
padding:10px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
vertical-align:top;
font-size:13px;
}
.tdf-admin-table th{ text-align:left; font-weight:800; opacity:.9; }
.tdf-admin-table tr:hover td{ background:rgba(255,255,255,.04); }
.tdf-admin-formgrid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:12px;
}
@media (max-width: 900px){
.tdf-admin-grid{ grid-template-columns: 1fr; }
.tdf-admin-formgrid{ grid-template-columns: 1fr; }
.tdf-admin-table{ min-width: 520px; }
}
.tdf-app[data-bg="morning"] .tdf-navdot,
.tdf-app[data-bg="sunset"] .tdf-navdot,
.tdf-app[data-bg="night"] .tdf-navdot{
background: rgba(255,255,255,.70) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset;
}
.tdf-app[data-bg="morning"] .tdf-navbtn[aria-current="page"] .tdf-navdot,
.tdf-app[data-bg="sunset"] .tdf-navbtn[aria-current="page"] .tdf-navdot,
.tdf-app[data-bg="night"] .tdf-navbtn[aria-current="page"] .tdf-navdot{
background: rgba(255,255,255,.95) !important;
}
/* Calendar day number + dots: make them clearly visible and FILLED when active */
.tdf-app[data-bg="morning"] .tdf-cal-day,
.tdf-app[data-bg="sunset"] .tdf-cal-day,
.tdf-app[data-bg="night"] .tdf-cal-day{
opacity:1 !important;
}
.tdf-app[data-bg="morning"] .tdf-cal-day .n,
.tdf-app[data-bg="sunset"] .tdf-cal-day .n,
.tdf-app[data-bg="night"] .tdf-cal-day .n{
color:#fff !important;
opacity:.92;
}
.tdf-app[data-bg="morning"] .tdf-dot,
.tdf-app[data-bg="sunset"] .tdf-dot,
.tdf-app[data-bg="night"] .tdf-dot{
background: transparent !important;
border-color: rgba(255,255,255,.55) !important;
}
.tdf-app[data-bg="morning"] .tdf-dot.on,
.tdf-app[data-bg="sunset"] .tdf-dot.on,
.tdf-app[data-bg="night"] .tdf-dot.on,
.tdf-app[data-bg="morning"] .tdf-dot.full,
.tdf-app[data-bg="sunset"] .tdf-dot.full,
.tdf-app[data-bg="night"] .tdf-dot.full{
background: rgba(255,255,255,.92) !important;
border-color: rgba(255,255,255,.92) !important;
}
/* Force all common text tokens to white (fixes blue/gray labels across tabs) */
.tdf-app[data-bg="morning"] h1,
.tdf-app[data-bg="sunset"] h1,
.tdf-app[data-bg="night"] h1,
.tdf-app[data-bg="morning"] h2,
.tdf-app[data-bg="sunset"] h2,
.tdf-app[data-bg="night"] h2,
.tdf-app[data-bg="morning"] h3,
.tdf-app[data-bg="sunset"] h3,
.tdf-app[data-bg="night"] h3,
.tdf-app[data-bg="morning"] h4,
.tdf-app[data-bg="sunset"] h4,
.tdf-app[data-bg="night"] h4,
.tdf-app[data-bg="morning"] .tdf-title,
.tdf-app[data-bg="sunset"] .tdf-title,
.tdf-app[data-bg="night"] .tdf-title,
.tdf-app[data-bg="morning"] .tdf-eyebrow,
.tdf-app[data-bg="sunset"] .tdf-eyebrow,
.tdf-app[data-bg="night"] .tdf-eyebrow,
.tdf-app[data-bg="morning"] .tdf-muted,
.tdf-app[data-bg="sunset"] .tdf-muted,
.tdf-app[data-bg="night"] .tdf-muted,
.tdf-app[data-bg="morning"] .meta,
.tdf-app[data-bg="sunset"] .meta,
.tdf-app[data-bg="night"] .meta{
color: rgba(255,255,255,.92) !important;
}
/* Archive/Account field styling in glass mode */
.tdf-app[data-bg="morning"] .tdf-field input,
.tdf-app[data-bg="sunset"] .tdf-field input,
.tdf-app[data-bg="night"] .tdf-field input{
background: rgba(0,0,0,.12) !important;
border: 1px solid rgba(255,255,255,.28) !important;
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-field input::placeholder,
.tdf-app[data-bg="sunset"] .tdf-field input::placeholder,
.tdf-app[data-bg="night"] .tdf-field input::placeholder{
color: rgba(255,255,255,.75) !important;
}
.tdf-app[data-bg="morning"] .tdf-field label,
.tdf-app[data-bg="sunset"] .tdf-field label,
.tdf-app[data-bg="night"] .tdf-field label{
color: rgba(255,255,255,.92) !important;
opacity: .92 !important;
}
/* Lock note should match glass */
.tdf-app[data-bg="morning"] .tdf-locknote,
.tdf-app[data-bg="sunset"] .tdf-locknote,
.tdf-app[data-bg="night"] .tdf-locknote{
background: rgba(0,0,0,.10) !important;
border-color: rgba(255,255,255,.32) !important;
color: rgba(255,255,255,.92) !important;
}
/* =========================================================
FINAL GLASS CONSISTENCY OVERRIDES
- Fix any remaining Elementor/theme heading colors (blue)
- Make every box + label consistently white + glass
- Keep sidebar full height while scrolling
========================================================= */
/* If a theme targets headings strongly, this forces our app headings to stay white */
.tdf-app[data-bg="morning"] .tdf-main h1,
.tdf-app[data-bg="sunset"] .tdf-main h1,
.tdf-app[data-bg="night"] .tdf-main h1,
.tdf-app[data-bg="morning"] .tdf-main h2,
.tdf-app[data-bg="sunset"] .tdf-main h2,
.tdf-app[data-bg="night"] .tdf-main h2,
.tdf-app[data-bg="morning"] .tdf-main h3,
.tdf-app[data-bg="sunset"] .tdf-main h3,
.tdf-app[data-bg="night"] .tdf-main h3,
.tdf-app[data-bg="morning"] .tdf-main h4,
.tdf-app[data-bg="sunset"] .tdf-main h4,
.tdf-app[data-bg="night"] .tdf-main h4,
.tdf-app[data-bg="morning"] .tdf-main h5,
.tdf-app[data-bg="sunset"] .tdf-main h5,
.tdf-app[data-bg="night"] .tdf-main h5,
.tdf-app[data-bg="morning"] .tdf-main h6,
.tdf-app[data-bg="sunset"] .tdf-main h6,
.tdf-app[data-bg="night"] .tdf-main h6{
color:#fff !important;
}
/* Common text tokens that were still showing dark/blue in Account/Archive */
.tdf-app[data-bg="morning"] .tdf-main .meta,
.tdf-app[data-bg="sunset"] .tdf-main .meta,
.tdf-app[data-bg="night"] .tdf-main .meta,
.tdf-app[data-bg="morning"] .tdf-main .tdf-muted,
.tdf-app[data-bg="sunset"] .tdf-main .tdf-muted,
.tdf-app[data-bg="night"] .tdf-main .tdf-muted,
.tdf-app[data-bg="morning"] .tdf-main .tdf-eyebrow,
.tdf-app[data-bg="sunset"] .tdf-main .tdf-eyebrow,
.tdf-app[data-bg="night"] .tdf-main .tdf-eyebrow,
.tdf-app[data-bg="morning"] .tdf-main .tdf-small,
.tdf-app[data-bg="sunset"] .tdf-main .tdf-small,
.tdf-app[data-bg="night"] .tdf-main .tdf-small{
color: rgba(255,255,255,.90) !important;
}
/* Make account/subscription rows look like the same glass boxes */
.tdf-app[data-bg="morning"] .tdf-row,
.tdf-app[data-bg="sunset"] .tdf-row,
.tdf-app[data-bg="night"] .tdf-row,
.tdf-app[data-bg="morning"] .tdf-grid2,
.tdf-app[data-bg="sunset"] .tdf-grid2,
.tdf-app[data-bg="night"] .tdf-grid2{
color:#fff !important;
}
/* Inputs/textareas: fully transparent like Start/Close prompts */
.tdf-app[data-bg="morning"] textarea,
.tdf-app[data-bg="sunset"] textarea,
.tdf-app[data-bg="night"] textarea,
.tdf-app[data-bg="morning"] input,
.tdf-app[data-bg="sunset"] input,
.tdf-app[data-bg="night"] input{
background: transparent !important;
}
/* Sidebar height: always full viewport height even when page scrolls */
.tdf-sidebar{ min-height:100vh; }
@supports (height: 100dvh){
.tdf-sidebar{ height:100dvh; min-height:100dvh; }
}
/* Sidebar: always full height even when main scrolls */
.tdf-shell{ min-height:100vh; }
.tdf-sidebar{ min-height:100vh; height:100vh; align-self:stretch; }
@supports (height: 100dvh){
.tdf-sidebar{ height:100dvh; min-height:100dvh; }
}
/* Mobile drawer in glass mode */
@media (max-width: 860px){
.tdf-app[data-bg="morning"] .tdf-drawer,
.tdf-app[data-bg="sunset"] .tdf-drawer,
.tdf-app[data-bg="night"] .tdf-drawer{
background: rgba(0,0,0,.38) !important;
border-right: 1px solid rgba(255,255,255,.18) !important;
color:#fff !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.tdf-app[data-bg="morning"] .tdf-drawerbtn,
.tdf-app[data-bg="sunset"] .tdf-drawerbtn,
.tdf-app[data-bg="night"] .tdf-drawerbtn{
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.22) !important;
color:#fff !important;
}
.tdf-app[data-bg="morning"] .tdf-drawerx,
.tdf-app[data-bg="sunset"] .tdf-drawerx,
.tdf-app[data-bg="night"] .tdf-drawerx{
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.22) !important;
color:#fff !important;
}
}
/* Keep Sign Out readable (black text) on mobile */
.tdf-app[data-bg="morning"] .tdf-drawerbtn-out,
.tdf-app[data-bg="sunset"] .tdf-drawerbtn-out,
.tdf-app[data-bg="night"] .tdf-drawerbtn-out{
background:#fff !important;
color:#000 !important;
border-color:rgba(0,0,0,.12) !important;
}
/* ===== Admin Panel Enhancements ===== */
.tdf-admin-chartwrap{ width:100%; height:260px; position:relative; }
.tdf-admin-settingsgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width: 860px){ .tdf-admin-settingsgrid{ grid-template-columns:1fr; } }
.tdf-admin-field{ display:flex; flex-direction:column; gap:6px; }
.tdf-admin-fieldlabel{ font-size:12px; opacity:.75; }
/* ========================================
V5 NEW FEATURES CSS
======================================== */
/* Glow on nav items */
@keyframes tdf-navglow {
0%,100%{ box-shadow:0 0 0 0 rgba(111,163,184,0); }
50%{ box-shadow:0 0 12px 4px rgba(111,163,184,.65); }
}
.tdf-navbtn-glow{
animation: tdf-navglow 2s ease-in-out infinite;
border-color: rgba(111,163,184,.6) !important;
background: rgba(111,163,184,.15) !important;
}
/* ---- Focus Button ---- */
.tdf-focus-fab{
position:fixed;
bottom:24px;
right:24px;
width:56px; height:56px;
border-radius:50%;
border:2px solid rgba(220,60,60,.6);
background:rgba(255,255,255,.92);
backdrop-filter:blur(6px);
cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:700; text-align:center; line-height:1.2;
color:#c62828;
box-shadow:0 4px 16px rgba(0,0,0,.18);
z-index:9999;
transition: all .3s ease;
}
.tdf-focus-fab.active{
border-color:rgba(46,125,50,.7);
color:#1b5e20;
background:rgba(232,245,233,.95);
animation: tdf-focuspulse 2s ease-in-out infinite;
}
@keyframes tdf-focuspulse{
0%,100%{ box-shadow:0 4px 16px rgba(0,0,0,.18); }
50%{ box-shadow:0 4px 24px rgba(46,125,50,.45); }
}
/* ---- Today's Mission ---- */
.tdf-mission-tasks{ margin-top:16px; display:grid; gap:8px; }
.tdf-mission-task{
display:flex; align-items:center; gap:12px;
border:1px solid var(--border); border-radius:14px; padding:12px 14px;
background:rgba(255,255,255,.88);
transition: background .2s;
}
.tdf-mission-task.done{ background:rgba(34,139,34,.15); border-color:rgba(34,139,34,.4); }
.tdf-mission-task-circle{
width:22px; height:22px; border-radius:50%;
border:2px solid var(--primary);
flex-shrink:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:all .2s;
}
.tdf-mission-task.done .tdf-mission-task-circle{
background:#22a722; color:#fff; border-color:#22a722;
}
.tdf-mission-task-text{ flex:1; font-size:14px; }
.tdf-mission-task.done .tdf-mission-task-text{ text-decoration:line-through; opacity:.6; color:#22a722 !important; }
.tdf-mission-section-label{
font-size:11px; letter-spacing:.1em; text-transform:uppercase;
opacity:.6; margin:14px 0 4px;
}
.tdf-momentum-bar-wrap{
height:14px; background:rgba(0,0,0,.08);
border-radius:99px; overflow:visible; margin-top:4px;
padding:1px 0;
}
.tdf-momentum-bar{
height:100%; background:linear-gradient(90deg, #2196f3, #00bcd4, var(--primary));
border-radius:99px; transition:width .5s ease;
box-shadow: 0 0 10px 2px rgba(33,150,243,0.55), 0 0 20px 4px rgba(0,188,212,0.3);
animation: tdf-bar-glow 2s ease-in-out infinite alternate;
}
@keyframes tdf-bar-glow {
0% { box-shadow: 0 0 8px 2px rgba(33,150,243,0.5), 0 0 16px 3px rgba(0,188,212,0.25); }
100%{ box-shadow: 0 0 16px 5px rgba(33,150,243,0.75), 0 0 32px 8px rgba(0,188,212,0.45); }
}
.tdf-mission-streak{
display:inline-flex; align-items:center; gap:6px;
font-size:13px; font-weight:700; color:var(--ink);
padding:6px 12px; border-radius:99px;
background:rgba(212,168,94,.18); border:1px solid rgba(212,168,94,.35);
}
/* Momentum 100% celebrate animation */
@keyframes tdf-celebrate {
0%{ transform:scale(1); } 50%{ transform:scale(1.04); } 100%{ transform:scale(1); }
}
.tdf-celebrate{ animation: tdf-celebrate .4s ease; }
/* ---- My Rules ---- */
.tdf-rules-grid{ display:grid; gap:12px; margin-top:14px; }
.tdf-rule-card{
border:1px solid var(--border); border-radius:16px; padding:16px;
background:rgba(255,255,255,.88);
}
.tdf-rule-num{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:4px; }
.tdf-rule-text{ font-size:15px; font-weight:600; margin-bottom:10px; }
.tdf-rule-honor{
display:inline-flex; align-items:center; gap:8px;
cursor:pointer; font-size:13px; color:var(--ink);
padding:6px 10px; border-radius:99px;
border:1.5px solid var(--border);
background:#fff;
transition:all .2s;
-webkit-user-select:none; user-select:none;
}
.tdf-rule-honor.honored{
background:rgba(79,107,88,.15); border-color:rgba(79,107,88,.45); color:var(--secondary);
}
.tdf-rule-honor-dot{
width:14px; height:14px; border-radius:50%; border:2px solid currentColor;
display:inline-flex; align-items:center; justify-content:center; font-size:10px;
}
.tdf-rule-honor.honored .tdf-rule-honor-dot::after{ content:'✓'; }
.tdf-rules-counter{
font-size:13px; font-weight:700; opacity:.8;
}
/* Implement rule glow animation */
@keyframes tdf-ruleglow {
0%,100%{ box-shadow:0 0 0 0 rgba(111,163,184,0); }
50%{ box-shadow:0 0 14px 6px rgba(111,163,184,.5); }
}
.tdf-rule-implement-btn{
background:var(--primary); color:#fff; border:none;
padding:10px 18px; border-radius:14px; cursor:pointer; font-size:14px;
font-weight:600; margin-top:10px;
}
/* ---- Future Self Letter ---- */
.tdf-letter-envelope{
font-size:64px; text-align:center; margin:16px 0 8px;
animation: none;
}
.tdf-letter-envelope.sending{
animation: tdf-envelope-send .8s ease forwards;
}
@keyframes tdf-envelope-send{
0%{ opacity:1; transform:translateX(0) scale(1); }
40%{ transform:scale(.9); }
100%{ opacity:0; transform:translateX(120px) scale(.7); }
}
.tdf-letter-options{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.tdf-letter-opt{
flex:1; min-width:140px;
border:2px solid var(--border); border-radius:16px; padding:18px 14px;
background:#fff; cursor:pointer; text-align:center;
font-size:14px; font-weight:600;
transition:all .2s;
}
.tdf-letter-opt:hover{ border-color:var(--primary); background:rgba(111,163,184,.08); }
.tdf-letter-opt.selected{ border-color:var(--primary); background:rgba(111,163,184,.15); }
.tdf-letter-tagline{
text-align:center; font-size:14px; line-height:1.6;
opacity:.8; margin-bottom:6px;
}
/* Pending letter popup animation */
@keyframes tdf-letter-arrive{
0%{ opacity:0; transform:translateY(20px) scale(.96); }
100%{ opacity:1; transform:translateY(0) scale(1); }
}
.tdf-letter-arrive{ animation: tdf-letter-arrive .5s ease forwards; }
/* ---- Welcome Quiz ---- */
.tdf-quiz-wrap{ max-width:640px; margin:0 auto; }
.tdf-quiz-q{ font-size:16px; font-weight:600; margin-bottom:14px; line-height:1.45; }
.tdf-quiz-opts{ display:grid; gap:8px; }
.tdf-quiz-opt{
border:2px solid var(--border); border-radius:14px; padding:12px 16px;
background:#fff; cursor:pointer; font-size:14px; text-align:left;
transition:all .2s;
}
.tdf-quiz-opt:hover{ border-color:var(--primary); background:rgba(111,163,184,.08); }
.tdf-quiz-opt.selected{ border-color:var(--primary); background:rgba(111,163,184,.18); font-weight:600; }
.tdf-quiz-progress{ height:6px; background:rgba(0,0,0,.08); border-radius:99px; margin-bottom:16px; overflow:hidden; }
.tdf-quiz-progress-fill{ height:100%; background:var(--primary); border-radius:99px; transition:width .3s; }
.tdf-quiz-insight{
background:rgba(255,255,255,.92); border:1px solid var(--border);
border-radius:18px; padding:22px; line-height:1.7; font-size:14.5px;
}
/* ---- Encourage Someone Today (quote card) ---- */
.tdf-quote-card{
position:relative; border-radius:18px; overflow:hidden;
min-height:320px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#1a237e,#283593);
margin:14px 0;
}
.tdf-quote-card-bg{
position:absolute; inset:0; background-size:cover; background-position:center;
opacity:.55;
}
.tdf-quote-card-text{
position:relative; z-index:1; color:#fff;
font-size:18px; font-weight:700; line-height:1.5;
text-align:center; padding:24px; text-shadow:0 2px 8px rgba(0,0,0,.5);
max-width:340px;
}
.tdf-quote-card-logo{
position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
z-index:1; font-size:11px; color:rgba(255,255,255,.7); letter-spacing:.1em;
}
.tdf-share-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.tdf-share-btn{
flex:1; min-width:120px; padding:11px 12px;
border:1px solid rgba(255,255,255,.20); border-radius:12px; background:rgba(255,255,255,.10);
font-size:13px; font-weight:600; cursor:pointer; text-align:center;
transition:all .2s;
}
.tdf-share-btn:hover{ background:rgba(111,163,184,.12); }
/* ---- Calendar enhancements ---- */
.tdf-cal-symbol{ font-size:13px; line-height:1; }
/* ---- Day 5 trial letter ---- */
.tdf-trial-letter-wrap{
max-width:560px; margin:0 auto;
background:rgba(255,255,255,.95); border:1px solid var(--border);
border-radius:20px; padding:28px 24px; line-height:1.75; font-size:14.5px;
}
.tdf-trial-letter-icon{ font-size:48px; text-align:center; margin-bottom:10px; }
@keyframes tdf-letter-open{
0%{ opacity:0; transform:scale(.92) translateY(10px); }
100%{ opacity:1; transform:scale(1) translateY(0); }
}
.tdf-trial-letter-wrap{ animation: tdf-letter-open .5s ease forwards; }
/* ---- Info popup button (generic) ---- */
.tdf-info-circle{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%;
border:1.5px solid var(--border); background:rgba(255,255,255,.8);
font-size:12px; font-weight:800; cursor:pointer; color:var(--ink);
flex-shrink:0;
}
/* ---- First-time popup overlay ---- */
.tdf-firsttime-overlay{
position:fixed; inset:0; z-index:10000;
background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center; padding:20px;
}
.tdf-firsttime-card{
width:100%; max-width:540px;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:22px; padding:28px 24px; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
box-shadow:0 20px 60px rgba(0,0,0,.22);
max-height:88vh; overflow-y:auto;
animation: tdf-letter-open .35s ease;
}
.tdf-firsttime-title{ font-size:20px; font-weight:800; margin-bottom:12px; }
.tdf-firsttime-body{ font-size:14.5px; line-height:1.75; color:var(--ink); opacity:.9; }
.tdf-firsttime-body p{ margin:0 0 12px; }
.tdf-firsttime-close{
margin-top:18px; width:100%; padding:12px;
background:var(--primary); color:#fff; border:none;
border-radius:14px; font-size:15px; font-weight:700; cursor:pointer;
}
/* Push notification opt-in banner */
.tdf-push-banner{
background:rgba(111,163,184,.15); border:1px solid rgba(111,163,184,.35);
border-radius:14px; padding:14px 16px; margin-bottom:14px;
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.tdf-push-banner-text{ flex:1; font-size:13.5px; line-height:1.45; }
/* Weekly reflection - focus + rules summary */
.tdf-weekly-summary{ margin-top:14px; display:grid; gap:10px; }
.tdf-weekly-summary-item{
display:flex; justify-content:space-between; align-items:center;
border:1px solid var(--border); border-radius:12px; padding:12px 14px;
background:rgba(255,255,255,.88);
}
/* =========================================================
V5 COMPONENTS — Glass theme + fixes
========================================================= */
/* --- Sidebar: hide scrollbar on desktop, show on mobile --- */
.tdf-sidebar::-webkit-scrollbar { width:4px; }
.tdf-sidebar::-webkit-scrollbar-track { background:transparent; }
.tdf-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:99px; }
@media (min-width:861px){
.tdf-sidebar::-webkit-scrollbar { display:none; }
.tdf-sidebar { scrollbar-width:none; }
}
@media (max-width:860px){
/* Mobile drawer gets scroll */
.tdf-drawer{ overflow-y:auto; scrollbar-width:thin; }
}
/* --- Mobile: prevent zoom on input focus --- */
@media (max-width:860px){
input, textarea, select { font-size:16px !important; }
}
/* --- Afternoon / Evening bg selectors (match morning/night patterns) --- */
.tdf-app[data-bg="afternoon"]::before,
.tdf-app[data-bg="evening"]::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.28);
pointer-events:none;
z-index:0;
}
.tdf-app[data-bg="afternoon"] > *,
.tdf-app[data-bg="evening"] > *{
position:relative;
z-index:1;
}
.tdf-app[data-bg="afternoon"],
.tdf-app[data-bg="evening"]{
--tdf-glass-bg: rgba(0,0,0,.14);
--tdf-glass-bg-2: rgba(0,0,0,.10);
--tdf-glass-border: rgba(255,255,255,.28);
--tdf-glass-border-2: rgba(255,255,255,.20);
--tdf-glass-shadow: 0 18px 44px rgba(0,0,0,.22);
color:#fff;
}
.tdf-app[data-bg="afternoon"] .tdf-card,
.tdf-app[data-bg="evening"] .tdf-card,
.tdf-app[data-bg="afternoon"] .tdf-item,
.tdf-app[data-bg="evening"] .tdf-item,
.tdf-app[data-bg="afternoon"] .tdf-step,
.tdf-app[data-bg="evening"] .tdf-step,
.tdf-app[data-bg="afternoon"] .tdf-idea-card,
.tdf-app[data-bg="evening"] .tdf-idea-card,
.tdf-app[data-bg="afternoon"] .tdf-plan,
.tdf-app[data-bg="evening"] .tdf-plan,
.tdf-app[data-bg="afternoon"] .tdf-cal-day,
.tdf-app[data-bg="evening"] .tdf-cal-day,
.tdf-app[data-bg="afternoon"] .tdf-banner,
.tdf-app[data-bg="evening"] .tdf-banner{
background:var(--tdf-glass-bg) !important;
border:1px solid var(--tdf-glass-border) !important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
color:#fff !important;
}
.tdf-app[data-bg="afternoon"] h1,.tdf-app[data-bg="afternoon"] h2,
.tdf-app[data-bg="afternoon"] h3,.tdf-app[data-bg="afternoon"] h4,
.tdf-app[data-bg="evening"] h1,.tdf-app[data-bg="evening"] h2,
.tdf-app[data-bg="evening"] h3,.tdf-app[data-bg="evening"] h4,
.tdf-app[data-bg="afternoon"] .tdf-title,.tdf-app[data-bg="evening"] .tdf-title,
.tdf-app[data-bg="afternoon"] .tdf-eyebrow,.tdf-app[data-bg="evening"] .tdf-eyebrow,
.tdf-app[data-bg="afternoon"] .tdf-muted,.tdf-app[data-bg="evening"] .tdf-muted,
.tdf-app[data-bg="afternoon"] .meta,.tdf-app[data-bg="evening"] .meta{
color:rgba(255,255,255,.92) !important;
}
.tdf-app[data-bg="afternoon"] .tdf-sidebar,
.tdf-app[data-bg="evening"] .tdf-sidebar{
background:transparent !important;
backdrop-filter:saturate(115%) blur(10px);
-webkit-backdrop-filter:saturate(115%) blur(10px);
border-right:1px solid rgba(255,255,255,.18) !important;
}
.tdf-app[data-bg="afternoon"] .tdf-navbtn,
.tdf-app[data-bg="evening"] .tdf-navbtn,
.tdf-app[data-bg="afternoon"] .tdf-brandtext,
.tdf-app[data-bg="evening"] .tdf-brandtext,
.tdf-app[data-bg="afternoon"] .tdf-side-hi,
.tdf-app[data-bg="evening"] .tdf-side-hi{
color:#fff !important;
}
.tdf-app[data-bg="afternoon"] .tdf-navdot,
.tdf-app[data-bg="evening"] .tdf-navdot{
background:rgba(255,255,255,.70) !important;
}
.tdf-app[data-bg="afternoon"] .tdf-btn-primary,
.tdf-app[data-bg="evening"] .tdf-btn-primary{
background:rgba(255,255,255,.92) !important;
border-color:rgba(255,255,255,.92) !important;
color:#111 !important;
}
.tdf-app[data-bg="afternoon"] input,
.tdf-app[data-bg="afternoon"] textarea,
.tdf-app[data-bg="evening"] input,
.tdf-app[data-bg="evening"] textarea{
background:transparent !important;
border:1px solid rgba(255,255,255,.35) !important;
color:#fff !important;
}
.tdf-app[data-bg="afternoon"] input::placeholder,
.tdf-app[data-bg="afternoon"] textarea::placeholder,
.tdf-app[data-bg="evening"] input::placeholder,
.tdf-app[data-bg="evening"] textarea::placeholder{
color:rgba(255,255,255,.65) !important;
}
@media (max-width:860px){
.tdf-app[data-bg="afternoon"] .tdf-topbar,
.tdf-app[data-bg="evening"] .tdf-topbar{
background:rgba(12,16,18,.22) !important;
border-bottom:1px solid rgba(255,255,255,.18) !important;
color:#fff !important;
}
.tdf-app[data-bg="afternoon"] .tdf-drawer,
.tdf-app[data-bg="evening"] .tdf-drawer{
background:rgba(0,0,0,.38) !important;
border-right:1px solid rgba(255,255,255,.18) !important;
color:#fff !important;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.tdf-app[data-bg="afternoon"] .tdf-drawerbtn,
.tdf-app[data-bg="evening"] .tdf-drawerbtn{
background:rgba(255,255,255,.10) !important;
border:1px solid rgba(255,255,255,.22) !important;
color:#fff !important;
}
.tdf-app[data-bg="afternoon"] .tdf-topout,
.tdf-app[data-bg="evening"] .tdf-topout{
color:#111 !important;
background:rgba(255,255,255,.92) !important;
}
}
/* --- V5 NEW COMPONENTS — glass-compatible --- */
/* Today's Mission */
.tdf-mission-task{
display:flex; align-items:center; gap:12px;
border:1px solid var(--border); border-radius:14px; padding:12px 14px;
background:rgba(255,255,255,.88);
transition:background .2s;
}
.tdf-mission-task.done{ background:rgba(34,139,34,.15); border-color:rgba(34,139,34,.4); }
.tdf-mission-task-circle{
width:24px; height:24px; border-radius:50%;
border:2px solid var(--primary); flex-shrink:0; cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:14px; transition:all .2s; color:#fff;
}
.tdf-mission-task.done .tdf-mission-task-circle{
background:#22a722; color:#fff; border-color:#22a722;
}
.tdf-mission-task-text{ flex:1; font-size:14px; }
.tdf-mission-task.done .tdf-mission-task-text{ text-decoration:line-through; opacity:.6; color:#22a722 !important; }
.tdf-mission-section-label{
font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin:14px 0 4px;
}
.tdf-momentum-bar-wrap{
height:12px; background:rgba(0,0,0,.08); border-radius:99px; overflow:visible; padding:1px 0;
}
.tdf-momentum-bar{
height:100%; background:linear-gradient(90deg,#2196f3,#00bcd4,var(--primary));
border-radius:99px; transition:width .5s ease;
box-shadow: 0 0 10px 2px rgba(33,150,243,0.55), 0 0 20px 4px rgba(0,188,212,0.3);
animation: tdf-bar-glow 2s ease-in-out infinite alternate;
}
.tdf-mission-streak{
display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
padding:6px 12px; border-radius:99px;
background:rgba(212,168,94,.18); border:1px solid rgba(212,168,94,.35);
}
/* Glass overrides for Mission */
[data-bg] .tdf-mission-task{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.22) !important;
color:#fff !important;
}
[data-bg] .tdf-mission-task.done{
background:rgba(255,255,255,.05) !important;
}
[data-bg] .tdf-mission-task-text{ color:#fff !important; }
[data-bg] .tdf-mission-section-label{ color:rgba(255,255,255,.7) !important; }
[data-bg] .tdf-momentum-bar-wrap{ background:rgba(255,255,255,.15) !important; }
[data-bg] .tdf-mission-streak{
background:rgba(255,255,255,.12) !important;
border-color:rgba(255,255,255,.25) !important;
color:#fff !important;
}
[data-bg] .tdf-mission-task input{
background:transparent !important;
border-color:rgba(255,255,255,.35) !important;
color:#fff !important;
}
/* Nav glow animation */
@keyframes tdf-navglow{
0%,100%{ box-shadow:0 0 0 0 rgba(111,163,184,0); }
50%{ box-shadow:0 0 12px 4px rgba(111,163,184,.65); }
}
.tdf-navbtn-glow{
animation:tdf-navglow 2s ease-in-out infinite;
border-color:rgba(111,163,184,.6) !important;
background:rgba(111,163,184,.15) !important;
}
[data-bg] .tdf-navbtn-glow{
animation:tdf-navglow-glass 2s ease-in-out infinite;
border-color:rgba(255,255,255,.55) !important;
background:rgba(255,255,255,.15) !important;
}
@keyframes tdf-navglow-glass{
0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
50%{ box-shadow:0 0 14px 5px rgba(255,255,255,.35); }
}
/* My Rules */
.tdf-rules-grid{ display:grid; gap:12px; margin-top:14px; }
.tdf-rule-card{
border:1px solid var(--border); border-radius:16px; padding:16px;
background:rgba(255,255,255,.88);
}
.tdf-rule-num{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; margin-bottom:4px; }
.tdf-rule-text{ font-size:15px; font-weight:600; margin-bottom:10px; }
.tdf-rule-honor{
display:inline-flex; align-items:center; gap:8px; cursor:pointer;
font-size:13px; padding:6px 10px; border-radius:99px;
border:1.5px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
transition:all .2s; user-select:none;
}
.tdf-rule-honor.honored{
background:rgba(79,107,88,.15); border-color:rgba(79,107,88,.45); color:var(--secondary);
}
.tdf-rule-honor-dot{
width:14px; height:14px; border-radius:50%; border:2px solid currentColor;
display:inline-flex; align-items:center; justify-content:center; font-size:10px;
}
.tdf-rule-honor.honored .tdf-rule-honor-dot::after{ content:'✓'; }
.tdf-rule-implement-btn{
background:var(--primary); color:#fff; border:none;
padding:10px 18px; border-radius:14px; cursor:pointer; font-size:14px; font-weight:600; margin-top:10px;
}
[data-bg] .tdf-rule-card{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.22) !important;
}
[data-bg] .tdf-rule-num,[data-bg] .tdf-rule-text{ color:#fff !important; }
[data-bg] .tdf-rule-honor{
background:rgba(255,255,255,.10) !important;
border-color:rgba(255,255,255,.3) !important;
color:#fff !important;
}
[data-bg] .tdf-rule-honor.honored{
background:rgba(255,255,255,.2) !important;
border-color:rgba(255,255,255,.5) !important;
}
/* Future Self Letter */
.tdf-letter-envelope{ font-size:64px; text-align:center; margin:16px 0 8px; }
@keyframes tdf-envelope-send{
0%{ opacity:1; transform:translateX(0) scale(1); }
40%{ transform:scale(.9); }
100%{ opacity:0; transform:translateX(120px) scale(.7); }
}
.tdf-letter-envelope.sending{ animation:tdf-envelope-send .8s ease forwards; }
.tdf-letter-options{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.tdf-letter-opt{
flex:1; min-width:140px; border:2px solid var(--border);
border-radius:16px; padding:18px 14px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); cursor:pointer;
text-align:center; font-size:14px; font-weight:600; transition:all .2s;
white-space:pre-line;
}
.tdf-letter-opt:hover{ border-color:var(--primary); background:rgba(111,163,184,.08); }
.tdf-letter-opt.selected{ border-color:var(--primary); background:rgba(111,163,184,.15); }
.tdf-letter-tagline{ text-align:center; font-size:14px; line-height:1.6; opacity:.8; margin-bottom:4px; }
[data-bg] .tdf-letter-opt{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.3) !important;
color:#fff !important;
}
[data-bg] .tdf-letter-opt:hover{
background:rgba(255,255,255,.16) !important;
border-color:rgba(255,255,255,.55) !important;
}
/* Focus FAB */
.tdf-focus-fab{
position:fixed; bottom:24px; right:24px;
width:64px; height:64px; border-radius:50%;
border:2px solid rgba(220,60,60,.6);
background:rgba(255,255,255,.92);
backdrop-filter:blur(6px); cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-size:10px; font-weight:700; text-align:center; line-height:1.3;
color:#c62828; box-shadow:0 4px 16px rgba(0,0,0,.18);
z-index:9000; transition:all .3s ease; white-space:pre-line;
padding:4px;
}
.tdf-focus-fab.active{
border-color:rgba(46,125,50,.7); color:#1b5e20;
background:rgba(232,245,233,.95);
}
@keyframes tdf-focuspulse{
0%,100%{ box-shadow:0 4px 16px rgba(0,0,0,.18); }
50%{ box-shadow:0 4px 24px rgba(46,125,50,.45); }
}
.tdf-focus-fab.active{ animation:tdf-focuspulse 2s ease-in-out infinite; }
/* Quote card */
.tdf-quote-card{
position:relative; border-radius:18px; overflow:hidden;
min-height:280px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#1a237e,#283593); margin:14px 0;
}
.tdf-quote-card-bg{
position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55;
}
.tdf-quote-card-text{
position:relative; z-index:1; color:#fff; font-size:18px; font-weight:700;
line-height:1.5; text-align:center; padding:24px;
text-shadow:0 2px 8px rgba(0,0,0,.5); max-width:340px;
}
.tdf-quote-card-logo{
position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
z-index:1; font-size:11px; color:rgba(255,255,255,.7); letter-spacing:.1em;
}
.tdf-share-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.tdf-share-btn{
flex:1; min-width:100px; padding:10px 10px;
border:1px solid rgba(255,255,255,.20); border-radius:12px; background:rgba(255,255,255,.10);
font-size:12px; font-weight:600; cursor:pointer; text-align:center; transition:all .2s;
}
.tdf-share-btn:hover{ background:rgba(111,163,184,.12); }
[data-bg] .tdf-share-btn{
background:rgba(255,255,255,.10) !important;
border-color:rgba(255,255,255,.28) !important;
color:#fff !important;
}
/* Push notification banner */
.tdf-push-banner{
background:rgba(111,163,184,.15); border:1px solid rgba(111,163,184,.35);
border-radius:14px; padding:12px 14px; margin-bottom:12px;
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.tdf-push-banner-text{ flex:1; font-size:13px; line-height:1.45; }
[data-bg] .tdf-push-banner{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.22) !important;
color:#fff !important;
}
/* First-time popup overlay */
.tdf-firsttime-overlay{
position:fixed; inset:0; z-index:10000;
background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center; padding:20px;
}
.tdf-firsttime-card{
width:100%; max-width:540px;
background:rgba(12,16,18,.82);
border:1px solid rgba(255,255,255,.22);
border-radius:22px; padding:28px 24px;
box-shadow:0 20px 60px rgba(0,0,0,.45);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
max-height:88vh; overflow-y:auto;
color:#fff;
}
.tdf-firsttime-title{ font-size:20px; font-weight:800; margin-bottom:12px; color:#fff; }
.tdf-firsttime-body{ font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.88); }
.tdf-firsttime-body p{ margin:0 0 12px; }
.tdf-firsttime-body b{ color:#fff; }
.tdf-firsttime-close{
margin-top:18px; width:100%; padding:14px;
background:rgba(255,255,255,.92); color:#111; border:none;
border-radius:14px; font-size:15px; font-weight:700; cursor:pointer;
}
.tdf-firsttime-close:hover{ background:#fff; }
/* Info circle button */
.tdf-info-circle{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%;
border:1.5px solid var(--border); background:rgba(255,255,255,.8);
font-size:12px; font-weight:800; cursor:pointer; color:var(--ink);
flex-shrink:0; font-style:italic;
}
[data-bg] .tdf-info-circle{
border-color:rgba(255,255,255,.35) !important;
background:rgba(255,255,255,.12) !important;
color:#fff !important;
}
/* Welcome quiz */
.tdf-quiz-progress{
height:6px; background:rgba(0,0,0,.08); border-radius:99px; margin-bottom:16px; overflow:hidden;
}
.tdf-quiz-progress-fill{
height:100%; background:var(--primary); border-radius:99px; transition:width .3s;
}
.tdf-quiz-opt{
border:2px solid var(--border); border-radius:14px; padding:12px 16px;
background:#fff; cursor:pointer; font-size:14px; text-align:left;
transition:all .2s; width:100%; margin-bottom:8px;
}
.tdf-quiz-opt:hover{ border-color:var(--primary); background:rgba(111,163,184,.08); }
.tdf-quiz-opt.selected{ border-color:var(--primary); background:rgba(111,163,184,.18); font-weight:600; }
/* Admin settings grid */
.tdf-admin-settingsgrid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
@media (max-width:700px){ .tdf-admin-settingsgrid{ grid-template-columns:1fr; } }
.tdf-admin-field{ display:flex; flex-direction:column; gap:6px; }
.tdf-admin-fieldlabel{ font-size:12px; font-weight:700; opacity:.85; }
.tdf-input{
border:1px solid rgba(255,255,255,.16); border-radius:12px;
background:rgba(255,255,255,.08); color:#fff; padding:10px 12px;
font-size:13px; outline:none; width:100%;
}
.tdf-input:focus{ border-color:rgba(111,163,184,.55); box-shadow:0 0 0 3px rgba(111,163,184,.15); }
.tdf-admin-chartwrap{ position:relative; height:200px; }
/* Weekly summary cards for focus+rules */
[data-bg] .tdf-weekly-summary-item,
.tdf-weekly-summary-item{
display:flex; justify-content:space-between; align-items:center;
border:1px solid var(--border); border-radius:12px; padding:12px 14px;
background:rgba(255,255,255,.88); margin-bottom:8px;
}
[data-bg] .tdf-weekly-summary-item{
background:rgba(255,255,255,.08) !important;
border-color:rgba(255,255,255,.22) !important;
color:#fff !important;
}
/* ============================================================
TRUE DAILY FOCUS — TIME-BASED BACKGROUND FONT/COLOR FIXES
Ensures text, buttons, labels are visible on all backgrounds
(evening/night = dark; morning/afternoon = lighter)
============================================================ */
/* ---- EVENING + NIGHT: dark backgrounds → white text ---- */
.tdf-app[data-bg="evening"] .tdf-card,
.tdf-app[data-bg="night"] .tdf-card {
background: rgba(20,10,40,0.72) !important;
color: #fff !important;
}
.tdf-app[data-bg="evening"] .tdf-card *,
.tdf-app[data-bg="night"] .tdf-card * {
color: #fff !important;
}
/* Buttons inside cards always use black text */
.tdf-app[data-bg="evening"] .tdf-card .tdf-btn,
.tdf-app[data-bg="night"] .tdf-card .tdf-btn,
.tdf-app[data-bg="evening"] .tdf-card .tdf-btn *,
.tdf-app[data-bg="night"] .tdf-card .tdf-btn * {
color: #111 !important;
}
/* Keep primary buttons readable */
.tdf-app[data-bg="evening"] .tdf-btn-primary,
.tdf-app[data-bg="night"] .tdf-btn-primary {
background: rgba(255,255,255,0.95) !important;
color: #111 !important;
}
/* Regular buttons on dark bg */
.tdf-app[data-bg="evening"] .tdf-btn,
.tdf-app[data-bg="night"] .tdf-btn {
background: rgba(255,255,255,0.88) !important;
border-color: rgba(255,255,255,0.9) !important;
color: #111 !important;
}
.tdf-app[data-bg="evening"] .tdf-btn-primary,
.tdf-app[data-bg="night"] .tdf-btn-primary {
background: rgba(255,255,255,0.95) !important;
border-color: rgba(255,255,255,0.95) !important;
color: #111 !important;
}
/* Tags on dark bg */
.tdf-app[data-bg="evening"] .tdf-tag,
.tdf-app[data-bg="night"] .tdf-tag {
background: rgba(255,255,255,0.18) !important;
color: #fff !important;
}
/* Items on dark bg */
.tdf-app[data-bg="evening"] .tdf-item,
.tdf-app[data-bg="night"] .tdf-item {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.18) !important;
color: #fff !important;
}
/* Inputs / textareas on dark bg */
.tdf-app[data-bg="evening"] input,
.tdf-app[data-bg="evening"] textarea,
.tdf-app[data-bg="night"] input,
.tdf-app[data-bg="night"] textarea {
background: rgba(255,255,255,0.10) !important;
border-color: rgba(255,255,255,0.28) !important;
color: #fff !important;
}
.tdf-app[data-bg="evening"] input::placeholder,
.tdf-app[data-bg="evening"] textarea::placeholder,
.tdf-app[data-bg="night"] input::placeholder,
.tdf-app[data-bg="night"] textarea::placeholder {
color: rgba(255,255,255,0.55) !important;
}
/* Select dropdowns on dark bg */
.tdf-app[data-bg="evening"] select,
.tdf-app[data-bg="night"] select {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.28) !important;
color: #fff !important;
}
/* Labels on dark bg */
.tdf-app[data-bg="evening"] label,
.tdf-app[data-bg="night"] label,
.tdf-app[data-bg="evening"] .tdf-label,
.tdf-app[data-bg="night"] .tdf-label,
.tdf-app[data-bg="evening"] .tdf-section-title,
.tdf-app[data-bg="night"] .tdf-section-title,
.tdf-app[data-bg="evening"] .tdf-eyebrow,
.tdf-app[data-bg="night"] .tdf-eyebrow,
.tdf-app[data-bg="evening"] .tdf-muted,
.tdf-app[data-bg="night"] .tdf-muted {
color: rgba(255,255,255,0.85) !important;
}
/* Prompts on dark bg */
.tdf-app[data-bg="evening"] .tdf-prompt,
.tdf-app[data-bg="night"] .tdf-prompt {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.18) !important;
}
.tdf-app[data-bg="evening"] .tdf-prompt h3,
.tdf-app[data-bg="night"] .tdf-prompt h3 {
color: #fff !important;
}
/* Pills on dark bg */
.tdf-app[data-bg="evening"] .tdf-pill,
.tdf-app[data-bg="night"] .tdf-pill {
background: rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.22) !important;
color: #fff !important;
}
/* ---- MORNING + AFTERNOON: lighter backgrounds → dark text ---- */
.tdf-app[data-bg="morning"] .tdf-card,
.tdf-app[data-bg="afternoon"] .tdf-card {
background: rgba(255,255,255,0.82) !important;
color: #1a1a1a !important;
}
.tdf-app[data-bg="morning"] .tdf-card *,
.tdf-app[data-bg="afternoon"] .tdf-card * {
color: var(--ink) !important;
}
.tdf-app[data-bg="morning"] .tdf-btn-primary *,
.tdf-app[data-bg="afternoon"] .tdf-btn-primary * {
color: #fff !important;
}
.tdf-app[data-bg="morning"] .tdf-btn-primary,
.tdf-app[data-bg="afternoon"] .tdf-btn-primary {
color: #fff !important;
}
.tdf-app[data-bg="morning"] input,
.tdf-app[data-bg="morning"] textarea,
.tdf-app[data-bg="afternoon"] input,
.tdf-app[data-bg="afternoon"] textarea {
background: rgba(255,255,255,0.9) !important;
color: var(--ink) !important;
border-color: rgba(0,0,0,0.15) !important;
}
/* ---- "Signal found" button: always black text ---- */
.tdf-tag { color: var(--ink) !important; }
.tdf-app[data-bg="evening"] .tdf-tag,
.tdf-app[data-bg="night"] .tdf-tag {
color: #fff !important;
}
/* ---- Idea Bank buttons: black text ---- */
.tdf-idea-actions .tdf-btn {
color: #111 !important;
}
.tdf-app[data-bg="evening"] .tdf-idea-actions .tdf-btn,
.tdf-app[data-bg="night"] .tdf-idea-actions .tdf-btn {
color: #fff !important;
}
/* ---- Close Your Day: transparent text boxes ---- */
.tdf-app[data-bg] .tdf-prompt textarea,
.tdf-app[data-bg] .tdf-prompt {
background: transparent !important;
}
.tdf-app[data-bg="evening"] .tdf-prompt textarea,
.tdf-app[data-bg="night"] .tdf-prompt textarea {
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.25) !important;
}
.tdf-app[data-bg="morning"] .tdf-prompt textarea,
.tdf-app[data-bg="afternoon"] .tdf-prompt textarea {
background: rgba(255,255,255,0.65) !important;
color: var(--ink) !important;
}
/* ---- Add Idea form labels (Step 3 / Yes-No step): white on dark ---- */
.tdf-app[data-bg="evening"] .tdf-field label,
.tdf-app[data-bg="night"] .tdf-field label {
color: rgba(255,255,255,0.88) !important;
}
/* ---- Identity Design textareas: fix overflow clipping ---- */
.tdf-field textarea,
#tdf-app-root .tdf-field textarea {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.tdf-ns-left, .tdf-ns-right {
min-width: 0 !important;
overflow: hidden !important;
}
/* ---- Trial letter popup: transparent inner box ---- */
.tdf-trial-letter-wrap {
background: transparent !important;
}
.tdf-modal .tdf-trial-letter-wrap * {
color: var(--ink);
}
/* ---- Quote card logo: show img instead of text ---- */
.tdf-quote-card-logo img {
max-height: 36px;
max-width: 160px;
object-fit: contain;
filter: brightness(0) invert(1);
display: block;
margin: 0 auto;
}
/* ---- My Rules: Change Rule button styling ---- */
.tdf-rule-card .tdf-btn-ghost {
font-size: 12px !important;
padding: 6px 10px !important;
}
/* ---- Rules Yes/No honor row ---- */
.tdf-rules-counter {
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
/* ---- Write Letter: force white font on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-letter-envelope,
.tdf-app[data-bg="night"] .tdf-letter-envelope,
.tdf-app[data-bg="evening"] .tdf-letter-tagline,
.tdf-app[data-bg="night"] .tdf-letter-tagline {
color: #fff !important;
}
/* ---- Signals page: "Find the signal" button always visible ---- */
.tdf-app[data-bg="evening"] .tdf-btn-primary,
.tdf-app[data-bg="night"] .tdf-btn-primary {
color: #fff !important;
}
/* ---- Mission task circles on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-mission-task-circle,
.tdf-app[data-bg="night"] .tdf-mission-task-circle {
border-color: rgba(255,255,255,0.6) !important;
color: #fff !important;
}
.tdf-app[data-bg="evening"] .tdf-mission-task-text,
.tdf-app[data-bg="night"] .tdf-mission-task-text {
color: #fff !important;
}
.tdf-app[data-bg="evening"] .tdf-mission-section-label,
.tdf-app[data-bg="night"] .tdf-mission-section-label {
color: rgba(255,255,255,0.8) !important;
}
.tdf-app[data-bg="evening"] .tdf-mission-streak,
.tdf-app[data-bg="night"] .tdf-mission-streak {
color: #fff !important;
}
/* ---- Momentum bar on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-momentum-bar-wrap,
.tdf-app[data-bg="night"] .tdf-momentum-bar-wrap {
background: rgba(255,255,255,0.2) !important;
}
/* ---- Share buttons on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-share-btn,
.tdf-app[data-bg="night"] .tdf-share-btn {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.3) !important;
}
/* ---- Info circle button on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-info-circle,
.tdf-app[data-bg="night"] .tdf-info-circle {
background: rgba(255,255,255,0.2) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.3) !important;
}
/* ---- Nav / sidebar on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-sidebar-link,
.tdf-app[data-bg="night"] .tdf-sidebar-link,
.tdf-app[data-bg="evening"] .tdf-nav-link,
.tdf-app[data-bg="night"] .tdf-nav-link {
color: rgba(255,255,255,0.9) !important;
}
.tdf-app[data-bg="evening"] .tdf-sidebar,
.tdf-app[data-bg="night"] .tdf-sidebar {
background: rgba(10,5,30,0.75) !important;
}
/* ---- Idea Bank specific: buttons black text on light, white on dark ---- */
.tdf-app[data-bg="evening"] .tdf-btn,
.tdf-app[data-bg="night"] .tdf-btn {
color: #111 !important;
}
.tdf-app[data-bg="morning"] .tdf-btn,
.tdf-app[data-bg="afternoon"] .tdf-btn {
color: #111 !important;
}
.tdf-app[data-bg="morning"] .tdf-btn-primary,
.tdf-app[data-bg="afternoon"] .tdf-btn-primary {
color: #111 !important;
}
/* ---- Rules card on dark bg ---- */
.tdf-app[data-bg="evening"] .tdf-rule-card,
.tdf-app[data-bg="night"] .tdf-rule-card {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.18) !important;
color: #fff !important;
}
.tdf-app[data-bg="evening"] .tdf-rule-text,
.tdf-app[data-bg="night"] .tdf-rule-text {
color: #fff !important;
}
.tdf-app[data-bg="evening"] .tdf-rule-num,
.tdf-app[data-bg="night"] .tdf-rule-num {
color: rgba(255,255,255,0.65) !important;
}
.tdf-app[data-bg="evening"] .tdf-rule-honor,
.tdf-app[data-bg="night"] .tdf-rule-honor {
color: rgba(255,255,255,0.8) !important;
}
/* ============================
GLOBAL GLASS OVERRIDE
Replaces all white/opaque boxes with glass morphism
across ALL sections (Archive, Subscription, Rules, etc.)
============================ */
/* When a background image is active — full glass treatment */
.tdf-app[data-bg] .tdf-card,
.tdf-app[data-bg] .tdf-item,
.tdf-app[data-bg] .tdf-plan,
.tdf-app[data-bg] .tdf-rule-card,
.tdf-app[data-bg] .tdf-prompt,
.tdf-app[data-bg] .tdf-step,
.tdf-app[data-bg] .tdf-tab,
.tdf-app[data-bg] .tdf-pill,
.tdf-app[data-bg] .tdf-drawerbtn,
.tdf-app[data-bg] .tdf-lockedbox,
.tdf-app[data-bg] .tdf-firsttime-card,
.tdf-app[data-bg] .tdf-quote-card,
.tdf-app[data-bg] .tdf-pattern-card,
.tdf-app[data-bg] .tdf-idea-card,
.tdf-app[data-bg] .tdf-signal-card,
.tdf-app[data-bg] .tdf-weekly-card,
.tdf-app[data-bg] .tdf-cal-day {
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.20) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
/* Inputs and textareas inside bg sections */
.tdf-app[data-bg] input:not([type=checkbox]):not([type=radio]),
.tdf-app[data-bg] textarea,
.tdf-app[data-bg] .tdf-in,
.tdf-app[data-bg] .tdf-prompt textarea,
.tdf-app[data-bg] .tdf-field input,
.tdf-app[data-bg] .tdf-field textarea {
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.22) !important;
color: #fff !important;
}
/* Default (non-bg) buttons — subtle glass */
.tdf-btn:not(.tdf-btn-primary):not(.tdf-btn-danger) {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.24);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* bg sections: non-primary buttons also glass */
.tdf-app[data-bg] .tdf-btn:not(.tdf-btn-primary):not(.tdf-btn-danger) {
background: rgba(255,255,255,.14) !important;
border-color: rgba(255,255,255,.24) !important;
color: #fff !important;
}
/* Text colour on glass — ensure visibility */
.tdf-app[data-bg] .tdf-card,
.tdf-app[data-bg] .tdf-item,
.tdf-app[data-bg] .tdf-plan,
.tdf-app[data-bg] .tdf-rule-card {
color: #fff;
}
/* ============================
PREMIUM GLASS — ALL CARDS EVERYWHERE
Match subscription page beauty across entire app
============================ */
/* Base glass for every card/box — always on */
.tdf-card,
.tdf-item,
.tdf-plan,
.tdf-rule-card,
.tdf-prompt,
.tdf-step,
.tdf-tab,
.tdf-pill,
.tdf-drawerbtn,
.tdf-lockedbox,
.tdf-firsttime-card,
.tdf-pattern-card,
.tdf-idea-card,
.tdf-signal-card,
.tdf-weekly-card,
.tdf-cal-day,
.tdf-mission-task,
.tdf-letter-opt,
.tdf-enc-card,
.tdf-ns-card,
.tdf-quote-card-inner,
.tdf-auth-card {
background: rgba(255,255,255,.13) !important;
border: 1px solid rgba(255,255,255,.22) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
box-shadow: 0 8px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
/* Recommended plan — gold glow */
.tdf-plan-reco {
outline: 2px solid rgba(212,168,94,.70) !important;
box-shadow: 0 8px 32px rgba(212,168,94,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
/* All inputs/textareas — glass */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select,
.tdf-in,
.tdf-prompt textarea,
.tdf-field input,
.tdf-field textarea,
.tdf-rule-input {
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.20) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
color: inherit !important;
}
/* Default buttons — glass */
.tdf-btn:not(.tdf-btn-primary):not(.tdf-btn-danger):not(.tdf-btn-ghost) {
background: rgba(255,255,255,.15) !important;
border: 1px solid rgba(255,255,255,.25) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
.tdf-btn-ghost {
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
/* Completed mission task */
.tdf-mission-task.done {
background: rgba(111,163,184,.18) !important;
border-color: rgba(111,163,184,.35) !important;
}
/* Calendar day hover */
.tdf-cal-day:hover {
background: rgba(255,255,255,.20) !important;
border-color: rgba(255,255,255,.35) !important;
}
/* Archive, subscription status items */
.tdf-list .tdf-item {
background: rgba(255,255,255,.11) !important;
border: 1px solid rgba(255,255,255,.20) !important;
}
/* Momentum bar track */
.tdf-momentum-bar-wrap {
background: rgba(255,255,255,.15) !important;
}
/* ============================
GLOBAL TEXT & BUTTON CONTRAST FIX
All text → white | Filled button text → black
============================ */
/* Override --ink to white everywhere */
:root {
--ink: #ffffff;
}
/* Every text element white */
.tdf-app,
.tdf-app *:not(.tdf-btn-primary):not(.tdf-btn-primary *):not(.tdf-btn-warm):not(.tdf-btn-warm *):not(input):not(textarea):not(select) {
color: #fff;
}
/* Specific text elements that had --ink */
.tdf-title, .tdf-eyebrow, .tdf-muted, .tdf-meta, .meta,
.tdf-plan-title, .tdf-plan-price, .tdf-plan-list, .tdf-plan-sub,
.tdf-rule-num, .tdf-rule-text, .tdf-mission-task-text,
.tdf-mission-section-label, .tdf-mission-streak,
.tdf-item h4, .tdf-item .meta, .tdf-item *,
.tdf-card *, .tdf-plan *,
.tdf-firsttime-title, .tdf-firsttime-body,
.tdf-auth-title, .tdf-auth-sub,
.tdf-link, .tdf-tab, .tdf-pill,
.tdf-checkout label,
.tdf-letter-tagline, .tdf-letter-arrive,
.tdf-rules-counter span,
h1, h2, h3, h4, h5, h6, p, span, div, label, li {
color: #fff !important;
}
/* Input/textarea text white */
input:not([type=checkbox]):not([type=radio]),
textarea,
select,
.tdf-in,
.tdf-field input,
.tdf-field textarea,
.tdf-prompt textarea {
color: #fff !important;
}
/* Input placeholder white at reduced opacity */
input::placeholder,
textarea::placeholder {
color: rgba(255,255,255,.5) !important;
}
/* PRIMARY filled buttons → black text for contrast */
.tdf-btn-primary,
.tdf-btn-primary *,
.tdf-btn-warm,
.tdf-btn-warm * {
color: #000 !important;
}
/* Ghost/default buttons → white text */
.tdf-btn:not(.tdf-btn-primary):not(.tdf-btn-warm),
.tdf-btn:not(.tdf-btn-primary):not(.tdf-btn-warm) * {
color: #fff !important;
}
/* Rule implement button → black text (it has primary bg) */
.tdf-rule-implement-btn,
.tdf-rule-implement-btn * {
color: #000 !important;
}
/* Nav items white */
.tdf-nav-item, .tdf-nav-item *,
.tdf-topbrandtext, .tdf-brandtext {
color: #fff !important;
}
/* Muted text — white at lower opacity */
.tdf-muted, .tdf-muted *,
.meta, .meta * {
color: rgba(255,255,255,.72) !important;
}
/* Eyebrow text */
.tdf-eyebrow {
color: rgba(255,255,255,.60) !important;
}
/* Keep auth card text readable */
.tdf-auth-card .tdf-auth-title,
.tdf-auth-card .tdf-auth-sub,
.tdf-auth-card label {
color: #fff !important;
}
/* Select dropdown options need dark for readability in OS picker */
select option {
color: #000 !important;
background: #fff !important;
}
/* ===== v1.4.6 targeted visibility fixes ===== */
.tdf-toast,
.tdf-toast *,
.tdf-toast-msg,
.tdf-toast-x{
color:#000 !important;
}
.tdf-auth-card,
.tdf-auth-card *,
.tdf-auth-card .tdf-auth-title,
.tdf-auth-card .tdf-auth-sub,
.tdf-auth-card label,
.tdf-auth-card .tdf-check span,
.tdf-auth-card .tdf-link{
color:#000 !important;
}
.tdf-auth-card input,
.tdf-auth-card textarea,
.tdf-auth-card select{
color:#000 !important;
}
.tdf-auth-card input::placeholder,
.tdf-auth-card textarea::placeholder{
color:rgba(0,0,0,.45) !important;
}
.tdf-auth-card .tdf-btn-primary,
.tdf-auth-card .tdf-btn-primary *{
color:#fff !important;
}
.tdf-share-btn,
.tdf-share-btn *,
.tdf-app[data-bg] .tdf-share-btn,
.tdf-app[data-bg] .tdf-share-btn *{
color:#111 !important;
}
.tdf-quote-card{
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
.tdf-quote-card-text{
max-width:720px !important;
width:100%;
margin:0 auto;
text-align:center !important;
}
.tdf-modal .tdf-actions .tdf-btn,
.tdf-modal .tdf-actions .tdf-btn *{
color:#fff !important;
}
.tdf-card .tdf-btn[title="Complete Start Your Day first"],
.tdf-card .tdf-btn[title="Complete Start Your Day first"] *{
color:#fff !important;
}
.tdf-btn-lockedlabel,
.tdf-btn-lockedlabel *{
color:#000 !important;
}
/* Honest fix: Today's Mission + Rules visibility */
.tdf-mission-intro{
margin: 10px 0 16px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tdf-mission-intro-title{
font-size: 14px;
font-weight: 800;
margin-bottom: 6px;
}
.tdf-mission-intro-text{
font-size: 13px;
line-height: 1.6;
opacity: .85;
}
.tdf-mission-meter-card{
margin: 10px 0 16px;
padding: 16px;
border-radius: 18px;
border: 1px solid rgba(255,255,255,.20);
background: rgba(255,255,255,.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.tdf-mission-meter-top{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:12px;
margin-bottom:10px;
}
.tdf-mission-meter-label{
font-size:15px;
font-weight:800;
}
.tdf-mission-meter-sub{
font-size:12px;
opacity:.8;
margin-top:2px;
}
.tdf-mission-meter-pct{
font-size:26px;
font-weight:900;
line-height:1;
}
.tdf-momentum-bar-wrap-lg{
width:100%;
height:14px;
border-radius:999px;
overflow:visible;
padding:2px 0;
}
.tdf-mission-task-circle{
appearance:none;
-webkit-appearance:none;
}
[data-bg] .tdf-mission-task-circle{
border-color:rgba(255,255,255,0.7) !important;
color:transparent;
}
[data-bg] .tdf-mission-task-circle.is-done,
[data-bg] .tdf-mission-task.done .tdf-mission-task-circle{
background:var(--primary) !important;
border-color:var(--primary) !important;
color:#fff !important;
}
.tdf-rule-btn-row{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:12px;
}
.tdf-rule-change-btn{
border:none;
background:rgba(255,255,255,.16);
color:inherit;
border:1px solid rgba(255,255,255,.24);
padding:10px 16px;
border-radius:14px;
cursor:pointer;
font-size:14px;
font-weight:700;
}
.tdf-rule-change-btn:hover{ background:rgba(255,255,255,.22); }
[data-bg] .tdf-mission-intro,
[data-bg] .tdf-mission-meter-card,
[data-bg] .tdf-rule-change-btn{
color:#fff !important;
}
[data-bg] .tdf-mission-meter-card,
[data-bg] .tdf-mission-intro{
background:rgba(255,255,255,.10) !important;
border-color:rgba(255,255,255,.24) !important;
}
[data-bg] .tdf-rule-change-btn{
background:rgba(255,255,255,.12) !important;
border-color:rgba(255,255,255,.3) !important;
}
@media (max-width:640px){
.tdf-mission-meter-top{ align-items:flex-start; flex-direction:column; }
.tdf-mission-meter-pct{ font-size:22px; }
.tdf-rule-btn-row > *{ flex:1 1 100%; }
}
/* ============================================================
GLOBAL BUTTON TEXT COLOR OVERRIDE — ALL BLACK
Applied last so it wins over all previous rules
============================================================ */
/* All regular buttons: black text on all backgrounds */
.tdf-app .tdf-btn,
.tdf-app .tdf-btn * {
color: #111 !important;
}
/* Primary buttons: black text */
.tdf-app .tdf-btn-primary,
.tdf-app .tdf-btn-primary * {
color: #111 !important;
}
/* Ghost buttons: black text */
.tdf-app .tdf-btn-ghost,
.tdf-app .tdf-btn-ghost * {
color: #111 !important;
}
/* Share buttons: black text */
.tdf-app .tdf-share-btn,
.tdf-app .tdf-share-btn *,
.tdf-app[data-bg] .tdf-share-btn,
.tdf-app[data-bg] .tdf-share-btn * {
color: #111 !important;
}
/* Share buttons background: white so text is readable */
.tdf-app[data-bg] .tdf-share-btn {
background: rgba(255,255,255,0.88) !important;
border-color: rgba(255,255,255,0.9) !important;
}
/* Warm button keeps its dark text */
.tdf-app .tdf-btn-warm,
.tdf-app .tdf-btn-warm * {
color: #111 !important;
}
/* Focus FAB: keep its own color scheme */
.tdf-app .tdf-focus-fab {
color: #c62828 !important;
}
.tdf-app .tdf-focus-fab.active {
color: #1b5e20 !important;
}
/* Nav buttons in sidebar keep white text on dark bg */
.tdf-app[data-bg="evening"] .tdf-navbtn,
.tdf-app[data-bg="night"] .tdf-navbtn,
.tdf-app[data-bg="morning"] .tdf-navbtn {
color: #fff !important;
}
/* Drawer nav buttons */
.tdf-app .tdf-drawerbtn {
color: #111 !important;
}