.tf-icon { display:inline-block; width:1.15em; height:1.15em; flex:none; vertical-align:-.15em; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; }
.nav-icon .tf-icon { width:20px; height:20px; }
.metric-symbol .tf-icon { width:17px; height:17px; }
.rhythm-icon .tf-icon { width:25px; height:25px; }
.close-button .tf-icon,.help-widget-close .tf-icon { width:18px; height:18px; }
.brand-mark { flex:none; }
.brand-mark i { flex:1; }
.brand-mark i:nth-child(1) { height:47%; }
.brand-mark i:nth-child(2) { height:76%; }
.brand-mark i:nth-child(3) { height:100%; }
.beta-mark .brand-mark { width:34px; height:34px; padding:6px; gap:4px; border-radius:10px; }
.beta-mark { font-family:'Manrope',sans-serif;letter-spacing:-.05em; }
.beta-gate { background:var(--bg);color:var(--ink); }
.beta-gate-card { background:var(--surface);border-color:var(--line); }
.beta-mark,.beta-mark span { color:var(--ink); }
.beta-mark .brand-dot { color:var(--accent,var(--green)); }
.beta-gate input { background:var(--field,var(--surface));color:var(--ink);border-color:var(--line); }
.beta-gate input:focus-visible { outline-color:var(--accent,var(--green)); }
.beta-gate .text-link { color:var(--accent-ink,var(--green-dark)); }
.beta-gate-foot { color:var(--muted); }
.beta-choices button { background:var(--surface);color:var(--ink);border-color:var(--line); }
.beta-choices button:hover,.beta-choices button:focus-visible { background:var(--accent-soft,var(--green-pale));outline-color:var(--accent,var(--green)); }
.beta-gate .beta-error { background:var(--red-pale);color:var(--red); }
.password-field { position:relative;display:block; }
.beta-gate .password-field input { padding-right:48px; }
.password-toggle { position:absolute; right:5px; top:3px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--accent-ink,var(--green-dark)); cursor:pointer; }
.password-toggle .tf-icon { width:20px; height:20px; }
.password-toggle:focus-visible { outline:2px solid var(--accent,var(--green)); }
.site-loader[hidden] { display:none !important; }
.site-loader { --loader-sage:#5e9270;--loader-ocean:#568d9d;--loader-lavender:#9182b8;--loader-terracotta:#b87e65;--loader-sage-soft:#e6f1e8;--loader-ocean-soft:#e2f0f4;--loader-lavender-soft:#eee9f7;--loader-terracotta-soft:#f5e7df;position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; padding:24px; background:var(--bg,#f5f6f3); color:var(--ink,#202522); }
body.dark .site-loader { --loader-sage:#91bea0;--loader-ocean:#91c4d0;--loader-lavender:#b7a9dc;--loader-terracotta:#d8a187;--loader-sage-soft:#2b4433;--loader-ocean-soft:#29424d;--loader-lavender-soft:#3d3652;--loader-terracotta-soft:#4a3228; }
.site-loader-mark { display:flex; align-items:flex-end; gap:10px; width:100px; height:100px; padding:21px; border-radius:29px; background:#e7f1ea; animation:loader-surface 6s linear infinite; }
.site-loader-mark i { display:block; width:13px; height:58px; border-radius:7px; background:#6d9b83; transform-origin:bottom; animation:loader-bars 1.2s ease-in-out infinite,loader-colours 6s linear infinite; }
.site-loader-mark i:nth-child(2) { animation-delay:.16s,0s; }
.site-loader-mark i:nth-child(3) { animation-delay:.32s,0s; }
.site-loader-wordmark { font:800 24px 'Manrope',sans-serif; letter-spacing:-1.2px; }
.site-loader p { margin:0; max-width:340px; text-align:center; color:var(--muted,#858c86); font-size:14px; line-height:1.5; }
@keyframes loader-bars { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
@keyframes loader-colours { 0%,100% { background:var(--loader-sage); } 25% { background:var(--loader-ocean); } 50% { background:var(--loader-lavender); } 75% { background:var(--loader-terracotta); } }
@keyframes loader-surface { 0%,100% { background:var(--loader-sage-soft); } 25% { background:var(--loader-ocean-soft); } 50% { background:var(--loader-lavender-soft); } 75% { background:var(--loader-terracotta-soft); } }
.image-warning { margin:8px 0 0; padding:10px 12px; border:1px solid var(--red,#c06c64); border-radius:10px; color:var(--ink); background:var(--soft,#f8eae8); font-size:13px; line-height:1.5; }
.image-warning[hidden],.journal-storage-status[hidden],.image-capacity[hidden] { display:none !important; }
.image-capacity,.journal-storage-status { display:block; margin-top:8px; font-size:12px; line-height:1.5; color:var(--muted); }
.journal-storage-status[data-state="warning"],.image-capacity[data-state="warning"] { color:var(--red,#c06c64); font-weight:700; }
.toast { z-index:7000; max-width:calc(100vw - 32px); text-align:center; font-size:13px; }
.cloud-sync-detail { margin:8px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--muted);font-size:13px;line-height:1.5; }
.cloud-sync-detail[hidden] { display:none !important; }
.cloud-sync-detail[data-state="error"] { color:var(--red); }
@media (max-width:760px) { .beta-active .breadcrumb { flex:1;min-width:0;overflow:hidden; } .beta-gate input { font-size:16px; } }
@media (prefers-reduced-motion:reduce) { .site-loader-mark,.site-loader-mark i { animation:none; } .site-loader-mark i:nth-child(1) { transform:scaleY(.4); } .site-loader-mark i:nth-child(2) { transform:scaleY(.7); } }