:root {
--primary: #1f6b4f;
--primary-dark: #18573f;
--primary-light: #e3efe9;
--primary-lighter: #f0f7f3;
--primary-rgb: 31, 107, 79;
--on-primary: #ffffff;
--bg: #f6f8f5;
--bg-soft: #eaf1ec;
--card: #ffffff;
--border: #e1e9e3;
--border-light: #edf2ef;
--border-strong: #d4ded8;
--scrollbar: #d4ded8;
--text: #1f2a25;
--text-secondary: #5c6b63;
--text-muted: #6f7a73;
--success: #34c759;
--success-light: #e3f9e9;
--warning: #ff9f0a;
--warning-light: #fff3e0;
--warning-bg: #fff8ee;
--warning-dark: #8a5a00;
--danger: #ff3b30;
--danger-light: #ffe5e3;
--brand-light: #eaf1ff;
--brand: #2b6cff;
--brand-dark: #0958d9;
--danger-bg: #fff5f4;
--danger-dark: #b02a20;
--info: #007aff;
--info-light: #e5f1ff;
--info-dark: #004c9e;
--high: #ff3b30;
--medium: #ff9f0a;
--low: #8e8e93;
--success-rgb: 52, 199, 89;
--warning-rgb: 255, 159, 10;
--danger-rgb: 255, 59, 48;
--low-rgb: 142, 142, 147;
--fs-2xs: 11px;
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 17px;
--fs-xl: 19px;
--fs-2xl: 23px;
--fs-3xl: 30px;
--fs-display: 52px;
--lh-tight: 1.2;
--lh-heading: 1.3;
--lh-body: 1.62;
--lh-caption: 1.45;
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 22px;
--radius-xl: 28px;
--radius-pill: 980px;
--shadow-sm: 0 1px 2px rgba(22, 48, 38, 0.05);
--shadow: 0 1px 3px rgba(22, 48, 38, 0.05), 0 4px 14px rgba(22, 48, 38, 0.05);
--shadow-md: 0 8px 20px rgba(22, 48, 38, 0.08), 0 2px 6px rgba(22, 48, 38, 0.04);
--shadow-lg: 0 20px 50px rgba(22, 48, 38, 0.14);
--glass: rgba(255, 255, 255, 0.72);
--glass-strong: rgba(255, 255, 255, 0.85);
--glass-border: rgba(0, 0, 0, 0.06);
--grad-primary: linear-gradient(180deg, #2a7d5d 0%, #1f6b4f 100%);
--grad-primary-soft: linear-gradient(135deg, #e3efe9 0%, #f0f7f3 100%);
--grad-bg: none;
--sidebar-w: 248px;
--font: "Sarasa Gothic SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 40px;
--sp-8: 48px;
--sp-0-5: 2px;
--sp-1-5: 6px;
--sp-2-5: 10px;
--sp-3-5: 14px;
--sz-min-col: 140px;
--sz-max-col: 240px;
--sz-modal-maxh: 52vh;
--ease-out: cubic-bezier(0.32, 0.72, 0, 1);
--transition-fast: 150ms var(--ease-out);
--transition: 200ms var(--ease-out);
--transition-slow: 300ms var(--ease-out);
--ring-focus: 0 0 0 3px rgba(var(--primary-rgb), 0.22);
}
:root {
--dark-primary: #e8843c;
--dark-primary-dark: #d9762e;
--dark-primary-light: rgba(232, 132, 60, 0.18);
--dark-primary-lighter: rgba(232, 132, 60, 0.10);
--dark-primary-rgb: 232, 132, 60;
--dark-on-primary: #1c1c1e;
--dark-bg: #1c1c1e;
--dark-bg-soft: #2a2a2e;
--dark-card: #2a2a2e;
--dark-border: #3a3a3e;
--dark-border-light: #333338;
--dark-scrollbar: #3a3a3c;
--dark-border-strong: #4a4a4e;
--dark-text: #f5f5f7;
--dark-text-secondary: #bcb4a8;
--dark-text-muted: #9a9388;
--dark-success: #30d158;
--dark-success-light: rgba(48, 209, 88, 0.18);
--dark-warning: #ffd60a;
--dark-warning-light: rgba(255, 214, 10, 0.16);
--dark-warning-bg: rgba(255, 214, 10, 0.10);
--dark-warning-dark: #ffd60a;
--dark-danger: #ff453a;
--dark-danger-light: rgba(255, 69, 58, 0.18);
--dark-danger-bg: rgba(255, 69, 58, 0.12);
--dark-danger-dark: #ff453a;
--dark-info: #0a84ff;
--dark-info-light: rgba(10, 132, 255, 0.18);
--dark-info-dark: #0a84ff;
--dark-high: #ff453a;
--dark-medium: #ffd60a;
--dark-low: #8e8e93;
--dark-success-rgb: 48, 209, 88;
--dark-warning-rgb: 255, 214, 10;
--dark-danger-rgb: 255, 69, 58;
--dark-low-rgb: 142, 142, 147;
--dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--dark-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
--dark-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
--dark-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.62);
--dark-glass: rgba(28, 28, 30, 0.62);
--dark-glass-strong: rgba(28, 28, 30, 0.8);
--dark-glass-border: rgba(255, 255, 255, 0.08);
--dark-grad-primary: linear-gradient(180deg, #f0934f 0%, #e8843c 100%);
--dark-grad-primary-soft: linear-gradient(135deg, rgba(232, 132, 60, 0.16) 0%, rgba(232, 132, 60, 0.06) 100%);
--dark-grad-bg: none;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary: var(--dark-primary);
--primary-dark: var(--dark-primary-dark);
--primary-light: var(--dark-primary-light);
--primary-lighter: var(--dark-primary-lighter);
--primary-rgb: var(--dark-primary-rgb);
--success-rgb: var(--dark-success-rgb);
--warning-rgb: var(--dark-warning-rgb);
--danger-rgb: var(--dark-danger-rgb);
--low-rgb: var(--dark-low-rgb);
--on-primary: var(--dark-on-primary);
--bg: var(--dark-bg);
--bg-soft: var(--dark-bg-soft);
--card: var(--dark-card);
--border: var(--dark-border);
--border-light: var(--dark-border-light);
--scrollbar: var(--dark-scrollbar);
--border-strong: var(--dark-border-strong);
--text: var(--dark-text);
--text-secondary: var(--dark-text-secondary);
--text-muted: var(--dark-text-muted);
--success: var(--dark-success);
--success-light: var(--dark-success-light);
--warning: var(--dark-warning);
--warning-light: var(--dark-warning-light);
--warning-bg: var(--dark-warning-bg);
--warning-dark: var(--dark-warning-dark);
--danger: var(--dark-danger);
--danger-light: var(--dark-danger-light);
--danger-bg: var(--dark-danger-bg);
--danger-dark: var(--dark-danger-dark);
--info: var(--dark-info);
--info-light: var(--dark-info-light);
--info-dark: var(--dark-info-dark);
--high: var(--dark-high);
--medium: var(--dark-medium);
--low: var(--dark-low);
--shadow-sm: var(--dark-shadow-sm);
--shadow: var(--dark-shadow);
--shadow-md: var(--dark-shadow-md);
--shadow-lg: var(--dark-shadow-lg);
--glass: var(--dark-glass);
--glass-strong: var(--dark-glass-strong);
--glass-border: var(--dark-glass-border);
--grad-primary: var(--dark-grad-primary);
--grad-primary-soft: var(--dark-grad-primary-soft);
--grad-bg: var(--dark-grad-bg);
.btn-secondary { background: var(--border-strong); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }
.btn-ghost { background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--text); }
.ext-seg button.active { background: var(--border-strong); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
input[type="date"] { color-scheme: dark; }
}
}
:root[data-theme="dark"] {
--primary: var(--dark-primary);
--primary-dark: var(--dark-primary-dark);
--primary-light: var(--dark-primary-light);
--primary-lighter: var(--dark-primary-lighter);
--primary-rgb: var(--dark-primary-rgb);
--success-rgb: var(--dark-success-rgb);
--warning-rgb: var(--dark-warning-rgb);
--danger-rgb: var(--dark-danger-rgb);
--low-rgb: var(--dark-low-rgb);
--on-primary: var(--dark-on-primary);
--bg: var(--dark-bg);
--bg-soft: var(--dark-bg-soft);
--card: var(--dark-card);
--border: var(--dark-border);
--border-light: var(--dark-border-light);
--scrollbar: var(--dark-scrollbar);
--border-strong: var(--dark-border-strong);
--text: var(--dark-text);
--text-secondary: var(--dark-text-secondary);
--text-muted: var(--dark-text-muted);
--success: var(--dark-success);
--success-light: var(--dark-success-light);
--warning: var(--dark-warning);
--warning-light: var(--dark-warning-light);
--warning-bg: var(--dark-warning-bg);
--warning-dark: var(--dark-warning-dark);
--danger: var(--dark-danger);
--danger-light: var(--dark-danger-light);
--danger-bg: var(--dark-danger-bg);
--danger-dark: var(--dark-danger-dark);
--info: var(--dark-info);
--info-light: var(--dark-info-light);
--info-dark: var(--dark-info-dark);
--high: var(--dark-high);
--medium: var(--dark-medium);
--low: var(--dark-low);
--shadow-sm: var(--dark-shadow-sm);
--shadow: var(--dark-shadow);
--shadow-md: var(--dark-shadow-md);
--shadow-lg: var(--dark-shadow-lg);
--glass: var(--dark-glass);
--glass-strong: var(--dark-glass-strong);
--glass-border: var(--dark-glass-border);
--grad-primary: var(--dark-grad-primary);
--grad-primary-soft: var(--dark-grad-primary-soft);
--grad-bg: var(--dark-grad-bg);
.btn-secondary { background: var(--border-strong); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }
.btn-ghost { background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--text); }
.ext-seg button.active { background: var(--border-strong); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
input[type="date"] { color-scheme: dark; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
.nav-item .nav-icon,
.mn-icon {
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; color: inherit;
}
.nav-item .nav-icon svg,
.mn-icon svg,
.stat-icon svg,
.btn-icon svg,
[data-icon] svg {
width: 20px; height: 20px; display: block; flex-shrink: 0;
}
.mn-icon svg { width: 19px; height: 19px; }
.ui-ic { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none; color: inherit; line-height: 1; }
.ui-ic svg { width: 100%; height: 100%; display: block; }
.ks-ico svg { width: 15px; height: 15px; }
.ks-ico { display: inline-flex; align-items: center; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-icon svg { width: 18px; height: 18px; }
.stat-icon svg { width: 22px; height: 22px; }
.theme-toggle { background: var(--bg-soft); border-radius: 50%; }
.theme-toggle svg { width: 18px; height: 18px; }
#btnLogoutTop { display: none !important; }
.btn-icon.theme-toggle {
background: var(--success-light);
color: var(--success);
border: 1px solid rgba(var(--success-rgb), 0.25);
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-icon.theme-toggle:hover { background: rgba(var(--success-rgb), 0.22); }
:root[data-theme="dark"] .btn-icon.theme-toggle {
background: rgba(var(--primary-rgb), 0.20);
color: var(--primary);
border-color: rgba(var(--primary-rgb), 0.38);
}
:root[data-theme="dark"] .btn-icon.theme-toggle:hover { background: rgba(var(--primary-rgb), 0.32); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .btn-icon.theme-toggle {
background: rgba(var(--primary-rgb), 0.20);
color: var(--primary);
border-color: rgba(var(--primary-rgb), 0.38);
}
:root:not([data-theme="light"]) .btn-icon.theme-toggle:hover { background: rgba(var(--primary-rgb), 0.32); }
}
.credit-list {
margin-top: var(--sp-3);
display: flex; flex-direction: column; gap: var(--sp-2);
max-height: 188px; overflow-y: auto;
}
.credit-item {
display: flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-sm); color: var(--text-secondary);
background: var(--bg-soft); border: 1px solid var(--border-light);
border-radius: 10px; padding: var(--sp-2) var(--sp-3);
}
.credit-dot { color: var(--success); display: inline-flex; flex-shrink: 0; }
.credit-dot svg { width: 14px; height: 14px; display: block; }
.credit-title {
flex: 1; min-width: 0; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.credit-date { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.credit-more { font-size: var(--fs-xs); color: var(--text-muted); padding-left: var(--sp-1); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: var(--fs-md);
line-height: var(--lh-body);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; accent-color: var(--primary); }
.btn, .card, .stat-card, .nav-item, .mobile-nav-item, .setting-item, .recent-item {
transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, background-color 0.22s ease-out, border-color 0.22s ease-out, color 0.22s ease-out;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.30); }
.card:hover, .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.nav-item:hover, .mobile-nav-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.setting-item:hover, .recent-item:hover { background: var(--bg-soft); }
.reveal { will-change: opacity, transform; }
.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.28s ease-out, transform 0.28s ease-out; }
.js-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.btn, .card, .nav-item, .stat-card { transition: none !important; }
}
a { color: var(--primary); text-decoration: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
.app {
display: flex;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-w);
background: var(--card);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 100;
transition: transform 0.25s ease;
}
.sidebar-header {
padding: var(--sp-5) var(--sp-5) var(--sp-4);
border-bottom: 1px solid var(--border-light);
}
.sidebar-logo {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-xl);
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.sidebar-logo .logo-icon {
width: 28px; height: 28px;
background: var(--primary);
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: var(--on-primary); font-size: var(--fs-lg);
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.28);
}
.sidebar-nav {
flex: 1;
padding: var(--sp-3) var(--sp-2-5);
overflow-y: auto;
}
.nav-group {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin-bottom: var(--sp-2);
}
.nav-group:last-child { margin-bottom: 0; }
.nav-group-title {
font-size: var(--fs-xs);
font-weight: 600;
text-transform: none;
letter-spacing: 0.02em;
color: var(--text-muted);
padding: var(--sp-2-5) var(--sp-3) var(--sp-1-5);
}
.nav-subitem {
padding: 9px 13px 9px var(--sp-6);
font-size: var(--fs-base);
margin-bottom: var(--sp-0-5);
color: var(--text-secondary);
}
.nav-subitem .nav-icon { flex-shrink: 0; }
.nav-subitem:hover { background: var(--card); color: var(--text); }
.nav-subitem.active {
background: var(--primary-light);
color: var(--primary);
font-weight: 600;
}
.nav-group .nav-subitem.active::before { display: none; }
.nav-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 9px var(--sp-3);
border-radius: 8px;
font-size: var(--fs-md);
color: var(--text);
cursor: pointer;
transition: all 0.18s ease;
margin-bottom: var(--sp-0-5);
user-select: none;
position: relative;
}
.nav-item:hover { background: var(--bg-soft); color: var(--text); }
.nav-item.active {
background: var(--primary-light);
color: var(--primary);
font-weight: 600;
}
.nav-item.active::before { display: none; }
.nav-item .nav-icon { flex-shrink: 0; }
.nav-item .nav-badge {
margin-left: auto;
background: var(--danger);
color: #fff;
font-size: var(--fs-2xs);
padding: 1px var(--sp-2);
border-radius: 10px;
font-weight: 600;
min-width: 18px;
text-align: center;
}
.sidebar-footer {
flex-shrink: 0;
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border-light);
font-size: var(--fs-xs);
color: var(--text-muted);
}
.sidebar-user-badge {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-2-5);
margin-bottom: var(--sp-2);
border-radius: 12px;
cursor: pointer;
background: var(--primary-light);
transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.sidebar-user-badge:hover { background: var(--bg-soft); box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
.sidebar-user-badge:active { transform: scale(0.98); }
.sidebar-user-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar-user-badge .user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--grad-primary);
color: var(--on-primary);
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-sm); font-weight: 700;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}
.sidebar-user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sidebar-user-name {
font-size: var(--fs-md); font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-action { font-size: var(--fs-xs); color: var(--text-muted); }
.sidebar-user-power { margin-left: auto; color: var(--text-muted); display: flex; align-items: center; }
.sidebar-user-power span[data-icon] { font-size: 17px; line-height: 1; }
.main {
flex: 1;
margin-left: var(--sidebar-w);
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 0;
}
.topbar {
background: var(--glass);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--glass-border);
box-shadow: 0 4px 16px rgba(31, 27, 22, 0.05);
padding: var(--sp-4) 28px;
display: flex;
align-items: center;
gap: var(--sp-3);
position: sticky;
top: 0;
z-index: 50;
}
.topbar-title { font-size: var(--fs-lg); font-weight: 600; flex: 1; letter-spacing: -0.01em; }
.topbar > #btnNewTaskTop { margin-left: auto; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius);
font-size: var(--fs-base);
font-weight: 500;
transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
white-space: nowrap;
cursor: pointer;
}
.btn:focus-visible,
.btn-icon:focus-visible { outline: none; box-shadow: var(--ring-focus); }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.btn-primary { background: var(--primary); background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff), var(--primary)); color: var(--on-primary); border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.22); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--card); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border-strong); }
.btn-danger { background: var(--danger-light); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--on-primary); }
.btn-ghost { color: var(--text-secondary); padding: var(--sp-2) var(--sp-3); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn-sm { padding: var(--sp-1-5) var(--sp-3); font-size: var(--fs-sm); }
.btn-icon {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
color: var(--text-secondary);
transition: background-color var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--bg-soft); color: var(--text); }
.content {
flex: 1;
padding: 28px;
max-width: 1120px;
width: 100%;
margin: 0 auto;
min-width: 0;
}
.page { display: none; }
.page.active { display: block; }
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: var(--sp-5);
box-shadow: var(--shadow);
transition: box-shadow var(--transition-slow), transform var(--transition-slow), border-color var(--transition-slow);
position: relative;
}
.card::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-light); }
.card-title { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); letter-spacing: -0.01em; }
.card-title[style*="space-between"] { flex-wrap: wrap; row-gap: var(--sp-1); }
.card-title[style*="space-between"] > :first-child { white-space: nowrap; min-width: 0; }
.card-title[style*="space-between"] > .link-btn { margin-left: auto; }
.card-center-v { display: flex; flex-direction: column; justify-content: center; }
.card-center-v .progress-ring-container { flex: 1; }
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: var(--sp-5);
box-shadow: var(--shadow);
transition: box-shadow var(--transition-slow), transform var(--transition-slow);
position: relative;
overflow: hidden;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stat-icon {
position: absolute; top: 18px; right: 18px;
width: 42px; height: 42px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-label { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: var(--sp-1); }
.stat-value { font-family: 'Inter', var(--font); font-size: var(--fs-3xl); font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -0.02em; }
.stat-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-4);
gap: var(--sp-3);
flex-wrap: wrap;
}
.section-title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; position: relative; padding-left: var(--sp-4); }
.section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; border-radius: 4px; background: var(--grad-primary); }
.greeting-block {
background: var(--grad-primary);
border-radius: var(--radius-lg);
padding: 26px 28px;
color: var(--on-primary);
margin-bottom: var(--sp-5);
position: relative;
overflow: hidden;
box-shadow: 0 14px 30px rgba(var(--primary-rgb), 0.25);
}
.greeting-block::after {
content: '';
position: absolute;
right: -20px; top: -20px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,0.10);
}
.greeting-block::before {
content: '';
position: absolute;
right: 60px; bottom: -40px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
}
.greeting-date { font-size: var(--fs-sm); opacity: 0.85; margin-bottom: var(--sp-2); position: relative; z-index: 1; }
.greeting-text { font-size: var(--fs-2xl); font-weight: 700; position: relative; z-index: 1; letter-spacing: -0.01em; }
.greeting-sub { font-size: var(--fs-sm); opacity: 0.9; margin-top: var(--sp-2); position: relative; z-index: 1; }
.recent-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.recent-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) 0;
font-size: var(--fs-base);
border-bottom: 1px solid var(--border-light);
}
.recent-item:last-child { border-bottom: none; }
.recent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.recent-text { flex: 1; color: var(--text-secondary); }
.recent-time { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.link-btn { background: none; border: none; color: var(--primary); font-size: var(--fs-sm); cursor: pointer; padding: var(--sp-0-5) var(--sp-2); border-radius: 6px; font-weight: 500; transition: background 0.15s ease; flex-shrink: 0; }
.link-btn:hover { background: var(--primary-light); }
.task-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.task-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
display: flex;
align-items: flex-start;
gap: var(--sp-3);
transition: all 0.18s ease;
box-shadow: var(--shadow);
}
.top3-add-row { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.top3-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.top3-item {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2-5) var(--sp-3);
background: var(--bg-soft);
border: 1px solid var(--border-light);
border-radius: var(--radius);
}
.top3-order {
width: 22px; height: 22px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--primary-light);
color: var(--primary);
font-size: var(--fs-xs); font-weight: 600;
}
.top3-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.top3-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top3-proj { flex-shrink: 0; }
.top3-item .btn-icon { flex-shrink: 0; }
.info-field { margin-bottom: var(--sp-3); }
.info-row { display: flex; gap: var(--sp-3); }
.info-row .info-field { flex: 1; min-width: 0; }
.info-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-1); letter-spacing: .02em; }
.info-value { font-size: var(--fs-base); color: var(--text); line-height: 1.5; }
.info-title { font-size: var(--fs-lg); font-weight: 700; }
.info-note { white-space: pre-wrap; color: var(--text-secondary); }
.info-empty { font-size: var(--fs-sm); color: var(--text-muted); }
.task-item:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.task-item.done { opacity: 0.6; }
.task-item.done .task-title { text-decoration: line-through; color: var(--text-muted); }
.task-item.overdue { border-left: 3px solid var(--danger); }
.task-list.overdue-extra .task-item { border-left: 3px solid var(--danger); }
.task-drag {
cursor: grab;
color: var(--text-muted);
font-size: var(--fs-md);
padding: var(--sp-0-5);
flex-shrink: 0;
line-height: 1.2;
user-select: none;
}
.task-drag:active { cursor: grabbing; }
.task-item.dragging { opacity: 0.4; }
.task-item.drag-over { border-top: 2px solid var(--primary); }
.task-check {
width: 21px; height: 21px;
border: 2px solid var(--border);
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
margin-top: 1px;
transition: all 0.18s ease;
}
.task-check:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); }
.task-check.checked { background: var(--success); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25); }
.task-check.checked::after { content: '\2713'; font-size: var(--fs-base); font-weight: 700; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: var(--fs-md); font-weight: 500; word-break: break-word; line-height: 1.45; }
.task-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; }
.task-tag {
font-size: var(--fs-xs);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 20px;
font-weight: 500;
white-space: nowrap;
line-height: 1.6;
}
.tag-priority-high { background: var(--danger-light); color: var(--danger); }
.tag-priority-medium { background: var(--warning-light); color: var(--warning); }
.tag-priority-low { background: var(--bg-soft); color: var(--low); }
.tag-category { background: var(--primary-light); color: var(--primary-dark); }
.tag-date { background: var(--bg-soft); color: var(--text-secondary); }
.tag-range { background: var(--primary-light); color: var(--primary-dark); }
.tag-overdue { background: var(--danger-light); color: var(--danger); font-weight: 600; }
.tag-duration { background: var(--bg-soft); color: var(--text-secondary); }
.tag-recurring { background: var(--info-light); color: var(--info); }
.tag-today { background: var(--warning-light); color: var(--warning); }
.tag-deadline { background: var(--warning-light); color: var(--warning); }
.tag-deadline-today { background: var(--danger-light); color: var(--danger); font-weight: 600; }
.tag-learning { background: var(--primary-light); color: var(--primary-dark); }
.tag-amber { background: var(--warning-light); color: var(--warning); font-weight: 600; }
.tag, [class*="tag-"], .task-proj-tag { border-radius: 999px; }
.learning-task-section { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
.learning-task-head { display: flex; align-items: center; justify-content: space-between; }
.learning-task-title { font-size: var(--fs-md); font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: var(--sp-2); }
.learning-task-count { font-size: var(--fs-sm); color: var(--text-muted); }
.learning-goal-done-pill { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--primary-dark); background: var(--primary-light); padding: var(--sp-0-5) var(--sp-2); border-radius: 20px; margin-left: var(--sp-2); vertical-align: middle; }
.learning-task-suggest { margin-top: var(--sp-1); }
.learning-task-suggest .goal-checkin-prefix { font-size: var(--fs-sm); color: var(--text-muted); }
.learning-task-suggest .goal-suggested-num { color: var(--primary); font-weight: 700; }
.task-flag-toggle.active { color: var(--primary); background: var(--primary-light); }
.task-flag-toggle[data-action="toggle-rec"].active { color: var(--info); background: var(--info-light); }
.task-flag-toggle[data-action="toggle-today"].active { color: var(--warning); background: var(--warning-light); }
.subtask-list { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.subtask-item { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; line-height: 1.45; }
.subtask-item.done .subtask-text { text-decoration: line-through; color: var(--text-muted); }
@media (min-width: 769px) {
.task-title { font-size: var(--fs-lg); }
.subtask-item { font-size: var(--fs-md); }
.task-meta { margin-top: var(--sp-3); }
}
.subtask-check { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--border-strong); flex: 0 0 auto; position: relative; margin-top: 1px; transition: background .15s, border-color .15s; box-sizing: border-box; }
.subtask-check.checked { background: var(--primary); border-color: var(--primary); }
.subtask-check.checked::after { content: ''; position: absolute; left: 4px; top: 0px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.subtask-text { flex: 1; word-break: break-word; }
.subtask-box-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.subtask-box-row .subtask-box-check { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.subtask-box-row .subtask-box { flex: 1; margin-bottom: 0; }
.subtask-box-remove { flex: 0 0 auto; width: 32px; height: 38px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; line-height: 1; transition: color .18s ease, border-color .18s ease; }
.subtask-box-remove:hover { color: var(--danger); border-color: var(--danger); }
.subtask-add-btn { margin-top: var(--sp-0-5); }
.task-note { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-2-5); font-size: var(--fs-sm); color: var(--text-secondary); background: var(--bg-soft); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.task-actions { display: flex; gap: var(--sp-0-5); flex-shrink: 0; }
.filters-bar {
display: flex;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
align-items: center;
}
.filter-input, .filter-select {
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-base);
background: var(--card);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.filter-input:focus, .filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }
.filter-input { flex: 1; min-width: 140px; }
.filter-select { min-width: 100px; cursor: pointer; }
.empty-state {
text-align: center;
padding: 56px var(--sp-5);
color: var(--text-muted);
}
.empty-state .empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 20px; background: var(--bg-soft); font-size: 30px; margin: 0 auto var(--sp-4); opacity: 0.9; }
.empty-state .empty-icon svg { width: 30px; height: 30px; }
.empty-state .empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); }
.empty-state .empty-desc { font-size: var(--fs-base); max-width: 320px; margin: 0 auto; line-height: 1.6; }
.empty-state .empty-btn { margin-top: var(--sp-5); }
.task-popup-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 360px; overflow-y: auto; }
.task-popup-item {
padding: var(--sp-3) var(--sp-3-5);
border-radius: var(--radius-sm);
background: var(--bg);
border: 1px solid var(--border-light);
transition: box-shadow 0.15s ease;
cursor: pointer;
}
.task-popup-item:hover { box-shadow: var(--shadow-sm); }
.task-popup-item-overdue { border-left: 3px solid var(--danger); }
.task-popup-item-title { font-size: var(--fs-md); font-weight: 500; margin-bottom: var(--sp-2); color: var(--text); }
.task-popup-item-meta { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); flex-wrap: wrap; }
.task-popup-item-meta span { display: inline-flex; align-items: center; gap: 3px; }
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.28);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--sp-4);
}
.modal-overlay.show { display: flex; }
.modal {
background: var(--card);
border-radius: 22px;
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
.modal-header {
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.modal-body { padding: var(--sp-5); }
.modal-footer {
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--border-light);
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
}
.ext-card-modal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.ext-col-left { border-right: 1px solid var(--border-light); padding-right: var(--sp-5); }
.ext-col-right { min-width: 0; }
@media (max-width: 760px) {
.ext-card-modal { grid-template-columns: 1fr; gap: var(--sp-4); }
.ext-col-left { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border-light); padding-bottom: var(--sp-4); }
}
.ext-col-title { font-size: var(--fs-sm); font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; margin: var(--sp-1) 0 var(--sp-2); text-transform: none; }
.ext-seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); background: var(--bg-soft); padding: var(--sp-1); border-radius: 12px; }
.ext-seg button { border: 0; background: transparent; padding: var(--sp-1-5) 9px; border-radius: 8px; font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; white-space: nowrap; font-family: inherit; }
.ext-seg button:hover { color: var(--text); }
.ext-seg button.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow-sm); font-weight: 600; }
.ext-seg-block { margin: var(--sp-2) 0; }
.ext-path-hint { font-size:var(--fs-xs); color:var(--text-muted); background:var(--bg-soft); border:1px dashed var(--border); border-radius:8px; padding:var(--sp-1-5) var(--sp-2-5); margin:var(--sp-2) 0 var(--sp-1); }
.ext-seg-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-1); }
.ext-keystep { font-size: var(--fs-sm); line-height: 1.7; color: #8a4b00; background: #fff7e6; border: 1px solid #ffd591; border-left: 4px solid #fa8c16; border-radius: 8px; padding: var(--sp-2-5) var(--sp-3); margin: var(--sp-1) 0 var(--sp-2-5); }
.ext-keystep b { color: #ad4e00; }
.ext-keystep .ks-ico { font-size: 15px; margin-right: var(--sp-0-5); }
.ext-rw-matnote { font-size: var(--fs-xs); margin-top: var(--sp-1); }
.ext-rw-matnote.warn { color: #cf1322; }
.ext-rw-matnote.ok { color: #389e0d; }
.ext-guard-inline { padding: var(--sp-2); border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-soft); }
.ext-step { display: flex; gap: var(--sp-1-5); align-items: flex-start; margin-top: var(--sp-2-5); }
.ext-step-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 3px; }
.ext-step-body { flex: 1; min-width: 0; }
.ext-plat-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.ext-plat-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all .15s; }
.ext-plat-chip:hover { border-color: var(--primary); color: var(--primary); }
.ext-plat-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ext-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.ext-check input { width: 15px; height: 15px; }
.bm-ext-progress { margin: var(--sp-3) 0 var(--sp-2); padding: var(--sp-4); background: var(--card); border:1px solid var(--border); border-radius: var(--radius); }
.bm-ext-progress .fw-head { display:flex; align-items:baseline; gap:var(--sp-2-5); margin-bottom:var(--sp-3-5); flex-wrap:wrap; }
.bm-ext-progress .fw-title { font-size: var(--fs-lg); font-weight:700; color: var(--text); letter-spacing:.5px; }
.bm-ext-progress .fw-sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: normal; line-height: 1.5; }
.bm-ext-progress .fw-track { display:flex; align-items:stretch; gap:var(--sp-2); flex-wrap:wrap; }
.bm-ext-progress .fw-step { flex:1 1 160px; min-width:0; display:flex; align-items:center; gap:var(--sp-2-5); padding:var(--sp-3) var(--sp-3-5); border-radius:14px; cursor:pointer; background: var(--bg-soft); border:1px solid var(--border); transition: all .15s ease; }
.bm-ext-progress .fw-step:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.bm-ext-progress .fw-badge { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0; background:var(--card); color: var(--text-muted); border:2px solid var(--border); }
.bm-ext-progress .fw-step.done .fw-badge { background: #e7f7ec; color:#237a3e; border-color:#52c41a; }
.bm-ext-progress .fw-step.active .fw-badge { background: var(--primary); color:#fff; border-color: var(--primary); box-shadow: 0 2px 10px rgba(var(--primary-rgb),.35); }
.bm-ext-progress .fw-info { min-width:0; display:flex; flex-direction:row; align-items:baseline; gap:var(--sp-1-5); flex-wrap:wrap; }
.bm-ext-progress .fw-label { font-size: var(--fs-sm); font-weight:600; color: var(--text-muted); white-space:nowrap; }
.bm-ext-progress .fw-step.done .fw-label, .bm-ext-progress .fw-step.active .fw-label { color: var(--text); }
.bm-ext-progress .fw-metric { font-size: var(--fs-xs); color: var(--text-muted); }
.bm-ext-progress .fw-metric.active { color: var(--primary-dark); font-weight:600; }
.bm-ext-progress .fw-arrow { display:none; }
.bm-ext-progress .fw-next { margin-top:var(--sp-3-5); display:flex; align-items:center; gap:var(--sp-2-5); font-size: var(--fs-sm); color: var(--text-secondary); background: var(--bg-soft); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:10px; padding:11px var(--sp-3-5); line-height:1.5; }
.bm-ext-progress .fw-next-dot { width:8px; height:8px; border-radius:50%; background: var(--primary); flex-shrink:0; }
.ext-scene-wrap { margin-bottom: var(--sp-4); }
.ext-scene-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-1-5); }
.ext-scene-chip { display:inline-flex; align-items:center; gap:var(--sp-1-5); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:999px; background: var(--card); font-size: var(--fs-sm); color: var(--text-secondary); cursor:pointer; transition: all .15s ease; }
.ext-scene-chip:hover { border-color: var(--primary); color: var(--text); }
.ext-scene-chip.active { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); font-weight:600; }
.ext-ai-guide { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2-5); flex-wrap:wrap; background: var(--warning-light, #fff7e6); color: var(--warning-dark, #8a6d3b); border:1px solid var(--warning, #f0d9a8); border-radius:10px; padding:var(--sp-2-5) var(--sp-3); margin-bottom:var(--sp-3); font-size: var(--fs-sm); }
.ext-ai-dot { display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:middle; }
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1-5);margin-bottom:var(--sp-1-5);}
.cal-dow-item{text-align:center;font-size:var(--fs-xs);color:var(--text-muted);font-weight:700;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1-5);}
.cal-cell{border:1px solid var(--border);border-radius:10px;min-height:84px;padding:var(--sp-1);background:var(--bg-soft);display:flex;flex-direction:column;gap:var(--sp-0-5);}
.cal-cell.today{background:var(--primary-light);}
.cal-cell.empty{border-color:transparent;}
.cal-date{font-size:var(--fs-xs);font-weight:700;color:var(--text-secondary);}
.cal-date.today{color:var(--primary-dark);}
.cal-idea{font-size:var(--fs-xs);line-height:1.3;padding:2px 5px;border-radius:6px;background:var(--brand-light);color:var(--brand);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-idea.overdue{background:var(--danger-light,#ffe9e9);color:var(--danger,#d33);}
.cal-more{font-size:var(--fs-xs);color:var(--text-muted);}
.ext-header-actions { position: relative; }
.ext-more-wrap { position: relative; }
.ext-more-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 184px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: var(--sp-1-5); z-index: 60; display: none; }
.ext-more-menu.open { display: block; }
.ext-more-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 9px var(--sp-2-5); border: 0; background: transparent; border-radius: 8px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; text-align: left; font-family: inherit; }
.ext-more-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.ext-more-item [data-icon] { font-size: 15px; flex: none; }
.bm-quick-actions .btn { min-width: 0; }
@media (max-width: 640px) {
.card .form-row { display:flex; flex-direction:column; gap:var(--sp-2); }
.ext-scene-chips { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--sp-1); min-width:0; max-width:100%; }
.ext-scene-chip { flex:0 0 auto; }
.bm-chart-wrap { overflow-x:auto; min-width:0; max-width:100%; }
.bm-chart { min-width:460px; }
}
.ext-adv-toggle { font-size: var(--fs-xs); color: var(--primary); cursor:pointer; background:none; border:none; padding:var(--sp-1-5) var(--sp-0-5) var(--sp-0-5); display:block; }
.ext-adv-toggle:hover { text-decoration: underline; }
.bm-skeleton { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-2-5); }
.bm-skeleton > span { height:12px; border-radius:6px; background: linear-gradient(90deg, var(--bg-soft) 25%, var(--primary-light) 37%, var(--bg-soft) 63%); background-size:400% 100%; animation: bmShimmer 1.2s ease-in-out infinite; }
@keyframes bmShimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
.ext-view-toggle { display:inline-flex; gap:var(--sp-1); }
.ext-view-btn { border:1px solid var(--border); background:var(--card); color:var(--text-muted); font-size:var(--fs-xs); padding:var(--sp-1) var(--sp-2-5); border-radius:8px; cursor:pointer; }
.ext-view-btn.active { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); font-weight:600; }
.ext-card-extra { display:block; }
.ext-list-view .bm-card { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2-5); flex-wrap:wrap; padding:var(--sp-2-5) var(--sp-3-5); }
.ext-list-view .ext-card-extra { display:none; }
#extCardList, #tbCardList, #cgCardList, #tbchengaoList, #tbreviewList { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--sp-4); align-items:start; }
#extCardList > .ext-group-head { grid-column:1 / -1; }
#extCardList.ext-list-view { display:flex; flex-direction:column; gap:var(--sp-3); }
#arsenalTbCard, #arsenalChenggao, #arsenalTbChenggao, #arsenalTbReview, #arsenalPrompt, #arsenalHotRadar, #extContent { display:flex; flex-direction:column; gap:var(--sp-4); }
#extContent .bm-section-head, #arsenalTbCard .bm-section-head, #arsenalChenggao .bm-section-head, #arsenalTbChenggao .bm-section-head, #arsenalTbReview .bm-section-head, #arsenalPrompt .bm-section-head, #arsenalHotRadar .bm-section-head, #arsenalDistill .bm-section-head { margin: 0; }
.folder-chip { cursor:pointer; border:1px solid transparent; transition:all .15s; user-select:none; }
.folder-chip:hover { filter:brightness(.97); }
.folder-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.folder-chip.active .bm-pill { color:#fff; }
.ext-closeout { margin-top: var(--sp-3); border:1px dashed var(--primary); background: var(--primary-light); border-radius: var(--radius); padding: var(--sp-3); }
.ext-closeout .step { display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-1-5); font-size: var(--fs-sm); color: var(--text-secondary); }
.ext-closeout .ok { color: var(--success); font-weight:700; }
.ext-closeout .step.done { color: var(--success); }
.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.form-label .required { color: var(--danger); }
.form-input, .form-select, .form-textarea {
width: 100%;
padding: var(--sp-3) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-base);
background: var(--card);
color: var(--text);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14); }
.form-textarea { resize: vertical; min-height: 70px; }
.form-input.error, .form-select.error, .form-textarea.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light); }
.form-error { font-size: var(--fs-xs); color: var(--danger); margin-top: 3px; }
.form-row { display: flex; gap: var(--sp-3); }
.form-row .form-group { flex: 1; }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; }
.am-count { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.am-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-4); }
.acct-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow); }
.acct-card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.acct-avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--grad-primary-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.acct-card-id { min-width: 0; flex: 1; }
.acct-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); word-break: break-all; }
.acct-sharefrom { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.am-plat-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-4); border-radius: 8px; font-size: var(--fs-base); font-weight: 700; line-height: 1.3; letter-spacing: .2px; white-space: nowrap; border: 2px solid transparent; }
.acct-fields { border-top: 1px solid var(--border-light); }
.acct-field { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm); }
.acct-field:last-child { border-bottom: none; }
.acct-field-label { width: 60px; flex-shrink: 0; color: var(--text-muted); }
.acct-field-val { flex: 1; min-width: 0; color: var(--text-secondary); word-break: break-all; }
.acct-plat-block { margin: var(--sp-2) 0; padding: var(--sp-2) 0; border-top: 1px dashed var(--border-light); }
.acct-plat-block-title { font-size: var(--fs-xs); font-weight: 600; color: var(--primary-dark); margin-bottom: var(--sp-1); padding-left: var(--sp-1); }
.mc-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); line-height: 1.4; font-weight: 600; letter-spacing: .3px; }
.am-copyable { cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; }
.am-copyable:hover { text-decoration: underline; }
.am-copyable:hover .am-copy-ico { opacity: 1; }
.am-copyable--oneline { display: flex; max-width: 100%; }
.am-copyable--oneline .am-copy-txt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.am-copyable--oneline .am-copy-ico { flex-shrink: 0; }
.am-copy-ico { color: var(--primary); font-size: var(--fs-xs); opacity: 0.6; flex-shrink: 0; }
.am-pwd-mask { font-family: monospace; letter-spacing: 3px; color: var(--text-muted); }
.am-pwd-clear { font-family: monospace; color: var(--text); word-break: break-all; }
.am-yes { color: var(--success); font-weight: 600; }
.am-platbox { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.am-plat { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.am-plat input { width: 15px; height: 15px; accent-color: var(--primary); }
.am-plat:hover { border-color: var(--primary); }
.am-plat-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.am-plat-chip.is-on { border-color: var(--primary); background: var(--primary-soft, #eef4ff); }
.am-plat-del { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; }
.am-plat-del:hover { background: var(--danger-soft, #fdecec); color: var(--danger, #e5484d); }
.am-addplat { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.am-addplat .form-input { flex: 1; }
.am-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.am-toolbar .am-toolbar-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.ops-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-3-5); box-shadow: var(--shadow); }
.ops-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ops-period-label { font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.ops-period-label .ops-period-range { color: var(--text-muted); font-weight: 500; }
.ops-sync-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ops-sync-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.ops-sync-dirty { display: inline-flex; align-items: center; gap: 6px; }
.ops-pulse { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: 0 0 auto; animation: opsSyncPulse 1.4s ease-out infinite; }
@keyframes opsSyncPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.ops-pill-warn { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning); }
.ops-sel-col { width: 38px; text-align: center; padding-left: var(--sp-2); padding-right: var(--sp-2); }
.ops-sel-col input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary); }
.ops-batchbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2-5) var(--sp-3); background: var(--primary-light); border: 1px solid var(--primary); border-radius: 12px; }
.ops-color-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.ops-color-chips .ops-chips-label { font-size: var(--fs-xs); color: var(--text-muted); margin-right: var(--sp-1); }
.ops-color-chip { white-space: nowrap; }
.ops-color-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ops-batch-count { font-weight: 700; color: var(--primary-dark); font-size: var(--fs-sm); }
.ops-batch-label { font-size: var(--fs-sm); color: var(--text-secondary); }
.ops-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2-5) var(--sp-3); border: 1px solid var(--warning); background: var(--warning-light); border-radius: 12px; font-size: var(--fs-sm); color: var(--text); }
.ops-banner b { color: var(--warning); }
.ops-summary { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-2-5) var(--sp-3); background: var(--bg-soft); border-radius: 12px; }
.ops-summary .ops-stat { display: flex; flex-direction: column; gap: 2px; }
.ops-summary .ops-stat-val { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.ops-summary .ops-stat-label { font-size: var(--fs-xs); color: var(--text-muted); }
.ops-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.ops-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: var(--fs-sm); }
.ops-table thead th { position: sticky; top: 0; background: var(--bg-soft); padding: var(--sp-2-5) var(--sp-3); text-align: left; font-weight: 600; color: var(--text-secondary); white-space: nowrap; border-bottom: 1px solid var(--border); }
.ops-table tbody td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; border-bottom: 1px solid var(--border); }
.ops-table tbody tr:last-child td { border-bottom: none; }
.ops-table tbody tr:hover { background: var(--bg-soft); }
.ops-acc-name { font-weight: 600; color: var(--text); }
.ops-plat-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; line-height: 1; padding: 2px 6px; border-radius: 6px; background: #fff0f6; color: #ff4d8d; border: 1px solid #ffd6e7; margin-right: 4px; vertical-align: middle; }
.ops-num { color: var(--text-secondary); }
.ops-status { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ops-status-pill { cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--text-secondary); border-radius: 999px; padding: 3px 10px; font-size: var(--fs-xs); font-weight: 600; transition: all var(--transition); user-select: none; -webkit-tap-highlight-color: transparent; }
.ops-status-pill:hover { border-color: var(--border-strong); }
.ops-status-pill.active.养 { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary-light); }
.ops-status-pill.active.打 { background: var(--success-light); color: var(--success); border-color: var(--success-light); }
.ops-status-pill.active.黑 { background: var(--danger-light); color: var(--danger); border-color: var(--danger-light); }
.ops-status-pill.active.乱 { background: var(--warning-light); color: var(--warning); border-color: var(--warning-light); }
.ops-input { width: 100%; min-width: 120px; }
@media (max-width: 640px) {
.ops-table-wrap { border: none; background: transparent; box-shadow: none; overflow: visible; }
.ops-table, .ops-table tbody, .ops-table tr, .ops-table td { display: block; width: auto; }
.ops-table { min-width: 0; border: none; background: transparent; box-shadow: none; }
.ops-table thead { display: none; }
.ops-table tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--card); box-shadow: var(--shadow); }
.ops-table tbody td { border: none !important; padding: 7px 0; display: flex; align-items: center; gap: var(--sp-2); }
.ops-table tbody td::before { content: attr(data-label); flex: 0 0 52px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.ops-table tbody td.ops-acc-name { font-size: var(--fs-base); }
.ops-table tbody td.ops-acc-name::before { align-self: flex-start; margin-top: 2px; }
.ops-status { flex-wrap: wrap; gap: 6px; }
.ops-status-pill { padding: 6px 13px; font-size: var(--fs-sm); }
.ops-input { min-width: 0; flex: 1; }
}
.pt-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--sp-4); box-shadow: var(--shadow); margin-bottom: var(--sp-4); }
.pt-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pt-card-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.pt-card-title .pt-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--primary-light); color: var(--primary-dark); }
.pt-card-title .pt-ic svg { width: 16px; height: 16px; }
.pt-count { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--bg-soft); border-radius: 999px; padding: 2px 10px; }
.pt-addrow { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.pt-addrow .pt-input { flex: 1; min-width: 0; }
.pt-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pt-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 999px; background: var(--primary-light); color: var(--primary-dark); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all var(--transition); -webkit-tap-highlight-color: transparent; }
.pt-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.pt-chip .pt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chip .pt-del { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--primary-dark); opacity: .55; font-size: 14px; line-height: 1; flex-shrink: 0; }
.pt-chip .pt-del:hover { opacity: 1; background: rgba(0,0,0,.08); }
.pt-empty { font-size: var(--fs-sm); color: var(--text-muted); padding: var(--sp-2) 0; }
.pt-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); }
.ops-filterbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--border); }
.ops-filter-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.ops-filterbar .filter-select { min-width: 120px; }
.ops-filter-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.5; }
.ops-hist-block { margin-top: var(--sp-3); }
.ops-hist-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ops-hist-machine { font-size: var(--fs-sm); color: var(--text-secondary); }
.ops-hist-machine b { color: var(--text); margin: 0 2px; }
.ops-period-cell { white-space: nowrap; color: var(--text-secondary); }
.ops-mini-pill { padding: 1px var(--sp-2); font-size: 11px; font-weight: 600; }
.am-mobchip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; user-select: none; }
.am-mobchip:hover { border-color: var(--primary); color: var(--text); }
.am-mobchip.active { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); font-weight: 600; }
.entity-block { margin-bottom: var(--sp-5); }
.entity-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.section-subtitle { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.entity-tabs { display: flex; gap: var(--sp-2); }
.entity-tab { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer; }
.entity-tab.active { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); font-weight: 600; }
.entity-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.entity-head-title { font-size: var(--fs-sm); color: var(--text-muted); }
.entity-empty { padding: var(--sp-4); background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.entity-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow); margin-bottom: var(--sp-3); }
.entity-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.entity-card-idcol { flex: 1; min-width: 0; }
.entity-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); word-break: break-all; }
.entity-photo { display: inline-flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.entity-thumb { max-width: 140px; max-height: 140px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; object-fit: cover; }
.entity-photo-actions { display: flex; gap: var(--sp-2); }
.entity-photo-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.entity-photo-slot { font-size: var(--fs-sm); color: var(--text-muted); }
.entity-photo-preview { margin-top: var(--sp-2); }
.entity-photo-preview .entity-thumb { max-width: 160px; max-height: 160px; }
.file-upload-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.file-upload-row .form-input { flex: 1; min-width: 180px; }
.am-mp-section { border: 1px dashed var(--primary); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); background: var(--primary-light); }
.am-mp-title { font-size: var(--fs-sm); font-weight: 600; color: var(--primary-dark); margin-bottom: var(--sp-2); }
.multi-input-row { display: flex; gap: var(--sp-2); align-items: center; }
.multi-input-row .form-input { flex: 1; min-width: 0; }
.multi-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.multi-empty { font-size: var(--fs-sm); }
.multi-item { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--primary); border-radius: 999px; padding: 3px var(--sp-2) 3px var(--sp-3); font-size: var(--fs-sm); }
.multi-del { border: none; background: transparent; color: var(--primary-dark); cursor: pointer; font-size: var(--fs-sm); line-height: 1; padding: var(--sp-0-5) var(--sp-1); border-radius: 50%; }
.multi-del:hover { background: var(--danger); color: #fff; }
.share-section { background: var(--primary-light); border: 1px dashed var(--primary); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.share-user-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.share-user-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: var(--fs-base); cursor: pointer; }
.share-user-chip input { margin: 0; }
.share-user-chip:hover { border-color: var(--primary); }
.share-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-3); border-radius: 999px; background: var(--primary-light); color: var(--primary-dark); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.acct-card-shared, .entity-card-shared { border-style: dashed; }
.acct-card-shared .acct-avatar { background: var(--primary-light); }
.priority-options { display: flex; gap: var(--sp-2); }
.priority-option {
flex: 1;
padding: 9px var(--sp-2);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
text-align: center;
cursor: pointer;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-secondary);
transition: all 0.18s ease;
}
.priority-option:hover { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.priority-option.selected.high { border-color: var(--high); background: var(--danger-light); color: var(--high); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.priority-option.selected.medium { border-color: var(--medium); background: var(--warning-light); color: var(--medium); box-shadow: 0 0 0 3px rgba(245,158,11,0.1); }
.priority-option.selected.low { border-color: var(--low); background: var(--border-light); color: var(--low); box-shadow: 0 0 0 3px rgba(100,116,139,0.08); }
.form-checkbox { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.form-checkbox input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.settings-dropdown {
position: relative;
}
.settings-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--glass-strong);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
min-width: 220px;
z-index: 200;
display: none;
overflow: hidden;
}
.settings-menu.show { display: block; }
.settings-menu-item {
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-base);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--sp-2);
transition: background 0.12s;
color: var(--text-secondary);
}
.settings-menu-item:hover { background: var(--bg); color: var(--text); }
.settings-menu-item.danger { color: var(--danger); }
.settings-menu-item.danger:hover { background: var(--danger-light); }
.settings-menu-divider { height: 1px; background: var(--border-light); margin: var(--sp-1) 0; }
.settings-menu-info { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); border-top: 1px solid var(--border-light); }
.progress-ring-container { display: flex; align-items: center; gap: var(--sp-5); }
.progress-ring { position: relative; width: 100px; height: 100px; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring-text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.progress-ring-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--text); }
.progress-ring-label { font-size: var(--fs-2xs); color: var(--text-muted); }
.chart-container { position: relative; }
.bar-chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 160px; padding: var(--sp-3) 0; }
.bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); height: 100%; justify-content: flex-end; }
.bar-fill {
width: 100%;
max-width: 36px;
background: var(--grad-primary);
border-radius: 4px 4px 0 0;
min-height: 2px;
transition: height 0.3s ease;
position: relative;
}
.bar-fill:hover { filter: brightness(1.05); }
.bar-fill .bar-value {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-size: var(--fs-2xs);
color: var(--text-secondary);
font-weight: 600;
}
.bar-label { font-size: var(--fs-xs); color: var(--text-muted); }
.timer-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
z-index: 1100;
display: none;
align-items: center;
justify-content: center;
padding: var(--sp-4);
}
.timer-overlay.show { display: flex; }
.timer-box {
background: var(--card);
border-radius: var(--radius-xl);
padding: 34px var(--sp-6);
text-align: center;
max-width: 360px;
width: 100%;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
.timer-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-2); }
.timer-task { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: var(--sp-5); }
.timer-display {
font-size: 58px;
font-weight: 700;
color: var(--text);
background: var(--grad-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
margin-bottom: var(--sp-5);
letter-spacing: -0.02em;
}
.timer-mode { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.06em; }
.timer-controls { display: flex; gap: var(--sp-2); justify-content: center; }
.timer-progress-ring { margin-bottom: var(--sp-4); }
.toast-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2000;
display: flex;
flex-direction: column;
gap: var(--sp-2);
align-items: center;
}
.toast {
background: #1d1d1f;
color: #fff;
padding: var(--sp-3) var(--sp-5);
border-radius: 22px;
font-size: var(--fs-base);
font-weight: 500;
box-shadow: var(--shadow-lg);
white-space: nowrap;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }
.sync-status-btn { transition: background .25s, color .25s; }
.sync-status-btn.synced  { background: var(--success, #2e9e6b); color: #fff; }
.sync-status-btn.offline { background: #6b7280; color: #fff; }
.sync-status-btn.unauth  { background: var(--warning, #d99a22); color: #fff; }
.sync-status-btn.error   { background: var(--danger, #d9534f); color: #fff; }
.sync-status-btn.syncing { background: #3b82c4; color: #fff; }
.confirm-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.28);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: var(--sp-4);
}
.confirm-overlay.show { display: flex; }
.confirm-box {
background: var(--card);
border-radius: var(--radius-lg);
padding: 26px var(--sp-5);
max-width: 360px;
width: 100%;
text-align: center;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
}
.confirm-icon { font-size: 36px; margin-bottom: var(--sp-3); }
.confirm-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--sp-2); letter-spacing: -0.01em; }
.confirm-desc { font-size: var(--fs-base); color: var(--text-secondary); margin-bottom: var(--sp-5); }
.confirm-actions { display: flex; gap: var(--sp-2); justify-content: center; }
@keyframes wbScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wbCardIn {
from { opacity: 0; transform: translateY(16px) scale(1.07); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay, .confirm-overlay {
background: rgba(0, 0, 0, 0.34);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
animation: wbScrimIn 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.timer-overlay {
background: rgba(15, 23, 42, 0.46);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
animation: wbScrimIn 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.partner-notif-overlay {
background: rgba(0, 0, 0, 0.42);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
animation: wbScrimIn 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-overlay .modal,
.confirm-overlay .confirm-box,
.timer-overlay .timer-box,
.partner-notif-overlay .partner-notif-box {
animation: wbCardIn 0.4s cubic-bezier(0.32, 0.72, 0, 1);
transform-origin: center;
}
.modal, .confirm-box, .timer-box, .partner-notif-box {
background: var(--glass-strong);
backdrop-filter: saturate(180%) blur(30px);
-webkit-backdrop-filter: saturate(180%) blur(30px);
border: 1px solid var(--glass-border);
box-shadow:
0 24px 64px -14px rgba(0, 0, 0, 0.34),
0 8px 24px -10px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
@media (prefers-color-scheme: dark) {
.modal, .confirm-box, .timer-box, .partner-notif-box {
box-shadow:
0 26px 70px -14px rgba(0, 0, 0, 0.62),
0 10px 28px -10px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
}
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .confirm-box,
:root[data-theme="dark"] .timer-box,
:root[data-theme="dark"] .partner-notif-box {
box-shadow:
0 26px 70px -14px rgba(0, 0, 0, 0.62),
0 10px 28px -10px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.filter-input, .filter-select {
background: var(--glass);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border: 1px solid var(--glass-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
font-weight: 500;
color: var(--text);
}
.filter-input::placeholder { color: var(--text-muted); }
@media (prefers-color-scheme: dark) {
.filter-input, .filter-select { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}
:root[data-theme="dark"] .filter-input,
:root[data-theme="dark"] .filter-select { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.later-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-3-5);
display: flex;
align-items: flex-start;
gap: var(--sp-3);
box-shadow: var(--shadow);
transition: all 0.15s;
}
.later-item:hover { box-shadow: var(--shadow-md); }
.recurring-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-4);
display: flex;
align-items: flex-start;
gap: var(--sp-3);
box-shadow: var(--shadow);
transition: all 0.15s;
}
.recurring-item:hover { box-shadow: var(--shadow-md); }
.recurring-badge {
font-size: var(--fs-xs);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 10px;
background: var(--primary-light);
color: var(--primary-dark);
font-weight: 500;
white-space: nowrap;
}
.recurring-item.inactive { opacity: 0.55; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); align-items: stretch; }
.toggle-switch {
width: 36px; height: 20px;
background: var(--border);
border-radius: 10px;
position: relative;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.toggle-switch.on { background: var(--grad-primary); box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3); }
.toggle-switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
background: var(--card);
border-radius: 50%;
transition: transform 0.2s;
}
.toggle-switch.on::after { transform: translateX(16px); }
.toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--border-light);
}
.toggle-row:last-child { border-bottom: none; }
.btn-text-short { display: none; }
.toggle-label {
font-size: var(--fs-base);
color: var(--text);
display: flex;
flex-direction: column;
gap: var(--sp-0-5);
}
.toggle-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
font-weight: 400;
}
.mobile-nav {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--glass);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-top: 1px solid var(--glass-border);
z-index: 100;
padding: var(--sp-1) 0;
padding-bottom: env(safe-area-inset-bottom, var(--sp-1));
}
.mobile-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-0-5);
padding: var(--sp-2) var(--sp-0-5);
font-size: var(--fs-2xs);
color: var(--text-muted);
cursor: pointer;
transition: color 0.15s;
}
.mobile-nav-item .mn-icon { font-size: 18px; }
.mobile-nav-item.active { color: var(--primary); }
.mobile-nav-item .nav-badge {
position: absolute;
top: 2px;
right: 50%;
margin-right: -18px;
background: var(--danger);
color: #fff;
font-size: var(--fs-2xs);
padding: 0 var(--sp-1);
border-radius: 8px;
min-width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
}
.mobile-nav { display: none; }
.mobile-menu-btn { display: none; }
.drawer-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.3);
z-index: 99;
}
.drawer-overlay.show { display: block; z-index: 101; }
@media (max-width: 1024px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
box-shadow: var(--shadow-lg);
width: 210px;
max-width: 78vw;
}
.sidebar.open { transform: translateX(0); z-index: 102; }
.main { margin-left: 0; }
.mobile-menu-btn { display: flex; }
.mobile-nav { display: flex; }
.content { padding: var(--sp-4); padding-bottom: 80px; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: 1fr; }
.topbar { padding: calc(10px + env(safe-area-inset-top, 0px)) var(--sp-4); }
.greeting-text { font-size: 18px; }
.form-row { flex-direction: column; gap: 0; }
.filters-bar { gap: var(--sp-2); }
.filter-select { min-width: 80px; }
.modal { max-width: 100%; }
.timer-display { font-size: 44px; }
.focus-stats-grid { grid-template-columns: repeat(2, 1fr); }
.timer-session-row { gap: var(--sp-4); }
.timer-box { padding: var(--sp-5) var(--sp-4); }
.timer-controls { flex-wrap: wrap; }
.batch-toolbar { left: 0; padding: var(--sp-2-5) var(--sp-4); flex-wrap: wrap; bottom: 52px; }
.batch-toolbar-actions { flex-wrap: wrap; }
.content.batch-active { padding-bottom: 130px; }
.user-badge { display: none; }
.logout-text { display: none; }
.sidebar { bottom: auto; height: 100vh; height: 100dvh; }
.sidebar-nav { min-height: 0; }
.sidebar-footer { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
.login-card { padding: var(--sp-6) var(--sp-5); }
.topbar { gap: var(--sp-2); }
.topbar-title { display: none; }
.btn-text { display: none; }
.btn-text-short { display: inline; }
#btnFocusTop .btn-text { display: inline; }
#btnNewTaskTop { padding: var(--sp-2) var(--sp-3); }
#btnFocusTop { padding: var(--sp-2) var(--sp-3); }
.goal-card { padding: var(--sp-4); }
.goal-card-header { flex-wrap: wrap; }
.goal-checkin-form { flex-direction: column; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); }
.goal-checkin-fields { flex-direction: column; align-items: center; gap: var(--sp-3); width: 100%; }
.goal-checkin-inputs { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-4); }
.goal-checkin-prefix { white-space: nowrap; width: 100%; text-align: center; font-size: var(--fs-sm); }
.goal-checkin-field { gap: var(--sp-2); }
.goal-checkin-unit { font-size: var(--fs-sm); }
.goal-checkin-input, .goal-checkin-input-min { width: 62px; font-size: var(--fs-base); }
.goal-checkin-btn { width: 100%; max-width: 280px; height: 46px; padding: 0 var(--sp-5); font-size: 15px; justify-content: center; }
.partner-user-header { padding: var(--sp-3); }
.partner-user-tasks { padding: 0 var(--sp-3) var(--sp-3); }
.partner-notif-box { max-width: 100%; }
.skill-card-head { flex-wrap: wrap; }
.skill-card-title { min-width: 0; flex: 1 1 auto; word-break: break-word; }
.skill-goal { flex-wrap: wrap; }
.skill-goal-row { flex: 1 1 100%; min-width: 0; }
.skill-goal-name { white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; }
.skill-goal-actions { flex: 1 1 100%; flex-wrap: wrap; margin-top: var(--sp-2); }
.task-item, .later-item, .recurring-item { flex-wrap: wrap; }
.task-actions { width: 100%; flex-shrink: 0; justify-content: flex-end; gap: var(--sp-1); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border-light); }
.toast-container { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.stat-card { padding: var(--sp-3); }
.stat-value { font-size: var(--fs-2xl); }
.content { padding: var(--sp-3); padding-bottom: 80px; }
.section-header { flex-direction: column; align-items: stretch; }
.section-header > .btn { width: auto; align-self: flex-start; }
.section-header .view-toggle { align-self: center; }
.focus-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.focus-stat-card { padding: var(--sp-3); }
.focus-stat-num { font-size: 18px; }
.goal-stats { gap: var(--sp-1); }
.goal-stat-num { font-size: var(--fs-md); }
.goal-progress-section { flex-direction: column; align-items: center; text-align: center; }
.goal-pinned-card { flex-direction: column; text-align: center; gap: var(--sp-2); }
.goal-pinned-actions { justify-content: center; }
.goal-overdue-banner { flex-direction: column; text-align: center; gap: var(--sp-2); }
.goal-overdue-actions { margin-left: 0; justify-content: center; }
.goal-record-item { flex-wrap: wrap; gap: var(--sp-2); }
.partner-user-stats { font-size: var(--fs-xs); }
.pending-mod-item { flex-direction: column; gap: var(--sp-2); }
.pending-mod-actions { justify-content: center; }
.card { padding: var(--sp-4); }
.modal-body { padding: var(--sp-4); }
.modal-footer { gap: var(--sp-3); }
.modal-footer .btn { flex: 1; }
}
.timer-task-select { margin-bottom: var(--sp-4); }
.timer-select-label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-1); }
.timer-select {
width: 100%;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-base);
background: var(--card);
color: var(--text);
outline: none;
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.timer-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14); }
.timer-session-info { margin-bottom: var(--sp-4); }
.timer-session-row { display: flex; justify-content: center; gap: var(--sp-5); }
.timer-session-item { text-align: center; }
.timer-session-num { display: block; font-size: var(--fs-2xl); font-weight: 700; color: var(--primary); }
.timer-session-label { font-size: var(--fs-xs); color: var(--text-muted); }
.focus-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.focus-stat-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3-5) var(--sp-3);
text-align: center;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.18s ease;
}
.focus-stat-card:hover { box-shadow: var(--shadow-md); }
.focus-stat-num { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; color: var(--primary-dark); }
.focus-stat-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-0-5); }
.focus-session-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.focus-session-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-2-5);
background: var(--bg);
border-radius: var(--radius-sm);
}
.focus-session-tomato { font-size: 18px; flex-shrink: 0; }
.focus-session-body { flex: 1; min-width: 0; }
.focus-session-title { font-size: var(--fs-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-session-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.focus-session-duration { font-size: var(--fs-base); font-weight: 600; color: var(--primary); flex-shrink: 0; }
.day-focus-summary {
display: inline-block;
padding: var(--sp-1) var(--sp-3);
background: var(--success-light);
color: var(--success);
border-radius: 10px;
font-size: var(--fs-sm);
font-weight: 500;
margin-bottom: var(--sp-3);
}
.batch-toolbar {
position: fixed;
bottom: 0;
left: 240px;
right: 0;
background: var(--glass-strong);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border-top: 1px solid var(--glass-border);
box-shadow: 0 -8px 28px -10px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.4);
padding: var(--sp-3) var(--sp-5);
display: none;
align-items: center;
justify-content: space-between;
z-index: 200;
gap: var(--sp-3);
}
.batch-toolbar.show { display: flex; }
.batch-toolbar-info { flex-shrink: 0; }
.batch-count {
font-size: var(--fs-md);
font-weight: 600;
color: var(--primary);
}
.batch-toolbar-actions {
display: flex;
gap: var(--sp-2);
align-items: center;
}
.batch-check {
width: 20px;
height: 20px;
border: 2px solid var(--border);
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
margin-top: 1px;
}
.batch-check:hover { border-color: var(--primary); }
.batch-check.checked {
background: var(--grad-primary);
border-color: transparent;
}
.batch-check.checked::after {
content: iconSpan('check');
font-size: var(--fs-sm);
font-weight: 700;
color: var(--on-primary);
}
.task-item.batch-mode { cursor: pointer; }
.task-item.batch-mode.selected {
border-color: var(--primary);
background: var(--primary-light);
}
.task-item.batch-mode .task-drag,
.task-item.batch-mode .task-check,
.task-item.batch-mode .task-actions { display: none; }
.content.batch-active { padding-bottom: 80px; }
.btn-batch-active {
background: var(--primary-light) !important;
color: var(--primary) !important;
border-color: var(--primary) !important;
}
.login-page {
position: fixed;
inset: 0;
background:
radial-gradient(1100px 620px at 50% -12%, color-mix(in srgb, var(--primary) 12%, var(--bg)), transparent 70%),
var(--bg);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.login-card {
background: var(--card);
border-radius: 22px;
box-shadow: var(--shadow-md);
padding: var(--sp-8) var(--sp-7);
width: 100%;
max-width: 420px;
border: 1px solid var(--border);
}
.login-logo {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-2);
}
.login-logo-icon {
width: 56px;
height: 56px;
background: var(--primary);
color: var(--on-primary);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-2xl);
font-weight: 700;
box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}
.login-logo-text {
font-size: var(--fs-xl);
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.login-subtitle {
font-size: var(--fs-base);
color: var(--text-secondary);
margin-bottom: 28px;
}
.login-form {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.login-field {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.login-label {
font-size: var(--fs-base);
font-weight: 600;
color: var(--text-secondary);
}
.login-input {
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--border);
border-radius: 11px;
font-size: var(--fs-md);
font-family: var(--font);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
background: var(--card);
color: var(--text);
}
.login-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}
.login-error {
font-size: var(--fs-sm);
color: var(--danger);
min-height: 16px;
}
.login-btn {
width: 100%;
height: 50px;
padding: 0;
font-size: var(--fs-lg);
font-weight: 600;
margin-top: var(--sp-1);
border-radius: var(--radius-pill);
justify-content: center;
align-items: center;
text-align: center;
}
.login-hint {
margin-top: var(--sp-5);
text-align: center;
font-size: var(--fs-xs);
color: var(--text-muted);
}
.user-badge {
display: none;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2-5);
background: var(--primary-light);
border-radius: 20px;
font-size: var(--fs-sm);
color: var(--primary-dark);
font-weight: 600;
white-space: nowrap;
}
.user-badge .user-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--grad-primary);
color: var(--on-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 700;
}
.user-list {
display: flex;
flex-direction: column;
gap: var(--sp-3);
max-width: 760px;
}
.user-card {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--card);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-slow), transform var(--transition-slow);
}
.user-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.user-card:active { transform: translateY(0); }
.user-avatar {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--grad-primary);
color: var(--on-primary);
display: grid;
place-items: center;
font-weight: 700;
font-size: var(--fs-md);
box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}
.user-main { flex: 1 1 auto; min-width: 0; }
.user-name-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.user-name { font-weight: 600; font-size: var(--fs-md); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-username { font-size: var(--fs-sm); color: var(--text-muted); font-family: var(--font-mono, monospace); margin-top: var(--sp-0-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role-badge {
flex: 0 0 auto;
padding: var(--sp-0-5) var(--sp-2);
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.6;
}
.user-role-badge.role-admin { background: var(--primary-light); color: var(--primary); }
.user-role-badge.role-user { background: var(--bg-soft); color: var(--text-muted); }
.user-actions { flex: 0 0 auto; display: flex; align-items: center; }
.me-pill {
padding: 5px var(--sp-3);
border-radius: var(--radius-pill);
background: var(--bg-soft);
color: var(--text-muted);
font-size: var(--fs-sm);
font-weight: 600;
white-space: nowrap;
}
.user-del-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1-5) var(--sp-3-5);
border-radius: var(--radius-pill);
border: 1px solid rgba(255,59,48,.35);
background: transparent;
color: var(--danger);
font-size: var(--fs-sm);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-slow), transform var(--transition-slow);
}
.user-del-btn:hover { background: rgba(255,59,48,.1); }
.user-del-btn:active { transform: scale(.96); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.mt-8 { margin-top: var(--sp-2); }
.mt-16 { margin-top: var(--sp-4); }
.mb-16 { margin-bottom: var(--sp-4); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: var(--sp-2); }
.gap-12 { gap: var(--sp-3); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.justify-between { justify-content: space-between; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.partner-user-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: var(--sp-3);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow 0.18s ease;
}
.partner-user-card:hover { box-shadow: var(--shadow-md); }
.partner-user-header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3-5) var(--sp-4);
cursor: pointer;
transition: background 0.15s;
}
.partner-user-header:hover { background: var(--bg-soft); }
.partner-user-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--grad-primary);
color: var(--on-primary);
display: flex; align-items: center; justify-content: center;
font-size: var(--fs-lg); font-weight: 700;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.28);
}
.partner-user-info { flex: 1; min-width: 0; }
.partner-user-name { font-size: var(--fs-md); font-weight: 600; }
.partner-user-stats { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-0-5); }
.partner-toggle-icon { font-size: var(--fs-lg); color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.partner-user-card.open .partner-toggle-icon { transform: rotate(180deg); }
.partner-user-tasks { display: none; padding: 0 var(--sp-4) var(--sp-4); }
.partner-user-card.open .partner-user-tasks { display: block; }
.partner-notif-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.4);
z-index: 1300;
display: none;
align-items: center;
justify-content: center;
padding: var(--sp-4);
}
.partner-notif-overlay.show { display: flex; }
.partner-notif-box {
background: var(--card);
border-radius: var(--radius-lg);
width: 100%;
max-width: 480px;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
}
.partner-notif-header {
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
}
.partner-notif-body { padding: var(--sp-4) 20px; }
.partner-notif-item {
background: var(--bg);
border-radius: var(--radius-sm);
padding: var(--sp-3);
margin-bottom: var(--sp-3);
}
.partner-notif-item:last-child { margin-bottom: 0; }
.partner-notif-item-header {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.partner-notif-type-badge {
font-size: var(--fs-xs);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 10px;
font-weight: 600;
}
.partner-notif-type-add { background: var(--success-light); color: var(--success); }
.partner-notif-type-edit { background: var(--warning-light); color: var(--warning); }
.partner-notif-type-delete { background: var(--danger-light); color: var(--danger); }
.partner-notif-type-project-task { background: var(--primary-light); color: var(--primary-dark); }
.partner-notif-from { font-size: var(--fs-sm); color: var(--text-muted); margin-left: auto; }
.partner-notif-item-body { font-size: var(--fs-base); color: var(--text); }
.partner-notif-item-meta { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.partner-notif-footer {
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--border-light);
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
}
.pending-mods-card {
background: var(--warning-bg);
border: 1px solid var(--warning);
border-radius: var(--radius);
padding: var(--sp-4);
margin-bottom: var(--sp-4);
}
.pending-mods-title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--warning);
margin-bottom: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.pending-mod-item {
background: var(--card);
border-radius: var(--radius-sm);
padding: var(--sp-2-5) var(--sp-3);
margin-bottom: var(--sp-2);
display: flex;
align-items: flex-start;
gap: var(--sp-3);
}
.pending-mod-item:last-child { margin-bottom: 0; }
.pending-mod-body { flex: 1; min-width: 0; }
.pending-mod-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.partner-visibility-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
background: var(--grad-primary-soft);
border: 1px solid var(--primary-light);
border-radius: var(--radius);
padding: var(--sp-3-5) var(--sp-4);
margin-bottom: var(--sp-4);
}
.partner-visibility-info { display: flex; align-items: center; gap: var(--sp-3); }
.partner-visibility-icon { font-size: var(--fs-2xl); flex-shrink: 0; }
.partner-visibility-title { font-size: var(--fs-md); font-weight: 600; }
.partner-visibility-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-0-5); }
.partner-locked-badge {
display: inline-flex;
align-items: center;
gap: 3px;
vertical-align: middle;
font-size: var(--fs-xs);
background: var(--border-light);
color: var(--text-muted);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 10px;
font-weight: 500;
margin-left: var(--sp-1);
white-space: nowrap;
flex-shrink: 0;
}
.partner-locked-badge [data-icon] svg { width: 13px; height: 13px; }
.partner-user-card.locked .partner-user-header { cursor: default; }
.partner-user-card.locked .partner-user-header:hover { background: var(--card); }
.partner-locked-actions { margin-left: auto; flex-shrink: 0; }
.goal-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-5);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
transition: box-shadow 0.18s ease, transform 0.18s ease;
content-visibility: auto;
contain-intrinsic-size: auto 220px;
}
.goal-card:hover {
box-shadow: 0 10px 28px rgba(0,0,0,0.10);
transform: translateY(-2px);
}
.goal-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--goal-accent, var(--primary));
}
.goal-card-header {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.goal-card-info { flex: 1; min-width: 0; }
.goal-card-name { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-2); line-height: 1.3; }
.goal-card-unit { font-size: var(--fs-base); color: var(--text-muted); }
.goal-card-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.goal-progress-section {
display: flex;
align-items: center;
gap: var(--sp-5);
margin-bottom: var(--sp-4);
}
.goal-progress-ring { flex-shrink: 0; }
.goal-progress-text { text-align: center; }
.goal-progress-pct { font-size: 18px; font-weight: 700; color: var(--primary-dark); }
.goal-progress-label { font-size: var(--fs-xs); color: var(--text-muted); }
.goal-stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.goal-stat {
text-align: center;
background: var(--bg-soft);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-1-5);
}
.goal-stat-num { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; }
.goal-stat-label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.goal-strategy {
background: var(--primary-lighter);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-4);
font-size: var(--fs-base);
color: var(--primary-dark);
margin-bottom: var(--sp-3);
}
.goal-strategy-label { font-weight: 600; margin-bottom: var(--sp-0-5); }
.goal-checkin-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--sp-5);
margin-top: var(--sp-4);
}
.goal-checkin-fields { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 30px; }
.goal-checkin-inputs { display: flex; align-items: center; justify-content: center; gap: 30px; }
.goal-checkin-prefix { font-size: var(--fs-md); color: var(--text-secondary); white-space: nowrap; }
.goal-checkin-field { display: inline-flex; align-items: center; gap: var(--sp-2); }
.goal-checkin-unit { font-size: var(--fs-md); color: var(--text-secondary); white-space: nowrap; }
.goal-checkin-input, .goal-checkin-input-min { width: 88px; flex: 0 0 auto; font-size: var(--fs-md); padding: var(--sp-2) var(--sp-3-5); text-align: center; }
.goal-suggested-num { color: var(--primary); font-weight: 700; font-size: var(--fs-lg); }
.goal-checkin-btn { justify-content: center; height: 46px; padding: 0 30px; font-size: var(--fs-md); }
.goal-pinned-card {
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-base);
}
.goal-pinned-card.amber {
background: var(--warning-bg);
border: 1px solid var(--warning);
color: var(--warning-dark);
}
.goal-pinned-card.red {
background: var(--danger-bg);
border: 1px solid var(--danger);
color: var(--danger-dark);
}
.goal-pinned-icon { flex-shrink: 0; }
.goal-pinned-body { flex: 1; }
.goal-pinned-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.goal-overdue-banner {
background: var(--danger-bg);
border: 1px solid var(--danger);
border-radius: var(--radius-sm);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-base);
color: var(--danger-dark);
}
.goal-overdue-actions { display: flex; gap: var(--sp-2); margin-left: auto; flex-shrink: 0; }
.goal-record-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--border-light);
font-size: var(--fs-base);
}
.goal-record-item:last-child { border-bottom: none; }
.goal-record-date { color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0; width: 80px; }
.goal-record-amount { font-weight: 600; flex-shrink: 0; }
.goal-record-minutes { color: var(--text-muted); font-size: var(--fs-sm); flex-shrink: 0; }
.goal-record-backfill {
font-size: var(--fs-2xs);
background: var(--warning-light);
color: var(--warning);
padding: 1px var(--sp-2);
border-radius: 8px;
font-weight: 600;
flex-shrink: 0;
}
.goal-record-delete { margin-left: auto; flex-shrink: 0; }
.goal-estimate {
font-size: var(--fs-sm);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
margin-top: var(--sp-2);
}
.goal-estimate.ahead { background: var(--success-light); color: var(--success); }
.goal-estimate.behind { background: var(--danger-light); color: var(--danger); }
.goal-estimate.none { background: var(--border-light); color: var(--text-muted); }
.backup-banner {
background: linear-gradient(135deg, var(--info-light) 0%, var(--info-light) 100%);
border: 1px solid var(--info);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-4);
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-base);
color: var(--info-dark);
}
.backup-banner button { margin-left: auto; flex-shrink: 0; }
.view-toggle { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); background: var(--bg-soft); padding: var(--sp-1); border-radius: var(--radius); }
.view-toggle .btn { border: none; background: transparent; color: var(--text-muted); box-shadow: none; }
.view-toggle .btn:hover { background: var(--border-light); }
.view-toggle .btn.active, .view-toggle .btn.active:hover { background: var(--grad-primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.skill-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: var(--sp-4);
margin-top: var(--sp-1);
align-items: start;
}
.skill-card {
background: var(--card);
border: 1px solid var(--border-light);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
display: flex;
flex-direction: column;
}
.skill-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--skill-color, var(--primary)) 38%, var(--border-light)); }
.skill-card-top {
position: relative;
padding: var(--sp-4) var(--sp-4) var(--sp-4);
background: var(--card); background: linear-gradient(180deg, color-mix(in srgb, var(--skill-color, var(--primary)) 13%, var(--card)) 0%, var(--card) 100%);
border-bottom: 1px solid var(--border-light);
}
.skill-card-top::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--skill-color, var(--primary)); }
.skill-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.skill-card-title { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); font-weight: 600; color: var(--text); min-width: 0; flex: 1 1 auto; word-break: break-word; }
.skill-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--skill-color, var(--primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--skill-color, var(--primary)) 16%, transparent); }
.skill-card-actions { display: flex; gap: var(--sp-2); }
.skill-progress { margin: var(--sp-4) 0 0; }
.skill-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.skill-progress-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); letter-spacing: .02em; }
.skill-progress-pct { font-size: var(--fs-sm); font-weight: 700; color: var(--skill-color, var(--primary)); font-variant-numeric: tabular-nums; }
.skill-progress-track { height: 10px; width: 100%; border-radius: 999px; background: var(--bg-soft); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.skill-progress-fill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); min-width: 0; background: var(--skill-color, var(--primary)); background: linear-gradient(90deg, color-mix(in srgb, var(--skill-color, var(--primary)) 78%, #fff), var(--skill-color, var(--primary))); }
.skill-goals { padding: var(--sp-3-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.skill-add-goal { align-self: flex-start; }
.skill-goal {
display: flex; flex-direction: column; gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: var(--radius-sm);
background: var(--card);
transition: background .15s ease;
}
.skill-goal:hover { background: var(--bg-soft); }
.skill-goal.gray { border-left-color: var(--text-muted); }
.skill-goal.orange { border-left-color: var(--warning); background: var(--card); background: color-mix(in srgb, var(--warning) 6%, var(--card)); }
.skill-goal.green { border-left-color: var(--success); background: var(--card); background: color-mix(in srgb, var(--success) 8%, var(--card)); }
.skill-goal.paused { border-left-color: var(--low); background: var(--bg-soft); }
.skill-goal-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.skill-goal-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.skill-goal.gray .skill-goal-status-dot { background: var(--text-muted); }
.skill-goal.orange .skill-goal-status-dot { background: var(--warning); }
.skill-goal.green .skill-goal-status-dot { background: var(--success); }
.skill-goal.paused .skill-goal-status-dot { background: var(--low); }
.skill-goal-name { font-size: var(--fs-md); font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.skill-goal.gray .skill-goal-name { color: var(--text-muted); }
.skill-goal-meta { font-size: var(--fs-sm); color: var(--text-muted); padding-left: var(--sp-4); }
.skill-goal-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; padding-left: var(--sp-4); }
.skill-badge { font-size: var(--fs-sm); font-weight: 600; padding: 3px var(--sp-3); border-radius: 12px; flex-shrink: 0; }
.skill-badge.pending { background: var(--bg-soft); color: var(--text-secondary); }
.skill-badge.learning { background: var(--info-light); color: var(--info-dark); }
.skill-badge.done { background: var(--success-light); color: var(--success); }
.skill-badge.paused { background: var(--bg-soft); color: var(--text-secondary); }
.skill-goal-empty { font-size: var(--fs-base); color: var(--text-muted); padding: var(--sp-2-5) var(--sp-3); background: var(--bg-soft); border-radius: var(--radius-sm); }
.goal-skill-tag { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 500; color: var(--primary-dark); background: var(--primary-light); padding: 3px var(--sp-2); border-radius: 12px; margin-top: var(--sp-2); width: fit-content; }
.proj-progress-ring {
width: 120px;
height: 120px;
margin: 0 auto var(--sp-2);
position: relative;
}
.proj-progress-ring svg { width: 100%; height: 100%; }
.proj-progress-ring .ring-text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.proj-progress-ring .ring-value { font-size: 24px; font-weight: 700; }
.proj-progress-ring .ring-label { font-size: var(--fs-xs); color: var(--text-muted); }
.proj-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4);
margin-bottom: var(--sp-3);
transition: box-shadow 0.15s;
}
.proj-card:hover { box-shadow: var(--shadow-md); }
.proj-card-header {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.proj-card-dot {
width: 12px; height: 12px;
border-radius: 50%;
flex-shrink: 0;
margin-top: var(--sp-1);
}
.proj-card-title { font-size: var(--fs-lg); font-weight: 600; flex: 1; }
.proj-card-desc { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: var(--sp-3); }
.proj-card-stats {
display: flex;
gap: var(--sp-4);
font-size: var(--fs-base);
color: var(--text-secondary);
flex-wrap: wrap;
}
.proj-card-stat { display: flex; align-items: center; gap: var(--sp-1); }
.proj-card-bar {
height: 6px;
background: var(--border-light);
border-radius: 3px;
margin: var(--sp-3) 0 var(--sp-2);
overflow: hidden;
}
.proj-card-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.4s ease;
}
.proj-card-actions {
display: flex;
gap: var(--sp-2);
margin-top: var(--sp-3);
flex-wrap: wrap;
}
.proj-card-actions .btn { font-size: var(--fs-sm); padding: 5px var(--sp-3); }
.proj-card-chevron {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0;
border: none; background: transparent;
color: var(--text-muted); border-radius: var(--radius-sm);
cursor: pointer; flex-shrink: 0;
transition: transform 0.18s ease, background 0.15s;
margin-top: 2px;
}
.proj-card-chevron:hover { background: var(--border-light); color: var(--text-primary); }
.proj-card-chevron svg { width: 18px; height: 18px; display: block; }
.proj-card-chevron.collapsed { transform: rotate(-90deg); }
.proj-card.is-collapsed { box-shadow: none; }
.card.is-collapsed { box-shadow: none; }
.proj-member-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 10px;
font-size: var(--fs-sm);
background: var(--primary-light);
color: var(--primary-dark);
margin-right: var(--sp-1);
}
.proj-member-chip .pmc-remove {
cursor: pointer;
opacity: 0.6;
font-weight: 700;
}
.proj-member-chip .pmc-remove:hover { opacity: 1; }
.kanban-board {
display: flex;
gap: var(--sp-3);
overflow-x: auto;
padding-bottom: var(--sp-2);
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.kanban-col {
flex: 1;
min-width: 240px;
background: var(--bg);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-2-5);
scroll-snap-align: start;
}
.kanban-tabs {
display: none; 
gap: var(--sp-2);
margin-bottom: var(--sp-3);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.kanban-tabs::-webkit-scrollbar { display: none; }
.kanban-tab {
flex: 1 0 auto;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
padding: var(--sp-2) var(--sp-3-5);
border: 1px solid var(--border);
border-radius: 999px;
background: var(--card);
color: var(--text-secondary);
font-size: var(--fs-base);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.kanban-tab.is-active {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
font-weight: 600;
}
.kanban-tab-count {
font-size: var(--fs-sm);
padding: 0 var(--sp-2);
border-radius: 999px;
background: var(--bg-soft);
color: var(--text-muted);
line-height: 1.6;
}
.kanban-tab.is-active .kanban-tab-count {
background: rgba(255, 255, 255, 0.22);
color: var(--on-primary);
}
.kanban-col-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-3);
padding: 0 var(--sp-1);
}
.kanban-col-title { font-size: var(--fs-md); font-weight: 600; }
.kanban-col-count {
font-size: var(--fs-sm);
background: var(--card);
padding: 1px var(--sp-2);
border-radius: 10px;
color: var(--text-muted);
}
.kanban-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-2-5) var(--sp-3);
margin-bottom: var(--sp-2);
cursor: pointer;
transition: box-shadow 0.15s;
}
.kanban-card:hover { box-shadow: var(--shadow-md); }
.kanban-card-title { font-size: var(--fs-md); font-weight: 500; margin-bottom: var(--sp-2); line-height: 1.4; }
.kanban-card-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.kanban-card-tag {
font-size: var(--fs-sm);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 8px;
font-weight: 500;
}
.kanban-card-assignee {
font-size: var(--fs-sm);
color: var(--text-muted);
}
.kanban-card-due {
font-size: var(--fs-sm);
}
.kanban-card-due.overdue { color: var(--danger); font-weight: 600; }
.pri-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pri-high { background: var(--high); }
.pri-medium { background: var(--medium); }
.pri-low { background: var(--low); }
.st-badge {
font-size: var(--fs-xs);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 8px;
font-weight: 500;
}
.st-todo { background: var(--border-light); color: var(--text-secondary); }
.st-in_progress { background: var(--info-light); color: var(--info-dark); }
.st-done { background: var(--success-light); color: var(--success); }
.st-blocked { background: var(--danger-light); color: var(--danger); }
.milestone-list { position: relative; padding-left: var(--sp-5); }
.milestone-list::before {
content: '';
position: absolute;
left: 6px; top: 0; bottom: 0;
width: 2px;
background: var(--border);
}
.milestone-item {
position: relative;
padding: 0 0 var(--sp-4) var(--sp-4);
}
.milestone-item::before {
content: '';
position: absolute;
left: -20px; top: 5px;
width: var(--dot-size, 10px);
height: var(--dot-size, 10px);
border-radius: 50%;
border: 2px solid var(--card);
background: var(--dot-color, var(--primary));
box-shadow: var(--dot-glow, none);
transition: width .18s ease, height .18s ease, background .18s ease, box-shadow .18s ease;
z-index: 1;
}
.milestone-item .mi-date { font-size: var(--fs-sm); color: var(--text-muted); }
.milestone-item .mi-name { font-size: var(--fs-md); font-weight: 600; margin: var(--sp-0-5) 0; }
.milestone-item .mi-desc { font-size: var(--fs-sm); color: var(--text-secondary); }
.milestone-item.overdue .mi-date { color: var(--danger); }
.milestone-item.ms-hl .mi-name { letter-spacing: .2px; }
.mi-progress { margin-top: var(--sp-2); height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; max-width: 260px; }
.mi-progress-bar { height: 100%; border-radius: 3px; background: var(--dot-color, var(--primary)); transition: width .3s ease; }
.mi-progress-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); }
.milestone-page .milestone-item { padding: var(--sp-4) 0; }
.milestone-page .milestone-item .mi-date { font-size: var(--fs-base); }
.milestone-page .milestone-item .mi-name { font-size: var(--fs-lg); font-weight: 700; margin: 3px 0 var(--sp-1); }
.milestone-page .milestone-item .mi-desc { font-size: var(--fs-base); line-height: 1.65; }
.milestone-page .milestone-item .mi-name .task-proj-tag { font-size: var(--fs-sm); }
.task-proj-tag {
display: inline-block;
font-size: var(--fs-xs);
padding: var(--sp-0-5) var(--sp-2);
border-radius: 6px;
font-weight: 600;
vertical-align: middle;
margin-right: var(--sp-1);
border: 1px solid currentColor;
}
:root[data-theme="dark"] .task-proj-tag {
filter: brightness(1.16) saturate(1.04);
border-color: color-mix(in srgb, currentColor, #ffffff 35%);
box-shadow: 0 0 0 1px color-mix(in srgb, currentColor, transparent 52%),
0 0 9px color-mix(in srgb, currentColor, transparent 76%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .task-proj-tag {
filter: brightness(1.16) saturate(1.04);
border-color: color-mix(in srgb, currentColor, #ffffff 35%);
box-shadow: 0 0 0 1px color-mix(in srgb, currentColor, transparent 52%),
0 0 9px color-mix(in srgb, currentColor, transparent 76%);
}
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }
.form-field { margin-bottom: var(--sp-3); }
.form-field label { display: block; font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--sp-1); font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
width: 100%;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-base);
font-family: inherit;
background: var(--card);
color: var(--text);
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.14);
}
.form-field textarea { resize: vertical; min-height: 60px; }
.proj-quick-actions {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: var(--sp-4);
}
.proj-quick-actions .btn { font-size: var(--fs-base); }
.proj-filters {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: var(--sp-3);
}
.proj-filters input, .proj-filters select {
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--fs-base);
background: var(--card);
}
.proj-filters .pf-search { flex: 1; min-width: 150px; }
.proj-task-table { width: 100%; border-collapse: collapse; }
.proj-task-table th {
text-align: left;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-muted);
padding: var(--sp-3) var(--sp-3);
border-bottom: 2px solid var(--border);
white-space: nowrap;
letter-spacing: 0.01em;
}
.proj-task-table td {
padding: var(--sp-3) var(--sp-3);
font-size: var(--fs-base);
border-bottom: 1px solid var(--border-light);
}
.proj-task-table tbody tr { transition: background .15s ease; }
.proj-task-table tbody tr:hover { background: var(--bg-soft); }
.proj-task-table .ptt-title { font-weight: 500; }
.inline-edit {
width: 100%;
box-sizing: border-box;
font-size: var(--fs-sm);
font-family: inherit;
padding: var(--sp-1) var(--sp-1-5);
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-soft);
color: var(--text-secondary);
line-height: 1.4;
}
.inline-edit:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px var(--primary-light, rgba(31,107,79,.15)); }
.pt-inline-title { min-width: 150px; font-weight: 500; color: var(--text-primary, var(--text-secondary)); }
.pt-inline-assignee, .pt-inline-pri, .pt-inline-st { min-width: 86px; cursor: pointer; }
.pt-inline-date { min-width: 140px; }
.pt-overdue .inline-edit { color: var(--danger); font-weight: 600; }
.proj-empty {
text-align: center;
padding: var(--sp-7) 20px;
color: var(--text-muted);
}
.proj-empty .pe-icon { font-size: 36px; margin-bottom: var(--sp-2); }
.proj-empty .pe-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.proj-empty .pe-desc { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
@media (max-width: 768px) {
.kanban-tabs { display: flex; }
.kanban-board { display: block; overflow-x: visible; scroll-snap-type: none; padding-bottom: 0; }
.kanban-col { display: none; min-width: 0; width: 100%; }
.kanban-col.is-active { display: block; }
.form-row-2, .form-row-3 { grid-template-columns: 1fr; }
.proj-task-table thead { display: none; }
.proj-task-table, .proj-task-table tbody { display: block; width: 100%; }
.proj-task-table tr {
display: block;
margin-bottom: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--card);
padding: var(--sp-1) 0;
box-shadow: var(--shadow-sm);
}
.proj-task-table td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: 7px var(--sp-3);
border-bottom: 1px solid var(--border-light);
text-align: right;
}
.proj-task-table td::before {
content: attr(data-label);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--text-muted);
text-align: left;
flex-shrink: 0;
}
.proj-task-table td > * { flex: 1; min-width: 0; }
.proj-task-table td.ptt-title { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
.proj-task-table td.ptt-title > * { flex: none; }
.proj-task-table td.ptt-title::before { margin-bottom: var(--sp-0-5); }
.proj-task-table td:last-child { border-bottom: none; justify-content: flex-end; }
.proj-task-table td:last-child > * { flex: none; }
}
.data-error-box {
margin: var(--sp-4) 0;
}
.data-error-inline {
background: var(--danger-bg, #fdecec);
border: 1px solid var(--danger, #e05656);
border-radius: var(--radius);
padding: var(--sp-4) 18px;
color: var(--danger-dark, #a33);
}
.data-error-inline strong { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-base); }
.data-error-msg { font-size: var(--fs-base); line-height: 1.5; margin-bottom: var(--sp-3); word-break: break-word; }
.data-error-hint { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-bottom: var(--sp-3); border-left: 3px solid var(--warn, #e0a93b); padding-left: var(--sp-3); }
.data-error-actions { display: flex; gap: var(--sp-2); }
.board-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.board-summary-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3-5) var(--sp-3);
text-align: center;
box-shadow: var(--shadow);
}
.board-summary-num { font-size: var(--fs-2xl); font-weight: 800; color: var(--primary); line-height: 1.1; }
.board-summary-unit { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.board-summary-label { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.board-chart {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3-5) var(--sp-4);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow);
overflow-x: auto;
}
.board-chart-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); }
.board-chart-empty { font-size: var(--fs-sm); color: var(--text-muted); padding: var(--sp-2) 0; }
.goal-board-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.goal-board-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--goal-accent, var(--primary));
}
.goal-board-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.goal-board-name { flex: 1; min-width: 0; font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.goal-board-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.goal-board-body { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-3); }
.goal-board-records { border-top: 1px solid var(--border-light); padding-top: var(--sp-1); }
.report-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
}
.report-week-label { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.report-nav { display: flex; gap: var(--sp-2); }
.report-table {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-1-5) var(--sp-1);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow);
overflow-x: auto;
}
.report-table-el { width: 100%; border-collapse: collapse; }
.report-table-el th, .report-table-el td {
padding: var(--sp-3) var(--sp-4);
text-align: left;
border-bottom: 1px solid var(--border-light);
font-size: var(--fs-base);
}
.report-table-el th {
font-size: var(--fs-sm);
color: var(--text-muted);
font-weight: 600;
border-bottom: 2px solid var(--border);
letter-spacing: 0.01em;
}
.report-table-el tbody tr { transition: background .15s ease; }
.report-table-el tbody tr:hover { background: var(--bg-soft); }
.report-table-el tr:last-child td { border-bottom: none; }
.report-form {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-4) 18px;
box-shadow: var(--shadow);
}
.report-form-title { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-3); color: var(--text); }
.report-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.report-col-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); }
.report-textarea {
width: 100%;
min-height: 92px;
resize: vertical;
font-size: var(--fs-base);
line-height: 1.5;
font-family: inherit;
}
.report-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }
@media (max-width: 640px) {
.board-summary { grid-template-columns: repeat(2, 1fr); }
.report-cols { grid-template-columns: 1fr; }
.goal-board-body { gap: var(--sp-4); }
}
.bm-sync { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); font-size:var(--fs-sm); color:var(--text-muted); }
.bm-sync .dot { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; }
.bm-sync .dot.warn { background:var(--warning); }
.bm-sync .dot.syncing { background:var(--info, #0a84ff); animation:pulse 1s infinite; }
.bm-sync .dot.offline { background:var(--text-muted); }
.bm-sync .dot.unauth { background:var(--warning); }
.bm-sync .dot.error { background:var(--danger); }
@keyframes pulse { 0%{opacity:.4;} 50%{opacity:1;} 100%{opacity:.4;} }
.bm-sync .bm-sync-actions { display:flex; gap:var(--sp-1-5); flex-wrap:wrap; margin-left:auto; }
.bm-sync .btn-sm { min-height:34px; }
@media (max-width: 768px) { .bm-sync .bm-sync-actions { margin-left:0; width:100%; } }
.bm-tabs { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-4); border-bottom:1px solid var(--border); padding-top:var(--sp-2); padding-bottom:var(--sp-3); }
.arsenal-tabs { flex-direction:column; align-items:stretch; gap:var(--sp-2-5); }
.bm-tab { padding:var(--sp-2-5) var(--sp-4); border-radius:10px; cursor:pointer; font-size:var(--fs-md); font-weight:500; color:var(--text-secondary); white-space:nowrap; }
.bm-tab-group { display:flex; align-items:center; gap:var(--sp-2-5); flex-wrap:wrap; }
.bm-tab-group + .bm-tab-group { margin-top:var(--sp-0-5); }
.bm-tab-group-label { font-size:var(--fs-xs); font-weight:700; color:var(--text-muted); letter-spacing:.04em; background:var(--bg-soft); border:1px solid var(--border); padding:3px var(--sp-2-5); border-radius:999px; white-space:nowrap; }
.bm-tab-group-inner { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
@media (min-width: 769px) {
.arsenal-tabs { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding-left: var(--sp-3); }
.bm-tab-group { flex-wrap: wrap; padding-left: var(--sp-4); border-left: 1px solid var(--border-light); }
}
.bm-stage-wrap { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:var(--sp-4); margin-bottom:var(--sp-4); }
.bm-dash-hero { background:linear-gradient(135deg,var(--primary-light),var(--bg-soft)); border:1px solid var(--border); border-radius:14px; padding:var(--sp-3-5) var(--sp-4); margin-bottom:var(--sp-4); }
.bm-dash-hero-title { font-size:var(--fs-lg); font-weight:800; color:var(--primary-dark); }
.bm-dash-hero-sub { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:var(--sp-1); }
.bm-onboard { display:flex; gap:var(--sp-3); align-items:flex-start; background:linear-gradient(135deg,var(--primary-light),var(--bg-soft)); border:1px solid var(--primary); border-radius:14px; padding:var(--sp-3-5) var(--sp-4); margin-bottom:var(--sp-4); }
.bm-onboard-ico { font-size:22px; line-height:1; }
.bm-onboard-body { flex:1; }
.bm-onboard-title { font-weight:800; color:var(--primary-dark); font-size:var(--fs-md); }
.bm-onboard-ul { margin:var(--sp-1-5) 0 0; padding-left:18px; font-size:var(--fs-sm); color:var(--text-secondary); }
.bm-onboard-ul li { margin:var(--sp-0-5) 0; }
.bm-onboard-close { flex:none; }
.bm-tab:hover { background:var(--bg-soft); }
.bm-tab.active { background:var(--primary-light); color:var(--primary-dark); font-weight:700; }
.bm-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-4); }
.bm-overview-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:var(--sp-4); cursor:pointer; box-shadow:var(--shadow); transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.bm-overview-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.08); transform:translateY(-2px); }
.bm-overview-card .bm-oc-count { font-size:28px; font-weight:800; color:var(--primary); line-height:1; }
.bm-overview-card .bm-oc-title { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:var(--sp-2); }
.bm-overview-card.overdue { border-color:var(--danger); }
.bm-overview-card.overdue .bm-oc-count { color:var(--danger); }
.bm-oc-list { margin-top:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-1-5); max-height:140px; overflow:auto; }
.bm-oc-item { font-size:var(--fs-sm); padding:var(--sp-1-5) var(--sp-2); border-radius:8px; background:var(--bg-soft); display:flex; justify-content:space-between; gap:var(--sp-2); align-items:center; }
.bm-oc-item > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-oc-item.overdue { background:var(--danger-light); color:var(--danger); font-weight:600; }
.bm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-3); }
.bm-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); box-shadow:var(--shadow); transition:box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
#arsenalDistill { display:flex; flex-direction:column; gap: var(--sp-4); }
#arsenalDistill .bm-card { gap: var(--sp-3); }
.distill-lesson { border-left:3px solid var(--primary); padding:var(--sp-3) 0 var(--sp-3) var(--sp-4); margin:var(--sp-4) 0; }
.distill-cluster { margin:var(--sp-3) 0; padding:var(--sp-3-5) var(--sp-4); background:var(--primary-light); border:1px solid color-mix(in srgb, var(--primary) 16%, var(--border)); border-radius:12px; }
.distill-cluster.cross { background:#f3fbf5; border-color:#bfe9c9; }
.distill-kp { margin:var(--sp-2-5) 0; padding:var(--sp-3) var(--sp-3-5); background:var(--card); border:1px solid var(--border); border-radius:10px; }
.arsenal-head-actions { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end; }
.btn-warning { background: var(--warning); background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 82%, #fff), var(--warning)); color: var(--on-primary); border-radius: var(--radius-pill); box-shadow: 0 2px 8px rgba(var(--warning-rgb), 0.28); }
.btn-warning:hover { filter: brightness(1.05); box-shadow: var(--shadow-md); }
.arsenal-home { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; background:linear-gradient(135deg,var(--primary-light),var(--bg-soft)); border:1px solid var(--border); border-radius:14px; padding:var(--sp-3-5) var(--sp-4); margin-bottom:var(--sp-4); cursor:pointer; transition:box-shadow var(--transition),border-color var(--transition); }
.arsenal-home:hover { box-shadow:var(--shadow-md); }
.arsenal-home.active { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
.arsenal-home-badge { font-size:var(--fs-xs); font-weight:700; color:#fff; background:var(--primary); border-radius:999px; padding:3px var(--sp-2-5); white-space:nowrap; }
.arsenal-home-title { font-size:var(--fs-lg); font-weight:800; color:var(--primary-dark); }
.arsenal-home-sub { font-size:var(--fs-sm); color:var(--text-secondary); }
.bm-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.bm-card.overdue { border-color:var(--danger); }
.bm-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-2); }
.bm-card-head > span:last-child { flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; min-width:0; }
.bm-card-title { font-size:var(--fs-md); font-weight:700; word-break:break-word; min-width:0; flex:1 1 auto; overflow-wrap:anywhere; }
.bm-card-meta { font-size:var(--fs-sm); color:var(--text-secondary); display:flex; flex-wrap:wrap; gap:var(--sp-1-5); margin-top:var(--sp-0-5); }
.bm-card-note { font-size:var(--fs-sm); color:var(--text-muted); white-space:pre-wrap; }
.bm-card-actions { display:flex; gap:var(--sp-1-5); flex-wrap:wrap; margin-top:var(--sp-2); }
.bm-card .btn { white-space:nowrap; flex-shrink:0; }
.bm-status { font-size:var(--fs-xs); padding:var(--sp-0-5) var(--sp-2-5); border-radius:20px; font-weight:600; }
.bm-status.待分析 { background:var(--warning-light); color:var(--warning); }
.bm-status.监测中 { background:var(--success-light); color:var(--success); }
.bm-status.待巡检 { background:var(--danger-light, #fde8e8); color:var(--danger, #d9534f); }
.bm-status.灵感 { background:var(--bg-soft); color:var(--text-secondary); }
.bm-status.写作中 { background:var(--primary-light); color:var(--primary-dark); }
.bm-status.已发布 { background:var(--success-light); color:var(--success); }
.bm-pill { font-size:var(--fs-xs); padding:var(--sp-0-5) var(--sp-2-5); border-radius:20px; background:var(--bg-soft); color:var(--text-secondary); }
.bm-pill.overdue { background:var(--danger-light); color:var(--danger); font-weight:600; }
.bm-kanban { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--sp-3); }
.bm-kanban-col { background:var(--bg-soft); border-radius:14px; padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2); min-height:120px; }
.bm-kanban-col-head { font-weight:700; font-size:var(--fs-md); display:flex; justify-content:space-between; align-items:center; }
.bm-kanban-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:var(--sp-3); cursor:pointer; }
.bm-kanban-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); }
.bm-kanban-card.overdue { border-color:var(--danger); }
.bm-chart-wrap { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:var(--sp-4); margin-bottom:var(--sp-3); }
.bm-chart-title { font-weight:700; margin-bottom:var(--sp-2); }
.bm-chart { width:100%; height:auto; }
.bm-legend { display:flex; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-sm); margin-top:var(--sp-2); }
.bm-legend span { display:inline-flex; align-items:center; gap:var(--sp-1-5); }
.bm-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.bm-empty { padding:var(--sp-5); text-align:center; color:var(--text-muted); }
.bm-section-head { display:flex; justify-content:space-between; align-items:center; margin:var(--sp-4) 0 var(--sp-3); }
.bm-section-head h3 { font-size:var(--fs-lg); margin:0; }
.bm-metric-row { display:flex; flex-wrap:wrap; gap:var(--sp-1-5); }
.bm-metric-row .bm-pill { background:var(--primary-light); color:var(--primary-dark); }
.bm-viewbar { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3); }
.bm-seg { display:inline-flex; background:var(--bg-soft); border-radius:10px; padding:3px; }
.bm-seg-item { padding:var(--sp-1-5) var(--sp-3-5); border-radius:8px; cursor:pointer; font-size:var(--fs-sm); color:var(--text-secondary); white-space:nowrap; }
.bm-seg-item:hover { background:var(--border); }
.bm-seg-item.active { background:var(--primary); color:#fff; font-weight:600; }
.bm-oc-item[data-bm-bd-edit] { cursor:pointer; }
.bm-oc-item[data-bm-bd-edit]:hover { background:var(--primary-light); }
.bm-stat { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:var(--sp-4); text-align:center; }
.bm-stat-val { font-size:var(--fs-2xl, 28px); font-weight:800; color:var(--text); }
.bm-stat-label { font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-1); }
.ext-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-3); margin-bottom:var(--sp-4); }
.ext-stat-grid .bm-stat { padding:var(--sp-4); }
#extTabs { margin-top: var(--sp-5); }
.bm-subcard { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:var(--sp-2-5) var(--sp-3); margin-top:var(--sp-2); }
.bm-list { margin:var(--sp-1-5) 0 0 0; padding-left:20px; }
.bm-list li { margin:var(--sp-1) 0; }
.ext-act { display:inline-flex; align-items:flex-start; gap:var(--sp-1-5); cursor:pointer; }
.bm-ai-loading { display:flex; align-items:center; gap:var(--sp-2-5); padding:18px; color:var(--text-muted); }
.bm-spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:bm-spin .8s linear infinite; flex:none; }
@keyframes bm-spin { to { transform:rotate(360deg); } }
#appBoot {
position: fixed; inset: 0; z-index: 99999;
display: none; flex-direction: column; align-items: center; justify-content: center;
gap: var(--sp-3, 14px);
background: var(--bg, #f6f8f5); color: var(--text, #1f2a25);
}
#appBoot .bm-spinner { width: 38px; height: 38px; border-width: 3px; }
#appBoot .app-boot-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3, 14px); padding: 24px; }
#appBoot .app-boot-logo {
width: 56px; height: 56px; border-radius: 16px;
background: linear-gradient(135deg, var(--primary, #1f6b4f), var(--primary-dark, #18573f));
display: flex; align-items: center; justify-content: center;
color: var(--on-primary, #fff); font-size: 26px; font-weight: 700;
box-shadow: 0 8px 24px rgba(var(--primary-rgb, 31, 107, 79), .28);
}
#appBoot .app-boot-title { font-size: 16px; font-weight: 600; letter-spacing: .5px; }
#appBoot .app-boot-step { font-size: 13px; color: var(--text-muted, #6f7a73); margin-top: -6px; min-height: 18px; transition: opacity .15s ease; }
.ext-raw-flash { outline:2px solid var(--primary); outline-offset:1px; transition:outline-color .2s; box-shadow:0 0 0 4px rgba(0,122,255,.12); }
.bm-ai-fallback { margin-top:var(--sp-2-5); padding:var(--sp-2) var(--sp-2-5); border-radius:8px; background:var(--warning-light, #fff7e6); color:var(--warning, #b8860b); font-size:var(--fs-xs); line-height:1.6; }
@media (max-width: 768px) {
.bm-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.bm-oc-item > span:first-child { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-oc-item > span:last-child { flex:none; }
.bm-kanban { grid-template-columns:1fr; }
.bm-grid { grid-template-columns:1fr; }
.bm-tabs { overflow-x:auto; min-width:0; max-width:100%; }
.bm-tab-group { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--sp-1); }
.bm-tab-group-label { flex:none; }
.bm-tab-group-inner { flex-wrap:nowrap; }
#page-arsenal .btn, #page-arsenal .btn-sm { min-height:44px; }
#page-arsenal .form-input, #page-arsenal .form-select, #page-arsenal textarea { font-size:16px; }
#page-arsenal .btn, #page-arsenal .btn-sm { min-height:44px; }
#page-arsenal .form-input, #page-arsenal .form-select, #page-arsenal textarea { font-size:16px; }
.modal { max-width: 100vw; border-radius: 0; height: 100dvh; max-height: none; }
.ext-modal { max-width: calc(100vw - 32px); border-radius: 16px; height: auto; max-height: 88vh; }
#extRun, #extRewriteRun { flex: 1 1 100%; justify-content: center; }
.ext-card-modal .btn-primary { width: 100%; justify-content: center; }
.ext-stat-grid { grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.ext-stat-grid .bm-stat { padding:var(--sp-2-5) var(--sp-1-5); }
.ext-stat-grid .bm-stat-val { font-size:22px; }
.ext-stat-grid .bm-stat-label { font-size:var(--fs-xs); }
.bm-section-head { flex-wrap:wrap; gap:var(--sp-2); }
.bm-ext-progress { gap:var(--sp-1-5); padding:var(--sp-3-5) var(--sp-3); }
.bm-ext-progress .fw-step { flex:1 1 calc(50% - 6px); }
.bm-ext-progress .fw-info { white-space:normal; }
.bm-ext-progress .fw-next { flex:1 1 100%; margin-left:0; margin-top:var(--sp-3); }
#page-arsenal .data-table th, #page-arsenal .data-table td { padding:var(--sp-1-5); font-size:var(--fs-sm); }
}
@media (max-width: 1100px) {
.bm-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px) {
#page-arsenal .data-table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bm-card-note, .bm-card-title { overflow-wrap:anywhere; }
}
@media (max-width: 420px) {
.bm-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); }
.bm-overview-card { padding:var(--sp-3); }
}
.help-hero { padding: var(--sp-5); background: linear-gradient(135deg, var(--primary-light), var(--bg-soft)); border: 1px solid var(--border-light); }
.help-hero-title { font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--sp-2); }
.help-hero-sub { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--sp-4); }
.help-hero-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.help-h2 { font-size: var(--fs-lg); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); padding-left: var(--sp-2-5); border-left: 4px solid var(--primary); }
.help-note { font-size: var(--fs-sm); color: var(--text-muted); background: var(--info-light); border: 1px solid var(--info); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); line-height: 1.6; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.help-card { background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: 12px; padding: var(--sp-4); }
.help-card-h { font-weight: 700; margin-bottom: var(--sp-2); color: var(--primary-dark); }
.help-card-b { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; }
.help-tbl { width: 100%; margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.help-tbl th, .help-tbl td { text-align: left; vertical-align: top; padding: var(--sp-3); line-height: 1.6; }
.help-faq { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.help-faq-item { background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: 10px; padding: var(--sp-3) var(--sp-4); }
.help-faq-item summary { cursor: pointer; font-weight: 600; }
.help-faq-a { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin-top: var(--sp-2); }
.flow-wrap { margin: 0 0 var(--sp-5); }
.flow-cap { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: var(--sp-2); }
.flow-svg { width: 100%; max-width: 772px; height: auto; display: block; }
.flow-node { fill: var(--bg-soft); stroke: var(--primary); stroke-width: 1.5; }
.flow-node-accent { stroke: var(--info); }
.flow-node-text { fill: var(--text); font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.flow-arrow { stroke: var(--text-muted); stroke-width: 2; fill: none; }
.flow-arrow-head { fill: var(--text-muted); }
@media (max-width: 600px) { .flow-svg { max-width: 100%; } .help-grid { grid-template-columns: 1fr; } }
.dna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1-5); }
.qstat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2-5); }
@media (max-width: 380px) {
.report-cols { grid-template-columns: 1fr; }                                  
.dna-grid { grid-template-columns: 1fr; }                                     
.qstat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }             
.ai-cfg-grid { grid-template-columns: 1fr; }                                  
.bm-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.form-input, .form-select, .form-textarea, .bm-input, .bm-textarea { max-width: 100%; } 
.ext-seg { flex-wrap: wrap; }                                                   
#extRwBreakdown, #extRwCard { max-width: 100% !important; }                     
}
@media (max-width: 360px) {
.qstat-grid { grid-template-columns: 1fr; }                                       
.bm-overview-grid { grid-template-columns: 1fr; }                                 
.bm-card, .card { padding: var(--sp-2); }                                         
}
.arsenal-notices { margin-top: var(--sp-3); }
.ac-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-bottom:var(--sp-3); }
.ac-stat { padding:var(--sp-2) var(--sp-3); display:flex; flex-direction:column; gap:6px; }
.ac-stat-ic { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(10,132,255,0.10); color:var(--primary); }
.ac-stat-ic svg { width:16px; height:16px; }
.ac-stat-label { font-size:var(--fs-sm); color:var(--text-muted); }
.ac-stat-val { font-size:26px; font-weight:800; line-height:1.1; margin-top:2px; font-variant-numeric:tabular-nums; }
.ac-stat-sub { font-size:var(--fs-sm); color:var(--text-muted); margin-top:2px; }
.ac-alert { display:flex; gap:var(--sp-1-5); align-items:flex-start; background:#fdecec; color:var(--danger); border:1px solid var(--danger); border-radius:var(--radius); padding:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-3); font-size:var(--fs-sm); }
.ac-alert svg { flex:none; margin-top:2px; }
.ac-tabs { display:flex; gap:var(--sp-1); margin-bottom:var(--sp-3); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.ac-tabs::-webkit-scrollbar { display:none; }
.ac-tab { border:none; background:transparent; padding:var(--sp-1-5) var(--sp-2); font-size:var(--fs-base); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; gap:6px; border-bottom:2px solid transparent; white-space:nowrap; flex:0 0 auto; }
.ac-tab.active { color:var(--primary-dark); border-bottom-color:var(--primary); font-weight:700; }
.ac-tab-add { color:var(--primary); border:1px dashed var(--primary); border-bottom:none; border-radius:8px; }
.ac-tab-add:hover { background:rgba(10,132,255,0.08); }
.ac-addbtn { margin-bottom:var(--sp-3); }
.ac-summary { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-3); }
.ac-summary .bm-pill { font-weight:600; }
.ac-filterbar { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:flex-end; margin-bottom:var(--sp-3); }
.ac-fitem { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-xs); color:var(--text-muted); }
.ac-fitem .form-input { min-width:120px; }
.ac-fitem-grow { flex:1 1 180px; }
.ac-flt-empty { color:var(--text-muted); font-size:var(--fs-sm); padding:var(--sp-2) 0; }
.ac-trend { margin-top:var(--sp-2); }
.ac-trend-legend { display:flex; gap:var(--sp-2); font-size:var(--fs-xs); margin-top:4px; }
.ac-trend-inc { color:var(--success); }
.ac-trend-exp { color:var(--danger); }
.ac-form { margin-bottom:var(--sp-3); }
.ac-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); }
.ac-fld { display:flex; flex-direction:column; gap:6px; font-size:var(--fs-sm); color:var(--text-muted); }
.ac-fld-wide { grid-column:1 / -1; }
.ac-fld .form-input { width:100%; }
.ac-form-actions { display:flex; gap:var(--sp-1-5); margin-top:var(--sp-2); }
.ac-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-2); flex-wrap:wrap; }
.ac-card-name { font-size:var(--fs-lg); font-weight:700; }
.ac-card-badges { display:flex; gap:6px; flex-wrap:wrap; }
.ac-card-owe { display:flex; align-items:baseline; gap:var(--sp-1); margin-top:var(--sp-1-5); font-size:var(--fs-sm); color:var(--text-muted); }
.ac-card-owe b { font-size:22px; font-variant-numeric:tabular-nums; }
.ac-rec-list { margin-top:var(--sp-2); border-top:1px solid var(--border); }
.ac-rec { display:flex; align-items:center; gap:var(--sp-1-5); padding:var(--sp-1-5) 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); flex-wrap:wrap; }
.ac-rec:hover { background:rgba(0,0,0,0.02); }
.ac-rec-date { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ac-rec-note { color:var(--text-muted); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac-rec-amt { font-weight:700; font-variant-numeric:tabular-nums; margin-left:auto; }
.ac-amt-owe { color:var(--danger); }
.ac-amt-pay { color:var(--success); }
.ac-rec-del { border:none; background:transparent; color:var(--text-muted); cursor:pointer; padding:4px; display:flex; }
.ac-rec-del:hover { color:var(--danger); }
.ac-card-actions { display:flex; gap:var(--sp-1); margin-top:var(--sp-2); flex-wrap:wrap; }
.ac-btn-danger { color:var(--danger); }
.ac-btn-danger:hover { background:rgba(255,59,48,0.08); }
.ac-owner { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:var(--primary-light); color:var(--primary-dark); font-size:var(--fs-xs); font-weight:700;
flex:none; border:1px solid var(--border); }
.ac-owner-self { background:var(--bg-soft); color:var(--text-muted); }
.ac-card-due { border-left:3px solid var(--danger); }
.ac-due-badge { background:#fdecec; color:var(--danger); border-radius:20px; padding:1px 8px; font-size:var(--fs-xs); font-weight:700; margin-left:var(--sp-1); vertical-align:middle; }
.ac-exp-top { display:flex; align-items:center; gap:var(--sp-1-5); flex-wrap:wrap; }
.ac-exp-amt { font-size:22px; font-weight:800; color:var(--danger); font-variant-numeric:tabular-nums; }
.ac-exp-meta { display:flex; gap:var(--sp-2); margin-top:6px; font-size:var(--fs-sm); color:var(--text-muted); flex-wrap:wrap; }
.ac-exp-note { color:var(--text); }
.ac-pill-owe { background:#fdecec; color:var(--danger); }
.ac-pill-pay { background:#e7f6ec; color:var(--success); }
.ac-flow-summary { font-size:var(--fs-sm); color:var(--text-muted); padding:var(--sp-1) 0 var(--sp-2); font-variant-numeric:tabular-nums; }
.ac-flow-more { font-size:var(--fs-xs); color:var(--text-muted); padding:var(--sp-1) 0; }
.ac-daily { margin-top:var(--sp-2); border-top:1px dashed var(--border); padding-top:var(--sp-2); }
.ac-daily-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; padding:var(--sp-1) 0; font-size:var(--fs-sm); border-bottom:1px solid var(--border); font-variant-numeric:tabular-nums; }
.ac-daily-row:last-child { border-bottom:none; }
.ac-daily-date { font-weight:600; min-width:92px; }
.ac-daily-inc { color:var(--success); }
.ac-daily-exp { color:var(--danger); }
.ac-daily-net { font-weight:600; }
.ac-daily-empty { color:var(--text-muted); }
@media (max-width:640px){ .ac-stats{grid-template-columns:1fr;} .ac-form-grid{grid-template-columns:1fr;} .ac-stat-val{font-size:22px;} .ac-card-actions .btn{flex:1 1 auto; justify-content:center;} }