:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-soft: #f8f9fc;
  --line: #e6e9f1;
  --text: #172033;
  --muted: #7d879a;
  --primary: #5b55df;
  --primary-soft: #eeedff;
  --teal: #17a7a2;
  --teal-soft: #e7f8f6;
  --orange: #ff8b3d;
  --orange-soft: #fff1e7;
  --green: #20a66a;
  --green-soft: #e9f8f0;
  --red: #e64d5d;
  --red-soft: #fcebed;
  --amber: #d79016;
  --amber-soft: #fff5df;
  --shadow: 0 10px 28px rgba(31, 40, 72, .07);
}

.unified-workspace.previewing .unified-sidebar { top: 44px; }

* { box-sizing: border-box; }
html { min-width: 1180px; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.session-restoring #loginScreen { display: none !important; }

.login-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(620px, 1.25fr) minmax(440px, .75fr); position: relative; background: #f8f9fc; }
.login-brand { position: absolute; z-index: 3; left: 40px; top: 32px; display: flex; align-items: center; gap: 11px; color: #fff; letter-spacing: .08em; }
.login-brand .brand-mark { width: 38px; height: 38px; font-size: 18px; background: rgba(255,255,255,.17); box-shadow: none; backdrop-filter: blur(8px); }
.login-visual { position: relative; overflow: hidden; display: flex; align-items: center; padding: 130px 8vw 70px; color: #fff; background: linear-gradient(145deg, #322e97 0%, #5d57df 58%, #7771ed 100%); }
.login-visual::before { content: ""; position: absolute; width: 600px; height: 600px; left: -180px; bottom: -330px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 150px rgba(255,255,255,.018); }
.login-copy { position: relative; z-index: 2; max-width: 560px; }
.login-kicker { display: inline-flex; padding: 7px 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: rgba(255,255,255,.8); font-size: 11px; letter-spacing: .08em; }
.login-copy h2 { margin: 25px 0 16px; font-size: clamp(39px, 4.2vw, 65px); line-height: 1.15; letter-spacing: -.045em; }
.login-copy > p { max-width: 470px; margin: 0 0 46px; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.8; }
.feature-row { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.feature-row > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.23); border-radius: 11px; color: rgba(255,255,255,.65); font-size: 10px; }
.feature-row strong, .feature-row small { display: block; }.feature-row strong { font-size: 13px; }.feature-row small { margin-top: 4px; color: rgba(255,255,255,.55); font-size: 10px; }
.login-art { position: absolute; width: 290px; height: 290px; right: -50px; top: 22%; opacity: .8; }
.orbit { position: absolute; inset: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }.orbit.o2 { inset: 72px; }.center-core { position: absolute; inset: 105px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--primary); font-weight: 900; box-shadow: 0 10px 30px rgba(31,24,115,.3); }
.node { position: absolute; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.08); font-size: 10px; backdrop-filter: blur(5px); }.n1 { top: 15px; left: 108px; }.n2 { right: 0; top: 150px; }.n3 { left: 15px; bottom: 35px; }
.login-form-wrap { display: grid; place-items: center; padding: 60px; background: #fff; }
.auth-box, .login-form { width: min(100%, 390px); }
.login-form { width: 100%; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 24px; padding: 4px; border-radius: 11px; background: #f2f3f7; }
.auth-tabs button { height: 36px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }.auth-tabs button.active { color: var(--primary); background: #fff; box-shadow: 0 4px 12px rgba(35,42,70,.08); }
.form-badge { display: inline-block; margin-bottom: 21px; padding: 6px 10px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 750; }
.login-form h1 { margin: 0 0 8px; font-size: 31px; }.login-form > p { margin: 0 0 32px; color: var(--muted); font-size: 13px; }
.login-form > label { display: block; margin-top: 19px; font-size: 12px; font-weight: 700; }
.login-form > label input { width: 100%; height: 48px; margin-top: 8px; padding: 0 14px; border: 1px solid #dfe3ec; border-radius: 10px; outline: 0; background: #fafbfc; font-size: 13px; }
.login-form > label input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.09); background: #fff; }
.form-options { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 22px; color: var(--muted); font-size: 11px; }.form-options label { display: flex; align-items: center; gap: 6px; }.form-options button { border: 0; background: transparent; color: var(--primary); cursor: pointer; font-size: 11px; }
.login-button { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 11px; color: #fff; background: var(--primary); font-weight: 750; cursor: pointer; box-shadow: 0 10px 22px rgba(91,85,223,.2); }.login-button:hover { background: #4e49cb; }.login-button span { font-size: 18px; }
.demo-tip { margin-top: 16px; color: #9aa2b1; text-align: center; font-size: 10px; }
.register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 11px; }.register-grid label { display: block; margin-top: 14px; font-size: 11px; font-weight: 700; }.register-grid input { width: 100%; height: 43px; margin-top: 7px; padding: 0 11px; border: 1px solid #dfe3ec; border-radius: 9px; outline: 0; background: #fafbfc; font-size: 12px; }.register-grid input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.09); background: #fff; }.register-form .login-button { margin-top: 20px; }.register-notice { margin-top: 13px; color: var(--muted); text-align: center; font-size: 9px; }

.app-shell { display: flex; min-height: 100vh; }
.unified-workspace { min-height: 100vh; background: var(--bg); }.unified-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 220px; display: flex; flex-direction: column; padding: 22px 16px; color: #fff; background: #20233d; }.unified-brand { display: flex; align-items: center; gap: 11px; padding: 0 7px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }.unified-brand .brand-mark { width: 38px; height: 38px; font-size: 18px; }.unified-brand strong, .unified-brand small, .unified-role-card strong, .unified-role-card small { display: block; }.unified-brand strong { font-size: 13px; letter-spacing: .08em; }.unified-brand small { margin-top: 3px; color: rgba(255,255,255,.45); font-size: 9px; }.unified-role-card { display: flex; align-items: center; gap: 9px; margin: 18px 0 8px; padding: 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.04); }.unified-role-card .avatar { width: 32px; height: 32px; flex: 0 0 auto; }.unified-role-card strong { font-size: 11px; }.unified-role-card small { margin-top: 3px; color: rgba(255,255,255,.48); font-size: 8px; }.unified-nav { display: grid; gap: 6px; margin-top: 14px; }.unified-nav > small { padding: 0 10px 5px; color: rgba(255,255,255,.32); font-size: 8px; letter-spacing: .12em; }.unified-nav button { position: relative; height: 43px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 0 12px; border: 0; border-radius: 10px; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; text-align: left; }.unified-nav button:hover, .unified-nav button.active { color: #fff; background: rgba(115,108,239,.22); }.unified-nav button.active { box-shadow: inset 3px 0 #817af4; }.unified-nav button span { font-size: 15px; }.unified-nav button b { font-size: 11px; font-weight: 600; }.unified-nav button em { min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: var(--red); font-size: 8px; font-style: normal; }.unified-logout { height: 40px; margin-top: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; font-size: 10px; }.unified-logout:hover { color: #fff; border-color: rgba(255,255,255,.3); }.unified-workspace-content { width: calc(100% - 220px); min-height: 100vh; margin-left: 220px; }.unified-workspace #appShell > .sidebar, .unified-workspace #adminShell > .admin-sidebar { display: none; }.unified-workspace .main, .unified-workspace .admin-main { width: 100%; margin-left: 0; }.unified-workspace .top-actions .user-chip, .unified-workspace .admin-user, .unified-workspace .admin-logout { display: none; }.unified-workspace .app-shell, .unified-workspace .admin-shell { display: block; }.unified-workspace .app-shell.previewing .main { padding-top: 44px; }
.admin-preview-bar { position: fixed; inset: 0 0 auto 0; z-index: 25; height: 44px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; background: #272a50; box-shadow: 0 5px 16px rgba(25,27,62,.16); font-size: 11px; }.admin-preview-bar strong { color: #aaa6ff; }.admin-preview-bar button { height: 29px; padding: 0 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; font-size: 10px; }.admin-preview-bar button:hover { background: rgba(255,255,255,.16); }.app-shell.previewing .sidebar { top: 44px; }.app-shell.previewing .main { padding-top: 44px; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 76px; padding: 22px 12px; background: rgba(255,255,255,.95); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.brand-mark { width: 42px; height: 42px; overflow: hidden; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 21px; background: transparent; box-shadow: 0 8px 18px rgba(91,85,223,.25); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.side-nav { display: grid; gap: 12px; margin-top: 42px; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
.nav-icon { width: 46px; height: 46px; border: 0; background: transparent; border-radius: 13px; font-size: 22px; color: #69738a; cursor: pointer; transition: .2s ease; }
.nav-icon:hover { color: var(--primary); background: var(--primary-soft); }
.nav-icon.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 3px 0 var(--primary); }

.main { width: calc(100% - 76px); margin-left: 76px; padding: 0 32px 44px; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.eyebrow { margin-bottom: 4px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 0; font-size: 27px; letter-spacing: -.03em; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.icon-button { position: relative; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 20px; cursor: pointer; }
.notification-wrap { position: relative; }
.notification svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification span { position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }.notification span[hidden] { display: none; }
.notification b { position: absolute; right: -7px; top: -7px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; color: #fff; background: var(--red); font-size: 9px; line-height: 1; box-shadow: 0 0 0 3px #f5f6fa; }.notification b:empty, .notification b[data-count="0"] { display: none; }
.notification-panel { position: absolute; z-index: 40; right: 0; top: 52px; width: 350px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 18px 45px rgba(31,40,72,.18); }.notification-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); }.notification-head strong, .notification-head small { display: block; }.notification-head strong { font-size: 14px; }.notification-head small { margin-top: 4px; color: var(--muted); font-size: 10px; }.notification-head > span { padding: 5px 8px; border-radius: 8px; color: var(--red); background: var(--red-soft); font-size: 9px; }.notification-list { max-height: 360px; overflow-y: auto; }.notification-item { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }.notification-item:last-child { border-bottom: 0; }.notification-item > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--red); background: var(--red-soft); font-weight: 800; }.notification-item strong, .notification-item small { display: block; }.notification-item strong { font-size: 11px; }.notification-item small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.user-chip { display: flex; align-items: center; min-width: 190px; gap: 11px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--primary); font-weight: 750; background: var(--primary-soft); }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 14px; }
.user-chip small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.chevron { margin-left: auto; color: var(--muted); }

.overview { display: grid; grid-template-columns: minmax(340px, 1fr) 290px 250px; gap: 16px; padding: 25px 0 21px; }
.greeting { min-height: 130px; padding: 22px 26px; border-radius: 18px; background: linear-gradient(120deg, #5b55df, #746ff0); color: #fff; box-shadow: 0 12px 28px rgba(91,85,223,.19); }
.greeting .date { margin: 0 0 9px; font-size: 12px; opacity: .8; }
.greeting h2 { margin: 0 0 8px; font-size: 23px; }
.greeting p:last-child { margin: 0; color: rgba(255,255,255,.78); font-size: 13px; }
.greeting strong { color: #fff; }
.progress-card, .streak-card { display: flex; align-items: center; gap: 17px; min-height: 130px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.progress-card small, .progress-card strong, .progress-card span, .streak-card small, .streak-card strong, .streak-card span { display: block; }
.progress-card small, .streak-card small { color: var(--muted); font-size: 12px; }
.progress-card strong, .streak-card strong { margin: 3px 0; font-size: 22px; }
.progress-card div > span, .streak-card div > span { color: var(--muted); font-size: 11px; }
.progress-ring { --p: 40%; flex: 0 0 auto; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--teal) var(--p), #e8ebf2 0); }
.progress-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.progress-ring span { position: relative; color: var(--text); font-weight: 800; font-size: 14px; }
.streak-icon { width: 50px; height: 50px; display: grid; place-items: center; color: var(--orange); background: var(--orange-soft); border-radius: 15px; font-size: 24px; }

.workspace-tabs { display: flex; align-items: center; gap: 7px; min-height: 63px; padding: 9px 12px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.tab, .filter-button { height: 40px; padding: 0 15px; border: 0; background: transparent; border-radius: 10px; color: var(--muted); cursor: pointer; }
.tab.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.tab span { margin-left: 5px; font-size: 11px; opacity: .8; }
.tab-spacer { flex: 1; }
.temporary-create-button, .daily-create-button { height: 38px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; background: var(--primary); box-shadow: 0 7px 15px rgba(91,85,223,.16); cursor: pointer; font-size: 11px; font-weight: 700; }.temporary-create-button:hover, .daily-create-button:hover { background: #4f49cf; }
.search-box { width: 210px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.filter-button { border: 1px solid var(--line); color: var(--text); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.content-grid.no-sidebar { grid-template-columns: minmax(0,1fr); }
.task-panel, .focus-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.task-panel { padding: 11px 14px 18px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 10px; }
.section-heading > div { display: flex; align-items: center; }
.section-heading strong { font-size: 15px; }
.section-heading small { margin-left: 9px; color: var(--muted); }
.section-heading > span { margin-right: 50px; color: var(--muted); font-size: 11px; }
.afternoon-heading { margin-top: 9px; border-top: 1px solid var(--line); }
.time-dot { width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; box-shadow: 0 0 0 5px currentColor; transform: scale(.55); }
.time-dot.teal { color: var(--teal); background: var(--teal); }
.time-dot.orange { color: var(--orange); background: var(--orange); }
.task-list { display: grid; gap: 9px; }
.temporary-workspace { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.temporary-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.temporary-heading > div { display: flex; align-items: center; gap: 12px; }.temporary-heading-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 19px; font-weight: 800; }.temporary-heading-icon.completed { color: var(--green); background: var(--green-soft); }.temporary-heading h2 { margin: 0; font-size: 17px; }.temporary-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }.temporary-heading > button { height: 39px; padding: 0 15px; border: 0; border-radius: 10px; color: #fff; background: var(--primary); cursor: pointer; font-size: 10px; font-weight: 750; }.temporary-task-list { display: grid; grid-template-columns: repeat(3,minmax(230px,1fr)); gap: 12px; padding-top: 17px; }.temporary-card { display: flex; flex-direction: column; min-height: 205px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; }.temporary-card.overdue { border-color: #f1c4c9; background: linear-gradient(145deg,#fff8f8,#fff); }.temporary-card.completed { opacity: .78; }.temporary-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.temporary-state { padding: 5px 8px; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 9px; }.temporary-state.overdue { color: var(--red); background: var(--red-soft); }.temporary-state.completed { color: var(--green); background: var(--green-soft); }.temporary-card-time { color: var(--muted); font-size: 9px; }.temporary-card h3 { margin: 14px 0 7px; font-size: 14px; }.temporary-card > p { min-height: 34px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }.temporary-card-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }.temporary-card-meta small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; }.temporary-people { display: flex; flex-wrap: wrap; gap: 5px; }.temporary-person { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; color: #5a547e; background: #f0efff; font-size: 9px; }.temporary-person i { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--primary); font-size: 8px; font-style: normal; }.temporary-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }.temporary-card-footer small { color: var(--muted); font-size: 9px; }.temporary-complete-button { height: 33px; padding: 0 12px; border: 0; border-radius: 9px; color: #fff; background: var(--green); cursor: pointer; font-size: 10px; font-weight: 750; }.temporary-empty { grid-column: 1 / -1; padding: 70px 20px; color: var(--muted); text-align: center; font-size: 11px; }.temporary-empty strong { display: block; margin-bottom: 7px; color: var(--text); font-size: 15px; }
.task-item { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); transition: border .2s, box-shadow .2s; }
.task-item.expanded { position: relative; z-index: 8; overflow: visible; border-color: var(--teal); box-shadow: 0 8px 22px rgba(23,167,162,.09); }
.task-item.completed { opacity: .76; }
.task-summary { display: grid; grid-template-columns: 32px minmax(210px, 1fr) 64px 84px; align-items: center; gap: 10px; min-height: 74px; padding: 9px 13px; cursor: pointer; }
.status-circle { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid #cdd3df; border-radius: 50%; color: transparent; font-size: 12px; }
.completed .status-circle, .task-item[data-status="pass"] .status-circle { border-color: var(--green); background: var(--green); color: #fff; }
.task-title strong, .task-title small { display: block; }
.task-title strong { margin-bottom: 4px; font-size: 16px; }
.task-title-line { display: flex; align-items: center; gap: 7px; }.task-title-line strong { margin: 0; }.personal-daily-tag { padding: 3px 6px; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-style: normal; white-space: nowrap; }.personal-task-action { min-width: 0; text-align: center; }.personal-daily-delete { height: 28px; padding: 0 9px; border: 1px solid #f1cbd0; border-radius: 8px; color: var(--red); background: #fff; cursor: pointer; font-size: 9px; }.personal-daily-delete:hover { background: var(--red-soft); }
.task-title small { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.task-title small.no-note { color: #aab1bf; font-style: italic; }
.task-template-note { margin: 4px 0 3px; color: #667085; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; }
.task-employee-note { margin-top: 2px; }
.due-time { justify-self: end; min-width: 58px; color: #3f485b; font-size: 12px; text-align: left; }
.due-time strong { display: block; margin-bottom: 2px; font-size: 13px; }
.due-time.overdue strong { color: var(--red); }
.task-detail { display: none; grid-template-columns: minmax(150px,.74fr) minmax(225px,1.12fr) minmax(185px,.9fr) 168px; gap: 14px; margin: 0 13px 13px 54px; padding: 18px; border-radius: 12px; background: var(--surface-soft); border: 1px solid var(--line); }
.expanded .task-detail { display: grid; }
.field-block { min-width: 0; }
.field-label { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.field-label span { color: var(--muted); font-size: 10px; font-weight: 400; }
.evidence-zone { display: grid; grid-template-columns: repeat(3, minmax(68px, 1fr)); gap: 8px; }
.evidence-thumb { position: relative; min-height: 82px; display: grid; place-items: center; overflow: hidden; border: 1px dashed #cbd2df; border-radius: 10px; color: var(--muted); background: #fff; font-size: 11px; text-align: center; cursor: pointer; }
.evidence-thumb.add { color: var(--primary); }
.evidence-thumb img { width: 100%; height: 82px; object-fit: cover; }
.evidence-thumb .remove-file { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; color: #fff; background: rgba(23,32,51,.72); cursor: pointer; }
.evidence-image-thumb { border-style: solid; }.evidence-preview-button { width: 100%; height: 100%; padding: 0; border: 0; color: #fff; background: #eef1f6; cursor: zoom-in; }.evidence-preview-button img { display: block; }.evidence-preview-button span { position: absolute; inset: auto 0 0; padding: 5px; color: #fff; background: linear-gradient(transparent,rgba(17,24,39,.78)); font-size: 8px; }.legacy-evidence-thumb small { color: #a2a9b6; font-size: 8px; }
.result-textarea, .note-textarea { width: 100%; height: 92px; resize: vertical; padding: 11px; border: 1px solid #d9deea; border-radius: 9px; outline: 0; background: #fff; font-size: 12px; line-height: 1.6; }
.result-textarea:focus, .note-textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,167,162,.1); }
.note-textarea { background: #fffdf9; }
.note-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.note-footer small { font-size: 10px; }
.people-box { position: relative; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.person-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 60px; align-content: flex-start; }
.person-chip { min-height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 4px 5px; border: 1px solid #e3e1ff; border-radius: 9px; color: #4d477b; background: #f7f6ff; font-size: 10px; }
.person-chip i, .person-option i { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--primary); font-size: 9px; font-style: normal; font-weight: 750; }
.person-chip em { padding: 2px 4px; border-radius: 4px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-style: normal; }
.person-chip .remove-person { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; color: #949bad; background: transparent; cursor: pointer; line-height: 1; }.person-chip .remove-person:hover { color: var(--red); background: var(--red-soft); }
.add-person-toggle { width: 100%; height: 31px; margin-top: 8px; border: 1px dashed #beb9ef; border-radius: 8px; color: var(--primary); background: #fff; cursor: pointer; font-size: 10px; }.add-person-toggle:hover, .add-person-toggle[aria-expanded="true"] { border-style: solid; background: var(--primary-soft); }
.people-hint { display: block; margin-top: 7px; color: var(--muted); text-align: center; font-size: 9px; }
.person-menu { position: absolute; z-index: 30; right: 0; top: 116px; width: 230px; max-height: 270px; overflow-y: auto; overscroll-behavior: contain; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 14px 32px rgba(31,40,72,.16); }
.person-menu-title { display: flex; justify-content: space-between; padding: 4px 5px 9px; color: #5d6577; font-size: 10px; font-weight: 700; }.person-menu-title span { color: var(--muted); font-weight: 400; }
.person-option { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 8px; padding: 6px; border: 0; border-radius: 8px; background: #fff; cursor: pointer; text-align: left; }.person-option:hover { background: var(--surface-soft); }.person-option span { flex: 1; }.person-option strong, .person-option small { display: block; }.person-option strong { font-size: 10px; }.person-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }.person-option b { color: var(--primary); font-size: 14px; }.people-empty { padding: 18px 8px; color: var(--muted); text-align: center; font-size: 10px; }
.submit-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.submit-row small { color: var(--muted); font-size: 10px; }
.submit-row small.completion-time { color: var(--green); font-weight: 650; }
.submit-button { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; color: #fff; background: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 13px rgba(91,85,223,.18); }
.submit-button:hover { background: #4e49cb; }
.submit-button:disabled { cursor: not-allowed; box-shadow: none; opacity: .5; }
.submit-button.done:disabled { color: var(--green); background: var(--green-soft); opacity: 1; }
.right-panel { display: grid; gap: 16px; }
.focus-card { padding: 18px; }
.panel-title, .panel-title > div { display: flex; align-items: center; justify-content: space-between; }
.panel-title > div { gap: 9px; }
.panel-title h3 { margin: 0; font-size: 15px; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--orange-soft); }
.count-badge { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--orange); background: var(--orange-soft); font-size: 12px; font-weight: 700; }
.focus-list { display: grid; gap: 9px; margin-top: 15px; }
.focus-item { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.focus-item-head { display: flex; justify-content: space-between; gap: 8px; }
.focus-item strong { display: block; font-size: 12px; }.focus-item > span { display: block; margin-top: 6px; color: var(--muted); font-size: 9px; }.focus-item.overdue > span { color: var(--red); }
.risk-tag { color: var(--orange); font-size: 10px; white-space: nowrap; }
.focus-item p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.empty-state { padding: 60px 20px; color: var(--muted); text-align: center; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; transform: translate(-50%, 18px); padding: 11px 17px; border-radius: 10px; color: #fff; background: #232a3a; box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: 12px; opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.employee-stats-page { padding-top: 24px; }.stats-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.stats-page-heading h2 { margin: 6px 0 0; font-size: 24px; }.stats-page-heading p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }.stats-month-filter { display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 11px; border: 1px solid #d8d5fb; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 700; }.stats-month-filter select { height: 30px; padding: 0 28px 0 10px; border: 1px solid #d6d3fb; border-radius: 8px; outline: 0; color: #49428c; background: #fff; cursor: pointer; font-size: 10px; font-weight: 700; }.stats-month-filter.compact { padding: 5px 6px 5px 9px; }.stats-month-filter.compact select { height: 27px; }.stats-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 16px; }.stats-summary-grid > div { padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.stats-summary-grid small, .stats-summary-grid strong, .stats-summary-grid span { display: block; }.stats-summary-grid small { color: var(--muted); font-size: 9px; }.stats-summary-grid strong { margin: 5px 0 2px; font-size: 23px; }.stats-summary-grid span { color: var(--muted); font-size: 9px; }
.calendar-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.calendar-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.calendar-card-head h3 { margin: 0; font-size: 16px; }.calendar-card-head p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }.calendar-head-actions { display: flex; align-items: center; gap: 13px; }.calendar-legend { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 9px; }.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }.calendar-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }.calendar-legend .green::before { background: var(--green); }.calendar-legend .red::before { background: var(--red); }.calendar-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; padding: 14px 0 8px; color: var(--muted); text-align: center; font-size: 9px; }.completion-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }.calendar-empty { min-height: 105px; }.calendar-day { min-height: 105px; padding: 11px; border: 1px solid; border-radius: 11px; color: var(--text); cursor: pointer; text-align: left; font-family: inherit; transition: transform .16s ease, box-shadow .16s ease; }.calendar-day:hover, .calendar-day:focus-visible { transform: translateY(-2px); outline: 0; box-shadow: 0 8px 18px rgba(31,40,72,.1); }.calendar-day.complete { border-color: #bde8d0; background: var(--green-soft); }.calendar-day.incomplete { border-color: #f2c6cc; background: var(--red-soft); }.calendar-day-top { display: flex; align-items: center; justify-content: space-between; }.calendar-day-top strong { font-size: 15px; }.calendar-day-top span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 8px; color: #fff; font-size: 10px; font-weight: 800; }.calendar-day.complete .calendar-day-top span { background: var(--green); }.calendar-day.incomplete .calendar-day-top span { background: var(--red); }.calendar-day > b, .calendar-day > small { display: block; }.calendar-day > b { margin-top: 15px; font-size: 10px; }.calendar-day.complete > b { color: var(--green); }.calendar-day.incomplete > b { color: var(--red); }.calendar-day > small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.admin-stats-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 18px; align-items: start; }.stats-employee-list { display: grid; gap: 8px; margin-top: 15px; }.stats-employee-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; text-align: left; }.stats-employee-row:hover, .stats-employee-row.active { border-color: #c9c5f8; background: #f8f7ff; }.stats-employee-row .review-avatar { width: 34px; height: 34px; font-size: 11px; }.stats-employee-row span:nth-child(2) strong, .stats-employee-row span:nth-child(2) small { display: block; }.stats-employee-row span:nth-child(2) strong { font-size: 11px; }.stats-employee-row span:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 8px; }.stats-employee-row > b { color: var(--primary); text-align: right; font-size: 10px; }.admin-calendar-card { box-shadow: var(--shadow); }.admin-stats-summary { display: flex; gap: 18px; padding: 12px 0 2px; color: var(--muted); font-size: 9px; }.admin-stats-summary strong { margin: 0 2px; color: var(--text); font-size: 12px; }

.admin-shell { min-height: 100vh; display: flex; background: var(--bg); }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 236px; padding: 26px 18px; display: flex; flex-direction: column; color: #fff; background: #20233d; }
.admin-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 27px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-brand .brand-mark { width: 38px; height: 38px; font-size: 18px; }
.admin-brand strong, .admin-brand small { display: block; }.admin-brand strong { font-size: 13px; letter-spacing: .08em; }.admin-brand small { margin-top: 4px; color: rgba(255,255,255,.45); font-size: 10px; }
.admin-nav { display: grid; gap: 7px; margin-top: 26px; }
.admin-nav button { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border: 0; border-radius: 10px; color: rgba(255,255,255,.56); background: transparent; cursor: pointer; text-align: left; font-size: 13px; }
.admin-nav button span { width: 21px; font-size: 16px; }.admin-nav button:hover, .admin-nav button.active { color: #fff; background: rgba(115,108,239,.22); }.admin-nav button.active { box-shadow: inset 3px 0 #817af4; }
.admin-nav button b { min-width: 20px; height: 20px; display: grid; place-items: center; margin-left: auto; border-radius: 7px; color: #fff; background: var(--red); font-size: 9px; }
.admin-logout { height: 42px; margin-top: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; font-size: 11px; }.admin-logout:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.admin-main { width: calc(100% - 236px); margin-left: 236px; padding: 0 32px 42px; }
.admin-topbar { min-height: 118px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.admin-topbar h1 { font-size: 25px; }.admin-topbar p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.admin-user { display: flex; align-items: center; gap: 10px; min-width: 160px; }.admin-user strong, .admin-user small { display: block; }.admin-user strong { font-size: 13px; }.admin-user small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.admin-overview { display: grid; grid-template-columns: repeat(3,minmax(140px,1fr)) minmax(260px,1.25fr) minmax(210px,.9fr); gap: 14px; margin: 22px 0 18px; }
.admin-overview > div, .admin-overview > a { min-height: 98px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.admin-overview small, .admin-overview strong, .admin-overview span { display: block; }.admin-overview small { color: var(--muted); font-size: 10px; }.admin-overview strong { margin: 6px 0 2px; font-size: 23px; }.admin-overview span { color: var(--muted); font-size: 10px; }
.admin-overview .admin-help { display: flex; align-items: center; gap: 13px; background: linear-gradient(135deg,#f2f1ff,#fff); }.admin-help > span { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-weight: 750; }.admin-help p { flex: 1; margin: 0; color: #697287; font-size: 11px; line-height: 1.6; }
.admin-create-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 24px; align-items: center; gap: 12px; color: #fff; background: linear-gradient(135deg,#5b55df,#756ff0) !important; border-color: transparent !important; text-decoration: none; box-shadow: 0 12px 26px rgba(91,85,223,.2) !important; transition: transform .18s ease, box-shadow .18s ease; }.admin-create-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(91,85,223,.26) !important; }.admin-create-card .admin-create-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: rgba(255,255,255,.16); font-size: 22px; line-height: 1; }.admin-create-card strong { margin: 0 0 5px; color: #fff; font-size: 15px; }.admin-create-card small { color: rgba(255,255,255,.72); line-height: 1.45; }.admin-create-card b { color: #fff; font-size: 20px; text-align: right; }
.admin-workspace { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 18px; align-items: start; }
.admin-workspace.template-grid-workspace { display: block; }
.template-list-card, .template-form-card { border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.template-list-card { padding: 20px; }.template-form-card { padding: 21px; }
.admin-section-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.admin-section-title h2, .form-card-heading h2 { margin: 0; font-size: 16px; }.admin-section-title p, .form-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.admin-section-title > span { padding: 6px 9px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 10px; }
.template-list { display: grid; grid-template-columns: repeat(auto-fill, 230px); gap: 14px; align-items: start; margin-top: 18px; }
.workflow-list-card { width: 230px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }.workflow-list-card:hover { border-color: #c9c5f8; box-shadow: 0 12px 24px rgba(80,72,205,.12); }.workflow-list-link { width: 100%; min-height: 158px; display: flex; flex-direction: column; justify-content: space-between; padding: 19px; border: 0; border-radius: 0; color: var(--text); background: #fff; text-decoration: none; transition: color .2s ease, background .2s ease; }
.workflow-list-link strong { max-width: 170px; font-size: 16px; line-height: 1.45; }
.workflow-list-link:hover, .workflow-list-link:focus-visible { color: #fff; background: linear-gradient(145deg, #7069ee, #554edb); outline: 0; }
.workflow-open-label { align-self: flex-end; color: var(--muted); font-size: 10px; font-weight: 700; transition: color .2s ease; }
.workflow-list-link:hover .workflow-open-label, .workflow-list-link:focus-visible .workflow-open-label { color: rgba(255,255,255,.9); }
.template-manager-control, .template-manager-label { display: block; padding: 11px 12px 12px; border-top: 1px solid var(--line); background: #fafbfe; }.template-manager-control > span, .template-manager-label > span { display: block; margin-bottom: 6px; color: #8b93a3; font-size: 8px; }.template-manager-control select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #d9dce6; border-radius: 8px; outline: 0; color: #4f586b; background: #fff; font-size: 9px; }.template-manager-control select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }.template-manager-label strong { color: var(--primary); font-size: 10px; }
.workflow-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fbfcfe; }
.workflow-card-head { display: grid; grid-template-columns: 42px minmax(180px,1fr) 120px 90px; align-items: center; gap: 12px; min-height: 70px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.workflow-card-index { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 800; }
.workflow-card-title strong, .workflow-card-title small { display: block; }.workflow-card-title strong { font-size: 14px; }.workflow-card-title small { margin-top: 4px; color: var(--muted); font-size: 10px; }.workflow-card-meta { color: #4f586b; font-size: 11px; }.workflow-card-meta small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.workflow-enabled { justify-self: end; padding: 6px 9px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 10px; }
.workflow-steps { display: grid; gap: 7px; padding: 11px; }.workflow-step-row { display: grid; grid-template-columns: 34px minmax(180px,1fr) 88px 74px; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid #e7eaf1; border-radius: 10px; background: #fff; }.workflow-step-number { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 800; }.workflow-step-name { font-size: 11px; font-weight: 700; }.workflow-step-time { color: #4d5669; font-size: 10px; }.workflow-step-period { justify-self: end; color: var(--muted); font-size: 9px; }
.template-row { display: grid; grid-template-columns: 36px minmax(180px,1fr) 90px 90px; align-items: center; gap: 12px; min-height: 71px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }
.template-index { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 750; }
.template-name strong, .template-name small { display: block; }.template-name strong { margin-bottom: 5px; font-size: 13px; }.template-name small { overflow: hidden; max-width: 430px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.template-name small.empty { color: #acb3c1; font-style: italic; }
.template-meta { color: #535d70; font-size: 11px; }.template-meta small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }.template-status { justify-self: end; padding: 6px 9px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 10px; }
.form-card-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 19px; }.form-card-heading > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 20px; }
.template-form-card form > label, .form-two-cols label { display: block; margin: 14px 0 0; color: #424b5e; font-size: 11px; font-weight: 700; }
.template-form-card input, .template-form-card select { width: 100%; height: 42px; margin-top: 7px; padding: 0 11px; border: 1px solid #dfe3ec; border-radius: 9px; outline: 0; background: #fafbfc; color: var(--text); font-size: 12px; }.template-form-card input:focus, .template-form-card select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }
.form-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.note-rule { margin-top: 18px; padding: 13px; border: 1px solid #e5e2ff; border-radius: 11px; background: #faf9ff; }.note-rule > strong { font-size: 11px; }.note-rule > p { margin: 5px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.55; }.rule-preview { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }.rule-preview strong, .rule-preview small { display: block; }.rule-preview strong { font-size: 11px; }.rule-preview small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.create-template-button { width: 100%; height: 44px; margin-top: 17px; border: 0; border-radius: 10px; color: #fff; background: var(--primary); font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: 0 7px 16px rgba(91,85,223,.17); }.create-template-button:hover { background: #4f49cf; }
.template-structure { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding: 13px; border: 1px solid #e5e2ff; border-radius: 11px; background: #faf9ff; }.template-structure strong { width: 100%; margin-bottom: 3px; font-size: 11px; }.template-structure span { padding: 5px 7px; border-radius: 7px; color: #625d8c; background: #fff; border: 1px solid #e5e2ff; font-size: 9px; }
.workflow-builder-head { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }.workflow-builder-head strong { font-size: 11px; }.workflow-builder-head span { color: var(--muted); font-size: 9px; }.workflow-step-builder { display: grid; gap: 8px; margin-top: 9px; }.workflow-builder-row { display: grid; grid-template-columns: 24px minmax(120px,1fr) 92px 24px; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; }.workflow-builder-row > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 8px; font-weight: 800; }.workflow-builder-row input { height: 36px; margin: 0; }.remove-workflow-step { width: 23px; height: 23px; padding: 0; border: 0; border-radius: 7px; color: #9aa2b1; background: transparent; cursor: pointer; }.remove-workflow-step:hover { color: var(--red); background: var(--red-soft); }.add-workflow-step { width: 100%; height: 35px; margin-top: 9px; border: 1px dashed #beb9ef; border-radius: 9px; color: var(--primary); background: #fff; cursor: pointer; font-size: 10px; }.add-workflow-step:hover { border-style: solid; background: var(--primary-soft); }
.admin-page { padding-top: 22px; }
.admin-page .admin-overview { margin-top: 0; }
.management-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.user-review-list { display: grid; gap: 10px; margin-top: 16px; }
.review-row { display: grid; grid-template-columns: 44px minmax(150px,1fr) 128px 112px minmax(390px,auto); align-items: center; gap: 13px; min-height: 78px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }.review-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }.review-user strong, .review-user small { display: block; }.review-user strong { font-size: 13px; }.review-user small { margin-top: 4px; color: var(--muted); font-size: 10px; }.review-phone { color: #50596d; font-size: 11px; }.review-time { color: var(--muted); font-size: 10px; }.review-state-actions { display: grid; gap: 7px; justify-items: end; }.review-status-line { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }.review-status { padding: 6px 9px; border-radius: 8px; font-size: 10px; }.review-status.pending { color: var(--amber); background: var(--amber-soft); }.review-status.approved { color: var(--green); background: var(--green-soft); }.review-status.rejected { color: var(--red); background: var(--red-soft); }.user-role-badge { padding: 6px 9px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 10px; }.user-role-badge.leader { color: #b66911; background: #fff2df; }.review-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }.review-actions button { height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 9px; }.review-actions .approve { border-color: #bfe9d2; color: var(--green); background: var(--green-soft); }.review-actions .reject, .review-actions .delete-user { color: var(--red); }.review-actions .password-action { color: #596277; }.review-actions .role-action { border-color: #d7d3ff; color: var(--primary); background: var(--primary-soft); }.review-actions .leader-action { border-color: #f2d5aa; color: #b66911; background: #fff8eb; }
.review-empty, .assignment-empty { padding: 55px 20px; color: var(--muted); text-align: center; font-size: 12px; }
.assignment-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 18px; align-items: start; }.employee-selector-list { display: grid; gap: 8px; margin-top: 15px; }.employee-select-row { width: 100%; min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; text-align: left; }.employee-select-row:hover, .employee-select-row.active { border-color: #c9c5f8; background: #f8f7ff; }.employee-select-row .avatar { width: 34px; height: 34px; font-size: 12px; }.employee-select-row div:nth-child(2) { flex: 1; }.employee-select-row strong, .employee-select-row small { display: block; }.employee-select-row strong { font-size: 12px; }.employee-select-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }.employee-select-row b { color: var(--primary); font-size: 11px; }.assignment-template-list { display: grid; gap: 9px; margin-top: 15px; }.assignment-row { display: grid; grid-template-columns: 30px minmax(150px,.8fr) minmax(360px,1.35fr) 72px; align-items: center; gap: 11px; min-height: 74px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfe; }.assignment-check { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }.assignment-name strong, .assignment-name small { display: block; }.assignment-name strong { font-size: 12px; }.assignment-name small { margin-top: 4px; color: var(--muted); font-size: 9px; }.assignment-period-editor { min-width: 0; display: grid; grid-template-columns: minmax(125px,1fr) minmax(105px,.8fr) minmax(125px,1fr); gap: 7px; align-items: end; }.assignment-period-editor label { min-width: 0; color: #737b8d; font-size: 8px; }.assignment-period-editor label > span { display: block; margin-bottom: 4px; }.assignment-period-editor input, .assignment-period-editor select { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #d9dce6; border-radius: 8px; outline: 0; color: #4d5669; background: #fff; font-size: 9px; }.assignment-period-editor input:focus, .assignment-period-editor select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }.assignment-period-empty { color: #9aa2b1; font-size: 9px; }.assignment-state { justify-self: end; padding: 5px 8px; border-radius: 7px; color: var(--muted); background: #eff1f5; font-size: 9px; }.assignment-row.assigned { border-color: #d8d5fb; background: #faf9ff; }.assignment-row.assigned .assignment-state { color: var(--primary); background: var(--primary-soft); }
.group-management-card { margin-bottom: 18px; }.group-create-button { height: 35px; padding: 0 13px; border: 0; border-radius: 9px; color: #fff; background: var(--primary); cursor: pointer; font-size: 10px; font-weight: 750; }.group-card-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 11px; margin-top: 16px; }.group-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }.group-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.group-card-head strong { font-size: 13px; }.group-card-head span { padding: 5px 7px; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 8px; }.group-card-leader { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px; border-radius: 9px; background: #f2f1ff; }.group-card-leader i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-size: 9px; font-style: normal; }.group-card-leader strong, .group-card-leader small { display: block; }.group-card-leader strong { font-size: 10px; }.group-card-leader small { margin-top: 2px; color: var(--muted); font-size: 8px; }.group-member-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; margin-top: 10px; }.group-member-chip { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: #596277; background: #fff; font-size: 8px; }.group-card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 11px; }.group-card-actions button { height: 29px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #596277; background: #fff; cursor: pointer; font-size: 8px; }.group-card-actions .group-delete { color: var(--red); }.group-empty { grid-column: 1 / -1; padding: 30px; color: var(--muted); text-align: center; font-size: 10px; }
.employee-preview-list { display: grid; gap: 9px; margin-top: 16px; }.employee-preview-row { min-height: 72px; display: grid; grid-template-columns: 44px minmax(180px,1fr) 90px 110px 145px; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }.employee-preview-info strong, .employee-preview-info small, .employee-preview-meta strong, .employee-preview-meta small { display: block; }.employee-preview-info strong { font-size: 13px; }.employee-preview-info small { margin-top: 4px; color: var(--muted); font-size: 10px; }.employee-preview-meta strong { font-size: 13px; }.employee-preview-meta small { margin-top: 3px; color: var(--muted); font-size: 9px; }.employee-preview-row > button { height: 34px; border: 1px solid #d4d0fb; border-radius: 9px; color: var(--primary); background: var(--primary-soft); cursor: pointer; font-size: 10px; font-weight: 700; }.employee-preview-row > button:hover { color: #fff; background: var(--primary); }
.modal-open { overflow: hidden; }.template-modal-backdrop { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 30px; background: rgba(25,29,48,.42); backdrop-filter: blur(5px); }.template-modal { overflow: hidden; width: min(1160px, calc(100vw - 60px)); height: min(790px, calc(100vh - 60px)); display: grid; grid-template-rows: 64px minmax(0,1fr); border: 1px solid rgba(255,255,255,.62); border-radius: 20px; background: var(--bg); box-shadow: 0 28px 80px rgba(20,24,49,.28); }.template-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 23px; border-bottom: 1px solid var(--line); background: #fff; }.template-modal-head small { color: var(--primary); font-size: 8px; font-weight: 800; letter-spacing: .1em; }.template-modal-head h2 { margin: 3px 0 0; font-size: 16px; }.template-modal-head > button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #757e91; background: #f2f3f7; cursor: pointer; font-size: 20px; }.template-modal-head > button:hover { color: var(--red); background: var(--red-soft); }.template-modal iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
.day-detail-modal { overflow: hidden; width: min(1080px,calc(100vw - 60px)); max-height: min(790px,calc(100vh - 60px)); display: grid; grid-template-rows: 64px minmax(0,1fr); border: 1px solid rgba(255,255,255,.62); border-radius: 20px; background: var(--bg); box-shadow: 0 28px 80px rgba(20,24,49,.28); }.day-detail-content { overflow-y: auto; padding: 20px; }.day-detail-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }.day-detail-summary > div { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }.day-detail-summary small, .day-detail-summary strong { display: block; }.day-detail-summary small { color: var(--muted); font-size: 8px; }.day-detail-summary strong { margin-top: 5px; font-size: 14px; }.day-detail-list { display: grid; gap: 10px; }.day-task-detail { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.day-task-head { display: grid; grid-template-columns: 31px minmax(150px,1fr) 90px 100px; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.day-task-status { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--red); font-size: 10px; font-weight: 800; }.day-task-detail.complete .day-task-status { background: var(--green); }.day-task-head strong { font-size: 12px; }.day-task-head small { color: var(--muted); font-size: 9px; }.day-task-state { justify-self: end; padding: 5px 8px; border-radius: 7px; color: var(--red); background: var(--red-soft); font-size: 9px; }.day-task-detail.complete .day-task-state { color: var(--green); background: var(--green-soft); }.day-task-body { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 10px; padding-top: 12px; }.day-task-field { min-width: 0; padding: 11px; border-radius: 9px; background: #f7f8fb; }.day-task-field > small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 8px; }.day-task-field > p { margin: 0; color: #4f586b; font-size: 10px; line-height: 1.65; }.day-evidence-list { display: flex; flex-wrap: wrap; gap: 6px; }.day-evidence-thumb { width: 56px; height: 48px; display: grid; place-items: center; border: 1px dashed #cbd2df; border-radius: 8px; color: var(--primary); background: #fff; font-size: 8px; text-align: center; }.day-detail-empty { padding: 55px 20px; color: var(--muted); text-align: center; font-size: 11px; }
.user-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(25,29,48,.38); backdrop-filter: blur(4px); }.user-modal { width: 420px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 24px 60px rgba(23,29,54,.22); }.user-modal-head { display: flex; align-items: flex-start; justify-content: space-between; }.user-modal-head small { color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.user-modal-head h2 { margin: 5px 0 0; font-size: 20px; }.user-modal-head > button { width: 30px; height: 30px; border: 0; border-radius: 8px; color: var(--muted); background: #f2f3f7; cursor: pointer; font-size: 18px; }.user-modal > p { margin: 16px 0 0; color: var(--muted); font-size: 11px; }.user-modal > p strong { color: var(--text); }.user-modal form label { display: block; margin-top: 15px; color: #424b5e; font-size: 11px; font-weight: 700; }.user-modal form input { width: 100%; height: 43px; margin-top: 7px; padding: 0 11px; border: 1px solid #dfe3ec; border-radius: 9px; outline: 0; background: #fafbfc; }.user-modal form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }.user-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.user-modal-actions button { height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 10px; }.user-modal-actions button[type="submit"] { border-color: var(--primary); color: #fff; background: var(--primary); }
.day-task-time { margin-top: 10px; background: #f5f4ff; }.day-task-time > p { color: var(--primary); font-weight: 700; }
.group-modal { width: min(580px,calc(100vw - 40px)); }.group-modal form select { width: 100%; height: 43px; margin-top: 7px; padding: 0 11px; border: 1px solid #dfe3ec; border-radius: 9px; outline: 0; background: #fafbfc; }.group-member-fieldset { margin-top: 15px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }.group-member-fieldset legend { padding: 0 5px; color: #424b5e; font-size: 10px; font-weight: 750; }.group-member-fieldset legend span { margin-left: 5px; color: var(--muted); font-size: 8px; font-weight: 400; }.group-member-fieldset > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 230px; overflow-y: auto; }.group-member-option { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; cursor: pointer; }.group-member-option input { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--primary); }.group-member-option i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--primary); font-size: 9px; font-style: normal; }.group-member-option strong, .group-member-option small { display: block; }.group-member-option strong { font-size: 10px; }.group-member-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }

.template-detail-shell { min-height: 100vh; background: var(--bg); }
.embedded-page { min-width: 0; }.embedded-detail { min-width: 0; }.embedded-detail .template-detail-topbar { display: none; }.embedded-detail .template-detail-main { width: 100%; padding: 25px 28px 38px; }.embedded-detail .detail-heading { margin-bottom: 16px; }.embedded-detail .template-detail-shell { min-height: 100%; }
.template-detail-topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); }
.detail-brand { display: flex; align-items: center; gap: 11px; }.detail-brand .brand-mark { width: 36px; height: 36px; font-size: 17px; }.detail-brand strong, .detail-brand small { display: block; }.detail-brand strong { font-size: 13px; letter-spacing: .06em; }.detail-brand small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.detail-back { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: #596277; background: #fff; text-decoration: none; font-size: 11px; }.detail-back:hover { color: var(--primary); border-color: #c9c5f8; }
.template-detail-main { width: min(1120px, calc(100% - 64px)); margin: 0 auto; padding: 36px 0 54px; }
.detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }.detail-heading .eyebrow { margin-bottom: 8px; }.detail-heading h1 { margin: 0; font-size: 27px; }.detail-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }.detail-count { min-width: 110px; padding: 13px 16px; border: 1px solid #dedbff; border-radius: 13px; color: var(--primary); background: var(--primary-soft); text-align: center; }.detail-count strong, .detail-count small { display: block; }.detail-count strong { font-size: 22px; }.detail-count small { margin-top: 3px; font-size: 9px; }
.detail-template-name-input { width: min(390px,50vw); height: 44px; padding: 0 12px; border: 1px solid #bdb8f2; border-radius: 10px; outline: 0; color: var(--text); background: #fff; font-size: 22px; font-weight: 800; }.detail-template-name-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91,85,223,.09); }
.detail-heading-actions { display: flex; align-items: center; gap: 8px; }.detail-heading-actions button { height: 39px; padding: 0 13px; border-radius: 10px; cursor: pointer; font-size: 10px; font-weight: 700; }.detail-edit-button, .detail-cancel-button { border: 1px solid var(--line); color: #596277; background: #fff; }.detail-edit-button:hover { color: var(--primary); border-color: #c9c5f8; }.detail-add-button { border: 1px solid #d2cefb; color: var(--primary); background: var(--primary-soft); }.detail-add-button:hover { border-color: var(--primary); background: #e4e2ff; }.detail-save-button { border: 0; color: #fff; background: var(--primary); box-shadow: 0 7px 16px rgba(91,85,223,.16); }.detail-save-button:hover { background: #4f49cf; }.detail-cancel-button:hover { color: var(--red); border-color: #f2c7cd; }
.detail-card { overflow: visible; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.detail-card-head { display: grid; grid-template-columns: 74px minmax(200px,1fr) 146px 76px minmax(180px,.8fr) 104px; align-items: center; gap: 12px; min-height: 72px; padding: 0 29px; border-bottom: 1px solid var(--line); }.detail-card-head span { color: var(--muted); font-size: 10px; }.detail-card-head span:last-child { text-align: left; }
.detail-step-list { display: grid; gap: 9px; padding: 16px; }.detail-step { min-height: 84px; display: grid; grid-template-columns: 74px minmax(200px,1fr) 146px 76px minmax(180px,.8fr) 104px; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }.detail-step-index { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 800; }.detail-step-order { display: flex; align-items: center; gap: 6px; }.detail-step-order > div { display: grid; gap: 3px; }.detail-step-order button { width: 24px; height: 20px; border: 1px solid #dcd9fb; border-radius: 6px; color: var(--primary); background: #fff; cursor: pointer; font-size: 10px; line-height: 1; }.detail-step-order button:disabled { opacity: .3; cursor: default; }.detail-step-name strong, .detail-step-name small { display: block; }.detail-step-name strong { font-size: 13px; }.detail-step-name small { margin-top: 5px; color: var(--muted); font-size: 9px; }.detail-step-time strong, .detail-step-time small { display: block; }.detail-step-time strong { font-size: 12px; }.detail-step-time small { margin-top: 3px; color: var(--muted); font-size: 9px; }.detail-period { justify-self: start; padding: 6px 9px; border-radius: 8px; color: var(--teal); background: var(--teal-soft); font-size: 9px; }.detail-period.afternoon { color: var(--orange); background: var(--orange-soft); }.detail-evidence-select { width: 102px; height: 38px; padding: 0 8px; border: 1px solid #d9dce6; border-radius: 9px; outline: 0; color: var(--green); background: #fff; font-size: 10px; }.detail-evidence-select.required { color: var(--red); border-color: #f0c8cd; background: #fff9fa; }.detail-evidence-rule { justify-self: start; padding: 6px 9px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 9px; }.detail-evidence-rule.required { color: var(--red); background: var(--red-soft); }.detail-not-found { padding: 80px 20px; color: var(--muted); text-align: center; }.detail-not-found strong, .detail-not-found span { display: block; }.detail-not-found strong { color: var(--text); font-size: 18px; }.detail-not-found span { margin-top: 8px; font-size: 11px; }
.detail-step.editing { border-color: #cfccfa; background: #faf9ff; }.detail-step-input { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #d9dce6; border-radius: 9px; outline: 0; color: var(--text); background: #fff; font-size: 12px; }.detail-step-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }.detail-step-copy-editor { display: grid; gap: 8px; }.detail-step-copy-editor label { color: #596277; font-size: 9px; font-weight: 700; }.detail-step-note-input { width: 100%; min-height: 54px; margin-top: 6px; padding: 9px 11px; resize: vertical; border: 1px solid #d9dce6; border-radius: 9px; outline: 0; color: var(--text); background: #fff; font: inherit; font-size: 10px; line-height: 1.55; }.detail-step-note-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }.detail-step-name p { margin: 4px 0 0; color: #667085; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }.detail-step-time-input { width: 142px; }.detail-time-editor { display: grid; gap: 6px; }.detail-time-editor label { display: flex; align-items: center; gap: 5px; color: #596277; font-size: 9px; font-weight: 700; }.detail-time-editor input[type="checkbox"] { accent-color: var(--primary); }.detail-time-editor small { color: var(--muted); font-size: 9px; }.detail-step-period-select { width: 80px; height: 38px; padding: 0 9px; border: 1px solid #d9dce6; border-radius: 9px; outline: 0; color: #4b5568; background: #fff; font-size: 10px; }.detail-step-period-select:disabled { color: var(--muted); background: #f0f2f6; }
.detail-related-people { position: relative; min-width: 0; }.detail-person-chips { display: flex; flex-wrap: wrap; gap: 5px; }.detail-person-chip { min-height: 27px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 4px; border: 1px solid #dedbf9; border-radius: 8px; color: #4f49cf; background: #f7f6ff; font-size: 9px; }.detail-person-chip i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #fff; background: #7a74ec; font-style: normal; font-weight: 800; }.detail-person-chip b { font-weight: 700; }.detail-person-chip em { padding: 2px 4px; border-radius: 4px; color: #8a90a0; background: #fff; font-size: 7px; font-style: normal; }.detail-remove-person { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 4px; color: #969dac; background: transparent; cursor: pointer; }.detail-remove-person:hover { color: var(--red); background: var(--red-soft); }.detail-related-people > small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }.detail-people-empty { color: var(--muted); font-size: 9px; }.detail-add-person { height: 28px; margin-top: 6px; padding: 0 9px; border: 1px dashed #beb9f1; border-radius: 8px; color: var(--primary); background: #fff; cursor: pointer; font-size: 9px; }.detail-add-person:hover { border-style: solid; background: var(--primary-soft); }.detail-person-menu { position: absolute; z-index: 30; top: calc(100% - 12px); right: 0; width: 235px; max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid #dddaf7; border-radius: 11px; background: #fff; box-shadow: 0 15px 35px rgba(38,45,74,.18); }.detail-person-menu-title { display: flex; justify-content: space-between; padding: 4px 5px 8px; color: #596277; font-size: 9px; }.detail-person-option { width: 100%; display: grid; grid-template-columns: 27px minmax(0,1fr) 18px; align-items: center; gap: 8px; padding: 7px; border: 0; border-radius: 8px; color: var(--text); background: transparent; cursor: pointer; text-align: left; }.detail-person-option:hover { background: var(--primary-soft); }.detail-person-option > i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-size: 9px; font-style: normal; }.detail-person-option span { min-width: 0; }.detail-person-option strong, .detail-person-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.detail-person-option strong { font-size: 10px; }.detail-person-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }.detail-person-option > b { color: var(--primary); font-size: 13px; }.detail-people-empty.menu-empty { display: block; padding: 14px 5px; text-align: center; }
.create-template-main { max-width: 1380px; }.create-template-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }.create-template-card, .create-template-guide { border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }.create-template-card { padding: 24px; }.create-template-guide { padding: 22px; }.create-main-field { display: block; color: #424b5e; font-size: 11px; font-weight: 700; }.create-main-field input { width: 100%; height: 46px; margin-top: 8px; padding: 0 13px; border: 1px solid #dfe3ec; border-radius: 10px; outline: 0; background: #fafbfc; font-size: 13px; }.create-main-field input:focus, .create-step-row input:focus, .create-step-row select:focus, .create-step-row textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); background: #fff; }.create-steps-title { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 12px; padding-top: 22px; border-top: 1px solid var(--line); }.create-steps-title strong, .create-steps-title small { display: block; }.create-steps-title strong { font-size: 14px; }.create-steps-title small { margin-top: 4px; color: var(--muted); font-size: 9px; }.create-steps-title > span { padding: 6px 9px; border-radius: 8px; color: var(--primary); background: var(--primary-soft); font-size: 9px; }.create-step-builder { display: grid; gap: 10px; }.create-step-row { display: grid; grid-template-columns: 66px minmax(170px,1fr) 160px 78px 88px 30px; align-items: end; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }.create-step-copy { display: grid; gap: 8px; }.create-step-order { display: flex; align-items: center; gap: 5px; }.create-step-order > div { display: grid; gap: 3px; }.create-step-order button { width: 23px; height: 18px; border: 1px solid #dcd9fb; border-radius: 5px; color: var(--primary); background: #fff; cursor: pointer; font-size: 9px; line-height: 1; }.create-step-order button:disabled { opacity: .3; cursor: default; }.create-step-index { width: 34px; height: 39px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 800; }.create-step-row label { color: #596277; font-size: 9px; font-weight: 700; }.create-step-row input, .create-step-row select { width: 100%; height: 39px; margin-top: 6px; padding: 0 10px; border: 1px solid #dfe3ec; border-radius: 9px; outline: 0; background: #fff; font-size: 11px; }.create-step-row textarea { width: 100%; min-height: 54px; margin-top: 6px; padding: 9px 10px; resize: vertical; border: 1px solid #dfe3ec; border-radius: 9px; outline: 0; background: #fff; font: inherit; font-size: 10px; line-height: 1.55; }.create-time-editor { display: grid; gap: 6px; }.create-time-editor > label { display: flex; align-items: center; gap: 5px; }.create-time-editor input[type="checkbox"] { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--primary); box-shadow: none; }.create-time-editor > input { margin-top: 0; }.create-time-editor small { height: 39px; display: flex; align-items: center; padding: 0 10px; border: 1px dashed #d9dce6; border-radius: 9px; color: var(--muted); background: #fff; font-size: 9px; }.create-step-row select:disabled { color: var(--muted); background: #f0f2f6; }.create-evidence-rule { color: var(--green); }.create-remove-step { width: 30px; height: 39px; border: 0; border-radius: 9px; color: #9aa2b1; background: transparent; cursor: pointer; font-size: 16px; }.create-remove-step:hover { color: var(--red); background: var(--red-soft); }.create-remove-step:disabled { opacity: .35; cursor: default; }.create-add-step { width: 100%; height: 42px; margin-top: 11px; border: 1px dashed #bdb8ef; border-radius: 10px; color: var(--primary); background: #fff; cursor: pointer; font-size: 10px; }.create-add-step:hover { border-style: solid; background: var(--primary-soft); }.create-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }.create-form-actions a, .create-form-actions button { height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 10px; font-size: 11px; font-weight: 700; }.create-form-actions a { border: 1px solid var(--line); color: #596277; background: #fff; text-decoration: none; }.create-form-actions button { min-width: 150px; border: 0; color: #fff; background: var(--primary); cursor: pointer; box-shadow: 0 8px 17px rgba(91,85,223,.18); }.create-form-actions button:disabled { opacity: .7; cursor: wait; }.guide-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-weight: 800; }.create-template-guide h2 { margin: 14px 0 0; font-size: 17px; }.create-template-guide > p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }.create-template-guide .template-structure { margin-top: 20px; }.create-guide-tip { margin-top: 15px; padding: 13px; border-radius: 11px; background: #f7f8fb; }.create-guide-tip strong { font-size: 10px; }.create-guide-tip p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.temporary-task-modal { width: min(540px,calc(100vw - 40px)); }.temporary-task-modal textarea { width: 100%; min-height: 82px; margin-top: 7px; padding: 10px 11px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; outline: 0; font-size: 11px; line-height: 1.6; }.temporary-task-modal textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,85,223,.08); }.temporary-assignees { margin: 15px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; }.temporary-assignees legend { padding: 0 5px; color: #4a5366; font-size: 10px; font-weight: 750; }.temporary-assignees legend span { margin-left: 5px; color: var(--muted); font-size: 8px; font-weight: 400; }.temporary-assignees > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.temporary-assignee-option { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfc; cursor: pointer; }.temporary-assignee-option input { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--primary); }.temporary-assignee-option i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--primary); font-size: 9px; font-style: normal; }.temporary-assignee-option span { min-width: 0; }.temporary-assignee-option strong, .temporary-assignee-option small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.temporary-assignee-option strong { font-size: 10px; }.temporary-assignee-option small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.daily-task-modal { width: min(460px,calc(100vw - 40px)); }.daily-task-tip { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; border: 1px solid #dedbff; border-radius: 10px; color: #596277; background: #f8f7ff; }.daily-task-tip strong { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: var(--primary); background: var(--primary-soft); font-size: 9px; }.daily-task-tip span { font-size: 9px; line-height: 1.55; }

@media (max-width: 1300px) {
  .main { padding-left: 22px; padding-right: 22px; }
  .overview { grid-template-columns: 1fr 260px 220px; }
  .task-summary { grid-template-columns: 28px minmax(190px, 1fr) 58px 76px; gap: 7px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 260px; }
  .task-detail { grid-template-columns: minmax(130px,.68fr) minmax(190px,1fr) minmax(155px,.82fr) 150px; gap: 10px; margin-left: 42px; padding: 14px; }
  .field-label span { display: none; }
  .note-footer small { display: none; }
  .admin-main { padding-left: 22px; padding-right: 22px; }
  .admin-workspace { grid-template-columns: minmax(0,1fr) 320px; }
  .admin-overview { grid-template-columns: repeat(3,1fr); }.admin-overview .admin-help { grid-column: 1 / 3; min-height: 72px; }.admin-overview .admin-create-card { grid-column: 3 / 4; min-height: 72px; }
  .assignment-layout { grid-template-columns: 280px minmax(0,1fr); }
  .admin-stats-layout { grid-template-columns: 250px minmax(0,1fr); }
  .calendar-day, .calendar-empty { min-height: 92px; }
  .review-row { grid-template-columns: 40px minmax(130px,1fr) 118px 96px minmax(350px,auto); }
  .temporary-task-list { grid-template-columns: repeat(2,minmax(230px,1fr)); }
}

.create-evidence-rule.required, .create-evidence-rule:has(option[value="required"]:checked) { color: var(--red); border-color: #f0c8cd; background: #fff9fa; }

/* 用户管理：桌面端双列卡片，保留每位用户完整的状态与操作区。 */
#userReviewList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#userReviewList .review-row {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "avatar user"
    "avatar phone"
    "avatar time"
    "actions actions";
  align-content: start;
  align-items: start;
  gap: 5px 12px;
  min-height: 156px;
  padding: 15px;
}
#userReviewList .review-avatar { grid-area: avatar; }
#userReviewList .review-user { grid-area: user; padding-top: 1px; }
#userReviewList .review-phone { grid-area: phone; }
#userReviewList .review-time { grid-area: time; }
#userReviewList .review-phone::before,
#userReviewList .review-time::before {
  margin-right: 6px;
  color: #9aa2b1;
  font-size: 9px;
}
#userReviewList .review-phone::before { content: "登录账号"; }
#userReviewList .review-time::before { content: "注册时间"; }
#userReviewList .review-state-actions {
  grid-area: actions;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
#userReviewList .review-status-line { flex: 0 0 auto; }
#userReviewList .review-actions { min-width: 0; }
#userReviewList .review-empty { grid-column: 1 / -1; }

/* 完成明细默认缩略展示，点击单项后再展开提交内容。 */
.day-task-detail { overflow: hidden; padding: 0; transition: border-color .18s ease, box-shadow .18s ease; }
.day-task-detail.expanded { border-color: #d3cffb; box-shadow: 0 7px 18px rgba(91,85,223,.08); }
.day-task-toggle {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 31px minmax(160px,1fr) minmax(170px,auto) 24px;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 0;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.day-task-toggle:hover { background: #fbfbff; }
.day-task-toggle:focus-visible { outline: 3px solid rgba(91,85,223,.16); outline-offset: -3px; }
.day-task-toggle > strong { font-size: 12px; }
.day-task-completion-time { justify-self: end; text-align: right; }
.day-task-completion-time small,
.day-task-completion-time b { display: block; }
.day-task-completion-time small { color: var(--muted); font-size: 8px; font-weight: 400; }
.day-task-completion-time b { margin-top: 3px; color: var(--primary); font-size: 10px; }
.day-task-detail:not(.complete) .day-task-completion-time b { color: var(--red); }
.day-task-chevron { color: #8f97a8; font-size: 15px; text-align: center; transition: transform .18s ease; }
.day-task-toggle[aria-expanded="true"] .day-task-chevron { transform: rotate(180deg); }
.day-task-expanded { padding: 0 15px 15px; border-top: 1px solid var(--line); background: #fff; }
.day-task-expanded[hidden] { display: none; }

/* 长标题完整换行展示，不截断模板或流程环节文字。 */
.task-title,
.task-title-line,
.task-title-line strong,
.workflow-step-name,
.detail-step-name { min-width: 0; }
.task-title-line { align-items: flex-start; }
.task-title-line strong,
.workflow-step-name,
.detail-step-name strong {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.55;
  white-space: normal;
}

.calendar-legend .gray::before { background: #aeb5c2; }
.calendar-day.not-started {
  border-color: #dfe3ea;
  color: #8f97a5;
  background: #f3f5f8;
  cursor: default;
}
.calendar-day.not-started .calendar-day-top span { color: #fff; background: #aeb5c2; }
.calendar-day.not-started > b { color: #8f97a5; }
.calendar-day.not-started:hover,
.calendar-day.not-started:focus-visible { transform: none; outline: 0; box-shadow: none; }

/* 不规定具体时间时，时段信息保持单行紧凑排列。 */
.due-time.optional {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  color: #596277;
  background: #f5f6f9;
  line-height: 1;
  white-space: nowrap;
}
.due-time.optional strong {
  display: inline;
  margin: 0;
  font-size: 11px;
}
.due-time.optional small {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
}
.due-time.optional small::before {
  content: "·";
  margin-right: 5px;
  color: #b0b6c1;
}

.evidence-thumb.paste-screenshot {
  padding: 8px;
  border-style: solid;
  color: #596277;
  background: #f7f8fb;
  font-family: inherit;
}
.evidence-thumb.paste-screenshot:hover {
  border-color: #bbb6f2;
  color: var(--primary);
  background: var(--primary-soft);
}
.evidence-thumb.paste-screenshot b,
.evidence-thumb.paste-screenshot span,
.evidence-thumb.paste-screenshot small { display: block; }
.evidence-thumb.paste-screenshot b { margin-bottom: 4px; color: var(--primary); font-size: 15px; }
.evidence-thumb.paste-screenshot small { margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.35; }

.day-detail-readonly {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 10px 12px;
  border: 1px solid #dedbf8;
  border-radius: 10px;
  color: #596277;
  background: #f7f6ff;
}
.day-evidence-thumb.has-image { position: relative; overflow: hidden; padding: 0; border-style: solid; cursor: zoom-in; }.day-evidence-thumb.has-image img { width: 100%; height: 100%; display: block; object-fit: cover; }.day-evidence-thumb.has-image span { position: absolute; inset: auto 0 0; padding: 3px; color: #fff; background: rgba(17,24,39,.68); font-size: 7px; }.day-evidence-thumb small { display: block; margin-top: 3px; color: #9aa2b1; font-size: 7px; }.evidence-preview-backdrop { z-index: 80; }.evidence-preview-modal { overflow: hidden; width: min(1100px,calc(100vw - 50px)); height: min(820px,calc(100vh - 50px)); display: grid; grid-template-rows: 64px minmax(0,1fr); border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: #111827; box-shadow: 0 30px 90px rgba(12,18,36,.45); }.evidence-preview-stage { min-height: 0; display: grid; place-items: center; overflow: auto; padding: 20px; background: #111827; }.evidence-preview-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 16px 45px rgba(0,0,0,.32); }
.day-detail-readonly > span { flex: 0 0 auto; font-size: 14px; }
.day-detail-readonly strong,
.day-detail-readonly small { display: block; }
.day-detail-readonly strong { color: #4f49cf; font-size: 10px; }
.day-detail-readonly small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.5; }

/* 临时任务：列表和侧栏共用同一套可点击详情交互。 */
.temporary-card {
  outline: 0;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.temporary-card:hover,
.temporary-card:focus-visible {
  transform: translateY(-2px);
  border-color: #c9c5f8;
  box-shadow: 0 10px 24px rgba(37,43,75,.09);
}
.focus-item {
  width: 100%;
  outline: 0;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.focus-item:hover,
.focus-item:focus-visible {
  transform: translateY(-1px);
  border-color: #c9c5f8;
  background: #f7f6ff;
}
.secondary-modal-backdrop { z-index: 60; background: rgba(18,22,40,.48); }
.temporary-task-detail-modal {
  width: min(620px,calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.temporary-detail-status {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f8f9fc;
}
.temporary-detail-status > div { min-width: 0; }
.temporary-detail-status strong,
.temporary-detail-status small { display: block; }
.temporary-detail-status strong { font-size: 11px; }
.temporary-detail-status small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.temporary-detail-actions { display: grid; grid-template-columns: auto 1fr auto auto; }
.temporary-detail-actions .temporary-delete-button {
  border-color: #f2c7cd;
  color: var(--red);
  background: #fff8f9;
}
.temporary-detail-actions .temporary-delete-button:hover { background: var(--red-soft); }

@media (max-width: 620px) {
  .temporary-detail-actions { grid-template-columns: 1fr 1fr; }
  .temporary-detail-actions > span { display: none; }
  .temporary-detail-actions button { width: 100%; }
  .temporary-assignees > div { grid-template-columns: 1fr; }
}

/* 周一至周六 18:20 的工作收尾提醒。 */
.daily-reminder-backdrop { z-index: 70; background: rgba(18,22,40,.5); }
.daily-reminder-modal {
  width: min(560px,calc(100vw - 40px));
  padding: 0;
  overflow: hidden;
}
.daily-reminder-head {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 32px;
  align-items: center;
  gap: 12px;
  padding: 20px 21px 17px;
  color: #fff;
  background: linear-gradient(135deg,#5b55df,#756ff1);
}
.daily-reminder-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.17);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  font-size: 21px;
  font-weight: 850;
}
.daily-reminder-head small { display: block; color: rgba(255,255,255,.76); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.daily-reminder-head h2 { margin: 5px 0 0; font-size: 19px; }
.daily-reminder-head > button { width: 32px; height: 32px; border: 0; border-radius: 9px; color: #fff; background: rgba(255,255,255,.13); cursor: pointer; font-size: 19px; }
.daily-reminder-head > button:hover { background: rgba(255,255,255,.23); }
.daily-reminder-summary { margin: 18px 21px 0; color: #596277; font-size: 11px; line-height: 1.65; }
.daily-reminder-list { max-height: min(300px,38vh); display: grid; gap: 8px; overflow-y: auto; margin: 14px 21px 0; }
.daily-reminder-item { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfc; }
.daily-reminder-item > span { padding: 6px 5px; border-radius: 7px; color: var(--primary); background: var(--primary-soft); text-align: center; font-size: 8px; font-weight: 800; }
.daily-reminder-item > span.temporary { color: var(--orange); background: var(--orange-soft); }
.daily-reminder-item strong, .daily-reminder-item small { display: block; }
.daily-reminder-item strong { overflow-wrap: anywhere; font-size: 11px; }
.daily-reminder-item small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.daily-reminder-rule { display: flex; align-items: center; gap: 10px; margin: 14px 21px 0; padding: 11px 12px; border-radius: 10px; color: #596277; background: #f5f6fa; }
.daily-reminder-rule > span { width: 27px; height: 27px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 10px; font-weight: 800; }
.daily-reminder-rule p { margin: 0; }
.daily-reminder-rule strong, .daily-reminder-rule small { display: block; }
.daily-reminder-rule strong { font-size: 9px; }
.daily-reminder-rule small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.daily-reminder-modal .user-modal-actions { margin: 17px 21px 20px; }
.daily-reminder-modal #openDailyReminderTasks { border-color: var(--primary); color: #fff; background: var(--primary); }

/* 当日仍可继续提交，使用“进行中”而不是提前判为未完成。 */
.calendar-legend .blue::before { background: var(--primary); }
.calendar-day.in-progress {
  border-color: #d2cffb;
  background: var(--primary-soft);
}
.calendar-day.in-progress .calendar-day-top span { background: var(--primary); }
.calendar-day.in-progress > b { color: var(--primary); }
.day-task-detail.in-progress { border-color: #d8d5fb; background: #fcfbff; }
.day-task-detail.in-progress .day-task-status { background: var(--primary); }
.day-task-detail.in-progress .day-task-completion-time b { color: var(--primary); }