2243 lines
46 KiB
CSS
2243 lines
46 KiB
CSS
:root {
|
|
--bg: #09131f;
|
|
--bg-soft: #10253a;
|
|
--surface: rgba(242, 249, 255, 0.16);
|
|
--surface-strong: rgba(255, 255, 255, 0.24);
|
|
--surface-border: rgba(255, 255, 255, 0.26);
|
|
--text: #eff7ff;
|
|
--muted: rgba(239, 247, 255, 0.72);
|
|
--shadow: 0 24px 70px rgba(4, 18, 31, 0.35);
|
|
--primary: #8be4ff;
|
|
--primary-strong: #3cc7ff;
|
|
--accent: #8bffcf;
|
|
--warm: #ffbf8d;
|
|
--danger: #ff8f8f;
|
|
--good: #7ff3bb;
|
|
--radius-xl: 28px;
|
|
--radius-lg: 22px;
|
|
--radius-md: 18px;
|
|
--radius-sm: 14px;
|
|
--panel-blur: 28px;
|
|
--font-ui: "SF Pro Display", "Avenir Next", "Segoe UI Variable", "Helvetica Neue", system-ui, sans-serif;
|
|
--track-accent: rgba(139, 228, 255, 0.34);
|
|
--track-surface: rgba(255, 255, 255, 0.08);
|
|
--track-glow: rgba(139, 228, 255, 0.18);
|
|
--body-radial-one: radial-gradient(circle at 18% 18%, rgba(76, 171, 255, 0.24), transparent 34%);
|
|
--body-radial-two: radial-gradient(circle at 82% 12%, rgba(113, 255, 210, 0.18), transparent 28%);
|
|
--body-gradient: linear-gradient(145deg, #07111b 0%, #0b1e2e 35%, #13273b 65%, #08111b 100%);
|
|
--panel-gradient-top: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
|
|
--panel-gradient-accent: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 48%);
|
|
--pill-bg: rgba(255, 255, 255, 0.12);
|
|
--pill-border: rgba(255, 255, 255, 0.12);
|
|
--input-bg: rgba(255, 255, 255, 0.09);
|
|
--input-bg-focus: rgba(255, 255, 255, 0.12);
|
|
--input-border: rgba(255, 255, 255, 0.14);
|
|
--input-border-soft: rgba(255, 255, 255, 0.12);
|
|
--nav-hover-bg: rgba(255, 255, 255, 0.13);
|
|
--user-chip-bg: rgba(255, 255, 255, 0.1);
|
|
--eyebrow-color: rgba(239, 247, 255, 0.62);
|
|
--chart-axis-color: rgba(255, 255, 255, 0.1);
|
|
--chart-label-color: rgba(239, 247, 255, 0.65);
|
|
--chart-value-color: rgba(239, 247, 255, 0.9);
|
|
--line-point-stroke: rgba(7, 17, 27, 0.9);
|
|
--bar-grid-color: rgba(255, 255, 255, 0.08);
|
|
--calendar-detail-bg: rgba(255, 255, 255, 0.08);
|
|
--calendar-detail-border: rgba(255, 255, 255, 0.1);
|
|
--calendar-detail-eyebrow: rgba(239, 247, 255, 0.58);
|
|
--calendar-selected-stroke: rgba(255, 255, 255, 0.9);
|
|
--control-soft-bg: rgba(255, 255, 255, 0.08);
|
|
--control-soft-border: rgba(255, 255, 255, 0.16);
|
|
--brand-shadow: 0 10px 24px rgba(9, 25, 40, 0.22);
|
|
--archive-shell-bg:
|
|
linear-gradient(180deg, rgba(22, 38, 58, 0.94), rgba(10, 25, 41, 0.92)),
|
|
radial-gradient(circle at top right, rgba(59, 173, 212, 0.12), transparent 42%);
|
|
--archive-shell-border: rgba(148, 198, 228, 0.18);
|
|
--archive-toolbar-bg:
|
|
linear-gradient(180deg, rgba(34, 57, 79, 0.82), rgba(22, 40, 58, 0.76)),
|
|
radial-gradient(circle at top right, rgba(75, 203, 223, 0.1), transparent 48%);
|
|
--archive-toolbar-border: rgba(148, 198, 228, 0.14);
|
|
--archive-switcher-bg: rgba(12, 24, 38, 0.34);
|
|
--archive-switcher-border: rgba(148, 198, 228, 0.12);
|
|
--archive-switcher-active-bg: rgba(173, 213, 245, 0.14);
|
|
--archive-row-bg: rgba(255, 255, 255, 0.06);
|
|
--archive-row-border: rgba(255, 255, 255, 0.05);
|
|
--archive-row-active-bg: rgba(255, 255, 255, 0.09);
|
|
--archive-detail-bg:
|
|
linear-gradient(180deg, rgba(40, 62, 86, 0.88), rgba(24, 41, 60, 0.82)),
|
|
radial-gradient(circle at top left, rgba(135, 217, 255, 0.12), transparent 42%);
|
|
--archive-select-bg: rgba(30, 51, 72, 0.84);
|
|
--archive-select-border: rgba(148, 198, 228, 0.18);
|
|
--archive-select-focus-bg: rgba(35, 59, 83, 0.94);
|
|
--archive-mobile-overlay-bg: rgba(6, 14, 24, 0.36);
|
|
--archive-mobile-top-bg:
|
|
linear-gradient(180deg, rgba(17, 33, 50, 0.96), rgba(17, 33, 50, 0.78)),
|
|
radial-gradient(circle at top left, rgba(135, 217, 255, 0.1), transparent 42%);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #eef4fa;
|
|
--bg-soft: #dce8f2;
|
|
--surface: rgba(255, 255, 255, 0.72);
|
|
--surface-strong: rgba(255, 255, 255, 0.86);
|
|
--surface-border: rgba(120, 146, 172, 0.24);
|
|
--text: #12304b;
|
|
--muted: rgba(18, 48, 75, 0.66);
|
|
--shadow: 0 24px 60px rgba(78, 105, 130, 0.16);
|
|
--primary: #5abcf2;
|
|
--primary-strong: #1494de;
|
|
--accent: #63d9b4;
|
|
--warm: #ee9f63;
|
|
--danger: #db6b6b;
|
|
--good: #45c98d;
|
|
--track-accent: rgba(67, 153, 212, 0.22);
|
|
--track-surface: rgba(255, 255, 255, 0.46);
|
|
--track-glow: rgba(104, 201, 255, 0.16);
|
|
--body-radial-one: radial-gradient(circle at 18% 18%, rgba(115, 196, 255, 0.28), transparent 34%);
|
|
--body-radial-two: radial-gradient(circle at 82% 12%, rgba(129, 232, 212, 0.24), transparent 28%);
|
|
--body-gradient: linear-gradient(145deg, #eef5fb 0%, #e4eff7 40%, #d8e9f4 72%, #edf5fa 100%);
|
|
--panel-gradient-top: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.58));
|
|
--panel-gradient-accent: radial-gradient(circle at top left, rgba(123, 190, 255, 0.18), transparent 48%);
|
|
--pill-bg: rgba(255, 255, 255, 0.54);
|
|
--pill-border: rgba(130, 158, 185, 0.22);
|
|
--input-bg: rgba(255, 255, 255, 0.62);
|
|
--input-bg-focus: rgba(255, 255, 255, 0.82);
|
|
--input-border: rgba(123, 153, 182, 0.26);
|
|
--input-border-soft: rgba(123, 153, 182, 0.22);
|
|
--nav-hover-bg: rgba(255, 255, 255, 0.56);
|
|
--user-chip-bg: rgba(255, 255, 255, 0.54);
|
|
--eyebrow-color: rgba(18, 48, 75, 0.5);
|
|
--chart-axis-color: rgba(18, 48, 75, 0.12);
|
|
--chart-label-color: rgba(18, 48, 75, 0.58);
|
|
--chart-value-color: rgba(18, 48, 75, 0.86);
|
|
--line-point-stroke: rgba(255, 255, 255, 0.95);
|
|
--bar-grid-color: rgba(18, 48, 75, 0.08);
|
|
--calendar-detail-bg: rgba(255, 255, 255, 0.6);
|
|
--calendar-detail-border: rgba(120, 146, 172, 0.18);
|
|
--calendar-detail-eyebrow: rgba(18, 48, 75, 0.48);
|
|
--calendar-selected-stroke: rgba(18, 48, 75, 0.52);
|
|
--control-soft-bg: rgba(255, 255, 255, 0.58);
|
|
--control-soft-border: rgba(123, 153, 182, 0.22);
|
|
--brand-shadow: 0 10px 24px rgba(82, 111, 138, 0.14);
|
|
--archive-shell-bg:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(247, 252, 255, 0.72)),
|
|
radial-gradient(circle at top right, rgba(123, 190, 255, 0.16), transparent 46%);
|
|
--archive-shell-border: rgba(120, 146, 172, 0.2);
|
|
--archive-toolbar-bg:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 251, 255, 0.64)),
|
|
radial-gradient(circle at top right, rgba(106, 203, 219, 0.12), transparent 48%);
|
|
--archive-toolbar-border: rgba(120, 146, 172, 0.16);
|
|
--archive-switcher-bg: rgba(255, 255, 255, 0.34);
|
|
--archive-switcher-border: rgba(120, 146, 172, 0.18);
|
|
--archive-switcher-active-bg: rgba(255, 255, 255, 0.72);
|
|
--archive-row-bg: rgba(255, 255, 255, 0.38);
|
|
--archive-row-border: rgba(120, 146, 172, 0.14);
|
|
--archive-row-active-bg: rgba(255, 255, 255, 0.56);
|
|
--archive-detail-bg:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(244, 250, 255, 0.72)),
|
|
radial-gradient(circle at top left, rgba(141, 205, 255, 0.16), transparent 42%);
|
|
--archive-select-bg: rgba(255, 255, 255, 0.62);
|
|
--archive-select-border: rgba(123, 153, 182, 0.2);
|
|
--archive-select-focus-bg: rgba(255, 255, 255, 0.84);
|
|
--archive-mobile-overlay-bg: rgba(236, 243, 249, 0.42);
|
|
--archive-mobile-top-bg:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.84)),
|
|
radial-gradient(circle at top left, rgba(141, 205, 255, 0.16), transparent 42%);
|
|
}
|
|
|
|
html {
|
|
color-scheme: light;
|
|
}
|
|
|
|
select {
|
|
color-scheme: light;
|
|
}
|
|
|
|
.mobile-nav .nav-icon {
|
|
opacity: 1;
|
|
filter:
|
|
saturate(2.1)
|
|
contrast(1.16)
|
|
brightness(0.76)
|
|
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5))
|
|
drop-shadow(0 0 8px rgba(110, 214, 255, 0.18));
|
|
}
|
|
|
|
.mobile-nav a.active .nav-icon {
|
|
filter:
|
|
saturate(2.35)
|
|
contrast(1.2)
|
|
brightness(0.68)
|
|
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.56))
|
|
drop-shadow(0 0 10px rgba(110, 214, 255, 0.24));
|
|
}
|
|
|
|
.detail-grid--archive-day div {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 249, 255, 0.64));
|
|
border: 1px solid rgba(126, 156, 184, 0.18);
|
|
box-shadow: 0 8px 22px rgba(138, 167, 194, 0.1);
|
|
}
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: var(--font-ui);
|
|
background:
|
|
var(--body-radial-one),
|
|
var(--body-radial-two),
|
|
var(--body-gradient);
|
|
color: var(--text);
|
|
}
|
|
|
|
.pull-refresh-indicator {
|
|
position: fixed;
|
|
top: max(0.85rem, env(safe-area-inset-top));
|
|
left: 50%;
|
|
z-index: 30;
|
|
padding: 0.72rem 1rem;
|
|
border-radius: 999px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -0.9rem) scale(0.96);
|
|
transition: opacity 160ms ease, transform 160ms ease;
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
body.is-pull-refreshing .pull-refresh-indicator,
|
|
body.is-pull-refresh-ready .pull-refresh-indicator,
|
|
body.is-pull-refresh-reloading .pull-refresh-indicator {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0) scale(1);
|
|
}
|
|
|
|
body.is-pull-refresh-ready .pull-refresh-indicator,
|
|
body.is-pull-refresh-reloading .pull-refresh-indicator {
|
|
color: var(--text);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
transform: none !important;
|
|
}
|
|
|
|
.aurora {
|
|
position: fixed;
|
|
inset: auto;
|
|
z-index: 0;
|
|
border-radius: 999px;
|
|
pointer-events: none;
|
|
filter: blur(24px);
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.aurora-one {
|
|
top: 5rem;
|
|
right: 8vw;
|
|
width: 18rem;
|
|
height: 18rem;
|
|
background: radial-gradient(circle, rgba(90, 196, 255, 0.44), transparent 70%);
|
|
}
|
|
|
|
.aurora-two {
|
|
bottom: 8vh;
|
|
left: 8vw;
|
|
width: 22rem;
|
|
height: 22rem;
|
|
background: radial-gradient(circle, rgba(149, 255, 214, 0.34), transparent 70%);
|
|
}
|
|
|
|
.shell {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: 300px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
gap: 1.25rem;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.sidebar,
|
|
.topbar,
|
|
.glass-panel {
|
|
border: 1px solid var(--surface-border);
|
|
background:
|
|
var(--panel-gradient-top),
|
|
var(--panel-gradient-accent);
|
|
backdrop-filter: blur(var(--panel-blur)) saturate(150%);
|
|
-webkit-backdrop-filter: blur(var(--panel-blur)) saturate(150%);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
padding: 1.35rem;
|
|
border-radius: var(--radius-xl);
|
|
min-height: calc(100vh - 2.5rem);
|
|
position: sticky;
|
|
top: 1.25rem;
|
|
}
|
|
|
|
.content {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.site-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.9rem;
|
|
margin-top: auto;
|
|
padding: 0.9rem 1.1rem;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.site-footer__link {
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
transition: color 180ms ease, opacity 180ms ease;
|
|
}
|
|
|
|
.site-footer__link:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.2rem;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.topbar__meta {
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.meta-pill,
|
|
.chart-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.48rem 0.8rem;
|
|
border-radius: 999px;
|
|
background: var(--pill-bg);
|
|
color: var(--muted);
|
|
border: 1px solid var(--pill-border);
|
|
font-size: 0.88rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.meta-pill--button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.topbar-date-form {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.topbar-date-input {
|
|
width: auto;
|
|
min-height: 2.2rem;
|
|
border: 1px solid var(--input-border-soft);
|
|
border-radius: 999px;
|
|
padding: 0.45rem 0.9rem;
|
|
background: var(--control-soft-bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
.chart-chip--warm {
|
|
background: rgba(255, 173, 124, 0.12);
|
|
}
|
|
|
|
.chart-chip--cool {
|
|
background: rgba(118, 228, 255, 0.12);
|
|
}
|
|
|
|
.brand-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.95rem;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
box-shadow: var(--brand-shadow);
|
|
}
|
|
|
|
.brand-mark img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.brand-block h1,
|
|
.topbar h2,
|
|
.hero-card h3,
|
|
.section-head h3,
|
|
.detail-card h3,
|
|
.auth-card h1 {
|
|
margin: 0;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.brand-block h1 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 0.28rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--eyebrow-color);
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.main-nav {
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mobile-nav {
|
|
display: none;
|
|
}
|
|
|
|
.main-nav a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 18px;
|
|
color: var(--muted);
|
|
transition: transform 180ms ease, background 180ms ease, color 180ms ease;
|
|
}
|
|
|
|
.main-nav a:hover,
|
|
.main-nav a.active {
|
|
background: var(--nav-hover-bg);
|
|
color: var(--text);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.sidebar-footer {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
margin-top: auto;
|
|
padding-top: 1.2rem;
|
|
}
|
|
|
|
.nav-icon {
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.user-chip {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 18px;
|
|
background: var(--user-chip-bg);
|
|
}
|
|
|
|
.user-chip__name {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.user-chip__role {
|
|
font-size: 0.88rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.flash {
|
|
padding: 0.92rem 1.1rem;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.flash-success {
|
|
border-color: rgba(127, 243, 187, 0.35);
|
|
}
|
|
|
|
.flash-error {
|
|
border-color: rgba(255, 143, 143, 0.38);
|
|
}
|
|
|
|
.hero-grid,
|
|
.stats-grid,
|
|
.dashboard-grid,
|
|
.page-grid,
|
|
.field-grid,
|
|
.band-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.hero-grid {
|
|
grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
|
|
}
|
|
|
|
.hero-card,
|
|
.metric-card,
|
|
.chart-card,
|
|
.form-panel,
|
|
.detail-card,
|
|
.info-card,
|
|
.preview-card,
|
|
.archive-list,
|
|
.auth-card {
|
|
padding: 1.25rem;
|
|
border-radius: var(--radius-xl);
|
|
}
|
|
|
|
.hero-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -10% -45% auto;
|
|
width: 15rem;
|
|
height: 15rem;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 64%);
|
|
}
|
|
|
|
.hero-card--wide {
|
|
padding: 1.6rem;
|
|
}
|
|
|
|
.hero-copy,
|
|
.auth-copy,
|
|
.helper-text,
|
|
.detail-card p,
|
|
.info-card p {
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero-score {
|
|
font-size: clamp(2.5rem, 4vw, 4rem);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
margin-top: 0.55rem;
|
|
}
|
|
|
|
.hero-label {
|
|
margin: 0.45rem 0 0;
|
|
color: var(--text);
|
|
font-size: 1.03rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.metric-card {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.metric-card span {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.metric-card strong {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
.chart-card--calendar,
|
|
.chart-card--wide,
|
|
.form-panel--wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-head--compact {
|
|
margin-bottom: 0.85rem;
|
|
}
|
|
|
|
.calendar-heatmap {
|
|
min-height: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.calendar-detail {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 18px;
|
|
background: var(--calendar-detail-bg);
|
|
border: 1px solid var(--calendar-detail-border);
|
|
}
|
|
|
|
.calendar-detail__meta {
|
|
display: grid;
|
|
gap: 0.18rem;
|
|
}
|
|
|
|
.calendar-detail__eyebrow {
|
|
color: var(--calendar-detail-eyebrow);
|
|
font-size: 0.78rem;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.calendar-detail__meta strong {
|
|
font-size: 1.05rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.calendar-detail__label,
|
|
.calendar-detail__subtle {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.calendar-detail__score {
|
|
display: grid;
|
|
justify-items: end;
|
|
line-height: 1;
|
|
}
|
|
|
|
.calendar-detail__score span {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.calendar-detail__score small {
|
|
color: var(--muted);
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.calendar-detail__link {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.calendar-legend {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.45rem;
|
|
margin-top: 0.55rem;
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.calendar-scale {
|
|
display: flex;
|
|
gap: 0.32rem;
|
|
}
|
|
|
|
.calendar-dot {
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
border-radius: 6px;
|
|
background: rgba(132, 193, 208, 0.55);
|
|
}
|
|
|
|
.calendar-dot--bad {
|
|
background: rgba(255, 117, 117, 0.85);
|
|
}
|
|
|
|
.calendar-dot--warn {
|
|
background: rgba(255, 171, 122, 0.82);
|
|
}
|
|
|
|
.calendar-dot--1 {
|
|
background: rgba(116, 226, 183, 0.7);
|
|
}
|
|
|
|
.calendar-dot--2 {
|
|
background: rgba(126, 239, 205, 0.56);
|
|
}
|
|
|
|
.calendar-dot--3 {
|
|
background: rgba(126, 239, 205, 0.82);
|
|
}
|
|
|
|
.calendar-svg,
|
|
.line-chart svg {
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.calendar-svg {
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.calendar-tooltip {
|
|
fill: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.calendar-link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.calendar-cell--active {
|
|
transition: transform 140ms ease, filter 140ms ease, stroke 140ms ease, stroke-width 140ms ease;
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.calendar-link:hover .calendar-cell--active,
|
|
.calendar-link:focus .calendar-cell--active,
|
|
.calendar-link:focus-visible .calendar-cell--active {
|
|
filter: brightness(1.08);
|
|
stroke: rgba(255, 255, 255, 0.8);
|
|
stroke-width: 1.1;
|
|
}
|
|
|
|
.calendar-cell--selected {
|
|
stroke: var(--calendar-selected-stroke);
|
|
stroke-width: 1.2;
|
|
filter: brightness(1.08);
|
|
}
|
|
|
|
.line-chart {
|
|
min-height: 10.25rem;
|
|
}
|
|
|
|
.bar-chart {
|
|
min-height: 11rem;
|
|
}
|
|
|
|
.line-chart svg {
|
|
overflow: visible;
|
|
}
|
|
|
|
.line-fill {
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.line-stroke {
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.line-point {
|
|
stroke: var(--line-point-stroke);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.line-point--solo {
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.line-point-glow {
|
|
opacity: 0.16;
|
|
}
|
|
|
|
.chart-axis {
|
|
stroke: var(--chart-axis-color);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.chart-guide {
|
|
opacity: 0.22;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.chart-label {
|
|
fill: var(--chart-label-color);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.chart-value {
|
|
fill: var(--chart-value-color);
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bar-chart svg {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
.bar-grid {
|
|
fill: var(--bar-grid-color);
|
|
}
|
|
|
|
.bar-segment--sport {
|
|
fill: rgba(87, 214, 255, 0.88);
|
|
}
|
|
|
|
.bar-segment--walk {
|
|
fill: rgba(138, 255, 198, 0.82);
|
|
}
|
|
|
|
.bar-label {
|
|
fill: var(--chart-label-color);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.bar-value {
|
|
fill: var(--chart-value-color);
|
|
font-size: 10px;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.bar-icon-ring {
|
|
fill: rgba(255, 255, 255, 0.1);
|
|
stroke: rgba(255, 255, 255, 0.18);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.bar-icon {
|
|
opacity: 0.96;
|
|
}
|
|
|
|
.bar-bonus-dot {
|
|
fill: rgba(255, 224, 132, 0.96);
|
|
stroke: rgba(9, 19, 31, 0.7);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.page-grid {
|
|
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
|
|
align-items: start;
|
|
}
|
|
|
|
.stack-column,
|
|
.stack-form {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stack-form--spacious {
|
|
gap: 1.4rem;
|
|
}
|
|
|
|
.tracker-form,
|
|
.settings-section {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.section-head__actions {
|
|
display: flex;
|
|
gap: 0.7rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.field-grid--single {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.field-grid--two {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.field-grid--three {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.field-grid--four {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.sport-choice-field {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.sport-choice-field legend {
|
|
padding: 0;
|
|
color: var(--muted);
|
|
font-size: 0.93rem;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.sport-choice-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.sport-choice-list--single {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.sport-choice {
|
|
display: block;
|
|
}
|
|
|
|
.sport-choice input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sport-choice__card {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
min-height: 100%;
|
|
padding: 1rem 1.05rem;
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
|
|
}
|
|
|
|
.sport-choice__card img {
|
|
width: 1.7rem;
|
|
height: 1.7rem;
|
|
opacity: 0.96;
|
|
}
|
|
|
|
.sport-choice__card strong {
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.sport-choice__card small {
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.sport-choice__card--toggle {
|
|
min-height: 100%;
|
|
align-content: center;
|
|
}
|
|
|
|
.sport-choice input:checked + .sport-choice__card {
|
|
border-color: rgba(139, 228, 255, 0.44);
|
|
background: linear-gradient(180deg, rgba(96, 184, 255, 0.18), rgba(255, 255, 255, 0.08));
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 28px rgba(8, 28, 43, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.sport-choice input:focus-visible + .sport-choice__card {
|
|
outline: 2px solid rgba(139, 228, 255, 0.46);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
label {
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
label span {
|
|
font-size: 0.93rem;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
select,
|
|
textarea {
|
|
width: 100%;
|
|
border: 1px solid var(--input-border);
|
|
border-radius: 16px;
|
|
background: var(--input-bg);
|
|
color: var(--text);
|
|
padding: 0.9rem 1rem;
|
|
outline: none;
|
|
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
select {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
option,
|
|
optgroup {
|
|
background: var(--bg-soft);
|
|
color: var(--text);
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
border-color: rgba(139, 228, 255, 0.5);
|
|
background: var(--input-bg-focus);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 11rem;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
accent-color: var(--primary-strong);
|
|
}
|
|
|
|
.range-card {
|
|
padding: 1rem;
|
|
border-radius: var(--radius-md);
|
|
background: var(--track-surface);
|
|
border: 1px solid var(--track-accent);
|
|
transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
|
|
}
|
|
|
|
.range-card output {
|
|
font-size: 1.7rem;
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.preview-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-color: var(--track-accent);
|
|
box-shadow: 0 24px 70px rgba(4, 18, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.preview-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -12% -25% auto;
|
|
width: 14rem;
|
|
height: 14rem;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, var(--track-glow), transparent 70%);
|
|
pointer-events: none;
|
|
transition: background 220ms ease, transform 220ms ease;
|
|
}
|
|
|
|
.preview-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 0.8rem;
|
|
}
|
|
|
|
.preview-status__icon {
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
border-radius: 20px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.preview-status__icon img {
|
|
width: 2.3rem;
|
|
height: 2.3rem;
|
|
}
|
|
|
|
.preview-status__label {
|
|
margin: 0;
|
|
font-size: 1.55rem;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.preview-scoreline {
|
|
margin: 0 0 1rem;
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.preview-scoreline span {
|
|
color: var(--text);
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.component-list,
|
|
.detail-grid {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.component-list div,
|
|
.detail-grid div,
|
|
.user-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.85rem;
|
|
padding: 0.85rem 0.95rem;
|
|
border-radius: 15px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.component-list dt,
|
|
.detail-grid dt {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.component-list dd,
|
|
.detail-grid dd {
|
|
margin: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.section-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 0.95rem;
|
|
}
|
|
|
|
.push-panel {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.push-panel h5 {
|
|
margin: 0 0 0.35rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.push-panel [data-push-status][data-tone="success"] {
|
|
color: var(--good);
|
|
}
|
|
|
|
.push-panel [data-push-status][data-tone="error"] {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.push-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.primary-button,
|
|
.ghost-button,
|
|
.button-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 3rem;
|
|
padding: 0.75rem 1.2rem;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
|
|
}
|
|
|
|
.primary-button,
|
|
.button-link {
|
|
color: #092033;
|
|
font-weight: 700;
|
|
background: linear-gradient(180deg, rgba(164, 239, 255, 0.98), rgba(95, 198, 255, 0.78));
|
|
box-shadow: 0 16px 30px rgba(59, 167, 230, 0.28);
|
|
}
|
|
|
|
.primary-button:hover,
|
|
.ghost-button:hover,
|
|
.button-link:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ghost-button,
|
|
.ghost-link {
|
|
color: var(--text);
|
|
border: 1px solid var(--control-soft-border);
|
|
background: var(--control-soft-bg);
|
|
}
|
|
|
|
.ghost-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 2.75rem;
|
|
padding: 0.55rem 0.95rem;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.ghost-button--small {
|
|
min-height: 2.45rem;
|
|
padding: 0.55rem 0.95rem;
|
|
}
|
|
|
|
.archive-items,
|
|
.user-list {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.archive-summary-section {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.archive-page {
|
|
display: grid;
|
|
}
|
|
|
|
.archive-shell {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 1.2rem;
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
background: var(--archive-shell-bg);
|
|
border-color: var(--archive-shell-border);
|
|
}
|
|
|
|
.archive-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.archive-header__meta {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.archive-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.85rem 0.95rem;
|
|
border-radius: 18px;
|
|
background: var(--archive-toolbar-bg);
|
|
border: 1px solid var(--archive-toolbar-border);
|
|
}
|
|
|
|
.archive-toolbar--compact {
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
.archive-switcher {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.35rem;
|
|
padding: 0.25rem;
|
|
border-radius: 999px;
|
|
background: var(--archive-switcher-bg);
|
|
border: 1px solid var(--archive-switcher-border);
|
|
}
|
|
|
|
.archive-switcher__item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 2.45rem;
|
|
padding: 0.45rem 0.9rem;
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.archive-switcher__item.active {
|
|
color: var(--text);
|
|
background: var(--archive-switcher-active-bg);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.archive-filter {
|
|
display: flex;
|
|
align-items: end;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.archive-filter label {
|
|
min-width: 13rem;
|
|
}
|
|
|
|
.archive-filter select {
|
|
background: var(--archive-select-bg);
|
|
border-color: var(--archive-select-border);
|
|
}
|
|
|
|
.archive-filter select:focus {
|
|
background: var(--archive-select-focus-bg);
|
|
}
|
|
|
|
.archive-workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
|
|
gap: 1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.archive-main {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.archive-rows {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.archive-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) auto auto;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 18px;
|
|
background: var(--archive-row-bg);
|
|
border: 1px solid var(--archive-row-border);
|
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
|
}
|
|
|
|
.archive-row:hover,
|
|
.archive-row.active {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(139, 228, 255, 0.28);
|
|
background: var(--archive-row-active-bg);
|
|
}
|
|
|
|
.archive-row__main,
|
|
.archive-row__meta {
|
|
display: grid;
|
|
gap: 0.18rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-row__main strong,
|
|
.archive-row__title-group strong {
|
|
font-size: 1rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.archive-row__main span,
|
|
.archive-row__meta span,
|
|
.archive-row__title-group span,
|
|
.archive-row__hint {
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
overflow-wrap: normal;
|
|
word-break: normal;
|
|
hyphens: auto;
|
|
}
|
|
|
|
.archive-row__meta {
|
|
justify-items: end;
|
|
text-align: right;
|
|
}
|
|
|
|
.archive-row__meta--stack {
|
|
justify-items: start;
|
|
text-align: left;
|
|
}
|
|
|
|
.archive-row__hint {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.archive-row__title-group span,
|
|
.archive-row__meta span {
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.archive-row--summary {
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) auto;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.archive-row--summary .archive-row__main {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: start;
|
|
}
|
|
|
|
.archive-row--summary .status-badge {
|
|
justify-self: end;
|
|
align-self: start;
|
|
}
|
|
|
|
.archive-row--week .archive-row__main--week {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.archive-row--week .archive-row__main--week .status-badge,
|
|
.archive-row--month .archive-row__main--month .status-badge {
|
|
justify-self: start;
|
|
}
|
|
|
|
.archive-row--month .archive-row__main--month {
|
|
grid-template-columns: 1fr;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.archive-row--summary .archive-row__hint {
|
|
align-self: start;
|
|
}
|
|
|
|
.archive-row__title-group {
|
|
display: grid;
|
|
gap: 0.18rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 1.7rem;
|
|
padding: 0.2rem 0.65rem;
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
border: 1px solid transparent;
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
line-height: 1.25;
|
|
text-align: center;
|
|
}
|
|
|
|
.status-badge--ready {
|
|
color: #082336;
|
|
background: rgba(127, 243, 187, 0.92);
|
|
}
|
|
|
|
.status-badge--pending {
|
|
color: var(--text);
|
|
background: rgba(139, 228, 255, 0.14);
|
|
border-color: rgba(139, 228, 255, 0.22);
|
|
}
|
|
|
|
.status-badge--blocked {
|
|
color: var(--text);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.archive-detail {
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__panel {
|
|
display: grid;
|
|
gap: 1rem;
|
|
padding: 1.15rem;
|
|
border-radius: var(--radius-xl);
|
|
position: sticky;
|
|
top: 1.25rem;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
background: var(--archive-detail-bg);
|
|
border-color: var(--archive-shell-border);
|
|
}
|
|
|
|
.archive-detail__top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__close {
|
|
display: none;
|
|
}
|
|
|
|
.archive-detail__status-row,
|
|
.archive-detail__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
flex-wrap: wrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__single-action form,
|
|
.archive-detail__actions form {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__single-action {
|
|
display: flex;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__week-status {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.archive-detail__status-note {
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.archive-detail__status-note p {
|
|
margin: 0;
|
|
}
|
|
|
|
.archive-mini-list {
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.archive-mini-list__row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.7rem;
|
|
align-items: center;
|
|
padding: 0.72rem 0.85rem;
|
|
border-radius: 14px;
|
|
background: rgba(255, 255, 255, 0.07);
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__panel > *,
|
|
.archive-detail__top > *,
|
|
.archive-detail__status-row > *,
|
|
.archive-detail__actions > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-detail__actions .ghost-link,
|
|
.archive-detail__actions .ghost-button,
|
|
.archive-detail__single-action .primary-button {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
.archive-detail__status-row .chart-chip {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
text-align: center;
|
|
}
|
|
|
|
.archive-detail__single-action .primary-button {
|
|
width: 100%;
|
|
}
|
|
|
|
.detail-grid--archive div {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
|
align-items: flex-start;
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-grid--archive-day {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.detail-grid--archive-day div {
|
|
display: grid;
|
|
gap: 0.28rem;
|
|
align-content: start;
|
|
}
|
|
|
|
.detail-grid--archive-day dt,
|
|
.detail-grid--archive-day dd {
|
|
min-width: 0;
|
|
}
|
|
|
|
.detail-grid--archive-day dd {
|
|
text-align: left;
|
|
white-space: normal;
|
|
}
|
|
|
|
.detail-grid--archive dd,
|
|
.archive-mini-list__row span,
|
|
.note-box p {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.detail-grid--archive dd {
|
|
text-align: right;
|
|
}
|
|
|
|
.archive-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.archive-summary-card {
|
|
display: grid;
|
|
gap: 0.7rem;
|
|
padding: 1rem 1.05rem;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.archive-summary-card__head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.8rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.archive-summary-card__head strong {
|
|
display: block;
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.summary-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 2.15rem;
|
|
min-height: 1.55rem;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: rgba(139, 228, 255, 0.16);
|
|
border: 1px solid rgba(139, 228, 255, 0.24);
|
|
color: var(--text);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.chart-chip--muted {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.archive-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
padding: 1rem 1.05rem;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid transparent;
|
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
|
}
|
|
|
|
.archive-item span {
|
|
display: block;
|
|
color: var(--muted);
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.archive-item:hover,
|
|
.archive-item.active {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(139, 228, 255, 0.34);
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.archive-item__meta {
|
|
text-align: right;
|
|
}
|
|
|
|
.archive-item__actions {
|
|
display: flex;
|
|
gap: 0.55rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.archive-item__actions--stack {
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.archive-item__actions--stack form {
|
|
margin: 0;
|
|
}
|
|
|
|
.archive-action {
|
|
min-height: 2.4rem;
|
|
padding-inline: 0.85rem;
|
|
}
|
|
|
|
.sport-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.55rem;
|
|
padding: 0.45rem 0.75rem;
|
|
border-radius: 999px;
|
|
background: rgba(118, 228, 255, 0.1);
|
|
border: 1px solid rgba(118, 228, 255, 0.14);
|
|
color: var(--text);
|
|
line-height: 1;
|
|
}
|
|
|
|
.sport-pill img {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.sport-pill span {
|
|
margin-top: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.sport-pill--soft {
|
|
margin-top: 0;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.sport-pill--inline {
|
|
margin-top: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sport-pill-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.45rem;
|
|
margin-top: 0.45rem;
|
|
}
|
|
|
|
.sport-pill-group--inline {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.note-box {
|
|
padding: 1rem;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.note-box--summary p {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.note-box h4 {
|
|
margin: 0 0 0.55rem;
|
|
}
|
|
|
|
.empty-state {
|
|
color: var(--muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.band-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.band-card {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.sport-type-list {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.preset-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
margin-bottom: 0.95rem;
|
|
}
|
|
|
|
.preset-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
padding: 0.65rem 0.9rem;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(138, 210, 235, 0.22);
|
|
background: rgba(255, 255, 255, 0.08);
|
|
color: var(--text);
|
|
backdrop-filter: blur(20px);
|
|
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
|
|
}
|
|
|
|
.preset-pill:hover {
|
|
transform: translateY(-1px);
|
|
border-color: rgba(139, 228, 255, 0.4);
|
|
background: rgba(255, 255, 255, 0.12);
|
|
}
|
|
|
|
.preset-pill img {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.preset-pill[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sport-type-card {
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.sport-type-card__actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7rem;
|
|
}
|
|
|
|
.checkbox-row span {
|
|
display: grid;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.checkbox-row small {
|
|
color: var(--muted);
|
|
font-size: 0.86rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.checkbox-row--panel {
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 18px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
min-height: 100%;
|
|
}
|
|
|
|
.checkbox-row--tall {
|
|
align-items: flex-start;
|
|
padding-top: 1.05rem;
|
|
padding-bottom: 1.05rem;
|
|
}
|
|
|
|
.checkbox-row input {
|
|
width: auto;
|
|
}
|
|
|
|
.auth-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.auth-card {
|
|
width: min(100%, 30rem);
|
|
}
|
|
|
|
.auth-card form {
|
|
margin-top: 1.4rem;
|
|
}
|
|
|
|
.button-link {
|
|
width: fit-content;
|
|
}
|
|
|
|
.page-track[data-track-mood="storm"] {
|
|
--track-accent: rgba(255, 143, 143, 0.38);
|
|
--track-surface: rgba(255, 143, 143, 0.08);
|
|
--track-glow: rgba(255, 126, 126, 0.22);
|
|
}
|
|
|
|
.page-track[data-track-mood="heavy"] {
|
|
--track-accent: rgba(255, 191, 141, 0.34);
|
|
--track-surface: rgba(255, 191, 141, 0.08);
|
|
--track-glow: rgba(255, 191, 141, 0.18);
|
|
}
|
|
|
|
.page-track[data-track-mood="steady"] {
|
|
--track-accent: rgba(139, 228, 255, 0.34);
|
|
--track-surface: rgba(255, 255, 255, 0.08);
|
|
--track-glow: rgba(139, 228, 255, 0.18);
|
|
}
|
|
|
|
.page-track[data-track-mood="bright"] {
|
|
--track-accent: rgba(143, 243, 198, 0.34);
|
|
--track-surface: rgba(143, 243, 198, 0.08);
|
|
--track-glow: rgba(143, 243, 198, 0.2);
|
|
}
|
|
|
|
.page-track[data-track-mood="radiant"] {
|
|
--track-accent: rgba(255, 233, 140, 0.35);
|
|
--track-surface: rgba(255, 233, 140, 0.1);
|
|
--track-glow: rgba(255, 233, 140, 0.22);
|
|
}
|
|
|
|
.page-track[data-track-mood] .aurora-one,
|
|
.page-track[data-track-mood] .aurora-two,
|
|
.page-track[data-track-mood] .range-card,
|
|
.page-track[data-track-mood] .preview-card,
|
|
.page-track[data-track-mood] .preview-card::before {
|
|
transition: background 220ms ease, opacity 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
|
|
}
|
|
|
|
.page-track[data-track-mood="storm"] .aurora-one,
|
|
.page-track[data-track-mood="storm"] .aurora-two {
|
|
opacity: 0.5;
|
|
background: radial-gradient(circle, rgba(255, 128, 128, 0.32), transparent 70%);
|
|
}
|
|
|
|
.page-track[data-track-mood="heavy"] .aurora-one,
|
|
.page-track[data-track-mood="heavy"] .aurora-two {
|
|
opacity: 0.55;
|
|
background: radial-gradient(circle, rgba(255, 192, 128, 0.3), transparent 70%);
|
|
}
|
|
|
|
.page-track[data-track-mood="bright"] .aurora-one,
|
|
.page-track[data-track-mood="bright"] .aurora-two {
|
|
opacity: 0.72;
|
|
background: radial-gradient(circle, rgba(127, 243, 187, 0.3), transparent 70%);
|
|
}
|
|
|
|
.page-track[data-track-mood="radiant"] .aurora-one,
|
|
.page-track[data-track-mood="radiant"] .aurora-two {
|
|
opacity: 0.78;
|
|
background: radial-gradient(circle, rgba(255, 228, 122, 0.32), transparent 70%);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
position: static;
|
|
min-height: auto;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.topbar,
|
|
.section-head,
|
|
.form-actions {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.hero-grid,
|
|
.dashboard-grid,
|
|
.page-grid,
|
|
.stats-grid,
|
|
.field-grid--two,
|
|
.field-grid--three,
|
|
.field-grid--four,
|
|
.band-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sport-choice-list {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-nav {
|
|
position: fixed;
|
|
left: 0.8rem;
|
|
right: 0.8rem;
|
|
bottom: max(0.8rem, env(safe-area-inset-bottom));
|
|
z-index: 30;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 0.45rem;
|
|
padding: 0.6rem;
|
|
border-radius: 28px;
|
|
}
|
|
|
|
.mobile-nav a {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.7rem 0.5rem;
|
|
border-radius: 22px;
|
|
color: var(--muted);
|
|
transition: transform 180ms ease, background 180ms ease, color 180ms ease;
|
|
}
|
|
|
|
.mobile-nav a.active {
|
|
background: var(--nav-hover-bg);
|
|
color: var(--text);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.mobile-nav a span {
|
|
font-size: 0.76rem;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.mobile-nav .nav-icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
body.is-authenticated .content {
|
|
padding-bottom: calc(6.8rem + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.site-footer {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.bar-chart {
|
|
overflow-x: auto;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.archive-item,
|
|
.preview-status,
|
|
.sport-type-card__actions {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.archive-summary-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.archive-header,
|
|
.archive-toolbar,
|
|
.archive-workspace,
|
|
.archive-list-header,
|
|
.archive-row,
|
|
.archive-row--summary {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.archive-header,
|
|
.archive-toolbar,
|
|
.archive-list-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.archive-workspace {
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.archive-row__meta {
|
|
justify-items: start;
|
|
text-align: left;
|
|
}
|
|
|
|
.archive-row--summary .archive-row__main {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.archive-row--summary .status-badge {
|
|
justify-self: start;
|
|
}
|
|
|
|
.archive-row--day {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: start;
|
|
gap: 0.75rem;
|
|
padding: 0.9rem 0.95rem;
|
|
}
|
|
|
|
.archive-row--day .archive-row__main {
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
.archive-row--day .archive-row__meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
text-align: right;
|
|
gap: 0.12rem;
|
|
}
|
|
|
|
.archive-row--day .archive-row__hint {
|
|
display: none;
|
|
}
|
|
|
|
.archive-row--day .archive-row__main strong {
|
|
font-size: 1.02rem;
|
|
}
|
|
|
|
.archive-row--day .archive-row__main span,
|
|
.archive-row--day .archive-row__meta span {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.archive-detail {
|
|
scroll-margin-top: 1rem;
|
|
}
|
|
|
|
.calendar-detail {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.calendar-detail__score {
|
|
justify-items: start;
|
|
}
|
|
|
|
.line-chart {
|
|
min-height: 9.5rem;
|
|
}
|
|
|
|
.bar-chart {
|
|
min-height: 10rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.shell {
|
|
padding: 0.8rem;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.sidebar,
|
|
.hero-card,
|
|
.metric-card,
|
|
.chart-card,
|
|
.form-panel,
|
|
.detail-card,
|
|
.info-card,
|
|
.preview-card,
|
|
.archive-list,
|
|
.topbar {
|
|
border-radius: 22px;
|
|
}
|
|
|
|
.hero-score {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.chart-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.line-chart {
|
|
min-height: 8.75rem;
|
|
}
|
|
|
|
.bar-chart {
|
|
min-height: 9.5rem;
|
|
}
|
|
|
|
.mobile-nav {
|
|
left: 0.7rem;
|
|
right: 0.7rem;
|
|
bottom: max(0.7rem, env(safe-area-inset-bottom));
|
|
padding: 0.5rem;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.mobile-nav a {
|
|
padding: 0.62rem 0.35rem;
|
|
}
|
|
|
|
.mobile-nav a span {
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.site-footer {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.archive-shell {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.archive-switcher,
|
|
.archive-filter,
|
|
.archive-header__meta {
|
|
width: 100%;
|
|
}
|
|
|
|
.archive-filter label {
|
|
min-width: 0;
|
|
}
|
|
|
|
}
|