:root{
 --tp-bg:#0d1118;
 --tp-topbar:#0d1118;
 --tp-surface:#171e27;
 --tp-surfaceAlt:#1d2732;
 --tp-card:#1b2430;
 --tp-border:#344150;
 --tp-heading:#f2f3f5;
 --tp-text:#d8e0e8;
 --tp-muted:#a5b1be;
 --tp-link:#8eafba;
 --tp-accent:#f36a77;
 --tp-accentHover:#fa8590;
 --tp-accentText:#151a20;
 --tp-button:#1d2732;
 --tp-buttonHover:#293544;
 --tp-buttonText:#d8e0e8;
 --tp-focus:#f36a77;
 --tp-chip:#283845;
 --tp-danger:#ff96a0;
 --tp-metric:#1b2430;
 --tp-task:#1b2430;
 --tp-counter:#1b2430;
 --tp-selected:#30252d;
 --tp-rest:#1c2b27;
 --tp-paused:#2b2823;
 --tp-done:#172c29;
 --tp-progress:#f36a77;
 --tp-progressTrack:#30404e;
 --tp-chart:#f36a77;
 --tp-success:#8cd8be;
 --tp-warning:#ecc384;
 --tp-hero:#171e27;
 --tp-nav:#151f29;
 --tp-navText:#a5b1be;
 --tp-navActive:#30252d;
 --tp-input:#151f29;
 --tp-modal:#171e27;
 --tp-overlay:#050a12;
 --tp-authBg:#0c1017;
 --tp-authCard:#181f29;
 --tp-toast:#1b4235;
 --tp-avatar:#30252d;
 --tp-shadow:#050a12;
 --bg:var(--tp-bg);--panel:var(--tp-surface);--panel2:var(--tp-surfaceAlt);
 --line:var(--tp-border);--red:var(--tp-accent);--red-dark:var(--tp-accentHover);
 --white:var(--tp-heading);--muted:var(--tp-muted);--mint:var(--tp-success);
 --gold:var(--tp-warning);--text:var(--tp-text);
}
body{background:var(--tp-bg)!important;background-image:none!important;color:var(--tp-text)}
.brand-name,.section-title,.hero h1,.kb-banner h1,.metric-number,.task-title,.group-title,
.kb-card h3,.social-card h2,.social-banner h1,.social-stat strong,.social-identity strong,
.social-plan-overview strong,.social-privacy-setting strong{color:var(--tp-heading)}
.hero p,.section-sub,.hint,.metric-desc,.metric-label,.day-subtitle,.task-helper,
.kb-card p,.social-muted,.social-banner p,.social-identity small,.social-stat small,
.social-chart-col small,.social-plan-overview p,.social-privacy-setting p{color:var(--tp-muted)}
.topbar,.panel,.kb-section,.settings-block,.social-card,.social-banner,.modal,
.modal-head,.modal-footer{border-color:var(--tp-border)}
.panel,.kb-section,.social-card,.social-banner,.modal,.modal-head,.modal-footer,
.account-details,.account-details form{background:var(--tp-surface);background-image:none}
.metric,.counter-task,.dm-task,.check-task,.kb-card,.day-card,.social-stat,.social-member,
.social-chart-track,.social-note,.account-details,.guidance{
 background:var(--tp-card);background-image:none;border-color:var(--tp-border);color:var(--tp-text)}
.metric::after{border-color:var(--tp-border)}
.day-card.selected,.day-card.selected:hover{background:var(--tp-selected);border-color:var(--tp-accent)}
.day-card.rest,.check-task.done,.dm-slot.completed{background:var(--tp-surfaceAlt);border-color:var(--tp-success)}
.day-card.paused{background:var(--tp-surfaceAlt);border-color:var(--tp-warning)}
.day-card .date,.week-range,.daily-percent,.counter-qty{color:var(--tp-heading)}
.btn,.square-btn,.dm-slot,.keycap,.hotkey,.social-chip,.social-switch{
 background:var(--tp-surfaceAlt);color:var(--tp-text);border-color:var(--tp-border)}
.btn.ghost{background:transparent;color:var(--tp-text)}
.btn.primary,.counter-actions [data-action="count-up"],.group-index,.brand-icon,.level-badge,
.btn.primary:hover:not(:disabled){background:var(--tp-accent);border-color:var(--tp-accent);color:var(--tp-accentText)}
.btn:not(.primary):hover:not(:disabled),.kb-card:hover,.social-member:hover,.day-card:hover,
.dm-slot:not(:disabled):hover,.check-task:hover:not(:disabled){background:var(--tp-surfaceAlt);border-color:var(--tp-accent)}
.status-pill,.status-pill .dot,.done .checkbox-visual,.dm-slot.completed,.social-chip.is-public{
 color:var(--tp-success);border-color:var(--tp-success)}
.status-pill.paused,.notice,.social-chip.is-private{color:var(--tp-warning);border-color:var(--tp-warning)}
.eyebrow,.section-mark,.kb-kicker,.settings-block h3,.hero h1 span,.kb-banner h1 span,
.social-banner h1 span,.social-member a{color:var(--tp-accent)}
.thin-bar,.social-chart-track,.tp-preview-track{background:var(--tp-surfaceAlt)}
.thin-bar>div,.chart-bar,.social-chart-track i,.tp-preview-track span{
 background:var(--tp-progress);background-image:none}
.xp-progress .thin-bar>div,.day-card.rest .thin-bar>div,.chart-bar.highlight{background:var(--tp-success)}
.day-card.paused .thin-bar>div{background:var(--tp-warning)}
.xp-panel,.xp-body{background:var(--tp-surface);background-image:none}
.field-input,.field-select,.field-textarea,.social-form input,.social-search input,
.account-details form input,.tp-theme-editor input:not([type="color"]){
 background:var(--tp-input);color:var(--tp-text);border-color:var(--tp-border)}
.field-input:focus,.field-select:focus,.field-textarea:focus,.social-form input:focus,.social-search input:focus{
 border-color:var(--tp-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--tp-accent),transparent 80%)}
.mobile-dock{background:var(--tp-nav)!important;border-top-color:var(--tp-border)!important;box-shadow:0 -9px 25px color-mix(in srgb,var(--tp-shadow) 20%,transparent)}
.mobile-dock button{color:var(--tp-muted)}
.mobile-dock button[aria-current="page"]{background:var(--tp-selected);border-color:var(--tp-accent);color:var(--tp-accent)}
.social-avatar{border-color:var(--tp-accent);background:var(--tp-selected);color:var(--tp-heading);overflow:hidden}
.social-avatar img{height:100%;width:100%;object-fit:cover;display:block}
.avatar-editor{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding:15px;border:1px solid var(--tp-border);border-radius:12px;background:var(--tp-card)}
.avatar-preview{flex:0 0 auto}.avatar-preview .social-avatar{width:84px;height:84px;font-size:32px;border-radius:15px}
.avatar-preview .social-identity{display:none}
.avatar-actions{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.avatar-actions p{flex-basis:100%;margin:0}.avatar-file-label{cursor:pointer}
.avatar-status{min-height:1em;color:var(--tp-warning);font-size:12px;flex-basis:100%;margin:0}
/* Per-element editor */
.tp-theme-editor{scroll-margin:20px}.tp-preset-list,.tp-theme-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}
.tp-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.tp-color-option{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer;padding:10px;
 border:1px solid var(--tp-border);border-radius:12px;background:var(--tp-card);transition:border-color .18s ease}
.tp-color-option:hover,.tp-color-option:focus-within{border-color:var(--tp-accent)}
.tp-color-swatch{position:relative;display:block;width:39px;height:39px;flex:0 0 39px;border:1px solid var(--tp-border);border-radius:9px;overflow:hidden}
.tp-color-swatch input{cursor:pointer;width:150%;height:150%;margin:-25%;border:0;background:transparent;padding:0}
.tp-color-description{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.tp-color-description strong{font-size:12px;color:var(--tp-heading);line-height:1.3}
.tp-color-description small{font-size:10px;color:var(--tp-muted);line-height:1.4}
.tp-color-hex{font:600 11px 'Manrope',sans-serif;color:var(--tp-muted);white-space:nowrap}
.tp-color-preview{border-radius:12px;border:1px solid var(--tp-border);padding:16px;margin:15px 0;background:var(--tp-card);display:flex;flex-direction:column;gap:8px}
.tp-preview-heading{color:var(--tp-heading);font-weight:760;font-size:15px}.tp-preview-caption{color:var(--tp-muted);font-size:12px}
.tp-preview-track{height:7px;border-radius:99px;overflow:hidden}.tp-preview-track span{display:block;width:62%;height:100%;border-radius:inherit}
.tp-preview-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px}
.tp-preview-success{color:var(--tp-success)}.tp-preview-cta{background:var(--tp-accent);color:var(--tp-accentText);border-radius:7px;padding:8px 11px;font-weight:700}
.tp-theme-status{font-size:12px;color:var(--tp-muted);min-height:18px}.tp-theme-status.error{color:var(--tp-warning)}
@media(max-width:620px){.tp-color-grid{grid-template-columns:1fr}.tp-color-option{padding:9px}.tp-preset-list .btn{padding:9px 10px}.avatar-editor{align-items:flex-start}}

/* 2.6.4: complete role-based palette. These overrides are last on purpose.
   Every color here is an editable CSS custom property, including hover states. */
body,html{background-color:var(--tp-bg);color:var(--tp-text)}
:focus-visible{outline-color:var(--tp-focus)}
.topbar{background:var(--tp-topbar)}
.panel,.kb-section,.settings-block,.xp-panel,.xp-body,.account-details{background:var(--tp-surface);border-color:var(--tp-border)}
.metric,.social-stat{background:var(--tp-metric);border-color:var(--tp-border)}
.counter-task{background:var(--tp-counter);border-color:var(--tp-border)}
.dm-task,.check-task,.dm-slot{background:var(--tp-task);border-color:var(--tp-border)}
.kb-card,.social-card,.social-member,.day-card,.guidance,.social-note{background:var(--tp-card);border-color:var(--tp-border)}
.social-banner,.kb-banner{background:var(--tp-hero);border-color:var(--tp-border);border-radius:13px}
.day-card.selected,.day-card.selected:hover{background:var(--tp-selected);border-color:var(--tp-accent)}
.day-card.rest{background:var(--tp-rest);border-color:var(--tp-success)}
.day-card.paused{background:var(--tp-paused);border-color:var(--tp-warning)}
.check-task.done,.dm-slot.completed{background:var(--tp-done);border-color:var(--tp-success)}
.counter-task.active{border-color:var(--tp-accent)}
.social-avatar{background:var(--tp-avatar);border-color:var(--tp-accent);color:var(--tp-heading)}
.social-chip,.mode-tag,.hotkey,.keycap,.social-counter{background:var(--tp-chip);border-color:var(--tp-border);color:var(--tp-text)}
.social-chip.is-private,.status-pill.paused{background:var(--tp-paused);border-color:var(--tp-warning);color:var(--tp-warning)}
.social-chip.is-public,.status-pill{background:var(--tp-done);border-color:var(--tp-success);color:var(--tp-success)}
.social-switch{background:var(--tp-chip);border-color:var(--tp-border)}
.social-switch i{background:var(--tp-muted)}
.social-switch.active{background:var(--tp-accent);border-color:var(--tp-accent)}
.social-switch.active i{background:var(--tp-accentText)}
.social-lock,.social-banner h1 span,.kb-banner h1 span,.hero h1 span,.eyebrow,.section-mark,.kb-kicker,
.settings-block h3,.social-member a,.focus-btn,.kb-card .kb-url{color:var(--tp-accent)}
.social-private-block p,.social-identity small,.social-chart-col small,.social-chart-col>span,
.kb-card p,.auth-lead,.footer,.hint,.account-address,.social-note,.auth-foot{color:var(--tp-muted)}
.social-profile-row strong,.social-card h2,.social-card h3,.social-stat strong,.task-title,.kb-card h3{color:var(--tp-heading)}
a:not(.btn):not(.brand):not(.social-avatar){color:var(--tp-link)}
.btn:not(.primary):not(.warn),.square-btn,.dm-slot,.keycap,.hotkey{background:var(--tp-button);color:var(--tp-buttonText);border-color:var(--tp-border)}
.btn:not(.primary):not(.warn):hover:not(:disabled),.square-btn:hover:not(:disabled),
.dm-slot:not(:disabled):hover,.day-card:hover,.kb-card:hover,.social-member:hover,
.check-task:hover:not(:disabled){background:var(--tp-buttonHover);border-color:var(--tp-focus)}
.btn.primary,.counter-actions [data-action="count-up"],.group-index,.brand-icon,.level-badge,
.tp-preview-cta{background:var(--tp-accent);color:var(--tp-accentText);border-color:var(--tp-accent)}
.btn.primary:hover:not(:disabled),.counter-actions [data-action="count-up"]:hover:not(:disabled){background:var(--tp-accentHover);border-color:var(--tp-accentHover);color:var(--tp-accentText)}
.btn.warn{background:var(--tp-paused);color:var(--tp-warning);border-color:var(--tp-warning)}
.field-input,.field-select,.field-textarea,.social-form input,.social-search input,
.account-details form input,.auth-panel form input{background:var(--tp-input);color:var(--tp-text);border-color:var(--tp-border)}
.field-input:focus,.field-select:focus,.field-textarea:focus,.social-form input:focus,.social-search input:focus,
.auth-panel form input:focus{border-color:var(--tp-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--tp-focus) 16%, transparent)}
.modal,.modal-head,.modal-footer{background:var(--tp-modal);border-color:var(--tp-border)}
.modal-backdrop{background:color-mix(in srgb,var(--tp-overlay) 78%,transparent)}
.auth-backdrop{background:var(--tp-authBg)}
.auth-panel{background:var(--tp-authCard);border-color:var(--tp-border)}
.auth-emblem,.auth-submit,.auth-switch button.on{background:var(--tp-accent);color:var(--tp-accentText)}
.auth-submit:hover:not(:disabled){background:var(--tp-accentHover)}
.auth-switch{background:var(--tp-button);border-color:var(--tp-border)}
.auth-switch button:not(.on){color:var(--tp-buttonText)}
.auth-message.error,.password-status.error,.setting-task .delete-task{color:var(--tp-danger)}
.setting-task .delete-task{background:var(--tp-paused);border-color:var(--tp-danger)}
.auth-message,.password-status.success,.cloud-sync-label{color:var(--tp-success)}
.thin-bar,.social-chart-track,.tp-preview-track,.tp-motion-preview-track{background:var(--tp-progressTrack)}
.thin-bar>div,.tp-preview-track span,.tp-motion-preview-fill{background:var(--tp-progress)}
.chart-bar,.social-chart-track i{background:var(--tp-chart);background-image:none}
.xp-progress .thin-bar>div,.day-card.rest .thin-bar>div{background:var(--tp-success)}
.day-card.paused .thin-bar>div{background:var(--tp-warning)}
.toast,.fx-update{background:var(--tp-toast);border-color:var(--tp-success);color:var(--tp-heading)}
.fx-update button{background:var(--tp-success);color:var(--tp-accentText)}
.fx-update .fx-update-close{background:transparent;color:var(--tp-text)}
.fx-float{background:var(--tp-done);color:var(--tp-heading);border-color:var(--tp-success)}
.mobile-dock{background:var(--tp-nav)!important;border-top:1px solid var(--tp-border)!important;
 box-shadow:0 -9px 25px color-mix(in srgb,var(--tp-shadow) 23%,transparent)}
.mobile-dock button{color:var(--tp-navText)!important;background:transparent!important}
.mobile-dock button[aria-current="page"]{background:var(--tp-navActive)!important;color:var(--tp-accent)!important;border-color:var(--tp-accent)!important}
/* Grouped editor: use controls, not a 44-row wall. */
.tp-color-group{border:1px solid var(--tp-border);border-radius:12px;background:var(--tp-surface);margin:11px 0;overflow:hidden}
.tp-color-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
 gap:12px;padding:15px 17px;font:700 13px 'Onest','Manrope',sans-serif;color:var(--tp-heading)}
.tp-color-group summary::-webkit-details-marker{display:none}
.tp-color-group summary::before{content:'▸';color:var(--tp-accent);font-size:15px;margin-right:4px}
.tp-color-group[open] summary::before{content:'▾'}
.tp-color-group summary span{font:600 11px 'Manrope',sans-serif;color:var(--tp-muted);margin-left:auto}
.tp-color-group .tp-color-grid{margin:0;padding:0 12px 14px}
.tp-color-option{background:var(--tp-card)}
.tp-color-preview{background:var(--tp-task);border-color:var(--tp-border)}
.tp-preview-track{background:var(--tp-progressTrack)}
.tp-preview-track span{background:var(--tp-progress)}
.tp-preview-cta{background:var(--tp-accent);color:var(--tp-accentText)}
.tp-theme-status.error{color:var(--tp-danger)}
@media(max-width:620px){.tp-color-group .tp-color-grid{padding:0 9px 10px}}
/* Exact HEX input and multi-element preview. */
.tp-color-hex{box-sizing:border-box;width:80px;min-width:80px;flex:0 0 80px;padding:7px 4px;text-align:center;
 background:var(--tp-input);border:1px solid var(--tp-border);border-radius:7px;color:var(--tp-heading);
 font:650 11px 'Manrope',sans-serif;outline:none;text-transform:uppercase}
.tp-color-hex:focus{border-color:var(--tp-focus)}
.tp-preview-mini{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tp-preview-mini>*{border-radius:8px;padding:9px 10px;min-width:0}
.tp-preview-metric{background:var(--tp-metric);color:var(--tp-heading);font-weight:750;display:flex;flex-direction:column;gap:1px}
.tp-preview-metric small{font-size:10px;color:var(--tp-muted);font-weight:500}
.tp-preview-day{background:var(--tp-selected);border:1px solid var(--tp-accent);color:var(--tp-heading);display:flex;align-items:center}
.tp-preview-input{background:var(--tp-input);border:1px solid var(--tp-border);color:var(--tp-muted);grid-column:1/-1}
@media(max-width:380px){.tp-color-option{gap:7px}.tp-color-hex{width:72px;min-width:72px;flex-basis:72px;font-size:10px}}

/* Pastel pink preset swatch, visible even while another theme is active. */
.tp-preset-list .tp-preset-kitty{
 border-color:color-mix(in srgb,#f16ba6 50%,var(--tp-border));
}
.tp-preset-list .tp-preset-kitty::before{
 content:'';display:inline-block;width:10px;height:10px;border-radius:50%;
 margin-right:7px;background:#f16ba6;box-shadow:0 0 0 3px #ffe2ee;
 flex:0 0 auto;
}