.bht-app,
.bht-dialog {
--bht-primary: #0b7a43;
--bht-accent: #ff6b35;
--bht-secondary: var(--bht-accent);
--bht-background: #f3f7f5;
--bht-card: #ffffff;
--bht-text: #15231e;
--bht-muted: #55655f;
--bht-success: #0b7a43;
--bht-danger: #c62828;
--bht-warning: #b26a00;
--bht-border: #dbe5e0;
--bht-focus: #1a5fd0;
--bht-radius: 16px;
--bht-radius-sm: 10px;
--bht-shadow: 0 1px 2px rgba(21, 35, 30, 0.06), 0 6px 18px rgba(21, 35, 30, 0.06);
--bht-primary-dark: #075c32;
--bht-primary-soft: #e3f3ea;
--bht-accent-dark: #b8400f;
--bht-accent-soft: #fff0ea;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
.bht-app,
.bht-dialog {
--bht-primary-dark: color-mix(in srgb, var(--bht-primary) 78%, #000);
--bht-primary-soft: color-mix(in srgb, var(--bht-primary) 12%, #fff);
--bht-accent-dark: color-mix(in srgb, var(--bht-accent) 68%, #000);
--bht-accent-soft: color-mix(in srgb, var(--bht-accent) 12%, #fff);
}
}
.bht-app,
.bht-dialog {
box-sizing: border-box;
color: var(--bht-text);
font-size: 16px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
.bht-app *,
.bht-app *::before,
.bht-app *::after,
.bht-dialog *,
.bht-dialog *::before,
.bht-dialog *::after {
box-sizing: border-box;
} .bht-app h1,
.bht-app h2,
.bht-app h3,
.bht-app h4,
.bht-dialog h2 {
margin: 0;
padding: 0;
color: var(--bht-text);
font-family: inherit;
font-weight: 700;
line-height: 1.25;
letter-spacing: normal;
text-transform: none;
}
.bht-app p,
.bht-dialog p {
margin: 0;
}
.bht-app ul,
.bht-app ol,
.bht-app dl,
.bht-app dd,
.bht-app figure,
.bht-app blockquote {
margin: 0;
padding: 0;
list-style: none;
}
.bht-app blockquote {
border: 0;
quotes: none;
}
.bht-app img {
max-width: 100%;
height: auto;
}
.bht-app :focus-visible,
.bht-dialog :focus-visible {
outline: 3px solid var(--bht-focus);
outline-offset: 2px;
border-radius: 6px;
}
.bht-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.bht-muted {
color: var(--bht-muted);
font-size: 0.9rem;
}
.bht-link,
.bht-app a.bht-link {
color: var(--bht-primary-dark);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
} .bht-card {
background: var(--bht-card);
border: 1px solid var(--bht-border);
border-radius: var(--bht-radius);
box-shadow: var(--bht-shadow);
padding: 16px;
}
.bht-section {
margin-top: 24px;
}
.bht-section__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.bht-section__title {
font-size: 1.2rem;
margin-bottom: 12px;
}
.bht-section__head .bht-section__title {
margin-bottom: 0;
}
.bht-empty {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--bht-muted);
}
.bht-notice {
padding: 12px 16px;
border-radius: var(--bht-radius-sm);
background: var(--bht-accent-soft);
border: 1px solid var(--bht-accent);
color: var(--bht-text);
} .bht-app .bht-btn,
.bht-app a.bht-btn,
.bht-dialog .bht-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 20px;
border: 2px solid transparent;
border-radius: 999px;
background: var(--bht-primary);
color: #fff;
font: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: none;
letter-spacing: normal;
box-shadow: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
-webkit-appearance: none;
appearance: none;
}
.bht-app .bht-btn:hover,
.bht-app a.bht-btn:hover,
.bht-dialog .bht-btn:hover {
background: var(--bht-primary-dark);
color: #fff;
text-decoration: none;
}
.bht-app .bht-btn:active,
.bht-dialog .bht-btn:active {
transform: scale(0.98);
}
.bht-app .bht-btn[disabled],
.bht-dialog .bht-btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.bht-app .bht-btn--secondary,
.bht-app a.bht-btn--secondary,
.bht-dialog .bht-btn--secondary {
background: #fff;
border-color: var(--bht-primary);
color: var(--bht-primary-dark);
}
.bht-app .bht-btn--secondary:hover,
.bht-app a.bht-btn--secondary:hover,
.bht-dialog .bht-btn--secondary:hover {
background: var(--bht-primary-soft);
color: var(--bht-primary-dark);
}
.bht-app .bht-btn--ghost,
.bht-dialog .bht-btn--ghost {
background: transparent;
border-color: var(--bht-border);
color: var(--bht-text);
}
.bht-app .bht-btn--ghost:hover,
.bht-dialog .bht-btn--ghost:hover {
background: var(--bht-primary-soft);
color: var(--bht-text);
}
.bht-app .bht-btn--danger,
.bht-dialog .bht-btn--danger {
background: #fff;
border-color: var(--bht-danger);
color: var(--bht-danger);
}
.bht-app .bht-btn--danger:hover,
.bht-dialog .bht-btn--danger:hover {
background: var(--bht-danger);
color: #fff;
}
.bht-app .bht-btn--small,
.bht-dialog .bht-btn--small {
min-height: 44px;
padding: 6px 16px;
font-size: 0.9rem;
}
.bht-app .bht-btn--icon {
min-width: 48px;
padding: 0;
font-size: 1.6rem;
background: #fff;
border-color: var(--bht-border);
color: var(--bht-text);
}
.bht-app .bht-btn--icon:hover {
background: var(--bht-primary-soft);
color: var(--bht-text);
}
.bht-file-btn {
position: relative;
margin-top: 8px;
}
.bht-file-btn:focus-within {
outline: 3px solid var(--bht-focus);
outline-offset: 2px;
} .bht-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: var(--bht-primary-soft);
color: var(--bht-primary-dark);
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
border: 1px solid transparent;
}
.bht-badge--active {
background: var(--bht-primary-soft);
color: var(--bht-primary-dark);
}
.bht-badge--not_started {
background: #eef1f9;
color: #35456d;
}
.bht-badge--paused {
background: #fff4dc;
color: #7a4b00;
}
.bht-badge--completed {
background: var(--bht-primary);
color: #fff;
}
.bht-progress {
height: 12px;
border-radius: 999px;
background: var(--bht-border);
overflow: hidden;
}
.bht-progress__fill {
display: block;
height: 100%;
min-width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--bht-primary), var(--bht-accent));
transition: width 0.4s ease;
} .bht-habit-list {
display: grid;
gap: 12px;
}
.bht-habit-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px 14px;
align-items: start;
background: var(--bht-card);
border: 1px solid var(--bht-border);
border-left: 6px solid var(--bht-habit-color, var(--bht-primary));
border-radius: var(--bht-radius);
padding: 14px;
box-shadow: var(--bht-shadow);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bht-habit-card.is-completed {
background: var(--bht-primary-soft);
}
.bht-habit-card.is-inactive {
opacity: 0.75;
border-left-style: dashed;
}
.bht-habit-card__icon {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: #f1f5f3;
font-size: 28px;
line-height: 1;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
.bht-habit-card__icon {
background: color-mix(in srgb, var(--bht-habit-color, var(--bht-primary)) 16%, #fff);
}
}
.bht-habit-card__name {
font-size: 1.08rem;
overflow-wrap: anywhere;
}
.bht-habit-card__desc {
color: var(--bht-muted);
font-size: 0.92rem;
overflow-wrap: anywhere;
}
.bht-habit-card__meta {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 6px;
font-size: 0.88rem;
font-weight: 600;
}
.bht-habit-card__actions {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 10px;
}
.bht-habit-card__tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.bht-app .bht-btn--complete {
width: 100%;
background: #fff;
border-color: var(--bht-primary);
color: var(--bht-primary-dark);
}
.bht-app .bht-btn--complete:hover {
background: var(--bht-primary-soft);
color: var(--bht-primary-dark);
}
.bht-app .bht-btn--complete[aria-pressed='true'] {
background: var(--bht-success);
border-color: var(--bht-success);
color: #fff;
}
.bht-app .bht-btn--complete[aria-pressed='true']:hover {
background: var(--bht-primary-dark);
color: #fff;
}
.bht-pop {
animation: bht-pop 0.35s ease;
}
@keyframes bht-pop {
0% {
transform: scale(1);
}
45% {
transform: scale(1.04);
}
100% {
transform: scale(1);
}
} .bht-starter-grid {
display: grid;
gap: 10px;
margin-top: 12px;
}
.bht-starter {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 12px;
border-left: 6px solid var(--bht-habit-color, var(--bht-primary));
}
.bht-starter__icon {
font-size: 26px;
line-height: 1;
}
.bht-starter__body {
display: flex;
flex-direction: column;
min-width: 0;
} .bht-guest {
max-width: 560px;
margin: 0 auto;
text-align: center;
padding: 28px 20px;
}
.bht-guest__icon {
font-size: 48px;
}
.bht-guest__title {
font-size: 1.6rem;
margin: 8px 0;
}
.bht-guest__lead {
color: var(--bht-muted);
margin-bottom: 16px;
}
.bht-guest__features {
display: grid;
gap: 8px;
text-align: left;
max-width: 320px;
margin: 0 auto 20px !important;
}
.bht-guest__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.bht-guest__note {
margin-top: 16px;
} .bht-shell {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
background: var(--bht-background);
border-radius: var(--bht-radius);
padding: 12px;
}
.bht-nav {
order: 2;
position: sticky;
bottom: 0;
z-index: 5;
background: var(--bht-card);
border: 1px solid var(--bht-border);
border-radius: var(--bht-radius);
box-shadow: 0 -2px 14px rgba(21, 35, 30, 0.1);
padding: 4px;
}
.bht-nav__list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 2px;
}
.bht-app a.bht-nav__link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 56px;
padding: 6px 2px;
border-radius: 12px;
color: var(--bht-muted);
font-size: 0.68rem;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 1.15;
min-width: 0;
overflow-wrap: normal;
}
.bht-nav__icon {
font-size: 1.25rem;
line-height: 1;
}
.bht-app a.bht-nav__link:hover {
background: var(--bht-primary-soft);
color: var(--bht-text);
}
.bht-app a.bht-nav__link.is-active {
background: var(--bht-primary);
color: #fff;
}
.bht-shell__main {
order: 1;
min-width: 0;
}
.bht-panel[hidden] {
display: none;
}
.bht-loading {
padding: 24px;
text-align: center;
color: var(--bht-muted);
} .bht-dialog {
width: calc(100% - 24px);
max-width: 520px;
max-height: calc(100vh - 24px);
padding: 0;
border: 0;
border-radius: 20px;
background: var(--bht-card);
color: var(--bht-text);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.bht-dialog::backdrop {
background: rgba(15, 25, 21, 0.55);
}
.bht-dialog__form {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
}
.bht-dialog__title {
font-size: 1.25rem;
}
.bht-field {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.bht-field > label,
.bht-field > legend {
font-weight: 600;
font-size: 0.95rem;
padding: 0;
}
.bht-dialog input[type='text'],
.bht-dialog input[type='date'],
.bht-dialog input[type='number'],
.bht-dialog textarea,
.bht-dialog select {
width: 100%;
min-height: 48px;
padding: 10px 12px;
border: 2px solid var(--bht-border);
border-radius: var(--bht-radius-sm);
background: #fff;
color: var(--bht-text);
font: inherit;
box-shadow: none;
}
.bht-dialog textarea {
min-height: 84px;
resize: vertical;
}
.bht-dialog input[type='color'] {
width: 64px;
height: 48px;
padding: 2px;
border: 2px solid var(--bht-border);
border-radius: var(--bht-radius-sm);
background: #fff;
cursor: pointer;
}
.bht-dialog input:focus,
.bht-dialog textarea:focus,
.bht-dialog select:focus {
border-color: var(--bht-focus);
outline: none;
box-shadow: 0 0 0 3px rgba(26, 95, 208, 0.25);
}
.bht-icon-picker {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bht-icon-picker label {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 2px solid var(--bht-border);
border-radius: 12px;
font-size: 22px;
cursor: pointer;
background: #fff;
}
.bht-icon-picker input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.bht-icon-picker label:has(input:checked) {
border-color: var(--bht-primary);
background: var(--bht-primary-soft);
}
.bht-icon-picker label:has(input:focus-visible) {
outline: 3px solid var(--bht-focus);
outline-offset: 2px;
}
.bht-day-picker {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bht-day-picker label {
position: relative;
display: grid;
place-items: center;
min-width: 48px;
min-height: 44px;
padding: 0 10px;
border: 2px solid var(--bht-border);
border-radius: 12px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
background: #fff;
}
.bht-day-picker input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.bht-day-picker label:has(input:checked) {
border-color: var(--bht-primary);
background: var(--bht-primary);
color: #fff;
}
.bht-day-picker label:has(input:focus-visible) {
outline: 3px solid var(--bht-focus);
outline-offset: 2px;
}
.bht-form-error {
color: var(--bht-danger);
font-weight: 600;
font-size: 0.92rem;
}
.bht-dialog__actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
} .bht-toast-region {
position: fixed;
left: 12px;
right: 12px;
bottom: 88px;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
}
.bht-toast {
max-width: 420px;
padding: 12px 18px;
border-radius: 14px;
background: #15231e;
color: #fff;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
animation: bht-toast-in 0.25s ease;
}
.bht-toast--error {
background: var(--bht-danger);
}
.bht-toast--achievement {
background: var(--bht-primary-dark);
}
@keyframes bht-toast-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}